3934ab933f
- @clerk/clerk-react 패키지 설치 추가 - Vite external 설정에서 Clerk 번들링 허용으로 변경 - ChunkLoadError 복구 시스템 Playwright 테스트 추가 - Clerk CDN 실패 시나리오 검증 및 Mock 인증 폴백 시스템 확인 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
4.0 KiB
4.0 KiB
💰 Zellyy Finance - 개인 가계부 관리 애플리케이션
React와 TypeScript로 구축된 현대적인 개인 가계부 관리 애플리케이션입니다.
🚀 라이브 데모
- 프로덕션: zellyy-finance.vercel.app
- 스테이징: Preview 배포는 PR 생성 시 자동으로 생성됩니다.
🚀 시작하기
이 프로젝트를 로컬 환경에서 설정하고 실행하는 방법입니다.
사전 요구 사항
- Node.js (v18 이상)
- npm (v9 이상)
로컬에서 실행하기
The only requirement is having Node.js & npm installed - install with nvm
Follow these steps:
# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>
# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>
# Step 3: Install the necessary dependencies.
npm i
# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev
Edit a file directly in GitHub
- Navigate to the desired file(s).
- Click the "Edit" button (pencil icon) at the top right of the file view.
- Make your changes and commit the changes.
Use GitHub Codespaces
- Navigate to the main page of your repository.
- Click on the "Code" button (green button) near the top right.
- Select the "Codespaces" tab.
- Click on "New codespace" to launch a new Codespace environment.
- Edit files directly within the Codespace and commit and push your changes once you're done.
🛠️ 주요 기술 스택
- Backend: Supabase (Cloud)
- Frontend: React, Vite, TypeScript
- UI: shadcn-ui, Tailwind CSS
- State Management: Zustand, Tanstack Query
- Deployment: Vercel
🔧 TypeScript 타입 시스템
이 프로젝트는 강력한 타입 안전성을 위해 중앙화된 타입 시스템을 구축했습니다.
주요 특징
- Strict Mode: 모든 TypeScript strict 옵션 활성화
- 중앙화된 타입:
src/types/에서 모든 타입 관리 - 타입 가드: 런타임 타입 검증 지원
- 성능 최적화: 조기 반환 및 Set 기반 검증
문서
- 📚 타입 시스템 가이드 - 상세한 사용법과 구조 설명
- ⚡ 빠른 참조 - 자주 사용하는 패턴들
타입 검증
# 타입 오류 검사
npm run type-check
# 또는 직접
npx tsc --noEmit
🚀 배포 가이드
이 프로젝트는 Vercel을 통해 자동 배포됩니다.
자동 배포
- 프로덕션:
main브랜치에 푸시하면 자동으로 프로덕션 배포 - 프리뷰: PR 생성 시 자동으로 미리보기 배포 생성
- 스테이징:
develop브랜치는 스테이징 환경으로 배포
배포 설정
자세한 배포 설정 방법은 DEPLOYMENT.md를 참조하세요.
필수 환경 변수
프로젝트를 로컬에서 실행하려면 루트 디렉토리에 .env 파일을 생성하고 Supabase 프로젝트의 환경 변수를 추가해야 합니다.
# Supabase
VITE_SUPABASE_URL="YOUR_SUPABASE_URL"
VITE_SUPABASE_ANON_KEY="YOUR_SUPABASE_ANON_KEY"
🔗 커스텀 도메인
Vercel을 통해 커스텀 도메인을 쉽게 연결할 수 있습니다:
- Vercel 프로젝트 Settings > Domains
- 원하는 도메인 입력
- DNS 설정 업데이트
- SSL 인증서 자동 설정