[Fix] 로그인 2번 눌러야 헤더에 반영되는 문제 수정

[Fix] 로그인 2번 눌러야 헤더에 반영되는 문제 수정

apps/client/src/App.tsx

@@ -1,15 +1,16 @@
 import { Outlet } from 'react-router-dom';
 import Header from '@components/Header';
 import './App.css';
+import { AuthProvider } from './contexts/AuthContext';
 
 function App() {
   return (
-    <>
+    <AuthProvider>
       <Header />
       <main className="h-full">
         <Outlet />
       </main>
-    </>
+    </AuthProvider>
   );
 }
 

apps/client/src/components/Header/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import { Button } from '@components/ui/button';
 import { useNavigate } from 'react-router-dom';
 import { cn } from '@utils/utils';
@@ -7,6 +7,7 @@ import { createPortal } from 'react-dom';
 import Modal from '@components/Modal';
 import WelcomeCharacter from '@components/WelcomeCharacter';
 import { useAuth } from '@hooks/useAuth';
+import { AuthContext } from '@/contexts/AuthContext';
 import { Avatar, AvatarFallback, AvatarImage } from '@components/ui/avatar';
 import axiosInstance from '@/services/axios';
 
@@ -17,7 +18,8 @@ function Header() {
   const [profileImgUrl, setProfileImgUrl] = useState<string>('');
   const navigate = useNavigate();
 
-  const { isLoggedIn, requestLogIn, logout } = useAuth();
+  const { requestLogIn, logout } = useAuth();
+  const { isLoggedIn } = useContext(AuthContext);
 
   const handleLogoClick = () => {
     navigate('/');

apps/client/src/contexts/AuthContext.tsx

@@ -0,0 +1,18 @@
+import React, { createContext, useState } from 'react';
+
+interface AuthContextInterface {
+  isLoggedIn: boolean;
+  setIsLoggedIn: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const initialState = {
+  isLoggedIn: !!localStorage.getItem('accessToken'),
+  setIsLoggedIn: () => {},
+};
+
+export const AuthContext = createContext<AuthContextInterface>(initialState);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [isLoggedIn, setIsLoggedIn] = useState(() => !!localStorage.getItem('accessToken'));
+  return <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>{children}</AuthContext.Provider>;
+}

apps/client/src/hooks/useAuth.ts

@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'react';
+import { AuthContext } from '@contexts/AuthContext';
+import { useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export const useAuth = () => {
-  const [isLoggedIn, setIsLoggedIn] = useState(localStorage.getItem('accessToken') ? true : false);
   const navigate = useNavigate();
+  const { setIsLoggedIn } = useContext(AuthContext);
 
   const requestLogIn = (provider: 'github' | 'google') => {
     window.location.href = `${import.meta.env.VITE_API_SERVER_URL}/v1/auth/signin/${provider}`;
@@ -12,7 +13,6 @@ export const useAuth = () => {
   const setLogIn = (accessToken: string) => {
     localStorage.setItem('accessToken', accessToken);
     setIsLoggedIn(true);
-    navigate('/');
   };
 
   const logout = () => {
@@ -22,11 +22,8 @@ export const useAuth = () => {
   };
 
   useEffect(() => {
-    const accessToken = localStorage.getItem('accessToken');
-    if (accessToken) {
-      setIsLoggedIn(true);
-    }
+    setIsLoggedIn(!!localStorage.getItem('accessToken'));
   }, []);
 
-  return { isLoggedIn, requestLogIn, setLogIn, logout };
+  return { requestLogIn, setLogIn, logout };
 };

apps/client/src/pages/Auth/index.tsx

@@ -1,29 +1,41 @@
-import { useAuth } from '@/hooks/useAuth';
-import { useEffect } from 'react';
+import ErrorCharacter from '@components/ErrorCharacter';
+import { useAuth } from '@hooks/useAuth';
+import { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 function Auth() {
   const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
   const { setLogIn } = useAuth();
+  const navigate = useNavigate();
+  const [error, setError] = useState<Error | null>(null);
 
-  const handleCallback = async () => {
-    const accessToken = searchParams.get('accessToken');
-    if (!accessToken) throw new Error('액세스 토큰을 받지 못했습니다.');
+  useEffect(() => {
+    try {
+      const accessToken = searchParams.get('accessToken');
+      if (!accessToken) {
+        throw new Error('액세스 토큰을 받지 못했습니다.');
+      }
 
-    setLogIn(accessToken);
-    navigate('/');
-  };
+      setLogIn(accessToken);
+      navigate('/', { replace: true });
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('로그인 처리 중 오류'));
+      setTimeout(() => {
+        navigate('/', { replace: true });
+      }, 3000);
+    }
+  }, []);
 
-  useEffect(() => {
-    handleCallback();
-  }, [searchParams]);
   return (
     <div className="flex items-center justify-center min-h-screen">
-      <div>
-        <h2 className="text-display-bold24 text-text-strong">로그인 처리 중입니다.</h2>
-        <p className="text-text-default text-display-medium16">잠시만 기다려주세요!!!!</p>
-      </div>
+      {error ? (
+        <ErrorCharacter size={400} message={error.message} />
+      ) : (
+        <div>
+          <h2 className="text-display-bold24 text-text-strong">로그인 처리 중입니다.</h2>
+          <p className="text-text-default text-display-medium16">잠시만 기다려주세요!!!!</p>
+        </div>
+      )}
     </div>
   );
 }