feat: 서버에서 window return

Author: ldhldh07

packages/react/server.js

@@ -19,11 +19,7 @@ const setupMiddlewares = async () => {
     return viteServer;
   }
   const compression = (await import("compression")).default;
-  const sirv = (await import("sirv")).default;
-
   app.use(compression());
-  app.use(base, sirv("./dist/react", { extensions: [] }));
-
   return null;
 };
 
@@ -45,8 +41,11 @@ const get = {
   },
 };
 
-app.get("*all", async (request, response) => {
+app.use(async (request, response, next) => {
   try {
+    const accept = request.headers.accept || "";
+    if (!String(accept).includes("text/html")) return next();
+
     const url = request.originalUrl.replace(base, "");
 
     const template = await get.template(viteServer, url);
@@ -68,6 +67,11 @@ app.get("*all", async (request, response) => {
   }
 });
 
+if (prod) {
+  const sirv = (await import("sirv")).default;
+  app.use(base, sirv("./dist/react", { extensions: [] }));
+}
+
 // Start http server
 app.listen(port, () => {
   console.log(`React Server started at http://localhost:${port}`);

packages/react/src/entities/products/components/hooks/useLoadProductDetail.ts

@@ -1,10 +1,17 @@
-import { useRouterParams } from "../../../../router";
 import { useEffect } from "react";
 import { loadProductDetailForPage } from "../../productUseCase";
+import { BASE_URL } from "../../../../constants";
 
 export const useLoadProductDetail = () => {
-  const productId = useRouterParams((params) => params.id);
   useEffect(() => {
-    loadProductDetailForPage(productId);
-  }, [productId]);
+    if (typeof window === "undefined") return;
+    const rawPath = window.location.pathname;
+    const base = BASE_URL.replace(/\/$/, "");
+    const normalizedPath = base && rawPath.startsWith(base) ? rawPath.slice(base.length) || "/" : rawPath;
+    const match = normalizedPath.match(/^\/product\/(\d+)(?:\/?|\?|$)/);
+    const productId = match ? match[1] : undefined;
+    if (productId) {
+      loadProductDetailForPage(productId);
+    }
+  }, []);
 };

packages/react/src/entities/products/productUseCase.ts

@@ -1,13 +1,24 @@
 import { getCategories, getProduct, getProducts } from "../../api/productApi";
-import { router } from "../../router";
 import type { StringRecord } from "../../types";
 import { initialProductState, PRODUCT_ACTIONS, productStore } from "./productStore";
 import { isNearBottom } from "../../utils";
 
 const createErrorMessage = (error: unknown, defaultMessage = "알 수 없는 오류 발생") =>
   error instanceof Error ? error.message : defaultMessage;
 
+const getRouter = async () => {
+  if (typeof window === "undefined") {
+    return {
+      query: {},
+      route: { path: "/" },
+    };
+  }
+  const mod = await import("../../router");
+  return mod.router;
+};
+
 export const loadProductsAndCategories = async () => {
+  const router = await getRouter();
   router.query = { current: undefined }; // 항상 첫 페이지로 초기화
   productStore.dispatch({
     type: PRODUCT_ACTIONS.SETUP,
@@ -54,6 +65,7 @@ export const loadProducts = async (resetList = true) => {
       payload: { loading: true, status: "pending", error: null },
     });
 
+    const router = await getRouter();
     const {
       products,
       pagination: { total },
@@ -83,22 +95,27 @@ export const loadMoreProducts = async () => {
     return;
   }
 
+  const router = await getRouter();
   router.query = { current: Number(router.query.current ?? 1) + 1 };
   await loadProducts(false);
 };
-export const searchProducts = (search: string) => {
+export const searchProducts = async (search: string) => {
+  const router = await getRouter();
   router.query = { search, current: 1 };
 };
 
-export const setCategory = (categoryData: StringRecord) => {
+export const setCategory = async (categoryData: StringRecord) => {
+  const router = await getRouter();
   router.query = { ...categoryData, current: 1 };
 };
 
-export const setSort = (sort: string) => {
+export const setSort = async (sort: string) => {
+  const router = await getRouter();
   router.query = { sort, current: 1 };
 };
 
-export const setLimit = (limit: number) => {
+export const setLimit = async (limit: number) => {
+  const router = await getRouter();
   router.query = { limit, current: 1 };
 };
 
@@ -174,6 +191,7 @@ export const loadRelatedProducts = async (category2: string, excludeProductId: s
 
 export const loadNextProducts = async () => {
   // 현재 라우트가 홈이 아니면 무한 스크롤 비활성화
+  const router = await getRouter();
   if (router.route?.path !== "/") {
     return;
   }

packages/react/src/main.tsx

@@ -14,7 +14,9 @@ const enableMocking = () =>
   );
 
 function main() {
-  router.start();
+  if (typeof window !== "undefined") {
+    router.start();
+  }
 
   const rootElement = document.getElementById("root")!;
   createRoot(rootElement).render(<App />);

packages/react/src/utils/log.ts

@@ -6,12 +6,18 @@ declare global {
   }
 }
 
-window.__spyCalls = [];
-window.__spyCallsClear = () => {
+const isClient = typeof window !== "undefined";
+
+if (isClient) {
   window.__spyCalls = [];
-};
+  window.__spyCallsClear = () => {
+    window.__spyCalls = [];
+  };
+}
 
 export const log: typeof console.log = (...args) => {
-  window.__spyCalls.push(args);
+  if (isClient) {
+    window.__spyCalls.push(args);
+  }
   return console.log(...args);
 };