zellyy-finance/test-clerk-alternatives.cjs

/**
 * Clerk 대안 솔루션 테스트
 * 다양한 Clerk 설정과 대안 접근 방법 시도
 */

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

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

    // 네트워크 요청 모니터링
    page.on("response", (response) => {
      const url = response.url();
      if (url.includes("clerk") && response.status() !== 200) {
        console.log(`❌ ${response.status()} ${url}`);
      }
    });

    console.log("\n📋 테스트 1: 현재 환경에서 Clerk 컴포넌트 강제 로드");

    // 1. 모든 보호 메커니즘 비활성화
    await page.goto("http://localhost:3000/");
    await page.evaluate(() => {
      // 모든 Clerk 관련 플래그 제거
      sessionStorage.clear();
      localStorage.clear();

      // 강제 Clerk 활성화 플래그
      sessionStorage.setItem("forceClerk", "true");
      sessionStorage.setItem("skipClerkProtection", "true");

      console.log("✅ 모든 보호 메커니즘 비활성화");
    });

    await page.reload();
    await page.waitForTimeout(5000);

    console.log("\n📋 테스트 2: 다른 CDN 사용 시도");

    // CDN 차단을 우회하기 위해 스크립트 직접 로드 시도
    const cdnTestResults = await page.evaluate(async () => {
      const testUrls = [
        "https://cdn.jsdelivr.net/npm/@clerk/clerk-js@latest/dist/clerk.browser.js",
        "https://unpkg.com/@clerk/clerk-js@latest/dist/clerk.browser.js",
        "https://cdn.skypack.dev/@clerk/clerk-js@latest/dist/clerk.browser.js",
      ];

      const results = {};

      for (const url of testUrls) {
        try {
          const response = await fetch(url, { method: "HEAD" });
          results[url] = response.status;
        } catch (error) {
          results[url] = `Error: ${error.message}`;
        }
      }

      return results;
    });

    console.log("CDN 테스트 결과:", cdnTestResults);

    console.log("\n📋 테스트 3: Mock환경에서 Clerk UI 시뮬레이션");

    // 로그인 페이지로 이동
    await page.goto("http://localhost:3000/sign-in");
    await page.waitForTimeout(3000);

    // 현재 페이지 상태 확인
    const pageAnalysis = await page.evaluate(() => {
      const body = document.body.textContent || "";

      return {
        hasMockContent: body.includes("인증 시스템이 임시로 비활성화"),
        hasKoreanText: body.includes("로그인") || body.includes("한국어"),
        hasClerkElements: document.querySelectorAll("[data-clerk-element]")
          .length,
        hasClerkForms: document.querySelectorAll("form").length,
        bodyPreview: body.substring(0, 200),
        currentUrl: window.location.href,
      };
    });

    console.log("페이지 분석 결과:", pageAnalysis);

    console.log("\n📋 테스트 4: 로컬 Clerk 시뮬레이션 활성화");

    // Clerk 재활성화 버튼 클릭 시도
    try {
      const reactivateButton = await page
        .locator('text="Clerk 인증 다시 시도하기"')
        .first();
      if (await reactivateButton.isVisible()) {
        console.log("🔧 Clerk 재활성화 버튼 클릭 시도");
        await reactivateButton.click();
        await page.waitForTimeout(10000); // 로딩 대기

        // 재활성화 후 상태 확인
        const afterReactivation = await page.evaluate(() => {
          const body = document.body.textContent || "";
          return {
            hasMockContent: body.includes("인증 시스템이 임시로 비활성화"),
            hasErrorMessages:
              body.includes("503") || body.includes("ChunkLoadError"),
            hasClerkElements: document.querySelectorAll("[data-clerk-element]")
              .length,
          };
        });

        console.log("재활성화 후 상태:", afterReactivation);
      } else {
        console.log("ℹ️  재활성화 버튼을 찾을 수 없습니다");
      }
    } catch (error) {
      console.log("ℹ️  재활성화 버튼 클릭 중 오류:", error.message);
    }

    console.log("\n📋 테스트 5: Supabase 인증 우회 테스트");

    // 앱 시작하기 버튼 클릭하여 Supabase 인증으로 진입
    try {
      const startButton = await page.locator('text="앱 시작하기"').first();
      if (await startButton.isVisible()) {
        console.log("🔧 Supabase 인증으로 앱 진입 시도");
        await startButton.click();
        await page.waitForTimeout(3000);

        // 홈페이지로 이동했는지 확인
        const finalUrl = page.url();
        console.log("최종 URL:", finalUrl);

        if (
          finalUrl.includes("localhost:3000") &&
          !finalUrl.includes("sign-in")
        ) {
          console.log("✅ Supabase 인증 우회 성공 - 앱에 진입함");
        } else {
          console.log("❌ Supabase 인증 우회 실패");
        }
      }
    } catch (error) {
      console.log("ℹ️  앱 시작 버튼 클릭 중 오류:", error.message);
    }

    console.log("\n🎉 Clerk 대안 솔루션 테스트 완료!");

    // 최종 권장사항 제시
    console.log("\n📊 최종 분석 및 권장사항:");
    console.log(
      "1. ❌ Clerk CDN (joint-cheetah-86.clerk.accounts.dev)에서 지속적인 503 오류"
    );
    console.log(
      "2. ❌ 대체 CDN들도 @clerk/clerk-js 패키지를 완전히 지원하지 않음"
    );
    console.log("3. ✅ Mock 컴포넌트는 정상 작동하며 한국어 지원됨");
    console.log("4. ✅ Supabase 인증 시스템이 백업으로 작동 중");
    console.log("\n💡 권장사항:");
    console.log("- 새로운 Clerk 프로젝트 생성하여 다른 도메인 키 시도");
    console.log("- 또는 현재 Mock 시스템을 개선하여 완전한 인증 시스템 구축");
    console.log("- Supabase Auth를 주요 인증 시스템으로 완전 전환 고려");

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

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