import React, { useState, useEffect, useRef, useCallback } from "react"; import { Check, X, Loader2, RefreshCw, Lightbulb } from "lucide-react"; const PUZZLES = [ // Each puzzle: { date: 'YYYY-MM-DD', emojis: '🤵👰💍', answer: '결혼', hint: '인생의 중대 이벤트' } { date: '2026-03-23', emojis: '🦁👑', answer: '라이온킹', hint: '디즈니 명작' }, { date: '2026-03-24', emojis: '🌸☔️', answer: '봄비', hint: '계절과 날씨' }, { date: '2026-03-25', emojis: '😴🔔😱', answer: '지각', hint: '학교 혹은 회사 아침' }, { date: '2026-03-26', emojis: '🍎👨‍🏫', answer: '선생님', hint: '직업' }, { date: '2026-03-27', emojis: '🚗🛣️🎶', answer: '드라이브', hint: '취미' } ]; // Utility to get today's puzzle (or fallback to first) function getTodayPuzzle() { const now = new Date(); const today = now.toISOString().slice(0, 10); const found = PUZZLES.find(p => p.date === today); return found || PUZZLES[0]; } export default function App() { // Storage keys const [shownPuzzle, setShownPuzzle] = useState(getTodayPuzzle()); const [input, setInput] = useState(""); const [status, setStatus] = useState(null); // 'correct', 'wrong', or null const [showHint, setShowHint] = useState(false); const [revealed, setRevealed] = useState(false); // History persistence const [history, setHistory] = useSharedStorage("emojiPuzzleHistory", []); // Each puzzle is one per date. After submit, prevent input & persist to history. const isSolved = history.find(h => h.date === shownPuzzle.date) !== undefined || !!revealed; const lastRecord = history.find(h => h.date === shownPuzzle.date); // Reveal after answer or when user taps '정답 보기' function handleReveal() { setRevealed(true); if (!isSolved) { setHistory([ ...history, { date: shownPuzzle.date, result: 'revealed', attempts: [], solved: false } ]); } } function handleCheck() { const norm = s => s.replace(/\s/g, '').toLowerCase(); const ok = norm(input) === norm(shownPuzzle.answer) || norm(input) === norm(shownPuzzle.answer.replace(/ /g, '')); if (ok) { setStatus("correct"); setTimeout(() => setStatus(null), 1000); setHistory([ ...history, { date: shownPuzzle.date, result: 'correct', attempts: [input], solved: true, when: new Date().toISOString(), }, ]); } else { setStatus("wrong"); setTimeout(() => setStatus(null), 700); setHistory(prev => { let found = prev.find(h => h.date === shownPuzzle.date); if (!found) { return [ ...prev, { date: shownPuzzle.date, result: 'wrong', attempts: [input], solved: false, }, ]; } else { return prev.map(h => h.date === shownPuzzle.date ? { ...h, attempts: [...(h.attempts || []), input] } : h ); } }); } setInput(""); } function handleRestart() { setRevealed(false); setStatus(null); setInput(""); setShowHint(false); setHistory(h => h.filter(r => r.date !== shownPuzzle.date)); } // Keyboard Enter function handleKey(e) { if (e.key === "Enter" && input.trim()) { handleCheck(); } } // For animation feedback const feedbackRef = useRef(); useEffect(() => { if (status && feedbackRef.current) { feedbackRef.current.animate( [ { transform: "scale(1)" }, { transform: "scale(1.1)" }, { transform: "scale(1)" }, ], { duration: 240, } ); } }, [status]); // Animation on puzzle load useEffect(() => { setInput(""); setStatus(null); setShowHint(false); setRevealed(false); }, [shownPuzzle.date]); // Fun confetti on solve (if in browser and correct) useEffect(() => { if (status === "correct" && typeof window !== "undefined") { import("canvas-confetti").then(m => { m.default({ particleCount: 80, origin: { y: 0.68 } }); }); } }, [status]); return (

오늘의 이모지 퀴즈

이모지가 의미하는 속담, 영화 또는 문장을 맞혀보세요!

{shownPuzzle.emojis}

무엇을 의미할까요?

setInput(e.target.value)} onKeyDown={handleKey} disabled={isSolved} aria-label="정답 입력" placeholder="정답을 입력하세요..." className="flex-1 bg-white border border-orange-200 rounded-xl px-4 py-3 text-lg text-gray-900 placeholder:text-orange-400 outline-none focus:ring-2 focus:ring-orange-400 transition shadow-sm shrink" style={{ minWidth: 0, borderRadius: 'var(--ds-radius)' }} maxLength={18} autoComplete="off" />

{showHint && (

{shownPuzzle.hint}

)} {status === "correct" && (

정답입니다!

)} {status === "wrong" && (

오답이에요

)} {isSolved && (

오늘의 정답: {shownPuzzle.answer}

내일 새로운 퀴즈도 도전해보세요!

)}

나의 오늘 기록

{lastRecord ? (

{lastRecord.solved ? ( 정답! ) : ( lastRecord.result === 'revealed' ? 정답 확인 : 정답 실패 )} 시도 횟수: {lastRecord.attempts?.length ?? 0}

) : ( 아직 기록이 없습니다. )}

이전 퀴즈 내 기록

{history.length === 0 ? ( 기록이 없습니다. ) : ( history .filter(h => h.date !== shownPuzzle.date) .sort((a, b) => b.date.localeCompare(a.date)) .slice(0, 4) .map((h, i) => { const p = PUZZLES.find(x => x.date === h.date); return (

{p?.emojis ?? '❓'} {p?.answer ?? '-'} {h.solved ? '정답' : h.result === 'revealed' ? '정답 공개' : '실패'}

); }) )}

매일 새로운 이모지 퀴즈 — {shownPuzzle.date} 기준 제작 · 바이브랜드 AI

); }