2주간 진행된 미니비앤비 프로젝트입니다.

제가 맡은 파트는 사용자 본인이 호스트가 되어 자신의 집을 숙소로 직접 등록하는 페이지와,

탭을 통해 호스트/게스트 마이페이지로 이동 가능한 마이페이지였습니다.

필수 항목은 배경색을 연한 주황색으로 표시하고,
마우스 커서를 올릴 때도 input의 테두리 색이 변하도록 설정했습니다.
필수 필드에 값을 입력하고 나면 주황색 바탕에서 흰 바탕으로 변합니다.
또한 주소 검색을 하면 자동으로 도로명 주소와 우편번호가 입력되고,
커서(cursor)는 상세주소를 입력하는 칸으로 자동 이동하도록 구현했습니다.

최대 숙박 인원을 설정하는 필드에서,
인원수가 1보다 작아지거나 10보다 커지는 것을 막기 위해
해당 경우에는 +버튼과 -버튼을 disabled 시키고, 색깔도 변경해
사용할 수 없는 버튼이라는 것을 표현했습니다.
또한 입력 필드에 글자 제한을 두고,
사용 가능한 글자 수가 얼마나 남았는지 보여주는 기능을 구현했습니다.

숙소 사진을 올리는 파트에서는, 숙소 사진을 올린 후
바로 해당 사진을 확인할 수 있도록 구현했습니다.
사진 업로드 버튼도 예쁘게 커스터마이징했습니다.

마이페이지에서는 tab 기능을 이용해 게스트/호스트 마이페이지로
편리하게 이동할 수 있도록 구현했습니다.
게스트 마이페이지에서는 예약의 상태를 확정/대기/거절의 상태로 나누어
다른 색의 버튼으로 표시할 수 있도록 구현하여 명시성을 높였습니다.
또한 해당 비앤비의 호스트의 메세지함으로 바로 이동할 수 있도록 구현했습니다.

호스트 마이페이지에서는 자신이 등록한 숙소의 정보를 다시 받아와서,
메인 사진과 함께 기본 정보를 열람할 수 있도록 구현하였습니다.