From a1f30ee1542bd6190b61950953befa9efd13ea06 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Fri, 26 Dec 2025 22:58:09 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=88=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EC=99=80=20=EA=B0=A4=EB=9F=AC=EB=A6=AC=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=97=90=EC=84=9C=20=EC=82=AC=EC=A7=84=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=8F=99=EC=98=81=EC=83=81=EB=A7=8C=20=ED=91=9C=EC=8B=9C?=
 =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/organisms/Gallery.svelte | 23 +++++++++++++++++----
 src/routes/(main)/home/+page.svelte         | 10 ++++-----
 src/routes/(main)/home/service.ts           |  8 +++++--
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/organisms/Gallery.svelte b/src/lib/components/organisms/Gallery.svelte
index 9f80846..521c287 100644
--- a/src/lib/components/organisms/Gallery.svelte
+++ b/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) ?? {};
-      return { date: createdAt ?? lastModifiedAt, info: file };
+      const info = get(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) ?? [];
diff --git a/src/routes/(main)/home/+page.svelte b/src/routes/(main)/home/+page.svelte
index 8393641..e8997c4 100644
--- a/src/routes/(main)/home/+page.svelte
+++ b/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>
diff --git a/src/routes/(main)/home/service.ts b/src/routes/(main)/home/service.ts
index 50dc652..6d02199 100644
--- a/src/routes/(main)/home/service.ts
+++ b/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);
 };