날짜별 칩 첫 진입 시 오늘 날짜 가운데 정렬
parent
f03d3e373c
commit
76eafceee8
|
|
@ -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]"
|
||||
|
|
|
|||
Loading…
Reference in New Issue