Home

대표적인 국내 숙소 예약 서비스인 야놀자를 데스크탑 화면으로 재구성한 서비스
Hotels API를 이용하여 다음 기능을 제공한다.

• 원하는 키워드로 숙소 검색
• 최근 숙소를 바탕으로 한 숙소 추천
• 지역별 숙소 추천
• 상세 정보 및 리뷰 조회/등록
• 숙소 예약

시작하게 된 계기

야놀자의 데스크탑 화면은 어떻게 구성되어 있을까? 🤔

모바일 화면만을 제공하고 있는 야놀자. 데스크탑 화면에 최적화되어 있지 않아 데스크탑 이용자에게 불편함을 야기한다.

야놀자의 Lighthouse 결과는? 🙄

문제는,

• 성능 : 사용되지 않는 js 코드 로드
• 접근성 : 이미지 alt 어트리뷰트 부재, 포커스된 요소 시각적 확인 불가, 버튼에 식별 가능한 이름 부재

사용 기술

• Vite, ESBuild, Styled Component, SWR, Firebase 기술뱃지 추가

  

프로젝트 목표

• 타입스크립트를 통한 선언된 타입 환경에서의 안정적인 개발
• 기존 서비스에서 아쉬운 사항을 개선하며 사용성 향상
• 스프린트 단위의 목표 수립 및 프로젝트 진행

Usecase

UI 설계

메인 페이지

상세 페이지

예약 페이지

마이 페이지

API 및 모델 설계

https://www.miricanvas.com/v/1xjyyg