날짜별 칩 첫 진입 시 오늘 날짜 가운데 정렬

develop
jwkim 2026-06-19 09:10:54 +09:00
parent f03d3e373c
commit 76eafceee8
1 changed files with 9 additions and 2 deletions

View File

@ -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<HTMLElement>('[data-active="true"]');
el.scrollLeft = active
? active.offsetLeft - (el.clientWidth - active.clientWidth) / 2
: 0;
}
measure();
}, [resetKey]);
@ -212,6 +218,7 @@ function Chip({
return (
<button
onClick={onClick}
data-active={active}
className={`shrink-0 whitespace-nowrap rounded-full border px-3.5 py-1.5 text-[13px] font-bold transition ${
active
? "border-[#94FBE0] text-[#94FBE0]"