From 9ab107794ae56f0bd5ee7259cca8066a025f3135 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Mon, 13 Jan 2025 07:40:10 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/(main)/menu/+page.svelte | 16 ++++++++++++++++
 src/routes/(main)/menu/service.ts   |  6 ++++++
 2 files changed, 22 insertions(+)
 create mode 100644 src/routes/(main)/menu/service.ts

diff --git a/src/routes/(main)/menu/+page.svelte b/src/routes/(main)/menu/+page.svelte
index efb7a9e..deade3d 100644
--- a/src/routes/(main)/menu/+page.svelte
+++ b/src/routes/(main)/menu/+page.svelte
@@ -1,10 +1,18 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { EntryButton } from "$lib/components/buttons";
+  import { requestLogout } from "./service.js";
 
   import IconPassword from "~icons/material-symbols/password";
+  import IconLogout from "~icons/material-symbols/logout";
 
   let { data } = $props();
+
+  const logout = async () => {
+    if (await requestLogout()) {
+      await goto("/auth/login");
+    }
+  };
 </script>
 
 <svelte:head>
@@ -25,5 +33,13 @@
         <p class="font-medium">비밀번호 바꾸기</p>
       </div>
     </EntryButton>
+    <EntryButton onclick={logout}>
+      <div class="flex items-center gap-x-4">
+        <div class="rounded-lg bg-gray-200 p-1 text-red-500">
+          <IconLogout />
+        </div>
+        <p class="font-medium">로그아웃</p>
+      </div>
+    </EntryButton>
   </div>
 </div>
diff --git a/src/routes/(main)/menu/service.ts b/src/routes/(main)/menu/service.ts
new file mode 100644
index 0000000..32dd4fd
--- /dev/null
+++ b/src/routes/(main)/menu/service.ts
@@ -0,0 +1,6 @@
+import { callPostApi } from "$lib/hooks";
+
+export const requestLogout = async () => {
+  const res = await callPostApi("/api/auth/logout");
+  return res.ok;
+};