// ---------- List View ---------- const { useState: useStateL, useRef: useRefL } = React; function ListView({ tab, items, onItemClick, onReorder }) { const [dragId, setDragId] = useStateL(null); const [overId, setOverId] = useStateL(null); const [overPos, setOverPos] = useStateL('before'); // before | after // group by day for non-todo, sort todos by .order then by start const sorted = [...items].sort((a, b) => { if (tab === 'todo') { const ao = a.order ?? 9999, bo = b.order ?? 9999; if (ao !== bo) return ao - bo; return (a.startISO || '').localeCompare(b.startISO || ''); } return (b.dateISO || '').localeCompare(a.dateISO || ''); // newest first }); // group helper const groups = []; if (tab === 'todo') { // group by start date (YYYY-MM-DD) const map = new Map(); for (const it of sorted) { const k = (it.startISO || '').slice(0, 10) || '미정'; if (!map.has(k)) map.set(k, []); map.get(k).push(it); } // todo groups: keep insertion order (already sorted) [...map.entries()].forEach(([k, v]) => groups.push({ key: k, items: v })); } else { const map = new Map(); for (const it of sorted) { const k = (it.dateISO || '').slice(0, 10) || '미정'; if (!map.has(k)) map.set(k, []); map.get(k).push(it); } [...map.entries()].forEach(([k, v]) => groups.push({ key: k, items: v })); } if (items.length === 0) { return (
아직 항목이 없어요
오른쪽 위 + 버튼으로 새로 만들어보세요.
); } const fmtKey = (k) => { if (k === '미정') return '날짜 미정'; const d = D.parse(k); if (!d) return k; const dow = ['일','월','화','수','목','금','토'][d.getDay()]; const isToday = k === D.todayISO(); return `${d.getFullYear()}. ${D.pad(d.getMonth()+1)}. ${D.pad(d.getDate())} (${dow})${isToday ? ' · 오늘' : ''}`; }; const onDragStart = (e, id) => { if (tab !== 'todo') return; setDragId(id); e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', id); } catch {} }; const onDragOver = (e, id) => { if (tab !== 'todo' || !dragId) return; e.preventDefault(); const r = e.currentTarget.getBoundingClientRect(); const pos = (e.clientY - r.top) < r.height / 2 ? 'before' : 'after'; setOverId(id); setOverPos(pos); }; const onDrop = (e, id) => { if (tab !== 'todo' || !dragId || dragId === id) { setDragId(null); setOverId(null); return; } e.preventDefault(); onReorder(dragId, id, overPos); setDragId(null); setOverId(null); }; const onDragEnd = () => { setDragId(null); setOverId(null); }; return (
{groups.map(({ key, items: gItems }) => (

{fmtKey(key)} {gItems.length}

))}
); } window.ListView = ListView;