// CheekPouch — main app with screen navigation // Screens: home → detail → input → processing const { useState, useEffect, useRef, useMemo } = React; // ───────────────────────────────────────────────────────────── // Sample data — use expanded set from home.jsx if available // ───────────────────────────────────────────────────────────── const CARDS = window.EXPANDED_CARDS || [ { id: 'c1', lang: 'ja', langLabel: '일본어', foreign: 'おすすめのメニューは何ですか？', pronunciation: '오스스메노 메뉴와 난데스카?', korean: '추천 메뉴가 뭐예요?', category: '식당/카페', group: '도쿄 식당 표현', dialogue: [ { who: '점원', foreign: 'いらっしゃいませ、メニューはこちらです。', pron: '이랏샤이마세, 메뉴-와 코치라데스.', korean: '어서오세요, 메뉴는 이쪽입니다.' }, { who: '나', foreign: 'おすすめのメニューは何ですか？', pron: '오스스메노 메뉴와 난데스카?', korean: '추천 메뉴가 뭐예요?' }, { who: '점원', foreign: '豚骨ラーメンがおすすめです。', pron: '톤코츠 라-멘가 오스스메데스.', korean: '돈코츠 라멘을 추천드려요.' }, ], }, { id: 'c2', lang: 'ja', langLabel: '일본어', foreign: '水をください。', pronunciation: '미즈오 쿠다사이.', korean: '물 좀 주세요.', category: '식당/카페', group: '도쿄 식당 표현', }, { id: 'c3', lang: 'ja', langLabel: '일본어', foreign: 'お会計お願いします。', pronunciation: '오카이케- 오네가이시마스.', korean: '계산해 주세요.', category: '식당/카페', group: '도쿄 식당 표현', }, { id: 'c4', lang: 'ja', langLabel: '일본어', foreign: '駅までどう行きますか？', pronunciation: '에키마데 도- 이키마스카?', korean: '역까지 어떻게 가나요?', category: '교통/길찾기', group: '도쿄 길찾기', }, { id: 'c5', lang: 'es', langLabel: '스페인어', foreign: '¿Dónde está el baño?', pronunciation: '돈데 에스따 엘 바뇨?', korean: '화장실이 어디예요?', category: '교통/길찾기', group: '바르셀로나 휴가', }, { id: 'c6', lang: 'es', langLabel: '스페인어', foreign: 'La cuenta, por favor.', pronunciation: '라 꾸엔따, 뽀르 파보르.', korean: '계산서 주세요.', category: '식당/카페', group: '바르셀로나 휴가', }, { id: 'c7', lang: 'en', langLabel: '영어', foreign: 'Could I get an extra towel, please?', pronunciation: '쿠드 아이 겟 언 엑스트라 타올, 플리즈?', korean: '수건 하나만 더 주실 수 있을까요?', category: '숙소', group: '뉴욕 호텔', }, ]; const LANGS = (() => { const counts = {}; for (const c of CARDS) counts[c.lang] = (counts[c.lang] || 0) + 1; const order = [ { code: 'all', label: '전체' }, { code: 'ja', label: '일본어' }, { code: 'es', label: '스페인어' }, { code: 'en', label: '영어' }, { code: 'fr', label: '프랑스어' }, { code: 'zh', label: '중국어' }, { code: 'th', label: '태국어' }, ]; return order .map(o => ({ ...o, count: o.code === 'all' ? CARDS.length : (counts[o.code] || 0) })) .filter(o => o.code === 'all' || o.count > 0); })(); const CATS = [ '전체', '식당/카페', '교통/길찾기', '숙소', '쇼핑', '관광/구경', '인사/사교', '응급/의료', ]; // ───────────────────────────────────────────────────────────── // Theme tokens — light + dark (warm espresso) // ───────────────────────────────────────────────────────────── const T = window.__cpMakeTheme(); const ACCENTS = { walnut: '#8B6F47', terracotta:'#C97B5C', forest: '#4A6B4F', plum: '#8B5C7A', }; // ───────────────────────────────────────────────────────────── // Small UI atoms // ───────────────────────────────────────────────────────────── function Chip({ children, active, onClick, count, accent }) { return ( ); } function IconButton({ children, onClick, size = 38 }) { return ( ); } function PlayBtn({ playing, onClick, size = 'lg', accent }) { const isLg = size === 'lg'; const h = isLg ? 52 : 34; const fs = isLg ? 16 : 13; return ( ); } function PlaySecondary({ playing, onClick, accent, children = '대화 전체 듣기' }) { return ( ); } function PlayGlyph({ playing, size = 14, color = '#FFF' }) { return ( {playing ? ( ) : ( )} ); } function MiniPlay({ playing, onClick, accent }) { return ( ); } function PlayAllPill({ accent, count }) { const [playing, setPlaying] = useState(false); const [idx, setIdx] = useState(0); useEffect(() => { if (!playing) { setIdx(0); return; } const t = setInterval(() => { setIdx(i => { if (i + 1 >= count) { setPlaying(false); return 0; } return i + 1; }); }, 1300); return () => clearInterval(t); }, [playing, count]); return ( ); } // ───────────────────────────────────────────────────────────── // Screen header — replaces default ios nav for non-stack screens // ───────────────────────────────────────────────────────────── function Header({ title, lead, trail, big, sub }) { return (
{lead}
{trail}
{big ? (
{title}
) : null} {sub ? (
{sub}
) : null}
); } // ───────────────────────────────────────────────────────────── // HOME (legacy all-cards filter view, now drill-down) // ───────────────────────────────────────────────────────────── function AllCards({ accent, onBack, onOpenCard }) { const [lang, setLang] = useState('all'); const [cat, setCat] = useState('전체'); const filtered = useMemo(() => { return CARDS.filter(c => (lang === 'all' || c.lang === lang) && (cat === '전체' || c.category === cat) ); }, [lang, cat]); return (
{/* Top bar with back */}
전체 씨앗
담아둔 모든 표현을 언어·카테고리로 걸러볼 수 있어요
{/* Filter section */}
언어
{LANGS.map(l => ( setLang(l.code)} count={l.count} accent={accent}> {l.label} ))}
카테고리
{CATS.map(c => ( setCat(c)} accent={accent}> {c.replace('/', ' / ')} ))}
{/* Result count + play all */}
{filtered.length}개 {(() => { const parts = []; if (lang !== 'all') parts.push(LANGS.find(l => l.code === lang)?.label); if (cat !== '전체') parts.push(cat); return parts.length > 0 ? ( · {parts.join(' · ')} ) : null; })()}
{filtered.length > 0 && ( )}
{/* Card list */}
{filtered.map(card => ( onOpenCard(card)} /> ))} {filtered.length === 0 && (
조건에 맞는 씨앗이 없어요
)}
); } // ───────────────────────────────────────────────────────────── // LEGACY Home (kept for reference, no longer mounted) // ───────────────────────────────────────────────────────────── function Home({ accent, dailyCount, onAdd, onOpenCard }) { const [lang, setLang] = useState('all'); const [cat, setCat] = useState('전체'); const filtered = useMemo(() => { return CARDS.filter(c => (lang === 'all' || c.lang === lang) && (cat === '전체' || c.category === cat) ); }, [lang, cat]); return (
{}}> , , ]} /> {/* Daily cheek indicator hero */}
오늘의 볼주머니
{dailyCount === 0 ? '오늘은 비어있어요' : dailyCount >= 10 ? '볼이 빵빵해요!' : <>오늘 {dailyCount}개 담았어요}
{Array.from({ length: 10 }).map((_, i) => (
))}
{/* Filter section */}
언어
{LANGS.map(l => ( setLang(l.code)} count={l.count} accent={accent}> {l.label} ))}
카테고리
{CATS.map(c => ( setCat(c)} accent={accent}> {c.replace('/', ' / ')} ))}
{/* Result count + play all */}
{filtered.length}개 {(() => { const parts = []; if (lang !== 'all') parts.push(LANGS.find(l => l.code === lang)?.label); if (cat !== '전체') parts.push(cat); return parts.length > 0 ? ( · {parts.join(' · ')} ) : null; })()}
{filtered.length > 0 && ( )}
{/* Card list */}
{filtered.map(card => ( onOpenCard(card)} /> ))}
); } function ChipRow({ children }) { return (
{children}
); } function CardRow({ card, accent, onClick }) { const [playing, setPlaying] = useState(false); const langFont = card.lang === 'ja' ? '"Noto Sans JP", Pretendard' : card.lang === 'es' || card.lang === 'en' ? 'Noto Sans, Pretendard' : 'Pretendard'; return (
e.currentTarget.style.transform = 'scale(0.985)'} onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'} >
{card.foreign}
{card.pronunciation}
{card.category} · { ({ja:'🇯🇵',es:'🇪🇸',en:'🇺🇸',fr:'🇫🇷',zh:'🇨🇳',th:'🇹🇭',de:'🇩🇪',it:'🇮🇹',vi:'🇻🇳',pt:'🇵🇹',id:'🇮🇩'})[card.lang] || '🌐' } {card.langLabel}
{ e.stopPropagation(); setPlaying(p => !p); }} />
); } // ───────────────────────────────────────────────────────────── // CARD DETAIL // ───────────────────────────────────────────────────────────── function CardDetail({ card, accent, onBack, groups, onMove, onShare, onDelete, onOpenGroup, onSetCategories }) { const [playMine, setPlayMine] = useState(false); const [playDialogue, setPlayDialogue] = useState(false); const [currentLine, setCurrentLine] = useState(-1); const [wordIdx, setWordIdx] = useState(-1); const [sheet, setSheet] = useState(null); // 'actions' | 'move' | 'delete' | 'categories' | null // Split foreign sentence into spoken tokens. // For JA, split by grapheme runs (kana/kanji clusters of 1-3 chars); else split on whitespace. const wordTokens = React.useMemo(() => { const f = card.foreign || ''; if (card.lang === 'ja' || card.lang === 'zh') { // Group every 2-3 CJK characters into a word-ish chunk; preserve punctuation as own tokens const out = []; let buf = ''; const flush = () => { if (buf) { out.push(buf); buf = ''; } }; for (const ch of [...f]) { if (/[\s\p{P}]/u.test(ch)) { flush(); out.push(ch); } else { buf += ch; if (buf.length >= 2) flush(); } } flush(); return out; } // latin scripts: split keeping spaces/punct attached to previous word return f.split(/(\s+)/).filter(t => t.length > 0); }, [card.foreign, card.lang]); const speakableIndices = React.useMemo(() => wordTokens.map((t, i) => /[\p{L}\p{N}]/u.test(t) ? i : -1).filter(i => i >= 0) , [wordTokens]); useEffect(() => { if (!playDialogue) { setCurrentLine(-1); return; } let i = 0; setCurrentLine(0); const tick = setInterval(() => { i++; if (i >= (card.dialogue?.length || 3)) { clearInterval(tick); setPlayDialogue(false); setCurrentLine(-1); } else { setCurrentLine(i); } }, 1600); return () => clearInterval(tick); }, [playDialogue, card]); useEffect(() => { if (!playMine) { setWordIdx(-1); return; } // Step through speakable tokens. Total duration ~1900ms keeps prior behaviour; // step = total / count. const total = Math.max(1400, Math.min(2800, 220 * speakableIndices.length + 600)); const step = total / Math.max(1, speakableIndices.length); let k = 0; setWordIdx(speakableIndices[0] ?? -1); const tick = setInterval(() => { k++; if (k >= speakableIndices.length) { clearInterval(tick); setPlayMine(false); setWordIdx(-1); } else { setWordIdx(speakableIndices[k]); } }, step); return () => clearInterval(tick); }, [playMine, speakableIndices]); const langFont = card.lang === 'ja' ? '"Noto Sans JP", Pretendard' : 'Noto Sans, Pretendard'; const dialogue = card.dialogue; return (
{/* Top bar — sticky */}
setSheet('actions')}>
{/* Headline area */}
{ ({ja:'🇯🇵',es:'🇪🇸',en:'🇺🇸',fr:'🇫🇷',zh:'🇨🇳',th:'🇹🇭',de:'🇩🇪',it:'🇮🇹',vi:'🇻🇳',pt:'🇵🇹',id:'🇮🇩'})[card.lang] || '🌐' } {card.langLabel}
{wordTokens.map((tok, i) => { const speakable = /[\p{L}\p{N}]/u.test(tok); const isCurrent = playMine && i === wordIdx; const isPast = playMine && wordIdx >= 0 && i < wordIdx && speakable; return ( {tok} ); })}
{card.pronunciation}
{card.korean}
{/* Collection membership chips */} {(() => { const memberships = (groups || []).filter(g => (g.cards || []).some(c => c.id === card.id) ); return (
{memberships.map(g => ( ))}
); })()}
{/* Primary play button */}
setPlayMine(p => !p)} />
{/* Dialogue context */} {dialogue && dialogue.length > 0 && (
이런 상황에서
{dialogue.map((line, i) => { const isMe = line.who === '나'; const isActive = currentLine === i; return (
{isActive && (
)}
{line.who}
{isActive && ( 재생 중 )}
{line.foreign}
{line.pron && (
{line.pron}
)}
{line.korean}
); })}
setPlayDialogue(p => !p)} />
)} {/* Footer: categories (multi) + tone (fixed, set at creation) */} {(() => { const categories = (card.categories && card.categories.length > 0) ? card.categories : (card.category ? [card.category] : []); const tone = card.tone || '자동'; return (
분류
{categories.map(c => ( 1 ? () => onSetCategories && onSetCategories(categories.filter(x => x !== c)) : null }>{c} ))}
톤
{tone} · 생성 시 선택
); })()} {/* Card actions sheet */} {sheet === 'actions' && (() => { const cats = (card.categories && card.categories.length > 0) ? card.categories : (card.category ? [card.category] : []); const colls = [card.group, ...(card.extraGroups || [])].filter(Boolean); return ( setSheet(null)}> {/* Card identity */}
{card.foreign}
{card.korean}
{card.langLabel || ''}
{/* Meta — grouped rows */} {(colls.length > 0 || cats.length > 0) && (
{colls.length > 0 && ( }> {colls.map(c => ( { setSheet(null); onOpenGroup && onOpenGroup({ name: c }); }}> {c} ))} )} {cats.length > 0 && ( }> {cats.map(c => ( {c} ))} )}
)}
} label="주머니에 담기" sub={colls.length > 0 ? `${colls.length}개 주머니에 담겨 있어요` : '아직 주머니에 없어요'} onClick={() => setSheet('move')} /> } label="씨앗 공유" sub="친구·카톡·링크" onClick={() => setSheet('share')} />
} label="씨앗 삭제" danger onClick={() => setSheet('delete')} />
); })()} {sheet === 'move' && ( setSheet(null)}>
여러 주머니에 동시에 담을 수 있어요
{(groups || []).map(g => { const isIn = (g.cards || []).some(c => c.id === card.id); return ( ); })} {(!groups || groups.length === 0) && (
주머니가 없어요
)}
)} {sheet === 'categories' && (() => { const current = (card.categories && card.categories.length > 0) ? card.categories : (card.category ? [card.category] : []); const toggle = (c) => { const has = current.includes(c); const next = has ? current.filter(x => x !== c) : [...current, c]; onSetCategories && onSetCategories(next); }; return ( setSheet(null)}>
여러 분류에 동시에 담을 수 있어요
{BASE_CATS.map(c => { const isIn = current.includes(c); return ( ); })}
); })()} {sheet === 'share' && ( setSheet(null)} onSent={(to) => { setSheet(null); onShare && onShare(to); }} /> )} {sheet === 'delete' && ( setSheet(null)}>
이 씨앗을 삭제할까요?
되돌릴 수 없어요. 볼주머니 자리 한 칸이 다시 비워져요.
 )}
); } function CardActionRow({ icon, label, sub, onClick, danger }) { return ( ); } function MoveCardGlyph() { return ( ); } function ShareCardGlyph() { return ( ); } function TrashCardGlyph({ color, size = 15 }) { return ( ); } // ───────────────────────────────────────────────────────────── // CardShareSheet — in-app friends + external channels // ───────────────────────────────────────────────────────────── function CardShareSheet({ card, accent, onClose, onSent }) { const friends = window.SAMPLE_FRIENDS || []; const [picked, setPicked] = useState(new Set()); const [copied, setCopied] = useState(false); const togglePick = (id) => { const next = new Set(picked); if (next.has(id)) next.delete(id); else next.add(id); setPicked(next); }; const sendToFriends = () => { if (picked.size === 0) return; const names = [...picked].map(id => friends.find(f => f.id === id)?.name).filter(Boolean); const target = names.length === 1 ? names[0] : `${names[0]} 외 ${names.length - 1}명`; onSent({ kind: 'friends', target, title: `${target}님에게 씨앗을 보냈어요`, message: card.foreign, }); }; const sendExternal = (channel) => { if (channel === 'copy') { onSent({ kind: 'external', target: channel, title: '공유 링크가 복사됐어요', message: '원하는 곳에 붙여넣어 보세요' }); } else { onSent({ kind: 'external', target: channel, title: `${channel}으로 씨앗을 공유했어요`, message: card.foreign }); } }; const langFont = card.lang === 'ja' ? '"Noto Sans JP", Pretendard' : 'Noto Sans, Pretendard'; return (
씨앗 공유
외국어·발음·한국어가 함께 전달돼요
{/* Card preview */}
{ ({ja:'🇯🇵',es:'🇪🇸',en:'🇺🇸',fr:'🇫🇷',zh:'🇨🇳',th:'🇹🇭',de:'🇩🇪',it:'🇮🇹',vi:'🇻🇳',pt:'🇵🇹',id:'🇮🇩'})[card.lang] || '🌐' } {card.langLabel}
{card.foreign}
{card.pronunciation}
{card.korean}
{/* In-app friends */}
앱 내 친구
{friends.length === 0 ? (
아직 친구가 없어요
) : friends.map(f => { const on = picked.has(f.id); return ( ); })}
{/* External channels */}
다른 앱으로 보내기
sendExternal('카카오톡')} icon={} /> sendExternal('메시지')} icon={} /> sendExternal('메일')} icon={} /> { setCopied(true); setTimeout(() => sendExternal('copy'), 200); }} icon={copied ? : } />
{/* Footer action — appears when friends selected */}
{picked.size > 0 ? ( ) : ( )}
); } function ExternalButton({ label, bg, color, icon, onClick }) { return ( ); } function KakaoMiniGlyph() { return ( ); } function MsgMiniGlyph() { return ( ); } function MailMiniGlyph() { return ( ); } function LinkMiniGlyph({ color }) { return ( ); } function CheckMiniGlyph({ color }) { return ( ); } function FooterChip({ children }) { return (
{children}
); } function MetaRow({ icon, children }) { return (
{icon}
{children}
); } function SheetMetaChip({ children, accent, onClick }) { const interactive = !!onClick; return ( ); } function CategoryChip({ children, accent, onRemove }) { return (
{children} {onRemove && ( )}
); } function Caret() { return ( ); } // ───────────────────────────────────────────────────────────── // INPUT (typing) // ───────────────────────────────────────────────────────────── const TONE_OPTIONS = [ { value: '자동', desc: 'AI가 맥락에 맞게' }, { value: '정중하게', desc: '존중하는 느낌으로' }, { value: '친근하게', desc: '편한 사이처럼' }, ]; const LANG_OPTIONS = [ { value: '일본어', flag: '🇯🇵' }, { value: '영어', flag: '🇺🇸' }, { value: '스페인어', flag: '🇪🇸' }, { value: '중국어', flag: '🇨🇳' }, { value: '프랑스어', flag: '🇫🇷' }, { value: '베트남어', flag: '🇻🇳' }, { value: '태국어', flag: '🇹🇭' }, ]; const BASE_CATS = [ '식당/카페', '교통/길찾기', '숙소', '쇼핑', '관광/구경', '인사/사교', '응급/의료', '일상/기타', ]; function InputScreen({ accent, onCancel, onSubmit, onPickScreenshot, customCats, addCustomCat, micPermission = 'granted' }) { const [text, setText] = useState(''); const [langSel, setLangSel] = useState('일본어'); const [tone, setTone] = useState('자동'); const [cat, setCat] = useState('자동'); const [sheetOpen, setSheetOpen] = useState(null); // 'lang' | 'tone' | 'cat' | 'source' | 'voice' | null const textareaRef = React.useRef(null); return (
{/* Bar */}
새 표현 담기
{/* Lang / tone / category selectors */}
o.value === langSel) || {}).flag} onClick={() => setSheetOpen('lang')} /> setSheetOpen('tone')} /> setSheetOpen('cat')} />
{/* Textarea */}