HorizontalDatePicker.tsx 코드 설명

scrollToCenter

// ①
const scrollToCenter = (index: number) => {
  const container = containerRef.current;
  const button = buttonRefs.current[index];
  if (container && button) {
    const scrollLeft =                  // ②
      button.offsetLeft + button.offsetWidth / 2 - container.offsetWidth / 2;
    container.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' }); // ③
  }
};

📘 설명

1. ① scrollToCenter: 특정 인덱스의 버튼을 컨테이너 중앙으로 스크롤하는 함수.
2. ② 버튼의 중심 위치와 컨테이너 중심 위치의 차이로 스크롤 이동값 계산.
3. ③ 실제 스크롤 이동 수행 (smooth 옵션으로 애니메이션 적용).

---

isButtonCentered

// ④
const isButtonCentered = (index: number) => {
  const container = containerRef.current;
  const button = buttonRefs.current[index];
  if (!container || !button) return false;

  const buttonCenter = button.offsetLeft + button.offsetWidth / 2;     // ⑤
  const containerCenter = container.scrollLeft + container.offsetWidth / 2;
  return Math.abs(buttonCenter - containerCenter) < 4;                 // ⑥
};

📘 설명

4. ④ 현재 버튼이 화면 중심에 위치했는지 확인하는 함수.
5. ⑤ 버튼과 컨테이너 중심 좌표를 구해서
6. ⑥ 두 값의 차이가 4px 이하일 경우, "가운데에 있다"고 판단.

---

handleClick

// ⑦
const handleClick = (e: React.MouseEvent<HTMLButtonElement>, index: number) => {
  if (isButtonCentered(index)) {
    setCalendarAnchorEl(e.currentTarget); // ⑧
  } else {
    onSelect(index, dates[index]);        // ⑨
    scrollToCenter(index);                // ⑩
  }
};

📘 설명

7. ⑦ 버튼 클릭 시 동작 처리 함수.
8. ⑧ 이미 가운데인 경우 → 달력 팝업 열기.
9. ⑨ 아니라면 선택 상태 변경 (onSelect() 콜백 호출).
10. ⑩ 선택된 버튼을 가운데로 정렬.

---

Popover 달력

// ⑪
<Popover
  open={Boolean(calendarAnchorEl)}
  anchorEl={calendarAnchorEl}
  onClose={() => setCalendarAnchorEl(null)}
  anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} // ⑫
>
  <LocalizationProvider dateAdapter={AdapterDateFns}>
    <StaticDatePicker
      displayStaticWrapperAs="desktop"
      value={new Date()}                                  // ⑬
      onChange={(newValue) => {
        console.log('선택된 날짜:', newValue);
        setCalendarAnchorEl(null);                        // ⑭
      }}
      slotProps={{ actionBar: { actions: ['today'] } }}
    />
  </LocalizationProvider>
</Popover>

📘 설명

11. ⑪ 선택된 버튼 클릭 시 열리는 팝업 달력 UI
12. ⑫ 팝업의 위치를 버튼 하단 중앙에 정렬
13. ⑬ 현재 날짜를 기본 선택값으로 설정 (실제 날짜 연동은 추후 확장 가능)
14. ⑭ 날짜 선택 시 팝업 닫기