누락된 썸네일 생성 기능 구현

src/routes/(fullscreen)/settings/thumbnails/+page.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { get, type Writable } from "svelte/store";
+  import { goto } from "$app/navigation";
+  import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
+  import { TopBar } from "$lib/components/molecules";
+  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
+  import { masterKeyStore } from "$lib/stores";
+  import File from "./File.svelte";
+  import {
+    requestFileDownload,
+    generateThumbnail as generateThumbnailInternal,
+    requestThumbnailUpload,
+  } from "./service";
+
+  let { data } = $props();
+
+  let fileInfos: Writable<FileInfo | null>[] | undefined = $state();
+
+  const generateThumbnail = async (fileInfo: FileInfo) => {
+    // TODO: Error handling
+
+    const file = await requestFileDownload(fileInfo.id, fileInfo.contentIv!, fileInfo.dataKey!);
+    const thumbnail = await generateThumbnailInternal(file, fileInfo.contentType);
+
+    // TODO: Error handling
+    await requestThumbnailUpload(
+      fileInfo.id,
+      await thumbnail!.arrayBuffer(),
+      fileInfo.dataKey!,
+      fileInfo.dataKeyVersion!,
+    );
+  };
+
+  const generateAllThumbnails = async () => {
+    if (!fileInfos) return;
+
+    await Promise.all(
+      fileInfos.map(async (fileInfoStore) => {
+        const fileInfo = get(fileInfoStore);
+        if (fileInfo) {
+          await generateThumbnail(fileInfo);
+        }
+      }),
+    );
+  };
+
+  onMount(() => {
+    fileInfos = data.files.map((file) => getFileInfo(file, $masterKeyStore?.get(1)?.key!));
+  });
+</script>
+
+<svelte:head>
+  <title>썸네일 설정</title>
+</svelte:head>
+
+<TopBar title="썸네일" />
+<FullscreenDiv>
+  {#if fileInfos && fileInfos.length > 0}
+    <div class="space-y-4 pb-4">
+      <div class="space-y-1 break-keep text-gray-800">
+        <p>
+          {fileInfos.length}개 파일의 썸네일이 존재하지 않아요.
+        </p>
+      </div>
+      <div class="space-y-2">
+        {#each fileInfos as fileInfo}
+          <File
+            info={fileInfo}
+            onclick={({ id }) => goto(`/file/${id}`)}
+            onGenerateThumbnailClick={generateThumbnail}
+          />
+        {/each}
+      </div>
+    </div>
+    <BottomDiv class="flex flex-col items-center gap-y-2">
+      <Button onclick={generateAllThumbnails} class="w-full">모두 썸네일 생성하기</Button>
+    </BottomDiv>
+  {:else}
+    <div class="flex flex-grow items-center justify-center">
+      <p class="text-gray-500">모든 파일의 썸네일이 존재해요.</p>
+    </div>
+  {/if}
+</FullscreenDiv>

src/routes/(fullscreen)/settings/thumbnails/+page.ts

@@ -0,0 +1,14 @@
+import { error } from "@sveltejs/kit";
+import { callPostApi } from "$lib/hooks";
+import type { MissingThumbnailFileScanResponse } from "$lib/server/schemas/file";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+  const res = await callPostApi("/api/file/scanMissingThumbnails", undefined, fetch);
+  if (!res.ok) {
+    error(500, "Internal server error");
+  }
+
+  const { files }: MissingThumbnailFileScanResponse = await res.json();
+  return { files };
+};

src/routes/(fullscreen)/settings/thumbnails/File.svelte

@@ -0,0 +1,33 @@
+<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 { formatDateTime } from "$lib/modules/util";
+
+  import IconCamera from "~icons/material-symbols/camera";
+
+  interface Props {
+    info: Writable<FileInfo | null>;
+    onclick: (selectedFile: FileInfo) => void;
+    onGenerateThumbnailClick: (selectedFile: FileInfo) => void;
+  }
+
+  let { info, onclick, onGenerateThumbnailClick }: Props = $props();
+</script>
+
+{#if $info}
+  <ActionEntryButton
+    class="h-14"
+    onclick={() => onclick($info)}
+    actionButtonIcon={IconCamera}
+    onActionButtonClick={() => onGenerateThumbnailClick($info)}
+    actionButtonClass="text-gray-800"
+  >
+    <DirectoryEntryLabel
+      type="file"
+      name={$info.name}
+      subtext={formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
+    />
+  </ActionEntryButton>
+{/if}

src/routes/(fullscreen)/settings/thumbnails/service.ts

@@ -0,0 +1,61 @@
+import { limitFunction } from "p-limit";
+import { encryptData } from "$lib/modules/crypto";
+import { getFileCache, storeFileCache, downloadFile } from "$lib/modules/file";
+import { generateImageThumbnail, generateVideoThumbnail } from "$lib/modules/thumbnail";
+import type { FileThumbnailUploadRequest } from "$lib/server/schemas";
+
+export const requestFileDownload = async (
+  fileId: number,
+  fileEncryptedIv: string,
+  dataKey: CryptoKey,
+) => {
+  const cache = await getFileCache(fileId);
+  if (cache) return cache;
+
+  const fileBuffer = await downloadFile(fileId, fileEncryptedIv, dataKey);
+  storeFileCache(fileId, fileBuffer); // Intended
+  return fileBuffer;
+};
+
+export const generateThumbnail = limitFunction(
+  async (fileBuffer: ArrayBuffer, fileType: string) => {
+    let url;
+    try {
+      if (fileType.startsWith("image/")) {
+        url = URL.createObjectURL(new Blob([fileBuffer], { type: fileType }));
+        return await generateImageThumbnail(url);
+      } else if (fileType.startsWith("video/")) {
+        url = URL.createObjectURL(new Blob([fileBuffer], { type: fileType }));
+        return await generateVideoThumbnail(url);
+      }
+      return null;
+    } catch {
+      // TODO: Error handling
+      return null;
+    } finally {
+      if (url) {
+        URL.revokeObjectURL(url);
+      }
+    }
+  },
+  { concurrency: 4 },
+);
+
+export const requestThumbnailUpload = limitFunction(
+  async (fileId: number, thumbnail: ArrayBuffer, dataKey: CryptoKey, dataKeyVersion: Date) => {
+    const thumbnailEncrypted = await encryptData(thumbnail, dataKey);
+    const form = new FormData();
+    form.set(
+      "metadata",
+      JSON.stringify({
+        dekVersion: dataKeyVersion.toISOString(),
+        contentIv: thumbnailEncrypted.iv,
+      } satisfies FileThumbnailUploadRequest),
+    );
+    form.set("content", new Blob([thumbnailEncrypted.ciphertext]));
+
+    const res = await fetch(`/api/file/${fileId}/thumbnail/upload`, { method: "POST", body: form });
+    return res.ok;
+  },
+  { concurrency: 1 },
+);

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

@@ -4,6 +4,7 @@
   import { requestLogout } from "./service";
 
   import IconStorage from "~icons/material-symbols/storage";
+  import IconImage from "~icons/material-symbols/image";
   import IconPassword from "~icons/material-symbols/password";
   import IconLogout from "~icons/material-symbols/logout";
 
@@ -33,6 +34,13 @@
     >
       캐시
     </MenuEntryButton>
+    <MenuEntryButton
+      onclick={() => goto("/settings/thumbnails")}
+      icon={IconImage}
+      iconColor="text-blue-500"
+    >
+      썸네일
+    </MenuEntryButton>
   </div>
   <div class="space-y-2">
     <p class="font-semibold">보안</p>

src/routes/api/file/scanMissingThumbnails/+server.ts

@@ -0,0 +1,17 @@
+import { json } from "@sveltejs/kit";
+import { authorize } from "$lib/server/modules/auth";
+import {
+  missingThumbnailFileScanResponse,
+  type MissingThumbnailFileScanResponse,
+} from "$lib/server/schemas/file";
+import { scanMissingFileThumbnails } from "$lib/server/services/file";
+import type { RequestHandler } from "./$types";
+
+export const POST: RequestHandler = async ({ locals }) => {
+  const { userId } = await authorize(locals, "activeClient");
+
+  const { files } = await scanMissingFileThumbnails(userId);
+  return json(
+    missingThumbnailFileScanResponse.parse({ files } satisfies MissingThumbnailFileScanResponse),
+  );
+};