TitleDiv 컴포넌트 리팩토링

src/routes/(fullscreen)/key/generate/+page.svelte

@@ -2,7 +2,7 @@
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
   import { Button, TextButton, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
-  import { TitleDiv } from "$lib/components/divs";
+  import { TitledDiv } from "$lib/components/molecules";
   import { gotoStateful } from "$lib/hooks";
   import { clientKeyStore } from "$lib/stores";
   import Order from "./Order.svelte";
@@ -63,23 +63,24 @@
 </svelte:head>
 
 <FullscreenDiv>
-  <TitleDiv>
-    <div class="space-y-2 break-keep">
-      <p class="text-3xl font-bold">암호 키 생성하기</p>
-      <p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p>
+  <TitledDiv childrenClass="space-y-4">
+    {#snippet title()}
+      암호 키 생성하기
+    {/snippet}
+    {#snippet description()}
+      회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.
+    {/snippet}
+
+    <div>
+      <IconKey class="mx-auto text-7xl" />
+      <p class="text-center text-xl font-bold text-primary-500">왜 암호 키가 필요한가요?</p>
     </div>
-    <div class="my-4 space-y-4">
-      <div>
-        <IconKey class="mx-auto text-7xl" />
-        <p class="text-center text-xl font-bold text-primary-500">왜 암호 키가 필요한가요?</p>
-      </div>
-      <div class="space-y-2">
-        {#each orders as { title, description }, i}
-          <Order order={i + 1} isLast={i === orders.length - 1} {title} {description} />
-        {/each}
-      </div>
+    <div class="space-y-2">
+      {#each orders as { title, description }, i}
+        <Order order={i + 1} isLast={i === orders.length - 1} {title} {description} />
+      {/each}
     </div>
-  </TitleDiv>
+  </TitledDiv>
   <BottomDiv class="flex flex-col items-center gap-y-2">
     <Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button>
     <TextButton>키를 갖고 있어요</TextButton>