adminfront 로그인 해결

adminfront/src/features/auth/AuthCallbackPage.tsx

@@ -1,29 +1,25 @@
 import { ShieldHalf } from "lucide-react";
 import { useEffect } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useAuth } from "react-oidc-context";
+import { useNavigate } from "react-router-dom";
 
 function AuthCallbackPage() {
+  const auth = useAuth();
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
 
   useEffect(() => {
-    const token = searchParams.get("token");
-    if (token) {
-      window.localStorage.setItem("admin_session", token);
-
-      // 만약 팝업창에서 실행 중이라면 부모 창에 알리고 닫기
-      if (window.opener) {
-        window.opener.postMessage({ type: "LOGIN_SUCCESS", token }, "*");
-        window.close();
-      } else {
-        // 일반 리다이렉트 방식인 경우 홈으로 이동
-        navigate("/", { replace: true });
+    if (auth.isAuthenticated) {
+      // Save token to localStorage for existing API clients that might still use it
+      const user = auth.user;
+      if (user?.access_token) {
+        window.localStorage.setItem("admin_session", user.access_token);
       }
-    } else {
-      console.error("No token found in callback URL");
+      navigate("/", { replace: true });
+    } else if (auth.error) {
+      console.error("Auth Error:", auth.error);
       navigate("/login", { replace: true });
     }
-  }, [navigate, searchParams]);
+  }, [auth.isAuthenticated, auth.error, navigate, auth.user]);
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-background">

adminfront/src/features/auth/LoginPage.tsx

@@ -1,6 +1,5 @@
 import { ExternalLink, LogIn, ShieldHalf } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useAuth } from "react-oidc-context";
 import { Button } from "../../components/ui/button";
 import {
   Card,
@@ -11,53 +10,11 @@ import {
 } from "../../components/ui/card";
 
 function LoginPage() {
-  const navigate = useNavigate();
-  const [isLoggingIn, setIsLoggingIn] = useState(false);
-
-  useEffect(() => {
-    // Listen for login success message from the popup
-    const handleMessage = (event: MessageEvent) => {
-      // Security check: In production, verify event.origin
-      if (event.data?.type === "LOGIN_SUCCESS" && event.data?.token) {
-        window.localStorage.setItem("admin_session", event.data.token);
-        setIsLoggingIn(false);
-        navigate("/");
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [navigate]);
+  const auth = useAuth();
 
   const handleSSOLogin = () => {
-    const userfrontUrl = import.meta.env.USERFRONT_URL || "https://sso.hmac.kr";
-    const callbackUrl = `${window.location.origin}/auth/callback`;
-
-    // 항상 redirect_uri를 포함하여 로그인이 성공하면 콜백 페이지로 오도록 함
-    const loginUrl = `${userfrontUrl}/signin?source=adminfront&redirect_uri=${encodeURIComponent(callbackUrl)}`;
-
-    const width = 500;
-    const height = 700;
-    const left = window.screen.width / 2 - width / 2;
-    const top = window.screen.height / 2 - height / 2;
-
-    const popup = window.open(
-      loginUrl,
-      "BaronSSOLogin",
-      `width=${width},height=${height},top=${top},left=${left},status=no,menubar=no,toolbar=no`,
-    );
-
-    if (popup) {
-      setIsLoggingIn(true);
-      const timer = setInterval(() => {
-        if (popup.closed) {
-          clearInterval(timer);
-          setIsLoggingIn(false);
-        }
-      }, 1000);
-    } else {
-      alert("팝업 차단이 설정되어 있습니다. 팝업 허용 후 다시 시도해 주세요.");
-    }
+    // OIDC client-side authentication flow started here
+    auth.signinRedirect();
   };
 
   return (
@@ -89,9 +46,9 @@ function LoginPage() {
             <Button
               onClick={handleSSOLogin}
               className="w-full h-14 text-lg font-semibold flex gap-3 shadow-lg"
-              disabled={isLoggingIn}
+              disabled={auth.isLoading}
             >
-              {isLoggingIn ? (
+              {auth.isLoading ? (
                 <>
                   <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                   로그인 진행 중...