// ===== Part 4: Pages 12-13 (유대) ===== const { useState: useState4, useEffect: useEffect4, useRef: useRef4 } = React; // ---------- Page 12 — Horizontal Diary (IX3) ---------- // Photo card 한 장 — 16:9 landscape 사진 슬롯 + 텍스트 라벨 폴백 function Page12PhotoCard({ entry, idx }) { const [hasImg, setHasImg] = useState4(false); const num = String(idx + 1).padStart(2, '0'); return (
{/* 실 이미지 슬롯 — assets/slides/page12/01.png ~ 04.png (16:9 landscape) */} setHasImg(true)} onError={(e) => { e.currentTarget.style.display = 'none'; setHasImg(false); }} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} /> {/* 라벨 폴백 — 이미지 없을 때만 */} {!hasImg &&
{entry.image}
}
{entry.date}
); } function Page12Diary({ next }) { const entries = [ { date: '三月 十二日', image: '할퀸 손 · SCRATCH', text: '아씨 뭐야\n순한줄 알았는데 왜 이렇게 사납지?\n이건 내가 상상했던 고양이가 아닌데', }, { date: '三月 二十日', image: '비 오는 골목 · RAIN', text: '비가 오네.\n고양이도 비에 홀딱 맞겠지?\n에휴 — 내 우산 주고 왔다.', }, { date: '四月 二日', image: '그루밍 · GROOMING', text: '웬일로 내 앞에 있는데도 도망가지 않고,\n자세히 보니 귀엽네.', }, { date: '四月 十五日', image: '야옹 후 떠남 · GOODBYE', text: '뭐야 나를 보고 야옹했어?\n우리 좀 친해진 건가?\n바로 가네, 에휴.', }, ]; const [idx, setIdx] = useState4(0); const scrollElRef = useRef4(null); /** * ref callback — DOM 마운트 시점에 바로 wheel 리스너 등록. * scroll-snap 제거하고 JS로 부드럽게 scrollLeft 증가. * key 옵션: passive:false 로 preventDefault 가능. */ const setScrollEl = React.useCallback((el) => { // cleanup 이전 바인딩 if (scrollElRef.current && scrollElRef.current.__p12_cleanup) { scrollElRef.current.__p12_cleanup(); } scrollElRef.current = el; if (!el) return; const onWheel = (e) => { const delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX; if (delta === 0) return; e.preventDefault(); el.scrollLeft += delta * 1.8; }; const onScroll = () => { const w = el.clientWidth; setIdx(Math.round(el.scrollLeft / w)); }; el.addEventListener('wheel', onWheel, { passive: false }); el.addEventListener('scroll', onScroll, { passive: true }); el.__p12_cleanup = () => { el.removeEventListener('wheel', onWheel); el.removeEventListener('scroll', onScroll); }; }, []); // unmount 시 cleanup useEffect4(() => () => { if (scrollElRef.current && scrollElRef.current.__p12_cleanup) { scrollElRef.current.__p12_cleanup(); } }, []); return (
{entries.map((e, i) => (
{/* Photo — 16:9 landscape 사진 + 날짜 */} {/* Diary text — 배경/타이틀/세로선 제거, 우측으로 더 이동, 글자 크기 키움 */}
{e.text}
))}
{/* 상단 인디케이터 (점 + 번호) — pill */}
{entries.map((_, i) =>
)}
{idx + 1} / {entries.length}
{/* 하단 힌트 — 중간 페이지 */} {idx < entries.length - 1 &&
→ 휠 또는 스와이프로 가로 이동
} {idx >= entries.length - 1 && }
); } // ---------- Page 13 — Approaching → Rubbing ---------- // 고양이가 멀리서 점점 다가오는 시퀀스 (3단계) → mp4 재생 // Page 12(아직 거리 있는 일기장) 와 "비비기" 사이의 자연스러운 교량 function Page13Rubbing({ next }) { const [phase, setPhase] = useState4(0); const videoRef = useRef4(null); // 0: 저 멀리 (작게) // 1: 조심스레 다가옴 (중간 크기) // 2: 바로 눈앞 (크게) // 3: mp4 — 몸을 비빔 (캡션: 다가와 비빈다) // 4: mp4 계속 — 캡션만 교체 (우리 이제 좀 친해진 것 같다) useEffect4(() => { const timers = [ setTimeout(() => setPhase(1), 1600), setTimeout(() => setPhase(2), 3200), setTimeout(() => setPhase(3), 4800), setTimeout(() => setPhase(4), 11000) // 비디오가 천천히 재생되는 동안 phase 3 캡션 충분히 노출 ]; return () => timers.forEach(clearTimeout); }, []); // phase에 따라 고양이 크기/위치 보간 const catScale = phase === 0 ? 0.22 : phase === 1 ? 0.50 : 0.95; const catBottom = phase === 0 ? '62%' : phase === 1 ? '38%' : '10%'; const catOpacity = phase < 3 ? 1 : 0; // mp4 단계에선 이미지 숨김 // 2단계부터는 friendly 표정으로 교체 const catSrc = phase < 2 ? 'assets/cat_walking.png' : 'assets/cat_friendly.png'; // 캡션 const captions = [ '— 저 멀리, 걸어오고 있다 —', '— 조심스럽게 다가온다 —', '— 바로 눈앞까지 —', '— 다가와 몸을 비빈다 —', '— 우리 이제 좀 친해진 것 같다 —' ]; return (
{/* phase 3 이전 — page13.png 배경 + 어둡게 내리는 오버레이 */} {phase < 3 && <>
} {/* 고양이 이미지 — 다가오는 시퀀스 */} {phase < 3 && } {/* phase 3+ — 비비는 영상 (0.4배 재생, metadata/play 이벤트에서 속도 강제) */} {phase >= 3 &&