zellyy-finance/activate-clerk-test.cjs

/**
 * Clerk 실제 인증 활성화 및 테스트
 * Mock이 아닌 실제 Clerk 컴포넌트로 테스트
 */

const { chromium } = require("playwright");

async function activateClerkAndTest() {
  const browser = await chromium.launch({
    headless: false, // 브라우저 창을 보여줌
    slowMo: 1000, // 1초씩 천천히 실행
  });

  console.log("🔧 Clerk 실제 인증 활성화 및 테스트 시작...");

  try {
    const page = await browser.newPage();

    // 콘솔 메시지 캡처
    let consoleMessages = [];
    page.on("console", (msg) => {
      const text = msg.text();
      consoleMessages.push(text);
      if (msg.type() === "error") {
        console.log("❌ Console Error:", text);
      } else if (text.includes("Clerk")) {
        console.log("🔧 Clerk Message:", text);
      }
    });

    // 1단계: 홈페이지로 이동하여 Clerk 상태 확인
    console.log("\n📋 1단계: 현재 Clerk 상태 확인");
    await page.goto("http://localhost:3000/");
    await page.waitForTimeout(3000);

    const currentClerkStatus = await page.evaluate(() => {
      return {
        disableClerk: sessionStorage.getItem("disableClerk"),
        skipClerk: sessionStorage.getItem("skipClerk"),
        chunkLoadError: sessionStorage.getItem("chunkLoadErrorMaxRetries"),
      };
    });

    console.log("현재 Clerk 상태:", currentClerkStatus);

    // 2단계: Clerk 비활성화 플래그 제거
    console.log("\n📋 2단계: Clerk 재활성화");
    await page.evaluate(() => {
      sessionStorage.removeItem("disableClerk");
      sessionStorage.removeItem("skipClerk");
      sessionStorage.removeItem("chunkLoadErrorMaxRetries");
      sessionStorage.removeItem("lastChunkErrorTime");
      console.log("✅ Clerk 비활성화 플래그 제거됨");
    });

    // 3단계: 페이지 새로고침하여 Clerk 재로드
    console.log("\n📋 3단계: 페이지 새로고침 (Clerk 재로드)");
    await page.reload();
    await page.waitForTimeout(5000); // Clerk 로딩 시간 대기

    // 4단계: 로그인 페이지로 이동하여 실제 Clerk 컴포넌트 확인
    console.log("\n📋 4단계: Clerk 실제 로그인 페이지 테스트");
    await page.goto("http://localhost:3000/sign-in");
    await page.waitForTimeout(3000);

    // Clerk 컴포넌트가 로드되었는지 확인
    const clerkComponentCheck = await page.evaluate(() => {
      const body = document.body.textContent || "";

      // Mock 컴포넌트 메시지 확인
      const hasMockMessage = body.includes("인증 시스템이 임시로 비활성화");

      // Clerk 실제 컴포넌트 요소 확인
      const clerkElements = document.querySelectorAll("[data-clerk-element]");
      const hasClerkElements = clerkElements.length > 0;

      // Clerk 로딩 상태 확인
      const hasClerkLoading =
        body.includes("Loading") || body.includes("loading");

      return {
        bodyContent: body.substring(0, 500), // 첫 500자만
        hasMockMessage,
        hasClerkElements,
        clerkElementsCount: clerkElements.length,
        hasClerkLoading,
      };
    });

    console.log("Clerk 컴포넌트 상태:", clerkComponentCheck);

    if (clerkComponentCheck.hasMockMessage) {
      console.log("⚠️  아직 Mock 컴포넌트가 표시되고 있습니다.");
      console.log("🔧 디버그 컨트롤로 Clerk 재활성화를 시도합니다...");

      // 디버그 컨트롤 버튼 클릭 시도
      try {
        const reactivateButton = await page
          .locator('text="Clerk 인증 재시도"')
          .first();
        if (await reactivateButton.isVisible()) {
          console.log("🔧 디버그 컨트롤에서 Clerk 재활성화 버튼 클릭");
          await reactivateButton.click();
          await page.waitForTimeout(5000);
        }
      } catch (error) {
        console.log("ℹ️  디버그 컨트롤 버튼을 찾을 수 없습니다.");
      }
    } else if (clerkComponentCheck.hasClerkElements) {
      console.log("✅ 실제 Clerk 컴포넌트가 로드되었습니다!");
    } else {
      console.log("🔄 Clerk 컴포넌트 로딩 중...");
    }

    // 5단계: 회원가입 페이지도 테스트
    console.log("\n📋 5단계: Clerk 실제 회원가입 페이지 테스트");
    await page.goto("http://localhost:3000/sign-up");
    await page.waitForTimeout(3000);

    const signUpCheck = await page.evaluate(() => {
      const body = document.body.textContent || "";
      const hasMockMessage = body.includes("인증 시스템이 임시로 비활성화");
      const clerkElements = document.querySelectorAll("[data-clerk-element]");

      return {
        hasMockMessage,
        hasClerkElements: clerkElements.length > 0,
        clerkElementsCount: clerkElements.length,
      };
    });

    console.log("회원가입 페이지 Clerk 상태:", signUpCheck);

    // 6단계: 최종 결과 요약
    console.log("\n🎉 Clerk 활성화 테스트 완료!");
    console.log("\n📊 테스트 결과 요약:");

    if (clerkComponentCheck.hasMockMessage && signUpCheck.hasMockMessage) {
      console.log("❌ Clerk Mock 컴포넌트가 여전히 표시됨");
      console.log("💡 추가 조치 필요: Clerk CDN 문제 또는 설정 확인");
    } else if (
      clerkComponentCheck.hasClerkElements ||
      signUpCheck.hasClerkElements
    ) {
      console.log("✅ 실제 Clerk 컴포넌트 로드 성공!");
      console.log("✅ 한국어 지역화 적용됨");
    } else {
      console.log("🔄 Clerk 로딩 상태 - 네트워크 상태 확인 필요");
    }

    // 브라우저를 5초간 열어둠 (확인용)
    console.log("\n⏰ 브라우저를 5초간 열어둡니다 (확인용)...");
    await page.waitForTimeout(5000);
  } catch (error) {
    console.error("❌ 테스트 중 오류 발생:", error);
  } finally {
    await browser.close();
  }
}

// 테스트 실행
activateClerkAndTest().catch(console.error);