/* ============================================================================= 발란스온 필라테스 — 화면 본체 ----------------------------------------------------------------------------- 글자는 전부 src/content.js 에 있다. 이 파일은 구조와 디자인만 담당한다. ========================================================================== */ const C = window.CONTENT; const { useState, useEffect, useRef } = React; /* 촬영 모드 — 주소 뒤에 ?shot=1 을 붙였을 때만 켜진다. (tools/shoot.py 가 쓴다) 스크린샷 도구는 화면을 스크롤하지 않는다. 그래서 이 모드에서는 ① 떠오르는 효과(.reveal)를 처음부터 다 보이게 하고 ② 사진을 미루지 않고(lazy 해제) 한꺼번에 불러온다. 둘 다 안 하면 화면 아래쪽이 비어 있는 채로 찍힌다. */ const SHOT = window.location.search.indexOf("shot=1") >= 0; const LAZY = SHOT ? "eager" : "lazy"; /* ── 공통 유틸 ─────────────────────────────────────────────────────────── */ // 스크롤해서 화면에 들어오면 한 번만 떠오르는 효과 // // 주소 뒤에 ?shot=1 을 붙이면 스크롤 없이 전부 바로 보이게 한다. // 화면을 이미지로 뜰 때(tools/shoot.py) 쓰는 촬영 모드다 — 스크린샷 도구는 스크롤을 하지 // 않아서, 이게 없으면 아래쪽 카드가 안 떠오른 채(투명한 채)로 찍힌다. function useReveal() { const shotMode = window.location.search.indexOf("shot=1") >= 0; useEffect(() => { const els = document.querySelectorAll(".reveal:not(.in)"); if (shotMode) { els.forEach((el) => el.classList.add("in")); return; } if (!("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(); }); } /* content.js 의 **별표 두 개** 를 굵은 글씨로 바꿔준다. 원고를 쓰는 쪽에서 강조를 직접 정할 수 있게 하려고 둔 아주 작은 문법이다. 줄바꿈(\n)도 그대로 살린다. */ function rich(text, strongClass) { const out = []; String(text == null ? "" : text) .split("\n") .forEach((line, li) => { if (li > 0) out.push(
); line.split("**").forEach((part, i) => { if (!part) return; out.push( i % 2 ? {part} : {part} ); }); }); return out; } // 섹션 상단 라벨 (영문 소문자 스페이싱 + 한글 제목) 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}
); } /* ── 헤더 ──────────────────────────────────────────────────────────────── */ const NAV = [ { id: "about", label: "소개" }, { id: "strengths", label: "10가지 강점" }, { id: "programs", label: "수업" }, { id: "space", label: "공간·기구" }, { id: "teachers", label: "강사진" }, { id: "guide", label: "이용안내" }, { 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 go = (item) => { setOpen(false); if (item.hash) { window.location.hash = item.hash; return; } const id = item.id || item; const jump = () => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }; if (window.location.hash && window.location.hash !== "#/") { window.location.hash = ""; setTimeout(jump, 80); } else { jump(); } }; return (
{open ? (
{NAV.map((n) => ( ))}
) : null}
); } /* ── 1. 첫 화면 + 겹쳐 올라오는 세로 카드 ─────────────────────────────── */ function Hero() { const h = C.hero; const imgRef = useRef(null); const go = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth" }); }; // 스크롤에 따라 배경 사진만 조금 느리게 따라온다 (얕은 패럴랙스). // rAF 로 묶어서 스크롤 이벤트마다 레이아웃을 건드리지 않게 한다. useEffect(() => { const el = imgRef.current; if (!el) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; let ticking = false; const apply = () => { const y = Math.min(window.scrollY, window.innerHeight); el.style.transform = "translate3d(0," + y * 0.16 + "px,0)"; ticking = false; }; const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(apply); } }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const step = (n) => ({ animationDelay: n * 140 + "ms" }); return (
{/* 배경 사진 — 천천히 확대/축소를 반복하고, 스크롤하면 살짝 뒤따라온다 */}
{/* 가운데 정렬 — 로랑처럼 라벨 → 큰 제목 → 두 줄 → 한 줄 설명 순서 */}

{h.eyebrow}

{h.headline}

{/* 설명 두 줄 — 사진 위에서도 읽히도록 크기와 두께를 한 단계씩 올렸다 */}
{h.sub.map((line, i) => (

{line}

))}

{h.desc}

); } /* 첫 화면 사진 위로 절반쯤 걸쳐 올라오는 세로 카드 3장 */ function Pillars() { const go = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth" }); }; return (
{C.pillars.map((p, i) => ( ))}
{/* 숫자 네 개 — 카드 아래로 내려 첫 화면을 비워둔다 */}
{C.hero.stats.map((s, i) => (

{s.num} {s.unit}

{s.label}

))}
); } /* ── 2. 핵심 3블록 ─────────────────────────────────────────────────────── */ function KeyPoints() { const k = C.keyPoints; return (
{/* 숫자를 제목 옆에 붙여 카드 안의 빈 공간을 없앴다 (예전엔 위아래로 벌려 놓아 허전했다) */}
{k.items.map((it, i) => (
{it.mark}

{it.title}

{rich(it.desc, it.accent ? "text-cream" : "text-ink")}

))}
); } /* ── 3. 브랜드 선언문 ──────────────────────────────────────────────────── */ function Manifesto() { const m = C.manifesto; return (

{m.eyebrow}

{m.title.map((l, i) => ( {l} ))}

{m.lead}

{m.body}

발란스온 프라이빗 개인레슨실
); } /* ── 4. 10가지 강점 ────────────────────────────────────────────────────── */ /* 예전엔 짙은 초록 바탕에 열 개를 똑같이 늘어놓아, 작은 흰 글씨가 모바일에서 잘 안 읽혔다. 지금은 밝은 바탕으로 바꾸고 핵심(key:true)을 위쪽 큰 카드로, 나머지는 아래 목록으로 나눈다. */ function Strengths() { const s = C.strengths; const keyItems = s.items.filter((it) => it.key); const restItems = s.items.filter((it) => !it.key); return (
{/* 핵심 — 먼저 눈에 들어와야 하는 것들 */}
{keyItems.map((it, i) => (
{it.no}

{it.title}

{rich(it.desc, "text-ink")}

))}
{/* 나머지 — 한 줄씩 짧게 */} {restItems.length ? (
{restItems.map((it) => (
{it.no}

{it.title}

{it.desc}

))}
) : null}
); } /* ── 5. 시설 갤러리 (마퀴) ─────────────────────────────────────────────── */ function Gallery() { const g = C.gallery; const row = g.images.concat(g.images); // 끊김 없이 흐르도록 2배 복제 return (
{row.map((src, i) => (
))}
); } /* ── 6. 공감 체크리스트 ────────────────────────────────────────────────── */ function PainPoints() { const p = C.painPoints; return (
    {p.items.map((t, i) => (
  • {t}
    • ))}

{p.outro}

); } /* ── 7. 프로그램 ───────────────────────────────────────────────────────── */ function Programs() { const p = C.programs; return (
{p.list.map((it, i) => (
{it.name} {it.tag}

{it.name}

{it.desc}

    {it.points.map((pt, j) => (
  • {pt}
    • ))}
))}
); } /* ── 8. 공간 & 기구 ────────────────────────────────────────────────────── */ function Equipment() { const e = C.equipment; return (
{/* 대형 기구 */}
{e.machines.map((m, i) => (

{m.name}

{m.brand}

))}
{/* 소도구 */}

PROPS

{e.props.map((p, i) => ( {p} ))}
{/* 공간 */}
{e.spaces.map((s, i) => (
{s.name}

{s.name}

{s.desc}

))}
); } /* ── 9. 강사진 ─────────────────────────────────────────────────────────── */ /* 강사 카드 사진. 원본(tr-*.jpg, 1080×1350)은 이름·자격이 통째로 인쇄된 카드라 글씨가 읽히지 않는다. 그래서 인물 사진이 들어있는 액자 안쪽(가로 553~1016 / 세로 73~692)만 잘라서 쓴다. 액자 테두리(갈색 선)까지 들어오지 않도록 원본 좌표에서 몇 px 안쪽을 잡았다. 숫자는 그 좌표를 3:4 상자에 맞춘 값이다 — 사진 원본이 바뀌면 여기도 다시 맞춰야 한다. */ function TrainerPhoto({ src, alt }) { return (
{alt}
); } function Teachers() { const t = C.trainers; const [openId, setOpenId] = useState(null); return (
{/* 첫 화면엔 사진 + 이름 + 대표 자격 3~4개만. 전체 경력은 「약력 +」로 펼친다. */}
{t.list.map((p, i) => { const isOpen = openId === p.id; const hasCerts = p.certs && p.certs.length > 0; const top = p.top && p.top.length ? p.top : (p.certs || []).slice(0, 4); return (

{p.name} {p.role}

    {top.map((c, j) => (
  • {c}
    • ))}
{hasCerts ? ( ) : null}
{isOpen ? (
    {p.certs.map((c, j) => (
  • {c}
    • ))}
) : null}
); })}
); } /* ── 10. 이용안내 (시작 4단계 + 안내표) ────────────────────────────────── */ function Guide() { const p = C.process; const rows = p.guide.filter((g) => g.value); // 아직 안 정한 항목은 자동으로 빠진다 return (
{p.steps.map((s, i) => (

{s.no}

{s.title}

{s.desc}

))}
{rows.length ? (
{rows.map((g, i) => (

{g.label}

{g.value}

))}
) : null}
); } /* ── 11. 후기 (없으면 통째로 숨김) ─────────────────────────────────────── */ function Reviews() { const r = C.reviews; if (!r.list || !r.list.length) return null; return (
{r.list.map((v, i) => (

{"★".repeat(v.stars || 5)}

{v.text}

{v.author}
))}
); } /* ── 12. FAQ ───────────────────────────────────────────────────────────── */ function Faq() { const f = C.faq; const [open, setOpen] = useState(0); return (
{f.items.map((it, i) => { const isOpen = open === i; return (
{isOpen ? (

{it.a}

) : null}
); })}
); } /* ── 13. 마무리 CTA ────────────────────────────────────────────────────── */ function CtaBand() { const c = C.cta; return (

{c.title.map((l, i) => ( {l} ))}

{c.desc}

); } /* ── 14. 문의 (카카오톡 채널) ────────────────────────────────────────────── 원래 이름·연락처를 받는 폼이었는데, 신청을 카카오톡 채널로만 받기로 해서 폼을 걷어냈다. 개인정보를 아예 수집하지 않으므로 동의 절차도 필요 없다. ────────────────────────────────────────────────────────────────────────── */ function Booking() { const b = C.booking; const s = C.site; return (
{s.kakao ? ( 카카오톡으로 문의하기 ) : ( /* 채널 주소가 아직 없으면 버튼을 만들지 않는다. 눌러도 아무 데도 안 가는 버튼을 두는 것보다 낫다. */

카카오톡 상담 채널을 준비하고 있습니다.

)} {s.phone ? (

전화 문의{" "} {s.phone}

) : null}
{b.trust.map((t, i) => ( · {t} ))}
{/* 찾아오는 길 — 주소는 확정되어 있다 */} {s.address ? (

LOCATION

{s.address} {s.addressDetail}

{s.transit ?

{s.transit}

: null}
) : null}
); } /* ── 15. 푸터 ──────────────────────────────────────────────────────────── */ function Footer() { const s = C.site; const f = C.footer; const lines = [ s.address ? { label: "주소", value: s.address + (s.addressDetail ? " " + s.addressDetail : "") } : null, s.phone ? { label: "전화", value: s.phone } : null, s.hoursWeekday ? { label: "운영시간", value: s.hoursWeekday } : null, s.parking ? { label: "주차", value: s.parking } : null, s.bizNumber ? { label: "사업자등록번호", value: s.bizNumber } : null, ].filter(Boolean); return ( ); } function FooterLink({ href, label }) { return ( {label} ); } /* ── 16. 떠 있는 CTA ───────────────────────────────────────────────────── */ function FloatingCta() { const [show, setShow] = useState(false); useEffect(() => { const onScroll = () => { const booking = document.getElementById("booking"); const nearForm = booking && booking.getBoundingClientRect().top < window.innerHeight * 1.1; setShow(window.scrollY > window.innerHeight * 0.9 && !nearForm); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
); } /* ── 앱 ────────────────────────────────────────────────────────────────── */ /* ── 17. 칼럼(저널) ─────────────────────────────────────────────────────── 데이터는 src/columns.js 에 있다. write.html 에서 쓰고 내려받아 덮어쓴다. ────────────────────────────────────────────────────────────────────────── */ const J = window.COLUMNS || { meta: {}, categories: [], photoPools: {}, posts: [] }; // "2026.08.12" → 오늘 날짜와 비교할 수 있는 숫자 function dateNum(str) { const m = String(str || "").match(/(\d{4})\D(\d{1,2})\D(\d{1,2})/); if (!m) return 0; return Number(m[1]) * 10000 + Number(m[2]) * 100 + Number(m[3]); } function todayNum() { const d = new Date(); return d.getFullYear() * 10000 + (d.getMonth() + 1) * 100 + d.getDate(); } // 화면에 내보낼 글: 초안 제외, 발행일이 오늘 이후인 글 제외(예약 발행), 최신순 function publishedPosts() { const t = todayNum(); return (J.posts || []) .filter((p) => !p.draft && dateNum(p.date) <= t) .sort((a, b) => dateNum(b.date) - dateNum(a.date)); } function findPost(id) { return (J.posts || []).find((p) => p.id === id); } // image 가 "auto" 면 카테고리 사진 중에서 고른다. id 를 기준으로 고르므로 항상 같은 사진이 나온다. function postImage(p) { if (p.image && p.image !== "auto") return p.image; const pool = (J.photoPools || {})[p.cat] || (J.photoPools || {})._default || []; if (!pool.length) return "img/studio-wide.jpg"; let h = 0; for (let i = 0; i < String(p.id).length; i++) h = (h * 31 + String(p.id).charCodeAt(i)) >>> 0; return pool[h % pool.length]; } /* 본문 중간에 자동으로 들어가는 사진. 카테고리 사진 묶음이 세 장씩이라, 대표 사진 1장 + 본문 2장 = 한 편에 3장이 된다. 대표 사진과 겹치지 않게 나머지를 순서대로 쓴다. 원고에는 사진을 적지 않는다. */ function bodyPhotos(p, count = 2) { const pool = (J.photoPools || {})[p.cat] || (J.photoPools || {})._default || []; const hero = postImage(p); const rest = pool.filter((src) => src !== hero); const out = []; for (let i = 0; i < count && rest.length; i++) out.push(rest[i % rest.length]); return out; } /* 사진 자리 고르기 — 글을 고르게 나눈 지점에서 가장 가까운 소제목 바로 앞에 넣는다. 소제목 앞에 두면 글의 마디가 사진으로 끊겨 읽기 편하다. 소제목이 모자라면 그냥 그 자리 문단 사이에 넣는다. */ function photoSlots(body, count) { const n = body.length; const heads = []; body.forEach((b, i) => { if (i > 0 && b && typeof b === "object" && b.h2) heads.push(i); }); const slots = []; for (let k = 1; k <= count; k++) { const target = Math.round((n * k) / (count + 1)); let at = heads.find((h) => h >= target && slots.indexOf(h) < 0); if (at === undefined) at = heads.filter((h) => slots.indexOf(h) < 0).pop(); if (at === undefined) at = slots.indexOf(target) < 0 ? target : target + 1; if (at > 0 && at < n) slots.push(at); } return slots; } function BodyPhoto({ src }) { return (
발란스온 필라테스 하남점 내부
); } /* noPhoto: 사진 없이 글자만. 글 한 편 안에서는 사진을 딱 3장(대표 1 + 본문 2)만 쓰기로 했다. 글 끝의 「함께 읽으면 좋은 글」에까지 사진을 붙이면 한 화면에 다섯 장이 되어 글보다 사진이 많아 보인다. 그래서 그 자리에서는 이 옵션을 켠다. */ function ColumnCard({ p, wide = false, noPhoto = false }) { return ( {noPhoto ? null : (
{p.title}
)}

{p.cat}

{p.title}

{p.excerpt}

{p.date}

 ); } /* 홈에 붙는 최신 3개 미리보기 — 글이 없으면 통째로 숨긴다 */ function JournalPreview() { const list = publishedPosts().slice(0, 3); if (!list.length) return null; return (
{list.map((p) => )}
저널 전체 보기 →
); } /* 목록 페이지 */ function ColumnList() { const [cat, setCat] = useState("전체"); const all = publishedPosts(); const cats = ["전체"].concat((J.categories || []).filter((c) => all.some((p) => p.cat === c))); const list = cat === "전체" ? all : all.filter((p) => p.cat === cat); return (
{all.length === 0 ? (

아직 발행된 글이 없습니다.
첫 글이 올라오면 이곳에 표시됩니다.

) : ( {cats.length > 2 ? (
{cats.map((c) => ( ))}
) : null}
{list.map((p) => )}
)}
); } /* 글 한 편 */ function ColumnPost({ id }) { const p = findPost(id); if (!p || p.draft) { return (

글을 찾을 수 없습니다

주소가 바뀌었거나 아직 공개되지 않은 글입니다.

저널 목록으로
); } const related = (p.related || []).map(findPost).filter((x) => x && !x.draft); const photos = bodyPhotos(p); // 본문 중간 사진 2장 const slots = photoSlots(p.body || [], photos.length); return (
{/* 대표 사진 */}
{p.title}

{p.cat}

{p.title}

{p.date} {p.updated ? " · " + p.updated + " 수정" : ""}

{p.excerpt}

{(p.body || []).map((b, i) => { const slot = slots.indexOf(i); // 이 자리 앞에 사진이 들어가나 return ( {slot >= 0 && photos[slot] ? : null} {typeof b === "string" ? (

{b}

) : (

{b.h2}

)} ); })}
{/* 글 끝 상담 유도 */} {related.length ? (

RELATED

함께 읽으면 좋은 글

{related.map((r) => )}
) : null}
); } /* ── 화면 전환 ───────────────────────────────────────────────────────────── 주소의 # 뒤만 보고 화면을 고른다. 서버 설정이 필요 없어 정적 호스팅에서 그대로 돈다. (없음) 홈 #/column 저널 목록 #/column/<글id> 글 한 편 ────────────────────────────────────────────────────────────────────────── */ function parseHash() { const h = (window.location.hash || "").replace(/^#\/?/, ""); if (h === "column") return { name: "list" }; if (h.indexOf("column/") === 0) return { name: "post", id: h.slice("column/".length) }; return { name: "home" }; } function App() { const [route, setRoute] = useState(parseHash()); useReveal(); useEffect(() => { const onHash = () => { setRoute(parseHash()); window.scrollTo({ top: 0, behavior: "auto" }); }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); if (route.name === "list") { return (