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

📌 시나리오

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

  • 선택된 div 원의 background-color: black;
  • searchBar의 content 텍스트 내용 선택 날짜로 변경
  • 상태에 등록 setCheckin(날짜)

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

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

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

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

---

📌 상태

• checkin
• checkout