From 4321352ff9503ad46711bab6e3b08bbe1598eb2e Mon Sep 17 00:00:00 2001
From: fuse <massenger7@gmail.com>
Date: Thu, 17 Aug 2023 14:30:51 +0900
Subject: [PATCH] =?UTF-8?q?#104=20refactor:=20=EC=83=88=EB=A1=9C=EA=B3=A0?=
 =?UTF-8?q?=EC=B9=A8=20=ED=95=B4=EB=8F=84=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=EA=B0=80=20=EC=9C=A0=EC=A7=80=EB=90=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=9D=B4?=
 =?UTF-8?q?=EC=8A=88=EB=AA=A9=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/context/AuthProvider.tsx | 22 +++++++++++++++++---
 frontend/src/pages/Issues.tsx         | 29 +++++++++++++++++++++++++++
 frontend/src/pages/Login.tsx          |  7 +++++--
 frontend/src/routes/RequireAuth.tsx   |  4 ++--
 4 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/frontend/src/context/AuthProvider.tsx b/frontend/src/context/AuthProvider.tsx
index 0b9bafb1a..baa57a1ed 100644
--- a/frontend/src/context/AuthProvider.tsx
+++ b/frontend/src/context/AuthProvider.tsx
@@ -1,7 +1,7 @@
 import { useState, createContext, ReactElement } from 'react';
 
 export type AuthUser = {
-  userId: string;
+  userId: number;
   userName: string;
   profileImg: string;
   accessToken: string;
@@ -9,6 +9,7 @@ export type AuthUser = {
 
 export type AuthContextType = {
   auth: AuthUser | null;
+  isAuthenticated: boolean;
   setAuth: React.Dispatch<React.SetStateAction<AuthUser | null>>;
   login: (authUser: AuthUser) => void;
   logout: () => void;
@@ -17,18 +18,33 @@ export type AuthContextType = {
 export const AuthContext = createContext<AuthContextType>(null);
 
 export function AuthProvider({ children }: { children: ReactElement }) {
-  const [auth, setAuth] = useState<AuthUser>(null);
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(
+    localStorage.getItem('userId') ? true : false
+  );
+  const [auth, setAuth] = useState<AuthUser>(
+    localStorage.getItem('userId')
+      ? {
+          userId: JSON.parse(localStorage.getItem('userId')!) as number,
+          userName: localStorage.getItem('userName') as string,
+          profileImg: localStorage.getItem('profileImg') as string,
+          accessToken: localStorage.getItem('accessToken') as string,
+        }
+      : null
+  );
 
   const login = (authUser: AuthUser) => {
+    setIsAuthenticated(true);
     setAuth(authUser);
   };
 
   const logout = () => {
+    setIsAuthenticated(false);
     setAuth(null);
   };
 
   return (
-    <AuthContext.Provider value={{ auth, setAuth, login, logout }}>
+    <AuthContext.Provider
+      value={{ auth, isAuthenticated, setAuth, login, logout }}>
       {children}
     </AuthContext.Provider>
   );
diff --git a/frontend/src/pages/Issues.tsx b/frontend/src/pages/Issues.tsx
index a771949f3..05c27cab8 100644
--- a/frontend/src/pages/Issues.tsx
+++ b/frontend/src/pages/Issues.tsx
@@ -1,5 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { AppContext } from '../main';
+import useAuth from '../hooks/useAuth';
 import Header from '../components/landmark/Header';
 import IssueTable from '../components/issues/IssueTable';
 import Main from '../components/landmark/Main';
@@ -16,7 +18,9 @@ import useAxiosPrivate from '../hooks/useAxiosPrivate';
 
 export default function Issues() {
   const { util } = useContext(AppContext);
+  const { auth, logout } = useAuth();
   const logo = (util.getLogoByTheme() as ContextLogo).medium;
+  const navigate = useNavigate();
   const axiosPrivate = useAxiosPrivate();
 
   const [data, setData] = useState<Data>({
@@ -99,6 +103,28 @@ export default function Issues() {
   //   };
   //   fetchData();
   // }, []);
+  const handleLogout = async () => {
+    if (!auth) {
+      return;
+    }
+
+    try {
+      const res = await axiosPrivate.post('/api/logout', null, {
+        headers: { 'Content-Type': 'application/json' },
+        withCredentials: true,
+      });
+
+      if (res.status === 200) {
+        localStorage.clear();
+        logout();
+        navigate('/login');
+      } else {
+        console.error('로그아웃 실패:', res.status);
+      }
+    } catch (err) {
+      console.error('로그아웃 에러:', err);
+    }
+  };
 
   return (
     <Layout>
@@ -106,6 +132,9 @@ export default function Issues() {
         <Link to="/">
           <img src={logo} alt="이슈트래커" />
         </Link>
+        <Button type="button" ghost onClick={handleLogout}>
+          로그아웃
+        </Button>
         <div>
           {/* profile */}
           popopo
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 3f5cbbb80..ca85f0053 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -49,6 +49,9 @@ export default function Login() {
       );
 
       if (res.status === 200) {
+        localStorage.setItem('userId', res.data.message.userId);
+        localStorage.setItem('userName', res.data.message.userName);
+        localStorage.setItem('profileImg', res.data.message.profileImgUrl);
         localStorage.setItem('accessToken', res.data.message.accessToken);
         localStorage.setItem('refreshToken', res.data.message.refreshToken);
         login({
@@ -105,7 +108,7 @@ export default function Login() {
         <TextInput
           id="userId"
           name="userId"
-          size="tall"
+          sizeType="tall"
           labelName="아이디"
           value={userId}
           onChange={handleChange}
@@ -116,7 +119,7 @@ export default function Login() {
         <TextInput
           id="password"
           name="password"
-          size="tall"
+          sizeType="tall"
           type="password"
           value={password}
           onChange={handleChange}
diff --git a/frontend/src/routes/RequireAuth.tsx b/frontend/src/routes/RequireAuth.tsx
index c35b17dbd..a83291866 100644
--- a/frontend/src/routes/RequireAuth.tsx
+++ b/frontend/src/routes/RequireAuth.tsx
@@ -2,10 +2,10 @@ import { useLocation, Navigate, Outlet } from 'react-router-dom';
 import useAuth from '../hooks/useAuth';
 
 function RequireAuth() {
-  const { auth } = useAuth();
+  const { isAuthenticated } = useAuth();
   const location = useLocation();
 
-  return auth?.userId ? (
+  return isAuthenticated ? (
     <Outlet />
   ) : (
     <Navigate to="/login" state={{ from: location }} replace />