);
}
// ─── P09 Processing ─────────────────────────────────────────
// Auto-advances to P10 (seed created confirmation) after ~2.4s when the
// processing succeeds. Error state stays on screen until the user taps
// 다시 시도 / 취소. Without this auto-advance, the flow was a dead end —
// the user landed on a spinner and never saw the result they just made.
function ScreenProcessing({ state, onNavigate }) {
const T = window.T;
const isMulti = state === 'multi';
const isError = state === 'error';
const count = isMulti ? 5 : 1;
const [dotCount, setDotCount] = React.useState(0);
React.useEffect(() => {
if (isError) return;
const t = setInterval(() => setDotCount(d => (d + 1) % 4), 400);
return () => clearInterval(t);
}, [isError]);
// Auto-advance to P10 (seed-created confirmation). Preserve `multi` so
// P10 can show "5개" vs "1개" copy.
React.useEffect(() => {
if (isError) return;
const t = setTimeout(() => {
onNavigate('P10', isMulti ? { state: 'multi' } : {});
}, 2400);
return () => clearTimeout(t);
}, [isError, isMulti]);
return (
}
onClick={() => onNavigate('back')}/> : null
}/>
{isError ? (
씨앗을 못 만들었어요
잠시 후 다시 시도해볼까요? 인터넷 연결을 확인해주세요.
}>
다시 시도
) : (
{isMulti ? `${count}개 씨앗을 만드는 중` : '씨앗을 만드는 중'}
{'.'.repeat(dotCount)}
보통 3초 안에 끝나요
)}
);
}
// ─── P10 Seed Created — confirmation ────────────────────────
// Shown right after P09 (만드는 중) succeeds. Lets the user *see* what
// was just created before deciding what to do next.
//
// default → 1 seed card (large) + editable auto-categories
// multi → 5 seed cards stacked vertically + per-card chevron to detail
//
// Design decisions (per user feedback):
// · Pouches are NEVER auto-assigned here. The user puts seeds into
// pouches explicitly from P05 / P05b. A small hint reminds them.
// · Categories ARE auto-set by AI (✨ badge). The user can fix any
// wrong category right here — remove ×, add via "+ 추가" sheet.
function ScreenProcessed({ state, onNavigate }) {
const T = window.T;
const isMulti = state === 'multi';
// Pretend the user just made these. In a real app, the freshly-created
// ids would be passed in via navigate params; for the prototype we pick
// recognisable seeds from the mock store so the visuals are honest.
const allSeeds = window.MOCK_SEEDS || [];
const created = isMulti
? allSeeds.slice(0, 5)
: allSeeds.slice(0, 1);
const first = created[0];
const langSet = Array.from(new Set(created.map(s => s.langLabel)));
// Categories — editable for single-seed flow. Seeded from AI-detected
// categories on the seed. Track per-id whether it was AI-suggested so
// we can show the ✨ badge only on those (user additions don't get it).
const initialCats = (first.categories || []).slice(0, 4);
const [cats, setCats] = React.useState(initialCats);
const [autoSet] = React.useState(new Set(initialCats));
const [pickerOpen, setPickerOpen] = React.useState(false);
const allCats = window.__cpCats || window.MOCK_CATEGORIES || [];
const catById = Object.fromEntries(allCats.map(c => [c.id, c]));
const removeCat = (id) => setCats(cs => cs.filter(c => c !== id));
const addCat = (id) => setCats(cs => cs.includes(id) ? cs : [...cs, id]);
return (
)}
{/* Pouch hint — pouches are user-controlled, not auto-assigned. */}
주머니로 묶는 건 씨앗 자세히 보기에서
직접 골라주세요
{/* Actions — same shape for both default and multi: card itself
is the entry point to detail, the bottom row is just "또 담기"
(primary, expected next action) and "홈으로" (escape). */}
);
}
// Bottom sheet that lets the user pick from the remaining categories.
// Also exposes a "+ 새 카테고리 만들기" affordance (inline form) so the
// user can create a new custom category without leaving the flow.
function CategoryAddSheet({ allCats, excludeIds, onPick, onClose }) {
const T = window.T;
// Local store mirror — adding a new category persists to window.__cpCats
// so it shows up everywhere else (P05c, P02 filter, P13b) without refresh.
const [cats, setCats] = React.useState(() => allCats || window.MOCK_CATEGORIES);
const [creating, setCreating] = React.useState(false);
const exclude = new Set(excludeIds);
const available = (cats || []).filter(c => !exclude.has(c.id));
const handleCreate = ({ label, icon }) => {
if (!window.makeNewCat) return; // safety
const newCat = window.makeNewCat(label, icon);
const next = [newCat, ...cats];
setCats(next);
window.__cpCats = next; // propagate to other screens this session
setCreating(false);
// Auto-pick the new category — saves a tap, matches user intent.
onPick(newCat.id);
};
return (