by. 원티드 프리온보딩 4팀 (2022.08.01 ~ 06)

1. 날짜란 클릭 → 캘린더 모달이 열리고 → 체크인, 체크아웃 날짜를 선택
2. 웹일 때는 날짜 선택 이후 자동으로 인원선택 모달이 열리고 → 어른, 어린이 인원수 선택
3. 서치바에서 선택한 날짜, 인원에 맞을 search 파라미터로 작성해 라우팅

1. queryString의 변화에 따라 데이터 fetch 요청
2. react-query의 infinite query, page 파라미터를 이용해 infinity scroll 을 위한 데이터를 응답받고
3. 응답받은 호텔 데이터들을 각각 카드 컴포넌트로 만들고 무한스크롤로 조회

• 상세페이지에서 예약버튼을 클릭하면 정보가 서버에 post 요청 및 localStorage 저장

• 예약된 호텔 정보 조회

# with yarn
# install
$ yarn install

# run
$ yarn start

• 프로젝트 초기 세팅 박소영 👍
• 반응형을 고려한 전체 UI 목업 제작 (figma) 이미림 👍

• TypeScript & ReactJS (Create React App with yarn)
• [Styles] styled-components, styled-reset
• [API] axios, json-server
• [Routing] react-router-dom
• [Icons] react-icons
• [Date] date-fns
• [State] @tanstack/react-query

• styled-component의 theme 기능 이용 (480px, 820px, 900px)

const size = {
  mobile: '480px',
  middle: '820px',
  tablet: '900px',
};

const deviceSize = {
  mobile: `(max-width : ${size.mobile})`,
  middle: `(max-width : ${size.middle})`,
  tablet: `(max-width : ${size.tablet})`,
};

// 중략

const theme = {
  color,
  size,
  deviceSize,
};

export default theme;

• 공통 레이아웃 구조 사전에 정의

function Layout() {
  return (
    <LayoutContainer>
      <Header />
      <Main>
        <Outlet />
      </Main>
    </LayoutContainer>
  );
}

• 오늘부터 12개월 이내의 달력 표출
• 기본값 1주일 뒤 1박
• 지난 날짜는 선택 불가
• 체크인 날짜와 체크아웃 날짜를 선택시 자동으로 범위 내 highlighting
• 웹에서는 슬라이더, 모바일은 스크롤
• 이전 날짜 또는 새로운 날짜 선택시 초기화 및 새로운 시작일 지정

• +, - 버튼으로 인원수 지정
• 성인, 아동 구분
• 기본값 성인 2, 아동 0

React Query의 Infinite Queries 를 이용한 무한스크롤 요청

• 한 번에 10개의 정보 요청
• 로딩바 노출: Loading 시 스켈레톤 UI 와 트랜지션 적용
• 마지막 호텔인 경우 "마지막 호텔입니다" 표시

개별 호텔정보 조회

• useLocation 으로 호텔명과 정보를 받아서 fetch 요청
• 호텔 리스트 재검색시 랜딩페이지로 이동해 조회
• 예약 기능 구현: DB에 post 요청으로 저장 & localStorage에 저장
• 저장할 정보: 호텔 이름, 체크인, 체크아웃 날짜, 인원수

예약 결과 조회

• 예약 기능 구현: DB에 저장된 예약정보를 fetch 해서 조회