fix: 몰라

JunilHwang · JunilHwang · commit 2a66c6c9b44e · 2025-09-05T00:59:05.000+09:00
diff --git a/packages/react/index.html b/packages/react/index.html
@@ -18,6 +18,7 @@
       }
     };
   </script>
+  <!--app-data-->
 </head>
 <body class="bg-gray-50">
 <div id="root"><!--app-html--></div>
diff --git a/packages/react/server.ts b/packages/react/server.ts
@@ -54,12 +54,14 @@ app.use("*all", async (req, res) => {
 
     const rendered = await render(pathname, req.query);
 
+    console.log(rendered);
+
     const serialized = safeSerialize(rendered.__INITIAL_DATA__);
     const initialDataScript = `<script>window.__INITIAL_DATA__ = ${serialized};</script>`;
     const html = template
       .replace(`<!--app-head-->`, rendered.head ?? "")
       .replace(`<!--app-html-->`, rendered.html ?? "")
-      .replace(`<!-- app-data -->`, initialDataScript);
+      .replace(`<!--app-data-->`, initialDataScript);
 
     res.status(200).set({ "Content-Type": "text/html" }).send(html);
   } catch (e) {
diff --git a/packages/react/src/entities/products/components/ProductDetail.tsx b/packages/react/src/entities/products/components/ProductDetail.tsx
@@ -1,14 +1,13 @@
 import { useState } from "react";
-import { router } from "../../../router";
 import type { StringRecord } from "../../../types";
 import type { Product } from "../types";
 import { PublicImage } from "../../../components";
 import RelatedProducts from "./RelatedProducts";
 import { useCartAddCommand } from "../../carts";
-import { log } from "../../../utils";
+import { useRouter } from "../../../router/hooks/useRouter.ts";
 
 export function ProductDetail(product: Readonly<Product>) {
-  log(`ProductDetail: ${product.productId}`);
+  const router = useRouter();
   const addToCart = useCartAddCommand();
   const { productId, title, image, lprice, brand, category1, category2 } = product;
   const [cartQuantity, setCartQuantity] = useState(1);
diff --git a/packages/react/src/entities/products/components/ProductList.tsx b/packages/react/src/entities/products/components/ProductList.tsx
@@ -1,12 +1,13 @@
 import { ProductCard, ProductCardSkeleton } from "./ProductCard";
-import { router } from "../../../router";
 import { PublicImage } from "../../../components";
 import { useProductStoreContext } from "../hooks";
+import { useRouter } from "../../../router/hooks/useRouter.ts";
 
 /**
  * 상품 목록 컴포넌트
  */
 export function ProductList() {
+  const router = useRouter();
   const {
     state: { products, loading, error, totalCount },
     action: { loadProducts },
diff --git a/packages/react/src/entities/products/components/RelatedProducts.tsx b/packages/react/src/entities/products/components/RelatedProducts.tsx
@@ -1,7 +1,8 @@
-import { router } from "../../../router";
 import { useProductStoreContext } from "../hooks";
+import { useRouter } from "../../../router/hooks/useRouter.ts";
 
 export default function RelatedProducts() {
+  const router = useRouter();
   const {
     state: { relatedProducts },
   } = useProductStoreContext();
diff --git a/packages/react/src/entities/products/context/ProductContext.tsx b/packages/react/src/entities/products/context/ProductContext.tsx
@@ -1,10 +1,9 @@
-import { type createStore, type StringRecord } from "@hanghae-plus/lib";
+import { type createStore, type StringRecord, useStore } from "@hanghae-plus/lib";
 import { getCategories, getProduct, getProducts } from "../../../api/productApi";
 import { isNearBottom } from "../../../utils";
 import { ProductStoreContext } from "../hooks";
 import { initialProductState, PRODUCT_ACTIONS } from "../productStore";
-import { useStore } from "@hanghae-plus/lib";
-import { router } from "../../../router";
+import { useRouter } from "../../../router/hooks/useRouter.ts";
 
 interface ProductProviderProps {
   productStore: ReturnType<typeof createStore<typeof initialProductState, unknown>>;
@@ -15,6 +14,9 @@ const createErrorMessage = (error: unknown, defaultMessage = "알 수 없는 오
   error instanceof Error ? error.message : defaultMessage;
 
 export const ProductProvider = ({ children, productStore }: ProductProviderProps) => {
+  const router = useRouter();
+  const query = router.query;
+
   const productStoreState = useStore(productStore);
   const loadProducts = async (resetList = true) => {
     try {
@@ -26,7 +28,7 @@ export const ProductProvider = ({ children, productStore }: ProductProviderProps
       const {
         products,
         pagination: { total },
-      } = await getProducts(router.query ?? {});
+      } = await getProducts(query ?? {});
       const payload = { products, totalCount: total };
 
       // 페이지 리셋이면 새로 설정, 아니면 기존에 추가
@@ -62,7 +64,7 @@ export const ProductProvider = ({ children, productStore }: ProductProviderProps
           pagination: { total },
         },
         categories,
-      ] = await Promise.all([getProducts(router.query), getCategories()]);
+      ] = await Promise.all([getProducts(query), getCategories()]);
 
       // 페이지 리셋이면 새로 설정, 아니면 기존에 추가
       productStore.dispatch({
diff --git a/packages/react/src/main-server.tsx b/packages/react/src/main-server.tsx
@@ -1,59 +1,47 @@
 import { renderToString } from "react-dom/server";
-import { App } from "./App";
-import { createProductStore, initialProductState } from "./entities";
-import { ProductProvider } from "./entities/products/context/ProductContext";
 import { RouterProvider } from "./entities/products/context/RouterContext";
-import { HomePage, ProductDetailPage, NotFoundPage } from "./pages";
+import { HomePage, NotFoundPage, ProductDetailPage } from "./pages";
 import { UniversalRouter } from "./router/UniversalRouter";
 import type { PageWithServer } from "./utils/withServerSideProps";
 import type { StringRecord } from "@hanghae-plus/lib";
+import { withProviders } from "./pages/withProviders.tsx";
+import type { PropsWithChildren } from "react";
 
 type RenderResult = {
   head: string;
   html: string;
   __INITIAL_DATA__: Record<string, unknown>;
 };
 
-export const render = async (pathname: string, query: StringRecord): Promise<RenderResult> => {
-  const renderApp = () => {
-    return (
-      <RouterProvider router={router}>
-        <ProductProvider productStore={createProductStore(initialProductState)}>
-          <App />
-        </ProductProvider>
-      </RouterProvider>
-    );
-  };
+type ServerParams = Parameters<NonNullable<PageWithServer["ssr"]>>[0];
 
+export const render = async (pathname: string, query: StringRecord): Promise<RenderResult> => {
   const router = new UniversalRouter<PageWithServer>();
 
-  router.addRoute("/", HomePage);
+  const App = ({ children }: PropsWithChildren) => {
+    return <RouterProvider router={router}>{children}</RouterProvider>;
+  };
 
-  router.addRoute("/product/:id/", ProductDetailPage);
-  router.addRoute(".*", NotFoundPage);
+  router.addRoute("/", Object.assign(withProviders(HomePage), { ...HomePage }));
+  router.addRoute("/product/:id/", Object.assign(withProviders(ProductDetailPage), { ...ProductDetailPage }));
+  router.addRoute(".*", Object.assign(withProviders(NotFoundPage), { ...NotFoundPage }));
 
   router.start(pathname);
 
-  type ServerParams = Parameters<NonNullable<PageWithServer["ssr"]>>[0];
-  const serverParams: ServerParams = { query, params: router.params } as ServerParams;
-
-  if (router.target?.ssr) {
-    const result = await router.target.ssr(serverParams);
-    const title = (result as unknown as { metadata?: { title?: string } })?.metadata?.title ?? "";
-    const html = renderToString(renderApp()) ?? "";
-    const data = (result as unknown as { data?: Record<string, unknown> })?.data ?? {};
+  const serverParams = { query, params: router.params } as ServerParams;
 
-    return {
-      head: `<title>${title}</title>`,
-      html,
-      __INITIAL_DATA__: data,
-    };
-  }
+  const PageComponent = router.target!;
+  const result = await PageComponent.ssr?.(serverParams);
+  const metadata = await PageComponent.metadata?.(serverParams);
+  const html = renderToString(
+    <App>
+      <PageComponent productState={result} />
+    </App>,
+  );
 
-  const metadata = await router.target?.metadata?.(serverParams);
   return {
     head: `<title>${metadata?.title ?? ""}</title>`,
-    html: "",
-    __INITIAL_DATA__: {},
+    html,
+    __INITIAL_DATA__: (result ?? {}) as Record<string, unknown>,
   };
 };
diff --git a/packages/react/src/main.tsx b/packages/react/src/main.tsx
@@ -23,7 +23,7 @@ const enableMocking = () =>
   );
 
 function main() {
-  const renderApp = () => {
+  const AppContainer = () => {
     return (
       <RouterProvider router={router}>
         <ProductProvider productStore={createProductStore(initialProductState)}>
@@ -46,9 +46,9 @@ function main() {
   const hasServerContent = rootElement.innerHTML.trim() !== "";
 
   if (hasSSRData || hasServerContent) {
-    hydrateRoot(rootElement, renderApp());
+    hydrateRoot(rootElement, <AppContainer />);
   } else {
-    createRoot(rootElement).render(renderApp());
+    createRoot(rootElement).render(<AppContainer />);
   }
 }
 
diff --git a/packages/react/src/pages/HomePage.tsx b/packages/react/src/pages/HomePage.tsx
@@ -71,8 +71,7 @@ export const HomePage = withServerSideProps(
       return {
         products: productsData.products,
         categories: categoriesData,
-        pagination: productsData.pagination,
-        filters: productsData.filters,
+        totalCount: productsData.pagination.total,
       };
     },
 
diff --git a/packages/react/src/pages/withProviders.tsx b/packages/react/src/pages/withProviders.tsx
@@ -0,0 +1,22 @@
+import { ModalProvider, ToastProvider } from "../components";
+import { createProductStore, initialProductState, useLoadCartStore } from "../entities";
+import { ProductProvider } from "../entities/products/context/ProductContext";
+
+const CartInitializer = () => {
+  useLoadCartStore();
+  return null;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function withProviders<P extends Record<string, any>>(PageComponent: any) {
+  return ({ productState, ...props }: P) => {
+    return (
+      <ProductProvider productStore={createProductStore(productState ?? initialProductState)}>
+        <ToastProvider>
+          <ModalProvider>{PageComponent ? <PageComponent {...props} /> : null}</ModalProvider>
+        </ToastProvider>
+        <CartInitializer />
+      </ProductProvider>
+    );
+  };
+}
diff --git a/packages/react/src/router/hooks/useCurrentPage.ts b/packages/react/src/router/hooks/useCurrentPage.ts
@@ -1,6 +1,6 @@
-import { useRouterContext } from "../../entities/products/context/RouterContext";
+import { useRouter } from "./useRouter.ts";
 
 export const useCurrentPage = () => {
-  const router = useRouterContext();
+  const router = useRouter();
   return router.target;
 };
diff --git a/packages/react/src/router/hooks/useRouter.ts b/packages/react/src/router/hooks/useRouter.ts
@@ -0,0 +1,8 @@
+import { useRouter as useOriginRouter } from "@hanghae-plus/lib";
+import { useRouterContext } from "../../entities/products/context/RouterContext.tsx";
+
+export const useRouter = () => {
+  const router = useRouterContext();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return useOriginRouter(router as any) as typeof router;
+};
diff --git a/packages/react/src/router/hooks/useRouterParams.ts b/packages/react/src/router/hooks/useRouterParams.ts
@@ -1,10 +1,10 @@
-import { useRouterContext } from "../../entities/products/context/RouterContext";
+import { useRouter } from "./useRouter.ts";
 
 type Params = Record<string, string | undefined>;
 
 const defaultSelector = <S>(params: Params) => params as S;
 
 export const useRouterParams = <S>(selector = defaultSelector<S>) => {
-  const router = useRouterContext();
+  const router = useRouter();
   return selector(router.params);
 };
diff --git a/packages/react/src/router/hooks/useRouterQuery.ts b/packages/react/src/router/hooks/useRouterQuery.ts
@@ -1,6 +1,6 @@
-import { useRouterContext } from "../../entities/products/context/RouterContext";
+import { useRouter } from "./useRouter.ts";
 
 export const useRouterQuery = () => {
-  const router = useRouterContext();
+  const router = useRouter();
   return router.query;
 };

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@`
`18`	`18`	`}`
`19`	`19`	`};`
`20`	`20`	`</script>`
	`21`	`+ <!--app-data-->`
`21`	`22`	`</head>`
`22`	`23`	`<body class="bg-gray-50">`
`23`	`24`	`<div id="root"><!--app-html--></div>`