fix: 서버사이드 에러 해결

Author: chan9yu

packages/lib/src/router/ServerRouter.ts

@@ -54,10 +54,11 @@ export class ServerRouter<Handler extends AnyFunction> {
     return url;
   }
 
-  private readonly routes = new Map<string, Route<Handler>>();
+  private readonly _routes = new Map<string, Route<Handler>>();
   private readonly baseUrl;
   private currentRoute: CurrentRouter<Handler> | null = null;
   private currentUrl = "/";
+  private _query: StringRecord = {};
 
   constructor(initRoutes: Record<string, Handler>, baseUrl = "") {
     this.baseUrl = baseUrl.replace(/\/$/, "");
@@ -68,16 +69,11 @@ export class ServerRouter<Handler extends AnyFunction> {
   }
 
   get query(): StringRecord {
-    if (!this.currentUrl) {
-      throw new Error("setter를 통해 url 값을 할당해 주세요!");
-    }
-
-    return ServerRouter.parseQuery(this.currentUrl);
+    return this._query;
   }
 
   set query(newQuery: QueryPayload) {
-    const newUrl = ServerRouter.getUrl(newQuery, this.currentUrl, this.baseUrl);
-    this.push(newUrl);
+    this._query = newQuery as StringRecord;
   }
 
   get params() {
@@ -96,10 +92,14 @@ export class ServerRouter<Handler extends AnyFunction> {
     return (fn: AnyFunction) => () => fn();
   }
 
+  get routes() {
+    return this._routes;
+  }
+
   public addRoute(path: string, handler: Handler) {
     if (path === "*") {
       const regex = new RegExp(".*");
-      this.routes.set(path, {
+      this._routes.set(path, {
         regex,
         paramNames: [],
         handler,
@@ -119,7 +119,7 @@ export class ServerRouter<Handler extends AnyFunction> {
 
     const regex = new RegExp(`^${regexPath}$`);
 
-    this.routes.set(path, {
+    this._routes.set(path, {
       regex,
       paramNames,
       handler,
@@ -144,8 +144,11 @@ export class ServerRouter<Handler extends AnyFunction> {
   private findRoute(url = this.baseUrl) {
     const { pathname } = new URL(url, "http://localhost");
 
-    for (const [routePath, route] of this.routes) {
-      const match = pathname.match(route.regex);
+    const pathToMatch =
+      this.baseUrl && pathname.startsWith(this.baseUrl) ? pathname.slice(this.baseUrl.length) || "/" : pathname;
+
+    for (const [routePath, route] of this._routes) {
+      const match = pathToMatch.match(route.regex);
       if (match) {
         // 매치된 파라미터들을 객체로 변환
         const params: StringRecord = {};

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

@@ -123,7 +123,6 @@ const productReducer = (state: typeof initialProductState, action: any) => {
   }
 };
 
-/**
- * 상품 스토어 생성
- */
-export const productStore = createStore(productReducer, initialProductState);
+export const createProductStore = () => createStore(productReducer, initialProductState);
+
+export const productStore = createProductStore();

packages/react/src/main-server.tsx

@@ -1,33 +1,39 @@
+import { ServerRouter } from "@hanghae-plus/lib";
 import { renderToString } from "react-dom/server";
 
 import { getCategories, getProduct, getProducts } from "./api";
 import { App } from "./App";
+import { BASE_URL } from "./constants";
 import { initialProductState, PRODUCT_ACTIONS, productStore, type Product } from "./entities";
 import { HomePage, NotFoundPage, ProductDetailPage } from "./pages";
 import { router } from "./router";
 
 export class SSRService {
   constructor() {
-    router.addRoute("/", HomePage);
-    router.addRoute("/product/:id/", ProductDetailPage);
-    router.addRoute(".*", NotFoundPage);
+    if (router instanceof ServerRouter && (router.routes?.size === 0 || !router.routes)) {
+      router.addRoute("/", HomePage);
+      router.addRoute("/product/:id/", ProductDetailPage);
+      router.addRoute(".*", NotFoundPage);
+    }
   }
 
   async render(url: string, query: Record<string, string>) {
-    router.push(url);
+    productStore.dispatch({
+      type: PRODUCT_ACTIONS.SETUP,
+      payload: initialProductState,
+    });
+
+    const fullUrl = BASE_URL && BASE_URL !== "/" ? `${BASE_URL}${url}` : url;
+    router.push(fullUrl);
     router.query = query;
 
     const route = router.route;
 
-    if (!route || route.path === ".*") {
-      return this.#renderNotFoundPage();
-    }
-
-    if (route.path === "/") {
+    if (route?.path === "/") {
       return this.#renderHomePage(query);
     }
 
-    if (route.path === "/product/:id/") {
+    if (route?.path === "/product/:id/") {
       const productId = route.params?.id;
       if (productId) {
         return this.#renderProductDetailPage(productId);
@@ -44,7 +50,7 @@ export class SSRService {
       productStore.dispatch({
         type: PRODUCT_ACTIONS.SETUP,
         payload: {
-          products: products.products,
+          products,
           categories,
           totalCount: products.pagination.total,
           loading: false,
@@ -53,13 +59,19 @@ export class SSRService {
       });
 
       const state = productStore.getState();
+
       return {
         head: /* HTML */ `<title>쇼핑몰 - 홈</title>`,
         html: renderToString(<App />),
         data: {
           products: state.products,
-          categories: state.categories,
           totalCount: state.totalCount,
+          currentProduct: state.currentProduct,
+          relatedProducts: state.relatedProducts,
+          loading: state.loading,
+          error: state.error,
+          status: state.status,
+          categories: state.categories,
         },
       };
     } catch (error) {
@@ -89,7 +101,12 @@ export class SSRService {
             limit: "20",
             page: "1",
           });
-          relatedProducts = relatedResponse.products.filter((p) => p.productId !== productId);
+          relatedProducts = relatedResponse.products
+            .filter((p) => p.productId !== productId)
+            .map((p) => ({
+              ...p,
+              image: p.image?.replace(/\.(\d+\.)?jpg$/, ".jpg"),
+            }));
         } catch (error) {
           console.error("관련 상품 로드 실패:", error);
         }
@@ -110,10 +127,20 @@ export class SSRService {
       });
 
       const state = productStore.getState();
+
       return {
         head: /* HTML */ `<title>${product.title} - 쇼핑몰</title>`,
         html: renderToString(<App />),
-        data: state,
+        data: {
+          products: state.products,
+          totalCount: state.totalCount,
+          currentProduct: state.currentProduct,
+          relatedProducts: state.relatedProducts,
+          loading: state.loading,
+          error: state.error,
+          status: state.status,
+          categories: state.categories,
+        },
       };
     } catch (error) {
       console.error("상품 상세 페이지 렌더링 실패:", error);

packages/react/src/router/router.ts

@@ -5,7 +5,7 @@ import { BASE_URL } from "../constants";
 
 function createRouter() {
   const RouterClass = isServer() ? ServerRouter : SPARouter;
-  return new RouterClass<FunctionComponent>(BASE_URL);
+  return new RouterClass<FunctionComponent>({}, BASE_URL);
 }
 
 export const router = createRouter();

packages/react/static-site-generate.js

@@ -47,9 +47,10 @@ export class SSGBuilder {
 
   async #buildProductPages() {
     const { getProducts } = await this.#viteServer.ssrLoadModule("./src/api/productApi.ts");
-    const { products } = await getProducts();
+    const response = await getProducts();
+    const products = response.products || [];
 
-    const buildTasks = (products ?? []).map(({ productId }) => this.#buildPage(`/product/${productId}/`));
+    const buildTasks = products.map(({ productId }) => this.#buildPage(`/product/${productId}/`));
     await Promise.all(buildTasks);
   }