AI 요약관련 정보

• Astro와 Sanity를 활용하여 호텔 웹사이트의 '객실' 페이지를 구축하며, 동적인 필터링 기능을 구현합니다. 🏨
• Astro의 페이지 라우팅(rooms.astro)과 astro:assets의 Image 컴포넌트를 사용하여 기본 레이아웃과 배경 이미지를 설정합니다. 🚀
• 클라이언트 측 상호작용(예: 객실 필터링)을 위해 Astro 페이지 내에 React 컴포넌트(RoomContainer.tsx)를 client:load 지시어와 함께 통합합니다. ⚛️
• Sanity CMS에서 객실 및 카테고리 데이터를 효율적으로 가져오며, _type == "room" 및 available == true와 같은 쿼리를 사용합니다. 🗄️
• 중복을 제거하기 위해 new Set()을 사용하여 Sanity에서 가져온 카테고리 목록에서 고유한 카테고리만 추출하여 필터링 옵션으로 제공합니다. 🏷️
• React의 useMemo 훅을 사용하여 filteredRooms와 같은 파생 상태를 관리합니다. 이는 initialRooms나 selectedCategory와 같은 의존성이 변경될 때만 재계산되어 데이터의 일관성과 성능을 보장합니다. 🧠
• selectedCategory 상태에 따라 객실 목록을 동적으로 필터링하는 로직을 구현하여 사용자에게 선택된 카테고리에 해당하는 객실만 표시합니다. 🔍
• RoomContainer와 FilterRooms와 같은 모듈화된 컴포넌트 설계를 통해 코드의 재사용성과 유지보수성을 높입니다. 🧩
• Tailwind CSS를 활용하여 반응형 디자인을 적용하고, 다양한 화면 크기에서 텍스트 크기 및 버튼 레이아웃이 유연하게 조정되도록 합니다. 📱
• 개발 과정에서 발생할 수 있는 문제(예: Astro 이미지 컴포넌트 관련 오류)를 npm run dev 재시작으로 해결하는 등 실용적인 개발 워크플로우를 보여줍니다. 🛠️