심볼 관리자 페이지 UI + 심볼 테이블

- 모델 2개 추가: Symbol (type/region/image/max_level/daily_default/weekly_default/sort_order)
  + SymbolLevel (symbol_id/level/required_count/meso_cost)
- /admin/symbol 라우트와 심볼 목록/편집 UI (결정석 관리 스타일 차용)
- 심볼 목록 dnd-kit 드래그앤드랍 순서 변경
- 심볼 폼: 이미지 업로더, 종류/지역 입력, 만렙·일퀘·주간퀘 입력
- 레벨별 필요 개수/메소 테이블 (만렙에 따라 행 자동 조정)
- 메소 입력 쉼표 포매팅 + "N억 N,NNN만" 한글 요약 (amber, 고정 높이)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

backend/models/index.js

@@ -2,6 +2,8 @@ import { Image } from './Image.js';
 import { Menu } from './Menu.js';
 import { BossCrystalBoss } from './boss-crystal/Boss.js';
 import { BossCrystalBossDifficulty } from './boss-crystal/BossDifficulty.js';
+import { Symbol } from './symbol/Symbol.js';
+import { SymbolLevel } from './symbol/SymbolLevel.js';
 
 // Menu <-> Image
 Menu.belongsTo(Image, { foreignKey: 'image_id', as: 'image', onDelete: 'SET NULL' });
@@ -14,4 +16,12 @@ BossCrystalBoss.hasMany(BossCrystalBossDifficulty, {
 });
 BossCrystalBossDifficulty.belongsTo(BossCrystalBoss, { foreignKey: 'boss_id', as: 'boss' });
 
-export { Image, Menu, BossCrystalBoss, BossCrystalBossDifficulty };
+// Symbol <-> SymbolLevel
+Symbol.hasMany(SymbolLevel, {
+  foreignKey: 'symbol_id',
+  as: 'levels',
+  onDelete: 'CASCADE',
+});
+SymbolLevel.belongsTo(Symbol, { foreignKey: 'symbol_id', as: 'symbol' });
+
+export { Image, Menu, BossCrystalBoss, BossCrystalBossDifficulty, Symbol, SymbolLevel };

backend/models/symbol/Symbol.js

@@ -0,0 +1,23 @@
+import { DataTypes } from 'sequelize';
+import { sequelize } from '../../lib/db.js';
+
+export const Symbol = sequelize.define('Symbol', {
+  id: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true },
+  type: {
+    type: DataTypes.ENUM('아케인', '어센틱', '그랜드 어센틱'),
+    allowNull: false,
+  },
+  region: { type: DataTypes.STRING(32), allowNull: false },
+  image: { type: DataTypes.STRING(255), allowNull: true },
+  max_level: { type: DataTypes.TINYINT, allowNull: false },
+  daily_default: { type: DataTypes.SMALLINT, allowNull: false, defaultValue: 0 },
+  weekly_default: { type: DataTypes.SMALLINT, allowNull: false, defaultValue: 0 },
+  sort_order: { type: DataTypes.INTEGER, allowNull: false, defaultValue: 0 },
+}, {
+  tableName: 'sym_symbols',
+  underscored: true,
+  indexes: [
+    { unique: true, fields: ['type', 'region'] },
+    { fields: ['sort_order'] },
+  ],
+});

backend/models/symbol/SymbolLevel.js

@@ -0,0 +1,16 @@
+import { DataTypes } from 'sequelize';
+import { sequelize } from '../../lib/db.js';
+
+export const SymbolLevel = sequelize.define('SymbolLevel', {
+  id: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true },
+  symbol_id: { type: DataTypes.INTEGER, allowNull: false },
+  level: { type: DataTypes.TINYINT, allowNull: false },
+  required_count: { type: DataTypes.SMALLINT, allowNull: false },
+  meso_cost: { type: DataTypes.INTEGER, allowNull: false },
+}, {
+  tableName: 'sym_levels',
+  underscored: true,
+  indexes: [
+    { unique: true, fields: ['symbol_id', 'level'] },
+  ],
+});

frontend/src/features/symbol/Symbol.jsx

@@ -126,7 +126,7 @@ function SymbolCard({ symbol, equipped }) {
           />
         </div>
         <div className="space-y-1">
-          <label className="block text-xs text-gray-400">주퀘 획득</label>
+          <label className="block text-xs text-gray-400">주간퀘 획득</label>
           <input
             type="text"
             inputMode="numeric"

frontend/src/features/symbol/SymbolAdmin.jsx

@@ -0,0 +1,13 @@
+import { Routes, Route } from 'react-router-dom'
+import SymbolList from './admin/SymbolList'
+import SymbolForm from './admin/SymbolForm'
+
+export default function SymbolAdmin() {
+  return (
+    <Routes>
+      <Route index element={<SymbolList />} />
+      <Route path="symbols/new" element={<SymbolForm />} />
+      <Route path="symbols/:id" element={<SymbolForm />} />
+    </Routes>
+  )
+}

frontend/src/features/symbol/admin/SymbolForm.jsx

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

frontend/src/features/symbol/admin/SymbolList.jsx

@@ -0,0 +1,156 @@
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import {
+  DndContext, DragOverlay, closestCenter, PointerSensor, KeyboardSensor,
+  useSensor, useSensors,
+} from '@dnd-kit/core'
+import {
+  SortableContext, sortableKeyboardCoordinates, useSortable, rectSortingStrategy,
+  arrayMove,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+
+const MOCK_SYMBOLS = [
+  { id: 1, type: '아케인', region: '소멸의 여로', image_url: 'https://s3.caadiq.co.kr/maplestory/symbol/아케인심볼(소멸의 여로).webp', max_level: 20, daily_default: 20, weekly_default: 45 },
+  { id: 2, type: '아케인', region: '츄츄 아일랜드', image_url: 'https://s3.caadiq.co.kr/maplestory/symbol/아케인심볼(츄츄 아일랜드).webp', max_level: 20, daily_default: 20, weekly_default: 45 },
+  { id: 3, type: '어센틱', region: '세르니움', image_url: 'https://s3.caadiq.co.kr/maplestory/symbol/어센틱심볼(세르니움).webp', max_level: 11, daily_default: 10, weekly_default: 25 },
+  { id: 4, type: '그랜드 어센틱', region: '탈라하트', image_url: 'https://s3.caadiq.co.kr/maplestory/symbol/그랜드 어센틱심볼(탈라하트).webp', max_level: 11, daily_default: 0, weekly_default: 30 },
+]
+
+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 color = TYPE_COLOR[symbol.type]
+  return (
+    <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" />
+          <circle cx="4" cy="16" r="1.5" /><circle cx="10" cy="16" r="1.5" />
+        </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 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-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-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 text-gray-500 tabular-nums">
+            <span>만렙 {symbol.max_level}</span>
+            <span>일퀘 {symbol.daily_default}</span>
+            <span>주간퀘 {symbol.weekly_default}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SortableSymbolCard({ symbol }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef } = useSortable({
+    id: symbol.id,
+    transition: { duration: 200, easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)' },
+  })
+  const style = { transform: CSS.Transform.toString(transform), transition }
+  return (
+    <div ref={setNodeRef} 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-white/5 transition touch-none"
+        aria-label="순서 변경"
+      />
+      <Link to={`symbols/${symbol.id}`} className="block group hover:[&_h3]:text-emerald-300 [&_h3]:transition">
+        <SymbolCardContent symbol={symbol} />
+      </Link>
+    </div>
+  )
+}
+
+export default function SymbolList() {
+  const [items, setItems] = useState(MOCK_SYMBOLS)
+  const [activeId, setActiveId] = useState(null)
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  )
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event
+    setActiveId(null)
+    if (!over || active.id === over.id) return
+    const oldIdx = items.findIndex((s) => s.id === active.id)
+    const newIdx = items.findIndex((s) => s.id === over.id)
+    setItems(arrayMove(items, oldIdx, newIdx))
+  }
+
+  const activeSymbol = items.find((s) => s.id === activeId)
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-end justify-between gap-4 flex-wrap">
+        <div>
+          <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 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>
+          심볼 추가
+        </Link>
+      </div>
+
+      {items.length === 0 ? (
+        <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="text-gray-400 mb-4">등록된 심볼이 없습니다</p>
+          <Link to="symbols/new" className="text-sm text-emerald-400 hover:text-emerald-300 transition">
+            첫 심볼 추가하기 →
+          </Link>
+        </div>
+      ) : (
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={(e) => setActiveId(e.active.id)}
+          onDragCancel={() => setActiveId(null)}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext items={items.map((s) => s.id)} strategy={rectSortingStrategy}>
+            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+              {items.map((s) => (
+                <SortableSymbolCard key={s.id} symbol={s} />
+              ))}
+            </div>
+          </SortableContext>
+          <DragOverlay dropAnimation={{ duration: 200, easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)' }}>
+            {activeSymbol ? <SymbolCardContent symbol={activeSymbol} dragging /> : null}
+          </DragOverlay>
+        </DndContext>
+      )}
+    </div>
+  )
+}