Modal, AdaptiveDiv, BottomDiv 컴포넌트를 molecules 디렉터리로 이동 및 리팩토링

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;

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>

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

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>

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>

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

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

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>

src/lib/components/divs/AdaptiveDiv.svelte

@@ -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>

src/lib/components/divs/BottomDiv.svelte

@@ -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>

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

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

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>

src/lib/components/molecules/index.ts

@@ -0,0 +1,2 @@
+export * from "./ActionModal.svelte";
+export { default as ActionModal } from "./ActionModal.svelte";

src/lib/components/organisms/index.ts

@@ -0,0 +1 @@
+export * from "./modals";

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}
+/>

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}
+/>

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>

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

src/lib/organisms/CreateCategoryModal.svelte

@@ -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>

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

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>

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

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>

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;
+  }}
+/>

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>

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>

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;

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>

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>

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

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

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 {

src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte

@@ -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>

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

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;

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 {

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;

src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte

@@ -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>

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