import React, { useState, useRef, useCallback } from "react"; import confetti from "canvas-confetti"; import { Plus, Trash2, RotateCw } from "lucide-react"; export default function App() { const [input, setInput] = useState(""); const [menus, setMenus] = useStorage("roulette_menus", ["김치찌개", "돈까스", "제육볶음", "라멘", "비빔밥"]); const [result, setResult] = useState(null); const [spinning, setSpinning] = useState(false); const [displayMenu, setDisplayMenu] = useState(null); const spinRef = useRef(false); const timeoutRef = useRef(null); const handleAdd = () => { const val = input.trim(); if (!val || menus.includes(val)) return; setMenus([...menus, val]); setInput(""); }; const handleRemove = (menu) => { const next = menus.filter((m) => m !== menu); setMenus(next); if (result === menu) setResult(null); }; const handleSpin = useCallback(() => { if (spinRef.current || menus.length < 2) return; spinRef.current = true; setSpinning(true); setResult(null); let tick = 0; const totalDuration = 2500 + Math.random() * 500; let elapsed = 0; const step = () => { tick++; const delay = 80 + tick * 12; elapsed += delay; setDisplayMenu(menus[Math.floor(Math.random() * menus.length)]); if (elapsed >= totalDuration) { const final = menus[Math.floor(Math.random() * menus.length)]; setResult(final); setDisplayMenu(final); setSpinning(false); spinRef.current = false; setTimeout(() => confetti({ particleCount: 150, spread: 80 }), 200); } else { timeoutRef.current = setTimeout(step, delay); } }; step(); }, [menus]); const handleReset = () => { spinRef.current = false; setSpinning(false); setResult(null); setDisplayMenu(null); if (timeoutRef.current) clearTimeout(timeoutRef.current); }; return (

setInput(e.target.value)} onKeyDown={e => e.key === "Enter" && handleAdd()} maxLength={16} type="text" placeholder="메뉴 추가 (예: 라멘)" className="flex-1 px-4 py-3 rounded-xl bg-amber-50 border border-amber-200 outline-none text-sm min-w-0" />

} >

{menus.length === 0 && 메뉴를 추가해주세요} {menus.map(menu => ( {menu} {!spinning && menus.length > 1 && ( )} ))}

오늘의 점심 추천은?

{spinning ? ( {displayMenu || "..."} ) : result ? ( {result} ) : ( 룰렛을 돌려보세요! )}

{spinning ? "돌리는 중..." : "돌리기!"} {result && !spinning && ( } className="text-white shrink-0"> 다시 )}

); }

점심 메뉴 룰렛

점심 메뉴 룰렛

reviews