좋습니다! 지금 만든 SPA(React + Tailwind + Context API 기반) 연애 테스트 앱을
Vercel에 무료로 배포하는 전체 가이드를 드리겠습니다.

⸻

✅ Vercel 배포 가이드 (React SPA 기준)

1단계. Vercel 가입 & GitHub 연동
1. https://vercel.com 접속
2. GitHub 계정으로 로그인
3. 연동 허용 (레포지토리 접근 권한 부여)

⸻

2단계. GitHub 저장소에 코드 푸시

프로젝트 폴더로 이동

cd romance-ai-spa-template

Git 초기화 및 GitHub 연결

git init
git remote add origin https://github.com/your-username/romance-ai-spa.git
git add .
git commit -m "Init SPA template"
git push -u origin master

⸻

3단계. Vercel에서 새 프로젝트 생성
1. Import Git Repository 선택
2. 방금 푸시한 romance-ai-spa 레포 선택
3. 자동으로 프로젝트 설정 감지됨

설정 확인:
• Framework Preset: Create React App
• Root Directory: romance-ai-spa-template/
• Build Command: npm run build
• Output Directory: build

Tailwind 사용 시 별도 설정 필요 없음

⸻

4단계. SPA 경로 문제 해결 (404 방지)

SPA는 라우팅을 클라이언트에서 처리하므로, Vercel에서 다음 설정이 필요합니다.

vercel.json 파일 생성 (최상위에 추가):

{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}

이 설정은 모든 경로 요청을 index.html로 리디렉션하여 SPA가 정상 작동하게 만듭니다.

⸻

5단계. 배포 완료 후 확인
• 배포 완료 시 Vercel이 자동으로 URL을 생성합니다
예: https://romance-ai-spa.vercel.app/
• 이후 커밋/푸시할 때마다 자동 재배포됨

⸻

✅ 추가 설정 (선택)

항목 방법
커스텀 도메인 연결 Vercel → Settings → Domains 메뉴
.env 설정 Vercel → Settings → Environment Variables
다크모드 대응 Tailwind 설정에서 darkMode: 'class' 사용
공유 링크 메타태그 public/index.html에 OG 태그 추가

⸻

✅ 참고 명령어

npm install
npm run start # 로컬 실행
npm run build # 배포용 빌드

⸻

도움이 더 필요하신가요?
• Firebase 호스팅 방식도 원하시면 드릴 수 있어요
• vercel.json 자동 생성 코드도 드릴 수 있어요
• 커스텀 도메인 설정 스크립트도 가능합니다

필요하신 항목 있으면 말씀만 해주세요!