fix: 서버별 독립적인 전역상태를 위해 컨텍스트 구현

YeongseoYoon · YeongseoYoon · commit 5061b88aba2b · 2025-09-03T21:54:00.000+09:00
diff --git a/packages/vanilla/src/lib/ServerRouter.js b/packages/vanilla/src/lib/ServerRouter.js
@@ -6,11 +6,13 @@ export class ServerRouter {
   #routes;
   #route;
   #notFoundHandler;
+  #createContext;
 
-  constructor(routes = null) {
+  constructor(routes = null, createContext = null) {
     this.#routes = new Map();
     this.#route = null;
     this.#notFoundHandler = null;
+    this.#createContext = createContext;
     if (routes) {
       this.addRoutes(routes);
     }
@@ -105,6 +107,13 @@ export class ServerRouter {
    */
   start(pathname) {
     this.#route = this.#findRoute(pathname);
+    // 요청 스코프 컨텍스트 생성 및 params에 주입
+    if (this.#route && typeof this.#createContext === "function") {
+      const ctx = this.#createContext();
+      // router는 자신으로 설정
+      ctx.router = this;
+      this.#route.params = { ...(this.#route.params || {}), ctx };
+    }
   }
 
   /** 현재 매칭된 라우트 반환 */
diff --git a/packages/vanilla/src/main-server.js b/packages/vanilla/src/main-server.js
@@ -1,8 +1,9 @@
-import { ServerRouter } from "./lib";
-import { routes } from "./router/router";
+import { createRequestContextBase } from "./ssr/context.js";
+import { ServerRouter } from "./lib/ServerRouter.js";
+import { routes } from "./router/router.js";
 
 export const render = async (pathname, query) => {
-  const router = new ServerRouter(routes);
+  const router = new ServerRouter(routes, createRequestContextBase);
   router.start(pathname);
   const params = { pathname, query, params: router.params };
 
diff --git a/packages/vanilla/src/pages/HomePage.js b/packages/vanilla/src/pages/HomePage.js
@@ -8,8 +8,9 @@ import { PageWrapper } from "./PageWrapper.js";
 export const HomePage = withLifecycle(
   {
     ssr: async (params) => {
-      await loadProductsAndCategories(params?.query);
-      const data = productStore.getState();
+      const ctx = params?.params?.ctx;
+      await loadProductsAndCategories(params?.query, ctx);
+      const data = (ctx?.store || productStore).getState();
       return {
         products: data.products,
         categories: data.categories,
@@ -32,10 +33,16 @@ export const HomePage = withLifecycle(
       () => loadProducts(true),
     ],
   },
-  () => {
-    const productState = productStore.getState();
-    const { search: searchQuery, limit, sort, category1, category2 } = router.query || {};
-    const { products, loading, error, totalCount, categories } = productState;
+  (params, props) => {
+    const source = props?.data || productStore.getState();
+    const { products, loading, error, totalCount, categories } = source;
+    const {
+      search: searchQuery,
+      limit,
+      sort,
+      category1,
+      category2,
+    } = props?.data ? params?.query || {} : router.query || {};
     const category = { category1, category2 };
     const hasMore = products.length < totalCount;
 
diff --git a/packages/vanilla/src/pages/ProductDetailPage.js b/packages/vanilla/src/pages/ProductDetailPage.js
@@ -239,12 +239,13 @@ function ProductDetail({ product, relatedProducts = [] }) {
 export const ProductDetailPage = withLifecycle(
   {
     ssr: async (params) => {
+      const ctx = params?.params?.ctx;
       const productId = params.params?.id;
       if (!productId) {
-        return productStore.getState();
+        return (ctx?.store || productStore).getState();
       }
-      await loadProductDetailForPage(productId);
-      return productStore.getState();
+      await loadProductDetailForPage(productId, ctx);
+      return (ctx?.store || productStore).getState();
     },
     metadata: async (params) => {
       try {
@@ -262,8 +263,9 @@ export const ProductDetailPage = withLifecycle(
     },
     watches: [() => [router.params.id], () => loadProductDetailForPage(router.params.id)],
   },
-  () => {
-    const { currentProduct: product, relatedProducts = [], error, loading } = productStore.getState();
+  (params, props) => {
+    const state = props?.data || productStore.getState();
+    const { currentProduct: product, relatedProducts = [], error, loading } = state;
 
     return PageWrapper({
       headerLeft: `
diff --git a/packages/vanilla/src/services/productService.js b/packages/vanilla/src/services/productService.js
@@ -2,10 +2,14 @@ import { getCategories, getProduct, getProducts } from "../api/productApi";
 import { initialProductState, productStore, PRODUCT_ACTIONS } from "../stores";
 import { router } from "../router";
 
-export const loadProductsAndCategories = async (queryParams = null) => {
-  const query = queryParams || router.query || {};
-  router.query = { ...query, current: undefined };
-  productStore.dispatch({
+export const loadProductsAndCategories = async (queryParams = null, ctx = null) => {
+  const usingCtx = ctx && ctx.store && ctx.router;
+  const activeRouter = usingCtx ? ctx.router : router;
+  const activeStore = usingCtx ? ctx.store : productStore;
+
+  const query = queryParams || activeRouter.query || {};
+  activeRouter.query = { ...query, current: undefined };
+  activeStore.dispatch({
     type: PRODUCT_ACTIONS.SETUP,
     payload: {
       ...initialProductState,
@@ -21,10 +25,10 @@ export const loadProductsAndCategories = async (queryParams = null) => {
         pagination: { total },
       },
       categories,
-    ] = await Promise.all([getProducts(router.query), getCategories()]);
+    ] = await Promise.all([getProducts(activeRouter.query), getCategories()]);
 
     // 페이지 리셋이면 새로 설정, 아니면 기존에 추가
-    productStore.dispatch({
+    activeStore.dispatch({
       type: PRODUCT_ACTIONS.SETUP,
       payload: {
         products,
@@ -35,7 +39,7 @@ export const loadProductsAndCategories = async (queryParams = null) => {
       },
     });
   } catch (error) {
-    productStore.dispatch({
+    activeStore.dispatch({
       type: PRODUCT_ACTIONS.SET_ERROR,
       payload: error.message,
     });
@@ -46,27 +50,30 @@ export const loadProductsAndCategories = async (queryParams = null) => {
 /**
  * 상품 목록 로드 (새로고침)
  */
-export const loadProducts = async (resetList = true) => {
+export const loadProducts = async (resetList = true, ctx = null) => {
+  const usingCtx = ctx && ctx.store && ctx.router;
+  const activeRouter = usingCtx ? ctx.router : router;
+  const activeStore = usingCtx ? ctx.store : productStore;
   try {
-    productStore.dispatch({
+    activeStore.dispatch({
       type: PRODUCT_ACTIONS.SETUP,
       payload: { loading: true, status: "pending", error: null },
     });
 
     const {
       products,
       pagination: { total },
-    } = await getProducts(router.query);
+    } = await getProducts(activeRouter.query);
     const payload = { products, totalCount: total };
 
     // 페이지 리셋이면 새로 설정, 아니면 기존에 추가
     if (resetList) {
-      productStore.dispatch({ type: PRODUCT_ACTIONS.SET_PRODUCTS, payload });
+      activeStore.dispatch({ type: PRODUCT_ACTIONS.SET_PRODUCTS, payload });
       return;
     }
-    productStore.dispatch({ type: PRODUCT_ACTIONS.ADD_PRODUCTS, payload });
+    activeStore.dispatch({ type: PRODUCT_ACTIONS.ADD_PRODUCTS, payload });
   } catch (error) {
-    productStore.dispatch({
+    activeStore.dispatch({
       type: PRODUCT_ACTIONS.SET_ERROR,
       payload: error.message,
     });
@@ -77,60 +84,68 @@ export const loadProducts = async (resetList = true) => {
 /**
  * 다음 페이지 로드 (무한 스크롤)
  */
-export const loadMoreProducts = async () => {
-  const state = productStore.getState();
+export const loadMoreProducts = async (ctx = null) => {
+  const usingCtx = ctx && ctx.store && ctx.router;
+  const activeRouter = usingCtx ? ctx.router : router;
+  const activeStore = usingCtx ? ctx.store : productStore;
+  const state = activeStore.getState();
   const hasMore = state.products.length < state.totalCount;
 
   if (!hasMore || state.loading) {
     return;
   }
 
-  router.query = { current: Number(router.query.current ?? 1) + 1 };
-  await loadProducts(false);
+  activeRouter.query = { current: Number(activeRouter.query.current ?? 1) + 1 };
+  await loadProducts(false, ctx);
 };
 /**
  * 상품 검색
  */
-export const searchProducts = (search) => {
-  router.query = { search, current: 1 };
+export const searchProducts = (search, ctx = null) => {
+  const activeRouter = ctx?.router || router;
+  activeRouter.query = { search, current: 1 };
 };
 
 /**
  * 카테고리 필터 설정
  */
-export const setCategory = (categoryData) => {
-  router.query = { ...categoryData, current: 1 };
+export const setCategory = (categoryData, ctx = null) => {
+  const activeRouter = ctx?.router || router;
+  activeRouter.query = { ...categoryData, current: 1 };
 };
 
 /**
  * 정렬 옵션 변경
  */
-export const setSort = (sort) => {
-  router.query = { sort, current: 1 };
+export const setSort = (sort, ctx = null) => {
+  const activeRouter = ctx?.router || router;
+  activeRouter.query = { sort, current: 1 };
 };
 
 /**
  * 페이지당 상품 수 변경
  */
-export const setLimit = (limit) => {
-  router.query = { limit, current: 1 };
+export const setLimit = (limit, ctx = null) => {
+  const activeRouter = ctx?.router || router;
+  activeRouter.query = { limit, current: 1 };
 };
 
 /**
  * 상품 상세 페이지용 상품 조회 및 관련 상품 로드
  */
-export const loadProductDetailForPage = async (productId) => {
+export const loadProductDetailForPage = async (productId, ctx = null) => {
+  const activeStore = ctx?.store || productStore;
   try {
-    const currentProduct = productStore.getState().currentProduct;
+    const currentProduct = activeStore.getState().currentProduct;
     if (productId === currentProduct?.productId) {
       // 관련 상품 로드 (같은 category2 기준)
       if (currentProduct.category2) {
-        await loadRelatedProducts(currentProduct.category2, productId);
+        await loadRelatedProducts(currentProduct.category2, productId, ctx);
       }
       return;
     }
     // 현재 상품 클리어
-    productStore.dispatch({
+    activeStore.dispatch({
       type: PRODUCT_ACTIONS.SETUP,
       payload: {
         ...initialProductState,
@@ -143,18 +158,18 @@ export const loadProductDetailForPage = async (productId) => {
     const product = await getProduct(productId);
 
     // 현재 상품 설정
-    productStore.dispatch({
+    activeStore.dispatch({
       type: PRODUCT_ACTIONS.SET_CURRENT_PRODUCT,
       payload: product,
     });
 
     // 관련 상품 로드 (같은 category2 기준)
     if (product.category2) {
-      await loadRelatedProducts(product.category2, productId);
+      await loadRelatedProducts(product.category2, productId, ctx);
     }
   } catch (error) {
     console.error("상품 상세 페이지 로드 실패:", error);
-    productStore.dispatch({
+    activeStore.dispatch({
       type: PRODUCT_ACTIONS.SET_ERROR,
       payload: error.message,
     });
@@ -165,7 +180,8 @@ export const loadProductDetailForPage = async (productId) => {
 /**
  * 관련 상품 로드 (같은 카테고리의 다른 상품들)
  */
-export const loadRelatedProducts = async (category2, excludeProductId) => {
+export const loadRelatedProducts = async (category2, excludeProductId, ctx = null) => {
+  const activeStore = ctx?.store || productStore;
   try {
     const params = {
       category2,
@@ -178,14 +194,14 @@ export const loadRelatedProducts = async (category2, excludeProductId) => {
     // 현재 상품 제외
     const relatedProducts = response.products.filter((product) => product.productId !== excludeProductId);
 
-    productStore.dispatch({
+    activeStore.dispatch({
       type: PRODUCT_ACTIONS.SET_RELATED_PRODUCTS,
       payload: relatedProducts,
     });
   } catch (error) {
     console.error("관련 상품 로드 실패:", error);
     // 관련 상품 로드 실패는 전체 페이지에 영향주지 않도록 조용히 처리
-    productStore.dispatch({
+    activeStore.dispatch({
       type: PRODUCT_ACTIONS.SET_RELATED_PRODUCTS,
       payload: [],
     });
diff --git a/packages/vanilla/src/ssr/context.js b/packages/vanilla/src/ssr/context.js
@@ -0,0 +1,6 @@
+import { createProductStore } from "../stores/productStore.js";
+
+export const createRequestContextBase = () => {
+  const store = createProductStore();
+  return { store, router: null, query: {} };
+};
diff --git a/packages/vanilla/src/stores/productStore.js b/packages/vanilla/src/stores/productStore.js
@@ -104,3 +104,8 @@ const productReducer = (state, action) => {
  * 상품 스토어 생성
  */
 export const productStore = createStore(productReducer, initialProductState);
+
+/**
+ * 요청 단위 상품 스토어 생성 팩토리
+ */
+export const createProductStore = () => createStore(productReducer, initialProductState);
diff --git a/packages/vanilla/static-site-generate.js b/packages/vanilla/static-site-generate.js
@@ -1,7 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import { createServer } from "vite";
-import { mswServer } from "./src/mocks/node.js";
+import { server as mswServer } from "./src/mocks/nodeServer.js";
 
 const DIST_DIR = "../../dist/vanilla";
 
