// Shared React components: ChordDiagram, Score, icons const { useState, useEffect, useRef, useMemo, useCallback } = React; // ===== Icons ===== const Icon = { Search: (p) => , Plus: (p) => , Star: (p) => , StarOutline: (p) => , Back: (p) => , Edit: (p) => , Trash: (p) => , Close: (p) => , Folder: (p) => , More: (p) => , Music: (p) => , Minus: (p) => , Reset: (p) => , }; // ===== ChordDiagram ===== // strings displayed left to right: G, C, E, A // `size` controls overall scale. function ChordDiagram({ name, size = 1 }) { const def = window.CHORDS[name]; // Standard: 4 strings, 4 frets shown const STRINGS = 4; const FRETS = 4; const cellW = 6 * size; const cellH = 6 * size; const padX = 3 * size; const padTop = 3 * size; // for nut/open markers const w = padX * 2 + (STRINGS - 1) * cellW; const h = padTop + FRETS * cellH + 2 * size; if (!def) { // Unknown chord — render a faint grid placeholder return ( ); } const { frets, barre, baseFret = 1 } = def; const gridX = padX; const gridY = padTop; const gridW = (STRINGS - 1) * cellW; const gridH = FRETS * cellH; // Lines: 4 strings (vertical), 5 fret lines (horizontal) const stringLines = []; for (let i = 0; i < STRINGS; i++) { stringLines.push(); } const fretLines = []; for (let i = 0; i <= FRETS; i++) { const y = gridY + i * cellH; fretLines.push(); } // Dots const dots = []; frets.forEach((fret, stringIdx) => { const x = gridX + stringIdx * cellW; if (fret === 0) { // open: small circle above nut // Skip drawing 'O' for cleaner look — matches reference image } else if (fret > 0) { const fretRow = fret - baseFret + 1; // 1-based fret position within visible window if (fretRow >= 1 && fretRow <= FRETS) { const y = gridY + (fretRow - 0.5) * cellH; dots.push(); } } }); // Barre (horizontal line/rect across multiple strings) let barreEl = null; if (barre) { const { fret, from, to } = barre; const fretRow = fret - baseFret + 1; if (fretRow >= 1 && fretRow <= FRETS) { const y = gridY + (fretRow - 0.5) * cellH; const x1 = gridX + from * cellW; const x2 = gridX + to * cellW; barreEl = ; } } // Base fret indicator (e.g., '3fr') let baseFretLabel = null; if (baseFret > 1) { baseFretLabel = {baseFret}fr; } return ( {fretLines} {stringLines} {barreEl} {dots} {baseFretLabel} ); } // ===== Time signature ===== function TimeSig({ value }) { if (!value) return null; const [num, den] = value.split('/'); return ( {num} {den} ); } // ===== Sheet renderer ===== // Props: // chords: string[][] — array of measures, each measure is an array of chord names // verses: string[][] — array of verses, each verse is an array of lyric strings per measure // timeSignature: e.g. "4/4" // bars: { [measureIndex]: { left?: 'repeat-start' | 'double', right?: 'repeat-end' | 'final' | 'double', volta?: '1'|'2' } } // onBarClick?: (measureIndex) => void // transposeBy?: number function Sheet({ chords, verses, timeSignature, bars = {}, onBarClick, transposeBy = 0 }) { const totalMeasures = chords.length; // Responsive: 2 measures/line on mobile, 4 on larger screens const [perLine, setPerLine] = useState(() => (typeof window !== 'undefined' && window.matchMedia('(max-width: 600px)').matches) ? 2 : 4); useEffect(() => { const mql = window.matchMedia('(max-width: 600px)'); const onChange = (e) => setPerLine(e.matches ? 2 : 4); mql.addEventListener ? mql.addEventListener('change', onChange) : mql.addListener(onChange); return () => { mql.removeEventListener ? mql.removeEventListener('change', onChange) : mql.removeListener(onChange); }; }, []); if (totalMeasures === 0) return null; // Chunk into lines of `perLine` measures const lines = []; for (let i = 0; i < totalMeasures; i += perLine) { lines.push({ start: i, end: Math.min(i + perLine, totalMeasures) }); } return (
{lines.map((line, lineIdx) => { const measureCount = line.end - line.start; // Pad to `perLine` measures with empty slots so grid stays even const padded = Array(perLine).fill(null).map((_, i) => { const idx = line.start + i; if (i < measureCount) return { idx, chords: chords[idx], present: true }; return { idx: -1, chords: [], present: false }; }); return (
{padded.map((m, colIdx) => { if (!m.present) { // Empty pad return
; } const isFirstMeasureEver = m.idx === 0; const isLastMeasureEver = m.idx === totalMeasures - 1; const barInfo = bars[m.idx] || {}; const measureChords = m.chords; return (
{barInfo.volta &&
{barInfo.volta}.
} {/* Barline click target — only handles the LEFT barline of this measure */}
); })}
); })}
); } // ===== Bar symbol popover ===== function BarPopover({ anchorRect, side, value, onChange, onClose }) { const ref = useRef(null); useEffect(() => { const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); }; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [onClose]); if (!anchorRect) return null; const top = anchorRect.bottom + 8 + window.scrollY; const left = Math.min(anchorRect.left + window.scrollX - 60, window.innerWidth - 200); const leftOptions = [ { val: undefined, label: '일반', svg: }, { val: 'repeat-start', label: '반복 시작', svg: }, { val: 'double', label: '겹세로', svg: }, ]; const rightOptions = [ { val: undefined, label: '일반', svg: }, { val: 'repeat-end', label: '반복 끝', svg: }, { val: 'final', label: '마지막', svg: }, { val: 'double', label: '겹세로', svg: }, ]; const options = side === 'left' ? leftOptions : rightOptions; const title = side === 'left' ? '왼쪽 마디선' : '오른쪽 마디선'; return (
e.stopPropagation()}>
{title}
{options.map((opt, i) => ( ))}
); } function BarGlyph({ kind }) { const stroke = '#18181b'; switch (kind) { case 'normal': return ; case 'double': return ; case 'repeat-start': return ; case 'repeat-end': return ; case 'final': return ; default: return null; } } // ===== Parsers ===== // chords: "F,G/Am,D7/F/Am" → [["F","G"], ["Am","D7"], ["F"], ["Am"]] function parseChords(input) { if (!input) return []; return input.split('/').map(m => m.split(',').map(c => c.trim()).filter(Boolean)); } function stringifyChords(chords) { return chords.map(m => m.join(',')).join('/'); } // lyrics: "바람에/지는 계절엔/..." → ["바람에", "지는 계절엔", ...] function parseLyrics(input) { if (!input) return []; return input.split('/').map(s => s.trim()); } function stringifyLyrics(arr) { return (arr || []).join('/'); } Object.assign(window, { Icon, ChordDiagram, Sheet, BarPopover, BarGlyph, TimeSig, parseChords, parseLyrics, stringifyChords, stringifyLyrics });