SSR을 비활성화하여 SPA로 전환

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/routes/(fullscreen)/auth/changePassword/service.ts

@@ -2,7 +2,7 @@ import { trpc } from "$trpc/client";
 
 export const requestPasswordChange = async (oldPassword: string, newPassword: string) => {
   try {
-    await trpc().auth.changePassword.mutate({ oldPassword, newPassword });
+    await trpc.auth.changePassword.mutate({ oldPassword, newPassword });
     return true;
   } catch {
     // TODO: Error Handling

src/routes/(fullscreen)/auth/login/+page.server.ts

@@ -1,12 +0,0 @@
-import { redirect } from "@sveltejs/kit";
-import type { PageServerLoad } from "./$types";
-
-export const load: PageServerLoad = async ({ locals, url }) => {
-  const redirectPath = url.searchParams.get("redirect") || "/home";
-
-  if (locals.session) {
-    redirect(302, redirectPath);
-  }
-
-  return { redirectPath };
-};

src/routes/(fullscreen)/auth/login/+page.ts

@@ -0,0 +1,6 @@
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ url }) => {
+  const redirectPath = url.searchParams.get("redirect") || "/home";
+  return { redirectPath };
+};

src/routes/(fullscreen)/auth/login/service.ts

@@ -9,7 +9,7 @@ export {
 
 export const requestLogin = async (email: string, password: string) => {
   try {
-    await trpc().auth.login.mutate({ email, password });
+    await trpc.auth.login.mutate({ email, password });
     return true;
   } catch {
     // TODO: Error Handling

src/routes/(fullscreen)/file/[id]/service.ts

@@ -41,7 +41,7 @@ export const requestThumbnailUpload = async (
 
 export const requestFileAdditionToCategory = async (fileId: number, categoryId: number) => {
   try {
-    await trpc().category.addFile.mutate({ id: categoryId, file: fileId });
+    await trpc.category.addFile.mutate({ id: categoryId, file: fileId });
     return true;
   } catch {
     // TODO: Error Handling
@@ -52,9 +52,9 @@ export const requestFileAdditionToCategory = async (fileId: number, categoryId:
 export const requestFavoriteToggle = async (fileId: number, isFavorite: boolean) => {
   try {
     if (isFavorite) {
-      await trpc().favorites.removeFile.mutate({ id: fileId });
+      await trpc.favorites.removeFile.mutate({ id: fileId });
     } else {
-      await trpc().favorites.addFile.mutate({ id: fileId });
+      await trpc.favorites.addFile.mutate({ id: fileId });
     }
     return true;
   } catch {

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

@@ -1,7 +0,0 @@
-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

@@ -0,0 +1,8 @@
+import { trpc } from "$trpc/client";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ parent }) => {
+  await parent(); // Wait for the key guard in the root layout
+  const files = await trpc.file.list.query();
+  return { files };
+};

src/routes/(fullscreen)/search/service.ts

@@ -20,7 +20,7 @@ export interface SearchResult {
 }
 
 export const requestSearch = async (filter: SearchFilter, masterKey: CryptoKey) => {
-  const { directories: directoriesRaw, files: filesRaw } = await trpc().search.search.query({
+  const { directories: directoriesRaw, files: filesRaw } = await trpc.search.search.query({
     ancestor: filter.ancestorId,
     inFavorites: filter.inFavorites,
     includeCategories: filter.categories

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

@@ -1,7 +0,0 @@
-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

@@ -0,0 +1,8 @@
+import { trpc } from "$trpc/client";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ parent }) => {
+  await parent(); // Wait for the key guard in the root layout
+  const files = await trpc.file.listWithoutThumbnail.query();
+  return { files };
+};

src/routes/(main)/category/[[id]]/service.svelte.ts

@@ -30,7 +30,7 @@ export const requestCategoryRename = async (category: SelectedCategory, newName:
   const newNameEncrypted = await encryptString(newName, category.dataKey.key);
 
   try {
-    await trpc().category.rename.mutate({
+    await trpc.category.rename.mutate({
       id: category.id,
       dekVersion: category.dataKey.version,
       name: newNameEncrypted.ciphertext,
@@ -45,7 +45,7 @@ export const requestCategoryRename = async (category: SelectedCategory, newName:
 
 export const requestCategoryDeletion = async (category: SelectedCategory) => {
   try {
-    await trpc().category.delete.mutate({ id: category.id });
+    await trpc.category.delete.mutate({ id: category.id });
     return true;
   } catch {
     // TODO: Error Handling

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

@@ -36,7 +36,7 @@ export const requestHmacSecretDownload = async (masterKey: CryptoKey) => {
 
   let hmacSecretsWrapped;
   try {
-    hmacSecretsWrapped = await trpc().hsk.list.query();
+    hmacSecretsWrapped = await trpc.hsk.list.query();
   } catch {
     // TODO: Error Handling
     return false;
@@ -64,7 +64,7 @@ export const requestDirectoryCreation = async (
   const nameEncrypted = await encryptString(name, dataKey);
 
   try {
-    await trpc().directory.create.mutate({
+    await trpc.directory.create.mutate({
       parent: parentId,
       mekVersion: masterKey.version,
       dek: await wrapDataKey(dataKey, masterKey.key),
@@ -109,14 +109,14 @@ export const requestEntryRename = async (entry: SelectedEntry, newName: string)
 
   try {
     if (entry.type === "directory") {
-      await trpc().directory.rename.mutate({
+      await trpc.directory.rename.mutate({
         id: entry.id,
         dekVersion: entry.dataKey.version,
         name: newNameEncrypted.ciphertext,
         nameIv: newNameEncrypted.iv,
       });
     } else {
-      await trpc().file.rename.mutate({
+      await trpc.file.rename.mutate({
         id: entry.id,
         dekVersion: entry.dataKey.version,
         name: newNameEncrypted.ciphertext,
@@ -133,7 +133,7 @@ export const requestEntryRename = async (entry: SelectedEntry, newName: string)
 export const requestEntryDeletion = async (entry: SelectedEntry) => {
   try {
     if (entry.type === "directory") {
-      const { deletedFiles } = await trpc().directory.delete.mutate({ id: entry.id });
+      const { deletedFiles } = await trpc.directory.delete.mutate({ id: entry.id });
       await Promise.all(
         deletedFiles.flatMap((fileId) => [
           deleteFileCache(fileId),
@@ -141,7 +141,7 @@ export const requestEntryDeletion = async (entry: SelectedEntry) => {
         ]),
       );
     } else {
-      await trpc().file.delete.mutate({ id: entry.id });
+      await trpc.file.delete.mutate({ id: entry.id });
       await Promise.all([deleteFileCache(entry.id), deleteFileThumbnailCache(entry.id)]);
     }
     return true;
@@ -155,15 +155,15 @@ export const requestFavoriteToggle = async (entry: SelectedEntry) => {
   try {
     if (entry.type === "directory") {
       if (entry.isFavorite) {
-        await trpc().favorites.removeDirectory.mutate({ id: entry.id });
+        await trpc.favorites.removeDirectory.mutate({ id: entry.id });
       } else {
-        await trpc().favorites.addDirectory.mutate({ id: entry.id });
+        await trpc.favorites.addDirectory.mutate({ id: entry.id });
       }
     } else {
       if (entry.isFavorite) {
-        await trpc().favorites.removeFile.mutate({ id: entry.id });
+        await trpc.favorites.removeFile.mutate({ id: entry.id });
       } else {
-        await trpc().favorites.addFile.mutate({ id: entry.id });
+        await trpc.favorites.addFile.mutate({ id: entry.id });
       }
     }
     return true;

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

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

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

@@ -0,0 +1,8 @@
+import { trpc } from "$trpc/client";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ parent }) => {
+  await parent(); // Wait for the key guard in the root layout
+  const favorites = await trpc.favorites.get.query();
+  return { favorites };
+};

src/routes/(main)/favorites/service.ts

@@ -52,9 +52,9 @@ export const requestFavoriteEntries = async (
 export const requestRemoveFavorite = async (type: "file" | "directory", id: number) => {
   try {
     if (type === "directory") {
-      await trpc().favorites.removeDirectory.mutate({ id });
+      await trpc.favorites.removeDirectory.mutate({ id });
     } else {
-      await trpc().favorites.removeFile.mutate({ id });
+      await trpc.favorites.removeFile.mutate({ id });
     }
     return true;
   } catch {

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

@@ -1,7 +0,0 @@
-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

@@ -0,0 +1,8 @@
+import { trpc } from "$trpc/client";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ parent }) => {
+  await parent(); // Wait for the key guard in the root layout
+  const { nickname } = await trpc.user.get.query();
+  return { nickname };
+};

src/routes/+layout.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { goto as svelteGoto } from "$app/navigation";
   import { getDownloadingFiles, getUploadingFiles } from "$lib/modules/file";
-  import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import "../app.css";
 
   let { children } = $props();
@@ -12,23 +9,6 @@
       e.preventDefault();
     }
   };
-
-  onMount(async () => {
-    const goto = async (url: string) => {
-      const whitelist = ["/auth/login", "/key", "/client/pending"];
-      if (!whitelist.some((path) => location.pathname.startsWith(path))) {
-        await svelteGoto(
-          `${url}?redirect=${encodeURIComponent(location.pathname + location.search)}`,
-        );
-      }
-    };
-
-    if (!$clientKeyStore) {
-      await goto("/key/generate");
-    } else if (!$masterKeyStore) {
-      await goto("/client/pending");
-    }
-  });
 </script>
 
 <svelte:window onbeforeunload={protectFileUploadAndDownload} />

src/routes/+layout.ts

@@ -0,0 +1,19 @@
+import { redirect } from "@sveltejs/kit";
+import { get } from "svelte/store";
+import { clientKeyStore, masterKeyStore } from "$lib/stores";
+import type { LayoutLoad } from "./$types";
+
+export const ssr = false;
+
+const KEYLESS_PATHS = ["/auth/login", "/key", "/client/pending"];
+
+export const load: LayoutLoad = ({ url }) => {
+  if (KEYLESS_PATHS.some((path) => url.pathname.startsWith(path))) return;
+
+  const redirectQuery = `?redirect=${encodeURIComponent(url.pathname + url.search)}`;
+  if (!get(clientKeyStore)) {
+    redirect(307, "/key/generate" + redirectQuery);
+  } else if (!get(masterKeyStore)) {
+    redirect(307, "/client/pending" + redirectQuery);
+  }
+};

src/routes/+page.ts

@@ -0,0 +1,6 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = () => {
+  redirect(302, "/home");
+};

src/routes/+server.ts

@@ -1,6 +0,0 @@
-import { redirect } from "@sveltejs/kit";
-import type { RequestHandler } from "./$types";
-
-export const GET: RequestHandler = () => {
-  redirect(302, "/home");
-};