⸻
Vite + React + TypeScript + Tailwind CSS 기반의 Team1 프론트엔드 레포지토리입니다.
- Framework: React
- Language: TypeScript
- Bundler: Vite
- Styling: Tailwind CSS (v4)
- Routing: React Router DOM
- Package Manager: pnpm
- Version Control: Git / GitHub
git clone https://github.com/7th-COKERTHON/Team1-Frontend.git
cd Team1-Frontend
2. 패키지 설치
pnpm install
3. 개발 서버 실행
pnpm dev
⸻
🌿 Branch Strategy
기본 브랜치
• main : 배포 및 최종 결과물 브랜치
• develop : 개발 통합 브랜치 (모든 기능 병합 대상)
⸻
🌱 Branch 생성 가이드
브랜치 생성 규칙
type/작업-내용
Type 종류
타입 설명
feature 새로운 기능 개발
fix 버그 수정
refactor 코드 리팩토링
style 스타일(UI/CSS) 수정
chore 설정, 패키지, 환경 관련
docs 문서 수정
브랜치 생성 예시
git checkout develop
git pull origin develop
git checkout -b feature/login-page
git checkout -b fix/header-bug
git checkout -b refactor/router-structure
❗️ main 브랜치에서 직접 작업 ❌
❗️ 모든 브랜치는 develop 기준으로 생성
⸻
📝 Commit Message Convention
커밋 메시지는 아래 형식을 따릅니다.
type: subject
Commit Type
타입 설명
feat 새로운 기능 추가
fix 버그 수정
style 스타일 변경
refactor 코드 구조 개선
chore 설정 및 기타 작업
docs 문서 수정
test 테스트 코드
커밋 예시
feat: 로그인 페이지 UI 구현
fix: 헤더 버튼 클릭 오류 수정
style: 공용 버튼 색상 변경
refactor: router 구조 정리
chore: eslint 설정 추가
docs: README 업데이트
⸻
🔁 Pull Request 가이드
PR 생성 규칙
• PR 대상 브랜치: develop
• PR 제목은 커밋 메시지 규칙과 동일
PR 제목 예시
feat: 로그인 페이지 UI 구현
fix: 헤더 클릭 오류 수정
PR 체크리스트
• 빌드 에러 없음
• 콘솔 에러 없음
• 관련 Issue 연결
⸻
📁 Project Structure
src/
├─ pages/ # 페이지 단위 컴포넌트
├─ components/ # 공용 컴포넌트
├─ layouts/ # 레이아웃
├─ routes/ # 라우터 설정
├─ styles/ # theme, 공용 스타일
├─ hooks/ # 커스텀 훅
├─ services/ # API 요청
├─ types/ # 공용 타입
└─ utils/ # 유틸 함수
⸻
🎨 Styling Rule
• Tailwind CSS 사용
• 공용 색상 및 디자인 토큰은 styles/theme.css에서 관리
• 과도한 인라인 스타일 지양
⸻
⚠️ Development Rules
• JSX 사용 파일은 반드시 .tsx
• 절대 경로 import 사용 (@/)
import Header from "@/components/Header";
• 하나의 브랜치 = 하나의 목적
• 작업 시작 전 Issue 생성 권장
⸻
📌 Notes
• 패키지 매니저는 pnpm만 사용
• 설정 변경 시 팀원에게 공유 필수