feat: refresh 대응 위해 authContext localStorage 에 저장

apps/client/src/contexts/authContext.tsx

@@ -1,4 +1,12 @@
-import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  useEffect,
+} from 'react';
 
 export interface AuthContext {
   isAuthenticated: boolean;
@@ -8,6 +16,8 @@ export interface AuthContext {
   accessToken: string;
 }
 
+export const AUTH_STORAGE_KEY = 'auth_context';
+
 export const initialAuthContext: AuthContext = {
   isAuthenticated: false,
   login: async () => {},
@@ -16,12 +26,34 @@ export const initialAuthContext: AuthContext = {
   accessToken: '',
 };
 
+const loadInitialState = () => {
+  const savedState = localStorage.getItem(AUTH_STORAGE_KEY);
+  if (savedState) {
+    const { isAuthenticated, username, accessToken } = JSON.parse(savedState);
+    return { isAuthenticated, username, accessToken };
+  }
+
+  return {
+    isAuthenticated: false,
+    username: '',
+    accessToken: '',
+  };
+};
+
 const AuthContext = createContext<AuthContext>(initialAuthContext);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
-  const [username, setUsername] = useState<string>('');
-  const [accessToken, setAccessToken] = useState<string>('');
+  const initialState = loadInitialState();
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(initialState.isAuthenticated);
+  const [username, setUsername] = useState<string>(initialState.username);
+  const [accessToken, setAccessToken] = useState<string>(initialState.accessToken);
+
+  useEffect(() => {
+    localStorage.setItem(
+      AUTH_STORAGE_KEY,
+      JSON.stringify({ isAuthenticated, username, accessToken })
+    );
+  }, [isAuthenticated, username, accessToken]);
 
   const login = useCallback(async (username: string, accessToken: string) => {
     setIsAuthenticated(true);
@@ -54,6 +86,5 @@ export const useAuth = () => {
   if (!context) {
     throw new Error('useAuth must be used within an AuthProvider');
   }
-
   return context;
 };