import { Plus, Trash2, ShoppingCart, Check, ChevronDown, ChevronUp, Sparkles } from "lucide-react"; const T: Record> = { ko: { addPlaceholder: "장볼 것을 입력하세요", clearCompleted: "완료 항목 삭제", empty: "장볼 목록이 비어있어요", emptySub: "첫 번째 항목을 추가해보세요!", addFirst: "항목 추가하기", progress: "진행률", allDone: "모두 완료!", categories: "카테고리", vegFruit: "채소/과일", meatFish: "고기/생선", dairy: "유제품", breadSnack: "빵/간식", household: "생활용품", other: "기타", items: "개", }, en: { addPlaceholder: "Add grocery item", clearCompleted: "Clear completed", empty: "Your grocery list is empty", emptySub: "Add your first item!", addFirst: "Add item", progress: "Progress", allDone: "All done!", categories: "Categories", vegFruit: "Vegetables/Fruits", meatFish: "Meat/Fish", dairy: "Dairy", breadSnack: "Bread/Snacks", household: "Household", other: "Other", items: "items", }, ja: { addPlaceholder: "買うものを入力", clearCompleted: "完了を削除", empty: "買い物リストが空です", emptySub: "最初のアイテムを追加しましょう！", addFirst: "追加する", progress: "進捗", allDone: "全部完了！", categories: "カテゴリー", vegFruit: "野菜/果物", meatFish: "肉/魚", dairy: "乳製品", breadSnack: "パン/おやつ", household: "日用品", other: "その他", items: "個", }, zh: { addPlaceholder: "输入购物项目", clearCompleted: "清除已完成", empty: "购物清单为空", emptySub: "添加第一个项目吧！", addFirst: "添加项目", progress: "进度", allDone: "全部完成！", categories: "分类", vegFruit: "蔬菜/水果", meatFish: "肉/鱼", dairy: "乳制品", breadSnack: "面包/零食", household: "生活用品", other: "其他", items: "个", }, }; interface GroceryItem { id: string; name: string; category: string; checked: boolean; _authorId?: string; _authorName?: string; _authorAvatar?: string; } const CAT_KW: Record = { vegfruit: "lettuce,apple,banana,tomato,onion,potato,carrot,garlic,pepper,cucumber,spinach,broccoli".split(","), meatfish: "chicken,beef,pork,salmon,shrimp,fish,tuna,steak,lamb".split(","), dairy: "milk,cheese,yogurt,butter,cream,egg,eggs".split(","), breadsnack: "bread,cookie,cake,chip,chocolate,snack,cracker,cereal,noodle,ramen,pasta".split(","), household: "soap,shampoo,tissue,detergent,toothpaste,towel,sponge,wrap,bag".split(","), }; function buildKeywords(): void { const ko: Record = { vegfruit: "\uC0C1\uCD94,\uC0AC\uACFC,\uBC14\uB098\uB098,\uD1A0\uB9C8\uD1A0,\uC591\uD30C,\uAC10\uC790,\uB2F9\uADFC,\uB9C8\uB298,\uACE0\uCD94,\uC624\uC774,\uC2DC\uAE08\uCE58,\uBE0C\uB85C\uCF5C\uB9AC,\uBC30\uCD94,\uBB34,\uD30C,\uB538\uAE30,\uD3EC\uB3C4,\uC218\uBC15", meatfish: "\uB2ED,\uC18C\uACE0\uAE30,\uB3FC\uC9C0,\uC0BC\uACA9\uC0B4,\uC5F0\uC5B4,\uC0C8\uC6B0,\uC0DD\uC120,\uCC38\uCE58", dairy: "\uC6B0\uC720,\uCE58\uC988,\uC694\uAC70\uD2B8,\uBC84\uD130,\uACC4\uB780,\uB2EC\uAC78", breadsnack: "\uBE75,\uACFC\uC790,\uCF00\uC774\uD06C,\uCD08\uCF5C\uB9BF,\uC2DC\uB9AC\uC5BC,\uCFE0\uD0A4,\uB77C\uBA74", household: "\uBE44\uB204,\uC0F4\uD478,\uD734\uC9C0,\uC138\uC81C,\uCE58\uC57D,\uC218\uAC74", }; for (const [catId, kwStr] of Object.entries(ko)) { if (CAT_KW[catId]) CAT_KW[catId].push(...kwStr.split(",")); } } buildKeywords(); const CATEGORIES = [ { id: "vegfruit", emoji: "\uD83E\uDD6C", labelKey: "vegFruit", keywords: CAT_KW.vegfruit }, { id: "meatfish", emoji: "\uD83E\uDD69", labelKey: "meatFish", keywords: CAT_KW.meatfish }, { id: "dairy", emoji: "\uD83E\uDD5B", labelKey: "dairy", keywords: CAT_KW.dairy }, { id: "breadsnack", emoji: "\uD83C\uDF5E", labelKey: "breadSnack", keywords: CAT_KW.breadsnack }, { id: "household", emoji: "\uD83E\uDDF4", labelKey: "household", keywords: CAT_KW.household }, { id: "other", emoji: "\uD83D\uDCE6", labelKey: "other", keywords: [] }, ]; function cx(...parts: (string | false | null | undefined)[]): string { return (parts || []).filter(Boolean).join(" "); } function detectCategory(name: string): string { const lower = name.toLowerCase(); for (const cat of CATEGORIES) { if (cat.id === "other") continue; if (cat.keywords.some((kw) => lower.includes(kw))) return cat.id; } return "other"; } function getLang(): string { try { const lang = (navigator.language || "en").slice(0, 2); if (lang === "ko" || lang === "ja" || lang === "zh") return lang; return "en"; } catch { return "en"; } } export default function App() { const lang = useMemo(() => getLang(), []); const t = T[lang] || T.en; const user = useUser(); const [items, setItems] = useSharedStorage("grocery-items", []); const [inputValue, setInputValue] = useState(""); const [selectedCategory, setSelectedCategory] = useState("auto"); const [showCategoryPicker, setShowCategoryPicker] = useState(false); const [collapsedCats, setCollapsedCats] = useState>({}); const [celebrated, setCelebrated] = useState(false); const inputRef = useRef(null); const safeItems = useMemo(() => (items || []) as GroceryItem[], [items]); const totalCount = safeItems.length; const checkedCount = (safeItems || []).filter((i) => i.checked).length; const progress = totalCount > 0 ? checkedCount / totalCount : 0; const groupedItems = useMemo(() => { const groups: Record = {}; for (const cat of CATEGORIES) { const catItems = (safeItems || []).filter((i) => i.category === cat.id); if (catItems.length > 0) groups[cat.id] = catItems; } return groups; }, [safeItems]); const handleAdd = useCallback(() => { const trimmed = inputValue.trim(); if (!trimmed) return; const category = selectedCategory === "auto" ? detectCategory(trimmed) : selectedCategory; const newItem: GroceryItem = { id: Date.now().toString(36) + Math.random().toString(36).slice(2, 6), name: trimmed, category, checked: false, }; setItems((prev: GroceryItem[]) => [...(prev || []), newItem]); setInputValue(""); setSelectedCategory("auto"); setShowCategoryPicker(false); inputRef.current?.focus(); }, [inputValue, selectedCategory, setItems]); const handleToggle = useCallback( (id: string) => { setItems((prev: GroceryItem[]) => (prev || []).map((item) => item.id === id ? { ...item, checked: !item.checked } : item ) ); }, [setItems] ); const handleDelete = useCallback( (id: string) => { setItems((prev: GroceryItem[]) => (prev || []).filter((item) => item.id !== id)); }, [setItems] ); const handleClearCompleted = useCallback(() => { setItems((prev: GroceryItem[]) => (prev || []).filter((item) => !item.checked)); setCelebrated(false); }, [setItems]); const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); handleAdd(); } }, [handleAdd] ); const toggleCollapse = useCallback((catId: string) => { setCollapsedCats((prev) => ({ ...prev, [catId]: !prev[catId] })); }, []); useEffect(() => { if (totalCount > 0 && checkedCount === totalCount && !celebrated) { setCelebrated(true); try { const script = document.createElement("script"); script.src = "https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"; script.onload = () => { const confetti = (window as unknown as Record).confetti as (opts: Record) => void; if (confetti) { confetti({ particleCount: 120, spread: 80, origin: { y: 0.7 } }); } }; document.head.appendChild(script); } catch {} } if (checkedCount < totalCount) { setCelebrated(false); } }, [checkedCount, totalCount, celebrated]); const R = 28; const C = 2 * Math.PI * R; return (

{/* Progress Header */} {totalCount > 0 && (

{checkedCount}/{totalCount}

{celebrated ? t.allDone : t.progress}

{checkedCount} / {totalCount} {t.items}

{celebrated && (

{t.allDone}

)}

)} {/* Input Area */}

setInputValue(e.target.value)} onKeyDown={handleKeyDown} placeholder={t.addPlaceholder} className="w-full bg-white rounded-xl px-3 py-3 text-sm text-amber-900 placeholder:text-amber-400 border border-amber-200 focus:outline-none focus:border-amber-400 transition-all duration-200" />

{/* Category quick picker */} {showCategoryPicker && (

{CATEGORIES.map((cat) => ( ))}

)}

{/* Item List */}

{safeItems.length === 0 ? (

{t.empty}

{t.emptySub}

) : (

{CATEGORIES.map((cat) => { const catItems = groupedItems[cat.id]; if (!catItems || catItems.length === 0) return null; const isCollapsed = collapsedCats[cat.id]; const catChecked = (catItems || []).filter((i: GroceryItem) => i.checked).length; return (

{!isCollapsed && (

{(catItems || []).map((item: GroceryItem) => (

{item.name}

{item._authorAvatar || item._authorName ? (

{item._authorAvatar && ( author

)} {item._authorName && ( {item._authorName} )}

) : null}

{isOwner(item) && ( )}

))}

)}

); })}

)}

{/* Clear completed button */} {checkedCount > 0 && (

)}

); }