diff --git a/app/globals.css b/app/globals.css index 016247c..72b874a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -130,6 +130,15 @@ body { 0 10px 28px rgba(133, 252, 168, 0.28); } +/* 사용자 액션(투표 제출) — 브랜드 포인트 퍼플 */ +.btn-share { + background: var(--share); + color: #fff; + box-shadow: + 0 0 0 1px rgba(166, 94, 255, 0.5), + 0 12px 30px rgba(166, 94, 255, 0.35); +} + .gold-card { background: linear-gradient(180deg, rgba(94, 240, 180, 0.08), rgba(21, 169, 155, 0.03)), diff --git a/components/Arena.tsx b/components/Arena.tsx index ce32282..1ab7920 100644 --- a/components/Arena.tsx +++ b/components/Arena.tsx @@ -15,7 +15,7 @@ import type { import Countdown from "./Countdown"; import TeamFlag from "./TeamFlag"; -type Step = "pick" | "form" | "done"; +type Step = "form" | "done"; const MODEL_ICON: Record = { GPT: "/icons/gpt.png", @@ -46,7 +46,7 @@ export default function Arena({ const [outcome, setOutcome] = useState(null); const [scoreA, setScoreA] = useState(2); const [scoreB, setScoreB] = useState(1); - const [step, setStep] = useState("pick"); + const [step, setStep] = useState("form"); const [email, setEmail] = useState(""); const [notify, setNotify] = useState(true); const [crowd, setCrowd] = useState(initialCrowd); @@ -80,10 +80,7 @@ export default function Arena({ .map((p) => ({ model: p.model, exact: p.scoreA === scoreA && p.scoreB === scoreB })); }, [outcome, scoreA, scoreB, predictions]); - const submitPick = () => { - if (!outcome) return; - setStep("form"); - }; + const emailValid = EMAIL_RE.test(email.trim()); const confirmSubmit = () => { if (!EMAIL_RE.test(email.trim())) return; setCrowd((c) => ({ @@ -263,43 +260,45 @@ export default function Arena({ )} - {/* ===== CTA 민트 #85FCA8 (진행 중일 때) ===== */} - {!finished && step === "pick" && ( + {/* ===== 투표 마감/오픈 전: 상태 버튼만 ===== */} + {!finished && disabled && ( )} - {/* ===== 폼: 이메일만 (D5, 닉네임 제거) ===== */} - {!finished && step === "form" && ( -
+ {/* ===== 투표 제출 (D5): 이메일 + 단일 CTA를 한 카드로 통합 ===== */} + {!finished && !disabled && step === "form" && ( +
+
+ {t.emailGate} +
setEmail(e.target.value)} placeholder={t.emailPh} - className="w-full rounded-lg border border-[var(--line-d)] bg-[#0f1217] px-3 py-3 text-[15px] text-white outline-none focus:border-[var(--green)]" + className="w-full rounded-xl border border-[var(--line-d)] bg-[#0f1217] px-4 py-3.5 text-[16px] text-white outline-none focus:border-[var(--green)]" /> -
)} diff --git a/lib/i18n.ts b/lib/i18n.ts index ae67b6f..670ba70 100644 --- a/lib/i18n.ts +++ b/lib/i18n.ts @@ -62,6 +62,7 @@ type Dict = { ctaResult: string; ctaLocked: string; ctaOpens: (d: string) => string; + emailGate: string; emailPh: string; notify: string; submit: string; @@ -121,9 +122,10 @@ export const DICT: Record = { ctaResult: "결과 보기", ctaLocked: "예측 마감 (경기 시작)", ctaOpens: (d) => `투표 오픈 ${d}`, - emailPh: "이메일 (결과·다음 경기 알림)", - notify: "경기 결과가 나오면 알려주세요. 다음 경기·100만원 챌린지 소식도 받겠습니다.", - submit: "제출하고 AI와 겨루기", + emailGate: "투표를 제출하려면 이메일을 입력하세요", + emailPh: "이메일 입력 → 투표 결과·다음 경기 알림", + notify: "결과 알림 + 다음 경기 소식 + ₩100만 챌린지 기회까지 무료로 받기", + submit: "투표 제출하고 AI와 겨루기", myPick: "내 예측", sameAI: (m, exact) => `당신은 ${m}와 같은 선택입니다.${exact ? " 스코어까지 일치!" : ""} 나머지 AI는 생각이 다릅니다.`, @@ -180,9 +182,10 @@ export const DICT: Record = { ctaResult: "View result", ctaLocked: "Closed (kickoff)", ctaOpens: (d) => `Opens ${d}`, - emailPh: "Email (result & next-match alerts)", - notify: "Notify me when the result is out. I'll also get next-match & ₩1,000,000 challenge news.", - submit: "Submit & face the AI", + emailGate: "Enter your email to submit your vote", + emailPh: "Your email → result & next-match alerts", + notify: "Result alerts + next-match news + a shot at the ₩1,000,000 challenge — free", + submit: "Submit your vote & face the AI", myPick: "My Pick", sameAI: (m, exact) => `You matched ${m}.${exact ? " Exact score too!" : ""} The other AIs disagree.`,