From 1c09d93b41ff92b68d0ba77f6feb89858fd9118c Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Fri, 24 Jan 2025 16:39:09 +0900
Subject: [PATCH 01/16] =?UTF-8?q?Button=20=EB=B0=8F=20Input=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20atoms=20=EB=94=94?=
 =?UTF-8?q?=EB=A0=89=ED=84=B0=EB=A6=AC=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/atoms/buttons/Button.svelte    | 35 ++++++++++++++++++
 .../atoms/buttons/EntryButton.svelte          | 28 ++++++++++++++
 .../{ => atoms}/buttons/FloatingButton.svelte | 14 ++-----
 .../{ => atoms}/buttons/TextButton.svelte     | 10 ++---
 .../components/{ => atoms}/buttons/index.ts   |  0
 src/lib/components/atoms/index.ts             |  2 +
 .../{ => atoms}/inputs/CheckBox.svelte        |  8 ++--
 .../{ => atoms}/inputs/TextInput.svelte       |  2 +-
 .../components/{ => atoms}/inputs/index.ts    |  0
 src/lib/components/buttons/Button.svelte      | 37 -------------------
 src/lib/components/buttons/EntryButton.svelte | 30 ---------------
 src/lib/molecules/SubCategories.svelte        |  4 +-
 src/lib/organisms/Category/Category.svelte    |  2 +-
 src/lib/organisms/CreateCategoryModal.svelte  |  9 ++---
 .../auth/changePassword/+page.svelte          |  5 +--
 .../(fullscreen)/auth/login/+page.svelte      |  5 +--
 .../(fullscreen)/file/[id]/+page.svelte       |  4 +-
 .../file/[id]/AddToCategoryBottomSheet.svelte |  6 ++-
 .../(fullscreen)/key/export/+page.svelte      | 12 ++----
 .../export/BeforeContinueBottomSheet.svelte   |  8 ++--
 .../key/export/BeforeContinueModal.svelte     | 15 ++------
 .../(fullscreen)/key/generate/+page.svelte    |  4 +-
 .../[[id]]/CategoryMenuBottomSheet.svelte     |  6 +--
 .../[[id]]/DeleteCategoryModal.svelte         |  8 ++--
 .../[[id]]/RenameCategoryModal.svelte         | 11 +++---
 .../(main)/directory/[[id]]/+page.svelte      |  2 +-
 .../directory/[[id]]/CreateBottomSheet.svelte |  6 +--
 .../[[id]]/CreateDirectoryModal.svelte        |  9 ++---
 .../[[id]]/DeleteDirectoryEntryModal.svelte   |  8 ++--
 .../DirectoryEntryMenuBottomSheet.svelte      |  6 +--
 .../[[id]]/DuplicateFileModal.svelte          |  8 ++--
 .../[[id]]/RenameDirectoryEntryModal.svelte   |  9 ++---
 src/routes/(main)/menu/MenuEntryButton.svelte |  4 +-
 33 files changed, 145 insertions(+), 172 deletions(-)
 create mode 100644 src/lib/components/atoms/buttons/Button.svelte
 create mode 100644 src/lib/components/atoms/buttons/EntryButton.svelte
 rename src/lib/components/{ => atoms}/buttons/FloatingButton.svelte (76%)
 rename src/lib/components/{ => atoms}/buttons/TextButton.svelte (67%)
 rename src/lib/components/{ => atoms}/buttons/index.ts (100%)
 create mode 100644 src/lib/components/atoms/index.ts
 rename src/lib/components/{ => atoms}/inputs/CheckBox.svelte (79%)
 rename src/lib/components/{ => atoms}/inputs/TextInput.svelte (83%)
 rename src/lib/components/{ => atoms}/inputs/index.ts (100%)
 delete mode 100644 src/lib/components/buttons/Button.svelte
 delete mode 100644 src/lib/components/buttons/EntryButton.svelte

diff --git a/src/lib/components/atoms/buttons/Button.svelte b/src/lib/components/atoms/buttons/Button.svelte
new file mode 100644
index 0000000..a1b079c
--- /dev/null
+++ b/src/lib/components/atoms/buttons/Button.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+    color?: "primary" | "gray";
+    onclick?: () => void;
+  }
+
+  let { children, color = "primary", onclick, ...props }: Props = $props();
+
+  let bgColor = $derived(
+    {
+      primary: "bg-primary-600 active:bg-primary-500",
+      gray: "bg-gray-300 active:bg-gray-400",
+    }[color],
+  );
+  let textColor = $derived(
+    {
+      primary: "text-white",
+      gray: "text-gray-800",
+    }[color],
+  );
+</script>
+
+<button
+  onclick={onclick && (() => setTimeout(onclick, 100))}
+  class={["h-12 min-w-fit rounded-xl font-medium", bgColor, textColor, props.class]}
+>
+  <div class="h-full p-3 transition active:scale-95">
+    {@render children?.()}
+  </div>
+</button>
diff --git a/src/lib/components/atoms/buttons/EntryButton.svelte b/src/lib/components/atoms/buttons/EntryButton.svelte
new file mode 100644
index 0000000..22e8a16
--- /dev/null
+++ b/src/lib/components/atoms/buttons/EntryButton.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  import IconChevronRight from "~icons/material-symbols/chevron-right";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+    onclick?: () => void;
+  }
+
+  let { children, onclick, ...props }: Props = $props();
+</script>
+
+<button
+  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">
+      {@render children?.()}
+    </div>
+    <div class="flex flex-shrink-0 items-center">
+      <IconChevronRight class="text-xl text-gray-800" />
+    </div>
+  </div>
+</button>
diff --git a/src/lib/components/buttons/FloatingButton.svelte b/src/lib/components/atoms/buttons/FloatingButton.svelte
similarity index 76%
rename from src/lib/components/buttons/FloatingButton.svelte
rename to src/lib/components/atoms/buttons/FloatingButton.svelte
index 51870c7..499a043 100644
--- a/src/lib/components/buttons/FloatingButton.svelte
+++ b/src/lib/components/atoms/buttons/FloatingButton.svelte
@@ -1,30 +1,24 @@
 <script lang="ts">
   import type { Component } from "svelte";
-  import type { SvelteHTMLElements } from "svelte/elements";
+  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
   import { AdaptiveDiv } from "$lib/components/divs";
 
   interface Props {
     icon: Component<SvelteHTMLElements["svg"]>;
-    offset?: string;
+    offset?: ClassValue;
     onclick?: () => void;
   }
 
   let { icon: Icon, offset = "bottom-20", onclick }: Props = $props();
-
-  const click = () => {
-    setTimeout(() => {
-      onclick?.();
-    }, 100);
-  };
 </script>
 
 <div class="pointer-events-none fixed inset-0">
-  <div class="absolute w-full {offset}">
+  <div class={["absolute w-full", offset]}>
     <AdaptiveDiv>
       <div class="relative">
         <div class="absolute bottom-4 right-4">
           <button
-            onclick={click}
+            onclick={onclick && (() => setTimeout(onclick, 100))}
             class="pointer-events-auto flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400"
           >
             <Icon class="text-xl" />
diff --git a/src/lib/components/buttons/TextButton.svelte b/src/lib/components/atoms/buttons/TextButton.svelte
similarity index 67%
rename from src/lib/components/buttons/TextButton.svelte
rename to src/lib/components/atoms/buttons/TextButton.svelte
index c7688a5..10f9e0c 100644
--- a/src/lib/components/buttons/TextButton.svelte
+++ b/src/lib/components/atoms/buttons/TextButton.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from "svelte";
 
   interface Props {
-    children: Snippet;
+    children?: Snippet;
     onclick?: () => void;
   }
 
@@ -10,14 +10,10 @@
 </script>
 
 <button
-  onclick={() => {
-    setTimeout(() => {
-      onclick?.();
-    }, 100);
-  }}
+  onclick={onclick && (() => setTimeout(onclick, 100))}
   class="text-sm font-medium text-gray-800 underline underline-offset-2 active:rounded-xl active:bg-gray-100"
 >
-  <div class="h-full w-full p-1 transition active:scale-95">
+  <div class="h-full p-1 transition active:scale-95">
     {@render children?.()}
   </div>
 </button>
diff --git a/src/lib/components/buttons/index.ts b/src/lib/components/atoms/buttons/index.ts
similarity index 100%
rename from src/lib/components/buttons/index.ts
rename to src/lib/components/atoms/buttons/index.ts
diff --git a/src/lib/components/atoms/index.ts b/src/lib/components/atoms/index.ts
new file mode 100644
index 0000000..5c96a2a
--- /dev/null
+++ b/src/lib/components/atoms/index.ts
@@ -0,0 +1,2 @@
+export * from "./buttons";
+export * from "./inputs";
diff --git a/src/lib/components/inputs/CheckBox.svelte b/src/lib/components/atoms/inputs/CheckBox.svelte
similarity index 79%
rename from src/lib/components/inputs/CheckBox.svelte
rename to src/lib/components/atoms/inputs/CheckBox.svelte
index 6875040..753892f 100644
--- a/src/lib/components/inputs/CheckBox.svelte
+++ b/src/lib/components/atoms/inputs/CheckBox.svelte
@@ -5,16 +5,18 @@
   import IconCheckCircleOutline from "~icons/material-symbols/check-circle-outline";
 
   interface Props {
-    children: Snippet;
     checked?: boolean;
+    children?: Snippet;
   }
 
-  let { children, checked = $bindable(false) }: Props = $props();
+  let { checked = $bindable(false), children }: Props = $props();
 </script>
 
 <label class="flex items-center gap-x-1">
   <input bind:checked type="checkbox" class="hidden" />
-  {@render children?.()}
+  <div>
+    {@render children?.()}
+  </div>
   {#if checked}
     <IconCheckCircle class="text-primary-600" />
   {:else}
diff --git a/src/lib/components/inputs/TextInput.svelte b/src/lib/components/atoms/inputs/TextInput.svelte
similarity index 83%
rename from src/lib/components/inputs/TextInput.svelte
rename to src/lib/components/atoms/inputs/TextInput.svelte
index 61f42ad..f30c331 100644
--- a/src/lib/components/inputs/TextInput.svelte
+++ b/src/lib/components/atoms/inputs/TextInput.svelte
@@ -17,7 +17,7 @@
   />
   <!-- svelte-ignore a11y_label_has_associated_control -->
   <label
-    class="absolute left-0 top-1/2 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
+    class="pointer-events-none absolute left-0 top-1/2 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
   >
     {placeholder}
   </label>
diff --git a/src/lib/components/inputs/index.ts b/src/lib/components/atoms/inputs/index.ts
similarity index 100%
rename from src/lib/components/inputs/index.ts
rename to src/lib/components/atoms/inputs/index.ts
diff --git a/src/lib/components/buttons/Button.svelte b/src/lib/components/buttons/Button.svelte
deleted file mode 100644
index 65f80ab..0000000
--- a/src/lib/components/buttons/Button.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-
-  interface Props {
-    children: Snippet;
-    color?: "primary" | "gray";
-    onclick?: () => void;
-  }
-
-  let { children, color = "primary", onclick }: Props = $props();
-
-  const bgColorStyle = $derived(
-    {
-      primary: "bg-primary-600 active:bg-primary-500",
-      gray: "bg-gray-300 active:bg-gray-400",
-    }[color],
-  );
-  const fontColorStyle = $derived(
-    {
-      primary: "text-white",
-      gray: "text-gray-800",
-    }[color],
-  );
-</script>
-
-<button
-  onclick={() => {
-    setTimeout(() => {
-      onclick?.();
-    }, 100);
-  }}
-  class="{bgColorStyle} {fontColorStyle} h-12 w-full min-w-fit rounded-xl font-medium"
->
-  <div class="h-full w-full p-3 transition active:scale-95">
-    {@render children?.()}
-  </div>
-</button>
diff --git a/src/lib/components/buttons/EntryButton.svelte b/src/lib/components/buttons/EntryButton.svelte
deleted file mode 100644
index ed455aa..0000000
--- a/src/lib/components/buttons/EntryButton.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-
-  import IconChevronRight from "~icons/material-symbols/chevron-right";
-
-  interface Props {
-    children: Snippet;
-    onclick?: () => void;
-  }
-
-  let { children, onclick }: Props = $props();
-</script>
-
-<button
-  onclick={() => {
-    setTimeout(() => {
-      onclick?.();
-    }, 100);
-  }}
-  class="w-full rounded-xl active:bg-gray-100"
->
-  <div class="flex w-full justify-between p-2 transition active:scale-95">
-    <div>
-      {@render children?.()}
-    </div>
-    <div class="flex items-center justify-center">
-      <IconChevronRight class="text-xl text-gray-800" />
-    </div>
-  </div>
-</button>
diff --git a/src/lib/molecules/SubCategories.svelte b/src/lib/molecules/SubCategories.svelte
index 0c16b74..09bbd32 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/buttons";
+  import { EntryButton } from "$lib/components/atoms";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import Categories, { type SelectedCategory } from "$lib/molecules/Categories";
   import { masterKeyStore } from "$lib/stores";
@@ -40,7 +40,7 @@
 
 <div class={["space-y-1", props.class]}>
   {#snippet subCategoryCreate()}
-    <EntryButton onclick={onSubCategoryCreateClick}>
+    <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>
diff --git a/src/lib/organisms/Category/Category.svelte b/src/lib/organisms/Category/Category.svelte
index 200ac35..3407c32 100644
--- a/src/lib/organisms/Category/Category.svelte
+++ b/src/lib/organisms/Category/Category.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { untrack } from "svelte";
   import { get, type Writable } from "svelte/store";
-  import { CheckBox } from "$lib/components/inputs";
+  import { CheckBox } from "$lib/components/atoms";
   import { getFileInfo, type FileInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import { SortBy, sortEntries } from "$lib/modules/util";
   import type { SelectedCategory } from "$lib/molecules/Categories";
diff --git a/src/lib/organisms/CreateCategoryModal.svelte b/src/lib/organisms/CreateCategoryModal.svelte
index 37f868a..363670d 100644
--- a/src/lib/organisms/CreateCategoryModal.svelte
+++ b/src/lib/organisms/CreateCategoryModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
-  import { TextInput } from "$lib/components/inputs";
+  import { Button, TextInput } from "$lib/components/atoms";
 
   interface Props {
     onCreateClick: (name: string) => void;
@@ -23,8 +22,8 @@
   <div class="mt-2 flex w-full">
     <TextInput bind:value={name} placeholder="카테고리 이름" />
   </div>
-  <div class="mt-7 flex gap-2">
-    <Button color="gray" onclick={closeModal}>닫기</Button>
-    <Button onclick={() => onCreateClick(name)}>만들기</Button>
+  <div class="mt-7 flex gap-x-2">
+    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
+    <Button onclick={() => onCreateClick(name)} class="flex-1">만들기</Button>
   </div>
 </Modal>
diff --git a/src/routes/(fullscreen)/auth/changePassword/+page.svelte b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
index 2b4875f..92d90a3 100644
--- a/src/routes/(fullscreen)/auth/changePassword/+page.svelte
+++ b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button, TextInput } from "$lib/components/atoms";
   import { TitleDiv, BottomDiv } from "$lib/components/divs";
-  import { TextInput } from "$lib/components/inputs";
   import { requestPasswordChange } from "./service";
 
   let oldPassword = $state("");
@@ -34,5 +33,5 @@
   </TitleDiv>
 </div>
 <BottomDiv>
-  <Button onclick={changePassword}>비밀번호 바꾸기</Button>
+  <Button onclick={changePassword} class="w-full">비밀번호 바꾸기</Button>
 </BottomDiv>
diff --git a/src/routes/(fullscreen)/auth/login/+page.svelte b/src/routes/(fullscreen)/auth/login/+page.svelte
index 4014368..5edc400 100644
--- a/src/routes/(fullscreen)/auth/login/+page.svelte
+++ b/src/routes/(fullscreen)/auth/login/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { Button, TextButton } from "$lib/components/buttons";
+  import { Button, TextButton, TextInput } from "$lib/components/atoms";
   import { TitleDiv, BottomDiv } from "$lib/components/divs";
-  import { TextInput } from "$lib/components/inputs";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service";
 
@@ -58,6 +57,6 @@
   </div>
 </TitleDiv>
 <BottomDiv>
-  <Button onclick={login}>로그인</Button>
+  <Button onclick={login} class="w-full">로그인</Button>
   <TextButton>계정이 없어요</TextButton>
 </BottomDiv>
diff --git a/src/routes/(fullscreen)/file/[id]/+page.svelte b/src/routes/(fullscreen)/file/[id]/+page.svelte
index 2a28505..fe7fbac 100644
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -4,7 +4,7 @@
   import { get, type Writable } from "svelte/store";
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
-  import { EntryButton } from "$lib/components/buttons";
+  import { EntryButton } from "$lib/components/atoms";
   import {
     getFileInfo,
     getCategoryInfo,
@@ -151,7 +151,7 @@
           onCategoryClick={({ id }) => goto(`/category/${id}`)}
           onCategoryMenuClick={({ id }) => removeFromCategory(id)}
         />
-        <EntryButton onclick={() => (isAddToCategoryBottomSheetOpen = true)}>
+        <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>
diff --git a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
index ce2908f..f2a9232 100644
--- a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
+++ b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import { BottomSheet } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";
   import { BottomDiv } from "$lib/components/divs";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import SubCategories from "$lib/molecules/SubCategories.svelte";
@@ -48,7 +48,9 @@
       />
       {#if $category.id !== "root"}
         <BottomDiv>
-          <Button onclick={() => onAddToCategoryClick($category.id)}>이 카테고리에 추가하기</Button>
+          <Button onclick={() => onAddToCategoryClick($category.id)} class="w-full">
+            이 카테고리에 추가하기
+          </Button>
         </BottomDiv>
       {/if}
     {/if}
diff --git a/src/routes/(fullscreen)/key/export/+page.svelte b/src/routes/(fullscreen)/key/export/+page.svelte
index 6cd6ae6..95d49f6 100644
--- a/src/routes/(fullscreen)/key/export/+page.svelte
+++ b/src/routes/(fullscreen)/key/export/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import FileSaver from "file-saver";
   import { goto } from "$app/navigation";
-  import { Button, TextButton } from "$lib/components/buttons";
+  import { Button, TextButton } from "$lib/components/atoms";
   import { TitleDiv, BottomDiv } from "$lib/components/divs";
   import { clientKeyStore } from "$lib/stores";
   import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
@@ -101,14 +101,8 @@
   </div>
 </TitleDiv>
 <BottomDiv>
-  <Button onclick={exportClientKeys}>암호 키 내보내기</Button>
-  <TextButton
-    onclick={() => {
-      isBeforeContinueModalOpen = true;
-    }}
-  >
-    내보내지 않을래요
-  </TextButton>
+  <Button onclick={exportClientKeys} class="w-full">암호 키 내보내기</Button>
+  <TextButton onclick={() => (isBeforeContinueModalOpen = true)}>내보내지 않을래요</TextButton>
 </BottomDiv>
 
 <BeforeContinueModal bind:isOpen={isBeforeContinueModalOpen} onContinueClick={registerPubKeys} />
diff --git a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte b/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
index 47b6baa..686897c 100644
--- a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { BottomSheet } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";
   import { BottomDiv } from "$lib/components/divs";
 
   interface Props {
@@ -22,9 +22,9 @@
       </p>
     </div>
     <BottomDiv>
-      <div class="flex w-full gap-2">
-        <Button color="gray" onclick={onRetryClick}>다시 저장할래요</Button>
-        <Button onclick={onContinueClick}>잘 저장되었어요</Button>
+      <div class="flex w-full gap-x-2">
+        <Button color="gray" onclick={onRetryClick} class="flex-1">다시 저장할래요</Button>
+        <Button onclick={onContinueClick} class="flex-1">잘 저장되었어요</Button>
       </div>
     </BottomDiv>
   </div>
diff --git a/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
index 7b9d98d..e2bd10a 100644
--- a/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";
 
   interface Props {
     onContinueClick: () => void;
@@ -16,16 +16,9 @@
       <p class="text-xl font-bold">내보내지 않고 계속할까요?</p>
       <p>암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요.</p>
     </div>
-    <div class="flex gap-2">
-      <Button
-        color="gray"
-        onclick={() => {
-          isOpen = false;
-        }}
-      >
-        아니요
-      </Button>
-      <Button onclick={onContinueClick}>계속할게요</Button>
+    <div class="flex gap-x-2">
+      <Button color="gray" onclick={() => (isOpen = false)} class="flex-1">아니요</Button>
+      <Button onclick={onContinueClick} class="flex-1">계속할게요</Button>
     </div>
   </div>
 </Modal>
diff --git a/src/routes/(fullscreen)/key/generate/+page.svelte b/src/routes/(fullscreen)/key/generate/+page.svelte
index 330a39e..0063179 100644
--- a/src/routes/(fullscreen)/key/generate/+page.svelte
+++ b/src/routes/(fullscreen)/key/generate/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { Button, TextButton } from "$lib/components/buttons";
+  import { Button, TextButton } from "$lib/components/atoms";
   import { TitleDiv, BottomDiv } from "$lib/components/divs";
   import { gotoStateful } from "$lib/hooks";
   import { clientKeyStore } from "$lib/stores";
@@ -80,6 +80,6 @@
   </div>
 </TitleDiv>
 <BottomDiv>
-  <Button onclick={generateKeys}>새 암호 키 생성하기</Button>
+  <Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button>
   <TextButton>키를 갖고 있어요</TextButton>
 </BottomDiv>
diff --git a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
index 200501e..c71fdff 100644
--- a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
+++ b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { BottomSheet } from "$lib/components";
-  import { EntryButton } from "$lib/components/buttons";
+  import { EntryButton } from "$lib/components/atoms";
   import type { SelectedCategory } from "$lib/molecules/Categories";
 
   import IconCategory from "~icons/material-symbols/category";
@@ -41,13 +41,13 @@
       </div>
       <div class="my-2 h-px w-full bg-gray-200"></div>
     {/if}
-    <EntryButton onclick={onRenameClick}>
+    <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}>
+    <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>
diff --git a/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte b/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
index b60a715..0c3b7ea 100644
--- a/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
+++ b/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";
   import type { SelectedCategory } from "$lib/molecules/Categories";
 
   interface Props {
@@ -39,9 +39,9 @@
           하지만 카테고리에 추가된 파일들은 삭제되지 않아요.
         </p>
       </div>
-      <div class="flex gap-2">
-        <Button color="gray" onclick={closeModal}>아니요</Button>
-        <Button onclick={deleteEntry}>삭제할게요</Button>
+      <div class="flex gap-x-2">
+        <Button color="gray" onclick={closeModal} class="flex-1">아니요</Button>
+        <Button onclick={deleteEntry} class="flex-1">삭제할게요</Button>
       </div>
     </div>
   {/if}
diff --git a/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte b/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte
index dbb13c6..8fbbe43 100644
--- a/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte
+++ b/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
-  import { TextInput } from "$lib/components/inputs";
+  import { Button, TextInput } from "$lib/components/atoms";
   import type { SelectedCategory } from "$lib/molecules/Categories";
 
   interface Props {
@@ -20,7 +19,7 @@
     selectedCategory = undefined;
   };
 
-  const renameEntry = async () => {
+  const renameCategory = async () => {
     // TODO: Validation
 
     if (await onRenameClick(name)) {
@@ -40,8 +39,8 @@
   <div class="mt-2 flex w-full">
     <TextInput bind:value={name} placeholder="이름" />
   </div>
-  <div class="mt-7 flex gap-2">
-    <Button color="gray" onclick={closeModal}>닫기</Button>
-    <Button onclick={renameEntry}>바꾸기</Button>
+  <div class="mt-7 flex gap-x-2">
+    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
+    <Button onclick={renameCategory} class="flex-1">바꾸기</Button>
   </div>
 </Modal>
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index f8bd0c9..6a88980 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -3,7 +3,7 @@
   import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
-  import { FloatingButton } from "$lib/components/buttons";
+  import { FloatingButton } from "$lib/components/atoms";
   import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore, hmacSecretStore } from "$lib/stores";
   import CreateBottomSheet from "./CreateBottomSheet.svelte";
diff --git a/src/routes/(main)/directory/[[id]]/CreateBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/CreateBottomSheet.svelte
index c306c8f..d0b2280 100644
--- a/src/routes/(main)/directory/[[id]]/CreateBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/CreateBottomSheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { BottomSheet } from "$lib/components";
-  import { EntryButton } from "$lib/components/buttons";
+  import { EntryButton } from "$lib/components/atoms";
 
   import IconCreateNewFolder from "~icons/material-symbols/create-new-folder";
   import IconUploadFile from "~icons/material-symbols/upload-file";
@@ -16,13 +16,13 @@
 
 <BottomSheet bind:isOpen>
   <div class="w-full py-4">
-    <EntryButton onclick={onDirectoryCreateClick}>
+    <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}>
+    <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>
diff --git a/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte b/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte
index 52265fe..ec51bd6 100644
--- a/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
-  import { TextInput } from "$lib/components/inputs";
+  import { Button, TextInput } from "$lib/components/atoms";
 
   interface Props {
     onCreateClick: (name: string) => void;
@@ -23,8 +22,8 @@
   <div class="mt-2 flex w-full">
     <TextInput bind:value={name} placeholder="폴더 이름" />
   </div>
-  <div class="mt-7 flex gap-2">
-    <Button color="gray" onclick={closeModal}>닫기</Button>
-    <Button onclick={() => onCreateClick(name)}>만들기</Button>
+  <div class="mt-7 flex gap-x-2">
+    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
+    <Button onclick={() => onCreateClick(name)} class="flex-1">만들기</Button>
   </div>
 </Modal>
diff --git a/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte b/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
index 16dce02..d34a398 100644
--- a/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";
   import type { SelectedDirectoryEntry } from "./service";
 
   interface Props {
@@ -47,9 +47,9 @@
           {/if}
         </p>
       </div>
-      <div class="flex gap-2">
-        <Button color="gray" onclick={closeModal}>아니요</Button>
-        <Button onclick={deleteEntry}>삭제할게요</Button>
+      <div class="flex gap-x-2">
+        <Button color="gray" onclick={closeModal} class="flex-1">아니요</Button>
+        <Button onclick={deleteEntry} class="flex-1">삭제할게요</Button>
       </div>
     </div>
   {/if}
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
index 231acc5..3f35f5d 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { BottomSheet } from "$lib/components";
-  import { EntryButton } from "$lib/components/buttons";
+  import { EntryButton } from "$lib/components/atoms";
   import type { SelectedDirectoryEntry } from "./service";
 
   import IconFolder from "~icons/material-symbols/folder";
@@ -46,13 +46,13 @@
       </div>
       <div class="my-2 h-px w-full bg-gray-200"></div>
     {/if}
-    <EntryButton onclick={onRenameClick}>
+    <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}>
+    <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>
diff --git a/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte b/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
index 6c9d9af..196d9b2 100644
--- a/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";
 
   interface Props {
     file: File | undefined;
@@ -21,9 +21,9 @@
         <p class="text-xl font-bold">'{nameShort}' 파일이 있어요.</p>
         <p>예전에 이미 업로드된 파일이에요. 그래도 업로드할까요?</p>
       </div>
-      <div class="flex gap-2">
-        <Button color="gray" onclick={onclose}>아니요</Button>
-        <Button onclick={onDuplicateClick}>업로드할게요</Button>
+      <div class="flex gap-x-2">
+        <Button color="gray" onclick={onclose} class="flex-1">아니요</Button>
+        <Button onclick={onDuplicateClick} class="flex-1">업로드할게요</Button>
       </div>
     </div>
   {/if}
diff --git a/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte b/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
index 015d157..24c82be 100644
--- a/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
-  import { TextInput } from "$lib/components/inputs";
+  import { Button, TextInput } from "$lib/components/atoms";
   import type { SelectedDirectoryEntry } from "./service";
 
   interface Props {
@@ -40,8 +39,8 @@
   <div class="mt-2 flex w-full">
     <TextInput bind:value={name} placeholder="이름" />
   </div>
-  <div class="mt-7 flex gap-2">
-    <Button color="gray" onclick={closeModal}>닫기</Button>
-    <Button onclick={renameEntry}>바꾸기</Button>
+  <div class="mt-7 flex gap-x-2">
+    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
+    <Button onclick={renameEntry} class="flex-1">바꾸기</Button>
   </div>
 </Modal>
diff --git a/src/routes/(main)/menu/MenuEntryButton.svelte b/src/routes/(main)/menu/MenuEntryButton.svelte
index eb236c9..4e2b31c 100644
--- a/src/routes/(main)/menu/MenuEntryButton.svelte
+++ b/src/routes/(main)/menu/MenuEntryButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Component, Snippet } from "svelte";
   import type { SvelteHTMLElements } from "svelte/elements";
-  import { EntryButton } from "$lib/components/buttons";
+  import { EntryButton } from "$lib/components/atoms";
 
   interface Props {
     children: Snippet;
@@ -13,7 +13,7 @@
   let { children, icon: Icon, iconColor, onclick }: Props = $props();
 </script>
 
-<EntryButton {onclick}>
+<EntryButton {onclick} class="w-full">
   <div class="flex items-center gap-x-4">
     <div class="rounded-lg bg-gray-200 p-1 {iconColor}">
       <Icon />

From fea9cd729c05b484c57558616378354e0c0b3ef8 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Fri, 24 Jan 2025 21:24:59 +0900
Subject: [PATCH 02/16] =?UTF-8?q?Modal,=20AdaptiveDiv,=20BottomDiv=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20molecules=20?=
 =?UTF-8?q?=EB=94=94=EB=A0=89=ED=84=B0=EB=A6=AC=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=20=EB=B0=8F=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/BottomSheet.svelte         |  2 +-
 src/lib/components/{ => atoms}/Modal.svelte   | 23 ++++-----
 .../atoms/buttons/FloatingButton.svelte       |  2 +-
 .../components/atoms/divs/AdaptiveDiv.svelte  | 15 ++++++
 .../components/atoms/divs/BottomDiv.svelte    | 15 ++++++
 src/lib/components/atoms/divs/index.ts        |  2 +
 src/lib/components/atoms/index.ts             |  2 +
 .../components/atoms/inputs/TextInput.svelte  | 33 +++++++------
 src/lib/components/divs/AdaptiveDiv.svelte    |  7 ---
 src/lib/components/divs/BottomDiv.svelte      |  7 ---
 src/lib/components/divs/index.ts              |  2 -
 src/lib/components/index.ts                   |  1 -
 .../components/molecules/ActionModal.svelte   | 48 +++++++++++++++++++
 src/lib/components/molecules/index.ts         |  2 +
 src/lib/components/organisms/index.ts         |  1 +
 .../modals/CategoryCreateModal.svelte         | 18 +++++++
 .../organisms/modals/RenameModal.svelte       | 22 +++++++++
 .../organisms/modals/TextInputModal.svelte    | 42 ++++++++++++++++
 src/lib/components/organisms/modals/index.ts  |  3 ++
 src/lib/organisms/CreateCategoryModal.svelte  | 29 -----------
 src/lib/services/category.ts                  |  4 +-
 src/routes/(fullscreen)/+layout.svelte        |  2 +-
 .../auth/changePassword/+page.svelte          |  4 +-
 .../(fullscreen)/auth/login/+page.svelte      |  6 +--
 .../file/[id]/AddToCategoryBottomSheet.svelte | 28 +++++------
 .../(fullscreen)/key/export/+page.svelte      |  6 +--
 .../export/BeforeContinueBottomSheet.svelte   | 11 ++---
 .../key/export/BeforeContinueModal.svelte     |  3 +-
 .../(fullscreen)/key/generate/+page.svelte    |  6 +--
 src/routes/(main)/+layout.svelte              |  4 +-
 src/routes/(main)/BottomBar.svelte            |  2 +-
 .../(main)/category/[[id]]/+page.svelte       | 40 ++++++++--------
 .../[[id]]/DeleteCategoryModal.svelte         |  3 +-
 .../[[id]]/RenameCategoryModal.svelte         | 46 ------------------
 .../(main)/directory/[[id]]/+page.svelte      | 23 +++++----
 .../[[id]]/CreateDirectoryModal.svelte        |  3 +-
 .../[[id]]/DeleteDirectoryEntryModal.svelte   |  3 +-
 .../[[id]]/DuplicateFileModal.svelte          |  3 +-
 .../[[id]]/RenameDirectoryEntryModal.svelte   | 46 ------------------
 src/routes/(main)/directory/[[id]]/service.ts |  6 ++-
 40 files changed, 279 insertions(+), 246 deletions(-)
 rename src/lib/components/{ => atoms}/Modal.svelte (58%)
 create mode 100644 src/lib/components/atoms/divs/AdaptiveDiv.svelte
 create mode 100644 src/lib/components/atoms/divs/BottomDiv.svelte
 create mode 100644 src/lib/components/atoms/divs/index.ts
 delete mode 100644 src/lib/components/divs/AdaptiveDiv.svelte
 delete mode 100644 src/lib/components/divs/BottomDiv.svelte
 create mode 100644 src/lib/components/molecules/ActionModal.svelte
 create mode 100644 src/lib/components/molecules/index.ts
 create mode 100644 src/lib/components/organisms/index.ts
 create mode 100644 src/lib/components/organisms/modals/CategoryCreateModal.svelte
 create mode 100644 src/lib/components/organisms/modals/RenameModal.svelte
 create mode 100644 src/lib/components/organisms/modals/TextInputModal.svelte
 create mode 100644 src/lib/components/organisms/modals/index.ts
 delete mode 100644 src/lib/organisms/CreateCategoryModal.svelte
 delete mode 100644 src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte
 delete mode 100644 src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte

diff --git a/src/lib/components/BottomSheet.svelte b/src/lib/components/BottomSheet.svelte
index a283957..0ee943a 100644
--- a/src/lib/components/BottomSheet.svelte
+++ b/src/lib/components/BottomSheet.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import { fade, fly } from "svelte/transition";
-  import { AdaptiveDiv } from "$lib/components/divs";
+  import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
     children: Snippet;
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/atoms/Modal.svelte
similarity index 58%
rename from src/lib/components/Modal.svelte
rename to src/lib/components/atoms/Modal.svelte
index 5da23b2..edfce1f 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/atoms/Modal.svelte
@@ -1,35 +1,30 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
   import { fade } from "svelte/transition";
-  import { AdaptiveDiv } from "$lib/components/divs";
+  import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
-    children: Snippet;
-    onclose?: () => void;
+    children?: Snippet;
+    class?: ClassValue;
     isOpen: boolean;
+    onclose?: () => void;
   }
 
-  let { children, onclose, isOpen = $bindable() }: Props = $props();
-
-  const closeModal = $derived(
-    onclose ||
-      (() => {
-        isOpen = false;
-      }),
-  );
+  let { children, isOpen = $bindable(), onclose, ...props }: Props = $props();
 </script>
 
 {#if isOpen}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    onclick={closeModal}
+    onclick={onclose || (() => (isOpen = false))}
     class="fixed inset-0 z-10 bg-black bg-opacity-50"
     transition:fade={{ duration: 100 }}
   >
-    <AdaptiveDiv>
+    <AdaptiveDiv class="h-full">
       <div class="flex h-full items-center justify-center px-4">
-        <div onclick={(e) => e.stopPropagation()} class="rounded-2xl bg-white p-4">
+        <div onclick={(e) => e.stopPropagation()} class={["rounded-2xl bg-white p-4", props.class]}>
           {@render children?.()}
         </div>
       </div>
diff --git a/src/lib/components/atoms/buttons/FloatingButton.svelte b/src/lib/components/atoms/buttons/FloatingButton.svelte
index 499a043..924b086 100644
--- a/src/lib/components/atoms/buttons/FloatingButton.svelte
+++ b/src/lib/components/atoms/buttons/FloatingButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import { AdaptiveDiv } from "$lib/components/divs";
+  import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
     icon: Component<SvelteHTMLElements["svg"]>;
diff --git a/src/lib/components/atoms/divs/AdaptiveDiv.svelte b/src/lib/components/atoms/divs/AdaptiveDiv.svelte
new file mode 100644
index 0000000..7f2ef32
--- /dev/null
+++ b/src/lib/components/atoms/divs/AdaptiveDiv.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+  }
+
+  let { children, ...props }: Props = $props();
+</script>
+
+<div class={["mx-auto w-full max-w-screen-md", props.class]}>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/atoms/divs/BottomDiv.svelte b/src/lib/components/atoms/divs/BottomDiv.svelte
new file mode 100644
index 0000000..74386b3
--- /dev/null
+++ b/src/lib/components/atoms/divs/BottomDiv.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+  }
+
+  let { children, ...props }: Props = $props();
+</script>
+
+<div class={["sticky bottom-0 bg-white pb-4", props.class]}>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/atoms/divs/index.ts b/src/lib/components/atoms/divs/index.ts
new file mode 100644
index 0000000..0044d60
--- /dev/null
+++ b/src/lib/components/atoms/divs/index.ts
@@ -0,0 +1,2 @@
+export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte";
+export { default as BottomDiv } from "./BottomDiv.svelte";
diff --git a/src/lib/components/atoms/index.ts b/src/lib/components/atoms/index.ts
index 5c96a2a..a977f53 100644
--- a/src/lib/components/atoms/index.ts
+++ b/src/lib/components/atoms/index.ts
@@ -1,2 +1,4 @@
 export * from "./buttons";
+export * from "./divs";
 export * from "./inputs";
+export { default as Modal } from "./Modal.svelte";
diff --git a/src/lib/components/atoms/inputs/TextInput.svelte b/src/lib/components/atoms/inputs/TextInput.svelte
index f30c331..9da684a 100644
--- a/src/lib/components/atoms/inputs/TextInput.svelte
+++ b/src/lib/components/atoms/inputs/TextInput.svelte
@@ -1,26 +1,31 @@
 <script lang="ts">
+  import type { ClassValue } from "svelte/elements";
+
   interface Props {
+    class?: ClassValue;
     placeholder: string;
     type?: "text" | "password";
     value?: string;
   }
 
-  let { placeholder, type = "text", value = $bindable("") }: Props = $props();
+  let { placeholder, type = "text", value = $bindable(""), ...props }: Props = $props();
 </script>
 
-<div class="relative mt-5">
-  <input
-    bind:value
-    {type}
-    placeholder=""
-    class="w-full border-b-2 border-gray-300 py-1 text-xl outline-none transition duration-300 ease-in-out"
-  />
-  <!-- svelte-ignore a11y_label_has_associated_control -->
-  <label
-    class="pointer-events-none absolute left-0 top-1/2 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
-  >
-    {placeholder}
-  </label>
+<div class={props.class}>
+  <div class="relative mt-5">
+    <input
+      bind:value
+      {type}
+      placeholder=""
+      class="w-full border-b-2 border-gray-300 py-1 text-xl outline-none transition duration-300 ease-in-out"
+    />
+    <!-- svelte-ignore a11y_label_has_associated_control -->
+    <label
+      class="pointer-events-none absolute left-0 top-1/2 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
+    >
+      {placeholder}
+    </label>
+  </div>
 </div>
 
 <style>
diff --git a/src/lib/components/divs/AdaptiveDiv.svelte b/src/lib/components/divs/AdaptiveDiv.svelte
deleted file mode 100644
index ee845cc..0000000
--- a/src/lib/components/divs/AdaptiveDiv.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-  let { children } = $props();
-</script>
-
-<div class="mx-auto h-full w-full max-w-screen-md">
-  {@render children?.()}
-</div>
diff --git a/src/lib/components/divs/BottomDiv.svelte b/src/lib/components/divs/BottomDiv.svelte
deleted file mode 100644
index 8a10a99..0000000
--- a/src/lib/components/divs/BottomDiv.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-  let { children } = $props();
-</script>
-
-<div class="sticky bottom-0 flex flex-col items-center gap-y-2 bg-white pb-4">
-  {@render children?.()}
-</div>
diff --git a/src/lib/components/divs/index.ts b/src/lib/components/divs/index.ts
index 7bd6a34..9d99271 100644
--- a/src/lib/components/divs/index.ts
+++ b/src/lib/components/divs/index.ts
@@ -1,3 +1 @@
-export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte";
-export { default as BottomDiv } from "./BottomDiv.svelte";
 export { default as TitleDiv } from "./TitleDiv.svelte";
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 536f01f..7205520 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,3 +1,2 @@
 export { default as BottomSheet } from "./BottomSheet.svelte";
-export { default as Modal } from "./Modal.svelte";
 export { default as TopBar } from "./TopBar.svelte";
diff --git a/src/lib/components/molecules/ActionModal.svelte b/src/lib/components/molecules/ActionModal.svelte
new file mode 100644
index 0000000..2912f62
--- /dev/null
+++ b/src/lib/components/molecules/ActionModal.svelte
@@ -0,0 +1,48 @@
+<script module lang="ts">
+  export type ConfirmHandler = () => void | Promise<void> | boolean | Promise<boolean>;
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Button, Modal } from "$lib/components/atoms";
+
+  interface Props {
+    cancelText?: string;
+    children?: Snippet;
+    confirmText: string;
+    isOpen: boolean;
+    onbeforeclose?: () => void;
+    onconfirm: ConfirmHandler;
+    title: string;
+  }
+
+  let {
+    cancelText = "닫기",
+    children,
+    confirmText,
+    isOpen = $bindable(),
+    onbeforeclose,
+    onconfirm,
+    title,
+  }: Props = $props();
+
+  const closeModal = () => {
+    onbeforeclose?.();
+    isOpen = false;
+  };
+
+  const confirmAction = async () => {
+    if ((await onconfirm()) !== false) {
+      closeModal();
+    }
+  };
+</script>
+
+<Modal bind:isOpen onclose={closeModal} class="flex flex-col gap-y-2">
+  <p class="text-xl font-bold">{title}</p>
+  {@render children?.()}
+  <div class="flex gap-x-2">
+    <Button color="gray" onclick={closeModal} class="flex-1">{cancelText}</Button>
+    <Button onclick={confirmAction} class="flex-1">{confirmText}</Button>
+  </div>
+</Modal>
diff --git a/src/lib/components/molecules/index.ts b/src/lib/components/molecules/index.ts
new file mode 100644
index 0000000..e73ef7e
--- /dev/null
+++ b/src/lib/components/molecules/index.ts
@@ -0,0 +1,2 @@
+export * from "./ActionModal.svelte";
+export { default as ActionModal } from "./ActionModal.svelte";
diff --git a/src/lib/components/organisms/index.ts b/src/lib/components/organisms/index.ts
new file mode 100644
index 0000000..fa02317
--- /dev/null
+++ b/src/lib/components/organisms/index.ts
@@ -0,0 +1 @@
+export * from "./modals";
diff --git a/src/lib/components/organisms/modals/CategoryCreateModal.svelte b/src/lib/components/organisms/modals/CategoryCreateModal.svelte
new file mode 100644
index 0000000..85cd48e
--- /dev/null
+++ b/src/lib/components/organisms/modals/CategoryCreateModal.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { TextInputModal } from "$lib/components/organisms";
+
+  interface Props {
+    isOpen: boolean;
+    oncreate: (name: string) => Promise<boolean>;
+  }
+
+  let { isOpen = $bindable(), oncreate }: Props = $props();
+</script>
+
+<TextInputModal
+  bind:isOpen
+  title="새 카테고리"
+  placeholder="카테고리 이름"
+  submitText="만들기"
+  onsubmit={oncreate}
+/>
diff --git a/src/lib/components/organisms/modals/RenameModal.svelte b/src/lib/components/organisms/modals/RenameModal.svelte
new file mode 100644
index 0000000..503f4dd
--- /dev/null
+++ b/src/lib/components/organisms/modals/RenameModal.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { TextInputModal } from "$lib/components/organisms";
+
+  interface Props {
+    isOpen: boolean;
+    onbeforeclose?: () => void;
+    onrename: (newName: string) => Promise<boolean>;
+    originalName: string | undefined;
+  }
+
+  let { isOpen = $bindable(), onbeforeclose, onrename, originalName }: Props = $props();
+</script>
+
+<TextInputModal
+  bind:isOpen
+  {onbeforeclose}
+  title="이름 바꾸기"
+  placeholder="이름"
+  defaultValue={originalName}
+  submitText="바꾸기"
+  onsubmit={onrename}
+/>
diff --git a/src/lib/components/organisms/modals/TextInputModal.svelte b/src/lib/components/organisms/modals/TextInputModal.svelte
new file mode 100644
index 0000000..196dcc7
--- /dev/null
+++ b/src/lib/components/organisms/modals/TextInputModal.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { TextInput } from "$lib/components/atoms";
+  import { ActionModal, type ConfirmHandler } from "$lib/components/molecules";
+
+  interface Props {
+    defaultValue?: string;
+    isOpen: boolean;
+    onbeforeclose?: () => void;
+    onsubmit: (value: string) => ReturnType<ConfirmHandler>;
+    placeholder: string;
+    submitText: string;
+    title: string;
+  }
+
+  let {
+    defaultValue = "",
+    isOpen = $bindable(),
+    onbeforeclose,
+    onsubmit,
+    placeholder,
+    submitText,
+    title,
+  }: Props = $props();
+
+  let value = $state(defaultValue);
+
+  $effect.pre(() => {
+    if (isOpen) {
+      value = defaultValue;
+    }
+  });
+</script>
+
+<ActionModal
+  bind:isOpen
+  {onbeforeclose}
+  {title}
+  confirmText={submitText}
+  onconfirm={() => onsubmit(value)}
+>
+  <TextInput bind:value {placeholder} class="mb-5" />
+</ActionModal>
diff --git a/src/lib/components/organisms/modals/index.ts b/src/lib/components/organisms/modals/index.ts
new file mode 100644
index 0000000..2fa9422
--- /dev/null
+++ b/src/lib/components/organisms/modals/index.ts
@@ -0,0 +1,3 @@
+export { default as CategoryCreateModal } from "./CategoryCreateModal.svelte";
+export { default as RenameModal } from "./RenameModal.svelte";
+export { default as TextInputModal } from "./TextInputModal.svelte";
diff --git a/src/lib/organisms/CreateCategoryModal.svelte b/src/lib/organisms/CreateCategoryModal.svelte
deleted file mode 100644
index 363670d..0000000
--- a/src/lib/organisms/CreateCategoryModal.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-  import { Modal } from "$lib/components";
-  import { Button, TextInput } from "$lib/components/atoms";
-
-  interface Props {
-    onCreateClick: (name: string) => void;
-    isOpen: boolean;
-  }
-
-  let { onCreateClick, isOpen = $bindable() }: Props = $props();
-
-  let name = $state("");
-
-  const closeModal = () => {
-    name = "";
-    isOpen = false;
-  };
-</script>
-
-<Modal bind:isOpen onclose={closeModal}>
-  <p class="text-xl font-bold">새 카테고리</p>
-  <div class="mt-2 flex w-full">
-    <TextInput bind:value={name} placeholder="카테고리 이름" />
-  </div>
-  <div class="mt-7 flex gap-x-2">
-    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
-    <Button onclick={() => onCreateClick(name)} class="flex-1">만들기</Button>
-  </div>
-</Modal>
diff --git a/src/lib/services/category.ts b/src/lib/services/category.ts
index ab574f5..587df3f 100644
--- a/src/lib/services/category.ts
+++ b/src/lib/services/category.ts
@@ -10,7 +10,8 @@ export const requestCategoryCreation = async (
 ) => {
   const { dataKey, dataKeyVersion } = await generateDataKey();
   const nameEncrypted = await encryptString(name, dataKey);
-  await callPostApi<CategoryCreateRequest>("/api/category/create", {
+
+  const res = await callPostApi<CategoryCreateRequest>("/api/category/create", {
     parent: parentId,
     mekVersion: masterKey.version,
     dek: await wrapDataKey(dataKey, masterKey.key),
@@ -18,6 +19,7 @@ export const requestCategoryCreation = async (
     name: nameEncrypted.ciphertext,
     nameIv: nameEncrypted.iv,
   });
+  return res.ok;
 };
 
 export const requestFileRemovalFromCategory = async (fileId: number, categoryId: number) => {
diff --git a/src/routes/(fullscreen)/+layout.svelte b/src/routes/(fullscreen)/+layout.svelte
index 017f507..e7e28a9 100644
--- a/src/routes/(fullscreen)/+layout.svelte
+++ b/src/routes/(fullscreen)/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AdaptiveDiv } from "$lib/components/divs";
+  import { AdaptiveDiv } from "$lib/components/atoms";
 
   let { children } = $props();
 </script>
diff --git a/src/routes/(fullscreen)/auth/changePassword/+page.svelte b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
index 92d90a3..e184b04 100644
--- a/src/routes/(fullscreen)/auth/changePassword/+page.svelte
+++ b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
-  import { Button, TextInput } from "$lib/components/atoms";
-  import { TitleDiv, BottomDiv } from "$lib/components/divs";
+  import { Button, BottomDiv, TextInput } from "$lib/components/atoms";
+  import { TitleDiv } from "$lib/components/divs";
   import { requestPasswordChange } from "./service";
 
   let oldPassword = $state("");
diff --git a/src/routes/(fullscreen)/auth/login/+page.svelte b/src/routes/(fullscreen)/auth/login/+page.svelte
index 5edc400..362dc87 100644
--- a/src/routes/(fullscreen)/auth/login/+page.svelte
+++ b/src/routes/(fullscreen)/auth/login/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { Button, TextButton, TextInput } from "$lib/components/atoms";
-  import { TitleDiv, BottomDiv } from "$lib/components/divs";
+  import { Button, TextButton, BottomDiv, TextInput } from "$lib/components/atoms";
+  import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service";
 
@@ -56,7 +56,7 @@
     <TextInput bind:value={password} placeholder="비밀번호" type="password" />
   </div>
 </TitleDiv>
-<BottomDiv>
+<BottomDiv class="flex flex-col items-center gap-y-2">
   <Button onclick={login} class="w-full">로그인</Button>
   <TextButton>계정이 없어요</TextButton>
 </BottomDiv>
diff --git a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
index f2a9232..ad3ecb4 100644
--- a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
+++ b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import { BottomSheet } from "$lib/components";
-  import { Button } from "$lib/components/atoms";
-  import { BottomDiv } from "$lib/components/divs";
+  import { Button, BottomDiv } from "$lib/components/atoms";
+  import { CategoryCreateModal } from "$lib/components/organisms/modals";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import SubCategories from "$lib/molecules/SubCategories.svelte";
-  import CreateCategoryModal from "$lib/organisms/CreateCategoryModal.svelte";
   import { masterKeyStore } from "$lib/stores";
   import { requestCategoryCreation } from "./service";
 
@@ -18,15 +17,7 @@
 
   let category: Writable<CategoryInfo | null> | undefined = $state();
 
-  let isCreateCategoryModalOpen = $state(false);
-
-  const createCategory = async (name: string) => {
-    if (!$category) return; // TODO: Error handling
-
-    await requestCategoryCreation(name, $category.id, $masterKeyStore?.get(1)!);
-    isCreateCategoryModalOpen = false;
-    category = getCategoryInfo($category.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-  };
+  let isCategoryCreateModalOpen = $state(false);
 
   $effect(() => {
     if (isOpen) {
@@ -43,7 +34,7 @@
         info={$category}
         onSubCategoryClick={({ id }) =>
           (category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
-        onSubCategoryCreateClick={() => (isCreateCategoryModalOpen = true)}
+        onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
         subCategoryCreatePosition="top"
       />
       {#if $category.id !== "root"}
@@ -57,4 +48,13 @@
   </div>
 </BottomSheet>
 
-<CreateCategoryModal bind:isOpen={isCreateCategoryModalOpen} onCreateClick={createCategory} />
+<CategoryCreateModal
+  bind:isOpen={isCategoryCreateModalOpen}
+  oncreate={async (name: string) => {
+    if (await requestCategoryCreation(name, $category!.id, $masterKeyStore?.get(1)!)) {
+      category = getCategoryInfo($category!.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>
diff --git a/src/routes/(fullscreen)/key/export/+page.svelte b/src/routes/(fullscreen)/key/export/+page.svelte
index 95d49f6..5fae2ba 100644
--- a/src/routes/(fullscreen)/key/export/+page.svelte
+++ b/src/routes/(fullscreen)/key/export/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import FileSaver from "file-saver";
   import { goto } from "$app/navigation";
-  import { Button, TextButton } from "$lib/components/atoms";
-  import { TitleDiv, BottomDiv } from "$lib/components/divs";
+  import { Button, TextButton, BottomDiv } from "$lib/components/atoms";
+  import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore } from "$lib/stores";
   import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
   import BeforeContinueModal from "./BeforeContinueModal.svelte";
@@ -100,7 +100,7 @@
     </div>
   </div>
 </TitleDiv>
-<BottomDiv>
+<BottomDiv class="flex flex-col items-center gap-y-2">
   <Button onclick={exportClientKeys} class="w-full">암호 키 내보내기</Button>
   <TextButton onclick={() => (isBeforeContinueModalOpen = true)}>내보내지 않을래요</TextButton>
 </BottomDiv>
diff --git a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte b/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
index 686897c..594d297 100644
--- a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { BottomSheet } from "$lib/components";
-  import { Button } from "$lib/components/atoms";
-  import { BottomDiv } from "$lib/components/divs";
+  import { Button, BottomDiv } from "$lib/components/atoms";
 
   interface Props {
     onRetryClick: () => void;
@@ -21,11 +20,9 @@
         한 번 확인해 주세요.
       </p>
     </div>
-    <BottomDiv>
-      <div class="flex w-full gap-x-2">
-        <Button color="gray" onclick={onRetryClick} class="flex-1">다시 저장할래요</Button>
-        <Button onclick={onContinueClick} class="flex-1">잘 저장되었어요</Button>
-      </div>
+    <BottomDiv class="flex gap-x-2">
+      <Button color="gray" onclick={onRetryClick} class="flex-1">다시 저장할래요</Button>
+      <Button onclick={onContinueClick} class="flex-1">잘 저장되었어요</Button>
     </BottomDiv>
   </div>
 </BottomSheet>
diff --git a/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
index e2bd10a..d1ea9c5 100644
--- a/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/atoms";
+  import { Button, Modal } from "$lib/components/atoms";
 
   interface Props {
     onContinueClick: () => void;
diff --git a/src/routes/(fullscreen)/key/generate/+page.svelte b/src/routes/(fullscreen)/key/generate/+page.svelte
index 0063179..8a2eeb7 100644
--- a/src/routes/(fullscreen)/key/generate/+page.svelte
+++ b/src/routes/(fullscreen)/key/generate/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { Button, TextButton } from "$lib/components/atoms";
-  import { TitleDiv, BottomDiv } from "$lib/components/divs";
+  import { Button, TextButton, BottomDiv } from "$lib/components/atoms";
+  import { TitleDiv } from "$lib/components/divs";
   import { gotoStateful } from "$lib/hooks";
   import { clientKeyStore } from "$lib/stores";
   import Order from "./Order.svelte";
@@ -79,7 +79,7 @@
     </div>
   </div>
 </TitleDiv>
-<BottomDiv>
+<BottomDiv class="flex flex-col items-center gap-y-2">
   <Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button>
   <TextButton>키를 갖고 있어요</TextButton>
 </BottomDiv>
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
index 09cbb3c..e58d5e1 100644
--- a/src/routes/(main)/+layout.svelte
+++ b/src/routes/(main)/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AdaptiveDiv } from "$lib/components/divs";
+  import { AdaptiveDiv } from "$lib/components/atoms";
   import BottomBar from "./BottomBar.svelte";
 
   let { children } = $props();
@@ -7,7 +7,7 @@
 
 <div class="flex h-screen flex-col justify-between">
   <div class="flex-grow">
-    <AdaptiveDiv>
+    <AdaptiveDiv class="h-full">
       {@render children()}
     </AdaptiveDiv>
   </div>
diff --git a/src/routes/(main)/BottomBar.svelte b/src/routes/(main)/BottomBar.svelte
index db42bd2..d3e7a74 100644
--- a/src/routes/(main)/BottomBar.svelte
+++ b/src/routes/(main)/BottomBar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
-  import { AdaptiveDiv } from "$lib/components/divs";
+  import { AdaptiveDiv } from "$lib/components/atoms";
 
   import IconHome from "~icons/material-symbols/home";
   import IconFolder from "~icons/material-symbols/folder";
diff --git a/src/routes/(main)/category/[[id]]/+page.svelte b/src/routes/(main)/category/[[id]]/+page.svelte
index 587390e..3f18804 100644
--- a/src/routes/(main)/category/[[id]]/+page.svelte
+++ b/src/routes/(main)/category/[[id]]/+page.svelte
@@ -2,14 +2,13 @@
   import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
+  import { CategoryCreateModal, RenameModal } from "$lib/components/organisms";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import type { SelectedCategory } from "$lib/molecules/Categories";
   import Category from "$lib/organisms/Category";
-  import CreateCategoryModal from "$lib/organisms/CreateCategoryModal.svelte";
   import { masterKeyStore } from "$lib/stores";
   import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
   import DeleteCategoryModal from "./DeleteCategoryModal.svelte";
-  import RenameCategoryModal from "./RenameCategoryModal.svelte";
   import {
     requestCategoryCreation,
     requestFileRemovalFromCategory,
@@ -24,17 +23,11 @@
 
   let isFileRecursive = $state(false);
 
-  let isCreateCategoryModalOpen = $state(false);
+  let isCategoryCreateModalOpen = $state(false);
   let isSubCategoryMenuBottomSheetOpen = $state(false);
-  let isRenameCategoryModalOpen = $state(false);
+  let isCategoryRenameModalOpen = $state(false);
   let isDeleteCategoryModalOpen = $state(false);
 
-  const createCategory = async (name: string) => {
-    await requestCategoryCreation(name, data.id, $masterKeyStore?.get(1)!);
-    isCreateCategoryModalOpen = false;
-    info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-  };
-
   $effect(() => {
     info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
   });
@@ -59,7 +52,7 @@
           info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
         }}
         onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
-        onSubCategoryCreateClick={() => (isCreateCategoryModalOpen = true)}
+        onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
         onSubCategoryMenuClick={(subCategory) => {
           selectedSubCategory = subCategory;
           isSubCategoryMenuBottomSheetOpen = true;
@@ -69,26 +62,35 @@
   </div>
 </div>
 
-<CreateCategoryModal bind:isOpen={isCreateCategoryModalOpen} onCreateClick={createCategory} />
+<CategoryCreateModal
+  bind:isOpen={isCategoryCreateModalOpen}
+  oncreate={async (name: string) => {
+    if (await requestCategoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
+      info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>
 
 <CategoryMenuBottomSheet
   bind:isOpen={isSubCategoryMenuBottomSheetOpen}
   bind:selectedCategory={selectedSubCategory}
   onRenameClick={() => {
     isSubCategoryMenuBottomSheetOpen = false;
-    isRenameCategoryModalOpen = true;
+    isCategoryRenameModalOpen = true;
   }}
   onDeleteClick={() => {
     isSubCategoryMenuBottomSheetOpen = false;
     isDeleteCategoryModalOpen = true;
   }}
 />
-<RenameCategoryModal
-  bind:isOpen={isRenameCategoryModalOpen}
-  bind:selectedCategory={selectedSubCategory}
-  onRenameClick={async (newName) => {
-    if (selectedSubCategory) {
-      await requestCategoryRename(selectedSubCategory, newName);
+<RenameModal
+  bind:isOpen={isCategoryRenameModalOpen}
+  onbeforeclose={() => (selectedSubCategory = undefined)}
+  originalName={selectedSubCategory?.name}
+  onrename={async (newName: string) => {
+    if (await requestCategoryRename(selectedSubCategory!, newName)) {
       info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
diff --git a/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte b/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
index 0c3b7ea..a10af62 100644
--- a/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
+++ b/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/atoms";
+  import { Button, Modal } from "$lib/components/atoms";
   import type { SelectedCategory } from "$lib/molecules/Categories";
 
   interface Props {
diff --git a/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte b/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte
deleted file mode 100644
index 8fbbe43..0000000
--- a/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-  import { Modal } from "$lib/components";
-  import { Button, TextInput } from "$lib/components/atoms";
-  import type { SelectedCategory } from "$lib/molecules/Categories";
-
-  interface Props {
-    onRenameClick: (newName: string) => Promise<boolean>;
-    isOpen: boolean;
-    selectedCategory: SelectedCategory | undefined;
-  }
-
-  let { onRenameClick, isOpen = $bindable(), selectedCategory = $bindable() }: Props = $props();
-
-  let name = $state("");
-
-  const closeModal = () => {
-    name = "";
-    isOpen = false;
-    selectedCategory = undefined;
-  };
-
-  const renameCategory = async () => {
-    // TODO: Validation
-
-    if (await onRenameClick(name)) {
-      closeModal();
-    }
-  };
-
-  $effect(() => {
-    if (selectedCategory) {
-      name = selectedCategory.name;
-    }
-  });
-</script>
-
-<Modal bind:isOpen onclose={closeModal}>
-  <p class="text-xl font-bold">이름 바꾸기</p>
-  <div class="mt-2 flex w-full">
-    <TextInput bind:value={name} placeholder="이름" />
-  </div>
-  <div class="mt-7 flex gap-x-2">
-    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
-    <Button onclick={renameCategory} class="flex-1">바꾸기</Button>
-  </div>
-</Modal>
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index 6a88980..3e3d056 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -4,6 +4,7 @@
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
   import { FloatingButton } from "$lib/components/atoms";
+  import { RenameModal } from "$lib/components/organisms";
   import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore, hmacSecretStore } from "$lib/stores";
   import CreateBottomSheet from "./CreateBottomSheet.svelte";
@@ -13,7 +14,6 @@
   import DirectoryEntryMenuBottomSheet from "./DirectoryEntryMenuBottomSheet.svelte";
   import DownloadStatusCard from "./DownloadStatusCard.svelte";
   import DuplicateFileModal from "./DuplicateFileModal.svelte";
-  import RenameDirectoryEntryModal from "./RenameDirectoryEntryModal.svelte";
   import UploadStatusCard from "./UploadStatusCard.svelte";
   import {
     requestHmacSecretDownload,
@@ -39,7 +39,7 @@
   let isDuplicateFileModalOpen = $state(false);
 
   let isDirectoryEntryMenuBottomSheetOpen = $state(false);
-  let isRenameDirectoryEntryModalOpen = $state(false);
+  let isDirectoryEntryRenameModalOpen = $state(false);
   let isDeleteDirectoryEntryModalOpen = $state(false);
 
   const createDirectory = async (name: string) => {
@@ -159,20 +159,23 @@
   bind:selectedEntry
   onRenameClick={() => {
     isDirectoryEntryMenuBottomSheetOpen = false;
-    isRenameDirectoryEntryModalOpen = true;
+    isDirectoryEntryRenameModalOpen = true;
   }}
   onDeleteClick={() => {
     isDirectoryEntryMenuBottomSheetOpen = false;
     isDeleteDirectoryEntryModalOpen = true;
   }}
 />
-<RenameDirectoryEntryModal
-  bind:isOpen={isRenameDirectoryEntryModalOpen}
-  bind:selectedEntry
-  onRenameClick={async (newName) => {
-    await requestDirectoryEntryRename(selectedEntry!, newName);
-    info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-    return true;
+<RenameModal
+  bind:isOpen={isDirectoryEntryRenameModalOpen}
+  onbeforeclose={() => (selectedEntry = undefined)}
+  originalName={selectedEntry?.name}
+  onrename={async (newName: string) => {
+    if (await requestDirectoryEntryRename(selectedEntry!, newName)) {
+      info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
   }}
 />
 <DeleteDirectoryEntryModal
diff --git a/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte b/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte
index ec51bd6..987e45e 100644
--- a/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Modal } from "$lib/components";
-  import { Button, TextInput } from "$lib/components/atoms";
+  import { Button, Modal, TextInput } from "$lib/components/atoms";
 
   interface Props {
     onCreateClick: (name: string) => void;
diff --git a/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte b/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
index d34a398..81eced9 100644
--- a/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/atoms";
+  import { Button, Modal } from "$lib/components/atoms";
   import type { SelectedDirectoryEntry } from "./service";
 
   interface Props {
diff --git a/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte b/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
index 196d9b2..1f97a75 100644
--- a/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/atoms";
+  import { Button, Modal } from "$lib/components/atoms";
 
   interface Props {
     file: File | undefined;
diff --git a/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte b/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
deleted file mode 100644
index 24c82be..0000000
--- a/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-  import { Modal } from "$lib/components";
-  import { Button, TextInput } from "$lib/components/atoms";
-  import type { SelectedDirectoryEntry } from "./service";
-
-  interface Props {
-    onRenameClick: (newName: string) => Promise<boolean>;
-    isOpen: boolean;
-    selectedEntry: SelectedDirectoryEntry | undefined;
-  }
-
-  let { onRenameClick, isOpen = $bindable(), selectedEntry = $bindable() }: Props = $props();
-
-  let name = $state("");
-
-  const closeModal = () => {
-    name = "";
-    isOpen = false;
-    selectedEntry = undefined;
-  };
-
-  const renameEntry = async () => {
-    // TODO: Validation
-
-    if (await onRenameClick(name)) {
-      closeModal();
-    }
-  };
-
-  $effect(() => {
-    if (selectedEntry) {
-      name = selectedEntry.name;
-    }
-  });
-</script>
-
-<Modal bind:isOpen onclose={closeModal}>
-  <p class="text-xl font-bold">이름 바꾸기</p>
-  <div class="mt-2 flex w-full">
-    <TextInput bind:value={name} placeholder="이름" />
-  </div>
-  <div class="mt-7 flex gap-x-2">
-    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
-    <Button onclick={renameEntry} class="flex-1">바꾸기</Button>
-  </div>
-</Modal>
diff --git a/src/routes/(main)/directory/[[id]]/service.ts b/src/routes/(main)/directory/[[id]]/service.ts
index c9a62b2..1b0c427 100644
--- a/src/routes/(main)/directory/[[id]]/service.ts
+++ b/src/routes/(main)/directory/[[id]]/service.ts
@@ -72,19 +72,21 @@ export const requestDirectoryEntryRename = async (
 ) => {
   const newNameEncrypted = await encryptString(newName, entry.dataKey);
 
+  let res;
   if (entry.type === "directory") {
-    await callPostApi<DirectoryRenameRequest>(`/api/directory/${entry.id}/rename`, {
+    res = await callPostApi<DirectoryRenameRequest>(`/api/directory/${entry.id}/rename`, {
       dekVersion: entry.dataKeyVersion.toISOString(),
       name: newNameEncrypted.ciphertext,
       nameIv: newNameEncrypted.iv,
     });
   } else {
-    await callPostApi<FileRenameRequest>(`/api/file/${entry.id}/rename`, {
+    res = await callPostApi<FileRenameRequest>(`/api/file/${entry.id}/rename`, {
       dekVersion: entry.dataKeyVersion.toISOString(),
       name: newNameEncrypted.ciphertext,
       nameIv: newNameEncrypted.iv,
     });
   }
+  return res.ok;
 };
 
 export const requestDirectoryEntryDeletion = async (entry: SelectedDirectoryEntry) => {

From 38a1c8d7e0b735d1b46a569e9551eec142b08c3d Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Fri, 24 Jan 2025 21:58:51 +0900
Subject: [PATCH 03/16] =?UTF-8?q?ActionModal=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EB=B0=8F=20Props=20=EC=9D=B4=EB=A6=84=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/molecules/ActionModal.svelte    | 14 ++++++++------
 .../organisms/modals/CategoryCreateModal.svelte    |  2 +-
 .../components/organisms/modals/RenameModal.svelte |  6 +++---
 .../organisms/modals/TextInputModal.svelte         |  8 ++++----
 src/routes/(main)/category/[[id]]/+page.svelte     |  2 +-
 src/routes/(main)/directory/[[id]]/+page.svelte    |  2 +-
 6 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/molecules/ActionModal.svelte b/src/lib/components/molecules/ActionModal.svelte
index 2912f62..058d572 100644
--- a/src/lib/components/molecules/ActionModal.svelte
+++ b/src/lib/components/molecules/ActionModal.svelte
@@ -12,7 +12,7 @@
     confirmText: string;
     isOpen: boolean;
     onbeforeclose?: () => void;
-    onconfirm: ConfirmHandler;
+    onConfirmClick: ConfirmHandler;
     title: string;
   }
 
@@ -22,7 +22,7 @@
     confirmText,
     isOpen = $bindable(),
     onbeforeclose,
-    onconfirm,
+    onConfirmClick,
     title,
   }: Props = $props();
 
@@ -32,15 +32,17 @@
   };
 
   const confirmAction = async () => {
-    if ((await onconfirm()) !== false) {
+    if ((await onConfirmClick()) !== false) {
       closeModal();
     }
   };
 </script>
 
-<Modal bind:isOpen onclose={closeModal} class="flex flex-col gap-y-2">
-  <p class="text-xl font-bold">{title}</p>
-  {@render children?.()}
+<Modal bind:isOpen onclose={closeModal} class="space-y-4">
+  <div class="flex flex-col gap-y-2 break-keep">
+    <p class="text-xl font-bold">{title}</p>
+    {@render children?.()}
+  </div>
   <div class="flex gap-x-2">
     <Button color="gray" onclick={closeModal} class="flex-1">{cancelText}</Button>
     <Button onclick={confirmAction} class="flex-1">{confirmText}</Button>
diff --git a/src/lib/components/organisms/modals/CategoryCreateModal.svelte b/src/lib/components/organisms/modals/CategoryCreateModal.svelte
index 85cd48e..1e2ed55 100644
--- a/src/lib/components/organisms/modals/CategoryCreateModal.svelte
+++ b/src/lib/components/organisms/modals/CategoryCreateModal.svelte
@@ -14,5 +14,5 @@
   title="새 카테고리"
   placeholder="카테고리 이름"
   submitText="만들기"
-  onsubmit={oncreate}
+  onSubmitClick={oncreate}
 />
diff --git a/src/lib/components/organisms/modals/RenameModal.svelte b/src/lib/components/organisms/modals/RenameModal.svelte
index 503f4dd..66ccfe0 100644
--- a/src/lib/components/organisms/modals/RenameModal.svelte
+++ b/src/lib/components/organisms/modals/RenameModal.svelte
@@ -4,11 +4,11 @@
   interface Props {
     isOpen: boolean;
     onbeforeclose?: () => void;
-    onrename: (newName: string) => Promise<boolean>;
+    onRenameClick: (newName: string) => Promise<boolean>;
     originalName: string | undefined;
   }
 
-  let { isOpen = $bindable(), onbeforeclose, onrename, originalName }: Props = $props();
+  let { isOpen = $bindable(), onbeforeclose, onRenameClick, originalName }: Props = $props();
 </script>
 
 <TextInputModal
@@ -18,5 +18,5 @@
   placeholder="이름"
   defaultValue={originalName}
   submitText="바꾸기"
-  onsubmit={onrename}
+  onSubmitClick={onRenameClick}
 />
diff --git a/src/lib/components/organisms/modals/TextInputModal.svelte b/src/lib/components/organisms/modals/TextInputModal.svelte
index 196dcc7..9131a11 100644
--- a/src/lib/components/organisms/modals/TextInputModal.svelte
+++ b/src/lib/components/organisms/modals/TextInputModal.svelte
@@ -6,7 +6,7 @@
     defaultValue?: string;
     isOpen: boolean;
     onbeforeclose?: () => void;
-    onsubmit: (value: string) => ReturnType<ConfirmHandler>;
+    onSubmitClick: (value: string) => ReturnType<ConfirmHandler>;
     placeholder: string;
     submitText: string;
     title: string;
@@ -16,7 +16,7 @@
     defaultValue = "",
     isOpen = $bindable(),
     onbeforeclose,
-    onsubmit,
+    onSubmitClick,
     placeholder,
     submitText,
     title,
@@ -36,7 +36,7 @@
   {onbeforeclose}
   {title}
   confirmText={submitText}
-  onconfirm={() => onsubmit(value)}
+  onConfirmClick={() => onSubmitClick(value)}
 >
-  <TextInput bind:value {placeholder} class="mb-5" />
+  <TextInput bind:value {placeholder} class="mb-3" />
 </ActionModal>
diff --git a/src/routes/(main)/category/[[id]]/+page.svelte b/src/routes/(main)/category/[[id]]/+page.svelte
index 3f18804..dc701ba 100644
--- a/src/routes/(main)/category/[[id]]/+page.svelte
+++ b/src/routes/(main)/category/[[id]]/+page.svelte
@@ -89,7 +89,7 @@
   bind:isOpen={isCategoryRenameModalOpen}
   onbeforeclose={() => (selectedSubCategory = undefined)}
   originalName={selectedSubCategory?.name}
-  onrename={async (newName: string) => {
+  onRenameClick={async (newName: string) => {
     if (await requestCategoryRename(selectedSubCategory!, newName)) {
       info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index 3e3d056..6e43b73 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -170,7 +170,7 @@
   bind:isOpen={isDirectoryEntryRenameModalOpen}
   onbeforeclose={() => (selectedEntry = undefined)}
   originalName={selectedEntry?.name}
-  onrename={async (newName: string) => {
+  onRenameClick={async (newName: string) => {
     if (await requestDirectoryEntryRename(selectedEntry!, newName)) {
       info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;

From 7dba1cf4c6e886c3341429cca62724c7f94fa39a Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Sat, 25 Jan 2025 22:30:06 +0900
Subject: [PATCH 04/16] =?UTF-8?q?=EA=B8=B0=EC=A1=B4=EC=97=90=20=EC=A0=9C?=
 =?UTF-8?q?=EC=9E=91=EB=90=9C=20=EB=AA=A8=EB=8B=AC=EB=93=A4=EC=9D=84=20Act?=
 =?UTF-8?q?ionModal=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B8=B0?=
 =?UTF-8?q?=EB=B0=98=EC=9C=BC=EB=A1=9C=20=EC=9E=AC=EA=B5=AC=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/BottomSheet.svelte         |   7 +-
 src/lib/components/atoms/Modal.svelte         |   2 +-
 .../modals/CategoryCreateModal.svelte         |   6 +-
 src/lib/modules/util.ts                       |   5 +
 .../file/[id]/AddToCategoryBottomSheet.svelte |   2 +-
 .../key/export/BeforeContinueModal.svelte     |  27 ++--
 .../(main)/category/[[id]]/+page.svelte       |  44 +++---
 .../[[id]]/CategoryDeleteModal.svelte         |  29 ++++
 .../[[id]]/CategoryMenuBottomSheet.svelte     |  58 +++----
 .../[[id]]/CategoryRenameModal.svelte         |  17 ++
 .../[[id]]/DeleteCategoryModal.svelte         |  47 ------
 .../[[id]]/{service.ts => service.svelte.ts}  |  12 ++
 .../(main)/directory/[[id]]/+page.svelte      | 148 +++++++++---------
 .../[[id]]/CreateDirectoryModal.svelte        |  28 ----
 .../[[id]]/DeleteDirectoryEntryModal.svelte   |  55 -------
 .../[[id]]/DirectoryCreateModal.svelte        |  18 +++
 .../DirectoryEntries/DirectoryEntries.svelte  |   6 +-
 .../[[id]]/DirectoryEntries/File.svelte       |   6 +-
 .../DirectoryEntries/SubDirectory.svelte      |   6 +-
 .../DirectoryEntryMenuBottomSheet.svelte      |  62 --------
 .../[[id]]/DuplicateFileModal.svelte          |  38 +++--
 ...t.svelte => EntryCreateBottomSheet.svelte} |   4 +-
 .../directory/[[id]]/EntryDeleteModal.svelte  |  33 ++++
 .../[[id]]/EntryMenuBottomSheet.svelte        |  52 ++++++
 .../directory/[[id]]/EntryRenameModal.svelte  |  17 ++
 .../[[id]]/{service.ts => service.svelte.ts}  |  25 ++-
 26 files changed, 367 insertions(+), 387 deletions(-)
 create mode 100644 src/routes/(main)/category/[[id]]/CategoryDeleteModal.svelte
 create mode 100644 src/routes/(main)/category/[[id]]/CategoryRenameModal.svelte
 delete mode 100644 src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
 rename src/routes/(main)/category/[[id]]/{service.ts => service.svelte.ts} (73%)
 delete mode 100644 src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte
 delete mode 100644 src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
 create mode 100644 src/routes/(main)/directory/[[id]]/DirectoryCreateModal.svelte
 delete mode 100644 src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
 rename src/routes/(main)/directory/[[id]]/{CreateBottomSheet.svelte => EntryCreateBottomSheet.svelte} (91%)
 create mode 100644 src/routes/(main)/directory/[[id]]/EntryDeleteModal.svelte
 create mode 100644 src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
 create mode 100644 src/routes/(main)/directory/[[id]]/EntryRenameModal.svelte
 rename src/routes/(main)/directory/[[id]]/{service.ts => service.svelte.ts} (83%)

diff --git a/src/lib/components/BottomSheet.svelte b/src/lib/components/BottomSheet.svelte
index 0ee943a..9fdfe4b 100644
--- a/src/lib/components/BottomSheet.svelte
+++ b/src/lib/components/BottomSheet.svelte
@@ -23,13 +23,16 @@
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div onclick={closeBottomSheet} class="fixed inset-0 z-10 flex items-end justify-center">
-    <div class="absolute inset-0 bg-black bg-opacity-50" transition:fade={{ duration: 100 }}></div>
+    <div
+      class="absolute inset-0 bg-black bg-opacity-50"
+      transition:fade|global={{ duration: 100 }}
+    ></div>
     <div class="z-20 w-full">
       <AdaptiveDiv>
         <div
           onclick={(e) => e.stopPropagation()}
           class="flex max-h-[70vh] min-h-[30vh] overflow-y-auto rounded-t-2xl bg-white px-4"
-          transition:fly={{ y: 100, duration: 200 }}
+          transition:fly|global={{ y: 100, duration: 200 }}
         >
           {@render children?.()}
         </div>
diff --git a/src/lib/components/atoms/Modal.svelte b/src/lib/components/atoms/Modal.svelte
index edfce1f..2d100d4 100644
--- a/src/lib/components/atoms/Modal.svelte
+++ b/src/lib/components/atoms/Modal.svelte
@@ -20,7 +20,7 @@
   <div
     onclick={onclose || (() => (isOpen = false))}
     class="fixed inset-0 z-10 bg-black bg-opacity-50"
-    transition:fade={{ duration: 100 }}
+    transition:fade|global={{ duration: 100 }}
   >
     <AdaptiveDiv class="h-full">
       <div class="flex h-full items-center justify-center px-4">
diff --git a/src/lib/components/organisms/modals/CategoryCreateModal.svelte b/src/lib/components/organisms/modals/CategoryCreateModal.svelte
index 1e2ed55..279c1a1 100644
--- a/src/lib/components/organisms/modals/CategoryCreateModal.svelte
+++ b/src/lib/components/organisms/modals/CategoryCreateModal.svelte
@@ -3,10 +3,10 @@
 
   interface Props {
     isOpen: boolean;
-    oncreate: (name: string) => Promise<boolean>;
+    onCreateClick: (name: string) => Promise<boolean>;
   }
 
-  let { isOpen = $bindable(), oncreate }: Props = $props();
+  let { isOpen = $bindable(), onCreateClick }: Props = $props();
 </script>
 
 <TextInputModal
@@ -14,5 +14,5 @@
   title="새 카테고리"
   placeholder="카테고리 이름"
   submitText="만들기"
-  onSubmitClick={oncreate}
+  onSubmitClick={onCreateClick}
 />
diff --git a/src/lib/modules/util.ts b/src/lib/modules/util.ts
index 0048e9e..3fff89d 100644
--- a/src/lib/modules/util.ts
+++ b/src/lib/modules/util.ts
@@ -28,6 +28,11 @@ export const formatNetworkSpeed = (speed: number) => {
   return `${(speed / 1000 / 1000 / 1000).toFixed(1)} Gbps`;
 };
 
+export const truncateString = (str: string, maxLength = 20) => {
+  if (str.length <= maxLength) return str;
+  return `${str.slice(0, maxLength)}...`;
+};
+
 export enum SortBy {
   NAME_ASC,
   NAME_DESC,
diff --git a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
index ad3ecb4..619bf8e 100644
--- a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
+++ b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
@@ -50,7 +50,7 @@
 
 <CategoryCreateModal
   bind:isOpen={isCategoryCreateModalOpen}
-  oncreate={async (name: string) => {
+  onCreateClick={async (name: string) => {
     if (await requestCategoryCreation(name, $category!.id, $masterKeyStore?.get(1)!)) {
       category = getCategoryInfo($category!.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
diff --git a/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
index d1ea9c5..2f00b32 100644
--- a/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
@@ -1,23 +1,20 @@
 <script lang="ts">
-  import { Button, Modal } from "$lib/components/atoms";
+  import { ActionModal } from "$lib/components/molecules";
 
   interface Props {
-    onContinueClick: () => void;
     isOpen: boolean;
+    onContinueClick: () => void;
   }
 
-  let { onContinueClick, isOpen = $bindable() }: Props = $props();
+  let { isOpen = $bindable(), onContinueClick }: Props = $props();
 </script>
 
-<Modal bind:isOpen>
-  <div class="space-y-4">
-    <div class="space-y-2 break-keep">
-      <p class="text-xl font-bold">내보내지 않고 계속할까요?</p>
-      <p>암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요.</p>
-    </div>
-    <div class="flex gap-x-2">
-      <Button color="gray" onclick={() => (isOpen = false)} class="flex-1">아니요</Button>
-      <Button onclick={onContinueClick} class="flex-1">계속할게요</Button>
-    </div>
-  </div>
-</Modal>
+<ActionModal
+  bind:isOpen
+  title="내보내지 않고 계속할까요?"
+  cancelText="아니요"
+  confirmText="계속할게요"
+  onConfirmClick={onContinueClick}
+>
+  <p>암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요.</p>
+</ActionModal>
diff --git a/src/routes/(main)/category/[[id]]/+page.svelte b/src/routes/(main)/category/[[id]]/+page.svelte
index dc701ba..81d7524 100644
--- a/src/routes/(main)/category/[[id]]/+page.svelte
+++ b/src/routes/(main)/category/[[id]]/+page.svelte
@@ -2,31 +2,32 @@
   import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
-  import { CategoryCreateModal, RenameModal } from "$lib/components/organisms";
+  import { CategoryCreateModal } from "$lib/components/organisms";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
-  import type { SelectedCategory } from "$lib/molecules/Categories";
   import Category from "$lib/organisms/Category";
   import { masterKeyStore } from "$lib/stores";
+  import CategoryDeleteModal from "./CategoryDeleteModal.svelte";
   import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
-  import DeleteCategoryModal from "./DeleteCategoryModal.svelte";
+  import CategoryRenameModal from "./CategoryRenameModal.svelte";
   import {
+    createContext,
     requestCategoryCreation,
     requestFileRemovalFromCategory,
     requestCategoryRename,
     requestCategoryDeletion,
-  } from "./service";
+  } from "./service.svelte";
 
   let { data } = $props();
+  let context = createContext();
 
   let info: Writable<CategoryInfo | null> | undefined = $state();
-  let selectedSubCategory: SelectedCategory | undefined = $state();
 
   let isFileRecursive = $state(false);
 
   let isCategoryCreateModalOpen = $state(false);
-  let isSubCategoryMenuBottomSheetOpen = $state(false);
+  let isCategoryMenuBottomSheetOpen = $state(false);
   let isCategoryRenameModalOpen = $state(false);
-  let isDeleteCategoryModalOpen = $state(false);
+  let isCategoryDeleteModalOpen = $state(false);
 
   $effect(() => {
     info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
@@ -54,8 +55,8 @@
         onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
         onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
         onSubCategoryMenuClick={(subCategory) => {
-          selectedSubCategory = subCategory;
-          isSubCategoryMenuBottomSheetOpen = true;
+          context.selectedCategory = subCategory;
+          isCategoryMenuBottomSheetOpen = true;
         }}
       />
     {/if}
@@ -64,7 +65,7 @@
 
 <CategoryCreateModal
   bind:isOpen={isCategoryCreateModalOpen}
-  oncreate={async (name: string) => {
+  onCreateClick={async (name: string) => {
     if (await requestCategoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
       info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
@@ -74,35 +75,30 @@
 />
 
 <CategoryMenuBottomSheet
-  bind:isOpen={isSubCategoryMenuBottomSheetOpen}
-  bind:selectedCategory={selectedSubCategory}
+  bind:isOpen={isCategoryMenuBottomSheetOpen}
   onRenameClick={() => {
-    isSubCategoryMenuBottomSheetOpen = false;
+    isCategoryMenuBottomSheetOpen = false;
     isCategoryRenameModalOpen = true;
   }}
   onDeleteClick={() => {
-    isSubCategoryMenuBottomSheetOpen = false;
-    isDeleteCategoryModalOpen = true;
+    isCategoryMenuBottomSheetOpen = false;
+    isCategoryDeleteModalOpen = true;
   }}
 />
-<RenameModal
+<CategoryRenameModal
   bind:isOpen={isCategoryRenameModalOpen}
-  onbeforeclose={() => (selectedSubCategory = undefined)}
-  originalName={selectedSubCategory?.name}
   onRenameClick={async (newName: string) => {
-    if (await requestCategoryRename(selectedSubCategory!, newName)) {
+    if (await requestCategoryRename(context.selectedCategory!, newName)) {
       info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
 />
-<DeleteCategoryModal
-  bind:isOpen={isDeleteCategoryModalOpen}
-  bind:selectedCategory={selectedSubCategory}
+<CategoryDeleteModal
+  bind:isOpen={isCategoryDeleteModalOpen}
   onDeleteClick={async () => {
-    if (selectedSubCategory) {
-      await requestCategoryDeletion(selectedSubCategory);
+    if (await requestCategoryDeletion(context.selectedCategory!)) {
       info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
diff --git a/src/routes/(main)/category/[[id]]/CategoryDeleteModal.svelte b/src/routes/(main)/category/[[id]]/CategoryDeleteModal.svelte
new file mode 100644
index 0000000..5e792d1
--- /dev/null
+++ b/src/routes/(main)/category/[[id]]/CategoryDeleteModal.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { ActionModal } from "$lib/components/molecules";
+  import { truncateString } from "$lib/modules/util";
+  import { useContext } from "./service.svelte";
+
+  interface Props {
+    isOpen: boolean;
+    onDeleteClick: () => Promise<boolean>;
+  }
+
+  let { isOpen = $bindable(), onDeleteClick }: Props = $props();
+  let context = useContext();
+</script>
+
+{#if context.selectedCategory}
+  {@const { name } = context.selectedCategory}
+  <ActionModal
+    bind:isOpen
+    title="'{truncateString(name)}' 카테고리를 삭제할까요?"
+    cancelText="아니요"
+    confirmText="삭제할게요"
+    onConfirmClick={onDeleteClick}
+  >
+    <p>
+      모든 하위 카테고리도 함께 삭제돼요. <br />
+      하지만 카테고리에 추가된 파일들은 삭제되지 않아요.
+    </p>
+  </ActionModal>
+{/if}
diff --git a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
index c71fdff..9e96fba 100644
--- a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
+++ b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
@@ -1,36 +1,26 @@
 <script lang="ts">
   import { BottomSheet } from "$lib/components";
   import { EntryButton } from "$lib/components/atoms";
-  import type { SelectedCategory } from "$lib/molecules/Categories";
+  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";
 
   interface Props {
-    onRenameClick: () => void;
-    onDeleteClick: () => void;
     isOpen: boolean;
-    selectedCategory: SelectedCategory | undefined;
+    onDeleteClick: () => void;
+    onRenameClick: () => void;
   }
 
-  let {
-    onRenameClick,
-    onDeleteClick,
-    isOpen = $bindable(),
-    selectedCategory = $bindable(),
-  }: Props = $props();
-
-  const closeBottomSheet = () => {
-    isOpen = false;
-    selectedCategory = undefined;
-  };
+  let { isOpen = $bindable(), onDeleteClick, onRenameClick }: Props = $props();
+  let context = useContext();
 </script>
 
-<BottomSheet bind:isOpen onclose={closeBottomSheet}>
-  <div class="w-full py-4">
-    {#if selectedCategory}
-      {@const { name } = selectedCategory}
+{#if context.selectedCategory}
+  {@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 />
@@ -40,18 +30,18 @@
         </p>
       </div>
       <div class="my-2 h-px w-full bg-gray-200"></div>
-    {/if}
-    <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>
-  </div>
-</BottomSheet>
+      <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>
+    </div>
+  </BottomSheet>
+{/if}
diff --git a/src/routes/(main)/category/[[id]]/CategoryRenameModal.svelte b/src/routes/(main)/category/[[id]]/CategoryRenameModal.svelte
new file mode 100644
index 0000000..a3ce045
--- /dev/null
+++ b/src/routes/(main)/category/[[id]]/CategoryRenameModal.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { RenameModal } from "$lib/components/organisms";
+  import { useContext } from "./service.svelte";
+
+  interface Props {
+    isOpen: boolean;
+    onRenameClick: (newName: string) => Promise<boolean>;
+  }
+
+  let { isOpen = $bindable(), onRenameClick }: Props = $props();
+  let context = useContext();
+</script>
+
+{#if context.selectedCategory}
+  {@const { name } = context.selectedCategory}
+  <RenameModal bind:isOpen originalName={name} {onRenameClick} />
+{/if}
diff --git a/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte b/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
deleted file mode 100644
index a10af62..0000000
--- a/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-  import { Button, Modal } from "$lib/components/atoms";
-  import type { SelectedCategory } from "$lib/molecules/Categories";
-
-  interface Props {
-    onDeleteClick: () => Promise<boolean>;
-    isOpen: boolean;
-    selectedCategory: SelectedCategory | undefined;
-  }
-
-  let { onDeleteClick, isOpen = $bindable(), selectedCategory = $bindable() }: Props = $props();
-
-  const closeModal = () => {
-    isOpen = false;
-    selectedCategory = undefined;
-  };
-
-  const deleteEntry = async () => {
-    // TODO: Validation
-
-    if (await onDeleteClick()) {
-      closeModal();
-    }
-  };
-</script>
-
-<Modal bind:isOpen onclose={closeModal}>
-  {#if selectedCategory}
-    {@const { name } = selectedCategory}
-    {@const nameShort = name.length > 20 ? `${name.slice(0, 20)}...` : name}
-    <div class="space-y-4">
-      <div class="space-y-2 break-keep">
-        <p class="text-xl font-bold">
-          '{nameShort}' 카테고리를 삭제할까요?
-        </p>
-        <p>
-          모든 하위 카테고리도 함께 삭제돼요. <br />
-          하지만 카테고리에 추가된 파일들은 삭제되지 않아요.
-        </p>
-      </div>
-      <div class="flex gap-x-2">
-        <Button color="gray" onclick={closeModal} class="flex-1">아니요</Button>
-        <Button onclick={deleteEntry} class="flex-1">삭제할게요</Button>
-      </div>
-    </div>
-  {/if}
-</Modal>
diff --git a/src/routes/(main)/category/[[id]]/service.ts b/src/routes/(main)/category/[[id]]/service.svelte.ts
similarity index 73%
rename from src/routes/(main)/category/[[id]]/service.ts
rename to src/routes/(main)/category/[[id]]/service.svelte.ts
index a4ebe57..275fe80 100644
--- a/src/routes/(main)/category/[[id]]/service.ts
+++ b/src/routes/(main)/category/[[id]]/service.svelte.ts
@@ -1,3 +1,4 @@
+import { getContext, setContext } from "svelte";
 import { callPostApi } from "$lib/hooks";
 import { encryptString } from "$lib/modules/crypto";
 import type { SelectedCategory } from "$lib/molecules/Categories";
@@ -5,6 +6,17 @@ import type { CategoryRenameRequest } from "$lib/server/schemas";
 
 export { requestCategoryCreation, requestFileRemovalFromCategory } from "$lib/services/category";
 
+export const createContext = () => {
+  const context = $state({
+    selectedCategory: undefined as SelectedCategory | undefined,
+  });
+  return setContext("context", context);
+};
+
+export const useContext = () => {
+  return getContext<ReturnType<typeof createContext>>("context");
+};
+
 export const requestCategoryRename = async (category: SelectedCategory, newName: string) => {
   const newNameEncrypted = await encryptString(newName, category.dataKey);
 
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index 6e43b73..30cc33f 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -4,49 +4,43 @@
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
   import { FloatingButton } from "$lib/components/atoms";
-  import { RenameModal } from "$lib/components/organisms";
   import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore, hmacSecretStore } from "$lib/stores";
-  import CreateBottomSheet from "./CreateBottomSheet.svelte";
-  import CreateDirectoryModal from "./CreateDirectoryModal.svelte";
-  import DeleteDirectoryEntryModal from "./DeleteDirectoryEntryModal.svelte";
+  import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
   import DirectoryEntries from "./DirectoryEntries";
-  import DirectoryEntryMenuBottomSheet from "./DirectoryEntryMenuBottomSheet.svelte";
   import DownloadStatusCard from "./DownloadStatusCard.svelte";
   import DuplicateFileModal from "./DuplicateFileModal.svelte";
+  import EntryCreateBottomSheet from "./EntryCreateBottomSheet.svelte";
+  import EntryDeleteModal from "./EntryDeleteModal.svelte";
+  import EntryMenuBottomSheet from "./EntryMenuBottomSheet.svelte";
+  import EntryRenameModal from "./EntryRenameModal.svelte";
   import UploadStatusCard from "./UploadStatusCard.svelte";
   import {
+    createContext,
     requestHmacSecretDownload,
     requestDirectoryCreation,
     requestFileUpload,
-    requestDirectoryEntryRename,
-    requestDirectoryEntryDeletion,
-    type SelectedDirectoryEntry,
-  } from "./service";
+    requestEntryRename,
+    requestEntryDeletion,
+  } from "./service.svelte";
 
   import IconAdd from "~icons/material-symbols/add";
 
   let { data } = $props();
+  let context = createContext();
 
   let info: Writable<DirectoryInfo | null> | undefined = $state();
   let fileInput: HTMLInputElement | undefined = $state();
-  let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
   let duplicatedFile: File | undefined = $state();
-  let selectedEntry: SelectedDirectoryEntry | undefined = $state();
+  let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
 
-  let isCreateBottomSheetOpen = $state(false);
-  let isCreateDirectoryModalOpen = $state(false);
+  let isEntryCreateBottomSheetOpen = $state(false);
+  let isDirectoryCreateModalOpen = $state(false);
   let isDuplicateFileModalOpen = $state(false);
 
-  let isDirectoryEntryMenuBottomSheetOpen = $state(false);
-  let isDirectoryEntryRenameModalOpen = $state(false);
-  let isDeleteDirectoryEntryModalOpen = $state(false);
-
-  const createDirectory = async (name: string) => {
-    await requestDirectoryCreation(name, data.id, $masterKeyStore?.get(1)!);
-    isCreateDirectoryModalOpen = false;
-    info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-  };
+  let isEntryMenuBottomSheetOpen = $state(false);
+  let isEntryRenameModalOpen = $state(false);
+  let isEntryDeleteModalOpen = $state(false);
 
   const uploadFile = () => {
     const files = fileInput?.files;
@@ -55,22 +49,19 @@
     for (const file of files) {
       requestFileUpload(file, data.id, $hmacSecretStore?.get(1)!, $masterKeyStore?.get(1)!, () => {
         return new Promise((resolve) => {
-          resolveForDuplicateFileModal = resolve;
           duplicatedFile = file;
+          resolveForDuplicateFileModal = resolve;
           isDuplicateFileModalOpen = true;
         });
       })
         .then((res) => {
           if (!res) return;
-
           // TODO: FIXME
           info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
-          window.alert(`'${file.name}' 파일이 업로드되었어요.`);
         })
         .catch((e: Error) => {
           // TODO: FIXME
           console.error(e);
-          window.alert(`'${file.name}' 파일 업로드에 실패했어요.\n${e.message}`);
         });
     }
 
@@ -110,8 +101,8 @@
           info={$info}
           onEntryClick={({ type, id }) => goto(`/${type}/${id}`)}
           onEntryMenuClick={(entry) => {
-            selectedEntry = entry;
-            isDirectoryEntryMenuBottomSheetOpen = true;
+            context.selectedEntry = entry;
+            isEntryMenuBottomSheetOpen = true;
           }}
         />
       {/key}
@@ -122,68 +113,71 @@
 <FloatingButton
   icon={IconAdd}
   onclick={() => {
-    isCreateBottomSheetOpen = true;
+    isEntryCreateBottomSheetOpen = true;
   }}
 />
-<CreateBottomSheet
-  bind:isOpen={isCreateBottomSheetOpen}
+<EntryCreateBottomSheet
+  bind:isOpen={isEntryCreateBottomSheetOpen}
   onDirectoryCreateClick={() => {
-    isCreateBottomSheetOpen = false;
-    isCreateDirectoryModalOpen = true;
+    isEntryCreateBottomSheetOpen = false;
+    isDirectoryCreateModalOpen = true;
   }}
   onFileUploadClick={() => {
-    isCreateBottomSheetOpen = false;
+    isEntryCreateBottomSheetOpen = false;
     fileInput?.click();
   }}
 />
-<CreateDirectoryModal bind:isOpen={isCreateDirectoryModalOpen} onCreateClick={createDirectory} />
-<DuplicateFileModal
-  bind:isOpen={isDuplicateFileModalOpen}
-  file={duplicatedFile}
-  onclose={() => {
-    resolveForDuplicateFileModal?.(false);
-    resolveForDuplicateFileModal = undefined;
-    duplicatedFile = undefined;
-    isDuplicateFileModalOpen = false;
-  }}
-  onDuplicateClick={() => {
-    resolveForDuplicateFileModal?.(true);
-    resolveForDuplicateFileModal = undefined;
-    duplicatedFile = undefined;
-    isDuplicateFileModalOpen = false;
-  }}
-/>
-
-<DirectoryEntryMenuBottomSheet
-  bind:isOpen={isDirectoryEntryMenuBottomSheetOpen}
-  bind:selectedEntry
-  onRenameClick={() => {
-    isDirectoryEntryMenuBottomSheetOpen = false;
-    isDirectoryEntryRenameModalOpen = true;
-  }}
-  onDeleteClick={() => {
-    isDirectoryEntryMenuBottomSheetOpen = false;
-    isDeleteDirectoryEntryModalOpen = true;
-  }}
-/>
-<RenameModal
-  bind:isOpen={isDirectoryEntryRenameModalOpen}
-  onbeforeclose={() => (selectedEntry = undefined)}
-  originalName={selectedEntry?.name}
-  onRenameClick={async (newName: string) => {
-    if (await requestDirectoryEntryRename(selectedEntry!, newName)) {
+<DirectoryCreateModal
+  bind:isOpen={isDirectoryCreateModalOpen}
+  onCreateClick={async (name) => {
+    if (await requestDirectoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
       info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
 />
-<DeleteDirectoryEntryModal
-  bind:isOpen={isDeleteDirectoryEntryModalOpen}
-  bind:selectedEntry
-  onDeleteClick={async () => {
-    await requestDirectoryEntryDeletion(selectedEntry!);
-    info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-    return true;
+<DuplicateFileModal
+  bind:isOpen={isDuplicateFileModalOpen}
+  file={duplicatedFile}
+  onbeforeclose={() => {
+    resolveForDuplicateFileModal?.(false);
+    isDuplicateFileModalOpen = false;
+  }}
+  onUploadClick={() => {
+    resolveForDuplicateFileModal?.(true);
+    isDuplicateFileModalOpen = false;
+  }}
+/>
+
+<EntryMenuBottomSheet
+  bind:isOpen={isEntryMenuBottomSheetOpen}
+  onRenameClick={() => {
+    isEntryMenuBottomSheetOpen = false;
+    isEntryRenameModalOpen = true;
+  }}
+  onDeleteClick={() => {
+    isEntryMenuBottomSheetOpen = false;
+    isEntryDeleteModalOpen = true;
+  }}
+/>
+<EntryRenameModal
+  bind:isOpen={isEntryRenameModalOpen}
+  onRenameClick={async (newName: string) => {
+    if (await requestEntryRename(context.selectedEntry!, newName)) {
+      info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>
+<EntryDeleteModal
+  bind:isOpen={isEntryDeleteModalOpen}
+  onDeleteClick={async () => {
+    if (await requestEntryDeletion(context.selectedEntry!)) {
+      info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
   }}
 />
diff --git a/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte b/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte
deleted file mode 100644
index 987e45e..0000000
--- a/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-  import { Button, Modal, TextInput } from "$lib/components/atoms";
-
-  interface Props {
-    onCreateClick: (name: string) => void;
-    isOpen: boolean;
-  }
-
-  let { onCreateClick, isOpen = $bindable() }: Props = $props();
-
-  let name = $state("");
-
-  const closeModal = () => {
-    name = "";
-    isOpen = false;
-  };
-</script>
-
-<Modal bind:isOpen onclose={closeModal}>
-  <p class="text-xl font-bold">새 폴더</p>
-  <div class="mt-2 flex w-full">
-    <TextInput bind:value={name} placeholder="폴더 이름" />
-  </div>
-  <div class="mt-7 flex gap-x-2">
-    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
-    <Button onclick={() => onCreateClick(name)} class="flex-1">만들기</Button>
-  </div>
-</Modal>
diff --git a/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte b/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
deleted file mode 100644
index 81eced9..0000000
--- a/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-  import { Button, Modal } from "$lib/components/atoms";
-  import type { SelectedDirectoryEntry } from "./service";
-
-  interface Props {
-    onDeleteClick: () => Promise<boolean>;
-    isOpen: boolean;
-    selectedEntry: SelectedDirectoryEntry | undefined;
-  }
-
-  let { onDeleteClick, isOpen = $bindable(), selectedEntry = $bindable() }: Props = $props();
-
-  const closeModal = () => {
-    isOpen = false;
-    selectedEntry = undefined;
-  };
-
-  const deleteEntry = async () => {
-    // TODO: Validation
-
-    if (await onDeleteClick()) {
-      closeModal();
-    }
-  };
-</script>
-
-<Modal bind:isOpen onclose={closeModal}>
-  {#if selectedEntry}
-    {@const { type, name } = selectedEntry}
-    {@const nameShort = name.length > 20 ? `${name.slice(0, 20)}...` : name}
-    <div class="space-y-4">
-      <div class="space-y-2 break-keep">
-        <p class="text-xl font-bold">
-          {#if type === "directory"}
-            '{nameShort}' 폴더를 삭제할까요?
-          {:else}
-            '{nameShort}' 파일을 삭제할까요?
-          {/if}
-        </p>
-        <p>
-          {#if type === "directory"}
-            삭제한 폴더는 복구할 수 없어요. <br />
-            폴더 안의 모든 파일과 폴더도 함께 삭제돼요.
-          {:else}
-            삭제한 파일은 복구할 수 없어요.
-          {/if}
-        </p>
-      </div>
-      <div class="flex gap-x-2">
-        <Button color="gray" onclick={closeModal} class="flex-1">아니요</Button>
-        <Button onclick={deleteEntry} class="flex-1">삭제할게요</Button>
-      </div>
-    </div>
-  {/if}
-</Modal>
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryCreateModal.svelte b/src/routes/(main)/directory/[[id]]/DirectoryCreateModal.svelte
new file mode 100644
index 0000000..e43b569
--- /dev/null
+++ b/src/routes/(main)/directory/[[id]]/DirectoryCreateModal.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { TextInputModal } from "$lib/components/organisms";
+
+  interface Props {
+    isOpen: boolean;
+    onCreateClick: (name: string) => Promise<boolean>;
+  }
+
+  let { isOpen = $bindable(), onCreateClick }: Props = $props();
+</script>
+
+<TextInputModal
+  bind:isOpen
+  title="새 폴더"
+  placeholder="폴더 이름"
+  submitText="만들기"
+  onSubmitClick={onCreateClick}
+/>
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
index baa9760..7ad3af7 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
@@ -17,12 +17,12 @@
   import File from "./File.svelte";
   import SubDirectory from "./SubDirectory.svelte";
   import UploadingFile from "./UploadingFile.svelte";
-  import type { SelectedDirectoryEntry } from "../service";
+  import type { SelectedEntry } from "../service.svelte";
 
   interface Props {
     info: DirectoryInfo;
-    onEntryClick: (entry: SelectedDirectoryEntry) => void;
-    onEntryMenuClick: (entry: SelectedDirectoryEntry) => void;
+    onEntryClick: (entry: SelectedEntry) => void;
+    onEntryMenuClick: (entry: SelectedEntry) => void;
     sortBy?: SortBy;
   }
 
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
index 0dad51b..b25bd2f 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
@@ -2,15 +2,15 @@
   import type { Writable } from "svelte/store";
   import type { FileInfo } from "$lib/modules/filesystem";
   import { formatDateTime } from "$lib/modules/util";
-  import type { SelectedDirectoryEntry } from "../service";
+  import type { SelectedEntry } from "../service.svelte";
 
   import IconDraft from "~icons/material-symbols/draft";
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   interface Props {
     info: Writable<FileInfo | null>;
-    onclick: (selectedEntry: SelectedDirectoryEntry) => void;
-    onOpenMenuClick: (selectedEntry: SelectedDirectoryEntry) => void;
+    onclick: (selectedEntry: SelectedEntry) => void;
+    onOpenMenuClick: (selectedEntry: SelectedEntry) => void;
   }
 
   let { info, onclick, onOpenMenuClick }: Props = $props();
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
index 11a788a..bea9e73 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import type { DirectoryInfo } from "$lib/modules/filesystem";
-  import type { SelectedDirectoryEntry } from "../service";
+  import type { SelectedEntry } from "../service.svelte";
 
   import IconFolder from "~icons/material-symbols/folder";
   import IconMoreVert from "~icons/material-symbols/more-vert";
@@ -10,8 +10,8 @@
 
   interface Props {
     info: Writable<DirectoryInfo | null>;
-    onclick: (selectedEntry: SelectedDirectoryEntry) => void;
-    onOpenMenuClick: (selectedEntry: SelectedDirectoryEntry) => void;
+    onclick: (selectedEntry: SelectedEntry) => void;
+    onOpenMenuClick: (selectedEntry: SelectedEntry) => void;
   }
 
   let { info, onclick, onOpenMenuClick }: Props = $props();
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
deleted file mode 100644
index 3f35f5d..0000000
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-  import { BottomSheet } from "$lib/components";
-  import { EntryButton } from "$lib/components/atoms";
-  import type { SelectedDirectoryEntry } from "./service";
-
-  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";
-
-  interface Props {
-    onRenameClick: () => void;
-    onDeleteClick: () => void;
-    isOpen: boolean;
-    selectedEntry: SelectedDirectoryEntry | undefined;
-  }
-
-  let {
-    onRenameClick,
-    onDeleteClick,
-    isOpen = $bindable(),
-    selectedEntry = $bindable(),
-  }: Props = $props();
-
-  const closeBottomSheet = () => {
-    isOpen = false;
-    selectedEntry = undefined;
-  };
-</script>
-
-<BottomSheet bind:isOpen onclose={closeBottomSheet}>
-  <div class="w-full py-4">
-    {#if selectedEntry}
-      {@const { type, name } = selectedEntry}
-      <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>
-      <div class="my-2 h-px w-full bg-gray-200"></div>
-    {/if}
-    <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>
-  </div>
-</BottomSheet>
diff --git a/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte b/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
index 1f97a75..28b8d6b 100644
--- a/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
@@ -1,29 +1,27 @@
 <script lang="ts">
-  import { Button, Modal } from "$lib/components/atoms";
+  import { ActionModal } from "$lib/components/molecules";
+  import { truncateString } from "$lib/modules/util";
 
   interface Props {
     file: File | undefined;
-    onclose: () => void;
-    onDuplicateClick: () => void;
     isOpen: boolean;
+    onbeforeclose: () => void;
+    onUploadClick: () => void;
   }
 
-  let { file, onclose, onDuplicateClick, isOpen = $bindable() }: Props = $props();
+  let { file, isOpen = $bindable(), onbeforeclose, onUploadClick }: Props = $props();
 </script>
 
-<Modal bind:isOpen {onclose}>
-  {#if file}
-    {@const { name } = file}
-    {@const nameShort = name.length > 20 ? `${name.slice(0, 20)}...` : name}
-    <div class="space-y-4">
-      <div class="space-y-2 break-keep">
-        <p class="text-xl font-bold">'{nameShort}' 파일이 있어요.</p>
-        <p>예전에 이미 업로드된 파일이에요. 그래도 업로드할까요?</p>
-      </div>
-      <div class="flex gap-x-2">
-        <Button color="gray" onclick={onclose} class="flex-1">아니요</Button>
-        <Button onclick={onDuplicateClick} class="flex-1">업로드할게요</Button>
-      </div>
-    </div>
-  {/if}
-</Modal>
+{#if file}
+  {@const { name } = file}
+  <ActionModal
+    bind:isOpen
+    {onbeforeclose}
+    title="'{truncateString(name)}' 파일이 있어요."
+    cancelText="아니요"
+    confirmText="업로드할게요"
+    onConfirmClick={onUploadClick}
+  >
+    <p>예전에 이미 업로드된 파일이에요. 그래도 업로드할까요?</p>
+  </ActionModal>
+{/if}
diff --git a/src/routes/(main)/directory/[[id]]/CreateBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
similarity index 91%
rename from src/routes/(main)/directory/[[id]]/CreateBottomSheet.svelte
rename to src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
index d0b2280..7d262dd 100644
--- a/src/routes/(main)/directory/[[id]]/CreateBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
@@ -6,12 +6,12 @@
   import IconUploadFile from "~icons/material-symbols/upload-file";
 
   interface Props {
+    isOpen: boolean;
     onDirectoryCreateClick: () => void;
     onFileUploadClick: () => void;
-    isOpen: boolean;
   }
 
-  let { onDirectoryCreateClick, onFileUploadClick, isOpen = $bindable() }: Props = $props();
+  let { isOpen = $bindable(), onDirectoryCreateClick, onFileUploadClick }: Props = $props();
 </script>
 
 <BottomSheet bind:isOpen>
diff --git a/src/routes/(main)/directory/[[id]]/EntryDeleteModal.svelte b/src/routes/(main)/directory/[[id]]/EntryDeleteModal.svelte
new file mode 100644
index 0000000..ad9ca2c
--- /dev/null
+++ b/src/routes/(main)/directory/[[id]]/EntryDeleteModal.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { ActionModal } from "$lib/components/molecules";
+  import { truncateString } from "$lib/modules/util";
+  import { useContext } from "./service.svelte";
+
+  interface Props {
+    isOpen: boolean;
+    onDeleteClick: () => Promise<boolean>;
+  }
+
+  let { isOpen = $bindable(), onDeleteClick }: Props = $props();
+  let context = useContext();
+</script>
+
+{#if context.selectedEntry}
+  {@const { name, type } = context.selectedEntry}
+  <ActionModal
+    bind:isOpen
+    title="'{truncateString(name)}' {type === 'directory' ? '폴더를' : '파일을'} 삭제할까요?"
+    cancelText="아니요"
+    confirmText="삭제할게요"
+    onConfirmClick={onDeleteClick}
+  >
+    <p>
+      {#if type === "directory"}
+        삭제한 폴더는 복구할 수 없어요. <br />
+        폴더 안의 모든 파일과 폴더도 함께 삭제돼요.
+      {:else}
+        삭제한 파일은 복구할 수 없어요.
+      {/if}
+    </p>
+  </ActionModal>
+{/if}
diff --git a/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
new file mode 100644
index 0000000..3b83406
--- /dev/null
+++ b/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { BottomSheet } from "$lib/components";
+  import { EntryButton } from "$lib/components/atoms";
+  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";
+
+  interface Props {
+    isOpen: boolean;
+    onDeleteClick: () => void;
+    onRenameClick: () => void;
+  }
+
+  let { isOpen = $bindable(), onDeleteClick, onRenameClick }: Props = $props();
+  let context = useContext();
+</script>
+
+{#if context.selectedEntry}
+  {@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>
+      <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>
+    </div>
+  </BottomSheet>
+{/if}
diff --git a/src/routes/(main)/directory/[[id]]/EntryRenameModal.svelte b/src/routes/(main)/directory/[[id]]/EntryRenameModal.svelte
new file mode 100644
index 0000000..225884d
--- /dev/null
+++ b/src/routes/(main)/directory/[[id]]/EntryRenameModal.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { RenameModal } from "$lib/components/organisms";
+  import { useContext } from "./service.svelte";
+
+  interface Props {
+    isOpen: boolean;
+    onRenameClick: (newName: string) => Promise<boolean>;
+  }
+
+  let { isOpen = $bindable(), onRenameClick }: Props = $props();
+  let context = useContext();
+</script>
+
+{#if context.selectedEntry}
+  {@const { name } = context.selectedEntry}
+  <RenameModal bind:isOpen originalName={name} {onRenameClick} />
+{/if}
diff --git a/src/routes/(main)/directory/[[id]]/service.ts b/src/routes/(main)/directory/[[id]]/service.svelte.ts
similarity index 83%
rename from src/routes/(main)/directory/[[id]]/service.ts
rename to src/routes/(main)/directory/[[id]]/service.svelte.ts
index 1b0c427..3e2ddfc 100644
--- a/src/routes/(main)/directory/[[id]]/service.ts
+++ b/src/routes/(main)/directory/[[id]]/service.svelte.ts
@@ -1,3 +1,4 @@
+import { getContext, setContext } from "svelte";
 import { callGetApi, callPostApi } from "$lib/hooks";
 import { storeHmacSecrets } from "$lib/indexedDB";
 import { generateDataKey, wrapDataKey, unwrapHmacSecret, encryptString } from "$lib/modules/crypto";
@@ -11,7 +12,7 @@ import type {
 } from "$lib/server/schemas";
 import { hmacSecretStore, type MasterKey, type HmacSecret } from "$lib/stores";
 
-export interface SelectedDirectoryEntry {
+export interface SelectedEntry {
   type: "directory" | "file";
   id: number;
   dataKey: CryptoKey;
@@ -19,6 +20,17 @@ export interface SelectedDirectoryEntry {
   name: string;
 }
 
+export const createContext = () => {
+  const context = $state({
+    selectedEntry: undefined as SelectedEntry | undefined,
+  });
+  return setContext("context", context);
+};
+
+export const useContext = () => {
+  return getContext<ReturnType<typeof createContext>>("context");
+};
+
 export const requestHmacSecretDownload = async (masterKey: CryptoKey) => {
   // TODO: MEK rotation
 
@@ -46,7 +58,8 @@ export const requestDirectoryCreation = async (
 ) => {
   const { dataKey, dataKeyVersion } = await generateDataKey();
   const nameEncrypted = await encryptString(name, dataKey);
-  await callPostApi<DirectoryCreateRequest>("/api/directory/create", {
+
+  const res = await callPostApi<DirectoryCreateRequest>("/api/directory/create", {
     parent: parentId,
     mekVersion: masterKey.version,
     dek: await wrapDataKey(dataKey, masterKey.key),
@@ -54,6 +67,7 @@ export const requestDirectoryCreation = async (
     name: nameEncrypted.ciphertext,
     nameIv: nameEncrypted.iv,
   });
+  return res.ok;
 };
 
 export const requestFileUpload = async (
@@ -66,10 +80,7 @@ export const requestFileUpload = async (
   return await uploadFile(file, parentId, hmacSecret, masterKey, onDuplicate);
 };
 
-export const requestDirectoryEntryRename = async (
-  entry: SelectedDirectoryEntry,
-  newName: string,
-) => {
+export const requestEntryRename = async (entry: SelectedEntry, newName: string) => {
   const newNameEncrypted = await encryptString(newName, entry.dataKey);
 
   let res;
@@ -89,7 +100,7 @@ export const requestDirectoryEntryRename = async (
   return res.ok;
 };
 
-export const requestDirectoryEntryDeletion = async (entry: SelectedDirectoryEntry) => {
+export const requestEntryDeletion = async (entry: SelectedEntry) => {
   const res = await callPostApi(`/api/${entry.type}/${entry.id}/delete`);
   if (!res.ok) return false;
 

From 0998d0662eb2149adfaa2a6917358ac4fb8f1bbe Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Sat, 25 Jan 2025 23:39:19 +0900
Subject: [PATCH 05/16] =?UTF-8?q?FullscreenDiv=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20TopBar=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/TopBar.svelte              | 35 ------------
 .../components/atoms/divs/AdaptiveDiv.svelte  |  2 +-
 .../atoms/divs/FullscreenDiv.svelte           |  7 +++
 src/lib/components/atoms/divs/index.ts        |  1 +
 src/lib/components/index.ts                   |  1 -
 src/lib/components/molecules/TopBar.svelte    | 37 ++++++++++++
 src/lib/components/molecules/index.ts         |  1 +
 src/routes/(fullscreen)/+layout.svelte        |  6 +-
 .../auth/changePassword/+page.svelte          | 16 +++---
 .../(fullscreen)/auth/login/+page.svelte      | 32 ++++++-----
 .../(fullscreen)/client/pending/+page.svelte  | 57 ++++++++++---------
 .../(fullscreen)/file/[id]/+page.svelte       | 10 ++--
 .../(fullscreen)/file/downloads/+page.svelte  |  9 +--
 .../(fullscreen)/file/uploads/+page.svelte    |  9 +--
 .../(fullscreen)/key/export/+page.svelte      | 32 ++++++-----
 .../(fullscreen)/key/generate/+page.svelte    | 42 +++++++-------
 .../(fullscreen)/settings/cache/+page.svelte  |  9 +--
 .../(main)/category/[[id]]/+page.svelte       | 44 +++++++-------
 .../(main)/directory/[[id]]/+page.svelte      |  9 ++-
 19 files changed, 188 insertions(+), 171 deletions(-)
 delete mode 100644 src/lib/components/TopBar.svelte
 create mode 100644 src/lib/components/atoms/divs/FullscreenDiv.svelte
 create mode 100644 src/lib/components/molecules/TopBar.svelte

diff --git a/src/lib/components/TopBar.svelte b/src/lib/components/TopBar.svelte
deleted file mode 100644
index 9d1893f..0000000
--- a/src/lib/components/TopBar.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-
-  import IconArrowBack from "~icons/material-symbols/arrow-back";
-
-  interface Props {
-    children?: Snippet;
-    onback?: () => void;
-    title?: string;
-    xPadding?: boolean;
-  }
-
-  let { children, onback, title, xPadding = false }: Props = $props();
-
-  const back = $derived(() => {
-    setTimeout(onback || (() => history.back()), 100);
-  });
-</script>
-
-<div
-  class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between bg-white py-4
-  {xPadding ? 'px-4' : ''}"
->
-  <button onclick={back} class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-gray-100">
-    <IconArrowBack class="text-2xl" />
-  </button>
-  {#if title}
-    <p class="flex-grow truncate px-2 text-center text-lg font-semibold">{title}</p>
-  {/if}
-  <div class="w-[2.3rem] flex-shrink-0">
-    {#if children}
-      {@render children?.()}
-    {/if}
-  </div>
-</div>
diff --git a/src/lib/components/atoms/divs/AdaptiveDiv.svelte b/src/lib/components/atoms/divs/AdaptiveDiv.svelte
index 7f2ef32..9003c7c 100644
--- a/src/lib/components/atoms/divs/AdaptiveDiv.svelte
+++ b/src/lib/components/atoms/divs/AdaptiveDiv.svelte
@@ -10,6 +10,6 @@
   let { children, ...props }: Props = $props();
 </script>
 
-<div class={["mx-auto w-full max-w-screen-md", props.class]}>
+<div class={["mx-auto max-w-screen-md", props.class]}>
   {@render children?.()}
 </div>
diff --git a/src/lib/components/atoms/divs/FullscreenDiv.svelte b/src/lib/components/atoms/divs/FullscreenDiv.svelte
new file mode 100644
index 0000000..cdea8cc
--- /dev/null
+++ b/src/lib/components/atoms/divs/FullscreenDiv.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div class="flex flex-grow flex-col justify-between px-4">
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/atoms/divs/index.ts b/src/lib/components/atoms/divs/index.ts
index 0044d60..561bbde 100644
--- a/src/lib/components/atoms/divs/index.ts
+++ b/src/lib/components/atoms/divs/index.ts
@@ -1,2 +1,3 @@
 export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte";
 export { default as BottomDiv } from "./BottomDiv.svelte";
+export { default as FullscreenDiv } from "./FullscreenDiv.svelte";
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 7205520..d7690e1 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,2 +1 @@
 export { default as BottomSheet } from "./BottomSheet.svelte";
-export { default as TopBar } from "./TopBar.svelte";
diff --git a/src/lib/components/molecules/TopBar.svelte b/src/lib/components/molecules/TopBar.svelte
new file mode 100644
index 0000000..24fb537
--- /dev/null
+++ b/src/lib/components/molecules/TopBar.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  import IconArrowBack from "~icons/material-symbols/arrow-back";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+    onBackClick?: () => void;
+    title?: string;
+  }
+
+  let { children, onBackClick, title, ...props }: Props = $props();
+</script>
+
+<div
+  class={[
+    "sticky top-0 z-10 flex items-center justify-between gap-x-2 px-2 py-3 backdrop-blur-2xl",
+    props.class,
+  ]}
+>
+  <button
+    onclick={onBackClick || (() => history.back())}
+    class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
+  >
+    <IconArrowBack class="text-2xl" />
+  </button>
+  {#if title}
+    <p class="flex-grow truncate text-center text-lg font-semibold">{title}</p>
+  {/if}
+  <div class="w-[2.3rem] flex-shrink-0">
+    {#if children}
+      {@render children?.()}
+    {/if}
+  </div>
+</div>
diff --git a/src/lib/components/molecules/index.ts b/src/lib/components/molecules/index.ts
index e73ef7e..8f056a3 100644
--- a/src/lib/components/molecules/index.ts
+++ b/src/lib/components/molecules/index.ts
@@ -1,2 +1,3 @@
 export * from "./ActionModal.svelte";
 export { default as ActionModal } from "./ActionModal.svelte";
+export { default as TopBar } from "./TopBar.svelte";
diff --git a/src/routes/(fullscreen)/+layout.svelte b/src/routes/(fullscreen)/+layout.svelte
index e7e28a9..274b760 100644
--- a/src/routes/(fullscreen)/+layout.svelte
+++ b/src/routes/(fullscreen)/+layout.svelte
@@ -4,8 +4,6 @@
   let { children } = $props();
 </script>
 
-<AdaptiveDiv>
-  <div class="flex h-screen flex-col justify-between px-4">
-    {@render children()}
-  </div>
+<AdaptiveDiv class="flex h-screen flex-col">
+  {@render children()}
 </AdaptiveDiv>
diff --git a/src/routes/(fullscreen)/auth/changePassword/+page.svelte b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
index e184b04..5299ed5 100644
--- a/src/routes/(fullscreen)/auth/changePassword/+page.svelte
+++ b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { TopBar } from "$lib/components";
-  import { Button, BottomDiv, TextInput } from "$lib/components/atoms";
+  import { Button, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
   import { TitleDiv } from "$lib/components/divs";
+  import { TopBar } from "$lib/components/molecules";
   import { requestPasswordChange } from "./service";
 
   let oldPassword = $state("");
@@ -19,8 +19,8 @@
   <title>비밀번호 바꾸기</title>
 </svelte:head>
 
-<div>
-  <TopBar />
+<TopBar class="flex-shrink-0" />
+<FullscreenDiv>
   <TitleDiv topPadding={false}>
     <div class="space-y-2 break-keep">
       <p class="text-2xl font-bold">기존 비밀번호와 새 비밀번호를 입력해 주세요.</p>
@@ -31,7 +31,7 @@
       <TextInput bind:value={newPassword} placeholder="새 비밀번호" type="password" />
     </div>
   </TitleDiv>
-</div>
-<BottomDiv>
-  <Button onclick={changePassword} class="w-full">비밀번호 바꾸기</Button>
-</BottomDiv>
+  <BottomDiv>
+    <Button onclick={changePassword} class="w-full">비밀번호 바꾸기</Button>
+  </BottomDiv>
+</FullscreenDiv>
diff --git a/src/routes/(fullscreen)/auth/login/+page.svelte b/src/routes/(fullscreen)/auth/login/+page.svelte
index 362dc87..5ae190f 100644
--- a/src/routes/(fullscreen)/auth/login/+page.svelte
+++ b/src/routes/(fullscreen)/auth/login/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv, TextInput } from "$lib/components/atoms";
+  import { Button, TextButton, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
   import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service";
@@ -46,17 +46,19 @@
   <title>로그인</title>
 </svelte:head>
 
-<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>
-<BottomDiv class="flex flex-col items-center gap-y-2">
-  <Button onclick={login} class="w-full">로그인</Button>
-  <TextButton>계정이 없어요</TextButton>
-</BottomDiv>
+<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>
+  <BottomDiv class="flex flex-col items-center gap-y-2">
+    <Button onclick={login} class="w-full">로그인</Button>
+    <TextButton>계정이 없어요</TextButton>
+  </BottomDiv>
+</FullscreenDiv>
diff --git a/src/routes/(fullscreen)/client/pending/+page.svelte b/src/routes/(fullscreen)/client/pending/+page.svelte
index ebee560..06e586b 100644
--- a/src/routes/(fullscreen)/client/pending/+page.svelte
+++ b/src/routes/(fullscreen)/client/pending/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
+  import { FullscreenDiv } from "$lib/components/atoms";
   import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { generatePublicKeyFingerprint, requestMasterKeyDownload } from "./service";
@@ -30,32 +31,34 @@
   <title>승인을 기다리고 있어요.</title>
 </svelte:head>
 
-<TitleDiv>
-  <div class="space-y-2 break-keep">
-    <p class="text-3xl font-bold">승인을 기다리고 있어요.</p>
-    <p>
-      회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요.
-    </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>
+<FullscreenDiv>
+  <TitleDiv>
+    <div class="space-y-2 break-keep">
+      <p class="text-3xl font-bold">승인을 기다리고 있어요.</p>
+      <p>
+        회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요.
+      </p>
     </div>
-    <p class="rounded-2xl bg-gray-100 p-4 text-center text-2xl font-medium text-gray-800">
-      {#if !fingerprint}
-        지문 생성하는 중...
-      {:else}
-        {#await fingerprint}
+    <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}
           지문 생성하는 중...
-        {:then fingerprint}
-          {fingerprint}
-        {/await}
-      {/if}
-    </p>
-    <p class="text-center">
-      암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
-      지문이 일치하는지 확인 후 승인해 주세요.
-    </p>
-  </div>
-</TitleDiv>
+        {:else}
+          {#await fingerprint}
+            지문 생성하는 중...
+          {:then fingerprint}
+            {fingerprint}
+          {/await}
+        {/if}
+      </p>
+      <p class="text-center">
+        암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
+        지문이 일치하는지 확인 후 승인해 주세요.
+      </p>
+    </div>
+  </TitleDiv>
+</FullscreenDiv>
diff --git a/src/routes/(fullscreen)/file/[id]/+page.svelte b/src/routes/(fullscreen)/file/[id]/+page.svelte
index fe7fbac..f99b029 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 { TopBar } from "$lib/components";
-  import { EntryButton } from "$lib/components/atoms";
+  import { EntryButton, FullscreenDiv } from "$lib/components/atoms";
+  import { TopBar } from "$lib/components/molecules";
   import {
     getFileInfo,
     getCategoryInfo,
@@ -116,8 +116,8 @@
   <title>파일</title>
 </svelte:head>
 
-<div class="flex h-full flex-col">
-  <TopBar title={$info?.name} />
+<TopBar title={$info?.name} />
+<FullscreenDiv>
   <div class="space-y-4 pb-4">
     <DownloadStatus status={downloadStatus} />
     {#if $info && viewerType}
@@ -160,7 +160,7 @@
       </div>
     </div>
   </div>
-</div>
+</FullscreenDiv>
 
 <AddToCategoryBottomSheet
   bind:isOpen={isAddToCategoryBottomSheetOpen}
diff --git a/src/routes/(fullscreen)/file/downloads/+page.svelte b/src/routes/(fullscreen)/file/downloads/+page.svelte
index a3ce387..4ce2e9c 100644
--- a/src/routes/(fullscreen)/file/downloads/+page.svelte
+++ b/src/routes/(fullscreen)/file/downloads/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { get } from "svelte/store";
-  import { TopBar } from "$lib/components";
+  import { FullscreenDiv } from "$lib/components/atoms";
+  import { TopBar } from "$lib/components/molecules";
   import { fileDownloadStatusStore, isFileDownloading } from "$lib/stores";
   import File from "./File.svelte";
 
@@ -19,11 +20,11 @@
   <title>진행 중인 다운로드</title>
 </svelte:head>
 
-<div class="flex flex-col">
-  <TopBar />
+<TopBar />
+<FullscreenDiv>
   <div class="space-y-2 pb-4">
     {#each downloadingFiles as status}
       <File {status} />
     {/each}
   </div>
-</div>
+</FullscreenDiv>
diff --git a/src/routes/(fullscreen)/file/uploads/+page.svelte b/src/routes/(fullscreen)/file/uploads/+page.svelte
index 4e61868..bc18705 100644
--- a/src/routes/(fullscreen)/file/uploads/+page.svelte
+++ b/src/routes/(fullscreen)/file/uploads/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { get } from "svelte/store";
-  import { TopBar } from "$lib/components";
+  import { FullscreenDiv } from "$lib/components/atoms";
+  import { TopBar } from "$lib/components/molecules";
   import { fileUploadStatusStore, isFileUploading } from "$lib/stores";
   import File from "./File.svelte";
 
@@ -19,11 +20,11 @@
   <title>진행 중인 업로드</title>
 </svelte:head>
 
-<div class="flex flex-col">
-  <TopBar />
+<TopBar />
+<FullscreenDiv>
   <div class="space-y-2 pb-4">
     {#each uploadingFiles as status}
       <File {status} />
     {/each}
   </div>
-</div>
+</FullscreenDiv>
diff --git a/src/routes/(fullscreen)/key/export/+page.svelte b/src/routes/(fullscreen)/key/export/+page.svelte
index 5fae2ba..53f4bd5 100644
--- a/src/routes/(fullscreen)/key/export/+page.svelte
+++ b/src/routes/(fullscreen)/key/export/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import FileSaver from "file-saver";
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv } from "$lib/components/atoms";
+  import { Button, TextButton, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
   import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore } from "$lib/stores";
   import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
@@ -89,21 +89,23 @@
   <title>암호 키 생성하기</title>
 </svelte:head>
 
-<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>
+<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>
     </div>
-  </div>
-</TitleDiv>
-<BottomDiv class="flex flex-col items-center gap-y-2">
-  <Button onclick={exportClientKeys} class="w-full">암호 키 내보내기</Button>
-  <TextButton onclick={() => (isBeforeContinueModalOpen = true)}>내보내지 않을래요</TextButton>
-</BottomDiv>
+  </TitleDiv>
+  <BottomDiv class="flex flex-col items-center gap-y-2">
+    <Button onclick={exportClientKeys} class="w-full">암호 키 내보내기</Button>
+    <TextButton onclick={() => (isBeforeContinueModalOpen = true)}>내보내지 않을래요</TextButton>
+  </BottomDiv>
+</FullscreenDiv>
 
 <BeforeContinueModal bind:isOpen={isBeforeContinueModalOpen} onContinueClick={registerPubKeys} />
 <BeforeContinueBottomSheet
diff --git a/src/routes/(fullscreen)/key/generate/+page.svelte b/src/routes/(fullscreen)/key/generate/+page.svelte
index 8a2eeb7..54f16a6 100644
--- a/src/routes/(fullscreen)/key/generate/+page.svelte
+++ b/src/routes/(fullscreen)/key/generate/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv } from "$lib/components/atoms";
+  import { Button, TextButton, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
   import { TitleDiv } from "$lib/components/divs";
   import { gotoStateful } from "$lib/hooks";
   import { clientKeyStore } from "$lib/stores";
@@ -62,24 +62,26 @@
   <title>암호 키 생성하기</title>
 </svelte:head>
 
-<TitleDiv>
-  <div class="space-y-2 break-keep">
-    <p class="text-3xl font-bold">암호 키 생성하기</p>
-    <p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</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>
+<FullscreenDiv>
+  <TitleDiv>
+    <div class="space-y-2 break-keep">
+      <p class="text-3xl font-bold">암호 키 생성하기</p>
+      <p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</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 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>
-  </div>
-</TitleDiv>
-<BottomDiv class="flex flex-col items-center gap-y-2">
-  <Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button>
-  <TextButton>키를 갖고 있어요</TextButton>
-</BottomDiv>
+  </TitleDiv>
+  <BottomDiv class="flex flex-col items-center gap-y-2">
+    <Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button>
+    <TextButton>키를 갖고 있어요</TextButton>
+  </BottomDiv>
+</FullscreenDiv>
diff --git a/src/routes/(fullscreen)/settings/cache/+page.svelte b/src/routes/(fullscreen)/settings/cache/+page.svelte
index 9f61afd..262aacf 100644
--- a/src/routes/(fullscreen)/settings/cache/+page.svelte
+++ b/src/routes/(fullscreen)/settings/cache/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import type { Writable } from "svelte/store";
-  import { TopBar } from "$lib/components";
+  import { FullscreenDiv } from "$lib/components/atoms";
+  import { TopBar } from "$lib/components/molecules";
   import type { FileCacheIndex } from "$lib/indexedDB";
   import { getFileCacheIndex } from "$lib/modules/file";
   import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
@@ -43,8 +44,8 @@
   <title>캐시 설정</title>
 </svelte:head>
 
-<div class="flex h-full flex-col">
-  <TopBar title="캐시" />
+<TopBar title="캐시" />
+<FullscreenDiv>
   {#if fileCache && fileCache.length > 0}
     <div class="space-y-4 pb-4">
       <div class="space-y-1 break-keep text-gray-800">
@@ -71,4 +72,4 @@
       </p>
     </div>
   {/if}
-</div>
+</FullscreenDiv>
diff --git a/src/routes/(main)/category/[[id]]/+page.svelte b/src/routes/(main)/category/[[id]]/+page.svelte
index 81d7524..47aa2b5 100644
--- a/src/routes/(main)/category/[[id]]/+page.svelte
+++ b/src/routes/(main)/category/[[id]]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
-  import { TopBar } from "$lib/components";
+  import { TopBar } from "$lib/components/molecules";
   import { CategoryCreateModal } from "$lib/components/organisms";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import Category from "$lib/organisms/Category";
@@ -38,29 +38,27 @@
   <title>카테고리</title>
 </svelte:head>
 
-<div class="flex min-h-full flex-col">
-  {#if data.id !== "root"}
-    <TopBar title={$info?.name} xPadding />
+{#if data.id !== "root"}
+  <TopBar title={$info?.name} />
+{/if}
+<div class="min-h-full bg-gray-100 pb-[5.5em]">
+  {#if $info}
+    <Category
+      bind:isFileRecursive
+      info={$info}
+      onFileClick={({ id }) => goto(`/file/${id}`)}
+      onFileRemoveClick={async ({ id }) => {
+        await requestFileRemovalFromCategory(id, data.id as number);
+        info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      }}
+      onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
+      onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
+      onSubCategoryMenuClick={(subCategory) => {
+        context.selectedCategory = subCategory;
+        isCategoryMenuBottomSheetOpen = true;
+      }}
+    />
   {/if}
-  <div class="flex-grow bg-gray-100 pb-[5.5em]">
-    {#if $info}
-      <Category
-        bind:isFileRecursive
-        info={$info}
-        onFileClick={({ id }) => goto(`/file/${id}`)}
-        onFileRemoveClick={async ({ id }) => {
-          await requestFileRemovalFromCategory(id, data.id as number);
-          info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-        }}
-        onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
-        onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
-        onSubCategoryMenuClick={(subCategory) => {
-          context.selectedCategory = subCategory;
-          isCategoryMenuBottomSheetOpen = true;
-        }}
-      />
-    {/if}
-  </div>
 </div>
 
 <CategoryCreateModal
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index 30cc33f..4e7d8dd 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -2,8 +2,8 @@
   import { onMount } from "svelte";
   import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
-  import { TopBar } from "$lib/components";
   import { FloatingButton } from "$lib/components/atoms";
+  import { TopBar } from "$lib/components/molecules";
   import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore, hmacSecretStore } from "$lib/stores";
   import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
@@ -85,13 +85,12 @@
 
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
-<div class="flex min-h-full flex-col px-4">
+<div class="flex h-full flex-col">
   {#if data.id !== "root"}
-    <TopBar title={$info?.name} />
+    <TopBar title={$info?.name} class="flex-shrink-0" />
   {/if}
   {#if $info}
-    {@const topMargin = data.id === "root" ? "mt-4" : ""}
-    <div class="mb-4 flex flex-grow flex-col {topMargin}">
+    <div class={["flex flex-grow flex-col px-4 pb-4", data.id === "root" && "pt-4"]}>
       <div class="flex gap-x-2">
         <UploadStatusCard onclick={() => goto("/file/uploads")} />
         <DownloadStatusCard onclick={() => goto("/file/downloads")} />

From c709a79266b467b838add3a65bc351583df63ac5 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Sat, 25 Jan 2025 23:43:52 +0900
Subject: [PATCH 06/16] =?UTF-8?q?Button=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=A0=84=EC=B2=B4=EC=97=90=20=ED=81=B4=EB=A6=AD?=
 =?UTF-8?q?=EC=8B=9C=20=EC=9E=91=EC=95=84=EC=A7=80=EB=8A=94=20=EC=95=A0?=
 =?UTF-8?q?=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/atoms/buttons/Button.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/atoms/buttons/Button.svelte b/src/lib/components/atoms/buttons/Button.svelte
index a1b079c..f05053b 100644
--- a/src/lib/components/atoms/buttons/Button.svelte
+++ b/src/lib/components/atoms/buttons/Button.svelte
@@ -27,9 +27,12 @@
 
 <button
   onclick={onclick && (() => setTimeout(onclick, 100))}
-  class={["h-12 min-w-fit rounded-xl font-medium", bgColor, textColor, props.class]}
+  class={[
+    "h-12 min-w-fit rounded-xl p-3 font-medium transition active:scale-95",
+    bgColor,
+    textColor,
+    props.class,
+  ]}
 >
-  <div class="h-full p-3 transition active:scale-95">
-    {@render children?.()}
-  </div>
+  {@render children?.()}
 </button>

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 07/16] =?UTF-8?q?IconEntryButton=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=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>

From 0f2c5f8b33890cd9d87667c229dd661ab43a26a7 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Sun, 26 Jan 2025 23:18:52 +0900
Subject: [PATCH 08/16] =?UTF-8?q?ActionEntryButton=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=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/ActionEntryButton.svelte    | 61 +++++++++++++++++++
 src/lib/components/atoms/buttons/index.ts     |  1 +
 .../molecules/labels/IconLabel.svelte         |  6 +-
 src/lib/molecules/Categories/Category.svelte  | 56 +++++------------
 src/lib/organisms/Category/File.svelte        | 53 ++++------------
 .../[[id]]/DirectoryEntries/File.svelte       | 60 ++++++------------
 .../DirectoryEntries/SubDirectory.svelte      | 51 ++++------------
 7 files changed, 122 insertions(+), 166 deletions(-)
 create mode 100644 src/lib/components/atoms/buttons/ActionEntryButton.svelte

diff --git a/src/lib/components/atoms/buttons/ActionEntryButton.svelte b/src/lib/components/atoms/buttons/ActionEntryButton.svelte
new file mode 100644
index 0000000..94e9235
--- /dev/null
+++ b/src/lib/components/atoms/buttons/ActionEntryButton.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Component, Snippet } from "svelte";
+  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
+
+  interface Props {
+    actionButtonClass?: ClassValue;
+    actionButtonIcon?: Component<SvelteHTMLElements["svg"]>;
+    children?: Snippet;
+    class?: ClassValue;
+    onActionButtonClick?: () => void;
+    onclick?: () => void;
+  }
+
+  let {
+    actionButtonIcon: ActionButtonIcon,
+    children,
+    onActionButtonClick,
+    onclick,
+    ...props
+  }: Props = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+  id="container"
+  onclick={onclick && (() => setTimeout(onclick, 100))}
+  class={["rounded-xl", props.class]}
+>
+  <div id="children" class="flex h-full items-center justify-between gap-x-4 p-2 transition">
+    <div class="flex-grow overflow-x-hidden">
+      {@render children?.()}
+    </div>
+    {#if ActionButtonIcon}
+      <button
+        id="action-button"
+        onclick={(e) => {
+          e.stopPropagation();
+          if (onActionButtonClick) {
+            setTimeout(onActionButtonClick, 100);
+          }
+        }}
+        class={[
+          "flex-shrink-0 rounded-full p-1 text-lg active:bg-gray-100",
+          props.actionButtonClass,
+        ]}
+      >
+        <ActionButtonIcon />
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  #container:active:not(:has(#action-button:active)) {
+    @apply bg-gray-100;
+  }
+  #children:active:not(:has(#action-button:active)) {
+    @apply scale-95;
+  }
+</style>
diff --git a/src/lib/components/atoms/buttons/index.ts b/src/lib/components/atoms/buttons/index.ts
index 1765400..fc5022f 100644
--- a/src/lib/components/atoms/buttons/index.ts
+++ b/src/lib/components/atoms/buttons/index.ts
@@ -1,3 +1,4 @@
+export { default as ActionEntryButton } from "./ActionEntryButton.svelte";
 export { default as Button } from "./Button.svelte";
 export { default as EntryButton } from "./EntryButton.svelte";
 export { default as FloatingButton } from "./FloatingButton.svelte";
diff --git a/src/lib/components/molecules/labels/IconLabel.svelte b/src/lib/components/molecules/labels/IconLabel.svelte
index c4a982a..038f6c9 100644
--- a/src/lib/components/molecules/labels/IconLabel.svelte
+++ b/src/lib/components/molecules/labels/IconLabel.svelte
@@ -18,12 +18,12 @@
   <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]}>
+  <div class="flex flex-grow flex-col overflow-x-hidden text-left">
+    <p class={["truncate font-medium", props.textClass]}>
       {@render children?.()}
     </p>
     {#if subtext}
-      <p class="text-xs text-gray-800">
+      <p class="truncate text-xs text-gray-800">
         {@render subtext()}
       </p>
     {/if}
diff --git a/src/lib/molecules/Categories/Category.svelte b/src/lib/molecules/Categories/Category.svelte
index ea2c392..aab227c 100644
--- a/src/lib/molecules/Categories/Category.svelte
+++ b/src/lib/molecules/Categories/Category.svelte
@@ -2,11 +2,11 @@
   import type { Component } from "svelte";
   import type { SvelteHTMLElements } from "svelte/elements";
   import type { Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { CategoryLabel } from "$lib/components/molecules";
   import type { CategoryInfo } from "$lib/modules/filesystem";
   import type { SelectedCategory } from "./service";
 
-  import IconCategory from "~icons/material-symbols/category";
-
   interface Props {
     info: Writable<CategoryInfo | null>;
     menuIcon?: Component<SvelteHTMLElements["svg"]>;
@@ -14,58 +14,30 @@
     onMenuClick?: (category: SelectedCategory) => void;
   }
 
-  let { info, menuIcon: MenuIcon, onclick, onMenuClick }: Props = $props();
+  let { info, menuIcon, onclick, onMenuClick }: Props = $props();
 
   const openCategory = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onclick({ id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onclick({ id, dataKey, dataKeyVersion, name });
   };
 
-  const openMenu = (e: Event) => {
-    e.stopPropagation();
-
+  const openMenu = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onMenuClick!({ id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onMenuClick!({ id, dataKey, dataKeyVersion, name });
   };
 </script>
 
 {#if $info}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openCategory} class="h-12 rounded-xl">
-    <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
-      <div class="flex-shrink-0 text-lg">
-        <IconCategory />
-      </div>
-      <p title={$info.name} class="flex-grow truncate font-medium">
-        {$info.name}
-      </p>
-      {#if MenuIcon && onMenuClick}
-        <button
-          id="open-menu"
-          onclick={openMenu}
-          class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
-        >
-          <MenuIcon class="text-lg" />
-        </button>
-      {/if}
-    </div>
-  </div>
+  <ActionEntryButton
+    class="h-12"
+    onclick={openCategory}
+    actionButtonIcon={menuIcon}
+    onActionButtonClick={openMenu}
+  >
+    <CategoryLabel name={$info.name!} />
+  </ActionEntryButton>
 {/if}
-
-<style>
-  #button:active:not(:has(#open-menu:active)) {
-    @apply bg-gray-100;
-  }
-  #button-content:active:not(:has(#open-menu:active)) {
-    @apply scale-95;
-  }
-</style>
diff --git a/src/lib/organisms/Category/File.svelte b/src/lib/organisms/Category/File.svelte
index e611b0b..5263b95 100644
--- a/src/lib/organisms/Category/File.svelte
+++ b/src/lib/organisms/Category/File.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { DirectoryEntryLabel } from "$lib/components/molecules";
   import type { FileInfo } from "$lib/modules/filesystem";
   import type { SelectedFile } from "./service";
 
-  import IconDraft from "~icons/material-symbols/draft";
   import IconClose from "~icons/material-symbols/close";
 
   interface Props {
@@ -18,52 +19,24 @@
     const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onclick({ id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onclick({ id, dataKey, dataKeyVersion, name });
   };
 
-  const removeFile = (e: Event) => {
-    e.stopPropagation();
-
+  const removeFile = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onRemoveClick!({ id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onRemoveClick!({ id, dataKey, dataKeyVersion, name });
   };
 </script>
 
 {#if $info}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openFile} class="h-12 rounded-xl">
-    <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
-      <div class="flex-shrink-0 text-lg text-blue-400">
-        <IconDraft />
-      </div>
-      <p title={$info.name} class="flex-grow truncate font-medium">
-        {$info.name}
-      </p>
-      {#if onRemoveClick}
-        <button
-          id="remove-file"
-          onclick={removeFile}
-          class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
-        >
-          <IconClose class="text-lg" />
-        </button>
-      {/if}
-    </div>
-  </div>
+  <ActionEntryButton
+    class="h-12"
+    onclick={openFile}
+    actionButtonIcon={onRemoveClick && IconClose}
+    onActionButtonClick={removeFile}
+  >
+    <DirectoryEntryLabel type="file" name={$info.name} />
+  </ActionEntryButton>
 {/if}
-
-<style>
-  #button:active:not(:has(#remove-file:active)) {
-    @apply bg-gray-100;
-  }
-  #button-content:active:not(:has(#remove-file:active)) {
-    @apply scale-95;
-  }
-</style>
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
index b25bd2f..fd59d03 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { DirectoryEntryLabel } from "$lib/components/molecules";
   import type { FileInfo } from "$lib/modules/filesystem";
   import { formatDateTime } from "$lib/modules/util";
   import type { SelectedEntry } from "../service.svelte";
 
-  import IconDraft from "~icons/material-symbols/draft";
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   interface Props {
@@ -19,55 +20,28 @@
     const { id, dataKey, dataKeyVersion, name } = $info!;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onclick({ type: "file", id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onclick({ type: "file", id, dataKey, dataKeyVersion, name });
   };
 
-  const openMenu = (e: Event) => {
-    e.stopPropagation();
-
+  const openMenu = () => {
     const { id, dataKey, dataKeyVersion, name } = $info!;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onOpenMenuClick({ type: "file", id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onOpenMenuClick({ type: "file", id, dataKey, dataKeyVersion, name });
   };
 </script>
 
 {#if $info}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openFile} class="h-14 rounded-xl">
-    <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
-      <div class="flex-shrink-0 text-lg">
-        <IconDraft class="text-blue-400" />
-      </div>
-      <div class="flex-grow overflow-hidden">
-        <p title={$info.name} class="truncate font-medium">
-          {$info.name}
-        </p>
-        <p class="text-xs text-gray-800">
-          {formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
-        </p>
-      </div>
-      <button
-        id="open-menu"
-        onclick={openMenu}
-        class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
-      >
-        <IconMoreVert class="text-lg" />
-      </button>
-    </div>
-  </div>
+  <ActionEntryButton
+    class="h-14"
+    onclick={openFile}
+    actionButtonIcon={IconMoreVert}
+    onActionButtonClick={openMenu}
+  >
+    <DirectoryEntryLabel
+      type="file"
+      name={$info.name}
+      subtext={formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
+    />
+  </ActionEntryButton>
 {/if}
-
-<style>
-  #button:active:not(:has(#open-menu:active)) {
-    @apply bg-gray-100;
-  }
-  #button-content:active:not(:has(#open-menu:active)) {
-    @apply scale-95;
-  }
-</style>
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
index bea9e73..5454695 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { DirectoryEntryLabel } from "$lib/components/molecules";
   import type { DirectoryInfo } from "$lib/modules/filesystem";
   import type { SelectedEntry } from "../service.svelte";
 
-  import IconFolder from "~icons/material-symbols/folder";
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   type SubDirectoryInfo = DirectoryInfo & { id: number };
@@ -20,50 +21,24 @@
     const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onclick({ type: "directory", id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onclick({ type: "directory", id, dataKey, dataKeyVersion, name });
   };
 
-  const openMenu = (e: Event) => {
-    e.stopPropagation();
-
+  const openMenu = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onOpenMenuClick({ type: "directory", id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onOpenMenuClick({ type: "directory", id, dataKey, dataKeyVersion, name });
   };
 </script>
 
 {#if $info}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openDirectory} class="h-14 rounded-xl">
-    <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
-      <div class="flex-shrink-0 text-lg">
-        <IconFolder />
-      </div>
-      <p title={$info.name} class="flex-grow truncate font-medium">
-        {$info.name}
-      </p>
-      <button
-        id="open-menu"
-        onclick={openMenu}
-        class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
-      >
-        <IconMoreVert class="text-lg" />
-      </button>
-    </div>
-  </div>
+  <ActionEntryButton
+    class="h-14"
+    onclick={openDirectory}
+    actionButtonIcon={IconMoreVert}
+    onActionButtonClick={openMenu}
+  >
+    <DirectoryEntryLabel type="directory" name={$info.name!} />
+  </ActionEntryButton>
 {/if}
-
-<style>
-  #button:active:not(:has(#open-menu:active)) {
-    @apply bg-gray-100;
-  }
-  #button-content:active:not(:has(#open-menu:active)) {
-    @apply scale-95;
-  }
-</style>

From cf51f2618e2cbc965f70b692b25bdce7a1fb50af Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Mon, 27 Jan 2025 15:03:57 +0900
Subject: [PATCH 09/16] =?UTF-8?q?BottomSheet=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/{ => atoms}/BottomSheet.svelte | 26 ++++++-------
 src/lib/components/atoms/index.ts             |  1 +
 src/lib/components/index.ts                   |  1 -
 .../file/[id]/AddToCategoryBottomSheet.svelte | 17 ++++-----
 .../export/BeforeContinueBottomSheet.svelte   | 11 +++---
 .../[[id]]/CategoryMenuBottomSheet.svelte     | 22 +++++------
 .../[[id]]/EntryCreateBottomSheet.svelte      | 38 +++++++++----------
 .../[[id]]/EntryMenuBottomSheet.svelte        | 22 +++++------
 8 files changed, 65 insertions(+), 73 deletions(-)
 rename src/lib/components/{ => atoms}/BottomSheet.svelte (59%)
 delete mode 100644 src/lib/components/index.ts

diff --git a/src/lib/components/BottomSheet.svelte b/src/lib/components/atoms/BottomSheet.svelte
similarity index 59%
rename from src/lib/components/BottomSheet.svelte
rename to src/lib/components/atoms/BottomSheet.svelte
index 9fdfe4b..088dc63 100644
--- a/src/lib/components/BottomSheet.svelte
+++ b/src/lib/components/atoms/BottomSheet.svelte
@@ -1,28 +1,26 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
   import { fade, fly } from "svelte/transition";
   import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
-    children: Snippet;
-    onclose?: () => void;
+    children?: Snippet;
+    class?: ClassValue;
     isOpen: boolean;
+    onclose?: () => void;
   }
 
-  let { children, onclose, isOpen = $bindable() }: Props = $props();
-
-  const closeBottomSheet = $derived(
-    onclose ||
-      (() => {
-        isOpen = false;
-      }),
-  );
+  let { children, isOpen = $bindable(), onclose, ...props }: Props = $props();
 </script>
 
 {#if isOpen}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div onclick={closeBottomSheet} class="fixed inset-0 z-10 flex items-end justify-center">
+  <div
+    onclick={onclose || (() => (isOpen = false))}
+    class="fixed inset-0 z-10 flex items-end justify-center"
+  >
     <div
       class="absolute inset-0 bg-black bg-opacity-50"
       transition:fade|global={{ duration: 100 }}
@@ -31,10 +29,12 @@
       <AdaptiveDiv>
         <div
           onclick={(e) => e.stopPropagation()}
-          class="flex max-h-[70vh] min-h-[30vh] overflow-y-auto rounded-t-2xl bg-white px-4"
+          class="flex max-h-[70vh] min-h-[30vh] flex-col rounded-t-2xl bg-white"
           transition:fly|global={{ y: 100, duration: 200 }}
         >
-          {@render children?.()}
+          <div class={["flex-grow overflow-y-auto", props.class]}>
+            {@render children?.()}
+          </div>
         </div>
       </AdaptiveDiv>
     </div>
diff --git a/src/lib/components/atoms/index.ts b/src/lib/components/atoms/index.ts
index a977f53..14b0849 100644
--- a/src/lib/components/atoms/index.ts
+++ b/src/lib/components/atoms/index.ts
@@ -1,3 +1,4 @@
+export { default as BottomSheet } from "./BottomSheet.svelte";
 export * from "./buttons";
 export * from "./divs";
 export * from "./inputs";
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
deleted file mode 100644
index d7690e1..0000000
--- a/src/lib/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as BottomSheet } from "./BottomSheet.svelte";
diff --git a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
index 619bf8e..039ab8c 100644
--- a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
+++ b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
-  import { BottomSheet } from "$lib/components";
-  import { Button, BottomDiv } from "$lib/components/atoms";
+  import { BottomSheet, Button, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
   import { CategoryCreateModal } from "$lib/components/organisms/modals";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import SubCategories from "$lib/molecules/SubCategories.svelte";
@@ -26,11 +25,11 @@
   });
 </script>
 
-<BottomSheet bind:isOpen>
-  <div class="flex w-full flex-col justify-between">
-    {#if $category}
+{#if $category}
+  <BottomSheet bind:isOpen class="flex flex-col">
+    <FullscreenDiv>
       <SubCategories
-        class="h-fit py-4"
+        class="py-4"
         info={$category}
         onSubCategoryClick={({ id }) =>
           (category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
@@ -44,9 +43,9 @@
           </Button>
         </BottomDiv>
       {/if}
-    {/if}
-  </div>
-</BottomSheet>
+    </FullscreenDiv>
+  </BottomSheet>
+{/if}
 
 <CategoryCreateModal
   bind:isOpen={isCategoryCreateModalOpen}
diff --git a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte b/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
index 594d297..8242045 100644
--- a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { BottomSheet } from "$lib/components";
-  import { Button, BottomDiv } from "$lib/components/atoms";
+  import { BottomSheet, Button, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
 
   interface Props {
     onRetryClick: () => void;
@@ -11,9 +10,9 @@
   let { onRetryClick, onContinueClick, isOpen = $bindable() }: Props = $props();
 </script>
 
-<BottomSheet bind:isOpen>
-  <div class="flex flex-col justify-between gap-y-4 pt-4">
-    <div class="space-y-2 break-keep">
+<BottomSheet bind:isOpen class="flex flex-col">
+  <FullscreenDiv>
+    <div class="space-y-2 break-keep py-4">
       <p class="text-xl font-bold">암호 키 파일을 저장하셨나요?</p>
       <p>
         암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요. 파일이 잘 저장되었는지 다시
@@ -24,5 +23,5 @@
       <Button color="gray" onclick={onRetryClick} class="flex-1">다시 저장할래요</Button>
       <Button onclick={onContinueClick} class="flex-1">잘 저장되었어요</Button>
     </BottomDiv>
-  </div>
+  </FullscreenDiv>
 </BottomSheet>
diff --git a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
index 6f89a2c..73f91ce 100644
--- a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
+++ b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { BottomSheet } from "$lib/components";
+  import { BottomSheet } from "$lib/components/atoms";
   import { CategoryLabel, IconEntryButton } from "$lib/components/molecules";
   import { useContext } from "./service.svelte";
 
@@ -18,16 +18,14 @@
 
 {#if context.selectedCategory}
   {@const { name } = context.selectedCategory}
-  <BottomSheet bind:isOpen>
-    <div class="w-full py-4">
-      <CategoryLabel {name} class="h-12 p-2" textClass="!font-semibold" />
-      <div class="my-2 h-px w-full bg-gray-200"></div>
-      <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 bind:isOpen class="p-4">
+    <CategoryLabel {name} class="h-12 p-2" textClass="!font-semibold" />
+    <div class="my-2 h-px w-full bg-gray-200"></div>
+    <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>
   </BottomSheet>
 {/if}
diff --git a/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
index 2a5cabc..4eda017 100644
--- a/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { BottomSheet } from "$lib/components";
+  import { BottomSheet } from "$lib/components/atoms";
   import { IconEntryButton } from "$lib/components/molecules";
 
   import IconCreateNewFolder from "~icons/material-symbols/create-new-folder";
@@ -14,23 +14,21 @@
   let { isOpen = $bindable(), onDirectoryCreateClick, onFileUploadClick }: Props = $props();
 </script>
 
-<BottomSheet bind:isOpen>
-  <div class="w-full py-4">
-    <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 bind:isOpen class="p-4">
+  <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>
 </BottomSheet>
diff --git a/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
index 22ac465..95e675a 100644
--- a/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { BottomSheet } from "$lib/components";
+  import { BottomSheet } from "$lib/components/atoms";
   import { DirectoryEntryLabel, IconEntryButton } from "$lib/components/molecules";
   import { useContext } from "./service.svelte";
 
@@ -18,16 +18,14 @@
 
 {#if context.selectedEntry}
   {@const { name, type } = context.selectedEntry}
-  <BottomSheet bind:isOpen>
-    <div class="w-full py-4">
-      <DirectoryEntryLabel {type} {name} class="h-12 p-2" textClass="!font-semibold" />
-      <div class="my-2 h-px w-full bg-gray-200"></div>
-      <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 bind:isOpen class="p-4">
+    <DirectoryEntryLabel {type} {name} class="h-12 p-2" textClass="!font-semibold" />
+    <div class="my-2 h-px w-full bg-gray-200"></div>
+    <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>
   </BottomSheet>
 {/if}

From df9831da8eb66b59cbb65f6a88d7538dfb4dfc2b Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Mon, 27 Jan 2025 19:33:38 +0900
Subject: [PATCH 10/16] =?UTF-8?q?TitleDiv=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/divs/TitleDiv.svelte       | 21 -------
 src/lib/components/divs/index.ts              |  1 -
 src/lib/components/molecules/TitledDiv.svelte | 35 ++++++++++++
 src/lib/components/molecules/index.ts         |  1 +
 .../molecules/labels/TitleLabel.svelte        | 24 ++++++++
 src/lib/components/molecules/labels/index.ts  |  1 +
 src/routes/(fullscreen)/+layout.svelte        |  2 +-
 .../auth/changePassword/+page.svelte          | 24 ++++----
 .../(fullscreen)/auth/login/+page.svelte      | 23 ++++----
 .../(fullscreen)/client/pending/+page.svelte  | 55 +++++++++----------
 .../(fullscreen)/key/export/+page.svelte      | 23 ++++----
 .../(fullscreen)/key/generate/+page.svelte    | 33 +++++------
 12 files changed, 142 insertions(+), 101 deletions(-)
 delete mode 100644 src/lib/components/divs/TitleDiv.svelte
 delete mode 100644 src/lib/components/divs/index.ts
 create mode 100644 src/lib/components/molecules/TitledDiv.svelte
 create mode 100644 src/lib/components/molecules/labels/TitleLabel.svelte

diff --git a/src/lib/components/divs/TitleDiv.svelte b/src/lib/components/divs/TitleDiv.svelte
deleted file mode 100644
index d6c4414..0000000
--- a/src/lib/components/divs/TitleDiv.svelte
+++ /dev/null
@@ -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>
diff --git a/src/lib/components/divs/index.ts b/src/lib/components/divs/index.ts
deleted file mode 100644
index 9d99271..0000000
--- a/src/lib/components/divs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TitleDiv } from "./TitleDiv.svelte";
diff --git a/src/lib/components/molecules/TitledDiv.svelte b/src/lib/components/molecules/TitledDiv.svelte
new file mode 100644
index 0000000..3141508
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/molecules/index.ts b/src/lib/components/molecules/index.ts
index 2ab4006..fb4fe57 100644
--- a/src/lib/components/molecules/index.ts
+++ b/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";
diff --git a/src/lib/components/molecules/labels/TitleLabel.svelte b/src/lib/components/molecules/labels/TitleLabel.svelte
new file mode 100644
index 0000000..1cf159d
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/molecules/labels/index.ts b/src/lib/components/molecules/labels/index.ts
index 412a0bb..af8f40b 100644
--- a/src/lib/components/molecules/labels/index.ts
+++ b/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";
diff --git a/src/routes/(fullscreen)/+layout.svelte b/src/routes/(fullscreen)/+layout.svelte
index 274b760..d320930 100644
--- a/src/routes/(fullscreen)/+layout.svelte
+++ b/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>
diff --git a/src/routes/(fullscreen)/auth/changePassword/+page.svelte b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
index 5299ed5..e678de4 100644
--- a/src/routes/(fullscreen)/auth/changePassword/+page.svelte
+++ b/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>
diff --git a/src/routes/(fullscreen)/auth/login/+page.svelte b/src/routes/(fullscreen)/auth/login/+page.svelte
index 5ae190f..6a5472c 100644
--- a/src/routes/(fullscreen)/auth/login/+page.svelte
+++ b/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>
diff --git a/src/routes/(fullscreen)/client/pending/+page.svelte b/src/routes/(fullscreen)/client/pending/+page.svelte
index 06e586b..389b9ce 100644
--- a/src/routes/(fullscreen)/client/pending/+page.svelte
+++ b/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>
diff --git a/src/routes/(fullscreen)/key/export/+page.svelte b/src/routes/(fullscreen)/key/export/+page.svelte
index 53f4bd5..c3bebce 100644
--- a/src/routes/(fullscreen)/key/export/+page.svelte
+++ b/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>
diff --git a/src/routes/(fullscreen)/key/generate/+page.svelte b/src/routes/(fullscreen)/key/generate/+page.svelte
index 54f16a6..d62c95e 100644
--- a/src/routes/(fullscreen)/key/generate/+page.svelte
+++ b/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>

From 7230810f3a5101dc84f69815912ff8404a9b6bb3 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Mon, 27 Jan 2025 19:45:40 +0900
Subject: [PATCH 11/16] =?UTF-8?q?components=20=EB=94=94=EB=A0=89=ED=84=B0?=
 =?UTF-8?q?=EB=A6=AC=20=EB=B0=96=EC=97=90=20=EC=9E=88=EB=8D=98=20molecule/?=
 =?UTF-8?q?organism=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=93=A4?=
 =?UTF-8?q?=EC=9D=84=20=ED=95=B4=EB=8B=B9=20=EB=94=94=EB=A0=89=ED=84=B0?=
 =?UTF-8?q?=EB=A6=AC=20=EB=82=B4=EB=B6=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{ => components}/molecules/Categories/Categories.svelte   | 0
 src/lib/{ => components}/molecules/Categories/Category.svelte | 0
 src/lib/{ => components}/molecules/Categories/index.ts        | 0
 src/lib/{ => components}/molecules/Categories/service.ts      | 0
 src/lib/{ => components}/molecules/SubCategories.svelte       | 3 +--
 src/lib/components/molecules/index.ts                         | 3 +++
 src/lib/{ => components}/organisms/Category/Category.svelte   | 3 +--
 src/lib/{ => components}/organisms/Category/File.svelte       | 0
 src/lib/{ => components}/organisms/Category/index.ts          | 0
 src/lib/{ => components}/organisms/Category/service.ts        | 0
 src/lib/components/organisms/index.ts                         | 2 ++
 src/routes/(fullscreen)/file/[id]/+page.svelte                | 3 +--
 .../(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte    | 4 ++--
 src/routes/(main)/category/[[id]]/+page.svelte                | 3 +--
 src/routes/(main)/category/[[id]]/service.svelte.ts           | 2 +-
 15 files changed, 12 insertions(+), 11 deletions(-)
 rename src/lib/{ => components}/molecules/Categories/Categories.svelte (100%)
 rename src/lib/{ => components}/molecules/Categories/Category.svelte (100%)
 rename src/lib/{ => components}/molecules/Categories/index.ts (100%)
 rename src/lib/{ => components}/molecules/Categories/service.ts (100%)
 rename src/lib/{ => components}/molecules/SubCategories.svelte (92%)
 rename src/lib/{ => components}/organisms/Category/Category.svelte (95%)
 rename src/lib/{ => components}/organisms/Category/File.svelte (100%)
 rename src/lib/{ => components}/organisms/Category/index.ts (100%)
 rename src/lib/{ => components}/organisms/Category/service.ts (100%)

diff --git a/src/lib/molecules/Categories/Categories.svelte b/src/lib/components/molecules/Categories/Categories.svelte
similarity index 100%
rename from src/lib/molecules/Categories/Categories.svelte
rename to src/lib/components/molecules/Categories/Categories.svelte
diff --git a/src/lib/molecules/Categories/Category.svelte b/src/lib/components/molecules/Categories/Category.svelte
similarity index 100%
rename from src/lib/molecules/Categories/Category.svelte
rename to src/lib/components/molecules/Categories/Category.svelte
diff --git a/src/lib/molecules/Categories/index.ts b/src/lib/components/molecules/Categories/index.ts
similarity index 100%
rename from src/lib/molecules/Categories/index.ts
rename to src/lib/components/molecules/Categories/index.ts
diff --git a/src/lib/molecules/Categories/service.ts b/src/lib/components/molecules/Categories/service.ts
similarity index 100%
rename from src/lib/molecules/Categories/service.ts
rename to src/lib/components/molecules/Categories/service.ts
diff --git a/src/lib/molecules/SubCategories.svelte b/src/lib/components/molecules/SubCategories.svelte
similarity index 92%
rename from src/lib/molecules/SubCategories.svelte
rename to src/lib/components/molecules/SubCategories.svelte
index cbad371..fd805c9 100644
--- a/src/lib/molecules/SubCategories.svelte
+++ b/src/lib/components/molecules/SubCategories.svelte
@@ -2,9 +2,8 @@
   import type { Component } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
   import type { Writable } from "svelte/store";
-  import { IconEntryButton } from "$lib/components/molecules";
+  import { Categories, IconEntryButton, type SelectedCategory } 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";
 
   import IconAddCircle from "~icons/material-symbols/add-circle";
diff --git a/src/lib/components/molecules/index.ts b/src/lib/components/molecules/index.ts
index fb4fe57..8edc84a 100644
--- a/src/lib/components/molecules/index.ts
+++ b/src/lib/components/molecules/index.ts
@@ -1,6 +1,9 @@
 export * from "./ActionModal.svelte";
 export { default as ActionModal } from "./ActionModal.svelte";
+export * from "./Categories";
+export { default as Categories } from "./Categories";
 export { default as IconEntryButton } from "./IconEntryButton.svelte";
 export * from "./labels";
+export { default as SubCategories } from "./SubCategories.svelte";
 export { default as TitledDiv } from "./TitledDiv.svelte";
 export { default as TopBar } from "./TopBar.svelte";
diff --git a/src/lib/organisms/Category/Category.svelte b/src/lib/components/organisms/Category/Category.svelte
similarity index 95%
rename from src/lib/organisms/Category/Category.svelte
rename to src/lib/components/organisms/Category/Category.svelte
index 3407c32..295bf99 100644
--- a/src/lib/organisms/Category/Category.svelte
+++ b/src/lib/components/organisms/Category/Category.svelte
@@ -2,10 +2,9 @@
   import { untrack } from "svelte";
   import { get, type Writable } from "svelte/store";
   import { CheckBox } from "$lib/components/atoms";
+  import { SubCategories, type SelectedCategory } from "$lib/components/molecules";
   import { getFileInfo, type FileInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import { SortBy, sortEntries } from "$lib/modules/util";
-  import type { SelectedCategory } from "$lib/molecules/Categories";
-  import SubCategories from "$lib/molecules/SubCategories.svelte";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
   import type { SelectedFile } from "./service";
diff --git a/src/lib/organisms/Category/File.svelte b/src/lib/components/organisms/Category/File.svelte
similarity index 100%
rename from src/lib/organisms/Category/File.svelte
rename to src/lib/components/organisms/Category/File.svelte
diff --git a/src/lib/organisms/Category/index.ts b/src/lib/components/organisms/Category/index.ts
similarity index 100%
rename from src/lib/organisms/Category/index.ts
rename to src/lib/components/organisms/Category/index.ts
diff --git a/src/lib/organisms/Category/service.ts b/src/lib/components/organisms/Category/service.ts
similarity index 100%
rename from src/lib/organisms/Category/service.ts
rename to src/lib/components/organisms/Category/service.ts
diff --git a/src/lib/components/organisms/index.ts b/src/lib/components/organisms/index.ts
index fa02317..64f9861 100644
--- a/src/lib/components/organisms/index.ts
+++ b/src/lib/components/organisms/index.ts
@@ -1 +1,3 @@
+export * from "./Category";
+export { default as Category } from "./Category";
 export * from "./modals";
diff --git a/src/routes/(fullscreen)/file/[id]/+page.svelte b/src/routes/(fullscreen)/file/[id]/+page.svelte
index 7d7d50e..2ab7e32 100644
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -4,14 +4,13 @@
   import { get, type Writable } from "svelte/store";
   import { goto } from "$app/navigation";
   import { FullscreenDiv } from "$lib/components/atoms";
-  import { IconEntryButton, TopBar } from "$lib/components/molecules";
+  import { Categories, IconEntryButton, TopBar } from "$lib/components/molecules";
   import {
     getFileInfo,
     getCategoryInfo,
     type FileInfo,
     type CategoryInfo,
   } from "$lib/modules/filesystem";
-  import Categories from "$lib/molecules/Categories";
   import { fileDownloadStatusStore, isFileDownloading, masterKeyStore } from "$lib/stores";
   import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
   import DownloadStatus from "./DownloadStatus.svelte";
diff --git a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
index 039ab8c..b707015 100644
--- a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
+++ b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import { BottomSheet, Button, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
-  import { CategoryCreateModal } from "$lib/components/organisms/modals";
+  import { SubCategories } from "$lib/components/molecules";
+  import { CategoryCreateModal } from "$lib/components/organisms";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
-  import SubCategories from "$lib/molecules/SubCategories.svelte";
   import { masterKeyStore } from "$lib/stores";
   import { requestCategoryCreation } from "./service";
 
diff --git a/src/routes/(main)/category/[[id]]/+page.svelte b/src/routes/(main)/category/[[id]]/+page.svelte
index 47aa2b5..9bfa2a4 100644
--- a/src/routes/(main)/category/[[id]]/+page.svelte
+++ b/src/routes/(main)/category/[[id]]/+page.svelte
@@ -2,9 +2,8 @@
   import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components/molecules";
-  import { CategoryCreateModal } from "$lib/components/organisms";
+  import { Category, CategoryCreateModal } from "$lib/components/organisms";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
-  import Category from "$lib/organisms/Category";
   import { masterKeyStore } from "$lib/stores";
   import CategoryDeleteModal from "./CategoryDeleteModal.svelte";
   import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
diff --git a/src/routes/(main)/category/[[id]]/service.svelte.ts b/src/routes/(main)/category/[[id]]/service.svelte.ts
index 275fe80..b573041 100644
--- a/src/routes/(main)/category/[[id]]/service.svelte.ts
+++ b/src/routes/(main)/category/[[id]]/service.svelte.ts
@@ -1,7 +1,7 @@
 import { getContext, setContext } from "svelte";
 import { callPostApi } from "$lib/hooks";
 import { encryptString } from "$lib/modules/crypto";
-import type { SelectedCategory } from "$lib/molecules/Categories";
+import type { SelectedCategory } from "$lib/components/molecules";
 import type { CategoryRenameRequest } from "$lib/server/schemas";
 
 export { requestCategoryCreation, requestFileRemovalFromCategory } from "$lib/services/category";

From acb6e1ac6e2f1fa0e1e4c52494279dbea58b7915 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Mon, 27 Jan 2025 20:17:20 +0900
Subject: [PATCH 12/16] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=82=AC=EC=86=8C=ED=95=9C=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/atoms/BottomSheet.svelte      |  4 ++--
 src/lib/components/atoms/Modal.svelte            |  4 ++--
 .../atoms/buttons/ActionEntryButton.svelte       | 10 ++++------
 src/lib/components/atoms/buttons/Button.svelte   |  4 ++--
 .../components/atoms/buttons/EntryButton.svelte  |  4 ++--
 src/lib/components/atoms/divs/AdaptiveDiv.svelte |  4 ++--
 src/lib/components/atoms/divs/BottomDiv.svelte   |  4 ++--
 src/lib/components/atoms/inputs/TextInput.svelte |  4 ++--
 .../components/molecules/IconEntryButton.svelte  | 13 ++++++++++---
 .../components/molecules/SubCategories.svelte    |  4 ++--
 src/lib/components/molecules/TitledDiv.svelte    | 16 ++++++++++++----
 src/lib/components/molecules/TopBar.svelte       |  4 ++--
 .../molecules/labels/CategoryLabel.svelte        |  6 +++---
 .../molecules/labels/DirectoryEntryLabel.svelte  |  6 +++---
 .../components/molecules/labels/IconLabel.svelte | 15 +++++++++++----
 .../molecules/labels/TitleLabel.svelte           |  6 +++---
 .../auth/changePassword/+page.svelte             |  2 +-
 src/routes/(fullscreen)/auth/login/+page.svelte  |  2 +-
 .../file/[id]/AddToCategoryBottomSheet.svelte    |  2 +-
 src/routes/(fullscreen)/key/export/+page.svelte  |  2 +-
 .../key/export/BeforeContinueBottomSheet.svelte  |  2 +-
 .../(fullscreen)/key/generate/+page.svelte       |  2 +-
 22 files changed, 70 insertions(+), 50 deletions(-)

diff --git a/src/lib/components/atoms/BottomSheet.svelte b/src/lib/components/atoms/BottomSheet.svelte
index 088dc63..f23acae 100644
--- a/src/lib/components/atoms/BottomSheet.svelte
+++ b/src/lib/components/atoms/BottomSheet.svelte
@@ -11,7 +11,7 @@
     onclose?: () => void;
   }
 
-  let { children, isOpen = $bindable(), onclose, ...props }: Props = $props();
+  let { children, class: className, isOpen = $bindable(), onclose }: Props = $props();
 </script>
 
 {#if isOpen}
@@ -32,7 +32,7 @@
           class="flex max-h-[70vh] min-h-[30vh] flex-col rounded-t-2xl bg-white"
           transition:fly|global={{ y: 100, duration: 200 }}
         >
-          <div class={["flex-grow overflow-y-auto", props.class]}>
+          <div class={["flex-grow overflow-y-auto", className]}>
             {@render children?.()}
           </div>
         </div>
diff --git a/src/lib/components/atoms/Modal.svelte b/src/lib/components/atoms/Modal.svelte
index 2d100d4..c949ec9 100644
--- a/src/lib/components/atoms/Modal.svelte
+++ b/src/lib/components/atoms/Modal.svelte
@@ -11,7 +11,7 @@
     onclose?: () => void;
   }
 
-  let { children, isOpen = $bindable(), onclose, ...props }: Props = $props();
+  let { children, class: className, isOpen = $bindable(), onclose }: Props = $props();
 </script>
 
 {#if isOpen}
@@ -24,7 +24,7 @@
   >
     <AdaptiveDiv class="h-full">
       <div class="flex h-full items-center justify-center px-4">
-        <div onclick={(e) => e.stopPropagation()} class={["rounded-2xl bg-white p-4", props.class]}>
+        <div onclick={(e) => e.stopPropagation()} class={["rounded-2xl bg-white p-4", className]}>
           {@render children?.()}
         </div>
       </div>
diff --git a/src/lib/components/atoms/buttons/ActionEntryButton.svelte b/src/lib/components/atoms/buttons/ActionEntryButton.svelte
index 94e9235..a52cd1d 100644
--- a/src/lib/components/atoms/buttons/ActionEntryButton.svelte
+++ b/src/lib/components/atoms/buttons/ActionEntryButton.svelte
@@ -13,10 +13,11 @@
 
   let {
     actionButtonIcon: ActionButtonIcon,
+    actionButtonClass: actionButtonClassName,
     children,
+    class: className,
     onActionButtonClick,
     onclick,
-    ...props
   }: Props = $props();
 </script>
 
@@ -25,7 +26,7 @@
 <div
   id="container"
   onclick={onclick && (() => setTimeout(onclick, 100))}
-  class={["rounded-xl", props.class]}
+  class={["rounded-xl", className]}
 >
   <div id="children" class="flex h-full items-center justify-between gap-x-4 p-2 transition">
     <div class="flex-grow overflow-x-hidden">
@@ -40,10 +41,7 @@
             setTimeout(onActionButtonClick, 100);
           }
         }}
-        class={[
-          "flex-shrink-0 rounded-full p-1 text-lg active:bg-gray-100",
-          props.actionButtonClass,
-        ]}
+        class={["flex-shrink-0 rounded-full p-1 text-lg active:bg-gray-100", actionButtonClassName]}
       >
         <ActionButtonIcon />
       </button>
diff --git a/src/lib/components/atoms/buttons/Button.svelte b/src/lib/components/atoms/buttons/Button.svelte
index f05053b..2ec8d98 100644
--- a/src/lib/components/atoms/buttons/Button.svelte
+++ b/src/lib/components/atoms/buttons/Button.svelte
@@ -9,7 +9,7 @@
     onclick?: () => void;
   }
 
-  let { children, color = "primary", onclick, ...props }: Props = $props();
+  let { children, class: className, color = "primary", onclick }: Props = $props();
 
   let bgColor = $derived(
     {
@@ -31,7 +31,7 @@
     "h-12 min-w-fit rounded-xl p-3 font-medium transition active:scale-95",
     bgColor,
     textColor,
-    props.class,
+    className,
   ]}
 >
   {@render children?.()}
diff --git a/src/lib/components/atoms/buttons/EntryButton.svelte b/src/lib/components/atoms/buttons/EntryButton.svelte
index 51f3a80..63926cc 100644
--- a/src/lib/components/atoms/buttons/EntryButton.svelte
+++ b/src/lib/components/atoms/buttons/EntryButton.svelte
@@ -10,12 +10,12 @@
     onclick?: () => void;
   }
 
-  let { children, onclick, ...props }: Props = $props();
+  let { children, class: className, onclick }: Props = $props();
 </script>
 
 <button
   onclick={onclick && (() => setTimeout(onclick, 100))}
-  class={["rounded-xl active:bg-gray-100", props.class]}
+  class={["rounded-xl active:bg-gray-100", className]}
 >
   <div class="flex h-full gap-x-4 p-2 transition active:scale-95">
     <div class="h-full flex-grow">
diff --git a/src/lib/components/atoms/divs/AdaptiveDiv.svelte b/src/lib/components/atoms/divs/AdaptiveDiv.svelte
index 9003c7c..c723a55 100644
--- a/src/lib/components/atoms/divs/AdaptiveDiv.svelte
+++ b/src/lib/components/atoms/divs/AdaptiveDiv.svelte
@@ -7,9 +7,9 @@
     class?: ClassValue;
   }
 
-  let { children, ...props }: Props = $props();
+  let { children, class: className }: Props = $props();
 </script>
 
-<div class={["mx-auto max-w-screen-md", props.class]}>
+<div class={["mx-auto max-w-screen-md", className]}>
   {@render children?.()}
 </div>
diff --git a/src/lib/components/atoms/divs/BottomDiv.svelte b/src/lib/components/atoms/divs/BottomDiv.svelte
index 74386b3..5db0dd0 100644
--- a/src/lib/components/atoms/divs/BottomDiv.svelte
+++ b/src/lib/components/atoms/divs/BottomDiv.svelte
@@ -7,9 +7,9 @@
     class?: ClassValue;
   }
 
-  let { children, ...props }: Props = $props();
+  let { children, class: className }: Props = $props();
 </script>
 
-<div class={["sticky bottom-0 bg-white pb-4", props.class]}>
+<div class={["sticky bottom-0 bg-white pb-4", className]}>
   {@render children?.()}
 </div>
diff --git a/src/lib/components/atoms/inputs/TextInput.svelte b/src/lib/components/atoms/inputs/TextInput.svelte
index 9da684a..613c85c 100644
--- a/src/lib/components/atoms/inputs/TextInput.svelte
+++ b/src/lib/components/atoms/inputs/TextInput.svelte
@@ -8,10 +8,10 @@
     value?: string;
   }
 
-  let { placeholder, type = "text", value = $bindable(""), ...props }: Props = $props();
+  let { class: className, placeholder, type = "text", value = $bindable("") }: Props = $props();
 </script>
 
-<div class={props.class}>
+<div class={className}>
   <div class="relative mt-5">
     <input
       bind:value
diff --git a/src/lib/components/molecules/IconEntryButton.svelte b/src/lib/components/molecules/IconEntryButton.svelte
index 97b941a..cb9ec72 100644
--- a/src/lib/components/molecules/IconEntryButton.svelte
+++ b/src/lib/components/molecules/IconEntryButton.svelte
@@ -13,11 +13,18 @@
     textClass?: ClassValue;
   }
 
-  let { children, icon, onclick, ...props }: Props = $props();
+  let {
+    children,
+    class: className,
+    icon,
+    iconClass: iconClassName,
+    onclick,
+    textClass: textClassName,
+  }: Props = $props();
 </script>
 
-<EntryButton {onclick} class={props.class}>
-  <IconLabel {icon} class="h-full" iconClass={props.iconClass} textClass={props.textClass}>
+<EntryButton {onclick} class={className}>
+  <IconLabel {icon} class="h-full" iconClass={iconClassName} textClass={textClassName}>
     {@render children?.()}
   </IconLabel>
 </EntryButton>
diff --git a/src/lib/components/molecules/SubCategories.svelte b/src/lib/components/molecules/SubCategories.svelte
index fd805c9..9c84a89 100644
--- a/src/lib/components/molecules/SubCategories.svelte
+++ b/src/lib/components/molecules/SubCategories.svelte
@@ -19,13 +19,13 @@
   }
 
   let {
+    class: className,
     info,
     onSubCategoryClick,
     onSubCategoryCreateClick,
     onSubCategoryMenuClick,
     subCategoryCreatePosition = "bottom",
     subCategoryMenuIcon,
-    ...props
   }: Props = $props();
 
   let subCategories: Writable<CategoryInfo | null>[] = $state([]);
@@ -37,7 +37,7 @@
   });
 </script>
 
-<div class={["space-y-1", props.class]}>
+<div class={["space-y-1", className]}>
   {#snippet subCategoryCreate()}
     <IconEntryButton
       icon={IconAddCircle}
diff --git a/src/lib/components/molecules/TitledDiv.svelte b/src/lib/components/molecules/TitledDiv.svelte
index 3141508..2240a89 100644
--- a/src/lib/components/molecules/TitledDiv.svelte
+++ b/src/lib/components/molecules/TitledDiv.svelte
@@ -13,12 +13,20 @@
     titleClass?: ClassValue;
   }
 
-  let { children, description, icon, title, ...props }: Props = $props();
+  let {
+    children,
+    childrenClass: childrenClassName,
+    class: className,
+    description,
+    icon,
+    title,
+    titleClass: titleClassName,
+  }: Props = $props();
 </script>
 
-<div class={["space-y-4 py-4", props.class]}>
+<div class={["space-y-4 py-4", className]}>
   <div class="space-y-2 break-keep">
-    <TitleLabel {icon} textClass={props.titleClass}>
+    <TitleLabel {icon} textClass={titleClassName}>
       {@render title?.()}
     </TitleLabel>
     {#if description}
@@ -28,7 +36,7 @@
     {/if}
   </div>
   {#if children}
-    <div class={props.childrenClass}>
+    <div class={childrenClassName}>
       {@render children()}
     </div>
   {/if}
diff --git a/src/lib/components/molecules/TopBar.svelte b/src/lib/components/molecules/TopBar.svelte
index 24fb537..e748b6c 100644
--- a/src/lib/components/molecules/TopBar.svelte
+++ b/src/lib/components/molecules/TopBar.svelte
@@ -11,13 +11,13 @@
     title?: string;
   }
 
-  let { children, onBackClick, title, ...props }: Props = $props();
+  let { children, class: className, onBackClick, title }: Props = $props();
 </script>
 
 <div
   class={[
     "sticky top-0 z-10 flex items-center justify-between gap-x-2 px-2 py-3 backdrop-blur-2xl",
-    props.class,
+    className,
   ]}
 >
   <button
diff --git a/src/lib/components/molecules/labels/CategoryLabel.svelte b/src/lib/components/molecules/labels/CategoryLabel.svelte
index eb160cf..cbafa54 100644
--- a/src/lib/components/molecules/labels/CategoryLabel.svelte
+++ b/src/lib/components/molecules/labels/CategoryLabel.svelte
@@ -11,7 +11,7 @@
     textClass?: ClassValue;
   }
 
-  let { name, subtext, ...props }: Props = $props();
+  let { class: className, name, subtext, textClass: textClassName }: Props = $props();
 </script>
 
 {#snippet subtextSnippet()}
@@ -21,8 +21,8 @@
 <IconLabel
   icon={IconCategory}
   subtext={subtext ? subtextSnippet : undefined}
-  class={props.class}
-  textClass={props.textClass}
+  class={className}
+  textClass={textClassName}
 >
   {name}
 </IconLabel>
diff --git a/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte b/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
index d9bcfb9..5d4fb81 100644
--- a/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
+++ b/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
@@ -13,7 +13,7 @@
     type: "directory" | "file";
   }
 
-  let { name, subtext, type, ...props }: Props = $props();
+  let { class: className, name, subtext, textClass: textClassName, type }: Props = $props();
 </script>
 
 {#snippet subtextSnippet()}
@@ -24,8 +24,8 @@
   icon={type === "directory" ? IconFolder : IconDraft}
   iconClass={type === "file" ? "text-blue-400" : undefined}
   subtext={subtext ? subtextSnippet : undefined}
-  class={props.class}
-  textClass={props.textClass}
+  class={className}
+  textClass={textClassName}
 >
   {name}
 </IconLabel>
diff --git a/src/lib/components/molecules/labels/IconLabel.svelte b/src/lib/components/molecules/labels/IconLabel.svelte
index 038f6c9..7e100c4 100644
--- a/src/lib/components/molecules/labels/IconLabel.svelte
+++ b/src/lib/components/molecules/labels/IconLabel.svelte
@@ -11,15 +11,22 @@
     textClass?: ClassValue;
   }
 
-  let { children, icon: Icon, subtext, ...props }: Props = $props();
+  let {
+    children,
+    class: className,
+    icon: Icon,
+    iconClass: iconClassName,
+    subtext,
+    textClass: textClassName,
+  }: Props = $props();
 </script>
 
-<div class={["flex items-center gap-x-4", props.class]}>
-  <div class={["flex-shrink-0 text-lg", props.iconClass]}>
+<div class={["flex items-center gap-x-4", className]}>
+  <div class={["flex-shrink-0 text-lg", iconClassName]}>
     <Icon />
   </div>
   <div class="flex flex-grow flex-col overflow-x-hidden text-left">
-    <p class={["truncate font-medium", props.textClass]}>
+    <p class={["truncate font-medium", textClassName]}>
       {@render children?.()}
     </p>
     {#if subtext}
diff --git a/src/lib/components/molecules/labels/TitleLabel.svelte b/src/lib/components/molecules/labels/TitleLabel.svelte
index 1cf159d..d2ecf72 100644
--- a/src/lib/components/molecules/labels/TitleLabel.svelte
+++ b/src/lib/components/molecules/labels/TitleLabel.svelte
@@ -9,16 +9,16 @@
     textClass?: ClassValue;
   }
 
-  let { children, icon: Icon, ...props }: Props = $props();
+  let { children, class: className, icon: Icon, textClass: textClassName }: Props = $props();
 </script>
 
-<div class={props.class}>
+<div class={className}>
   <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]}>
+  <p class={["text-3xl font-bold", textClassName]}>
     {@render children?.()}
   </p>
 </div>
diff --git a/src/routes/(fullscreen)/auth/changePassword/+page.svelte b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
index e678de4..25ded91 100644
--- a/src/routes/(fullscreen)/auth/changePassword/+page.svelte
+++ b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { Button, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
+  import { BottomDiv, Button, FullscreenDiv, TextInput } from "$lib/components/atoms";
   import { TitledDiv, TopBar } from "$lib/components/molecules";
   import { requestPasswordChange } from "./service";
 
diff --git a/src/routes/(fullscreen)/auth/login/+page.svelte b/src/routes/(fullscreen)/auth/login/+page.svelte
index 6a5472c..ac3b1a5 100644
--- a/src/routes/(fullscreen)/auth/login/+page.svelte
+++ b/src/routes/(fullscreen)/auth/login/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
+  import { BottomDiv, Button, FullscreenDiv, TextButton, TextInput } from "$lib/components/atoms";
   import { TitledDiv } from "$lib/components/molecules";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service";
diff --git a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
index b707015..f1d0200 100644
--- a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
+++ b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
-  import { BottomSheet, Button, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
+  import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "$lib/components/atoms";
   import { SubCategories } from "$lib/components/molecules";
   import { CategoryCreateModal } from "$lib/components/organisms";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
diff --git a/src/routes/(fullscreen)/key/export/+page.svelte b/src/routes/(fullscreen)/key/export/+page.svelte
index c3bebce..3a4ae07 100644
--- a/src/routes/(fullscreen)/key/export/+page.svelte
+++ b/src/routes/(fullscreen)/key/export/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import FileSaver from "file-saver";
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
+  import { BottomDiv, Button, FullscreenDiv, TextButton } from "$lib/components/atoms";
   import { TitledDiv } from "$lib/components/molecules";
   import { clientKeyStore } from "$lib/stores";
   import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
diff --git a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte b/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
index 8242045..96e0082 100644
--- a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { BottomSheet, Button, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
+  import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "$lib/components/atoms";
 
   interface Props {
     onRetryClick: () => void;
diff --git a/src/routes/(fullscreen)/key/generate/+page.svelte b/src/routes/(fullscreen)/key/generate/+page.svelte
index d62c95e..03d6c6d 100644
--- a/src/routes/(fullscreen)/key/generate/+page.svelte
+++ b/src/routes/(fullscreen)/key/generate/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
+  import { BottomDiv, Button, FullscreenDiv, TextButton } from "$lib/components/atoms";
   import { TitledDiv } from "$lib/components/molecules";
   import { gotoStateful } from "$lib/hooks";
   import { clientKeyStore } from "$lib/stores";

From b6edc2a8bcbeeafe5a0a2385a0348cd4da875a07 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Tue, 28 Jan 2025 22:41:35 +0900
Subject: [PATCH 13/16] =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83?=
 =?UTF-8?q?=EC=97=90=20=ED=95=84=EC=88=98=EC=A0=81=EC=9D=B8=20Snippet?=
 =?UTF-8?q?=EC=9D=80=20=EB=B0=98=EB=93=9C=EC=8B=9C=20=EC=A0=84=EB=8B=AC?=
 =?UTF-8?q?=ED=95=B4=EC=95=BC=ED=95=98=EB=8F=84=EB=A1=9D=20Props=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/atoms/BottomSheet.svelte          |  4 ++--
 src/lib/components/atoms/Modal.svelte                |  4 ++--
 .../atoms/buttons/ActionEntryButton.svelte           |  6 +++---
 src/lib/components/atoms/buttons/Button.svelte       |  4 ++--
 src/lib/components/atoms/buttons/EntryButton.svelte  | 12 +++++-------
 src/lib/components/atoms/buttons/TextButton.svelte   |  4 ++--
 src/lib/components/atoms/divs/AdaptiveDiv.svelte     |  4 ++--
 src/lib/components/atoms/divs/BottomDiv.svelte       |  4 ++--
 src/lib/components/atoms/divs/FullscreenDiv.svelte   |  2 +-
 src/lib/components/atoms/inputs/CheckBox.svelte      |  6 ++----
 src/lib/components/molecules/ActionModal.svelte      |  4 ++--
 src/lib/components/molecules/IconEntryButton.svelte  |  4 ++--
 src/lib/components/molecules/TitledDiv.svelte        |  4 ++--
 src/lib/components/molecules/TopBar.svelte           |  2 +-
 src/lib/components/molecules/labels/IconLabel.svelte |  4 ++--
 .../components/molecules/labels/TitleLabel.svelte    |  4 ++--
 src/routes/(main)/menu/MenuEntryButton.svelte        |  2 +-
 17 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/src/lib/components/atoms/BottomSheet.svelte b/src/lib/components/atoms/BottomSheet.svelte
index f23acae..ac6042c 100644
--- a/src/lib/components/atoms/BottomSheet.svelte
+++ b/src/lib/components/atoms/BottomSheet.svelte
@@ -5,7 +5,7 @@
   import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     isOpen: boolean;
     onclose?: () => void;
@@ -33,7 +33,7 @@
           transition:fly|global={{ y: 100, duration: 200 }}
         >
           <div class={["flex-grow overflow-y-auto", className]}>
-            {@render children?.()}
+            {@render children()}
           </div>
         </div>
       </AdaptiveDiv>
diff --git a/src/lib/components/atoms/Modal.svelte b/src/lib/components/atoms/Modal.svelte
index c949ec9..0864477 100644
--- a/src/lib/components/atoms/Modal.svelte
+++ b/src/lib/components/atoms/Modal.svelte
@@ -5,7 +5,7 @@
   import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     isOpen: boolean;
     onclose?: () => void;
@@ -25,7 +25,7 @@
     <AdaptiveDiv class="h-full">
       <div class="flex h-full items-center justify-center px-4">
         <div onclick={(e) => e.stopPropagation()} class={["rounded-2xl bg-white p-4", className]}>
-          {@render children?.()}
+          {@render children()}
         </div>
       </div>
     </AdaptiveDiv>
diff --git a/src/lib/components/atoms/buttons/ActionEntryButton.svelte b/src/lib/components/atoms/buttons/ActionEntryButton.svelte
index a52cd1d..c29fd7f 100644
--- a/src/lib/components/atoms/buttons/ActionEntryButton.svelte
+++ b/src/lib/components/atoms/buttons/ActionEntryButton.svelte
@@ -5,7 +5,7 @@
   interface Props {
     actionButtonClass?: ClassValue;
     actionButtonIcon?: Component<SvelteHTMLElements["svg"]>;
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     onActionButtonClick?: () => void;
     onclick?: () => void;
@@ -28,9 +28,9 @@
   onclick={onclick && (() => setTimeout(onclick, 100))}
   class={["rounded-xl", className]}
 >
-  <div id="children" class="flex h-full items-center justify-between gap-x-4 p-2 transition">
+  <div id="children" class="flex h-full items-center gap-x-4 p-2 transition">
     <div class="flex-grow overflow-x-hidden">
-      {@render children?.()}
+      {@render children()}
     </div>
     {#if ActionButtonIcon}
       <button
diff --git a/src/lib/components/atoms/buttons/Button.svelte b/src/lib/components/atoms/buttons/Button.svelte
index 2ec8d98..7b5fb1e 100644
--- a/src/lib/components/atoms/buttons/Button.svelte
+++ b/src/lib/components/atoms/buttons/Button.svelte
@@ -3,7 +3,7 @@
   import type { ClassValue } from "svelte/elements";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     color?: "primary" | "gray";
     onclick?: () => void;
@@ -34,5 +34,5 @@
     className,
   ]}
 >
-  {@render children?.()}
+  {@render children()}
 </button>
diff --git a/src/lib/components/atoms/buttons/EntryButton.svelte b/src/lib/components/atoms/buttons/EntryButton.svelte
index 63926cc..dc2534e 100644
--- a/src/lib/components/atoms/buttons/EntryButton.svelte
+++ b/src/lib/components/atoms/buttons/EntryButton.svelte
@@ -5,7 +5,7 @@
   import IconChevronRight from "~icons/material-symbols/chevron-right";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     onclick?: () => void;
   }
@@ -17,12 +17,10 @@
   onclick={onclick && (() => setTimeout(onclick, 100))}
   class={["rounded-xl active:bg-gray-100", className]}
 >
-  <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">
-      <IconChevronRight class="text-xl text-gray-800" />
+  <div class="flex h-full items-center gap-x-4 p-2 transition active:scale-95">
+    <div class="flex-grow">
+      {@render children()}
     </div>
+    <IconChevronRight class="flex-shrink-0 text-xl text-gray-800" />
   </div>
 </button>
diff --git a/src/lib/components/atoms/buttons/TextButton.svelte b/src/lib/components/atoms/buttons/TextButton.svelte
index 10f9e0c..84603e2 100644
--- a/src/lib/components/atoms/buttons/TextButton.svelte
+++ b/src/lib/components/atoms/buttons/TextButton.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from "svelte";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     onclick?: () => void;
   }
 
@@ -14,6 +14,6 @@
   class="text-sm font-medium text-gray-800 underline underline-offset-2 active:rounded-xl active:bg-gray-100"
 >
   <div class="h-full p-1 transition active:scale-95">
-    {@render children?.()}
+    {@render children()}
   </div>
 </button>
diff --git a/src/lib/components/atoms/divs/AdaptiveDiv.svelte b/src/lib/components/atoms/divs/AdaptiveDiv.svelte
index c723a55..23fa00b 100644
--- a/src/lib/components/atoms/divs/AdaptiveDiv.svelte
+++ b/src/lib/components/atoms/divs/AdaptiveDiv.svelte
@@ -3,7 +3,7 @@
   import type { ClassValue } from "svelte/elements";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
   }
 
@@ -11,5 +11,5 @@
 </script>
 
 <div class={["mx-auto max-w-screen-md", className]}>
-  {@render children?.()}
+  {@render children()}
 </div>
diff --git a/src/lib/components/atoms/divs/BottomDiv.svelte b/src/lib/components/atoms/divs/BottomDiv.svelte
index 5db0dd0..e28765b 100644
--- a/src/lib/components/atoms/divs/BottomDiv.svelte
+++ b/src/lib/components/atoms/divs/BottomDiv.svelte
@@ -3,7 +3,7 @@
   import type { ClassValue } from "svelte/elements";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
   }
 
@@ -11,5 +11,5 @@
 </script>
 
 <div class={["sticky bottom-0 bg-white pb-4", className]}>
-  {@render children?.()}
+  {@render children()}
 </div>
diff --git a/src/lib/components/atoms/divs/FullscreenDiv.svelte b/src/lib/components/atoms/divs/FullscreenDiv.svelte
index cdea8cc..c90e02c 100644
--- a/src/lib/components/atoms/divs/FullscreenDiv.svelte
+++ b/src/lib/components/atoms/divs/FullscreenDiv.svelte
@@ -3,5 +3,5 @@
 </script>
 
 <div class="flex flex-grow flex-col justify-between px-4">
-  {@render children?.()}
+  {@render children()}
 </div>
diff --git a/src/lib/components/atoms/inputs/CheckBox.svelte b/src/lib/components/atoms/inputs/CheckBox.svelte
index 753892f..fe2899b 100644
--- a/src/lib/components/atoms/inputs/CheckBox.svelte
+++ b/src/lib/components/atoms/inputs/CheckBox.svelte
@@ -6,7 +6,7 @@
 
   interface Props {
     checked?: boolean;
-    children?: Snippet;
+    children: Snippet;
   }
 
   let { checked = $bindable(false), children }: Props = $props();
@@ -14,9 +14,7 @@
 
 <label class="flex items-center gap-x-1">
   <input bind:checked type="checkbox" class="hidden" />
-  <div>
-    {@render children?.()}
-  </div>
+  {@render children()}
   {#if checked}
     <IconCheckCircle class="text-primary-600" />
   {:else}
diff --git a/src/lib/components/molecules/ActionModal.svelte b/src/lib/components/molecules/ActionModal.svelte
index 058d572..a351403 100644
--- a/src/lib/components/molecules/ActionModal.svelte
+++ b/src/lib/components/molecules/ActionModal.svelte
@@ -8,7 +8,7 @@
 
   interface Props {
     cancelText?: string;
-    children?: Snippet;
+    children: Snippet;
     confirmText: string;
     isOpen: boolean;
     onbeforeclose?: () => void;
@@ -41,7 +41,7 @@
 <Modal bind:isOpen onclose={closeModal} class="space-y-4">
   <div class="flex flex-col gap-y-2 break-keep">
     <p class="text-xl font-bold">{title}</p>
-    {@render children?.()}
+    {@render children()}
   </div>
   <div class="flex gap-x-2">
     <Button color="gray" onclick={closeModal} class="flex-1">{cancelText}</Button>
diff --git a/src/lib/components/molecules/IconEntryButton.svelte b/src/lib/components/molecules/IconEntryButton.svelte
index cb9ec72..4b6ad47 100644
--- a/src/lib/components/molecules/IconEntryButton.svelte
+++ b/src/lib/components/molecules/IconEntryButton.svelte
@@ -5,7 +5,7 @@
   import { IconLabel } from "$lib/components/molecules";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     icon: Component<SvelteHTMLElements["svg"]>;
     iconClass?: ClassValue;
@@ -25,6 +25,6 @@
 
 <EntryButton {onclick} class={className}>
   <IconLabel {icon} class="h-full" iconClass={iconClassName} textClass={textClassName}>
-    {@render children?.()}
+    {@render children()}
   </IconLabel>
 </EntryButton>
diff --git a/src/lib/components/molecules/TitledDiv.svelte b/src/lib/components/molecules/TitledDiv.svelte
index 2240a89..e7ddc25 100644
--- a/src/lib/components/molecules/TitledDiv.svelte
+++ b/src/lib/components/molecules/TitledDiv.svelte
@@ -9,7 +9,7 @@
     class?: ClassValue;
     description?: Snippet;
     icon?: Component<SvelteHTMLElements["svg"]>;
-    title?: Snippet;
+    title: Snippet;
     titleClass?: ClassValue;
   }
 
@@ -27,7 +27,7 @@
 <div class={["space-y-4 py-4", className]}>
   <div class="space-y-2 break-keep">
     <TitleLabel {icon} textClass={titleClassName}>
-      {@render title?.()}
+      {@render title()}
     </TitleLabel>
     {#if description}
       <p>
diff --git a/src/lib/components/molecules/TopBar.svelte b/src/lib/components/molecules/TopBar.svelte
index e748b6c..cf7f8b8 100644
--- a/src/lib/components/molecules/TopBar.svelte
+++ b/src/lib/components/molecules/TopBar.svelte
@@ -31,7 +31,7 @@
   {/if}
   <div class="w-[2.3rem] flex-shrink-0">
     {#if children}
-      {@render children?.()}
+      {@render children()}
     {/if}
   </div>
 </div>
diff --git a/src/lib/components/molecules/labels/IconLabel.svelte b/src/lib/components/molecules/labels/IconLabel.svelte
index 7e100c4..a173b68 100644
--- a/src/lib/components/molecules/labels/IconLabel.svelte
+++ b/src/lib/components/molecules/labels/IconLabel.svelte
@@ -3,7 +3,7 @@
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     icon: Component<SvelteHTMLElements["svg"]>;
     iconClass?: ClassValue;
@@ -27,7 +27,7 @@
   </div>
   <div class="flex flex-grow flex-col overflow-x-hidden text-left">
     <p class={["truncate font-medium", textClassName]}>
-      {@render children?.()}
+      {@render children()}
     </p>
     {#if subtext}
       <p class="truncate text-xs text-gray-800">
diff --git a/src/lib/components/molecules/labels/TitleLabel.svelte b/src/lib/components/molecules/labels/TitleLabel.svelte
index d2ecf72..ffb51c3 100644
--- a/src/lib/components/molecules/labels/TitleLabel.svelte
+++ b/src/lib/components/molecules/labels/TitleLabel.svelte
@@ -3,7 +3,7 @@
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     icon?: Component<SvelteHTMLElements["svg"]>;
     textClass?: ClassValue;
@@ -19,6 +19,6 @@
     {/if}
   </div>
   <p class={["text-3xl font-bold", textClassName]}>
-    {@render children?.()}
+    {@render children()}
   </p>
 </div>
diff --git a/src/routes/(main)/menu/MenuEntryButton.svelte b/src/routes/(main)/menu/MenuEntryButton.svelte
index e96fd2e..84341e6 100644
--- a/src/routes/(main)/menu/MenuEntryButton.svelte
+++ b/src/routes/(main)/menu/MenuEntryButton.svelte
@@ -19,5 +19,5 @@
   class="w-full"
   iconClass={["rounded-lg bg-gray-200 p-1 !text-base", iconColor]}
 >
-  {@render children?.()}
+  {@render children()}
 </IconEntryButton>

From d2aca276ac666ad3a79076f8f5debc9d179c933e Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Tue, 28 Jan 2025 22:53:50 +0900
Subject: [PATCH 14/16] =?UTF-8?q?FloatingButton=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../atoms/buttons/FloatingButton.svelte       | 29 +++++++++----------
 .../(fullscreen)/client/pending/+page.svelte  |  2 +-
 .../(fullscreen)/file/[id]/+page.svelte       |  2 +-
 .../(fullscreen)/file/downloads/+page.svelte  |  2 +-
 .../(fullscreen)/file/uploads/+page.svelte    |  2 +-
 .../(main)/directory/[[id]]/+page.svelte      |  1 +
 6 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/atoms/buttons/FloatingButton.svelte b/src/lib/components/atoms/buttons/FloatingButton.svelte
index 924b086..67956f6 100644
--- a/src/lib/components/atoms/buttons/FloatingButton.svelte
+++ b/src/lib/components/atoms/buttons/FloatingButton.svelte
@@ -5,26 +5,23 @@
 
   interface Props {
     icon: Component<SvelteHTMLElements["svg"]>;
-    offset?: ClassValue;
+    offset: ClassValue;
     onclick?: () => void;
   }
 
-  let { icon: Icon, offset = "bottom-20", onclick }: Props = $props();
+  let { icon: Icon, offset, onclick }: Props = $props();
 </script>
 
 <div class="pointer-events-none fixed inset-0">
-  <div class={["absolute w-full", offset]}>
-    <AdaptiveDiv>
-      <div class="relative">
-        <div class="absolute bottom-4 right-4">
-          <button
-            onclick={onclick && (() => setTimeout(onclick, 100))}
-            class="pointer-events-auto flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400"
-          >
-            <Icon class="text-xl" />
-          </button>
-        </div>
-      </div>
-    </AdaptiveDiv>
-  </div>
+  <AdaptiveDiv class="relative h-full">
+    <button
+      onclick={onclick && (() => setTimeout(onclick, 100))}
+      class={[
+        "pointer-events-auto absolute bottom-4 right-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400",
+        offset,
+      ]}
+    >
+      <Icon class="text-xl" />
+    </button>
+  </AdaptiveDiv>
 </div>
diff --git a/src/routes/(fullscreen)/client/pending/+page.svelte b/src/routes/(fullscreen)/client/pending/+page.svelte
index 389b9ce..4566602 100644
--- a/src/routes/(fullscreen)/client/pending/+page.svelte
+++ b/src/routes/(fullscreen)/client/pending/+page.svelte
@@ -10,7 +10,7 @@
 
   let { data } = $props();
 
-  const fingerprint = $derived(
+  let fingerprint = $derived(
     $clientKeyStore
       ? generatePublicKeyFingerprint($clientKeyStore.encryptKey, $clientKeyStore.verifyKey)
       : undefined,
diff --git a/src/routes/(fullscreen)/file/[id]/+page.svelte b/src/routes/(fullscreen)/file/[id]/+page.svelte
index 2ab7e32..325122f 100644
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -30,7 +30,7 @@
 
   let isAddToCategoryBottomSheetOpen = $state(false);
 
-  const downloadStatus = $derived(
+  let downloadStatus = $derived(
     $fileDownloadStatusStore.find((statusStore) => {
       const { id, status } = get(statusStore);
       return id === data.id && isFileDownloading(status);
diff --git a/src/routes/(fullscreen)/file/downloads/+page.svelte b/src/routes/(fullscreen)/file/downloads/+page.svelte
index 4ce2e9c..e1bad0e 100644
--- a/src/routes/(fullscreen)/file/downloads/+page.svelte
+++ b/src/routes/(fullscreen)/file/downloads/+page.svelte
@@ -5,7 +5,7 @@
   import { fileDownloadStatusStore, isFileDownloading } from "$lib/stores";
   import File from "./File.svelte";
 
-  const downloadingFiles = $derived(
+  let downloadingFiles = $derived(
     $fileDownloadStatusStore.filter((status) => isFileDownloading(get(status).status)),
   );
 
diff --git a/src/routes/(fullscreen)/file/uploads/+page.svelte b/src/routes/(fullscreen)/file/uploads/+page.svelte
index bc18705..d456322 100644
--- a/src/routes/(fullscreen)/file/uploads/+page.svelte
+++ b/src/routes/(fullscreen)/file/uploads/+page.svelte
@@ -5,7 +5,7 @@
   import { fileUploadStatusStore, isFileUploading } from "$lib/stores";
   import File from "./File.svelte";
 
-  const uploadingFiles = $derived(
+  let uploadingFiles = $derived(
     $fileUploadStatusStore.filter((status) => isFileUploading(get(status).status)),
   );
 
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index 4e7d8dd..592f6be 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -110,6 +110,7 @@
 </div>
 
 <FloatingButton
+  offset="bottom-24 right-4"
   icon={IconAdd}
   onclick={() => {
     isEntryCreateBottomSheetOpen = true;

From 183ce583b0c40899b5ef7473945a12f37618d001 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Tue, 28 Jan 2025 22:59:22 +0900
Subject: [PATCH 15/16] =?UTF-8?q?FloatingActionButton=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=202?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/atoms/buttons/FloatingButton.svelte | 10 +++++-----
 src/routes/(main)/directory/[[id]]/+page.svelte        |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/atoms/buttons/FloatingButton.svelte b/src/lib/components/atoms/buttons/FloatingButton.svelte
index 67956f6..10dd4f4 100644
--- a/src/lib/components/atoms/buttons/FloatingButton.svelte
+++ b/src/lib/components/atoms/buttons/FloatingButton.svelte
@@ -4,12 +4,12 @@
   import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
+    class: ClassValue;
     icon: Component<SvelteHTMLElements["svg"]>;
-    offset: ClassValue;
     onclick?: () => void;
   }
 
-  let { icon: Icon, offset, onclick }: Props = $props();
+  let { class: className, icon: Icon, onclick }: Props = $props();
 </script>
 
 <div class="pointer-events-none fixed inset-0">
@@ -17,11 +17,11 @@
     <button
       onclick={onclick && (() => setTimeout(onclick, 100))}
       class={[
-        "pointer-events-auto absolute bottom-4 right-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400",
-        offset,
+        "pointer-events-auto absolute flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 text-xl shadow-lg transition active:scale-95 active:bg-gray-400",
+        className,
       ]}
     >
-      <Icon class="text-xl" />
+      <Icon />
     </button>
   </AdaptiveDiv>
 </div>
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index 592f6be..98572b3 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -110,11 +110,11 @@
 </div>
 
 <FloatingButton
-  offset="bottom-24 right-4"
   icon={IconAdd}
   onclick={() => {
     isEntryCreateBottomSheetOpen = true;
   }}
+  class="bottom-24 right-4"
 />
 <EntryCreateBottomSheet
   bind:isOpen={isEntryCreateBottomSheetOpen}

From 43f0245ff9d5959e18114a96829fe122e9b0bcbc Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Tue, 28 Jan 2025 23:34:21 +0900
Subject: [PATCH 16/16] =?UTF-8?q?=EC=82=AC=EC=86=8C=ED=95=9C=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../organisms/modals/TextInputModal.svelte    |  2 +-
 src/routes/(main)/+layout.svelte              |  8 ++----
 src/routes/(main)/BottomBar.svelte            | 28 +++++++++----------
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/organisms/modals/TextInputModal.svelte b/src/lib/components/organisms/modals/TextInputModal.svelte
index 9131a11..e1fd2c4 100644
--- a/src/lib/components/organisms/modals/TextInputModal.svelte
+++ b/src/lib/components/organisms/modals/TextInputModal.svelte
@@ -22,7 +22,7 @@
     title,
   }: Props = $props();
 
-  let value = $state(defaultValue);
+  let value = $state("");
 
   $effect.pre(() => {
     if (isOpen) {
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
index e58d5e1..50c9af4 100644
--- a/src/routes/(main)/+layout.svelte
+++ b/src/routes/(main)/+layout.svelte
@@ -6,10 +6,8 @@
 </script>
 
 <div class="flex h-screen flex-col justify-between">
-  <div class="flex-grow">
-    <AdaptiveDiv class="h-full">
-      {@render children()}
-    </AdaptiveDiv>
-  </div>
+  <AdaptiveDiv class="w-full flex-grow">
+    {@render children()}
+  </AdaptiveDiv>
   <BottomBar />
 </div>
diff --git a/src/routes/(main)/BottomBar.svelte b/src/routes/(main)/BottomBar.svelte
index d3e7a74..51d5d2d 100644
--- a/src/routes/(main)/BottomBar.svelte
+++ b/src/routes/(main)/BottomBar.svelte
@@ -19,20 +19,18 @@
 </script>
 
 <div class="sticky bottom-0 h-20 flex-shrink-0 rounded-t-2xl border-t border-gray-300 bg-white">
-  <AdaptiveDiv>
-    <div class="flex justify-evenly px-4 py-2">
-      {#each pages as { path, label, icon: Icon }}
-        {@const textColor = !page.url.pathname.startsWith(path) ? "text-gray-600" : ""}
-        <button
-          onclick={() => goto(path)}
-          class="w-16 active:rounded-xl active:bg-gray-100 {textColor}"
-        >
-          <div class="flex flex-col items-center gap-y-1 p-1 transition active:scale-95">
-            <Icon class="text-xl" />
-            <p class="text-sm">{label}</p>
-          </div>
-        </button>
-      {/each}
-    </div>
+  <AdaptiveDiv class="flex justify-evenly px-4 py-2">
+    {#each pages as { path, label, icon: Icon }}
+      {@const textColor = !page.url.pathname.startsWith(path) ? "text-gray-600" : ""}
+      <button
+        onclick={() => goto(path)}
+        class="w-16 active:rounded-xl active:bg-gray-100 {textColor}"
+      >
+        <div class="flex flex-col items-center gap-y-1 p-1 transition active:scale-95">
+          <Icon class="text-xl" />
+          <p class="text-sm">{label}</p>
+        </div>
+      </button>
+    {/each}
   </AdaptiveDiv>
 </div>