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

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

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

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

---

🏴‍☠️ Confeti FE Developers

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

📌 서비스 핵심 기능

🏠 홈 페이지

사용자 맞춤형 정보 제공: 사용자의 선호를 기반으로 아티스트 및 공연 정보를 맞춤형으로 제공해요.

• 선호 아티스트 및 공연 예매일 임박 공연 정보 제공

🔍 검색 페이지

검색 기능을 통해 찾고 싶은 아티스트와 해당 아티스트가 참여하는 공연을 검색할 수 있어요.

• 검색한 아티스트 & 공연 좋아요 추가/삭제 기능 제공

👤 마이 페이지

회원정보와 선호하는 아티스트 및 공연에 대한 정보를 제공해요.

• 선호하는 아티스트 목록 및 공연 정보 확인 가능
• 로그인 & 로그아웃 가능

🥽 공연 상세보기 페이지

공연에 대한 전반적인 내용을 확인할 수 있으며 선호 버튼을 통해 해당 데이터를 기반으로 사용자 맞춤형 정보를 제공해요.

• 공연의 기간과 장소, 예매일, 예매처, 티켓 정보 제공
• 공연에 해당하는 아티스트 정보 제공
• 공연 좋아요 추가/삭제 기능 제공

🕰️ 타임테이블 페이지

자신만의 타임테이블을 만들고 이미지로 저장해 일정을 한눈에, 손쉽게 확인할 수 있어요.

• 페스티벌 추가: 타임테이블을 볼 페스티벌을 선택하여 추가할 수 있어요
• 타임테이블 편집 및 저장: 좋아하는 아티스트의 무대로 나만의 타임테이블을 만들고 이미지로 저장할 수 있어요
• 페스티벌 삭제: 사용자 개개인의 일정을 고려해 추가한 페스티벌의 타임테이블을 간편하게 삭제할 수 있어요.

➕ 타임테이블 추가 페이지

타임테이블을 볼 페스티벌을 선택하여 추가할 수 있어요.

• 최대 3개까지 타임테이블을 볼 수 있으며, 3개 초과시 토스트 팝업을 띄움

🛠️ 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

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