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

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

src/trpc/client.ts

@@ -1,31 +1,47 @@
-import { createTRPCClient, httpBatchLink, TRPCClientError } from "@trpc/client";
+import { createTRPCClient, httpBatchLink, TRPCClientError, type TRPCLink } from "@trpc/client";
+import { observable } from "@trpc/server/observable";
 import superjson from "superjson";
-import { browser } from "$app/environment";
+import { goto } from "$app/navigation";
+import { navigating } from "$app/state";
 import type { AppRouter } from "./router.server";
 
-const createClient = (fetch: typeof globalThis.fetch) =>
-  createTRPCClient<AppRouter>({
-    links: [
-      httpBatchLink({
-        url: "/api/trpc",
-        maxURLLength: 4096,
-        methodOverride: "POST",
-        transformer: superjson,
-        fetch,
+// Procedures that report invalid credentials as UNAUTHORIZED, not an expired session
+const CREDENTIAL_PROCEDURES = new Set(["auth.login", "auth.upgrade"]);
+
+const sessionExpiryLink: TRPCLink<AppRouter> = () => {
+  return ({ op, next }) =>
+    observable((observer) =>
+      next(op).subscribe({
+        next: (value) => observer.next(value),
+        error: (err) => {
+          // Prefer the destination when the request failed during a navigation's load
+          const url = navigating.to?.url ?? location;
+          if (
+            err.data?.code === "UNAUTHORIZED" &&
+            !CREDENTIAL_PROCEDURES.has(op.path) &&
+            url.pathname !== "/auth/login"
+          ) {
+            void goto(`/auth/login?redirect=${encodeURIComponent(url.pathname + url.search)}`);
+          }
+          observer.error(err);
+        },
+        complete: () => observer.complete(),
       }),
-    ],
-  });
-
-let browserClient: ReturnType<typeof createClient>;
-
-export const trpc = (fetch = globalThis.fetch) => {
-  const client = browserClient ?? createClient(fetch);
-  if (browser) {
-    browserClient ??= client;
-  }
-  return client;
+    );
 };
 
+export const trpc = createTRPCClient<AppRouter>({
+  links: [
+    sessionExpiryLink,
+    httpBatchLink({
+      url: "/api/trpc",
+      maxURLLength: 4096,
+      methodOverride: "POST",
+      transformer: superjson,
+    }),
+  ],
+});
+
 export const isTRPCClientError = (e: unknown): e is TRPCClientError<AppRouter> => {
   return e instanceof TRPCClientError;
 };

src/trpc/router.server.ts

@@ -1,6 +1,5 @@
-import type { RequestEvent } from "@sveltejs/kit";
 import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
-import { createContext, router } from "./init.server";
+import { router } from "./init.server";
 import {
   authRouter,
   categoryRouter,
@@ -29,8 +28,6 @@ export const appRouter = router({
   user: userRouter,
 });
 
-export const createCaller = (event: RequestEvent) => appRouter.createCaller(createContext(event));
-
 export type AppRouter = typeof appRouter;
 export type RouterInputs = inferRouterInputs<AppRouter>;
 export type RouterOutputs = inferRouterOutputs<AppRouter>;