카테고리 페이지 구현 (WiP)

아직은 하위 카테고리의 목록만 볼 수 있습니다.

src/routes/(main)/category/+page.svelte

@@ -1,3 +0,0 @@
-<div class="flex h-full items-center justify-center p-4">
-  <p class="text-gray-500">아직 개발 중이에요.</p>
-</div>

src/routes/(main)/category/[[id]]/+page.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import { goto } from "$app/navigation";
+  import { TopBar } from "$lib/components";
+  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import { masterKeyStore } from "$lib/stores";
+  import CreateCategoryModal from "./CreateCategoryModal.svelte";
+  import SubCategories from "./SubCategories.svelte";
+  import { requestCategoryCreation } from "./service";
+
+  let { data } = $props();
+
+  let info: Writable<CategoryInfo | null> | undefined = $state();
+
+  let isCreateCategoryModalOpen = $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!);
+  });
+</script>
+
+<svelte:head>
+  <title>카테고리</title>
+</svelte:head>
+
+<div class="flex min-h-full flex-col">
+  {#if data.id !== "root"}
+    <TopBar title={$info?.name} xPadding />
+  {/if}
+  {#if $info}
+    <div class="flex-grow space-y-4 bg-gray-100">
+      <div class="space-y-4 bg-white p-4">
+        {#if data.id !== "root"}
+          <p class="text-lg font-bold text-gray-800">하위 카테고리</p>
+        {/if}
+        {#key $info}
+          <SubCategories
+            info={$info}
+            onCategoryClick={({ id }) => goto(`/category/${id}`)}
+            onCategoryCreateClick={() => {
+              isCreateCategoryModalOpen = true;
+            }}
+          />
+        {/key}
+      </div>
+      {#if data.id !== "root"}
+        <div class="space-y-4 bg-white p-4">
+          <p class="text-lg font-bold text-gray-800">파일</p>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<CreateCategoryModal bind:isOpen={isCreateCategoryModalOpen} onCreateClick={createCategory} />

src/routes/(main)/category/[[id]]/+page.ts

@@ -0,0 +1,17 @@
+import { error } from "@sveltejs/kit";
+import { z } from "zod";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ params }) => {
+  const zodRes = z
+    .object({
+      id: z.coerce.number().int().positive().optional(),
+    })
+    .safeParse(params);
+  if (!zodRes.success) error(404, "Not found");
+  const { id } = zodRes.data;
+
+  return {
+    id: id ? id : ("root" as const),
+  };
+};

src/routes/(main)/category/[[id]]/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/routes/(main)/category/[[id]]/SubCategories.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import { EntryButton } from "$lib/components/buttons";
+  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import { masterKeyStore } from "$lib/stores";
+  import type { SelectedSubCategory } from "./service";
+  import SubCategory from "./SubCategory.svelte";
+
+  import IconAddCircle from "~icons/material-symbols/add-circle";
+
+  interface Props {
+    info: CategoryInfo;
+    onCategoryClick: (category: SelectedSubCategory) => void;
+    onCategoryCreateClick: () => void;
+  }
+
+  let { info, onCategoryClick, onCategoryCreateClick }: Props = $props();
+
+  let subCategories: Writable<CategoryInfo | null>[] = $state([]);
+
+  $effect(() => {
+    subCategories = info.subCategoryIds.map((id) => {
+      const info = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!);
+      return info;
+    });
+
+    // TODO: Sorting
+  });
+</script>
+
+<div class="space-y-1">
+  {#each subCategories as subCategory}
+    <SubCategory info={subCategory} onclick={onCategoryClick} />
+  {/each}
+  <EntryButton onclick={onCategoryCreateClick}>
+    <div class="flex h-8 items-center gap-x-4">
+      <IconAddCircle class="text-lg text-gray-600" />
+      <p class="font-medium text-gray-700">카테고리 추가하기</p>
+    </div>
+  </EntryButton>
+</div>

src/routes/(main)/category/[[id]]/SubCategory.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import type { CategoryInfo } from "$lib/modules/filesystem";
+  import type { SelectedSubCategory } from "./service";
+
+  import IconCategory from "~icons/material-symbols/category";
+  import IconMoreVert from "~icons/material-symbols/more-vert";
+
+  interface Props {
+    info: Writable<CategoryInfo | null>;
+    onclick: (selectedCategory: SelectedSubCategory) => void;
+  }
+
+  let { info, onclick }: Props = $props();
+
+  const openCategory = () => {
+    const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
+    setTimeout(() => {
+      onclick({ id, dataKey, dataKeyVersion, name });
+    }, 100);
+  };
+
+  const openMenu = (e: Event) => {
+    e.stopPropagation();
+
+    // TODO
+  };
+</script>
+
+{#if $info}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div id="button" onclick={openCategory} class="h-12 rounded-xl">
+    <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
+      <div class="flex-shrink-0 text-lg">
+        <IconCategory />
+      </div>
+      <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>
+    </div>
+  </div>
+{/if}
+
+<style>
+  #button:active:not(:has(#open-menu:active)) {
+    @apply bg-gray-100;
+  }
+  #button-content:active:not(:has(#open-menu:active)) {
+    @apply scale-95;
+  }
+</style>

src/routes/(main)/category/[[id]]/service.ts

@@ -0,0 +1,28 @@
+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 interface SelectedSubCategory {
+  id: number;
+  dataKey: CryptoKey;
+  dataKeyVersion: Date;
+  name: string;
+}
+
+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,
+  });
+};