diff --git a/frontend/src/components/ScheduleBoard.tsx b/frontend/src/components/ScheduleBoard.tsx index 8ee2841..556f8a9 100644 --- a/frontend/src/components/ScheduleBoard.tsx +++ b/frontend/src/components/ScheduleBoard.tsx @@ -141,10 +141,16 @@ function ChipScroller({ setAtEnd(el.scrollLeft >= max - 1); }; - // 탭/목록 변경 시 맨 앞으로 + 재측정 (레이아웃 확정 후) + // 탭/목록 변경 시: 선택된 칩을 가운데로 + 재측정 (레이아웃 확정 후) + // 선택 칩이 없으면 맨 앞으로 되감는다. useLayoutEffect(() => { const el = ref.current; - if (el) el.scrollLeft = 0; + if (el) { + const active = el.querySelector('[data-active="true"]'); + el.scrollLeft = active + ? active.offsetLeft - (el.clientWidth - active.clientWidth) / 2 + : 0; + } measure(); }, [resetKey]); @@ -212,6 +218,7 @@ function Chip({ return (