카테고리 페이지의 주요 요소를 별도 컴포넌트로 분리

src/lib/organisms/Category/Category.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import { EntryButton } from "$lib/components/buttons";
+  import {
+    getFileInfo,
+    getCategoryInfo,
+    type FileInfo,
+    type CategoryInfo,
+  } from "$lib/modules/filesystem";
+  import { masterKeyStore } from "$lib/stores";
+  import File from "./File.svelte";
+  import SubCategory from "./SubCategory.svelte";
+  import type { SelectedSubCategory, SelectedFile } from "./service";
+
+  import IconAddCircle from "~icons/material-symbols/add-circle";
+
+  interface Props {
+    info: CategoryInfo;
+    onFileClick: (file: SelectedFile) => void;
+    onSubCategoryClick: (subCategory: SelectedSubCategory) => void;
+    onSubCategoryCreateClick: () => void;
+  }
+
+  let { info, onFileClick, onSubCategoryClick, onSubCategoryCreateClick }: 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
+  });
+</script>
+
+<div class="space-y-4">
+  <div class="space-y-4 bg-white p-4">
+    {#if info.id !== "root"}
+      <p class="text-lg font-bold text-gray-800">하위 카테고리</p>
+    {/if}
+    <div class="space-y-1">
+      {#key info}
+        {#each subCategories as subCategory}
+          <SubCategory info={subCategory} onclick={onSubCategoryClick} />
+        {/each}
+      {/key}
+      <EntryButton onclick={onSubCategoryCreateClick}>
+        <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>
+  {#if info.id !== "root"}
+    <div class="space-y-4 bg-white p-4">
+      <p class="text-lg font-bold text-gray-800">파일</p>
+      <div class="space-y-1">
+        {#key info}
+          {#each files as file}
+            <File info={file} onclick={onFileClick} />
+          {:else}
+            <p>이 카테고리에 추가된 파일이 없어요.</p>
+          {/each}
+        {/key}
+      </div>
+    </div>
+  {/if}
+</div>

src/lib/organisms/Category/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/lib/organisms/Category/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/lib/organisms/Category/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Category.svelte";
+export * from "./service";

src/lib/organisms/Category/service.ts

@@ -0,0 +1,13 @@
+export interface SelectedSubCategory {
+  id: number;
+  dataKey: CryptoKey;
+  dataKeyVersion: Date;
+  name: string;
+}
+
+export interface SelectedFile {
+  id: number;
+  dataKey: CryptoKey;
+  dataKeyVersion: Date;
+  name: string;
+}