홈 페이지 구현

src/lib/components/molecules/Gallery/index.ts

@@ -1 +0,0 @@
-export { default as Gallery } from "./Gallery.svelte";

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";

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}

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";

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";
 

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

@@ -1,3 +1,35 @@
-<div class="flex h-full items-center justify-center p-4">
+<script lang="ts">
-  <p class="text-gray-500">아직 개발 중이에요.</p>
+  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>

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);
+};