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

src/app.d.ts

@@ -1,5 +1,8 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
+
+import "unplugin-icons/types/svelte";
+
 declare global {
   namespace App {
     // interface Error {}

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

@@ -25,12 +25,12 @@
       <h1 class="text-3xl font-bold">환영합니다!</h1>
       <p>서비스를 이용하려면 로그인을 해야해요.</p>
     </div>
-    <div class="mt-4 flex flex-col gap-y-2">
+    <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">
+  <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>