From 7e1105f574ead823f922438bea131a9a18576905 Mon Sep 17 00:00:00 2001 From: gahusb Date: Tue, 30 Jun 2026 14:53:23 +0900 Subject: [PATCH] =?UTF-8?q?fix(redesign):=20ScrollReveal=20reduced-motion?= =?UTF-8?q?=20=EC=8B=9C=20transition=EA=B9=8C=EC=A7=80=20=EC=83=9D?= =?UTF-8?q?=EB=9E=B5(=EC=A0=95=EC=A0=81=20=ED=91=9C=EC=8B=9C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 기존엔 스크롤 스태거만 건너뛰고 700ms 전환은 남았음 → instant 분기로 완전 정지. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01A2N6SziVSPfavx1j5rAs52 --- app/components/deepfield/ScrollReveal.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/app/components/deepfield/ScrollReveal.tsx b/app/components/deepfield/ScrollReveal.tsx index 0ddffd5..446dfc0 100644 --- a/app/components/deepfield/ScrollReveal.tsx +++ b/app/components/deepfield/ScrollReveal.tsx @@ -14,10 +14,13 @@ interface Props { export default function ScrollReveal({ children, delay = 0, variant = 'fade-up', className }: Props) { const ref = useRef(null); const [shown, setShown] = useState(false); + // reduced-motion: transition까지 생략하고 정적으로 표시 + const [instant, setInstant] = useState(false); useEffect(() => { - // reduced-motion: 즉시 표시 (연출 생략) + // reduced-motion: 즉시 표시 (연출·전환 생략) if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + setInstant(true); setShown(true); return; } @@ -46,6 +49,15 @@ export default function ScrollReveal({ children, delay = 0, variant = 'fade-up', variant === 'fade' ? 'opacity-100' : 'opacity-100 translate-y-0'; + // reduced-motion이면 transition/transform 없이 정적 표시 + if (instant) { + return ( +
+ {children} +
+ ); + } + return (