🍿 CGV 🍿

서비스 간단 설명

CGV 모바일 웹은 사용자가 모바일 웹으로 접속하여 상영정보를 확인한 후, 영화와 극장을 고르고 결제하기까지의 예매 프로세스를 가지고 있어요. 특히 CGV 모바일 웹은 가장 많은 사용자가 이용하는 서비스인 만큼 최단의 프로세스로 영화를 빠르게 예매할 수 있는 경험을 제공해요.

메가박스, 롯데시네마와 다르게 하단에 GNB를 하지 않고, 상단에 스크롤 메뉴를 배치하고 하단에는 ‘지금예매' 플로팅 버튼을 만들어 빠르게 홈에서 예매할 수 있도록 했어요. 이런 강점들을 바탕으로 사용자가 보다 좋은 접근성과 편리한 사용성을 바탕으로 서비스를 이용할 수 있도록, 그리고 모바일 웹 내에서의 브랜드 톤앤 무드를 강화시키는 것을 목표로 삼아 사용자의 경험을 유지할 수 있게끔 리디자인을 진행했어요!

🍿CGV🍿 핵심 기능

1️⃣ Home : 홈

• 메뉴바 가로 스크롤 구현
• react-slick 라이브러리 사용하여 캐러셀 애니메이션 구현
• 티켓 아이콘 클릭시 하단의 티켓 섹션으로 이동하도록 구현
• 무비 카드, 좋아요 버튼 클릭시 색상 변화하도록 구현
• 플로팅 버튼 구현
• 무비 카드 정보 GET
• 무비 카드 선택시 해당 내용 예매 페이지로 POST

2️⃣ Select-Time : 관람시간 선택

• 영화 줄거리 더보기 클릭 시 스크롤 가능하도록 구현
• Date()를 사용해 날짜 선택 섹션 구현
• 영화관 지역 선택, 날짜 선택, 상영관 타입 선택 섹션 가로 스크롤 구현
• 영화관 지역 선택, 날짜 섹션은 한번에 하나만, 상영관 타입 선택은 다중 선택 가능하도록 구현

3️⃣ Select-Person : 인원선택

• React createPortal로 바텀시트 구현
• 바텀시트 나타날 때, 들어갈 때 애니메이션 구현
• dimmed 된 배경 누르면 바텀시트 들어가도록 구현
• 인원선택 클릭시 '/payment'페이지로 이동

4️⃣ Payment: 결제

• recoil-persist로 이전 페이지들에서 선택된 영화 정보 가져오기
• 결제하기 플로팅 버튼 클릭시 영화 스케줄 정보 PATCH 되도록

---

🐝 FE 뿌시는 4조 웨비들입니다 !

조연서	남다은	이도윤
인원 선택 바텀시트 결제 뷰	홈 뷰	관람시간 선택 뷰
결제하기 기능 API	영화 차트 리스트 조회 API 좋아요 및 좋아요 취소 API	빠른 예매 영화 상세 정보 조회 및 지역, 날짜, 상영관 필터링 API

🛠 기술스택

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

💡 주요 라이브러리

    "react-slick": "^0.29.0",
    "recoil": "^0.7.7",
    "recoil-persist": "^5.1.0",
    "vite-plugin-svgr": "^4.2.0"

📄 컨벤션 및 브랜치 전략

🔗 노션 링크

📁 폴더 구조

├── 📁 src
│  └── 📁 assets
│  │   ├── 📁 icon
│  │   ├── 📁 image
│  │   └── asset.d.ts
├── 📁 components
│  ├── 📁 common
│  ├── 📁 Home
│  ├── 📁 Payment
│  └── 📁 SelectTime
├── 📁 constants
├── 📁 hooks
├── 📁 libs
├── 📁 pages
├── 📁 recoil
│  └── atom.ts
├── 📁 styles
│  ├── GlobalStyle.ts
│  ├── theme.ts
│  └── style.d.ts
├── 📁 types
├── App.tsx
├── main.tsx
└── Router.tsx