카테고리 페이지에 파일 목록 부분 구현

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

@@ -5,6 +5,7 @@
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import CreateCategoryModal from "./CreateCategoryModal.svelte";
+  import Files from "./Files.svelte";
   import SubCategories from "./SubCategories.svelte";
   import { requestCategoryCreation } from "./service";
 
@@ -34,7 +35,7 @@
     <TopBar title={$info?.name} xPadding />
   {/if}
   {#if $info}
-    <div class="flex-grow space-y-4 bg-gray-100">
+    <div class="flex-grow space-y-4 bg-gray-100 pb-[5.5em]">
       <div class="space-y-4 bg-white p-4">
         {#if data.id !== "root"}
           <p class="text-lg font-bold text-gray-800">하위 카테고리</p>
@@ -52,6 +53,9 @@
       {#if data.id !== "root"}
         <div class="space-y-4 bg-white p-4">
           <p class="text-lg font-bold text-gray-800">파일</p>
+          {#key $info}
+            <Files info={$info} onFileClick={({ id }) => goto(`/file/${id}`)} />
+          {/key}
         </div>
       {/if}
     </div>

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import type { FileInfo } from "$lib/modules/filesystem";
+  import type { SelectedFile } from "./service";
+
+  import IconDraft from "~icons/material-symbols/draft";
+  import IconMoreVert from "~icons/material-symbols/more-vert";
+
+  interface Props {
+    info: Writable<FileInfo | null>;
+    onclick: (selectedFile: SelectedFile) => void;
+  }
+
+  let { info, onclick }: Props = $props();
+
+  const openFile = () => {
+    const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
+    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={openFile} 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 text-blue-400">
+        <IconDraft />
+      </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]]/Files.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import { getFileInfo, type FileInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import { masterKeyStore } from "$lib/stores";
+  import File from "./File.svelte";
+  import type { SelectedFile } from "./service";
+
+  interface Props {
+    info: CategoryInfo;
+    onFileClick: (file: SelectedFile) => void;
+  }
+
+  let { info, onFileClick }: Props = $props();
+
+  let files: Writable<FileInfo | null>[] = $state([]);
+
+  $effect(() => {
+    files =
+      info.files?.map((id) => {
+        const info = getFileInfo(id, $masterKeyStore?.get(1)?.key!);
+        return info;
+      }) ?? [];
+
+    // TODO: Sorting
+  });
+</script>
+
+<div class="space-y-1">
+  {#each files as file}
+    <File info={file} onclick={onFileClick} />
+  {:else}
+    <p class="text-gray-800">이 카테고리에 추가된 파일이 없어요.</p>
+  {/each}
+</div>

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

@@ -10,6 +10,13 @@ export interface SelectedSubCategory {
   name: string;
 }
 
+export interface SelectedFile {
+  id: number;
+  dataKey: CryptoKey;
+  dataKeyVersion: Date;
+  name: string;
+}
+
 export const requestCategoryCreation = async (
   name: string,
   parentId: "root" | number,

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

@@ -0,0 +1,25 @@
+import { error, text } from "@sveltejs/kit";
+import { z } from "zod";
+import { authorize } from "$lib/server/modules/auth";
+import { categoryFileAddRequest } from "$lib/server/schemas";
+import { addCategoryFile } 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 = categoryFileAddRequest.safeParse(await request.json());
+  if (!bodyZodRes.success) error(400, "Invalid request body");
+  const { file } = bodyZodRes.data;
+
+  await addCategoryFile(userId, id, file);
+  return text("File added", { headers: { "Content-Type": "text/plain" } });
+};

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

@@ -0,0 +1,17 @@
+import { error, json } from "@sveltejs/kit";
+import { z } from "zod";
+import { authorize } from "$lib/server/modules/auth";
+import { categoryFileListResponse, type CategoryFileListResponse } from "$lib/server/schemas";
+import { getCategoryFiles } from "$lib/server/services/category";
+import type { RequestHandler } from "./$types";
+
+export const GET: 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;
+
+  const { files } = await getCategoryFiles(userId, id);
+  return json(categoryFileListResponse.parse({ files }) as CategoryFileListResponse);
+};