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

📌 시나리오

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

  • searchBar의 content 텍스트 내용 선택 날짜로 변경
    • 상태에 등록 setCheckin(날짜)
  • 체크인 날짜가 선택됐다는 상태 등록 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)
• selectedCheckin: 체크인 선택 여부 (boolean)