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

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

@@ -92,7 +92,7 @@
       {#key info}
         <RowVirtualizer
           count={files.length}
-          itemHeight={(index) => 56 + (index + 1 < files.length ? 4 : 0)}
+          itemHeight={(index) => 48 + (index + 1 < files.length ? 4 : 0)}
         >
           {#snippet item(index)}
             {@const { info, isRecursive } = files[index]!}

src/lib/components/organisms/Gallery.svelte

@@ -100,7 +100,7 @@
   count={rows.length}
   itemHeight={(index) =>
     rows[index]!.type === "header"
-      ? 32
+      ? 28
       : Math.ceil(rows[index]!.items.length / 4) * 181 +
         (Math.ceil(rows[index]!.items.length / 4) - 1) * 4 +
         16}
@@ -109,7 +109,7 @@
   {#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-x-1", row.isLast ? "pb-4" : "pb-1"]}>
         {#each row.items as { info }}

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

@@ -130,7 +130,7 @@
     {#if files.length > 0}
       <RowVirtualizer
         count={files.length}
-        itemHeight={(index) => 48 + (index + 1 < files.length ? 4 : 0)}
+        itemHeight={(index) => 56 + (index + 1 < files.length ? 4 : 0)}
       >
         {#snippet item(index)}
           {@const file = files[index]!}

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">
-      {#each mediaFiles as file}
-        <FileThumbnailButton info={file} onclick={({ id }) => goto(`/file/${id}`)} />
-      {/each}
-    </div>
+    {#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;
+};