날짜별 칩 첫 진입 시 오늘 날짜 가운데 정렬
parent
f03d3e373c
commit
76eafceee8
|
|
@ -141,10 +141,16 @@ function ChipScroller({
|
||||||
setAtEnd(el.scrollLeft >= max - 1);
|
setAtEnd(el.scrollLeft >= max - 1);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 탭/목록 변경 시 맨 앞으로 + 재측정 (레이아웃 확정 후)
|
// 탭/목록 변경 시: 선택된 칩을 가운데로 + 재측정 (레이아웃 확정 후)
|
||||||
|
// 선택 칩이 없으면 맨 앞으로 되감는다.
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
const el = ref.current;
|
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();
|
measure();
|
||||||
}, [resetKey]);
|
}, [resetKey]);
|
||||||
|
|
||||||
|
|
@ -212,6 +218,7 @@ function Chip({
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
|
data-active={active}
|
||||||
className={`shrink-0 whitespace-nowrap rounded-full border px-3.5 py-1.5 text-[13px] font-bold transition ${
|
className={`shrink-0 whitespace-nowrap rounded-full border px-3.5 py-1.5 text-[13px] font-bold transition ${
|
||||||
active
|
active
|
||||||
? "border-[#94FBE0] text-[#94FBE0]"
|
? "border-[#94FBE0] text-[#94FBE0]"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue