"콘서트, 페스티벌 티켓 정보를 한눈에, 손쉽게!"

1. 내가 원하는 콘서트 및 페스티벌 정보를 모아서

2. 찜한 공연들을 바탕으로 나만의 타임테이블을 만들어

3. 중요한 일정들을 한눈에 확인할 수 있는 곳, confeti

---

🏴‍☠️ confeti FE Developers

강민하	곽지욱	김다현	김채은	김한서
@m2na7	@gwagjiug	@daahyunk	@bongtta	@seueooo

🛠️ Tech Stack

Node.js Version

v22.12.0

역할	종류
Library
Programming Language
Styling
Data Fetching
Formatting
Package Manager
Version Control
Workspace Management

🤔Why

기술 스택	선정 이유
	컴포넌트 기반 개발이 가능하여 재사용성과 유지보수성이 향상됨
	React + TypeScript 환경에 친화적으로 설계되어 초기 설정이 간소화되며, ES 모듈 기반으로 빌드 속도를 향상시킴
	정적 타입 체크를 지원하여 컴파일 단계에서 오류를 방지하고, 명확한 타입 정의를 통해 협업을 용이하게 함
	데이터 패칭, 캐싱, 동기화, 리패칭을 자동으로 처리하며, 백그라운드에서 데이터 업데이트 및 중복 요청을 방지함 추후 Next.js와 결합하여 SSR 및 스트리밍 기능 확장을 고려함
	정적 CSS 생성으로 빌드 타임에 CSS를 생성하여 런타임 성능을 최적화하며, Zero-runtime 스타일링을 통해 번들 크기를 최소화하고 성능을 향상시킴
	🔗 Storybook 설정 & 크로마틱 자동화
	🔗 Monorepo 도입기
	🔗 Turborepo 도입기
	🔗 Pnpm 도입기

📭 Git Convention

Git Flow

# 메인 브랜치(Main branch)
main(master)
`main` 브랜치는 배포 가능한 상태만을 관리해요.

# develop
`develop` 브랜치는 통합 브랜치 역할을 하며, 평소에는 해당 브랜치를 기반으로 개발을 진행해요.
모든 기능이 정상적으로 동작할 수 있는 안정적인 상태를 유지하고,
배포가 가능한 상태라면 `main`브랜치에 `merge` 해요.

# 피쳐 브랜치(Feature branch)
develop 브랜치에서 분기
develop 브랜치로 merge

Create Branch

모든 기능은 구현 이전 이슈를 생성하여 관리해요.

- 브랜치 네이밍: 구현기능 종류/간단한 기능명/#이슈번호
style/main-page/#43
refactor/edit-modal/#75

Commit Convention

모든 작업은 develop 에서 분기된 feature 브랜치에서 진행해요.
커밋 메시지는 커밋유형: 개발한 내용에 대한 커밋 메시지
ex) `feat: 타임테이블 기능 추가`

커밋유형	의미
feat	새로운 기능 추가
refactor	코드 리팩토링
fix	버그 수정
chore	패키지 매니저, 설정 세팅
init	초기 세팅 및 종속성 추가 관련
docs	문서 수정
design	CSS 및 UI 변경
style	코드 포맷팅, 세미콜론 누락 등 코드 변경 없음
test	테스트 코드, 리팩토링 테스트 코드 추가

📚 ISSUE + PR Convention

Issue - [구현기능 종류]: 작업명

• [Feature]: 메인페이지 API 연동

Pull Request - 구현기능 종류(패키지명): 작업명

• Feature(design-system): 공통 버튼컴포넌트 제작
• Feature(client): 메인페이지 API 연동
• 루트에서 설정한다면 패키지명은 생략 가능
  • Chore: 폴더구조 세팅

위의 형식 외에는 탬플릿 형식을 따라 작성

🗂️ Foldering

📦 apps
└── 📂 client
    ├── 📂 node_modules
    ├── 📂 public
    │   └── 📜 favicon.svg
    ├── 📂 src
    │   ├── 📂 pages
    │   │   ├── 📂 home
    │   │   │   ├── 📂 components
    │   │   │   ├── 📂 constants
    │   │   │   ├── 📂 hooks
    │   │   │   ├── 📂 page
    │   │   │   │   └── 📜 home.tsx
    │   │   │   │   └── 📜 home.css.ts
    │   │   │   └── 📂 types
    │   │   ├── 📂 my
    │   │   │   ├── 📂 components
    │   │   │   ├── 📂 hooks
    │   │   │   ├── 📂 page
    │   │   │   └── 📂 types
    │   │   ├── 📂 search
    │   │   │   ├── 📂 components
    │   │   │   ├── 📂 hooks
    │   │   │   ├── 📂 page
    │   │   │   └── 📂 types
    │   │   └── 📂 time-table
    │   │       ├── 📂 components
    │   │       ├── 📂 hooks
    │   │       ├── 📂 page
    │   │       └── 📂 types
    │   ├── 📂 shared
    │   │   ├── 📂 apis
    │   │   │   └── 📜 api.ts
    │   │   ├── 📂 assets
    │   │   │   └── 📂 images
    │   │   ├── 📂 components
    │   │   │   │   └── 📂 button
    │   │   │   │   │   └── 📜 button.tsx
    │   │   │   │   │   └── 📜 Button.stories.ts
    │   │   │   │   │   └── 📜 button.tsx
    │   │   ├── 📂 constants
    │   │   ├── 📂 hooks
    │   │   ├── 📂 pages
    │   │   ├── 📂 router
    │   │   ├── 📂 styles
    │   │   └── 📂 utils
    │   │       └── 📜 query-client.ts
    │   ├── 📜 App.tsx
    │   ├── 📜 main.tsx
    │   └── 📜 vite-env.d.ts
    ├── 📜 .eslintrc.cjs
    ├── 📜 .gitignore
    ├── 📜 index.html
    ├── 📜 package.json
    ├── 📜 tsconfig.json
    └── 📜 vite.config.ts

🎸 콘페티 자세한 컨벤션 알아보기