{status !== "ready" && (

{status === "loading" ? (

지도 불러오는 중…

) : (

지도를 불러올 수 없습니다

서울 마포구 신촌로26길 11
맑은빛 세광교회

🗺 카카오맵에서 보기 )}

)}

); } // 인라인 svg 십자가 모티프 배경 (장식용) function CrossPattern({ color = "currentColor", opacity = 0.06 }) { return ( ); } // 사진 자리 — 변형(variant) 별로 스타일 변화 function PhotoSlot({ label, ratio = "4/3", mode = "stripe", className = "", style = {}, accent = "primary" }) { // mode: stripe | gradient | mono | graphic const baseStyle = { aspectRatio: ratio, position: "relative", borderRadius: 4, overflow: "hidden", color: "rgba(255,255,255,0.92)", fontFamily: "ui-monospace, monospace", fontSize: 12, display: "flex", alignItems: "flex-end", padding: 14, ...style }; if (mode === "stripe") { return (

[ {label} ]

); } if (mode === "gradient") { const grad = accent === "mint" ? "linear-gradient(135deg, #b6dedb 0%, #7fc1be 40%, #3d5d8c 100%)" : "linear-gradient(135deg, #6c8ab8 0%, #3d5d8c 60%, #1a2238 100%)"; return (

{label}

); } if (mode === "mono") { return (

{label}

); } if (mode === "graphic") { return (

{label}

); } return null; } // 섹션 헤더 (장식적 변형 가능) function SectionTitle({ eyebrow, title, en, align = "left", style = {} }) { return (

{eyebrow &&

{eyebrow}

}

{title}

{en &&

{en}

}

); } // 유튜브 API 설정 const YT_API_KEY = "AIzaSyB-1a3M7960mnKTuZekDYGDBql-h0_McVM"; const YT_CHANNEL_ID = "UC3MZB8Efn04qMdPLFb4_lxg"; const YT_PLAYLIST = { sunday: "PL_Cy6o-44syAQC6P3moBd-OF7XpTSOuYt", // 주일예배설교 morning: "PL_Cy6o-44syDe5i5zPU-2Z5gLQrVLNnKp", // 아침예배 wednesday: "PL_Cy6o-44syCgIzInp41noLRV9lTRqTZZ" // 수요예배 }; // 채널에서 키워드로 영상 검색 function useYTSearch(keyword, maxResults = 1) { const [videos, setVideos] = useState([]); useEffect(() => { fetch(`https://www.googleapis.com/youtube/v3/search?key=${YT_API_KEY}&channelId=${YT_CHANNEL_ID}&part=snippet&order=date&maxResults=${maxResults}&type=video&q=${encodeURIComponent(keyword)}`) .then(r => r.json()) .then(data => { if (data.items) { setVideos(data.items.map(item => ({ id: item.id.videoId, title: item.snippet.title, thumb: item.snippet.thumbnails?.medium?.url || "", date: (() => { const t = item.snippet.title || ""; const m = t.match(/(\d{4})[.]?(\d{1,2})[.]?(\d{1,2})/); if (m) return `${m[1]}-${m[2].padStart(2,'0')}-${m[3].padStart(2,'0')}`; return item.snippet.publishedAt?.slice(0, 10) || ""; })() }))); } }) .catch(() => {}); }, [keyword]); return videos; } // 재생목록에서 최신 영상 가져오기 // 모듈 레벨 캐시: 동일 요청 중복 방지 (rate limit 우회) const _ytPlCache = {}; const _ytPlPending = {}; function usYTPlaylist(playlistId, maxResults = 1) { const [videos, setVideos] = useState([]); useEffect(() => { if (!playlistId) return; const cacheKey = `${playlistId}__${Math.max(maxResults * 3, 10)}`; // 이미 캐시된 결과가 있으면 바로 사용 if (_ytPlCache[cacheKey]) { setVideos(_ytPlCache[cacheKey].slice(0, maxResults)); return; } // 이미 진행 중인 요청이 있으면 완료 후 결과 공유 if (_ytPlPending[cacheKey]) { _ytPlPending[cacheKey].then(sorted => setVideos(sorted.slice(0, maxResults))).catch(() => {}); return; } const fetchCount = Math.min(Math.max(maxResults * 3, 10), 50); const promise = fetch(`https://www.googleapis.com/youtube/v3/playlistItems?key=${YT_API_KEY}&playlistId=${playlistId}&part=snippet&maxResults=${fetchCount}`) .then(r => r.json()) .then(data => { if (!data.items) return []; const sorted = data.items .map(item => ({ id: item.snippet.resourceId?.videoId, title: item.snippet.title, thumb: item.snippet.thumbnails?.medium?.url || "", date: (() => { const t = item.snippet.title || ""; const m = t.match(/(\d{4})\.( ?\d{1,2})\.(\d{1,2})/) || t.match(/(\d{4})[.]?(\d{1,2})[.]?(\d{1,2})/); if (m) { const y=m[1], mo=(m[2]||'').trim(), d=(m[3]||'').trim(); if(parseInt(mo)>=1&&parseInt(mo)<=12) return `${y}-${mo.padStart(2,'0')}-${d.padStart(2,'0')}`; } return "1970-01-01"; })() })) .filter(v => v.id && v.title !== "Private video" && v.title !== "Deleted video" && v.date > "2000-01-01") .sort((a, b) => b.date.localeCompare(a.date)); _ytPlCache[cacheKey] = sorted; delete _ytPlPending[cacheKey]; return sorted; }) .catch(() => { delete _ytPlPending[cacheKey]; return []; }); _ytPlPending[cacheKey] = promise; promise.then(sorted => setVideos(sorted.slice(0, maxResults))).catch(() => {}); }, [playlistId]); return videos; } // 유튜브 카드 - 용도별 분기 function YouTubeCard({ subtitle = "맑은빛세광교회 채널", live = false, title = "이번 주 예배 다시보기", mode = "sunday", playable = false, liveStatus = null, sermonTitle = null, scripture = null }) { // mode: "sunday" = 채널 업로드 전체에서 주일/온세대 키워드 최신 1개 자동 선택 // playable = true 이면 재생버튼 클릭시 창내 iframe 재생 + YouTube 링크 버튼 제공 // liveStatus: true=실시간, false=비실시간, null=메시지 없음 const UPLOADS_PL = "UU" + YT_CHANNEL_ID.replace(/^UC/, ""); const allVideos = usYTPlaylist(UPLOADS_PL, mode === "sunday" ? 25 : 15); const SUNDAY_KW = /주일|온세대|Sunday/i; const videos = mode === "sunday" ? allVideos.filter(v => SUNDAY_KW.test(v.title)) : allVideos; const video = videos[0] || null; const href = video ? `https://www.youtube.com/watch?v=${video.id}` : `https://www.youtube.com/@heallight_church`; // 하단 정보 표시용 파싱 (영상 제목에서 날짜·설교·성구 추출) const _parsed = video ? parseVideoTitle(video.title) : null; // subtitle이 관리자 입력 날짜(YYYY-MM-DD)면 표시용으로 변환, 없으면 영상 제목 파싱값 사용 const _fmtAdminDate = (d) => { if (!d || d === "맑은빛세광교회 채널") return ""; const _m = d.match(/^(\d{4})-(\d{2})-(\d{2})$/); return _m ? _m[1] + "." + parseInt(_m[2]) + "." + parseInt(_m[3]) : d; }; const _displayDate = _fmtAdminDate(subtitle) || (_parsed ? _parsed.date : ""); const _displaySermon = sermonTitle || (_parsed ? _parsed.sermonTitle : ""); const _scriptureFromTitle = video ? ((video.title.match(/([가-힣]+\s*\d+[장:]\d+(?:[-\d]*)?)/)||[])[1]||"") : ""; const _displayScripture = scripture || _scriptureFromTitle; const _worshipType = video ? ((video.title.match(/(새벽예배|아침예배|수요예배|주일예배|주일\d?부예배|저녁예배|특별예배|부흥회|금요예배|목요예배|추모예배|성탄예배|부활절예배)/) || [])[1] || "") : ""; const [playing, setPlaying] = useState(false); const [lockedSrc, setLockedSrc] = useState(null); // playable 모드 — 스크롤 이탈 시 재생 중단 const playerRef = useRef(null); useEffect(() => { if (!playing || !playerRef.current) return; const obs = new IntersectionObserver( ([entry]) => { if (!entry.isIntersecting) { setPlaying(false); setLockedSrc(null); } }, { threshold: 0.15 } ); obs.observe(playerRef.current); return () => obs.disconnect(); }, [playing]); // playable 모드 — 클릭 즉시 iframe 재생 (API 대기 없음) if (playable && playing && lockedSrc) { return (