zellyy-finance/force-clerk-test.cjs

/**
 * Clerk 실제 인증 강제 활성화 테스트
 * ChunkLoadError 보호 시스템을 일시 비활성화하고 실제 Clerk 로드 시도
 */

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

async function forceClerkTest() {
  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") || text.includes("ChunkLoadError")) {
        console.log("🔧 Message:", text);
      }
    });

    // 네트워크 요청 모니터링
    page.on("response", (response) => {
      const url = response.url();
      if (url.includes("clerk") || url.includes("joint-cheetah")) {
        console.log(`🌐 ${response.status()} ${url}`);
      }
    });

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

    // 2단계: 모든 Clerk 관련 플래그 제거
    console.log("\n📋 2단계: 모든 Clerk 비활성화 플래그 제거");
    await page.evaluate(() => {
      // 기존 Clerk 비활성화 플래그들 제거
      sessionStorage.removeItem("disableClerk");
      sessionStorage.removeItem("skipClerk");
      sessionStorage.removeItem("chunkLoadErrorMaxRetries");
      sessionStorage.removeItem("lastChunkErrorTime");

      // ChunkLoadError 보호 시스템도 임시 비활성화
      sessionStorage.setItem("forceClerkLoad", "true");

      console.log("✅ 모든 Clerk 비활성화 플래그 제거됨");
      console.log("✅ ChunkLoadError 보호 시스템 임시 비활성화됨");
    });

    // 3단계: 페이지 새로고침하여 강제 로드
    console.log("\n📋 3단계: 페이지 새로고침 (강제 Clerk 로드)");
    await page.reload();
    await page.waitForTimeout(10000); // 충분한 시간 대기

    // 4단계: 로그인 페이지로 이동
    console.log("\n📋 4단계: 로그인 페이지 테스트");
    await page.goto("http://localhost:3000/sign-in");
    await page.waitForTimeout(5000);

    // Clerk 로딩 상태 확인
    const signInPageState = await page.evaluate(() => {
      const body = document.body.textContent || "";

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

      // Clerk 실제 컴포넌트 확인
      const clerkElements = document.querySelectorAll("[data-clerk-element]");
      const clerkFormElements = document.querySelectorAll(
        "form[data-clerk-form]"
      );
      const clerkSignInElements = document.querySelectorAll(
        "[data-clerk-sign-in]"
      );

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

      // 에러 메시지 확인
      const hasChunkError =
        body.includes("ChunkLoadError") || body.includes("503");

      return {
        bodyText: body.substring(0, 300),
        hasMockMessage,
        hasClerkElements: clerkElements.length > 0,
        hasClerkFormElements: clerkFormElements.length > 0,
        hasClerkSignInElements: clerkSignInElements.length > 0,
        totalClerkElements:
          clerkElements.length +
          clerkFormElements.length +
          clerkSignInElements.length,
        hasLoading,
        hasChunkError,
        currentURL: window.location.href,
      };
    });

    console.log("로그인 페이지 상태:", signInPageState);

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

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

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

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

    // 6단계: 네트워크 상태 확인
    console.log("\n📋 6단계: Clerk CDN 직접 접근 테스트");

    try {
      // Clerk CDN에 직접 요청
      const clerkCdnResponse = await page.goto(
        "https://joint-cheetah-86.clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js",
        {
          waitUntil: "networkidle",
          timeout: 10000,
        }
      );

      console.log(`Clerk CDN 응답: ${clerkCdnResponse.status()}`);

      if (clerkCdnResponse.status() === 200) {
        console.log("✅ Clerk CDN 접근 가능");
      } else {
        console.log(`❌ Clerk CDN 접근 불가: ${clerkCdnResponse.status()}`);
      }
    } catch (error) {
      console.log("❌ Clerk CDN 접근 실패:", error.message);
    }

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

    if (signInPageState.hasMockMessage && signUpPageState.hasMockMessage) {
      console.log("❌ Mock 컴포넌트가 여전히 표시됨");

      if (signInPageState.hasChunkError || signUpPageState.hasChunkError) {
        console.log("❌ ChunkLoadError 또는 CDN 문제 지속");
        console.log("💡 권장사항: 다른 Clerk 인스턴스 또는 프로덕션 키 사용");
      } else {
        console.log("❌ 알 수 없는 이유로 Clerk 로드 실패");
      }
    } else if (
      signInPageState.totalClerkElements > 0 ||
      signUpPageState.totalClerkElements > 0
    ) {
      console.log("✅ 실제 Clerk 컴포넌트 로드 성공!");
      console.log("✅ 한국어 지역화 적용 확인 필요");
    } else {
      console.log("🔄 Clerk 로딩 중이거나 부분적 로드");
    }

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

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