문제 상

문제 원인

1. 기본적으로 .react-datepicker__day 날짜 셀 요소에 gap이 설정돼 있어 해당 요소간 간격에 배경색 지정이 안 되는 문제 상황

2. 선택된 날짜에서 원과 선 겹치는 부분 스타일 지정이 안 됨

해결 방안

방법들 찾아봤으나 실패… 디자인 자체를 변경함 ㅠ.ㅠ

1. gap 을 지우고, 날짜셀 크기 자체를 키워 배경색 이어지게끔 만들 수 있음

.react-datepicker__day--range-start,
.react-datepicker__day--range-end {
  background-color: #3182ce;
  color: #fff; 
}

.react-datepicker__day--in-range {
  background-color: #bee3f8; 
  color: #2c5282; 
}

.react-datepicker__day--in-range,
.react-datepicker__day--range-start,
.react-datepicker__day--range-end {
  border-radius: 0; 
}

.react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end) {
  margin-left: -1px; 
  margin-right: -1px; 
}

.react-datepicker__day {
  padding: 0.5rem 0.75rem; 
}

2-1) css 가상요소 스타일로 지정

.react-datepicker__day--range-start::before,
.react-datepicker__day--range-end::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #your-desired-color; 
  z-index: -1; 
}

.react-datepicker__day--range-start::before {
  left: 50%;
  width: 50%;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.react-datepicker__day--range-end::before {
  right: 50%;
  width: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.react-datepicker__day--in-range {
  @apply bg-date-active m-0; 
}

2-2) 시작일과 끝나는 날에 z-index로 스타일 지정

       const renderDayContents = (day: Date, dateProps: any) => {
      if (!selectedStartDate || !selectedEndDate) {
         return dateProps.children;
      }

      const isRangeStart = day.getTime() === selectedStartDate.getTime();
      const isRangeEnd = day.getTime() === selectedEndDate.getTime();

      return (
         <div className="relative">
            {dateProps.children}
            {isRangeStart && <div className="absolute inset-0 z-0 rounded-full bg-white" />}
            {isRangeEnd && <div className="absolute inset-0 z-0 rounded-full bg-white" />}
         </div>
      );