카테고리 이름 변경 및 삭제, 카테고리에서 파일 삭제 구현

2025-12-17 23:48:45 +00:00 · 2025-01-22 15:39:48 +09:00
parent 4c0d668cc1
commit 368868910d
20 changed files with 507 additions and 54 deletions
--- a/src/routes/(main)/category/[[id]]/+page.svelte
+++ b/src/routes/(main)/category/[[id]]/+page.svelte
@@ -3,16 +3,28 @@
  import { goto } from "$app/navigation";
  import { TopBar } from "$lib/components";
  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 CreateCategoryModal from "./CreateCategoryModal.svelte";
-  import { requestCategoryCreation } from "./service";
+  import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
+  import DeleteCategoryModal from "./DeleteCategoryModal.svelte";
+  import RenameCategoryModal from "./RenameCategoryModal.svelte";
+  import {
+    requestCategoryCreation,
+    requestCategoryRename,
+    requestCategoryDeletion,
+  } from "./service";

  let { data } = $props();

  let info: Writable<CategoryInfo | null> | undefined = $state();
+  let selectedSubCategory: SelectedCategory | undefined = $state();

  let isCreateCategoryModalOpen = $state(false);
+  let isSubCategoryMenuBottomSheetOpen = $state(false);
+  let isRenameCategoryModalOpen = $state(false);
+  let isDeleteCategoryModalOpen = $state(false);

  const createCategory = async (name: string) => {
    await requestCategoryCreation(name, data.id, $masterKeyStore?.get(1)!);
@@ -39,6 +51,10 @@
        info={$info}
        onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
        onSubCategoryCreateClick={() => (isCreateCategoryModalOpen = true)}
+        onSubCategoryMenuClick={(subCategory) => {
+          selectedSubCategory = subCategory;
+          isSubCategoryMenuBottomSheetOpen = true;
+        }}
        onFileClick={({ id }) => goto(`/file/${id}`)}
      />
    {/if}
@@ -46,3 +62,40 @@
 </div>

 <CreateCategoryModal bind:isOpen={isCreateCategoryModalOpen} onCreateClick={createCategory} />
+
+<CategoryMenuBottomSheet
+  bind:isOpen={isSubCategoryMenuBottomSheetOpen}
+  bind:selectedCategory={selectedSubCategory}
+  onRenameClick={() => {
+    isSubCategoryMenuBottomSheetOpen = false;
+    isRenameCategoryModalOpen = true;
+  }}
+  onDeleteClick={() => {
+    isSubCategoryMenuBottomSheetOpen = false;
+    isDeleteCategoryModalOpen = true;
+  }}
+/>
+<RenameCategoryModal
+  bind:isOpen={isRenameCategoryModalOpen}
+  bind:selectedCategory={selectedSubCategory}
+  onRenameClick={async (newName) => {
+    if (selectedSubCategory) {
+      await requestCategoryRename(selectedSubCategory, newName);
+      info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>
+<DeleteCategoryModal
+  bind:isOpen={isDeleteCategoryModalOpen}
+  bind:selectedCategory={selectedSubCategory}
+  onDeleteClick={async () => {
+    if (selectedSubCategory) {
+      await requestCategoryDeletion(selectedSubCategory);
+      info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>
--- a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
+++ b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { BottomSheet } from "$lib/components";
+  import { EntryButton } from "$lib/components/buttons";
+  import type { SelectedCategory } from "$lib/molecules/Categories";
+
+  import IconCategory from "~icons/material-symbols/category";
+  import IconEdit from "~icons/material-symbols/edit";
+  import IconDelete from "~icons/material-symbols/delete";
+
+  interface Props {
+    onRenameClick: () => void;
+    onDeleteClick: () => void;
+    isOpen: boolean;
+    selectedCategory: SelectedCategory | undefined;
+  }
+
+  let {
+    onRenameClick,
+    onDeleteClick,
+    isOpen = $bindable(),
+    selectedCategory = $bindable(),
+  }: Props = $props();
+
+  const closeBottomSheet = () => {
+    isOpen = false;
+    selectedCategory = undefined;
+  };
+</script>
+
+<BottomSheet bind:isOpen onclose={closeBottomSheet}>
+  <div class="w-full py-4">
+    {#if selectedCategory}
+      {@const { name } = selectedCategory}
+      <div class="flex h-12 items-center gap-x-4 p-2">
+        <div class="flex-shrink-0 text-lg">
+          <IconCategory />
+        </div>
+        <p title={name} class="flex-grow truncate font-semibold">
+          {name}
+        </p>
+      </div>
+      <div class="my-2 h-px w-full bg-gray-200"></div>
+    {/if}
+    <EntryButton onclick={onRenameClick}>
+      <div class="flex h-8 items-center gap-x-4">
+        <IconEdit class="text-lg" />
+        <p class="font-medium">이름 바꾸기</p>
+      </div>
+    </EntryButton>
+    <EntryButton onclick={onDeleteClick}>
+      <div class="flex h-8 items-center gap-x-4 text-red-500">
+        <IconDelete class="text-lg" />
+        <p class="font-medium">삭제하기</p>
+      </div>
+    </EntryButton>
+  </div>
+</BottomSheet>
--- a/src/routes/(main)/category/[[id]]/CreateCategoryModal.svelte
+++ b/src/routes/(main)/category/[[id]]/CreateCategoryModal.svelte
@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
-  import { TextInput } from "$lib/components/inputs";
-
-  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-2">
-    <Button color="gray" onclick={closeModal}>닫기</Button>
-    <Button onclick={() => onCreateClick(name)}>만들기</Button>
-  </div>
-</Modal>
--- a/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
+++ b/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { Modal } from "$lib/components";
+  import { Button } from "$lib/components/buttons";
+  import type { SelectedCategory } from "$lib/molecules/Categories";
+
+  interface Props {
+    onDeleteClick: () => Promise<boolean>;
+    isOpen: boolean;
+    selectedCategory: SelectedCategory | undefined;
+  }
+
+  let { onDeleteClick, isOpen = $bindable(), selectedCategory = $bindable() }: Props = $props();
+
+  const closeModal = () => {
+    isOpen = false;
+    selectedCategory = undefined;
+  };
+
+  const deleteEntry = async () => {
+    // TODO: Validation
+
+    if (await onDeleteClick()) {
+      closeModal();
+    }
+  };
+</script>
+
+<Modal bind:isOpen onclose={closeModal}>
+  {#if selectedCategory}
+    {@const { name } = selectedCategory}
+    {@const nameShort = name.length > 20 ? `${name.slice(0, 20)}...` : name}
+    <div class="space-y-4">
+      <div class="space-y-2 break-keep">
+        <p class="text-xl font-bold">
+          '{nameShort}' 카테고리를 삭제할까요?
+        </p>
+        <p>
+          모든 하위 카테고리도 함께 삭제돼요. <br />
+          하지만 카테고리에 추가된 파일들은 삭제되지 않아요.
+        </p>
+      </div>
+      <div class="flex gap-2">
+        <Button
+          color="gray"
+          onclick={() => {
+            isOpen = false;
+          }}
+        >
+          아니요
+        </Button>
+        <Button onclick={deleteEntry}>삭제할게요</Button>
+      </div>
+    </div>
+  {/if}
+</Modal>
--- a/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte
+++ b/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { Modal } from "$lib/components";
+  import { Button } from "$lib/components/buttons";
+  import { TextInput } from "$lib/components/inputs";
+  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 renameEntry = 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-2">
+    <Button color="gray" onclick={closeModal}>닫기</Button>
+    <Button onclick={renameEntry}>바꾸기</Button>
+  </div>
+</Modal>
--- a/src/routes/(main)/category/[[id]]/service.ts
+++ b/src/routes/(main)/category/[[id]]/service.ts
@@ -1,21 +1,22 @@
 import { callPostApi } from "$lib/hooks";
-import { generateDataKey, wrapDataKey, encryptString } from "$lib/modules/crypto";
-import type { CategoryCreateRequest } from "$lib/server/schemas";
-import type { MasterKey } from "$lib/stores";
+import { encryptString } from "$lib/modules/crypto";
+import type { SelectedCategory } from "$lib/molecules/Categories";
+import type { CategoryRenameRequest } from "$lib/server/schemas";

-export const requestCategoryCreation = async (
-  name: string,
-  parentId: "root" | number,
-  masterKey: MasterKey,
-) => {
-  const { dataKey, dataKeyVersion } = await generateDataKey();
-  const nameEncrypted = await encryptString(name, dataKey);
-  await callPostApi<CategoryCreateRequest>("/api/category/create", {
-    parent: parentId,
-    mekVersion: masterKey.version,
-    dek: await wrapDataKey(dataKey, masterKey.key),
-    dekVersion: dataKeyVersion.toISOString(),
-    name: nameEncrypted.ciphertext,
-    nameIv: nameEncrypted.iv,
+export { requestCategoryCreation } from "$lib/services/category";
+
+export const requestCategoryRename = async (category: SelectedCategory, newName: string) => {
+  const newNameEncrypted = await encryptString(newName, category.dataKey);
+
+  const res = await callPostApi<CategoryRenameRequest>(`/api/category/${category.id}/rename`, {
+    dekVersion: category.dataKeyVersion.toISOString(),
+    name: newNameEncrypted.ciphertext,
+    nameIv: newNameEncrypted.iv,
  });
+  return res.ok;
+};
+
+export const requestCategoryDeletion = async (category: SelectedCategory) => {
+  const res = await callPostApi(`/api/category/${category.id}/delete`);
+  return res.ok;
 };