Merge pull request #162 from Team-INSERT/feat/logout

로그아웃 기능 구현

Author: Ubinquitous

src/@user/hooks/useUser.tsx

@@ -14,9 +14,11 @@ import { useModal } from "@/@modal/hooks";
 import { User } from "../types";
 import { userContext } from "../context";
 import { ROLE } from "../constants";
+import { useLogoutMutation } from "../services/mutation.service";
 
 const useUser = () => {
   const [user, setUser] = useAtom(userContext);
+  const { mutate } = useLogoutMutation();
   const { openModal } = useModal();
 
   const {
@@ -33,6 +35,8 @@ const useUser = () => {
     { enabled: !!Storage.getItem(TOKEN.ACCESS) },
   );
 
+  const logout = () => mutate();
+
   const isSameUser = (id: number) => {
     return userInfo?.id === id;
   };
@@ -70,6 +74,7 @@ const useUser = () => {
     isAdmin: userInfo?.authority === ROLE.ADMIN,
     role: userInfo?.role === "STUDENT" ? "학생" : "선생님",
     isSameUser,
+    logout,
   };
 };
 

src/@user/services/api.service.ts

@@ -0,0 +1,9 @@
+import httpClient from "@/apis/httpClient";
+import Storage from "@/storage";
+
+export const logout = async () => {
+  const { data } = await httpClient.auth.logout({
+    headers: { refresh_token: Storage.getItem("TOKEN:REFRESH") },
+  });
+  return data;
+};

src/@user/services/mutation.service.ts

@@ -0,0 +1,15 @@
+import { KEY } from "@/constants";
+import Storage from "@/storage";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { logout } from "./api.service";
+
+export const useLogoutMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation(logout, {
+    onSettled: () => {
+      queryClient.invalidateQueries([KEY.USER]);
+      Storage.delItem("TOKEN:ACCESS");
+      Storage.delItem("TOKEN:REFRESH");
+    },
+  });
+};

src/apis/httpClient/httpClient.ts

@@ -91,6 +91,13 @@ export class HttpClient {
     });
   }
 
+  logout(requestConfig?: AxiosRequestConfig) {
+    return this.api.delete("/logout", {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
   put(data: unknown, requestConfig?: AxiosRequestConfig) {
     return this.api.put("", data, {
       ...HttpClient.clientConfig,

src/components/common/Header/@setting/layouts/setting.tsx

@@ -3,20 +3,23 @@ import styled from "styled-components";
 import { XIcon } from "@/assets/icons";
 import { theme, flex, font } from "@/styles";
 import { useModal } from "@/@modal/hooks";
+import { useUser } from "@/@user/hooks";
+import { Button } from "@/components/atoms";
 
 const SettingModal = () => {
   const { closeModal } = useModal();
+  const { logout } = useUser();
 
   return (
     <Modal>
       <ModalContent>
         <SettingBox>
           <SettingText>설정</SettingText>
-          <ExitButton>
-            <XIcon onClick={closeModal} />
-          </ExitButton>
+          <XIcon onClick={closeModal} />
         </SettingBox>
-        <LogoutBox>로그아웃</LogoutBox>
+        <Button color={theme.primary_blue} onClick={logout}>
+          로그아웃
+        </Button>
       </ModalContent>
     </Modal>
   );
@@ -34,7 +37,6 @@ const Modal = styled.div`
 
 const ModalContent = styled.div`
   background-color: ${theme.white};
-  padding: 1.5%;
   border-radius: 3%;
 `;
 
@@ -47,23 +49,4 @@ const SettingText = styled.p`
   ${font.H4};
 `;
 
-const ExitButton = styled.div`
-  margin-left: 17rem;
-`;
-
-const LogoutBox = styled.div`
-  ${flex.CENTER};
-  margin-top: 7%;
-  padding: 2%;
-  border-radius: 5%;
-  background-color: ${theme.btn_background};
-  color: ${theme.black};
-  ${font.H4};
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${theme.content};
-  }
-`;
-
 export default SettingModal;

src/styles/font.ts

@@ -4,7 +4,6 @@ const fontGenerator = (
   lineHeight: number,
   letterSpacing: number,
 ) => `
-    font-family: 'Pretendard', sans-serif;
     font-weight: ${weight};
     font-size: ${size}rem;
     line-height: ${lineHeight}%;

src/styles/globalStyle.ts

@@ -4,7 +4,10 @@ import { createGlobalStyle } from "styled-components";
 import { theme } from ".";
 
 const GlobalStyle = createGlobalStyle`
+  @import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css");
+
   * {
+    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
     margin: 0;
     padding: 0;
     box-sizing: border-box;