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

package.json

@@ -5,13 +5,14 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev",
-    "dev:db": "docker compose -f docker-compose.dev.yaml -p arkvault-dev up -d",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint .",
+    "db:up": "docker compose -f docker-compose.dev.yaml -p arkvault-dev up -d",
+    "db:down": "docker compose -f docker-compose.dev.yaml -p arkvault-dev down",
     "db:migrate": "kysely migrate"
   },
   "devDependencies": {

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/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;
+}

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

@@ -3,10 +3,9 @@
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import Category from "$lib/organisms/Category";
   import { masterKeyStore } from "$lib/stores";
   import CreateCategoryModal from "./CreateCategoryModal.svelte";
-  import Files from "./Files.svelte";
-  import SubCategories from "./SubCategories.svelte";
   import { requestCategoryCreation } from "./service";
 
   let { data } = $props();
@@ -34,32 +33,16 @@
   {#if data.id !== "root"}
     <TopBar title={$info?.name} xPadding />
   {/if}
-  {#if $info}
+  <div class="flex-grow bg-gray-100 pb-[5.5em]">
-    <div class="flex-grow space-y-4 bg-gray-100 pb-[5.5em]">
+    {#if $info}
-      <div class="space-y-4 bg-white p-4">
+      <Category
-        {#if data.id !== "root"}
+        info={$info}
-          <p class="text-lg font-bold text-gray-800">하위 카테고리</p>
+        onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
-        {/if}
+        onSubCategoryCreateClick={() => (isCreateCategoryModalOpen = true)}
-        {#key $info}
+        onFileClick={({ id }) => goto(`/file/${id}`)}
-          <SubCategories
+      />
-            info={$info}
+    {/if}
-            onCategoryClick={({ id }) => goto(`/category/${id}`)}
+  </div>
-            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>
-          {#key $info}
-            <Files info={$info} onFileClick={({ id }) => goto(`/file/${id}`)} />
-          {/key}
-        </div>
-      {/if}
-    </div>
-  {/if}
 </div>
 
 <CreateCategoryModal bind:isOpen={isCreateCategoryModalOpen} onCreateClick={createCategory} />

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

@@ -1,34 +0,0 @@
-<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]]/SubCategories.svelte

@@ -1,41 +0,0 @@
-<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]]/service.ts

@@ -3,20 +3,6 @@ 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 interface SelectedFile {
-  id: number;
-  dataKey: CryptoKey;
-  dataKeyVersion: Date;
-  name: string;
-}
-
 export const requestCategoryCreation = async (
   name: string,
   parentId: "root" | number,