import React, { useState, useCallback, useMemo } from "react"; import { Plus, Trash2, Check, ShoppingCart } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "장보기 리스트", add: "추가", placeholder: "추가할 항목...", all: "전체", left: "남은", bought: "완료", empty: "장보기 항목을 추가하세요", clear: "완료 항목 삭제", items: "개" }, en: { title: "Shopping List", add: "Add", placeholder: "Add item...", all: "All", left: "Left", bought: "Bought", empty: "Add items to your shopping list", clear: "Clear bought", items: "items" }, ja: { title: "買い物リスト", add: "追加", placeholder: "追加する項目...", all: "全て", left: "残り", bought: "購入済", empty: "買い物項目を追加してください", clear: "購入済みを削除", items: "件" }, zh: { title: "购物清单", add: "添加", placeholder: "添加项目...", all: "全部", left: "待买", bought: "已买", empty: "添加购物项目", clear: "清除已买", items: "项" }, }; var t = T[LANG] || T.en; var CATS = [ { id: "fruit", emoji: "🍎", label: "Fruit" }, { id: "veg", emoji: "🥬", label: "Vegetables" }, { id: "meat", emoji: "🥩", label: "Meat" }, { id: "dairy", emoji: "🥛", label: "Dairy" }, { id: "snack", emoji: "🍪", label: "Snacks" }, { id: "drink", emoji: "🥤", label: "Drinks" }, { id: "etc", emoji: "📦", label: "Other" }, ]; export default function App() { var [items, setItems] = useSharedStorage("shop_v2", []); var [input, setInput] = useState(""); var [catId, setCatId] = useState("etc"); var list = items || []; var boughtCount = list.filter(function(i) { return i.done; }).length; var leftCount = list.length - boughtCount; var progress = list.length > 0 ? Math.round((boughtCount / list.length) * 100) : 0; var handleAdd = useCallback(function() { if (!input.trim()) return; var cat = CATS.find(function(c) { return c.id === catId; }) || CATS[6]; setItems(function(prev) { return [{ id: Date.now(), name: input.trim(), cat: catId, emoji: cat.emoji, done: false }, ...(prev || [])]; }); setInput(""); }, [input, catId, setItems]); var toggle = useCallback(function(id) { setItems(function(prev) { return (prev || []).map(function(i) { return i.id === id ? { ...i, done: !i.done } : i; }); }); }, [setItems]); var del = useCallback(function(id) { setItems(function(prev) { return (prev || []).filter(function(i) { return i.id !== id; }); }); }, [setItems]); var clearBought = useCallback(function() { setItems(function(prev) { return (prev || []).filter(function(i) { return !i.done; }); }); }, [setItems]); var sorted = useMemo(function() { return list.slice().sort(function(a, b) { return (a.done ? 1 : 0) - (b.done ? 1 : 0); }); }, [list]); return (

{t.title}

{list.length > 0 && (

{boughtCount}/{list.length}

)}

{CATS.map(function(c) { return ( ); })}

{sorted.length === 0 ? (

🛒

{t.empty}

) : (

{sorted.map(function(item) { return (

{item.emoji}

{item.name}

); })}

)}

{boughtCount > 0 && (

)}

); }

Shopping List

Shopping List

reviews