Merge pull request #103 from CoolPeace-yanolza/feature/#102

[#102] 로그아웃 API 연결

src/api/index.ts

@@ -1,5 +1,6 @@
 export { default as instance } from './lib/instance';
 export { default as postLogin } from './lib/postLogin';
+export { default as postLogout } from './lib/postLogout';
 export { default as postRefreshToken } from './lib/postRefreshToken';
 export {
   getCouponList,

src/api/lib/instance.ts

@@ -63,6 +63,10 @@ const onErrorResponse = async (error: AxiosResponseError<string>) => {
         // 리프레시 토큰도 만료되었을 때 = 재로그인 안내
       } else if (tokenResponse.status === 404) {
         console.log(tokenResponse.data.message);
+        // await postLogout();
+        // deleteAllCookies();
+        // navigate('/login');
+
         return Promise.reject(error);
       }
     }

src/api/lib/postLogout.ts

@@ -0,0 +1,20 @@
+// import { AxiosError } from 'axios';
+
+import { instance } from '..';
+
+const postLogout = async () => {
+  await instance.post('/v1/member/logout');
+
+  /* HACK: 로그아웃 에러 response 가 있을 경우 사용
+
+  try {
+    const response = await instance.post('/v1/member/logouts');
+    return response;
+  } catch (error) {
+    if (error instanceof AxiosError) error.response;
+  }
+
+  */
+};
+
+export default postLogout;

src/components/common/Layout/Header/User/UserModal/index.tsx

@@ -1,21 +1,79 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
+import { ErrorModal } from '@components/common';
+import { postLogout } from 'src/api';
+import { getCookies, deleteAllCookies } from '@utils/lib/cookies';
 import { UserModal, UserModalStyleProps } from '@/types/layout';
-import { getCookies } from '@utils/lib/cookies';
+import ERROR_MODAL_MESSAGE from 'src/constants/lib/ERROR_MODAL_MESSAGE';
 import theme from '@styles/theme';
 
 const UserModal = ({ isOpen }: UserModal) => {
+  const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
+  const navigate = useNavigate();
+
   const userName = getCookies('userName');
   const userEmail = getCookies('userEmail');
 
+  const ButtonFunc = () => setIsErrorModalOpen(false);
+
+  const handleLogout = async () => {
+    await postLogout();
+    deleteAllCookies();
+    navigate('/login');
+    /* HACK: 로그아웃 에러 response 가 있을 경우 사용
+
+      [ 대안 1 ]
+      const response = await postLogout();
+
+      if (response === undefined) {
+        setIsErrorModalOpen(true);
+      } else if (response?.status === 200) {
+        deleteAllCookies();
+        navigate('/login');
+      }
+
+      [ 대안 2 ]
+        try {
+          const response = await postLogout();
+          deleteAllCookies();
+          navigate('/login');
+        }catch (error) {
+          const modalContent = {
+            text: '로그아웃에 실패하였습니다.',
+            errorText: '잠시후 재시도 해주세요.'
+          };
+
+          const ButtonFunc = () => {};
+
+          ErrorModal({ modalContent, ButtonFunc });
+        } 
+
+     */
+  };
+
   return (
-    <Modal $isOpen={isOpen}>
-      <UserInformation>
-        <Name $isOpen={isOpen}>{userName}</Name>
-        <Email $isOpen={isOpen}>{userEmail}</Email>
-      </UserInformation>
-      <Logout $isOpen={isOpen}>로그아웃</Logout>
-    </Modal>
+    <>
+      <Modal $isOpen={isOpen}>
+        <UserInformation>
+          <Name $isOpen={isOpen}>{userName}</Name>
+          <Email $isOpen={isOpen}>{userEmail}</Email>
+        </UserInformation>
+        <Logout
+          $isOpen={isOpen}
+          onClick={handleLogout}
+        >
+          로그아웃
+        </Logout>
+      </Modal>
+      {isErrorModalOpen && (
+        <ErrorModal
+          modalContent={ERROR_MODAL_MESSAGE.USER_MODAL}
+          ButtonFunc={ButtonFunc}
+        />
+      )}
+    </>
   );
 };
 

src/constants/lib/ERROR_MODAL_MESSAGE.ts

@@ -0,0 +1,12 @@
+const ERROR_MODAL_MESSAGE = {
+  LOGIN: {
+    text: '이메일 또는 비밀번호를 잘못 입력했습니다.',
+    errorText: '입력하신 내용을 다시 확인해주세요.'
+  },
+  USER_MODAL: {
+    text: '로그아웃에 실패하였습니다.',
+    errorText: '잠시후 재시도 해주세요.'
+  }
+};
+
+export default ERROR_MODAL_MESSAGE;

src/pages/Login/index.tsx

@@ -3,13 +3,10 @@ import styled from '@emotion/styled';
 
 import { ErrorModal, Footer } from '@components/common';
 import { LoginForm, LoginTitle } from '@components/Login';
+import ERROR_MODAL_MESSAGE from 'src/constants/lib/ERROR_MODAL_MESSAGE';
 
 const Login = () => {
-  const initialValue = {
-    text: '이메일 또는 비밀번호를 잘못 입력했습니다.',
-    errorText: '입력하신 내용을 다시 확인해주세요.'
-  };
-  const [modalContent, setModalContent] = useState(initialValue);
+  const [modalContent, setModalContent] = useState(ERROR_MODAL_MESSAGE.LOGIN);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalClose = () => setIsModalOpen(prev => !prev);

src/utils/index.ts

@@ -9,3 +9,4 @@ export {
 export { getUpdatedDate } from './lib/calculation';
 export { getStatusToLocaleString } from './lib/dashboard';
 export { getInputOptions } from './lib/auth';
+export { setCookies, getCookies, deleteAllCookies } from './lib/cookies';

src/utils/lib/cookies.ts

@@ -17,3 +17,10 @@ export const getCookies: GetCookies = name => {
     ?.split('=')[1];
   return cookieValue;
 };
+
+export const deleteAllCookies = () => {
+  document.cookie.split(';').forEach(cookie => {
+    const [name] = cookie.trim().split('=');
+    document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;`;
+  });
+};