+
1. 캐릭터 등록
+
+ {error &&
{error}
}
-
-
-
결정석
-
{totalCrystals}/12
-
-
-
예상 수익
-
{formatMeso(totalRevenue)} 메소
-
-
-
-
- {DUMMY_BOSSES.map((boss) => (
-
+
+ {characters.map((char) => (
+
onSelect(char.character_name)}
+ className={`flex items-center gap-2 rounded-lg px-2 py-2 cursor-pointer transition group ${
+ selectedChar === char.character_name
+ ? 'bg-emerald-500/10 border border-emerald-500/50'
+ : 'hover:bg-gray-800/50 border border-transparent'
+ }`}
+ >
+ {char.character_image && (
+
+ )}
+
+
{char.character_name}
+
Lv.{char.character_level} {char.job_name}
+
+
{ e.stopPropagation(); onRemove(char.character_name) }}
+ className="text-gray-700 hover:text-red-400 opacity-0 group-hover:opacity-100 transition cursor-pointer text-lg"
+ >
+ ×
+
+
))}
)
}
+
+/* ── 중앙: 보스 선택 패널 ── */
+function BossPanel({ selectedChar, selections, onChange }) {
+ if (!selectedChar) {
+ return (
+
+ 캐릭터를 선택해주세요
+
+ )
+ }
+
+ return (
+
+
2. 보스 선택
+
+
+ {/* 헤더 */}
+
+
보스
+
난이도
+
파티원 수
+
수익
+
+
+ {/* 보스 행 */}
+
+ {DUMMY_BOSSES.map((boss) => {
+ // 현재 캐릭터에서 이 보스의 선택된 난이도 찾기
+ const selectedDiffIdx = boss.difficulties.findIndex((_, i) => {
+ const key = `${boss.id}-${i}`
+ return selections[key]?.enabled
+ })
+ const sel = selectedDiffIdx >= 0 ? selections[`${boss.id}-${selectedDiffIdx}`] : null
+ const diff = selectedDiffIdx >= 0 ? boss.difficulties[selectedDiffIdx] : null
+ const isSelected = !!sel?.enabled
+
+ return (
+
+ {/* 보스 이름 + 아이콘 */}
+
+
+
{boss.name}
+
+
+ {/* 난이도 선택 */}
+
+ {boss.difficulties.map((d, i) => {
+ const key = `${boss.id}-${i}`
+ const active = selections[key]?.enabled
+ return (
+
+ )
+ })}
+
+
+ {/* 파티원 수 */}
+
+ {isSelected && (
+
+ )}
+
+
+ {/* 수익 */}
+
+ {isSelected ? formatMeso(Math.floor(diff.crystal / sel.party)) : '-'}
+
+
+ )
+ })}
+
+
+
+ )
+}
+
+/* ── 우측: 결과 패널 ── */
+function ResultPanel({ characters, allSelections }) {
+ let totalCrystals = 0
+ let totalRevenue = 0
+
+ const charResults = characters.map((char) => {
+ const charSel = allSelections[char.character_name] || {}
+ let crystals = 0
+ let revenue = 0
+
+ Object.entries(charSel).forEach(([key, sel]) => {
+ if (!sel.enabled) return
+ const [bossId, diffIdx] = key.split('-').map(Number)
+ const boss = DUMMY_BOSSES.find((b) => b.id === bossId)
+ if (!boss) return
+ crystals++
+ revenue += Math.floor(boss.difficulties[diffIdx].crystal / sel.party)
+ })
+
+ totalCrystals += crystals
+ totalRevenue += revenue
+
+ return { name: char.character_name, crystals, revenue }
+ })
+
+ return (
+
+
3. 결과
+
+
+ {/* 합산 */}
+
+
+
보유 결정석
+
{totalCrystals}/90
+
+
+
총 수익
+
{formatMeso(totalRevenue)}
+
메소
+
+
+
+ {/* 결정석 게이지 */}
+
+
+ {/* 캐릭터별 소계 */}
+ {charResults.length > 0 && (
+
+
캐릭터별
+ {charResults.map((r) => (
+
+
{r.name}
+
+ {r.crystals}/12
+ 0 ? 'text-green-400' : 'text-gray-600'}>{r.revenue > 0 ? formatMeso(r.revenue) : '-'}
+
+
+ ))}
+
+ )}
+
+
+ )
+}
+
+/* ── 메인 ── */
+export default function BossPage() {
+ const [characters, setCharacters] = useState(() => {
+ const saved = localStorage.getItem('maple-characters')
+ return saved ? JSON.parse(saved) : []
+ })
+ const [selectedChar, setSelectedChar] = useState(null)
+ const [allSelections, setAllSelections] = useState(() => {
+ const saved = localStorage.getItem('maple-boss-selections')
+ return saved ? JSON.parse(saved) : {}
+ })
+
+ const saveCharacters = (chars) => {
+ setCharacters(chars)
+ localStorage.setItem('maple-characters', JSON.stringify(chars))
+ }
+
+ const saveSelections = (sels) => {
+ setAllSelections(sels)
+ localStorage.setItem('maple-boss-selections', JSON.stringify(sels))
+ }
+
+ const handleAddCharacter = (charData) => {
+ if (characters.find((c) => c.character_name === charData.character_name)) return
+ saveCharacters([...characters, charData])
+ setSelectedChar(charData.character_name)
+ }
+
+ const handleRemoveCharacter = (name) => {
+ saveCharacters(characters.filter((c) => c.character_name !== name))
+ if (selectedChar === name) setSelectedChar(null)
+ const newSelections = { ...allSelections }
+ delete newSelections[name]
+ saveSelections(newSelections)
+ }
+
+ const handleBossChange = (charSelections) => {
+ if (!selectedChar) return
+ saveSelections({ ...allSelections, [selectedChar]: charSelections })
+ }
+
+ const currentSelections = selectedChar ? (allSelections[selectedChar] || {}) : {}
+
+ return (
+
+ {/* 좌측 */}
+
+
+
+
+ {/* 중앙 */}
+
+
+
+
+ {/* 우측 */}
+
+
+
+
+ )
+}
diff --git a/frontend/src/hooks/useAuth.js b/frontend/src/hooks/useAuth.js
deleted file mode 100644
index 187654e..0000000
--- a/frontend/src/hooks/useAuth.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useState, useEffect } from 'react'
-import { api } from '../api/client'
-
-export function useAuth() {
- const [authenticated, setAuthenticated] = useState(false)
- const [loading, setLoading] = useState(true)
-
- useEffect(() => {
- api('/api/auth/me')
- .then((data) => setAuthenticated(data.authenticated))
- .catch(() => setAuthenticated(false))
- .finally(() => setLoading(false))
- }, [])
-
- const logout = async () => {
- await api('/api/auth/logout', { method: 'POST' })
- setAuthenticated(false)
- }
-
- return { authenticated, loading, logout }
-}
diff --git a/frontend/src/hooks/useCharacters.js b/frontend/src/hooks/useCharacters.js
deleted file mode 100644
index bef7c7b..0000000
--- a/frontend/src/hooks/useCharacters.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useState, useEffect, useCallback } from 'react'
-import { api } from '../api/client'
-
-export function useCharacters() {
- const [characters, setCharacters] = useState([])
- const [loading, setLoading] = useState(true)
-
- const fetchCharacters = useCallback(async () => {
- setLoading(true)
- try {
- const data = await api('/api/characters')
- setCharacters(data)
- } catch {
- setCharacters([])
- } finally {
- setLoading(false)
- }
- }, [])
-
- const refreshCharacters = async () => {
- setLoading(true)
- try {
- const data = await api('/api/characters/refresh', { method: 'POST' })
- setCharacters(data)
- } catch {
- // 무시
- } finally {
- setLoading(false)
- }
- }
-
- useEffect(() => { fetchCharacters() }, [fetchCharacters])
-
- return { characters, loading, refreshCharacters }
-}
diff --git a/frontend/src/pages/Admin.jsx b/frontend/src/pages/Admin.jsx
new file mode 100644
index 0000000..ccff0d8
--- /dev/null
+++ b/frontend/src/pages/Admin.jsx
@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react'
+import { useSearchParams, Navigate } from 'react-router-dom'
+import { api } from '../api/client'
+
+export default function Admin() {
+ const [searchParams] = useSearchParams()
+ const [verified, setVerified] = useState(null) // null=로딩, true=인증됨, false=실패
+
+ useEffect(() => {
+ const keyFromUrl = searchParams.get('key')
+ const keyFromStorage = localStorage.getItem('maple-admin-key')
+ const key = keyFromUrl || keyFromStorage
+
+ if (!key) {
+ setVerified(false)
+ return
+ }
+
+ api('/api/admin/verify', { method: 'POST', body: { key } })
+ .then(() => {
+ localStorage.setItem('maple-admin-key', key)
+ setVerified(true)
+ })
+ .catch(() => {
+ localStorage.removeItem('maple-admin-key')
+ setVerified(false)
+ })
+ }, [searchParams])
+
+ if (verified === null) {
+ return
인증 중...
+ }
+
+ if (!verified) {
+ return
+ }
+
+ return (
+
+
+
관리자
+
+
+
+
+ 관리자 페이지 준비 중
+
+
+ )
+}