援먰쉶 李ъ뼇 肄섑떚 鍮뚮뜑 & ?낅낫 ?섏쭛湲?/title> <meta name="description" id="metaDescription" content="援먰쉶 李ъ뼇 肄섑떚瑜?留뚮뱾怨???먭낵 怨듭쑀?섏꽭??" /> <meta property="og:type" content="website" /> <meta property="og:title" id="metaOgTitle" content="?솋 李ъ뼇 ?쒖꽌 諛??곸긽 留곹겕 怨듭쑀" /> <meta property="og:description" id="metaOgDescription" content="留곹겕瑜??대┃?댁꽌 李ъ뼇 ?낅낫? ?곸긽???뺤씤?대낫?몄슂." /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" id="metaTwitterTitle" content="援먰쉶 李ъ뼇 肄섑떚 鍮뚮뜑 & ?낅낫 ?섏쭛湲? /> <meta name="twitter:description" id="metaTwitterDescription" content="援먰쉶 李ъ뼇 肄섑떚瑜?留뚮뱾怨???먭낵 怨듭쑀?섏꽭??" /> <script> (function () { try { var params = new URLSearchParams(location.search); if (!params.get('id')) return; var title = '?솋 李ъ뼇 ?쒖꽌 諛??곸긽 留곹겕 怨듭쑀'; var desc = '留곹겕瑜??대┃?댁꽌 李ъ뼇 ?낅낫? ?곸긽???뺤씤?대낫?몄슂.'; document.title = title; function setMeta(sel, value) { var el = document.querySelector(sel); if (el) el.setAttribute('content', value); } setMeta('#metaDescription', desc); setMeta('#metaOgTitle', title); setMeta('#metaOgDescription', desc); setMeta('#metaTwitterTitle', title); setMeta('#metaTwitterDescription', desc); } catch (_) {} })(); </script> <script> (function () { if (!window.__VIEWER_MODE) return; var PROJECT_ID = 'conti-75953'; var API_KEY = 'AIzaSyDXdKfOC2WJlgstDnQkNVzZCDY0j1pbVNc'; function parseVal(v) { if (!v || typeof v !== 'object') return null; if ('stringValue' in v) return v.stringValue; if ('booleanValue' in v) return v.booleanValue; if ('integerValue' in v) return Number(v.integerValue); if ('doubleValue' in v) return v.doubleValue; if ('nullValue' in v) return null; if ('arrayValue' in v) return (v.arrayValue.values || []).map(parseVal); if ('mapValue' in v) { var out = {}; Object.keys(v.mapValue.fields || {}).forEach(function (k) { out[k] = parseVal(v.mapValue.fields[k]); }); return out; } return null; } var shareId = ''; try { shareId = (new URLSearchParams(location.search).get('id') || '').trim(); } catch (_) {} if (!shareId) return; window.__VIEWER_PREFETCH_PROMISE = fetch( 'https://firestore.googleapis.com/v1/projects/' + PROJECT_ID + '/databases/(default)/documents/shared_contis/' + encodeURIComponent(shareId) + '?key=' + encodeURIComponent(API_KEY) ).then(function (res) { if (!res.ok) throw new Error('HTTP ' + res.status); return res.json(); }).then(function (doc) { var data = {}; Object.keys(doc.fields || {}).forEach(function (k) { data[k] = parseVal(doc.fields[k]); }); return data; }).catch(function (err) { console.warn('viewer prefetch failed', err); return null; }); function onReady(fn) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', fn, { once: true }); } else { fn(); } } onReady(function () { var sv = document.getElementById('shareView'); if (sv) { sv.classList.remove('hidden'); sv.style.display = 'flex'; sv.style.flexDirection = 'column'; } }); })(); </script> <script> (function () { if (window.__VIEWER_MODE) return; var KEY = 'worshipConti_authRedirectPending'; var PREF = 'worshipConti_preferRedirectLogin'; var AT = 'worshipConti_authRedirectPendingAt'; try { sessionStorage.removeItem(KEY); sessionStorage.removeItem(AT); if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') { sessionStorage.removeItem(PREF); } } catch (_) {} })(); </script> <script src="https://cdn.tailwindcss.com"></script> <link rel="preconnect" href="https://cdn.jsdelivr.net" /> <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet" /> <style> html, body { height: 100%; margin: 0; overflow: hidden; font-family: Pretendard, system-ui, sans-serif; } .chip.active { background: #2563eb; color: #fff; border-color: #2563eb; } .fade-in { animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .scrollbar-thin::-webkit-scrollbar { width: 5px; height: 5px; } .scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .score-url-hint { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid #e2e8f0; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); display: flex; flex-direction: column; gap: 6px; text-align: left; } .score-url-hint p { margin: 0; font-size: 11px; line-height: 1.55; color: #64748b; word-break: keep-all; } .score-url-hint-title { color: #475569; font-weight: 500; } .score-url-hint strong { color: #334155; font-weight: 600; } .score-url-hint-note { color: #94a3b8; font-size: 10.5px; } .soft-hint { margin-top: 8px; padding: 10px 12px; border-radius: 10px; font-size: 11px; line-height: 1.55; text-align: left; word-break: keep-all; } .soft-hint-video { border: 1px solid #fecdd3; background: linear-gradient(180deg, #fff5f5 0%, #fff1f2 100%); color: #9f1239; } .soft-hint-share { border: 1px solid #bfdbfe; background: linear-gradient(180deg, #eff6ff 0%, #f0f9ff 100%); color: #1e40af; } .conti-sidebar-actions { background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); } .conti-right-tabs { display: flex; background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0 8px; } .conti-right-tab { flex: 1; padding: 10px 6px; font-size: 11px; font-weight: 600; color: #64748b; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .conti-right-tab:hover { color: #334155; } .conti-right-tab.active { color: #1d4ed8; border-bottom-color: #2563eb; } .conti-tab-panel { display: none; flex: 1; min-height: 0; flex-direction: column; } .conti-tab-panel.is-active { display: flex; } #contiTabPanelMemo.is-active { display: block; overflow-y: auto; } .conti-worship-input { font-size: 13px; font-weight: 600; } .print-conti-cover { box-sizing: border-box; padding: 40px 36px 32px; background: #fff; page-break-after: always !important; break-after: page !important; } .print-conti-cover h1 { margin: 0 0 12px; font-size: 22pt; font-weight: 800; color: #0f172a; line-height: 1.35; } .print-conti-cover .print-conti-subtitle { margin: 0 0 16px; font-size: 13pt; font-weight: 600; color: #475569; } .print-conti-cover .print-conti-memo { margin: 0; font-size: 11pt; color: #64748b; line-height: 1.6; white-space: pre-wrap; } #shareViewMemo { white-space: pre-wrap; } .theme-option.selected { background: #eff6ff; } .theme-option.selected .theme-check { opacity: 1; color: #2563eb; } #themePickerTrigger:hover #themePlaceholder, #themePickerTrigger:focus-within #themePlaceholder { display: none; } .left-tab-btn { transition: color 0.15s, background 0.15s, box-shadow 0.15s; } .left-tab-btn.active { background: #fff; color: #1d4ed8; box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); } .left-panel { transition: opacity 0.2s ease; } .left-panel.is-hidden { display: none !important; } body.share-mode, body.viewer-mode { overflow: auto; } body.share-mode #appShell, body.viewer-mode #appShell { display: none !important; } body.share-mode #shareView, body.viewer-mode #shareView { display: flex !important; } body.share-mode #toast, body.viewer-mode #toast { display: none !important; } .share-card { border-radius: 18px; border: 1px solid #e8edf5; background: #fff; padding: 20px; box-shadow: 0 2px 12px rgb(30 27 75 / 0.04); transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease; position: relative; overflow: hidden; } .share-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 100%); border-radius: 18px 0 0 18px; } .share-card:hover, .share-card:active, .share-card:focus-within { border-color: #c7d2fe; box-shadow: 0 8px 28px rgb(79 70 229 / 0.14), 0 0 0 1px rgb(124 58 237 / 0.08), 0 0 24px rgb(99 102 241 / 0.12); transform: translateY(-1px); } .share-card-top { display: flex; align-items: flex-start; gap: 14px; } .share-card-badge { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgb(79 70 229 / 0.32); } .share-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.15s, transform 0.12s, box-shadow 0.15s; } .share-action-btn:active { transform: scale(0.98); } .share-action-btn-score { background: linear-gradient(135deg, #059669 0%, #047857 100%); color: #fff; border: none; box-shadow: 0 2px 8px rgb(5 150 105 / 0.25); } .share-action-btn-score:hover { background: linear-gradient(135deg, #047857 0%, #065f46 100%); } .share-action-btn-video { background: #fff; color: #1e293b; border: 1px solid #e2e8f0; } .share-action-btn-video:hover { background: #f8fafc; border-color: #cbd5e1; } .share-action-btn-disabled { background: #f8fafc; color: #94a3b8; border: 1px dashed #cbd5e1; cursor: not-allowed; grid-column: 1 / -1; } .share-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #f1f5f9; } .share-header-actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; } .share-view-page { position: relative; isolation: isolate; background: linear-gradient(180deg, #eef2f9 0%, #f4f6fb 48%, #eef1f8 100%); } .share-view-page::before, .share-view-page::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.18; pointer-events: none; z-index: 0; } .share-view-page::before { width: min(320px, 65vw); height: min(320px, 65vw); background: #6366f1; top: -80px; right: -60px; } .share-view-page::after { width: min(260px, 50vw); height: min(260px, 50vw); background: #7c3aed; bottom: 10%; left: -50px; } .share-view-scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; justify-content: center; align-items: flex-start; position: relative; z-index: 1; } @media (min-width: 640px) { .share-view-scroll { padding: 28px 20px 36px; } } .share-view-panel { width: 100%; max-width: 28rem; border-radius: 20px; overflow: hidden; border: 1px solid #e2e8f4; background: #fff; box-shadow: 0 16px 48px rgb(30 27 75 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.8) inset; } @media (min-width: 640px) { .share-view-panel { max-width: 32rem; } } .share-view-head { padding: 20px 20px 18px; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; } .share-view-head-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .share-view-head-tag { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255 255 255 / 0.82); } .share-view-head-desc { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / 0.88); } .share-view-head-preview { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.22); backdrop-filter: blur(10px); } .share-view-head-icon { width: 44px; height: 44px; border-radius: 14px; background: rgb(255 255 255 / 0.22); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } #shareViewWorshipInfo { margin: 0; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.3; } #shareViewMeta { margin: 4px 0 0; font-size: 13px; color: rgb(255 255 255 / 0.88); font-weight: 500; line-height: 1.45; } .share-view-head-memo { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: rgb(255 255 255 / 0.92); padding: 11px 13px; border-radius: 12px; background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.16); } .share-view-head .btn-share-dark-toggle, .share-view-head #btnExitShareView { background: rgb(255 255 255 / 0.14) !important; border-color: rgb(255 255 255 / 0.28) !important; color: #fff !important; box-shadow: none !important; } .share-view-head .btn-share-dark-toggle:hover, .share-view-head #btnExitShareView:hover { background: rgb(255 255 255 / 0.24) !important; } .share-view-body { padding: 18px 20px 20px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } .share-view-section-label { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: linear-gradient(90deg, #4f46e5, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; } .share-view-songs { display: flex; flex-direction: column; gap: 12px; } .share-view-foot { padding: 13px 20px; text-align: center; font-size: 11px; font-weight: 600; color: #4338ca; line-height: 1.5; background: linear-gradient(135deg, #eef2ff 0%, #f3e8ff 100%); border-top: 1px solid #e0e7ff; } .share-view-empty { padding: 2.5rem 1rem; text-align: center; color: #475569; font-size: 14px; line-height: 1.6; } .btn-share-dark-toggle { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, transform 0.12s; } .btn-share-dark-toggle:hover { background: #f8fafc; border-color: #cbd5e1; } .btn-share-dark-toggle:active { transform: scale(0.96); } #btnExitShareView { border-radius: 12px !important; font-weight: 600 !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); } .share-card-title { margin: 2px 0 0; color: #312e81; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; } .share-card-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .share-card-memo { color: #475569; font-size: 13px; margin-top: 8px; line-height: 1.5; } .share-song-form { font-size: 12px; font-weight: 600; color: #5b21b6; margin-top: 6px; display: inline-block; padding: 4px 10px; border-radius: 999px; background: #f3e8ff; border: 1px solid #e9d5ff; } .share-chip-key { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #dbeafe; border: 1px solid #bfdbfe; color: #1e40af; } .share-chip-tempo { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #ede9fe; border: 1px solid #ddd6fe; color: #6d28d9; } .share-card-meta .inline-flex { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid #e9d5ff; background: #faf5ff; color: #7c3aed; } html.viewer-mode #shareView, body.share-mode #shareView, body.viewer-mode #shareView { background: linear-gradient(180deg, #eef2f9 0%, #f4f6fb 48%, #eef1f8 100%); } .share-view-loading { max-width: 42rem; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; color: #475569; font-size: 14px; } .share-view-loading::before { content: ''; display: block; width: 36px; height: 36px; margin: 0 auto 14px; border: 3px solid #e2e8f4; border-top-color: #4f46e5; border-radius: 50%; animation: share-spin 0.8s linear infinite; } @keyframes share-spin { to { transform: rotate(360deg); } } /* Share link modal */ .share-modal-panel { max-width: 28rem; padding: 0; overflow: hidden; border: 1px solid rgb(226 232 240 / 0.9); box-shadow: 0 24px 64px rgb(15 23 42 / 0.18); } .share-modal-head { padding: 22px 22px 18px; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; } .share-modal-head h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin: 0; } .share-modal-head p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / 0.88); } .share-modal-body { padding: 20px 22px 22px; background: #fff; } .share-modal-preview { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; margin-bottom: 14px; } .share-modal-preview-icon { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #eef2ff, #f3e8ff); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .share-modal-preview-title { font-size: 14px; font-weight: 700; color: #312e81; line-height: 1.3; } .share-modal-preview-meta { font-size: 12px; color: #64748b; margin-top: 2px; } .share-url-field { display: flex; gap: 8px; align-items: stretch; } .share-url-field input { flex: 1; min-width: 0; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border-radius: 12px; border: 1px solid #e2e8f0; background: #f8fafc; padding: 11px 12px; color: #334155; } .share-url-field input:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px rgb(129 140 248 / 0.2); } .btn-share-copy { flex-shrink: 0; padding: 0 16px; border-radius: 12px; border: none; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform 0.12s, box-shadow 0.15s; box-shadow: 0 4px 14px rgb(79 70 229 / 0.28); } .btn-share-copy:hover { box-shadow: 0 6px 18px rgb(79 70 229 / 0.34); } .btn-share-copy:active { transform: scale(0.97); } .share-modal-foot { display: flex; gap: 8px; margin-top: 14px; } .share-modal-foot .btn-share-close { flex: 1; padding: 11px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 13px; font-weight: 600; cursor: pointer; } .share-modal-foot .btn-share-close:hover { background: #f8fafc; } .share-modal-hint { margin-top: 12px; font-size: 11px; color: #94a3b8; text-align: center; line-height: 1.5; } body.share-mode.share-dark #shareView, html.viewer-mode.share-dark #shareView { background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 50%, #1e1b4b 100%); } body.share-mode.share-dark .share-view-page::before { background: #4f46e5; opacity: 0.22; } body.share-mode.share-dark .share-view-page::after { background: #7c3aed; opacity: 0.16; } body.share-mode.share-dark .share-view-panel { background: #18181b; border-color: #3f3f46; box-shadow: 0 24px 64px rgb(0 0 0 / 0.45); } body.share-mode.share-dark .share-view-head { background: linear-gradient(135deg, #3730a3 0%, #6d28d9 100%); } body.share-mode.share-dark .share-view-body { background: linear-gradient(180deg, #18181b 0%, #1e1b4b 100%); } body.share-mode.share-dark .share-view-section-label { background: linear-gradient(90deg, #818cf8, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; } body.share-mode.share-dark .share-view-foot { background: linear-gradient(135deg, #27272a 0%, #312e81 100%); border-color: #4338ca; color: #a5b4fc; } body.share-mode.share-dark #shareViewWorshipInfo { color: #fff; } body.share-mode.share-dark #shareViewMeta { color: rgb(255 255 255 / 0.82); } body.share-mode.share-dark .share-view-head-memo { background: rgb(0 0 0 / 0.18); border-color: rgb(255 255 255 / 0.12); color: #e4e4e7; } body.share-mode.share-dark .share-view-head .btn-share-dark-toggle, body.share-mode.share-dark .share-view-head #btnExitShareView { background: rgb(255 255 255 / 0.14) !important; border-color: rgb(255 255 255 / 0.28) !important; color: #fff !important; } body.share-mode.share-dark .share-card-memo { color: #cbd5e1; } body.share-mode.share-dark .share-card-title { color: #e0e7ff; } body.share-mode.share-dark .share-card { background: #1e1b4b; border-color: #4338ca; box-shadow: 0 4px 20px rgb(0 0 0 / 0.35); } body.share-mode.share-dark .share-card:hover, body.share-mode.share-dark .share-card:active, body.share-mode.share-dark .share-card:focus-within { border-color: #6366f1; box-shadow: 0 8px 28px rgb(79 70 229 / 0.28), 0 0 0 1px rgb(124 58 237 / 0.2), 0 0 24px rgb(99 102 241 / 0.2); } body.share-mode.share-dark .share-card::before { background: linear-gradient(180deg, #4f46e5, #7c3aed); } body.share-mode.share-dark .share-card-badge { background: linear-gradient(135deg, #4f46e5, #7c3aed); } body.share-mode.share-dark .share-song-form { color: #c4b5fd; background: rgb(109 40 217 / 0.22); border-color: rgb(124 58 237 / 0.35); } body.share-mode.share-dark .share-chip-key { background: rgb(30 64 175 / 0.35); border-color: rgb(59 130 246 / 0.4); color: #bfdbfe; } body.share-mode.share-dark .share-chip-tempo { background: rgb(109 40 217 / 0.35); border-color: rgb(124 58 237 / 0.4); color: #ddd6fe; } body.share-mode.share-dark .share-action-btn-video { background: #3f3f46; color: #e4e4e7; border-color: #52525b; } body.share-mode.share-dark .share-action-btn-video:hover { background: #52525b; } body.share-mode.share-dark .share-action-btn-disabled { background: #27272a; color: #71717a; border-color: #3f3f46; } body.share-mode.share-dark #btnExitShareView, body.share-mode.share-dark .btn-share-dark-toggle { background: #3f3f46; border-color: #52525b; color: #e4e4e7; } body.share-mode.share-dark #btnExitShareView:hover, body.share-mode.share-dark .btn-share-dark-toggle:hover { background: #52525b; } body.share-mode.share-dark #shareViewList .inline-flex { filter: brightness(0.92) saturate(0.85); } .conti-detail-link-actions { margin-top: 4px; margin-bottom: 2px; } .conti-detail-link-actions .share-action-btn { min-width: 96px; padding: 8px 12px; font-size: 12px; } .share-action-btn:disabled { background: #f1f5f9; color: #94a3b8; border: 1px dashed #cbd5e1; cursor: not-allowed; box-shadow: none; } .share-action-btn:disabled:hover { background: #f1f5f9; } .btn-conti-edit { font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 6px; border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; cursor: pointer; } .btn-conti-edit:hover { background: #e0e7ff; } .conti-song-card { transition: box-shadow 0.15s, opacity 0.15s; } .conti-song-card.conti-dragging { opacity: 0.45; box-shadow: 0 4px 14px rgb(99 102 241 / 0.2); } .conti-song-card.conti-drag-over { border-color: #818cf8 !important; box-shadow: 0 0 0 2px rgb(129 140 248 / 0.35); } .conti-drag-handle { display: flex; align-items: center; justify-content: center; width: 28px; height: 36px; border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc; color: #94a3b8; font-size: 14px; line-height: 1; cursor: grab; touch-action: none; user-select: none; flex-shrink: 0; } .conti-drag-handle:hover { background: #eef2ff; color: #6366f1; border-color: #c7d2fe; } .conti-drag-handle:active { cursor: grabbing; } .modal-backdrop { background: rgb(15 23 42 / 0.45); } .modal-panel { animation: fadeIn 0.2s ease-out; } #printArea { display: none; } /* ?낅낫 ?덉씠?꾩썐 ?몄쭛 紐⑤떖 */ #modalLayoutEditor { z-index: 60; height: 100vh; height: 100dvh; max-height: 100dvh; overflow: hidden; background: #fff; } .layout-editor-toolbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: #fff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgb(0 0 0 / 0.06); flex-wrap: wrap; } .layout-orientation-toggle { display: flex; gap: 4px; padding: 3px; background: #f1f5f9; border-radius: 10px; border: 1px solid #e2e8f0; } .layout-orient-btn { padding: 6px 12px; font-size: 11px; font-weight: 600; border-radius: 8px; border: none; background: transparent; color: #64748b; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .layout-orient-btn:hover { color: #334155; } .layout-orient-btn.active { background: #fff; color: #1e293b; box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); } .layout-editor-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 28px; background: #f1f5f9; } .layout-editor-footer { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 14px 20px; background: #fff; border-top: 1px solid #e2e8f0; } .layout-page-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .layout-page-header { width: 100%; max-width: 900px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; } .layout-page-label { font-size: 12px; font-weight: 600; color: #475569; } .layout-canvas { position: relative; background: #fff; box-shadow: 0 8px 30px rgb(0 0 0 / 0.12), 0 0 0 1px rgb(0 0 0 / 0.06); overflow: hidden; flex-shrink: 0; } .layout-item { position: absolute; box-sizing: border-box; overflow: hidden; cursor: grab; user-select: none; } .layout-item.is-dragging { cursor: grabbing; opacity: 0.94; z-index: 20; } .layout-item.is-resizing { z-index: 21; } .layout-item-score { border: 1px solid #93c5fd; border-radius: 4px; background: #fff; box-shadow: 0 1px 6px rgb(37 99 235 / 0.12); padding: 0; } .layout-score-img { display: block; width: 100%; height: 100%; object-fit: fill; object-position: center; pointer-events: none; vertical-align: top; } .layout-order-badge { position: absolute; top: 6px; left: 6px; z-index: 4; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff; font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 1px 4px rgb(30 64 175 / 0.35); pointer-events: none; } .layout-item-no-score { border: 1px dashed #94a3b8; border-radius: 4px; background: #f8fafc; min-height: 28px; display: flex; align-items: center; padding: 6px 10px 6px 36px; } .layout-no-score-label { font-size: 12px; font-weight: 600; color: #475569; line-height: 1.35; pointer-events: none; } .layout-layer-bar { position: absolute; top: 2px; right: 2px; display: flex; gap: 1px; z-index: 6; opacity: 0; transition: opacity 0.15s; } .layout-item:hover .layout-layer-bar, .layout-item.is-dragging .layout-layer-bar, .layout-item.is-resizing .layout-layer-bar { opacity: 1; } .layout-layer-btn { width: 22px; height: 20px; padding: 0; font-size: 10px; line-height: 1; border: 1px solid #e2e8f0; border-radius: 4px; background: #fff; color: #475569; cursor: pointer; } .layout-layer-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; } .layout-resize-handle { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; background: #2563eb; border: 2px solid #fff; border-radius: 3px 0 6px 0; cursor: nwse-resize; z-index: 5; } .song-form-block { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; } .form-tag-chip { font-size: 10px; padding: 2px 8px; border-radius: 6px; border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; font-weight: 600; cursor: pointer; } .form-tag-chip:hover { background: #e0e7ff; } .form-tag-add { font-size: 10px; padding: 2px 8px; border-radius: 6px; border: 1px dashed #94a3b8; color: #64748b; background: #fff; } .song-form-input { font-size: 11px; border-radius: 6px; border: 1px solid #e2e8f0; padding: 4px 8px; } .song-form-pop { font-size: 10px; padding: 4px 8px; border-radius: 6px; border: 1px solid #fecaca; color: #b91c1c; background: #fff; white-space: nowrap; } .song-memo-input { font-size: 10px; border-radius: 6px; border: 1px solid #e2e8f0; padding: 4px 8px; width: 100%; min-height: 40px; margin-top: 6px; resize: vertical; } .conti-flag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .conti-flag-row label { font-size: 10px; color: #64748b; display: flex; align-items: center; gap: 4px; cursor: pointer; } .layout-tools-panel { flex-shrink: 0; background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; max-height: min(36vh, 220px); overflow-y: auto; } .layout-tools-details { flex: 1 1 100%; min-width: 0; } .layout-tools-details > summary { font-size: 10px; font-weight: 700; color: #64748b; cursor: pointer; list-style: none; padding: 2px 0; user-select: none; } .layout-tools-details > summary::-webkit-details-marker { display: none; } .layout-tools-details > summary::before { content: '??'; display: inline-block; transition: transform 0.15s ease; } .layout-tools-details[open] > summary::before { transform: rotate(90deg); } .layout-tools-details-body { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #e2e8f0; } .layout-tools-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .layout-tools-group-title { font-size: 10px; font-weight: 700; color: #64748b; } .layout-tool-btn { font-size: 10px; padding: 4px 10px; border-radius: 6px; border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; } .layout-tool-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; } .layout-tool-btn:hover:not(.active) { background: #f1f5f9; } .layout-print-header-box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .layout-print-header-box input { font-size: 10px; border-radius: 6px; border: 1px solid #e2e8f0; padding: 4px 8px; } .layout-canvas { cursor: default; } .layout-canvas.tool-crosshair { cursor: crosshair; } .layout-annotation { position: absolute; box-sizing: border-box; z-index: 30; cursor: grab; user-select: none; } .layout-annotation.is-selected { outline: 2px solid #2563eb; outline-offset: 1px; } .layout-annotation.is-dragging { cursor: grabbing; opacity: 0.92; z-index: 50; } .layout-ann-delete { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 999px; border: none; background: #ef4444; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; z-index: 3; display: none; } .layout-annotation.is-selected .layout-ann-delete, .layout-annotation:hover .layout-ann-delete { display: flex; align-items: center; justify-content: center; } .layout-ann-resize { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; background: #2563eb; border: 2px solid #fff; border-radius: 3px 0 4px 0; cursor: nwse-resize; z-index: 2; } .layout-ann-text-body { width: 100%; height: 100%; padding: 4px 6px; overflow: auto; outline: none; word-break: break-word; line-height: 1.35; background: rgb(255 255 255 / 0.92); border: 1px dashed #94a3b8; border-radius: 4px; } .layout-ann-ellipse { border-radius: 50%; } .layout-song-form-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; font-size: 9px; padding: 2px 6px; background: rgb(15 23 42 / 0.75); color: #fff; text-align: center; pointer-events: none; line-height: 1.3; } .layout-canvas-header-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 0; box-sizing: border-box; padding: 10px 14px; font-size: 12px; color: #1e293b; text-align: center; background: linear-gradient(180deg, rgb(248 250 252 / 0.97), rgb(255 255 255 / 0.95)); border-bottom: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } .layout-canvas-header-overlay .header-main { font-weight: 700; line-height: 1.35; } .layout-canvas-header-overlay .header-memo-line { font-size: 11px; font-weight: 400; color: #64748b; line-height: 1.45; white-space: pre-wrap; text-align: left; padding: 4px 6px; background: rgb(241 245 249 / 0.85); border-radius: 4px; } .print-layout-page { position: relative; overflow: hidden; box-sizing: border-box; background: #fff; } .print-page-header-bar-static { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: 10px 16px; font-size: 11pt; color: #1e293b; background: linear-gradient(180deg, rgb(248 250 252 / 0.98), rgb(255 255 255 / 0.96)); border-bottom: 1px solid #e2e8f0; text-align: center; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } .print-page-header-bar-static .print-header-main { font-weight: 700; line-height: 1.35; } .print-page-header-bar-static .print-header-memo { font-size: 9.5pt; font-weight: 400; color: #64748b; line-height: 1.45; white-space: pre-wrap; text-align: left; } .layout-header-memo-input { width: 100%; font-size: 10px; border-radius: 6px; border: 1px solid #e2e8f0; padding: 4px 8px; resize: vertical; min-height: 28px; max-height: 72px; margin-top: 2px; background: #fff; } .print-layout-page-body { position: relative; width: 100%; height: 100%; overflow: visible; } .print-layout-memo-footer { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 90; font-size: 9pt; color: #475569; line-height: 1.45; white-space: pre-wrap; background: rgb(255 255 255 / 0.9); padding: 6px 8px; border-radius: 4px; } @media print { @page { size: A4 portrait; margin: 0; } body.layout-printing.layout-print-landscape { /* ?숈쟻 @page 洹쒖튃(printLayoutDynamicStyle)??landscape瑜??곸슜 */ } html, body { height: auto !important; overflow: visible !important; background: #fff !important; margin: 0 !important; } body.layout-printing #appShell, body.layout-printing #shareView, body.layout-printing #toast, body.layout-printing #modalShare, body.layout-printing #modalSaveConti, body.layout-printing #modalLayoutEditor { display: none !important; } body.layout-printing #printArea { display: block !important; position: static !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: #fff !important; } .print-layout-page.page { position: relative; overflow: hidden; page-break-after: always !important; break-after: page !important; background: #fff; box-sizing: border-box; margin: 0; padding: 0; } .print-layout-page.page:last-child { page-break-after: auto !important; break-after: auto !important; } .print-layout-item { position: absolute; box-sizing: border-box; overflow: hidden; border: none !important; box-shadow: none !important; background: #fff; } .print-layout-order-badge { position: absolute; top: 6px; left: 6px; z-index: 2; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #1e40af; color: #fff; font-size: 10pt; font-weight: 700; line-height: 20px; text-align: center; } .print-layout-item-score img { display: block; width: 100%; height: 100%; object-fit: fill; object-position: center; } .print-layout-item-no-score { display: flex; align-items: center; padding: 6px 8px 6px 34px; } .print-layout-no-score-label { font-size: 11pt; font-weight: 600; color: #334155; } body.layout-printing .layout-layer-bar, body.layout-printing .layout-resize-handle, body.layout-printing .layout-ann-delete, body.layout-printing .layout-ann-resize { display: none !important; } .print-annotation { position: absolute; box-sizing: border-box; overflow: hidden; } .print-annotation-text { padding: 4px 6px; white-space: pre-wrap; word-break: break-word; background: rgb(255 255 255 / 0.85); } .print-annotation-ellipse { border-radius: 50%; } } .auth-controls { display: flex; align-items: center; gap: 8px; } .auth-user-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; } .auth-user-photo { width: 28px; height: 28px; border-radius: 999px; border: 1px solid #e2e8f0; object-fit: cover; flex-shrink: 0; } .auth-user-name { font-size: 11px; font-weight: 600; color: #334155; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-google-login { font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; color: #334155; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .btn-google-login:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; } .btn-google-login:disabled { opacity: 0.45; cursor: not-allowed; } .btn-auth-logout { font-size: 10px; padding: 4px 8px; border-radius: 6px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; cursor: pointer; } .btn-auth-logout:hover { background: #f1f5f9; color: #334155; } </style>  <script type="importmap"> { "imports": { "firebase/app": "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js", "firebase/auth": "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js", "firebase/firestore": "https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js", "firebase/analytics": "https://www.gstatic.com/firebasejs/10.14.1/firebase-analytics.js" } } </script> <style id="share-view-purple"> /* Share link viewer — purple brand skin (inline, beats Tailwind) */ html.viewer-mode, html.viewer-mode body, body.share-mode, body.viewer-mode { overflow: auto !important; } html.viewer-mode #appShell, body.share-mode #appShell, body.viewer-mode #appShell { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } html.viewer-mode #shareView, html.viewer-mode #shareView.hidden, body.share-mode #shareView, body.viewer-mode #shareView { display: flex !important; flex-direction: column !important; visibility: visible !important; position: fixed !important; inset: 0 !important; z-index: 40 !important; overflow: hidden !important; background: linear-gradient(180deg, #eef2f9 0%, #f4f6fb 48%, #eef1f8 100%) !important; } html.viewer-mode #toast, body.share-mode #toast, body.viewer-mode #toast { display: none !important; } #shareView.share-view-page { position: relative; isolation: isolate; } #shareView.share-view-page::before, #shareView.share-view-page::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.18; pointer-events: none; z-index: 0; } #shareView.share-view-page::before { width: min(320px, 65vw); height: min(320px, 65vw); background: #6366f1; top: -80px; right: -60px; } #shareView.share-view-page::after { width: min(260px, 50vw); height: min(260px, 50vw); background: #7c3aed; bottom: 10%; left: -50px; } #shareView .share-view-scroll { flex: 1 !important; overflow-y: auto !important; padding: 16px !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; position: relative; z-index: 1; } @media (min-width: 640px) { #shareView .share-view-scroll { padding: 28px 20px 36px !important; } } #shareView .share-view-panel { width: 100% !important; max-width: 28rem !important; border-radius: 20px !important; overflow: hidden !important; border: 1px solid #e2e8f4 !important; background: #fff !important; box-shadow: 0 16px 48px rgb(30 27 75 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.8) inset !important; } @media (min-width: 640px) { #shareView .share-view-panel { max-width: 32rem !important; } } #shareView .share-view-head { padding: 20px 20px 18px !important; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important; color: #fff !important; } #shareView .share-view-head-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } #shareView .share-view-head-tag { margin: 0 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: rgb(255 255 255 / 0.82) !important; } #shareView .share-view-head-desc { margin: 8px 0 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: rgb(255 255 255 / 0.88) !important; } #shareView .share-view-head-preview { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 14px !important; padding: 12px 14px !important; border-radius: 14px !important; background: rgb(255 255 255 / 0.14) !important; border: 1px solid rgb(255 255 255 / 0.22) !important; backdrop-filter: blur(10px); } #shareView .share-view-head-icon { width: 44px !important; height: 44px !important; border-radius: 14px !important; background: rgb(255 255 255 / 0.22) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 22px !important; flex-shrink: 0 !important; } #shareView #shareViewWorshipInfo { margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; color: #fff !important; letter-spacing: -0.02em; line-height: 1.3; } #shareView #shareViewMeta { margin: 4px 0 0 !important; font-size: 13px !important; color: rgb(255 255 255 / 0.88) !important; font-weight: 500; line-height: 1.45; } #shareView #shareViewMemo { white-space: pre-wrap; } #shareView .share-view-head-memo { margin: 12px 0 0 !important; font-size: 13px !important; line-height: 1.55 !important; color: rgb(255 255 255 / 0.92) !important; padding: 11px 13px !important; border-radius: 12px !important; background: rgb(255 255 255 / 0.1) !important; border: 1px solid rgb(255 255 255 / 0.16) !important; } #shareView .share-view-head .btn-share-dark-toggle, #shareView .share-view-head #btnExitShareView { background: rgb(255 255 255 / 0.14) !important; border-color: rgb(255 255 255 / 0.28) !important; color: #fff !important; box-shadow: none !important; } #shareView .share-view-head .btn-share-dark-toggle:hover, #shareView .share-view-head #btnExitShareView:hover { background: rgb(255 255 255 / 0.24) !important; } #shareView .share-view-body { padding: 18px 20px 20px !important; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; } #shareView .share-view-section-label { margin: 0 0 12px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; background: linear-gradient(90deg, #4f46e5, #7c3aed) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } #shareView .share-view-songs { display: flex !important; flex-direction: column !important; gap: 12px !important; } #shareView .share-view-foot { padding: 13px 20px !important; text-align: center !important; font-size: 11px !important; font-weight: 600 !important; color: #4338ca !important; line-height: 1.5 !important; background: linear-gradient(135deg, #eef2ff 0%, #f3e8ff 100%) !important; border-top: 1px solid #e0e7ff !important; } #shareView .share-view-empty { padding: 2.5rem 1rem !important; text-align: center !important; color: #475569 !important; font-size: 14px !important; line-height: 1.6 !important; } #shareView .share-header-actions { display: flex !important; flex-shrink: 0 !important; align-items: center !important; gap: 8px !important; } #shareView .share-card { border-radius: 18px !important; border: 1px solid #e8edf5 !important; background: #fff !important; padding: 20px !important; box-shadow: 0 2px 12px rgb(30 27 75 / 0.04) !important; transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease; position: relative; overflow: hidden; } #shareView .share-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 100%); border-radius: 18px 0 0 18px; } #shareView .share-card:hover, #shareView .share-card:active, #shareView .share-card:focus-within { border-color: #c7d2fe !important; box-shadow: 0 8px 28px rgb(79 70 229 / 0.14), 0 0 0 1px rgb(124 58 237 / 0.08), 0 0 24px rgb(99 102 241 / 0.12) !important; transform: translateY(-1px); } #shareView .share-card-top { display: flex !important; align-items: flex-start !important; gap: 14px !important; } #shareView .share-card-badge { width: 36px !important; height: 36px !important; border-radius: 12px !important; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; box-shadow: 0 4px 14px rgb(79 70 229 / 0.32); } #shareView .share-card-title { margin: 2px 0 0 !important; color: #312e81 !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -0.02em; } #shareView .share-card-meta { margin-top: 12px !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; } #shareView .share-card-memo { color: #475569 !important; font-size: 13px !important; margin-top: 8px !important; line-height: 1.5 !important; } #shareView .share-song-form { font-size: 12px !important; font-weight: 600 !important; color: #5b21b6 !important; margin-top: 6px !important; display: inline-block !important; padding: 4px 10px !important; border-radius: 999px !important; background: #f3e8ff !important; border: 1px solid #e9d5ff !important; } #shareView .share-chip-key { font-size: 11px !important; font-weight: 700 !important; padding: 4px 10px !important; border-radius: 999px !important; background: #dbeafe !important; border: 1px solid #bfdbfe !important; color: #1e40af !important; } #shareView .share-chip-tempo { font-size: 11px !important; font-weight: 700 !important; padding: 4px 10px !important; border-radius: 999px !important; background: #ede9fe !important; border: 1px solid #ddd6fe !important; color: #6d28d9 !important; } #shareView .share-card-meta .inline-flex { font-size: 11px !important; font-weight: 600 !important; padding: 4px 10px !important; border-radius: 999px !important; border: 1px solid #e9d5ff !important; background: #faf5ff !important; color: #7c3aed !important; } #shareView .share-actions-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 16px !important; padding-top: 16px !important; border-top: 1px solid #f1f5f9 !important; } #shareView .share-action-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; height: 42px !important; padding: 0 12px !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; } #shareView .share-action-btn-score { background: linear-gradient(135deg, #059669 0%, #047857 100%) !important; color: #fff !important; border: none !important; } #shareView .share-action-btn-video { background: #fff !important; color: #1e293b !important; border: 1px solid #e2e8f0 !important; } #shareView .share-action-btn-disabled { background: #f8fafc !important; color: #94a3b8 !important; border: 1px dashed #cbd5e1 !important; grid-column: 1 / -1 !important; } #shareView .share-view-loading { max-width: 42rem !important; margin: 0 auto !important; padding: 3rem 1.5rem !important; text-align: center !important; color: #475569 !important; font-size: 14px !important; } #shareView .share-view-loading::before { content: ''; display: block; width: 36px; height: 36px; margin: 0 auto 14px; border: 3px solid #e2e8f4; border-top-color: #4f46e5; border-radius: 50%; animation: share-spin 0.8s linear infinite; } @keyframes share-spin { to { transform: rotate(360deg); } } /* Tailwind utility fallbacks inside #shareView (viewer mode) */ html.viewer-mode #shareView .flex, body.viewer-mode #shareView .flex, body.share-mode #shareView .flex { display: flex !important; } html.viewer-mode #shareView .flex-wrap, body.viewer-mode #shareView .flex-wrap, body.share-mode #shareView .flex-wrap { flex-wrap: wrap !important; } html.viewer-mode #shareView .items-center, body.viewer-mode #shareView .items-center, body.share-mode #shareView .items-center { align-items: center !important; } html.viewer-mode #shareView .flex-1, body.viewer-mode #shareView .flex-1, body.share-mode #shareView .flex-1 { flex: 1 1 0% !important; } html.viewer-mode #shareView .min-w-0, body.viewer-mode #shareView .min-w-0, body.share-mode #shareView .min-w-0 { min-width: 0 !important; } html.viewer-mode #shareView .shrink-0, body.viewer-mode #shareView .shrink-0, body.share-mode #shareView .shrink-0 { flex-shrink: 0 !important; } html.viewer-mode #shareView .hidden, body.viewer-mode #shareView .hidden, body.share-mode #shareView .hidden { display: none !important; } /* Dark mode */ html.viewer-mode.share-dark #shareView, body.share-mode.share-dark #shareView { background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 50%, #1e1b4b 100%) !important; } html.viewer-mode.share-dark #shareView.share-view-page::before, body.share-mode.share-dark #shareView.share-view-page::before { background: #4f46e5; opacity: 0.22; } html.viewer-mode.share-dark #shareView.share-view-page::after, body.share-mode.share-dark #shareView.share-view-page::after { background: #7c3aed; opacity: 0.16; } html.viewer-mode.share-dark #shareView .share-view-panel, body.share-mode.share-dark #shareView .share-view-panel { background: #18181b !important; border-color: #3f3f46 !important; } html.viewer-mode.share-dark #shareView .share-view-head, body.share-mode.share-dark #shareView .share-view-head { background: linear-gradient(135deg, #3730a3 0%, #6d28d9 100%) !important; } html.viewer-mode.share-dark #shareView .share-view-body, body.share-mode.share-dark #shareView .share-view-body { background: linear-gradient(180deg, #18181b 0%, #1e1b4b 100%) !important; } html.viewer-mode.share-dark #shareView .share-view-foot, body.share-mode.share-dark #shareView .share-view-foot { background: linear-gradient(135deg, #27272a 0%, #312e81 100%) !important; border-color: #4338ca !important; color: #a5b4fc !important; } html.viewer-mode.share-dark #shareView .share-card, body.share-mode.share-dark #shareView .share-card { background: #1e1b4b !important; border-color: #4338ca !important; } html.viewer-mode.share-dark #shareView .share-card-title, body.share-mode.share-dark #shareView .share-card-title { color: #e0e7ff !important; } html.viewer-mode #btnExitShareView, html.viewer-mode.share-dark #shareView #btnExitShareView { display: none !important; } </style> </head> <body class="h-full bg-slate-100 text-slate-800 antialiased flex flex-col"> <div id="appShell" class="flex flex-col flex-1 min-h-0"> <header class="h-12 shrink-0 bg-white border-b border-slate-200 px-4 flex items-center justify-between shadow-sm z-10"> <div class="flex items-center gap-2.5"> <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 flex items-center justify-center shadow-sm"> <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/></svg> </div> <div> <h1 class="text-sm font-bold text-slate-900 leading-tight">援먰쉶 李ъ뼇 肄섑떚 鍮뚮뜑</h1> <p class="text-[10px] text-slate-500">?낅낫 ?섏쭛 쨌 肄섑떚 援ъ꽦</p> </div> </div> <div class="auth-controls"> <div id="authLoggedOut"> <button type="button" id="btnGoogleLogin" class="btn-google-login" title="援ш? 怨꾩젙?쇰줈 濡쒓렇??> <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg> 援ш? 濡쒓렇?? </button> </div> <div id="authLoggedIn" class="hidden auth-user-wrap"> <img id="authUserPhoto" class="auth-user-photo" alt="" width="28" height="28" /> <span id="authUserName" class="auth-user-name"></span> <button type="button" id="btnFirebaseLogout" class="btn-auth-logout">濡쒓렇?꾩썐</button> </div> </div> </header> <main class="flex flex-1 min-h-0">  <aside class="w-[45%] min-w-0 flex flex-col border-r border-slate-200 bg-white min-h-0">  <nav class="shrink-0 px-3 pt-3 pb-2 border-b border-slate-100 bg-white" aria-label="醫뚯륫 硫붾돱"> <div class="flex p-1 bg-slate-100 rounded-lg" role="tablist"> <button type="button" id="tabRegister" role="tab" aria-selected="false" data-left-tab="register" class="left-tab-btn flex-1 py-2 px-3 rounded-md text-sm font-semibold text-slate-500 hover:text-slate-700"> ??怨??깅줉 </button> <button type="button" id="tabBrowse" role="tab" aria-selected="true" data-left-tab="browse" class="left-tab-btn active flex-1 py-2 px-3 rounded-md text-sm font-semibold text-slate-500 hover:text-slate-700"> 怨??좏깮 </button> </div> </nav>  <div id="panelBrowse" role="tabpanel" class="left-panel flex flex-1 flex-col min-h-0"> <section class="flex-1 flex flex-col min-h-0 bg-white"> <div class="shrink-0 px-3 py-2.5 border-b border-slate-100"> <div class="flex items-center justify-between mb-2"> <h2 class="text-xs font-semibold text-slate-900">?깅줉??怨?紐⑸줉</h2> <span id="libraryCount" class="text-[10px] text-slate-500">0怨?/span> </div> <div class="relative mb-2"> <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg> <input type="text" id="librarySearch" placeholder="?쒕ぉ, ?묎끝/?묒궗, 踰꾩쟾, 二쇱젣?? autocomplete="off" class="w-full text-xs rounded-lg border border-slate-200 bg-slate-50 pl-8 pr-8 py-2 focus:ring-2 focus:ring-blue-500/25 focus:border-blue-500 focus:bg-white outline-none" /> <button type="button" id="librarySearchClear" class="hidden absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 text-xs" aria-label="寃??吏?곌린">횞</button> </div> <div class="space-y-2"> <div class="flex items-center gap-1.5 flex-wrap"> <span class="text-[10px] font-medium text-slate-400 w-8 shrink-0">?쒗룷</span> <div class="flex flex-wrap gap-1" id="filterTempo"> <button type="button" data-group="tempo" data-value="all" class="chip active text-[10px] px-2 py-0.5 rounded-full border border-slate-200">?꾩껜</button> <button type="button" data-group="tempo" data-value="鍮좊쫫" class="chip text-[10px] px-2 py-0.5 rounded-full border border-slate-200">鍮좊쫫</button> <button type="button" data-group="tempo" data-value="?먮┝" class="chip text-[10px] px-2 py-0.5 rounded-full border border-slate-200">?먮┝</button> </div> </div> <div> <span class="text-[10px] font-medium text-slate-400 block mb-1">Key</span> <div class="flex flex-wrap gap-1 max-h-24 overflow-y-auto scrollbar-thin pr-1" id="filterKey"> <button type="button" data-group="key" data-value="all" class="chip active text-[10px] px-2 py-0.5 rounded-full border border-slate-200 shrink-0">?꾩껜</button> </div> </div> </div> </div> <div id="libraryList" class="flex-1 min-h-0 overflow-y-auto scrollbar-thin p-3 space-y-2"></div> <div id="libraryEmpty" class="hidden flex-1 min-h-0 items-center justify-center p-6 text-center text-xs text-slate-400"> ?깅줉??怨≪씠 ?놁뒿?덈떎.<br/> <button type="button" id="goRegisterFromEmpty" class="mt-2 text-blue-600 font-medium hover:underline">??怨??깅줉?섍린</button> </div> </section> </div>  <div id="panelRegister" role="tabpanel" class="left-panel is-hidden flex-1 flex-col min-h-0 overflow-y-auto scrollbar-thin bg-slate-50/50"> <div class="p-4 space-y-4 max-w-lg mx-auto w-full"> <div class="flex items-start justify-between gap-2"> <div> <h2 id="registerFormTitle" class="text-sm font-semibold text-slate-900">??怨??깅줉</h2> <p id="registerFormDesc" class="text-xs text-slate-500 mt-0.5">怨??쒕ぉ ??[援ш? ?낅낫]쨌[?좏뒠釉?濡?寃????留곹겕瑜??깅줉?섏꽭??/p> </div> <button type="button" id="btnCancelEdit" class="hidden shrink-0 text-xs text-slate-500 hover:text-slate-800 px-2 py-1 rounded border border-slate-200 bg-white">痍⑥냼</button> </div> <div id="registerPanel" class="space-y-3"> <div> <label class="text-[10px] font-medium text-slate-500 mb-1 block">怨??쒕ぉ</label> <div class="flex flex-wrap gap-1.5"> <input type="text" id="inputTitle" placeholder="怨??쒕ぉ" class="flex-1 min-w-[120px] text-sm rounded-lg border border-slate-200 px-2.5 py-2 focus:ring-2 focus:ring-blue-500/25 focus:border-blue-500 outline-none bg-white" /> <button type="button" id="btnGoogleSearch" disabled class="shrink-0 px-2.5 py-2 rounded-lg text-[11px] font-medium border disabled:opacity-40 disabled:cursor-not-allowed enabled:border-amber-200 enabled:bg-amber-50 enabled:text-amber-800 enabled:hover:bg-amber-100"> 援ш? ?낅낫 </button> <button type="button" id="btnYoutubeSearch" disabled class="shrink-0 px-2.5 py-2 rounded-lg text-[11px] font-medium border disabled:opacity-40 disabled:cursor-not-allowed enabled:border-red-200 enabled:bg-red-50 enabled:text-red-800 enabled:hover:bg-red-100"> ?좏뒠釉? </button> </div> </div> <div class="grid grid-cols-2 gap-2"> <div> <label class="text-[10px] font-medium text-slate-500 mb-1 block">?묎끝</label> <input type="text" id="inputComposer" placeholder="?묎끝媛" class="w-full text-sm rounded-lg border border-slate-200 px-2.5 py-2 bg-white focus:ring-2 focus:ring-blue-500/25 outline-none" /> </div> <div> <label class="text-[10px] font-medium text-slate-500 mb-1 block">?묒궗</label> <input type="text" id="inputLyricist" placeholder="?묒궗媛" class="w-full text-sm rounded-lg border border-slate-200 px-2.5 py-2 bg-white focus:ring-2 focus:ring-blue-500/25 outline-none" /> </div> <div class="col-span-2"> <label class="text-[10px] font-medium text-slate-500 mb-1 block">踰꾩쟾</label> <input type="text" id="inputVersion" placeholder="?? ?쒖삩?뚯떗, ?대끂?명똿(源紐낆떇)" class="w-full text-sm rounded-lg border border-slate-200 px-2.5 py-2 bg-white focus:ring-2 focus:ring-blue-500/25 outline-none" /> </div> </div> <div class="grid grid-cols-2 gap-2"> <div> <label class="text-[10px] font-medium text-slate-500 mb-1 block">Key</label> <select id="inputKey" class="w-full text-sm rounded-lg border border-slate-200 px-2 py-1.5 bg-white focus:ring-2 focus:ring-blue-500/25 outline-none"></select> </div> <div> <label class="text-[10px] font-medium text-slate-500 mb-1 block">?쒗룷</label> <select id="inputTempo" class="w-full text-sm rounded-lg border border-slate-200 px-2 py-1.5 bg-white focus:ring-2 focus:ring-blue-500/25 outline-none"> <option value="?먮┝">?먮┝</option> <option value="鍮좊쫫">鍮좊쫫</option> </select> </div> </div>  <div class="relative" id="themePickerRoot"> <label class="text-[10px] font-medium text-slate-500 mb-1 block">二쇱젣 <span class="text-slate-400 font-normal">(?ㅼ쨷 ?좏깮 쨌 異붽?/??젣)</span></label> <div id="themePickerTrigger" class="min-h-[36px] flex flex-wrap items-center gap-1 rounded-lg border border-slate-200 bg-white px-2 py-1.5 cursor-text focus-within:ring-2 focus-within:ring-blue-500/25 focus-within:border-blue-500"> <span id="themePlaceholder" class="text-xs text-slate-400 px-1">二쇱젣瑜??좏깮?섍굅???덈줈 留뚮뱶?몄슂</span> <div id="themeSelectedChips" class="contents"></div> <input type="text" id="themeSearchInput" class="flex-1 min-w-[80px] text-xs border-0 outline-none bg-transparent py-0.5" placeholder="" autocomplete="off" /> </div> <div id="themeDropdown" class="hidden absolute left-0 right-0 top-full mt-1 z-30 bg-white rounded-xl border border-slate-200 shadow-xl overflow-hidden"> <div id="themeOptionsList" class="max-h-40 overflow-y-auto scrollbar-thin py-1"></div> <div class="border-t border-slate-100 p-2 bg-slate-50"> <p class="text-[10px] text-slate-500 mb-1.5">??二쇱젣 留뚮뱾湲?/p> <div class="flex gap-1.5"> <input type="text" id="themeCreateInput" placeholder="?? ?뚭컻, 媛먯궗" class="flex-1 text-xs rounded-lg border border-slate-200 px-2 py-1.5 bg-white outline-none focus:border-blue-400" /> <button type="button" id="btnThemeCreate" class="shrink-0 px-2.5 py-1.5 rounded-lg bg-blue-600 text-white text-xs font-medium hover:bg-blue-700">異붽?</button> </div> </div> </div> </div> <div class="rounded-lg border border-dashed border-blue-200 bg-blue-50/40 px-2.5 py-2 space-y-2"> <div> <label class="text-[10px] font-medium text-slate-600 flex items-center gap-1 mb-1"> <span class="w-4 h-4 rounded bg-blue-600 text-white text-[9px] font-bold flex items-center justify-center">2</span> ?낅낫 留곹겕 </label> <input type="text" id="inputScoreUrl" placeholder="https://???낅낫.jpg ?먮뒗 ?낅낫.png" class="w-full text-xs rounded-lg border border-slate-200 bg-white px-2.5 py-2 focus:ring-2 focus:ring-blue-500/25 outline-none" /> <div class="score-url-hint" role="note"> <p class="score-url-hint-title">?뮕 ??源붾걫???몄뇙瑜??꾪빐, 瑗?<strong>?대?吏二쇱냼</strong>瑜??ｌ뼱二쇱꽭??</p> <p>援ш? ?대?吏寃?됱뿉???낅낫瑜?留덉슦???고겢由?븳 ??<strong>[?대?吏二쇱냼 蹂듭궗]</strong>瑜??뚮윭 媛?몄삤?쒕㈃源⑥쭚 ?놁씠 ?덉걯寃??뺣젹?⑸땲??</p> <p class="score-url-hint-note">.jpg 쨌 .png 濡??앸굹??二쇱냼?ъ빞 PDF ?몄쭛李쎌뿉 諛붾줈 ?섑??섏슂 ??/p> </div> </div> <div> <label class="text-[10px] font-medium text-slate-600 flex items-center gap-1 mb-1"> <span class="w-4 h-4 rounded bg-red-500 text-white text-[9px] font-bold flex items-center justify-center">3</span> ?곸긽 留곹겕 </label> <input type="text" id="inputVideoUrl" placeholder="https://youtube.com/?? class="w-full text-xs rounded-lg border border-slate-200 bg-white px-2.5 py-2 focus:ring-2 focus:ring-blue-500/25 outline-none" /> <p class="soft-hint soft-hint-video" role="note">?렦 怨??쒕ぉ ??<strong>[?좏뒠釉?</strong>濡??곸긽??李얠? ??留곹겕瑜?遺숈뿬?ｌ쑝?몄슂. 怨듭쑀 ????먯뿉寃??낅낫? ?④퍡 ?뗫━?ㅽ듃濡??꾨떖?⑸땲?ㅲ쑉</p> </div> </div> <button type="button" id="btnRegister" class="w-full py-2.5 rounded-xl bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 shadow-md shadow-blue-600/20 transition"> 怨??깅줉 </button> <button type="button" id="btnDeleteSong" class="hidden w-full py-2 rounded-xl border border-red-200 text-red-600 text-sm font-medium hover:bg-red-50"> ??怨???젣 </button> <p class="text-[10px] text-center text-slate-400">?뷀꽣濡??깅줉?섏? ?딆뒿?덈떎 쨌 ??踰꾪듉???뚮윭二쇱꽭??/p> </div> </div> </div> </aside>  <section id="contiSidebar" class="w-[55%] min-w-0 flex flex-col min-h-0 bg-gradient-to-b from-slate-50 to-white"> <div class="conti-sidebar-actions shrink-0 px-4 py-2.5 border-b border-slate-200 space-y-2"> <div class="flex flex-wrap items-center justify-between gap-2"> <p id="contiMeta" class="text-xs text-slate-600 font-medium min-w-0"></p> <div class="flex flex-wrap gap-1.5 shrink-0"> <button type="button" id="btnPdf" class="px-3 py-1.5 rounded-lg bg-slate-900 text-white text-[11px] font-medium hover:bg-slate-800">PDF ?몄쭛</button> <button type="button" id="btnShare" class="px-3 py-1.5 rounded-lg border border-blue-200 bg-blue-50 text-blue-700 text-[11px] font-medium hover:bg-blue-100">怨듭쑀 留곹겕</button> </div> </div> <div class="flex flex-wrap gap-1.5 items-center"> <button type="button" id="btnSaveContiSession" class="px-2.5 py-1.5 rounded-lg bg-indigo-600 text-white text-[11px] font-medium hover:bg-indigo-700">肄섑떚 ???/button> <select id="savedContiSelect" class="flex-1 min-w-[120px] text-[11px] rounded-lg border border-slate-200 px-2 py-1.5 bg-white"> <option value="">??λ맂 肄섑떚 遺덈윭?ㅺ린??/option> </select> <button type="button" id="btnDeleteSavedConti" class="px-2 py-1.5 rounded-lg border border-slate-200 text-slate-500 text-[11px] hover:bg-slate-50" title="?좏깮 ??ぉ ??젣">??젣</button> <button type="button" id="btnClearConti" class="px-2 py-1.5 rounded-lg border border-red-200 text-red-600 text-[11px] font-medium hover:bg-red-50" title="?닿릿 怨??꾩껜 ?쒓굅">諛붽뎄??鍮꾩슦湲?/button> </div> </div> <div class="conti-right-tabs shrink-0" role="tablist"> <button type="button" class="conti-right-tab active" data-conti-tab="conti" role="tab">?뱷 ?ㅻ뒛??肄섑떚</button> <button type="button" class="conti-right-tab" data-conti-tab="memo" role="tab">?뱦 ?덈같 硫붾え</button> </div> <div id="contiTabPanelConti" class="conti-tab-panel is-active scrollbar-thin" role="tabpanel"> <div id="contiList" class="flex-1 min-h-0 overflow-y-auto scrollbar-thin p-4 space-y-2.5 hidden"></div> <div id="contiEmpty" class="flex-1 min-h-0 flex flex-col items-center justify-center p-8 text-center"> <p class="text-sm font-medium text-slate-600">肄섑떚 諛붽뎄?덇? 鍮꾩뼱 ?덉뒿?덈떎</p> <p class="text-xs text-slate-400 mt-1">?쇱そ怨?紐⑸줉?먯꽌 <span class="text-blue-600 font-medium">肄섑떚??異붽?</span>瑜??뚮윭 ?댁븘 蹂댁꽭??/p> </div> </div> <div id="contiTabPanelMemo" class="conti-tab-panel scrollbar-thin p-4 space-y-4" role="tabpanel"> <div> <label for="contiDate" class="text-[10px] font-semibold text-indigo-700 mb-1 block">?뱠 ?덈같 ?좎쭨 <span class="font-normal text-slate-500">(怨듭쑀쨌PDF쨌?곷떒 ?쒖떆)</span></label> <input type="date" id="contiDate" class="w-full text-sm rounded-lg border border-indigo-200 bg-indigo-50/40 px-2.5 py-2 text-slate-900 focus:ring-2 focus:ring-indigo-500/25 outline-none" /> <p class="text-[10px] text-slate-400 mt-1">?덈같?쇱씠 ?ㅻⅤ硫??좎쭨瑜?蹂寃쏀븯?몄슂. 怨듭쑀쨌PDF쨌?곷떒??洹몃?濡??쒖떆?⑸땲??</p> </div> <div> <label for="contiWorshipInfo" class="text-[10px] font-semibold text-indigo-700 mb-1 block">?뱟 ?덈같 ?뺣낫 <span class="font-normal text-slate-500">(怨듭쑀쨌PDF ?쒕ぉ)</span></label> <input type="text" id="contiWorshipInfo" placeholder="?? 二쇱씪 1遺 ?덈같, 泥?뀈?덈같 李ъ뼇" class="conti-worship-input w-full rounded-lg border border-indigo-200 bg-indigo-50/40 px-2.5 py-2 text-slate-900 focus:ring-2 focus:ring-indigo-500/25 outline-none" /> </div> <div> <label for="contiTitle" class="text-[10px] font-medium text-slate-500 mb-1 block">肄섑떚 ?쒕ぉ <span class="text-slate-400 font-normal">(?좏깮)</span></label> <input type="text" id="contiTitle" placeholder="?? 6??李ъ뼇 肄섑떚" class="w-full text-xs rounded-lg border border-slate-200 px-2.5 py-2 focus:ring-2 focus:ring-blue-500/25 outline-none bg-white" /> </div> <div> <label for="contiMemo" class="text-[10px] font-medium text-slate-500 mb-1 block">?뱷 ?꾩껜 肄섑떚 硫붾え</label> <textarea id="contiMemo" rows="3" placeholder="由ы뿀???쒓컙, ?밸퀎 ?덈궡, ?몄뀡 ?붿껌 ?ы빆 ?? class="w-full text-xs rounded-lg border border-slate-200 px-2.5 py-2 resize-y min-h-[72px] focus:ring-2 focus:ring-blue-500/25 outline-none bg-white"></textarea> <div class="conti-flag-row mt-2"> <label><input type="checkbox" id="contiMemoPrint" checked /> PDF ?몄뇙臾쇱뿉 ?ы븿</label> <label><input type="checkbox" id="contiMemoShare" checked /> ???怨듭쑀 留곹겕???ы븿</label> </div> </div> <p class="soft-hint soft-hint-share" role="note">?뵕 <strong>[怨듭쑀 留곹겕]</strong>瑜??꾨Ⅴ硫???먯뿉寃?蹂대궪 二쇱냼媛蹂듭궗?⑸땲?? 移댄넚??遺숈뿬?ｌ쑝硫?誘몃━蹂닿린 移대뱶媛 ?쒖떆?⑸땲?ㆀ윋?/p> <div id="contiMemoPanel" class="space-y-3"> <p class="text-[10px] font-semibold text-slate-600">怨〓퀎 ?뱀씠?ы빆</p> <div id="contiSongMemoList" class="space-y-3"></div> <p id="contiSongMemoEmpty" class="text-xs text-slate-400 text-center py-6 rounded-lg border border-dashed border-slate-200 bg-white/80"> 諛붽뎄?덉뿉 ?닿릿 怨≪씠 ?놁뒿?덈떎. ?ㅻ뒛??肄섑떚 ??뿉??怨≪쓣 異붽???二쇱꽭?? </p> </div> </div> </section> </main> </div>  <div id="shareView" class="hidden fixed inset-0 z-40 flex-col overflow-hidden share-view-page"> <div class="share-view-scroll scrollbar-thin"> <article class="share-view-panel"> <header class="share-view-head"> <div class="share-view-head-bar"> <p class="share-view-head-tag">怨듭쑀 肄섑떚</p> <div class="share-header-actions"> <button type="button" id="btnShareDarkMode" class="btn-share-dark-toggle" aria-label="?ㅽ겕紐⑤뱶 ?좉?" title="?덈같???ㅽ겕紐⑤뱶">?뙔</button> <button type="button" id="btnExitShareView" class="shrink-0 px-3 py-2 rounded-lg border text-xs font-medium"> ?몄쭛 ?붾㈃?쇰줈 </button> </div> </div> <p class="share-view-head-desc">??먭낵 怨듭쑀??李ъ뼇 肄섑떚 쨌 ?낅낫? ?곸긽???뺤씤?섏꽭??/p> <div class="share-view-head-preview"> <div class="share-view-head-icon" aria-hidden="true">?렦</div> <div class="min-w-0 flex-1"> <h1 id="shareViewWorshipInfo">?ㅻ뒛??李ъ뼇 肄섑떚</h1> <p id="shareViewMeta"></p> </div> </div> <p id="shareViewMemo" class="share-view-head-memo hidden"></p> </header> <div class="share-view-body"> <p class="share-view-section-label">李ъ뼇 ?쒖꽌</p> <div id="shareViewList" class="share-view-songs"></div> </div> <footer class="share-view-foot">?낅낫쨌?곸긽 踰꾪듉???뚮윭 諛붾줈 ?뺤씤?섏꽭??/footer> </article> </div> </div> <div id="toast" class="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 px-4 py-2 rounded-xl bg-slate-900 text-white text-sm shadow-xl opacity-0 pointer-events-none transition-opacity"></div>  <div id="modalShare" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 modal-backdrop"> <div class="modal-panel share-modal-panel bg-white rounded-2xl w-full max-w-md"> <div class="share-modal-head"> <h3>怨듭쑀 留곹겕媛以鍮꾨릱?댁슂</h3> <p>??먯뿉寃?留곹겕瑜?蹂대궡硫?李ъ뼇 ?쒖꽌쨌?낅낫쨌?곸긽??諛붾줈 蹂????덉뼱??</p> </div> <div class="share-modal-body"> <div class="share-modal-preview"> <div class="share-modal-preview-icon" aria-hidden="true">?렦</div> <div class="min-w-0"> <div id="shareModalPreviewTitle" class="share-modal-preview-title">?ㅻ뒛??李ъ뼇 肄섑떚</div> <div id="shareModalPreviewMeta" class="share-modal-preview-meta">??/div> </div> </div> <div class="share-url-field"> <input type="text" id="shareUrlInput" readonly aria-label="怨듭쑀 留곹겕" /> <button type="button" id="btnCopyShare" class="btn-share-copy">蹂듭궗</button> </div> <div class="share-modal-foot"> <button type="button" data-close-modal="modalShare" class="btn-share-close">?リ린</button> </div> <p class="share-modal-hint">移댁뭅?ㅽ넚쨌?щ옓 ?깆뿉 遺숈뿬?ｌ뼱 怨듭쑀?섏꽭??/p> </div> </div> </div>  <div id="modalEditContiSong" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 modal-backdrop"> <div class="modal-panel bg-white rounded-2xl shadow-xl max-w-md w-full p-5 border border-slate-200 max-h-[90vh] overflow-y-auto"> <h3 id="editContiSongTitle" class="text-sm font-bold text-slate-900">怨??곸꽭 쨌 ?섏젙</h3> <p class="text-[10px] text-slate-500 mt-1">留곹겕쨌踰꾩쟾쨌援ъ“瑜??섏젙?섎㈃ ?쇱씠釉뚮윭由ъ? 肄섑떚??諛붾줈 諛섏쁺?⑸땲??</p> <div class="mt-3 space-y-2.5"> <div> <label class="text-[10px] font-medium text-slate-500 mb-1 block">?낅낫 留곹겕</label> <input type="text" id="editContiScoreUrl" class="w-full text-xs rounded-lg border border-slate-200 px-2.5 py-2 outline-none focus:ring-2 focus:ring-blue-500/25" placeholder="https://???낅낫.jpg" /> </div> <div> <label class="text-[10px] font-medium text-slate-500 mb-1 block">?좏뒠釉??곸긽 留곹겕</label> <input type="text" id="editContiVideoUrl" class="w-full text-xs rounded-lg border border-slate-200 px-2.5 py-2 outline-none focus:ring-2 focus:ring-blue-500/25" placeholder="https://youtube.com/?? /> </div> <div id="editContiLinkActions" class="share-actions-row conti-detail-link-actions"> <button type="button" id="btnEditContiOpenScore" class="share-action-btn share-action-btn-score" disabled>?뱞 ?낅낫 蹂닿린</button> <button type="button" id="btnEditContiOpenVideo" class="share-action-btn share-action-btn-video" disabled>???곸긽 蹂닿린</button> </div> <div> <label class="text-[10px] font-medium text-slate-500 mb-1 block">踰꾩쟾 (怨???븷)</label> <input type="text" id="editContiVersion" class="w-full text-xs rounded-lg border border-slate-200 px-2.5 py-2 outline-none focus:ring-2 focus:ring-blue-500/25" placeholder="?? ?쒖삩?뚯떗, 由щ뱶 蹂댁뺄" /> </div> <div class="grid grid-cols-2 gap-2"> <div> <label class="text-[10px] font-medium text-slate-500 mb-1 block">Key</label> <select id="editContiKey" class="w-full text-xs rounded-lg border border-slate-200 px-2 py-1.5 bg-white"></select> </div> <div> <label class="text-[10px] font-medium text-slate-500 mb-1 block">?쒗룷</label> <select id="editContiTempo" class="w-full text-xs rounded-lg border border-slate-200 px-2 py-1.5 bg-white"> <option value="?먮┝">?먮┝</option> <option value="鍮좊쫫">鍮좊쫫</option> </select> </div> </div> <div> <label class="text-[10px] font-medium text-slate-500 mb-1 block">怨?援ъ“ (Song Form)</label> <input type="text" id="editContiSongForm" class="w-full text-xs rounded-lg border border-slate-200 px-2.5 py-2 outline-none focus:ring-2 focus:ring-blue-500/25" placeholder="Intro -> V1 -> Chorus" /> </div> </div> <div class="flex gap-2 mt-4"> <button type="button" id="btnSaveContiSongEdit" class="flex-1 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700">???/button> <button type="button" data-close-modal="modalEditContiSong" class="px-4 py-2 rounded-lg border border-slate-200 text-sm text-slate-600 hover:bg-slate-50">痍⑥냼</button> </div> </div> </div>  <div id="modalSaveConti" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 modal-backdrop"> <div class="modal-panel bg-white rounded-2xl shadow-xl max-w-sm w-full p-5 border border-slate-200"> <h3 class="text-sm font-bold text-slate-900">肄섑떚 ???/h3> <p class="text-xs text-slate-500 mt-1">?대쫫??吏?뺥빐 ?섏쨷??遺덈윭?????덉뒿?덈떎.</p> <input type="text" id="saveContiNameInput" placeholder="?? 6??二?二쇱씪?덈같" class="mt-3 w-full text-sm rounded-lg border border-slate-200 px-3 py-2 outline-none focus:ring-2 focus:ring-blue-500/25" /> <div class="flex gap-2 mt-3"> <button type="button" id="btnConfirmSaveConti" class="flex-1 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700">???/button> <button type="button" data-close-modal="modalSaveConti" class="px-4 py-2 rounded-lg border border-slate-200 text-sm">痍⑥냼</button> </div> </div> </div>  <div id="modalLayoutEditor" class="hidden fixed inset-0 flex flex-col modal-backdrop"> <div class="layout-editor-toolbar"> <div> <h3 class="text-sm font-bold text-slate-900">?낅낫 ?꾩튂 쨌 ?ш린 ?몄쭛</h3> <p class="text-[10px] text-slate-500 mt-0.5">?섏씠吏媛??쒕옒洹??대룞 쨌 ?고븯???먯쑝濡??ш린 議곗젅 쨌 [+ ???섏씠吏異붽?]</p> </div> <div class="layout-orientation-toggle" role="group" aria-label="?몄뇙 諛⑺뼢"> <button type="button" id="btnLayoutPortrait" class="layout-orient-btn active" data-orientation="portrait">?뱞 ?몃줈 諛⑺뼢 ?몄뇙</button> <button type="button" id="btnLayoutLandscape" class="layout-orient-btn" data-orientation="landscape">?뱤 媛濡?諛⑺뼢 ?몄뇙</button> </div> <div class="flex gap-2"> <button type="button" id="btnLayoutPrint" class="px-4 py-2 rounded-lg bg-slate-900 text-white text-sm font-semibold hover:bg-slate-800">???곹깭濡?PDF ?몄뇙</button> <button type="button" id="btnLayoutClose" class="px-4 py-2 rounded-lg border border-slate-200 bg-white text-sm font-medium text-slate-700 hover:bg-slate-50">?몄쭛 痍⑥냼</button> </div> </div> <div id="layoutToolsPanel" class="layout-tools-panel"> <div class="layout-tools-group"> <span class="layout-tools-group-title">二쇱꽍 ?꾧뎄</span> <div class="flex flex-wrap gap-1"> <button type="button" class="layout-tool-btn active" data-layout-tool="select">?좏깮</button> <button type="button" class="layout-tool-btn" data-layout-tool="text">?띿뒪??/button> <button type="button" class="layout-tool-btn" data-layout-tool="rect">?ㅻえ</button> <button type="button" class="layout-tool-btn" data-layout-tool="ellipse">?숆렇?쇰?</button> <button type="button" class="layout-tool-btn" data-layout-tool="highlight">?뺢킅??/button> </div> <div id="layoutToolOptions" class="flex flex-wrap gap-2 items-center text-[10px] text-slate-600"> <span id="layoutOptText" class="hidden flex flex-wrap gap-1 items-center">湲?? <select id="layoutTextSize" class="text-[10px] rounded border px-1 py-0.5"><option value="12">12</option><option value="14" selected>14</option><option value="18">18</option><option value="24">24</option></select> <button type="button" class="layout-tool-btn" data-text-color="#0f172a">寃??/button> <button type="button" class="layout-tool-btn" data-text-color="#dc2626">鍮④컯</button> <button type="button" class="layout-tool-btn" data-text-color="#2563eb">?뚮옉</button> </span> <span id="layoutOptShape" class="hidden flex flex-wrap gap-1 items-center">?꾪삎 <button type="button" class="layout-tool-btn" data-shape-color="rgba(239,68,68,0.4)">鍮④컯</button> <button type="button" class="layout-tool-btn" data-shape-color="rgba(37,99,235,0.4)">?뚮옉</button> <button type="button" class="layout-tool-btn" data-shape-color="rgba(250,204,21,0.45)">?몃옉</button> </span> <span id="layoutOptHighlight" class="hidden flex flex-wrap gap-1 items-center">?뺢킅 <button type="button" class="layout-tool-btn" data-hl-color="rgba(250,204,21,0.4)">?몃옉</button> <button type="button" class="layout-tool-btn" data-hl-color="rgba(74,222,128,0.4)">珥덈줉</button> <button type="button" class="layout-tool-btn" data-hl-color="rgba(244,114,182,0.4)">遺꾪솉</button> <select id="layoutHlSize" class="text-[10px] rounded border px-1 py-0.5"><option value="thin">?뉕쾶</option><option value="medium" selected>以묎컙</option><option value="thick">?먭퍖寃?/option></select> </span> </div> </div> <details class="layout-tools-details"> <summary>?몄뇙 ?ㅻ뜑 쨌 硫붾え (Page 1 ?곷떒) ???쇱튂湲?/summary> <div class="layout-tools-details-body"> <label class="text-[10px] text-slate-600 flex items-center gap-1"><input type="checkbox" id="printHeaderEnabled" checked /> ?ㅻ뜑쨌硫붾え ?몄뇙臾쇱뿉 ?ы븿</label> <div class="layout-print-header-box"> <input type="text" id="printHeaderDate" placeholder="2026??6??4?? /> <input type="text" id="printHeaderChurch" placeholder="00援먰쉶" /> <input type="text" id="printHeaderService" placeholder="二쇱씪 泥?뀈?덈같 肄섑떚" /> </div> <textarea id="layoutContiMemo" class="layout-header-memo-input" rows="1" placeholder="?ㅻ뒛??肄섑떚 ?꾩껜 硫붾え (?ㅻ뜑???쒖떆)"></textarea> <div class="conti-flag-row"> <label><input type="checkbox" id="layoutMemoPrint" checked /> PDF ?몄뇙</label> <label><input type="checkbox" id="layoutMemoShare" checked /> 怨듭쑀 留곹겕</label> </div> </div> </details> </div> <div id="layoutEditorScroll" class="layout-editor-scroll scrollbar-thin"></div> <div class="layout-editor-footer"> <label class="text-xs text-slate-600 flex items-center gap-2"> ???섏씠吏 ?ш린 <select id="newPagePresetSelect" class="text-xs rounded-lg border border-slate-200 px-2 py-1.5 bg-white"></select> </label> <button type="button" id="btnAddLayoutPage" class="px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 shadow-sm">+ ???섏씠吏異붽?</button> </div> </div> <div id="printArea" aria-hidden="true"></div> <script> /** * 怨듭쑀 留곹겕媛 ?대┫ 怨듦컻 ?몄뒪??(Cloudflare Pages). * 而ㅼ뒪? ?꾨찓?몄쓣 ?곕㈃ ?ш린 URL留?諛붽퓭 二쇱꽭?? */ window.SHARE_BASE_URL = 'https://worship-conti.pages.dev'; window.FIREBASE_CONFIG = { apiKey: 'AIzaSyDXdKfOC2WJlgstDnQkNVzZCDY0j1pbVNc', authDomain: 'conti-75953.firebaseapp.com', projectId: 'conti-75953', storageBucket: 'conti-75953.firebasestorage.app', messagingSenderId: '276886244469', appId: '1:276886244469:web:7f681713b76774a0a13c3c', measurementId: 'G-X4N2MC3SZJ', }; </script> <script type="module"> (async function initFirebaseBridge() { if (window.__VIEWER_MODE) { window.__firebaseBridge = { isReady: false }; window.dispatchEvent(new Event('firebase-bridge-ready')); return; } const { initializeApp } = await import('firebase/app'); const { getAuth, GoogleAuthProvider, signInWithRedirect, signInWithPopup, getRedirectResult: firebaseGetRedirectResult, signOut, onAuthStateChanged, setPersistence, browserLocalPersistence, } = await import('firebase/auth'); const { getFirestore, doc, getDoc, setDoc, collection, addDoc, getDocs, deleteDoc, query, orderBy, onSnapshot, deleteField } = await import('firebase/firestore'); const { getAnalytics, isSupported } = await import('firebase/analytics'); const FIREBASE_CONFIG = window.FIREBASE_CONFIG || {}; function isConfigReady() { return Boolean( FIREBASE_CONFIG.apiKey && FIREBASE_CONFIG.authDomain && FIREBASE_CONFIG.projectId ); } let auth = null; let db = null; let redirectResultPromise = null; let authSessionPromise = null; let latestAuthUser = null; let authBootPromise = null; let authListenerBound = false; function bindEarlyAuthListener() { if (!auth || authListenerBound) return; authListenerBound = true; onAuthStateChanged(auth, (user) => { latestAuthUser = user; window.__authSession = { user: user || null, uid: user?.uid || null, resolved: true, }; window.dispatchEvent(new CustomEvent('firebase-auth-state', { detail: { user } })); }); } async function bootAuth() { if (!auth) return null; if (authBootPromise) return authBootPromise; authBootPromise = (async () => { try { await setPersistence(auth, browserLocalPersistence); } catch (err) { console.warn('[Firebase Auth] persistence setup failed', err); } try { await resolveRedirectResult(); } catch (err) { if (err?.code !== 'auth/no-auth-event') { console.warn('[Firebase Auth] getRedirectResult failed', err); } } await auth.authStateReady(); latestAuthUser = auth.currentUser || latestAuthUser || null; return latestAuthUser; })(); return authBootPromise; } function getAuthUser() { return latestAuthUser || auth?.currentUser || null; } async function waitForAuthUser(timeoutMs = 12000) { if (!auth) return null; try { await bootAuth(); } catch (err) { console.warn('[Firebase Auth] bootAuth failed', err); } let user = getAuthUser(); if (user) return user; const deadline = Date.now() + timeoutMs; while (Date.now() < deadline) { await auth.authStateReady(); user = getAuthUser(); if (user) return user; await new Promise((resolve) => setTimeout(resolve, 120)); } return getAuthUser(); } function resolveRedirectResult() { if (!auth) return Promise.resolve(null); if (!redirectResultPromise) { redirectResultPromise = firebaseGetRedirectResult(auth).catch((err) => { if (err?.code === 'auth/no-auth-event') return null; throw err; }); } return redirectResultPromise; } async function waitForAuthenticatedUser(expectedUid) { const user = await waitForAuthUser(12000); if (!user) return null; if (expectedUid && user.uid !== expectedUid) { const current = getAuthUser(); if (current?.uid === expectedUid) return current; return null; } try { await user.getIdToken(false); } catch (err) { console.warn('[Firebase Auth] getIdToken failed', err); try { await user.getIdToken(true); } catch (refreshErr) { console.warn('[Firebase Auth] getIdToken refresh failed', refreshErr); return null; } } return user; } async function assertAuthUid(uid) { if (!uid) throw new Error('auth/user-not-ready'); let user = await waitForAuthenticatedUser(uid); if (!user) { user = getAuthUser(); } if (!user?.uid || user.uid !== uid) throw new Error('auth/user-not-ready'); return user; } async function bootstrapAuthSession() { if (!auth) return { redirectResult: null, user: null }; if (authSessionPromise) return authSessionPromise; authSessionPromise = (async () => { await bootAuth(); let redirectResult = null; try { redirectResult = await resolveRedirectResult(); } catch (err) { console.warn('[Firebase Auth] getRedirectResult failed', err); } const user = redirectResult?.user || getAuthUser() || null; if (user) latestAuthUser = user; return { redirectResult, user }; })(); return authSessionPromise; } function shouldUseRedirectSignIn() { if (window.location.protocol === 'file:') return false; const host = window.location.hostname; if (host === 'localhost' || host === '127.0.0.1') { const ua = navigator.userAgent.toLowerCase(); if (/kakaotalk/i.test(ua)) return true; if (/instagram|fbav|fban|line\//i.test(ua)) return true; if (/android/i.test(ua) && /;\s*wv\)/i.test(ua)) return true; return false; } try { if (sessionStorage.getItem('worshipConti_preferRedirectLogin') === '1') return true; } catch (_) {} const ua = navigator.userAgent.toLowerCase(); if (/kakaotalk/i.test(ua)) return true; if (/instagram|fbav|fban|line\//i.test(ua)) return true; if (/android/i.test(ua) && /;\s*wv\)/i.test(ua)) return true; if (/iphone|ipod|android.*mobile/i.test(ua)) return true; if (/safari/i.test(ua) && !/chrome|chromium|crios|fxios|edg\//i.test(ua)) return true; return false; } function markAuthRedirectPending() { /* redirect-only marker; no blocking splash */ } async function startGoogleRedirect(auth, provider) { await signInWithRedirect(auth, provider); } const POPUP_FALLBACK_CODES = new Set([ 'auth/popup-blocked', 'auth/cancelled-popup-request', 'auth/operation-not-supported-in-this-environment', 'auth/web-storage-unsupported', ]); if (isConfigReady()) { try { const app = initializeApp(FIREBASE_CONFIG); auth = getAuth(app); db = getFirestore(app); bindEarlyAuthListener(); redirectResultPromise = resolveRedirectResult(); authBootPromise = bootAuth(); if (FIREBASE_CONFIG.measurementId) { isSupported().then((supported) => { if (supported) getAnalytics(app); }).catch(() => {}); } } catch (err) { console.warn('Firebase init failed', err); } } async function fetchUserProfile(uid) { if (!db || !uid || !auth) return null; await assertAuthUid(uid); const snap = await getDoc(doc(db, 'users', uid)); return snap.exists() ? snap.data() : null; } async function upsertUserProfile(uid, profile) { if (!db || !uid || !auth) return; await assertAuthUid(uid); await setDoc(doc(db, 'users', uid), sanitizeForFirestore({ ...profile, syncedAt: new Date().toISOString(), }), { merge: true }); } function buildSongFirestorePayload(songInput) { const song = songInput || {}; return { title: (song.title || '').trim(), key: song.key || '', tempo: song.tempo || '', themes: Array.isArray(song.themes) ? song.themes : [], composer: (song.composer || '').trim(), lyricist: (song.lyricist || '').trim(), version: (song.version || '').trim(), scoreUrl: (song.scoreUrl || '').trim(), videoUrl: (song.videoUrl || '').trim(), }; } async function fetchUserSongs(uid) { if (!db || !uid || !auth) return []; await assertAuthUid(uid); const snap = await getDocs(query( collection(db, 'users', uid, 'my_songs'), orderBy('createdAt', 'desc'), )); return snap.docs.map((item) => ({ id: item.id, ...item.data() })); } async function addUserSong(uid, songInput) { if (!db || !uid || !auth) throw new Error('Firestore媛以鍮꾨릺吏 ?딆븯?듬땲??'); const user = await assertAuthUid(uid); const writeUid = user.uid; const now = new Date().toISOString(); const payload = sanitizeForFirestore({ ...buildSongFirestorePayload(songInput), createdAt: songInput?.createdAt || now, updatedAt: now, }); const songsCollection = collection(db, 'users', writeUid, 'my_songs'); const writeSong = () => addDoc(songsCollection, payload); try { const ref = await writeSong(); return { id: ref.id, ...payload }; } catch (err) { if (err?.code === 'permission-denied') { await user.getIdToken(true); const ref = await writeSong(); return { id: ref.id, ...payload }; } throw err; } } async function updateUserSong(uid, songId, songInput) { if (!db || !uid || !auth || !songId) throw new Error('Firestore媛以鍮꾨릺吏 ?딆븯?듬땲??'); await assertAuthUid(uid); const existing = await getDoc(doc(db, 'users', uid, 'my_songs', songId)); const now = new Date().toISOString(); const payload = sanitizeForFirestore({ ...buildSongFirestorePayload(songInput), createdAt: existing.data()?.createdAt || songInput?.createdAt || now, updatedAt: now, }); await setDoc(doc(db, 'users', uid, 'my_songs', songId), payload, { merge: true }); return { id: songId, ...payload }; } async function deleteUserSong(uid, songId) { if (!db || !uid || !auth || !songId) return; await assertAuthUid(uid); await deleteDoc(doc(db, 'users', uid, 'my_songs', songId)); } function extractLegacyMySongsFieldEntries(profile) { if (!profile || typeof profile !== 'object') return { entries: [], hasMySongsField: false, hasSongsField: false }; const hasMySongsField = Array.isArray(profile.my_songs); const hasSongsField = Array.isArray(profile.songs); const seen = new Set(); const entries = []; const append = (list) => { if (!Array.isArray(list)) return; list.forEach((song) => { if (!song || typeof song !== 'object') return; const dedupeKey = String(song.id || '').trim() || `${(song.title || '').trim()}::${song.key || ''}`; if (seen.has(dedupeKey)) return; seen.add(dedupeKey); entries.push(song); }); }; append(profile.my_songs); append(profile.songs); return { entries, hasMySongsField, hasSongsField }; } async function upsertUserSongFromLegacy(uid, song) { const now = new Date().toISOString(); const payload = sanitizeForFirestore({ ...buildSongFirestorePayload(song), createdAt: song?.createdAt || now, updatedAt: song?.updatedAt || now, }); const legacyId = String(song?.id || '').trim(); if (legacyId && !legacyId.startsWith('sample-')) { await setDoc(doc(db, 'users', uid, 'my_songs', legacyId), payload, { merge: true }); return { id: legacyId, ...payload }; } const ref = await addDoc(collection(db, 'users', uid, 'my_songs'), payload); return { id: ref.id, ...payload }; } async function migrateLegacyMySongsField(uid) { if (!db || !uid || !auth) return { migrated: 0, skipped: 0, failed: 0, fieldRemoved: false }; await assertAuthUid(uid); const profileSnap = await getDoc(doc(db, 'users', uid)); if (!profileSnap.exists()) return { migrated: 0, skipped: 0, failed: 0, fieldRemoved: false }; const profile = profileSnap.data() || {}; const { entries, hasMySongsField, hasSongsField } = extractLegacyMySongsFieldEntries(profile); if (!hasMySongsField && !hasSongsField) { return { migrated: 0, skipped: 0, failed: 0, fieldRemoved: false }; } if (!entries.length) { await setDoc(doc(db, 'users', uid), sanitizeForFirestore({ my_songs: deleteField(), songs: deleteField(), legacyMySongsMigratedAt: new Date().toISOString(), updatedAt: new Date().toISOString(), }), { merge: true }); return { migrated: 0, skipped: 0, failed: 0, fieldRemoved: true }; } let existingIds = new Set(); try { const existing = await fetchUserSongs(uid); existingIds = new Set(existing.map((item) => item.id).filter(Boolean)); } catch (err) { console.warn('[my_songs migration] existing subcollection lookup failed', err); } let migrated = 0; let skipped = 0; let failed = 0; for (const song of entries) { if (!song?.title?.trim()) { skipped += 1; continue; } const legacyId = String(song.id || '').trim(); if (legacyId.startsWith('sample-')) { skipped += 1; continue; } if (legacyId && existingIds.has(legacyId)) { skipped += 1; continue; } try { const saved = await upsertUserSongFromLegacy(uid, song); if (saved?.id) existingIds.add(saved.id); migrated += 1; } catch (err) { failed += 1; console.warn('[my_songs migration] failed for song', song?.title || legacyId, err); } } if (failed > 0) { return { migrated, skipped, failed, fieldRemoved: false }; } const cleanup = { legacyMySongsMigratedAt: new Date().toISOString(), updatedAt: new Date().toISOString(), }; if (hasMySongsField) cleanup.my_songs = deleteField(); if (hasSongsField) cleanup.songs = deleteField(); await setDoc(doc(db, 'users', uid), sanitizeForFirestore(cleanup), { merge: true }); return { migrated, skipped, failed: 0, fieldRemoved: true }; } function subscribeUserSongs(uid, onChange, onError) { if (!db || !uid) return () => {}; let unsubscribe = () => {}; let cancelled = false; void (async () => { try { await assertAuthUid(uid); if (cancelled) return; const songsQuery = query( collection(db, 'users', uid, 'my_songs'), orderBy('createdAt', 'desc'), ); unsubscribe = onSnapshot( songsQuery, (snap) => { onChange(snap.docs.map((item) => ({ id: item.id, ...item.data() }))); }, (err) => { if (typeof onError === 'function') onError(err); }, ); } catch (err) { if (typeof onError === 'function') onError(err); } })(); return () => { cancelled = true; unsubscribe(); }; } function contiSongsCollection(uid, contiId) { return collection(db, 'users', uid, 'contis', contiId, 'songs'); } function buildContiSongDocPayload(songEntry) { const entry = songEntry || {}; return { title: (entry.title || '').trim(), key: entry.key || '', bpm: entry.bpm ?? entry.tempo ?? '', sequence: Number(entry.sequence) || 0, mySongId: entry.mySongId || entry.songId || '', }; } function buildLegacyContiSongEntries(conti, mySongsById = {}) { if (Array.isArray(conti?.songs) && conti.songs.length) { return conti.songs.map((song, index) => ({ title: (song?.title || song?.ti || '').trim(), key: (song?.key || song?.k || '').trim(), bpm: song?.bpm ?? song?.tempo ?? song?.tp ?? '', sequence: Number(song?.sequence) || index + 1, mySongId: song?.mySongId || song?.songId || song?.id || '', })).filter((entry) => entry.title || entry.mySongId); } if (Array.isArray(conti?.songIds) && conti.songIds.length) { return conti.songIds.map((songId, index) => { const warehouse = mySongsById[songId]; return { title: (warehouse?.title || '').trim(), key: (warehouse?.key || '').trim(), bpm: warehouse?.tempo || '', sequence: index + 1, mySongId: songId, }; }).filter((entry) => entry.title || entry.mySongId); } return []; } async function addContiSongs(uid, contiId, songs, options = {}) { if (!db || !uid || !contiId || !auth) return []; await assertAuthUid(uid); const allowMissingTitle = options.allowMissingTitle === true; const created = []; for (const songEntry of songs || []) { const payload = sanitizeForFirestore(buildContiSongDocPayload(songEntry)); if (!payload.sequence) continue; if (!payload.title && !allowMissingTitle) continue; if (!payload.title && allowMissingTitle) { payload.title = payload.mySongId ? `怨?${payload.sequence}` : `?쒕ぉ ?놁쓬 ${payload.sequence}`; } const ref = await addDoc(contiSongsCollection(uid, contiId), payload); created.push({ id: ref.id, ...payload }); } return created; } async function fetchUserContiSongs(uid, contiId) { if (!db || !uid || !contiId || !auth) return []; await assertAuthUid(uid); const snap = await getDocs(query( contiSongsCollection(uid, contiId), orderBy('sequence', 'asc'), )); return snap.docs.map((item) => ({ id: item.id, ...item.data() })); } async function deleteContiSongs(uid, contiId) { if (!db || !uid || !contiId || !auth) return; await assertAuthUid(uid); const snap = await getDocs(contiSongsCollection(uid, contiId)); await Promise.all(snap.docs.map((item) => deleteDoc(item.ref))); } async function addUserConti(uid, contiPayload, songs = []) { if (!db || !uid || !auth) throw new Error('Firestore媛以鍮꾨릺吏 ?딆븯?듬땲??'); await assertAuthUid(uid); const now = new Date().toISOString(); const { songIds, songs: _legacySongs, ...contiFields } = contiPayload || {}; const ref = await addDoc(collection(db, 'users', uid, 'contis'), sanitizeForFirestore({ ...contiFields, createdAt: contiPayload?.createdAt || now, updatedAt: now, })); const contiId = ref.id; await addContiSongs(uid, contiId, songs || []); return contiId; } async function fetchUserContis(uid) { if (!db || !uid || !auth) return []; await assertAuthUid(uid); const snap = await getDocs(query( collection(db, 'users', uid, 'contis'), orderBy('createdAt', 'desc'), )); return snap.docs.map((item) => ({ id: item.id, ...item.data() })); } async function fetchUserContisWithSongs(uid) { const contis = await fetchUserContis(uid); return Promise.all(contis.map(async (conti) => { const songs = await fetchUserContiSongs(uid, conti.id); return { ...conti, songs }; })); } async function migrateLegacyContiArrayFields(uid) { if (!db || !uid || !auth) return { migrated: 0, skipped: 0 }; await assertAuthUid(uid); const contis = await fetchUserContis(uid); if (!contis.length) return { migrated: 0, skipped: 0 }; const mySongsById = {}; try { const mySongs = await fetchUserSongs(uid); mySongs.forEach((song) => { if (song?.id) mySongsById[song.id] = song; }); } catch (err) { console.warn('[Conti migration] my_songs lookup failed; continuing with legacy arrays only', err); } let migrated = 0; let skipped = 0; for (const conti of contis) { const hasLegacyArray = ( (Array.isArray(conti.songs) && conti.songs.length > 0) || (Array.isArray(conti.songIds) && conti.songIds.length > 0) ); if (!hasLegacyArray) { skipped += 1; continue; } try { const existing = await fetchUserContiSongs(uid, conti.id); if (existing.length) { skipped += 1; continue; } const entries = buildLegacyContiSongEntries(conti, mySongsById); if (!entries.length) { skipped += 1; continue; } const created = await addContiSongs(uid, conti.id, entries, { allowMissingTitle: true }); if (!created.length) { skipped += 1; continue; } await setDoc(doc(db, 'users', uid, 'contis', conti.id), sanitizeForFirestore({ songs: deleteField(), songIds: deleteField(), legacySongsMigratedAt: new Date().toISOString(), updatedAt: new Date().toISOString(), }), { merge: true }); migrated += 1; } catch (err) { skipped += 1; console.warn(`[Conti migration] failed for conti ${conti.id}`, err); } } return { migrated, skipped }; } async function deleteUserConti(uid, contiId) { if (!db || !uid || !auth || !contiId) return; await assertAuthUid(uid); await deleteContiSongs(uid, contiId); await deleteDoc(doc(db, 'users', uid, 'contis', contiId)); } async function migrateLegacyUserData(uid) { if (!db || !uid || !auth) return false; try { await assertAuthUid(uid); const legacySnap = await getDoc(doc(db, 'users', uid, 'data', 'app')); if (!legacySnap.exists()) return false; const data = legacySnap.data() || {}; const currentUser = auth.currentUser; if (Array.isArray(data.songs)) { for (const song of data.songs) { if (!song?.title || String(song.id || '').startsWith('sample-')) continue; await addUserSong(uid, song); } } if (Array.isArray(data.savedContis)) { for (const conti of data.savedContis) { const { songIds, ...contiFields } = conti; const songs = Array.isArray(songIds) ? songIds.map((songId, index) => { const legacySong = (data.songs || []).find((s) => s.id === songId); return { title: legacySong?.title || '', key: legacySong?.key || '', bpm: legacySong?.tempo || '', sequence: index + 1, mySongId: songId, }; }) : []; await addUserConti(uid, { ...contiFields, createdAt: conti.createdAt || conti.updatedAt || new Date().toISOString(), }, songs); } } await upsertUserProfile(uid, { email: currentUser?.email || '', displayName: currentUser?.displayName || '', photoURL: currentUser?.photoURL || '', themeCatalog: data.themeCatalog || [], userThemes: data.userThemes || [], removedThemes: data.removedThemes || [], currentConti: data.currentConti || null, conteHistory: data.conteHistory || [], migratedFromLegacy: true, updatedAt: data.updatedAt || new Date().toISOString(), }); return true; } catch (err) { if (err?.code === 'permission-denied') { console.warn('[Legacy migration] data/app access denied; skipping', err); return false; } throw err; } } const SHARED_CONTIS_COLLECTION = 'shared_contis'; function sanitizeForFirestore(value) { if (value === undefined) return undefined; if (value === null) return null; if (Array.isArray(value)) { return value .map((item) => sanitizeForFirestore(item)) .filter((item) => item !== undefined); } if (typeof value === 'object') { const out = {}; Object.entries(value).forEach(([key, item]) => { const cleaned = sanitizeForFirestore(item); if (cleaned !== undefined) out[key] = cleaned; }); return out; } return value; } async function saveSharedConti(payload) { if (!db) throw new Error('Firestore媛以鍮꾨릺吏 ?딆븯?듬땲??'); const ref = await addDoc(collection(db, SHARED_CONTIS_COLLECTION), sanitizeForFirestore({ ...payload, createdAt: new Date().toISOString(), })); return ref.id; } async function fetchSharedConti(shareId) { if (!db || !shareId) return null; const snap = await getDoc(doc(db, SHARED_CONTIS_COLLECTION, shareId)); return snap.exists() ? snap.data() : null; } window.__firebaseBridge = { isReady: isConfigReady() && Boolean(auth && db), auth, getAuthUser, bootAuth, waitForAuthUser, resolveRedirectResult, bootstrapAuthSession, waitForAuthenticatedUser, usesRedirectLogin: shouldUseRedirectSignIn, signInWithGoogle: async () => { if (!auth) throw new Error('Firebase媛 ?ㅼ젙?섏? ?딆븯?듬땲??'); const provider = new GoogleAuthProvider(); provider.setCustomParameters({ prompt: 'select_account' }); if (shouldUseRedirectSignIn()) { await startGoogleRedirect(auth, provider); return null; } try { return await signInWithPopup(auth, provider); } catch (err) { if (POPUP_FALLBACK_CODES.has(err?.code)) { try { sessionStorage.setItem('worshipConti_preferRedirectLogin', '1'); } catch (_) {} await startGoogleRedirect(auth, provider); return null; } throw err; } }, signOut: () => (auth ? signOut(auth) : Promise.resolve()), onAuthStateChanged: (cb) => { if (!auth) { cb(null); return () => {}; } return onAuthStateChanged(auth, cb); }, fetchUserProfile, upsertUserProfile, fetchUserSongs, addUserSong, updateUserSong, deleteUserSong, subscribeUserSongs, addUserConti, fetchUserContis, fetchUserContisWithSongs, fetchUserContiSongs, deleteUserConti, migrateLegacyUserData, migrateLegacyMySongsField, migrateLegacyContiArrayFields, saveSharedConti, fetchSharedConti, }; window.dispatchEvent(new Event('firebase-bridge-ready')); })(); </script> <script> const FIREBASE_CONFIG = window.FIREBASE_CONFIG || {}; /** @deprecated 濡쒖뺄 怨?罹먯떆 ??留덉씠洹몃젅?댁뀡 ???쒓굅??*/ const LEGACY_SONGS_STORAGE_KEY = 'worshipContiBuilder_songs'; const THEMES_STORAGE_KEY = 'worshipContiBuilder_themeCatalog'; const USER_THEMES_STORAGE_KEY = 'worshipContiBuilder_userThemes'; const REMOVED_THEMES_STORAGE_KEY = 'worshipContiBuilder_removedThemes'; const CURRENT_CONTI_KEY = 'worshipContiBuilder_currentConti'; const SAVED_CONTIS_KEY = 'worshipContiBuilder_savedContis'; const CONTE_HISTORY_KEY = 'conteHistory'; const CONTE_HISTORY_MAX = 200; const APP_CALENDAR_DAY_KEY = 'worshipContiBuilder_calendarDay'; const REGISTER_DRAFT_KEY = 'worshipContiBuilder_registerDraft'; const SHARE_ID_QUERY_KEY = 'id'; const SHARE_DATE_QUERY_KEY = 'd'; const SHARE_TITLE_QUERY_KEY = 't'; const SHARE_DARK_MODE_KEY = 'worshipContiBuilder_shareDark'; const AUTH_REDIRECT_PREF_KEY = 'worshipConti_preferRedirectLogin'; const LEGACY_CONTI_ARRAYS_MIGRATED_KEY = 'worshipConti_legacyContiArraysMigrated'; const LEGACY_MY_SONGS_FIELD_MIGRATED_KEY = 'worshipConti_legacyMySongsFieldMigrated'; const PUBLIC_SHARE_ORIGIN = 'https://worship-conti.pages.dev'; const DEFAULT_SHARE_ORIGIN = PUBLIC_SHARE_ORIGIN; const FIREBASE_PROJECT_ID = FIREBASE_CONFIG?.projectId || 'conti-75953'; const SHARE_PREVIEW_TITLE = '?솋 李ъ뼇 ?쒖꽌 諛??곸긽 留곹겕 怨듭쑀'; const SHARE_PREVIEW_DESCRIPTION = '留곹겕瑜??대┃?댁꽌 李ъ뼇 ?낅낫? ?곸긽???뺤씤?대낫?몄슂.'; const DEFAULT_FORM_TAGS = ['Intro', 'V1', 'V2', 'Chorus', 'Bridge', 'Outro']; const HL_HEIGHTS = { thin: 10, medium: 18, thick: 32 }; const DEFAULT_THEME_CATALOG = ['???, '遺??湲곗겏', '?숉뻾', '李ъ뼇', '?꾨줈', '?좉탳', '?뚯떊', '?뚭컻', '媛먯궗', '湲곕룄']; /** ?μ“ 17 + ?⑥“ 17 (?돠룻뵆???쒓린 紐⑤몢 ?ы븿, 李ъ뼇 ?낅낫?먯꽌 ?곕뒗 ?꾩껜 Key) */ const ALL_KEYS = [ 'C', 'C#', 'Db', 'D', 'D#', 'Eb', 'E', 'F', 'F#', 'Gb', 'G', 'G#', 'Ab', 'A', 'A#', 'Bb', 'B', 'Cm', 'C#m', 'Dbm', 'Dm', 'D#m', 'Ebm', 'Em', 'Fm', 'F#m', 'Gbm', 'Gm', 'G#m', 'Abm', 'Am', 'A#m', 'Bbm', 'Bm', ]; const THEME_COLORS = [ 'bg-violet-100 text-violet-700 border-violet-200', 'bg-emerald-100 text-emerald-700 border-emerald-200', 'bg-rose-100 text-rose-700 border-rose-200', 'bg-amber-100 text-amber-700 border-amber-200', 'bg-cyan-100 text-cyan-700 border-cyan-200', 'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-200', ]; if (!window.__authSession) { window.__authSession = { user: null, uid: null, resolved: false }; } const appState = { songs: [], conti: [], contiTitle: '', contiDate: '', contiWorshipInfo: '', contiMemo: '', contiMemoPrint: true, contiMemoShare: true, contiSongExtras: {}, customFormTags: [], storedLayoutPages: null, printHeader: { enabled: true, dateText: '', church: '', service: '' }, layoutTool: 'select', layoutToolOpts: { textColor: '#0f172a', textSize: 14, shapeColor: 'rgba(239,68,68,0.4)', hlColor: 'rgba(250,204,21,0.4)', hlSize: 'medium', }, selectedAnnotationId: null, filters: { tempo: 'all', key: 'all', search: '' }, themeCatalog: [], userThemes: [], removedThemes: [], formThemes: new Set(), themeDropdownOpen: false, leftTab: 'browse', editingSongId: null, sharedSnapshot: null, rightContiTab: 'conti', editingContiSongId: null, layoutPages: [], layoutOrientation: 'portrait', layoutDrag: null, firebaseUser: null, authUid: null, authReady: false, authStateResolved: false, cloudSyncReady: false, cloudSyncInProgress: false, songsLoading: false, songsLoadError: null, }; let cloudSyncTimer = null; let userSongsUnsubscribe = null; function legacyContiArraysMigrationKey(uid) { return `${LEGACY_CONTI_ARRAYS_MIGRATED_KEY}_${uid}`; } function hasRunLegacyContiArraysMigration(uid) { if (!uid) return false; try { return sessionStorage.getItem(legacyContiArraysMigrationKey(uid)) === '1'; } catch (_) { return false; } } function markLegacyContiArraysMigrationDone(uid) { if (!uid) return; try { sessionStorage.setItem(legacyContiArraysMigrationKey(uid), '1'); } catch (_) {} } function clearLegacyContiArraysMigrationFlag(uid) { if (!uid) return; try { sessionStorage.removeItem(legacyContiArraysMigrationKey(uid)); } catch (_) {} } async function runLegacyContiArraysMigrationOnce(uid) { if (!uid || hasRunLegacyContiArraysMigration(uid)) return null; const bridge = window.__firebaseBridge; if (!bridge?.migrateLegacyContiArrayFields) return null; try { const result = await bridge.migrateLegacyContiArrayFields(uid); markLegacyContiArraysMigrationDone(uid); return result; } catch (err) { console.warn('Legacy conti array migration failed', err); return null; } } function legacyMySongsFieldMigrationKey(uid) { return `${LEGACY_MY_SONGS_FIELD_MIGRATED_KEY}_${uid}`; } function hasRunLegacyMySongsFieldMigration(uid) { if (!uid) return false; try { return sessionStorage.getItem(legacyMySongsFieldMigrationKey(uid)) === '1'; } catch (_) { return false; } } function markLegacyMySongsFieldMigrationDone(uid) { if (!uid) return; try { sessionStorage.setItem(legacyMySongsFieldMigrationKey(uid), '1'); } catch (_) {} } function clearLegacyMySongsFieldMigrationFlag(uid) { if (!uid) return; try { sessionStorage.removeItem(legacyMySongsFieldMigrationKey(uid)); } catch (_) {} } async function runLegacyMySongsFieldMigrationOnce(uid) { if (!uid || hasRunLegacyMySongsFieldMigration(uid)) return null; const bridge = window.__firebaseBridge; if (!bridge?.migrateLegacyMySongsField) return null; try { const result = await bridge.migrateLegacyMySongsField(uid); if (result?.fieldRemoved || (result?.migrated === 0 && result?.failed === 0)) { markLegacyMySongsFieldMigrationDone(uid); } return result; } catch (err) { console.warn('Legacy my_songs field migration failed', err); return null; } } function getFirebaseUid() { return window.__authSession?.uid || appState.authUid || appState.firebaseUser?.uid || null; } function isAuthSessionPending() { if (!window.__authSession?.resolved) return true; if (appState.firebaseUser && !getFirebaseUid()) return true; return false; } function syncAuthSession(user) { window.__authSession = { user: user || null, uid: user?.uid || null, resolved: true, }; appState.firebaseUser = user || null; appState.authUid = user?.uid || null; appState.authReady = Boolean(user?.uid); appState.authStateResolved = true; } function applyAuthUserState(user) { syncAuthSession(user); try { updateAuthUI(); updateRegisterButtonState(); } catch (err) { console.warn('[Auth UI] updateAuthUI failed', err); } } function clearAuthSession() { window.__authSession = { user: null, uid: null, resolved: true }; appState.firebaseUser = null; appState.authUid = null; appState.authReady = false; appState.authStateResolved = true; } function handleFirebaseAuthLogout() { clearLegacyContiArraysMigrationFlag(appState.firebaseUser?.uid); clearLegacyMySongsFieldMigrationFlag(appState.firebaseUser?.uid); stopUserSongsSubscription(); clearAuthSession(); appState.cloudSyncReady = false; appState.songs = []; appState.songsLoading = false; appState.songsLoadError = null; updateAuthUI(); renderLibrary(); } async function ensureAuthenticatedUid(options = {}) { const timeoutMs = options.timeoutMs || 12000; if (isAuthSessionPending() && !options.allowWait) return null; const bridge = await waitForFirebaseBridge(timeoutMs); if (!bridge?.isReady) return null; if (bridge.bootAuth) { try { await bridge.bootAuth(); } catch (err) { console.warn('[Firebase Auth] bootAuth during ensureAuthenticatedUid failed', err); } } let user = window.__authSession?.user || null; if (!user?.uid && bridge.waitForAuthUser) { user = await bridge.waitForAuthUser(timeoutMs); } if (!user?.uid) { user = bridge.getAuthUser?.() || bridge.auth?.currentUser || null; } if (!user?.uid) return null; try { await user.getIdToken(false); } catch (err) { console.warn('[Firebase Auth] getIdToken in ensureAuthenticatedUid failed', err); try { await user.getIdToken(true); } catch (refreshErr) { console.warn('[Firebase Auth] getIdToken refresh failed', refreshErr); return null; } } syncAuthSession(user); if (!userSongsUnsubscribe) { startUserSongsSubscription(user.uid); } if (!appState.cloudSyncReady && !appState.cloudSyncInProgress) { void handleFirebaseAuthUser(user); } return user.uid; } function songToFirestorePayload(song) { const normalized = normalizeSong(song); return { title: normalized.title, key: normalized.key, tempo: normalized.tempo, themes: normalized.themes || [], composer: normalized.composer || '', lyricist: normalized.lyricist || '', version: normalized.version || '', scoreUrl: normalized.scoreUrl || '', videoUrl: normalized.videoUrl || '', }; } function readLegacyLocalSongs() { try { const raw = localStorage.getItem(LEGACY_SONGS_STORAGE_KEY); if (!raw) return []; const parsed = JSON.parse(raw); if (!Array.isArray(parsed)) return []; return parsed .map(normalizeSong) .filter((song) => song.title && !String(song.id || '').startsWith('sample-')); } catch (_) { return []; } } function clearLegacyLocalSongs() { try { localStorage.removeItem(LEGACY_SONGS_STORAGE_KEY); } catch (_) {} } async function migrateLegacyLocalSongsToCloud(uid) { const legacy = readLegacyLocalSongs(); if (!legacy.length) return false; const bridge = window.__firebaseBridge; if (!bridge?.addUserSong) return false; for (const song of legacy) { await bridge.addUserSong(uid, songToFirestorePayload(song)); } clearLegacyLocalSongs(); return true; } function stopUserSongsSubscription() { if (userSongsUnsubscribe) { userSongsUnsubscribe(); userSongsUnsubscribe = null; } } function applySongsFromFirestore(rawSongs) { appState.songs = (rawSongs || []).map(normalizeSong); appState.songsLoading = false; appState.songsLoadError = null; seedCatalogFromSongs(); rebuildThemeCatalog(); rebuildKeyFilters(); appState.conti = appState.conti.filter((id) => getSongById(id)); persistCurrentConti(); renderLibrary(); renderConti(); if (appState.rightContiTab === 'memo') renderContiMemoPanel(); } function startUserSongsSubscription(uid) { stopUserSongsSubscription(); const bridge = window.__firebaseBridge; if (!bridge?.subscribeUserSongs || !uid) return; appState.songsLoading = true; appState.songsLoadError = null; renderLibrary(); userSongsUnsubscribe = bridge.subscribeUserSongs( uid, (songs) => applySongsFromFirestore(songs), (err) => { console.warn('Songs subscription error', err); appState.songsLoading = false; appState.songsLoadError = formatAppError(err, 'songs-load'); showErrorToast(err, 'songs-load'); renderLibrary(); }, ); } async function ensureUserSongsLoaded() { const uid = await ensureAuthenticatedUid({ timeoutMs: 8000 }); if (!uid) { appState.songs = []; appState.songsLoading = false; renderLibrary(); return; } if (!userSongsUnsubscribe) { startUserSongsSubscription(uid); return; } const bridge = window.__firebaseBridge; if (!bridge?.fetchUserSongs) return; try { appState.songsLoading = true; renderLibrary(); const songs = await bridge.fetchUserSongs(uid); applySongsFromFirestore(songs); } catch (err) { console.warn('Songs fetch failed', err); appState.songsLoading = false; appState.songsLoadError = formatAppError(err, 'songs-load'); showErrorToast(err, 'songs-load'); renderLibrary(); } } const PAGE_PRESETS = { a4: { id: 'a4', label: 'A4 (794횞1123)', w: 794, h: 1123, printCssSize: 'A4 portrait' }, b5: { id: 'b5', label: 'B5 (665횞945)', w: 665, h: 945, printCssSize: 'B5 portrait' }, letter: { id: 'letter', label: 'Letter (816횞1056)', w: 816, h: 1056, printCssSize: 'letter portrait' }, a5: { id: 'a5', label: 'A5 (559횞794)', w: 559, h: 794, printCssSize: 'A5 portrait' }, }; const LAYOUT_PAD = 32; const LAYOUT_GAP = 24; const LAYOUT_MIN_W = 80; const LAYOUT_MIN_H = 40; const $ = (sel) => document.querySelector(sel); // --- Utils --- function escapeHtml(str) { return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); } function escapeAttr(str) { return escapeHtml(str).replace(/'/g, '''); } function showToast(message) { const el = $('#toast'); el.textContent = message; el.classList.remove('opacity-0'); clearTimeout(showToast._timer); showToast._timer = setTimeout(() => el.classList.add('opacity-0'), 2400); } function formatAppError(err, context = '') { const code = err?.code || ''; const rawMessage = String(err?.message || err || ''); const message = rawMessage.toLowerCase(); if (code === 'permission-denied' || message.includes('permission') || message.includes('insufficient permissions')) { return 'Firestore 沅뚰븳 ?ㅻ쪟?낅땲?? 濡쒓렇???곹깭? 蹂댁븞 洹쒖튃 諛고룷瑜??뺤씤??二쇱꽭??'; } if ( code === 'unavailable' || code === 'auth/network-request-failed' || message.includes('network') || message.includes('offline') || message.includes('failed to fetch') ) { return '?ㅽ듃?뚰겕 ?ㅻ쪟?낅땲?? ?명꽣???곌껐???뺤씤?????ㅼ떆 ?쒕룄??二쇱꽭??'; } if (code === 'deadline-exceeded' || message.includes('timeout') || message.includes('timed out')) { return '?쒕쾭 ?묐떟 ?쒓컙??珥덇낵?섏뿀?듬땲?? ?좎떆 ???ㅼ떆 ?쒕룄??二쇱꽭??'; } if (code === 'failed-precondition' || message.includes('index')) { return 'Firestore ?몃뜳?ㅺ? ?꾩슂?⑸땲?? Firebase 肄섏넄???덈궡 留곹겕瑜??뺤씤??二쇱꽭??'; } if (code === 'resource-exhausted') { return '?붿껌 ?쒕룄瑜?珥덇낵?덉뒿?덈떎. ?좎떆 ???ㅼ떆 ?쒕룄??二쇱꽭??'; } if ( code === 'unauthenticated' || code === 'auth/user-not-ready' || message === 'auth/user-not-ready' || message.includes('auth/user-not-ready') ) { return '濡쒓렇???뺣낫瑜?遺덈윭?ㅻ뒗 以묒엯?덈떎. ?좎떆 ???ㅼ떆 ?쒕룄??二쇱꽭??'; } if (code.startsWith('auth/')) { switch (code) { case 'auth/unauthorized-domain': return `?뱀씤?섏? ?딆? ?꾨찓?몄엯?덈떎 (${location.host}). Firebase 肄섏넄?먯꽌 ?꾨찓?몄쓣 異붽???二쇱꽭??`; case 'auth/popup-blocked': return '?앹뾽??李⑤떒?섏뿀?듬땲?? ?앹뾽 ?덉슜 ???ㅼ떆 ?쒕룄??二쇱꽭??'; case 'auth/operation-not-allowed': return 'Google 濡쒓렇?몄씠 鍮꾪솢?깊솕?섏뼱 ?덉뒿?덈떎. Firebase 肄섏넄?먯꽌 ?쒖꽦?뷀빐 二쇱꽭??'; case 'auth/network-request-failed': return '?ㅽ듃?뚰겕 ?ㅻ쪟?낅땲?? ?명꽣???곌껐???뺤씤?????ㅼ떆 ?쒕룄??二쇱꽭??'; case 'auth/web-storage-unsupported': return '釉뚮씪?곗? ??μ냼媛李⑤떒?섏뼱 濡쒓렇?명븷 ???놁뒿?덈떎.'; case 'auth/popup-closed-by-user': return '濡쒓렇??李쎌씠 ?ロ삍?듬땲??'; case 'auth/cancelled-popup-request': return '濡쒓렇???붿껌??痍⑥냼?섏뿀?듬땲?? ?좎떆 ???ㅼ떆 ?쒕룄??二쇱꽭??'; default: break; } } if (code === 'cancelled') { return '?묒뾽??痍⑥냼?섏뿀?듬땲??'; } if (code === 'invalid-argument' || message.includes('undefined')) { return '?곗씠???뺤떇 ?ㅻ쪟?낅땲?? ?섏씠吏瑜??덈줈怨좎묠 ???ㅼ떆 ?쒕룄??二쇱꽭??'; } if (message.includes('firestore媛以鍮꾨릺吏') || message.includes('firebase媛 ?ㅼ젙?섏?')) { return 'Firebase ?곌껐??以鍮꾨릺吏 ?딆븯?듬땲?? ?좎떆 ???ㅼ떆 ?쒕룄??二쇱꽭??'; } const labels = { 'song-save': '怨????, 'song-update': '怨??섏젙', 'song-delete': '怨???젣', 'songs-load': '怨?紐⑸줉 遺덈윭?ㅺ린', 'auth-sync': '?대씪?곕뱶 ?숆린??, 'profile-sync': '?꾨줈?????, 'conti-save': '肄섑떚 ???, 'conti-delete': '肄섑떚 ??젣', 'conti-load': '肄섑떚 遺덈윭?ㅺ린', 'share': '怨듭쑀 留곹겕 ?앹꽦', 'auth-login': '援ш? 濡쒓렇??, }; const label = labels[context] || '?묒뾽'; if (code) return `${label}???ㅽ뙣?덉뒿?덈떎. (${code})`; return `${label}???ㅽ뙣?덉뒿?덈떎. ?좎떆 ???ㅼ떆 ?쒕룄??二쇱꽭??`; } function showErrorToast(err, context = '') { const message = formatAppError(err, context); console.warn(`[${context || 'error'}]`, err); const el = $('#toast'); el.textContent = message; el.classList.remove('opacity-0'); clearTimeout(showToast._timer); showToast._timer = setTimeout(() => el.classList.add('opacity-0'), 4200); return message; } function generateId() { return `song-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; } function themeColorClass(name) { let h = 0; for (let i = 0; i < name.length; i++) h = (h + name.charCodeAt(i)) % THEME_COLORS.length; return THEME_COLORS[h]; } function normalizeThemes(song) { if (Array.isArray(song.themes)) return song.themes.filter(Boolean); if (typeof song.theme === 'string' && song.theme.trim()) { return song.theme.split(/[,/|]/).map((t) => t.trim()).filter(Boolean); } return []; } function deriveVersion(raw) { const v = (raw.version || raw.v || '').trim(); if (v) return v; const team = (raw.worshipTeam || '').trim(); const vocal = (raw.vocalist || '').trim(); if (team && vocal) return `${team} (${vocal})`; return team || vocal || ''; } function normalizeSong(raw) { const { theme, worshipTeam, vocalist, ...rest } = raw; return { ...rest, themes: normalizeThemes(raw), composer: (raw.composer || '').trim(), lyricist: (raw.lyricist || '').trim(), version: deriveVersion(raw), scoreUrl: (raw.scoreUrl || '').trim(), videoUrl: (raw.videoUrl || '').trim(), }; } function normalizeUrl(url) { const u = (url || '').trim(); if (!u) return ''; return /^https?:\/\//i.test(u) ? u : `https://${u}`; } /** ?낅낫 scoreUrl: ?쒖닔 ?대?吏 ?ㅼ씠?됲듃 留곹겕(.jpg, .png ?? ?꾩젣 */ function normalizeScoreImageUrl(url) { return normalizeUrl(url); } function songToPayload(song) { return { title: song.title, key: song.key, tempo: song.tempo, themes: song.themes || [], composer: song.composer || '', lyricist: song.lyricist || '', version: song.version || '', scoreUrl: song.scoreUrl || '', videoUrl: song.videoUrl || '', }; } function songSearchBlob(song) { return [ song.title, song.composer, song.lyricist, song.version, ...(song.themes || []), ].filter(Boolean).join(' ').toLowerCase(); } function renderSongMetaLine(song) { const parts = []; if (song.composer) parts.push(`?묎끝 ${song.composer}`); if (song.lyricist) parts.push(`?묒궗 ${song.lyricist}`); if (song.version) parts.push(song.version); if (!parts.length) return ''; return `<p class="text-[10px] text-slate-500 mt-1 truncate">${escapeHtml(parts.join(' 쨌 '))}</p>`; } // --- Persistence --- function loadUserThemes() { try { const raw = localStorage.getItem(USER_THEMES_STORAGE_KEY); if (raw) { const parsed = JSON.parse(raw); if (Array.isArray(parsed)) return [...new Set(parsed)]; } } catch (_) {} return []; } function saveUserThemes() { localStorage.setItem(USER_THEMES_STORAGE_KEY, JSON.stringify(appState.userThemes)); scheduleCloudSync(); } function loadRemovedThemes() { try { const raw = localStorage.getItem(REMOVED_THEMES_STORAGE_KEY); if (raw) { const parsed = JSON.parse(raw); if (Array.isArray(parsed)) return [...new Set(parsed)]; } } catch (_) {} return []; } function saveRemovedThemes() { localStorage.setItem(REMOVED_THEMES_STORAGE_KEY, JSON.stringify(appState.removedThemes)); scheduleCloudSync(); } function getActiveDefaultThemes() { return DEFAULT_THEME_CATALOG.filter((t) => !appState.removedThemes.includes(t)); } function isUserTheme(name) { return appState.userThemes.includes(name); } function isBuiltinTheme(name) { return DEFAULT_THEME_CATALOG.includes(name); } function rebuildThemeCatalog() { const merged = [ ...getActiveDefaultThemes(), ...appState.userThemes, ...appState.songs.flatMap((s) => s.themes || []), ]; appState.themeCatalog = [...new Set(merged)].sort((a, b) => a.localeCompare(b, 'ko')); saveThemeCatalog(); } function loadThemeCatalog() { appState.userThemes = loadUserThemes(); try { const raw = localStorage.getItem(THEMES_STORAGE_KEY); if (raw) { const parsed = JSON.parse(raw); if (Array.isArray(parsed) && parsed.length) { appState.themeCatalog = [...new Set([...getActiveDefaultThemes(), ...appState.userThemes, ...parsed])]; return appState.themeCatalog.sort((a, b) => a.localeCompare(b, 'ko')); } } } catch (_) {} appState.themeCatalog = [...new Set([...getActiveDefaultThemes(), ...appState.userThemes])]; return appState.themeCatalog.sort((a, b) => a.localeCompare(b, 'ko')); } function saveThemeCatalog() { localStorage.setItem(THEMES_STORAGE_KEY, JSON.stringify(appState.themeCatalog)); scheduleCloudSync(); } function mergeThemesIntoCatalog(themes) { let changed = false; themes.forEach((t) => { if (t && !appState.themeCatalog.includes(t)) { appState.themeCatalog.push(t); changed = true; } }); if (changed) { appState.themeCatalog.sort((a, b) => a.localeCompare(b, 'ko')); saveThemeCatalog(); } } function loadSongs() { return [...appState.songs]; } function isFirebaseConfigured() { return Boolean(FIREBASE_CONFIG?.apiKey?.trim() && FIREBASE_CONFIG?.projectId?.trim()); } /** file:// 濡??대㈃援ш? 濡쒓렇???앹뾽쨌Firebase Auth媛釉뚮씪?곗? 蹂댁븞 ?뺤콉?쇰줈 李⑤떒?⑸땲?? */ function isLocalFileProtocol() { return window.location.protocol === 'file:'; } function getAuthHostHint() { const host = location.hostname; if (host === '127.0.0.1') { return '127.0.0.1 ???http://localhost:8765 濡??묒냽??蹂댁꽭??\n(Firebase ?뱀씤 ?꾨찓?? localhost)'; } if (host.endsWith('.pages.dev') || host.endsWith('.netlify.app') || host.endsWith('.workers.dev')) { return `Firebase 肄섏넄 ??Authentication ??Settings ??Authorized domains ??n"${host}" 媛 ?깅줉?섏뼱 ?덈뒗吏 ?뺤씤??二쇱꽭??`; } if (host.endsWith('.local')) { return `濡쒖뺄 ?꾨찓??${host})? Firebase ?뱀씤 ?꾨찓?몄뿉 異붽??댁빞 ?⑸땲??`; } return ''; } function isLikelyAuthRedirectReturn() { try { const params = new URLSearchParams(location.search); const hash = location.hash || ''; return params.has('apiKey') || params.has('authType') || params.has('providerId') || /apiKey|authUser|signIn|access_token|id_token/i.test(hash); } catch (_) { return false; } } function formatFirebaseAuthError(err) { const hostHint = getAuthHostHint(); const hostSuffix = hostHint ? `\n\n${hostHint}` : ''; switch (err?.code) { case 'auth/unauthorized-domain': return `??二쇱냼(${location.host})媛 Firebase ?뱀씤 ?꾨찓?몄뿉 ?놁뒿?덈떎.\n` + 'Firebase 肄섏넄 ??Authentication ??Settings ??Authorized domains ??異붽???二쇱꽭??' + hostSuffix; case 'auth/popup-blocked': return '?앹뾽??李⑤떒?섏뿀?듬땲?? 二쇱냼李????앹뾽 ?덉슜 ???ㅼ떆 ?쒕룄?섍굅?? ?섏씠吏媛援ш? 濡쒓렇???붾㈃?쇰줈 ?대룞?⑸땲??' + hostSuffix; case 'auth/operation-not-allowed': return 'Firebase?먯꽌 Google 濡쒓렇?몄씠 鍮꾪솢?깊솕?섏뼱 ?덉뒿?덈떎.\nAuthentication ??Sign-in method ??Google ??耳?二쇱꽭??' + hostSuffix; case 'auth/network-request-failed': return '?ㅽ듃?뚰겕 ?ㅻ쪟濡?濡쒓렇?몄뿉 ?ㅽ뙣?덉뒿?덈떎. ?명꽣???곌껐???뺤씤??二쇱꽭??' + hostSuffix; case 'auth/web-storage-unsupported': return '釉뚮씪?곗? ??μ냼媛李⑤떒?섏뼱 濡쒓렇?명븷 ???놁뒿?덈떎. ?쒗겕由?紐⑤뱶 ?댁젣 ?먮뒗 荑좏궎 ?덉슜 ???ㅼ떆 ?쒕룄??二쇱꽭??' + hostSuffix; default: return (err?.message || '援ш? 濡쒓렇?몄뿉 ?ㅽ뙣?덉뒿?덈떎. ?좎떆 ???ㅼ떆 ?쒕룄??二쇱꽭??') + hostSuffix; } } function canUseFirebaseAuth() { return isFirebaseConfigured() && !isLocalFileProtocol(); } function cleanAuthRedirectUrl() { try { if (!isLikelyAuthRedirectReturn()) return; history.replaceState(null, '', location.pathname || '/'); } catch (_) {} } function showFatalBootError(message) { alert(message); } window.addEventListener('error', (event) => { if (isViewerMode()) return; console.error('[Boot error]', event.error || event.message); }); window.addEventListener('unhandledrejection', (event) => { if (isViewerMode()) return; console.error('[Unhandled rejection]', event.reason); }); function todayIsoDate() { const n = new Date(); return `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}`; } function ensureContiDate() { if (!appState.contiDate || !/^\d{4}-\d{2}-\d{2}$/.test(appState.contiDate)) { appState.contiDate = todayIsoDate(); } } /** ?덈같 ?좎쭨媛鍮꾩뼱 ?덉쓣 ?뚮쭔 ?ㅻ뒛濡?梨꾩? (?ъ슜?먭? 吏?뺥븳 ?좎쭨???좎?) */ function syncActiveDatesToToday(options = {}) { ensureContiDate(); localStorage.setItem(APP_CALENDAR_DAY_KEY, todayIsoDate()); if (options.updateUI !== false) { applyContiDateToUI(); } return false; } function bindCalendarDaySyncOnce() { if (document.body.dataset.calendarDaySyncBound) return; document.body.dataset.calendarDaySyncBound = '1'; document.addEventListener('visibilitychange', () => { if (document.visibilityState !== 'visible' || isViewerMode()) return; localStorage.setItem(APP_CALENDAR_DAY_KEY, todayIsoDate()); }); } function contiDateToLocalDate(iso = appState.contiDate) { const [y, m, d] = (iso || todayIsoDate()).split('-').map(Number); return new Date(y, m - 1, d); } const KOREAN_WEEKDAY_LABELS = ['二쇱씪', '?붿슂??, '?붿슂??, '?섏슂??, '紐⑹슂??, '湲덉슂??, '?좎슂??]; const KOREAN_WEEKDAY_SHORT = ['二?, '??, '??, '??, '紐?, '湲?, '??]; function formatKoreanDate(date, opts = {}) { const d = date instanceof Date ? date : new Date(date); if (Number.isNaN(d.getTime())) return ''; const parts = []; if (opts.year) parts.push(`${d.getFullYear()}??); parts.push(`${d.getMonth() + 1}??, `${d.getDate()}??); if (opts.weekday === 'long') parts.push(KOREAN_WEEKDAY_LABELS[d.getDay()]); else if (opts.weekday === 'short') parts.push(KOREAN_WEEKDAY_SHORT[d.getDay()]); return parts.join(' '); } function formatContiDateLong(iso) { ensureContiDate(); const d = iso ? contiDateToLocalDate(iso) : contiDateToLocalDate(appState.contiDate); return formatKoreanDate(d, { year: true }); } function formatContiDateShort() { ensureContiDate(); return formatKoreanDate(contiDateToLocalDate(appState.contiDate), { weekday: 'short' }); } function contiDateToIsoString() { ensureContiDate(); return contiDateToLocalDate(appState.contiDate).toISOString(); } function tryParseContiDateFromText(text) { const trimmed = (text || '').trim(); if (!trimmed) return null; const kr = trimmed.match(/(\d{4})\s*??s*(\d{1,2})\s*??s*(\d{1,2})\s*??); if (kr) { return `${kr[1]}-${String(kr[2]).padStart(2, '0')}-${String(kr[3]).padStart(2, '0')}`; } const iso = trimmed.match(/^(\d{4}-\d{2}-\d{2})$/); if (iso) return iso[1]; return null; } function syncPrintHeaderDateFromContiDate() { ensureContiDate(); if (!appState.printHeader) appState.printHeader = { enabled: true, dateText: '', church: '', service: '' }; appState.printHeader.dateText = formatContiDateLong(appState.contiDate); } function applyContiDateToUI() { ensureContiDate(); const el = $('#contiDate'); if (el) el.value = appState.contiDate; } function setContiDate(iso, options = {}) { const parsed = tryParseContiDateFromText(iso) || iso; appState.contiDate = /^\d{4}-\d{2}-\d{2}$/.test(parsed || '') ? parsed : todayIsoDate(); if (options.syncPrintHeader !== false) syncPrintHeaderDateFromContiDate(); applyContiDateToUI(); syncPrintHeaderUI(); updateContiMeta(); } function tempoToBpm(tempo) { return (tempo || '').trim(); } function buildContiSongEntriesFromState() { return appState.conti.map((songId, index) => { const song = getSongById(songId); if (!song) return null; return { title: song.title, key: song.key, bpm: tempoToBpm(song.tempo), sequence: index + 1, mySongId: songId, }; }).filter(Boolean); } function resolveSongIdsFromContiSongs(contiSongs) { return (contiSongs || []) .slice() .sort((a, b) => (Number(a.sequence) || 0) - (Number(b.sequence) || 0)) .map((entry) => { if (entry.mySongId && getSongById(entry.mySongId)) return entry.mySongId; const match = appState.songs.find((song) => ( song.title === entry.title && song.key === entry.key )); return match?.id || null; }) .filter(Boolean); } function buildContiSongEntriesFromStateForEntry(entry) { const ids = entry?.songIds || []; return ids.map((songId, index) => { const song = getSongById(songId); if (!song) { return { title: '', key: '', bpm: '', sequence: index + 1, mySongId: songId, }; } return { title: song.title, key: song.key, bpm: tempoToBpm(song.tempo), sequence: index + 1, mySongId: songId, }; }); } function buildContiPayloadForFirestore(entry) { const { songIds, songs, id, firestoreId, ...rest } = entry || {}; return rest; } function buildCurrentContiPayload() { ensureContiDate(); return { title: appState.contiTitle, contiDate: appState.contiDate, worshipInfo: appState.contiWorshipInfo, memo: appState.contiMemo, contiMemoPrint: appState.contiMemoPrint, contiMemoShare: appState.contiMemoShare, contiSongExtras: appState.contiSongExtras, customFormTags: appState.customFormTags, printHeader: appState.printHeader, storedLayoutPages: appState.storedLayoutPages, layoutOrientation: appState.layoutOrientation || 'portrait', songIds: [...appState.conti], updatedAt: new Date().toISOString(), }; } function buildUserProfilePayload() { return { email: appState.firebaseUser?.email || '', displayName: appState.firebaseUser?.displayName || '', photoURL: appState.firebaseUser?.photoURL || '', themeCatalog: appState.themeCatalog, userThemes: appState.userThemes, removedThemes: appState.removedThemes, currentConti: buildCurrentContiPayload(), conteHistory: loadConteHistory(), updatedAt: new Date().toISOString(), }; } function mapCloudContiEntry(conti, contiSongs = []) { const createdAt = conti.createdAt || conti.updatedAt || new Date().toISOString(); const songs = contiSongs.length ? contiSongs : (conti.songs || []); const songIds = resolveSongIdsFromContiSongs(songs.length ? songs : (conti.songIds || []).map((songId, index) => ({ mySongId: songId, sequence: index + 1, }))); return { id: conti.id, firestoreId: conti.id, name: conti.name || conti.worshipInfo || conti.title || '???肄섑떚', title: conti.title || '', worshipInfo: conti.worshipInfo || '', memo: conti.memo || '', contiMemoPrint: conti.contiMemoPrint, contiMemoShare: conti.contiMemoShare, contiSongExtras: conti.contiSongExtras || {}, customFormTags: conti.customFormTags || [], contiDate: conti.contiDate || '', printHeader: conti.printHeader || {}, storedLayoutPages: conti.storedLayoutPages || null, layoutOrientation: conti.layoutOrientation || 'portrait', songs, songIds, songCount: songs.length || songIds.length, createdAt, updatedAt: conti.updatedAt || createdAt, }; } async function fetchContisForLocalCache(uid) { const bridge = window.__firebaseBridge; if (!bridge?.fetchUserContisWithSongs || !uid) return []; const contis = await bridge.fetchUserContisWithSongs(uid); return contis.map((conti) => mapCloudContiEntry(conti, conti.songs || [])); } function applyCloudUserData({ profile, contis }) { if (Array.isArray(contis) && contis.length) { localStorage.setItem(SAVED_CONTIS_KEY, JSON.stringify(contis)); } if (profile && typeof profile === 'object') { if (Array.isArray(profile.themeCatalog)) { localStorage.setItem(THEMES_STORAGE_KEY, JSON.stringify(profile.themeCatalog)); } if (Array.isArray(profile.userThemes)) { localStorage.setItem(USER_THEMES_STORAGE_KEY, JSON.stringify(profile.userThemes)); } if (Array.isArray(profile.removedThemes)) { localStorage.setItem(REMOVED_THEMES_STORAGE_KEY, JSON.stringify(profile.removedThemes)); } if (profile.currentConti && typeof profile.currentConti === 'object') { localStorage.setItem(CURRENT_CONTI_KEY, JSON.stringify(profile.currentConti)); } if (Array.isArray(profile.conteHistory)) { saveConteHistory(profile.conteHistory); } } } function snapshotHasProfileData(profile) { if (!profile) return false; if ((profile.currentConti?.songIds || []).length > 0) return true; if ((profile.conteHistory || []).length > 0) return true; if ((profile.themeCatalog || []).length > 0) return true; return false; } async function pushLocalDataToCloud(uid) { const bridge = window.__firebaseBridge; if (!bridge?.upsertUserProfile || !uid) return; await migrateLegacyLocalSongsToCloud(uid); await bridge.upsertUserProfile(uid, buildUserProfilePayload()); const savedContis = loadSavedContis(); let changed = false; for (const conti of savedContis) { if (conti.firestoreId) continue; const songs = (conti.songs && conti.songs.length) ? conti.songs : buildContiSongEntriesFromStateForEntry(conti); const docId = await bridge.addUserConti(uid, buildContiPayloadForFirestore(conti), songs); conti.id = docId; conti.firestoreId = docId; changed = true; } if (changed) saveSavedContis(savedContis); } function collectLocalStorageSnapshot() { const readJson = (key, fallback = null) => { try { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : fallback; } catch (_) { return fallback; } }; return { version: 1, updatedAt: new Date().toISOString(), themeCatalog: readJson(THEMES_STORAGE_KEY, []), userThemes: readJson(USER_THEMES_STORAGE_KEY, []), removedThemes: readJson(REMOVED_THEMES_STORAGE_KEY, []), currentConti: readJson(CURRENT_CONTI_KEY, null), savedContis: readJson(SAVED_CONTIS_KEY, []), conteHistory: readJson(CONTE_HISTORY_KEY, []), }; } function snapshotHasUserData(snapshot) { if (!snapshot) return false; if ((snapshot.currentConti?.songIds || []).length > 0) return true; if ((snapshot.savedContis || []).length > 0) return true; if ((snapshot.conteHistory || []).length > 0) return true; return readLegacyLocalSongs().length > 0; } function applyAppSnapshot(snapshot) { if (!snapshot || typeof snapshot !== 'object') return; if (Array.isArray(snapshot.themeCatalog)) { localStorage.setItem(THEMES_STORAGE_KEY, JSON.stringify(snapshot.themeCatalog)); } if (Array.isArray(snapshot.userThemes)) { localStorage.setItem(USER_THEMES_STORAGE_KEY, JSON.stringify(snapshot.userThemes)); } if (Array.isArray(snapshot.removedThemes)) { localStorage.setItem(REMOVED_THEMES_STORAGE_KEY, JSON.stringify(snapshot.removedThemes)); } if (snapshot.currentConti && typeof snapshot.currentConti === 'object') { localStorage.setItem(CURRENT_CONTI_KEY, JSON.stringify(snapshot.currentConti)); } if (Array.isArray(snapshot.savedContis)) { localStorage.setItem(SAVED_CONTIS_KEY, JSON.stringify(snapshot.savedContis)); } if (Array.isArray(snapshot.conteHistory)) { saveConteHistory(snapshot.conteHistory); } } function reloadAppFromStorage() { appState.removedThemes = loadRemovedThemes(); migrateUserThemesFromCatalog(); appState.themeCatalog = loadThemeCatalog(); seedCatalogFromSongs(); rebuildThemeCatalog(); loadCurrentConti(); syncActiveDatesToToday({ persist: true }); applyContiMetaToUI(); renderSavedContiSelect(); rebuildKeyFilters(); renderLibrary(); renderConti(); if (appState.rightContiTab === 'memo') renderContiMemoPanel(); } function updateAuthUI() { const loggedOut = $('#authLoggedOut'); const loggedIn = $('#authLoggedIn'); const loginBtn = $('#btnGoogleLogin'); const user = appState.firebaseUser; if (user) { loggedOut?.classList.add('hidden'); loggedIn?.classList.remove('hidden'); const photo = $('#authUserPhoto'); const name = $('#authUserName'); if (photo) { photo.src = user.photoURL || ''; photo.classList.toggle('hidden', !user.photoURL); } if (name) name.textContent = user.displayName || user.email || '濡쒓렇?몃맖'; } else { loggedOut?.classList.remove('hidden'); loggedIn?.classList.add('hidden'); } if (loginBtn) { loginBtn.disabled = !canUseFirebaseAuth() || loginBtn.dataset.authLoading === '1'; if (isLocalFileProtocol()) { loginBtn.title = '?뚯씪 吏곸젒 ?닿린(file://)?먯꽌??濡쒓렇?명븷 ???놁뒿?덈떎'; } else if (!isFirebaseConfigured()) { loginBtn.title = '濡쒓렇?몄쓣 ?ъ슜?????놁뒿?덈떎'; } else if (!window.__firebaseBridge?.isReady) { loginBtn.title = '?곌껐 以묅??좎떆 ???ㅼ떆 ?쒕룄??二쇱꽭??; } else { loginBtn.title = '援ш? 怨꾩젙?쇰줈 濡쒓렇??; } } updateRegisterButtonState(); } function updateRegisterButtonState() { const btn = $('#btnRegister'); if (!btn) return; const uid = getFirebaseUid(); const resolved = window.__authSession?.resolved === true; const loggedInUI = Boolean(appState.firebaseUser); const pending = !resolved || (loggedInUI && !uid); const needLogin = resolved && !uid; btn.disabled = pending || needLogin; if (pending) { btn.title = '濡쒓렇???뺣낫瑜?遺덈윭?ㅻ뒗 以묒엯?덈떎'; } else if (needLogin) { btn.title = '援ш? 濡쒓렇????怨≪쓣 ??ν븷 ???덉뒿?덈떎'; } else { btn.title = ''; } } function scheduleCloudSync() { if (!appState.firebaseUser || !appState.cloudSyncReady || !isFirebaseConfigured()) return; clearTimeout(cloudSyncTimer); cloudSyncTimer = setTimeout(() => syncUserProfileToCloud(), 700); } async function syncUserProfileToCloud() { const bridge = window.__firebaseBridge; const uid = getFirebaseUid(); if (!bridge?.upsertUserProfile || !uid || appState.cloudSyncInProgress) return; appState.cloudSyncInProgress = true; try { await bridge.upsertUserProfile(uid, buildUserProfilePayload()); } catch (err) { console.warn('Profile cloud sync failed', err); showErrorToast(err, 'profile-sync'); } finally { appState.cloudSyncInProgress = false; } } async function handleFirebaseAuthUser(user) { if (!user) { handleFirebaseAuthLogout(); return; } applyAuthUserState(user); if (appState.cloudSyncReady || appState.cloudSyncInProgress) return; appState.cloudSyncReady = false; const bridge = await waitForFirebaseBridge(15000); if (!bridge?.isReady) { console.warn('[Firebase Auth] bridge not ready; will retry on auth state change'); return; } appState.cloudSyncInProgress = true; try { const readyUser = bridge.waitForAuthenticatedUser ? await bridge.waitForAuthenticatedUser(user.uid) : user; if (!readyUser || readyUser.uid !== user.uid) { throw new Error('auth/user-not-ready'); } appState.firebaseUser = readyUser; syncAuthSession(readyUser); const uid = readyUser.uid; if (!userSongsUnsubscribe) { startUserSongsSubscription(uid); } let profile = await bridge.fetchUserProfile(uid); if (!snapshotHasProfileData(profile) && bridge.migrateLegacyUserData) { try { const migrated = await bridge.migrateLegacyUserData(uid); if (migrated) { profile = await bridge.fetchUserProfile(uid); } } catch (err) { console.warn('Legacy user data migration skipped', err); } } try { await runLegacyMySongsFieldMigrationOnce(uid); profile = await bridge.fetchUserProfile(uid) || profile; } catch (err) { console.warn('Legacy my_songs field migration skipped', err); } try { await runLegacyContiArraysMigrationOnce(uid); } catch (err) { console.warn('Legacy conti array migration skipped', err); } let contis = []; let fetchAttempts = 0; while (fetchAttempts < 3) { fetchAttempts += 1; try { profile = profile || await bridge.fetchUserProfile(uid); contis = await fetchContisForLocalCache(uid); break; } catch (err) { console.warn(`Cloud fetch attempt ${fetchAttempts} failed`, err); if (fetchAttempts >= 3) throw err; await new Promise((resolve) => setTimeout(resolve, 350 * fetchAttempts)); } } const localSnapshot = collectLocalStorageSnapshot(); const cloudHasData = contis.length > 0 || snapshotHasProfileData(profile); const localHasData = snapshotHasUserData(localSnapshot); const cloudTime = new Date(profile?.updatedAt || profile?.syncedAt || 0).getTime(); const localTime = new Date(localSnapshot.updatedAt || localSnapshot.currentConti?.updatedAt || 0).getTime(); if (cloudHasData && (!localHasData || cloudTime >= localTime)) { applyCloudUserData({ profile, contis }); reloadAppFromStorage(); localStorage.setItem('worshipContiBuilder_lastCloudPull', String(Date.now())); } else if (localHasData) { await pushLocalDataToCloud(uid); } else { await bridge.upsertUserProfile(uid, buildUserProfilePayload()); } await migrateLegacyLocalSongsToCloud(uid); appState.cloudSyncReady = true; } catch (err) { console.warn('Auth sync failed', err); showErrorToast(err, 'auth-sync'); } finally { appState.cloudSyncInProgress = false; updateAuthUI(); } } let firebaseAuthBound = false; let firebaseAuthBootstrapping = false; function logFirebaseAuthError(context, err) { console.error(`[Firebase Auth] ${context}`, { code: err?.code || 'unknown', message: err?.message || String(err || ''), error: err, }); } async function captureFirebaseRedirectResult(bridge) { if (!bridge?.bootstrapAuthSession) { return null; } try { const session = await bridge.bootstrapAuthSession(); const user = session?.user || null; if (user) { await handleFirebaseAuthUser(user); } return session; } catch (err) { if (err?.code === 'auth/no-auth-event') return null; logFirebaseAuthError('getRedirectResult failed', err); return null; } finally { cleanAuthRedirectUrl(); } } async function bootstrapFirebaseAuth() { if (firebaseAuthBound || firebaseAuthBootstrapping || isViewerMode()) return; firebaseAuthBootstrapping = true; try { const bridge = await waitForFirebaseBridge(15000); if (!bridge?.isReady) { return; } if (bridge.bootAuth) { try { await bridge.bootAuth(); } catch (err) { console.warn('[Firebase Auth] early bootAuth failed', err); } } bridge.onAuthStateChanged((user) => { if (!user) { handleFirebaseAuthLogout(); return; } applyAuthUserState(user); if (appState.cloudSyncReady || appState.cloudSyncInProgress) return; void handleFirebaseAuthUser(user); }); firebaseAuthBound = true; updateAuthUI(); const session = await captureFirebaseRedirectResult(bridge); const initialUser = session?.user || bridge.getAuthUser?.() || bridge.auth?.currentUser || null; if (initialUser) { applyAuthUserState(initialUser); if (!appState.cloudSyncReady) { await handleFirebaseAuthUser(initialUser); } } const loginBtn = $('#btnGoogleLogin'); if (loginBtn && !loginBtn.dataset.authBound) { loginBtn.dataset.authBound = '1'; loginBtn.addEventListener('click', async () => { if (isLocalFileProtocol()) { alert( '??HTML ?뚯씪???붾툝?대┃(file://)?쇰줈 ?대㈃援ш? 濡쒓렇?몄씠 李⑤떒?⑸땲??\n\n' + 'start-server.bat ???ㅽ뻾?????꾨옒 二쇱냼濡??묒냽??二쇱꽭??\n' + ' http://localhost:8765/worship-conti-builder.html' ); return; } const hostHint = getAuthHostHint(); if (hostHint && !confirm(`${hostHint}\n\n洹몃옒??濡쒓렇?몄쓣 ?쒕룄?좉퉴??`)) return; if (!isFirebaseConfigured()) { alert('吏湲덉? 濡쒓렇?몄쓣 ?ъ슜?????놁뒿?덈떎.'); return; } const activeBridge = await waitForFirebaseBridge(15000); if (!activeBridge?.isReady) { alert('?곌껐 ?湲?以묒엯?덈떎. ?좎떆 ???ㅼ떆 ?쒕룄??二쇱꽭??'); return; } const originalLabel = loginBtn.innerHTML; loginBtn.dataset.authLoading = '1'; loginBtn.disabled = true; loginBtn.textContent = '濡쒓렇??以묅?; try { const signInResult = await activeBridge.signInWithGoogle(); if (signInResult?.user) { await handleFirebaseAuthUser(signInResult.user); } } catch (err) { if (err?.code === 'auth/popup-closed-by-user') return; logFirebaseAuthError('signInWithGoogle failed', err); showErrorToast(err, 'auth-login'); } finally { delete loginBtn.dataset.authLoading; loginBtn.innerHTML = originalLabel; updateAuthUI(); } }); } const logoutBtn = $('#btnFirebaseLogout'); if (logoutBtn && !logoutBtn.dataset.authBound) { logoutBtn.dataset.authBound = '1'; logoutBtn.addEventListener('click', async () => { try { appState.cloudSyncReady = false; await bridge.signOut(); } catch (err) { logFirebaseAuthError('signOut failed', err); showErrorToast(err, 'auth-login'); } }); } } finally { firebaseAuthBootstrapping = false; } } function scheduleFirebaseAuthBootstrap() { if (isViewerMode()) return; if (!window.__earlyAuthStateBound) { window.__earlyAuthStateBound = true; window.addEventListener('firebase-auth-state', (ev) => { const user = ev.detail?.user || null; if (user) applyAuthUserState(user); else if (appState.authReady) handleFirebaseAuthLogout(); }); } bootstrapFirebaseAuth().finally(() => updateAuthUI()); if (!firebaseAuthBound) { window.addEventListener('firebase-bridge-ready', () => { bootstrapFirebaseAuth().finally(() => updateAuthUI()); }, { once: true }); } } function getSongById(id) { return appState.songs.find((s) => s.id === id); } function getContiSongs() { return appState.conti.map((id) => getSongById(id)).filter(Boolean); } function applyContiMetaToUI() { ensureContiDate(); applyContiDateToUI(); $('#contiWorshipInfo').value = appState.contiWorshipInfo || ''; $('#contiMemo').value = appState.contiMemo || ''; $('#contiTitle').value = appState.contiTitle || ''; $('#contiMemoPrint').checked = appState.contiMemoPrint !== false; $('#contiMemoShare').checked = appState.contiMemoShare !== false; syncPrintHeaderUI(); } function syncPrintHeaderUI() { const h = appState.printHeader || {}; $('#printHeaderEnabled').checked = h.enabled !== false; $('#printHeaderDate').value = h.dateText || ''; $('#printHeaderChurch').value = h.church || ''; $('#printHeaderService').value = h.service || ''; $('#layoutMemoPrint').checked = appState.contiMemoPrint !== false; $('#layoutMemoShare').checked = appState.contiMemoShare !== false; const layoutMemo = $('#layoutContiMemo'); if (layoutMemo) layoutMemo.value = appState.contiMemo || ''; } function readPrintHeaderFromUI() { const dateText = $('#printHeaderDate').value.trim(); appState.printHeader = { enabled: $('#printHeaderEnabled').checked, dateText, church: $('#printHeaderChurch').value.trim(), service: $('#printHeaderService').value.trim(), }; const parsedDate = tryParseContiDateFromText(dateText); if (parsedDate && parsedDate !== appState.contiDate) { appState.contiDate = parsedDate; applyContiDateToUI(); updateContiMeta(); } appState.contiMemoPrint = $('#layoutMemoPrint').checked; appState.contiMemoShare = $('#layoutMemoShare').checked; const layoutMemo = $('#layoutContiMemo'); if (layoutMemo) appState.contiMemo = layoutMemo.value; const mainMemo = $('#contiMemo'); if (mainMemo) mainMemo.value = appState.contiMemo; } function getPrintHeaderLine() { const h = appState.printHeader || {}; if (h.enabled === false) return ''; const parts = [h.dateText, h.church, h.service].filter(Boolean); return parts.join(' | '); } function defaultSongExtras() { return { songForm: '', songMemo: '', songMemoPrint: true, songMemoShare: true }; } function getSongExtras(songId) { if (!appState.contiSongExtras[songId]) { appState.contiSongExtras[songId] = defaultSongExtras(); } return appState.contiSongExtras[songId]; } function getAllFormTags() { return [...DEFAULT_FORM_TAGS, ...appState.customFormTags.filter((t) => !DEFAULT_FORM_TAGS.includes(t))]; } function appendFormTag(songId, tag) { const ex = getSongExtras(songId); const clean = tag.replace(/^\[|\]$/g, '').trim(); if (!clean) return; ex.songForm = ex.songForm ? `${ex.songForm} -> ${clean}` : clean; persistCurrentConti(); } function popLastFormTag(songId) { const ex = getSongExtras(songId); if (!ex.songForm) return; const parts = ex.songForm.split(/\s*->\s*/); parts.pop(); ex.songForm = parts.join(' -> '); persistCurrentConti(); } function layoutContiSongIds(pages) { return (pages || []).flatMap((p) => (p.items || []).map((it) => it.songId)).filter(Boolean); } function layoutMatchesConti(pages, songIds) { const layoutIds = layoutContiSongIds(pages); if (!songIds.length || layoutIds.length !== songIds.length) return false; const contiSet = new Set(songIds); const layoutSet = new Set(layoutIds); if (layoutSet.size !== layoutIds.length) return false; return layoutIds.every((id) => contiSet.has(id)); } const PRINT_HEADER_BASE_H = 40; const PRINT_HEADER_MEMO_LINE_H = 18; function getHeaderMemoLines() { const lines = []; if (appState.contiMemoPrint && (appState.contiMemo || '').trim()) { lines.push((appState.contiMemo || '').trim()); } getContiSongs().forEach((song, index) => { const ex = getSongExtras(song.id); if (ex.songMemoPrint && (ex.songMemo || '').trim()) { lines.push(`${index + 1}. ${ex.songMemo.trim()}`); } }); return lines; } function isPrintHeaderBlockEnabled() { return appState.printHeader?.enabled !== false; } function shouldShowLayoutPageHeader(pageIndex = 0) { if (pageIndex !== 0) return false; if (!isPrintHeaderBlockEnabled()) return false; return Boolean(getPrintHeaderLine()) || getHeaderMemoLines().length > 0; } function getStackedHeaderHeight(pageIndex = 0) { if (!shouldShowLayoutPageHeader(pageIndex)) return 0; let h = 20; if (getPrintHeaderLine()) h += PRINT_HEADER_BASE_H; h += getHeaderMemoLines().length * PRINT_HEADER_MEMO_LINE_H; return Math.max(48, h); } function getLayoutStartY(pageIndex) { if (shouldShowLayoutPageHeader(pageIndex)) { return getStackedHeaderHeight(pageIndex) + LAYOUT_PAD; } return LAYOUT_PAD; } function buildPrintHeaderBlockHtml() { if (!isPrintHeaderBlockEnabled()) return ''; const main = getPrintHeaderLine(); const memos = getHeaderMemoLines(); if (!main && !memos.length) return ''; let html = ''; if (main) html += `<div class="print-header-main">${escapeHtml(main)}</div>`; memos.forEach((line) => { html += `<div class="print-header-memo">${escapeHtml(line)}</div>`; }); return html; } function appendLayoutCanvasHeaderOverlay(canvas, pageIndex) { if (!shouldShowLayoutPageHeader(pageIndex)) return; const band = document.createElement('div'); band.className = 'layout-canvas-header-overlay'; band.style.height = `${getStackedHeaderHeight(pageIndex)}px`; const main = getPrintHeaderLine(); if (main && isPrintHeaderBlockEnabled()) { const mainEl = document.createElement('div'); mainEl.className = 'header-main'; mainEl.textContent = main; band.appendChild(mainEl); } getHeaderMemoLines().forEach((line) => { const m = document.createElement('div'); m.className = 'header-memo-line'; m.textContent = line; band.appendChild(m); }); canvas.appendChild(band); } function saveLayoutSessionNow() { if (!appState.layoutPages?.length) return; readPrintHeaderFromUI(); appState.storedLayoutPages = JSON.parse(JSON.stringify(appState.layoutPages)); persistCurrentConti(); } function persistCurrentConti() { localStorage.setItem(CURRENT_CONTI_KEY, JSON.stringify(buildCurrentContiPayload())); scheduleCloudSync(); } function loadCurrentConti() { try { const raw = localStorage.getItem(CURRENT_CONTI_KEY); if (!raw) return; const data = JSON.parse(raw); if (data.title != null) appState.contiTitle = data.title; if (data.contiDate) appState.contiDate = data.contiDate; else if (data.printHeader?.dateText) { const parsed = tryParseContiDateFromText(data.printHeader.dateText); if (parsed) appState.contiDate = parsed; } if (data.worshipInfo != null) appState.contiWorshipInfo = data.worshipInfo; else if (data.title && !data.worshipInfo) appState.contiWorshipInfo = data.title; if (data.memo != null) appState.contiMemo = data.memo; if (data.contiMemoPrint != null) appState.contiMemoPrint = data.contiMemoPrint; if (data.contiMemoShare != null) appState.contiMemoShare = data.contiMemoShare; if (data.contiSongExtras && typeof data.contiSongExtras === 'object') { appState.contiSongExtras = data.contiSongExtras; } if (Array.isArray(data.customFormTags)) appState.customFormTags = data.customFormTags; if (data.printHeader) appState.printHeader = { ...appState.printHeader, ...data.printHeader }; if (data.storedLayoutPages) appState.storedLayoutPages = data.storedLayoutPages; if (data.layoutOrientation === 'landscape' || data.layoutOrientation === 'portrait') { appState.layoutOrientation = data.layoutOrientation; } if (Array.isArray(data.songIds)) { appState.conti = data.songIds.filter((id) => getSongById(id)); } ensureContiDate(); if (!(appState.printHeader?.dateText || '').trim()) syncPrintHeaderDateFromContiDate(); } catch (_) {} } function loadSavedContis() { try { const raw = localStorage.getItem(SAVED_CONTIS_KEY); if (raw) { const parsed = JSON.parse(raw); if (Array.isArray(parsed)) return parsed; } } catch (_) {} return []; } function saveSavedContis(list) { localStorage.setItem(SAVED_CONTIS_KEY, JSON.stringify(list)); scheduleCloudSync(); } function loadConteHistory() { try { const raw = localStorage.getItem(CONTE_HISTORY_KEY); if (!raw) return []; const parsed = JSON.parse(raw); if (!Array.isArray(parsed)) return []; return parsed.filter((entry) => Array.isArray(entry.songIds) && entry.songIds.length); } catch (_) { return []; } } function saveConteHistory(list) { localStorage.setItem(CONTE_HISTORY_KEY, JSON.stringify(list.slice(-CONTE_HISTORY_MAX))); scheduleCloudSync(); } function appendConteHistoryFromCurrent() { const songIds = [...appState.conti]; if (!songIds.length) return; const history = loadConteHistory(); history.push({ date: new Date().toISOString(), songIds, }); saveConteHistory(history); } function switchRightContiTab(tab) { if (!['conti', 'memo'].includes(tab)) return; appState.rightContiTab = tab; document.querySelectorAll('.conti-right-tab').forEach((btn) => { btn.classList.toggle('active', btn.dataset.contiTab === tab); }); ['conti', 'memo'].forEach((id) => { const panel = $(`#contiTabPanel${id.charAt(0).toUpperCase() + id.slice(1)}`); if (panel) panel.classList.toggle('is-active', id === tab); }); if (tab === 'memo') renderContiMemoPanel(); } function bindRightContiTabs() { document.querySelectorAll('.conti-right-tab').forEach((btn) => { btn.addEventListener('click', () => switchRightContiTab(btn.dataset.contiTab)); }); } function renderSavedContiSelect() { const sel = $('#savedContiSelect'); const saved = loadSavedContis().sort((a, b) => { const aTime = new Date(a.createdAt || a.updatedAt || 0).getTime(); const bTime = new Date(b.createdAt || b.updatedAt || 0).getTime(); return bTime - aTime; }); sel.innerHTML = '<option value="">??λ맂 肄섑떚 遺덈윭?ㅺ린??/option>' + saved.map((c) => `<option value="${escapeAttr(c.id)}">${escapeHtml(c.name)} (${c.songCount ?? c.songIds?.length ?? 0}怨?</option>`).join(''); } function setContiFromIds(songIds, title, worshipInfo, memo, extras) { appState.conti = songIds.filter((id) => getSongById(id)); if (title !== undefined) appState.contiTitle = title; if (worshipInfo !== undefined) appState.contiWorshipInfo = worshipInfo; if (memo !== undefined) appState.contiMemo = memo; if (extras) { if (extras.contiMemoPrint != null) appState.contiMemoPrint = extras.contiMemoPrint; if (extras.contiMemoShare != null) appState.contiMemoShare = extras.contiMemoShare; if (extras.contiSongExtras) appState.contiSongExtras = extras.contiSongExtras; if (extras.customFormTags) appState.customFormTags = extras.customFormTags; if (extras.contiDate) appState.contiDate = extras.contiDate; if (extras.printHeader) appState.printHeader = { ...appState.printHeader, ...extras.printHeader }; if (extras.storedLayoutPages) appState.storedLayoutPages = extras.storedLayoutPages; if (extras.layoutOrientation === 'landscape' || extras.layoutOrientation === 'portrait') { appState.layoutOrientation = extras.layoutOrientation; } } ensureContiDate(); if (!extras?.contiDate && appState.printHeader?.dateText) { const parsed = tryParseContiDateFromText(appState.printHeader.dateText); if (parsed) appState.contiDate = parsed; } syncPrintHeaderDateFromContiDate(); applyContiMetaToUI(); persistCurrentConti(); renderConti(); renderLibrary(); } function getContiWorshipHeadline() { const w = (appState.contiWorshipInfo || '').trim(); if (w) return w; const t = (appState.contiTitle || '').trim(); if (t) return t; return '?ㅻ뒛??李ъ뼇 肄섑떚'; } function buildShareSnapshot() { readPrintHeaderFromUI(); const snap = { v: 6 }; const worshipInfo = getContiWorshipHeadline(); if (worshipInfo && worshipInfo !== '?ㅻ뒛??李ъ뼇 肄섑떚') snap.w = worshipInfo; const memo = appState.contiMemoShare ? (appState.contiMemo || '').trim() : ''; if (memo) snap.m = memo; const title = (appState.contiTitle || '').trim(); if (title) snap.t = title; if (appState.contiDate) snap.d = appState.contiDate; snap.dt = contiDateToIsoString(); const worshipFields = readWorshipShareFieldsFromUI(); snap.worshipDate = worshipFields.worshipDate; snap.worshipTitle = worshipFields.worshipTitle; snap.s = getContiSongs().map((song) => { const ex = getSongExtras(song.id); const row = { ti: song.title || '', k: song.key || '', tp: song.tempo || '' }; if (song.themes?.length) row.th = song.themes; if (song.composer) row.c = song.composer; if (song.lyricist) row.l = song.lyricist; if (song.version) row.v = song.version; if (song.scoreUrl) row.sc = song.scoreUrl; if (song.videoUrl) row.vi = song.videoUrl; if (ex.songForm) row.sf = ex.songForm; const sm = ex.songMemoShare ? (ex.songMemo || '').trim() : ''; if (sm) row.sm = sm; return row; }); return snap; } function getShareBaseUrl() { const raw = (window.SHARE_BASE_URL || PUBLIC_SHARE_ORIGIN).trim().replace(/\/$/, ''); if (/netlify\.app/i.test(raw)) return PUBLIC_SHARE_ORIGIN; try { return new URL(raw).origin; } catch (_) { return PUBLIC_SHARE_ORIGIN; } } function normalizeLegacyShareUrl(url) { if (!url || !/netlify\.app/i.test(url)) return url; try { const parsed = new URL(url); return `${PUBLIC_SHARE_ORIGIN}/?${parsed.searchParams.toString()}`; } catch (_) { return url.replace(/https?:\/\/[^/]*netlify\.app/i, PUBLIC_SHARE_ORIGIN); } } function buildShareUrlById(docId, worshipDate, worshipTitle) { const base = getShareBaseUrl(); const params = new URLSearchParams(); params.set(SHARE_ID_QUERY_KEY, docId); if (worshipDate) params.set(SHARE_DATE_QUERY_KEY, worshipDate); if (worshipTitle) params.set(SHARE_TITLE_QUERY_KEY, worshipTitle); return `${base}/?${params.toString()}`; } function readWorshipShareFieldsFromUI() { ensureContiDate(); const dateEl = $('#contiDate'); const worshipEl = $('#contiWorshipInfo'); if (dateEl?.value) appState.contiDate = dateEl.value; if (worshipEl) appState.contiWorshipInfo = worshipEl.value.trim(); persistCurrentConti(); return { worshipDate: appState.contiDate || todayIsoDate(), worshipTitle: (appState.contiWorshipInfo || appState.contiTitle || '李ъ뼇').trim(), }; } async function copyTextToClipboard(text) { if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(text); return true; } const input = $('#shareUrlInput'); input.value = text; input.select(); return document.execCommand('copy'); } function getShareIdFromUrl() { const id = new URLSearchParams(location.search).get(SHARE_ID_QUERY_KEY); return id?.trim() || null; } function prepareViewerShell() { if (!isViewerMode()) return; document.body.classList.add('share-mode', 'viewer-mode'); const shareView = $('#shareView'); if (shareView) { shareView.classList.remove('hidden'); shareView.classList.add('flex'); } } function parseFirestoreRestValue(value) { if (!value || typeof value !== 'object') return null; if ('stringValue' in value) return value.stringValue; if ('booleanValue' in value) return value.booleanValue; if ('integerValue' in value) return Number(value.integerValue); if ('doubleValue' in value) return value.doubleValue; if ('nullValue' in value) return null; if ('arrayValue' in value) { return (value.arrayValue.values || []).map(parseFirestoreRestValue); } if ('mapValue' in value) { const out = {}; Object.entries(value.mapValue.fields || {}).forEach(([key, item]) => { out[key] = parseFirestoreRestValue(item); }); return out; } return null; } async function fetchSharedContiViaRest(shareId) { const apiKey = (FIREBASE_CONFIG?.apiKey || '').trim(); const base = `https://firestore.googleapis.com/v1/projects/${FIREBASE_PROJECT_ID}/databases/(default)/documents/shared_contis/${encodeURIComponent(shareId)}`; const url = apiKey ? `${base}?key=${encodeURIComponent(apiKey)}` : base; const res = await fetch(url); if (!res.ok) return null; const doc = await res.json(); const data = {}; Object.entries(doc.fields || {}).forEach(([key, value]) => { data[key] = parseFirestoreRestValue(value); }); return data; } function isViewerMode() { return window.__VIEWER_MODE === true || !!getShareIdFromUrl(); } const VIEWER_EDITOR_DOM_IDS = [ 'appShell', 'modalShare', 'modalEditContiSong', 'modalSaveConti', 'modalLayoutEditor', 'printArea', 'toast', 'btnExitShareView', ]; function purgeEditorDom() { VIEWER_EDITOR_DOM_IDS.forEach((id) => { document.getElementById(id)?.remove(); }); document.documentElement.classList.add('viewer-mode'); document.body.classList.add('viewer-mode'); } function showViewerLoadError(message) { purgeEditorDom(); document.body.classList.add('share-mode', 'viewer-mode'); const shareView = $('#shareView'); if (!shareView) return; shareView.classList.remove('hidden'); shareView.classList.add('flex'); $('#shareViewWorshipInfo').textContent = '怨듭쑀 肄섑떚'; $('#shareViewMeta').textContent = '遺덈윭?ㅺ린 ?ㅽ뙣'; $('#shareViewMemo').textContent = ''; $('#shareViewMemo').classList.add('hidden'); $('#shareViewList').innerHTML = `<div class="share-view-empty">${message.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')}</div>`; applyShareDarkMode(); $('#btnShareDarkMode')?.addEventListener('click', toggleShareDarkMode); } function getEditorBaseUrl() { return `${location.origin}${location.pathname}`; } async function waitForFirebaseBridge(timeoutMs = 10000) { if (window.__firebaseBridge?.isReady) return window.__firebaseBridge; return new Promise((resolve) => { const timer = setTimeout(() => { resolve(window.__firebaseBridge?.isReady ? window.__firebaseBridge : null); }, timeoutMs); const finish = () => { clearTimeout(timer); resolve(window.__firebaseBridge?.isReady ? window.__firebaseBridge : null); }; if (window.__firebaseBridge?.isReady) { finish(); return; } window.addEventListener('firebase-bridge-ready', finish, { once: true }); }); } function normalizeShareSong(raw) { const s = raw || {}; return { title: (s.title || s.ti || '').trim(), tempo: (s.tempo || s.tp) === '鍮좊쫫' ? '鍮좊쫫' : ((s.tempo || s.tp) === '?먮┝' ? '?먮┝' : ((s.tempo || s.tp) || '')), key: (s.key || s.k || '').trim(), scoreUrl: (s.scoreUrl || s.sc || '').trim(), videoUrl: (s.videoUrl || s.vi || '').trim(), themes: Array.isArray(s.themes) ? s.themes : (Array.isArray(s.th) ? s.th : []), composer: (s.composer || s.c || '').trim(), lyricist: (s.lyricist || s.l || '').trim(), version: deriveVersion(s), songForm: (s.songForm || s.sf || '').trim(), songMemo: (s.songMemo || s.sm || '').trim(), }; } function buildSharePreviewTitle() { return SHARE_PREVIEW_TITLE; } function buildSharePreviewDescription() { return SHARE_PREVIEW_DESCRIPTION; } function updateSharePageMeta(title, description) { document.title = title; const pairs = [ ['#metaDescription', 'description', description], ['#metaOgTitle', 'og:title', title], ['#metaOgDescription', 'og:description', description], ['#metaTwitterTitle', 'twitter:title', title], ['#metaTwitterDescription', 'twitter:description', description], ]; pairs.forEach(([sel, key, value]) => { const el = document.querySelector(sel); if (el) el.setAttribute('content', value); }); let ogUrl = document.querySelector('meta[property="og:url"]'); if (!ogUrl) { ogUrl = document.createElement('meta'); ogUrl.setAttribute('property', 'og:url'); document.head.appendChild(ogUrl); } ogUrl.setAttribute('content', location.href); } function normalizeShareData(data) { const worshipInfo = (data.worshipInfo || data.w || data.title || data.t || '?ㅻ뒛??李ъ뼇 肄섑떚').trim(); const songs = (data.songs || data.s || []).map(normalizeShareSong).filter((s) => s.title); const normalized = { worshipInfo, title: (data.title || data.t || '').trim(), memo: (data.memo || data.m || '').trim(), contiDate: (data.contiDate || data.d || data.worshipDate || '').trim(), worshipDate: (data.worshipDate || data.d || data.contiDate || '').trim(), worshipTitle: (data.worshipTitle || data.w || '').trim(), shareTitle: (data.shareTitle || '').trim(), shareDesc: (data.shareDesc || '').trim(), printHeader: data.printHeader || null, date: data.date || data.dt || new Date().toISOString(), songs, }; if (!normalized.shareTitle) { normalized.shareTitle = buildSharePreviewTitle(normalized); } if (!normalized.shareDesc) { normalized.shareDesc = buildSharePreviewDescription(); } return normalized; } function renderShareActionButtons(song) { const hasScore = Boolean(song.scoreUrl?.trim()); const hasVideo = Boolean(song.videoUrl?.trim()); if (!hasScore && !hasVideo) { return '<div class="share-actions-row"><span class="share-action-btn share-action-btn-disabled">留곹겕 ?놁쓬</span></div>'; } return `<div class="share-actions-row"> ${hasScore ? `<button type="button" data-open-score data-url="${escapeAttr(normalizeUrl(song.scoreUrl))}" class="share-action-btn share-action-btn-score">?뱞 ?낅낫 蹂닿린</button>` : ''} ${hasVideo ? `<button type="button" data-open-video data-url="${escapeAttr(normalizeUrl(song.videoUrl))}" class="share-action-btn share-action-btn-video">???곸긽 蹂닿린</button>` : ''} </div>`; } function readShareQueryOverrides() { const overrides = {}; try { const params = new URLSearchParams(location.search); const urlDate = params.get(SHARE_DATE_QUERY_KEY)?.trim(); if (urlDate && /^\d{4}-\d{2}-\d{2}$/.test(urlDate)) { overrides.d = urlDate; overrides.worshipDate = urlDate; overrides.contiDate = urlDate; } const urlTitle = params.get(SHARE_TITLE_QUERY_KEY); if (urlTitle) { const decoded = decodeURIComponent(urlTitle.replace(/\+/g, ' ')).trim(); if (decoded) { overrides.t = decoded; overrides.worshipTitle = decoded; overrides.w = decoded; } } } catch (_) {} return overrides; } function formatShareViewDate(normalized) { const iso = (normalized.worshipDate || normalized.contiDate || normalized.d || '').trim(); if (/^\d{4}-\d{2}-\d{2}$/.test(iso)) { const [y, m, d] = iso.split('-').map(Number); return formatKoreanDate(new Date(y, m - 1, d), { year: true, weekday: 'long' }); } return ''; } function renderShareView(data) { const normalized = normalizeShareData(data); appState.sharedSnapshot = normalized; const worshipEl = $('#shareViewWorshipInfo'); const memoEl = $('#shareViewMemo'); const metaEl = $('#shareViewMeta'); worshipEl.textContent = normalized.worshipInfo; updateSharePageMeta(normalized.shareTitle || SHARE_PREVIEW_TITLE, normalized.shareDesc || SHARE_PREVIEW_DESCRIPTION); if (normalized.memo) { memoEl.textContent = normalized.memo; memoEl.classList.remove('hidden'); } else { memoEl.textContent = ''; memoEl.classList.add('hidden'); } const metaParts = [`${normalized.songs.length}怨?]; const dateStr = formatShareViewDate(normalized); if (dateStr) metaParts.push(dateStr); metaEl.textContent = metaParts.join(' 쨌 '); if (!normalized.songs.length) { $('#shareViewList').innerHTML = '<div class="share-view-empty">?쒖떆??怨≪씠 ?놁뒿?덈떎.</div>'; return; } $('#shareViewList').innerHTML = normalized.songs.map((song, index) => { const meta = [ song.composer && `?묎끝 ${song.composer}`, song.lyricist && `?묒궗 ${song.lyricist}`, song.version, ].filter(Boolean); return ` <article class="share-card"> <div class="share-card-top"> <div class="share-card-badge">${index + 1}</div> <div class="flex-1 min-w-0"> <h2 class="share-card-title">${escapeHtml(song.title)}</h2> ${song.songForm ? `<p class="share-song-form">${escapeHtml(song.songForm)}</p>` : ''} ${song.songMemo ? `<p class="share-card-memo leading-relaxed">${escapeHtml(song.songMemo)}</p>` : ''} ${meta.length ? `<p class="share-card-memo">${escapeHtml(meta.join(' 쨌 '))}</p>` : ''} <div class="share-card-meta"> <span class="share-chip-tempo">${escapeHtml(song.tempo || '??)}</span> <span class="share-chip-key">Key ${escapeHtml(song.key || '??)}</span> ${song.themes?.length ? renderThemeTags(song.themes) : ''} </div> </div> </div> ${renderShareActionButtons(song)} </article>`; }).join(''); } function applyShareDarkMode() { const enabled = sessionStorage.getItem(SHARE_DARK_MODE_KEY) === '1'; document.body.classList.toggle('share-dark', enabled); document.documentElement.classList.toggle('share-dark', enabled); const btn = $('#btnShareDarkMode'); if (btn) { btn.textContent = enabled ? '?截? : '?뙔'; btn.title = enabled ? '諛앹? ?뚮쭏濡??꾪솚' : '?덈같???ㅽ겕紐⑤뱶'; } } function toggleShareDarkMode() { const next = sessionStorage.getItem(SHARE_DARK_MODE_KEY) !== '1'; sessionStorage.setItem(SHARE_DARK_MODE_KEY, next ? '1' : '0'); applyShareDarkMode(); } function bindShareViewActions() { const list = $('#shareViewList'); if (list.dataset.bound) return; list.dataset.bound = '1'; list.addEventListener('click', (e) => { const scoreBtn = e.target.closest('[data-open-score]'); if (scoreBtn?.dataset.url) { window.open(scoreBtn.dataset.url, '_blank', 'noopener,noreferrer'); return; } const videoBtn = e.target.closest('[data-open-video]'); if (videoBtn?.dataset.url) { window.open(videoBtn.dataset.url, '_blank', 'noopener,noreferrer'); } }); } function enterViewerMode(data) { purgeEditorDom(); document.body.classList.add('share-mode', 'viewer-mode'); const shareView = $('#shareView'); if (shareView) { shareView.classList.remove('hidden'); shareView.classList.add('flex'); } renderShareView(data); bindShareViewActions(); applyShareDarkMode(); $('#btnShareDarkMode')?.addEventListener('click', toggleShareDarkMode); } function enterShareViewMode(data) { if (isViewerMode()) { enterViewerMode(data); return; } document.body.classList.add('share-mode'); renderShareView(data); bindShareViewActions(); applyShareDarkMode(); } function exitShareViewMode() { if (isViewerMode()) return; document.body.classList.remove('share-dark'); window.location.href = getEditorBaseUrl(); } async function applyShareFromUrl() { const shareId = getShareIdFromUrl(); if (!shareId) return false; prepareViewerShell(); let raw = null; if (window.__VIEWER_PREFETCH_PROMISE) { try { raw = await window.__VIEWER_PREFETCH_PROMISE; } catch (e) { console.warn('shared conti prefetch failed', e); } } if (!raw) { try { raw = await fetchSharedContiViaRest(shareId); } catch (e) { console.warn('shared conti load failed (rest)', e); } } if (!raw) { const bridge = await waitForFirebaseBridge(8000); if (bridge?.fetchSharedConti) { try { raw = await bridge.fetchSharedConti(shareId); } catch (e) { console.warn('shared conti load failed (firebase)', e); } } } const songCount = (raw?.songs || raw?.s || []).length; if (!songCount) return false; enterShareViewMode(normalizeShareData({ ...raw, ...readShareQueryOverrides() })); return true; } function openModal(id) { $(`#${id}`).classList.remove('hidden'); } function closeModal(id) { $(`#${id}`).classList.add('hidden'); } function bindModals() { document.querySelectorAll('[data-close-modal]').forEach((btn) => { btn.addEventListener('click', () => closeModal(btn.dataset.closeModal)); }); document.querySelectorAll('.modal-backdrop').forEach((backdrop) => { backdrop.addEventListener('click', (e) => { if (e.target === backdrop) backdrop.classList.add('hidden'); }); }); } function renderLinkButtons(song, prefix = '') { const hasScore = Boolean(song.scoreUrl?.trim()); const hasVideo = Boolean(song.videoUrl?.trim()); let html = '<div class="flex flex-wrap gap-1.5 mt-1.5">'; if (hasScore) { html += `<button type="button" data-action="view-score" data-id="${song.id}" class="inline-flex items-center gap-0.5 text-[10px] font-medium text-emerald-700 hover:underline">?낅낫</button>`; } if (hasVideo) { html += `<button type="button" data-action="view-video" data-id="${song.id}" class="inline-flex items-center gap-0.5 text-[10px] font-medium text-red-600 hover:underline">?곸긽</button>`; } if (!hasScore && !hasVideo) { html += `<span class="text-[10px] text-slate-400">留곹겕 ?놁쓬</span>`; } html += '</div>'; return html; } function updateRegisterFormMode() { const editing = appState.editingSongId; $('#registerFormTitle').textContent = editing ? '怨??섏젙' : '??怨??깅줉'; $('#registerFormDesc').textContent = editing ? '?댁슜???섏젙??????ν븯?몄슂' : '援ш??먯꽌 ?낅낫쨌?곸긽 留곹겕瑜?李얠븘 ?깅줉?섏꽭??; $('#btnRegister').textContent = editing ? '蹂寃???? : '怨??깅줉'; $('#btnCancelEdit').classList.toggle('hidden', !editing); $('#btnDeleteSong').classList.toggle('hidden', !editing); updateRegisterButtonState(); } function fillRegisterForm(song) { $('#inputTitle').value = song.title; $('#inputComposer').value = song.composer || ''; $('#inputLyricist').value = song.lyricist || ''; $('#inputVersion').value = song.version || ''; $('#inputKey').value = song.key; $('#inputTempo').value = song.tempo; $('#inputScoreUrl').value = song.scoreUrl || ''; $('#inputVideoUrl').value = song.videoUrl || ''; updateTitleSearchButtons(); appState.formThemes = new Set(song.themes || []); renderThemePickerUI(); } function startEditSong(songId) { const song = getSongById(songId); if (!song) return; clearRegisterDraft(); appState.editingSongId = songId; fillRegisterForm(song); updateRegisterFormMode(); switchLeftTab('register'); } function cancelEditSong() { appState.editingSongId = null; resetRegisterForm(); updateRegisterFormMode(); } function deleteSong(songId) { const song = getSongById(songId); if (!song) return; if (!confirm(`??{song.title}?띿쓣(瑜? ?쇱씠釉뚮윭由ъ뿉????젣?좉퉴??`)) return; void (async () => { const uid = await ensureAuthenticatedUid({ allowWait: true }); const bridge = await waitForFirebaseBridge(); if (!uid || !bridge?.deleteUserSong) { if (appState.firebaseUser) { showToast('濡쒓렇???뺣낫瑜?遺덈윭?ㅻ뒗 以묒엯?덈떎. ?좎떆 ???ㅼ떆 ?쒕룄?댁＜?몄슂.'); } else { showToast('怨≪쓣 ??젣?섎젮硫?援ш? 濡쒓렇?몄씠 ?꾩슂?⑸땲??'); } return; } try { await bridge.deleteUserSong(uid, songId); if (appState.editingSongId === songId) cancelEditSong(); showToast('怨≪씠 ??젣?섏뿀?듬땲??); } catch (err) { console.warn('Song cloud delete failed', err); showErrorToast(err, 'song-delete'); } })(); } async function updateSong(songId, data) { const idx = appState.songs.findIndex((s) => s.id === songId); if (idx < 0) return null; const uid = await ensureAuthenticatedUid({ allowWait: true }); const bridge = await waitForFirebaseBridge(); if (!uid || !bridge?.updateUserSong) { if (appState.firebaseUser) { showToast('濡쒓렇???뺣낫瑜?遺덈윭?ㅻ뒗 以묒엯?덈떎. ?좎떆 ???ㅼ떆 ?쒕룄?댁＜?몄슂.'); } else { showToast('怨≪쓣 ?섏젙?섎젮硫?援ш? 濡쒓렇?몄씠 ?꾩슂?⑸땲??'); } return null; } const themes = [...data.themes]; try { const updated = await bridge.updateUserSong(uid, songId, { title: data.title.trim(), key: data.key, tempo: data.tempo, themes, scoreUrl: data.scoreUrl, videoUrl: data.videoUrl, composer: data.composer, lyricist: data.lyricist, version: data.version, }); mergeThemesIntoCatalog(themes); return normalizeSong(updated); } catch (err) { console.warn('Song cloud update failed', err); showErrorToast(err, 'song-update'); return null; } } function generateAnnotationId() { return `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`; } function getAnnotationById(annId) { for (const page of appState.layoutPages) { const found = (page.annotations || []).find((a) => a.id === annId); if (found) return found; } return null; } function selectAnnotation(annId) { appState.selectedAnnotationId = annId; document.querySelectorAll('.layout-annotation').forEach((el) => { el.classList.toggle('is-selected', Boolean(annId && el.dataset.annId === annId)); }); } function deleteAnnotation(annId) { appState.layoutPages.forEach((page) => { page.annotations = (page.annotations || []).filter((a) => a.id !== annId); }); if (appState.selectedAnnotationId === annId) appState.selectedAnnotationId = null; renderLayoutEditor(); saveLayoutSessionNow(); } function createAnnotation(pageIndex, type, x, y) { const page = appState.layoutPages[pageIndex]; if (!page.annotations) page.annotations = []; const o = appState.layoutToolOpts; const base = { id: generateAnnotationId(), type, x, y, zIndex: 40 + page.annotations.length }; let ann; if (type === 'text') { ann = { ...base, w: 150, h: 52, text: '硫붾え', fontSize: o.textSize, color: o.textColor }; } else if (type === 'rect') { ann = { ...base, w: 100, h: 72, fill: o.shapeColor }; } else if (type === 'ellipse') { ann = { ...base, w: 88, h: 88, fill: o.shapeColor }; } else { ann = { ...base, w: 220, h: HL_HEIGHTS[o.hlSize] || 18, fill: o.hlColor }; } page.annotations.push(ann); return ann; } function applyAnnotationStyle(el, ann) { el.style.left = `${ann.x}px`; el.style.top = `${ann.y}px`; el.style.width = `${ann.w}px`; el.style.height = `${ann.h}px`; el.style.zIndex = String(ann.zIndex ?? 40); } function clampAnnotation(ann, pageIndex) { const { w: pageW, h: pageH } = getPageSize(pageIndex); ann.w = Math.max(24, Math.min(ann.w, pageW)); ann.h = Math.max(8, Math.min(ann.h, pageH)); ann.x = Math.max(0, Math.min(ann.x, pageW - ann.w)); ann.y = Math.max(0, Math.min(ann.y, pageH - ann.h)); const el = document.querySelector(`.layout-annotation[data-ann-id="${CSS.escape(ann.id)}"]`); if (el) applyAnnotationStyle(el, ann); } function renderAnnotationElement(ann) { const el = document.createElement('div'); el.className = `layout-annotation layout-ann-${ann.type}${ann.type === 'ellipse' ? ' layout-ann-ellipse' : ''}`; el.dataset.annId = ann.id; applyAnnotationStyle(el, ann); const del = document.createElement('button'); del.type = 'button'; del.className = 'layout-ann-delete'; del.textContent = '횞'; del.title = '二쇱꽍 ??젣'; del.addEventListener('click', (e) => { e.stopPropagation(); deleteAnnotation(ann.id); }); el.appendChild(del); const resize = document.createElement('div'); resize.className = 'layout-ann-resize'; el.appendChild(resize); if (ann.type === 'text') { const body = document.createElement('div'); body.className = 'layout-ann-text-body'; body.contentEditable = 'true'; body.textContent = ann.text || ''; body.style.fontSize = `${ann.fontSize || 14}px`; body.style.color = ann.color || '#0f172a'; body.addEventListener('input', () => { ann.text = body.textContent || ''; saveLayoutSessionNow(); }); body.addEventListener('blur', saveLayoutSessionNow); body.addEventListener('mousedown', (e) => e.stopPropagation()); el.appendChild(body); } else { el.style.background = ann.fill || 'rgba(250,204,21,0.4)'; if (ann.type === 'highlight') el.style.border = 'none'; else el.style.border = '1px solid rgb(0 0 0 / 0.08)'; } return el; } function renderSongFormBlock(songId) { const ex = getSongExtras(songId); const tags = getAllFormTags().map((t) => `<button type="button" class="form-tag-chip" data-form-tag data-song-id="${escapeAttr(songId)}" data-tag="${escapeAttr(t)}">[${escapeHtml(t)}]</button>` ).join(''); return ` <div class="song-form-block" data-song-form-block="${escapeAttr(songId)}"> <p class="text-[10px] font-semibold text-slate-600 mb-1">怨?援ъ“ (Song Form)</p> <div class="flex flex-wrap gap-1 mb-1.5">${tags} <button type="button" class="form-tag-add" data-form-tag-add data-song-id="${escapeAttr(songId)}">+ 援ъ“ 異붽?</button> </div> <div class="flex gap-1"> <input type="text" class="song-form-input flex-1 min-w-0" data-song-form-input data-song-id="${escapeAttr(songId)}" value="${escapeAttr(ex.songForm)}" placeholder="Intro -> V1 -> Chorus" /> <button type="button" class="song-form-pop" data-song-form-pop data-song-id="${escapeAttr(songId)}">留덉?留???젣</button> </div> </div>`; } function renderSongMemoBlock(songId, orderNum) { const ex = getSongExtras(songId); const song = getSongById(songId); if (!song) return ''; return ` <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm" data-song-memo-block="${escapeAttr(songId)}"> <p class="text-xs font-semibold text-slate-800 mb-2"><span class="text-indigo-600">${orderNum}.</span> ${escapeHtml(song.title)}</p> <textarea class="song-memo-input" data-song-memo data-song-id="${escapeAttr(songId)}" placeholder="??怨??뱀씠?ы빆 (由ы뿀?? ?붾줈, ?쒗룷 蹂寃???">${escapeHtml(ex.songMemo)}</textarea> <div class="conti-flag-row mt-2"> <label><input type="checkbox" data-song-memo-print data-song-id="${escapeAttr(songId)}" ${ex.songMemoPrint !== false ? 'checked' : ''} /> PDF ?몄뇙臾쇱뿉 ?ы븿</label> <label><input type="checkbox" data-song-memo-share data-song-id="${escapeAttr(songId)}" ${ex.songMemoShare !== false ? 'checked' : ''} /> 怨듭쑀 留곹겕???ы븿</label> </div> </div>`; } function renderContiMemoPanel() { const listEl = $('#contiSongMemoList'); const emptyEl = $('#contiSongMemoEmpty'); if (!listEl || !emptyEl) return; if (!appState.conti.length) { listEl.innerHTML = ''; emptyEl.classList.remove('hidden'); return; } emptyEl.classList.add('hidden'); listEl.innerHTML = appState.conti.map((id, index) => renderSongMemoBlock(id, index + 1)).join(''); } function bindContiSongFormOnce() { const list = $('#contiList'); if (list.dataset.formBound) return; list.dataset.formBound = '1'; list.addEventListener('click', (e) => { const tagBtn = e.target.closest('[data-form-tag]'); if (tagBtn) { appendFormTag(tagBtn.dataset.songId, tagBtn.dataset.tag); const inp = list.querySelector(`[data-song-form-input][data-song-id="${CSS.escape(tagBtn.dataset.songId)}"]`); if (inp) inp.value = getSongExtras(tagBtn.dataset.songId).songForm; return; } const addBtn = e.target.closest('[data-form-tag-add]'); if (addBtn) { const name = prompt('??援ъ“ ?쒓렇 ?대쫫 (?? Pre-C, V3, Hook)'); if (!name?.trim()) return; const t = name.trim(); if (!appState.customFormTags.includes(t) && !DEFAULT_FORM_TAGS.includes(t)) { appState.customFormTags.push(t); persistCurrentConti(); } renderConti(); return; } const popBtn = e.target.closest('[data-song-form-pop]'); if (popBtn) { popLastFormTag(popBtn.dataset.songId); const inp = list.querySelector(`[data-song-form-input][data-song-id="${CSS.escape(popBtn.dataset.songId)}"]`); if (inp) inp.value = getSongExtras(popBtn.dataset.songId).songForm; } }); list.addEventListener('input', (e) => { const formInp = e.target.closest('[data-song-form-input]'); if (formInp) { getSongExtras(formInp.dataset.songId).songForm = formInp.value; persistCurrentConti(); } }); } function bindContiMemoPanelOnce() { const panel = $('#contiMemoPanel'); if (!panel || panel.dataset.memoBound) return; panel.dataset.memoBound = '1'; panel.addEventListener('input', (e) => { const memoInp = e.target.closest('[data-song-memo]'); if (memoInp) { getSongExtras(memoInp.dataset.songId).songMemo = memoInp.value; persistCurrentConti(); if (!$('#modalLayoutEditor').classList.contains('hidden')) renderLayoutEditor(); } }); panel.addEventListener('change', (e) => { const printCb = e.target.closest('[data-song-memo-print]'); if (printCb) { getSongExtras(printCb.dataset.songId).songMemoPrint = printCb.checked; persistCurrentConti(); if (!$('#modalLayoutEditor').classList.contains('hidden')) renderLayoutEditor(); return; } const shareCb = e.target.closest('[data-song-memo-share]'); if (shareCb) { getSongExtras(shareCb.dataset.songId).songMemoShare = shareCb.checked; persistCurrentConti(); } }); } function setLayoutTool(tool) { appState.layoutTool = tool; document.querySelectorAll('[data-layout-tool]').forEach((btn) => { btn.classList.toggle('active', btn.dataset.layoutTool === tool); }); $('#layoutOptText').classList.toggle('hidden', tool !== 'text'); $('#layoutOptShape').classList.toggle('hidden', tool !== 'rect' && tool !== 'ellipse'); $('#layoutOptHighlight').classList.toggle('hidden', tool !== 'highlight'); document.querySelectorAll('.layout-canvas').forEach((c) => { c.classList.toggle('tool-crosshair', tool !== 'select'); }); } function bindLayoutToolsOnce() { const panel = $('#layoutToolsPanel'); if (panel.dataset.bound) return; panel.dataset.bound = '1'; panel.querySelectorAll('[data-layout-tool]').forEach((btn) => { btn.addEventListener('click', () => setLayoutTool(btn.dataset.layoutTool)); }); panel.querySelectorAll('[data-text-color]').forEach((btn) => { btn.addEventListener('click', () => { appState.layoutToolOpts.textColor = btn.dataset.textColor; }); }); $('#layoutTextSize')?.addEventListener('change', (e) => { appState.layoutToolOpts.textSize = Number(e.target.value); }); panel.querySelectorAll('[data-shape-color]').forEach((btn) => { btn.addEventListener('click', () => { appState.layoutToolOpts.shapeColor = btn.dataset.shapeColor; }); }); panel.querySelectorAll('[data-hl-color]').forEach((btn) => { btn.addEventListener('click', () => { appState.layoutToolOpts.hlColor = btn.dataset.hlColor; }); }); $('#layoutHlSize')?.addEventListener('change', (e) => { appState.layoutToolOpts.hlSize = e.target.value; }); ['printHeaderEnabled', 'printHeaderDate', 'printHeaderChurch', 'printHeaderService', 'layoutMemoPrint', 'layoutMemoShare', 'layoutContiMemo'].forEach((id) => { const el = document.getElementById(id); if (!el) return; const onHeaderChange = () => { readPrintHeaderFromUI(); renderLayoutEditor(); saveLayoutSessionNow(); }; el.addEventListener('change', onHeaderChange); if (el.tagName === 'TEXTAREA' || id.startsWith('printHeader')) { el.addEventListener('input', onHeaderChange); } }); } function generateLayoutPageId() { return `page-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; } function getPagePreset(presetId) { return PAGE_PRESETS[presetId] || PAGE_PRESETS.a4; } function getEffectivePagePreset(presetId, orientation = appState.layoutOrientation || 'portrait') { const base = getPagePreset(presetId); if (orientation !== 'landscape') return { ...base }; const w = base.h; const h = base.w; const label = base.label.replace(/\(\d+횞\d+\)/, `(${w}횞${h})`); const sizeName = base.printCssSize.replace(/\s*portrait\s*/i, '').trim(); return { ...base, w, h, label, printCssSize: `${sizeName} landscape`, }; } function getPageSize(pageIndex) { const page = appState.layoutPages[pageIndex]; const preset = getEffectivePagePreset(page?.presetId || 'a4'); return { w: preset.w, h: preset.h, preset }; } function syncLayoutOrientationUI() { const orient = appState.layoutOrientation || 'portrait'; $('#btnLayoutPortrait')?.classList.toggle('active', orient === 'portrait'); $('#btnLayoutLandscape')?.classList.toggle('active', orient === 'landscape'); document.body.classList.toggle('layout-orient-landscape', orient === 'landscape'); document.body.classList.toggle('layout-orient-portrait', orient === 'portrait'); } function setLayoutOrientation(orientation) { if (orientation !== 'portrait' && orientation !== 'landscape') return; if (appState.layoutOrientation === orientation) return; appState.layoutOrientation = orientation; syncLayoutOrientationUI(); appState.layoutPages.forEach((page, pageIndex) => { page.items.forEach((item) => clampLayoutItem(item, pageIndex)); (page.annotations || []).forEach((ann) => clampAnnotation(ann, pageIndex)); }); renderLayoutEditor(); saveLayoutSessionNow(); } function createEmptyLayoutPage(presetId = 'a4') { return { pageId: generateLayoutPageId(), presetId, items: [], annotations: [] }; } function fillNewPagePresetSelect() { const sel = $('#newPagePresetSelect'); if (!sel) return; sel.innerHTML = Object.values(PAGE_PRESETS).map((p) => `<option value="${p.id}">${escapeHtml(p.label)}</option>` ).join(''); } function buildPagePresetOptions(selectedId) { return Object.values(PAGE_PRESETS).map((p) => `<option value="${p.id}"${p.id === selectedId ? ' selected' : ''}>${escapeHtml(p.label)}</option>` ).join(''); } function preloadScoreImage(url) { return new Promise((resolve) => { const src = normalizeScoreImageUrl(url); if (!src) return resolve(null); let settled = false; const finish = (val) => { if (settled) return; settled = true; clearTimeout(timer); resolve(val); }; const timer = setTimeout(() => finish(null), 10000); const img = new Image(); img.onload = () => { if (img.naturalWidth > 0 && img.naturalHeight > 0) { finish({ w: img.naturalWidth, h: img.naturalHeight, ratio: img.naturalWidth / img.naturalHeight, }); } else finish(null); }; img.onerror = () => finish(null); img.src = src; if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) { finish({ w: img.naturalWidth, h: img.naturalHeight, ratio: img.naturalWidth / img.naturalHeight, }); } }); } async function preloadScoreDimensionsForSongs(songs) { const map = new Map(); await Promise.all(songs.map(async (song) => { if (!song.scoreUrl?.trim()) return; const dims = await preloadScoreImage(song.scoreUrl); if (dims) map.set(song.id, dims); })); return map; } function computeLayoutItemSize(aspectRatio, pageW, pageH, topY) { const maxW = pageW - LAYOUT_PAD * 2; const maxH = Math.max(LAYOUT_MIN_H, pageH - topY - LAYOUT_PAD); let w = maxW; let h = w / aspectRatio; if (h > maxH) { h = maxH; w = h * aspectRatio; } w = Math.max(LAYOUT_MIN_W, Math.min(w, maxW)); h = w / aspectRatio; if (h > maxH) { h = maxH; w = h * aspectRatio; } h = Math.max(LAYOUT_MIN_H, h); return { w: Math.round(w), h: Math.round(h) }; } function createLayoutItemFromSong(song, index, pageW, pageH, cursorY, dims) { const hasScore = Boolean(song.scoreUrl?.trim()); const maxW = pageW - LAYOUT_PAD * 2; let w; let h; let aspectRatio = 0; if (hasScore && dims?.ratio) { aspectRatio = dims.ratio; ({ w, h } = computeLayoutItemSize(aspectRatio, pageW, pageH, cursorY)); } else if (hasScore) { aspectRatio = 0.72; ({ w, h } = computeLayoutItemSize(aspectRatio, pageW, pageH, cursorY)); } else { w = Math.min(280, maxW); h = 32; } const item = { id: `layout-${song.id}-${index}`, songId: song.id, orderNum: index + 1, title: song.title, scoreUrl: normalizeScoreImageUrl(song.scoreUrl || ''), songForm: getSongExtras(song.id).songForm || '', hasScore, x: LAYOUT_PAD, y: LAYOUT_PAD, w, h, zIndex: 1, }; if (aspectRatio > 0) item.aspectRatio = aspectRatio; return item; } async function buildInitialLayoutPages(songs) { const dimensionMap = await preloadScoreDimensionsForSongs(songs); const pages = [createEmptyLayoutPage('a4')]; let pageIndex = 0; let cursorY = getLayoutStartY(pageIndex); songs.forEach((song, index) => { const { w, h } = getPageSize(pageIndex); const dims = dimensionMap.get(song.id); const item = createLayoutItemFromSong(song, index, w, h, cursorY, dims); const maxY = h - item.h - LAYOUT_PAD; if (cursorY > maxY && pages[pageIndex].items.length > 0) { pageIndex += 1; pages.push(createEmptyLayoutPage('a4')); cursorY = getLayoutStartY(pageIndex); } item.x = LAYOUT_PAD; item.y = cursorY; pages[pageIndex].items.push(item); item.zIndex = pages[pageIndex].items.length; cursorY += item.h + LAYOUT_GAP; }); return pages; } async function normalizeLayoutPagesFromImages(pages) { const tasks = []; pages.forEach((page, pageIndex) => { const { w: pageW, h: pageH } = getPageSize(pageIndex); page.items.forEach((item) => { if (!item.hasScore || !item.scoreUrl?.trim()) return; tasks.push((async () => { const dims = await preloadScoreImage(item.scoreUrl); if (!dims?.ratio) return; item.aspectRatio = dims.ratio; const size = computeLayoutItemSize(dims.ratio, pageW, pageH, item.y); item.w = size.w; item.h = size.h; item.x = Math.max(LAYOUT_PAD, Math.min(item.x, pageW - item.w - LAYOUT_PAD)); const minY = getLayoutStartY(pageIndex); item.y = Math.max(minY, Math.min(item.y, pageH - item.h - LAYOUT_PAD)); })()); }); }); await Promise.all(tasks); } function getLayoutItemById(itemId) { for (const page of appState.layoutPages) { const found = page.items.find((it) => it.id === itemId); if (found) return found; } return null; } function applyLayoutItemStyle(el, item) { el.style.left = `${item.x}px`; el.style.top = `${item.y}px`; el.style.width = `${item.w}px`; el.style.height = `${item.h}px`; el.style.zIndex = String(item.zIndex ?? 1); } function getLayoutItemAspectRatio(item, itemEl) { if (item.aspectRatio > 0) return item.aspectRatio; const img = itemEl?.querySelector('.layout-score-img'); if (img?.naturalWidth > 0 && img.naturalHeight > 0) { item.aspectRatio = img.naturalWidth / img.naturalHeight; return item.aspectRatio; } if (item.w > 0 && item.h > 0) return item.w / item.h; return 1; } function clampLayoutItemWithAspect(item, pageIndex, aspectRatio, updateDom = true) { const { w: pageW, h: pageH } = getPageSize(pageIndex); let nw = item.w; let nh = item.h; if (nw > pageW) { nw = pageW; nh = nw / aspectRatio; } if (nh > pageH) { nh = pageH; nw = nh * aspectRatio; } if (nw < LAYOUT_MIN_W) { nw = LAYOUT_MIN_W; nh = nw / aspectRatio; } if (nh < LAYOUT_MIN_H) { nh = LAYOUT_MIN_H; nw = nh * aspectRatio; } if (nw > pageW) { nw = pageW; nh = nw / aspectRatio; } if (nh > pageH) { nh = pageH; nw = nh * aspectRatio; } item.w = nw; item.h = nh; item.x = Math.max(0, Math.min(item.x, pageW - item.w)); item.y = Math.max(0, Math.min(item.y, pageH - item.h)); if (updateDom) { const el = document.querySelector(`.layout-item[data-item-id="${CSS.escape(item.id)}"]`); if (el) applyLayoutItemStyle(el, item); } } function resizeLayoutItemProportional(item, pageIndex, startW, startH, aspectRatio, dx, dy) { const scaleW = (startW + dx) / startW; const scaleH = (startH + dy) / startH; let scale = Math.max(scaleW, scaleH); scale = Math.max(scale, LAYOUT_MIN_W / startW, LAYOUT_MIN_H / startH); item.w = startW * scale; item.h = item.w / aspectRatio; clampLayoutItemWithAspect(item, pageIndex, aspectRatio); } function syncPageZIndices(pageIndex) { const items = appState.layoutPages[pageIndex]?.items || []; items.forEach((item, i) => { item.zIndex = i + 1; const el = document.querySelector(`.layout-item[data-item-id="${CSS.escape(item.id)}"]`); if (el) el.style.zIndex = String(item.zIndex); }); } function reorderLayoutItemInPage(pageIndex, itemId, targetIndex) { const items = appState.layoutPages[pageIndex]?.items; if (!items) return; const from = items.findIndex((it) => it.id === itemId); if (from < 0) return; const clamped = Math.max(0, Math.min(targetIndex, items.length - 1)); if (from === clamped) return; const [item] = items.splice(from, 1); items.splice(clamped, 0, item); syncPageZIndices(pageIndex); const canvas = getCanvasFromPageIndex(pageIndex); if (!canvas) return; items.forEach((it) => { const el = document.querySelector(`.layout-item[data-item-id="${CSS.escape(it.id)}"]`); if (el) canvas.appendChild(el); }); } function bringLayoutItemToFront(item, pageIndex) { const items = appState.layoutPages[pageIndex]?.items || []; reorderLayoutItemInPage(pageIndex, item.id, items.length - 1); } function sendLayoutItemToBack(item, pageIndex) { reorderLayoutItemInPage(pageIndex, item.id, 0); } function stepLayoutItemLayer(item, pageIndex, delta) { const items = appState.layoutPages[pageIndex]?.items || []; const idx = items.findIndex((it) => it.id === item.id); if (idx < 0) return; reorderLayoutItemInPage(pageIndex, item.id, idx + delta); } function appendLayoutOrderBadge(parent, orderNum) { const badge = document.createElement('span'); badge.className = 'layout-order-badge'; badge.textContent = String(orderNum); badge.setAttribute('aria-label', `肄섑떚 ${orderNum}踰?怨?); parent.appendChild(badge); return badge; } function renderLayoutItemElement(item) { const el = document.createElement('div'); el.className = `layout-item${item.hasScore ? ' layout-item-score' : ' layout-item-no-score'}`; el.dataset.itemId = item.id; if (item.zIndex == null) item.zIndex = 1; applyLayoutItemStyle(el, item); appendLayoutOrderBadge(el, item.orderNum ?? 1); const layerBar = document.createElement('div'); layerBar.className = 'layout-layer-bar'; [ { action: 'front', label: '??, title: '留??욎쑝濡? }, { action: 'forward', label: '??, title: '?욎쑝濡? }, { action: 'backward', label: '??, title: '?ㅻ줈' }, { action: 'back', label: '??, title: '留??ㅻ줈' }, ].forEach(({ action, label, title }) => { const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'layout-layer-btn'; btn.dataset.layer = action; btn.dataset.itemId = item.id; btn.title = title; btn.textContent = label; layerBar.appendChild(btn); }); el.appendChild(layerBar); if (item.hasScore) { const img = document.createElement('img'); img.className = 'layout-score-img'; img.src = normalizeScoreImageUrl(item.scoreUrl); img.alt = ''; img.draggable = false; img.addEventListener('load', () => { if (img.naturalWidth <= 0 || img.naturalHeight <= 0) return; const ar = img.naturalWidth / img.naturalHeight; const currentAr = item.w / item.h; item.aspectRatio = ar; if (Math.abs(currentAr - ar) > 0.015) { const canvas = el.closest('.layout-canvas'); const pageIndex = Number(canvas?.dataset.pageIndex); if (!Number.isNaN(pageIndex)) { const { w: pageW, h: pageH } = getPageSize(pageIndex); const size = computeLayoutItemSize(ar, pageW, pageH, item.y); item.w = size.w; item.h = size.h; applyLayoutItemStyle(el, item); } } }); el.appendChild(img); if (item.songForm) { const sf = document.createElement('div'); sf.className = 'layout-song-form-label'; sf.textContent = item.songForm; el.appendChild(sf); } } else { const label = document.createElement('span'); label.className = 'layout-no-score-label'; label.textContent = item.title || '?낅낫 ?놁쓬'; el.appendChild(label); } const handle = document.createElement('div'); handle.className = 'layout-resize-handle'; handle.title = item.hasScore ? '?ш린 議곗젅 (鍮꾩쑉 ?좎?)' : '?ш린 議곗젅'; el.appendChild(handle); return el; } function renderLayoutEditor() { const scroll = $('#layoutEditorScroll'); scroll.innerHTML = ''; appState.layoutPages.forEach((page, pageIndex) => { const preset = getEffectivePagePreset(page.presetId); const wrap = document.createElement('div'); wrap.className = 'layout-page-wrap'; wrap.dataset.pageIndex = String(pageIndex); const header = document.createElement('div'); header.className = 'layout-page-header'; const label = document.createElement('span'); label.className = 'layout-page-label'; label.textContent = `Page ${pageIndex + 1} 쨌 ${preset.label.split(' (')[0]} (${preset.w}횞${preset.h})`; const controls = document.createElement('div'); controls.className = 'flex flex-wrap items-center gap-2'; const presetSelect = document.createElement('select'); presetSelect.className = 'text-xs rounded-lg border border-slate-200 px-2 py-1 bg-white'; presetSelect.dataset.action = 'page-preset'; presetSelect.innerHTML = buildPagePresetOptions(page.presetId); if (pageIndex > 0) { const delBtn = document.createElement('button'); delBtn.type = 'button'; delBtn.className = 'text-xs px-2.5 py-1 rounded-lg border border-red-200 text-red-600 hover:bg-red-50 font-medium'; delBtn.dataset.action = 'delete-page'; delBtn.textContent = '???섏씠吏 ??젣'; controls.appendChild(delBtn); } controls.appendChild(presetSelect); header.appendChild(label); header.appendChild(controls); const canvas = document.createElement('div'); canvas.className = `layout-canvas page${appState.layoutTool !== 'select' ? ' tool-crosshair' : ''}`; canvas.dataset.pageIndex = String(pageIndex); canvas.style.width = `${preset.w}px`; canvas.style.height = `${preset.h}px`; appendLayoutCanvasHeaderOverlay(canvas, pageIndex); page.items.forEach((item) => { canvas.appendChild(renderLayoutItemElement(item)); clampLayoutItem(item, pageIndex, false); }); (page.annotations || []).forEach((ann) => { canvas.appendChild(renderAnnotationElement(ann)); }); wrap.appendChild(header); wrap.appendChild(canvas); scroll.appendChild(wrap); }); } function getCanvasFromPageIndex(pageIndex) { return document.querySelector(`.layout-canvas[data-page-index="${pageIndex}"]`); } function findCanvasAtPoint(clientX, clientY) { const canvases = [...document.querySelectorAll('.layout-canvas')]; for (const canvas of canvases) { const rect = canvas.getBoundingClientRect(); if ( clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom ) { return canvas; } } return null; } function moveItemToPage(item, fromIndex, toIndex) { if (fromIndex === toIndex) return; const pages = appState.layoutPages; pages[fromIndex].items = pages[fromIndex].items.filter((i) => i.id !== item.id); syncPageZIndices(fromIndex); pages[toIndex].items.push(item); syncPageZIndices(toIndex); const el = document.querySelector(`.layout-item[data-item-id="${CSS.escape(item.id)}"]`); const canvas = getCanvasFromPageIndex(toIndex); if (el && canvas) canvas.appendChild(el); saveLayoutSessionNow(); } function clampLayoutItem(item, pageIndex, updateDom = true) { const { w: pageW, h: pageH } = getPageSize(pageIndex); item.w = Math.max(LAYOUT_MIN_W, Math.min(item.w, pageW)); item.h = Math.max(LAYOUT_MIN_H, Math.min(item.h, pageH)); item.x = Math.max(0, Math.min(item.x, pageW - item.w)); item.y = Math.max(0, Math.min(item.y, pageH - item.h)); if (updateDom) { const el = document.querySelector(`.layout-item[data-item-id="${CSS.escape(item.id)}"]`); if (el) applyLayoutItemStyle(el, item); } } function onLayoutMouseMove(e) { const st = appState.layoutDrag; if (!st) return; const dx = e.clientX - st.startMouseX; const dy = e.clientY - st.startMouseY; if (st.kind === 'annotation') { const ann = st.ann; if (st.mode === 'resize') { ann.w = Math.max(24, st.startW + dx); ann.h = Math.max(8, st.startH + dy); clampAnnotation(ann, st.pageIndex); } else { const canvas = getCanvasFromPageIndex(st.pageIndex); const rect = canvas?.getBoundingClientRect(); if (rect) { ann.x = e.clientX - rect.left - st.dragOffsetX; ann.y = e.clientY - rect.top - st.dragOffsetY; clampAnnotation(ann, st.pageIndex); } } return; } if (st.mode === 'resize') { if (st.item.hasScore && st.aspectRatio) { resizeLayoutItemProportional(st.item, st.pageIndex, st.startW, st.startH, st.aspectRatio, dx, dy); } else { st.item.w = Math.max(LAYOUT_MIN_W, st.startW + dx); st.item.h = Math.max(LAYOUT_MIN_H, st.startH + dy); clampLayoutItem(st.item, st.pageIndex); } return; } const targetCanvas = findCanvasAtPoint(e.clientX, e.clientY); if (!targetCanvas) return; const newPageIndex = Number(targetCanvas.dataset.pageIndex); if (newPageIndex !== st.pageIndex) { moveItemToPage(st.item, st.pageIndex, newPageIndex); st.pageIndex = newPageIndex; } const rect = targetCanvas.getBoundingClientRect(); st.item.x = e.clientX - rect.left - st.dragOffsetX; st.item.y = e.clientY - rect.top - st.dragOffsetY; clampLayoutItem(st.item, st.pageIndex); } function endLayoutDrag() { if (!appState.layoutDrag) return; const st = appState.layoutDrag; if (st.kind === 'annotation') { const el = document.querySelector(`.layout-annotation[data-ann-id="${CSS.escape(st.ann.id)}"]`); if (el) el.classList.remove('is-dragging'); } else { const el = document.querySelector(`.layout-item[data-item-id="${CSS.escape(st.item.id)}"]`); if (el) el.classList.remove('is-dragging', 'is-resizing'); } appState.layoutDrag = null; document.removeEventListener('mousemove', onLayoutMouseMove); document.removeEventListener('mouseup', endLayoutDrag); saveLayoutSessionNow(); } function startAnnotationDrag(e, ann, pageIndex, mode) { e.preventDefault(); e.stopPropagation(); selectAnnotation(ann.id); const canvas = getCanvasFromPageIndex(pageIndex); const rect = canvas?.getBoundingClientRect(); const dragOffsetX = mode === 'drag' && rect ? e.clientX - rect.left - ann.x : 0; const dragOffsetY = mode === 'drag' && rect ? e.clientY - rect.top - ann.y : 0; appState.layoutDrag = { kind: 'annotation', mode, ann, pageIndex, startMouseX: e.clientX, startMouseY: e.clientY, startW: ann.w, startH: ann.h, dragOffsetX, dragOffsetY, }; const el = document.querySelector(`.layout-annotation[data-ann-id="${CSS.escape(ann.id)}"]`); if (el) el.classList.add('is-dragging'); document.addEventListener('mousemove', onLayoutMouseMove); document.addEventListener('mouseup', endLayoutDrag); } function startLayoutDrag(e, item, pageIndex, mode) { e.preventDefault(); e.stopPropagation(); const canvas = getCanvasFromPageIndex(pageIndex); const rect = canvas?.getBoundingClientRect(); const dragOffsetX = mode === 'drag' && rect ? e.clientX - rect.left - item.x : 0; const dragOffsetY = mode === 'drag' && rect ? e.clientY - rect.top - item.y : 0; const el = document.querySelector(`.layout-item[data-item-id="${CSS.escape(item.id)}"]`); const aspectRatio = mode === 'resize' && item.hasScore ? getLayoutItemAspectRatio(item, el) : null; appState.layoutDrag = { kind: 'item', mode, item, pageIndex, startMouseX: e.clientX, startMouseY: e.clientY, startItemX: item.x, startItemY: item.y, startW: item.w, startH: item.h, aspectRatio, dragOffsetX, dragOffsetY, }; if (mode === 'drag') bringLayoutItemToFront(item, pageIndex); if (el) el.classList.add(mode === 'drag' ? 'is-dragging' : 'is-resizing'); document.addEventListener('mousemove', onLayoutMouseMove); document.addEventListener('mouseup', endLayoutDrag); } function addLayoutPage() { const presetId = $('#newPagePresetSelect')?.value || 'a4'; appState.layoutPages.push(createEmptyLayoutPage(presetId)); renderLayoutEditor(); saveLayoutSessionNow(); const scroll = $('#layoutEditorScroll'); scroll.lastElementChild?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } function deleteLayoutPage(pageIndex) { if (pageIndex <= 0) { alert('Page 1? ??젣?????놁뒿?덈떎.'); return; } const page = appState.layoutPages[pageIndex]; if (page?.items?.length) { const ok = confirm(`Page ${pageIndex + 1}??${page.items.length}媛쒖쓽 ?낅낫媛 ?덉뒿?덈떎. ???섏씠吏瑜???젣?좉퉴??`); if (!ok) return; } appState.layoutPages.splice(pageIndex, 1); renderLayoutEditor(); saveLayoutSessionNow(); } function setPagePreset(pageIndex, presetId) { const page = appState.layoutPages[pageIndex]; if (!page || !PAGE_PRESETS[presetId]) return; page.presetId = presetId; const canvas = getCanvasFromPageIndex(pageIndex); const preset = getEffectivePagePreset(presetId); if (canvas) { canvas.style.width = `${preset.w}px`; canvas.style.height = `${preset.h}px`; } page.items.forEach((item) => clampLayoutItem(item, pageIndex)); saveLayoutSessionNow(); } function bindLayoutEditorEvents() { const scroll = $('#layoutEditorScroll'); if (scroll.dataset.bound) return; scroll.dataset.bound = '1'; scroll.addEventListener('mousedown', (e) => { if (e.target.closest('.layout-layer-bar') || e.target.closest('.layout-ann-delete')) return; const annResize = e.target.closest('.layout-ann-resize'); const annEl = e.target.closest('.layout-annotation'); if (annEl && !e.target.closest('.layout-ann-text-body')) { const ann = getAnnotationById(annEl.dataset.annId); if (!ann) return; const canvas = annEl.closest('.layout-canvas'); const pageIndex = Number(canvas?.dataset.pageIndex ?? 0); startAnnotationDrag(e, ann, pageIndex, annResize ? 'resize' : 'drag'); return; } if (e.target.closest('.layout-ann-text-body')) { const annEl2 = e.target.closest('.layout-annotation'); if (annEl2) selectAnnotation(annEl2.dataset.annId); return; } const canvasOnly = e.target.closest('.layout-canvas'); if (canvasOnly && e.target.classList.contains('layout-canvas')) { const pageIndex = Number(canvasOnly.dataset.pageIndex); const tool = appState.layoutTool; if (tool !== 'select') { const rect = canvasOnly.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const ann = createAnnotation(pageIndex, tool === 'highlight' ? 'highlight' : tool, x, y); renderLayoutEditor(); selectAnnotation(ann.id); saveLayoutSessionNow(); return; } selectAnnotation(null); } const handle = e.target.closest('.layout-resize-handle'); const itemEl = e.target.closest('.layout-item'); if (!itemEl) return; const itemId = itemEl.dataset.itemId; const item = getLayoutItemById(itemId); if (!item) return; const canvas = itemEl.closest('.layout-canvas'); const pageIndex = Number(canvas?.dataset.pageIndex ?? 0); if (handle) { startLayoutDrag(e, item, pageIndex, 'resize'); } else { startLayoutDrag(e, item, pageIndex, 'drag'); } }); scroll.addEventListener('click', (e) => { const layerBtn = e.target.closest('[data-layer]'); if (layerBtn) { e.stopPropagation(); const item = getLayoutItemById(layerBtn.dataset.itemId); if (!item) return; const canvas = layerBtn.closest('.layout-item')?.closest('.layout-canvas'); const pageIndex = Number(canvas?.dataset.pageIndex ?? 0); const action = layerBtn.dataset.layer; if (action === 'front') bringLayoutItemToFront(item, pageIndex); else if (action === 'back') sendLayoutItemToBack(item, pageIndex); else if (action === 'forward') stepLayoutItemLayer(item, pageIndex, 1); else if (action === 'backward') stepLayoutItemLayer(item, pageIndex, -1); return; } const delBtn = e.target.closest('[data-action="delete-page"]'); if (!delBtn) return; const wrap = delBtn.closest('.layout-page-wrap'); const pageIndex = Number(wrap?.dataset.pageIndex); if (!Number.isNaN(pageIndex)) deleteLayoutPage(pageIndex); }); scroll.addEventListener('change', (e) => { const sel = e.target.closest('[data-action="page-preset"]'); if (!sel) return; const wrap = sel.closest('.layout-page-wrap'); const pageIndex = Number(wrap?.dataset.pageIndex); if (!Number.isNaN(pageIndex)) setPagePreset(pageIndex, sel.value); }); } async function openLayoutEditor() { const songs = getContiSongs(); if (!songs.length) { alert('肄섑떚??怨≪쓣 ?댁? ??PDF ?몄쭛???댁뼱 二쇱꽭??'); return; } const pdfBtn = $('#btnPdf'); const pdfBtnLabel = pdfBtn?.textContent || 'PDF ?몄쭛'; if (pdfBtn) { pdfBtn.disabled = true; pdfBtn.textContent = '?낅낫 遺덈윭?ㅻ뒗 以묅?; } try { fillNewPagePresetSelect(); syncPrintHeaderDateFromContiDate(); syncPrintHeaderUI(); const ids = [...appState.conti]; if (appState.storedLayoutPages?.length && layoutMatchesConti(appState.storedLayoutPages, ids)) { appState.layoutPages = JSON.parse(JSON.stringify(appState.storedLayoutPages)); appState.layoutPages.forEach((p) => { if (!p.annotations) p.annotations = []; if (!p.items) p.items = []; }); await normalizeLayoutPagesFromImages(appState.layoutPages); } else { appState.layoutPages = await buildInitialLayoutPages(songs); saveLayoutSessionNow(); } setLayoutTool('select'); bindLayoutToolsOnce(); syncLayoutOrientationUI(); renderLayoutEditor(); $('#modalLayoutEditor').classList.remove('hidden'); document.body.style.overflow = 'hidden'; } finally { if (pdfBtn) { pdfBtn.disabled = false; pdfBtn.textContent = pdfBtnLabel; } } } function closeLayoutEditor() { endLayoutDrag(); saveLayoutSessionNow(); $('#modalLayoutEditor').classList.add('hidden'); document.body.style.overflow = ''; } function buildPrintPageStyleTag() { const orient = appState.layoutOrientation || 'portrait'; const sizes = [...new Set(appState.layoutPages.map((p) => getEffectivePagePreset(p.presetId, orient).printCssSize))]; const pageRule = sizes.length === 1 ? `@page { size: ${sizes[0]}; margin: 0; }` : `@page { size: A4 ${orient}; margin: 0; }`; return `<style id="printLayoutDynamicStyle">${pageRule}</style>`; } function buildPrintAnnotationHtml(ann) { const pos = `left:${ann.x}px;top:${ann.y}px;width:${ann.w}px;height:${ann.h}px;z-index:${ann.zIndex || 40}`; if (ann.type === 'text') { return `<div class="print-annotation print-annotation-text" style="${pos};font-size:${ann.fontSize || 14}px;color:${escapeAttr(ann.color || '#0f172a')}">${escapeHtml(ann.text || '')}</div>`; } const radius = ann.type === 'ellipse' ? 'border-radius:50%;' : ''; return `<div class="print-annotation${ann.type === 'ellipse' ? ' print-annotation-ellipse' : ''}" style="${pos};background:${escapeAttr(ann.fill || 'rgba(250,204,21,0.4)')};${radius}"></div>`; } function buildPrintHtmlFromLayout() { readPrintHeaderFromUI(); const pagesHtml = appState.layoutPages.map((page, pageIndex) => { const preset = getEffectivePagePreset(page.presetId); const pageHeaderHtml = pageIndex === 0 ? buildPrintHeaderBlockHtml() : ''; const sortedItems = [...page.items].sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0)); const sortedAnns = [...(page.annotations || [])].sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0)); const itemsHtml = sortedItems.map((item) => { const pos = `left:${item.x}px;top:${item.y}px;width:${item.w}px;height:${item.h}px;z-index:${item.zIndex || 1}`; const num = item.orderNum ?? 1; const badge = `<span class="print-layout-order-badge">${num}</span>`; const formLbl = item.songForm ? `<div class="layout-song-form-label" style="position:absolute;left:0;right:0;bottom:0;font-size:9px;padding:2px 6px;background:rgb(15 23 42 / 0.75);color:#fff;text-align:center">${escapeHtml(item.songForm)}</div>` : ''; if (!item.hasScore) { return ` <div class="print-layout-item print-layout-item-no-score" style="${pos}"> ${badge} <span class="print-layout-no-score-label">${escapeHtml(item.title || '?낅낫 ?놁쓬')}</span> </div>`; } return ` <div class="print-layout-item print-layout-item-score" style="${pos}"> ${badge} <img src="${escapeAttr(normalizeScoreImageUrl(item.scoreUrl))}" alt="" /> ${formLbl} </div>`; }).join(''); const annsHtml = sortedAnns.map(buildPrintAnnotationHtml).join(''); const headerHtml = pageHeaderHtml ? `<div class="print-page-header-bar-static" style="height:${getStackedHeaderHeight(0)}px">${pageHeaderHtml}</div>` : ''; return `<div class="print-layout-page page" style="width:${preset.w}px;height:${preset.h}px"> ${headerHtml} <div class="print-layout-page-body" style="width:100%;height:${preset.h}px">${itemsHtml}${annsHtml}</div> </div>`; }).join(''); return buildPrintPageStyleTag() + pagesHtml; } function waitForImagesIn(container, timeoutMs = 10000) { const images = [...container.querySelectorAll('img')]; if (!images.length) return Promise.resolve(); return Promise.all(images.map((img) => new Promise((resolve) => { const done = () => resolve(); if (img.complete && img.naturalWidth > 0) return done(); img.addEventListener('load', done, { once: true }); img.addEventListener('error', done, { once: true }); setTimeout(done, timeoutMs); }))); } async function printFromLayoutEditor() { const printArea = $('#printArea'); printArea.innerHTML = buildPrintHtmlFromLayout(); await waitForImagesIn(printArea); const orient = appState.layoutOrientation || 'portrait'; document.body.classList.add('layout-printing', `layout-print-${orient}`); closeLayoutEditor(); const onAfterPrint = () => { document.body.classList.remove('layout-printing', 'layout-print-portrait', 'layout-print-landscape'); printArea.innerHTML = ''; window.removeEventListener('afterprint', onAfterPrint); }; window.addEventListener('afterprint', onAfterPrint); window.print(); } function bindLayoutEditorToolbar() { $('#btnLayoutPrint').addEventListener('click', printFromLayoutEditor); $('#btnLayoutClose').addEventListener('click', closeLayoutEditor); $('#btnAddLayoutPage').addEventListener('click', addLayoutPage); $('#btnLayoutPortrait').addEventListener('click', () => setLayoutOrientation('portrait')); $('#btnLayoutLandscape').addEventListener('click', () => setLayoutOrientation('landscape')); syncLayoutOrientationUI(); bindLayoutToolsOnce(); } function formatShareFirebaseError(err) { return formatAppError(err, 'share'); } async function publishSharedConti() { const songs = getContiSongs(); if (!songs.length) throw new Error('EMPTY_CONTI'); const bridge = await waitForFirebaseBridge(); if (!bridge?.saveSharedConti) throw new Error('NO_BRIDGE'); const { worshipDate, worshipTitle } = readWorshipShareFieldsFromUI(); const snapshot = buildShareSnapshot(); snapshot.worshipDate = worshipDate; snapshot.worshipTitle = worshipTitle; snapshot.shareTitle = SHARE_PREVIEW_TITLE; snapshot.shareDesc = buildSharePreviewDescription(); const docId = await bridge.saveSharedConti(snapshot); const shareUrl = buildShareUrlById(docId, worshipDate, worshipTitle); appendConteHistoryFromCurrent(); $('#shareUrlInput').value = shareUrl; return { docId, shareUrl, worshipDate, worshipTitle }; } function updateShareModalPreview(published) { const titleEl = $('#shareModalPreviewTitle'); const metaEl = $('#shareModalPreviewMeta'); if (!titleEl || !metaEl) return; const worshipInfo = $('#contiWorshipInfo')?.value?.trim() || published.worshipTitle || '?ㅻ뒛??李ъ뼇 肄섑떚'; const songCount = appState.conti?.length || 0; const dateStr = published.worshipDate && /^\d{4}-\d{2}-\d{2}$/.test(published.worshipDate) ? formatKoreanDate(contiDateToLocalDate(published.worshipDate), { year: true, weekday: 'long' }) : ''; titleEl.textContent = worshipInfo; metaEl.textContent = [dateStr, `${songCount}怨?].filter(Boolean).join(' 쨌 ') || '??; } async function createAndCopyShareUrl() { try { const published = await publishSharedConti(); $('#shareUrlInput').value = published.shareUrl; updateShareModalPreview(published); openModal('modalShare'); await copyTextToClipboard(published.shareUrl); showToast('留곹겕媛蹂듭궗?섏뿀?듬땲??); } catch (e) { if (e?.message === 'EMPTY_CONTI') { showToast('肄섑떚??怨≪쓣 ?댁? ??怨듭쑀 留곹겕瑜?留뚮뱶?몄슂.'); return; } if (e?.message === 'NO_BRIDGE') { if (isLocalFileProtocol()) { showToast('怨듭쑀??http://localhost ?먮뒗 Cloudflare Pages 諛고룷 ?ъ씠?몄뿉???댁슜??二쇱꽭??'); } else { showToast('Firebase ?곌껐 ?湲?以묅??좎떆 ???ㅼ떆 ?쒕룄??二쇱꽭??'); } return; } console.error('share save failed', e); showToast(formatShareFirebaseError(e)); } } function copyShareUrl() { const input = $('#shareUrlInput'); if (!input.value) return; const normalized = normalizeLegacyShareUrl(input.value); if (normalized !== input.value) input.value = normalized; input.select(); navigator.clipboard?.writeText(normalized).then(() => showToast('留곹겕媛蹂듭궗?섏뿀?듬땲??)).catch(() => { document.execCommand('copy'); showToast('留곹겕媛蹂듭궗?섏뿀?듬땲??); }); } function saveContiSession() { if (!appState.conti.length) { alert('??ν븷 肄섑떚媛鍮꾩뼱 ?덉뒿?덈떎.'); return; } $('#saveContiNameInput').value = appState.contiWorshipInfo || appState.contiTitle || formatContiDateShort() + ' 肄섑떚'; openModal('modalSaveConti'); $('#saveContiNameInput').focus(); } async function confirmSaveContiSession() { const name = $('#saveContiNameInput').value.trim(); if (!name) { alert('????대쫫???낅젰??二쇱꽭??'); return; } const now = new Date().toISOString(); const contiSongs = buildContiSongEntriesFromState(); if (!contiSongs.length) { alert('??ν븷 肄섑떚 怨??뺣낫媛 ?놁뒿?덈떎.'); return; } const entry = { name, title: appState.contiTitle, worshipInfo: appState.contiWorshipInfo, memo: appState.contiMemo, contiMemoPrint: appState.contiMemoPrint, contiMemoShare: appState.contiMemoShare, contiSongExtras: appState.contiSongExtras, customFormTags: appState.customFormTags, contiDate: appState.contiDate, printHeader: appState.printHeader, storedLayoutPages: appState.storedLayoutPages, layoutOrientation: appState.layoutOrientation || 'portrait', songs: contiSongs, songIds: [...appState.conti], songCount: contiSongs.length, createdAt: now, updatedAt: now, }; const uid = getFirebaseUid(); const bridge = window.__firebaseBridge; if (uid && bridge?.addUserConti && appState.cloudSyncReady) { try { const docId = await bridge.addUserConti(uid, buildContiPayloadForFirestore(entry), contiSongs); entry.id = docId; entry.firestoreId = docId; } catch (err) { console.warn('Conti cloud save failed', err); showErrorToast(err, 'conti-save'); entry.id = `conti-${Date.now()}`; } } else { entry.id = `conti-${Date.now()}`; } const saved = loadSavedContis(); saved.unshift(entry); saveSavedContis(saved); appendConteHistoryFromCurrent(); renderSavedContiSelect(); closeModal('modalSaveConti'); showToast(`??{name}??肄섑떚媛 ??λ릺?덉뒿?덈떎`); } async function loadSelectedSavedConti() { const id = $('#savedContiSelect').value; if (!id) return; const saved = loadSavedContis(); const entry = saved.find((c) => c.id === id); if (!entry) return; let songIds = entry.songIds || []; let contiSongs = entry.songs || []; const uid = getFirebaseUid(); const bridge = window.__firebaseBridge; const firestoreId = entry.firestoreId || entry.id; if (uid && bridge?.fetchUserContiSongs && firestoreId && appState.cloudSyncReady) { try { contiSongs = await bridge.fetchUserContiSongs(uid, firestoreId); if (contiSongs.length) { songIds = resolveSongIdsFromContiSongs(contiSongs); entry.songs = contiSongs; entry.songIds = songIds; entry.songCount = contiSongs.length; saveSavedContis(saved); } } catch (err) { console.warn('Conti songs fetch failed', err); showErrorToast(err, 'conti-load'); } } if (!songIds.length && contiSongs.length) { songIds = resolveSongIdsFromContiSongs(contiSongs); } if (!songIds.length) { showToast('肄섑떚 怨??뺣낫瑜?遺덈윭?ㅼ? 紐삵뻽?듬땲?? 怨?李쎄퀬???대떦 怨≪씠 ?덈뒗吏 ?뺤씤??二쇱꽭??'); return; } setContiFromIds( songIds, entry.title || '', entry.worshipInfo ?? entry.title ?? entry.name ?? '', entry.memo ?? '', { contiMemoPrint: entry.contiMemoPrint, contiMemoShare: entry.contiMemoShare, contiSongExtras: entry.contiSongExtras, customFormTags: entry.customFormTags, printHeader: entry.printHeader, storedLayoutPages: entry.storedLayoutPages, layoutOrientation: entry.layoutOrientation, contiDate: entry.contiDate, }, ); showToast(`??{entry.name}??肄섑떚瑜?遺덈윭?붿뒿?덈떎`); } async function deleteSelectedSavedConti() { const id = $('#savedContiSelect').value; if (!id) { alert('??젣?????肄섑떚瑜??좏깮??二쇱꽭??'); return; } const saved = loadSavedContis(); const entry = saved.find((c) => c.id === id); if (!entry || !confirm(`??{entry.name}?????肄섑떚瑜???젣?좉퉴??`)) return; saveSavedContis(saved.filter((c) => c.id !== id)); renderSavedContiSelect(); const uid = getFirebaseUid(); const bridge = window.__firebaseBridge; const firestoreId = entry.firestoreId || entry.id; if (uid && bridge?.deleteUserConti && firestoreId && appState.cloudSyncReady) { try { await bridge.deleteUserConti(uid, firestoreId); } catch (err) { console.warn('Conti cloud delete failed', err); showErrorToast(err, 'conti-delete'); } } showToast('???肄섑떚媛 ??젣?섏뿀?듬땲??); } function renderThemeTags(themes) { if (!themes?.length) return ''; return themes.map((t) => { const c = themeColorClass(t); return `<span class="inline-flex text-[10px] font-medium px-1.5 py-0.5 rounded-md border ${c}">${escapeHtml(t)}</span>`; }).join(''); } // --- Theme picker (Notion-style) --- function getSortedCatalog() { return [...appState.themeCatalog].sort((a, b) => a.localeCompare(b, 'ko')); } function renderThemePickerUI() { const chipsEl = $('#themeSelectedChips'); const placeholder = $('#themePlaceholder'); const selected = [...appState.formThemes]; const searchVal = ($('#themeSearchInput')?.value || ''); placeholder.classList.toggle('hidden', selected.length > 0 || searchVal.length > 0); chipsEl.innerHTML = selected.map((name) => { const c = themeColorClass(name); return `<span class="inline-flex items-center gap-0.5 text-[10px] font-medium pl-1.5 pr-1 py-0.5 rounded-md border ${c}"> ${escapeHtml(name)} <button type="button" data-theme-remove="${escapeAttr(name)}" class="p-0.5 rounded hover:bg-black/10 leading-none" aria-label="?쒓굅">횞</button> </span>`; }).join(''); chipsEl.querySelectorAll('[data-theme-remove]').forEach((btn) => { btn.addEventListener('click', (e) => { e.stopPropagation(); appState.formThemes.delete(btn.dataset.themeRemove); renderThemePickerUI(); renderThemeOptionsList($('#themeSearchInput').value); }); }); renderThemeOptionsList($('#themeSearchInput').value); if (appState.leftTab === 'register' && !appState.editingSongId) saveRegisterDraft(); } function renderThemeOptionsList(filterText = '') { const list = $('#themeOptionsList'); const q = filterText.trim().toLowerCase(); const options = getSortedCatalog().filter((name) => !q || name.toLowerCase().includes(q)); if (options.length === 0) { list.innerHTML = `<p class="px-3 py-2 text-xs text-slate-400">${q ? '寃??寃곌낵 ?놁쓬' : '二쇱젣 ??ぉ???놁뒿?덈떎'}</p>`; return; } list.innerHTML = options.map((name) => { const selected = appState.formThemes.has(name); return ` <div class="flex items-center gap-0.5 hover:bg-slate-50 ${selected ? 'bg-blue-50/50' : ''}"> <button type="button" data-theme-toggle="${escapeAttr(name)}" class="theme-option flex-1 flex items-center gap-2 px-3 py-2 text-left text-sm min-w-0 ${selected ? 'selected' : ''}"> <span class="theme-check w-4 h-4 flex items-center justify-center opacity-30 shrink-0"> <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> </span> <span class="inline-flex text-xs font-medium px-2 py-0.5 rounded-md border truncate ${themeColorClass(name)}">${escapeHtml(name)}</span> </button> <button type="button" data-theme-delete="${escapeAttr(name)}" title="二쇱젣 ??젣" class="shrink-0 px-2 py-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-md mr-1" aria-label="二쇱젣 ??젣"> <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> </button> </div>`; }).join(''); list.querySelectorAll('[data-theme-toggle]').forEach((btn) => { btn.addEventListener('click', (e) => { e.stopPropagation(); const name = btn.dataset.themeToggle; if (appState.formThemes.has(name)) appState.formThemes.delete(name); else appState.formThemes.add(name); const searchInput = $('#themeSearchInput'); if (searchInput) { searchInput.value = ''; searchInput.focus(); } renderThemePickerUI(); }); }); list.querySelectorAll('[data-theme-delete]').forEach((btn) => { btn.addEventListener('click', (e) => { e.stopPropagation(); deleteThemeFromCatalog(btn.dataset.themeDelete); }); }); } function openThemeDropdown() { appState.themeDropdownOpen = true; $('#themeDropdown').classList.remove('hidden'); renderThemeOptionsList($('#themeSearchInput').value); } function closeThemeDropdown() { appState.themeDropdownOpen = false; $('#themeDropdown').classList.add('hidden'); $('#themeSearchInput').value = ''; renderThemePickerUI(); } function addThemeToCatalog(name) { const trimmed = name.trim(); if (!trimmed) return false; if (appState.removedThemes.includes(trimmed)) { appState.removedThemes = appState.removedThemes.filter((t) => t !== trimmed); saveRemovedThemes(); rebuildThemeCatalog(); } if (!appState.userThemes.includes(trimmed) && !isBuiltinTheme(trimmed)) { appState.userThemes.push(trimmed); appState.userThemes.sort((a, b) => a.localeCompare(b, 'ko')); saveUserThemes(); } if (!appState.themeCatalog.includes(trimmed)) { appState.themeCatalog.push(trimmed); appState.themeCatalog.sort((a, b) => a.localeCompare(b, 'ko')); saveThemeCatalog(); } appState.formThemes.add(trimmed); renderThemePickerUI(); return true; } function deleteThemeFromCatalog(name) { if (!appState.themeCatalog.includes(name)) return false; const used = appState.songs.some((s) => (s.themes || []).includes(name)); const msg = used ? `??{name}??二쇱젣瑜???젣?좉퉴??\n(?쇰? 怨≪뿉 遺숈뼱 ?덉?留??좏깮 紐⑸줉?먯꽌留??쒓굅?⑸땲??` : `??{name}??二쇱젣瑜???젣?좉퉴??`; if (!confirm(msg)) return false; if (isBuiltinTheme(name) && !appState.removedThemes.includes(name)) { appState.removedThemes.push(name); appState.removedThemes.sort((a, b) => a.localeCompare(b, 'ko')); saveRemovedThemes(); } appState.userThemes = appState.userThemes.filter((t) => t !== name); appState.themeCatalog = appState.themeCatalog.filter((t) => t !== name); appState.formThemes.delete(name); saveUserThemes(); saveThemeCatalog(); renderThemePickerUI(); showToast(`??{name}??二쇱젣媛 ??젣?섏뿀?듬땲??); return true; } function clearFormThemes() { appState.formThemes.clear(); renderThemePickerUI(); closeThemeDropdown(); } function bindThemePicker() { const root = $('#themePickerRoot'); const trigger = $('#themePickerTrigger'); const searchInput = $('#themeSearchInput'); trigger.addEventListener('click', (e) => { if (e.target.closest('[data-theme-remove]')) return; openThemeDropdown(); searchInput.focus(); }); searchInput.addEventListener('focus', () => { openThemeDropdown(); renderThemePickerUI(); }); searchInput.addEventListener('input', () => { openThemeDropdown(); renderThemePickerUI(); }); searchInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); const val = searchInput.value.trim(); if (val) { addThemeToCatalog(val); searchInput.value = ''; renderThemePickerUI(); } } if (e.key === 'Escape') closeThemeDropdown(); if (e.key === 'Backspace' && !searchInput.value && appState.formThemes.size) { const last = [...appState.formThemes].pop(); appState.formThemes.delete(last); renderThemePickerUI(); } }); $('#btnThemeCreate').addEventListener('click', () => { if (addThemeToCatalog($('#themeCreateInput').value)) { $('#themeCreateInput').value = ''; showToast('二쇱젣 ??ぉ??異붽??섏뿀?듬땲??); } }); $('#themeCreateInput').addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); $('#btnThemeCreate').click(); } }); document.addEventListener('click', (e) => { if (!root.contains(e.target)) closeThemeDropdown(); }); } // --- Prevent Enter from registering song --- function bindNoEnterSubmit() { $('#registerPanel').addEventListener('keydown', (e) => { if (e.key !== 'Enter') return; if (e.target.id === 'themeSearchInput' || e.target.id === 'themeCreateInput') return; e.preventDefault(); }); } // --- Filters --- function getFilteredSongs() { const { tempo, key, search } = appState.filters; const q = (search || '').trim().toLowerCase(); return appState.songs.filter((s) => { if (tempo !== 'all' && s.tempo !== tempo) return false; if (key !== 'all' && s.key !== key) return false; if (q && !songSearchBlob(s).includes(q)) return false; return true; }); } function setChipActive(group, value) { document.querySelectorAll(`#filter${group === 'tempo' ? 'Tempo' : 'Key'} [data-group="${group}"]`).forEach((btn) => { btn.classList.toggle('active', btn.dataset.value === value); }); } function getKeysForUI() { const fromSongs = appState.songs.map((s) => s.key).filter(Boolean); const extra = fromSongs.filter((k) => !ALL_KEYS.includes(k)); const order = new Map(ALL_KEYS.map((k, i) => [k, i])); return [...ALL_KEYS, ...extra].sort((a, b) => (order.get(a) ?? 9999) - (order.get(b) ?? 9999)); } function populateKeySelect() { const sel = $('#inputKey'); const prev = sel.value || 'G'; sel.innerHTML = ALL_KEYS.map((k) => `<option value="${escapeAttr(k)}">${escapeHtml(k)}</option>`).join(''); sel.value = ALL_KEYS.includes(prev) ? prev : 'G'; } function buildKeyFilterChips() { const container = $('#filterKey'); container.querySelectorAll('[data-group="key"]:not([data-value="all"])').forEach((el) => el.remove()); getKeysForUI().forEach((k) => { const btn = document.createElement('button'); btn.type = 'button'; btn.dataset.group = 'key'; btn.dataset.value = k; btn.className = 'chip text-[10px] px-2 py-0.5 rounded-full border border-slate-200 shrink-0'; btn.textContent = k; btn.addEventListener('click', () => { appState.filters.key = k; setChipActive('key', k); renderLibrary(); }); container.appendChild(btn); }); } function tempoPill(tempo) { const fast = tempo === '鍮좊쫫'; return `<span class="text-[10px] font-medium px-1.5 py-0.5 rounded border ${fast ? 'bg-amber-50 text-amber-700 border-amber-100' : 'bg-sky-50 text-sky-700 border-sky-100'}">${tempo}</span>`; } function renderLibrary() { const songs = getFilteredSongs(); const listEl = $('#libraryList'); const emptyEl = $('#libraryEmpty'); const contiIds = new Set(appState.conti); $('#libraryCount').textContent = `${appState.songs.length}怨?쨌 ?쒖떆 ${songs.length}`; if (!getFirebaseUid()) { listEl.innerHTML = ''; listEl.classList.add('hidden'); emptyEl.innerHTML = `援ш? 濡쒓렇??????怨?紐⑸줉??蹂????덉뒿?덈떎.<br/> <span class="text-slate-500 text-xs mt-1 block">濡쒓렇?명븯硫??깅줉??怨≪씠 ??Β룸룞湲고솕?⑸땲??</span>`; emptyEl.classList.remove('hidden'); emptyEl.classList.add('flex'); return; } if (appState.songsLoading) { listEl.innerHTML = ''; listEl.classList.add('hidden'); emptyEl.innerHTML = '<span class="text-slate-500">怨?紐⑸줉??遺덈윭?ㅻ뒗 以묅?/span>'; emptyEl.classList.remove('hidden'); emptyEl.classList.add('flex'); return; } if (appState.songsLoadError) { listEl.innerHTML = ''; listEl.classList.add('hidden'); emptyEl.innerHTML = `<span class="text-red-500">${escapeHtml(appState.songsLoadError)}</span><br/> <button type="button" id="retrySongsLoad" class="mt-2 text-blue-600 font-medium hover:underline">?ㅼ떆 遺덈윭?ㅺ린</button>`; emptyEl.classList.remove('hidden'); emptyEl.classList.add('flex'); $('#retrySongsLoad')?.addEventListener('click', () => ensureUserSongsLoaded()); return; } if (!songs.length) { listEl.innerHTML = ''; listEl.classList.add('hidden'); const q = appState.filters.search.trim(); emptyEl.innerHTML = q ? `<span class="text-slate-500">??{escapeHtml(q)}??寃??寃곌낵媛 ?놁뒿?덈떎.</span>` : `?깅줉??怨≪씠 ?놁뒿?덈떎.<br/> <button type="button" id="goRegisterFromEmpty" class="mt-2 text-blue-600 font-medium hover:underline">??怨??깅줉?섍린</button>`; emptyEl.classList.remove('hidden'); emptyEl.classList.add('flex'); const goBtn = $('#goRegisterFromEmpty'); if (goBtn) goBtn.addEventListener('click', () => switchLeftTab('register')); return; } emptyEl.classList.add('hidden'); emptyEl.classList.remove('flex'); listEl.classList.remove('hidden'); listEl.innerHTML = songs.map((song) => { const inConti = contiIds.has(song.id); const disabled = inConti; return ` <article class="fade-in rounded-xl border border-slate-200 bg-white p-3 shadow-sm hover:shadow ${inConti ? 'ring-2 ring-blue-100' : ''}"> <div class="flex gap-2"> <div class="flex-1 min-w-0"> <h3 class="text-sm font-semibold text-slate-900 truncate">${escapeHtml(song.title)}</h3> ${renderSongMetaLine(song)} <div class="flex flex-wrap items-center gap-1.5 mt-1.5"> ${tempoPill(song.tempo)} <span class="text-[10px] text-slate-600 bg-slate-50 px-1.5 py-0.5 rounded border">Key ${escapeHtml(song.key)}</span> </div> <div class="flex flex-wrap gap-1 mt-1.5">${renderThemeTags(song.themes)}</div> ${renderLinkButtons(song)} </div> <div class="flex flex-col gap-1 shrink-0 self-center"> <button type="button" data-action="add-conti" data-id="${song.id}" ${disabled ? 'disabled' : ''} class="px-2.5 py-1.5 rounded-lg text-[11px] font-semibold ${disabled ? 'bg-slate-100 text-slate-400' : 'bg-blue-600 text-white hover:bg-blue-700'}"> ${inConti ? '?닿?' : '異붽?'} </button> <button type="button" data-action="edit-song" data-id="${song.id}" class="px-2 py-1 rounded-lg border border-slate-200 text-[10px] text-slate-600 hover:bg-slate-50">?섏젙</button> <button type="button" data-action="delete-song" data-id="${song.id}" class="px-2 py-1 rounded-lg border border-red-100 text-[10px] text-red-500 hover:bg-red-50">??젣</button> </div> </div> </article>`; }).join(''); listEl.querySelectorAll('[data-action="add-conti"]').forEach((btn) => { btn.addEventListener('click', () => addToConti(btn.dataset.id)); }); listEl.querySelectorAll('[data-action="view-score"]').forEach((btn) => { btn.addEventListener('click', () => openScore(btn.dataset.id)); }); listEl.querySelectorAll('[data-action="view-video"]').forEach((btn) => { btn.addEventListener('click', () => openVideo(btn.dataset.id)); }); listEl.querySelectorAll('[data-action="edit-song"]').forEach((btn) => { btn.addEventListener('click', () => startEditSong(btn.dataset.id)); }); listEl.querySelectorAll('[data-action="delete-song"]').forEach((btn) => { btn.addEventListener('click', () => deleteSong(btn.dataset.id)); }); } function updateContiMeta() { const n = appState.conti.length; const fast = appState.conti.filter((id) => getSongById(id)?.tempo === '鍮좊쫫').length; $('#contiMeta').textContent = `${formatContiDateShort()} 쨌 ${n}怨?쨌 鍮좊쫫 ${fast} 쨌 ?먮┝ ${n - fast}`; } function renderConti() { const listEl = $('#contiList'); const emptyEl = $('#contiEmpty'); updateContiMeta(); if (!appState.conti.length) { listEl.classList.add('hidden'); listEl.innerHTML = ''; emptyEl.classList.remove('hidden'); return; } emptyEl.classList.add('hidden'); listEl.classList.remove('hidden'); listEl.innerHTML = appState.conti.map((id, index) => { const song = getSongById(id); if (!song) return ''; return ` <div class="conti-song-card fade-in flex gap-2.5 rounded-xl border border-slate-200 bg-white p-3 shadow-sm" data-conti-card data-conti-index="${index}"> <button type="button" draggable="true" class="conti-drag-handle" data-action="drag-handle" title="?뚯뼱???쒖꽌 蹂寃? aria-label="?쒖꽌 蹂寃?>??/button> <div class="w-8 h-8 rounded-lg bg-indigo-50 text-indigo-700 flex items-center justify-center font-bold text-sm shrink-0">${index + 1}</div> <div class="flex-1 min-w-0"> <div class="flex items-start justify-between gap-2"> <h3 class="text-sm font-semibold text-slate-900 min-w-0">${escapeHtml(song.title)}</h3> <button type="button" class="btn-conti-edit shrink-0" data-action="edit-conti-song" data-id="${escapeAttr(song.id)}" title="?곸꽭 쨌 ?섏젙">?곸꽭/?섏젙</button> </div> ${renderSongMetaLine(song)} <div class="flex flex-wrap gap-1.5 mt-1">${tempoPill(song.tempo)}<span class="text-[10px] text-slate-600">Key ${escapeHtml(song.key)}</span></div> <div class="flex flex-wrap gap-1 mt-1.5">${renderThemeTags(song.themes)}</div> ${renderSongFormBlock(song.id)} </div> <div class="flex flex-col gap-0.5 shrink-0 self-center"> <button type="button" data-action="remove-conti" data-index="${index}" class="p-1.5 rounded border border-red-100 text-red-500 hover:bg-red-50 text-xs" title="?쒓굅">횞</button> </div> </div>`; }).join(''); bindContiActions(); bindContiSongFormOnce(); renderContiMemoPanel(); } function populateEditContiKeySelect(selectedKey) { const sel = $('#editContiKey'); if (!sel) return; sel.innerHTML = ALL_KEYS.map((k) => `<option value="${escapeAttr(k)}"${k === selectedKey ? ' selected' : ''}>${escapeHtml(k)}</option>` ).join(''); if (selectedKey && !ALL_KEYS.includes(selectedKey)) { sel.innerHTML += `<option value="${escapeAttr(selectedKey)}" selected>${escapeHtml(selectedKey)}</option>`; } } function updateEditContiLinkButtons() { const scoreBtn = $('#btnEditContiOpenScore'); const videoBtn = $('#btnEditContiOpenVideo'); if (!scoreBtn || !videoBtn) return; const hasScore = Boolean($('#editContiScoreUrl')?.value.trim()); const hasVideo = Boolean($('#editContiVideoUrl')?.value.trim()); scoreBtn.disabled = !hasScore; videoBtn.disabled = !hasVideo; } function openEditContiLink(type) { const raw = (type === 'score' ? $('#editContiScoreUrl') : $('#editContiVideoUrl'))?.value?.trim(); if (!raw) { alert(type === 'score' ? '?낅낫 留곹겕媛 ?놁뒿?덈떎.' : '?곸긽 留곹겕媛 ?놁뒿?덈떎.'); return; } window.open(normalizeUrl(raw), '_blank', 'noopener,noreferrer'); } function openContiSongEditModal(songId) { const song = getSongById(songId); if (!song) return; const ex = getSongExtras(songId); appState.editingContiSongId = songId; $('#editContiSongTitle').textContent = `??{song.title}???곸꽭 쨌 ?섏젙`; $('#editContiScoreUrl').value = song.scoreUrl || ''; $('#editContiVideoUrl').value = song.videoUrl || ''; $('#editContiVersion').value = song.version || ''; $('#editContiTempo').value = song.tempo || '?먮┝'; $('#editContiSongForm').value = ex.songForm || ''; populateEditContiKeySelect(song.key || 'G'); updateEditContiLinkButtons(); openModal('modalEditContiSong'); } function saveContiSongEdit() { const songId = appState.editingContiSongId; const song = getSongById(songId); if (!song) return; const data = { title: song.title, key: $('#editContiKey').value, tempo: $('#editContiTempo').value, themes: [...(song.themes || [])], scoreUrl: $('#editContiScoreUrl').value, videoUrl: $('#editContiVideoUrl').value, composer: song.composer || '', lyricist: song.lyricist || '', version: $('#editContiVersion').value, }; updateSong(songId, data); getSongExtras(songId).songForm = $('#editContiSongForm').value.trim(); persistCurrentConti(); renderConti(); if (appState.rightContiTab === 'memo') renderContiMemoPanel(); if (!$('#modalLayoutEditor').classList.contains('hidden')) renderLayoutEditor(); appState.editingContiSongId = null; closeModal('modalEditContiSong'); showToast(`??{song.title}???뺣낫媛諛섏쁺?섏뿀?듬땲??); } function bindContiSongEditModalOnce() { const btn = $('#btnSaveContiSongEdit'); if (!btn || btn.dataset.bound) return; btn.dataset.bound = '1'; btn.addEventListener('click', saveContiSongEdit); $('#btnEditContiOpenScore')?.addEventListener('click', () => openEditContiLink('score')); $('#btnEditContiOpenVideo')?.addEventListener('click', () => openEditContiLink('video')); $('#editContiScoreUrl')?.addEventListener('input', updateEditContiLinkButtons); $('#editContiVideoUrl')?.addEventListener('input', updateEditContiLinkButtons); } function bindContiActions() { const list = $('#contiList'); list.querySelectorAll('[data-action="remove-conti"]').forEach((b) => b.addEventListener('click', () => removeFromConti(+b.dataset.index))); list.querySelectorAll('[data-action="edit-conti-song"]').forEach((b) => b.addEventListener('click', () => openContiSongEditModal(b.dataset.id))); } function bindContiDragReorderOnce() { const list = $('#contiList'); if (!list || list.dataset.dragBound) return; list.dataset.dragBound = '1'; let dragFromIndex = null; list.addEventListener('dragstart', (e) => { const handle = e.target.closest('[data-action="drag-handle"]'); const card = e.target.closest('[data-conti-card]'); if (!handle || !card) { e.preventDefault(); return; } dragFromIndex = +card.dataset.contiIndex; card.classList.add('conti-dragging'); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', String(dragFromIndex)); }); list.addEventListener('dragend', () => { dragFromIndex = null; list.querySelectorAll('.conti-dragging').forEach((el) => el.classList.remove('conti-dragging')); list.querySelectorAll('.conti-drag-over').forEach((el) => el.classList.remove('conti-drag-over')); }); list.addEventListener('dragover', (e) => { const card = e.target.closest('[data-conti-card]'); if (!card) return; e.preventDefault(); e.dataTransfer.dropEffect = 'move'; list.querySelectorAll('.conti-drag-over').forEach((el) => { if (el !== card) el.classList.remove('conti-drag-over'); }); card.classList.add('conti-drag-over'); }); list.addEventListener('dragleave', (e) => { const card = e.target.closest('[data-conti-card]'); if (card && !card.contains(e.relatedTarget)) card.classList.remove('conti-drag-over'); }); list.addEventListener('drop', (e) => { e.preventDefault(); const card = e.target.closest('[data-conti-card]'); if (!card) return; const from = dragFromIndex ?? +e.dataTransfer.getData('text/plain'); const to = +card.dataset.contiIndex; card.classList.remove('conti-drag-over'); if (Number.isNaN(from) || Number.isNaN(to) || from === to) return; reorderContiItems(from, to); }); } function reorderContiItems(fromIndex, toIndex) { const id = appState.conti.splice(fromIndex, 1)[0]; appState.conti.splice(toIndex, 0, id); persistCurrentConti(); renderConti(); } async function registerSong(data, options = {}) { if (isAuthSessionPending()) { if (!options.silent) { showToast('濡쒓렇???뺣낫瑜?遺덈윭?ㅻ뒗 以묒엯?덈떎. ?좎떆 ???ㅼ떆 ?쒕룄?댁＜?몄슂.'); } return null; } const uid = await ensureAuthenticatedUid({ allowWait: true }); const bridge = await waitForFirebaseBridge(); if (!uid || !bridge?.addUserSong) { if (!options.silent) { if (appState.firebaseUser) { showToast('濡쒓렇???뺣낫瑜?遺덈윭?ㅻ뒗 以묒엯?덈떎. ?좎떆 ???ㅼ떆 ?쒕룄?댁＜?몄슂.'); } else { showToast('怨≪쓣 ??ν븯?ㅻ㈃援ш? 濡쒓렇?몄씠 ?꾩슂?⑸땲??'); } } return null; } const themes = [...(data.themes || [])]; try { const song = await bridge.addUserSong(uid, songToFirestorePayload({ ...data, themes })); mergeThemesIntoCatalog(themes); if (!options.silent) { showToast(`??{song.title}???깅줉 ?꾨즺`); } return normalizeSong(song); } catch (err) { console.warn('registerSong failed', err); if (!options.silent) { showErrorToast(err, 'song-save'); } return null; } } function addToConti(songId) { if (appState.conti.includes(songId)) return; const song = getSongById(songId); if (!song) return; appState.conti.push(songId); persistCurrentConti(); renderConti(); renderLibrary(); showToast(`??{song.title}??肄섑떚??異붽?`); } function removeFromConti(index) { const id = appState.conti.splice(index, 1)[0]; const song = getSongById(id); persistCurrentConti(); renderConti(); renderLibrary(); if (song) showToast(`??{song.title}???쒓굅`); } function clearContiBasket() { if (!appState.conti.length) { showToast('諛붽뎄?덇? ?대? 鍮꾩뼱 ?덉뒿?덈떎'); return; } if (!confirm(`肄섑떚 諛붽뎄?덉쓽 ${appState.conti.length}怨≪쓣 紐⑤몢 鍮꾩슱源뚯슂?`)) return; appState.conti = []; appState.contiSongExtras = {}; persistCurrentConti(); renderConti(); renderLibrary(); if (appState.rightContiTab === 'memo') renderContiMemoPanel(); showToast('肄섑떚 諛붽뎄?덈? 鍮꾩썱?듬땲??); } function openScore(songId) { const song = getSongById(songId); if (!song?.scoreUrl?.trim()) { alert('?낅낫 留곹겕媛 ?놁뒿?덈떎.'); return; } window.open(normalizeUrl(song.scoreUrl), '_blank', 'noopener,noreferrer'); } function openVideo(songId) { const song = getSongById(songId); if (!song?.videoUrl?.trim()) { alert('?곸긽 留곹겕媛 ?놁뒿?덈떎.'); return; } window.open(normalizeUrl(song.videoUrl), '_blank', 'noopener,noreferrer'); } function openGoogleImageSearch(title) { const q = encodeURIComponent(`${title.trim()} ?낅낫`); window.open(`https://www.google.com/search?q=${q}&tbm=isch`, '_blank', 'noopener,noreferrer'); } function buildYoutubeSearchQuery(title, version = '') { return [title.trim(), version.trim()].filter(Boolean).join(' '); } function openYoutubeSearch(title, version = '') { const q = encodeURIComponent(buildYoutubeSearchQuery(title, version)); window.open(`https://www.youtube.com/results?search_query=${q}`, '_blank', 'noopener,noreferrer'); } function updateTitleSearchButtons() { const enabled = Boolean($('#inputTitle').value.trim()); $('#btnGoogleSearch').disabled = !enabled; $('#btnYoutubeSearch').disabled = !enabled; } function getRegisterFormData() { return { title: $('#inputTitle').value, key: $('#inputKey').value, tempo: $('#inputTempo').value, themes: [...appState.formThemes], scoreUrl: $('#inputScoreUrl').value, videoUrl: $('#inputVideoUrl').value, composer: $('#inputComposer').value, lyricist: $('#inputLyricist').value, version: $('#inputVersion').value, }; } function saveRegisterDraft() { if (appState.editingSongId) return; try { const draft = getRegisterFormData(); sessionStorage.setItem(REGISTER_DRAFT_KEY, JSON.stringify(draft)); } catch (_) {} } function clearRegisterDraft() { try { sessionStorage.removeItem(REGISTER_DRAFT_KEY); } catch (_) {} } function restoreRegisterDraft() { if (appState.editingSongId) return false; try { const raw = sessionStorage.getItem(REGISTER_DRAFT_KEY); if (!raw) return false; const draft = JSON.parse(raw); if (!draft || typeof draft !== 'object') return false; $('#inputTitle').value = draft.title || ''; $('#inputComposer').value = draft.composer || ''; $('#inputLyricist').value = draft.lyricist || ''; $('#inputVersion').value = draft.version || ''; $('#inputKey').value = draft.key || 'G'; $('#inputTempo').value = draft.tempo || '?먮┝'; $('#inputScoreUrl').value = draft.scoreUrl || ''; $('#inputVideoUrl').value = draft.videoUrl || ''; appState.formThemes = new Set(Array.isArray(draft.themes) ? draft.themes : []); renderThemePickerUI(); updateTitleSearchButtons(); return true; } catch (_) { return false; } } function resetRegisterForm() { appState.editingSongId = null; $('#inputTitle').value = ''; $('#inputComposer').value = ''; $('#inputLyricist').value = ''; $('#inputVersion').value = ''; $('#inputKey').value = 'G'; $('#inputTempo').value = '?먮┝'; $('#inputScoreUrl').value = ''; $('#inputVideoUrl').value = ''; updateTitleSearchButtons(); clearFormThemes(); clearRegisterDraft(); updateRegisterFormMode(); } function scrollToRegisterTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); const panel = $('#panelRegister'); if (panel) panel.scrollTo({ top: 0, behavior: 'smooth' }); } async function handleRegisterClick() { const registerBtn = $('#btnRegister'); if (registerBtn?.disabled) { if (isAuthSessionPending() || (appState.firebaseUser && !getFirebaseUid())) { showToast('濡쒓렇???뺣낫瑜?遺덈윭?ㅻ뒗 以묒엯?덈떎. ?좎떆 ???ㅼ떆 ?쒕룄?댁＜?몄슂.'); } else { showToast('怨≪쓣 ??ν븯?ㅻ㈃援ш? 濡쒓렇?몄씠 ?꾩슂?⑸땲??'); } return; } const data = getRegisterFormData(); if (!data.title.trim()) { alert('怨??쒕ぉ???낅젰??二쇱꽭??'); return; } if (appState.editingSongId) { const updated = await updateSong(appState.editingSongId, data); if (!updated) return; showToast(`??{data.title.trim()}???섏젙?섏뿀?듬땲??); resetRegisterForm(); switchLeftTab('browse'); return; } const created = await registerSong(data); if (!created) return; resetRegisterForm(); switchLeftTab('browse'); } function switchLeftTab(tab) { if (tab !== 'browse' && tab !== 'register') return; if (tab === 'browse' && appState.leftTab === 'register' && !appState.editingSongId) { saveRegisterDraft(); } appState.leftTab = tab; const panelBrowse = $('#panelBrowse'); const panelRegister = $('#panelRegister'); const tabBrowse = $('#tabBrowse'); const tabRegister = $('#tabRegister'); const isBrowse = tab === 'browse'; panelBrowse.classList.toggle('is-hidden', !isBrowse); panelBrowse.classList.toggle('flex', isBrowse); panelRegister.classList.toggle('is-hidden', isBrowse); panelRegister.classList.toggle('flex', !isBrowse); tabBrowse.classList.toggle('active', isBrowse); tabBrowse.setAttribute('aria-selected', isBrowse ? 'true' : 'false'); tabRegister.classList.toggle('active', !isBrowse); tabRegister.setAttribute('aria-selected', !isBrowse ? 'true' : 'false'); if (isBrowse) { closeThemeDropdown(); void ensureUserSongsLoaded(); } else { if (!appState.editingSongId) restoreRegisterDraft(); scrollToRegisterTop(); } } function bindLeftTabs() { $('#tabBrowse').addEventListener('click', () => switchLeftTab('browse')); $('#tabRegister').addEventListener('click', () => switchLeftTab('register')); const goEmpty = $('#goRegisterFromEmpty'); if (goEmpty) goEmpty.addEventListener('click', () => switchLeftTab('register')); switchLeftTab('browse'); } function rebuildKeyFilters() { appState.filters.key = 'all'; setChipActive('key', 'all'); buildKeyFilterChips(); } function bindRegisterForm() { const titleInput = $('#inputTitle'); const versionInput = $('#inputVersion'); const registerPanel = $('#registerPanel'); const onRegisterFieldChange = () => { updateTitleSearchButtons(); saveRegisterDraft(); }; titleInput.addEventListener('input', onRegisterFieldChange); versionInput.addEventListener('input', onRegisterFieldChange); ['inputComposer', 'inputLyricist', 'inputScoreUrl', 'inputVideoUrl'].forEach((id) => { const el = document.getElementById(id); el?.addEventListener('input', saveRegisterDraft); }); ['inputKey', 'inputTempo'].forEach((id) => { const el = document.getElementById(id); el?.addEventListener('change', saveRegisterDraft); }); registerPanel?.addEventListener('change', (e) => { if (e.target.closest('#themePickerRoot')) saveRegisterDraft(); }); $('#btnGoogleSearch').addEventListener('click', () => { const title = titleInput.value.trim(); if (title) openGoogleImageSearch(title); }); $('#btnYoutubeSearch').addEventListener('click', () => { const title = titleInput.value.trim(); if (title) openYoutubeSearch(title, versionInput.value); }); $('#btnRegister').addEventListener('click', handleRegisterClick); $('#btnCancelEdit').addEventListener('click', cancelEditSong); $('#btnDeleteSong').addEventListener('click', () => { if (appState.editingSongId) deleteSong(appState.editingSongId); }); bindNoEnterSubmit(); updateRegisterFormMode(); } function bindFilters() { $('#filterTempo').querySelectorAll('[data-group="tempo"]').forEach((btn) => { btn.addEventListener('click', () => { appState.filters.tempo = btn.dataset.value; setChipActive('tempo', btn.dataset.value); renderLibrary(); }); }); $('#filterKey').querySelector('[data-value="all"]').addEventListener('click', () => { appState.filters.key = 'all'; setChipActive('key', 'all'); renderLibrary(); }); } function bindLibrarySearch() { const input = $('#librarySearch'); const clearBtn = $('#librarySearchClear'); input.addEventListener('input', () => { appState.filters.search = input.value; clearBtn.classList.toggle('hidden', !input.value); renderLibrary(); }); clearBtn.addEventListener('click', () => { input.value = ''; appState.filters.search = ''; clearBtn.classList.add('hidden'); renderLibrary(); input.focus(); }); } function bindHeaderActions() { $('#btnPdf').addEventListener('click', openLayoutEditor); bindLayoutEditorToolbar(); $('#btnShare').addEventListener('click', createAndCopyShareUrl); $('#btnCopyShare').addEventListener('click', copyShareUrl); $('#btnSaveContiSession').addEventListener('click', saveContiSession); $('#btnConfirmSaveConti').addEventListener('click', confirmSaveContiSession); $('#savedContiSelect').addEventListener('change', loadSelectedSavedConti); $('#btnDeleteSavedConti').addEventListener('click', deleteSelectedSavedConti); $('#btnClearConti').addEventListener('click', clearContiBasket); $('#contiTitle').addEventListener('input', (e) => { appState.contiTitle = e.target.value; persistCurrentConti(); }); $('#contiDate').addEventListener('change', (e) => { setContiDate(e.target.value); persistCurrentConti(); if (!$('#modalLayoutEditor').classList.contains('hidden')) renderLayoutEditor(); }); $('#contiWorshipInfo').addEventListener('input', (e) => { appState.contiWorshipInfo = e.target.value; persistCurrentConti(); }); $('#contiMemo').addEventListener('input', (e) => { appState.contiMemo = e.target.value; const layoutMemo = $('#layoutContiMemo'); if (layoutMemo) layoutMemo.value = appState.contiMemo; persistCurrentConti(); if (!$('#modalLayoutEditor').classList.contains('hidden')) { renderLayoutEditor(); } }); $('#contiMemoPrint').addEventListener('change', (e) => { appState.contiMemoPrint = e.target.checked; $('#layoutMemoPrint').checked = e.target.checked; persistCurrentConti(); if (!$('#modalLayoutEditor').classList.contains('hidden')) renderLayoutEditor(); }); $('#contiMemoShare').addEventListener('change', (e) => { appState.contiMemoShare = e.target.checked; $('#layoutMemoShare').checked = e.target.checked; persistCurrentConti(); }); bindContiSongFormOnce(); bindContiMemoPanelOnce(); } function seedCatalogFromSongs() { appState.songs.forEach((s) => mergeThemesIntoCatalog(s.themes || [])); } function migrateUserThemesFromCatalog() { const existing = loadUserThemes(); if (existing.length) { appState.userThemes = existing; return; } try { const raw = localStorage.getItem(THEMES_STORAGE_KEY); if (raw) { const parsed = JSON.parse(raw); if (Array.isArray(parsed)) { appState.userThemes = parsed.filter((t) => !DEFAULT_THEME_CATALOG.includes(t)); saveUserThemes(); } } } catch (_) {} } async function initViewerMode() { if (await applyShareFromUrl()) return; showViewerLoadError('怨듭쑀 肄섑떚瑜?李얠쓣 ???녾굅??遺덈윭?ㅺ린???ㅽ뙣?덉뒿?덈떎. 留곹겕瑜??뺤씤?????ㅼ떆 ?쒕룄??二쇱꽭??'); } async function initEditorMode() { document.body.classList.remove('share-mode', 'viewer-mode', 'share-dark'); $('#shareView')?.classList.add('hidden'); scheduleFirebaseAuthBootstrap(); appState.removedThemes = loadRemovedThemes(); migrateUserThemesFromCatalog(); appState.themeCatalog = loadThemeCatalog(); appState.songs = []; populateKeySelect(); bindModals(); bindLayoutEditorEvents(); bindThemePicker(); renderThemePickerUI(); bindLeftTabs(); bindRegisterForm(); bindFilters(); bindLibrarySearch(); bindHeaderActions(); bindRightContiTabs(); bindContiSongEditModalOnce(); bindContiMemoPanelOnce(); bindContiDragReorderOnce(); rebuildKeyFilters(); bindCalendarDaySyncOnce(); loadCurrentConti(); syncActiveDatesToToday({ persist: true }); applyContiMetaToUI(); renderSavedContiSelect(); $('#btnExitShareView')?.addEventListener('click', exitShareViewMode); $('#btnShareDarkMode')?.addEventListener('click', toggleShareDarkMode); renderLibrary(); renderConti(); restoreRegisterDraft(); updateAuthUI(); } async function init() { try { if (isViewerMode()) { await initViewerMode(); return; } await initEditorMode(); } catch (err) { console.error('init failed', err); showFatalBootError('?깆쓣 遺덈윭?ㅻ뒗 以??ㅻ쪟媛諛쒖깮?덉뒿?덈떎. ?섏씠吏瑜??덈줈怨좎묠??二쇱꽭??'); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { if (!isViewerMode()) scheduleFirebaseAuthBootstrap(); }, { once: true }); } init(); </script> </body> </html>