import React, { useState } from "react"; import { Check, ArrowRight } from "lucide-react"; const DEFAULT_CARDS = [ { word: "apple", meaning: "사과" }, { word: "book", meaning: "책" }, { word: "school", meaning: "학교" }, { word: "music", meaning: "음악" }, { word: "river", meaning: "강" }, { word: "window", meaning: "창문" }, { word: "flower", meaning: "꽃" }, ]; export default function App() { const [cards, setCards] = useStorage("flashcards", DEFAULT_CARDS); const [current, setCurrent] = useState(0); const [flipped, setFlipped] = useState(false); const [score, setScore] = useStorage("flashcard_score", { correct: 0, total: 0 }); const [flash, setFlash] = useState(false); const handleFlip = () => { setFlipped(!flipped); }; const handleCorrect = () => { setScore(s => ({ correct: s.correct + 1, total: s.total + 1 })); setFlash(true); setTimeout(() => setFlash(false), 600); nextCard(); }; const handleWrong = () => { setScore(s => ({ ...s, total: s.total + 1 })); nextCard(); }; const nextCard = () => { setFlipped(false); setCurrent((c) => (c + 1) % cards.length); }; const progress = cards.length > 0 ? (score.total % cards.length) / cards.length : 0; // 수정 모달 등 편집 기능은 제공하지 않음(집중형 위젯) if (!cards.length) { return (

📦

카드가 없습니다

새 카드를 추가해보세요!

); } const card = cards[current]; return (

{/* 진행도 표시 */}

{score.correct} / {cards.length}

진행

{/* 카드 */}

{card.word}

{card.meaning}

맞췄나요?

카드를 터치하면 뜻이 나타납니다

{/* 현재 문제 번호 */}

{current + 1} / {cards.length}번째 카드

); }