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

📌 시나리오

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

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

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

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

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

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

● 사이 날짜들 옅은 회색 박스로

1. 체크인 날짜 선택O, 체크아웃 X (체크아웃 날짜 고를 때 마우스 호버할 때)
   • 마우스가 호버한 요소, 체크인 날짜 요소 사이가 옅은 흰색 박스가 생긴다.
2. 체크아웃 선택할 때
   • 체크인, 체크아웃이 모두 선택된 상태라면 호버에 따른 이벤트가 발생하지 않는다.
   • 즉, 옅은 회색 박스가 유지된다.
3. 마우스가 달력 밖으로 나가면??
   • 1번의 경우(체크인만 선택) 옅은 회색박스가 사라져야 된다.
   • 2번의 경우(체크인,체크아웃 선택) 옅은 회색박스가 유지돼야 한다.

---

📌 상태(recoil)

• checkinDateState: 체크인 날짜 (string)
• checkoutDateState: 체크아웃 날짜 (string)
• hoverDateState: 호버된 날짜 (string)

📌 날짜 선택 로직

• td 안에 div(호버, 선택될 때 동그라미 요소)에 data-date 속성을 줌.
  • '20210507'
  • 월, 일이 한 자리일 때 앞에 0을 붙여줌
  • 이유1) searchBar에서 선택 날짜가 렌더링될 때 글자개수로 substr을 해주기 위해서
  • 이유2) 체크인 체크아웃 사이의 날짜들의 스타일을 줄 때 숫자크기 비교로 주기 위해서

• 날짜를 선택했을 때
  1. target.dataset.date를 읽어서 setCheckin(date) 상태 저장
     • 체크인이 선택되지 않았을 때 : setCheckin(date)
     • 체크인이 선택됐고,체크인 이후 날짜를 선택했을 때 : setCheckout(date)
     • 체크인이 선택됐지만, 체크인 이전 날짜를 선택했을 때 : setCheckin(date), setCheckout("날짜 입력")
  2. 달력이 리렌더링되고, checkin 상태값과 dataset.date값이 같으면 className에 selected 추가 (까만 원 스타일)
  3. searchBar에 선택된 날짜로 렌더링 → checkin 상태에서 월, 일 부분만 가져와서 렌더링

📌 호버 시 날짜 사이 옅은 회색스타일 로직

1. 체크인 날짜 선택O, 체크아웃 X (체크아웃 날짜 고를 때 마우스 호버할 때)
   • mouseOver 이벤트로 마우스가 들어간 요소 알아냄 e.target.closest(".dayDiv")
   • 들어간 요소의 날짜 상태에 저장 setHoverDate(날짜)
   • 리렌더링 될 때 checkin < 요소날짜 < hoverDate인 td에 className 부여, 스타일 적용

2. 체크아웃 선택할 때
   • mouseOver 이벤트핸들러가 checkin날짜가 선택되지 않았거나, checkout 날짜가 선택이 됐으면 early return한다.
   • hoverDate 상태에 변화X → 옅은 회색박스 그대로 유지

3. 마우스가 달력 밖으로 나가면??
   • 모달에 있는 달력 두 개를 감싼 div 요소에 onMouseLeave 이벤트를 걸었다.
   • 체크인만 정해져서 마우스 호버에 따른 회색 박스가 생길 때 mouseLeave되면 setHoverDate("")로 초기화해준다.
   • 체크인, 체크아웃이 모두 정해졌을 때는 유지해야되기 때문에 mouseLeave되면 early return한다.