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

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

src/lib/components/TopBar.svelte

@@ -7,16 +7,20 @@
     children?: Snippet;
     onback?: () => void;
     title?: string;
+    xPadding?: boolean;
   }
 
-  let { children, onback, title }: Props = $props();
+  let { children, onback, title, xPadding = false }: Props = $props();
 
   const back = $derived(() => {
     setTimeout(onback || (() => history.back()), 100);
   });
 </script>
 
-<div class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between bg-white py-4">
+<div
+  class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between bg-white py-4
+  {xPadding ? 'px-4' : ''}"
+>
   <button onclick={back} class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-gray-100">
     <IconArrowBack class="text-2xl" />
   </button>

src/lib/modules/filesystem.ts

@@ -12,7 +12,11 @@ import {
   type DirectoryId,
 } from "$lib/indexedDB";
 import { unwrapDataKey, decryptString } from "$lib/modules/crypto";
-import type { DirectoryInfoResponse, FileInfoResponse } from "$lib/server/schemas";
+import type {
+  CategoryInfoResponse,
+  DirectoryInfoResponse,
+  FileInfoResponse,
+} from "$lib/server/schemas";
 
 export type DirectoryInfo =
   | {
@@ -43,8 +47,27 @@ export interface FileInfo {
   lastModifiedAt: Date;
 }
 
+type CategoryId = "root" | number;
+
+export type CategoryInfo =
+  | {
+      id: "root";
+      dataKey?: undefined;
+      dataKeyVersion?: undefined;
+      name?: undefined;
+      subCategoryIds: number[];
+    }
+  | {
+      id: number;
+      dataKey?: CryptoKey;
+      dataKeyVersion?: Date;
+      name: string;
+      subCategoryIds: number[];
+    };
+
 const directoryInfoStore = new Map<DirectoryId, Writable<DirectoryInfo | null>>();
 const fileInfoStore = new Map<number, Writable<FileInfo | null>>();
+const categoryInfoStore = new Map<CategoryId, Writable<CategoryInfo | null>>();
 
 const fetchDirectoryInfoFromIndexedDB = async (
   id: DirectoryId,
@@ -124,7 +147,7 @@ export const getDirectoryInfo = (id: DirectoryId, masterKey: CryptoKey) => {
     directoryInfoStore.set(id, info);
   }
 
-  fetchDirectoryInfo(id, info, masterKey);
+  fetchDirectoryInfo(id, info, masterKey); // Intended
   return info;
 };
 
@@ -203,6 +226,58 @@ export const getFileInfo = (fileId: number, masterKey: CryptoKey) => {
     fileInfoStore.set(fileId, info);
   }
 
-  fetchFileInfo(fileId, info, masterKey);
+  fetchFileInfo(fileId, info, masterKey); // Intended
+  return info;
+};
+
+const fetchCategoryInfoFromServer = async (
+  id: CategoryId,
+  info: Writable<CategoryInfo | null>,
+  masterKey: CryptoKey,
+) => {
+  const res = await callGetApi(`/api/category/${id}`);
+  if (res.status === 404) {
+    info.set(null);
+    return;
+  } else if (!res.ok) {
+    throw new Error("Failed to fetch category information");
+  }
+
+  const { metadata, subCategories }: CategoryInfoResponse = await res.json();
+
+  if (id === "root") {
+    info.set({ id, subCategoryIds: subCategories });
+  } else {
+    const { dataKey } = await unwrapDataKey(metadata!.dek, masterKey);
+    const name = await decryptString(metadata!.name, metadata!.nameIv, dataKey);
+
+    info.set({
+      id,
+      dataKey,
+      dataKeyVersion: new Date(metadata!.dekVersion),
+      name,
+      subCategoryIds: subCategories,
+    });
+  }
+};
+
+const fetchCategoryInfo = async (
+  id: CategoryId,
+  info: Writable<CategoryInfo | null>,
+  masterKey: CryptoKey,
+) => {
+  await fetchCategoryInfoFromServer(id, info, masterKey);
+};
+
+export const getCategoryInfo = (categoryId: CategoryId, masterKey: CryptoKey) => {
+  // TODO: MEK rotation
+
+  let info = categoryInfoStore.get(categoryId);
+  if (!info) {
+    info = writable(null);
+    categoryInfoStore.set(categoryId, info);
+  }
+
+  fetchCategoryInfo(categoryId, info, masterKey); // Intended
   return info;
 };

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,
+  });
+};