From d11b6e7a0895dc1621021eeb8a19f1379bb6c321 Mon Sep 17 00:00:00 2001
From: YOOJS1205 <junsang8921@gmail.com>
Date: Sun, 28 Jan 2024 23:50:10 +0900
Subject: [PATCH] =?UTF-8?q?=EC=84=A4=EC=A0=95=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=9E=91=EC=84=B1,=20=EB=A1=9C=EA=B7=B8=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/icon16/arrow_square_16.svg |  4 ++++
 src/app/settings/layout.tsx              |  4 +++-
 src/app/settings/page.tsx                | 15 +++++++++++++--
 src/hooks/api/useLogout.ts               | 19 +++++++++++++++++++
 4 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 public/assets/icon16/arrow_square_16.svg
 create mode 100644 src/hooks/api/useLogout.ts

diff --git a/public/assets/icon16/arrow_square_16.svg b/public/assets/icon16/arrow_square_16.svg
new file mode 100644
index 00000000..e5f1521d
--- /dev/null
+++ b/public/assets/icon16/arrow_square_16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.66699 7.3335L14.667 1.3335M14.667 1.3335H11.1045M14.667 1.3335V4.896" stroke="#192028" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6663 8.00016C14.6663 11.1429 14.6663 12.7142 13.69 13.6905C12.7137 14.6668 11.1424 14.6668 7.99967 14.6668C4.85698 14.6668 3.28563 14.6668 2.30932 13.6905C1.33301 12.7142 1.33301 11.1429 1.33301 8.00016C1.33301 4.85747 1.33301 3.28612 2.30932 2.30981C3.28563 1.3335 4.85698 1.3335 7.99967 1.3335" stroke="#192028" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/app/settings/layout.tsx b/src/app/settings/layout.tsx
index 7811a1e0..a7797995 100644
--- a/src/app/settings/layout.tsx
+++ b/src/app/settings/layout.tsx
@@ -7,7 +7,9 @@ interface TermsLayoutProps {
 export default function layout({ children }: TermsLayoutProps) {
   return (
     <div>
-      <Header />
+      <Header>
+        <p className="body-16-bold">설정</p>
+      </Header>
       {children}
     </div>
   );
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 30968d37..86c9d30d 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -4,24 +4,35 @@ import { useRouter } from 'next/navigation';
 
 import { SETTINGS, Setting } from '@constants/settings';
 import RightArrowIcon from 'public/assets/icon24/right_arrow_24.svg';
+import ArrowSquareIcon from 'public/assets/icon16/arrow_square_16.svg';
+import { useLogout } from '@hooks/api/useLogout';
 
 export default function Page() {
   const { push } = useRouter();
+  const { mutate: logout } = useLogout();
 
   const handleClickSettingItem = (setting: Setting) => () => {
     if (setting.url) {
       push(setting.url);
     }
+
+    if (setting.title === '로그아웃') {
+      logout();
+    }
   };
+
   return (
     <ul className="pt-[56px]">
       {SETTINGS.map((setting, index) => (
         <li
           key={index}
-          className="flex justify-between items-center py-[8px] pl-[24px] pr-[16px] h-[56px]"
+          className="flex justify-between items-center py-[8px] pl-[24px] pr-[16px] h-[56px] cursor-pointer border-b-[1px] border-gray-100"
           onClick={handleClickSettingItem(setting)}
         >
-          <p className="body-16-bold">{setting.title}</p>
+          <div className="flex gap-[4px] items-center">
+            <p className="body-16-bold">{setting.title}</p>
+            {setting.url && <ArrowSquareIcon />}
+          </div>
           {setting.url && <RightArrowIcon />}
         </li>
       ))}
diff --git a/src/hooks/api/useLogout.ts b/src/hooks/api/useLogout.ts
new file mode 100644
index 00000000..38830a7a
--- /dev/null
+++ b/src/hooks/api/useLogout.ts
@@ -0,0 +1,19 @@
+import { useMutation, UseMutationResult } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import Cookies from 'js-cookie';
+import { useRouter } from 'next/navigation';
+
+import { logout } from '@utils/auth';
+
+export const useLogout = (): UseMutationResult<void, AxiosError, void> => {
+  const { push } = useRouter();
+  return useMutation({
+    mutationKey: ['logout'],
+    mutationFn: logout,
+    onSuccess: () => {
+      Cookies.remove('accessToken');
+      Cookies.remove('refreshToken');
+      push('/login');
+    },
+  });
+};