초기 세팅은 1차 프로젝트와 동일하기 때문에 생략했다.

이번 나의 담당 기능은??

이번 Airbnb 클론 코딩에서 내가 맡게 된 기능은 숙소 리스트를 보여주는 부분이다

구현해야할 기능

이번에 구현해야 할 기능은 크게 지도에서 센터 값을 기준으로 숙소 리스트를 보여줘야 한다.

단, 프로젝트 범위는 서울 지역 이내로 한정지었다.

• 검색한 지역을 기준으로 숙소 리스트를 출력한다.
• 검색한 지역의 숙소 리스트가 지도에 마크업이 되야한다.

숙소 리스트 부분 레이아웃 작업

백엔드 API로 부터 받을 여러 개의 숙소들을 리스트로 뿌려주기 위해 반복적으로 사용 될 컴포넌트를 만들어야 했는데 레이아웃을 에어비엔비를 참고해서 위와 같이 KeyNote로 구역들을 나눠놓고 코드를 작성했다.

전체적인 레이아웃 작업

현재까지 내가 작업하고 있는 부분으로 어느정도 완성이 되어 가고 있는 중이다.

남은 기능들

아직 많이 남았지만 크게 본다면...

• 숙소 이미지 부분에 Carousel 기능을 구현해야한다.
• 구글 지도 API를 활용해서 실제 지도 출력 (현재는 레이아웃을 잡기 위해 이미지를 일단 넣었다🥲)
• 숙소 좌표 값을 기준으로 Hover 했을 때 해당하는 숙소를 지도에서 마크업 표시 해줘야한다.
• 지도에서 숙소 클릭 시 해당하는 숙소를 작은 모덜창을 통해서 보여줘야한다.

화이팅하자!😁