OIDC 인증 라우트 및 로그인/콜백 페이지 구현

devfront/src/features/auth/AuthCallbackPage.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useAuth } from "react-oidc-context";
+import { useNavigate } from "react-router-dom";
+
+export default function AuthCallbackPage() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (auth.isAuthenticated) {
+      navigate("/", { replace: true });
+    } else if (auth.error) {
+      console.error("Auth Error:", auth.error);
+      navigate("/login", { replace: true });
+    }
+  }, [auth.isAuthenticated, auth.error, navigate]);
+
+  return <div>Loading Auth...</div>;
+}

devfront/src/features/auth/AuthGuard.tsx

@@ -0,0 +1,20 @@
+import { useAuth } from "react-oidc-context";
+import { Navigate, Outlet } from "react-router-dom";
+
+export default function AuthGuard() {
+  const auth = useAuth();
+
+  if (auth.isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (auth.error) {
+    return <div>Auth Error: {auth.error.message}</div>;
+  }
+
+  if (!auth.isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <Outlet />;
+}

devfront/src/features/auth/LoginPage.tsx

@@ -0,0 +1,23 @@
+import { useAuth } from "react-oidc-context";
+
+export default function LoginPage() {
+  const auth = useAuth();
+
+  const handleLogin = () => {
+    auth.signinRedirect();
+  };
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-gray-100">
+      <div className="w-full max-w-sm rounded-lg border bg-white p-8 shadow-sm">
+        <h1 className="mb-6 text-center text-2xl font-bold text-gray-900">DevFront Login</h1>
+        <button
+          onClick={handleLogin}
+          className="w-full rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+        >
+          Sign in with Baron SSO
+        </button>
+      </div>
+    </div>
+  );
+}

devfront/src/features/auth/authApi.ts

@@ -0,0 +1,22 @@
+import apiClient from "../../lib/apiClient";
+
+export interface Tenant {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface UserProfile {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  companyCode?: string;
+  tenantId?: string;
+  tenant?: Tenant;
+}
+
+export async function fetchMe() {
+  const { data } = await apiClient.get<UserProfile>("/user/me");
+  return data;
+}