AI 요약관련 정보

• Astro의 src/pages/room/[slug].astro를 사용하여 각 객실에 대한 동적인 상세 페이지를 생성하는 방법을 설명합니다. 🛣️
• getStaticPaths 함수를 내보내 각 객실 슬러그(slug)를 기반으로 정적 경로를 생성하고, Astro.params를 통해 슬러그를 가져오는 과정을 보여줍니다. 🗺️
• 전달받은 슬러그를 이용해 전체 객실 목록에서 해당 객실의 데이터를 찾아 상세 정보를 동적으로 표시합니다. 🔍
• 객실 상세 페이지는 메인 이미지, 여러 썸네일 이미지, 객실 설명, 편의 시설 목록, 고객 리뷰, 그리고 추후 구현될 예약 컴포넌트로 구성됩니다. 🏨
• JavaScript를 활용하여 썸네일 이미지를 클릭하면 메인 이미지가 변경되고, 현재 활성화된 썸네일에 시각적 테두리를 추가하는 이미지 갤러리 기능을 구현합니다. ✨
• Astro 컴포넌트 내 <script> 태그를 사용하여 해당 페이지에만 적용되는 클라이언트 측 JavaScript 로직을 효율적으로 구현하는 방법을 시연합니다. 💻
• document.getElementById, document.querySelectorAll, element.getAttribute, element.setAttribute, classList.add/remove 등 기본적인 DOM 조작 기술을 활용하여 인터랙티브한 기능을 만듭니다. ⚙️
• Flexbox와 Grid 시스템을 사용하여 다양한 디바이스 크기에서 콘텐츠가 유연하게 배치되는 반응형 디자인을 적용합니다. 📱
• 복잡한 예약 컴포넌트는 별도의 비디오에서 상세히 다룰 예정이며, 객실 데이터는 Sanity CMS에서 가져올 계획임을 언급합니다. 🚀
• 개발 중 서버 문제나 캐싱 이슈 발생 시 개발 서버를 재시작하는 것이 문제 해결에 도움이 될 수 있다는 실용적인 팁을 제공합니다. 🔄