import React, { useState, useMemo } from "react"; import { Plus, X, BarChart3, Users, Trash2, Check } from "lucide-react"; const LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); const T = { ko: { title: "투표", create: "투표 만들기", question: "투표 질문", option: "선택지", addOption: "선택지 추가", start: "투표 시작", vote: "투표하기", votes: "표", total: "총", empty: "아직 투표가 없습니다", emptyDesc: "새로운 투표를 만들어보세요", voted: "투표 완료!", back: "목록으로", delete: "삭제", noOptions: "선택지를 2개 이상 추가하세요" }, en: { title: "Poll", create: "Create Poll", question: "Question", option: "Option", addOption: "Add Option", start: "Start Poll", vote: "Vote", votes: "votes", total: "Total", empty: "No polls yet", emptyDesc: "Create your first poll", voted: "Voted!", back: "Back", delete: "Delete", noOptions: "Add at least 2 options" }, ja: { title: "投票", create: "投票を作成", question: "質問", option: "選択肢", addOption: "選択肢を追加", start: "投票開始", vote: "投票する", votes: "票", total: "合計", empty: "まだ投票がありません", emptyDesc: "新しい投票を作成しましょう", voted: "投票完了!", back: "戻る", delete: "削除", noOptions: "2つ以上の選択肢を追加してください" }, zh: { title: "投票", create: "创建投票", question: "问题", option: "选项", addOption: "添加选项", start: "开始投票", vote: "投票", votes: "票", total: "合计", empty: "暂无投票", emptyDesc: "创建您的第一个投票", voted: "已投票!", back: "返回", delete: "删除", noOptions: "请添加至少2个选项" }, }; const t = T[LANG] || T.en; const COLORS = ["bg-blue-500", "bg-emerald-500", "bg-amber-500", "bg-rose-500", "bg-violet-500", "bg-cyan-500", "bg-pink-500", "bg-orange-500"]; export default function App() { const [polls, setPolls] = useSharedStorage("polls_data", []); const [showCreate, setShowCreate] = useState(false); const [viewPollId, setViewPollId] = useState(null); const [question, setQuestion] = useState(""); const [options, setOptions] = useState(["", ""]); const [newOption, setNewOption] = useState(""); const user = useUser(); const userId = user.id; const handleCreate = () => { const validOpts = options.filter(o => o.trim()); if (!question.trim() || validOpts.length < 2) return; const poll = { id: Date.now(), question: question.trim(), options: validOpts.map((o, i) => ({ id: i, text: o.trim(), votes: [] })), createdAt: new Date().toISOString(), }; setPolls([poll, ...(polls || [])]); setQuestion(""); setOptions(["", ""]); setShowCreate(false); setViewPollId(poll.id); }; const handleVote = (pollId, optId) => { setPolls((polls || []).map(p => { if (p.id !== pollId) return p; const alreadyVoted = p.options.some(o => (o.votes || []).includes(userId)); if (alreadyVoted) return p; return { ...p, options: p.options.map(o => o.id === optId ? { ...o, votes: [...(o.votes || []), userId] } : o) }; })); }; const handleDelete = (pollId) => { setPolls((polls || []).filter(p => p.id !== pollId)); setViewPollId(null); }; const activePoll = viewPollId ? (polls || []).find(p => p.id === viewPollId) : null; if (activePoll) { const totalVotes = activePoll.options.reduce((s, o) => s + (o.votes || []).length, 0); const hasVoted = activePoll.options.some(o => (o.votes || []).includes(userId)); return (

{activePoll.question}

{totalVotes} {t.votes}

{activePoll.options.map((opt, i) => { const count = (opt.votes || []).length; const pct = totalVotes > 0 ? Math.round((count / totalVotes) * 100) : 0; const voted = (opt.votes || []).includes(userId); return ( ); })}

{hasVoted &&

{t.voted}

}

); } return (

{t.title}

{(polls || []).length === 0 ? (

{t.empty}

{t.emptyDesc}

) : (

{(polls || []).map(poll => { const total = poll.options.reduce((s, o) => s + (o.votes || []).length, 0); return ( ); })}

)}

{showCreate && (

setShowCreate(false)} />

{t.create}

{t.question} setQuestion(e.target.value)} placeholder={t.question} className="w-full px-4 py-3 rounded-xl bg-white/90 border border-gray-300 text-gray-900 text-base mb-3 outline-none focus:border-indigo-400 placeholder:text-gray-400" /> {t.option} {options.map((opt, i) => (

{ const next = [...options]; next[i] = e.target.value; setOptions(next); }} placeholder={t.option + " " + (i + 1)} className="flex-1 px-4 py-2.5 rounded-xl bg-white/90 border border-gray-300 text-gray-900 text-sm outline-none focus:border-indigo-400 placeholder:text-gray-400" /> {options.length > 2 && ( )}

))}

)}

); }

Quick Poll

Quick Poll

reviews