- react 16.8 hooks 활용하여 클래스형 컴포넌트에서 함수형 컴포넌트로 전환
- useState hook을 통한 상태관리
- react Router를 이용한 url 분기처리
- context API 및 useContext 활용하여 간소한 상태관리 구현
- useReducer hook을 통해 특정 상태 업데이트 로직 별도 분리
- 별도 css sheet 생성 대신 styled component로 기본 스타일 적용
- Header(SearchHeader, SearchPanel), Section 컴포넌트로 구성
- react transition group 라이브러리 이용하여 검색 창 클릭시 확대 애니메이션 구현
- 검색 탭 선택시 각 탭에 해당하는 옵션 패널 노출(모두, 숙소, 트립, 레스토랑)
- 각 탭 선택시 기존 검색 패널에 설정한 옵션 초기화
- 인원 패널에서 인원 증감시 버튼 활성화 여부 체크
- useReducer로 통합적인 상태 업데이트
- 어린이, 유아 선택시 성인 자동 추가
- 설정한 인원 수 검색 탭에 반영
- 삭제 시 최소 인원수 유지
- 숙소타입, 즉시예약 패널에서 각 옵션 체크시 검색 탭에 반영
- material UI를 적용한 체크박스, 스위치 컴포넌트
- npm rc-slider 라이브러리 이용하여 이중 슬라이더 구현
- 최소,최대 금액 슬라이더 이동시 실시간 가격 반영
- useRef 적용, 슬라이더 이동 시 불필요한 리랜더링 방지
- onAfterChange 이벤트를 통해 슬라이더 이동이 끝난 후 랜더링
- 가격 직접 입력 가능
- 가격 입력 시 슬라이더 막대 위치 자동 변경
- 적용 버튼 클릭시 설정한 가격대 검색 옵션 탭에 반영(금액에 콤마 표시), 패널 닫힘
- airbnb 샘플 데이터 참고하여 숙소 데이터 schema 및 모델 생성
- 숙소 mock 데이터 생성 및 mongoDB shell 이용하여 insert(30개)
- 최초 페이지 로딩 후 useEffect를 통해 전체 숙소 정보 표시
- 검색옵션 패널에서 선택한 조건에 해당하는 데이터 DB 조회(인원, 숙소타입, 가격, 즉시예약)
- 각 선택 조건에 해당하는 query string 생성
- query string에 대한 DB 조회용 conditional query 객체 생성 로직 구현
- 콘텐츠 로드시 대기 화면 구현
- 스크롤바가 화면 하단에 설정한 특정 위치 내 도달 시 추가 콘텐츠 로드 구현(쓰로틀링 적용)
- 스크롤 시 추가 콘텐츠 로드에 필요한 쿼리 생성, 처리 로직 추가
- 추가 콘텐츠 로드 시 placeholder 애니메이션 추가(react-loading 패키지 이용)
- react-dates 라이브러리 활용, 기본 날짜 지정 기능 구현
- 날짜 지정 후 DB 검색을 위한 query string 생성
- 당일 이전 날짜 지정 비활성화
기타 기능 추후 구현 예정