From dd6f1b12c793ff94425e478e166d49f10494e746 Mon Sep 17 00:00:00 2001
From: Dongpil Jo <91816664+eastfilmm@users.noreply.github.com>
Date: Thu, 6 Jun 2024 09:38:10 +0900
Subject: [PATCH] Feat/44 signin route (#49)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: rootpage 에서 accessToken 없을때, signin page 로 navigate

* feat: logout api 부재로 임시 함수로 accessToken remove

* feat: refresh token 로직 변경

* feat: signin 수정 완료
---
 src/apis/auth/auth.api.ts                      | 15 +++++++++++++++
 src/components/common/header/HeaderSubMenu.tsx |  9 +++++++--
 src/pages/RootPage.tsx                         | 12 +++++++++++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/apis/auth/auth.api.ts b/src/apis/auth/auth.api.ts
index 3c6cfa6..ab660d6 100644
--- a/src/apis/auth/auth.api.ts
+++ b/src/apis/auth/auth.api.ts
@@ -26,3 +26,18 @@ export async function authApi(
     throw error;
   }
 }
+
+export async function logout(): Promise<AuthAPIRequest> {
+  try {
+    const response = await axios.post(`${BASE_URI}/users/signout`, {
+      withCredentials: true,
+    });
+    localStorage.removeItem('accessToken');
+    localStorage.removeItem('refreshToken');
+    console.log('sign out successfully');
+    return response.data;
+  } catch (error) {
+    console.error('Error during sign out:', error);
+    throw error;
+  }
+}
diff --git a/src/components/common/header/HeaderSubMenu.tsx b/src/components/common/header/HeaderSubMenu.tsx
index ea9b519..ce24427 100644
--- a/src/components/common/header/HeaderSubMenu.tsx
+++ b/src/components/common/header/HeaderSubMenu.tsx
@@ -1,4 +1,4 @@
-import { Typography, Space, Dropdown, Menu } from 'antd';
+import { Typography, Space, Dropdown, Menu, message } from 'antd';
 import { useRecoilState } from 'recoil';
 
 import {
@@ -11,10 +11,13 @@ import {
   selectedInviteModalState,
 } from '@finnect/atoms/header/useHeaderMenu';
 import InviteModal from '@finnect/components/common/modal/header/InviteModal';
+import { logout } from '@finnect/apis/auth/auth.api';
+import { useNavigate } from 'react-router-dom';
 
 const { Text } = Typography;
 
 const HeaderSubMenu = () => {
+  const navigate = useNavigate();
   const [visible, setVisible] = useRecoilState(selectedHeaderMenuState);
   const [inviteModalVisible, setInviteModalVisible] = useRecoilState(
     selectedInviteModalState
@@ -22,8 +25,10 @@ const HeaderSubMenu = () => {
 
   const handleMenuClick = (e: any) => {
     if (e.key === 'logout') {
-      // 로그아웃 처리
+      logout();
+      navigate('/signin');
       console.log('로그아웃');
+      return message.success('로그아웃 성공.');
     } else if (e.key === 'invite') {
       setInviteModalVisible(true);
     }
diff --git a/src/pages/RootPage.tsx b/src/pages/RootPage.tsx
index c6362f4..3cee821 100644
--- a/src/pages/RootPage.tsx
+++ b/src/pages/RootPage.tsx
@@ -1,4 +1,5 @@
-import { Outlet } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useNavigate, Outlet } from 'react-router-dom';
 
 import { Layout } from 'antd';
 import styled from 'styled-components';
@@ -14,6 +15,15 @@ const CustomLayout = styled(Layout)`
 `;
 
 const RootPage = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const accessToken = localStorage.getItem('accessToken');
+    if (!accessToken) {
+      navigate('/signin');
+    }
+  }, [navigate]);
+
   return (
     <CustomLayout>
       <Layout style={{ width: '100%', display: 'flex' }}>