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

2025-12-16 06:58:46 +00:00 · 2025-01-24 21:24:59 +09:00
parent 1c09d93b41
commit fea9cd729c
40 changed files with 279 additions and 246 deletions
--- 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>
--- 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("");
--- 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>
--- 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;
+  }}
+/>
--- 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>
--- 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>
--- 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;
--- 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>
--- 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>
--- 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";
--- 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;
    }
--- 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 {
--- a/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte
+++ b/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>
--- 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
--- 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;
--- 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 {
--- 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;
--- a/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
+++ b/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>
--- 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) => {