feat: ssg 파일 생성

Author: geonhwiii

packages/vanilla/static-site-generate.js

@@ -1,20 +1,203 @@
-import fs from "fs";
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+import { mockGetProducts } from "./src/api/mockApi.js";
 
-const render = () => {
-  return `<div>안녕하세요</div>`;
-};
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
+// 디렉토리 경로 설정
+const PROJECT_ROOT = path.join(__dirname, "../..");
+const DIST_DIR = path.join(PROJECT_ROOT, "dist", "vanilla-ssg");
+const CLIENT_TEMPLATE = path.join(PROJECT_ROOT, "dist", "vanilla", "index.html");
+const SERVER_MODULE = path.join(__dirname, "dist", "vanilla-ssr", "main-server.js");
+
+/**
+ * SSG에서 생성할 페이지 목록을 반환
+ * @returns {Promise<Array>} 페이지 목록
+ */
+async function getPages() {
+  const pages = [];
+
+  // 1. 홈페이지
+  pages.push({
+    url: "/",
+    filePath: path.join(DIST_DIR, "index.html"),
+    description: "홈페이지",
+  });
+
+  // 2. 404 페이지
+  pages.push({
+    url: "/404",
+    filePath: path.join(DIST_DIR, "404.html"),
+    description: "404 페이지",
+  });
+
+  try {
+    // 3. 상품 상세 페이지들 (처음 20개 상품)
+    console.log("📦 상품 목록 로딩 중...");
+    const productsData = await mockGetProducts({ limit: 20, page: 1 });
+
+    for (const product of productsData.products) {
+      pages.push({
+        url: `/product/${product.productId}/`,
+        filePath: path.join(DIST_DIR, "product", product.productId, "index.html"),
+        description: `상품: ${product.title}`,
+      });
+    }
+
+    console.log(`✅ ${productsData.products.length}개 상품 페이지 추가됨`);
+  } catch (error) {
+    console.warn("⚠️ 상품 데이터 로딩 실패, 기본 페이지만 생성:", error.message);
+  }
+
+  return pages;
+}
+
+/**
+ * 디렉토리가 없으면 생성
+ * @param {string} dirPath
+ */
+async function ensureDir(dirPath) {
+  try {
+    await fs.mkdir(dirPath, { recursive: true });
+  } catch (error) {
+    // 이미 존재하면 무시
+    if (error.code !== "EEXIST") {
+      throw error;
+    }
+  }
+}
+
+/**
+ * HTML 파일을 지정된 경로에 저장
+ * @param {string} filePath
+ * @param {string} html
+ */
+async function saveHtmlFile(filePath, html) {
+  const dir = path.dirname(filePath);
+  await ensureDir(dir);
+  await fs.writeFile(filePath, html, "utf-8");
+}
+
+/**
+ * 정적 사이트 생성 메인 함수
+ */
 async function generateStaticSite() {
-  // HTML 템플릿 읽기
-  const template = fs.readFileSync("../../dist/vanilla/index.html", "utf-8");
+  try {
+    console.log("🚀 Static Site Generation 시작...");
+
+    // 1. 페이지 목록 생성
+    console.log("📋 페이지 목록 생성 중...");
+    const pages = await getPages();
+    console.log(`📄 총 ${pages.length}개 페이지 생성 예정`);
+
+    // 2. 템플릿 및 렌더링 함수 로드
+    console.log("📄 템플릿 및 렌더링 함수 로드 중...");
+    const templatePath = CLIENT_TEMPLATE;
 
-  // 어플리케이션 렌더링하기
-  const appHtml = render();
+    let template;
+    try {
+      template = await fs.readFile(templatePath, "utf-8");
+    } catch (error) {
+      console.error(`❌ 템플릿 파일을 찾을 수 없음: ${templatePath}`, error);
+      console.log("💡 먼저 'pnpm run build:ssg' 명령을 실행하세요");
+      process.exit(1);
+    }
 
-  // 결과 HTML 생성하기
-  const result = template.replace("<!--app-html-->", appHtml);
-  fs.writeFileSync("../../dist/vanilla/index.html", result);
+    let render;
+    try {
+      const serverModule = await import(SERVER_MODULE);
+      render = serverModule.render;
+    } catch (error) {
+      console.error(`❌ 서버 렌더링 모듈을 불러올 수 없음: ${SERVER_MODULE}`, error);
+      console.log("💡 먼저 'pnpm run build:server' 명령을 실행하세요");
+      process.exit(1);
+    }
+
+    // 3. 각 페이지 렌더링 및 저장
+    console.log("🎨 페이지 렌더링 시작...");
+    let successCount = 0;
+    let errorCount = 0;
+
+    for (const page of pages) {
+      try {
+        console.log(`  🔄 ${page.description} (${page.url})`);
+
+        // 서버 렌더링
+        const rendered = await render(page.url);
+
+        // HTML 템플릿에 삽입
+        const html = template
+          .replace("<!--app-head-->", rendered.head ?? "")
+          .replace("<!--app-html-->", rendered.html ?? "")
+          .replace(
+            "</head>",
+            `<script>window.__INITIAL_DATA__ = ${JSON.stringify(rendered.initialData ?? {})}</script></head>`,
+          );
+
+        // 파일 저장
+        await saveHtmlFile(page.filePath, html);
+
+        console.log(`  ✅ ${page.filePath}`);
+        successCount++;
+      } catch (error) {
+        console.error(`  ❌ ${page.description} 생성 실패:`, error.message);
+        errorCount++;
+      }
+    }
+
+    // 4. 결과 요약
+    console.log("\n📊 SSG 완료!");
+    console.log(`✅ 성공: ${successCount}개 페이지`);
+    if (errorCount > 0) {
+      console.log(`❌ 실패: ${errorCount}개 페이지`);
+    }
+    console.log(`📁 출력 디렉토리: ${DIST_DIR}`);
+
+    // 5. 생성된 파일 목록 표시
+    console.log("\n📋 생성된 파일들:");
+    const allFiles = await getAllFiles(DIST_DIR);
+    allFiles.forEach((file) => {
+      const relPath = path.relative(DIST_DIR, file);
+      console.log(`  • ${relPath}`);
+    });
+
+    console.log("\n🎉 Static Site Generation 완료!");
+  } catch (error) {
+    console.error("💥 SSG 실행 중 오류 발생:", error.message);
+    process.exit(1);
+  }
+}
+
+/**
+ * 디렉토리 내 모든 HTML 파일 목록 반환
+ * @param {string} dir
+ * @returns {Promise<string[]>}
+ */
+async function getAllFiles(dir) {
+  const files = [];
+
+  try {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        const subFiles = await getAllFiles(fullPath);
+        files.push(...subFiles);
+      } else if (entry.name.endsWith(".html")) {
+        files.push(fullPath);
+      }
+    }
+  } catch (error) {
+    console.error(error.message);
+  }
+
+  return files;
 }
 
 // 실행
-generateStaticSite();
+if (import.meta.url === `file://${process.argv[1]}`) {
+  generateStaticSite();
+}