hanghae-plus · 1lmean · Dec 16, 2025 · Dec 16, 2025 · Dec 17, 2025 · Dec 17, 2025
diff --git a/.github/COMMIT_CONVENTION.md b/.github/COMMIT_CONVENTION.md
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,82 @@
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: pnpm
+
+      - name: Install deps
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      # 루트 index.html 생성 (vanilla로 리다이렉트)
+      - name: Create root index.html
+        run: |
+          mkdir -p dist
+          cat > dist/index.html << 'EOF'
+          <!DOCTYPE html>
+          <html>
+          <head>
+            <meta charset="UTF-8">
+            <title>프로젝트 선택</title>
+            <style>
+              body { font-family: Arial, sans-serif; padding: 50px; text-align: center; }
+              h1 { margin-bottom: 30px; }
+              a { display: inline-block; margin: 10px; padding: 15px 30px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; }
+              a:hover { background: #0056b3; }
+            </style>
+          </head>
+          <body>
+            <h1>프로젝트 선택</h1>
+            <a href="/front_7th_chapter4-1/vanilla/">Vanilla SSR</a>
+            <a href="/front_7th_chapter4-1/react/">React SSR</a>
+          </body>
+          </html>
+          EOF
+
+      # 404.html 생성 - SPA 라우팅 지원
+      - name: Create 404.html for SPA routing
+        run: |
+          cp dist/index.html dist/404.html
+          if [ -f dist/vanilla/index.html ]; then
+            cp dist/vanilla/index.html dist/vanilla/404.html
+          fi
+          if [ -f dist/react/index.html ]; then
+            cp dist/react/index.html dist/react/404.html
+          fi
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "@types/node": "^24.0.13",
     "@vitest/coverage-v8": "latest",
     "@vitest/ui": "latest",
+    "concurrently": "latest",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
@@ -49,7 +50,6 @@
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.36.0",
     "vite": "npm:rolldown-vite@latest",
-    "vitest": "latest",
-    "concurrently": "latest"
+    "vitest": "latest"
   }
 }
diff --git a/packages/lib/src/Router.ts b/packages/lib/src/Router.ts
@@ -25,25 +25,33 @@ export class Router<Handler extends (...args: any[]) => any> {
     this.#route = null;
     this.#baseUrl = baseUrl.replace(/\/$/, "");
 
-    window.addEventListener("popstate", () => {
-      this.#route = this.#findRoute();
-      this.#observer.notify();
-    });
-
-    document.addEventListener("click", (e) => {
-      const target = e.target as HTMLElement;
-      if (!target?.closest("[data-link]")) {
-        return;
-      }
-      e.preventDefault();
-      const url = target.getAttribute("href") ?? target.closest("[data-link]")?.getAttribute("href");
-      if (url) {
-        this.push(url);
+    // 클라이언트에서만 이벤트 리스너 등록 (서버에서는 window/document가 없음)
+    if (typeof window !== "undefined") {
+      window.addEventListener("popstate", () => {
+        this.#route = this.#findRoute();
+        this.#observer.notify();
+      });
+
+      if (typeof document !== "undefined") {
+        document.addEventListener("click", (e) => {
+          const target = e.target as HTMLElement;
+          if (!target?.closest("[data-link]")) {
+            return;
+          }
+          e.preventDefault();
+          const url = target.getAttribute("href") ?? target.closest("[data-link]")?.getAttribute("href");
+          if (url) {
+            this.push(url);
+          }
+        });
       }
-    });
+    }
   }
 
   get query(): StringRecord {
+    if (typeof window === "undefined") {
+      return {};
+    }
     return Router.parseQuery(window.location.search);
   }
 
@@ -85,8 +93,16 @@ export class Router<Handler extends (...args: any[]) => any> {
     });
   }
 
-  #findRoute(url = window.location.pathname) {
-    const { pathname } = new URL(url, window.location.origin);
+  #findRoute(url?: string) {
+    // 서버에서는 url을 필수로 받아야 함
+    if (!url) {
+      if (typeof window === "undefined") {
+        return null;
+      }
+      url = window.location.pathname;
+    }
+    const origin = typeof window !== "undefined" ? window.location.origin : "http://localhost";
+    const { pathname } = new URL(url, origin);
     for (const [routePath, route] of this.#routes) {
       const match = pathname.match(route.regex);
       if (match) {
@@ -111,11 +127,14 @@ export class Router<Handler extends (...args: any[]) => any> {
       // baseUrl이 없으면 자동으로 붙여줌
       const fullUrl = url.startsWith(this.#baseUrl) ? url : this.#baseUrl + (url.startsWith("/") ? url : "/" + url);
 
-      const prevFullUrl = `${window.location.pathname}${window.location.search}`;
+      // 클라이언트에서만 히스토리 업데이트 (서버에서는 window.history가 없음)
+      if (typeof window !== "undefined") {
+        const prevFullUrl = `${window.location.pathname}${window.location.search}`;
 
-      // 히스토리 업데이트
-      if (prevFullUrl !== fullUrl) {
-        window.history.pushState(null, "", fullUrl);
+        // 히스토리 업데이트
+        if (prevFullUrl !== fullUrl) {
+          window.history.pushState(null, "", fullUrl);
+        }
       }
 
       this.#route = this.#findRoute(fullUrl);
@@ -130,7 +149,14 @@ export class Router<Handler extends (...args: any[]) => any> {
     this.#observer.notify();
   }
 
-  static parseQuery = (search = window.location.search) => {
+  static parseQuery = (search?: string) => {
+    // 서버에서는 search 파라미터를 명시적으로 받아야 함
+    if (!search) {
+      if (typeof window === "undefined") {
+        return {};
+      }
+      search = window.location.search;
+    }
     const params = new URLSearchParams(search);
     const query: StringRecord = {};
     for (const [key, value] of params) {
@@ -149,7 +175,7 @@ export class Router<Handler extends (...args: any[]) => any> {
     return params.toString();
   };
 
-  static getUrl = (newQuery: QueryPayload, baseUrl = "") => {
+  static getUrl = (newQuery: QueryPayload, baseUrl = "", pathname?: string) => {
     const currentQuery = Router.parseQuery();
     const updatedQuery = { ...currentQuery, ...newQuery };
 
@@ -161,6 +187,14 @@ export class Router<Handler extends (...args: any[]) => any> {
     });
 
     const queryString = Router.stringifyQuery(updatedQuery);
-    return `${baseUrl}${window.location.pathname.replace(baseUrl, "")}${queryString ? `?${queryString}` : ""}`;
+    // 서버에서는 pathname을 파라미터로 받아야 함
+    if (!pathname) {
+      if (typeof window === "undefined") {
+        pathname = "/";
+      } else {
+        pathname = window.location.pathname;
+      }
+    }
+    return `${baseUrl}${pathname.replace(baseUrl, "")}${queryString ? `?${queryString}` : ""}`;
   };
 }
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -28,31 +28,32 @@
     "prettier:write": "prettier --write ./src"
   },
   "dependencies": {
+    "@hanghae-plus/lib": "workspace:*",
     "react": "latest",
-    "react-dom": "latest",
-    "@hanghae-plus/lib": "workspace:*"
+    "react-dom": "latest"
   },
   "devDependencies": {
     "@babel/core": "latest",
     "@babel/plugin-transform-react-jsx": "latest",
     "@eslint/js": "^9.16.0",
+    "@types/node": "^24.0.13",
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "@types/use-sync-external-store": "latest",
     "@vitejs/plugin-react": "latest",
-    "@types/node": "^24.0.13",
+    "compression": "^1.7.5",
+    "concurrently": "latest",
     "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "express": "^5.1.0",
     "msw": "^2.10.2",
+    "nodemon": "^3.1.11",
     "prettier": "^3.4.2",
-    "typescript": "^5.8.3",
-    "vite": "npm:rolldown-vite@latest",
-    "express": "^5.1.0",
-    "compression": "^1.7.5",
     "sirv": "^3.0.0",
-    "concurrently": "latest"
+    "typescript": "^5.8.3",
+    "vite": "npm:rolldown-vite@latest"
   }
 }
diff --git a/packages/react/server.js b/packages/react/server.js
@@ -1,29 +1,65 @@
+import fs from "node:fs/promises";
 import express from "express";
-import { renderToString } from "react-dom/server";
-import { createElement } from "react";
 
 const prod = process.env.NODE_ENV === "production";
 const port = process.env.PORT || 5174;
 const base = process.env.BASE || (prod ? "/front_7th_chapter4-1/react/" : "/");
 
 const app = express();
 
-app.get("*all", (req, res) => {
-  res.send(
-    `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>React SSR</title>
-</head>
-<body>
-<div id="app">${renderToString(createElement("div", null, "안녕하세요"))}</div>
-</body>
-</html>
-  `.trim(),
-  );
+let vite;
+let templateHtml = "";
+
+if (!prod) {
+  const { createServer } = await import("vite");
+  vite = await createServer({
+    server: { middlewareMode: true },
+    appType: "custom",
+    base,
+  });
+  app.use(vite.middlewares);
+} else {
+  const compression = (await import("compression")).default;
+  const sirv = (await import("sirv")).default;
+
+  templateHtml = await fs.readFile("./dist/react/index.html", "utf-8");
+
+  app.use(compression());
+  app.use(base, sirv("./dist/react", { extensions: [] }));
+}
+
+app.use("*all", async (req, res) => {
+  try {
+    const url = req.originalUrl.replace(base, "");
+
+    let template;
+    let render;
+
+    if (!prod) {
+      template = await fs.readFile("./index.html", "utf-8");
+      template = await vite.transformIndexHtml(url, template);
+      render = (await vite.ssrLoadModule("/src/main-server.tsx")).render;
+    } else {
+      template = templateHtml;
+      render = (await import("./dist/react-ssr/main-server.js")).render;
+    }
+
+    const { html: appHtml, head, state } = await render(url);
+
+    let html = template.replace(`<!--app-head-->`, head ?? "").replace(`<!--app-html-->`, appHtml ?? "");
+
+    // __INITIAL_DATA__ 스크립트를 </body> 앞에 주입
+    if (state) {
+      const stateScript = `<script>window.__INITIAL_DATA__ = ${JSON.stringify(state).replace(/</g, "\\u003c")}</script>`;
+      html = html.replace(`</body>`, `${stateScript}</body>`);
+    }
+
+    res.status(200).set({ "Content-Type": "text/html" }).send(html);
+  } catch (e) {
+    vite?.ssrFixStacktrace(e);
+    console.log(e.stack);
+    res.status(500).end(e.stack);
+  }
 });
 
 // Start http server

diff --git a/packages/react/src/components/modal/ModalProvider.tsx b/packages/react/src/components/modal/ModalProvider.tsx
@@ -38,7 +38,10 @@ export const ModalProvider = memo(({ children }: PropsWithChildren) => {
   return (
     <ModalContext value={contextValue}>
       {children}
-      {content && createPortal(<Modal>{content}</Modal>, document.body)}
+      {content &&
+        typeof document !== "undefined" &&
+        document.body &&
+        createPortal(<Modal>{content}</Modal>, document.body)}
     </ModalContext>
   );
 });
diff --git a/packages/react/src/components/toast/ToastProvider.tsx b/packages/react/src/components/toast/ToastProvider.tsx
@@ -44,7 +44,7 @@ export const ToastProvider = memo(({ children }: PropsWithChildren) => {
     <ToastCommandContext value={commandValue}>
       <ToastStateContext value={state}>
         {children}
-        {visible && createPortal(<Toast />, document.body)}
+        {visible && typeof document !== "undefined" && document.body && createPortal(<Toast />, document.body)}
       </ToastStateContext>
     </ToastCommandContext>
   );

diff --git a/packages/react/src/entities/carts/hooks/useCartAddCommand.ts b/packages/react/src/entities/carts/hooks/useCartAddCommand.ts
@@ -1,12 +1,16 @@
+import { useCallback } from "react";
 import { useToastCommand } from "../../../components";
-import { useAutoCallback } from "@hanghae-plus/lib";
 import type { Product } from "../../products";
 import { addToCart } from "../cartUseCase";
 
 export const useCartAddCommand = () => {
   const toast = useToastCommand();
-  return useAutoCallback((product: Product, quantity = 1) => {
-    addToCart(product, quantity);
-    toast.show("장바구니에 추가되었습니다", "success");
-  });
+  // useAutoCallback 대신 useCallback 사용 (SSR 호환)
+  return useCallback(
+    (product: Product, quantity = 1) => {
+      addToCart(product, quantity);
+      toast.show("장바구니에 추가되었습니다", "success");
+    },
+    [toast],
+  );
 };