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

src/lib/molecules/Categories/Categories.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { Component } from "svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
   import type { Writable } from "svelte/store";
   import type { CategoryInfo } from "$lib/modules/filesystem";
   import Category from "./Category.svelte";
@@ -6,16 +8,23 @@
 
   interface Props {
     categories: Writable<CategoryInfo | null>[];
+    categoryMenuIcon?: Component<SvelteHTMLElements["svg"]>;
     onCategoryClick: (category: SelectedCategory) => void;
+    onCategoryMenuClick?: (category: SelectedCategory) => void;
   }
 
-  let { categories, onCategoryClick }: Props = $props();
+  let { categories, categoryMenuIcon, onCategoryClick, onCategoryMenuClick }: Props = $props();
 </script>
 
 {#if categories.length > 0}
   <div class="space-y-1">
     {#each categories as category}
-      <Category info={category} onclick={onCategoryClick} />
+      <Category
+        info={category}
+        menuIcon={categoryMenuIcon}
+        onclick={onCategoryClick}
+        onMenuClick={onCategoryMenuClick}
+      />
     {/each}
   </div>
 {/if}

src/lib/molecules/Categories/Category.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
+  import type { Component } from "svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
   import type { Writable } from "svelte/store";
   import type { CategoryInfo } from "$lib/modules/filesystem";
   import type { SelectedCategory } from "./service";
 
   import IconCategory from "~icons/material-symbols/category";
-  import IconMoreVert from "~icons/material-symbols/more-vert";
 
   interface Props {
     info: Writable<CategoryInfo | null>;
+    menuIcon?: Component<SvelteHTMLElements["svg"]>;
     onclick: (category: SelectedCategory) => void;
+    onMenuClick?: (category: SelectedCategory) => void;
   }
 
-  let { info, onclick }: Props = $props();
+  let { info, menuIcon: MenuIcon, onclick, onMenuClick }: Props = $props();
 
   const openCategory = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
@@ -25,7 +28,12 @@
   const openMenu = (e: Event) => {
     e.stopPropagation();
 
-    // TODO
+    const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
+    setTimeout(() => {
+      onMenuClick!({ id, dataKey, dataKeyVersion, name });
+    }, 100);
   };
 </script>
 
@@ -40,13 +48,15 @@
       <p title={$info.name} class="flex-grow truncate font-medium">
         {$info.name}
       </p>
-      <button
-        id="open-menu"
-        onclick={openMenu}
-        class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
-      >
-        <IconMoreVert class="text-lg" />
-      </button>
+      {#if MenuIcon && onMenuClick}
+        <button
+          id="open-menu"
+          onclick={openMenu}
+          class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
+        >
+          <MenuIcon class="text-lg" />
+        </button>
+      {/if}
     </div>
   </div>
 {/if}

src/lib/molecules/SubCategories.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import type { ClassValue } from "svelte/elements";
+  import type { Component } from "svelte";
+  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
   import type { Writable } from "svelte/store";
   import { EntryButton } from "$lib/components/buttons";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
@@ -13,14 +14,18 @@
     info: CategoryInfo;
     onSubCategoryClick: (subCategory: SelectedCategory) => void;
     onSubCategoryCreateClick: () => void;
+    onSubCategoryMenuClick?: (category: SelectedCategory) => void;
     subCategoryCreatePosition?: "top" | "bottom";
+    subCategoryMenuIcon?: Component<SvelteHTMLElements["svg"]>;
   }
 
   let {
     info,
     onSubCategoryClick,
     onSubCategoryCreateClick,
+    onSubCategoryMenuClick,
     subCategoryCreatePosition = "bottom",
+    subCategoryMenuIcon,
     ...props
   }: Props = $props();
 
@@ -49,7 +54,12 @@
     {@render subCategoryCreate()}
   {/if}
   {#key info}
-    <Categories categories={subCategories} onCategoryClick={onSubCategoryClick} />
+    <Categories
+      categories={subCategories}
+      categoryMenuIcon={subCategoryMenuIcon}
+      onCategoryClick={onSubCategoryClick}
+      onCategoryMenuClick={onSubCategoryMenuClick}
+    />
   {/key}
   {#if subCategoryCreatePosition === "bottom"}
     {@render subCategoryCreate()}

src/lib/organisms/Category/Category.svelte

@@ -1,33 +1,33 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
-  import {
-    getFileInfo,
-    getCategoryInfo,
-    type FileInfo,
-    type CategoryInfo,
-  } from "$lib/modules/filesystem";
+  import { getFileInfo, type FileInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import type { SelectedCategory } from "$lib/molecules/Categories";
   import SubCategories from "$lib/molecules/SubCategories.svelte";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
   import type { SelectedFile } from "./service";
 
+  import IconMoreVert from "~icons/material-symbols/more-vert";
+
   interface Props {
     info: CategoryInfo;
     onFileClick: (file: SelectedFile) => void;
     onSubCategoryClick: (subCategory: SelectedCategory) => void;
     onSubCategoryCreateClick: () => void;
+    onSubCategoryMenuClick: (subCategory: SelectedCategory) => void;
   }
 
-  let { info, onFileClick, onSubCategoryClick, onSubCategoryCreateClick }: Props = $props();
+  let {
+    info,
+    onFileClick,
+    onSubCategoryClick,
+    onSubCategoryCreateClick,
+    onSubCategoryMenuClick,
+  }: Props = $props();
 
-  let subCategories: Writable<CategoryInfo | null>[] = $state([]);
   let files: Writable<FileInfo | null>[] = $state([]);
 
   $effect(() => {
-    subCategories = info.subCategoryIds.map((id) =>
-      getCategoryInfo(id, $masterKeyStore?.get(1)?.key!),
-    );
     files = info.files?.map((id) => getFileInfo(id, $masterKeyStore?.get(1)?.key!)) ?? [];
 
     // TODO: Sorting
@@ -39,7 +39,13 @@
     {#if info.id !== "root"}
       <p class="text-lg font-bold text-gray-800">하위 카테고리</p>
     {/if}
-    <SubCategories {info} {onSubCategoryClick} {onSubCategoryCreateClick} />
+    <SubCategories
+      {info}
+      {onSubCategoryClick}
+      {onSubCategoryCreateClick}
+      {onSubCategoryMenuClick}
+      subCategoryMenuIcon={IconMoreVert}
+    />
   </div>
   {#if info.id !== "root"}
     <div class="space-y-4 bg-white p-4">

src/lib/organisms/CreateCategoryModal.svelte

@@ -0,0 +1,30 @@
+<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/lib/server/db/category.ts

@@ -136,9 +136,12 @@ export const setCategoryEncName = async (
 };
 
 export const unregisterCategory = async (userId: number, categoryId: number) => {
-  await db
+  const res = await db
     .deleteFrom("category")
     .where("id", "=", categoryId)
     .where("user_id", "=", userId)
-    .execute();
+    .executeTakeFirst();
+  if (res.numDeletedRows === 0n) {
+    throw new IntegrityError("Category not found");
+  }
 };

src/lib/server/schemas/category.ts

@@ -27,6 +27,18 @@ export const categoryFileListResponse = z.object({
 });
 export type CategoryFileListResponse = z.infer<typeof categoryFileListResponse>;
 
+export const categoryFileRemoveRequest = z.object({
+  file: z.number().int().positive(),
+});
+export type CategoryFileRemoveRequest = z.infer<typeof categoryFileRemoveRequest>;
+
+export const categoryRenameRequest = z.object({
+  dekVersion: z.string().datetime(),
+  name: z.string().base64().nonempty(),
+  nameIv: z.string().base64().nonempty(),
+});
+export type CategoryRenameRequest = z.infer<typeof categoryRenameRequest>;
+
 export const categoryCreateRequest = z.object({
   parent: categoryIdSchema,
   mekVersion: z.number().int().positive(),

src/lib/server/services/category.ts

@@ -3,11 +3,19 @@ import {
   registerCategory,
   getAllCategoriesByParent,
   getCategory,
+  setCategoryEncName,
+  unregisterCategory,
   type CategoryId,
   type NewCategory,
 } from "$lib/server/db/category";
 import { IntegrityError } from "$lib/server/db/error";
-import { getAllFilesByCategory, getFile, addFileToCategory } from "$lib/server/db/file";
+import {
+  getAllFilesByCategory,
+  getFile,
+  addFileToCategory,
+  removeFileFromCategory,
+} from "$lib/server/db/file";
+import type { Ciphertext } from "$lib/server/db/schema";
 
 export const getCategoryInformation = async (userId: number, categoryId: CategoryId) => {
   const category = categoryId !== "root" ? await getCategory(userId, categoryId) : undefined;
@@ -28,6 +36,17 @@ export const getCategoryInformation = async (userId: number, categoryId: Categor
   };
 };
 
+export const deleteCategory = async (userId: number, categoryId: number) => {
+  try {
+    await unregisterCategory(userId, categoryId);
+  } catch (e) {
+    if (e instanceof IntegrityError && e.message === "Category not found") {
+      error(404, "Invalid category id");
+    }
+    throw e;
+  }
+};
+
 export const addCategoryFile = async (userId: number, categoryId: number, fileId: number) => {
   const category = await getCategory(userId, categoryId);
   const file = await getFile(userId, fileId);
@@ -57,6 +76,45 @@ export const getCategoryFiles = async (userId: number, categoryId: number) => {
   return { files: files.map(({ id }) => id) };
 };
 
+export const removeCategoryFile = async (userId: number, categoryId: number, fileId: number) => {
+  const category = await getCategory(userId, categoryId);
+  const file = await getFile(userId, fileId);
+  if (!category) {
+    error(404, "Invalid category id");
+  } else if (!file) {
+    error(404, "Invalid file id");
+  }
+
+  try {
+    await removeFileFromCategory(fileId, categoryId);
+  } catch (e) {
+    if (e instanceof IntegrityError && e.message === "File not found in category") {
+      error(400, "File not added");
+    }
+    throw e;
+  }
+};
+
+export const renameCategory = async (
+  userId: number,
+  categoryId: number,
+  dekVersion: Date,
+  newEncName: Ciphertext,
+) => {
+  try {
+    await setCategoryEncName(userId, categoryId, dekVersion, newEncName);
+  } catch (e) {
+    if (e instanceof IntegrityError) {
+      if (e.message === "Category not found") {
+        error(404, "Invalid category id");
+      } else if (e.message === "Invalid DEK version") {
+        error(400, "Invalid DEK version");
+      }
+    }
+    throw e;
+  }
+};
+
 export const createCategory = async (params: NewCategory) => {
   const oneMinuteAgo = new Date(Date.now() - 60 * 1000);
   const oneMinuteLater = new Date(Date.now() + 60 * 1000);

src/lib/services/category.ts

@@ -0,0 +1,21 @@
+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";
+
+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,
+  });
+};