fix(redesign): ScrollReveal reduced-motion 시 transition까지 생략(정적 표시)
기존엔 스크롤 스태거만 건너뛰고 700ms 전환은 남았음 → instant 분기로 완전 정지. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A2N6SziVSPfavx1j5rAs52
This commit is contained in:
@@ -14,10 +14,13 @@ interface Props {
|
|||||||
export default function ScrollReveal({ children, delay = 0, variant = 'fade-up', className }: Props) {
|
export default function ScrollReveal({ children, delay = 0, variant = 'fade-up', className }: Props) {
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
const [shown, setShown] = useState(false);
|
const [shown, setShown] = useState(false);
|
||||||
|
// reduced-motion: transition까지 생략하고 정적으로 표시
|
||||||
|
const [instant, setInstant] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// reduced-motion: 즉시 표시 (연출 생략)
|
// reduced-motion: 즉시 표시 (연출·전환 생략)
|
||||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||||
|
setInstant(true);
|
||||||
setShown(true);
|
setShown(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -46,6 +49,15 @@ export default function ScrollReveal({ children, delay = 0, variant = 'fade-up',
|
|||||||
variant === 'fade' ? 'opacity-100' :
|
variant === 'fade' ? 'opacity-100' :
|
||||||
'opacity-100 translate-y-0';
|
'opacity-100 translate-y-0';
|
||||||
|
|
||||||
|
// reduced-motion이면 transition/transform 없이 정적 표시
|
||||||
|
if (instant) {
|
||||||
|
return (
|
||||||
|
<div ref={ref} className={className}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
|||||||
Reference in New Issue
Block a user