BeTrip Frontend

🚀 시작하기

요구 사항

• Node.js v20.x 이상
• npm

설치 및 실행

# 1. 클론
git clone https://github.com/사용자명/betrip-frontend.git
cd betrip-frontend
# 2. 패키지 설치
npm install
# 3. 개발 서버 실행
npm run dev

브라우저에서 http://localhost:5173 접속

📁 폴더 구조

src/
  components/   # 재사용 UI component
  pages/        # route별 page
  context/      # React Context (전역 상태)
  store/        # zustand store
  hooks/        # custom hook
  utils/        # util function (날짜 계산 등)
  types/        # type 정의
  assets/       # image

🎨 화면 구성

Page	Route	Role	Login	Issue #
DevHome	/	개발용 진입 페이지	❌	-
HomePage	/home	랜딩 페이지, 일정 만들기 진입점	❌	#12
LoginPage	/login	이메일/비밀번호 로그인	❌	#9
SignupPage	/signup	회원가입	❌	#9
CreatePlanPage	/plan/create	일정 생성 시작	✅	#14
PlacePage	/place	검색과 AI 채팅으로 장소를 추천받고 카테고리(음식점/카페/활동)별로 담기	✅	#6
PlanPage	/plan/:id	Day별 지도(카카오맵)와 시간대별 일정 구성, 드래그앤드롭으로 장소 담기	✅	#8
MyPage	/my	내 일정 목록	✅	#13
DesignSystemPage	/design-system	공통 컴포넌트/토큰 카탈로그 (개발용)	❌	#2

로그인이 필요한 페이지는 ProtectedRoute로 감싸져 있어, 비로그인 상태로 접근하면 /login으로 리다이렉트되고 로그인 성공 시 원래 가려던 페이지로 자동 복귀합니다.

💻 대표 화면 흐름

1️⃣Login	➡️	2️⃣HomePage	➡️	3️⃣CreatePlanPage

4️⃣PlacePage	➡️	5️⃣PlanPage	➡️	6️⃣MyPage

🌿 브랜치 전략

브랜치	역할
main	운영 배포
develop	개발 통합

작업 순서

1. issue 생성 (이슈 템플릿 사용) → 브랜치 생성 → 작업
2. 브랜치 네이밍: type/#issueNumber-description

브랜치 / 커밋 타입

타입	설명	사용 예시
feat	새로운 기능 추가	로그인 기능 추가, 자산 조회 API 구현
fix	버그 수정	차트 렌더링 오류 수정, 로그인 실패 문제 해결
refactor	기능 변화 없는 코드 구조 개선	컴포넌트 분리, 서비스 레이어 구조 개선
docs	문서 수정	API 명세 수정, README 업데이트
style	코드 스타일 및 UI 수정	CSS 수정, prettier 적용, 마진 조정
test	테스트 코드 추가 및 수정	단위 테스트 추가, Mock 테스트 작성
chore	설정·빌드·패키지 등 유지보수	eslint 설정, dependency 업데이트
hotfix	운영 환경 긴급 수정	운영 서버 장애 수정, 긴급 배포 대응