From 3be064ad7bc11a263d5ff508bcbda5f6fe6628d0 Mon Sep 17 00:00:00 2001
From: PMtHk <zooby88@gmail.com>
Date: Tue, 19 Nov 2024 17:25:53 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20refresh=20=EB=8C=80=EC=9D=91=20?=
 =?UTF-8?q?=EC=9C=84=ED=95=B4=20authContext=20localStorage=20=EC=97=90=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/client/src/contexts/authContext.tsx | 41 +++++++++++++++++++++---
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/contexts/authContext.tsx b/apps/client/src/contexts/authContext.tsx
index 45fb9b9..5982236 100644
--- a/apps/client/src/contexts/authContext.tsx
+++ b/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;
 };