OPFS에 캐시된 썸네일을 모두 삭제하는 기능 추가

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

@@ -3,23 +3,26 @@
   import { get } from "svelte/store";
   import { goto } from "$app/navigation";
   import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
-  import { TopBar } from "$lib/components/molecules";
+  import { IconEntryButton, TopBar } from "$lib/components/molecules";
+  import { deleteAllFileThumbnails } from "$lib/modules/file";
   import { getFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
   import {
     persistentStates,
     getGenerationStatus,
-    requestFileThumbnailGeneration,
+    requestThumbnailGeneration,
   } from "./service.svelte";
 
+  import IconDelete from "~icons/material-symbols/delete";
+
   let { data } = $props();
 
-  const generateAllThumbnails = async () => {
+  const generateAllThumbnails = () => {
     persistentStates.files.forEach(({ info }) => {
       const fileInfo = get(info);
       if (fileInfo) {
-        requestFileThumbnailGeneration(fileInfo);
+        requestThumbnailGeneration(fileInfo);
       }
     });
   };
@@ -38,31 +41,37 @@
 </svelte:head>
 
 <TopBar title="썸네일" />
-<FullscreenDiv>
-  {#if persistentStates.files.length > 0}
-    <div class="space-y-4 pb-4">
-      <div class="space-y-1 break-keep text-gray-800">
-        <p>
-          {persistentStates.files.length}개 파일의 썸네일이 존재하지 않아요.
-        </p>
-      </div>
-      <div class="space-y-2">
-        {#each persistentStates.files as { info, status }}
-          <File
-            {info}
-            generationStatus={status}
-            onclick={({ id }) => goto(`/file/${id}`)}
-            onGenerateThumbnailClick={requestFileThumbnailGeneration}
-          />
-        {/each}
-      </div>
+<FullscreenDiv class="bg-gray-100 !px-0">
+  <div class="flex flex-grow flex-col space-y-4">
+    <div class="flex-shrink-0 bg-white p-4 !pt-0">
+      <IconEntryButton icon={IconDelete} onclick={deleteAllFileThumbnails} class="w-full">
+        저장된 썸네일 모두 삭제하기
+      </IconEntryButton>
     </div>
-    <BottomDiv class="flex flex-col items-center gap-y-2">
+    {#if persistentStates.files.length > 0}
+      <div class="flex-grow space-y-2 bg-white p-4">
+        <p class="text-lg font-bold text-gray-800">썸네일이 누락된 파일</p>
+        <div class="space-y-4">
+          <p class="break-keep text-gray-800">
+            {persistentStates.files.length}개 파일의 썸네일이 존재하지 않아요.
+          </p>
+          <div class="space-y-2">
+            {#each persistentStates.files as { info, status }}
+              <File
+                {info}
+                generationStatus={status}
+                onclick={({ id }) => goto(`/file/${id}`)}
+                onGenerateThumbnailClick={requestThumbnailGeneration}
+              />
+            {/each}
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+  {#if persistentStates.files.length > 0}
+    <BottomDiv class="flex flex-col items-center gap-y-2 px-4">
       <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>