From 6d02178c6901f13805ca3aac39540d5d4bae614e Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Fri, 26 Dec 2025 22:47:31 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=88=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...nail.svelte => FileThumbnailButton.svelte} |  0
 src/lib/components/molecules/Gallery/index.ts |  1 -
 src/lib/components/molecules/index.ts         |  2 +-
 .../Gallery => organisms}/Gallery.svelte      |  4 +--
 src/lib/components/organisms/index.ts         |  1 +
 src/routes/(fullscreen)/gallery/+page.svelte  |  3 +-
 src/routes/(main)/home/+page.svelte           | 36 +++++++++++++++++--
 src/routes/(main)/home/service.ts             | 10 ++++++
 8 files changed, 50 insertions(+), 7 deletions(-)
 rename src/lib/components/molecules/{Gallery/Thumbnail.svelte => FileThumbnailButton.svelte} (100%)
 delete mode 100644 src/lib/components/molecules/Gallery/index.ts
 rename src/lib/components/{molecules/Gallery => organisms}/Gallery.svelte (96%)
 create mode 100644 src/routes/(main)/home/service.ts

diff --git a/src/lib/components/molecules/Gallery/Thumbnail.svelte b/src/lib/components/molecules/FileThumbnailButton.svelte
similarity index 100%
rename from src/lib/components/molecules/Gallery/Thumbnail.svelte
rename to src/lib/components/molecules/FileThumbnailButton.svelte
diff --git a/src/lib/components/molecules/Gallery/index.ts b/src/lib/components/molecules/Gallery/index.ts
deleted file mode 100644
index 9a269ab..0000000
--- a/src/lib/components/molecules/Gallery/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Gallery } from "./Gallery.svelte";
diff --git a/src/lib/components/molecules/index.ts b/src/lib/components/molecules/index.ts
index b11ed5f..b71affe 100644
--- a/src/lib/components/molecules/index.ts
+++ b/src/lib/components/molecules/index.ts
@@ -2,7 +2,7 @@ export * from "./ActionModal.svelte";
 export { default as ActionModal } from "./ActionModal.svelte";
 export * from "./Categories";
 export { default as Categories } from "./Categories";
-export * from "./Gallery";
+export { default as FileThumbnailButton } from "./FileThumbnailButton.svelte";
 export { default as IconEntryButton } from "./IconEntryButton.svelte";
 export * from "./labels";
 export { default as SubCategories } from "./SubCategories.svelte";
diff --git a/src/lib/components/molecules/Gallery/Gallery.svelte b/src/lib/components/organisms/Gallery.svelte
similarity index 96%
rename from src/lib/components/molecules/Gallery/Gallery.svelte
rename to src/lib/components/organisms/Gallery.svelte
index 1bcb335..9f80846 100644
--- a/src/lib/components/molecules/Gallery/Gallery.svelte
+++ b/src/lib/components/organisms/Gallery.svelte
@@ -2,9 +2,9 @@
   import { createWindowVirtualizer } from "@tanstack/svelte-virtual";
   import { untrack } from "svelte";
   import { get, type Writable } from "svelte/store";
+  import { FileThumbnailButton } from "$lib/components/molecules";
   import type { FileInfo } from "$lib/modules/filesystem";
   import { formatDate, formatDateSortable, SortBy, sortEntries } from "$lib/utils";
-  import Thumbnail from "./Thumbnail.svelte";
 
   interface Props {
     files: Writable<FileInfo | null>[];
@@ -105,7 +105,7 @@
         {:else}
           <div class="grid grid-cols-4 gap-1 pb-4">
             {#each row.items as { info }}
-              <Thumbnail {info} onclick={onFileClick} />
+              <FileThumbnailButton {info} onclick={onFileClick} />
             {/each}
           </div>
         {/if}
diff --git a/src/lib/components/organisms/index.ts b/src/lib/components/organisms/index.ts
index 64f9861..9687bfe 100644
--- a/src/lib/components/organisms/index.ts
+++ b/src/lib/components/organisms/index.ts
@@ -1,3 +1,4 @@
 export * from "./Category";
 export { default as Category } from "./Category";
+export { default as Gallery } from "./Gallery.svelte";
 export * from "./modals";
diff --git a/src/routes/(fullscreen)/gallery/+page.svelte b/src/routes/(fullscreen)/gallery/+page.svelte
index 484c734..1826c47 100644
--- a/src/routes/(fullscreen)/gallery/+page.svelte
+++ b/src/routes/(fullscreen)/gallery/+page.svelte
@@ -2,7 +2,8 @@
   import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
   import { FullscreenDiv } from "$lib/components/atoms";
-  import { Gallery, TopBar } from "$lib/components/molecules";
+  import { TopBar } from "$lib/components/molecules";
+  import { Gallery } from "$lib/components/organisms";
   import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
 
diff --git a/src/routes/(main)/home/+page.svelte b/src/routes/(main)/home/+page.svelte
index 73d68b7..8393641 100644
--- a/src/routes/(main)/home/+page.svelte
+++ b/src/routes/(main)/home/+page.svelte
@@ -1,3 +1,35 @@
-<div class="flex h-full items-center justify-center p-4">
-  <p class="text-gray-500">아직 개발 중이에요.</p>
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import { goto } from "$app/navigation";
+  import { EntryButton } from "$lib/components/atoms";
+  import { FileThumbnailButton } from "$lib/components/molecules";
+  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
+  import { masterKeyStore } from "$lib/stores";
+  import { requestFreshFilesRetrieval } from "./service";
+
+  let files: Writable<FileInfo | null>[] = $state([]);
+
+  $effect(() => {
+    requestFreshFilesRetrieval().then((retrievedFiles) => {
+      files = retrievedFiles.map(({ id }) => getFileInfo(id, $masterKeyStore?.get(1)?.key!));
+    });
+  });
+</script>
+
+<svelte:head>
+  <title>홈</title>
+</svelte:head>
+
+<div class="min-h-full space-y-4 bg-gray-100 px-4 pb-[5.5em] pt-4">
+  <p class="px-2 text-2xl font-bold text-gray-800">ArkVault</p>
+  <div class="space-y-2 rounded-xl bg-white px-2 pb-4 pt-2">
+    <EntryButton onclick={() => goto("/gallery")} class="w-full">
+      <p class="text-left font-semibold">사진 및 동영상</p>
+    </EntryButton>
+    <div class="grid grid-cols-4 gap-2 px-2">
+      {#each files as file}
+        <FileThumbnailButton info={file} onclick={({ id }) => goto(`/file/${id}`)} />
+      {/each}
+    </div>
+  </div>
 </div>
diff --git a/src/routes/(main)/home/service.ts b/src/routes/(main)/home/service.ts
new file mode 100644
index 0000000..50dc652
--- /dev/null
+++ b/src/routes/(main)/home/service.ts
@@ -0,0 +1,10 @@
+import { getAllFileInfos } from "$lib/indexedDB";
+
+export const requestFreshFilesRetrieval = 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);
+};