비밀번호 변경 페이지 구현

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 };
+};