[FE] 캘린더 날짜 선택 시나리오

📌 시나리오

• 첫 번째 날짜를 선택하면 '체크인'

  • searchBar의 content 텍스트 내용 선택 날짜로 변경
  • 체크인 날짜가 선택됐다는 상태 등록 selectedCheckin(true)
  • 선택된 div 원의 background-color: black;
    • div의 data-date가 checkin 상태와 일치하면 className 추가

• 체크인 날짜가 선택된 이후 hover 스타일 변경

  • 체크인 이전 날짜 div:hover { border }
  • 체크인 이후 날짜
    • div:hover { background-color },
    • 사이 날짜들 td { background-color }

• 두 번째 날짜를 선택하면 '체크아웃'

  • 체크인 이전 날짜 선택
    • 체크아웃 날짜 선택X, 체크인 날짜가 변경됨
    • 상태에 등록 setCheckin(날짜)
  • 체크인 이후 날짜 선택
    • 선택된 div { background-color: black; }
    • searchBar의 content 텍스트 내용 선택 날짜로 변경
    • 상태에 등록 setCheckout(날짜)

---

📌 상태

• checkin: 체크인 날짜 (string)
• checkout: 체크아웃 날짜 (string)

---

📌 로직

• td 안에 div(호버, 선택될 때 동그라미 요소)에 data-date 속성을 줌.
  • '20210507'
  • 월, 일이 한 자리일 때 앞에 0을 붙여줌
  • 이유1) searchBar에서 선택 날짜가 렌더링될 때 글자개수로 substr을 해주기 위해서
  • 이유2) 체크인 체크아웃 사이의 날짜들의 스타일을 줄 때 숫자크기 비교로 주기 위해서
• 날짜를 선택했을 때
  • target.dataset.date를 읽어서 setCheckin(date) 상태 저장
  • 달력이 리렌더링되고, checkin 상태값과 dataset.date값이 같으면 className에 selected 추가 (까만 원 스타일)
  • searchBar에 선택된 날짜로 렌더링 → checkin 상태에서 월, 일 부분만 가져와서 렌더링