암호 키 내보내기 페이지 레이아웃 구현

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>

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}

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>