components 디렉터리 밖에 있던 molecule/organism 컴포넌트들을 해당 디렉터리 내부로 이동

src/lib/components/organisms/Category/Category.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { get, type Writable } from "svelte/store";
+  import { CheckBox } from "$lib/components/atoms";
+  import { SubCategories, type SelectedCategory } from "$lib/components/molecules";
+  import { getFileInfo, type FileInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import { SortBy, sortEntries } from "$lib/modules/util";
+  import { masterKeyStore } from "$lib/stores";
+  import File from "./File.svelte";
+  import type { SelectedFile } from "./service";
+
+  import IconMoreVert from "~icons/material-symbols/more-vert";
+
+  interface Props {
+    info: CategoryInfo;
+    onFileClick: (file: SelectedFile) => void;
+    onFileRemoveClick: (file: SelectedFile) => void;
+    onSubCategoryClick: (subCategory: SelectedCategory) => void;
+    onSubCategoryCreateClick: () => void;
+    onSubCategoryMenuClick: (subCategory: SelectedCategory) => void;
+    sortBy?: SortBy;
+    isFileRecursive: boolean;
+  }
+
+  let {
+    info,
+    onFileClick,
+    onFileRemoveClick,
+    onSubCategoryClick,
+    onSubCategoryCreateClick,
+    onSubCategoryMenuClick,
+    sortBy = SortBy.NAME_ASC,
+    isFileRecursive = $bindable(),
+  }: Props = $props();
+
+  let files: { name?: string; info: Writable<FileInfo | null>; isRecursive: boolean }[] = $state(
+    [],
+  );
+
+  $effect(() => {
+    files =
+      info.files
+        ?.filter(({ isRecursive }) => isFileRecursive || !isRecursive)
+        .map(({ id, isRecursive }) => {
+          const info = getFileInfo(id, $masterKeyStore?.get(1)?.key!);
+          return {
+            name: get(info)?.name,
+            info,
+            isRecursive,
+          };
+        }) ?? [];
+
+    const sort = () => {
+      sortEntries(files, sortBy);
+    };
+    return untrack(() => {
+      sort();
+
+      const unsubscribes = files.map((file) =>
+        file.info.subscribe((value) => {
+          if (file.name === value?.name) return;
+          file.name = value?.name;
+          sort();
+        }),
+      );
+      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+    });
+  });
+</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}
+    <SubCategories
+      {info}
+      {onSubCategoryClick}
+      {onSubCategoryCreateClick}
+      {onSubCategoryMenuClick}
+      subCategoryMenuIcon={IconMoreVert}
+    />
+  </div>
+  {#if info.id !== "root"}
+    <div class="space-y-4 bg-white p-4">
+      <div class="flex items-center justify-between">
+        <p class="text-lg font-bold text-gray-800">파일</p>
+        <CheckBox bind:checked={isFileRecursive}>
+          <p class="font-medium">하위 카테고리의 파일</p>
+        </CheckBox>
+      </div>
+      <div class="space-y-1">
+        {#key info}
+          {#each files as { info, isRecursive }}
+            <File
+              {info}
+              onclick={onFileClick}
+              onRemoveClick={!isRecursive ? onFileRemoveClick : undefined}
+            />
+          {:else}
+            <p class="text-gray-500 text-center">이 카테고리에 추가된 파일이 없어요.</p>
+          {/each}
+        {/key}
+      </div>
+    </div>
+  {/if}
+</div>

src/lib/components/organisms/Category/File.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { DirectoryEntryLabel } from "$lib/components/molecules";
+  import type { FileInfo } from "$lib/modules/filesystem";
+  import type { SelectedFile } from "./service";
+
+  import IconClose from "~icons/material-symbols/close";
+
+  interface Props {
+    info: Writable<FileInfo | null>;
+    onclick: (selectedFile: SelectedFile) => void;
+    onRemoveClick?: (selectedFile: SelectedFile) => void;
+  }
+
+  let { info, onclick, onRemoveClick }: Props = $props();
+
+  const openFile = () => {
+    const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
+    onclick({ id, dataKey, dataKeyVersion, name });
+  };
+
+  const removeFile = () => {
+    const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
+    onRemoveClick!({ id, dataKey, dataKeyVersion, name });
+  };
+</script>
+
+{#if $info}
+  <ActionEntryButton
+    class="h-12"
+    onclick={openFile}
+    actionButtonIcon={onRemoveClick && IconClose}
+    onActionButtonClick={removeFile}
+  >
+    <DirectoryEntryLabel type="file" name={$info.name} />
+  </ActionEntryButton>
+{/if}

src/lib/components/organisms/Category/index.ts

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

src/lib/components/organisms/Category/service.ts

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