From 98512a0710c6af3bfaaa7eb3012be552b05c3ec8 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Fri, 27 Dec 2024 01:01:32 +0900
Subject: [PATCH] =?UTF-8?q?=EC=95=94=ED=98=B8=20=ED=82=A4=20=EB=82=B4?=
 =?UTF-8?q?=EB=B3=B4=EB=82=B4=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/buttons/TextButton.svelte  |  5 +++-
 .../auth/generateKey/Order.svelte             |  4 +--
 .../auth/generateKey/done/+page.svelte        | 29 +++++++++++++++++++
 3 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/(fullscreen)/auth/generateKey/done/+page.svelte

diff --git a/src/lib/components/buttons/TextButton.svelte b/src/lib/components/buttons/TextButton.svelte
index 1daca28..df47d10 100644
--- a/src/lib/components/buttons/TextButton.svelte
+++ b/src/lib/components/buttons/TextButton.svelte
@@ -8,7 +8,10 @@
   let { children, onclick }: Props = $props();
 </script>
 
-<button {onclick} class="font-medium text-gray-800 active:rounded-xl active:bg-gray-100">
+<button
+  {onclick}
+  class="text-sm font-medium text-gray-800 underline underline-offset-2 active:rounded-xl active:bg-gray-100"
+>
   <div class="h-full w-full p-1 transition active:scale-95">
     {@render children?.()}
   </div>
diff --git a/src/routes/(fullscreen)/auth/generateKey/Order.svelte b/src/routes/(fullscreen)/auth/generateKey/Order.svelte
index 5e71e7c..11c2a10 100644
--- a/src/routes/(fullscreen)/auth/generateKey/Order.svelte
+++ b/src/routes/(fullscreen)/auth/generateKey/Order.svelte
@@ -21,10 +21,10 @@
     {/if}
   </div>
   <div>
-    <p class="flex min-h-8 items-center text-lg font-medium">
+    <p class="flex min-h-8 items-center break-keep text-lg font-medium">
       {title}
     </p>
-    <p class="mb-5 mt-1 text-gray-600">
+    <p class="mb-5 mt-1 break-keep text-gray-600">
       {#if description}
         {description}
       {/if}
diff --git a/src/routes/(fullscreen)/auth/generateKey/done/+page.svelte b/src/routes/(fullscreen)/auth/generateKey/done/+page.svelte
new file mode 100644
index 0000000..fd84277
--- /dev/null
+++ b/src/routes/(fullscreen)/auth/generateKey/done/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Button, TextButton } from "$lib/components/buttons";
+  import { BottomDiv } from "$lib/components/divs";
+
+  import IconCheckCircle from "~icons/material-symbols/check-circle";
+</script>
+
+<svetle:head>
+  <title>암호 키 생성하기</title>
+</svetle:head>
+
+<div class="flex h-full flex-col justify-between">
+  <div class="mt-[40%] space-y-4">
+    <IconCheckCircle class="mx-auto text-8xl text-primary-500" />
+    <p class="text-center text-2xl font-bold text-primary-500">암호 키가 생성되었어요!</p>
+    <div class="space-y-2 break-keep text-center text-gray-800">
+      <p>모든 디바이스의 암호 키가 유실되면 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.</p>
+      <p>복원을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
+    </div>
+  </div>
+  <BottomDiv>
+    <div class="w-full">
+      <Button>암호 키 내보내기</Button>
+    </div>
+    <div class="w-fit">
+      <TextButton>내보내지 않을래요</TextButton>
+    </div>
+  </BottomDiv>
+</div>