카테고리에 파일을 추가할 수 있는 BottomSheet 구현 (WiP)

src/lib/components/BottomSheet.svelte

@@ -28,7 +28,7 @@
       <AdaptiveDiv>
         <div
           onclick={(e) => e.stopPropagation()}
-          class="flex max-h-[70vh] min-h-[30vh] rounded-t-2xl bg-white px-4"
+          class="flex max-h-[70vh] min-h-[30vh] overflow-y-auto rounded-t-2xl bg-white px-4"
           transition:fly={{ y: 100, duration: 200 }}
         >
           {@render children?.()}

src/lib/molecules/Categories/Categories.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import type { CategoryInfo } from "$lib/modules/filesystem";
+  import Category from "./Category.svelte";
+  import type { SelectedCategory } from "./service";
+
+  interface Props {
+    categories: Writable<CategoryInfo | null>[];
+    onCategoryClick: (category: SelectedCategory) => void;
+  }
+
+  let { categories, onCategoryClick }: Props = $props();
+</script>
+
+<div class="space-y-1">
+  {#each categories as category}
+    <Category info={category} onclick={onCategoryClick} />
+  {/each}
+</div>

src/lib/molecules/Categories/Category.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import type { CategoryInfo } from "$lib/modules/filesystem";
-  import type { SelectedSubCategory } from "./service";
+  import type { SelectedCategory } 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;
+    onclick: (category: SelectedCategory) => void;
   }
 
   let { info, onclick }: Props = $props();

src/lib/molecules/Categories/index.ts

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

src/lib/molecules/Categories/service.ts

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

src/lib/molecules/SubCategories.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { ClassValue } from "svelte/elements";
+  import type { Writable } from "svelte/store";
+  import { EntryButton } from "$lib/components/buttons";
+  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import Categories, { type SelectedCategory } from "$lib/molecules/Categories";
+  import { masterKeyStore } from "$lib/stores";
+
+  import IconAddCircle from "~icons/material-symbols/add-circle";
+
+  interface Props {
+    class?: ClassValue;
+    info: CategoryInfo;
+    onSubCategoryClick: (subCategory: SelectedCategory) => void;
+    onSubCategoryCreateClick: () => void;
+    subCategoryCreatePosition?: "top" | "bottom";
+  }
+
+  let {
+    info,
+    onSubCategoryClick,
+    onSubCategoryCreateClick,
+    subCategoryCreatePosition = "bottom",
+    ...props
+  }: Props = $props();
+
+  let subCategories: Writable<CategoryInfo | null>[] = $state([]);
+
+  $effect(() => {
+    subCategories = info.subCategoryIds.map((id) =>
+      getCategoryInfo(id, $masterKeyStore?.get(1)?.key!),
+    );
+
+    // TODO: Sorting
+  });
+</script>
+
+<div class={["space-y-1", props.class]}>
+  {#snippet subCategoryCreate()}
+    <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>
+  {/snippet}
+
+  {#if subCategoryCreatePosition === "top"}
+    {@render subCategoryCreate()}
+  {/if}
+  {#key info}
+    <Categories categories={subCategories} onCategoryClick={onSubCategoryClick} />
+  {/key}
+  {#if subCategoryCreatePosition === "bottom"}
+    {@render subCategoryCreate()}
+  {/if}
+</div>

src/lib/organisms/Category/Category.svelte

@@ -1,23 +1,21 @@
 <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 type { SelectedCategory } from "$lib/molecules/Categories";
+  import SubCategories from "$lib/molecules/SubCategories.svelte";
   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";
+  import type { SelectedFile } from "./service";
 
   interface Props {
     info: CategoryInfo;
     onFileClick: (file: SelectedFile) => void;
-    onSubCategoryClick: (subCategory: SelectedSubCategory) => void;
+    onSubCategoryClick: (subCategory: SelectedCategory) => void;
     onSubCategoryCreateClick: () => void;
   }
 
@@ -41,19 +39,7 @@
     {#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>
+    <SubCategories {info} {onSubCategoryClick} {onSubCategoryCreateClick} />
   </div>
   {#if info.id !== "root"}
     <div class="space-y-4 bg-white p-4">

src/lib/organisms/Category/service.ts

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