TitleDiv 컴포넌트 리팩토링

src/lib/components/divs/TitleDiv.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import type { Component, Snippet } from "svelte";
-  import type { SvelteHTMLElements } from "svelte/elements";
-
-  interface Props {
-    children: Snippet;
-    icon?: Component<SvelteHTMLElements["svg"]>;
-    topPadding?: boolean;
-  }
-
-  let { topPadding = true, children, icon: Icon }: Props = $props();
-</script>
-
-<div>
-  <div class="box-content flex min-h-[10vh] items-center {topPadding ? 'pt-4' : ''}">
-    {#if Icon}
-      <Icon class="text-5xl text-gray-600" />
-    {/if}
-  </div>
-  {@render children?.()}
-</div>

src/lib/components/divs/index.ts

@@ -1 +0,0 @@
-export { default as TitleDiv } from "./TitleDiv.svelte";

src/lib/components/molecules/TitledDiv.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Component, Snippet } from "svelte";
+  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
+  import { TitleLabel } from "$lib/components/molecules";
+
+  interface Props {
+    children?: Snippet;
+    childrenClass?: ClassValue;
+    class?: ClassValue;
+    description?: Snippet;
+    icon?: Component<SvelteHTMLElements["svg"]>;
+    title?: Snippet;
+    titleClass?: ClassValue;
+  }
+
+  let { children, description, icon, title, ...props }: Props = $props();
+</script>
+
+<div class={["space-y-4 py-4", props.class]}>
+  <div class="space-y-2 break-keep">
+    <TitleLabel {icon} textClass={props.titleClass}>
+      {@render title?.()}
+    </TitleLabel>
+    {#if description}
+      <p>
+        {@render description()}
+      </p>
+    {/if}
+  </div>
+  {#if children}
+    <div class={props.childrenClass}>
+      {@render children()}
+    </div>
+  {/if}
+</div>

src/lib/components/molecules/index.ts

@@ -2,4 +2,5 @@ export * from "./ActionModal.svelte";
 export { default as ActionModal } from "./ActionModal.svelte";
 export { default as IconEntryButton } from "./IconEntryButton.svelte";
 export * from "./labels";
+export { default as TitledDiv } from "./TitledDiv.svelte";
 export { default as TopBar } from "./TopBar.svelte";

src/lib/components/molecules/labels/TitleLabel.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Component, Snippet } from "svelte";
+  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+    icon?: Component<SvelteHTMLElements["svg"]>;
+    textClass?: ClassValue;
+  }
+
+  let { children, icon: Icon, ...props }: Props = $props();
+</script>
+
+<div class={props.class}>
+  <div class="flex min-h-[10vh] items-center">
+    {#if Icon}
+      <Icon class="text-5xl text-gray-600" />
+    {/if}
+  </div>
+  <p class={["text-3xl font-bold", props.textClass]}>
+    {@render children?.()}
+  </p>
+</div>

src/lib/components/molecules/labels/index.ts

@@ -1,3 +1,4 @@
 export { default as CategoryLabel } from "./CategoryLabel.svelte";
 export { default as DirectoryEntryLabel } from "./DirectoryEntryLabel.svelte";
 export { default as IconLabel } from "./IconLabel.svelte";
+export { default as TitleLabel } from "./TitleLabel.svelte";

src/routes/(fullscreen)/+layout.svelte

@@ -4,6 +4,6 @@
   let { children } = $props();
 </script>
 
-<AdaptiveDiv class="flex h-screen flex-col">
+<AdaptiveDiv class="flex min-h-screen flex-grow flex-col">
   {@render children()}
 </AdaptiveDiv>

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

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { Button, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
-  import { TitleDiv } from "$lib/components/divs";
-  import { TopBar } from "$lib/components/molecules";
+  import { TitledDiv, TopBar } from "$lib/components/molecules";
   import { requestPasswordChange } from "./service";
 
   let oldPassword = $state("");
@@ -21,16 +20,17 @@
 
 <TopBar class="flex-shrink-0" />
 <FullscreenDiv>
-  <TitleDiv topPadding={false}>
-    <div class="space-y-2 break-keep">
-      <p class="text-2xl font-bold">기존 비밀번호와 새 비밀번호를 입력해 주세요.</p>
-      <p>새 비밀번호는 8자 이상이어야 해요. 다른 사람들이 알 수 없도록 안전하게 설정해 주세요.</p>
-    </div>
-    <div class="my-4 flex flex-col gap-y-2">
-      <TextInput bind:value={oldPassword} placeholder="기존 비밀번호" type="password" />
-      <TextInput bind:value={newPassword} placeholder="새 비밀번호" type="password" />
-    </div>
-  </TitleDiv>
+  <TitledDiv class="!pt-0" titleClass="!text-2xl" childrenClass="flex flex-col gap-y-2">
+    {#snippet title()}
+      기존 비밀번호와 새 비밀번호를 입력해 주세요.
+    {/snippet}
+    {#snippet description()}
+      새 비밀번호는 8자 이상이어야 해요. 다른 사람들이 알 수 없도록 안전하게 설정해 주세요.
+    {/snippet}
+
+    <TextInput bind:value={oldPassword} placeholder="기존 비밀번호" type="password" />
+    <TextInput bind:value={newPassword} placeholder="새 비밀번호" type="password" />
+  </TitledDiv>
   <BottomDiv>
     <Button onclick={changePassword} class="w-full">비밀번호 바꾸기</Button>
   </BottomDiv>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { Button, TextButton, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
-  import { TitleDiv } from "$lib/components/divs";
+  import { TitledDiv } from "$lib/components/molecules";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service";
 
@@ -47,16 +47,17 @@
 </svelte:head>
 
 <FullscreenDiv>
-  <TitleDiv>
-    <div class="space-y-2 break-keep">
-      <p class="text-3xl font-bold">환영합니다!</p>
-      <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>
-  </TitleDiv>
+  <TitledDiv childrenClass="flex flex-col gap-y-2">
+    {#snippet title()}
+      환영합니다!
+    {/snippet}
+    {#snippet description()}
+      서비스를 이용하려면 로그인을 해야해요.
+    {/snippet}
+
+    <TextInput bind:value={email} placeholder="이메일" />
+    <TextInput bind:value={password} placeholder="비밀번호" type="password" />
+  </TitledDiv>
   <BottomDiv class="flex flex-col items-center gap-y-2">
     <Button onclick={login} class="w-full">로그인</Button>
     <TextButton>계정이 없어요</TextButton>

src/routes/(fullscreen)/client/pending/+page.svelte

@@ -2,7 +2,7 @@
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
   import { FullscreenDiv } from "$lib/components/atoms";
-  import { TitleDiv } from "$lib/components/divs";
+  import { TitledDiv } from "$lib/components/molecules";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { generatePublicKeyFingerprint, requestMasterKeyDownload } from "./service";
 
@@ -32,33 +32,32 @@
 </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>
+      <IconFingerprint 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>
-        <IconFingerprint class="mx-auto text-7xl" />
-        <p class="text-center text-xl font-bold text-primary-500">암호 키 지문</p>
-      </div>
-      <p class="rounded-2xl bg-gray-100 p-4 text-center text-2xl font-medium text-gray-800">
-        {#if !fingerprint}
+    <p class="rounded-2xl bg-gray-100 p-4 text-center text-2xl font-medium text-gray-800">
+      {#if !fingerprint}
+        지문 생성하는 중...
+      {:else}
+        {#await fingerprint}
           지문 생성하는 중...
-        {:else}
-          {#await fingerprint}
-            지문 생성하는 중...
-          {:then fingerprint}
-            {fingerprint}
-          {/await}
-        {/if}
-      </p>
-      <p class="text-center">
-        암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
-        지문이 일치하는지 확인 후 승인해 주세요.
-      </p>
-    </div>
-  </TitleDiv>
+        {:then fingerprint}
+          {fingerprint}
+        {/await}
+      {/if}
+    </p>
+    <p class="text-center">
+      암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
+      지문이 일치하는지 확인 후 승인해 주세요.
+    </p>
+  </TitledDiv>
 </FullscreenDiv>

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

@@ -2,7 +2,7 @@
   import FileSaver from "file-saver";
   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 { clientKeyStore } from "$lib/stores";
   import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
   import BeforeContinueModal from "./BeforeContinueModal.svelte";
@@ -90,17 +90,18 @@
 </svelte:head>
 
 <FullscreenDiv>
-  <TitleDiv icon={IconKey}>
-    <div class="space-y-4 break-keep">
-      <p class="text-3xl font-bold">암호 키를 파일로 내보낼까요?</p>
-      <div class="space-y-2 text-lg text-gray-800">
-        <p>
-          모든 디바이스의 암호 키가 유실되면, 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.
-        </p>
-        <p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
-      </div>
+  <TitledDiv icon={IconKey}>
+    {#snippet title()}
+      암호 키를 파일로 내보낼까요?
+    {/snippet}
+
+    <div class="space-y-2 break-keep text-lg text-gray-800">
+      <p>
+        모든 디바이스의 암호 키가 유실되면, 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.
+      </p>
+      <p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
     </div>
-  </TitleDiv>
+  </TitledDiv>
   <BottomDiv class="flex flex-col items-center gap-y-2">
     <Button onclick={exportClientKeys} class="w-full">암호 키 내보내기</Button>
     <TextButton onclick={() => (isBeforeContinueModalOpen = true)}>내보내지 않을래요</TextButton>

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>