diff --git a/public/images/tarot/tarot_table.png b/public/images/tarot/tarot_table.png new file mode 100644 index 0000000..b3f43cc Binary files /dev/null and b/public/images/tarot/tarot_table.png differ diff --git a/src/pages/tarot/Reading.jsx b/src/pages/tarot/Reading.jsx index 90935b7..d99083d 100644 --- a/src/pages/tarot/Reading.jsx +++ b/src/pages/tarot/Reading.jsx @@ -3,15 +3,38 @@ import './Tarot.css'; import { TAROT_DECK, CATEGORIES, SPREADS } from './data/cards'; import { useTarotShuffle } from './hooks/useTarotShuffle'; import { useTarotReading } from './hooks/useTarotReading'; +import TarotCard from './components/TarotCard'; import CardGrid from './components/CardGrid'; import SpreadSlots from './components/SpreadSlots'; import InterpretationPanel from './components/InterpretationPanel'; +const STEPS = [ + { id: 1, label: '질문 & 설정' }, + { id: 2, label: '카드 선택' }, + { id: 3, label: '해석' }, +]; + +function StepIndicator({ current }) { + return ( +
+ {STEPS.map((s, i) => ( + +
+ {s.id < current ? '✓' : s.id} + {s.label} +
+ {i < STEPS.length - 1 &&
} + + ))} +
+ ); +} + export default function Reading() { const [category, setCategory] = useState('일반'); const [question, setQuestion] = useState(''); const [spreadId, setSpreadId] = useState('three_card'); - const [step, setStep] = useState(1); // 1: 입력, 2: 뽑기, 3: 해석 + const [step, setStep] = useState(1); const [picks, setPicks] = useState([]); const [focusIdx, setFocusIdx] = useState(null); @@ -32,9 +55,7 @@ export default function Reading() { const pos = spread.positions[idx]; const next = [...picks, { card, position: pos.label, reversed: card.reversed }]; setPicks(next); - if (next.length === spread.positions.length) { - setFocusIdx(0); - } + if (next.length === spread.positions.length) setFocusIdx(0); }; const handleInterpret = async () => { @@ -47,96 +68,134 @@ export default function Reading() { } catch { /* error는 hook state */ } }; + const restart = () => { + setStep(1); setPicks([]); setFocusIdx(null); + }; + const disabledIds = picks.map((p) => p.card.slug); const focusCard = focusIdx !== null && picks[focusIdx] ? picks[focusIdx].card : null; const focusCardId = focusCard?.slug; const allPicked = picks.length === spread.positions.length; const busy = status === 'interpreting' || status === 'saving'; + const remaining = slice.filter((c) => !disabledIds.includes(c.slug)); return ( -
-