IconEntryButton 컴포넌트 추가

src/lib/components/molecules/IconEntryButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Component, Snippet } from "svelte";
+  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
+  import { EntryButton } from "$lib/components/atoms";
+  import { IconLabel } from "$lib/components/molecules";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+    icon: Component<SvelteHTMLElements["svg"]>;
+    iconClass?: ClassValue;
+    onclick?: () => void;
+    textClass?: ClassValue;
+  }
+
+  let { children, icon, onclick, ...props }: Props = $props();
+</script>
+
+<EntryButton {onclick} class={props.class}>
+  <IconLabel {icon} class="h-full" iconClass={props.iconClass} textClass={props.textClass}>
+    {@render children?.()}
+  </IconLabel>
+</EntryButton>

src/lib/components/molecules/index.ts

@@ -1,3 +1,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 TopBar } from "./TopBar.svelte";

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { ClassValue } from "svelte/elements";
+  import { IconLabel } from "$lib/components/molecules";
+
+  import IconCategory from "~icons/material-symbols/category";
+
+  interface Props {
+    class?: ClassValue;
+    name: string;
+    subtext?: string;
+    textClass?: ClassValue;
+  }
+
+  let { name, subtext, ...props }: Props = $props();
+</script>
+
+{#snippet subtextSnippet()}
+  {subtext}
+{/snippet}
+
+<IconLabel
+  icon={IconCategory}
+  subtext={subtext ? subtextSnippet : undefined}
+  class={props.class}
+  textClass={props.textClass}
+>
+  {name}
+</IconLabel>

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { ClassValue } from "svelte/elements";
+  import { IconLabel } from "$lib/components/molecules";
+
+  import IconFolder from "~icons/material-symbols/folder";
+  import IconDraft from "~icons/material-symbols/draft";
+
+  interface Props {
+    class?: ClassValue;
+    name: string;
+    subtext?: string;
+    textClass?: ClassValue;
+    type: "directory" | "file";
+  }
+
+  let { name, subtext, type, ...props }: Props = $props();
+</script>
+
+{#snippet subtextSnippet()}
+  {subtext}
+{/snippet}
+
+<IconLabel
+  icon={type === "directory" ? IconFolder : IconDraft}
+  iconClass={type === "file" ? "text-blue-400" : undefined}
+  subtext={subtext ? subtextSnippet : undefined}
+  class={props.class}
+  textClass={props.textClass}
+>
+  {name}
+</IconLabel>

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

@@ -0,0 +1,31 @@
+<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"]>;
+    iconClass?: ClassValue;
+    subtext?: Snippet;
+    textClass?: ClassValue;
+  }
+
+  let { children, icon: Icon, subtext, ...props }: Props = $props();
+</script>
+
+<div class={["flex items-center gap-x-4", props.class]}>
+  <div class={["flex-shrink-0 text-lg", props.iconClass]}>
+    <Icon />
+  </div>
+  <div class="flex flex-grow flex-col gap-y-1 truncate text-left">
+    <p class={["font-medium", props.textClass]}>
+      {@render children?.()}
+    </p>
+    {#if subtext}
+      <p class="text-xs text-gray-800">
+        {@render subtext()}
+      </p>
+    {/if}
+  </div>
+</div>

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

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