파일 페이지에 카테고리 목록 및 카테고리에 추가 버튼 구현

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

@@ -2,18 +2,29 @@
   import FileSaver from "file-saver";
   import { untrack } from "svelte";
   import { get, type Writable } from "svelte/store";
+  import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
-  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
+  import { EntryButton } from "$lib/components/buttons";
+  import {
+    getFileInfo,
+    getCategoryInfo,
+    type FileInfo,
+    type CategoryInfo,
+  } from "$lib/modules/filesystem";
+  import Categories from "$lib/molecules/Categories";
   import { fileDownloadStatusStore, isFileDownloading, masterKeyStore } from "$lib/stores";
   import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
   import DownloadStatus from "./DownloadStatus.svelte";
   import { requestFileDownload, requestFileAdditionToCategory } from "./service";
 
+  import IconAddCircle from "~icons/material-symbols/add-circle";
+
   let { data } = $props();
 
   let info: Writable<FileInfo | null> | undefined = $state();
+  let categories: Writable<CategoryInfo | null>[] = $state([]);
 
-  let isAddToCategoryBottomSheetOpen = $state(true);
+  let isAddToCategoryBottomSheetOpen = $state(false);
 
   const downloadStatus = $derived(
     $fileDownloadStatusStore.find((statusStore) => {
@@ -50,6 +61,7 @@
   const addToCategory = async (categoryId: number) => {
     await requestFileAdditionToCategory(data.id, categoryId);
     isAddToCategoryBottomSheetOpen = false;
+    info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
   };
 
   $effect(() => {
@@ -58,6 +70,13 @@
     viewerType = undefined;
   });
 
+  $effect(() => {
+    categories =
+      $info?.categoryIds.map((id) => getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)) ?? [];
+
+    // TODO: Sorting
+  });
+
   $effect(() => {
     if ($info && $info.dataKey && $info.contentIv) {
       untrack(() => {
@@ -89,28 +108,42 @@
 
 <div class="flex h-full flex-col">
   <TopBar title={$info?.name} />
-  <DownloadStatus status={downloadStatus} />
-  <div class="flex w-full flex-grow flex-col items-center pb-4">
-    {#snippet viewerLoading(message: string)}
-      <div class="flex flex-grow items-center justify-center">
-        <p class="text-gray-500">{message}</p>
-      </div>
-    {/snippet}
+  <div class="space-y-4 pb-4">
+    <DownloadStatus status={downloadStatus} />
+    {#if $info && viewerType}
+      <div class="flex w-full justify-center">
+        {#snippet viewerLoading(message: string)}
+          <p class="text-gray-500">{message}</p>
+        {/snippet}
 
-    {#if $info && viewerType === "image"}
-      {#if fileBlobUrl}
-        <img src={fileBlobUrl} alt={$info.name} />
-      {:else}
-        {@render viewerLoading("이미지를 불러오고 있어요.")}
-      {/if}
-    {:else if viewerType === "video"}
-      {#if fileBlobUrl}
-        <!-- svelte-ignore a11y_media_has_caption -->
-        <video src={fileBlobUrl} controls></video>
-      {:else}
-        {@render viewerLoading("비디오를 불러오고 있어요.")}
-      {/if}
+        {#if viewerType === "image"}
+          {#if fileBlobUrl}
+            <img src={fileBlobUrl} alt={$info.name} />
+          {:else}
+            {@render viewerLoading("이미지를 불러오고 있어요.")}
+          {/if}
+        {:else if viewerType === "video"}
+          {#if fileBlobUrl}
+            <!-- svelte-ignore a11y_media_has_caption -->
+            <video src={fileBlobUrl} controls></video>
+          {:else}
+            {@render viewerLoading("비디오를 불러오고 있어요.")}
+          {/if}
+        {/if}
+      </div>
     {/if}
+    <div class="space-y-2">
+      <p class="text-lg font-bold">카테고리</p>
+      <div class="space-y-1">
+        <Categories {categories} onCategoryClick={({ id }) => goto(`/category/${id}`)} />
+        <EntryButton onclick={() => (isAddToCategoryBottomSheetOpen = true)}>
+          <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>
+    </div>
   </div>
 </div>