홈 페이지와 갤러리 페이지에서 사진 및 동영상만 표시되도록 개선

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

@@ -5,13 +5,13 @@
   import { FileThumbnailButton } from "$lib/components/molecules";
   import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
-  import { requestFreshFilesRetrieval } from "./service";
+  import { requestFreshMediaFilesRetrieval } from "./service";
 
-  let files: Writable<FileInfo | null>[] = $state([]);
+  let mediaFiles: Writable<FileInfo | null>[] = $state([]);
 
   $effect(() => {
-    requestFreshFilesRetrieval().then((retrievedFiles) => {
-      files = retrievedFiles.map(({ id }) => getFileInfo(id, $masterKeyStore?.get(1)?.key!));
+    requestFreshMediaFilesRetrieval().then((files) => {
+      mediaFiles = files.map(({ id }) => getFileInfo(id, $masterKeyStore?.get(1)?.key!));
     });
   });
 </script>
@@ -27,7 +27,7 @@
       <p class="text-left font-semibold">사진 및 동영상</p>
     </EntryButton>
     <div class="grid grid-cols-4 gap-2 px-2">
-      {#each files as file}
+      {#each mediaFiles as file}
         <FileThumbnailButton info={file} onclick={({ id }) => goto(`/file/${id}`)} />
       {/each}
     </div>

src/routes/(main)/home/service.ts

@@ -1,10 +1,14 @@
 import { getAllFileInfos } from "$lib/indexedDB";
 
-export const requestFreshFilesRetrieval = async (limit = 8) => {
+export const requestFreshMediaFilesRetrieval = async (limit = 8) => {
   const files = await getAllFileInfos();
   files.sort(
     (a, b) =>
       (b.createdAt ?? b.lastModifiedAt).getTime() - (a.createdAt ?? a.lastModifiedAt).getTime(),
   );
-  return files.slice(0, limit);
+  return files
+    .filter(
+      ({ contentType }) => contentType.startsWith("image/") || contentType.startsWith("video/"),
+    )
+    .slice(0, limit);
 };