Build and Deploy a Full-Stack Hotel Website with Astro & Sanity
- Sanity를 사용하여 호텔 웹사이트의 room 스키마를 생성하고 데이터를 채웠습니다. 🛏️
- room 상세 페이지를 업데이트하고 TypeScript 오류를 수정했습니다. 🐛
- Sanity types를 import하여 오류를 해결하고 이미지 렌더링 전 존재 여부를 확인했습니다. 🖼️
getStaticPaths 함수에서 preend를 true로 설정하여 동적 페이지의 사전 렌더링 문제를 해결했습니다. ⚙️
- Sanity 클라이언트를 사용하여 room 데이터를 가져오고 slug를 기반으로 특정 room을 조회했습니다. 🔑
- GROQ 쿼리를 사용하여 Sanity에서 필요한 room 필드(ID, 이름, slug, 설명, 카테고리, 이미지 등)를 가져왔습니다. 📝
- room 상세 페이지에서 Sanity 데이터를 기반으로 콘텐츠를 동적으로 렌더링했습니다. 🔄
- 이미지 URL 생성을 위해
urlForImage 함수를 사용하고, 이미지 및 썸네일 존재 여부를 확인했습니다. 🔗
- 편의 시설(amenities)의 사용 가능 여부에 따라 필터링하여 렌더링했습니다. ✅
- Sanity 스키마에서 데이터를 변경하면 웹사이트에 즉시 반영되는 것을 확인했습니다. ⚡
- 특별 참고 사항 필드 관련 오류는 데이터 내보내기 문제로 발생했으며, 튜토리얼을 따라온 경우 발생하지 않아야 합니다. ⚠️
- 다음 비디오에서는 예약 스키마를 만들고 예약 컴포넌트를 업데이트하며 첫 예약을 생성할 예정입니다. 📅