[Common] Logout

packages/api/common/src/hooks/auth/index.ts

@@ -1 +1,2 @@
 export * from './usePostLoginCode';
+export * from './useDeleteLogout';

packages/api/common/src/hooks/auth/useDeleteLogout.ts

@@ -0,0 +1,13 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { authUrl, authQueryKeys, del } from 'api/common';
+
+export const useDeleteLogout = () =>
+  useMutation(authQueryKeys.deleteAuth(), () =>
+    del(authUrl.deleteAuth(), {
+      headers: {
+        RefreshToken: `${localStorage.getItem('refresh_token')}`,
+        Authorization: `Bearer ${localStorage.getItem('access_token')}`,
+      },
+    })
+  );

packages/api/common/src/libs/queryKeys.ts

@@ -1,6 +1,7 @@
 export const authQueryKeys = {
   patchAccessToken: () => ['auth', 'accessToken'],
   postLoginCode: () => ['auth', 'loginCode'],
+  deleteAuth: () => ['auth', 'logout'],
 };
 
 export const itemQueryKeys = {

packages/api/common/src/libs/urlController.ts

@@ -1,6 +1,7 @@
 export const authUrl = {
   auth: () => `/auth/${process.env.NEXT_PUBLIC_ROLE}`,
   patchToken: () => '/auth',
+  deleteAuth: () => '/auth',
 } as const;
 
 export const itemUrl = {

packages/common/src/components/Header/index.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import { usePathname } from 'next/navigation';
+import { useRef } from 'react';
+
+import { usePathname, useRouter } from 'next/navigation';
 
 import {
   HomeIcon,
@@ -10,6 +12,10 @@ import {
   ShopIcon,
   MadeIcon,
 } from 'common/assets';
+import { Modal } from 'common/components';
+import { toast } from 'react-toastify';
+
+import { useDeleteLogout } from 'api/common';
 
 import * as S from './style';
 
@@ -19,6 +25,11 @@ interface HeaderProps {
 
 const Header: React.FC<HeaderProps> = ({ role }) => {
   const pathname = usePathname();
+  const dialog = useRef<HTMLDialogElement>(null);
+
+  const { push } = useRouter();
+
+  const { mutate, isSuccess, isError } = useDeleteLogout();
 
   if (pathname === '/auth/login') return <></>;
 
@@ -30,6 +41,20 @@ const Header: React.FC<HeaderProps> = ({ role }) => {
 
   const getIsActive = (targetPath: string) => pathname === targetPath;
 
+  const onClick = () => {
+    mutate();
+  };
+
+  if (isSuccess) {
+    ['access_token', 'refresh_token'].forEach((token) =>
+      localStorage.removeItem(token)
+    );
+    push('/auth/login');
+    toast.success('로그아웃 되었습니다.');
+  }
+
+  if (isError) toast.success('로그아웃에 실패했습니다.');
+
   return (
     <S.HeaderWrapper>
       <S.HeaderContainer>
@@ -96,8 +121,14 @@ const Header: React.FC<HeaderProps> = ({ role }) => {
             <RankingIcon />
             <S.ItemTitle>랭킹</S.ItemTitle>
           </S.MenuFillItemWrapper>
+          <S.LogoutTitle onClick={() => dialog.current?.showModal()}>
+            로그아웃
+          </S.LogoutTitle>
         </S.MenuNav>
       </S.HeaderContainer>
+      <S.ModalWrapper ref={dialog}>
+        <Modal onClick={onClick} content='로그아웃 하시겠습니까?' />
+      </S.ModalWrapper>
     </S.HeaderWrapper>
   );
 };

packages/common/src/components/Header/style.ts

@@ -109,4 +109,24 @@ export const Title = styled.span`
   color: #444872;
   font-weight: 700;
   margin-left: 0.9375rem;
+  display: flex;
+  align-items: center;
+`;
+
+export const LogoutTitle = styled.span`
+  ${({ theme }) => theme.typo.body3};
+  color: ${({ theme }) => theme.color.primary};
+  display: flex;
+  align-items: center;
+  margin-left: 1rem;
+  cursor: pointer;
+
+  &:hover {
+    color: #ffd79b;
+  }
+`;
+export const ModalWrapper = styled.dialog`
+  border-radius: 1.25rem;
+  border: 0;
+  padding: 0;
 `;

packages/common/src/components/index.ts

@@ -7,6 +7,7 @@ export { default as LoginButton } from './LoginButton';
 export { default as MainContents } from './MainContents';
 export { default as MissionDetailInput } from './MissionDetailInput ';
 export { default as RankingCard } from './RankingCard';
+export { default as Modal } from './Modal';
 export { default as RankingItem } from './RankingItem';
 export { default as RankingList } from './RankingList';
 export { default as TaskCard } from './TaskCard';

projects/admin/src/components/ShopItemCard/index.tsx

@@ -6,11 +6,9 @@ import Image from 'next/image';
 
 import { toast } from 'react-toastify';
 
-import { Modal } from 'admin/components';
-
 import { usePatchOrderStatus } from 'api/admin';
 
-import { slicePoint } from 'common';
+import { slicePoint, Modal } from 'common';
 
 import * as S from './style';
 

projects/admin/src/components/index.ts

@@ -1,6 +1,5 @@
 export { default as GradingContainer } from './GradingCotainer';
 export { default as MissionCarousel } from './MissionCarousel';
-export { default as Modal } from './Modal';
 export { default as ShopCarousel } from './ShopCarousel';
 export { default as ShopItemCard } from './ShopItemCard';
 export { default as Timer } from './Timer';