271 lines
10 KiB
React
271 lines
10 KiB
React
|
import { useState, useRef } from 'react'
|
||
|
|
import { useNavigate, useParams } from 'react-router-dom'
|
||
|
|
import Select from '../../../components/Select'
|
||
|
|
import ConfirmDialog from '../../../components/ConfirmDialog'
|
||
|
|
|
||
|
|
const TYPE_OPTIONS = [
|
||
|
|
{ value: '아케인', label: '아케인' },
|
||
|
|
{ value: '어센틱', label: '어센틱' },
|
||
|
|
{ value: '그랜드 어센틱', label: '그랜드 어센틱' },
|
||
|
|
]
|
||
|
|
|
||
|
|
const inputCls = 'w-full rounded-lg border border-white/10 bg-gray-950 px-3 py-2 text-sm outline-none focus:border-emerald-500/50 transition'
|
||
|
|
|
||
|
|
function formatMesoKorean(n) {
|
||
|
|
if (!n || n <= 0) return ''
|
||
|
|
const eok = Math.floor(n / 100_000_000)
|
||
|
|
const man = Math.floor((n % 100_000_000) / 10_000)
|
||
|
|
const parts = []
|
||
|
|
if (eok) parts.push(`${eok}억`)
|
||
|
|
if (man) parts.push(`${man.toLocaleString()}만`)
|
||
|
|
if (!parts.length) return `${n.toLocaleString()}`
|
||
|
|
return parts.join(' ')
|
||
|
|
}
|
||
|
|
|
||
|
|
function MesoInput({ value, onChange, ...rest }) {
|
||
|
|
const display = value === '' || value == null ? '' : Number(String(value).replace(/[^\d]/g, '')).toLocaleString()
|
||
|
|
const korean = formatMesoKorean(Number(String(value).replace(/[^\d]/g, '')) || 0)
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
inputMode="numeric"
|
||
|
|
value={display}
|
||
|
|
onChange={(e) => {
|
||
|
|
const digits = e.target.value.replace(/[^\d]/g, '')
|
||
|
|
onChange(digits)
|
||
|
|
}}
|
||
|
|
className={`${inputCls} tabular-nums text-right`}
|
||
|
|
{...rest}
|
||
|
|
/>
|
||
|
|
<div className="text-sm text-amber-300 mt-1 text-right tabular-nums min-h-[18px]">{korean || '\u00A0'}</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function Field({ label, hint, error, required, children }) {
|
||
|
|
return (
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
<div className="flex items-baseline justify-between">
|
||
|
|
<label className="text-sm font-medium text-gray-300">
|
||
|
|
{label} {required && <span className="text-red-400">*</span>}
|
||
|
|
</label>
|
||
|
|
{hint && <span className="text-xs text-gray-500">{hint}</span>}
|
||
|
|
</div>
|
||
|
|
{children}
|
||
|
|
{error && <div className="text-[11px] text-red-400">{error}</div>}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function SymbolForm() {
|
||
|
|
const navigate = useNavigate()
|
||
|
|
const { id } = useParams()
|
||
|
|
const isEdit = !!id
|
||
|
|
const fileInputRef = useRef(null)
|
||
|
|
|
||
|
|
const [type, setType] = useState('아케인')
|
||
|
|
const [region, setRegion] = useState('')
|
||
|
|
const [maxLevel, setMaxLevel] = useState('')
|
||
|
|
const [dailyDefault, setDailyDefault] = useState('')
|
||
|
|
const [weeklyDefault, setWeeklyDefault] = useState('')
|
||
|
|
const [imageFile, setImageFile] = useState(null)
|
||
|
|
const [imagePreview, setImagePreview] = useState(null)
|
||
|
|
const [levels, setLevels] = useState([])
|
||
|
|
const [confirmDelete, setConfirmDelete] = useState(false)
|
||
|
|
|
||
|
|
const handleFile = (e) => {
|
||
|
|
const file = e.target.files?.[0]
|
||
|
|
if (!file) return
|
||
|
|
setImageFile(file)
|
||
|
|
setImagePreview(URL.createObjectURL(file))
|
||
|
|
}
|
||
|
|
|
||
|
|
const updateLevel = (idx, field, val) => {
|
||
|
|
setLevels((prev) => prev.map((l, i) => (i === idx ? { ...l, [field]: val } : l)))
|
||
|
|
}
|
||
|
|
|
||
|
|
const adjustLevelRows = (newMax) => {
|
||
|
|
const n = Number(newMax)
|
||
|
|
if (!n || n < 2) return
|
||
|
|
setLevels((prev) => {
|
||
|
|
const rows = Array.from({ length: n - 1 }, (_, i) => {
|
||
|
|
const level = i + 1
|
||
|
|
return prev.find((l) => l.level === level) || { level, required_count: '', meso_cost: '' }
|
||
|
|
})
|
||
|
|
return rows
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-2xl mx-auto space-y-6">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-lg font-semibold">{isEdit ? '심볼 편집' : '심볼 추가'}</h2>
|
||
|
|
<p className="text-sm text-gray-500 mt-0.5">심볼 정보와 레벨별 필요 개수/메소를 입력합니다</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 기본 정보 */}
|
||
|
|
<div className="rounded-2xl border border-white/5 bg-gray-900/40 p-6 space-y-5">
|
||
|
|
<div className="text-sm font-semibold text-emerald-300">기본 정보</div>
|
||
|
|
|
||
|
|
<Field label="심볼 이미지" required={!isEdit}>
|
||
|
|
<label className="flex items-center gap-4 rounded-xl border-2 border-dashed border-white/10 hover:border-emerald-500/40 hover:bg-emerald-500/5 bg-gray-950/50 p-4 transition cursor-pointer">
|
||
|
|
<div className="w-32 h-32 rounded-lg bg-gray-900 border border-white/5 flex items-center justify-center overflow-hidden shrink-0">
|
||
|
|
{imagePreview ? (
|
||
|
|
<img src={imagePreview} alt="" className="w-full h-full object-contain" style={{ imageRendering: 'pixelated' }} />
|
||
|
|
) : (
|
||
|
|
<span className="text-5xl text-gray-700">+</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<div className="text-sm font-medium text-gray-300">
|
||
|
|
{imagePreview ? '클릭하여 이미지 변경' : '클릭하여 이미지 업로드'}
|
||
|
|
</div>
|
||
|
|
<p className="text-xs text-gray-500 mt-1">PNG, JPG, GIF 등 → WebP로 자동 변환됩니다</p>
|
||
|
|
{imageFile && (
|
||
|
|
<div className="text-xs text-emerald-400 mt-2 truncate">📎 {imageFile.name}</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<input ref={fileInputRef} type="file" accept="image/*" onChange={handleFile} className="hidden" />
|
||
|
|
</label>
|
||
|
|
</Field>
|
||
|
|
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
||
|
|
<Field label="심볼 종류" required>
|
||
|
|
<Select value={type} onChange={setType} options={TYPE_OPTIONS} />
|
||
|
|
</Field>
|
||
|
|
<Field label="지역 이름" required hint="예: 소멸의 여로">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={region}
|
||
|
|
onChange={(e) => setRegion(e.target.value)}
|
||
|
|
className={inputCls}
|
||
|
|
placeholder="소멸의 여로"
|
||
|
|
/>
|
||
|
|
</Field>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
||
|
|
<Field label="만렙" required>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
value={maxLevel}
|
||
|
|
onChange={(e) => { setMaxLevel(e.target.value); adjustLevelRows(e.target.value) }}
|
||
|
|
className={inputCls}
|
||
|
|
min="2"
|
||
|
|
/>
|
||
|
|
</Field>
|
||
|
|
<Field label="기본 일퀘 획득량">
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
value={dailyDefault}
|
||
|
|
onChange={(e) => setDailyDefault(e.target.value)}
|
||
|
|
className={inputCls}
|
||
|
|
/>
|
||
|
|
</Field>
|
||
|
|
<Field label="기본 주간퀘 획득량">
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
value={weeklyDefault}
|
||
|
|
onChange={(e) => setWeeklyDefault(e.target.value)}
|
||
|
|
className={inputCls}
|
||
|
|
/>
|
||
|
|
</Field>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 레벨별 설정 */}
|
||
|
|
<div className="rounded-2xl border border-white/5 bg-gray-900/40 p-6 space-y-4">
|
||
|
|
<div className="flex items-baseline justify-between">
|
||
|
|
<div className="text-sm font-semibold text-emerald-300">레벨별 필요 개수 · 메소</div>
|
||
|
|
<div className="text-xs text-gray-500">레벨 N → N+1 업그레이드 기준 (만렙-1행)</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="overflow-x-auto">
|
||
|
|
<table className="w-full text-sm">
|
||
|
|
<thead>
|
||
|
|
<tr className="text-xs text-gray-500 uppercase border-b border-white/5">
|
||
|
|
<th className="py-2 px-3 text-left font-medium w-20">레벨</th>
|
||
|
|
<th className="py-2 px-3 text-left font-medium">필요 심볼 수</th>
|
||
|
|
<th className="py-2 px-3 text-left font-medium">메소</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className="divide-y divide-white/5">
|
||
|
|
{levels.map((l, idx) => (
|
||
|
|
<tr key={l.level}>
|
||
|
|
<td className="py-1.5 px-3 text-gray-400 tabular-nums">
|
||
|
|
Lv.<span className="text-gray-200 font-semibold">{l.level}</span>
|
||
|
|
<span className="text-gray-600 mx-1">→</span>
|
||
|
|
{l.level + 1}
|
||
|
|
</td>
|
||
|
|
<td className="py-1.5 px-3">
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
value={l.required_count}
|
||
|
|
onChange={(e) => updateLevel(idx, 'required_count', e.target.value)}
|
||
|
|
className={`${inputCls} max-w-36`}
|
||
|
|
placeholder="0"
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
<td className="py-1.5 px-3">
|
||
|
|
<div className="max-w-48">
|
||
|
|
<MesoInput
|
||
|
|
value={l.meso_cost}
|
||
|
|
onChange={(v) => updateLevel(idx, 'meso_cost', v)}
|
||
|
|
placeholder="0"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 하단 버튼 */}
|
||
|
|
<div className="flex items-center justify-between gap-3">
|
||
|
|
<div>
|
||
|
|
{isEdit && (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setConfirmDelete(true)}
|
||
|
|
className="rounded-lg border border-red-500/40 bg-red-500/10 hover:bg-red-500/20 text-red-300 px-4 py-2 text-sm font-medium transition"
|
||
|
|
>
|
||
|
|
삭제
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => navigate('..')}
|
||
|
|
className="rounded-lg border border-white/10 hover:bg-white/5 text-gray-300 px-4 py-2 text-sm transition"
|
||
|
|
>
|
||
|
|
취소
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white px-5 py-2 text-sm font-semibold shadow-lg shadow-emerald-500/20 transition"
|
||
|
|
>
|
||
|
|
{isEdit ? '저장' : '추가'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ConfirmDialog
|
||
|
|
open={confirmDelete}
|
||
|
|
onClose={() => setConfirmDelete(false)}
|
||
|
|
onConfirm={() => setConfirmDelete(false)}
|
||
|
|
title="심볼 삭제"
|
||
|
|
description="이 심볼을 삭제하시겠습니까?\n레벨별 데이터도 함께 삭제됩니다."
|
||
|
|
confirmText="삭제"
|
||
|
|
destructive
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|