파일 및 디렉터리 목록을 IndexedDB에 캐싱하도록 구현

src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import { untrack } from "svelte";
   import { get, type Writable } from "svelte/store";
-  import { getDirectoryInfo, getFileInfo } from "$lib/modules/file";
   import {
-    fileUploadStatusStore,
-    masterKeyStore,
+    getDirectoryInfo,
+    getFileInfo,
     type DirectoryInfo,
     type FileInfo,
-    type FileUploadStatus,
-  } from "$lib/stores";
+  } from "$lib/modules/filesystem";
+  import { fileUploadStatusStore, masterKeyStore, type FileUploadStatus } from "$lib/stores";
   import File from "./File.svelte";
   import SubDirectory from "./SubDirectory.svelte";
   import { SortBy, sortEntries } from "./service";
@@ -110,7 +109,7 @@
 </script>
 
 {#if subDirectories.length + files.length > 0}
-  <div class="pb-[4.5rem]">
+  <div class="space-y-1 pb-[4.5rem]">
     {#each subDirectories as { info }}
       <SubDirectory {info} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
     {/each}

src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
-  import type { FileInfo } from "$lib/stores";
+  import type { FileInfo } from "$lib/modules/filesystem";
   import { formatDateTime } from "./service";
   import type { SelectedDirectoryEntry } from "../service";
 
@@ -17,6 +17,8 @@
 
   const openFile = () => {
     const { id, dataKey, dataKeyVersion, name } = $info!;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
     setTimeout(() => {
       onclick({ type: "file", id, dataKey, dataKeyVersion, name });
     }, 100);
@@ -26,6 +28,8 @@
     e.stopPropagation();
 
     const { id, dataKey, dataKeyVersion, name } = $info!;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
     setTimeout(() => {
       onOpenMenuClick({ type: "file", id, dataKey, dataKeyVersion, name });
     }, 100);

src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
-  import type { DirectoryInfo } from "$lib/stores";
+  import type { DirectoryInfo } from "$lib/modules/filesystem";
   import type { SelectedDirectoryEntry } from "../service";
 
   import IconFolder from "~icons/material-symbols/folder";
@@ -18,6 +18,8 @@
 
   const openDirectory = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
     setTimeout(() => {
       onclick({ type: "directory", id, dataKey, dataKeyVersion, name });
     }, 100);
@@ -27,6 +29,8 @@
     e.stopPropagation();
 
     const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
     setTimeout(() => {
       onOpenMenuClick({ type: "directory", id, dataKey, dataKeyVersion, name });
     }, 100);