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

src/routes/(fullscreen)/file/[id]/+page.svelte

@@ -15,8 +15,13 @@
   import { fileDownloadStatusStore, isFileDownloading, masterKeyStore } from "$lib/stores";
   import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
   import DownloadStatus from "./DownloadStatus.svelte";
-  import { requestFileDownload, requestFileAdditionToCategory } from "./service";
+  import {
+    requestFileDownload,
+    requestFileAdditionToCategory,
+    requestFileRemovalFromCategory,
+  } from "./service";
 
+  import IconClose from "~icons/material-symbols/close";
   import IconAddCircle from "~icons/material-symbols/add-circle";
 
   let { data } = $props();
@@ -64,6 +69,11 @@
     info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
   };
 
+  const removeFromCategory = async (categoryId: number) => {
+    await requestFileRemovalFromCategory(data.id, categoryId);
+    info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+  };
+
   $effect(() => {
     info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!);
     isDownloadRequested = false;
@@ -135,7 +145,12 @@
     <div class="space-y-2">
       <p class="text-lg font-bold">카테고리</p>
       <div class="space-y-1">
-        <Categories {categories} onCategoryClick={({ id }) => goto(`/category/${id}`)} />
+        <Categories
+          {categories}
+          categoryMenuIcon={IconClose}
+          onCategoryClick={({ id }) => goto(`/category/${id}`)}
+          onCategoryMenuClick={({ id }) => removeFromCategory(id)}
+        />
         <EntryButton onclick={() => (isAddToCategoryBottomSheetOpen = true)}>
           <div class="flex h-8 items-center gap-x-4">
             <IconAddCircle class="text-lg text-gray-600" />

src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   import type { Writable } from "svelte/store";
   import { BottomSheet } from "$lib/components";
   import { Button } from "$lib/components/buttons";
   import { BottomDiv } from "$lib/components/divs";
   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";
 
   interface Props {
     onAddToCategoryClick: (categoryId: number) => void;
@@ -17,8 +18,20 @@
 
   let category: Writable<CategoryInfo | null> | undefined = $state();
 
-  onMount(() => {
-    category = getCategoryInfo("root", $masterKeyStore?.get(1)?.key!);
+  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
+  };
+
+  $effect(() => {
+    if (isOpen) {
+      category = getCategoryInfo("root", $masterKeyStore?.get(1)?.key!);
+    }
   });
 </script>
 
@@ -30,6 +43,7 @@
         info={$category}
         onSubCategoryClick={({ id }) =>
           (category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
+        onSubCategoryCreateClick={() => (isCreateCategoryModalOpen = true)}
         subCategoryCreatePosition="top"
       />
       {#if $category.id !== "root"}
@@ -40,3 +54,5 @@
     {/if}
   </div>
 </BottomSheet>
+
+<CreateCategoryModal bind:isOpen={isCreateCategoryModalOpen} onCreateClick={createCategory} />

src/routes/(fullscreen)/file/[id]/service.ts

@@ -1,6 +1,8 @@
 import { callPostApi } from "$lib/hooks";
 import { getFileCache, storeFileCache, downloadFile } from "$lib/modules/file";
-import type { CategoryFileAddRequest } from "$lib/server/schemas";
+import type { CategoryFileAddRequest, CategoryFileRemoveRequest } from "$lib/server/schemas";
+
+export { requestCategoryCreation } from "$lib/services/category";
 
 export const requestFileDownload = async (
   fileId: number,
@@ -21,3 +23,11 @@ export const requestFileAdditionToCategory = async (fileId: number, categoryId:
   });
   return res.ok;
 };
+
+export const requestFileRemovalFromCategory = async (fileId: number, categoryId: number) => {
+  const res = await callPostApi<CategoryFileRemoveRequest>(
+    `/api/category/${categoryId}/file/remove`,
+    { file: fileId },
+  );
+  return res.ok;
+};

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

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>

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>

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>

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>

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

src/routes/api/category/[id]/delete/+server.ts

@@ -0,0 +1,20 @@
+import { error, text } from "@sveltejs/kit";
+import { z } from "zod";
+import { authorize } from "$lib/server/modules/auth";
+import { deleteCategory } from "$lib/server/services/category";
+import type { RequestHandler } from "./$types";
+
+export const POST: RequestHandler = async ({ locals, params }) => {
+  const { userId } = await authorize(locals, "activeClient");
+
+  const zodRes = z
+    .object({
+      id: z.coerce.number().int().positive(),
+    })
+    .safeParse(params);
+  if (!zodRes.success) error(400, "Invalid path parameters");
+  const { id } = zodRes.data;
+
+  await deleteCategory(userId, id);
+  return text("Category deleted", { headers: { "Content-Type": "text/plain" } });
+};

src/routes/api/category/[id]/file/remove/+server.ts

@@ -0,0 +1,25 @@
+import { error, text } from "@sveltejs/kit";
+import { z } from "zod";
+import { authorize } from "$lib/server/modules/auth";
+import { categoryFileRemoveRequest } from "$lib/server/schemas";
+import { removeCategoryFile } from "$lib/server/services/category";
+import type { RequestHandler } from "./$types";
+
+export const POST: RequestHandler = async ({ locals, params, request }) => {
+  const { userId } = await authorize(locals, "activeClient");
+
+  const paramsZodRes = z
+    .object({
+      id: z.coerce.number().int().positive(),
+    })
+    .safeParse(params);
+  if (!paramsZodRes.success) error(400, "Invalid path parameters");
+  const { id } = paramsZodRes.data;
+
+  const bodyZodRes = categoryFileRemoveRequest.safeParse(await request.json());
+  if (!bodyZodRes.success) error(400, "Invalid request body");
+  const { file } = bodyZodRes.data;
+
+  await removeCategoryFile(userId, id, file);
+  return text("File removed", { headers: { "Content-Type": "text/plain" } });
+};

src/routes/api/category/[id]/rename/+server.ts

@@ -0,0 +1,25 @@
+import { error, text } from "@sveltejs/kit";
+import { z } from "zod";
+import { authorize } from "$lib/server/modules/auth";
+import { categoryRenameRequest } from "$lib/server/schemas";
+import { renameCategory } from "$lib/server/services/category";
+import type { RequestHandler } from "./$types";
+
+export const POST: RequestHandler = async ({ locals, params, request }) => {
+  const { userId } = await authorize(locals, "activeClient");
+
+  const paramsZodRes = z
+    .object({
+      id: z.coerce.number().int().positive(),
+    })
+    .safeParse(params);
+  if (!paramsZodRes.success) error(400, "Invalid path parameters");
+  const { id } = paramsZodRes.data;
+
+  const bodyZodRes = categoryRenameRequest.safeParse(await request.json());
+  if (!bodyZodRes.success) error(400, "Invalid request body");
+  const { dekVersion, name, nameIv } = bodyZodRes.data;
+
+  await renameCategory(userId, id, new Date(dekVersion), { ciphertext: name, iv: nameIv });
+  return text("Category renamed", { headers: { "Content-Type": "text/plain" } });
+};