사진 또는 동영상이 없을 때 홈 페이지의 레이아웃이 깨지는 버그 수정

src/lib/components/atoms/RowVirtualizer.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { createWindowVirtualizer } from "@tanstack/svelte-virtual";
+  import { untrack, type Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  interface Props {
+    class?: ClassValue;
+    count: number;
+    item: Snippet<[index: number]>;
+    itemHeight: (index: number) => number;
+    placeholder?: Snippet;
+  }
+
+  let { class: className, count, item, itemHeight, placeholder }: Props = $props();
+
+  const virtualizer = $derived(
+    createWindowVirtualizer({
+      count: untrack(() => count),
+      estimateSize: itemHeight,
+    }),
+  );
+
+  const measureItem = (node: HTMLElement) => {
+    $effect(() => $virtualizer.measureElement(node));
+  };
+
+  $effect(() => $virtualizer.setOptions({ count }));
+</script>
+
+<div class={["relative", className]}>
+  <div style:height="{$virtualizer.getTotalSize()}px">
+    {#each $virtualizer.getVirtualItems() as virtualItem (virtualItem.key)}
+      <div
+        class="absolute left-0 top-0 w-full"
+        style:transform="translateY({virtualItem.start}px)"
+        data-index={virtualItem.index}
+        use:measureItem
+      >
+        {@render item(virtualItem.index)}
+      </div>
+    {/each}
+  </div>
+  {#if placeholder && $virtualizer.getVirtualItems().length === 0}
+    {@render placeholder()}
+  {/if}
+</div>

src/lib/components/atoms/index.ts

@@ -3,3 +3,4 @@ export * from "./buttons";
 export * from "./divs";
 export * from "./inputs";
 export { default as Modal } from "./Modal.svelte";
+export { default as RowVirtualizer } from "./RowVirtualizer.svelte";

src/lib/components/organisms/Category/Category.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { untrack } from "svelte";
   import { get, type Writable } from "svelte/store";
-  import { CheckBox } from "$lib/components/atoms";
+  import { CheckBox, RowVirtualizer } from "$lib/components/atoms";
   import { SubCategories, type SelectedCategory } from "$lib/components/molecules";
   import { getFileInfo, type FileInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
@@ -89,19 +89,26 @@
           <p class="font-medium">하위 카테고리의 파일</p>
         </CheckBox>
       </div>
-      <div class="space-y-1">
       {#key info}
-          {#each files as { info, isRecursive }}
+        <RowVirtualizer
+          count={files.length}
+          itemHeight={(index) => 48 + (index + 1 < files.length ? 4 : 0)}
+        >
+          {#snippet item(index)}
+            {@const { info, isRecursive } = files[index]!}
+            <div class={[index + 1 < files.length && "pb-1"]}>
               <File
                 {info}
                 onclick={onFileClick}
                 onRemoveClick={!isRecursive ? onFileRemoveClick : undefined}
               />
-          {:else}
-            <p class="text-gray-500 text-center">이 카테고리에 추가된 파일이 없어요.</p>
-          {/each}
-        {/key}
             </div>
+          {/snippet}
+          {#snippet placeholder()}
+            <p class="text-center text-gray-500">이 카테고리에 추가된 파일이 없어요.</p>
+          {/snippet}
+        </RowVirtualizer>
+      {/key}
     </div>
   {/if}
 </div>

src/lib/components/organisms/Gallery.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { createWindowVirtualizer } from "@tanstack/svelte-virtual";
   import { untrack } from "svelte";
   import { get, type Writable } from "svelte/store";
-  import { FileThumbnailButton } from "$lib/components/atoms";
+  import { FileThumbnailButton, RowVirtualizer } from "$lib/components/atoms";
   import type { FileInfo } from "$lib/modules/filesystem";
   import { formatDate, formatDateSortable, SortBy, sortEntries } from "$lib/utils";
 
@@ -17,25 +16,11 @@
     | { 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[] };
+    | { type: "header"; label: string }
+    | { type: "items"; items: FileEntry[]; isLast: boolean };
 
   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) => {
@@ -76,18 +61,19 @@
 
         newRows.push({
           type: "header",
-          key: `header-${date}`,
           label: formatDate(entries[0]!.date!),
         });
+
+        for (let i = 0; i < entries.length; i += 4) {
           newRows.push({
             type: "items",
-          key: `items-${date}`,
-          items: entries,
+            items: entries.slice(i, i + 4),
+            isLast: i + 4 >= entries.length,
           });
         }
+      }
 
       rows = newRows;
-      $virtualizer.setOptions({ count: rows.length });
     };
     return untrack(() => {
       buildRows();
@@ -110,29 +96,29 @@
   });
 </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);"
+<RowVirtualizer
+  count={rows.length}
+  itemHeight={(index) =>
+    rows[index]!.type === "header"
+      ? 28
+      : Math.ceil(rows[index]!.items.length / 4) * 181 +
+        (Math.ceil(rows[index]!.items.length / 4) - 1) * 4 +
+        16}
+  class="flex flex-grow flex-col"
 >
+  {#snippet item(index)}
+    {@const row = rows[index]!}
     {#if row.type === "header"}
-          <p class="pb-2 font-medium">{row.label}</p>
+      <p class="pb-2 text-sm font-medium">{row.label}</p>
     {:else}
-          <div class="grid grid-cols-4 gap-1 pb-4">
+      <div class={["grid grid-cols-4 gap-x-1", row.isLast ? "pb-4" : "pb-1"]}>
         {#each row.items as { info }}
           <FileThumbnailButton {info} onclick={onFileClick} />
         {/each}
       </div>
     {/if}
-      </div>
-    {/each}
-  </div>
-  {#if $virtualizer.getVirtualItems().length === 0}
+  {/snippet}
+  {#snippet placeholder()}
     <div class="flex h-full flex-grow items-center justify-center">
       <p class="text-gray-500">
         {#if files.length === 0}
@@ -144,5 +130,5 @@
         {/if}
       </p>
     </div>
-  {/if}
-</div>
+  {/snippet}
+</RowVirtualizer>

src/lib/modules/filesystem.ts

@@ -1,4 +1,3 @@
-import { TRPCClientError } from "@trpc/client";
 import { get, writable, type Writable } from "svelte/store";
 import {
   getDirectoryInfos as getDirectoryInfosFromIndexedDB,
@@ -18,7 +17,7 @@ import {
   type CategoryId,
 } from "$lib/indexedDB";
 import { unwrapDataKey, decryptString } from "$lib/modules/crypto";
-import { trpc } from "$trpc/client";
+import { trpc, isTRPCClientError } from "$trpc/client";
 
 export type DirectoryInfo =
   | {
@@ -114,7 +113,7 @@ const fetchDirectoryInfoFromServer = async (
   try {
     data = await trpc().directory.get.query({ id });
   } catch (e) {
-    if (e instanceof TRPCClientError && e.data?.code === "NOT_FOUND") {
+    if (isTRPCClientError(e) && e.data?.code === "NOT_FOUND") {
       info.set(null);
       await deleteDirectoryInfo(id as number);
       return;
@@ -187,7 +186,7 @@ const fetchFileInfoFromServer = async (
   try {
     metadata = await trpc().file.get.query({ id });
   } catch (e) {
-    if (e instanceof TRPCClientError && e.data?.code === "NOT_FOUND") {
+    if (isTRPCClientError(e) && e.data?.code === "NOT_FOUND") {
       info.set(null);
       await deleteFileInfo(id);
       return;
@@ -283,7 +282,7 @@ const fetchCategoryInfoFromServer = async (
   try {
     data = await trpc().category.get.query({ id });
   } catch (e) {
-    if (e instanceof TRPCClientError && e.data?.code === "NOT_FOUND") {
+    if (isTRPCClientError(e) && e.data?.code === "NOT_FOUND") {
       info.set(null);
       await deleteCategoryInfo(id as number);
       return;

src/lib/services/auth.ts

@@ -1,6 +1,5 @@
-import { TRPCClientError } from "@trpc/client";
 import { encodeToBase64, decryptChallenge, signMessageRSA } from "$lib/modules/crypto";
-import { trpc } from "$trpc/client";
+import { trpc, isTRPCClientError } from "$trpc/client";
 
 export const requestSessionUpgrade = async (
   encryptKeyBase64: string,
@@ -16,7 +15,7 @@ export const requestSessionUpgrade = async (
       sigPubKey: verifyKeyBase64,
     }));
   } catch (e) {
-    if (e instanceof TRPCClientError && e.data?.code === "FORBIDDEN") {
+    if (isTRPCClientError(e) && e.data?.code === "FORBIDDEN") {
       return [false, "Unregistered client"] as const;
     }
     return [false] as const;
@@ -31,7 +30,7 @@ export const requestSessionUpgrade = async (
       force,
     });
   } catch (e) {
-    if (e instanceof TRPCClientError && e.data?.code === "CONFLICT") {
+    if (isTRPCClientError(e) && e.data?.code === "CONFLICT") {
       return [false, "Already logged in"] as const;
     }
     return [false] as const;

src/lib/services/key.ts

@@ -1,4 +1,3 @@
-import { TRPCClientError } from "@trpc/client";
 import { storeMasterKeys } from "$lib/indexedDB";
 import {
   encodeToBase64,
@@ -11,7 +10,7 @@ import {
 } from "$lib/modules/crypto";
 import { requestSessionUpgrade } from "$lib/services/auth";
 import { masterKeyStore, type ClientKeys } from "$lib/stores";
-import { trpc } from "$trpc/client";
+import { trpc, isTRPCClientError } from "$trpc/client";
 
 export const requestClientRegistration = async (
   encryptKeyBase64: string,
@@ -112,10 +111,7 @@ export const requestInitialMasterKeyAndHmacSecretRegistration = async (
       mekSig: await signMasterKeyWrapped(masterKeyWrapped, 1, signKey),
     });
   } catch (e) {
-    if (
-      e instanceof TRPCClientError &&
-      (e.data?.code === "FORBIDDEN" || e.data?.code === "CONFLICT")
-    ) {
+    if (isTRPCClientError(e) && (e.data?.code === "FORBIDDEN" || e.data?.code === "CONFLICT")) {
       return true;
     }
     // TODO: Error Handling

src/routes/(fullscreen)/gallery/+page.server.ts

@@ -0,0 +1,7 @@
+import { createCaller } from "$trpc/router.server";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async (event) => {
+  const files = await createCaller(event).file.list();
+  return { files };
+};

src/routes/(fullscreen)/gallery/+page.ts

@@ -1,7 +0,0 @@
-import { trpc } from "$trpc/client";
-import type { PageLoad } from "./$types";
-
-export const load: PageLoad = async ({ fetch }) => {
-  const files = await trpc(fetch).file.list.query();
-  return { files };
-};

src/routes/(fullscreen)/settings/thumbnail/+page.server.ts

@@ -0,0 +1,7 @@
+import { createCaller } from "$trpc/router.server";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async (event) => {
+  const files = await createCaller(event).file.listWithoutThumbnail();
+  return { files };
+};

src/routes/(fullscreen)/settings/thumbnail/+page.ts

@@ -1,7 +0,0 @@
-import { trpc } from "$trpc/client";
-import type { PageLoad } from "./$types";
-
-export const load: PageLoad = async ({ fetch }) => {
-  const files = await trpc(fetch).file.listWithoutThumbnail.query();
-  return { files };
-};

src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { untrack } from "svelte";
   import { get, type Writable } from "svelte/store";
-  import { ActionEntryButton } from "$lib/components/atoms";
+  import { ActionEntryButton, RowVirtualizer } from "$lib/components/atoms";
   import { DirectoryEntryLabel } from "$lib/components/molecules";
   import {
     getDirectoryInfo,
@@ -127,13 +127,23 @@
     {#each subDirectories as { info }}
       <SubDirectory {info} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
     {/each}
-    {#each files as file}
+    {#if files.length > 0}
+      <RowVirtualizer
+        count={files.length}
+        itemHeight={(index) => 56 + (index + 1 < files.length ? 4 : 0)}
+      >
+        {#snippet item(index)}
+          {@const file = files[index]!}
+          <div class={index + 1 < files.length ? "pb-1" : ""}>
             {#if file.type === "file"}
               <File info={file.info} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
             {:else}
               <UploadingFile status={file.info} />
             {/if}
-    {/each}
+          </div>
+        {/snippet}
+      </RowVirtualizer>
+    {/if}
   </div>
 {:else}
   <div class="flex flex-grow items-center justify-center">

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

@@ -21,14 +21,16 @@
 
 <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">
+  <div class="rounded-xl bg-white p-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">
+    {#if mediaFiles.length > 0}
+      <div class="grid grid-cols-4 gap-2 p-2">
         {#each mediaFiles as file}
           <FileThumbnailButton info={file} onclick={({ id }) => goto(`/file/${id}`)} />
         {/each}
       </div>
+    {/if}
   </div>
 </div>

src/routes/(main)/menu/+page.server.ts

@@ -0,0 +1,7 @@
+import { createCaller } from "$trpc/router.server";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async (event) => {
+  const { nickname } = await createCaller(event).user.get();
+  return { nickname };
+};

src/routes/(main)/menu/+page.ts

@@ -1,7 +0,0 @@
-import { trpc } from "$trpc/client";
-import type { PageLoad } from "./$types";
-
-export const load: PageLoad = async ({ fetch }) => {
-  const { nickname } = await trpc(fetch).user.get.query();
-  return { nickname };
-};

src/trpc/client.ts

@@ -1,4 +1,4 @@
-import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { createTRPCClient, httpBatchLink, TRPCClientError } from "@trpc/client";
 import superjson from "superjson";
 import { browser } from "$app/environment";
 import type { AppRouter } from "./router.server";
@@ -24,3 +24,7 @@ export const trpc = (fetch = globalThis.fetch) => {
   }
   return client;
 };
+
+export const isTRPCClientError = (e: unknown): e is TRPCClientError<AppRouter> => {
+  return e instanceof TRPCClientError;
+};