설정 페이지 작성, 로그아웃 추가

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>
   );

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

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');
+    },
+  });
+};