프로젝트 소개

React google maps api를 사용한 숙박중개 웹사이트를 반응형으로 만들었습니다.

기간 : 2024.09.02(월) ~ 2024.09.13(금)

인원 : 개인프로젝트(1인)

github : https://github.com/jiheechai/DayDream

블로그 : https://write3027.tistory.com/16

서버 주소 : http://43.203.247.141:3000

페이지 소개

• 메인페이지 : 카테고리별로 필터링. / swiper로 사진 여러장 볼 수 있음.

• 검색페이지 :
  • 헤더 검색창을 통해 “여행지, 날짜, 인원” 검색한 결과가 보여짐.
  • React google maps api 지도 : 우측 데이터에 hover하면 지도에 검정 마커 표시 / 마커 클릭시 데이터 보여줌 / position:sticky 지도 고정

• 상세페이지 :
  • antd Image사용. 이미지 클릭시 크게 보여줌.
  • 좌측 내용 : 팝업으로 열어서 자세히 보기. 스크롤 이벤트로 자연스럽게 열리는듯한 효과.
  • 우측 가격표 : 선택한 박수에 따른 가격을 보여줌 / 인원수 선택은 숙소별 최대인원까지만 선택가능. / position:sticky로 내용을 읽으며 스크롤할때 가격표가 따라옴
  • 지도 마커 : 클릭시 구글맵 길찾기 연동