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";