diff --git a/CLAUDE.md b/CLAUDE.md index e31eb10..a9e859d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,5 +1,13 @@ # Zellyy Finance - 개인 가계부 애플리케이션 +## 프로젝트 기본 rule + +- 항상 한국어로 말해줘 +- 로컬 웹서버는 항상 3000번 포트를 사용하고 사용 중이면 프로세스를 kill한 후에 재실행을 해줘 +- MCP는 설치되어 있어 mcp 서버를 설치하려는 시도는 하지 말아줘 +- playwright mcp 서버가 설치되어 있으니까 웹브라우저 콘솔 정보를 나에게 요청하지 말고 이것을 활용해줘 +- 인터넷으로 최신 정보를 얻을 필요가 있을 때에는 context7 mcp 서버를 활용해줘 + ## 프로젝트 개요 Zellyy Finance는 React와 TypeScript로 구축된 개인 가계부 관리 애플리케이션입니다. 사용자가 수입과 지출을 추적하고 예산을 관리할 수 있는 직관적인 웹 애플리케이션입니다. diff --git a/test-vercel-deployment.cjs b/test-vercel-deployment.cjs new file mode 100644 index 0000000..cb7345e --- /dev/null +++ b/test-vercel-deployment.cjs @@ -0,0 +1,105 @@ +const { chromium } = require("playwright"); + +async function testVercelDeployment() { + console.log("🚀 Vercel 배포 상태 테스트 시작"); + + const browser = await chromium.launch({ headless: true }); + const page = await browser.newPage(); + + try { + console.log("📡 https://zellyy-finance.vercel.app/ 접속 중..."); + + // 페이지 로드 시간 측정 + const startTime = Date.now(); + + // 페이지 로드 - 30초 타임아웃 설정 + await page.goto("https://zellyy-finance.vercel.app/", { + waitUntil: "networkidle", + timeout: 30000, + }); + + const loadTime = Date.now() - startTime; + console.log(`⏱️ 페이지 로드 시간: ${loadTime}ms`); + + // 페이지 내용 확인 + const title = await page.title(); + console.log(`📄 페이지 제목: "${title}"`); + + // HTML 내용 확인 + const htmlContent = await page.content(); + console.log(`📝 HTML 길이: ${htmlContent.length} 문자`); + + // BasicApp 관련 요소 확인 + const hasBasicApp = + htmlContent.includes("BasicApp") || + htmlContent.includes("Zellyy Finance - 기본 테스트"); + console.log( + `🔍 BasicApp 컨텐츠 감지: ${hasBasicApp ? "✅ 찾음" : "❌ 없음"}` + ); + + // React 앱이 렌더링되었는지 확인 + const hasReactContent = + htmlContent.includes("React 앱이 정상적으로") || + htmlContent.includes("환경 정보"); + console.log( + `⚛️ React 컨텐츠 감지: ${hasReactContent ? "✅ 찾음" : "❌ 없음"}` + ); + + // 에러 요소 확인 + const errorElements = await page.$$('[class*="error"], [id*="error"]'); + console.log(`🚨 에러 요소 수: ${errorElements.length}`); + + // 콘솔 메시지 확인 + const consoleLogs = []; + page.on("console", (msg) => { + consoleLogs.push(`${msg.type()}: ${msg.text()}`); + }); + + // 페이지를 다시 로드해서 콘솔 메시지 캡처 + await page.reload({ waitUntil: "networkidle" }); + + console.log("\n📊 콘솔 메시지:"); + consoleLogs.forEach((log) => console.log(` ${log}`)); + + // 스크린샷 찍기 + await page.screenshot({ + path: "vercel-deployment-test.png", + fullPage: true, + }); + console.log("📸 스크린샷 저장: vercel-deployment-test.png"); + + // DOM 내용 간단히 확인 + const bodyText = await page.locator("body").textContent(); + console.log(`\n📋 페이지 내용 미리보기 (첫 200자):`); + console.log(bodyText.substring(0, 200) + "..."); + + // 환경 변수 정보 확인 (페이지에 표시되는 경우) + const hasEnvInfo = + bodyText.includes("환경:") || bodyText.includes("Clerk Key:"); + console.log(`🔧 환경 정보 표시: ${hasEnvInfo ? "✅ 있음" : "❌ 없음"}`); + } catch (error) { + console.error("❌ 테스트 중 오류 발생:", error.message); + + // 네트워크 오류인지 확인 + if (error.message.includes("net::") || error.message.includes("TIMEOUT")) { + console.log("🌐 네트워크 연결 문제로 보입니다."); + } + + // 스크린샷 찍기 (오류 상황) + try { + await page.screenshot({ + path: "vercel-deployment-error.png", + fullPage: true, + }); + console.log("📸 오류 스크린샷 저장: vercel-deployment-error.png"); + } catch (screenshotError) { + console.log("📸 스크린샷 저장 실패"); + } + } finally { + await browser.close(); + console.log("🏁 테스트 완료"); + } +} + +// 테스트 실행 +testVercelDeployment().catch(console.error); diff --git a/vercel-deployment-test.png b/vercel-deployment-test.png new file mode 100644 index 0000000..cd22caa Binary files /dev/null and b/vercel-deployment-test.png differ