TitleDiv 컴포넌트 리팩토링

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>