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

src/lib/components/organisms/Gallery.svelte

@@ -13,7 +13,9 @@
 
   let { files, onFileClick }: Props = $props();
 
-  type FileEntry = { date?: Date; info: Writable<FileInfo | null> };
+  type FileEntry =
+    | { date?: undefined; contentType?: undefined; info: Writable<FileInfo | null> }
+    | { date: Date; contentType: string; info: Writable<FileInfo | null> };
   type Row =
     | { type: "header"; key: string; label: string }
     | { type: "items"; key: string; items: FileEntry[] };
@@ -37,15 +39,28 @@
 
   $effect(() => {
     filesWithDate = files.map((file) => {
-      const { createdAt, lastModifiedAt } = get(file) ?? {};
+      const info = get(file);
-      return { date: createdAt ?? lastModifiedAt, info: file };
+      if (info) {
+        return {
+          date: info.createdAt ?? info.lastModifiedAt,
+          contentType: info.contentType,
+          info: file,
+        };
+      } else {
+        return { info: file };
+      }
     });
 
     const buildRows = () => {
       const map = new Map<string, FileEntry[]>();
 
       for (const file of filesWithDate) {
-        if (!file.date) continue;
+        if (
+          !file.date ||
+          !(file.contentType.startsWith("image/") || file.contentType.startsWith("video/"))
+        ) {
+          continue;
+        }
 
         const date = formatDateSortable(file.date);
         const entries = map.get(date) ?? [];

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) => {
+    requestFreshMediaFilesRetrieval().then((files) => {
-      files = retrievedFiles.map(({ id }) => getFileInfo(id, $masterKeyStore?.get(1)?.key!));
+      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);
 };