zellyy-finance/test-real-clerk-auth.cjs

/**
 * 실제 Clerk 인증 컴포넌트 활성화 테스트
 * 올바른 Secret Key로 실제 Clerk 로그인 페이지 테스트
 */

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

async function testRealClerkAuth() {
  const browser = await chromium.launch({
    headless: false,
    slowMo: 1000,
  });

  console.log("🔐 실제 Clerk 인증 컴포넌트 테스트 시작...");

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

    // 콘솔 메시지 캡처
    page.on("console", (msg) => {
      const text = msg.text();
      if (msg.type() === "error") {
        console.log("❌ Console Error:", text);
      } else if (
        text.includes("Clerk") ||
        text.includes("로그인") ||
        text.includes("한국어")
      ) {
        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}`);
      }
    });

    console.log("\n📋 1단계: 모든 Clerk 보호 메커니즘 제거");

    // 홈페이지로 이동
    await page.goto("http://localhost:3001/");
    await page.waitForTimeout(3000);

    // 모든 Clerk 관련 플래그 제거
    await page.evaluate(() => {
      // 기존 보호 플래그들 제거
      sessionStorage.removeItem("disableClerk");
      sessionStorage.removeItem("skipClerk");
      sessionStorage.removeItem("chunkLoadErrorMaxRetries");
      sessionStorage.removeItem("lastChunkErrorTime");
      sessionStorage.removeItem("noClerk");

      // 로컬 스토리지도 정리
      localStorage.clear();

      // 강제 Clerk 활성화
      sessionStorage.setItem("forceClerkEnabled", "true");
      sessionStorage.setItem("useRealClerk", "true");

      console.log("✅ 모든 Clerk 보호 메커니즘 제거됨");
      console.log("✅ 실제 Clerk 사용 강제 활성화");
    });

    console.log("\n📋 2단계: 페이지 새로고침으로 실제 Clerk 로드");
    await page.reload();
    await page.waitForTimeout(5000);

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

    // 페이지 상태 분석
    const signInAnalysis = await page.evaluate(() => {
      const body = document.body.textContent || "";
      const hasClerkElements = document.querySelectorAll(
        "[data-clerk-element]"
      ).length;
      const hasClerkSignIn = document.querySelectorAll(
        "[data-clerk-sign-in]"
      ).length;
      const hasClerkForms = document.querySelectorAll("form").length;
      const hasMockContent = body.includes("인증 시스템이 임시로 비활성화");
      const hasKoreanContent =
        body.includes("로그인") ||
        body.includes("회원가입") ||
        body.includes("한국어");
      const hasGoogleButton = body.includes("Google") || body.includes("구글");

      return {
        bodyPreview: body.substring(0, 300),
        hasClerkElements,
        hasClerkSignIn,
        hasClerkForms,
        hasMockContent,
        hasKoreanContent,
        hasGoogleButton,
        currentUrl: window.location.href,
        totalElements: hasClerkElements + hasClerkSignIn + hasClerkForms,
      };
    });

    console.log("로그인 페이지 분석:", signInAnalysis);

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

    const signUpAnalysis = await page.evaluate(() => {
      const body = document.body.textContent || "";
      const hasClerkElements = document.querySelectorAll(
        "[data-clerk-element]"
      ).length;
      const hasClerkSignUp = document.querySelectorAll(
        "[data-clerk-sign-up]"
      ).length;
      const hasMockContent = body.includes("인증 시스템이 임시로 비활성화");
      const hasKoreanContent =
        body.includes("회원가입") || body.includes("로그인");

      return {
        hasClerkElements,
        hasClerkSignUp,
        hasMockContent,
        hasKoreanContent,
        totalElements: hasClerkElements + hasClerkSignUp,
      };
    });

    console.log("회원가입 페이지 분석:", signUpAnalysis);

    console.log("\n📋 5단계: 실제 로그인 시도 (Google)");

    // 로그인 페이지로 돌아가기
    await page.goto("http://localhost:3001/sign-in");
    await page.waitForTimeout(3000);

    // Google 로그인 버튼 찾기
    try {
      const googleButton = await page.locator('text="Google"').first();
      if (await googleButton.isVisible()) {
        console.log("🔧 Google 로그인 버튼 발견, 클릭 시도");
        await googleButton.click();
        await page.waitForTimeout(5000);

        // 로그인 후 상태 확인
        const afterLoginUrl = page.url();
        console.log("로그인 시도 후 URL:", afterLoginUrl);

        if (
          afterLoginUrl.includes("localhost:3001") &&
          !afterLoginUrl.includes("sign-in")
        ) {
          console.log("✅ 로그인 성공! 홈페이지로 리다이렉트됨");
        }
      } else {
        console.log("ℹ️  Google 로그인 버튼을 찾을 수 없습니다");
      }
    } catch (error) {
      console.log("ℹ️  Google 로그인 시도 중 오류:", error.message);
    }

    console.log("\n🎉 실제 Clerk 인증 테스트 완료!");

    // 최종 결과 분석
    console.log("\n📊 최종 테스트 결과:");

    if (signInAnalysis.hasMockContent || signUpAnalysis.hasMockContent) {
      console.log("❌ Mock 컴포넌트가 여전히 표시됨");
      console.log(
        "💡 권장사항: ChunkLoadError 보호 시스템을 완전히 비활성화 필요"
      );
    } else if (
      signInAnalysis.totalElements > 0 ||
      signUpAnalysis.totalElements > 0
    ) {
      console.log("✅ 실제 Clerk 컴포넌트 로드 성공!");
      console.log(
        "✅ 한국어 지역화:",
        signInAnalysis.hasKoreanContent ? "적용됨" : "확인 필요"
      );
      console.log(
        "✅ Google 로그인:",
        signInAnalysis.hasGoogleButton ? "사용 가능" : "확인 필요"
      );
    } else {
      console.log("🔄 Clerk 컴포넌트 로딩 중이거나 부분적 로드");
    }

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

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