📡 컴포넌트 구조설계

1. 랜딩 페이지

섹션1) UI 구현--> 영화전체보기 누르면 다음페이지로 이동

섹션2) 혜택페이지 UI 구현

섹션3) 큐레이션 위에는 UI구현 아래 슬라이더는 구현하기(슬라이더 1개 더 있음) > 버튼 누르면 한 개씩 넘어가기, 일단 슬라이더 버튼 누르면 이미지만 교체

섹션4) 도움이 필요하신가요? 까지 UI 구현만(이미지 박기)

2. 박스오피스:

섹션) 전체영화

• UI만 구성하기
• 스크롤 내릴 때마다 top버튼 따라내려가기.
• 맨 위 4개만 호버
• 네브 바가 변화함(스크롤 내렸을 때 1)흰--> 검 으로 색 변화 2)미니 네브 바 출현 3) 체크박스 사라지고 )

3. 빠른예매

• UI그대로 구현 (날짜도 색칠 디자인 그대로)
• 영화 중 하나 클릭하면 아래 태그 생성 & 클릭 UI 바꿔주기(글자 보더에 색칠해짐)==> 카테고리 표시+ 미니네브 바(스크롤 내릴 때도 고정)
• 지역은 UI 보더처리해서 바꿔주기
• 마지막 영화관 선택은 밑에 태그 구현(영화 선택이랑 같은 것)
• 영화 선택하면 시간 위에 선택한 영화 제목 뜨게하기
• 영화관 선택하면 영화 예매 시간 뜨기 하기 (UI는 그대로 )

4. 인원 및 좌석 선택

• (1)번 UI 그대로 구현(좌선선택 전 UI)
• 왼쪽 상단은 내가 선택한 영화 뜨는데
  • 관람일시&장소 포스터 사진 싹 UI 고정 + 이름만 바꿔주세여(3. 빠른 예매 영화제목 받아오는 걸로) -예상 결제 금액만 동적으로 구현 위에 좌석선택은 이미지로 박기
  • 결제 금액 올리면 예상 결제 금액이 그만큼 올라가기(가격 알아서 책정)
  • 결제 금액 올리는 거 클릭하는 순간 이미지 (4)로 이동(좌선 선택 검은 블러창 사라진것)
  • 동시에 다음 버튼 초록색 활성화

5. 헤더 / 푸터

• 랜딩 페이지 + 모든 페이지 네브(미니 네브바까지---> props로 받아서 다 같이 사용하기)

---

🌟역할분담

지영 : 랜딩페이지 (route : /)

명지 : 박오피스 (route : /boxOffice)

혜은 : 빠른예매<영화선택> (route : /ticketing)

현수 : 빠른예매<인-좌 선택>+ 헤더/ 푸터 (route :select)

---

📡 Code Conventions

1. 변수 선언은 const 를 지향합시다.
2. 함수의 선언은 function 함수명 () {}을 사용해봐요! 변수의 선언과 구별할 수 있으면 좋을 것 같아요.
3. 작업하기 전에 이슈를 파고 체크리스트를 만듭니다. (이슈제목 : [ 페이지명 ] - 현재구현기능)
4. 브랜치는 기능당 1개를 팝니다. (브랜치명 : [ feat ]#이슈번호-기능)
5. 각자 작업하고 > 피알 날리고 > 코드리뷰 > main에 머지하기
6. 자잘한 버튼같은 이미지는 svg파일, 포스터같은 큰 이미지는 png로 다운받아요.
   ⭕️4명이 작업하지만 1명이 한 것처럼!!!! 모르면 카톡하기~!⭕️

---

📡 Commit Convention

• [ feat ] 새로 추가된 기능
• [ refactor ] 기능에 변화는 없지만 더 좋은 코드로 리팩토링 했을 때
• [ fix ] 버그를 수정했을 때
• [ design ] css와 스타일 관련된 부분
• [ etc ] 그외 잡일들~