비밀번호 변경 페이지 구현

src/routes/(fullscreen)/auth/changePassword/+page.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { TopBar } from "$lib/components";
+  import { Button } from "$lib/components/buttons";
+  import { TitleDiv, BottomDiv } from "$lib/components/divs";
+  import { TextInput } from "$lib/components/inputs";
+  import { requestPasswordChange } from "./service";
+
+  let oldPassword = $state("");
+  let newPassword = $state("");
+
+  const changePassword = async () => {
+    if (await requestPasswordChange(oldPassword, newPassword)) {
+      await goto("/menu");
+    }
+  };
+</script>
+
+<svelte:head>
+  <title>비밀번호 바꾸기</title>
+</svelte:head>
+
+<div>
+  <TopBar />
+  <TitleDiv topPadding={false}>
+    <div class="space-y-2 break-keep">
+      <p class="text-2xl font-bold">기존 비밀번호와 새 비밀번호를 입력해 주세요.</p>
+      <p>새 비밀번호는 8자 이상이어야 해요. 다른 사람들이 알 수 없도록 안전하게 설정해 주세요.</p>
+    </div>
+    <div class="my-4 flex flex-col gap-y-2">
+      <TextInput bind:value={oldPassword} placeholder="기존 비밀번호" type="password" />
+      <TextInput bind:value={newPassword} placeholder="새 비밀번호" type="password" />
+    </div>
+  </TitleDiv>
+</div>
+<BottomDiv>
+  <Button onclick={changePassword}>비밀번호 바꾸기</Button>
+</BottomDiv>

src/routes/(fullscreen)/auth/changePassword/service.ts

@@ -0,0 +1,10 @@
+import { callPostApi } from "$lib/hooks";
+import type { PasswordChangeRequest } from "$lib/server/schemas";
+
+export const requestPasswordChange = async (oldPassword: string, newPassword: string) => {
+  const res = await callPostApi<PasswordChangeRequest>("/api/auth/changePassword", {
+    oldPassword,
+    newPassword,
+  });
+  return res.ok;
+};

src/routes/(main)/menu/+page.svelte

@@ -1,3 +1,25 @@
-<div class="flex h-full items-center justify-center p-4">
-  <p class="text-gray-500">아직 개발 중이에요.</p>
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { EntryButton } from "$lib/components/buttons";
+
+  import IconPassword from "~icons/material-symbols/password";
+
+  let { data } = $props();
+</script>
+
+<div class="sticky top-0 bg-white px-6 py-4">
+  <p class="font-semibold">{data.nickname}</p>
+</div>
+<div class="space-y-4 px-4 pb-4">
+  <div class="space-y-2">
+    <p class="font-semibold">보안</p>
+    <EntryButton onclick={() => goto("/auth/changePassword")}>
+      <div class="flex items-center gap-x-4">
+        <div class="rounded-lg bg-gray-200 p-1 text-blue-500">
+          <IconPassword />
+        </div>
+        <p class="font-medium">비밀번호 바꾸기</p>
+      </div>
+    </EntryButton>
+  </div>
 </div>

src/routes/(main)/menu/+page.ts

@@ -0,0 +1,14 @@
+import { error } from "@sveltejs/kit";
+import { callGetApi } from "$lib/hooks";
+import type { UserInfoResponse } from "$lib/server/schemas";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+  const res = await callGetApi("/api/user", fetch);
+  if (!res.ok) {
+    error(500, "Internal server error");
+  }
+
+  const { nickname }: UserInfoResponse = await res.json();
+  return { nickname };
+};

src/routes/+layout.svelte

@@ -8,7 +8,7 @@
 
   onMount(async () => {
     const goto = async (url: string) => {
-      const whitelist = ["/auth", "/key", "/client/pending"];
+      const whitelist = ["/auth/login", "/key", "/client/pending"];
       if (!whitelist.some((path) => location.pathname.startsWith(path))) {
         await svelteGoto(
           `${url}?redirect=${encodeURIComponent(location.pathname + location.search)}`,

src/routes/api/auth/changePassword/+server.ts

@@ -1,13 +1,13 @@
 import { error, text } from "@sveltejs/kit";
 import { authorize } from "$lib/server/modules/auth";
-import { changePasswordRequest } from "$lib/server/schemas";
+import { passwordChangeRequest } from "$lib/server/schemas";
 import { changePassword } from "$lib/server/services/auth";
 import type { RequestHandler } from "./$types";
 
 export const POST: RequestHandler = async ({ locals, request }) => {
   const { sessionId, userId } = await authorize(locals, "any");
 
-  const zodRes = changePasswordRequest.safeParse(await request.json());
+  const zodRes = passwordChangeRequest.safeParse(await request.json());
   if (!zodRes.success) error(400, "Invalid request body");
   const { oldPassword, newPassword } = zodRes.data;