/* ============================================================================= 노바바레 — 화면 본체 ----------------------------------------------------------------------------- 글자는 전부 src/content.js 에 있다. 이 파일은 구조와 디자인만 담당한다. ========================================================================== */ const C = window.CONTENT; const { useState, useEffect, useRef } = React; // 주소 뒤에 ?shot=1 을 붙이면 스크롤 없이 전부 바로 보이게 한다 (스크린샷 검증용). const SHOT = window.location.search.indexOf("shot=1") >= 0; const LAZY = SHOT ? "eager" : "lazy"; /* ── 공통 유틸 ─────────────────────────────────────────────────────────── */ function useReveal() { useEffect(() => { const els = document.querySelectorAll(".reveal:not(.in)"); if (SHOT || !("IntersectionObserver" in window)) { els.forEach((el) => el.classList.add("in")); return; } const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }); } // **별표 두 개**로 감싼 부분을 굵게 렌더링한다. function rich(text, strongClass) { const parts = String(text == null ? "" : text).split("**"); return parts.map((p, i) => i % 2 === 1 ? {p} : {p} ); } function scrollTo(id) { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); } function SectionHead({ eyebrow, title, desc, align = "center", light = false }) { const lines = Array.isArray(title) ? title : [title]; const a = align === "left" ? "text-left items-start" : "text-center items-center"; return (
{eyebrow ? (

{eyebrow}

) : null}

{lines.map((l, i) => ( {l} ))}

{desc ? (

{desc}

) : null}
); } function Avatar({ name, image, size = "h-full w-full" }) { if (image) { return (
{name}
); } const initial = name ? name[0] : "?"; return (
{initial}
); } /* ── 헤더 ──────────────────────────────────────────────────────────────── */ const NAV = [ { id: "programs", label: "프로그램" }, { id: "branches", label: "지점 안내" }, { id: "trainers", label: "강사진" }, { id: "pricing", label: "요금" }, { id: "ibfa", label: "IBFA 자격" }, { id: "faq", label: "FAQ" }, { hash: "#/column", label: "저널" }, ]; function Header({ alwaysSolid }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const solid = alwaysSolid || scrolled || open; // 칼럼 페이지에 있을 때 홈 섹션을 누르면, 홈으로 먼저 돌아간 뒤 해당 섹션으로 내려간다 const go = (item) => { setOpen(false); if (item.hash) { window.location.hash = item.hash; return; } const id = item.id || item; const jump = () => scrollTo(id); if (window.location.hash && window.location.hash !== "#/") { window.location.hash = ""; setTimeout(jump, 80); } else { jump(); } }; return (
{open ? (
{NAV.map((n) => ( ))}
) : null}
); } /* ── 1. 히어로 (G1-F 확정안 — 와이드 인증서 스틸 + 차분한 페이드) ───────── */ function Hero() { const h = C.hero; return (
국제바레플로우협회 인증서
{/* 우상단 회전 인증 스탬프 */}
{h.sealLines.map((l, i) =>
{l}
)}
{h.badge}

{h.eyebrow}

{h.lines.map((l, i) => {l})}

{h.sub}

); } /* ── 2. 대표님 한마디 ─────────────────────────────────────────────────── */ function Founder() { const f = C.founder; return (

{f.eyebrow}

“{f.quote}”

{f.quoteSub}

{f.body}

{f.name} — {f.role}

); } /* ── 3. 신뢰 포인트 ───────────────────────────────────────────────────── */ function TrustPoints() { const t = C.trustPoints; return (
{t.items.map((it, i) => (
{it.mark}

{it.title}

{rich(it.desc, "font-semibold text-yellow")}

))}
); } /* ── 3-2. 시설 갤러리 (가로로 끊김 없이 흐르는 마퀴) ──────────────────── */ function Gallery() { const g = C.gallery; const row = g.images.concat(g.images); // 끊김 없이 흐르도록 2배 복제 return (
{row.map((src, i) => (
))}
); } /* ── 4. 프로그램 ──────────────────────────────────────────────────────── */ function Programs() { const p = C.programs; const [featured, ...rest] = p.list; return (
{featured.name}
{featured.tag} · 시그니처

{featured.name}

{featured.desc}

{rest.map((prog, i) => (
{prog.name}
{prog.tag}

{prog.name}

{prog.desc}

))}
); } /* ── 5. 지점 안내 ─────────────────────────────────────────────────────── */ function Branches() { const list = C.branches; return (
{list.map((b, bi) => (
{b.images.map((src, i) => (
{b.name}
))}
{b.menuLabel.toUpperCase()}

{b.name}

주소
{b.addr}
전화
{b.phone}
운영시간
{b.hours}
{b.note ?
참고
{b.note}
: null}
))}
); } /* ── 6. 강사진 ────────────────────────────────────────────────────────── */ function Trainers() { const t = C.trainers; return (
{t.list.map((tr, i) => (

{tr.name} · {tr.role}

{tr.years ?

경력 {tr.years}

: null}

{tr.desc}

))}
); } /* ── 7. 요금 ──────────────────────────────────────────────────────────── */ function Pricing() { const p = C.pricing; return (
{p.plans.map((pl, i) => (

{pl.name} · {pl.count}

{pl.price}{pl.unit}

))}
); } /* ── 8. 후기 ──────────────────────────────────────────────────────────── */ function Reviews() { const r = C.reviews; if (!r.list.length) return null; return (
{r.list.map((rv, i) => (
“{rv.text}”
))}
); } /* ── 9-1. IBFA 합격자 조회 ─────────────────────────────────────────────── 국적·레벨·연도·월·이름을 입력하고 "조회" 버튼을 눌러야 결과가 표시된다 (전체 명단을 그냥 다 보여주지 않음 — 다른 합격자 개인정보 노출 방지). 목록은 src/content.js 의 ibfa.passList 에 있다 — 새 합격자가 나오면 그 배열에 { nation, level, year, month, name } 객체를 추가하면 된다. ※ 자격번호(certNo)는 원본 자료에 없는 항목이라 넣지 않는다 — 지어낸 번호를 실제 자격번호처럼 보여주면 안 된다. */ const LOOKUP_FIELD_CLS = "w-full rounded-sm border border-ink/15 bg-white px-4 py-2.5 text-[14px] text-ink placeholder:text-ink/40 outline-none focus:border-gold"; function LookupRow({ label, children }) { return (
{label}
{children}
); } function PassLookup({ list }) { const [nation, setNation] = useState("전체"); const [level, setLevel] = useState("전체"); const [year, setYear] = useState("전체"); const [month, setMonth] = useState("전체"); const [name, setName] = useState(""); const [submitted, setSubmitted] = useState(false); const [error, setError] = useState(""); const uniq = (arr) => Array.from(new Set(arr)); const nations = ["전체"].concat(uniq(list.map((p) => p.nation))); const levels = ["전체"].concat(uniq(list.map((p) => p.level)).sort()); const years = ["전체"].concat(uniq(list.map((p) => p.year)).sort()); const months = ["전체"].concat(uniq(list.map((p) => p.month)).sort()); const onChange = (setter) => (e) => { setter(e.target.value); setSubmitted(false); setError(""); }; const search = (e) => { e.preventDefault(); if (!name.trim()) { setError("이름을 입력해 주세요."); setSubmitted(false); return; } setError(""); setSubmitted(true); }; const q = name.trim().toLowerCase(); const results = submitted ? list.filter( (p) => (nation === "전체" || p.nation === nation) && (level === "전체" || String(p.level) === String(level)) && (year === "전체" || p.year === year) && (month === "전체" || p.month === month) && p.name.toLowerCase().indexOf(q) >= 0 ) : []; return (

Certificate Holders

합격자 조회

국적·레벨·연도·월·이름을 입력하고 조회 버튼을 누르면 해당하는 합격 내역을 확인하실 수 있습니다.

합격자 조회
{error ?

{error}

: null} {submitted ? ( results.length ? (

총 {results.length}명

이름국적레벨취득연월
{results.map((p, i) => (
{p.name} {p.nation} 레벨 {p.level} {p.year}.{p.month}
))}
) : (

조회 결과가 없습니다. 입력하신 정보를 다시 확인해 주세요.

) ) : null}
); } /* ── 9. IBFA ──────────────────────────────────────────────────────────── */ function Ibfa() { const i = C.ibfa; return (

{i.eyebrow}

{i.title}

{i.titleEn}

{i.desc}

협회장 — {i.president}

Partner Studios

협력 스튜디오

{i.partners.filter((p) => p.logo).map((p, idx) => ( {p.name} ))}
{i.passList && i.passList.length ? : null}
); } /* ── 10. FAQ ──────────────────────────────────────────────────────────── */ function Faq() { const f = C.faq; const [openIdx, setOpenIdx] = useState(0); return (
{f.items.map((it, i) => { const isOpen = openIdx === i; return (
{isOpen ?

{it.a}

: null}
); })}
); } /* ── 11. 예약 문의 ────────────────────────────────────────────────────── */ function Booking() { const b = C.booking; const [form, setForm] = useState({ name: "", phone: "", branch: C.branches[0].menuLabel, msg: "" }); const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })); const submit = (e) => { e.preventDefault(); const subject = encodeURIComponent("[노바바레] 무료 체험 예약 문의 — " + form.name); const body = encodeURIComponent( "이름: " + form.name + "\n연락처: " + form.phone + "\n희망 지점: " + form.branch + "\n문의 내용: " + form.msg ); window.location.href = "mailto:" + b.submitTo + "?subject=" + subject + "&body=" + body; }; return (