From dbe2262d07c3aff9e685b1a9c04aae6ef989c8d3 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Wed, 22 Jan 2025 11:28:13 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=9D=98=20=EC=A3=BC=EC=9A=94=20?=
 =?UTF-8?q?=EC=9A=94=EC=86=8C=EB=A5=BC=20=EB=B3=84=EB=8F=84=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  3 +-
 src/lib/organisms/Category/Category.svelte    | 72 +++++++++++++++++++
 .../organisms/Category}/File.svelte           |  0
 .../organisms/Category}/SubCategory.svelte    |  0
 src/lib/organisms/Category/index.ts           |  2 +
 src/lib/organisms/Category/service.ts         | 13 ++++
 .../(main)/category/[[id]]/+page.svelte       | 39 +++-------
 .../(main)/category/[[id]]/Files.svelte       | 34 ---------
 .../category/[[id]]/SubCategories.svelte      | 41 -----------
 src/routes/(main)/category/[[id]]/service.ts  | 14 ----
 10 files changed, 100 insertions(+), 118 deletions(-)
 create mode 100644 src/lib/organisms/Category/Category.svelte
 rename src/{routes/(main)/category/[[id]] => lib/organisms/Category}/File.svelte (100%)
 rename src/{routes/(main)/category/[[id]] => lib/organisms/Category}/SubCategory.svelte (100%)
 create mode 100644 src/lib/organisms/Category/index.ts
 create mode 100644 src/lib/organisms/Category/service.ts
 delete mode 100644 src/routes/(main)/category/[[id]]/Files.svelte
 delete mode 100644 src/routes/(main)/category/[[id]]/SubCategories.svelte

diff --git a/package.json b/package.json
index 93b2eed..1830e27 100644
--- a/package.json
+++ b/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": {
diff --git a/src/lib/organisms/Category/Category.svelte b/src/lib/organisms/Category/Category.svelte
new file mode 100644
index 0000000..cfe1809
--- /dev/null
+++ b/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>
diff --git a/src/routes/(main)/category/[[id]]/File.svelte b/src/lib/organisms/Category/File.svelte
similarity index 100%
rename from src/routes/(main)/category/[[id]]/File.svelte
rename to src/lib/organisms/Category/File.svelte
diff --git a/src/routes/(main)/category/[[id]]/SubCategory.svelte b/src/lib/organisms/Category/SubCategory.svelte
similarity index 100%
rename from src/routes/(main)/category/[[id]]/SubCategory.svelte
rename to src/lib/organisms/Category/SubCategory.svelte
diff --git a/src/lib/organisms/Category/index.ts b/src/lib/organisms/Category/index.ts
new file mode 100644
index 0000000..51e0a58
--- /dev/null
+++ b/src/lib/organisms/Category/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./Category.svelte";
+export * from "./service";
diff --git a/src/lib/organisms/Category/service.ts b/src/lib/organisms/Category/service.ts
new file mode 100644
index 0000000..8499c88
--- /dev/null
+++ b/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;
+}
diff --git a/src/routes/(main)/category/[[id]]/+page.svelte b/src/routes/(main)/category/[[id]]/+page.svelte
index 33ac0a7..aa551f1 100644
--- a/src/routes/(main)/category/[[id]]/+page.svelte
+++ b/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 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>
-        {/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>
-          {#key $info}
-            <Files info={$info} onFileClick={({ id }) => goto(`/file/${id}`)} />
-          {/key}
-        </div>
-      {/if}
-    </div>
-  {/if}
+  <div class="flex-grow bg-gray-100 pb-[5.5em]">
+    {#if $info}
+      <Category
+        info={$info}
+        onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
+        onSubCategoryCreateClick={() => (isCreateCategoryModalOpen = true)}
+        onFileClick={({ id }) => goto(`/file/${id}`)}
+      />
+    {/if}
+  </div>
 </div>
 
 <CreateCategoryModal bind:isOpen={isCreateCategoryModalOpen} onCreateClick={createCategory} />
diff --git a/src/routes/(main)/category/[[id]]/Files.svelte b/src/routes/(main)/category/[[id]]/Files.svelte
deleted file mode 100644
index 6679931..0000000
--- a/src/routes/(main)/category/[[id]]/Files.svelte
+++ /dev/null
@@ -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>
diff --git a/src/routes/(main)/category/[[id]]/SubCategories.svelte b/src/routes/(main)/category/[[id]]/SubCategories.svelte
deleted file mode 100644
index 1f47fc8..0000000
--- a/src/routes/(main)/category/[[id]]/SubCategories.svelte
+++ /dev/null
@@ -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>
diff --git a/src/routes/(main)/category/[[id]]/service.ts b/src/routes/(main)/category/[[id]]/service.ts
index 6af11e3..c2018ed 100644
--- a/src/routes/(main)/category/[[id]]/service.ts
+++ b/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,