fix: Vercel URL 수정 및 BasicApp 빌드 테스트

- test-vercel-deployment.cjs에서 올바른 Vercel URL 사용
- Prettier 포맷팅 적용
- BasicApp 빌드 후 배포 테스트 준비

CLAUDE.md

@@ -1,5 +1,13 @@
 # Zellyy Finance - 개인 가계부 애플리케이션
 
+## 프로젝트 기본 rule
+
+- 항상 한국어로 말해줘
+- 로컬 웹서버는 항상 3000번 포트를 사용하고 사용 중이면 프로세스를 kill한 후에 재실행을 해줘
+- MCP는 설치되어 있어 mcp 서버를 설치하려는 시도는 하지 말아줘
+- playwright mcp 서버가 설치되어 있으니까 웹브라우저 콘솔 정보를 나에게 요청하지 말고 이것을 활용해줘
+- 인터넷으로 최신 정보를 얻을 필요가 있을 때에는 context7 mcp 서버를 활용해줘
+
 ## 프로젝트 개요
 
 Zellyy Finance는 React와 TypeScript로 구축된 개인 가계부 관리 애플리케이션입니다. 사용자가 수입과 지출을 추적하고 예산을 관리할 수 있는 직관적인 웹 애플리케이션입니다.

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);