AI 요약관련 정보

• Astro와 Sanity 기반 호텔 웹사이트의 핵심 예약 컴포넌트(reservation.tsx) 구축에 중점을 둡니다. 🏨
• Tailwind CSS를 활용하여 섹션, 폼, 텍스트, 레이아웃 등 UI 요소를 세밀하게 스타일링하며, after 가상 클래스로 장식적인 선을 추가합니다. ✨
• room 데이터를 컴포넌트에 전달하고, useState를 사용하여 bookingData (체크인/아웃, 객실 정보, 인원수 등)를 관리하며, TypeScript 인터페이스로 타입 안전성을 확보합니다. 🛡️
• formatPrice 헬퍼 함수를 구현하여 숫자 금액을 USD 통화 형식으로 변환하고, 소수점 자릿수를 제어하여 가독성을 높입니다. 💰
• Label, Popover, Input, Select, Calendar 등 shadcn/ui 라이브러리의 다양한 UI 컴포넌트를 설치하고 통합하여 사용자 인터페이스를 구축합니다. 🧩
• react-day-picker 기반의 캘린더 컴포넌트를 사용하여 날짜를 선택하고, date-fns의 format 함수로 날짜를 표시하며, 현재 날짜 이전의 날짜는 선택할 수 없도록 비활성화합니다. 📅
• cn 유틸리티 함수를 사용하여 Tailwind CSS 클래스를 조건부로 적용함으로써, UI 상태에 따른 동적인 스타일링을 깔끔하게 처리합니다. 🎨
• npm rundev를 통한 개발 서버 실행, UI 변경 확인, 폰트 가중치 및 Prettier 문제 해결 등 실제 개발 과정을 보여줍니다. 🔄