비밀번호 변경 페이지 구현

src/lib/components/divs/TitleDiv.svelte

@@ -3,15 +3,16 @@
   import type { SvelteHTMLElements } from "svelte/elements";
 
   interface Props {
-    icon?: Component<SvelteHTMLElements["svg"]>;
     children: Snippet;
+    icon?: Component<SvelteHTMLElements["svg"]>;
+    topPadding?: boolean;
   }
 
-  let { icon: Icon, children }: Props = $props();
+  let { topPadding = true, children, icon: Icon }: Props = $props();
 </script>
 
 <div>
-  <div class="box-content flex min-h-[10vh] items-center pt-4">
+  <div class="box-content flex min-h-[10vh] items-center {topPadding ? 'pt-4' : ''}">
     {#if Icon}
       <Icon class="text-5xl text-gray-600" />
     {/if}

src/lib/server/db/session.ts

@@ -41,8 +41,8 @@ export const refreshSession = async (
     .update(session)
     .set({
       lastUsedAt: now,
-      lastUsedByIp: ip,
+      lastUsedByIp: ip ?? undefined,
-      lastUsedByUserAgent: userAgent,
+      lastUsedByUserAgent: userAgent ?? undefined,
     })
     .where(
       and(

src/lib/server/middlewares/setAgentInfo.ts

@@ -5,12 +5,12 @@ export const setAgentInfoMiddleware: Handle = async ({ event, resolve }) => {
   const userAgent = event.request.headers.get("User-Agent");
   if (!ip) {
     error(500, "IP address not found");
-  } else if (!userAgent) {
+  } else if (!userAgent && !event.isSubRequest) {
     error(400, "User agent not found");
   }
 
   event.locals.ip = ip;
-  event.locals.userAgent = userAgent;
+  event.locals.userAgent = userAgent ?? "";
 
   return await resolve(event);
 };

src/lib/server/schemas/auth.ts

@@ -1,10 +1,10 @@
 import { z } from "zod";
 
-export const changePasswordRequest = z.object({
+export const passwordChangeRequest = z.object({
   oldPassword: z.string().trim().nonempty(),
   newPassword: z.string().trim().nonempty(),
 });
-export type ChangePasswordRequest = z.infer<typeof changePasswordRequest>;
+export type PasswordChangeRequest = z.infer<typeof passwordChangeRequest>;
 
 export const loginRequest = z.object({
   email: z.string().email().nonempty(),

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">
+<script lang="ts">
-  <p class="text-gray-500">아직 개발 중이에요.</p>
+  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;