심볼 계산기 디자인 초안
- /symbol 경로에 Symbol 페이지 추가 (풀스크린 레이아웃) - 아케인/어센틱/그랜드 어센틱 탭 (DB에서 대표 심볼 아이콘 가져옴) - 캐릭터 닉네임 검색 → /api/character/search 연동 및 여러 캐릭터 추가 가능 - 캐릭터 카드: 큰 이미지 + 닉네임 + 레벨/직업 (좌우 스크롤) - 카드 우상단 삭제 버튼 - 캐릭터 목록 + 선택 상태 localStorage 영속화 - 심볼 카드 그리드: 아이콘, 레벨, 성장치 진행바, 일퀘/주퀘 획득 입력, 남은 심볼/필요 메소/체납 메소/남은 일수/예상 완료일 (목업) - 하단 요약 카드: 만렙 완료 예상일 + 누적 체납 메소 + 누적 필요 메소 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
317754206d
commit
c9a130ea65
2 changed files with 354 additions and 0 deletions
324
frontend/src/features/symbol/Symbol.jsx
Normal file
324
frontend/src/features/symbol/Symbol.jsx
Normal file
|
|
@ -0,0 +1,324 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { useQuery, useMutation } from '@tanstack/react-query'
|
||||
import { api } from '../../api/client'
|
||||
import { useLayout } from '../../components/Layout'
|
||||
import { SYMBOL_TABS, SYMBOLS } from './data'
|
||||
|
||||
function CharacterCard({ char, active, onSelect, onRemove }) {
|
||||
return (
|
||||
<div
|
||||
onClick={(e) => {
|
||||
if (e.target.closest('button')) return
|
||||
onSelect()
|
||||
}}
|
||||
className={`group relative shrink-0 w-36 rounded-xl border cursor-pointer select-none transition ${
|
||||
active
|
||||
? 'border-emerald-500/40 bg-emerald-500/[0.08]'
|
||||
: 'border-white/5 hover:border-white/15 bg-gray-950/40 hover:bg-gray-950/60'
|
||||
}`}
|
||||
>
|
||||
{/* 삭제 (우상단) */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); onRemove() }}
|
||||
style={{ position: 'absolute', top: 6, right: 6, zIndex: 10 }}
|
||||
className="w-6 h-6 rounded-md text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition flex items-center justify-center text-base leading-none"
|
||||
aria-label="삭제"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
|
||||
{/* 내용 */}
|
||||
<div className="pt-3 px-3 pb-3 flex flex-col items-center text-center">
|
||||
<div className="w-24 h-24 overflow-hidden flex items-center justify-center">
|
||||
{char.character_image ? (
|
||||
<img
|
||||
src={char.character_image}
|
||||
alt=""
|
||||
className="w-full h-full object-contain scale-[3] origin-center pointer-events-none"
|
||||
style={{ imageRendering: 'pixelated' }}
|
||||
draggable={false}
|
||||
/>
|
||||
) : (
|
||||
<span className="text-gray-600 text-3xl">?</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={`mt-2 text-base font-semibold truncate w-full ${active ? 'text-emerald-200' : 'text-gray-200'}`}>
|
||||
{char.character_name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 tabular-nums mt-0.5 truncate w-full">
|
||||
Lv.{char.character_level} · {char.job_name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TabImage({ name }) {
|
||||
const { data } = useQuery({
|
||||
queryKey: ['image', name],
|
||||
queryFn: () => api('/api/images/' + encodeURIComponent(name)).catch(() => null),
|
||||
staleTime: Infinity,
|
||||
})
|
||||
if (!data?.url) return <div className="w-8 h-8 bg-gray-800 rounded" />
|
||||
return <img src={data.url} alt="" className="w-8 h-8 object-contain" />
|
||||
}
|
||||
|
||||
function SymbolCard({ symbol, equipped }) {
|
||||
// 임시 목업 데이터
|
||||
const level = equipped ? 7 : 0
|
||||
const maxLevel = 20
|
||||
const growth = equipped ? 120 : 0
|
||||
const requireGrowth = 60
|
||||
const remainingSymbols = 540
|
||||
const remainingMeso = 128_000_000
|
||||
const daysLeft = equipped ? 84 : '-'
|
||||
const completeDate = equipped ? '2026년 07월 09일 (목)' : '미장착'
|
||||
|
||||
return (
|
||||
<div className={`rounded-2xl border p-5 transition ${
|
||||
equipped
|
||||
? 'border-white/10 bg-gray-900/60 hover:border-white/20'
|
||||
: 'border-white/5 bg-gray-950/40 opacity-60'
|
||||
}`}>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-14 h-14 rounded-lg bg-gray-950 overflow-hidden shrink-0 flex items-center justify-center">
|
||||
<img
|
||||
src={symbol.image}
|
||||
alt={symbol.name}
|
||||
className={`w-12 h-12 object-contain ${!equipped ? 'grayscale opacity-50' : ''}`}
|
||||
style={{ imageRendering: 'pixelated' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-base font-semibold text-gray-100 truncate">{symbol.name}</div>
|
||||
<div className="text-sm text-gray-400 tabular-nums mt-0.5">
|
||||
Lv.<span className="text-emerald-300 font-bold text-base">{level}</span>
|
||||
<span className="text-gray-600"> / {maxLevel}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 진행도 바 */}
|
||||
<div className="mb-4">
|
||||
<div className="flex justify-between text-sm text-gray-400 tabular-nums mb-1.5">
|
||||
<span>성장치 {growth} / {requireGrowth}</span>
|
||||
<span>{requireGrowth ? Math.min(Math.floor((growth / requireGrowth) * 100), 100) : 0}%</span>
|
||||
</div>
|
||||
<div className="h-2 rounded-full bg-gray-950 overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-emerald-500/80 transition-all"
|
||||
style={{ width: `${Math.min((growth / requireGrowth) * 100, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 획득량 입력 */}
|
||||
<div className="grid grid-cols-2 gap-2 mb-4">
|
||||
<div className="space-y-1">
|
||||
<label className="block text-xs text-gray-400">일퀘 획득</label>
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
defaultValue={equipped ? '20' : '0'}
|
||||
disabled={!equipped}
|
||||
className="w-full h-10 rounded-md border border-white/10 bg-gray-950 px-3 text-base text-right tabular-nums outline-none focus:border-emerald-500/50 hover:border-white/20 disabled:opacity-50 transition"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="block text-xs text-gray-400">주퀘 획득</label>
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
defaultValue={equipped ? '45' : '0'}
|
||||
disabled={!equipped}
|
||||
className="w-full h-10 rounded-md border border-white/10 bg-gray-950 px-3 text-base text-right tabular-nums outline-none focus:border-emerald-500/50 hover:border-white/20 disabled:opacity-50 transition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 정보 */}
|
||||
<div className="divide-y divide-white/5 text-base">
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-gray-400">남은 심볼</span>
|
||||
<span className="tabular-nums text-gray-200 font-medium">{remainingSymbols.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-gray-400">필요 메소</span>
|
||||
<span className="tabular-nums text-amber-300 font-medium">{remainingMeso.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-gray-400">체납 메소</span>
|
||||
<span className="tabular-nums text-red-400 font-medium">{(equipped ? 18_000_000 : 0).toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-gray-400">남은 일수</span>
|
||||
<span className="tabular-nums text-gray-200 font-medium">{typeof daysLeft === 'number' ? `${daysLeft}일` : daysLeft}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-gray-400">예상 완료일</span>
|
||||
<span className={`tabular-nums font-semibold ${equipped ? 'text-emerald-300' : 'text-gray-600'}`}>
|
||||
{completeDate}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Symbol() {
|
||||
const { setFullscreen } = useLayout()
|
||||
useEffect(() => {
|
||||
setFullscreen(true)
|
||||
return () => setFullscreen(false)
|
||||
}, [setFullscreen])
|
||||
|
||||
const STORAGE_KEY = 'maple-symbol'
|
||||
const [tab, setTab] = useState('arcane')
|
||||
const [characters, setCharacters] = useState(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem(STORAGE_KEY)
|
||||
if (saved) return JSON.parse(saved).characters || []
|
||||
} catch { /* ignore */ }
|
||||
return []
|
||||
})
|
||||
const [selectedCharId, setSelectedCharId] = useState(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem(STORAGE_KEY)
|
||||
if (saved) return JSON.parse(saved).selectedCharId ?? null
|
||||
} catch { /* ignore */ }
|
||||
return null
|
||||
})
|
||||
const [addName, setAddName] = useState('')
|
||||
const [addError, setAddError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify({ characters, selectedCharId }))
|
||||
}, [characters, selectedCharId])
|
||||
const symbols = SYMBOLS[tab]
|
||||
const tabInfo = SYMBOL_TABS.find((t) => t.key === tab)
|
||||
|
||||
const searchMutation = useMutation({
|
||||
mutationFn: (name) => api(`/api/character/search?name=${encodeURIComponent(name)}`),
|
||||
onSuccess: (data) => {
|
||||
setCharacters((prev) => {
|
||||
if (prev.find((c) => c.character_name === data.character_name)) {
|
||||
setAddError('이미 추가된 캐릭터입니다')
|
||||
return prev
|
||||
}
|
||||
setAddError('')
|
||||
setAddName('')
|
||||
setSelectedCharId(data.ocid)
|
||||
return [...prev, { ...data, id: data.ocid }]
|
||||
})
|
||||
},
|
||||
onError: (err) => setAddError(err.message || '조회 실패'),
|
||||
})
|
||||
|
||||
const handleSearch = (e) => {
|
||||
e.preventDefault()
|
||||
const n = addName.trim()
|
||||
if (!n) return
|
||||
setAddError('')
|
||||
searchMutation.mutate(n)
|
||||
}
|
||||
|
||||
// 임시: 첫 번째 심볼만 장착된 것으로 표시
|
||||
const isEquipped = (i) => i === 0
|
||||
|
||||
return (
|
||||
<div className="space-y-6 pb-10 max-w-5xl mx-auto">
|
||||
{/* 캐릭터 조회 */}
|
||||
<div className="rounded-2xl border border-white/10 bg-gray-900/60 p-5 space-y-4">
|
||||
<form onSubmit={handleSearch} className="flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="8" cy="8" r="5" stroke="currentColor" strokeWidth="1.5" />
|
||||
<path d="M12 12L16 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
value={addName}
|
||||
onChange={(e) => { setAddName(e.target.value); if (addError) setAddError('') }}
|
||||
placeholder="캐릭터 닉네임으로 장착 심볼 불러오기"
|
||||
className="w-full h-12 rounded-lg border-2 border-white/10 bg-gray-950 pl-10 pr-4 text-base outline-none focus:border-emerald-500/60 hover:border-white/20 transition"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={searchMutation.isPending}
|
||||
className="shrink-0 rounded-lg bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 text-white px-6 h-12 text-base font-semibold shadow-lg shadow-emerald-500/20 transition"
|
||||
>
|
||||
{searchMutation.isPending ? '...' : '조회'}
|
||||
</button>
|
||||
</form>
|
||||
{addError && <p className="text-sm text-red-400">{addError}</p>}
|
||||
|
||||
{/* 캐릭터 목록 */}
|
||||
{characters.length > 0 && (
|
||||
<div className="flex items-start gap-3 overflow-x-auto pt-1">
|
||||
{characters.map((c) => (
|
||||
<CharacterCard
|
||||
key={c.id}
|
||||
char={c}
|
||||
active={c.id === selectedCharId}
|
||||
onSelect={() => setSelectedCharId(c.id)}
|
||||
onRemove={() => {
|
||||
setCharacters((prev) => prev.filter((x) => x.id !== c.id))
|
||||
if (selectedCharId === c.id) setSelectedCharId(null)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 심볼 타입 탭 */}
|
||||
<div className="flex gap-2">
|
||||
{SYMBOL_TABS.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
type="button"
|
||||
onClick={() => setTab(t.key)}
|
||||
className={`flex-1 flex items-center justify-center gap-2.5 rounded-2xl border px-4 py-3 transition ${
|
||||
tab === t.key
|
||||
? 'border-emerald-500/50 bg-emerald-500/10 text-emerald-200 shadow-lg shadow-emerald-500/10'
|
||||
: 'border-white/10 bg-gray-900/40 text-gray-400 hover:border-white/20 hover:text-gray-200'
|
||||
}`}
|
||||
>
|
||||
<TabImage name={t.imageName} />
|
||||
<span className="text-base font-semibold">{t.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 심볼 카드 그리드 */}
|
||||
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{symbols.map((s, i) => (
|
||||
<SymbolCard key={s.key} symbol={s} equipped={isEquipped(i)} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 전체 요약 */}
|
||||
<div className="rounded-2xl border border-white/10 bg-gradient-to-br from-emerald-500/10 to-emerald-500/[0.02] p-6 flex items-center justify-between gap-6 flex-wrap">
|
||||
<div>
|
||||
<div className="text-base text-emerald-200/80">{tabInfo?.label} 전체 만렙 완료 예상일</div>
|
||||
<div className="text-3xl font-bold text-emerald-300 tabular-nums mt-1.5">2026년 09월 12일 (토)</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="text-right pr-10">
|
||||
<div className="text-base text-gray-400">누적 체납 메소</div>
|
||||
<div className="text-2xl font-bold text-red-400 tabular-nums mt-1">108,000,000</div>
|
||||
</div>
|
||||
<div className="w-px h-12 bg-white/10" />
|
||||
<div className="text-right pl-10">
|
||||
<div className="text-base text-gray-400">누적 필요 메소</div>
|
||||
<div className="text-2xl font-bold text-amber-300 tabular-nums mt-1">768,000,000</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
30
frontend/src/features/symbol/data.js
Normal file
30
frontend/src/features/symbol/data.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export const SYMBOL_TABS = [
|
||||
{ key: 'arcane', label: '아케인 심볼', imageName: '아케인심볼 : 소멸의 여로', maxLevel: 20 },
|
||||
{ key: 'authentic', label: '어센틱 심볼', imageName: '어센틱심볼 : 세르니움', maxLevel: 11 },
|
||||
{ key: 'grand', label: '그랜드 어센틱 심볼', imageName: '그랜드 어센틱심볼 : 탈라하트', maxLevel: 11 },
|
||||
]
|
||||
|
||||
const BASE = 'https://s3.caadiq.co.kr/maplestory/symbol'
|
||||
|
||||
export const SYMBOLS = {
|
||||
arcane: [
|
||||
{ key: 'yeoro', name: '소멸의 여로', image: `${BASE}/아케인심볼(소멸의 여로).webp` },
|
||||
{ key: 'chuchu', name: '츄츄 아일랜드', image: `${BASE}/아케인심볼(츄츄 아일랜드).webp` },
|
||||
{ key: 'lachelein', name: '레헬른', image: `${BASE}/아케인심볼(레헬른).webp` },
|
||||
{ key: 'arcana', name: '아르카나', image: `${BASE}/아케인심볼(아르카나).webp` },
|
||||
{ key: 'morass', name: '모라스', image: `${BASE}/아케인심볼(모라스).webp` },
|
||||
{ key: 'esfera', name: '에스페라', image: `${BASE}/아케인심볼(에스페라).webp` },
|
||||
],
|
||||
authentic: [
|
||||
{ key: 'cernium', name: '세르니움', image: `${BASE}/어센틱심볼(세르니움).webp` },
|
||||
{ key: 'arcs', name: '아르크스', image: `${BASE}/어센틱심볼(아르크스).webp` },
|
||||
{ key: 'odium', name: '오디움', image: `${BASE}/어센틱심볼(오디움).webp` },
|
||||
{ key: 'dowongyeong', name: '도원경', image: `${BASE}/어센틱심볼(도원경).webp` },
|
||||
{ key: 'arteria', name: '아르테리아', image: `${BASE}/어센틱심볼(아르테리아).webp` },
|
||||
{ key: 'carcion', name: '카르시온', image: `${BASE}/어센틱심볼(카르시온).webp` },
|
||||
],
|
||||
grand: [
|
||||
{ key: 'talahart', name: '탈라하트', image: `${BASE}/그랜드 어센틱심볼(탈라하트).webp` },
|
||||
{ key: 'geardrock', name: '기어드락', image: `${BASE}/그랜드 어센틱심볼(기어드락).webp` },
|
||||
],
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue