급여 패스북 — 배포 가이드

처음 배포하기 (Vercel 기준, 무료)

1. https://vercel.com 에서 무료 가입 (GitHub 계정으로 가입하면 편해요)
2. 이 폴더를 GitHub에 새 저장소로 올리기
   • GitHub 데스크톱 앱을 쓰거나, git init → git add . → git commit -m "init" → GitHub에 새 저장소 만들고 push
3. Vercel에서 "Add New Project" → 방금 만든 GitHub 저장소 선택 → 빌드 설정은 자동 감지됨 (Framework: Vite) → Deploy
4. 몇 분 뒤 https://your-project.vercel.app 같은 링크가 생겨요. 이게 진짜 서비스 주소예요.
5. 휴대폰 브라우저로 그 주소 열고 "홈 화면에 추가"하면 앱처럼 아이콘이 생겨요.

Netlify를 쓰고 싶으면 방식은 거의 동일해요 (netlify.com → New site from Git).

중요: 데이터는 어디에 저장되나요?

이 앱은 서버가 없어요. 모든 기록(지출, 통장 잔액 등)은 각자 사용하는 브라우저의 localStorage에 저장돼요. 그래서:

• 나와 지인이 같은 링크를 써도 서로의 데이터는 안 섞여요. 각자 기기에만 남아요.
• 브라우저 저장공간을 지우거나(설정 > 사이트 데이터 삭제), 다른 브라우저/기기로 넘어가면 데이터가 없어져요.
• 이런 상황을 대비해서 설정 탭에 데이터 백업(내보내기/가져오기) 기능을 넣어뒀어요. 텍스트(JSON)로 복사해두고, 필요할 때 붙여넣어 복원할 수 있어요.

나중에 기능을 추가하거나 고칠 때 (가장 중요한 부분)

같은 Vercel/Netlify 프로젝트에, 같은 주소로 다시 배포하는 한 기존 데이터는 자동으로 그대로 남아요. localStorage는 "코드가 배포된 서버"가 아니라 "그 웹 주소(도메인)"에 묶여있기 때문에, 코드만 새로 올리는 건 데이터에 영향을 주지 않아요.

앞으로 저와 함께(또는 직접) 기능을 추가할 때는 이렇게 하면 돼요:

1. 이 src/App.jsx 파일을 Claude에게 다시 보여주고 "이 기능을 추가해줘"라고 요청
2. 수정된 App.jsx를 받아서 기존 프로젝트의 src/App.jsx를 덮어쓰기
3. GitHub에 다시 push하면 Vercel이 자동으로 재배포함 (Vercel-GitHub 연동을 해뒀다면 push만 해도 자동 배포됨)
4. 주소는 그대로이므로 사용자들 데이터는 안전하게 유지됨

주의할 점 한 가지: 데이터 구조 자체가 바뀌는 큰 업데이트(예: 필드 이름 변경)를 할 때는, 코드 안의 migrate() 함수에 이전 데이터를 새 구조로 변환하는 로직을 반드시 넣어야 해요 (이미 몇 군데 이렇게 되어 있어요). 이 부분은 제가 코드를 수정해드릴 때 함께 챙겨드릴게요.

절대 하면 안 되는 것: 새 Vercel 프로젝트를 만들거나 도메인을 바꾸는 것. 그러면 완전히 다른 주소가 되어 기존 localStorage 데이터에 접근할 수 없게 돼요. 업데이트는 항상 같은 프로젝트/같은 주소에 재배포하세요.

로컬에서 미리 확인하기 (선택)

npm install
npm run dev