AI 요약관련 정보

• React JS 영화 좌석 예약 시스템 구축 목표: Book My Show와 유사한 UI를 React JS로 구현하며, 다양한 좌석 유형, 예약된 좌석 표시, 좌석 선택 및 실시간 예약 요약 기능을 포함합니다. 🎬
• 확장성 및 재사용성 강조: 주니어 개발자와 시니어 개발자의 차이점으로, 전 세계 다양한 영화관에 적용 가능하도록 컴포넌트를 고도로 확장 가능하게 설계하는 것이 중요합니다. 🌍
• 핵심 Props 설계: layout (좌석 배치), seatTypes (좌석 종류 및 가격), bookedSeats (예약된 좌석), currency (통화), onBookingComplete (예약 완료 콜백), title, subtitle 등을 외부에서 주입받아 컴포넌트의 유연성을 극대화합니다. ⚙️
• 개발 환경 설정: npm create vite@latest를 사용하여 React 앱을 초기화하고, Tailwind CSS를 통합하여 효율적인 스타일링과 개발 시간 단축을 목표로 합니다. 🚀
• UI 구성 요소 계획: Title, Screen, Seat Map, Legend, Booking Summary, Book Button 등 주요 UI 섹션을 미리 정의하여 체계적인 개발 경로를 설정합니다. 🗺️
• Savala를 이용한 배포 시연: 개발된 애플리케이션을 Savala 플랫폼에 쉽게 배포하는 과정을 보여주며, CI/CD, Docker 이미지 지원, 다양한 기술 스택 호환성 등 Savala의 장점을 소개합니다. ☁️
• 초기 UI 스타일링: Tailwind CSS를 활용하여 전체 페이지 레이아웃, 제목, 부제목, 스크린 영역을 시각적으로 구현하며, 반응형 디자인을 위한 overflow-x-auto와 같은 클래스를 적용합니다. 🎨
• 좌석 렌더링 로직 준비: useState를 사용하여 좌석 데이터를 관리하고, useMemo 훅을 활용하여 initializeSeats 함수를 최적화하여 불필요한 재렌더링을 방지하고 성능을 향상시킵니다. 💡
• 좌석 구조 초기화: layout prop에 정의된 rows와 seats per row 정보를 기반으로 중첩된 반복문을 통해 영화관 좌석의 기본 구조를 동적으로 생성할 준비를 합니다. 🪑