feat: 마이페이지 로그아웃 API 구현 (#86)

src/app/(auth)/_api/auth/auth.queries.ts

@@ -28,7 +28,13 @@ export const useReissueMutation = () => {
 };
 
 export const useDeleteSessionMutation = () => {
+  const queryClient = useQueryClient();
+
   return useMutation({
     mutationFn: deleteClientSession,
+    onSuccess: () => {
+      clearClientSessionCache();
+      queryClient.clear();
+    },
   });
 };

src/app/api/auth/logout/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+
+import { getSessionFromServer } from "@/lib/session/serverSession";
+
+export const DELETE = async () => {
+  try {
+    const session = await getSessionFromServer();
+    if (!session.isLoggedIn) {
+      return NextResponse.json(
+        { errorMessage: "세션이 존재하지 않습니다." },
+        { status: 401 }
+      );
+    }
+
+    await session.destroy();
+
+    return NextResponse.json({ message: "로그아웃 완료" }, { status: 200 });
+  } catch (error) {
+    console.error("로그아웃 중 에러:", error);
+    return NextResponse.json(
+      { errorMessage: "로그아웃 처리 중 오류가 발생했습니다." },
+      { status: 500 }
+    );
+  }
+};

src/app/member/profile/_components/MenuList/MenuList.css.ts

@@ -14,3 +14,7 @@ export const menuItem = style({
   ...typography.body1Sb,
   color: semantic.text.normal,
 });
+
+export const modalButton = style({
+  flex: 1,
+});

src/app/member/profile/_components/MenuList/MenuList.tsx

@@ -1,13 +1,34 @@
 "use client";
 
+import * as AlertDialog from "@radix-ui/react-alert-dialog";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 
+import { useDeleteSessionMutation } from "@/app/(auth)/_api/auth/auth.queries";
+import { AlertModal } from "@/components/ui/AlertModal";
+import { Button } from "@/components/ui/Button";
 import { VStack } from "@/components/ui/Stack";
 
 import { MENU_LIST } from "../../_constants";
 import * as styles from "./MenuList.css";
 
 export const MenuList = () => {
+  const router = useRouter();
+  const { mutate: logout } = useDeleteSessionMutation();
+
+  const handleLogout = () => {
+    logout(undefined, {
+      onSuccess: () => {
+        // TODO: Toast 띄우기
+        router.replace("/");
+      },
+      onError: error => {
+        // TODO: Toast 띄우기
+        console.error("로그아웃 실패", error);
+      },
+    });
+  };
+
   return (
     <>
       <VStack as='ul' gap={8} className={styles.wrapper}>
@@ -18,14 +39,43 @@ export const MenuList = () => {
                 {menu.label}
               </Link>
             ) : (
-              <button type='button' className={styles.menuItem}>
-                {menu.label}
-              </button>
+              <AlertModal
+                title='로그아웃하시나요?'
+                trigger={
+                  <button type='button' className={styles.menuItem}>
+                    로그아웃
+                  </button>
+                }
+                footer={
+                  <>
+                    <AlertDialog.Cancel asChild>
+                      <Button
+                        variant='assistive'
+                        size='large'
+                        className={styles.modalButton}
+                        style={{ borderRadius: "0 0 0 1.2rem" }}
+                      >
+                        취소
+                      </Button>
+                    </AlertDialog.Cancel>
+                    <AlertDialog.Action asChild>
+                      <Button
+                        variant='primary'
+                        size='large'
+                        onClick={handleLogout}
+                        className={styles.modalButton}
+                        style={{ borderRadius: "0 0 1.2rem" }}
+                      >
+                        확인
+                      </Button>
+                    </AlertDialog.Action>
+                  </>
+                }
+              />
             )}
           </li>
         ))}
       </VStack>
-      {/* TODO: 로그아웃시 나타날 모달 연결 */}
     </>
   );
 };

src/components/ui/AlertModal/AlertModal.css.ts

@@ -20,7 +20,7 @@ export const content = style({
   transform: "translate(-50%, -50%)",
   width: "min(30rem, 90vw)",
   background: semantic.background.white,
-  borderRadius: radius[120],
+  borderRadius: radius[160],
   zIndex: zIndex.modal,
 });