Feat/44 signin route (#49)

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

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

* feat: refresh token 로직 변경

* feat: signin 수정 완료

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;
+  }
+}

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,19 +11,24 @@ 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
   );
 
   const handleMenuClick = (e: any) => {
     if (e.key === 'logout') {
-      // 로그아웃 처리
+      logout();
+      navigate('/signin');
       console.log('로그아웃');
+      return message.success('로그아웃 성공.');
     } else if (e.key === 'invite') {
       setInviteModalVisible(true);
     }

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' }}>