// 시안 A — Classic / Editorial // 보편적인 교회 홈페이지 구조. 정돈된 카드 그리드, 따뜻한 종이톤, 산뜻한 푸른 포인트. const { useState, useEffect, useRef, useMemo } = React; // ─── 안전장치: data.js 로드 실패 시 크래시 방지 ─── if (!window.CHURCH) { window.CHURCH = { nameKo: '맑은빛 세광교회', nameEn: 'Heallight Church', tagline: '주를 알고, 주를 알리며, 주와 함께하는 교회', taglineEn: 'To know HIM, to make HIM known, to live with HIM.', themeYear: 2026, themeKo: '성령으로 부흥하라', themeEn: 'Revival in the Spirit', address: { full: '서울시 서대문구 신촌로26길 11', mapAddress: '서울특별시 서대문구 신촌로26길 11', lat: 37.5567, lng: 126.9385 }, thisWeek: { date: '', season: '', sermonTitle: '', sermonTitleEn: '', scripture: '', preacher: '박병규 목사', scriptureText: '', notices: [] }, services: [ { name: '주일 온세대예배 1부', time: '주일 9:30am', place: '그레이스홀 (B1)', dot: 'primary' }, { name: '주일 온세대예배 2부', time: '주일 11:00am', place: '그레이스홀 (B1)', dot: 'primary' }, { name: '수요낮예배', time: '수요일 10:30am', place: '그레이스홀 (B1)', dot: 'primary' }, { name: '온마음 아침예배', time: '월-금 5:30am', place: '그레이스홀 (B1)', dot: 'primary' }, ], communities: [ { name: '맑은빛 영유아부', desc: '주일 11am · 유리방(B1)', age: '0-6세' }, { name: '세광 어린이부', desc: '주일 11am · 비전홀(4F)', age: '초등' }, { name: '틴틴 청소년부', desc: '주일 11am · 남신도실(5F)', age: '중·고등' }, { name: '푸른빛 청년부', desc: '주일 11am · 남신도실(5F)', age: '20-30대' }, { name: '온세대 장년 공동체', desc: '주일 1·2부 예배', age: '전 세대' }, ], pastor: { name: '박병규', title: '담임목사', titleEn: 'Rev. B K Park, Senior Pastor', education: ['영남신학대학교 신학과 (B.A.)', '한신대학교 신학전문대학원 실천신학 (M.Div.)'], ministry: '맑은빛세광교회 담임목사 시무', message: '맑은빛세광교회 홈페이지를 찾아주신 여러분을 예수 그리스도의 이름으로 환영합니다.' }, history: [], prayerPoints: [], weeklyEssay: null, account: { bank: '신한', number: '100-034-146193', holder: '한국기독교장로회 세광교회' }, }; } if (!window.getCopy) { window.getCopy = function(key) { try { var v = localStorage.getItem('hlc-copy-' + key); if (v != null) return v; } catch(e) {} var d = window.SITE_COPY_DEFAULTS; return (d && d[key] != null) ? d[key] : ''; }; } const { useScrollSpy, NAV_ITEMS, scrollToId, Icon, LogoLockup, CrossPattern, PhotoSlot, SectionTitle, YouTubeCard, YouTubeArchive, ArchiveList, CrossBadge, IllustratedMap, KakaoEmbedMap, copyText, useCopyButton } = window; // ─────────── 동선 카드 (이대역 / 신촌역 탭 전환) ─────────── function RouteStepsCard() { const c = window.CHURCH; const gc = window.getCopy; const [tab, setTab] = useState("edae"); const parseSteps = (key, fallback) => { try { const v = gc && gc(key); if (v) return JSON.parse(v); } catch(e) {} return fallback; }; const stepsEdae = parseSteps("visit.routeEdae", c.routeStepsFromEdae); const stepsSinchon = parseSteps("visit.routeSinchon", c.routeStepsFromSinchon); const tabs = [ { id: "edae", label: "이대역에서", subtitle: "6번 출구 · 도보 3분", steps: stepsEdae, color: "var(--primary)" }, { id: "sinchon", label: "신촌역에서", subtitle: "5번 출구 · 도보 8분", steps: stepsSinchon, color: "var(--mint-deep)" }]; const cur = tabs.find((t) => t.id === tab) || tabs[0]; return (

Step by Step

상세 동선 안내

{/* 탭 */}

{tabs.map((t) => )}

{cur.steps.map((s) =>

{s.n}

{s.title}

{s.body}

)}

); } // ─────────── 카카오지도 스타일 약도 ─────────── // 신촌로 수평축 위에 2호선 + 양쪽 끝의 신촌역·이대역. // 신촌로26길이 중앙에서 남쪽으로 내려가 좌측으로 꺾이며 그 모퉁이에 우리 교회. function KakaoStyleMapV2() { return (

04105 마포구 신촌로26길 11

이대역 6번 출구에서 약 250m · 도보 3분

); } function KakaoStyleMap() {return ;} // (구) function KakaoStyleMap unused below — alias replaced function _UnusedOldKakaoStyleMap() { return (

{/* 우상단 주소 칩 */}

04105 마포구 신촌로26길 11

{/* 좌하단 동선 거리 배지 */}

이대역 6번 출구에서 보행 동선 · 약 250m · 도보 3분

); } // 일반 건물 일러스트 (마포복지관·대흥동 주민센터 등) // tone: "beige" (default) | "gray" | "blue" function MapBuilding({ x, y, width, height, stories = 3, label, sublabel, tone = "beige", pinHighlight = false }) { const winRows = stories; const winCols = 3; const winW = width * 0.18; const winH = (height - 14) / winRows * 0.42; const winSpaceY = (height - 14) / winRows; const palette = { beige: { bg: "#f4ecd5", side: "#c2b485", roof: "#a89770", text: "#3c3424", sub: "#7a6f4f", win: "#7a8aa3" }, gray: { bg: "#edeae3", side: "#cdc7b8", roof: "#a8a395", text: "#4a4842", sub: "#807a6b", win: "#8a8a92" }, blue: { bg: "#e4ecf6", side: "#b8c4d6", roof: "#8a9aae", text: "#3a4258", sub: "#6e788a", win: "#7a8aa3" } }; const p = palette[tone] || palette.beige; return ( {Array.from({ length: winRows }).map((_, r) => Array.from({ length: winCols }).map((__, c) => ) )} 90 ? 11 : 10} fontWeight="700">{label} {sublabel && {sublabel}} ); } // 우리마포복지관 + 대흥동 주민센터 결합 건물 (L자, 좌상 코너 비워둠) function CommunityComplex({ x, y, width, height }) { const cornerW = width * 0.50; const cornerH = height * 0.42; const path = `M ${cornerW} 2 L ${width - 2} 2 L ${width - 2} ${height - 2} L 2 ${height - 2} L 2 ${cornerH} L ${cornerW} ${cornerH} Z`; const bg = "#edeae3"; const stroke = "#cdc7b8"; const text = "#4a4842"; const winFill = "#8a8a92"; return ( {[0, 1, 2].map((c) => )} {[0, 1, 2, 3].map((c) => )} 우리마포복지관 공영 주차장 대흥동 주민센터 ); } // 교회 건물 — 실제 건물 모티프 (노란 본체 + 우측 다크 타워에 흰 십자가) // 첨부 사진을 토대로 한 평면 일러스트. 그림자/태양광/실내조명 효과는 제외. function ChurchBuilding({ x, y, width, height }) { // 폭을 살짝 좁힘 — 전체에서 양쪽 여백 7%씩 const inset = width * 0.07; const usableW = width - inset * 2; const towerW = usableW * 0.30; const bodyW = usableW - towerW; const baseH = height * 0.16; // 색 — 노란 본체를 더 연한 톤(전체 톤앤매너 맞춤, 베이지에 가까운 옅은 노랑) const bodyFill = "#fbe8a8"; // 옅은 노랑 (베이지 톤) const bodyHi = "#fef0c4"; // 상단 하이라이트 const towerFill = "#4d4d52"; // 다크 그레이 (덜 강한 검정) const towerSide = "#3a3a3e"; const bodyStroke = "#cdb56a"; const brick = "#9c5440"; // 적벽돌 톤도 살짝 부드럽게 const brickDark = "#7a3a2a"; const window = "#4a5e7a"; // 창문 톤 살짝 옅게 return ( {/* 글로우 */} {/* 노란 본체 — 그라데이션 톤 */} {/* 상단 하이라이트 (옅게) */} {/* 본체 창문 슬릿 4개 */} {[0.22, 0.38, 0.54, 0.70].map((yPct, i) => )} {/* 다크 타워 (우측) */} {/* 타워 정면 큰 흰 십자가 */} {/* 1층 벽돌 베이스 */} {/* 1층 입구 (어두운 유리문) */} ); } function ClassicNav() { const active = useScrollSpy(NAV_ITEMS.map((i) => i.id)); const [open, setOpen] = useState(false); const [scrolled, setScrolled] = useState(false); useEffect(() => { const fn = () => setScrolled(window.scrollY > 30); fn();window.addEventListener("scroll", fn); return () => window.removeEventListener("scroll", fn); }, []); return (

{e.preventDefault();scrollToId("home");}} style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}> {(window.getCopy && window.getCopy("nav.logoImg")) ?

: }

{open &&

{NAV_ITEMS.map((item) => )}

}

); } // ─── 히어로 LIVE 카드 아래 보조 카드 (Tweaks → heroExtra) ─── function HeroExtraCard({ kind, tw }) { if (kind === "none") return null; const cardBase = { background: "var(--card)", border: "1px solid var(--line)", borderRadius: 10, boxShadow: "0 20px 40px -20px rgba(20,30,60,0.18)", overflow: "hidden", }; if (kind === "sermon") { return (

이번 주 설교 {tw.date.replace(/\.$/, "")}

‘{tw.sermonTitle}’

{tw.sermonTitleEn}

{tw.scripture} {tw.preacher}

); } if (kind === "verse") { return (

“

오직 성령이 너희에게 임하시면, 너희가 권능을 받고…

— 사도행전 1:8

); } if (kind === "schedule") { const items = [ { day: "주일", time: "9:30 · 11:00", label: "온세대예배" }, { day: "수요", time: "10:30am", label: "수요낮예배" }, { day: "매일", time: "5:30am", label: "온마음 아침예배" }, ]; return (

이번 주 예배 그레이스홀 B1

{items.map((it, i) =>

{it.day}

{it.label}

{it.time}

)}

); } return null; } function ClassicHero({ heroExtra = "sermon", isLive = null }) { const c = window.CHURCH; const tw = c.thisWeek; // 주간 예배 스케줄 — 시작 시간 기준 (끝 시간 없음, YouTube API가 종료 감지) const HERO_SERVICES = [ { day: 0, start: 11*60, name: "주일 2부 예배", time: "11:00am" }, { day: 1, start: 5*60+30, name: "아침예배", time: "05:30am" }, { day: 2, start: 5*60+30, name: "아침예배", time: "05:30am" }, { day: 3, start: 5*60+30, name: "아침예배", time: "05:30am" }, { day: 3, start: 10*60+30, name: "수요예배", time: "10:30am" }, { day: 4, start: 5*60+30, name: "아침예배", time: "05:30am" }, { day: 5, start: 5*60+30, name: "아침예배", time: "05:30am" }, ]; // 현재 시간 기준으로 예배 이름 판별 (YouTube API가 live라고 할 때 이름 표시용) const getCurrentServiceName = () => { const now = new Date(); const day = now.getDay(); const hm = now.getHours() * 60 + now.getMinutes(); const candidates = HERO_SERVICES .filter(s => s.day === day && hm >= s.start && hm < s.start + 3*60) .sort((a, b) => b.start - a.start); return candidates[0] || null; }; // 다음 예배 계산 const getNextService = () => { const now = new Date(); const today = now.getDay(); const nowHM = now.getHours() * 60 + now.getMinutes(); for (let d = 0; d <= 7; d++) { const targetDay = (today + d) % 7; const dayServices = HERO_SERVICES .filter(s => s.day === targetDay) .sort((a, b) => a.start - b.start); for (const svc of dayServices) { if (d === 0 && nowHM >= svc.start) continue; return svc; } } return HERO_SERVICES[0]; }; const [nextService, setNextService] = React.useState(getNextService); React.useEffect(() => { const t = setInterval(() => setNextService(getNextService()), 60000); return () => clearInterval(t); }, []); const liveServiceInfo = isLive ? getCurrentServiceName() : null; return (

{window.getCopy ? window.getCopy("hero.eyebrow") : "SE 2026 · Revival in the Spirit"}

{window.getCopy ? window.getCopy("hero.theme.line1") : "성령으로"}
{window.getCopy ? window.getCopy("hero.theme.line2") : "부흥하라."}

{window.getCopy ? window.getCopy("hero.intro") : "1962년 마포에서 시작된 한국기독교장로회 맑은빛 세광교회는,\n\"주를 알고, 주를 알리며, 주와 함께하는 교회\"라는 사명을 따라\n오늘도 한 자리에서 예배합니다."}

창립

{c.founded}

주일예배

9:30 · 11:00

위치

서울시 마포구 신촌로

{/* 메인 사진 — 교회 외관 실제 사진 (JPEG 압축본, srcset 반응형) */}

{/* 떠있는 카드 스택 — LIVE 카드 + 보조 카드 (heroExtra) */}

{isLive ? (

LIVE 유튜브

{liveServiceInfo ? liveServiceInfo.name : "예배 진행 중"}

그레이스홀 · {liveServiceInfo ? liveServiceInfo.time : ""}

) : (

다음 예배

{nextService ? nextService.name : "주일 2부 예배"}

그레이스홀 · {nextService ? nextService.time : "11:00am"}

)}

); } function ClassicMission() { const c = window.CHURCH; return (

Our Mission

{window.getCopy ? window.getCopy("mission.headline") : "주를 알고,\n주를 알리며,\n주와 함께하는 교회"}

{window.getCopy ? window.getCopy("mission.en") : "To know HIM, to make HIM known, to live with HIM."}

{(function(){ const gc = window.getCopy; return [ { t: gc?gc("mission.card1.t"):"주를 알고", en: gc?gc("mission.card1.en"):"Know", body: gc?gc("mission.card1.body"):"말씀과 예배로 하나님을 알아가는 일에 집중합니다." }, { t: gc?gc("mission.card2.t"):"주를 알리며", en: gc?gc("mission.card2.en"):"Make Known", body: gc?gc("mission.card2.body"):"일상의 자리에서 복음을 살아내고 전합니다." }, { t: gc?gc("mission.card3.t"):"주와 함께", en: gc?gc("mission.card3.en"):"Live With", body: gc?gc("mission.card3.body"):"성령의 임재 안에 매일을 살아갑니다." }, { t: gc?gc("mission.card4.t"):"공동체", en: gc?gc("mission.card4.en"):"Together", body: gc?gc("mission.card4.body"):"온 세대가 한자리에서 예배하는 교회입니다." }, ]; })().map((x, i) =>

{x.en}

{x.t}

{x.body}

)}

); } function ClassicAbout() { const c = window.CHURCH; const [historyData, setHistoryData] = React.useState(() => (window.CHURCH && window.CHURCH.history) || []); React.useEffect(() => { const onUpdated = () => { if (window.CHURCH && window.CHURCH.history) setHistoryData([...window.CHURCH.history]); }; window.addEventListener('hlc-history-updated', onUpdated); return () => window.removeEventListener('hlc-history-updated', onUpdated); }, []); const HISTORY_COLS = 6; const _futureCol = historyData.length % HISTORY_COLS === 0 ? 1 : historyData.length % HISTORY_COLS + 1; return (

{/* 담임목사 정보 — 사진 위 */}

담임목사

{c.pastor.name} {c.pastor.title}

{/* 담임목사 사진 — 배경 투명 PNG, 사이즈 축소, 담임목사 시무 아래 작은 간격 */}

{window.getCopy ? window.getCopy("about.rightEyebrow") : "맑은빛세광교회는"}

{window.getCopy ? (<> {window.getCopy("about.headline").split("\n").reduce((a,l,i)=>[...a,i?
:null,l],[])} {(window.getCopy("about.headlineMobile")||window.getCopy("about.headline")).split("\n").reduce((a,l,i)=>[...a,i?
:null,l],[])} ) : 세상의 어둠을 복음의 빛으로 밝히고,
세상의 아픔을 치유의 빛으로 맑힙니다.세상의 어둠을 복음의 빛으로
밝히고,
세상의 아픔을 치유의 빛으로
맑힙니다.}

{window.getCopy ? window.getCopy("about.body1") : 맑은빛 세광교회는 세상을 밝히는 복음의 빛, 세상을 치유하여 맑히는 성령의 빛을 가득 품은 교회입니다. 예수 그리스도를 구주로 고백하며, 복음적 메시지로 은혜로운 예배를 중심에 두는 복음적 교회입니다.}

{window.getCopy ? window.getCopy("about.body2") : 지역 구청과 협업하여 독거 어르신들을 위한 효도밥상을 운영하며 이웃을 섬기는 선교적 교회입니다.}

{window.getCopy ? window.getCopy("about.body3") : 어른부터 아이들까지 모두 함께 모여 예배하는 온세대 예배 공동체를 추구합니다. 동네 이웃과 협력하고, 지역 아동을 위한 공부방으로 개방하고, 온세대가 다음 시대를 향해 함께 나아가는 신나는 교회입니다.}

{window.getCopy ? window.getCopy("about.tagline") : "당신 곁에, 신촌 맑은빛세광교회입니다."}

{window.getCopy ? window.getCopy("about.signature") : "— 신촌 맑은빛세광교회에서 박병규 목사 드림"}

{/* 연혁 */}

{historyData.map((h, i) =>

{h.year}

{h.label}

{h.text}

)} {/* FUTURE AND BEYOND — 3열~끝까지, 모바일은 1칸 */}

{/* 연도 라벨 높이 맞춤용 투명 스페이서 */}

0000

{/* 텍스트 — 지역선교보다 약간 작게 */}

FUTURE AND BEYOND

{/* 애니메이션 점선 — 행 끝까지 가득 (미래로 이어지는 의미) */}

{/* 글로우 레이어 */}

{/* 선명한 중심 레이어 */}

); } function ClassicWorship() { const c = window.CHURCH; return (

이번 주에도 함께
예배합니다} en="Weekly Worship Services" />

{(function(){ const gc = window.getCopy; let svcs = c.services; try { if(gc && gc("worship.services")) svcs = JSON.parse(gc("worship.services")); } catch(e){} return svcs; })().map((s, i) =>

{s.dot === "mint" ? "교회학교·청년" : "온세대 예배"}

{s.name}

{s.time}

{s.place}

)}

{/* 부서 / 공동체 */}

{window.getCopy ? window.getCopy("worship.community.title") : "세대별 공동체"}

{(function(){ const gc = window.getCopy; let coms = c.communities; try { if(gc && gc("worship.communities")) coms = JSON.parse(gc("worship.communities")); } catch(e){} return coms; })().map((co, i) =>

{co.name}

{co.desc}

{co.age}

)}

); } function ClassicThisWeek({ isLive = null, weeklyVer = 0 }) { const c = window.CHURCH; const [localVer, setLocalVer] = React.useState(0); React.useEffect(() => { const handler = () => setLocalVer(v => v + 1); window.addEventListener('hlc-weekly-updated', handler); return () => window.removeEventListener('hlc-weekly-updated', handler); }, []); // window.CHURCH.thisWeek.scriptureText 폴링 — app.jsx가 채워주면 즉시 반영 const [scriptureText, setScriptureText] = React.useState(c.thisWeek.scriptureText || ''); const [scriptureExpanded, setScriptureExpanded] = React.useState(false); React.useEffect(() => { if (c.thisWeek.scriptureText) { setScriptureText(c.thisWeek.scriptureText); return; } let attempts = 0; const timer = setInterval(() => { attempts++; const st = c.thisWeek.scriptureText; if (st) { setScriptureText(st); clearInterval(timer); return; } if (attempts >= 24) clearInterval(timer); // 12초 후 중단 }, 500); return () => clearInterval(timer); }, []); const tw = { ...c.thisWeek, scriptureText }; return (

{/* 설교 카드 */}

이번 주 설교

{tw.scripture} · {tw.preacher}

‘{tw.sermonTitle}’

{tw.sermonTitleEn}

{(tw.scriptureText || tw.scripture) && (

새번역

{tw.scriptureText ?

{tw.scripture} 본문은 관리자 → 주보 업로드 후 자동 적용됩니다.

}

)}

{/* 옆 칼럼 */}

주요 소식

{tw.notices.map((n, i) =>

{n.tag}

{n.title}

{n.body}

)}

); } function ClassicMedia({ isLive = null }) { const c = window.CHURCH; const tw = (window.CHURCH && window.CHURCH.thisWeek) || {}; // isLive가 null이면(API 미응답/에러) 시간 기반으로 보완 — liveStatus가 null이 되지 않도록 const _now = new Date(), _day = _now.getDay(), _tot = _now.getHours()*60+_now.getMinutes(); const _tLive = (_day>=1&&_day<=5&&_tot>=315&&_tot<420)||(_day===3&&_tot>=615&&_tot<720)||(_day===0&&_tot>=650&&_tot<750); const liveStatus = isLive !== null ? isLive : _tLive; return (

유튜브에서 함께
예배합니다} en={"@" + c.youtube + " · YouTube"} />

지난 예배 다시보기

); } // ───────────────────────────────────────────────────────── // 홈페이지용 PDF.js 뷰어 (community-content.jsx의 BulletinViewerModal 재사용 가능하지만 // 독립적으로 inline 정의하여 별도 스크립트 의존성 없애기) // ───────────────────────────────────────────────────────── async function _classicLoadPdfJs() { if (window.pdfjsLib) return window.pdfjsLib; return new Promise((resolve, reject) => { const s = document.createElement("script"); s.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"; s.onload = () => { // cross-origin Worker 차단 우회: blob URL로 importScripts 사용 const _wSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js"; window.pdfjsLib.GlobalWorkerOptions.workerSrc = URL.createObjectURL( new Blob([`importScripts("${_wSrc}")`], { type: "text/javascript" }) ); resolve(window.pdfjsLib); }; s.onerror = reject; document.head.appendChild(s); }); } function ClassicBulletinModal({ title, pdfUrl, downloadUrl, onClose }) { const [pages, setPages] = React.useState([]); const [pg, setPg] = React.useState(1); const [loading, setLoading] = React.useState(true); const [useIframe, setUseIframe] = React.useState(false); const [scale, setScale] = React.useState(1.0); const [horizMode, setHorizMode] = React.useState(() => window.matchMedia("(pointer: coarse)").matches); const scaleRef = React.useRef(1.0); const areaRef = React.useRef(null); const horizRef = React.useRef(null); const pinchRef = React.useRef({ dist: 0, baseScale: 1 }); const touchRef = React.useRef(null); React.useEffect(() => { scaleRef.current = scale; }, [scale]); // ── PDF 로딩 ────────────────────────────────────────────────── React.useEffect(() => { let cancelled = false; async function load() { if (pdfUrl.includes("firebasestorage")) { if (!cancelled) { setUseIframe(true); setLoading(false); } return; } // Drive view URL은 CORS 차단 → Google Drive API v3 직접 다운로드 사용 const _driveFid = (() => { const m = pdfUrl.match(/\/d\/([^/]+)\//); return m ? m[1] : null; })(); const loadUrl = (pdfUrl.includes("drive.google.com") && _driveFid) ? `https://www.googleapis.com/drive/v3/files/${_driveFid}?alt=media&key=AIzaSyDfuBNn6MvdBAH_X19DxTi5Rvnt8K_tC4M` : pdfUrl; try { const pdfjs = await _classicLoadPdfJs(); const pdf = await pdfjs.getDocument({ url: loadUrl, withCredentials: false }).promise; if (cancelled) return; const imgs = []; for (let i = 1; i <= pdf.numPages; i++) { const page = await pdf.getPage(i); const vp = page.getViewport({ scale: 1.2 }); const canvas = document.createElement("canvas"); canvas.width = vp.width; canvas.height = vp.height; await page.render({ canvasContext: canvas.getContext("2d"), viewport: vp }).promise; imgs.push(canvas.toDataURL("image/jpeg", 0.88)); if (!cancelled) { setPages([...imgs]); if (i === 1) setLoading(false); // 1페이지 완료 즉시 표시 } } if (!cancelled) setPages(imgs); } catch(e) { if (!cancelled) { setUseIframe(true); setLoading(false); } } } load(); return () => { cancelled = true; }; }, [pdfUrl]); // ── 키보드 단축키 ───────────────────────────────────────────── React.useEffect(() => { const h = (e) => { if (e.key === "Escape") onClose(); if ((e.key === "ArrowRight" || e.key === "ArrowDown") && pages.length > 1) goPage(p => Math.min(pages.length, p+1)); if ((e.key === "ArrowLeft" || e.key === "ArrowUp") && pages.length > 1) goPage(p => Math.max(1, p-1)); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, [onClose, pages.length]); // ── 페이지 이동 (가로 모드 스크롤 동기화 포함) ─────────────── const goPage = (updater) => { setPg(prev => { const next = typeof updater === "function" ? updater(prev) : updater; if (horizRef.current) { horizRef.current.scrollTo({ left: (next - 1) * horizRef.current.offsetWidth, behavior: "smooth" }); } return next; }); }; // ── 가로 스크롤 → 인디케이터 동기화 ───────────────────────── React.useEffect(() => { const el = horizRef.current; if (!el) return; let t; const onScroll = () => { clearTimeout(t); t = setTimeout(() => { const idx = Math.round(el.scrollLeft / Math.max(el.offsetWidth, 1)); setPg(idx + 1); }, 80); }; el.addEventListener("scroll", onScroll, { passive: true }); return () => { el.removeEventListener("scroll", onScroll); clearTimeout(t); }; }, [horizMode, pages.length]); // ── 마우스 휠 줌 (세로 / PC) ───────────────────────────────── React.useEffect(() => { const el = areaRef.current; if (!el || loading || useIframe || horizMode) return; const h = (e) => { e.preventDefault(); setScale(s => Math.min(Math.max(s - e.deltaY * 0.003, 0.25), 4.0)); }; el.addEventListener("wheel", h, { passive: false }); return () => el.removeEventListener("wheel", h); }, [loading, useIframe, horizMode]); // ── 터치 핀치줌 + 패닝 (세로 모드 전용) ──────────────────── React.useEffect(() => { const el = areaRef.current; if (!el || loading || useIframe || horizMode) return; const onTS = (e) => { if (e.touches.length === 2) { const dx = e.touches[0].clientX - e.touches[1].clientX; const dy = e.touches[0].clientY - e.touches[1].clientY; pinchRef.current = { dist: Math.hypot(dx, dy), baseScale: scaleRef.current }; } else if (e.touches.length === 1) { touchRef.current = { y: e.touches[0].clientY, x: e.touches[0].clientX, scrollTop: el.scrollTop, scrollLeft: el.scrollLeft }; } }; const onTM = (e) => { if (e.touches.length === 2) { e.preventDefault(); const dx = e.touches[0].clientX - e.touches[1].clientX; const dy = e.touches[0].clientY - e.touches[1].clientY; const ratio = Math.hypot(dx, dy) / (pinchRef.current.dist || 1); setScale(Math.min(Math.max(pinchRef.current.baseScale * ratio, 0.25), 4.0)); } else if (e.touches.length === 1 && touchRef.current) { el.scrollTop = touchRef.current.scrollTop + (touchRef.current.y - e.touches[0].clientY); el.scrollLeft = touchRef.current.scrollLeft + (touchRef.current.x - e.touches[0].clientX); } }; el.addEventListener("touchstart", onTS, { passive: true }); el.addEventListener("touchmove", onTM, { passive: false }); return () => { el.removeEventListener("touchstart", onTS); el.removeEventListener("touchmove", onTM); }; }, [loading, useIframe, horizMode]); const iframeUrl = pdfUrl.includes("firebasestorage") ? pdfUrl : pdfUrl.includes("drive.google.com") ? (() => { const m = pdfUrl.match(/\/d\/([^/]+)\//); return m ? `https://drive.google.com/file/d/${m[1]}/preview` : `https://docs.google.com/viewer?url=${encodeURIComponent(pdfUrl)}&embedded=true`; })() : `https://docs.google.com/viewer?url=${encodeURIComponent(pdfUrl)}&embedded=true`; const useHorizMode = horizMode && !useIframe && !loading && pages.length > 0; const modalEl = (

{/* ── 상단 헤더 ── */}

e.stopPropagation()}> {title}

{!useIframe && !loading && pages.length > 0 && ( <> {pg} / {pages.length}{!horizMode ? ` · ${Math.round(scale*100)}%` : ""} )} {downloadUrl && ( )}

{/* ── 콘텐츠 ── */}

e.stopPropagation()}> {loading && (

📄

주보를 불러오는 중…

)} {!loading && useIframe && (

상세 동선 안내

{window.getCopy ? window.getCopy("hero.theme.line1") : "성령으로"} {window.getCopy ? window.getCopy("hero.theme.line2") : "부흥하라."}

{window.getCopy ? window.getCopy("mission.headline") : "주를 알고,\n주를 알리며,\n주와 함께하는 교회"}

{c.pastor.name} {c.pastor.title}

{window.getCopy ? window.getCopy("worship.community.title") : "세대별 공동체"}

‘{tw.sermonTitle}’

지난 예배 다시보기

{window.getCopy ? window.getCopy("hero.theme.line1") : "성령으로"}
{window.getCopy ? window.getCopy("hero.theme.line2") : "부흥하라."}