// components.jsx — UI components for 꾹꾹이 아카이브 const { useState, useEffect, useMemo, useCallback, useRef } = React; // ─── helpers ─────────────────────────────────────────────────────────────── const fmtKDate = (iso) => { const d = new Date(iso + "T00:00:00"); const days = ["일", "월", "화", "수", "목", "금", "토"]; return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}.${String(d.getDate()).padStart(2, "0")} (${days[d.getDay()]})`; }; const daysUntil = (iso) => { const now = new Date();now.setHours(0, 0, 0, 0); const d = new Date(iso + "T00:00:00"); return Math.round((d - now) / 86400000); }; const parseRunStart = (run = "") => { const text = String(run || ""); const match = text.match(/\d{4}[.-]\d{1,2}[.-]\d{1,2}/); if (!match) return null; return new Date(match[0].replace(/\./g, "-")); }; // ─── Photo block (real image when code is an image file) ─────────────── function PH({ ratio = "3 / 4", label = "PHOTO", code, style }) { const isImage = typeof code === "string" && /\.(png|jpe?g|gif|webp|svg)$/i.test(code); return (
{isImage ? ( {label} ) : ( <> {code || "img/—"} {label} )}
); } // ─── Top nav ────────────────────────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", on, { passive: true }); on(); return () => window.removeEventListener("scroll", on); }, []); const items = [ ["about", "About"], ["schedule", "Schedule"], ["works", "Works"], ["gallery", "Gallery"]]; const jump = (id) => (e) => { e.preventDefault(); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" }); }; return ( <> ); } function Hero({ variant = "cover", nameSize = 220, serifFamily = "Noto Serif KR" }) { const next = SCHEDULE.find((s) => daysUntil(s.date) >= 0); const dday = next ? daysUntil(next.date) : null; // Top + bottom magazine masthead const Masthead = () =>
; return (
KOOKOOKI
); } // ─── About section ──────────────────────────────────────────────────────── function About() { const debutValue = PROFILE.debutDate || PROFILE.debut_date || ""; const debut = useMemo(() => new Date(debutValue + "T00:00:00"), [debutValue]); // Live-updating debut counter const debutInfo = useMemo(() => { if (Number.isNaN(debut.getTime())) return "데뷔일 정보 없음"; const now = new Date(); const days = Math.floor((now - debut) / 86400000); let years = now.getFullYear() - debut.getFullYear(); const before = now.getMonth() < debut.getMonth() || (now.getMonth() === debut.getMonth() && now.getDate() < debut.getDate()); if (before) years -= 1; return `${days.toLocaleString("ko-KR")}일 · ${years}주년`; }, [debut]); const anniversary = useMemo(() => { if (Number.isNaN(debut.getTime())) return null; const now = new Date(); const candidate = new Date(now.getFullYear(), debut.getMonth(), debut.getDate()); if (candidate < now) candidate.setFullYear(candidate.getFullYear() + 1); const diffDays = Math.ceil((candidate - now) / 86400000); return { year: candidate.getFullYear(), days: diffDays, label: `${candidate.getFullYear()}년 데뷔 ${candidate.getFullYear() - debut.getFullYear()}주년` }; }, [debut]); const birthStr = PROFILE.birthDate || PROFILE.birth_date || "1991-03-14"; const facts = [ ["이름", PROFILE.nameKo || PROFILE.name_ko || ""], ["생년월일", birthStr.replace(/-/g, ".").slice(0, 10).replace(/\./g, ".")], ["MBTI", PROFILE.mbti || ""], ["데뷔", PROFILE.debutDate || PROFILE.debut_date ? (PROFILE.debutDate || PROFILE.debut_date).replace(/-/g, ".") + " 뮤지컬 〈삼총사〉" : ""], ].filter(([, v]) => v); const birthday = useMemo(() => { const d = new Date(birthStr + "T00:00:00"); if (Number.isNaN(d.getTime())) return null; const now = new Date(); const candidate = new Date(now.getFullYear(), d.getMonth(), d.getDate()); if (candidate < now) candidate.setFullYear(candidate.getFullYear() + 1); const diffDays = Math.ceil((candidate - now) / 86400000); return { days: diffDays, label: `${candidate.getFullYear()}년 생일` }; }, [birthStr]); return (
{/* Facts table on the left */}
{facts.map(([k, v]) => )}
{k} {k === "데뷔" ? {v} +{debutInfo} {anniversary ? · D-{anniversary.days} : null} : k === "생년월일" && birthday ? {v} (D-{birthday.days}) : v}
Booking
{"<사의 찬미> 예매 바로가기"}
{/* Profile photo on the right */}
Official
{[ { key: "instagram", icon: "images/instagram.svg", iconW: 20, label: "@sunkorea91", fallback: "https://www.instagram.com/sunkorea91/" }, { key: "youtube", icon: "images/youtube.svg", iconW: 20, label: "서동진과 선한국의 유튜브", fallback: "https://www.youtube.com/@sunseo2910" }, { key: "kakao", icon: "images/kakao.jpg", iconW: 18, label: "벼랑끝에 선 한국 뮤지컬", fallback: "https://open.kakao.com/o/g1r9ty6f" }, ].map(({ key, icon, iconW, label, fallback }) => { const href = (PROFILE.social && PROFILE.social[key]) || fallback; return ( {key} {label} ); })}
); } // ─── Concerts strip (small, under Works) ────────────────────────────────── function ConcertsStrip() { return (

{CONCERTS.length} entries
{CONCERTS.map((c, i) =>
{c.date}
{c.title}
w/ {c.with}
)}
); } // ─── shared section header ──────────────────────────────────────────────── function SectionHeader({ chapter, label, title, right, chipStyle = {}, labelStyle = {}, titleStyle = {} }) { return (
Ch.{chapter} {label ? ✦ {label} : null}

{title}

{right}
); } // ─── Works ──────────────────────────────────────────────────────────────── function Works() { const [yearFilter, setYearFilter] = useState("all"); const sourceWorks = (window.WORKS && window.WORKS.length ? window.WORKS : WORKS); const years = useMemo(() => [...new Set(sourceWorks.map((w) => w.year).filter(Boolean))].sort((a, b) => b - a), [sourceWorks]); const recentYears = useMemo(() => years.filter((y) => y >= 2020), [years]); const before2020 = useMemo(() => years.filter((y) => y < 2020), [years]); const filtered = useMemo(() => { const sorted = [...sourceWorks].sort((a, b) => { const aStart = parseRunStart(a.run) || new Date((a.year || 0) + "-01-01T00:00:00"); const bStart = parseRunStart(b.run) || new Date((b.year || 0) + "-01-01T00:00:00"); return bStart.getTime() - aStart.getTime() || String(b.title || "").localeCompare(String(a.title || "")); }); if (yearFilter === "all") return sorted; if (yearFilter === "before-2020") return sorted.filter((w) => (w.year || 0) < 2020); return sorted.filter((w) => String(w.year) === String(yearFilter)); }, [yearFilter, sourceWorks]); return (
{[["all", "전체 연도"], ...recentYears.map((y) => [y, String(y)]), ...(before2020.length > 0 ? [["before-2020", "2020 이전"]] : [])].map(([val, lbl]) => ( ))}
{filtered.map((w, i) =>
{w.year}
{w.title}
{w.kind}
{w.role}
{w.venue}
{w.run}
#{String(filtered.length - i).padStart(2, "0")}
)}
); } // ─── Schedule (with D-Day countdown) ────────────────────────────────────── function Schedule() { const [tick, setTick] = useState(0); useEffect(() => { const id = setInterval(() => setTick((t) => t + 1), 1000); return () => clearInterval(id); }, []); const sourceWorks = (window.WORKS && window.WORKS.length ? window.WORKS : WORKS); const resolveVenue = useCallback((item) => { if (item.venue) return item.venue; const work = sourceWorks.find((w) => w.id === item.work_id); return work?.venue || ""; }, [sourceWorks]); const upcoming = useMemo(() => { const now = Date.now(); return SCHEDULE.filter((s) => new Date(s.date + "T" + s.time + ":00").getTime() >= now); }, [tick]); const next = upcoming[0] || SCHEDULE[SCHEDULE.length - 1] || null; const target = useMemo(() => next ? new Date(next.date + "T" + next.time + ":00") : null, [next?.date, next?.time]); const now = new Date(); const diff = Math.max(0, target ? target - now : 0); const d = Math.floor(diff / 86400000); const h = Math.floor(diff % 86400000 / 3600000); const m = Math.floor(diff % 3600000 / 60000); const s = Math.floor(diff % 60000 / 1000); return (
{/* decorative bear-ear circles */}
{/* Countdown */} {next ? (
♡ 다음 공연까지
{[["일", d], ["시간", h], ["분", m], ["초", s]].map(([lbl, v], i) =>
{String(v).padStart(2, "0")}
{lbl}
)}
NEXT UP ♡
{next.title} {next.role && {next.role}}
{fmtKDate(next.date)} · {next.time}
{resolveVenue(next)}
{next.note &&
✧ {next.note}
}
) : (
공연 일정을 불러오는 중이에요. ♡
)} {/* List */}
날짜
시간
작품
공연장
비고
D-Day
{upcoming.length === 0 &&
예정된 공연이 아직 없어요. ♡
} {upcoming.map((s, i) => { const dd = daysUntil(s.date); return (
{s.date.slice(5).replace("-", ".")}
{s.time}
{s.title}
{resolveVenue(s) || "—"}
{s.note ? {s.note} : —}
{dd === 0 ? "D-DAY" : `D-${dd}`}
); })}
); } // ─── Gallery (with lightbox) ────────────────────────────────────────────── function Gallery() { const [open, setOpen] = useState(null); const [tab, setTab] = useState("프로필"); const profileReal = GALLERY.filter((g) => g.tag === "PROFILE"); const profileSlots = Math.max(profileReal.length, 4); const profileItems = Array.from({ length: profileSlots }, (_, i) => profileReal[i] || null); const etcItems = GALLERY.filter((g) => g.tag !== "PROFILE"); const filtered = tab === "프로필" ? profileItems.filter(Boolean) : etcItems; useEffect(() => { setOpen(null); }, [tab]); useEffect(() => { if (open === null) return; const onKey = (e) => { if (e.key === "Escape") setOpen(null); if (e.key === "ArrowRight") setOpen((o) => (o + 1) % filtered.length); if (e.key === "ArrowLeft") setOpen((o) => (o - 1 + filtered.length) % filtered.length); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, filtered]); const bentoSpans = [ { gc: "span 2", gr: "span 2" }, { gc: "span 1", gr: "span 1" }, { gc: "span 1", gr: "span 2" }, { gc: "span 1", gr: "span 1" }, { gc: "span 1", gr: "span 1" }, { gc: "span 2", gr: "span 2" }, { gc: "span 1", gr: "span 1" }, { gc: "span 1", gr: "span 1" }, ]; const TabBtn = ({ id, label }) => ( ); const GalleryCard = ({ g, i, style = {}, onClick, hideLabels = false }) => ( ); return ( ); } // ─── Scroll to top ──────────────────────────────────────────────────────── function ScrollToTop() { const [visible, setVisible] = useState(false); useEffect(() => { const on = () => setVisible(window.scrollY > 300); window.addEventListener("scroll", on, { passive: true }); on(); return () => window.removeEventListener("scroll", on); }, []); return ( ); } // ─── Footer ─────────────────────────────────────────────────────────────── function Footer() { return ( ); } Object.assign(window, { Nav, Hero, About, Works, Schedule, Gallery, Footer, SectionHeader, PH, ConcertsStrip, ScrollToTop });