// OriginalSections.jsx — v3 // visible/color props on Nav (App controls) + clean ghost morph (bell curve opacity) // ── MenuOverlay ─────────────────────────────────────────────────────────────── const MenuOverlay = ({ open, onClose, onNavigate, t, hasCart, onCartClick }) => { // 스크롤 순서: About → News → Product → Idea → Interactive → Contact → (Cart) const links = [ { label: t("navAbout"), key: "about" }, { label: t("navNews"), key: "news" }, { label: t("navProduct"), key: "product-section" }, { label: t("navIdea"), key: "idea" }, { label: t("interactiveLabel") || "INTERACTIVE", key: "game" }, { label: t("navContact"), key: "contact" }, // hasCart=true 이면 장바구니가 비어있음 → 메뉴에 CART 추가 ...(hasCart ? [{ label: t("navCart") || "CART", key: "cart" }] : []), ]; return (
); }; // ── OriginalNav ── (App controls visibility + color) ───────────────────────── const OriginalNav = ({ onNavigate, onToggleLang, lang, t, visible, color, cartItem, onCartClick }) => { const [menuOpen, setMenuOpen] = React.useState(false); const prevVisRef = React.useRef(visible); const [hideTransition, setHideTransition] = React.useState(false); const [navW, setNavW] = React.useState(window.innerWidth); React.useEffect(() => { const h = () => setNavW(window.innerWidth); window.addEventListener("resize", h, { passive: true }); return () => window.removeEventListener("resize", h); }, []); const isMobileNav = navW < 768; React.useEffect(() => { if (!visible && prevVisRef.current) { // 숨길 때 → 즉시 (히어로섹션으로 스크롤 복귀 시 빠른 소멸) setHideTransition(true); } else if (visible && !prevVisRef.current) { // 나타날 때 → 부드러운 트랜지션 setHideTransition(false); } prevVisRef.current = visible; }, [visible]); const tc = color || "rgba(255,255,255,0.9)"; const borderC = tc === "#1a1a1a" ? "rgba(0,0,0,0.35)" : "rgba(255,255,255,0.6)"; const hasCart = !!cartItem; return ( <> setMenuOpen(false)} onNavigate={onNavigate} t={t} hasCart={!hasCart} onCartClick={onCartClick}/>
{e.preventDefault();onNavigate?.("orig-home");}} style={{ fontSize: isMobileNav ? 10 : 12, fontWeight:500, letterSpacing: isMobileNav ? "1.6px" : "2.4px", color: tc, textDecoration:"none", fontFamily:"'Inter',-apple-system,sans-serif", transition:"color 0.3s", whiteSpace:"nowrap", }}> post (dot) service
{/* 장바구니에 아이템 있을 때만 헤더에 카트 버튼 표시 */} {hasCart && ( )}
); }; // ── OriginalHero ────────────────────────────────────────────────────────────── const OriginalHero = ({ onScrollDown, t }) => { const [videoVisible, setVideoVisible] = React.useState(false); const [charsVisible, setCharsVisible] = React.useState(false); const sectionRef = React.useRef(null); const titleRef = React.useRef(null); const ghostRef = React.useRef(null); React.useEffect(() => { const t1 = setTimeout(()=>setVideoVisible(true), 2000); const t2 = setTimeout(()=>setCharsVisible(true), 400); return ()=>{ clearTimeout(t1); clearTimeout(t2); }; }, []); React.useEffect(() => { let startRect = null; const onScroll = () => { const sec = sectionRef.current; const title = titleRef.current; const ghost = ghostRef.current; if (!sec || !title || !ghost) return; const heroH = sec.offsetHeight; // 애니메이션 범위 확장: heroH * 0.85 (더 긴 스크롤에서 모프 진행) const p = Math.min(Math.max(window.scrollY / (heroH * 0.85), 0), 1); // scroll progress bar const bar = document.getElementById("orig-scroll-progress"); if (bar) { const max = document.body.scrollHeight - window.innerHeight; bar.style.transform = `scaleX(${max>0 ? window.scrollY/max : 0})`; } if (p <= 0) { title.style.opacity = "1"; ghost.style.opacity = "0"; return; } // 스크롤 극초기(p<0.03)에 시작 위치 캡처 if (!startRect && p < 0.03) { startRect = title.getBoundingClientRect(); } if (!startRect) return; // ── 히어로 타이틀: 스크롤 시작 즉시 사라짐 (p=0.03에 완전 소멸) ───── title.style.opacity = String(Math.max(0, 1 - p * 35)); // ── Ghost 투명도: 3단계 ────────────────────────────────────────────── // Phase 1 (p: 0→0.06) : fade-in (0 → 1) // Phase 2 (p: 0.06→0.72): 완전 불투명 이동 구간 // Phase 3 (p: 0.72→0.88): 헤더 도착 후 fade-out → 헤더 로고와 크로스페이드 let gOp; if (p < 0.06) { gOp = p / 0.06; } else if (p < 0.72) { gOp = 1.0; } else { // p=0.72 도착, p=0.88 완전 소멸 (헤더 로고가 fade-in되는 동안 ghost는 fade-out) gOp = Math.max(0, 1.0 - (p - 0.72) / 0.16); } ghost.style.opacity = String(gOp); // ── Ghost 위치: p=0.72에 헤더 로고 위치 도착 후 제자리 유지 ────────── const rawPos = Math.min(p / 0.72, 1.0); // easeInOutQuad: 출발/도착 모두 부드럽게, 중간은 빠르게 const posP = rawPos < 0.5 ? 2 * rawPos * rawPos : 1 - Math.pow(-2 * rawPos + 2, 2) / 2; const startLeft = startRect.left; const startTop = startRect.top; const startFSize = Math.min(startRect.height * 0.75, 80); const endLeft = 48; // 헤더 로고 left (padding 3rem ≈ 48px) const endTop = 28; // 헤더 로고 top const endFSize = 12; ghost.style.left = (startLeft + (endLeft - startLeft) * posP) + "px"; ghost.style.top = (startTop + (endTop - startTop) * posP) + "px"; ghost.style.fontSize = (startFSize + (endFSize - startFSize) * posP) + "px"; ghost.style.letterSpacing = (0.15 + (0.2 - 0.15) * posP) + "em"; }; window.addEventListener("scroll", onScroll, { passive:true }); return () => window.removeEventListener("scroll", onScroll); }, []); const taglineRows = [ [ {chars:[{c:"a",xl:true},{c:"l",xl:false,up:true},{c:"w",xl:true,down:true}]}, {chars:[{c:"a",xl:false},{c:"y",xl:true,up:true},{c:"s",xl:false,down:true}]} ], [ {chars:[{c:"f",xl:false,up:true},{c:"(",xl:true}],indent:"4rem"}, {chars:[{c:"r",xl:true,down:true},{c:"o",xl:false,up:true},{c:")",xl:true},{c:"m",xl:false,down:true}],marginRight:"6rem"} ], [ {chars:[{c:"(",xl:true},{c:"s",xl:false,up:true},{c:"m",xl:true,down:true}]}, {chars:[{c:"a",xl:false},{c:"l",xl:true,up:true},{c:"l",xl:false,down:true}]} ], [ {chars:[{c:"i",xl:false,down:true},{c:"d",xl:true}],indent:"8rem"}, {chars:[{c:"e",xl:false,up:true},{c:"a",xl:true,down:true},{c:")",xl:false}],marginRight:"3rem"} ], ]; return (
{/* Background video */}
{/* Ghost title — fixed, morphs from hero position toward header, then vanishes */}
post (dot) service
{/* Keywords */}
{t("heroKeywords").map(k=>( {k} ))}
{/* Main title */}

post ({" "} dot {" "}) service

{/* Description */}

{t("heroDesc")}

{/* Kinetic tagline */}
{taglineRows.map((row,ri)=>(
{row.map((group,gi)=>(
{group.chars.map((ch,ci)=>( {ch.c} ))}
))}
))}
{/* Scroll indicator */}
); }; // ── OriginalAbout ───────────────────────────────────────────────────────────── const OriginalAbout = ({ t }) => { const [muted, setMuted] = React.useState(true); const videoRef = React.useRef(null); const toggleMute = () => { setMuted(m=>{ if(videoRef.current) videoRef.current.muted=!m; return !m; }); }; return (
); }; window.OriginalNav = OriginalNav; window.OriginalHero = OriginalHero; window.OriginalAbout = OriginalAbout;