From 32ecf46341a7d6a03d6e941ed6157252736550d9 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Sun, 26 Jan 2025 22:04:53 +0900
Subject: [PATCH] =?UTF-8?q?IconEntryButton=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../atoms/buttons/EntryButton.svelte          |  4 +--
 .../molecules/IconEntryButton.svelte          | 23 ++++++++++++
 src/lib/components/molecules/index.ts         |  2 ++
 .../molecules/labels/CategoryLabel.svelte     | 28 +++++++++++++++
 .../labels/DirectoryEntryLabel.svelte         | 31 ++++++++++++++++
 .../molecules/labels/IconLabel.svelte         | 31 ++++++++++++++++
 src/lib/components/molecules/labels/index.ts  |  3 ++
 src/lib/molecules/SubCategories.svelte        | 17 +++++----
 .../(fullscreen)/file/[id]/+page.svelte       | 19 +++++-----
 .../[[id]]/CategoryMenuBottomSheet.svelte     | 30 +++++-----------
 .../[[id]]/EntryCreateBottomSheet.svelte      | 30 +++++++++-------
 .../[[id]]/EntryMenuBottomSheet.svelte        | 35 +++++--------------
 src/routes/(main)/menu/MenuEntryButton.svelte | 26 +++++++-------
 13 files changed, 186 insertions(+), 93 deletions(-)
 create mode 100644 src/lib/components/molecules/IconEntryButton.svelte
 create mode 100644 src/lib/components/molecules/labels/CategoryLabel.svelte
 create mode 100644 src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
 create mode 100644 src/lib/components/molecules/labels/IconLabel.svelte
 create mode 100644 src/lib/components/molecules/labels/index.ts

diff --git a/src/lib/components/atoms/buttons/EntryButton.svelte b/src/lib/components/atoms/buttons/EntryButton.svelte
index 22e8a16..51f3a80 100644
--- a/src/lib/components/atoms/buttons/EntryButton.svelte
+++ b/src/lib/components/atoms/buttons/EntryButton.svelte
@@ -17,8 +17,8 @@
   onclick={onclick && (() => setTimeout(onclick, 100))}
   class={["rounded-xl active:bg-gray-100", props.class]}
 >
-  <div class="flex h-full p-2 transition active:scale-95">
-    <div class="flex-grow">
+  <div class="flex h-full gap-x-4 p-2 transition active:scale-95">
+    <div class="h-full flex-grow">
       {@render children?.()}
     </div>
     <div class="flex flex-shrink-0 items-center">
diff --git a/src/lib/components/molecules/IconEntryButton.svelte b/src/lib/components/molecules/IconEntryButton.svelte
new file mode 100644
index 0000000..97b941a
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/molecules/index.ts b/src/lib/components/molecules/index.ts
index 8f056a3..2ab4006 100644
--- a/src/lib/components/molecules/index.ts
+++ b/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";
diff --git a/src/lib/components/molecules/labels/CategoryLabel.svelte b/src/lib/components/molecules/labels/CategoryLabel.svelte
new file mode 100644
index 0000000..eb160cf
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte b/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
new file mode 100644
index 0000000..d9bcfb9
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/molecules/labels/IconLabel.svelte b/src/lib/components/molecules/labels/IconLabel.svelte
new file mode 100644
index 0000000..c4a982a
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/molecules/labels/index.ts b/src/lib/components/molecules/labels/index.ts
new file mode 100644
index 0000000..412a0bb
--- /dev/null
+++ b/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";
diff --git a/src/lib/molecules/SubCategories.svelte b/src/lib/molecules/SubCategories.svelte
index 09bbd32..cbad371 100644
--- a/src/lib/molecules/SubCategories.svelte
+++ b/src/lib/molecules/SubCategories.svelte
@@ -2,7 +2,7 @@
   import type { Component } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
   import type { Writable } from "svelte/store";
-  import { EntryButton } from "$lib/components/atoms";
+  import { IconEntryButton } from "$lib/components/molecules";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import Categories, { type SelectedCategory } from "$lib/molecules/Categories";
   import { masterKeyStore } from "$lib/stores";
@@ -40,12 +40,15 @@
 
 <div class={["space-y-1", props.class]}>
   {#snippet subCategoryCreate()}
-    <EntryButton onclick={onSubCategoryCreateClick} class="w-full">
-      <div class="flex h-8 items-center gap-x-4">
-        <IconAddCircle class="text-lg text-gray-600" />
-        <p class="font-medium text-gray-700">카테고리 추가하기</p>
-      </div>
-    </EntryButton>
+    <IconEntryButton
+      icon={IconAddCircle}
+      onclick={onSubCategoryCreateClick}
+      class="h-12 w-full"
+      iconClass="text-gray-600"
+      textClass="text-gray-700"
+    >
+      카테고리 추가하기
+    </IconEntryButton>
   {/snippet}
 
   {#if subCategoryCreatePosition === "top"}
diff --git a/src/routes/(fullscreen)/file/[id]/+page.svelte b/src/routes/(fullscreen)/file/[id]/+page.svelte
index f99b029..7d7d50e 100644
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -3,8 +3,8 @@
   import { untrack } from "svelte";
   import { get, type Writable } from "svelte/store";
   import { goto } from "$app/navigation";
-  import { EntryButton, FullscreenDiv } from "$lib/components/atoms";
-  import { TopBar } from "$lib/components/molecules";
+  import { FullscreenDiv } from "$lib/components/atoms";
+  import { IconEntryButton, TopBar } from "$lib/components/molecules";
   import {
     getFileInfo,
     getCategoryInfo,
@@ -151,12 +151,15 @@
           onCategoryClick={({ id }) => goto(`/category/${id}`)}
           onCategoryMenuClick={({ id }) => removeFromCategory(id)}
         />
-        <EntryButton onclick={() => (isAddToCategoryBottomSheetOpen = true)} class="w-full">
-          <div class="flex h-8 items-center gap-x-4">
-            <IconAddCircle class="text-lg text-gray-600" />
-            <p class="font-medium text-gray-700">카테고리에 추가하기</p>
-          </div>
-        </EntryButton>
+        <IconEntryButton
+          icon={IconAddCircle}
+          onclick={() => (isAddToCategoryBottomSheetOpen = true)}
+          class="h-12 w-full"
+          iconClass="text-gray-600"
+          textClass="text-gray-700"
+        >
+          카테고리에 추가하기
+        </IconEntryButton>
       </div>
     </div>
   </div>
diff --git a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
index 9e96fba..6f89a2c 100644
--- a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
+++ b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { BottomSheet } from "$lib/components";
-  import { EntryButton } from "$lib/components/atoms";
+  import { CategoryLabel, IconEntryButton } from "$lib/components/molecules";
   import { useContext } from "./service.svelte";
 
-  import IconCategory from "~icons/material-symbols/category";
   import IconEdit from "~icons/material-symbols/edit";
   import IconDelete from "~icons/material-symbols/delete";
 
@@ -21,27 +20,14 @@
   {@const { name } = context.selectedCategory}
   <BottomSheet bind:isOpen>
     <div class="w-full py-4">
-      <div class="flex h-12 items-center gap-x-4 p-2">
-        <div class="flex-shrink-0 text-lg">
-          <IconCategory />
-        </div>
-        <p title={name} class="flex-grow truncate font-semibold">
-          {name}
-        </p>
-      </div>
+      <CategoryLabel {name} class="h-12 p-2" textClass="!font-semibold" />
       <div class="my-2 h-px w-full bg-gray-200"></div>
-      <EntryButton onclick={onRenameClick} class="w-full">
-        <div class="flex h-8 items-center gap-x-4">
-          <IconEdit class="text-lg" />
-          <p class="font-medium">이름 바꾸기</p>
-        </div>
-      </EntryButton>
-      <EntryButton onclick={onDeleteClick} class="w-full">
-        <div class="flex h-8 items-center gap-x-4 text-red-500">
-          <IconDelete class="text-lg" />
-          <p class="font-medium">삭제하기</p>
-        </div>
-      </EntryButton>
+      <IconEntryButton icon={IconEdit} onclick={onRenameClick} class="h-12 w-full">
+        이름 바꾸기
+      </IconEntryButton>
+      <IconEntryButton icon={IconDelete} onclick={onDeleteClick} class="h-12 w-full text-red-500">
+        삭제하기
+      </IconEntryButton>
     </div>
   </BottomSheet>
 {/if}
diff --git a/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
index 7d262dd..2a5cabc 100644
--- a/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { BottomSheet } from "$lib/components";
-  import { EntryButton } from "$lib/components/atoms";
+  import { IconEntryButton } from "$lib/components/molecules";
 
   import IconCreateNewFolder from "~icons/material-symbols/create-new-folder";
   import IconUploadFile from "~icons/material-symbols/upload-file";
@@ -16,17 +16,21 @@
 
 <BottomSheet bind:isOpen>
   <div class="w-full py-4">
-    <EntryButton onclick={onDirectoryCreateClick} class="w-full">
-      <div class="flex h-12 items-center gap-x-4">
-        <IconCreateNewFolder class="text-2xl text-yellow-500" />
-        <p class="font-medium">폴더 만들기</p>
-      </div>
-    </EntryButton>
-    <EntryButton onclick={onFileUploadClick} class="w-full">
-      <div class="flex h-12 items-center gap-x-4">
-        <IconUploadFile class="text-2xl text-blue-400" />
-        <p class="font-medium">파일 업로드</p>
-      </div>
-    </EntryButton>
+    <IconEntryButton
+      icon={IconCreateNewFolder}
+      onclick={onDirectoryCreateClick}
+      class="h-16 w-full"
+      iconClass="!text-2xl text-yellow-500"
+    >
+      폴더 만들기
+    </IconEntryButton>
+    <IconEntryButton
+      icon={IconUploadFile}
+      onclick={onFileUploadClick}
+      class="h-16 w-full"
+      iconClass="!text-2xl text-blue-400"
+    >
+      파일 업로드
+    </IconEntryButton>
   </div>
 </BottomSheet>
diff --git a/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
index 3b83406..22ac465 100644
--- a/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
   import { BottomSheet } from "$lib/components";
-  import { EntryButton } from "$lib/components/atoms";
+  import { DirectoryEntryLabel, IconEntryButton } from "$lib/components/molecules";
   import { useContext } from "./service.svelte";
 
-  import IconFolder from "~icons/material-symbols/folder";
-  import IconDraft from "~icons/material-symbols/draft";
   import IconEdit from "~icons/material-symbols/edit";
   import IconDelete from "~icons/material-symbols/delete";
 
@@ -22,31 +20,14 @@
   {@const { name, type } = context.selectedEntry}
   <BottomSheet bind:isOpen>
     <div class="w-full py-4">
-      <div class="flex h-12 items-center gap-x-4 p-2">
-        <div class="flex-shrink-0 text-lg">
-          {#if type === "directory"}
-            <IconFolder />
-          {:else}
-            <IconDraft class="text-blue-400" />
-          {/if}
-        </div>
-        <p title={name} class="flex-grow truncate font-semibold">
-          {name}
-        </p>
-      </div>
+      <DirectoryEntryLabel {type} {name} class="h-12 p-2" textClass="!font-semibold" />
       <div class="my-2 h-px w-full bg-gray-200"></div>
-      <EntryButton onclick={onRenameClick} class="w-full">
-        <div class="flex h-8 items-center gap-x-4">
-          <IconEdit class="text-lg" />
-          <p class="font-medium">이름 바꾸기</p>
-        </div>
-      </EntryButton>
-      <EntryButton onclick={onDeleteClick} class="w-full">
-        <div class="flex h-8 items-center gap-x-4 text-red-500">
-          <IconDelete class="text-lg" />
-          <p class="font-medium">삭제하기</p>
-        </div>
-      </EntryButton>
+      <IconEntryButton icon={IconEdit} onclick={onRenameClick} class="h-12 w-full">
+        이름 바꾸기
+      </IconEntryButton>
+      <IconEntryButton icon={IconDelete} onclick={onDeleteClick} class="h-12 w-full text-red-500">
+        삭제하기
+      </IconEntryButton>
     </div>
   </BottomSheet>
 {/if}
diff --git a/src/routes/(main)/menu/MenuEntryButton.svelte b/src/routes/(main)/menu/MenuEntryButton.svelte
index 4e2b31c..e96fd2e 100644
--- a/src/routes/(main)/menu/MenuEntryButton.svelte
+++ b/src/routes/(main)/menu/MenuEntryButton.svelte
@@ -1,25 +1,23 @@
 <script lang="ts">
   import type { Component, Snippet } from "svelte";
-  import type { SvelteHTMLElements } from "svelte/elements";
-  import { EntryButton } from "$lib/components/atoms";
+  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
+  import { IconEntryButton } from "$lib/components/molecules";
 
   interface Props {
     children: Snippet;
     icon: Component<SvelteHTMLElements["svg"]>;
-    iconColor: string;
+    iconColor: ClassValue;
     onclick: () => void;
   }
 
-  let { children, icon: Icon, iconColor, onclick }: Props = $props();
+  let { children, icon, iconColor, onclick }: Props = $props();
 </script>
 
-<EntryButton {onclick} class="w-full">
-  <div class="flex items-center gap-x-4">
-    <div class="rounded-lg bg-gray-200 p-1 {iconColor}">
-      <Icon />
-    </div>
-    <p class="font-medium">
-      {@render children?.()}
-    </p>
-  </div>
-</EntryButton>
+<IconEntryButton
+  {icon}
+  {onclick}
+  class="w-full"
+  iconClass={["rounded-lg bg-gray-200 p-1 !text-base", iconColor]}
+>
+  {@render children?.()}
+</IconEntryButton>