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

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