import React, { useEffect, useMemo, useRef, useState } from 'react'; const clamp = (v, min, max) => Math.min(max, Math.max(min, v)); export default function JadlabInnoceanMain() { const [scrollY, setScrollY] = useState(0); const [vh, setVh] = useState(typeof window !== 'undefined' ? window.innerHeight : 900); const [isMobile, setIsMobile] = useState(typeof window !== 'undefined' ? window.innerWidth < 768 : false); const [showHeader, setShowHeader] = useState(true); const [menuOpen, setMenuOpen] = useState(false); const [section2Step, setSection2Step] = useState(0); const [heroStep, setHeroStep] = useState(0); const [section4BrandIn, setSection4BrandIn] = useState(false); const lastScrollRef = useRef(0); const tickingRef = useRef(false); const pendingYRef = useRef(0); const menuWrapRef = useRef(null); const section2SeqStartedRef = useRef(false); const section2TimersRef = useRef([]); const heroTimersRef = useRef([]); const section4Ref = useRef(null); const section4TimerRef = useRef(null); useEffect(() => { const onPointerDown = (e) => { if (!menuOpen) return; if (menuWrapRef.current && !menuWrapRef.current.contains(e.target)) { setMenuOpen(false); } }; document.addEventListener('mousedown', onPointerDown); document.addEventListener('touchstart', onPointerDown, { passive: true }); return () => { document.removeEventListener('mousedown', onPointerDown); document.removeEventListener('touchstart', onPointerDown); }; }, [menuOpen]); useEffect(() => { const updateByScroll = (currentY) => { const delta = currentY - lastScrollRef.current; if (currentY <= 8) { setShowHeader(true); } else if (delta > 2) { setShowHeader(false); } else if (delta < -2) { setShowHeader(true); } lastScrollRef.current = currentY; setScrollY(currentY); }; const onScroll = () => { pendingYRef.current = window.scrollY || 0; if (tickingRef.current) return; tickingRef.current = true; requestAnimationFrame(() => { updateByScroll(pendingYRef.current); tickingRef.current = false; }); }; const onResize = () => { setVh(window.innerHeight || 900); setIsMobile((window.innerWidth || 0) < 768); }; onResize(); updateByScroll(window.scrollY || 0); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onResize); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); }; }, []); const heroProgress = clamp(scrollY / (vh * 1.22), 0, 1); const menuProgress = clamp(scrollY / 120, 0, 1); const heroTextGate = clamp((0.62 - heroProgress) / 0.12, 0, 1); const heroTextOpacity = clamp(1 - heroProgress * 0.95, 0, 1) * heroTextGate; const heroTextY = heroProgress * 18; const heroLine1 = heroStep >= 1 ? 1 : 0; const heroLine2 = heroStep >= 2 ? 1 : 0; const videoScale = isMobile ? 1 : 0.36 + heroProgress * 1.14; const videoStartX = 0; const videoStartY = isMobile ? 0 : -4; const videoEndX = 0; const videoEndY = isMobile ? 0 : -4; const videoX = videoStartX + (videoEndX - videoStartX) * heroProgress; const videoY = videoStartY + (videoEndY - videoStartY) * heroProgress; const videoRadius = isMobile ? 0 : 14 + (26 - 14) * heroProgress; const sectionFade1 = clamp((scrollY - vh * 0.8) / (vh * 0.55), 0, 1); // 2nd section text reveal sequence with 1s delay per line const section2TriggerY = isMobile ? vh * 0.35 : vh * 1.58; const section2ResetY = isMobile ? vh * 0.1 : vh * 1.18; const section2Line1 = section2Step >= 1 ? 1 : 0; const section2Line2 = section2Step >= 2 ? 1 : 0; const section2Line3 = section2Step >= 3 ? 1 : 0; const section2Line4 = section2Step >= 4 ? 1 : 0; const section2Line5 = section2Step >= 5 ? 1 : 0; const section2Line6 = section2Step >= 6 ? 1 : 0; const sectionFade2 = clamp((scrollY - vh * 1.78) / (vh * 0.55), 0, 1); const section4BrandFx = section4BrandIn ? 1 : 0; const stats = useMemo( () => [ { value: '9,902', label: 'JADLAB DATA 01' }, { value: '1,633', label: 'JADLAB DATA 02' }, { value: '1,094', label: 'JADLAB DATA 03' }, { value: '22', label: 'JADLAB DATA 04' }, { value: '32', label: 'JADLAB DATA 05' } ], [] ); useEffect(() => { if (scrollY >= section2TriggerY && !section2SeqStartedRef.current) { section2SeqStartedRef.current = true; setSection2Step(1); section2TimersRef.current = [ setTimeout(() => setSection2Step(2), 300), setTimeout(() => setSection2Step(3), 500), setTimeout(() => setSection2Step(4), 900), setTimeout(() => setSection2Step(5), 1300), setTimeout(() => setSection2Step(6), 1700) ]; } if (scrollY <= section2ResetY && section2SeqStartedRef.current) { section2SeqStartedRef.current = false; section2TimersRef.current.forEach((t) => clearTimeout(t)); section2TimersRef.current = []; setSection2Step(0); } }, [scrollY, section2TriggerY, section2ResetY]); useEffect(() => { heroTimersRef.current = [ setTimeout(() => setHeroStep(1), 1000), setTimeout(() => setHeroStep(2), 2000) ]; return () => { heroTimersRef.current.forEach((t) => clearTimeout(t)); section2TimersRef.current.forEach((t) => clearTimeout(t)); if (section4TimerRef.current) clearTimeout(section4TimerRef.current); }; }, []); useEffect(() => { const node = section4Ref.current; if (!node) return; const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setSection4BrandIn(false); if (section4TimerRef.current) clearTimeout(section4TimerRef.current); section4TimerRef.current = setTimeout(() => setSection4BrandIn(true), 650); } else { if (section4TimerRef.current) clearTimeout(section4TimerRef.current); setSection4BrandIn(false); } }); }, { threshold: 0.48, rootMargin: '0px 0px -18% 0px' } ); observer.observe(node); return () => { if (section4TimerRef.current) clearTimeout(section4TimerRef.current); observer.disconnect(); }; }, []); return (

{ e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} className="flex items-center" aria-label="맨 위로 이동" > 회사로고