feat: Clerk + Supabase 통합 시스템 구현 완료

주요 변경사항: • Clerk 인증 시스템 통합 및 설정 • Supabase 데이터베이스 스키마 설계 및 적용 • JWT 기반 Row Level Security (RLS) 정책 구현 • 기존 Appwrite 인증을 Clerk로 완전 교체 기술적 개선: • 무한 로딩 문제 해결 - Index.tsx 인증 로직 수정 • React root 마운팅 오류 수정 - main.tsx 개선 • CORS 설정 추가 - vite.config.ts 수정 • Sentry 에러 모니터링 통합 추가된 컴포넌트: • AuthGuard: 인증 보호 컴포넌트 • SignIn/SignUp: Clerk 기반 인증 UI • ClerkProvider: Clerk 설정 래퍼 • EnvTest: 개발환경 디버깅 도구 데이터베이스: • user_profiles, transactions, budgets, category_budgets 테이블 • Clerk JWT 토큰 기반 RLS 정책 • 자동 사용자 프로필 생성 및 동기화 Task Master: • Task 11.1, 11.2, 11.4 완료 • 프로젝트 관리 시스템 업데이트 Note: ESLint 정리는 별도 커밋에서 진행 예정 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-13 14:01:27 +09:00
parent e72f9e8d26
commit c231d5be65
59 changed files with 5974 additions and 751 deletions
--- a/test-debug.js
+++ b/test-debug.js
@@ -0,0 +1,120 @@
+import { chromium } from "playwright";
+
+async function debugApp() {
+  console.log("🚀 Playwright 디버깅 시작...");
+
+  const browser = await chromium.launch({ headless: false });
+  const context = await browser.newContext({
+    viewport: { width: 1280, height: 720 },
+  });
+  const page = await context.newPage();
+
+  // 콘솔 메시지 캐치
+  page.on("console", (msg) => {
+    const type = msg.type();
+    const text = msg.text();
+    console.log(`[CONSOLE ${type.toUpperCase()}] ${text}`);
+  });
+
+  // 에러 캐치
+  page.on("pageerror", (error) => {
+    console.log(`[PAGE ERROR] ${error.message}`);
+    console.log(`[STACK] ${error.stack}`);
+  });
+
+  // 네트워크 요청 모니터링
+  page.on("request", (request) => {
+    console.log(`[REQUEST] ${request.method()} ${request.url()}`);
+  });
+
+  page.on("response", (response) => {
+    const status = response.status();
+    const url = response.url();
+    if (status >= 400) {
+      console.log(`[RESPONSE ERROR] ${status} ${url}`);
+    }
+  });
+
+  try {
+    console.log("📱 localhost:3000 접속 중...");
+    await page.goto("http://localhost:3000", { waitUntil: "networkidle" });
+
+    // 페이지 타이틀 확인
+    const title = await page.title();
+    console.log(`📄 페이지 타이틀: ${title}`);
+
+    // Root 엘리먼트 확인
+    const rootContent = await page.evaluate(() => {
+      const root = document.getElementById("root");
+      return {
+        exists: !!root,
+        innerHTML: root ? root.innerHTML.substring(0, 200) : null,
+        children: root ? root.children.length : 0,
+      };
+    });
+    console.log(`🎯 Root 엘리먼트:`, rootContent);
+
+    // 환경 변수 확인 (단순화)
+    const envVars = await page.evaluate(() => {
+      return {
+        hasGlobalVars: typeof window !== "undefined",
+        location: window.location.href,
+      };
+    });
+    console.log(`🔑 환경 변수:`, envVars);
+
+    // React 앱 상태 확인
+    const reactStatus = await page.evaluate(() => {
+      return {
+        reactExists: !!window.React,
+        hasErrors: window.__REACT_ERROR__ || false,
+        querySelector: !!document.querySelector("[data-reactroot]"),
+      };
+    });
+    console.log(`⚛️ React 상태:`, reactStatus);
+
+    // 스크립트 태그 확인
+    const scripts = await page.evaluate(() => {
+      const scriptTags = Array.from(document.querySelectorAll("script[src]"));
+      return scriptTags.map((script) => ({
+        src: script.src,
+        type: script.type || "text/javascript",
+      }));
+    });
+    console.log(`📜 로드된 스크립트:`, scripts.length, "개");
+    scripts.forEach((script, i) => {
+      console.log(`   ${i + 1}. ${script.src}`);
+    });
+
+    // 5초 대기하여 React 앱 로딩 확인
+    console.log("⏳ 5초 대기 중...");
+    await page.waitForTimeout(5000);
+
+    // 최종 상태 확인
+    const finalStatus = await page.evaluate(() => {
+      const root = document.getElementById("root");
+      return {
+        rootHTML: root ? root.innerHTML.substring(0, 500) : null,
+        bodyClasses: document.body.className,
+        hasVisibleContent: document.body.children.length > 1,
+      };
+    });
+    console.log(`🎬 최종 상태:`, finalStatus);
+
+    // 스크린샷 촬영
+    await page.screenshot({ path: "debug-screenshot.png", fullPage: true });
+    console.log("📸 스크린샷 저장됨: debug-screenshot.png");
+  } catch (error) {
+    console.error("❌ 에러 발생:", error.message);
+    console.error("스택:", error.stack);
+  }
+
+  // 브라우저를 5초간 열어두고 수동 확인 가능하게 함
+  console.log("🔍 브라우저를 5초간 열어둡니다...");
+  await page.waitForTimeout(5000);
+
+  await browser.close();
+  console.log("✅ 디버깅 완료");
+}
+
+debugApp().catch(console.error);