캐시 목록 페이지 추가

src/lib/modules/cache.ts

@@ -1,20 +1,28 @@
-import { getFileCacheIndex, storeFileCacheIndex, type FileCacheIndex } from "$lib/indexedDB";
+import {
+  getFileCacheIndex as getFileCacheIndexFromIndexedDB,
+  storeFileCacheIndex as storeFileCacheIndexToIndexedDB,
+  type FileCacheIndex,
+} from "$lib/indexedDB";
 import { readFileFromOpfs, writeFileToOpfs } from "$lib/modules/opfs";
 
 const fileCacheIndex = new Map<number, FileCacheIndex>();
 
 export const prepareFileCache = async () => {
-  for (const cache of await getFileCacheIndex()) {
+  for (const cache of await getFileCacheIndexFromIndexedDB()) {
     fileCacheIndex.set(cache.fileId, cache);
   }
 };
 
+export const getFileCacheIndex = () => {
+  return Array.from(fileCacheIndex.values());
+};
+
 export const getFileCache = async (fileId: number) => {
   const cacheIndex = fileCacheIndex.get(fileId);
   if (!cacheIndex) return null;
 
   cacheIndex.lastRetrievedAt = new Date();
-  storeFileCacheIndex(cacheIndex); // Intended
+  storeFileCacheIndexToIndexedDB(cacheIndex); // Intended
   return await readFileFromOpfs(`/cache/${fileId}`);
 };
 
@@ -29,5 +37,5 @@ export const storeFileCache = async (fileId: number, fileBuffer: ArrayBuffer) =>
     size: fileBuffer.byteLength,
   };
   fileCacheIndex.set(fileId, cacheIndex);
-  await storeFileCacheIndex(cacheIndex);
+  await storeFileCacheIndexToIndexedDB(cacheIndex);
 };

src/lib/modules/file.ts

@@ -63,7 +63,13 @@ const fetchFileInfo = async (
   infoStore: Writable<FileInfo | null>,
 ) => {
   const res = await callGetApi(`/api/file/${fileId}`);
-  if (!res.ok) throw new Error("Failed to fetch file information");
+  if (!res.ok) {
+    if (res.status === 404) {
+      infoStore.update(() => null);
+      return;
+    }
+    throw new Error("Failed to fetch file information");
+  }
   const metadata: FileInfoResponse = await res.json();
 
   const { dataKey } = await unwrapDataKey(metadata.dek, masterKey);

src/lib/modules/util.ts

@@ -0,0 +1,22 @@
+const pad2 = (num: number) => num.toString().padStart(2, "0");
+
+export const formatDate = (date: Date) => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${year}. ${month}. ${day}.`;
+};
+
+export const formatDateTime = (date: Date) => {
+  const dateFormatted = formatDate(date);
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  return `${dateFormatted} ${pad2(hours)}:${pad2(minutes)}`;
+};
+
+export const formatFileSize = (size: number) => {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KiB`;
+  if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)} MiB`;
+  return `${(size / 1024 / 1024 / 1024).toFixed(1)} GiB`;
+};

src/routes/(fullscreen)/setting/cache/+page.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { TopBar } from "$lib/components";
+  import type { FileCacheIndex } from "$lib/indexedDB";
+  import { getFileCacheIndex } from "$lib/modules/cache";
+  import { getFileInfo } from "$lib/modules/file";
+  import { masterKeyStore, type FileInfo } from "$lib/stores";
+  import File from "./File.svelte";
+  import { formatFileSize } from "./service";
+
+  interface FileCache {
+    index: FileCacheIndex;
+    fileInfo: Writable<FileInfo | null>;
+  }
+
+  let fileCache: FileCache[] | undefined = $state();
+  let fileCacheTotalSize = $state(0);
+
+  onMount(() => {
+    fileCache = getFileCacheIndex()
+      .map((index) => ({
+        index,
+        fileInfo: getFileInfo(index.fileId, $masterKeyStore?.get(1)?.key!),
+      }))
+      .sort((a, b) => a.index.lastRetrievedAt.getTime() - b.index.lastRetrievedAt.getTime());
+    fileCacheTotalSize = fileCache.reduce((acc, { index }) => acc + index.size, 0);
+  });
+</script>
+
+<svelte:head>
+  <title>캐시 설정</title>
+</svelte:head>
+
+<div class="flex h-full flex-col">
+  <TopBar title="캐시" />
+  {#if fileCache}
+    <div class="space-y-4 pb-4">
+      <div class="space-y-1 break-keep text-gray-800">
+        <p>
+          {fileCache.length}개 파일이 캐시되어 {formatFileSize(fileCacheTotalSize)}를 사용하고
+          있어요.
+        </p>
+        <p>캐시를 삭제하더라도 원본 파일은 삭제되지 않아요.</p>
+      </div>
+      <div class="space-y-2">
+        {#each fileCache as { index, fileInfo }}
+          <File {index} info={fileInfo} />
+        {/each}
+      </div>
+    </div>
+  {:else}
+    <div class="flex flex-grow items-center justify-center">
+      <p class="text-gray-500">캐시 목록을 불러오고 있어요.</p>
+    </div>
+  {/if}
+</div>

src/routes/(fullscreen)/setting/cache/File.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import type { FileCacheIndex } from "$lib/indexedDB";
+  import type { FileInfo } from "$lib/stores";
+  import { formatDate, formatFileSize } from "./service";
+
+  import IconDraft from "~icons/material-symbols/draft";
+  import IconScanDelete from "~icons/material-symbols/scan-delete";
+  // import IconDelete from "~icons/material-symbols/delete";
+
+  interface Props {
+    index: FileCacheIndex;
+    info: Writable<FileInfo | null>;
+  }
+
+  let { index, info }: Props = $props();
+</script>
+
+<div class="flex h-14 items-center gap-x-4 p-2">
+  {#if $info}
+    <div class="flex-shrink-0 rounded-full bg-blue-100 p-1 text-xl">
+      <IconDraft class="text-blue-400" />
+    </div>
+  {:else}
+    <div class="flex-shrink-0 rounded-full bg-red-100 p-1 text-xl">
+      <IconScanDelete class="text-red-400" />
+    </div>
+  {/if}
+  <div class="flex flex-grow flex-col overflow-hidden">
+    {#if $info}
+      <p title={$info.name} class="truncate font-medium">{$info.name}</p>
+    {:else}
+      <p class="font-medium">삭제된 파일</p>
+    {/if}
+    <p class="text-xs text-gray-800">
+      읽음 {formatDate(index.lastRetrievedAt)} · {formatFileSize(index.size)}
+    </p>
+  </div>
+  <!-- <button class="flex-shrink-0 rounded-full p-1 active:bg-gray-100">
+    <IconDelete class="text-lg text-gray-600" />
+  </button> -->
+</div>

src/routes/(fullscreen)/setting/cache/service.ts

@@ -0,0 +1 @@
+export { formatDate, formatFileSize } from "$lib/modules/util";

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import type { FileInfo } from "$lib/stores";
-  import { formatDate } from "./service";
+  import { formatDateTime } from "./service";
   import type { SelectedDirectoryEntry } from "../service";
 
   import IconDraft from "~icons/material-symbols/draft";
@@ -44,7 +44,9 @@
         <p title={$info.name} class="truncate font-medium">
           {$info.name}
         </p>
-        <p class="text-xs text-gray-800">{formatDate($info.createdAt ?? $info.lastModifiedAt)}</p>
+        <p class="text-xs text-gray-800">
+          {formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
+        </p>
       </div>
       <button
         id="open-menu"

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

@@ -1,6 +1,8 @@
 import { get, type Writable } from "svelte/store";
 import type { DirectoryInfo, FileInfo } from "$lib/stores";
 
+export { formatDateTime } from "$lib/modules/util";
+
 export enum SortBy {
   NAME_ASC,
   NAME_DESC,
@@ -28,15 +30,3 @@ export const sortEntries = <T extends DirectoryInfo | FileInfo>(
 
   entries.sort((a, b) => sortFunc(get(a), get(b)));
 };
-
-const pad2 = (num: number) => num.toString().padStart(2, "0");
-
-export const formatDate = (date: Date) => {
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hours = date.getHours();
-  const minutes = date.getMinutes();
-
-  return `${year}. ${month}. ${day}. ${pad2(hours)}:${pad2(minutes)}`;
-};

src/routes/(main)/menu/+page.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { EntryButton } from "$lib/components/buttons";
+  import MenuEntryButton from "./MenuEntryButton.svelte";
   import { requestLogout } from "./service.js";
 
+  import IconStorage from "~icons/material-symbols/storage";
   import IconPassword from "~icons/material-symbols/password";
   import IconLogout from "~icons/material-symbols/logout";
 
@@ -23,23 +24,27 @@
   <p class="font-semibold">{data.nickname}</p>
 </div>
 <div class="space-y-4 px-4 pb-4">
+  <div class="space-y-2">
+    <p class="font-semibold">설정</p>
+    <MenuEntryButton
+      onclick={() => goto("/setting/cache")}
+      icon={IconStorage}
+      iconColor="text-green-500"
+    >
+      캐시
+    </MenuEntryButton>
+  </div>
   <div class="space-y-2">
     <p class="font-semibold">보안</p>
-    <EntryButton onclick={() => goto("/auth/changePassword")}>
-      <div class="flex items-center gap-x-4">
-        <div class="rounded-lg bg-gray-200 p-1 text-blue-500">
-          <IconPassword />
-        </div>
-        <p class="font-medium">비밀번호 바꾸기</p>
-      </div>
-    </EntryButton>
-    <EntryButton onclick={logout}>
-      <div class="flex items-center gap-x-4">
-        <div class="rounded-lg bg-gray-200 p-1 text-red-500">
-          <IconLogout />
-        </div>
-        <p class="font-medium">로그아웃</p>
-      </div>
-    </EntryButton>
+    <MenuEntryButton
+      onclick={() => goto("/auth/changePassword")}
+      icon={IconPassword}
+      iconColor="text-blue-500"
+    >
+      비밀번호 바꾸기
+    </MenuEntryButton>
+    <MenuEntryButton onclick={logout} icon={IconLogout} iconColor="text-red-500">
+      로그아웃
+    </MenuEntryButton>
   </div>
 </div>

src/routes/(main)/menu/MenuEntryButton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Component, Snippet } from "svelte";
+  import { EntryButton } from "$lib/components/buttons";
+  import type { SvelteHTMLElements } from "svelte/elements";
+
+  interface Props {
+    children: Snippet;
+    icon: Component<SvelteHTMLElements["svg"]>;
+    iconColor: string;
+    onclick: () => void;
+  }
+
+  let { children, icon: Icon, iconColor, onclick }: Props = $props();
+</script>
+
+<EntryButton {onclick}>
+  <div class="flex items-center gap-x-4">
+    <div class="rounded-lg bg-gray-200 p-1 {iconColor}">
+      <Icon />
+    </div>
+    <p class="font-medium">
+      {@render children?.()}
+    </p>
+  </div>
+</EntryButton>