diff --git a/frontend/src/features/liberation/pc/Destiny.jsx b/frontend/src/features/liberation/pc/Destiny.jsx index faadfb8..76cf049 100644 --- a/frontend/src/features/liberation/pc/Destiny.jsx +++ b/frontend/src/features/liberation/pc/Destiny.jsx @@ -1,11 +1,17 @@ -import { DESTINY_CHAPTERS, DESTINY_QUEST_IMAGE_BASE } from '../data' +import dayjs from 'dayjs' +import { DESTINY_CHAPTERS, DESTINY_QUEST_IMAGE_BASE, formatDate } from '../data' import { useLiberationStore } from '../store' import ProgressBar from './components/ProgressBar' +import QuestSelector from './components/QuestSelector' +import PointsInput from './components/PointsInput' +import DatePicker from '../../../components/common/DatePicker' export default function Destiny() { const calcMode = useLiberationStore((s) => s.destinyCalcMode) const setCalcMode = useLiberationStore((s) => s.setDestinyCalcMode) const state = useLiberationStore((s) => s.destinyCalcMode === 'weekly' ? s.destinyWeekly : s.destinySimple) + const updateSlot = useLiberationStore((s) => s.updateDestinySlot) + const setState = (updater) => updateSlot(updater) return ( <> @@ -49,6 +55,66 @@ export default function Destiny() { completionDate={null} completionColor="var(--destiny-date)" /> + + {/* 현재 진행 상태 입력 */} +
+
현재 진행 상태
+ +
+
+ + setState((prev) => ({ ...prev, startDate: dayjs(d).toISOString() }))} + /> +
+ +
+ + setState((prev) => ({ ...prev, startChapter: idx }))} + /> +
+ +
+ +
+ setState((prev) => ({ ...prev, currentPoints: n }))} + className="flex-1 min-w-0 bg-transparent px-3 h-12 text-base text-right tabular-nums outline-none" + style={{ color: 'var(--text-strong)' }} + /> + + / {(DESTINY_CHAPTERS[state.startChapter]?.required ?? 0).toLocaleString()} + +
+
+
+
) } diff --git a/frontend/src/features/liberation/pc/Genesis.jsx b/frontend/src/features/liberation/pc/Genesis.jsx index 6bd3177..5f33f84 100644 --- a/frontend/src/features/liberation/pc/Genesis.jsx +++ b/frontend/src/features/liberation/pc/Genesis.jsx @@ -155,6 +155,8 @@ export default function Genesis() {
setState((prev) => ({ ...prev, startChapter: idx }))} /> diff --git a/frontend/src/features/liberation/pc/components/QuestSelector.jsx b/frontend/src/features/liberation/pc/components/QuestSelector.jsx index e16d25a..1bbeaaa 100644 --- a/frontend/src/features/liberation/pc/components/QuestSelector.jsx +++ b/frontend/src/features/liberation/pc/components/QuestSelector.jsx @@ -1,12 +1,12 @@ import { useState, useEffect, useRef } from 'react' import { motion, AnimatePresence } from 'framer-motion' -import { GENESIS_CHAPTERS, QUEST_BOSS_IMAGE_BASE } from '../../data' /** - * 진행 중인 퀘스트 드롭다운 - * - 보스 초상화 + 이름 텍스트 + * 진행 중인 퀘스트 드롭다운 (보스 초상화 + 이름) + * @param {Array} chapters - { idx, boss, ... }[] + * @param {string} imageBase - 보스 초상화 S3 base URL */ -export default function QuestSelector({ value, onChange }) { +export default function QuestSelector({ chapters, imageBase, value, onChange }) { const [open, setOpen] = useState(false) const ref = useRef(null) @@ -19,7 +19,7 @@ export default function QuestSelector({ value, onChange }) { return () => document.removeEventListener('mousedown', handler) }, [open]) - const selected = GENESIS_CHAPTERS[value] + const selected = chapters[value] return (
@@ -38,7 +38,7 @@ export default function QuestSelector({ value, onChange }) { style={{ background: 'var(--surface-nested)' }} > @@ -69,7 +69,7 @@ export default function QuestSelector({ value, onChange }) { boxShadow: 'var(--popup-shadow)', }} > - {GENESIS_CHAPTERS.map((chapter) => { + {chapters.map((chapter) => { const isSelected = chapter.idx === value return (