암호 키 생성 페이지 레이아웃 구현

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { Button, TextButton } from "$lib/components/buttons";
+  import Order from "./Order.svelte";
+
+  import IconKey from "~icons/material-symbols/key";
+
+  const orders = [
+    {
+      title: "암호 키는 공개 키와 개인 키로 구성돼요.",
+      description: "공개 키로 암호화된 데이터는 개인 키로만 복호화할 수 있어요.",
+    },
+    {
+      title: "공개 키는 서버에 저장돼요.",
+      description: "대신, 개인 키는 이 디바이스에만 저장돼요.",
+    },
+    {
+      title: "다른 디바이스에서 공개 키를 이용해 데이터를 암호화하면,",
+    },
+    {
+      title: "이 디바이스에서만 안전하게 복호화할 수 있어요.",
+      description:
+        "서버를 포함한 제3자는 데이터의 내용을 알 수 없어요. 개인 키가 이 디바이스에만 저장되기 때문이에요.",
+    },
+  ];
+</script>
+
+<svetle:head>
+  <title>암호 키 생성하기</title>
+</svetle:head>
+
+<div class="flex h-full flex-col justify-between">
+  <div class="mt-[20%]">
+    <div class="flex flex-col gap-y-2">
+      <h1 class="text-3xl font-bold">암호 키 생성하기</h1>
+      <p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p>
+    </div>
+    <div class="my-4 flex flex-col gap-y-2">
+      <div class="mb-4">
+        <IconKey class="mx-auto text-7xl" />
+        <p class="text-center text-xl font-bold text-primary-500">왜 암호 키가 필요한가요?</p>
+      </div>
+      <div>
+        {#each orders as { title, description }, i}
+          <Order order={i + 1} isLast={i === orders.length - 1} {title} {description} />
+        {/each}
+      </div>
+    </div>
+  </div>
+  <div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white">
+    <div class="w-full">
+      <Button>새 암호 키 생성하기</Button>
+    </div>
+    <div class="w-fit">
+      <TextButton>키를 갖고 있어요</TextButton>
+    </div>
+  </div>
+</div>

src/routes/(fullscreen)/auth/generateKey/Order.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  interface Props {
+    order: number;
+    isLast?: boolean;
+    title: string;
+    description?: string;
+  }
+
+  let { order, isLast = false, title, description }: Props = $props();
+</script>
+
+<div class="items-strech flex gap-x-3 {isLast ? 'mb-0' : 'mb-2'}">
+  <div class="flex flex-col">
+    <p
+      class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-lg font-bold text-gray-700"
+    >
+      {order}
+    </p>
+    {#if !isLast}
+      <div class="mx-auto mt-2 w-0.5 flex-grow rounded-full bg-gray-300"></div>
+    {/if}
+  </div>
+  <div>
+    <p class="flex min-h-8 items-center text-lg font-medium">
+      {title}
+    </p>
+    <p class="mb-5 mt-1 text-gray-600">
+      {#if description}
+        {description}
+      {/if}
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { Button, TextButton } from "$lib/components/buttons";
+  import { TextInput } from "$lib/components/inputs";
+  import { requestLogin } from "./service";
+
+  let email = $state("");
+  let password = $state("");
+
+  const login = async () => {
+    // TODO: Validation
+
+    const ok = await requestLogin(email, password);
+
+    // TODO: Action
+  };
+</script>
+
+<svelte:head>
+  <title>로그인</title>
+</svelte:head>
+
+<div class="flex h-full flex-col justify-between">
+  <div class="mt-[20%]">
+    <div class="flex flex-col gap-y-2">
+      <h1 class="text-3xl font-bold">환영합니다!</h1>
+      <p>서비스를 이용하려면 로그인을 해야해요.</p>
+    </div>
+    <div class="my-4 flex flex-col gap-y-2">
+      <TextInput bind:value={email} placeholder="이메일" />
+      <TextInput bind:value={password} placeholder="비밀번호" type="password" />
+    </div>
+  </div>
+  <div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white">
+    <div class="w-full">
+      <Button onclick={login}>로그인</Button>
+    </div>
+    <div class="w-fit">
+      <TextButton>계정이 없어요</TextButton>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+import { callAPI } from "$lib/hooks";
+import { accessToken } from "$lib/stores/auth";
+
+export const requestLogin = async (email: string, password: string) => {
+  const res = await callAPI("/api/auth/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ email, password }),
+  });
+  if (!res.ok) {
+    return false;
+  }
+
+  const data = await res.json();
+  const token = data.accessToken as string;
+
+  accessToken.set(token);
+  return true;
+};