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

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>