DIVE SOPT 37기 합동세미나 모바일 웹 2조 MEGABOX

👥 팀원 소개

이훈진	권동희	송민하	차주영
@huniversal	@hamxxn	@sminha	@woodzverse

🚀 역할 분담 및 담당 구현

훈진

종류	목록
setting	Tanstack Query · Zustand · Color-Token
view	결제 페이지 · Common-Toast Message
api	예매 POST

동희

종류	목록
setting	CI/CD · 폴더구조 · 절대경로 · 테일윈드 · SVG-Components · SVG 자동화 코드 구현 · api instance · swagger-ts-api
view	전체 레이아웃 · 메인 페이지 · Modal · 댓글 컴포넌트 · movie card · divider
api	영화 리스트 GET

민하

종류	목록
setting ⚙️	-
view 👀	영화 예매 페이지 · Common-Button
api 📡	영화관 API · 상영정보 조회 API · 예약 전 상영정보 조회 API · 예약 API

주영

종류	목록
setting ⚙️	Deployment · Storybook Setting · Typography-Token
view 👀	영화 상세 페이지 · Common-tooltip · Common-header
api 📡	영화 상세 조회 API · 영화 관람평 조회 API

⚙️ 기술 스택

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

🧾 컨벤션

Commit Message Convention

[기본 형식]
타입: 제목
- 세부 내용1
- 세부 내용2

[사용 예시]
git commit -m "feat: 사용자 프로필 페이지 구현"

**[작성 규칙]**
- 타입은 소문자로 시작(feat, fix…)
- 제목은 한국어로 간결하게
- 과거형 사용 금지(구현했다 X → 구현 O)

타입	설명	예시
init	초기 설정	init: 프로젝트 초기 설정 - ESLint 설정 - 폴더 구조
feat	새로운 기능 추가	feat: 로그인 기능 구현 - JWT 토큰 처리 - 리다이렉트 로직
fix	버그, 오류 수정	fix: 회원가입 유효성 검사 오류 - 이메일 정규식 수정
style	CSS 등 UI 디자인 변경	style: 버튼 디자인 수정 - hover 효과 추가
refactor	코드 리팩토링	refactor: API 호출 로직 개선 - axios 인터셉터 적용

Folder Convention

폴더명: kebab-case
파일명: PascalCase
단, .ts 파일은 kebab-case

└── auth-form/
    ├── LoginForm.tsx
    ├── RegisterForm.tsx
    ├── PasswordResetForm.tsx
    └── index.ts

Branch Convention

기능/#이슈번호/기능명

📁 폴더 구조

├── apis/                     
├── public/                   
├── src/
│   ├── App.tsx / main.tsx             
│   ├── pages/                         
│   │   ├── home/
│   │   │   ├── Home.tsx / Home.client.tsx
│   │   │   ├── api/use-api-request.ts
│   │   │   ├── components/Carousel.tsx
│   │   │   └── hooks/use-movie.ts
│   │   ├── movie-detail/
│   │   │   ├── MovieDetail.tsx
│   │   │   ├── @section/ (InfoSection, ReviewSection)
│   │   │   ├── api/, components/, constants/, hooks/, styles/, types/, mock.ts
│   │   ├── movie-reservation/
│   │   │   ├── Reservation.tsx
│   │   │   ├── components/, constants/, hooks/, section/, types/, utils/
│   │   └── payment/
│   │       ├── Payment.tsx
│   │       ├── @section/, components/, constants/, hooks/, schemas/, mock.ts
│   ├── router/                        # 라우터 및 Layout
│   ├── shared/                        # 공용 자원 (assets, components, constants, hooks, query-key, store, styles, types, utils)
│   └── vite-env.d.ts
├── dist/                              # Vite 빌드 산출물
├── package.json / pnpm-lock.yaml      # 의존성 관리
├── tsconfig.*                         # TypeScript 설정
└── vite.config.ts                     # Vite 설정