ERP-node/frontend/scripts/ui-redesign-verification.ts

/**
 * UI 리디자인 검증 스크립트
 * 1. 로그인 페이지 스크린샷
 * 2. 로그인
 * 3. 대시보드 스크린샷
 * 4. 사이드바 스크린샷
 */

import { chromium } from "playwright";
import * as path from "path";
import * as fs from "fs";

const BASE_URL = "http://localhost:9771";
const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");

async function main() {
  if (!fs.existsSync(SCREENSHOT_DIR)) {
    fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
  }

  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({ viewport: { width: 1280, height: 800 } });
  const page = await context.newPage();

  try {
    // Step 1: 로그인 페이지 접속 및 스크린샷
    console.log("Step 1: 로그인 페이지 접속...");
    await page.goto(`${BASE_URL}/login`, { waitUntil: "commit", timeout: 30000 });
    await page.waitForTimeout(1500);
    await page.screenshot({
      path: path.join(SCREENSHOT_DIR, "01-login-page.png"),
      fullPage: true,
    });
    console.log("  -> 01-login-page.png 저장됨");

    // Step 2: 로그인
    console.log("Step 2: 로그인...");
    await page.fill("#userId", "admin");
    await page.fill("#password", "1234");
    await page.click('button[type="submit"]');
    await page.waitForURL((url) => !url.pathname.includes("/login"), { timeout: 10000 }).catch(() => {});
    await page.waitForTimeout(3000);

    const currentUrl = page.url();
    if (currentUrl.includes("/login")) {
      console.log("  -> 로그인 실패, 현재 URL:", currentUrl);
    } else {
      console.log("  -> 로그인 성공, 리다이렉트:", currentUrl);

      // Step 3: 메인 페이지로 이동 (대시보드)
      if (!currentUrl.includes("/main") && !currentUrl.includes("/admin")) {
        await page.goto(`${BASE_URL}/main`, { waitUntil: "load", timeout: 20000 });
        await page.waitForTimeout(2000);
      }

      // 대시보드 전체 스크린샷
      await page.screenshot({
        path: path.join(SCREENSHOT_DIR, "02-dashboard.png"),
        fullPage: true,
      });
      console.log("  -> 02-dashboard.png 저장됨");

      // Step 4: 사이드바 포커스 스크린샷 (좌측 영역)
      const sidebar = page.locator("aside");
      if ((await sidebar.count()) > 0) {
        await sidebar.first().screenshot({
          path: path.join(SCREENSHOT_DIR, "03-sidebar.png"),
        });
        console.log("  -> 03-sidebar.png 저장됨");
      }

      // Step 5: 테이블/그리드 화면으로 이동하여 스타일 확인
      console.log("Step 5: 테이블 화면 탐색...");
      const menuLinks = page.locator('aside a[href*="/screens/"], aside [role="button"]');
      const linkCount = await menuLinks.count();
      if (linkCount > 0) {
        await menuLinks.first().click();
        await page.waitForTimeout(2500);
        await page.screenshot({
          path: path.join(SCREENSHOT_DIR, "04-table-screen.png"),
          fullPage: false,
        });
        console.log("  -> 04-table-screen.png 저장됨");
      } else {
        // 메뉴 클릭으로 화면 이동 시도
        const firstMenu = page.locator('aside [class*="cursor-pointer"]').first();
        if ((await firstMenu.count()) > 0) {
          await firstMenu.click();
          await page.waitForTimeout(2500);
          await page.screenshot({
            path: path.join(SCREENSHOT_DIR, "04-table-screen.png"),
            fullPage: false,
          });
          console.log("  -> 04-table-screen.png 저장됨");
        }
      }
    }

    await browser.close();
    console.log("\n검증 완료. 스크린샷:", SCREENSHOT_DIR);
  } catch (error) {
    console.error("오류:", error);
    await page.screenshot({
      path: path.join(SCREENSHOT_DIR, "error.png"),
      fullPage: true,
    }).catch(() => {});
    await browser.close();
    process.exit(1);
  }
}

main();