Compare commits
No commits in common. "45d325dfbedee17f3c00610498cbb1f0b1e894e0" and "1dfceaf350aabe802f0d69ee01c6209742b641c7" have entirely different histories.
45d325dfbe
...
1dfceaf350
23 changed files with 319 additions and 1248 deletions
|
|
@ -1,8 +1,5 @@
|
|||
import { Router } from 'express';
|
||||
import axios from 'axios';
|
||||
import { Op } from 'sequelize';
|
||||
import { Image } from '../models/index.js';
|
||||
import { getPublicUrl } from '../lib/s3.js';
|
||||
|
||||
const router = Router();
|
||||
const NEXON_API_BASE = 'https://open.api.nexon.com';
|
||||
|
|
@ -81,68 +78,4 @@ router.get('/symbols', async (req, res) => {
|
|||
}
|
||||
});
|
||||
|
||||
// API 키로 캐릭터 목록 조회 (사용자 제공 키 사용)
|
||||
router.get('/list', async (req, res) => {
|
||||
const key = req.header('x-user-api-key');
|
||||
if (!key) return res.status(400).json({ error: 'API 키가 필요합니다' });
|
||||
|
||||
try {
|
||||
const { data } = await axios.get(`${NEXON_API_BASE}/maplestory/v1/character/list`, {
|
||||
headers: { 'x-nxopen-api-key': key },
|
||||
});
|
||||
|
||||
// 계정별 캐릭터를 하나로 합치고 월드 필터링 (스페셜/리부트 제외)
|
||||
const characters = [];
|
||||
for (const acc of data.account_list || []) {
|
||||
for (const c of acc.character_list || []) {
|
||||
const world = c.world_name || '';
|
||||
if (world.includes('스페셜') || world.includes('리부트')) continue;
|
||||
characters.push({
|
||||
ocid: c.ocid,
|
||||
character_name: c.character_name,
|
||||
world_name: world,
|
||||
job_name: c.character_class_name || c.character_class,
|
||||
character_level: c.character_level,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
characters.sort((a, b) => (b.character_level || 0) - (a.character_level || 0));
|
||||
|
||||
// 월드 아이콘 매핑 ("월드 : 월드명", "월드:월드명" 등 공백 유연하게 매칭)
|
||||
const worldNames = [...new Set(characters.map((c) => c.world_name).filter(Boolean))];
|
||||
if (worldNames.length) {
|
||||
const images = await Image.findAll({
|
||||
where: {
|
||||
[Op.or]: [
|
||||
{ name: { [Op.like]: '월드%' } },
|
||||
...worldNames.map((w) => ({ name: w })),
|
||||
],
|
||||
},
|
||||
});
|
||||
const worldIconMap = {};
|
||||
for (const img of images) {
|
||||
const m = img.name.match(/^월드\s*:\s*(.+)$/);
|
||||
const key = m ? m[1].trim() : img.name.trim();
|
||||
worldIconMap[key] = getPublicUrl(img.path);
|
||||
}
|
||||
for (const c of characters) {
|
||||
c.world_icon = worldIconMap[c.world_name] || null;
|
||||
}
|
||||
}
|
||||
|
||||
res.json({ characters });
|
||||
} catch (err) {
|
||||
const code = err.response?.data?.error?.name;
|
||||
if (['OPENAPI00001', 'OPENAPI00007', 'OPENAPI00010', 'OPENAPI00011'].includes(code)) {
|
||||
return res.status(503).json({ error: 'API 점검중입니다', code, maintenance: true });
|
||||
}
|
||||
if (err.response?.status === 401 || err.response?.status === 403 || code === 'OPENAPI00004') {
|
||||
return res.status(401).json({ error: '유효하지 않은 API 키입니다' });
|
||||
}
|
||||
console.error('캐릭터 목록 조회 오류:', err.response?.data || err.message);
|
||||
res.status(500).json({ error: '캐릭터 목록 조회 실패' });
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
export async function api(url, options = {}) {
|
||||
const headers = { 'Content-Type': 'application/json', ...options.headers }
|
||||
|
||||
// 관리자 API에는 로그인 다이얼로그에서 저장한 키를 자동으로 헤더에 포함
|
||||
// 관리자 API에는 인증 헤더 자동 추가
|
||||
if (url.startsWith('/api/admin')) {
|
||||
const adminKey = useAuthStore.getState().apiKey
|
||||
const adminKey = localStorage.getItem('maple-admin-key')
|
||||
if (adminKey) headers['x-admin-key'] = adminKey
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,109 +0,0 @@
|
|||
import { useMemo } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { api } from '../api/client'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
/**
|
||||
* 캐릭터 입력 input 아래 뜨는 드롭다운
|
||||
* - 로그인된 API 키로 /api/character/list 조회
|
||||
* - input value로 필터링
|
||||
* - 항목 클릭 시 onSelect(characterName)
|
||||
* - excludeNames: 이미 추가된 캐릭터는 목록에서 제외
|
||||
*/
|
||||
export default function CharacterSuggestDropdown({ open, filter = '', excludeNames = [], onSelect }) {
|
||||
const apiKey = useAuthStore((s) => s.apiKey)
|
||||
|
||||
const { data = [], isLoading, error } = useQuery({
|
||||
queryKey: ['user-character-list', apiKey],
|
||||
queryFn: async () => {
|
||||
const r = await api('/api/character/list', { headers: { 'x-user-api-key': apiKey } })
|
||||
return r.characters || []
|
||||
},
|
||||
enabled: open && !!apiKey,
|
||||
staleTime: 10 * 60 * 1000,
|
||||
retry: false,
|
||||
})
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const exclude = new Set(excludeNames)
|
||||
const q = filter.trim().toLowerCase()
|
||||
return data
|
||||
.filter((c) => !exclude.has(c.character_name))
|
||||
.filter((c) => !q || c.character_name.toLowerCase().includes(q))
|
||||
.slice()
|
||||
.sort((a, b) => (b.character_level || 0) - (a.character_level || 0))
|
||||
.slice(0, 50)
|
||||
}, [data, filter, excludeNames])
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open && apiKey && (
|
||||
<motion.div
|
||||
key="dropdown"
|
||||
initial={{ opacity: 0, y: -4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -4 }}
|
||||
transition={{ duration: 0.15, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="absolute top-full left-0 right-0 mt-1 z-30 rounded-lg border max-h-64 overflow-y-auto"
|
||||
style={{
|
||||
background: 'var(--popup-bg)',
|
||||
borderColor: 'var(--popup-border)',
|
||||
boxShadow: 'var(--popup-shadow)',
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="p-4 text-center text-sm" style={{ color: 'var(--text-dim)' }}>불러오는 중...</div>
|
||||
) : error ? (
|
||||
<div className="p-4 text-center text-sm" style={{ color: 'var(--danger-text)' }}>
|
||||
{error.message || '조회 실패'}
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="p-4 text-center text-sm" style={{ color: 'var(--text-dim)' }}>
|
||||
{data.length === 0 ? '캐릭터가 없습니다' : '일치하는 캐릭터가 없습니다'}
|
||||
</div>
|
||||
) : (
|
||||
<ul>
|
||||
{filtered.map((c) => (
|
||||
<li key={c.ocid}>
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(e) => { e.preventDefault(); onSelect(c.character_name) }}
|
||||
className="w-full text-left px-3 py-2.5 flex items-center gap-2 hover:bg-[var(--row-hover-bg)]"
|
||||
>
|
||||
{c.world_icon ? (
|
||||
<img
|
||||
src={c.world_icon}
|
||||
alt={c.world_name}
|
||||
title={c.world_name}
|
||||
className="w-5 h-5 shrink-0 object-contain"
|
||||
style={{ imageRendering: 'pixelated' }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="w-5 h-5 shrink-0 rounded-full text-[10px] font-bold flex items-center justify-center"
|
||||
style={{
|
||||
background: 'var(--surface-nested)',
|
||||
color: 'var(--text-dim)',
|
||||
}}
|
||||
title={c.world_name}
|
||||
>
|
||||
{c.world_name?.[0] || '?'}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-sm font-medium truncate" style={{ color: 'var(--text-strong)' }}>
|
||||
{c.character_name}
|
||||
</span>
|
||||
<span className="text-xs shrink-0" style={{ color: 'var(--text-dim)' }}>
|
||||
Lv.{c.character_level} · {c.job_name}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
|
|
@ -14,17 +14,11 @@ export default function Checkbox({ checked, onChange, disabled, className = '',
|
|||
disabled={disabled}
|
||||
tabIndex={tabIndex}
|
||||
onClick={(e) => { e.stopPropagation(); !disabled && onChange?.(!checked) }}
|
||||
className={`${sizeCls} shrink-0 rounded-md border-2 flex items-center justify-center ${
|
||||
disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'
|
||||
} ${className}`}
|
||||
style={checked ? {
|
||||
borderColor: 'var(--accent)',
|
||||
background: 'var(--accent)',
|
||||
color: 'var(--btn-primary-text)',
|
||||
} : {
|
||||
borderColor: 'var(--input-border)',
|
||||
background: 'var(--input-bg)',
|
||||
}}
|
||||
className={`${sizeCls} shrink-0 rounded-md border-2 flex items-center justify-center transition ${
|
||||
checked
|
||||
? 'border-emerald-500 bg-emerald-500 text-white'
|
||||
: 'border-white/20 bg-gray-950 hover:border-white/40'
|
||||
} ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} ${className}`}
|
||||
>
|
||||
{checked && (
|
||||
<svg className={iconSize} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -3,9 +3,7 @@ import { Outlet, Link, useLocation, useMatch } from 'react-router-dom'
|
|||
import { useQuery } from '@tanstack/react-query'
|
||||
import { api } from '../api/client'
|
||||
import Footer from './Footer'
|
||||
import LoginDialog from './LoginDialog'
|
||||
import { useThemeStore } from '../stores/theme'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
const SITE_NAME = '메이플스토리 유틸리티'
|
||||
|
||||
|
|
@ -40,23 +38,6 @@ function CurrentMenuTitle() {
|
|||
}
|
||||
}, [isAdmin, menu])
|
||||
|
||||
if (isAdmin) {
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-3"
|
||||
style={{ color: 'var(--text-muted)' }}
|
||||
>
|
||||
<span style={{ color: 'var(--text-slash)' }}>/</span>
|
||||
<span
|
||||
className="text-sm font-medium"
|
||||
style={{ color: 'var(--accent-bright)' }}
|
||||
>
|
||||
관리자
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!menu) return null
|
||||
|
||||
return (
|
||||
|
|
@ -121,100 +102,12 @@ function ThemeToggle() {
|
|||
)
|
||||
}
|
||||
|
||||
function LoginButton({ onClick }) {
|
||||
const apiKey = useAuthStore((s) => s.apiKey)
|
||||
const loggedIn = !!apiKey
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
aria-label={loggedIn ? 'API 키 관리' : 'API 키 로그인'}
|
||||
title={loggedIn ? 'API 키 관리' : 'API 키 로그인'}
|
||||
className="inline-flex items-center gap-1.5 rounded-full border px-3 h-8 text-xs font-medium hover:border-[var(--selected-border)]"
|
||||
style={{
|
||||
background: 'var(--toggle-bg)',
|
||||
borderColor: loggedIn ? 'var(--selected-border)' : 'var(--toggle-border)',
|
||||
color: loggedIn ? 'var(--accent-bright)' : 'var(--text-muted)',
|
||||
}}
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M15 7C15 5.34 13.66 4 12 4C10.34 4 9 5.34 9 7C9 7.74 9.27 8.42 9.71 8.95L4 14.66V20H9.34L15.05 14.29C15.58 14.73 16.26 15 17 15C18.66 15 20 13.66 20 12M17 8.5C16.72 8.5 16.5 8.28 16.5 8C16.5 7.72 16.72 7.5 17 7.5C17.28 7.5 17.5 7.72 17.5 8C17.5 8.28 17.28 8.5 17 8.5Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
{loggedIn ? '로그인됨' : '로그인'}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function AdminLinkButton() {
|
||||
const apiKey = useAuthStore((s) => s.apiKey)
|
||||
const isAdminRoute = !!useMatch('/admin/*')
|
||||
const { data } = useQuery({
|
||||
queryKey: ['admin', 'verify', apiKey],
|
||||
queryFn: async () => {
|
||||
await api('/api/admin/verify', { method: 'POST', body: { key: apiKey } })
|
||||
return true
|
||||
},
|
||||
enabled: !!apiKey,
|
||||
retry: false,
|
||||
staleTime: Infinity,
|
||||
})
|
||||
|
||||
if (data !== true || isAdminRoute) return null
|
||||
|
||||
return (
|
||||
<Link
|
||||
to="/admin"
|
||||
className="inline-flex items-center gap-1.5 rounded-full border px-3 h-8 text-xs font-medium hover:border-[var(--selected-border)]"
|
||||
style={{
|
||||
background: 'var(--toggle-bg)',
|
||||
borderColor: 'var(--toggle-border)',
|
||||
color: 'var(--text-muted)',
|
||||
}}
|
||||
title="관리자 페이지"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" strokeWidth="1.8" />
|
||||
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
관리자
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function HomeLinkButton() {
|
||||
const isAdminRoute = !!useMatch('/admin/*')
|
||||
if (!isAdminRoute) return null
|
||||
|
||||
return (
|
||||
<Link
|
||||
to="/"
|
||||
className="inline-flex items-center gap-1.5 rounded-full border px-3 h-8 text-xs font-medium hover:border-[var(--selected-border)]"
|
||||
style={{
|
||||
background: 'var(--toggle-bg)',
|
||||
borderColor: 'var(--toggle-border)',
|
||||
color: 'var(--text-muted)',
|
||||
}}
|
||||
title="홈으로"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M3 10.5L12 3l9 7.5V21a1 1 0 01-1 1h-5v-7h-6v7H4a1 1 0 01-1-1V10.5z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
홈으로
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Layout() {
|
||||
const location = useLocation()
|
||||
const [fullscreen, setFullscreen] = useState(false)
|
||||
const [loginOpen, setLoginOpen] = useState(false)
|
||||
const isAdmin = !!useMatch('/admin/*')
|
||||
const homeTo = isAdmin ? '/admin' : '/'
|
||||
const theme = useThemeStore((s) => s.theme)
|
||||
|
||||
const isHome = location.pathname === '/'
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement
|
||||
if (theme === 'light') root.setAttribute('data-theme', 'light')
|
||||
|
|
@ -245,21 +138,15 @@ export default function Layout() {
|
|||
</Link>
|
||||
<CurrentMenuTitle />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<LoginButton onClick={() => setLoginOpen(true)} />
|
||||
<AdminLinkButton />
|
||||
<HomeLinkButton />
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</header>
|
||||
<LoginDialog open={loginOpen} onClose={() => setLoginOpen(false)} />
|
||||
<main className={`flex-1 mx-auto w-full max-w-[1400px] ${
|
||||
fullscreen ? 'min-h-0 px-6 py-4' : 'px-6 pt-4 pb-10'
|
||||
}`}>
|
||||
<Outlet />
|
||||
</main>
|
||||
{isHome && <Footer />}
|
||||
{!fullscreen && <Footer />}
|
||||
</div>
|
||||
</LayoutContext.Provider>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,170 +0,0 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { api } from '../api/client'
|
||||
|
||||
export default function LoginDialog({ open, onClose }) {
|
||||
const apiKey = useAuthStore((s) => s.apiKey)
|
||||
const setApiKey = useAuthStore((s) => s.setApiKey)
|
||||
const clearApiKey = useAuthStore((s) => s.clearApiKey)
|
||||
|
||||
const [input, setInput] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setInput(apiKey || '')
|
||||
setError('')
|
||||
setBusy(false)
|
||||
}
|
||||
}, [open, apiKey])
|
||||
|
||||
const handleSave = async () => {
|
||||
const key = input.trim()
|
||||
if (!key) {
|
||||
setError('API 키를 입력해주세요')
|
||||
return
|
||||
}
|
||||
setError('')
|
||||
setBusy(true)
|
||||
try {
|
||||
await api('/api/character/list', { headers: { 'x-user-api-key': key } })
|
||||
setApiKey(key)
|
||||
onClose()
|
||||
} catch (err) {
|
||||
setError(err.message || '키 검증 실패')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
clearApiKey()
|
||||
setInput('')
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
key="backdrop"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.18 }}
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md"
|
||||
style={{ background: 'var(--dialog-backdrop)' }}
|
||||
>
|
||||
<motion.div
|
||||
key="dialog"
|
||||
initial={{ opacity: 0, scale: 0.94, y: 8 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.96, y: 4 }}
|
||||
transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="w-full max-w-md rounded-2xl border shadow-2xl ring-1"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(to bottom, var(--dialog-bg-from), var(--dialog-bg-to))',
|
||||
borderColor: 'var(--dialog-border)',
|
||||
'--tw-ring-color': 'var(--ring-info)',
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="px-7 pt-7 pb-3 flex items-start gap-4">
|
||||
<div
|
||||
className="shrink-0 w-11 h-11 rounded-xl border flex items-center justify-center"
|
||||
style={{
|
||||
background: 'var(--icon-info-bg)',
|
||||
borderColor: 'var(--icon-info-border)',
|
||||
color: 'var(--accent-bright)',
|
||||
}}
|
||||
>
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M15 7C15 5.34 13.66 4 12 4C10.34 4 9 5.34 9 7C9 7.74 9.27 8.42 9.71 8.95L4 14.66V20H9.34L15.05 14.29C15.58 14.73 16.26 15 17 15C18.66 15 20 13.66 20 12M17 8.5C16.72 8.5 16.5 8.28 16.5 8C16.5 7.72 16.72 7.5 17 7.5C17.28 7.5 17.5 7.72 17.5 8C17.5 8.28 17.28 8.5 17 8.5Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold pt-1" style={{ color: 'var(--text-strong)' }}>API 키 로그인</h3>
|
||||
<p className="text-sm mt-1" style={{ color: 'var(--text-muted)' }}>
|
||||
NEXON Open API 키를 입력하면 계정의 캐릭터 목록을 불러올 수 있습니다
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="shrink-0 w-8 h-8 -mt-1 -mr-1 rounded-lg hover:bg-[var(--row-hover-bg)] flex items-center justify-center text-xl leading-none"
|
||||
style={{ color: 'var(--text-dim)' }}
|
||||
aria-label="닫기"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div className="px-7 py-4 space-y-2">
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => { setInput(e.target.value); if (error) setError('') }}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter' && !busy) handleSave() }}
|
||||
placeholder="live_xxxxxxxxxxxxxxxxxx..."
|
||||
className="w-full rounded-lg border-2 px-3 py-2.5 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)] font-mono"
|
||||
style={{
|
||||
background: 'var(--input-bg)',
|
||||
borderColor: 'var(--input-border)',
|
||||
color: 'var(--text-strong)',
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-xs" style={{ color: 'var(--danger-text)' }}>{error}</p>
|
||||
)}
|
||||
<p className="text-xs leading-relaxed" style={{ color: 'var(--text-dim)' }}>
|
||||
키는 브라우저에만 저장되며 서버로 전송되지 않습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="flex gap-2 px-7 py-4 border-t"
|
||||
style={{ borderColor: 'var(--panel-border)' }}
|
||||
>
|
||||
{apiKey ? (
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex-1 rounded-lg border px-4 h-11 text-sm font-medium hover:bg-[var(--danger-bg-hover)] hover:text-[var(--danger-text)]"
|
||||
style={{
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}}
|
||||
>
|
||||
로그아웃
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 rounded-lg border px-4 h-11 text-sm font-medium hover:bg-[var(--btn-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-bg)',
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}}
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={busy}
|
||||
className="flex-1 rounded-lg px-4 h-11 text-sm font-semibold disabled:opacity-50 hover:bg-[var(--btn-primary-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-primary-bg)',
|
||||
color: 'var(--btn-primary-text)',
|
||||
boxShadow: 'var(--btn-primary-shadow)',
|
||||
}}
|
||||
>
|
||||
{busy ? '확인 중...' : apiKey ? '업데이트' : '저장'}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,16 +1,8 @@
|
|||
export default function AdminBoss() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-medium">보스 수익 계산기 관리</h2>
|
||||
<div
|
||||
className="rounded-lg border p-8 text-center"
|
||||
style={{
|
||||
background: 'var(--panel-bg)',
|
||||
borderColor: 'var(--panel-border)',
|
||||
boxShadow: 'var(--panel-shadow)',
|
||||
color: 'var(--text-dim)',
|
||||
}}
|
||||
>
|
||||
<h2 className="text-lg font-semibold">보스 수익 계산기 관리</h2>
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-900/50 p-8 text-center text-gray-500">
|
||||
준비 중
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,29 +17,22 @@ export default function AdminFeaturePage() {
|
|||
|
||||
if (!Component) {
|
||||
return (
|
||||
<div className="space-y-4 max-w-5xl mx-auto pt-6">
|
||||
<div className="space-y-4">
|
||||
{menu && (
|
||||
<div>
|
||||
<h2 className="text-lg font-medium">{menu.title}</h2>
|
||||
<p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>{menu.description}</p>
|
||||
<h2 className="text-lg font-semibold">{menu.title}</h2>
|
||||
<p className="text-sm text-gray-500 mt-0.5">{menu.description}</p>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="rounded-2xl border border-dashed p-12 text-center"
|
||||
style={{
|
||||
borderColor: 'var(--dashed-border)',
|
||||
background: 'var(--skeleton-bg)',
|
||||
}}
|
||||
>
|
||||
<div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] p-12 text-center">
|
||||
<div className="text-4xl mb-3 opacity-30">🛠️</div>
|
||||
<p style={{ color: 'var(--text-muted)' }}>이 기능에는 관리 페이지가 없습니다</p>
|
||||
<p className="text-xs mt-2 font-mono" style={{ color: 'var(--text-dim)' }}>
|
||||
<p className="text-gray-400">이 기능에는 관리 페이지가 없습니다</p>
|
||||
<p className="text-xs text-gray-600 mt-2 font-mono">
|
||||
features/{slug}/{slug.split('-').map((s) => s[0].toUpperCase() + s.slice(1)).join('')}Admin.jsx
|
||||
</p>
|
||||
<Link
|
||||
to={`/admin/menus/${menu?.id || ''}`}
|
||||
className="inline-block mt-4 text-xs hover:text-[var(--accent-hover-text)]"
|
||||
style={{ color: 'var(--accent)' }}
|
||||
className="inline-block mt-4 text-xs text-emerald-400 hover:text-emerald-300 transition"
|
||||
>
|
||||
메뉴 정보 편집 →
|
||||
</Link>
|
||||
|
|
@ -51,10 +44,7 @@ export default function AdminFeaturePage() {
|
|||
return (
|
||||
<Suspense fallback={
|
||||
<div className="flex items-center justify-center pt-20">
|
||||
<div
|
||||
className="w-6 h-6 border-2 border-t-transparent rounded-full animate-spin"
|
||||
style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }}
|
||||
/>
|
||||
<div className="w-6 h-6 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
}>
|
||||
<Component />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { Link, useNavigate, useOutletContext } from 'react-router-dom'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { api } from '../../api/client'
|
||||
|
||||
|
|
@ -72,6 +72,7 @@ function AddCard({ to, icon, label }) {
|
|||
}
|
||||
|
||||
export default function AdminHome() {
|
||||
const { handleLogout } = useOutletContext() || {}
|
||||
const { data: menus = [], isLoading: loading } = useQuery({
|
||||
queryKey: ['admin', 'menus'],
|
||||
queryFn: () => api('/api/admin/menus').catch(() => []),
|
||||
|
|
@ -156,6 +157,18 @@ export default function AdminHome() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* 로그아웃 */}
|
||||
{handleLogout && (
|
||||
<div className="pt-4 text-center">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-xs transition-colors hover:text-red-500"
|
||||
style={{ color: 'var(--text-dim)' }}
|
||||
>
|
||||
관리자 로그아웃
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,37 +2,16 @@ import { useState, useEffect } from 'react'
|
|||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { api } from '../../api/client'
|
||||
import ConfirmDialog from '../../components/ConfirmDialog'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
|
||||
/* ── 공용 모달 ── */
|
||||
function Modal({ open, onClose, title, children, maxWidth = 'max-w-md' }) {
|
||||
if (!open) return null
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
||||
style={{ background: 'var(--dialog-backdrop)' }}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className={`w-full ${maxWidth} rounded-2xl border shadow-2xl max-h-[90vh] flex flex-col`}
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(to bottom, var(--dialog-bg-from), var(--dialog-bg-to))',
|
||||
borderColor: 'var(--dialog-border)',
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div
|
||||
className="px-6 py-4 border-b flex items-center justify-between shrink-0"
|
||||
style={{ borderColor: 'var(--panel-border)' }}
|
||||
>
|
||||
<h3 className="font-semibold" style={{ color: 'var(--text-strong)' }}>{title}</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-xl leading-none hover:bg-[var(--row-hover-bg)] w-7 h-7 rounded flex items-center justify-center"
|
||||
style={{ color: 'var(--text-dim)' }}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm" onClick={onClose}>
|
||||
<div className={`w-full ${maxWidth} rounded-2xl bg-gray-900 border border-white/10 shadow-2xl max-h-[90vh] flex flex-col`} onClick={(e) => e.stopPropagation()}>
|
||||
<div className="px-6 py-4 border-b border-white/5 flex items-center justify-between shrink-0">
|
||||
<h3 className="font-semibold">{title}</h3>
|
||||
<button onClick={onClose} className="text-gray-500 hover:text-white transition text-xl leading-none">×</button>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
|
|
@ -42,7 +21,7 @@ function Modal({ open, onClose, title, children, maxWidth = 'max-w-md' }) {
|
|||
|
||||
/* ── 업로드 모달 (다중 지원) ── */
|
||||
function UploadModal({ open, onClose, onUpload, uploading, existingNames }) {
|
||||
const [items, setItems] = useState([])
|
||||
const [items, setItems] = useState([]) // { file, name, preview, id }
|
||||
const [dragOver, setDragOver] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -102,18 +81,13 @@ function UploadModal({ open, onClose, onUpload, uploading, existingNames }) {
|
|||
setDragOver(false)
|
||||
addFiles(e.dataTransfer.files)
|
||||
}}
|
||||
className="relative rounded-xl border-2 border-dashed cursor-pointer min-h-[120px] flex flex-col items-center justify-center"
|
||||
style={dragOver ? {
|
||||
borderColor: 'var(--selected-border)',
|
||||
background: 'var(--selected-bg)',
|
||||
} : {
|
||||
borderColor: 'var(--dashed-border)',
|
||||
background: 'var(--skeleton-bg)',
|
||||
}}
|
||||
className={`relative rounded-xl border-2 border-dashed transition cursor-pointer min-h-[120px] flex flex-col items-center justify-center ${
|
||||
dragOver ? 'border-emerald-500 bg-emerald-500/10' : 'border-white/10 hover:border-white/20 bg-white/[0.02]'
|
||||
}`}
|
||||
>
|
||||
<div className="text-2xl mb-1 opacity-50">📥</div>
|
||||
<p className="text-sm" style={{ color: 'var(--text-muted)' }}>클릭하거나 이미지를 끌어다 놓으세요</p>
|
||||
<p className="text-xs mt-0.5" style={{ color: 'var(--text-dim)' }}>여러 개 선택 가능</p>
|
||||
<p className="text-sm text-gray-400">클릭하거나 이미지를 끌어다 놓으세요</p>
|
||||
<p className="text-xs text-gray-600 mt-0.5">여러 개 선택 가능</p>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
|
|
@ -137,22 +111,14 @@ function UploadModal({ open, onClose, onUpload, uploading, existingNames }) {
|
|||
: null
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-start gap-3 rounded-lg border p-2"
|
||||
style={{
|
||||
background: 'var(--surface-3)',
|
||||
borderColor: errorMsg ? 'var(--icon-danger-border)' : 'var(--panel-border)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-12 h-12 rounded flex items-center justify-center overflow-hidden shrink-0"
|
||||
style={{ background: 'var(--surface-nested)' }}
|
||||
>
|
||||
<div key={item.id} className={`flex items-start gap-3 rounded-lg border bg-gray-950/50 p-2 ${
|
||||
errorMsg ? 'border-red-500/40' : 'border-white/5'
|
||||
}`}>
|
||||
<div className="w-12 h-12 rounded bg-gray-900 flex items-center justify-center overflow-hidden shrink-0">
|
||||
{item.preview ? (
|
||||
<img src={item.preview} alt="" className="w-full h-full object-contain" />
|
||||
) : (
|
||||
<div className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin" style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }} />
|
||||
<div className="w-4 h-4 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 space-y-0.5">
|
||||
|
|
@ -160,22 +126,16 @@ function UploadModal({ open, onClose, onUpload, uploading, existingNames }) {
|
|||
type="text"
|
||||
value={item.name}
|
||||
onChange={(e) => updateName(item.id, e.target.value)}
|
||||
className="w-full rounded border px-2 py-1.5 text-sm outline-none"
|
||||
style={{
|
||||
background: 'var(--input-bg)',
|
||||
borderColor: errorMsg ? 'var(--icon-danger-border)' : 'var(--input-border)',
|
||||
color: 'var(--text-strong)',
|
||||
}}
|
||||
className={`w-full rounded border bg-gray-900 px-2 py-1.5 text-sm outline-none transition ${
|
||||
errorMsg ? 'border-red-500/40 focus:border-red-500/60' : 'border-white/10 focus:border-emerald-500/50'
|
||||
}`}
|
||||
/>
|
||||
{errorMsg && (
|
||||
<div className="text-[11px] px-0.5" style={{ color: 'var(--danger-text)' }}>{errorMsg}</div>
|
||||
)}
|
||||
{errorMsg && <div className="text-[11px] text-red-400 px-0.5">{errorMsg}</div>}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeItem(item.id)}
|
||||
className="w-7 h-7 rounded shrink-0 hover:bg-[var(--danger-bg-hover)] hover:text-[var(--danger-text)]"
|
||||
style={{ color: 'var(--text-dim)' }}
|
||||
className="w-7 h-7 rounded text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition shrink-0"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
|
|
@ -187,31 +147,14 @@ function UploadModal({ open, onClose, onUpload, uploading, existingNames }) {
|
|||
</div>
|
||||
|
||||
{/* 버튼 */}
|
||||
<div
|
||||
className="flex gap-2 px-6 py-4 border-t shrink-0"
|
||||
style={{ borderColor: 'var(--panel-border)' }}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 rounded-lg border px-4 py-2 text-sm hover:bg-[var(--btn-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-bg)',
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}}
|
||||
>
|
||||
<div className="flex gap-2 px-6 py-4 border-t border-white/5 shrink-0">
|
||||
<button type="button" onClick={onClose} className="flex-1 rounded-lg border border-white/10 px-4 py-2 text-sm hover:bg-white/5 transition">
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!canSubmit || uploading}
|
||||
className="flex-1 rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[var(--btn-primary-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-primary-bg)',
|
||||
color: 'var(--btn-primary-text)',
|
||||
boxShadow: 'var(--btn-primary-shadow)',
|
||||
}}
|
||||
className="flex-1 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-medium hover:bg-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed transition"
|
||||
>
|
||||
{uploading ? '업로드 중...' : `${items.length > 0 ? `${items.length}개 ` : ''}업로드`}
|
||||
</button>
|
||||
|
|
@ -226,32 +169,22 @@ function ImageCard({ image, selected, selectMode, onToggle, onCopyUrl, copied })
|
|||
return (
|
||||
<div
|
||||
onClick={() => selectMode && onToggle(image.id)}
|
||||
className={`group relative rounded-xl border overflow-hidden ${selectMode ? 'cursor-pointer' : ''}`}
|
||||
style={{
|
||||
borderColor: selected ? 'var(--selected-border)' : 'var(--panel-border)',
|
||||
background: selected ? 'var(--selected-bg)' : 'var(--panel-bg)',
|
||||
boxShadow: selected ? '0 0 0 2px var(--ring-info)' : 'var(--panel-shadow)',
|
||||
}}
|
||||
className={`group relative rounded-xl border overflow-hidden transition ${
|
||||
selected
|
||||
? 'border-emerald-500/60 bg-emerald-500/5 ring-2 ring-emerald-500/30'
|
||||
: 'border-white/5 bg-gray-900/40 hover:border-white/15'
|
||||
} ${selectMode ? 'cursor-pointer' : ''}`}
|
||||
>
|
||||
{/* 체크박스 (선택모드) */}
|
||||
{selectMode && (
|
||||
<div
|
||||
className="absolute top-2 left-2 z-10 w-5 h-5 rounded border-2 flex items-center justify-center"
|
||||
style={selected ? {
|
||||
borderColor: 'var(--accent)',
|
||||
background: 'var(--accent)',
|
||||
} : {
|
||||
borderColor: 'var(--panel-border)',
|
||||
background: 'var(--surface-3)',
|
||||
}}
|
||||
>
|
||||
{selected && <span className="text-xs" style={{ color: 'var(--btn-primary-text)' }}>✓</span>}
|
||||
<div className={`absolute top-2 left-2 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition ${
|
||||
selected ? 'border-emerald-500 bg-emerald-500' : 'border-white/30 bg-gray-950/80'
|
||||
}`}>
|
||||
{selected && <span className="text-xs text-white">✓</span>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="aspect-square flex items-center justify-center p-4 relative"
|
||||
style={{ backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))' }}
|
||||
>
|
||||
<div className="aspect-square bg-gradient-to-br from-gray-900 to-gray-950 flex items-center justify-center p-4 relative">
|
||||
<img
|
||||
src={image.url}
|
||||
alt={image.name}
|
||||
|
|
@ -263,12 +196,7 @@ function ImageCard({ image, selected, selectMode, onToggle, onCopyUrl, copied })
|
|||
<div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onCopyUrl(image) }}
|
||||
className="w-7 h-7 rounded-md backdrop-blur-sm border text-xs flex items-center justify-center hover:bg-[var(--selected-bg)] hover:border-[var(--selected-border)]"
|
||||
style={{
|
||||
background: 'var(--btn-bg)',
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}}
|
||||
className="w-7 h-7 rounded-md bg-gray-950/80 backdrop-blur-sm border border-white/10 hover:bg-emerald-500/20 hover:border-emerald-500/40 text-xs flex items-center justify-center transition"
|
||||
title="URL 복사"
|
||||
>
|
||||
{copied ? '✓' : '⧉'}
|
||||
|
|
@ -277,10 +205,7 @@ function ImageCard({ image, selected, selectMode, onToggle, onCopyUrl, copied })
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="px-3 py-2 border-t"
|
||||
style={{ borderColor: 'var(--panel-border)' }}
|
||||
>
|
||||
<div className="px-3 py-2 border-t border-white/5">
|
||||
<div className="text-sm font-medium truncate">{image.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -298,61 +223,50 @@ function Pagination({ page, totalPages, onChange }) {
|
|||
if (end - start + 1 < maxButtons) start = Math.max(1, end - maxButtons + 1)
|
||||
for (let i = start; i <= end; i++) pages.push(i)
|
||||
|
||||
const baseBtn = "min-w-9 h-9 px-3 rounded-lg text-sm flex items-center justify-center border hover:bg-[var(--btn-bg-hover)]"
|
||||
const btnStyle = {
|
||||
background: 'var(--btn-bg)',
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}
|
||||
const btn = "min-w-9 h-9 px-3 rounded-lg text-sm transition flex items-center justify-center"
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-1 pt-2">
|
||||
<button
|
||||
onClick={() => onChange(page - 1)}
|
||||
disabled={page === 1}
|
||||
className={`${baseBtn} disabled:opacity-30 disabled:cursor-not-allowed`}
|
||||
style={btnStyle}
|
||||
className={`${btn} border border-white/10 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed`}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
|
||||
{start > 1 && (
|
||||
<>
|
||||
<button onClick={() => onChange(1)} className={baseBtn} style={btnStyle}>1</button>
|
||||
{start > 2 && <span className="px-1" style={{ color: 'var(--text-dim)' }}>…</span>}
|
||||
<button onClick={() => onChange(1)} className={`${btn} border border-white/10 hover:bg-white/5`}>1</button>
|
||||
{start > 2 && <span className="text-gray-600 px-1">…</span>}
|
||||
</>
|
||||
)}
|
||||
|
||||
{pages.map((p) => {
|
||||
const active = p === page
|
||||
return (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => onChange(p)}
|
||||
className={`${baseBtn} ${active ? 'font-medium' : ''}`}
|
||||
style={active ? {
|
||||
background: 'var(--selected-bg)',
|
||||
borderColor: 'var(--selected-border)',
|
||||
color: 'var(--accent-bright)',
|
||||
} : btnStyle}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
{pages.map((p) => (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => onChange(p)}
|
||||
className={`${btn} ${
|
||||
p === page
|
||||
? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-medium'
|
||||
: 'border border-white/10 hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
))}
|
||||
|
||||
{end < totalPages && (
|
||||
<>
|
||||
{end < totalPages - 1 && <span className="px-1" style={{ color: 'var(--text-dim)' }}>…</span>}
|
||||
<button onClick={() => onChange(totalPages)} className={baseBtn} style={btnStyle}>{totalPages}</button>
|
||||
{end < totalPages - 1 && <span className="text-gray-600 px-1">…</span>}
|
||||
<button onClick={() => onChange(totalPages)} className={`${btn} border border-white/10 hover:bg-white/5`}>{totalPages}</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => onChange(page + 1)}
|
||||
disabled={page === totalPages}
|
||||
className={`${baseBtn} disabled:opacity-30 disabled:cursor-not-allowed`}
|
||||
style={btnStyle}
|
||||
className={`${btn} border border-white/10 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed`}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
|
|
@ -371,9 +285,10 @@ export default function AdminImages() {
|
|||
const [uploadOpen, setUploadOpen] = useState(false)
|
||||
const [selectMode, setSelectMode] = useState(false)
|
||||
const [selectedIds, setSelectedIds] = useState(new Set())
|
||||
const [confirmDelete, setConfirmDelete] = useState(null)
|
||||
const [confirmDelete, setConfirmDelete] = useState(null) // {ids, names}
|
||||
const [copiedId, setCopiedId] = useState(null)
|
||||
|
||||
// 검색어 디바운싱
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => {
|
||||
setDebouncedSearch(search)
|
||||
|
|
@ -382,6 +297,7 @@ export default function AdminImages() {
|
|||
return () => clearTimeout(t)
|
||||
}, [search])
|
||||
|
||||
// 이미지 목록 (페이징 + 검색)
|
||||
const { data: imagesData, isLoading } = useQuery({
|
||||
queryKey: ['admin', 'images', { page, search: debouncedSearch }],
|
||||
queryFn: async () => {
|
||||
|
|
@ -398,6 +314,7 @@ export default function AdminImages() {
|
|||
const images = imagesData?.items || []
|
||||
const totalPages = imagesData?.total_pages || 1
|
||||
|
||||
// 전체 이름 (중복 체크용)
|
||||
const { data: allNamesArray = [] } = useQuery({
|
||||
queryKey: ['admin', 'images', 'names'],
|
||||
queryFn: () => api('/api/admin/images/names'),
|
||||
|
|
@ -408,6 +325,7 @@ export default function AdminImages() {
|
|||
queryClient.invalidateQueries({ queryKey: ['admin', 'images'] })
|
||||
}
|
||||
|
||||
// 업로드
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: async (items) => {
|
||||
const formData = new FormData()
|
||||
|
|
@ -415,7 +333,7 @@ export default function AdminImages() {
|
|||
formData.append('files', it.file)
|
||||
formData.append('names', it.name.trim())
|
||||
})
|
||||
const adminKey = useAuthStore.getState().apiKey
|
||||
const adminKey = localStorage.getItem('maple-admin-key')
|
||||
const res = await fetch('/api/admin/images', {
|
||||
method: 'POST',
|
||||
headers: { 'x-admin-key': adminKey },
|
||||
|
|
@ -464,6 +382,7 @@ export default function AdminImages() {
|
|||
})
|
||||
}
|
||||
|
||||
// 삭제
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (ids) => api('/api/admin/images/delete', { method: 'POST', body: { ids } }),
|
||||
onSuccess: () => {
|
||||
|
|
@ -482,47 +401,32 @@ export default function AdminImages() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-5xl mx-auto pt-6">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-end justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<h2 className="text-lg font-medium">이미지 관리</h2>
|
||||
<p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>공용 이미지를 업로드하고 관리합니다</p>
|
||||
<h2 className="text-lg font-semibold">이미지 관리</h2>
|
||||
<p className="text-sm text-gray-500 mt-0.5">공용 이미지를 업로드하고 관리합니다</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{selectMode ? (
|
||||
<>
|
||||
<span className="text-sm" style={{ color: 'var(--text-muted)' }}>{selectedIds.size}개 선택</span>
|
||||
<span className="text-sm text-gray-400">{selectedIds.size}개 선택</span>
|
||||
<button
|
||||
onClick={selectAll}
|
||||
className="rounded-lg border px-3 py-2 text-sm hover:bg-[var(--btn-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-bg)',
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}}
|
||||
className="rounded-lg border border-white/10 px-3 py-2 text-sm hover:bg-white/5 transition"
|
||||
>
|
||||
{selectedIds.size === images.length && images.length > 0 ? '전체 해제' : '전체 선택'}
|
||||
</button>
|
||||
<button
|
||||
onClick={requestDelete}
|
||||
disabled={selectedIds.size === 0}
|
||||
className="rounded-lg px-3 py-2 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[var(--btn-danger-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-danger-bg)',
|
||||
color: 'var(--btn-primary-text)',
|
||||
boxShadow: 'var(--btn-danger-shadow)',
|
||||
}}
|
||||
className="rounded-lg bg-red-600 hover:bg-red-500 px-3 py-2 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed transition shadow-lg shadow-red-500/20"
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleSelectMode}
|
||||
className="rounded-lg border px-3 py-2 text-sm hover:bg-[var(--btn-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-bg)',
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}}
|
||||
className="rounded-lg border border-white/10 px-3 py-2 text-sm hover:bg-white/5 transition"
|
||||
>
|
||||
완료
|
||||
</button>
|
||||
|
|
@ -532,23 +436,14 @@ export default function AdminImages() {
|
|||
{images.length > 0 && (
|
||||
<button
|
||||
onClick={toggleSelectMode}
|
||||
className="rounded-lg border px-3 py-2 text-sm hover:bg-[var(--danger-bg-hover)]"
|
||||
style={{
|
||||
borderColor: 'var(--icon-danger-border)',
|
||||
color: 'var(--danger-text)',
|
||||
}}
|
||||
className="rounded-lg border border-red-500/30 text-red-400 hover:bg-red-500/10 hover:border-red-500/50 px-3 py-2 text-sm transition"
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setUploadOpen(true)}
|
||||
className="flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium hover:bg-[var(--btn-primary-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-primary-bg)',
|
||||
color: 'var(--btn-primary-text)',
|
||||
boxShadow: 'var(--btn-primary-shadow)',
|
||||
}}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm font-medium transition shadow-lg shadow-emerald-500/20"
|
||||
>
|
||||
<span className="text-base leading-none">+</span>
|
||||
이미지 업로드
|
||||
|
|
@ -566,14 +461,9 @@ export default function AdminImages() {
|
|||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="이미지 이름으로 검색..."
|
||||
className="w-full rounded-lg border pl-10 pr-4 py-2.5 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]"
|
||||
style={{
|
||||
background: 'var(--input-bg)',
|
||||
borderColor: 'var(--input-border)',
|
||||
color: 'var(--text-strong)',
|
||||
}}
|
||||
className="w-full rounded-lg border border-white/10 bg-gray-900/50 pl-10 pr-4 py-2.5 text-sm outline-none focus:border-emerald-500/50 transition"
|
||||
/>
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--input-icon)' }}>🔍</span>
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">🔍</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -581,30 +471,19 @@ export default function AdminImages() {
|
|||
{isLoading ? (
|
||||
<div className="grid gap-3 grid-cols-3 sm:grid-cols-4 lg:grid-cols-6">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="aspect-square rounded-xl animate-pulse"
|
||||
style={{ background: 'var(--skeleton-bg)' }}
|
||||
/>
|
||||
<div key={i} className="aspect-square rounded-xl bg-white/[0.02] animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : images.length === 0 ? (
|
||||
<div
|
||||
className="rounded-2xl border border-dashed p-16 text-center"
|
||||
style={{
|
||||
borderColor: 'var(--dashed-border)',
|
||||
background: 'var(--skeleton-bg)',
|
||||
}}
|
||||
>
|
||||
<div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] p-16 text-center">
|
||||
<div className="text-5xl mb-3 opacity-30">🖼️</div>
|
||||
<p className="mb-4" style={{ color: 'var(--text-muted)' }}>
|
||||
<p className="text-gray-400 mb-4">
|
||||
{debouncedSearch ? '검색 결과가 없습니다' : '업로드된 이미지가 없습니다'}
|
||||
</p>
|
||||
{!debouncedSearch && (
|
||||
<button
|
||||
onClick={() => setUploadOpen(true)}
|
||||
className="text-sm hover:text-[var(--accent-hover-text)]"
|
||||
style={{ color: 'var(--accent)' }}
|
||||
className="text-sm text-emerald-400 hover:text-emerald-300 transition"
|
||||
>
|
||||
첫 이미지 업로드하기 →
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,23 @@
|
|||
import { Outlet, Navigate } from 'react-router-dom'
|
||||
import { useSearchParams, Outlet, Navigate } from 'react-router-dom'
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { api } from '../../api/client'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
|
||||
export default function AdminLayout() {
|
||||
const queryClient = useQueryClient()
|
||||
const apiKey = useAuthStore((s) => s.apiKey)
|
||||
const clearApiKey = useAuthStore((s) => s.clearApiKey)
|
||||
const [searchParams] = useSearchParams()
|
||||
|
||||
const keyFromUrl = searchParams.get('key')
|
||||
const key = keyFromUrl || localStorage.getItem('maple-admin-key')
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['admin', 'verify', apiKey],
|
||||
queryKey: ['admin', 'verify', key],
|
||||
queryFn: async () => {
|
||||
await api('/api/admin/verify', { method: 'POST', body: { key: apiKey } })
|
||||
if (!key) throw new Error('no key')
|
||||
await api('/api/admin/verify', { method: 'POST', body: { key } })
|
||||
localStorage.setItem('maple-admin-key', key)
|
||||
return true
|
||||
},
|
||||
enabled: !!apiKey,
|
||||
enabled: !!key,
|
||||
retry: false,
|
||||
staleTime: Infinity,
|
||||
})
|
||||
|
|
@ -22,20 +25,23 @@ export default function AdminLayout() {
|
|||
const verified = data === true
|
||||
|
||||
const handleLogout = () => {
|
||||
clearApiKey()
|
||||
localStorage.removeItem('maple-admin-key')
|
||||
queryClient.removeQueries({ queryKey: ['admin'] })
|
||||
window.location.href = '/'
|
||||
}
|
||||
|
||||
if (apiKey && isLoading) {
|
||||
if (key && isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center pt-20">
|
||||
<div className="w-6 h-6 border-2 border-t-transparent rounded-full animate-spin" style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }} />
|
||||
<div className="w-6 h-6 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!verified) return <Navigate to="/" replace />
|
||||
if (!verified) {
|
||||
if (key) localStorage.removeItem('maple-admin-key')
|
||||
return <Navigate to="/" replace />
|
||||
}
|
||||
|
||||
return <Outlet context={{ handleLogout }} />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,23 +9,18 @@ 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" style={{ color: 'var(--text-emphasis)' }}>
|
||||
{label} {required && <span style={{ color: 'var(--danger-text)' }}>*</span>}
|
||||
<label className="text-sm font-medium text-gray-300">
|
||||
{label} {required && <span className="text-red-400">*</span>}
|
||||
</label>
|
||||
{hint && <span className="text-xs" style={{ color: 'var(--text-dim)' }}>{hint}</span>}
|
||||
{hint && <span className="text-xs text-gray-500">{hint}</span>}
|
||||
</div>
|
||||
{children}
|
||||
{error && <div className="text-[11px]" style={{ color: 'var(--danger-text)' }}>{error}</div>}
|
||||
{error && <div className="text-[11px] text-red-400">{error}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const inputCls = 'w-full rounded-lg border px-3 py-2 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]'
|
||||
const inputStyle = {
|
||||
background: 'var(--input-bg)',
|
||||
borderColor: 'var(--input-border)',
|
||||
color: 'var(--text-strong)',
|
||||
}
|
||||
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'
|
||||
|
||||
export default function AdminMenuForm() {
|
||||
const navigate = useNavigate()
|
||||
|
|
@ -38,18 +33,20 @@ export default function AdminMenuForm() {
|
|||
const [form, setForm] = useState({
|
||||
title: '',
|
||||
description: '',
|
||||
slug: '',
|
||||
slug: '', // 사용자 입력 (앞 / 제외)
|
||||
image_id: null,
|
||||
image: null,
|
||||
image: null, // 미리보기용 캐시
|
||||
})
|
||||
const [errors, setErrors] = useState({})
|
||||
|
||||
// 편집 모드일 때 기존 데이터 로드
|
||||
const { data: menuData } = useQuery({
|
||||
queryKey: ['admin', 'menus', id],
|
||||
queryFn: () => api(`/api/admin/menus/${id}`),
|
||||
enabled: isEdit,
|
||||
})
|
||||
|
||||
// id 변경 또는 데이터 로드 시 폼 동기화
|
||||
useEffect(() => {
|
||||
if (!isEdit) {
|
||||
setForm({ title: '', description: '', slug: '', image_id: null, image: null })
|
||||
|
|
@ -68,6 +65,7 @@ export default function AdminMenuForm() {
|
|||
|
||||
const update = (patch) => setForm((prev) => ({ ...prev, ...patch }))
|
||||
|
||||
// slug에서 / 자동 제거 (붙여넣기 등 대비)
|
||||
const handleSlugChange = (value) => {
|
||||
update({ slug: value.replace(/^\/+/, '') })
|
||||
}
|
||||
|
|
@ -121,55 +119,24 @@ export default function AdminMenuForm() {
|
|||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl mx-auto pt-6">
|
||||
<div className="space-y-6 max-w-2xl mx-auto">
|
||||
<div>
|
||||
<h2 className="text-lg font-medium">{isEdit ? '메뉴 항목 편집' : '메뉴 항목 추가'}</h2>
|
||||
<p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>
|
||||
홈 화면에 표시되는 카드의 정보를 설정합니다
|
||||
</p>
|
||||
<h2 className="text-lg font-semibold">{isEdit ? '메뉴 항목 편집' : '메뉴 항목 추가'}</h2>
|
||||
<p className="text-sm text-gray-500 mt-0.5">홈 화면에 표시되는 카드의 정보를 설정합니다</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-5 rounded-2xl border p-6"
|
||||
style={{
|
||||
background: 'var(--panel-bg)',
|
||||
borderColor: 'var(--panel-border)',
|
||||
boxShadow: 'var(--panel-shadow)',
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-5 rounded-2xl border border-white/5 bg-gray-900/40 p-6">
|
||||
{/* 미리보기 */}
|
||||
<div
|
||||
className="rounded-xl border p-4"
|
||||
style={{
|
||||
background: 'var(--surface-3)',
|
||||
borderColor: 'var(--panel-border)',
|
||||
}}
|
||||
>
|
||||
<div className="text-xs mb-3" style={{ color: 'var(--text-dim)' }}>미리보기</div>
|
||||
<div
|
||||
className="rounded-xl border p-5"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(to bottom right, var(--card-bg-from), var(--card-bg-to))',
|
||||
borderColor: 'var(--card-border)',
|
||||
boxShadow: 'var(--card-shadow)',
|
||||
}}
|
||||
>
|
||||
<div className="rounded-xl border border-white/5 bg-gray-950/50 p-4">
|
||||
<div className="text-xs text-gray-500 mb-3">미리보기</div>
|
||||
<div className="rounded-xl border border-white/10 bg-gradient-to-br from-gray-900/80 to-gray-900/40 p-5">
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="shrink-0 w-12 h-12 rounded-xl border flex items-center justify-center overflow-hidden"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))',
|
||||
borderColor: 'var(--icon-box-border)',
|
||||
}}
|
||||
>
|
||||
<div className="shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-gray-800 to-gray-900 border border-white/5 flex items-center justify-center overflow-hidden">
|
||||
<img src={form.image?.url || '/default.png'} alt="" className="w-9 h-9 object-contain" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium">{form.title || '제목 없음'}</h3>
|
||||
<p className="text-sm mt-1" style={{ color: 'var(--text-muted)' }}>
|
||||
{form.description || '설명 없음'}
|
||||
</p>
|
||||
<h3 className="font-semibold">{form.title || '제목 없음'}</h3>
|
||||
<p className="text-sm text-gray-400 mt-1">{form.description || '설명 없음'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -182,7 +149,6 @@ export default function AdminMenuForm() {
|
|||
onChange={(e) => update({ title: e.target.value })}
|
||||
placeholder="예: 주간 보스 수익 계산기"
|
||||
className={inputCls}
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
|
|
@ -193,45 +159,26 @@ export default function AdminMenuForm() {
|
|||
onChange={(e) => update({ description: e.target.value })}
|
||||
placeholder="예: 캐릭터별 보스 결정석 수익을 계산합니다"
|
||||
className={inputCls}
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="경로" required error={errors.slug}>
|
||||
<div
|
||||
className="flex items-stretch rounded-lg border focus-within:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]"
|
||||
style={{
|
||||
background: 'var(--input-bg)',
|
||||
borderColor: errors.slug ? 'var(--icon-danger-border)' : 'var(--input-border)',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="flex items-center px-3 text-sm border-r select-none"
|
||||
style={{ color: 'var(--text-dim)', borderColor: 'var(--input-border)' }}
|
||||
>
|
||||
/
|
||||
</span>
|
||||
<div className={`flex items-stretch rounded-lg border bg-gray-950 transition focus-within:border-emerald-500/50 ${
|
||||
errors.slug ? 'border-red-500/40' : 'border-white/10'
|
||||
}`}>
|
||||
<span className="flex items-center px-3 text-sm text-gray-500 border-r border-white/10 select-none">/</span>
|
||||
<input
|
||||
type="text"
|
||||
value={form.slug}
|
||||
onChange={(e) => handleSlugChange(e.target.value)}
|
||||
placeholder="boss-crystal"
|
||||
className="flex-1 min-w-0 bg-transparent px-3 py-2 text-sm outline-none"
|
||||
style={{ color: 'var(--text-strong)' }}
|
||||
/>
|
||||
</div>
|
||||
{form.slug.trim() && !errors.slug && (
|
||||
<div className="text-xs mt-1.5 flex items-center gap-1.5" style={{ color: 'var(--text-dim)' }}>
|
||||
<div className="text-xs text-gray-500 mt-1.5 flex items-center gap-1.5">
|
||||
<span>전체 URL:</span>
|
||||
<code
|
||||
className="px-1.5 py-0.5 rounded"
|
||||
style={{
|
||||
color: 'var(--accent-bright)',
|
||||
background: 'var(--surface-3)',
|
||||
}}
|
||||
>
|
||||
https://maple.caadiq.co.kr{fullUrl}
|
||||
</code>
|
||||
<code className="text-emerald-400 bg-gray-950/50 px-1.5 py-0.5 rounded">https://maple.caadiq.co.kr{fullUrl}</code>
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
|
|
@ -241,16 +188,12 @@ export default function AdminMenuForm() {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setPickerOpen(true)}
|
||||
className="w-16 h-16 rounded-lg border flex items-center justify-center overflow-hidden shrink-0 cursor-pointer hover:border-[var(--selected-border)]"
|
||||
style={{
|
||||
background: 'var(--input-bg)',
|
||||
borderColor: 'var(--input-border)',
|
||||
}}
|
||||
className="w-16 h-16 rounded-lg border border-white/10 hover:border-emerald-500/40 bg-gray-950 flex items-center justify-center overflow-hidden transition shrink-0 cursor-pointer"
|
||||
>
|
||||
{form.image?.url ? (
|
||||
<img src={form.image.url} alt="" className="max-w-[80%] max-h-[80%] object-contain" />
|
||||
) : (
|
||||
<span className="text-2xl" style={{ color: 'var(--text-dim)' }}>+</span>
|
||||
<span className="text-2xl text-gray-700">+</span>
|
||||
)}
|
||||
</button>
|
||||
<div className="flex-1 min-w-0">
|
||||
|
|
@ -260,14 +203,13 @@ export default function AdminMenuForm() {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => update({ image_id: null, image: null })}
|
||||
className="text-xs mt-1 hover:text-[var(--danger-text-strong)]"
|
||||
style={{ color: 'var(--danger-text)' }}
|
||||
className="text-xs text-red-400 hover:text-red-300 transition mt-1"
|
||||
>
|
||||
이미지 제거
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-sm" style={{ color: 'var(--text-dim)' }}>이미지 선택</div>
|
||||
<div className="text-sm text-gray-500">이미지 선택</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -278,11 +220,7 @@ export default function AdminMenuForm() {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
className="rounded-lg border px-4 py-2.5 text-sm hover:bg-[var(--danger-bg-hover)]"
|
||||
style={{
|
||||
borderColor: 'var(--icon-danger-border)',
|
||||
color: 'var(--danger-text)',
|
||||
}}
|
||||
className="rounded-lg border border-red-500/30 text-red-400 hover:bg-red-500/10 hover:border-red-500/50 px-4 py-2.5 text-sm transition"
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
|
|
@ -291,24 +229,14 @@ export default function AdminMenuForm() {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => navigate('/admin')}
|
||||
className="rounded-lg border px-5 py-2.5 text-sm hover:bg-[var(--btn-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-bg)',
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}}
|
||||
className="rounded-lg border border-white/10 px-5 py-2.5 text-sm hover:bg-white/5 transition"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saveMutation.isPending}
|
||||
className="rounded-lg px-5 py-2.5 text-sm font-medium disabled:opacity-50 hover:bg-[var(--btn-primary-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-primary-bg)',
|
||||
color: 'var(--btn-primary-text)',
|
||||
boxShadow: 'var(--btn-primary-shadow)',
|
||||
}}
|
||||
className="rounded-lg bg-emerald-600 hover:bg-emerald-500 px-5 py-2.5 text-sm font-medium disabled:opacity-50 transition shadow-lg shadow-emerald-500/20"
|
||||
>
|
||||
{saveMutation.isPending ? '저장 중...' : (isEdit ? '저장' : '추가')}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ import { api } from '../../../api/client'
|
|||
|
||||
const PAGE_SIZE = 24
|
||||
|
||||
/**
|
||||
* 업로드된 이미지 중 하나를 선택하는 모달 피커
|
||||
*/
|
||||
export default function ImagePicker({ open, onClose, onSelect, currentImageId }) {
|
||||
const [page, setPage] = useState(1)
|
||||
const [search, setSearch] = useState('')
|
||||
|
|
@ -45,31 +48,11 @@ export default function ImagePicker({ open, onClose, onSelect, currentImageId })
|
|||
if (!open) return null
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
||||
style={{ background: 'var(--dialog-backdrop)' }}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-3xl rounded-2xl border shadow-2xl max-h-[90vh] flex flex-col"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(to bottom, var(--dialog-bg-from), var(--dialog-bg-to))',
|
||||
borderColor: 'var(--dialog-border)',
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div
|
||||
className="px-6 py-4 border-b flex items-center justify-between shrink-0"
|
||||
style={{ borderColor: 'var(--panel-border)' }}
|
||||
>
|
||||
<h3 className="font-semibold" style={{ color: 'var(--text-strong)' }}>이미지 선택</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-xl leading-none hover:bg-[var(--row-hover-bg)] w-7 h-7 rounded flex items-center justify-center"
|
||||
style={{ color: 'var(--text-dim)' }}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm" onClick={onClose}>
|
||||
<div className="w-full max-w-3xl rounded-2xl bg-gray-900 border border-white/10 shadow-2xl max-h-[90vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="px-6 py-4 border-b border-white/5 flex items-center justify-between shrink-0">
|
||||
<h3 className="font-semibold">이미지 선택</h3>
|
||||
<button onClick={onClose} className="text-gray-500 hover:text-white transition text-xl leading-none">×</button>
|
||||
</div>
|
||||
|
||||
{/* 검색 */}
|
||||
|
|
@ -80,14 +63,9 @@ export default function ImagePicker({ open, onClose, onSelect, currentImageId })
|
|||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="이미지 이름으로 검색..."
|
||||
className="w-full rounded-lg border pl-10 pr-4 py-2.5 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]"
|
||||
style={{
|
||||
background: 'var(--input-bg)',
|
||||
borderColor: 'var(--input-border)',
|
||||
color: 'var(--text-strong)',
|
||||
}}
|
||||
className="w-full rounded-lg border border-white/10 bg-gray-950 pl-10 pr-4 py-2.5 text-sm outline-none focus:border-emerald-500/50 transition"
|
||||
/>
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--input-icon)' }}>🔍</span>
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">🔍</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -96,84 +74,55 @@ export default function ImagePicker({ open, onClose, onSelect, currentImageId })
|
|||
{isLoading ? (
|
||||
<div className="grid gap-3 grid-cols-3 sm:grid-cols-4 lg:grid-cols-6">
|
||||
{Array.from({ length: 12 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="aspect-square rounded-lg animate-pulse"
|
||||
style={{ background: 'var(--skeleton-bg)' }}
|
||||
/>
|
||||
<div key={i} className="aspect-square rounded-lg bg-white/[0.02] animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : images.length === 0 ? (
|
||||
<div className="py-12 text-center text-sm" style={{ color: 'var(--text-dim)' }}>
|
||||
<div className="py-12 text-center text-gray-500 text-sm">
|
||||
{debouncedSearch ? '검색 결과가 없습니다' : '업로드된 이미지가 없습니다'}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-3 grid-cols-3 sm:grid-cols-4 lg:grid-cols-6">
|
||||
{images.map((image) => {
|
||||
const isSelected = currentImageId === image.id
|
||||
return (
|
||||
<button
|
||||
key={image.id}
|
||||
type="button"
|
||||
onClick={() => { onSelect(image); onClose() }}
|
||||
className="group rounded-lg border overflow-hidden"
|
||||
style={{
|
||||
borderColor: isSelected ? 'var(--selected-border)' : 'var(--panel-border)',
|
||||
boxShadow: isSelected ? '0 0 0 2px var(--ring-info)' : undefined,
|
||||
}}
|
||||
title={image.name}
|
||||
>
|
||||
<div
|
||||
className="aspect-square flex items-center justify-center p-3"
|
||||
style={{ backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))' }}
|
||||
>
|
||||
<img src={image.url} alt={image.name} className="max-w-full max-h-full object-contain" />
|
||||
</div>
|
||||
<div
|
||||
className="px-2 py-1.5 border-t"
|
||||
style={{
|
||||
borderColor: 'var(--panel-border)',
|
||||
background: 'var(--surface-3)',
|
||||
}}
|
||||
>
|
||||
<div className="text-xs truncate">{image.name}</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
{images.map((image) => (
|
||||
<button
|
||||
key={image.id}
|
||||
type="button"
|
||||
onClick={() => { onSelect(image); onClose() }}
|
||||
className={`group rounded-lg border overflow-hidden transition ${
|
||||
currentImageId === image.id
|
||||
? 'border-emerald-500/60 ring-2 ring-emerald-500/30'
|
||||
: 'border-white/5 hover:border-white/20'
|
||||
}`}
|
||||
title={image.name}
|
||||
>
|
||||
<div className="aspect-square bg-gradient-to-br from-gray-900 to-gray-950 flex items-center justify-center p-3">
|
||||
<img src={image.url} alt={image.name} className="max-w-full max-h-full object-contain" />
|
||||
</div>
|
||||
<div className="px-2 py-1.5 border-t border-white/5 bg-gray-950/50">
|
||||
<div className="text-xs truncate">{image.name}</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 페이지네이션 + 액션 */}
|
||||
<div
|
||||
className="px-6 py-4 border-t flex items-center justify-between shrink-0 gap-3"
|
||||
style={{ borderColor: 'var(--panel-border)' }}
|
||||
>
|
||||
<div className="px-6 py-4 border-t border-white/5 flex items-center justify-between shrink-0 gap-3">
|
||||
{totalPages > 1 ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
className="w-8 h-8 rounded border hover:bg-[var(--btn-bg-hover)] disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center text-sm"
|
||||
style={{
|
||||
background: 'var(--btn-bg)',
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}}
|
||||
className="w-8 h-8 rounded border border-white/10 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center text-sm"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<span className="text-xs px-2" style={{ color: 'var(--text-muted)' }}>{page} / {totalPages}</span>
|
||||
<span className="text-xs text-gray-400 px-2">{page} / {totalPages}</span>
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={page === totalPages}
|
||||
className="w-8 h-8 rounded border hover:bg-[var(--btn-bg-hover)] disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center text-sm"
|
||||
style={{
|
||||
background: 'var(--btn-bg)',
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}}
|
||||
className="w-8 h-8 rounded border border-white/10 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center text-sm"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
|
|
@ -184,8 +133,7 @@ export default function ImagePicker({ open, onClose, onSelect, currentImageId })
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => { onSelect(null); onClose() }}
|
||||
className="text-sm hover:text-[var(--danger-text-strong)]"
|
||||
style={{ color: 'var(--danger-text)' }}
|
||||
className="text-sm text-red-400 hover:text-red-300 transition"
|
||||
>
|
||||
이미지 제거
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useLayoutEffect } from 'react'
|
||||
import { useEffect } from 'react'
|
||||
import { useQuery, useQueries } from '@tanstack/react-query'
|
||||
import { api } from '../../api/client'
|
||||
import { useLayout } from '../../components/Layout'
|
||||
|
|
@ -21,7 +21,7 @@ export default function BossCrystal() {
|
|||
|
||||
// 풀스크린 모드 (푸터 숨김 + 내부 스크롤)
|
||||
const { setFullscreen } = useLayout()
|
||||
useLayoutEffect(() => {
|
||||
useEffect(() => {
|
||||
setFullscreen(true)
|
||||
return () => setFullscreen(false)
|
||||
}, [setFullscreen])
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { api } from '../../../api/client'
|
|||
import ConfirmDialog from '../../../components/ConfirmDialog'
|
||||
import Checkbox from '../../../components/Checkbox'
|
||||
import Select from '../../../components/Select'
|
||||
import { useAuthStore } from '../../../stores/auth'
|
||||
import { DIFFICULTIES, formatMeso, getDifficultyImageUrl } from './constants'
|
||||
|
||||
const PARTY_OPTIONS = [1, 2, 3, 4, 5, 6].map((n) => ({ value: n, label: `${n}인` }))
|
||||
|
|
@ -14,23 +13,18 @@ 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" style={{ color: 'var(--text-emphasis)' }}>
|
||||
{label} {required && <span style={{ color: 'var(--danger-text)' }}>*</span>}
|
||||
<label className="text-sm font-medium text-gray-300">
|
||||
{label} {required && <span className="text-red-400">*</span>}
|
||||
</label>
|
||||
{hint && <span className="text-xs" style={{ color: 'var(--text-dim)' }}>{hint}</span>}
|
||||
{hint && <span className="text-xs text-gray-500">{hint}</span>}
|
||||
</div>
|
||||
{children}
|
||||
{error && <div className="text-[11px]" style={{ color: 'var(--danger-text)' }}>{error}</div>}
|
||||
{error && <div className="text-[11px] text-red-400">{error}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const inputCls = 'w-full rounded-lg border px-3 py-2 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]'
|
||||
const inputStyle = {
|
||||
background: 'var(--input-bg)',
|
||||
borderColor: 'var(--input-border)',
|
||||
color: 'var(--text-strong)',
|
||||
}
|
||||
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 emptyDifficultyState() {
|
||||
const obj = {}
|
||||
|
|
@ -140,7 +134,7 @@ export default function BossForm() {
|
|||
}))
|
||||
formData.append('difficulties', JSON.stringify(diffsPayload))
|
||||
|
||||
const adminKey = useAuthStore.getState().apiKey
|
||||
const adminKey = localStorage.getItem('maple-admin-key')
|
||||
const url = isEdit
|
||||
? `/api/admin/boss-crystal/bosses/${id}`
|
||||
: '/api/admin/boss-crystal/bosses'
|
||||
|
|
@ -180,21 +174,13 @@ export default function BossForm() {
|
|||
const displayImage = imagePreview || existingImageUrl
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl mx-auto pt-6">
|
||||
<div className="space-y-6 max-w-2xl mx-auto">
|
||||
<div>
|
||||
<h2 className="text-lg font-medium">{isEdit ? '보스 편집' : '보스 추가'}</h2>
|
||||
<p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>보스 이름과 난이도별 결정 정보를 입력합니다</p>
|
||||
<h2 className="text-lg font-semibold">{isEdit ? '보스 편집' : '보스 추가'}</h2>
|
||||
<p className="text-sm text-gray-500 mt-0.5">보스 이름과 난이도별 결정 정보를 입력합니다</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-5 rounded-2xl border p-6"
|
||||
style={{
|
||||
background: 'var(--panel-bg)',
|
||||
borderColor: 'var(--panel-border)',
|
||||
boxShadow: 'var(--panel-shadow)',
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-5 rounded-2xl border border-white/5 bg-gray-900/40 p-6">
|
||||
{/* 이름 + 최대 인원 */}
|
||||
<div className="grid grid-cols-[1fr_auto] gap-3">
|
||||
<Field label="보스 이름" required error={errors.name}>
|
||||
|
|
@ -204,7 +190,6 @@ export default function BossForm() {
|
|||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="예: 검은 마법사"
|
||||
className={inputCls}
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="최대 인원">
|
||||
|
|
@ -220,32 +205,26 @@ export default function BossForm() {
|
|||
{/* 이미지 */}
|
||||
<Field label="보스 이미지" required={!isEdit} error={errors.image}>
|
||||
<label
|
||||
className="flex items-center gap-4 rounded-xl border-2 border-dashed p-4 cursor-pointer hover:border-[var(--selected-border)]"
|
||||
style={{
|
||||
background: 'var(--surface-3)',
|
||||
borderColor: errors.image ? 'var(--icon-danger-border)' : 'var(--dashed-border)',
|
||||
}}
|
||||
className={`flex items-center gap-4 rounded-xl border-2 border-dashed bg-gray-950/50 p-4 transition cursor-pointer ${
|
||||
errors.image
|
||||
? 'border-red-500/40'
|
||||
: 'border-white/10 hover:border-emerald-500/40 hover:bg-emerald-500/5'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="w-32 h-32 rounded-lg border flex items-center justify-center overflow-hidden shrink-0"
|
||||
style={{
|
||||
background: 'var(--surface-nested)',
|
||||
borderColor: 'var(--panel-border)',
|
||||
}}
|
||||
>
|
||||
<div className="w-32 h-32 rounded-lg bg-gray-900 border border-white/5 flex items-center justify-center overflow-hidden shrink-0">
|
||||
{displayImage ? (
|
||||
<img src={displayImage} alt="" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<span className="text-5xl" style={{ color: 'var(--text-dim)' }}>+</span>
|
||||
<span className="text-5xl text-gray-700">+</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium" style={{ color: 'var(--text-emphasis)' }}>
|
||||
<div className="text-sm font-medium text-gray-300">
|
||||
{displayImage ? '클릭하여 이미지 변경' : '클릭하여 이미지 업로드'}
|
||||
</div>
|
||||
<p className="text-xs mt-1" style={{ color: 'var(--text-dim)' }}>PNG, JPG, GIF 등 → WebP로 자동 변환됩니다</p>
|
||||
<p className="text-xs text-gray-500 mt-1">PNG, JPG, GIF 등 → WebP로 자동 변환됩니다</p>
|
||||
{imageFile && (
|
||||
<div className="text-xs mt-2 truncate" style={{ color: 'var(--accent-bright)' }}>📎 {imageFile.name}</div>
|
||||
<div className="text-xs text-emerald-400 mt-2 truncate">📎 {imageFile.name}</div>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -267,14 +246,12 @@ export default function BossForm() {
|
|||
return (
|
||||
<div
|
||||
key={d.key}
|
||||
className="rounded-lg border p-3"
|
||||
style={{
|
||||
background: 'var(--surface-3)',
|
||||
borderColor: 'var(--panel-border)',
|
||||
opacity: v.enabled ? 1 : 0.6,
|
||||
}}
|
||||
className={`rounded-lg border bg-gray-950/50 p-3 transition ${
|
||||
v.enabled ? 'border-white/10' : 'border-white/5 opacity-60'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 체크박스 + 난이도 이미지 (이미지 클릭으로도 토글 가능) */}
|
||||
<div
|
||||
className="flex items-center gap-2.5 shrink-0 cursor-pointer select-none"
|
||||
onClick={() => updateDifficulty(d.key, { enabled: !v.enabled })}
|
||||
|
|
@ -292,6 +269,7 @@ export default function BossForm() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* 가격 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="relative">
|
||||
<input
|
||||
|
|
@ -304,18 +282,12 @@ export default function BossForm() {
|
|||
}}
|
||||
disabled={!v.enabled}
|
||||
placeholder="결정 가격"
|
||||
className="w-full rounded-lg border pl-4 pr-28 py-2 text-sm outline-none focus:border-[var(--input-border-focus)] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
style={{
|
||||
background: 'var(--input-bg)',
|
||||
borderColor: priceErr ? 'var(--icon-danger-border)' : 'var(--input-border)',
|
||||
color: 'var(--text-strong)',
|
||||
}}
|
||||
className={`w-full rounded-lg border bg-gray-900 pl-4 pr-28 py-2 text-sm outline-none focus:border-emerald-500/50 disabled:opacity-50 disabled:cursor-not-allowed transition ${
|
||||
priceErr ? 'border-red-500/40' : 'border-white/10'
|
||||
}`}
|
||||
/>
|
||||
{v.crystal_price && v.enabled && (
|
||||
<span
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm pointer-events-none whitespace-nowrap"
|
||||
style={{ color: 'var(--accent-bright)' }}
|
||||
>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-emerald-400/80 pointer-events-none whitespace-nowrap">
|
||||
{formatMeso(Number(v.crystal_price))}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -328,16 +300,13 @@ export default function BossForm() {
|
|||
</div>
|
||||
</Field>
|
||||
|
||||
{/* 버튼 */}
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
{isEdit && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
className="rounded-lg border px-4 py-2.5 text-sm hover:bg-[var(--danger-bg-hover)]"
|
||||
style={{
|
||||
borderColor: 'var(--icon-danger-border)',
|
||||
color: 'var(--danger-text)',
|
||||
}}
|
||||
className="rounded-lg border border-red-500/30 text-red-400 hover:bg-red-500/10 hover:border-red-500/50 px-4 py-2.5 text-sm transition"
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
|
|
@ -346,24 +315,14 @@ export default function BossForm() {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => navigate('..')}
|
||||
className="rounded-lg border px-5 py-2.5 text-sm hover:bg-[var(--btn-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-bg)',
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}}
|
||||
className="rounded-lg border border-white/10 px-5 py-2.5 text-sm hover:bg-white/5 transition"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saveMutation.isPending}
|
||||
className="rounded-lg px-5 py-2.5 text-sm font-medium disabled:opacity-50 hover:bg-[var(--btn-primary-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-primary-bg)',
|
||||
color: 'var(--btn-primary-text)',
|
||||
boxShadow: 'var(--btn-primary-shadow)',
|
||||
}}
|
||||
className="rounded-lg bg-emerald-600 hover:bg-emerald-500 px-5 py-2.5 text-sm font-medium disabled:opacity-50 transition shadow-lg shadow-emerald-500/20"
|
||||
>
|
||||
{saveMutation.isPending ? '저장 중...' : (isEdit ? '저장' : '추가')}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -16,16 +16,13 @@ import { DIFFICULTIES, formatMeso, getDifficultyBadgeStyle } from './constants'
|
|||
|
||||
function BossCardContent({ boss, dragging = false }) {
|
||||
return (
|
||||
<div
|
||||
className="flex items-stretch rounded-2xl border"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(to bottom right, var(--card-bg-from), var(--card-bg-to))',
|
||||
borderColor: dragging ? 'var(--selected-border)' : 'var(--card-border)',
|
||||
boxShadow: dragging ? '0 12px 32px rgba(16, 185, 129, 0.25)' : 'var(--card-shadow)',
|
||||
}}
|
||||
>
|
||||
<div className={`flex items-stretch rounded-2xl border bg-gradient-to-br from-gray-900/80 to-gray-900/40 ${
|
||||
dragging
|
||||
? 'border-emerald-500/60 shadow-2xl shadow-emerald-500/30'
|
||||
: 'border-white/5'
|
||||
}`}>
|
||||
{/* 핸들 자리 */}
|
||||
<div className="flex items-center px-2 cursor-grab active:cursor-grabbing" style={{ color: 'var(--text-dim)' }}>
|
||||
<div className="flex items-center px-2 text-gray-700 cursor-grab active:cursor-grabbing">
|
||||
<svg width="14" height="20" viewBox="0 0 14 20" fill="currentColor">
|
||||
<circle cx="4" cy="4" r="1.5" />
|
||||
<circle cx="10" cy="4" r="1.5" />
|
||||
|
|
@ -37,19 +34,13 @@ function BossCardContent({ boss, dragging = false }) {
|
|||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0 flex items-start gap-3 p-4 pl-2">
|
||||
<div
|
||||
className="shrink-0 w-14 h-14 rounded-xl border flex items-center justify-center overflow-hidden"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))',
|
||||
borderColor: 'var(--icon-box-border)',
|
||||
}}
|
||||
>
|
||||
<div className="shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-gray-800 to-gray-900 border border-white/5 flex items-center justify-center overflow-hidden">
|
||||
<img src={boss.image_url || '/default.png'} alt={boss.name} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<h3 className="font-medium truncate">{boss.name}</h3>
|
||||
<span className="text-xs shrink-0" style={{ color: 'var(--text-dim)' }}>최대 {boss.max_party_size}인</span>
|
||||
<h3 className="font-semibold truncate">{boss.name}</h3>
|
||||
<span className="text-xs text-gray-500 shrink-0">최대 {boss.max_party_size}인</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{DIFFICULTIES.filter((d) => boss.difficulties?.some((bd) => bd.difficulty === d.key)).map((d) => {
|
||||
|
|
@ -89,15 +80,17 @@ function SortableBossCard({ boss }) {
|
|||
style={style}
|
||||
className={`relative ${isDragging ? 'opacity-30' : ''}`}
|
||||
>
|
||||
{/* 드래그 핸들 (좌측) */}
|
||||
<button
|
||||
type="button"
|
||||
ref={setActivatorNodeRef}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="absolute left-0 top-0 bottom-0 w-8 z-10 cursor-grab active:cursor-grabbing rounded-l-2xl hover:bg-[var(--row-hover-bg)] transition touch-none"
|
||||
className="absolute left-0 top-0 bottom-0 w-8 z-10 cursor-grab active:cursor-grabbing rounded-l-2xl hover:bg-white/5 transition touch-none"
|
||||
aria-label="순서 변경"
|
||||
/>
|
||||
<Link to={`bosses/${boss.id}`} className="block group hover:[&_h3]:text-[var(--accent-hover-text)] [&_h3]:transition">
|
||||
{/* 카드 본체 - Link */}
|
||||
<Link to={`bosses/${boss.id}`} className="block group hover:[&_h3]:text-emerald-300 [&_h3]:transition">
|
||||
<BossCardContent boss={boss} />
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -150,20 +143,15 @@ export default function BossList() {
|
|||
const activeBoss = items.find((b) => b.id === activeId)
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-5xl mx-auto pt-6">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-end justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<h2 className="text-lg font-medium">보스 결정 관리</h2>
|
||||
<p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>보스 정보 및 난이도별 결정 가격을 관리합니다</p>
|
||||
<h2 className="text-lg font-semibold">보스 결정 관리</h2>
|
||||
<p className="text-sm text-gray-500 mt-0.5">보스 정보 및 난이도별 결정 가격을 관리합니다</p>
|
||||
</div>
|
||||
<Link
|
||||
to="bosses/new"
|
||||
className="flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium hover:bg-[var(--btn-primary-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-primary-bg)',
|
||||
color: 'var(--btn-primary-text)',
|
||||
boxShadow: 'var(--btn-primary-shadow)',
|
||||
}}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm font-medium transition shadow-lg shadow-emerald-500/20"
|
||||
>
|
||||
<span className="text-base leading-none">+</span>
|
||||
보스 추가
|
||||
|
|
@ -173,24 +161,14 @@ export default function BossList() {
|
|||
{isLoading ? (
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="h-32 rounded-2xl animate-pulse" style={{ background: 'var(--skeleton-bg)' }} />
|
||||
<div key={i} className="h-32 rounded-2xl bg-white/[0.02] animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<div
|
||||
className="rounded-2xl border border-dashed p-16 text-center"
|
||||
style={{
|
||||
borderColor: 'var(--dashed-border)',
|
||||
background: 'var(--skeleton-bg)',
|
||||
}}
|
||||
>
|
||||
<div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] p-16 text-center">
|
||||
<div className="text-5xl mb-3 opacity-30">⚔️</div>
|
||||
<p className="mb-4" style={{ color: 'var(--text-muted)' }}>등록된 보스가 없습니다</p>
|
||||
<Link
|
||||
to="bosses/new"
|
||||
className="text-sm hover:text-[var(--accent-hover-text)]"
|
||||
style={{ color: 'var(--accent)' }}
|
||||
>
|
||||
<p className="text-gray-400 mb-4">등록된 보스가 없습니다</p>
|
||||
<Link to="bosses/new" className="text-sm text-emerald-400 hover:text-emerald-300 transition">
|
||||
첫 보스 추가하기 →
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
|
|||
import { api } from '../../../api/client'
|
||||
import ConfirmDialog from '../../../components/ConfirmDialog'
|
||||
import Tooltip from '../../../components/Tooltip'
|
||||
import CharacterSuggestDropdown from '../../../components/CharacterSuggestDropdown'
|
||||
import { useFitText } from '../../../hooks/useFitText'
|
||||
import { DIFFICULTIES, formatMeso, getDifficultyBadgeStyle } from '../admin/constants'
|
||||
|
||||
|
|
@ -199,7 +198,6 @@ export default function CharacterPanel({
|
|||
const [name, setName] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [confirmRemove, setConfirmRemove] = useState(null)
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false)
|
||||
|
||||
const searchMutation = useMutation({
|
||||
mutationFn: (n) => api(`/api/character/search?name=${encodeURIComponent(n)}`),
|
||||
|
|
@ -333,8 +331,6 @@ export default function CharacterPanel({
|
|||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => { setName(e.target.value); if (error) setError('') }}
|
||||
onFocus={() => setDropdownOpen(true)}
|
||||
onBlur={() => setTimeout(() => setDropdownOpen(false), 150)}
|
||||
placeholder="캐릭터 닉네임 검색"
|
||||
className="w-full rounded-lg border-2 pl-10 pr-3 py-2.5 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]"
|
||||
style={{
|
||||
|
|
@ -343,17 +339,6 @@ export default function CharacterPanel({
|
|||
color: 'var(--text-strong)',
|
||||
}}
|
||||
/>
|
||||
<CharacterSuggestDropdown
|
||||
open={dropdownOpen}
|
||||
filter={name}
|
||||
excludeNames={characters.map((c) => c.character_name)}
|
||||
onSelect={(n) => {
|
||||
setName(n)
|
||||
setDropdownOpen(false)
|
||||
setError('')
|
||||
searchMutation.mutate(n)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useEffect, useLayoutEffect } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import dayjs from 'dayjs'
|
||||
import { api } from '../../api/client'
|
||||
|
|
@ -62,7 +62,7 @@ function calcMonthlyEarn(weekData) {
|
|||
|
||||
export default function Liberation() {
|
||||
const { setFullscreen } = useLayout()
|
||||
useLayoutEffect(() => {
|
||||
useEffect(() => {
|
||||
setFullscreen(true)
|
||||
return () => setFullscreen(false)
|
||||
}, [setFullscreen])
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useEffect, useLayoutEffect, useMemo } from 'react'
|
||||
import { useState, useEffect, useMemo } from 'react'
|
||||
import { useQuery, useQueries, useMutation } from '@tanstack/react-query'
|
||||
import dayjs from 'dayjs'
|
||||
import utc from 'dayjs/plugin/utc'
|
||||
|
|
@ -7,7 +7,6 @@ import { api } from '../../api/client'
|
|||
import { useLayout } from '../../components/Layout'
|
||||
import Select from '../../components/Select'
|
||||
import Tooltip from '../../components/Tooltip'
|
||||
import CharacterSuggestDropdown from '../../components/CharacterSuggestDropdown'
|
||||
import { useSymbolStore } from './store'
|
||||
|
||||
dayjs.extend(utc)
|
||||
|
|
@ -371,7 +370,7 @@ function SymbolCard({ symbol, equipped, charId }) {
|
|||
|
||||
export default function Symbol() {
|
||||
const { setFullscreen } = useLayout()
|
||||
useLayoutEffect(() => {
|
||||
useEffect(() => {
|
||||
setFullscreen(true)
|
||||
return () => setFullscreen(false)
|
||||
}, [setFullscreen])
|
||||
|
|
@ -470,7 +469,6 @@ export default function Symbol() {
|
|||
|
||||
const [addName, setAddName] = useState('')
|
||||
const [addError, setAddError] = useState('')
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false)
|
||||
|
||||
const symbols = allSymbols.filter((s) => s.type === tab)
|
||||
const tabInfo = tabs.find((t) => t.key === tab)
|
||||
|
|
@ -572,8 +570,6 @@ export default function Symbol() {
|
|||
type="text"
|
||||
value={addName}
|
||||
onChange={(e) => { setAddName(e.target.value); if (addError) setAddError('') }}
|
||||
onFocus={() => setDropdownOpen(true)}
|
||||
onBlur={() => setTimeout(() => setDropdownOpen(false), 150)}
|
||||
placeholder="캐릭터 닉네임으로 장착 심볼 불러오기"
|
||||
className="w-full h-12 box-border rounded-lg border pl-10 pr-4 text-base outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]"
|
||||
style={{
|
||||
|
|
@ -582,17 +578,6 @@ export default function Symbol() {
|
|||
color: 'var(--text-strong)',
|
||||
}}
|
||||
/>
|
||||
<CharacterSuggestDropdown
|
||||
open={dropdownOpen}
|
||||
filter={addName}
|
||||
excludeNames={characters.map((c) => c.character_name)}
|
||||
onSelect={(n) => {
|
||||
setAddName(n)
|
||||
setDropdownOpen(false)
|
||||
setAddError('')
|
||||
searchMutation.mutate(n)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|||
import { api } from '../../../api/client'
|
||||
import Select from '../../../components/Select'
|
||||
import ConfirmDialog from '../../../components/ConfirmDialog'
|
||||
import { useAuthStore } from '../../../stores/auth'
|
||||
|
||||
const TYPE_OPTIONS = [
|
||||
{ value: '아케인', label: '아케인' },
|
||||
|
|
@ -12,12 +11,7 @@ const TYPE_OPTIONS = [
|
|||
{ value: '그랜드 어센틱', label: '그랜드 어센틱' },
|
||||
]
|
||||
|
||||
const inputCls = 'w-full rounded-lg border px-3 py-2 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]'
|
||||
const inputStyle = {
|
||||
background: 'var(--input-bg)',
|
||||
borderColor: 'var(--input-border)',
|
||||
color: 'var(--text-strong)',
|
||||
}
|
||||
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 ''
|
||||
|
|
@ -44,15 +38,9 @@ function MesoInput({ value, onChange, ...rest }) {
|
|||
onChange(digits)
|
||||
}}
|
||||
className={`${inputCls} tabular-nums text-right`}
|
||||
style={inputStyle}
|
||||
{...rest}
|
||||
/>
|
||||
<div
|
||||
className="text-sm mt-1 text-right tabular-nums min-h-[18px]"
|
||||
style={{ color: 'var(--warning-text-bright)' }}
|
||||
>
|
||||
{korean || '\u00A0'}
|
||||
</div>
|
||||
<div className="text-sm text-amber-300 mt-1 text-right tabular-nums min-h-[18px]">{korean || '\u00A0'}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -61,13 +49,13 @@ 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" style={{ color: 'var(--text-emphasis)' }}>
|
||||
{label} {required && <span style={{ color: 'var(--danger-text)' }}>*</span>}
|
||||
<label className="text-sm font-medium text-gray-300">
|
||||
{label} {required && <span className="text-red-400">*</span>}
|
||||
</label>
|
||||
{hint && <span className="text-xs" style={{ color: 'var(--text-dim)' }}>{hint}</span>}
|
||||
{hint && <span className="text-xs text-gray-500">{hint}</span>}
|
||||
</div>
|
||||
{children}
|
||||
{error && <div className="text-[11px]" style={{ color: 'var(--danger-text)' }}>{error}</div>}
|
||||
{error && <div className="text-[11px] text-red-400">{error}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -91,6 +79,7 @@ export default function SymbolForm() {
|
|||
const [confirmDelete, setConfirmDelete] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// 편집 시 데이터 로드
|
||||
const { data: symbolData } = useQuery({
|
||||
queryKey: ['admin', 'symbol', 'symbols', id],
|
||||
queryFn: () => api(`/api/admin/symbol/symbols/${id}`),
|
||||
|
|
@ -159,7 +148,7 @@ export default function SymbolForm() {
|
|||
))
|
||||
if (imageFile) formData.append('image', imageFile)
|
||||
|
||||
const adminKey = useAuthStore.getState().apiKey
|
||||
const adminKey = localStorage.getItem('maple-admin-key')
|
||||
const url = isEdit ? `/api/admin/symbol/symbols/${id}` : '/api/admin/symbol/symbols'
|
||||
const res = await fetch(url, {
|
||||
method: isEdit ? 'PATCH' : 'POST',
|
||||
|
|
@ -199,51 +188,33 @@ export default function SymbolForm() {
|
|||
|
||||
const displayImage = imagePreview || existingImageUrl
|
||||
|
||||
const panelStyle = {
|
||||
background: 'var(--panel-bg)',
|
||||
borderColor: 'var(--panel-border)',
|
||||
boxShadow: 'var(--panel-shadow)',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto space-y-6 pt-6">
|
||||
<div className="max-w-2xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h2 className="text-lg font-medium">{isEdit ? '심볼 편집' : '심볼 추가'}</h2>
|
||||
<p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>심볼 정보와 레벨별 필요 개수/메소를 입력합니다</p>
|
||||
<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 p-6 space-y-5" style={panelStyle}>
|
||||
<div className="text-sm font-semibold" style={{ color: 'var(--accent-bright)' }}>기본 정보</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 p-4 cursor-pointer hover:border-[var(--selected-border)]"
|
||||
style={{
|
||||
background: 'var(--surface-3)',
|
||||
borderColor: 'var(--dashed-border)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-32 h-32 rounded-lg border flex items-center justify-center overflow-hidden shrink-0"
|
||||
style={{
|
||||
background: 'var(--surface-nested)',
|
||||
borderColor: 'var(--panel-border)',
|
||||
}}
|
||||
>
|
||||
<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">
|
||||
{displayImage ? (
|
||||
<img src={displayImage} alt="" className="w-full h-full object-contain" style={{ imageRendering: 'pixelated' }} />
|
||||
) : (
|
||||
<span className="text-5xl" style={{ color: 'var(--text-dim)' }}>+</span>
|
||||
<span className="text-5xl text-gray-700">+</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium" style={{ color: 'var(--text-emphasis)' }}>
|
||||
<div className="text-sm font-medium text-gray-300">
|
||||
{displayImage ? '클릭하여 이미지 변경' : '클릭하여 이미지 업로드'}
|
||||
</div>
|
||||
<p className="text-xs mt-1" style={{ color: 'var(--text-dim)' }}>PNG, JPG, GIF 등 → WebP로 자동 변환됩니다</p>
|
||||
<p className="text-xs text-gray-500 mt-1">PNG, JPG, GIF 등 → WebP로 자동 변환됩니다</p>
|
||||
{imageFile && (
|
||||
<div className="text-xs mt-2 truncate" style={{ color: 'var(--accent-bright)' }}>📎 {imageFile.name}</div>
|
||||
<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" />
|
||||
|
|
@ -261,7 +232,6 @@ export default function SymbolForm() {
|
|||
value={region}
|
||||
onChange={(e) => setRegion(e.target.value)}
|
||||
className={inputCls}
|
||||
style={inputStyle}
|
||||
placeholder="소멸의 여로"
|
||||
/>
|
||||
</Field>
|
||||
|
|
@ -274,7 +244,6 @@ export default function SymbolForm() {
|
|||
value={maxLevel}
|
||||
onChange={(e) => { setMaxLevel(e.target.value); adjustLevelRows(e.target.value) }}
|
||||
className={inputCls}
|
||||
style={inputStyle}
|
||||
min="2"
|
||||
/>
|
||||
</Field>
|
||||
|
|
@ -284,7 +253,6 @@ export default function SymbolForm() {
|
|||
value={dailyDefault}
|
||||
onChange={(e) => setDailyDefault(e.target.value)}
|
||||
className={inputCls}
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="기본 주간퀘 획득량">
|
||||
|
|
@ -293,35 +261,35 @@ export default function SymbolForm() {
|
|||
value={weeklyDefault}
|
||||
onChange={(e) => setWeeklyDefault(e.target.value)}
|
||||
className={inputCls}
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 레벨별 설정 */}
|
||||
<div className="rounded-2xl border p-6 space-y-4" style={panelStyle}>
|
||||
<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" style={{ color: 'var(--accent-bright)' }}>레벨별 필요 개수 · 메소</div>
|
||||
<div className="text-xs" style={{ color: 'var(--text-dim)' }}>레벨 N → N+1 업그레이드 기준 (만렙-1행)</div>
|
||||
<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 uppercase border-b" style={{ color: 'var(--text-dim)', borderColor: 'var(--panel-border)' }}>
|
||||
<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>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{levels.map((l, idx) => (
|
||||
<tr key={l.level} className="border-t first:border-t-0" style={{ borderColor: 'var(--row-divider)' }}>
|
||||
<td className="py-1.5 px-3 tabular-nums" style={{ color: 'var(--text-muted)' }}>
|
||||
Lv.<span className="font-semibold" style={{ color: 'var(--text-emphasis)' }}>{l.level}</span>
|
||||
<span className="mx-1" style={{ color: 'var(--text-dim)' }}>→</span>
|
||||
<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">
|
||||
|
|
@ -330,7 +298,6 @@ export default function SymbolForm() {
|
|||
value={l.required_count}
|
||||
onChange={(e) => updateLevel(idx, 'required_count', e.target.value)}
|
||||
className={`${inputCls} max-w-36`}
|
||||
style={inputStyle}
|
||||
placeholder="0"
|
||||
/>
|
||||
</td>
|
||||
|
|
@ -357,12 +324,7 @@ export default function SymbolForm() {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-[var(--danger-bg-hover)]"
|
||||
style={{
|
||||
borderColor: 'var(--icon-danger-border)',
|
||||
background: 'var(--icon-danger-bg)',
|
||||
color: 'var(--danger-text)',
|
||||
}}
|
||||
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>
|
||||
|
|
@ -372,12 +334,7 @@ export default function SymbolForm() {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => navigate('..')}
|
||||
className="rounded-lg border px-4 py-2 text-sm hover:bg-[var(--btn-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-bg)',
|
||||
borderColor: 'var(--btn-border)',
|
||||
color: 'var(--text-emphasis)',
|
||||
}}
|
||||
className="rounded-lg border border-white/10 hover:bg-white/5 text-gray-300 px-4 py-2 text-sm transition"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
|
|
@ -385,12 +342,7 @@ export default function SymbolForm() {
|
|||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={saveMutation.isPending}
|
||||
className="rounded-lg px-5 py-2 text-sm font-semibold disabled:opacity-50 hover:bg-[var(--btn-primary-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-primary-bg)',
|
||||
color: 'var(--btn-primary-text)',
|
||||
boxShadow: 'var(--btn-primary-shadow)',
|
||||
}}
|
||||
className="rounded-lg bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 text-white px-5 py-2 text-sm font-semibold shadow-lg shadow-emerald-500/20 transition"
|
||||
>
|
||||
{saveMutation.isPending ? '저장 중...' : isEdit ? '저장' : '추가'}
|
||||
</button>
|
||||
|
|
@ -398,14 +350,7 @@ export default function SymbolForm() {
|
|||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
className="rounded-lg border text-sm px-4 py-2"
|
||||
style={{
|
||||
borderColor: 'var(--icon-danger-border)',
|
||||
background: 'var(--icon-danger-bg)',
|
||||
color: 'var(--danger-text)',
|
||||
}}
|
||||
>
|
||||
<div className="rounded-lg border border-red-500/40 bg-red-500/10 text-red-300 text-sm px-4 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -12,36 +12,21 @@ import {
|
|||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { api } from '../../../api/client'
|
||||
|
||||
const TYPE_STYLE = {
|
||||
'아케인': {
|
||||
color: 'var(--symbol-arcane-text)',
|
||||
background: 'var(--symbol-arcane-bg)',
|
||||
borderColor: 'var(--symbol-arcane-border)',
|
||||
},
|
||||
'어센틱': {
|
||||
color: 'var(--symbol-authentic-text)',
|
||||
background: 'var(--symbol-authentic-bg)',
|
||||
borderColor: 'var(--symbol-authentic-border)',
|
||||
},
|
||||
'그랜드 어센틱': {
|
||||
color: 'var(--symbol-grand-text)',
|
||||
background: 'var(--symbol-grand-bg)',
|
||||
borderColor: 'var(--symbol-grand-border)',
|
||||
},
|
||||
const TYPE_COLOR = {
|
||||
'아케인': { text: 'text-violet-300', bg: 'bg-violet-500/15', border: 'border-violet-500/30' },
|
||||
'어센틱': { text: 'text-sky-300', bg: 'bg-sky-500/15', border: 'border-sky-500/30' },
|
||||
'그랜드 어센틱': { text: 'text-amber-300', bg: 'bg-amber-500/15', border: 'border-amber-500/30' },
|
||||
}
|
||||
|
||||
function SymbolCardContent({ symbol, dragging = false }) {
|
||||
const badgeStyle = TYPE_STYLE[symbol.type] || TYPE_STYLE['아케인']
|
||||
const color = TYPE_COLOR[symbol.type] || TYPE_COLOR['아케인']
|
||||
return (
|
||||
<div
|
||||
className="flex items-stretch rounded-2xl border"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(to bottom right, var(--card-bg-from), var(--card-bg-to))',
|
||||
borderColor: dragging ? 'var(--selected-border)' : 'var(--card-border)',
|
||||
boxShadow: dragging ? '0 12px 32px rgba(16, 185, 129, 0.25)' : 'var(--card-shadow)',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center px-2 cursor-grab active:cursor-grabbing" style={{ color: 'var(--text-dim)' }}>
|
||||
<div className={`flex items-stretch rounded-2xl border bg-gradient-to-br from-gray-900/80 to-gray-900/40 ${
|
||||
dragging
|
||||
? 'border-emerald-500/60 shadow-2xl shadow-emerald-500/30'
|
||||
: 'border-white/5'
|
||||
}`}>
|
||||
<div className="flex items-center px-2 text-gray-700 cursor-grab active:cursor-grabbing">
|
||||
<svg width="14" height="20" viewBox="0 0 14 20" fill="currentColor">
|
||||
<circle cx="4" cy="4" r="1.5" /><circle cx="10" cy="4" r="1.5" />
|
||||
<circle cx="4" cy="10" r="1.5" /><circle cx="10" cy="10" r="1.5" />
|
||||
|
|
@ -49,30 +34,21 @@ function SymbolCardContent({ symbol, dragging = false }) {
|
|||
</svg>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 flex items-start gap-3 p-4 pl-2">
|
||||
<div
|
||||
className="shrink-0 w-14 h-14 rounded-xl border flex items-center justify-center overflow-hidden"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))',
|
||||
borderColor: 'var(--icon-box-border)',
|
||||
}}
|
||||
>
|
||||
<div className="shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-gray-800 to-gray-900 border border-white/5 flex items-center justify-center overflow-hidden">
|
||||
{symbol.image_url ? (
|
||||
<img src={symbol.image_url} alt="" className="w-12 h-12 object-contain" style={{ imageRendering: 'pixelated' }} />
|
||||
) : (
|
||||
<span className="text-2xl" style={{ color: 'var(--text-dim)' }}>?</span>
|
||||
<span className="text-gray-700 text-2xl">?</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-baseline gap-2 flex-wrap">
|
||||
<h3 className="font-medium truncate">{symbol.region}</h3>
|
||||
<span
|
||||
className="text-[10px] font-medium px-1.5 py-0.5 rounded border"
|
||||
style={badgeStyle}
|
||||
>
|
||||
<h3 className="font-semibold truncate">{symbol.region}</h3>
|
||||
<span className={`text-[10px] font-medium px-1.5 py-0.5 rounded border ${color.text} ${color.bg} ${color.border}`}>
|
||||
{symbol.type}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-0.5 text-xs tabular-nums" style={{ color: 'var(--text-dim)' }}>
|
||||
<div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-gray-500 tabular-nums">
|
||||
<span>만렙 {symbol.max_level}</span>
|
||||
<span>일퀘 {symbol.daily_default}</span>
|
||||
<span>주간퀘 {symbol.weekly_default}</span>
|
||||
|
|
@ -96,10 +72,10 @@ function SortableSymbolCard({ symbol }) {
|
|||
ref={setActivatorNodeRef}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="absolute left-0 top-0 bottom-0 w-8 z-10 cursor-grab active:cursor-grabbing rounded-l-2xl hover:bg-[var(--row-hover-bg)] transition touch-none"
|
||||
className="absolute left-0 top-0 bottom-0 w-8 z-10 cursor-grab active:cursor-grabbing rounded-l-2xl hover:bg-white/5 transition touch-none"
|
||||
aria-label="순서 변경"
|
||||
/>
|
||||
<Link to={`symbols/${symbol.id}`} className="block group hover:[&_h3]:text-[var(--accent-hover-text)] [&_h3]:transition">
|
||||
<Link to={`symbols/${symbol.id}`} className="block group hover:[&_h3]:text-emerald-300 [&_h3]:transition">
|
||||
<SymbolCardContent symbol={symbol} />
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -150,20 +126,15 @@ export default function SymbolList() {
|
|||
const activeSymbol = items.find((s) => s.id === activeId)
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-5xl mx-auto pt-6">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-end justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<h2 className="text-lg font-medium">심볼 관리</h2>
|
||||
<p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>심볼 정보 및 레벨별 필요 개수/메소를 관리합니다</p>
|
||||
<h2 className="text-lg font-semibold">심볼 관리</h2>
|
||||
<p className="text-sm text-gray-500 mt-0.5">심볼 정보 및 레벨별 필요 개수/메소를 관리합니다</p>
|
||||
</div>
|
||||
<Link
|
||||
to="symbols/new"
|
||||
className="flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium hover:bg-[var(--btn-primary-bg-hover)]"
|
||||
style={{
|
||||
background: 'var(--btn-primary-bg)',
|
||||
color: 'var(--btn-primary-text)',
|
||||
boxShadow: 'var(--btn-primary-shadow)',
|
||||
}}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm font-medium transition shadow-lg shadow-emerald-500/20"
|
||||
>
|
||||
<span className="text-base leading-none">+</span>
|
||||
심볼 추가
|
||||
|
|
@ -173,24 +144,14 @@ export default function SymbolList() {
|
|||
{isLoading ? (
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="h-24 rounded-2xl animate-pulse" style={{ background: 'var(--skeleton-bg)' }} />
|
||||
<div key={i} className="h-24 rounded-2xl bg-white/[0.02] animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<div
|
||||
className="rounded-2xl border border-dashed p-16 text-center"
|
||||
style={{
|
||||
borderColor: 'var(--dashed-border)',
|
||||
background: 'var(--skeleton-bg)',
|
||||
}}
|
||||
>
|
||||
<div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] p-16 text-center">
|
||||
<div className="text-5xl mb-3 opacity-30">🔮</div>
|
||||
<p className="mb-4" style={{ color: 'var(--text-muted)' }}>등록된 심볼이 없습니다</p>
|
||||
<Link
|
||||
to="symbols/new"
|
||||
className="text-sm hover:text-[var(--accent-hover-text)]"
|
||||
style={{ color: 'var(--accent)' }}
|
||||
>
|
||||
<p className="text-gray-400 mb-4">등록된 심볼이 없습니다</p>
|
||||
<Link to="symbols/new" className="text-sm text-emerald-400 hover:text-emerald-300 transition">
|
||||
첫 심볼 추가하기 →
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -145,16 +145,6 @@
|
|||
--liberation-primary-bar: rgba(167, 139, 250, 0.5);
|
||||
--liberation-secondary: #fda4af;
|
||||
--liberation-secondary-bar: rgba(253, 164, 175, 0.5);
|
||||
|
||||
--symbol-arcane-text: #c4b5fd;
|
||||
--symbol-arcane-bg: rgba(139, 92, 246, 0.15);
|
||||
--symbol-arcane-border: rgba(139, 92, 246, 0.3);
|
||||
--symbol-authentic-text: #7dd3fc;
|
||||
--symbol-authentic-bg: rgba(14, 165, 233, 0.15);
|
||||
--symbol-authentic-border: rgba(14, 165, 233, 0.3);
|
||||
--symbol-grand-text: #fcd34d;
|
||||
--symbol-grand-bg: rgba(245, 158, 11, 0.15);
|
||||
--symbol-grand-border: rgba(245, 158, 11, 0.3);
|
||||
}
|
||||
|
||||
/* 테마 토큰 - light */
|
||||
|
|
@ -296,16 +286,6 @@
|
|||
--liberation-primary-bar: rgba(124, 58, 237, 0.5);
|
||||
--liberation-secondary: #e11d48;
|
||||
--liberation-secondary-bar: rgba(225, 29, 72, 0.5);
|
||||
|
||||
--symbol-arcane-text: #6d28d9;
|
||||
--symbol-arcane-bg: rgba(139, 92, 246, 0.12);
|
||||
--symbol-arcane-border: rgba(109, 40, 217, 0.4);
|
||||
--symbol-authentic-text: #0369a1;
|
||||
--symbol-authentic-bg: rgba(14, 165, 233, 0.12);
|
||||
--symbol-authentic-border: rgba(3, 105, 161, 0.4);
|
||||
--symbol-grand-text: #b45309;
|
||||
--symbol-grand-bg: rgba(245, 158, 11, 0.15);
|
||||
--symbol-grand-border: rgba(180, 83, 9, 0.4);
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
|
||||
export const useAuthStore = create(persist(
|
||||
(set) => ({
|
||||
apiKey: '',
|
||||
setApiKey: (k) => set({ apiKey: k }),
|
||||
clearApiKey: () => set({ apiKey: '' }),
|
||||
}),
|
||||
{ name: 'maple-auth' },
|
||||
))
|
||||
Loading…
Add table
Reference in a new issue