diff --git a/landing/app/components/sections/comparison.tsx b/landing/app/components/sections/comparison.tsx index c239f20..af6ea76 100644 --- a/landing/app/components/sections/comparison.tsx +++ b/landing/app/components/sections/comparison.tsx @@ -7,22 +7,33 @@ import { SectionHeading } from "@/components/ui/section-heading" import { Typography } from "@/components/ui/typography" import { useFadeUp } from "@/lib/motion" -/** 기존 방식 ↔ 도입 후 토글 비교 — 화면 진입 시 자동으로 오가고, 사용자가 누르면 수동 고정. */ +/** 기존 방식 ↔ 도입 후 토글 비교 — 화면 진입 시 자동으로 오가고, 누르면 잠시 수동(8초 후 자동 재개). */ export function Comparison() { const fadeUp = useFadeUp() const toggleFadeUp = useFadeUp(0.1) const [mode, setMode] = useState("before") - // 사용자가 직접 토글을 누르면 자동 전환 중단 + // 사용자가 토글을 누르면 잠시 자동 전환 중단, 8초 무조작 시 재개 const [locked, setLocked] = useState(false) const [inView, setInView] = useState(false) const sectionRef = useRef(null) + const lockTimerRef = useRef | null>(null) + + const selectMode = (key: Mode) => { + setMode(key) + setLocked(true) + if (lockTimerRef.current) clearTimeout(lockTimerRef.current) + lockTimerRef.current = setTimeout(() => setLocked(false), 8000) + } useEffect(() => { const el = sectionRef.current if (!el) return const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), { threshold: 0.35 }) observer.observe(el) - return () => observer.disconnect() + return () => { + observer.disconnect() + if (lockTimerRef.current) clearTimeout(lockTimerRef.current) + } }, []) useEffect(() => { @@ -32,13 +43,13 @@ export function Comparison() { }, [inView, locked]) return ( -
+
@@ -49,10 +60,7 @@ export function Comparison() { {MODES.map((m) => (