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] =?UTF-8?q?Modal,=20AdaptiveDiv,=20BottomDiv=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20molecules=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

---
 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) => {