홈 페이지 구현

src/lib/components/molecules/Gallery/Gallery.svelte

@@ -1,128 +0,0 @@
-<script lang="ts">
-  import { createWindowVirtualizer } from "@tanstack/svelte-virtual";
-  import { untrack } from "svelte";
-  import { get, type Writable } from "svelte/store";
-  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>[];
-    onFileClick?: (file: FileInfo) => void;
-  }
-
-  let { files, onFileClick }: Props = $props();
-
-  type FileEntry = { date?: Date; info: Writable<FileInfo | null> };
-  type Row =
-    | { type: "header"; key: string; label: string }
-    | { type: "items"; key: string; items: FileEntry[] };
-
-  let filesWithDate: FileEntry[] = $state([]);
-  let rows: Row[] = $state([]);
-  let listElement: HTMLDivElement | undefined = $state();
-
-  const virtualizer = createWindowVirtualizer({
-    count: 0,
-    getItemKey: (index) => rows[index]!.key,
-    estimateSize: () => 1000, // TODO
-  });
-
-  const measureRow = (node: HTMLElement) => {
-    $virtualizer.measureElement(node);
-    return {
-      update: () => $virtualizer.measureElement(node),
-    };
-  };
-
-  $effect(() => {
-    filesWithDate = files.map((file) => {
-      const { createdAt, lastModifiedAt } = get(file) ?? {};
-      return { date: createdAt ?? lastModifiedAt, info: file };
-    });
-
-    const buildRows = () => {
-      const map = new Map<string, FileEntry[]>();
-
-      for (const file of filesWithDate) {
-        if (!file.date) continue;
-
-        const date = formatDateSortable(file.date);
-        const entries = map.get(date) ?? [];
-        entries.push(file);
-        map.set(date, entries);
-      }
-
-      const newRows: Row[] = [];
-      const sortedDates = Array.from(map.keys()).sort((a, b) => b.localeCompare(a));
-      for (const date of sortedDates) {
-        const entries = map.get(date)!;
-        sortEntries(entries, SortBy.DATE_DESC);
-
-        newRows.push({
-          type: "header",
-          key: `header-${date}`,
-          label: formatDate(entries[0]!.date!),
-        });
-        newRows.push({
-          type: "items",
-          key: `items-${date}`,
-          items: entries,
-        });
-      }
-
-      rows = newRows;
-      $virtualizer.setOptions({ count: rows.length });
-    };
-    return untrack(() => {
-      buildRows();
-
-      const unsubscribes = filesWithDate.map((file) =>
-        file.info.subscribe((value) => {
-          const newDate = value?.createdAt ?? value?.lastModifiedAt;
-          if (file.date?.getTime() === newDate?.getTime()) return;
-          file.date = newDate;
-          buildRows();
-        }),
-      );
-      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
-    });
-  });
-</script>
-
-<div bind:this={listElement} class="relative flex flex-grow flex-col">
-  <div style="height: {$virtualizer.getTotalSize()}px;">
-    {#each $virtualizer.getVirtualItems() as virtualRow (virtualRow.key)}
-      {@const row = rows[virtualRow.index]!}
-      <div
-        use:measureRow
-        data-index={virtualRow.index}
-        class="absolute left-0 top-0 w-full"
-        style="transform: translateY({virtualRow.start}px);"
-      >
-        {#if row.type === "header"}
-          <p class="pb-2 font-medium">{row.label}</p>
-        {:else}
-          <div class="grid grid-cols-4 gap-1 pb-4">
-            {#each row.items as { info }}
-              <Thumbnail {info} onclick={onFileClick} />
-            {/each}
-          </div>
-        {/if}
-      </div>
-    {/each}
-  </div>
-  {#if $virtualizer.getVirtualItems().length === 0}
-    <div class="flex h-full flex-grow items-center justify-center">
-      <p class="text-gray-500">
-        {#if files.length === 0}
-          업로드된 파일이 없어요.
-        {:else if filesWithDate.length === 0}
-          파일 목록을 불러오고 있어요.
-        {:else}
-          사진 또는 동영상이 없어요.
-        {/if}
-      </p>
-    </div>
-  {/if}
-</div>

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