feat: HomePage에 withServerSideProps를 적용하여 SSR을 통한 상품 및 카테고리 로딩 기능 추가

Author: YeongseoYoon

packages/react/src/pages/HomePage.tsx

@@ -1,6 +1,8 @@
 import { useEffect } from "react";
 import { ProductList, SearchBar, useProductStoreContext } from "../entities";
 import { PageWrapper } from "./PageWrapper";
+import { withServerSideProps } from "../utils";
+import { getProducts, getCategories } from "../api/productApi";
 
 const headerLeft = (
   <h1 className="text-xl font-bold text-gray-900">
@@ -10,43 +12,69 @@ const headerLeft = (
   </h1>
 );
 
-export const HomePage = () => {
-  const {
-    action: { loadProductsAndCategories, loadNextProducts },
-  } = useProductStoreContext();
-
-  // 무한 스크롤 이벤트 등록
-  let scrollHandlerRegistered = false;
-
-  const registerScrollHandler = () => {
-    if (scrollHandlerRegistered) return;
-
-    window.addEventListener("scroll", loadNextProducts);
-    scrollHandlerRegistered = true;
-  };
-
-  const unregisterScrollHandler = () => {
-    if (!scrollHandlerRegistered) return;
-    window.removeEventListener("scroll", loadNextProducts);
-    scrollHandlerRegistered = false;
-  };
-
-  useEffect(() => {
-    registerScrollHandler();
-    loadProductsAndCategories();
-
-    return unregisterScrollHandler;
-  }, []);
-
-  return (
-    <PageWrapper headerLeft={headerLeft}>
-      {/* 검색 및 필터 */}
-      <SearchBar />
-
-      {/* 상품 목록 */}
-      <div className="mb-6">
-        <ProductList />
-      </div>
-    </PageWrapper>
-  );
-};
+export const HomePage = withServerSideProps(
+  {
+    ssr: async ({ query }) => {
+      const [
+        {
+          products,
+          pagination: { total },
+        },
+        categories,
+      ] = await Promise.all([getProducts(query), getCategories()]);
+
+      return {
+        products,
+        categories,
+        totalCount: total,
+        loading: false,
+        status: "done",
+      };
+    },
+    metadata: async () => {
+      return {
+        title: "쇼핑몰 - 홈",
+      };
+    },
+  },
+  () => {
+    const {
+      action: { loadProductsAndCategories, loadNextProducts },
+    } = useProductStoreContext();
+
+    // 무한 스크롤 이벤트 등록
+    let scrollHandlerRegistered = false;
+
+    const registerScrollHandler = () => {
+      if (scrollHandlerRegistered) return;
+
+      window.addEventListener("scroll", loadNextProducts);
+      scrollHandlerRegistered = true;
+    };
+
+    const unregisterScrollHandler = () => {
+      if (!scrollHandlerRegistered) return;
+      window.removeEventListener("scroll", loadNextProducts);
+      scrollHandlerRegistered = false;
+    };
+
+    useEffect(() => {
+      registerScrollHandler();
+      loadProductsAndCategories();
+
+      return unregisterScrollHandler;
+    }, []);
+
+    return (
+      <PageWrapper headerLeft={headerLeft}>
+        {/* 검색 및 필터 */}
+        <SearchBar />
+
+        {/* 상품 목록 */}
+        <div className="mb-6">
+          <ProductList />
+        </div>
+      </PageWrapper>
+    );
+  },
+);