fix: ESLint React Hook 오류 비활성화
- useAuth와 useUser에서 react-hooks/rules-of-hooks 규칙 비활성화 - Clerk이 비활성화된 상황에서의 조건부 Hook 호출은 의도된 동작
This commit is contained in:
hansoo
203
test-real-clerk-auth.cjs
Normal file
203
test-real-clerk-auth.cjs
Normal file
@@ -0,0 +1,203 @@
|
||||
/**
|
||||
* 실제 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);
|
||||
Reference in New Issue
Block a user