{open && (
<>
setOpen(false)} style={{
position: 'fixed', inset: 0, zIndex: 50,
}} />
{[
{ value: 'activity', label: '활동순' },
{ value: 'name', label: '이름순' },
{ value: 'count', label: '씨앗 많은순' },
].map(o => (
))}
)}
);
}
function ViewToggle({ compact, onChange }) {
return (
);
}
function SectionHeader({ title, sub, action }) {
return (
{title}
{sub && (
{sub}
)}
{action}
);
}
function RecentMiniCard({ card, accent, onClick }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// Collection tile — stacked-cards illustration + meta
// ─────────────────────────────────────────────────────────────
function CollectionTile({ group, accent, onClick }) {
const previewCard = group.cards && group.cards[0];
const dot = group.color || LANG_DOT[group.primaryLang] || HT.ink2;
const isEmpty = !previewCard;
const cover = group.cover || { kind: 'auto' };
return (
);
}
// ─────────────────────────────────────────────────────────────
// CollectionDetail — drill-down for one group
// ─────────────────────────────────────────────────────────────
function CollectionDetail({ group, accent, onBack, onOpenCard, onOpenActions, onAddCard, onAddExistingCards, onRemoveCard, editing: editingProp, setEditing: setEditingProp }) {
const [editingLocal, setEditingLocal] = React.useState(false);
const editing = editingProp !== undefined ? editingProp : editingLocal;
const setEditing = setEditingProp || setEditingLocal;
const [sort, setSort] = React.useState('recent'); // recent | category
const [playingIdx, setPlayingIdx] = React.useState(-1);
const [playMode, setPlayMode] = React.useState(null); // 'all' | 'single' | null
const dot = group.color || LANG_DOT[group.primaryLang] || HT.ink2;
const isEmpty = !group.cards || group.cards.length === 0;
// Exit edit mode when group becomes empty
React.useEffect(() => {
if (isEmpty && editing) setEditing(false);
}, [isEmpty, editing]);
const sortedCards = React.useMemo(() => {
if (sort === 'recent') {
return [...group.cards].sort((a, b) => a.addedDays - b.addedDays);
}
if (sort === 'category') {
return [...group.cards].sort((a, b) => a.category.localeCompare(b.category));
}
return group.cards;
}, [group, sort]);
const isPlaying = playingIdx >= 0;
const isPlayingAll = isPlaying && playMode === 'all';
const playingCardId = isPlaying ? sortedCards[playingIdx]?.id : null;
const stopPlay = React.useCallback(() => {
setPlayingIdx(-1);
setPlayMode(null);
}, []);
// Play-all timer: advance every 1.6s in 'all' mode.
// 'single' mode: play for 1.6s then auto-stop.
React.useEffect(() => {
if (playingIdx < 0) return;
if (playingIdx >= sortedCards.length) { stopPlay(); return; }
const t = setTimeout(() => {
if (playMode === 'single') {
stopPlay();
} else {
setPlayingIdx(i => i + 1 >= sortedCards.length ? -1 : i + 1);
// mode stays 'all'; if we landed on -1, the next effect run will clear mode.
}
}, 1600);
return () => clearTimeout(t);
}, [playingIdx, playMode, sortedCards.length, stopPlay]);
// When playingIdx returns to -1, clear playMode too
React.useEffect(() => {
if (playingIdx < 0 && playMode !== null) setPlayMode(null);
}, [playingIdx, playMode]);
// Stop play when sort changes
React.useEffect(() => { stopPlay(); }, [sort, stopPlay]);
// For category sort, build sections
const sections = React.useMemo(() => {
if (sort !== 'category') return [{ title: null, cards: sortedCards }];
const map = new Map();
for (const c of sortedCards) {
if (!map.has(c.category)) map.set(c.category, []);
map.get(c.category).push(c);
}
return [...map.entries()].map(([title, cards]) => ({ title, cards }));
}, [sortedCards, sort]);
return (
{/* Top bar — sticky */}
{/* Header */}
{isEmpty ? '💭' : (group.isMultiLang ? '🌐' : langFlag(group.primaryLang))}
{isEmpty
? '비어있는 주머니'
: (group.isMultiLang ? '여러 언어' : group.primaryLangLabel)}
{group.name}
{isEmpty ? (
아직 씨앗이 없어요
) : (
<>
{group.count}개
· 마지막 추가 {daysAgo(group.latestDays)}
)}
{isEmpty ? (
) : (
<>
{/* Play all + sort — single row */}
{[
{ id: 'recent', label: '최신순' },
{ id: 'category', label: '카테고리' },
].map(o => (
))}
{/* Card list */}
{sections.map((sec, si) => (
{sec.title && (
{sec.title} · {sec.cards.length}개
)}
{sec.cards.map(c => {
const cardIdx = sortedCards.findIndex(x => x.id === c.id);
return (
editing ? null : onOpenCard(c)}
onTogglePlay={() => {
if (editing) return;
if (playingIdx === cardIdx) {
stopPlay();
} else {
setPlayMode('single');
setPlayingIdx(cardIdx);
}
}}
onRemove={() => onRemoveCard && onRemoveCard(c.id)} />
);
})}
))}
)}
);
}
function CompactCardRow({ card, accent, onClick, editing, playing, onRemove, onTogglePlay }) {
return (
{
if (editing) return;
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick && onClick(); }
}}
style={{
width: '100%', textAlign: 'left',
background: playing ? `${accent}10` : HT.surface,
border: playing ? `1.5px solid ${accent}` : `0.5px solid ${HT.hairline}`,
borderRadius: 14,
padding: playing ? '12px 13px' : '13px 14px',
cursor: editing ? 'default' : 'pointer',
fontFamily: 'inherit',
display: 'flex', alignItems: 'center', gap: 10,
WebkitTapHighlightColor: 'transparent',
transition: 'padding 0.18s ease, background 0.18s ease, border-color 0.18s ease',
position: 'relative',
outline: 'none',
}}>
{editing && (
)}
{playing && !editing && (
)}
{card.foreign}
{card.korean}
{!editing && (
playing ? (
) : (
)
)}
);
}
// ─────────────────────────────────────────────────────────────
// SearchScreen — full overlay
// ─────────────────────────────────────────────────────────────
const SEARCH_SUGGESTIONS = ['물', '계산', '추천', '화장실', '도쿄', '응급'];
function SearchScreen({ accent, onClose, onOpenCard, onOpenGroup }) {
const [q, setQ] = React.useState('');
const inputRef = React.useRef(null);
React.useEffect(() => { inputRef.current && inputRef.current.focus(); }, []);
const query = q.trim().toLowerCase();
const hasQ = query.length > 0;
const cardHits = React.useMemo(() => {
if (!hasQ) return [];
return EXPANDED_CARDS.filter(c =>
c.foreign.toLowerCase().includes(query) ||
c.pronunciation.toLowerCase().includes(query) ||
c.korean.toLowerCase().includes(query) ||
c.category.toLowerCase().includes(query)
).slice(0, 30);
}, [query, hasQ]);
const groupHits = React.useMemo(() => {
if (!hasQ) return [];
return GROUPS.filter(g => g.name.toLowerCase().includes(query));
}, [query, hasQ]);
return (
{/* Search bar */}
setQ(e.target.value)}
placeholder="표현, 단어, 주머니 검색"
style={{
flex: 1, minWidth: 0, height: '100%',
background: 'transparent', border: 'none', outline: 'none',
fontFamily: 'inherit', fontSize: 15, color: HT.ink,
letterSpacing: '-0.01em',
}}
/>
{q && (
)}
{/* Body */}
{!hasQ ? (
<>
{/* Empty state — suggestions */}
이렇게 검색해보세요
{SEARCH_SUGGESTIONS.map(s => (
))}
빠른 이동
{GROUPS.slice(0, 4).map(g => (
))}
) : (
<>
{groupHits.length > 0 && (
<>
주머니 · {groupHits.length}개
{groupHits.map(g => (
))}
)}
표현 · {cardHits.length}개
{cardHits.length === 0 ? (
"{q}"에 대한 결과가 없어요
) : (
{cardHits.map(c => (
onOpenCard(c)} />
))}
)}
)}
);
}
function highlightMatch(text, query) {
if (!query) return text;
const idx = text.toLowerCase().indexOf(query);
if (idx < 0) return text;
return (
<>
{text.slice(0, idx)}
{text.slice(idx, idx + query.length)}
{text.slice(idx + query.length)}
);
}
function SearchResultRow({ card, query, accent, onClick }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// Expose to global
// ─────────────────────────────────────────────────────────────
Object.assign(window, {
HomeV2,
CollectionDetail,
SearchScreen,
EXPANDED_CARDS,
GROUPS,
RECENT_IDS,
deriveGroups,
LANG_DOT,
});