// Main app: Home list, Song view, Editor modal // (React hooks are imported from window in components.jsx scope; redeclare locally per Babel transpile context) // ===== Storage ===== const STORAGE_KEY = 'uke.app.v1'; function loadState() { try { const raw = localStorage.getItem(STORAGE_KEY); if (raw) return JSON.parse(raw); } catch (e) {} return null; } function saveState(state) { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (e) {} } // ===== Sample data ===== function uid() { return Math.random().toString(36).slice(2, 10); } const SAMPLE_SONGS = [ { id: 'song-25-21', title: '스물다섯, 스물하나', artist: '자우림', timeSignature: '4/4', folder: '발라드', favorite: true, chords: 'Cadd2/G/F/G/Cadd2/G/F/G/F,G/Am,D7/F,G/Am/F,G/Am,D7/F,G/Cadd2', verses: [ '바람에 날려 꽃이/지는 계절엔/아직도 너의 손을/잡은듯 그런 듯해/그때는 아직 꽃이/아름다운 걸/지금처럼 사무치게/알지 못했어/우~ 너의/향기가/바람에 실려 오네/ /우~ 영원할/줄 알았던/스물다섯 스물하나/ ', '그날의 바다는 퍽/다정했었지/아직도 나의 손에/잡힐듯 그런 듯해/부서지는 햇살속에/너와 내가 있어/가슴 시리도록 행복/한 꿈을 꾸었지/우~ 그날의/노래가/바람에 실려 오네/ /우~ 영원할/줄 알았던/지난 날의 너와 나/ ', ], bars: { 15: { right: 'final' } }, createdAt: Date.now() - 86400000 * 3, }, { id: 'song-bicycle', title: '비행기', artist: '동요', timeSignature: '4/4', folder: '동요', favorite: false, chords: 'C/G7/C/C/C/G7/C/C', verses: [ '떴다 떴다/비행기/날아라/날아라/높이 높이/날아라/우리 비행기/ ', ], bars: { 7: { right: 'final' } }, createdAt: Date.now() - 86400000 * 1, }, { id: 'song-island', title: '섬집 아기', artist: '한인현 작사 · 이흥렬 작곡', timeSignature: '6/8', folder: '동요', favorite: true, chords: 'C/Am/F/G7/C/Am/Dm,G7/C', verses: [ '엄마가 섬그늘에/굴 따러 가면/아기가 혼자 남아/집을 보다가/바다가 불러주는/자장 노래에/팔 베고 스르르르/잠이 듭니다', ], bars: { 7: { right: 'final' } }, createdAt: Date.now() - 86400000 * 2, }, ]; const DEFAULT_FOLDERS = ['전체', '즐겨찾기', '발라드', '동요']; function initialState() { return { songs: SAMPLE_SONGS, folders: DEFAULT_FOLDERS, activeFolder: '전체', }; } // ===== App ===== function App() { const [state, setState] = useState(() => loadState() || initialState()); const [route, setRoute] = useState({ view: 'home', songId: null }); // 'home' | 'song' const [editor, setEditor] = useState(null); // null | { mode: 'create' } | { mode: 'edit', songId } const [toast, setToast] = useState(null); // ----- Firebase auth + sync ----- const [user, setUser] = useState(() => (window.fb && window.fb.user) || null); const [syncStatus, setSyncStatus] = useState('local'); // 'local' | 'syncing' | 'synced' | 'error' const isApplyingRemoteRef = useRef(false); const initialSyncDoneRef = useRef(false); const saveTimerRef = useRef(null); // Listen for Firebase auth state changes useEffect(() => { const onAuth = (e) => { setUser(e.detail.user || null); initialSyncDoneRef.current = false; if (!e.detail.user) setSyncStatus('local'); }; window.addEventListener('fb-auth-changed', onAuth); // In case Firebase finished initializing before we mounted if (window.fb && window.fb.user) setUser(window.fb.user); return () => window.removeEventListener('fb-auth-changed', onAuth); }, []); // When user logs in, pull cloud state (or upload local if cloud is empty), then subscribe useEffect(() => { if (!user || !window.fb) return; let unsub = null; let cancelled = false; setSyncStatus('syncing'); (async () => { try { const remote = await window.fb.loadOnce(); if (cancelled) return; if (remote && Array.isArray(remote.songs)) { // Cloud has data → adopt it isApplyingRemoteRef.current = true; setState({ songs: remote.songs, folders: remote.folders || DEFAULT_FOLDERS, activeFolder: remote.activeFolder || '\uc804\uccb4', }); } else { // First-time login → upload current local state await window.fb.saveState(state); } initialSyncDoneRef.current = true; setSyncStatus('synced'); unsub = window.fb.subscribe((data) => { if (!data || !Array.isArray(data.songs)) return; isApplyingRemoteRef.current = true; setState({ songs: data.songs, folders: data.folders || DEFAULT_FOLDERS, activeFolder: data.activeFolder || '\uc804\uccb4', }); }); } catch (e) { console.warn('Firestore sync error', e); setSyncStatus('error'); } })(); return () => { cancelled = true; if (unsub) unsub(); }; // eslint-disable-next-line }, [user]); // Persist on every state change: localStorage always; Firestore if logged in useEffect(() => { saveState(state); if (!user || !window.fb || !initialSyncDoneRef.current) return; if (isApplyingRemoteRef.current) { // This change came from a remote snapshot — don't echo back isApplyingRemoteRef.current = false; return; } if (saveTimerRef.current) clearTimeout(saveTimerRef.current); setSyncStatus('syncing'); saveTimerRef.current = setTimeout(() => { window.fb.saveState(state) .then(() => setSyncStatus('synced')) .catch((e) => { console.warn('Firestore save failed', e); setSyncStatus('error'); }); }, 600); }, [state, user]); // simple toast const showToast = useCallback((msg) => { setToast(msg); setTimeout(() => setToast(null), 1800); }, []); // CRUD const upsertSong = (song) => { setState(s => { const idx = s.songs.findIndex(x => x.id === song.id); if (idx >= 0) { const next = s.songs.slice(); next[idx] = song; return { ...s, songs: next }; } return { ...s, songs: [song, ...s.songs] }; }); }; const deleteSong = (id) => { setState(s => ({ ...s, songs: s.songs.filter(x => x.id !== id) })); if (route.songId === id) setRoute({ view: 'home', songId: null }); }; const toggleFavorite = (id) => { setState(s => ({ ...s, songs: s.songs.map(x => x.id === id ? { ...x, favorite: !x.favorite } : x) })); }; const updateSong = (id, patch) => { setState(s => ({ ...s, songs: s.songs.map(x => x.id === id ? { ...x, ...patch } : x) })); }; const addFolder = (name) => { setState(s => s.folders.includes(name) ? s : { ...s, folders: [...s.folders, name] }); }; const removeFolder = (name) => { if (['전체', '즐겨찾기'].includes(name)) return; setState(s => ({ ...s, folders: s.folders.filter(f => f !== name), songs: s.songs.map(x => x.folder === name ? { ...x, folder: '' } : x), activeFolder: s.activeFolder === name ? '전체' : s.activeFolder, })); }; const setActiveFolder = (name) => setState(s => ({ ...s, activeFolder: name })); const currentSong = useMemo( () => state.songs.find(x => x.id === route.songId) || null, [state.songs, route.songId] ); return (
{route.view === 'home' && ( setRoute({ view: 'song', songId: id })} onToggleFav={toggleFavorite} onAdd={() => setEditor({ mode: 'create' })} onSetFolder={setActiveFolder} onAddFolder={addFolder} onRemoveFolder={removeFolder} onEdit={(id) => setEditor({ mode: 'edit', songId: id })} onDelete={deleteSong} onSetSongFolder={(id, folder) => updateSong(id, { folder })} onSignIn={() => window.fb && window.fb.signInGoogle().catch((e) => showToast('\ub85c\uadf8\uc778 \uc2e4\ud328'))} onSignOut={() => window.fb && window.fb.signOut()} /> )} {route.view === 'song' && currentSong && ( setRoute({ view: 'home', songId: null })} onEdit={() => setEditor({ mode: 'edit', songId: currentSong.id })} onDelete={() => { if (confirm('이 악보를 삭제할까요?')) { deleteSong(currentSong.id); showToast('삭제됨'); } }} onToggleFav={() => toggleFavorite(currentSong.id)} onUpdate={(patch) => updateSong(currentSong.id, patch)} /> )} {editor && ( s.id === editor.songId) : null} folders={state.folders} onClose={() => setEditor(null)} onSave={(song) => { upsertSong(song); setEditor(null); showToast(editor.mode === 'create' ? '악보 추가됨' : '저장됨'); if (editor.mode === 'create') setRoute({ view: 'song', songId: song.id }); }} onAddFolder={addFolder} /> )} {toast &&
{toast}
}
); } // ===== Auth UI ===== function AuthButton({ user, onSignIn, onSignOut }) { // For anonymous sign-in flow: no UI needed — sync happens automatically. if (!user || user.isAnonymous) return null; const [menuOpen, setMenuOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!menuOpen) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setMenuOpen(false); }; setTimeout(() => document.addEventListener('mousedown', onDoc), 0); return () => document.removeEventListener('mousedown', onDoc); }, [menuOpen]); if (!user) { return ( ); } const initial = (user.displayName || user.email || '?').trim().charAt(0).toUpperCase(); return (
{menuOpen && (
{user.displayName || '사용자'}
{user.email}
)}
); } function SyncBadge({ status, user }) { if (!user) return 연결 중…; if (status === 'syncing') return 동기화 중…; if (status === 'synced') return ☁︎ 동기화됨; if (status === 'error') return 동기화 오류; return null; } // ===== Home ===== function HomeView({ state, user, syncStatus, onOpen, onToggleFav, onAdd, onSetFolder, onAddFolder, onRemoveFolder, onEdit, onDelete, onSetSongFolder, onSignIn, onSignOut }) { const [query, setQuery] = useState(''); const [menuFor, setMenuFor] = useState(null); const filtered = useMemo(() => { let list = state.songs; if (state.activeFolder === '즐겨찾기') list = list.filter(s => s.favorite); else if (state.activeFolder !== '전체') list = list.filter(s => s.folder === state.activeFolder); if (query.trim()) { const q = query.trim().toLowerCase(); list = list.filter(s => s.title.toLowerCase().includes(q) || (s.artist || '').toLowerCase().includes(q)); } return list; }, [state.songs, state.activeFolder, query]); const folderCount = (name) => { if (name === '전체') return state.songs.length; if (name === '즐겨찾기') return state.songs.filter(s => s.favorite).length; return state.songs.filter(s => s.folder === name).length; }; return ( <>

우쿨렐레 악보 {state.songs.length}곡 ·

setQuery(e.target.value)} />
{filtered.length === 0 ? (

악보가 없어요

오른쪽 아래 + 버튼을 눌러 첫 악보를 추가해보세요

) : filtered.map((song, i) => ( onOpen(song.id)} onToggleFav={() => onToggleFav(song.id)} onMenu={(e) => { e.stopPropagation(); setMenuFor(song.id); }} menuOpen={menuFor === song.id} onMenuClose={() => setMenuFor(null)} folders={state.folders} onEdit={() => onEdit(song.id)} onDelete={() => { if (confirm(`"${song.title}" 악보를 삭제할까요?`)) onDelete(song.id); }} onSetFolder={(folder) => onSetSongFolder(song.id, folder)} /> ))}
); } function FolderTabs({ folders, active, counts, onSelect, onAdd, onRemove }) { return (
{folders.map(f => ( ))}
); } function SongRow({ song, index, onOpen, onToggleFav, onMenu, menuOpen, onMenuClose, folders, onEdit, onDelete, onSetFolder }) { const menuRef = useRef(null); useEffect(() => { if (!menuOpen) return; const onDoc = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) onMenuClose(); }; setTimeout(() => document.addEventListener('mousedown', onDoc), 0); return () => document.removeEventListener('mousedown', onDoc); }, [menuOpen]); const folderOptions = folders.filter(f => !['전체', '즐겨찾기'].includes(f)); return (
{String(index).padStart(2, '0')}
{song.title}
{song.artist || '아티스트 미상'} {song.timeSignature && {song.timeSignature}} {song.folder && {song.folder}}
{menuOpen && (
e.stopPropagation()}> {folderOptions.length > 0 && <>
폴더로 이동
{folderOptions.map(f => ( ))} }
)}
); } // ===== Song View ===== function SongView({ song, folders, onBack, onEdit, onDelete, onToggleFav, onUpdate }) { const [transposeBy, setTransposeBy] = useState(0); const [popover, setPopover] = useState(null); // { measureIdx, side, rect } const chordsArr = useMemo(() => parseChords(song.chords), [song.chords]); const verseArrs = useMemo(() => (song.verses || []).map(parseLyrics), [song.verses]); // Pad each verse to match measure count const paddedVerses = verseArrs.map(v => { const out = v.slice(); while (out.length < chordsArr.length) out.push(''); return out; }); const safeVerses = paddedVerses.length ? paddedVerses : [Array(chordsArr.length).fill('')]; const handleBarClick = (measureIdx, side, anchorEl) => { const rect = anchorEl.getBoundingClientRect(); setPopover({ measureIdx, side, rect }); }; const setBar = (measureIdx, side, value) => { const next = { ...(song.bars || {}) }; const entry = { ...(next[measureIdx] || {}) }; if (value === undefined) { delete entry[side]; } else { entry[side] = value; } if (Object.keys(entry).length === 0) { delete next[measureIdx]; } else { next[measureIdx] = entry; } onUpdate({ bars: next }); }; const addVerse = () => { const placeholder = Array(chordsArr.length).fill('').join('/'); onUpdate({ verses: [...(song.verses || []), placeholder] }); }; const removeVerse = (i) => { if ((song.verses || []).length <= 1) return; onUpdate({ verses: song.verses.filter((_, idx) => idx !== i) }); }; const transposeKey = useMemo(() => { // Derive a rough "key" by transposing first chord const first = chordsArr[0] && chordsArr[0][0]; if (!first) return null; return window.transposeChord(first, transposeBy); }, [chordsArr, transposeBy]); return ( <>

{song.title}{song.artist}

{song.title}

{song.artist || '아티스트 미상'}
{song.timeSignature || '4/4'} {song.folder && {song.folder}}
{transposeBy === 0 ? '원곡' : (transposeBy > 0 ? `+${transposeBy}` : transposeBy)} {transposeBy !== 0 && ( )}
{/* Verse remove buttons under each verse */} {(song.verses || []).length > 1 && (
{(song.verses || []).map((_, i) => ( ))}
)}
{popover && ( setBar(popover.measureIdx, popover.side, val)} onClose={() => setPopover(null)} /> )} ); } // ===== Editor Modal ===== function EditorModal({ mode, song, folders, onClose, onSave, onAddFolder }) { const [title, setTitle] = useState(song?.title || ''); const [artist, setArtist] = useState(song?.artist || ''); const [timeSignature, setTimeSignature] = useState(song?.timeSignature || '4/4'); const [folder, setFolder] = useState(song?.folder || ''); const [chordsInput, setChordsInput] = useState(song?.chords || ''); const [versesInput, setVersesInput] = useState(song?.verses?.length ? song.verses : ['']); // Validate chord names const unknown = useMemo(() => { const arr = parseChords(chordsInput); const names = new Set(); arr.forEach(m => m.forEach(c => { if (c && !window.CHORDS[c]) names.add(c); })); return Array.from(names); }, [chordsInput]); const measureCount = useMemo(() => parseChords(chordsInput).length, [chordsInput]); const canSave = title.trim() && chordsInput.trim(); const submit = () => { if (!canSave) return; const saved = { id: song?.id || uid(), title: title.trim(), artist: artist.trim(), timeSignature: timeSignature.trim() || '4/4', folder: folder.trim(), favorite: song?.favorite || false, chords: chordsInput.trim(), verses: versesInput.map(v => v.trim()), bars: song?.bars || {}, createdAt: song?.createdAt || Date.now(), updatedAt: Date.now(), }; onSave(saved); }; const otherFolders = folders.filter(f => !['전체', '즐겨찾기'].includes(f)); return (
e.stopPropagation()}>

{mode === 'create' ? '새 악보' : '악보 편집'}

setTitle(e.target.value)} placeholder="곡 제목" autoFocus/>
setArtist(e.target.value)} placeholder="아티스트"/>