검증게시판 기능 추가

2026-05-27 15:41:19 +09:00
parent 7a0af36b9b
commit 63693d47c0
57 changed files with 4480 additions and 14 deletions
@@ -10,6 +10,9 @@ server {
    root         /usr/share/nginx/html;
    index        index.html;

+    # multipart 이미지 업로드 (Spring max-request-size 30MB와 맞춤)
+    client_max_body_size 32m;
+
    # 외부 호스트명 DNS 조회용 resolver (Upbit + Backend 프록시에 필요)
    resolver 127.0.0.11 8.8.8.8 8.8.4.4 valid=30s;
    resolver_timeout 5s;
@@ -67,6 +67,7 @@ import BacktestPanel from './components/BacktestPanel';
 import { useBacktest } from './hooks/useBacktest';
 import LiveStrategyPanel from './components/LiveStrategyPanel';
 import { TradeNotificationProvider } from './contexts/TradeNotificationContext';
+import { VerificationIssueNotificationProvider } from './contexts/VerificationIssueNotificationContext';
 import { LiveSignalNotifier, type LiveSignalNotifierHandle } from './components/LiveSignalNotifier';
 import { NotifyTopMenuBar, ChartToolbarNotify } from './components/NotifyUiBindings';
 import { AppNotificationLayer } from './components/AppNotificationLayer';
@@ -78,6 +79,7 @@ import SettingsPage from './components/SettingsPage';
 import PaperTradingPage from './components/PaperTradingPage';
 import VirtualTradingPage from './components/VirtualTradingPage';
 import TrendSearchPage from './components/TrendSearchPage';
+import VerificationBoardPage from './components/VerificationBoardPage';
 import DashboardPage from './components/DashboardPage';
 import { loadPaperSummary, resetPaperAccount, loadActiveLiveStrategySettings, expandLiveStrategySubscriptions } from './utils/backendApi';
 import ChartLegendBar from './components/ChartLegendBar';
@@ -203,6 +205,7 @@ function App() {
  const [mobileRightOpen, setMobileRightOpen] = useState(false);
  const [mobileRightTab, setMobileRightTab] = useState<'trade' | 'orderbook'>('trade');
  const [menuPage, setMenuPage] = useState<MenuPage>('chart');
+  const [verificationFocusIssueId, setVerificationFocusIssueId] = useState<number | null>(null);
  const chartVisible = menuPage === 'chart';
  const isMobile = useIsMobile();

@@ -1598,6 +1601,10 @@ function App() {
      soundEnabled={appDefaults.tradeAlertSoundEnabled ?? true}
      soundId={appDefaults.tradeAlertSound ?? 'bell'}
    >
+    <VerificationIssueNotificationProvider
+      enabled={canMenu('verification-board')}
+      notifyEnabled={appDefaults.verificationIssueNotify}
+    >
    <div className={`app ${theme} mode-${mode}${isMobile ? ' app--mobile' : ''}`}>
      <LiveSignalNotifier
        ref={liveNotifierRef}
@@ -1700,6 +1707,14 @@ function App() {
        />
      )}

+      {menuPage === 'verification-board' && (
+        <VerificationBoardPage
+          theme={theme}
+          focusIssueId={verificationFocusIssueId}
+          onFocusIssueConsumed={() => setVerificationFocusIssueId(null)}
+        />
+      )}
+
      {/* ── 설정 화면 ──────────────────────────────────────────────────── */}
      {menuPage === 'notifications' && (
        <TradeNotificationListPage
@@ -1818,6 +1833,8 @@ function App() {
          onFcmPushEnabled={v => saveAppDef({ fcmPushEnabled: v })}
          displayTimezone={displayTimezone}
          onDisplayTimezoneChange={handleTimezoneChange}
+          verificationIssueNotify={appDefaults.verificationIssueNotify}
+          onVerificationIssueNotify={v => saveAppDef({ verificationIssueNotify: v })}
          onFcmTest={async () => {
            const { sendFcmTest } = await import('./utils/backendApi');
            const r = await sendFcmTest();
@@ -2563,6 +2580,10 @@ function App() {
        menuPage={menuPage}
        onPage={guardedSetMenuPage}
        onGoToChart={goToMarketChart}
+        onGoToVerificationIssue={issueId => {
+          setVerificationFocusIssueId(issueId);
+          guardedSetMenuPage('verification-board');
+        }}
        tradingMode={appDefaults.tradingMode}
        hasUpbitKeys={appDefaults.hasUpbitKeys}
        paperTradingEnabled={paperTradingEnabled}
@@ -2578,6 +2599,7 @@ function App() {
      />

    </div>
+    </VerificationIssueNotificationProvider>
    </TradeNotificationProvider>
  );
 }
@@ -5,6 +5,7 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import TradeSignalSnackbar from './TradeSignalSnackbar';
 import TradeAlertModal from './TradeAlertModal';
+import VerificationIssueToastStack from './verificationBoard/VerificationIssueToastStack';
 import { useTradeNotification } from '../contexts/TradeNotificationContext';
 import {
  normalizeTradeAlertGridCols,
@@ -12,11 +13,13 @@ import {
  normalizeTradeAlertPopupPosition,
 } from '../utils/tradeAlertPopupLayout';
 import type { MenuPage } from './TopMenuBar';
+import '../styles/verificationBoard.css';

 interface Props {
  menuPage: MenuPage;
  onPage: (page: MenuPage) => void;
  onGoToChart: (market: string) => void;
+  onGoToVerificationIssue?: (issueId: number) => void;
  tradingMode?: string;
  hasUpbitKeys?: boolean;
  paperTradingEnabled?: boolean;
@@ -32,6 +35,7 @@ export const AppNotificationLayer: React.FC<Props> = ({
  menuPage,
  onPage,
  onGoToChart,
+  onGoToVerificationIssue,
  tradingMode,
  hasUpbitKeys,
  paperTradingEnabled,
@@ -73,6 +77,9 @@ export const AppNotificationLayer: React.FC<Props> = ({
          onOrderDone={onOrderDone}
        />
      )}
+      {onGoToVerificationIssue && (
+        <VerificationIssueToastStack onGoToIssue={onGoToVerificationIssue} />
+      )}
    </div>
  );

@@ -142,6 +142,8 @@ interface SettingsPageProps {
  displayTimezone?: string;
  onDisplayTimezoneChange?: (tz: string) => void;
  menuPermissions?: Record<string, boolean>;
+  verificationIssueNotify?: boolean;
+  onVerificationIssueNotify?: (v: boolean) => void;
  trendSearchSettings?: TrendSearchAppSettings;
  onTrendSearchSettingsChange?: (s: TrendSearchAppSettings) => void;
 }
@@ -534,7 +536,16 @@ const PaperPanel: React.FC<PaperPanelProps> = ({
 const GeneralPanel: React.FC<{
  displayTimezone: string;
  onDisplayTimezoneChange: (tz: string) => void;
-}> = ({ displayTimezone, onDisplayTimezoneChange }) => {
+  verificationIssueNotify?: boolean;
+  onVerificationIssueNotify?: (v: boolean) => void;
+  showVerificationNotify?: boolean;
+}> = ({
+  displayTimezone,
+  onDisplayTimezoneChange,
+  verificationIssueNotify = true,
+  onVerificationIssueNotify,
+  showVerificationNotify = true,
+}) => {
  const [lang, setLang]         = useState('ko');
  const [dateFormat, setDateFmt] = useState('YYYY-MM-DD');
  const [startPage, setStart]   = useState('chart');
@@ -567,6 +578,24 @@ const GeneralPanel: React.FC<{
        </SettingRow>
      </SettingSection>

+      {showVerificationNotify && (
+        <SettingSection title="검증게시판">
+          <SettingRow
+            label="검증 이슈 등록 알림"
+            desc="검증 이슈가 등록되거나 단계가 변경될 때 팝업 알림을 표시합니다."
+          >
+            <label className="stg-toggle">
+              <input
+                type="checkbox"
+                checked={verificationIssueNotify}
+                onChange={e => onVerificationIssueNotify?.(e.target.checked)}
+              />
+              <span className="stg-toggle-slider" />
+            </label>
+          </SettingRow>
+        </SettingSection>
+      )}
+
      <SettingSection title="시작 화면">
        <SettingRow label="시작 페이지" desc="앱 시작 시 표시될 기본 화면입니다.">
          <select className="stg-select" value={startPage} onChange={e => setStart(e.target.value)}>
@@ -1458,6 +1487,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
  displayTimezone = 'Asia/Seoul',
  onDisplayTimezoneChange,
  menuPermissions,
+  verificationIssueNotify = true,
+  onVerificationIssueNotify,
  trendSearchSettings,
  onTrendSearchSettingsChange,
 }) => {
@@ -1540,6 +1571,9 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
        <GeneralPanel
          displayTimezone={displayTimezone}
          onDisplayTimezoneChange={onDisplayTimezoneChange ?? (() => {})}
+          verificationIssueNotify={verificationIssueNotify}
+          onVerificationIssueNotify={onVerificationIssueNotify}
+          showVerificationNotify={menuPermissions == null || menuPermissions['verification-board'] === true}
        />
      );
      case 'admin': return (
@@ -11,7 +11,7 @@ import TradeAlertPopupMenubarSelect from './TradeAlertPopupMenubarSelect';
 import type { TradeAlertPopupLayout, TradeAlertPopupPosition } from '../utils/tradeAlertPopupLayout';
 import { canAccessMenu } from '../utils/permissions';

-export type MenuPage = 'dashboard' | 'chart' | 'paper' | 'virtual' | 'trend-search' | 'strategy' | 'strategy-editor' | 'backtest' | 'notifications' | 'settings';
+export type MenuPage = 'dashboard' | 'chart' | 'paper' | 'virtual' | 'trend-search' | 'verification-board' | 'strategy' | 'strategy-editor' | 'backtest' | 'notifications' | 'settings';

 interface TopMenuBarProps {
  activePage: MenuPage;
@@ -137,6 +137,14 @@ const IcTrendSearch = () => (
  </svg>
 );

+const IcVerificationBoard = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="2" y="1.5" width="12" height="13" rx="1.5"/>
+    <path d="M5 5h6M5 8h6M5 11h4"/>
+    <path d="M11.5 10.5l1 1 2-2" strokeWidth="1.3"/>
+  </svg>
+);
+
 const MENU_ITEMS: { page: MenuPage; label: string; icon: React.ReactNode }[] = [
  { page: 'dashboard', label: '대시보드',   icon: <IcDashboard /> },
  { page: 'chart',     label: '실시간차트', icon: <IcChart />     },
@@ -145,6 +153,7 @@ const MENU_ITEMS: { page: MenuPage; label: string; icon: React.ReactNode }[] = [
  { page: 'strategy-editor', label: '전략편집기', icon: <IcStrategyEditor /> },
  { page: 'backtest',  label: '백테스팅',   icon: <IcBacktest />  },
  { page: 'settings',  label: '설정',       icon: <IcSettings />  },
+  { page: 'verification-board', label: '검증게시판', icon: <IcVerificationBoard /> },
 ];

 export const TopMenuBar = memo(function TopMenuBar({
@@ -0,0 +1,250 @@
+/**
+ * 검증게시판 — 좌 목록 + 우 상세
+ */
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import BuilderPageShell from './layout/BuilderPageShell';
+import VerificationIssueListPanel from './verificationBoard/VerificationIssueListPanel';
+import VerificationIssueDetailPanel from './verificationBoard/VerificationIssueDetailPanel';
+import VerificationIssueFormModal from './verificationBoard/VerificationIssueFormModal';
+import type { Theme } from '../types';
+import type { VerificationIssueStage } from '../utils/verificationBoardStages';
+import {
+  deleteVerificationIssue,
+  deleteVerificationIssueImage,
+  loadVerificationIssues,
+  saveVerificationIssue,
+  uploadVerificationIssueImages,
+  type VerificationIssueDto,
+} from '../utils/verificationBoardApi';
+import { prepareImagesForUpload } from '../utils/clipboardImageFiles';
+import '../styles/verificationBoard.css';
+
+interface Props {
+  theme?: Theme;
+  focusIssueId?: number | null;
+  onFocusIssueConsumed?: () => void;
+}
+
+const IconAdd = () => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
+    <path d="M9 3v12M3 9h12" />
+  </svg>
+);
+
+const IconEdit = () => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12.5 2.5l3 3L6 15H3v-3L12.5 2.5z" />
+  </svg>
+);
+
+const IconDelete = () => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M3 5h12M7 5V3h4v2M6 5l.5 10h5L12 5" />
+  </svg>
+);
+
+const VerificationBoardPage: React.FC<Props> = ({
+  theme = 'dark',
+  focusIssueId = null,
+  onFocusIssueConsumed,
+}) => {
+  const [issues, setIssues] = useState<VerificationIssueDto[]>([]);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [stageFilter, setStageFilter] = useState<VerificationIssueStage | ''>('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editTarget, setEditTarget] = useState<VerificationIssueDto | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [detailSaving, setDetailSaving] = useState(false);
+  const [attachmentsRefreshKey, setAttachmentsRefreshKey] = useState(0);
+
+  const reload = useCallback(async (stage?: VerificationIssueStage | '') => {
+    setLoading(true);
+    try {
+      const list = await loadVerificationIssues(stage ?? stageFilter);
+      setIssues(list);
+      setSelectedId(prev => {
+        if (prev != null && list.some(i => i.id === prev)) return prev;
+        return list[0]?.id ?? null;
+      });
+    } catch (e) {
+      console.warn('[VerificationBoard] load', e);
+      window.alert('검증 이슈 목록을 불러오지 못했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  }, [stageFilter]);
+
+  useEffect(() => {
+    void reload(stageFilter);
+  }, [stageFilter]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (focusIssueId == null) return;
+    setSelectedId(focusIssueId);
+    setStageFilter('');
+    onFocusIssueConsumed?.();
+  }, [focusIssueId, onFocusIssueConsumed]);
+
+  const selected = useMemo(
+    () => issues.find(i => i.id === selectedId) ?? null,
+    [issues, selectedId],
+  );
+
+  const handleSelect = useCallback((issue: VerificationIssueDto) => {
+    if (issue.id != null) setSelectedId(issue.id);
+  }, []);
+
+  const handleAdd = useCallback(() => {
+    setEditTarget(null);
+    setModalOpen(true);
+  }, []);
+
+  const handleEdit = useCallback(() => {
+    if (!selected) {
+      window.alert('수정할 이슈를 선택하세요.');
+      return;
+    }
+    setEditTarget(selected);
+    setModalOpen(true);
+  }, [selected]);
+
+  const handleDelete = useCallback(async () => {
+    if (!selected?.id) {
+      window.alert('삭제할 이슈를 선택하세요.');
+      return;
+    }
+    if (!window.confirm(`「${selected.title}」 이슈를 삭제할까요?`)) return;
+    try {
+      await deleteVerificationIssue(selected.id);
+      await reload(stageFilter);
+    } catch (e) {
+      console.warn('[VerificationBoard] delete', e);
+      window.alert('삭제에 실패했습니다.');
+    }
+  }, [selected, reload, stageFilter]);
+
+  const handleSave = useCallback(async (dto: VerificationIssueDto, pendingImages: File[]) => {
+    setSaving(true);
+    try {
+      const saved = await saveVerificationIssue(dto);
+      if (pendingImages.length > 0 && saved.id != null) {
+        await uploadVerificationIssueImages(saved.id, pendingImages);
+      }
+      setModalOpen(false);
+      setEditTarget(null);
+      setAttachmentsRefreshKey(k => k + 1);
+      await reload(stageFilter);
+      if (saved.id != null) setSelectedId(saved.id);
+    } catch (e) {
+      console.warn('[VerificationBoard] save', e);
+      window.alert('저장에 실패했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  }, [reload, stageFilter]);
+
+  const handleDetailSave = useCallback(async (
+    dto: VerificationIssueDto,
+    pendingImages: File[],
+    pendingDeleteIds: number[],
+  ) => {
+    if (dto.id == null) return;
+    setDetailSaving(true);
+    try {
+      const saved = await saveVerificationIssue(dto);
+      const issueId = saved.id ?? dto.id;
+      for (const imageId of pendingDeleteIds) {
+        await deleteVerificationIssueImage(issueId, imageId);
+      }
+      if (pendingImages.length > 0) {
+        const prepared = await prepareImagesForUpload(pendingImages);
+        await uploadVerificationIssueImages(issueId, prepared);
+      }
+      setAttachmentsRefreshKey(k => k + 1);
+      await reload(stageFilter);
+      if (issueId != null) setSelectedId(issueId);
+    } catch (e) {
+      console.warn('[VerificationBoard] detail save', e);
+      window.alert('저장에 실패했습니다.');
+    } finally {
+      setDetailSaving(false);
+    }
+  }, [reload, stageFilter]);
+
+  return (
+    <>
+      <BuilderPageShell
+        theme={theme}
+        title="검증게시판"
+        subtitle="Golden QA · Verification Board"
+        pageClassName="bps-page--vbd"
+        loading={loading}
+        loadingText="검증 이슈 로딩 중…"
+        headerActions={(
+          <div className="vbd-header-actions">
+            <button type="button" className="vbd-icon-btn" onClick={handleAdd} title="이슈 추가">
+              <IconAdd />
+              <span className="vbd-icon-btn-label">추가</span>
+            </button>
+            <button
+              type="button"
+              className="vbd-icon-btn"
+              onClick={handleEdit}
+              disabled={!selected}
+              title="이슈 수정"
+            >
+              <IconEdit />
+              <span className="vbd-icon-btn-label">수정</span>
+            </button>
+            <button
+              type="button"
+              className="vbd-icon-btn vbd-icon-btn--danger"
+              onClick={() => void handleDelete()}
+              disabled={!selected}
+              title="이슈 삭제"
+            >
+              <IconDelete />
+              <span className="vbd-icon-btn-label">삭제</span>
+            </button>
+          </div>
+        )}
+        leftStorageKey="vbd-left-width"
+        leftDefaultWidth={320}
+        leftCollapsedStorageKey="vbd-left-open"
+        collapsiblePanels
+        leftTitle="검증 이슈"
+        left={(
+          <VerificationIssueListPanel
+            issues={issues}
+            selectedId={selectedId}
+            stageFilter={stageFilter}
+            searchQuery={searchQuery}
+            onStageFilterChange={setStageFilter}
+            onSearchChange={setSearchQuery}
+            onSelect={handleSelect}
+          />
+        )}
+        center={(
+          <VerificationIssueDetailPanel
+            issue={selected}
+            attachmentsRefreshKey={attachmentsRefreshKey}
+            saving={detailSaving}
+            onSave={handleDetailSave}
+          />
+        )}
+      />
+
+      <VerificationIssueFormModal
+        open={modalOpen}
+        initial={editTarget}
+        saving={saving}
+        onSave={(dto, pendingImages) => void handleSave(dto, pendingImages)}
+        onCancel={() => { setModalOpen(false); setEditTarget(null); }}
+      />
+    </>
+  );
+};
+
+export default VerificationBoardPage;
@@ -0,0 +1,115 @@
+/**
+ * 재현경로 입력 — 직접 입력 + 관련 메뉴 경로 자동완성
+ */
+import React, { useEffect, useId, useRef, useState } from 'react';
+import { searchAppNavigationPaths } from '../../utils/appNavigationPaths';
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+const ReproductionPathInput: React.FC<Props> = ({
+  value,
+  onChange,
+  disabled = false,
+  placeholder = '예: 메뉴-실시간 차트-지표 추가 버튼',
+}) => {
+  const listId = useId();
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [activeIdx, setActiveIdx] = useState(-1);
+
+  const suggestions = searchAppNavigationPaths(value);
+
+  useEffect(() => {
+    setActiveIdx(-1);
+  }, [value, suggestions.length]);
+
+  useEffect(() => {
+    const onDoc = (e: MouseEvent) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, []);
+
+  const pick = (path: string) => {
+    onChange(path);
+    setOpen(false);
+    setActiveIdx(-1);
+  };
+
+  const showList = open && !disabled && suggestions.length > 0;
+
+  return (
+    <div className="vbd-path-wrap" ref={wrapRef}>
+      <input
+        type="text"
+        className="vbd-path-input"
+        value={value}
+        disabled={disabled}
+        placeholder={placeholder}
+        autoComplete="off"
+        aria-autocomplete="list"
+        aria-controls={showList ? listId : undefined}
+        aria-expanded={showList}
+        onChange={e => {
+          onChange(e.target.value);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        onKeyDown={e => {
+          if (!showList) {
+            if (e.key === 'ArrowDown' && suggestions.length > 0) {
+              setOpen(true);
+              setActiveIdx(0);
+              e.preventDefault();
+            }
+            return;
+          }
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActiveIdx(i => Math.min(i + 1, suggestions.length - 1));
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActiveIdx(i => Math.max(i - 1, 0));
+          } else if (e.key === 'Enter' && activeIdx >= 0) {
+            e.preventDefault();
+            pick(suggestions[activeIdx]!.path);
+          } else if (e.key === 'Escape') {
+            setOpen(false);
+            setActiveIdx(-1);
+          }
+        }}
+      />
+      {showList && (
+        <ul id={listId} className="vbd-path-suggest" role="listbox">
+          {suggestions.map((s, i) => (
+            <li key={s.path} role="presentation">
+              <button
+                type="button"
+                role="option"
+                aria-selected={i === activeIdx}
+                className={`vbd-path-suggest-item${i === activeIdx ? ' vbd-path-suggest-item--active' : ''}`}
+                onMouseDown={e => e.preventDefault()}
+                onClick={() => pick(s.path)}
+              >
+                {s.path}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      {open && value.trim() && suggestions.length === 0 && (
+        <p className="vbd-path-hint">일치하는 메뉴 경로가 없습니다. 직접 입력한 경로가 저장됩니다.</p>
+      )}
+    </div>
+  );
+};
+
+export default ReproductionPathInput;
@@ -0,0 +1,394 @@
+/**
+ * 검증 이슈 첨부 이미지 — 파일 선택·드래그·클립보드 붙여넣기
+ * issueId 있음: 서버 즉시 업로드 / 없음: draft 로컬 보관(등록 시 저장 후 업로드)
+ */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  deleteVerificationIssueImage,
+  loadVerificationIssueImages,
+  uploadVerificationIssueImages,
+  verificationIssueImageUrl,
+  type VerificationIssueImageDto,
+} from '../../utils/verificationBoardApi';
+import {
+  filesFromClipboardRead,
+  filesFromDataTransfer,
+  pickImageFiles,
+  prepareImagesForUpload,
+} from '../../utils/clipboardImageFiles';
+
+function uploadErrorMessage(e: unknown): string {
+  if (e instanceof Error) {
+    if (e.message === 'IMAGE_TOO_LARGE') {
+      return '이미지가 너무 큽니다. 5MB 이하로 줄인 뒤 다시 시도하세요.';
+    }
+    if (e.message === 'IMAGE_READ_FAILED') {
+      return '이미지를 읽을 수 없습니다.';
+    }
+    if (e.message) return e.message;
+  }
+  return '이미지 업로드에 실패했습니다.';
+}
+
+interface Props {
+  /** 저장된 이슈 ID — 수정·상세 화면 */
+  issueId?: number | null;
+  /** 등록 draft — 저장 전 로컬 파일 */
+  draftFiles?: File[];
+  onDraftFilesChange?: (files: File[]) => void;
+  /** 상세 화면 — 저장 시 삭제할 서버 이미지 ID */
+  pendingDeleteIds?: number[];
+  onPendingDeleteIdsChange?: (ids: number[]) => void;
+  /** true: 추가·삭제를 저장 버튼까지 지연 (상세 편집) */
+  deferUpload?: boolean;
+  disabled?: boolean;
+  /** 모달 등 좁은 영역 */
+  compact?: boolean;
+}
+
+interface CtxMenuState {
+  x: number;
+  y: number;
+}
+
+const VerificationIssueAttachmentsSection: React.FC<Props> = ({
+  issueId = null,
+  draftFiles = [],
+  onDraftFilesChange,
+  pendingDeleteIds = [],
+  onPendingDeleteIdsChange,
+  deferUpload = false,
+  disabled = false,
+  compact = false,
+}) => {
+  const isDraft = issueId == null;
+  const saveOnSubmit = deferUpload && issueId != null;
+  const [images, setImages] = useState<VerificationIssueImageDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const [ctxMenu, setCtxMenu] = useState<CtxMenuState | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const zoneRef = useRef<HTMLDivElement>(null);
+
+  const reload = useCallback(async () => {
+    if (issueId == null) return;
+    setLoading(true);
+    try {
+      setImages(await loadVerificationIssueImages(issueId));
+    } catch (e) {
+      console.warn('[VerificationBoard] images load', e);
+    } finally {
+      setLoading(false);
+    }
+  }, [issueId]);
+
+  useEffect(() => {
+    if (issueId != null) void reload();
+    else setImages([]);
+  }, [issueId, reload]);
+
+  const draftPreviews = useMemo(
+    () => draftFiles.map((file, index) => ({
+      key: `${file.name}-${file.size}-${file.lastModified}-${index}`,
+      index,
+      fileName: file.name,
+      src: URL.createObjectURL(file),
+    })),
+    [draftFiles],
+  );
+
+  useEffect(() => () => {
+    draftPreviews.forEach(p => URL.revokeObjectURL(p.src));
+  }, [draftPreviews]);
+
+  useEffect(() => {
+    const close = () => setCtxMenu(null);
+    window.addEventListener('click', close);
+    window.addEventListener('scroll', close, true);
+    return () => {
+      window.removeEventListener('click', close);
+      window.removeEventListener('scroll', close, true);
+    };
+  }, []);
+
+  const addDraftFiles = useCallback(async (files: File[]) => {
+    const imgs = pickImageFiles(files);
+    if (imgs.length === 0) {
+      window.alert('이미지 파일(jpeg, png, gif, webp, bmp)만 첨부할 수 있습니다.');
+      return;
+    }
+    setUploading(true);
+    try {
+      const prepared = await prepareImagesForUpload(imgs);
+      onDraftFilesChange?.([...draftFiles, ...prepared]);
+    } catch (e) {
+      window.alert(uploadErrorMessage(e));
+    } finally {
+      setUploading(false);
+    }
+  }, [draftFiles, onDraftFilesChange]);
+
+  const uploadFiles = useCallback(async (files: File[]) => {
+    if (issueId == null || saveOnSubmit) {
+      await addDraftFiles(files);
+      return;
+    }
+    const imgs = pickImageFiles(files);
+    if (imgs.length === 0) {
+      window.alert('이미지 파일(jpeg, png, gif, webp, bmp)만 첨부할 수 있습니다.');
+      return;
+    }
+    setUploading(true);
+    try {
+      const prepared = await prepareImagesForUpload(imgs);
+      await uploadVerificationIssueImages(issueId, prepared);
+      await reload();
+    } catch (e) {
+      console.warn('[VerificationBoard] image upload', e);
+      window.alert(uploadErrorMessage(e));
+    } finally {
+      setUploading(false);
+    }
+  }, [issueId, saveOnSubmit, addDraftFiles, reload]);
+
+  const pasteFromClipboard = useCallback(async () => {
+    setCtxMenu(null);
+    try {
+      const files = await filesFromClipboardRead();
+      if (files.length === 0) {
+        window.alert('클립보드에 붙여넣을 수 있는 이미지(png, jpeg 등)가 없습니다.');
+        return;
+      }
+      await uploadFiles(files);
+    } catch (e) {
+      if (e instanceof Error && e.message === 'CLIPBOARD_UNSUPPORTED') {
+        window.alert('이 브라우저에서는 클립보드 이미지 읽기를 지원하지 않습니다.');
+        return;
+      }
+      window.alert('클립보드 접근이 거부되었습니다. 브라우저 권한을 확인하세요.');
+    }
+  }, [uploadFiles]);
+
+  const handleDeleteServer = async (imageId: number) => {
+    if (issueId == null) return;
+    if (!window.confirm('이 이미지를 삭제할까요?')) return;
+    if (saveOnSubmit) {
+      onPendingDeleteIdsChange?.(
+        pendingDeleteIds.includes(imageId)
+          ? pendingDeleteIds
+          : [...pendingDeleteIds, imageId],
+      );
+      return;
+    }
+    try {
+      await deleteVerificationIssueImage(issueId, imageId);
+      await reload();
+    } catch (e) {
+      console.warn('[VerificationBoard] image delete', e);
+      window.alert('이미지 삭제에 실패했습니다.');
+    }
+  };
+
+  const handleDeleteDraft = (index: number) => {
+    onDraftFilesChange?.(draftFiles.filter((_, i) => i !== index));
+  };
+
+  const openImage = (src: string) => {
+    window.open(src, '_blank', 'noopener,noreferrer');
+  };
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setCtxMenu({ x: e.clientX, y: e.clientY });
+  };
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    if (disabled) return;
+    const files = filesFromDataTransfer(e.clipboardData);
+    if (files.length === 0) return;
+    e.preventDefault();
+    void uploadFiles(files);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    if (disabled) return;
+    e.preventDefault();
+    setDragOver(false);
+    const fromTransfer = filesFromDataTransfer(e.dataTransfer);
+    if (fromTransfer.length > 0) void uploadFiles(fromTransfer);
+  };
+
+  const visibleServerImages = useMemo(
+    () => images.filter(img => img.id != null && !pendingDeleteIds.includes(img.id)),
+    [images, pendingDeleteIds],
+  );
+
+  const totalCount = isDraft || saveOnSubmit
+    ? visibleServerImages.length + draftFiles.length
+    : images.length;
+  const showEmptyHint = !loading && totalCount === 0;
+
+  return (
+    <div className={`vbd-attachments${compact ? ' vbd-attachments--compact' : ''}`}>
+      <div className="vbd-attachments-head">
+        <h3 className="vbd-attachments-title">
+          첨부 이미지 {totalCount > 0 && `(${totalCount})`}
+        </h3>
+        <button
+          type="button"
+          className="vbd-btn vbd-btn--sm"
+          onClick={() => fileInputRef.current?.click()}
+          disabled={disabled || uploading}
+        >
+          파일 선택
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/jpeg,image/png,image/gif,image/webp,image/bmp"
+          multiple
+          hidden
+          disabled={disabled}
+          onChange={e => {
+            const files = e.target.files;
+            if (files?.length) void uploadFiles(pickImageFiles(files));
+            e.target.value = '';
+          }}
+        />
+      </div>
+
+      <div
+        ref={zoneRef}
+        className={`vbd-attach-zone${dragOver ? ' vbd-attach-zone--over' : ''}${disabled ? ' vbd-attach-zone--disabled' : ''}`}
+        tabIndex={disabled ? -1 : 0}
+        role="region"
+        aria-label="이미지 첨부 영역"
+        onContextMenu={handleContextMenu}
+        onPaste={handlePaste}
+        onDragEnter={e => { if (disabled) return; e.preventDefault(); setDragOver(true); }}
+        onDragOver={e => { if (disabled) return; e.preventDefault(); setDragOver(true); }}
+        onDragLeave={e => {
+          if (zoneRef.current && !zoneRef.current.contains(e.relatedTarget as Node)) {
+            setDragOver(false);
+          }
+        }}
+        onDrop={handleDrop}
+      >
+        {loading && issueId != null && !isDraft && images.length === 0 ? (
+          <p className="vbd-attach-hint">이미지 불러오는 중…</p>
+        ) : showEmptyHint ? (
+          <p className="vbd-attach-hint">
+            {isDraft || saveOnSubmit
+              ? '저장 시 함께 반영됩니다. 드래그·우클릭 붙여넣기·파일 선택'
+              : '이미지를 드래그하거나, 우클릭 → 클립보드 붙여넣기, 또는 「파일 선택」'}
+          </p>
+        ) : (
+          <div className="vbd-attach-grid">
+            {(isDraft || saveOnSubmit) && visibleServerImages.map(img => {
+                if (img.id == null) return null;
+                const src = verificationIssueImageUrl(issueId!, img.id);
+                return (
+                  <figure key={img.id} className="vbd-attach-item">
+                    <button
+                      type="button"
+                      className="vbd-attach-thumb"
+                      title={`${img.fileName ?? '첨부 이미지'} — 더블클릭하여 열기`}
+                      onDoubleClick={() => openImage(src)}
+                    >
+                      <img src={src} alt={img.fileName ?? '첨부 이미지'} loading="lazy" draggable={false} />
+                    </button>
+                    <figcaption className="vbd-attach-caption" title={img.fileName}>
+                      {img.fileName}
+                    </figcaption>
+                    <button
+                      type="button"
+                      className="vbd-attach-remove"
+                      title="삭제"
+                      disabled={disabled}
+                      onClick={() => void handleDeleteServer(img.id!)}
+                    >
+                      ✕
+                    </button>
+                  </figure>
+                );
+              })}
+            {(isDraft || saveOnSubmit)
+              ? draftPreviews.map(p => (
+                <figure key={p.key} className="vbd-attach-item">
+                  <button
+                    type="button"
+                    className="vbd-attach-thumb"
+                    title={`${p.fileName} — 더블클릭하여 열기`}
+                    onDoubleClick={() => openImage(p.src)}
+                  >
+                    <img src={p.src} alt={p.fileName} draggable={false} />
+                  </button>
+                  <figcaption className="vbd-attach-caption" title={p.fileName}>
+                    {p.fileName}
+                  </figcaption>
+                  <button
+                    type="button"
+                    className="vbd-attach-remove"
+                    title="삭제"
+                    disabled={disabled}
+                    onClick={() => handleDeleteDraft(p.index)}
+                  >
+                    ✕
+                  </button>
+                </figure>
+              ))
+              : !saveOnSubmit && images.map(img => {
+                if (img.id == null) return null;
+                const src = verificationIssueImageUrl(issueId!, img.id);
+                return (
+                  <figure key={img.id} className="vbd-attach-item">
+                    <button
+                      type="button"
+                      className="vbd-attach-thumb"
+                      title={`${img.fileName ?? '첨부 이미지'} — 더블클릭하여 열기`}
+                      onDoubleClick={() => openImage(src)}
+                    >
+                      <img src={src} alt={img.fileName ?? '첨부 이미지'} loading="lazy" draggable={false} />
+                    </button>
+                    <figcaption className="vbd-attach-caption" title={img.fileName}>
+                      {img.fileName}
+                    </figcaption>
+                    <button
+                      type="button"
+                      className="vbd-attach-remove"
+                      title="삭제"
+                      disabled={disabled}
+                      onClick={() => void handleDeleteServer(img.id!)}
+                    >
+                      ✕
+                    </button>
+                  </figure>
+                );
+              })}
+          </div>
+        )}
+        {uploading && <div className="vbd-attach-uploading">업로드 중…</div>}
+      </div>
+
+      {ctxMenu && (
+        <div
+          className="vbd-attach-ctx"
+          style={{ left: ctxMenu.x, top: ctxMenu.y }}
+          onClick={e => e.stopPropagation()}
+        >
+          <button type="button" onClick={() => { setCtxMenu(null); fileInputRef.current?.click(); }}>
+            파일에서 선택…
+          </button>
+          <button type="button" onClick={() => void pasteFromClipboard()}>
+            클립보드 이미지 붙여넣기
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default VerificationIssueAttachmentsSection;
@@ -0,0 +1,231 @@
+/**
+ * 검증 이슈 댓글 — 목록·추가·수정·삭제
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+import { getAuthSession } from '../../utils/auth';
+import {
+  createVerificationIssueComment,
+  deleteVerificationIssueComment,
+  loadVerificationIssueComments,
+  updateVerificationIssueComment,
+  type VerificationIssueCommentDto,
+} from '../../utils/verificationBoardApi';
+
+interface Props {
+  issueId: number;
+}
+
+function formatDateTime(iso?: string): string {
+  if (!iso) return '';
+  try {
+    return new Date(iso).toLocaleString('ko-KR', {
+      month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
+    });
+  } catch { return ''; }
+}
+
+function defaultAuthorName(): string {
+  const session = getAuthSession();
+  if (session?.displayName) return session.displayName;
+  return '게스트';
+}
+
+const VerificationIssueCommentsSection: React.FC<Props> = ({ issueId }) => {
+  const [comments, setComments] = useState<VerificationIssueCommentDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [newContent, setNewContent] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editContent, setEditContent] = useState('');
+
+  const reload = useCallback(async () => {
+    setLoading(true);
+    try {
+      const list = await loadVerificationIssueComments(issueId);
+      setComments(list);
+    } catch (e) {
+      console.warn('[VerificationBoard] comments load', e);
+    } finally {
+      setLoading(false);
+    }
+  }, [issueId]);
+
+  useEffect(() => {
+    setEditingId(null);
+    setEditContent('');
+    setNewContent('');
+    void reload();
+  }, [issueId, reload]);
+
+  const handleAdd = async () => {
+    const content = newContent.trim();
+    if (!content) {
+      window.alert('댓글 내용을 입력하세요.');
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await createVerificationIssueComment(issueId, {
+        content,
+        authorName: defaultAuthorName(),
+      });
+      setNewContent('');
+      await reload();
+    } catch (e) {
+      console.warn('[VerificationBoard] comment add', e);
+      window.alert('댓글 등록에 실패했습니다.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const startEdit = (c: VerificationIssueCommentDto) => {
+    if (c.id == null) return;
+    setEditingId(c.id);
+    setEditContent(c.content);
+  };
+
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditContent('');
+  };
+
+  const handleSaveEdit = async (commentId: number) => {
+    const content = editContent.trim();
+    if (!content) {
+      window.alert('댓글 내용을 입력하세요.');
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await updateVerificationIssueComment(issueId, commentId, { content });
+      cancelEdit();
+      await reload();
+    } catch (e) {
+      console.warn('[VerificationBoard] comment edit', e);
+      window.alert('댓글 수정에 실패했습니다.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleDelete = async (commentId: number) => {
+    if (!window.confirm('이 댓글을 삭제할까요?')) return;
+    setSubmitting(true);
+    try {
+      await deleteVerificationIssueComment(issueId, commentId);
+      if (editingId === commentId) cancelEdit();
+      await reload();
+    } catch (e) {
+      console.warn('[VerificationBoard] comment delete', e);
+      window.alert('댓글 삭제에 실패했습니다.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="vbd-comments">
+      <div className="vbd-comments-header">
+        <h3 className="vbd-comments-title">댓글 {comments.length > 0 && `(${comments.length})`}</h3>
+      </div>
+
+      <div className="vbd-comments-list">
+        {loading && comments.length === 0 ? (
+          <p className="vbd-comments-empty">댓글 불러오는 중…</p>
+        ) : comments.length === 0 ? (
+          <p className="vbd-comments-empty">아직 댓글이 없습니다.</p>
+        ) : comments.map(c => {
+          const isEditing = c.id === editingId;
+          return (
+            <article key={c.id} className="vbd-comment">
+              <div className="vbd-comment-head">
+                <span className="vbd-comment-author">{c.authorName ?? '익명'}</span>
+                <span className="vbd-comment-date">
+                  {formatDateTime(c.updatedAt ?? c.createdAt)}
+                  {c.updatedAt && c.createdAt && c.updatedAt !== c.createdAt && ' (수정됨)'}
+                </span>
+                <div className="vbd-comment-actions">
+                  {!isEditing && (
+                    <>
+                      <button
+                        type="button"
+                        className="vbd-comment-action"
+                        onClick={() => startEdit(c)}
+                        disabled={submitting}
+                      >
+                        수정
+                      </button>
+                      <button
+                        type="button"
+                        className="vbd-comment-action vbd-comment-action--danger"
+                        onClick={() => c.id != null && void handleDelete(c.id)}
+                        disabled={submitting}
+                      >
+                        삭제
+                      </button>
+                    </>
+                  )}
+                </div>
+              </div>
+              {isEditing ? (
+                <div className="vbd-comment-edit">
+                  <textarea
+                    className="vbd-comment-textarea"
+                    value={editContent}
+                    onChange={e => setEditContent(e.target.value)}
+                    rows={3}
+                    disabled={submitting}
+                  />
+                  <div className="vbd-comment-edit-actions">
+                    <button
+                      type="button"
+                      className="vbd-btn vbd-btn--sm"
+                      onClick={cancelEdit}
+                      disabled={submitting}
+                    >
+                      취소
+                    </button>
+                    <button
+                      type="button"
+                      className="vbd-btn vbd-btn--sm vbd-btn--primary"
+                      onClick={() => c.id != null && void handleSaveEdit(c.id)}
+                      disabled={submitting}
+                    >
+                      저장
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <p className="vbd-comment-body">{c.content}</p>
+              )}
+            </article>
+          );
+        })}
+      </div>
+
+      <div className="vbd-comment-compose">
+        <textarea
+          className="vbd-comment-textarea"
+          placeholder="댓글을 입력하세요…"
+          value={newContent}
+          onChange={e => setNewContent(e.target.value)}
+          rows={3}
+          disabled={submitting}
+        />
+        <div className="vbd-comment-compose-actions">
+          <button
+            type="button"
+            className="vbd-btn vbd-btn--primary"
+            onClick={() => void handleAdd()}
+            disabled={submitting || !newContent.trim()}
+          >
+            {submitting ? '등록 중…' : '댓글 등록'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VerificationIssueCommentsSection;
@@ -0,0 +1,210 @@
+/**
+ * 검증게시판 — 우측 이슈 상세 (인라인 편집 + 저장)
+ */
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import type { VerificationIssueDto } from '../../utils/verificationBoardApi';
+import {
+  VERIFICATION_ISSUE_STAGES,
+  stageColor,
+  type VerificationIssueStage,
+} from '../../utils/verificationBoardStages';
+import ReproductionPathInput from './ReproductionPathInput';
+import VerificationIssueCommentsSection from './VerificationIssueCommentsSection';
+import VerificationIssueAttachmentsSection from './VerificationIssueAttachmentsSection';
+
+interface Props {
+  issue: VerificationIssueDto | null;
+  attachmentsRefreshKey?: number;
+  saving?: boolean;
+  onSave?: (
+    dto: VerificationIssueDto,
+    pendingImages: File[],
+    pendingDeleteIds: number[],
+  ) => void | Promise<void>;
+}
+
+function formatDateTime(iso?: string): string {
+  if (!iso) return '—';
+  try {
+    return new Date(iso).toLocaleString('ko-KR');
+  } catch { return iso; }
+}
+
+const VerificationIssueDetailPanel: React.FC<Props> = ({
+  issue,
+  attachmentsRefreshKey = 0,
+  saving = false,
+  onSave,
+}) => {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [reproductionPath, setReproductionPath] = useState('');
+  const [stage, setStage] = useState<VerificationIssueStage>('REGISTERED');
+  const [pendingImages, setPendingImages] = useState<File[]>([]);
+  const [pendingDeleteIds, setPendingDeleteIds] = useState<number[]>([]);
+
+  const resetFromIssue = useCallback((src: VerificationIssueDto) => {
+    setTitle(src.title ?? '');
+    setContent(src.content ?? '');
+    setReproductionPath(src.reproductionPath ?? '');
+    setStage(src.stage ?? 'REGISTERED');
+    setPendingImages([]);
+    setPendingDeleteIds([]);
+  }, []);
+
+  useEffect(() => {
+    if (issue) resetFromIssue(issue);
+  }, [issue?.id, attachmentsRefreshKey, resetFromIssue]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const dirty = useMemo(() => {
+    if (!issue) return false;
+    const pathTrimmed = reproductionPath.trim();
+    const issuePath = (issue.reproductionPath ?? '').trim();
+    return (
+      title.trim() !== (issue.title ?? '').trim()
+      || content.trim() !== (issue.content ?? '').trim()
+      || pathTrimmed !== issuePath
+      || stage !== issue.stage
+      || pendingImages.length > 0
+      || pendingDeleteIds.length > 0
+    );
+  }, [issue, title, content, reproductionPath, stage, pendingImages, pendingDeleteIds]);
+
+  const handleCancel = () => {
+    if (issue) resetFromIssue(issue);
+  };
+
+  const handleSave = () => {
+    if (!issue?.id || !onSave) return;
+    const trimmed = title.trim();
+    if (!trimmed) {
+      window.alert('제목을 입력하세요.');
+      return;
+    }
+    const pathTrimmed = reproductionPath.trim();
+    void onSave(
+      {
+        id: issue.id,
+        title: trimmed,
+        content: content.trim(),
+        reproductionPath: pathTrimmed || undefined,
+        stage,
+      },
+      pendingImages,
+      pendingDeleteIds,
+    );
+  };
+
+  if (!issue) {
+    return (
+      <div className="vbd-detail vbd-detail--empty">
+        <p>좌측 목록에서 검증 이슈를 선택하세요.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="vbd-detail">
+      <div className="vbd-detail-scroll">
+        <div className="vbd-detail-title-row">
+          <input
+            type="text"
+            className="vbd-detail-title-input"
+            value={title}
+            onChange={e => setTitle(e.target.value)}
+            maxLength={300}
+            disabled={saving}
+            placeholder="검증 이슈 제목"
+            aria-label="제목"
+          />
+          <select
+            value={stage}
+            onChange={e => setStage(e.target.value as VerificationIssueStage)}
+            disabled={saving}
+            className="vbd-detail-stage-select"
+            aria-label="단계"
+            title="처리 단계"
+            style={{
+              borderColor: `${stageColor(stage)}55`,
+              color: stageColor(stage),
+              backgroundColor: `${stageColor(stage)}14`,
+            }}
+          >
+            {VERIFICATION_ISSUE_STAGES.map(s => (
+              <option key={s.value} value={s.value}>{s.label}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="vbd-detail-meta">
+          <span>등록 {formatDateTime(issue.createdAt)}</span>
+          <span>수정 {formatDateTime(issue.updatedAt)}</span>
+        </div>
+
+        <label className="vbd-field">
+          <span className="vbd-field-label">재현경로</span>
+          <ReproductionPathInput
+            value={reproductionPath}
+            onChange={setReproductionPath}
+            disabled={saving}
+          />
+        </label>
+
+        <label className="vbd-field vbd-field--grow">
+          <span className="vbd-field-label">내용</span>
+          <textarea
+            className="vbd-detail-content-input"
+            value={content}
+            onChange={e => setContent(e.target.value)}
+            rows={12}
+            disabled={saving}
+            placeholder="문제점·재현 방법·기대 결과 등"
+          />
+        </label>
+
+        {issue.id != null && (
+          <VerificationIssueAttachmentsSection
+            key={`${issue.id}-${attachmentsRefreshKey}`}
+            issueId={issue.id}
+            deferUpload
+            draftFiles={pendingImages}
+            onDraftFilesChange={setPendingImages}
+            pendingDeleteIds={pendingDeleteIds}
+            onPendingDeleteIdsChange={setPendingDeleteIds}
+            disabled={saving}
+          />
+        )}
+
+        {issue.id != null && (
+          <VerificationIssueCommentsSection issueId={issue.id} />
+        )}
+      </div>
+
+      <div className="vbd-detail-footer">
+        <span className="vbd-detail-dirty-hint">
+          {dirty ? '저장하지 않은 변경 사항이 있습니다.' : ''}
+        </span>
+        <div className="vbd-detail-footer-actions">
+          <button
+            type="button"
+            className="vbd-btn"
+            onClick={handleCancel}
+            disabled={saving || !dirty}
+          >
+            취소
+          </button>
+          <button
+            type="button"
+            className="vbd-btn vbd-btn--primary"
+            onClick={handleSave}
+            disabled={saving || !dirty}
+          >
+            {saving ? '저장 중…' : '저장'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VerificationIssueDetailPanel;
@@ -0,0 +1,134 @@
+/**
+ * 검증 이슈 등록·수정 모달
+ */
+import React, { useEffect, useState } from 'react';
+import type { VerificationIssueDto } from '../../utils/verificationBoardApi';
+import {
+  VERIFICATION_ISSUE_STAGES,
+  type VerificationIssueStage,
+} from '../../utils/verificationBoardStages';
+import ReproductionPathInput from './ReproductionPathInput';
+import VerificationIssueAttachmentsSection from './VerificationIssueAttachmentsSection';
+
+interface Props {
+  open: boolean;
+  initial: VerificationIssueDto | null;
+  saving: boolean;
+  onSave: (dto: VerificationIssueDto, pendingImages: File[]) => void;
+  onCancel: () => void;
+}
+
+const EMPTY: VerificationIssueDto = {
+  title: '',
+  content: '',
+  reproductionPath: '',
+  stage: 'REGISTERED',
+};
+
+const VerificationIssueFormModal: React.FC<Props> = ({
+  open, initial, saving, onSave, onCancel,
+}) => {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [reproductionPath, setReproductionPath] = useState('');
+  const [stage, setStage] = useState<VerificationIssueStage>('REGISTERED');
+  const [draftImages, setDraftImages] = useState<File[]>([]);
+
+  useEffect(() => {
+    if (!open) return;
+    setTitle(initial?.title ?? '');
+    setContent(initial?.content ?? '');
+    setReproductionPath(initial?.reproductionPath ?? '');
+    setStage(initial?.stage ?? 'REGISTERED');
+    setDraftImages([]);
+  }, [open, initial]);
+
+  if (!open) return null;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = title.trim();
+    if (!trimmed) {
+      window.alert('제목을 입력하세요.');
+      return;
+    }
+    const pathTrimmed = reproductionPath.trim();
+    onSave({
+      ...(initial?.id != null ? { id: initial.id } : {}),
+      title: trimmed,
+      content: content.trim(),
+      reproductionPath: pathTrimmed || undefined,
+      stage,
+    }, initial?.id == null ? draftImages : []);
+  };
+
+  return (
+    <div className="vbd-modal-overlay" onMouseDown={e => { if (e.target === e.currentTarget) onCancel(); }}>
+      <div className="vbd-modal vbd-modal--wide" role="dialog" aria-modal="true" aria-labelledby="vbd-modal-title">
+        <div className="vbd-modal-header">
+          <h3 id="vbd-modal-title">{initial?.id != null ? '검증 이슈 수정' : '검증 이슈 등록'}</h3>
+          <button type="button" className="vbd-modal-close" onClick={onCancel} aria-label="닫기">✕</button>
+        </div>
+        <form className="vbd-modal-form" onSubmit={handleSubmit}>
+          <label className="vbd-field">
+            <span className="vbd-field-label">단계</span>
+            <select
+              value={stage}
+              onChange={e => setStage(e.target.value as VerificationIssueStage)}
+            >
+              {VERIFICATION_ISSUE_STAGES.map(s => (
+                <option key={s.value} value={s.value}>{s.label}</option>
+              ))}
+            </select>
+          </label>
+          <label className="vbd-field">
+            <span className="vbd-field-label">제목</span>
+            <input
+              type="text"
+              value={title}
+              onChange={e => setTitle(e.target.value)}
+              maxLength={300}
+              autoFocus
+              placeholder="검증 이슈 제목"
+            />
+          </label>
+          <label className="vbd-field">
+            <span className="vbd-field-label">재현경로</span>
+            <ReproductionPathInput
+              value={reproductionPath}
+              onChange={setReproductionPath}
+              disabled={saving}
+            />
+            <span className="vbd-field-hint">
+              직접 입력하거나, 입력 시 관련 메뉴 경로를 선택해 자동 입력할 수 있습니다.
+            </span>
+          </label>
+          <label className="vbd-field vbd-field--grow">
+            <span className="vbd-field-label">내용</span>
+            <textarea
+              value={content}
+              onChange={e => setContent(e.target.value)}
+              rows={10}
+              placeholder="문제점·재현 방법·기대 결과 등"
+            />
+          </label>
+          <VerificationIssueAttachmentsSection
+            issueId={initial?.id ?? null}
+            draftFiles={draftImages}
+            onDraftFilesChange={setDraftImages}
+            disabled={saving}
+            compact
+          />
+          <div className="vbd-modal-actions">
+            <button type="button" className="vbd-btn" onClick={onCancel} disabled={saving}>취소</button>
+            <button type="submit" className="vbd-btn vbd-btn--primary" disabled={saving}>
+              {saving ? '저장 중…' : '저장'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default VerificationIssueFormModal;
@@ -0,0 +1,118 @@
+/**
+ * 검증게시판 — 좌측 이슈 목록 (단계 필터 + 검색)
+ */
+import React, { useMemo } from 'react';
+import type { VerificationIssueDto } from '../../utils/verificationBoardApi';
+import {
+  VERIFICATION_ISSUE_STAGES,
+  stageColor,
+  stageLabel,
+  type VerificationIssueStage,
+} from '../../utils/verificationBoardStages';
+import VerificationStageIcon from './VerificationStageIcon';
+
+interface Props {
+  issues: VerificationIssueDto[];
+  selectedId: number | null;
+  stageFilter: VerificationIssueStage | '';
+  searchQuery: string;
+  onStageFilterChange: (stage: VerificationIssueStage | '') => void;
+  onSearchChange: (q: string) => void;
+  onSelect: (issue: VerificationIssueDto) => void;
+}
+
+function formatDate(iso?: string): string {
+  if (!iso) return '';
+  try {
+    const d = new Date(iso);
+    return d.toLocaleString('ko-KR', {
+      month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
+    });
+  } catch { return ''; }
+}
+
+const VerificationIssueListPanel: React.FC<Props> = ({
+  issues,
+  selectedId,
+  stageFilter,
+  searchQuery,
+  onStageFilterChange,
+  onSearchChange,
+  onSelect,
+}) => {
+  const filtered = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return issues;
+    return issues.filter(i =>
+      i.title.toLowerCase().includes(q)
+      || i.content.toLowerCase().includes(q)
+      || (i.reproductionPath?.toLowerCase().includes(q) ?? false),
+    );
+  }, [issues, searchQuery]);
+
+  return (
+    <div className="vbd-list-panel">
+      <div className="vbd-list-filters">
+        <select
+          className="vbd-stage-select"
+          value={stageFilter}
+          onChange={e => onStageFilterChange(e.target.value as VerificationIssueStage | '')}
+          aria-label="이슈 단계 필터"
+        >
+          <option value="">전체 단계</option>
+          {VERIFICATION_ISSUE_STAGES.map(s => (
+            <option key={s.value} value={s.value}>{s.label}</option>
+          ))}
+        </select>
+        <input
+          type="search"
+          className="vbd-search-input"
+          placeholder="제목·내용·재현경로 검색…"
+          value={searchQuery}
+          onChange={e => onSearchChange(e.target.value)}
+          aria-label="검색"
+        />
+      </div>
+
+      <div className="vbd-list-count">
+        {filtered.length}건
+        {searchQuery.trim() && issues.length !== filtered.length && (
+          <span className="vbd-list-count-sub"> / {issues.length}건 중</span>
+        )}
+      </div>
+
+      <ul className="vbd-list">
+        {filtered.length === 0 ? (
+          <li className="vbd-list-empty">표시할 검증 이슈가 없습니다.</li>
+        ) : filtered.map(issue => {
+          const active = issue.id === selectedId;
+          return (
+            <li key={issue.id}>
+              <button
+                type="button"
+                className={`vbd-list-item${active ? ' vbd-list-item--active' : ''}`}
+                onClick={() => onSelect(issue)}
+              >
+                <VerificationStageIcon stage={issue.stage} size={34} />
+                <span className="vbd-list-item-body">
+                  <span className="vbd-list-item-top">
+                    <span
+                      className="vbd-stage-badge"
+                      style={{ backgroundColor: `${stageColor(issue.stage)}22`, color: stageColor(issue.stage) }}
+                    >
+                      {stageLabel(issue.stage)}
+                    </span>
+                    <span className="vbd-list-meta">{formatDate(issue.updatedAt ?? issue.createdAt)}</span>
+                  </span>
+                  <span className="vbd-list-title">{issue.title}</span>
+                </span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default VerificationIssueListPanel;
@@ -0,0 +1,86 @@
+/**
+ * 검증 이슈 등록·단계 변경 팝업 알림
+ */
+import React from 'react';
+import { useVerificationIssueNotification } from '../../contexts/VerificationIssueNotificationContext';
+import VerificationStageIcon from './VerificationStageIcon';
+import { stageColor, stageLabel, type VerificationIssueStage } from '../../utils/verificationBoardStages';
+import type { VerificationIssueToastItem } from '../../utils/verificationIssueEvents';
+
+interface Props {
+  onGoToIssue: (issueId: number) => void;
+}
+
+const IcListGo = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="2" y="2" width="5" height="12" rx="1" />
+    <path d="M9 5h5M9 8h5M9 11h3" />
+  </svg>
+);
+
+function headline(eventType: string, stage: VerificationIssueStage, previousStage?: VerificationIssueStage | null): string {
+  if (eventType === 'CREATED') return '새 검증 이슈가 등록되었습니다';
+  const prev = previousStage ? stageLabel(previousStage) : '—';
+  return `단계 변경: ${prev} → ${stageLabel(stage)}`;
+}
+
+const VerificationIssueToastStack: React.FC<Props> = ({ onGoToIssue }) => {
+  const { toasts, dismissToast, dismissAll } = useVerificationIssueNotification();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="vbd-toast-stack" aria-live="polite" aria-label="검증 이슈 알림">
+      <div className="vbd-toast-toolbar">
+        <span className="vbd-toast-toolbar-label">검증 이슈 알림</span>
+        <button type="button" className="vbd-toast-dismiss-all" onClick={dismissAll}>
+          전체 닫기 ({toasts.length})
+        </button>
+      </div>
+      {toasts.map((item: VerificationIssueToastItem) => (
+        <article key={item.id} className="vbd-toast-card">
+          <div className="vbd-toast-head">
+            <VerificationStageIcon stage={item.stage} size={18} />
+            <div className="vbd-toast-head-text">
+              <p className="vbd-toast-kind">{headline(item.eventType, item.stage, item.previousStage)}</p>
+              <h4 className="vbd-toast-title">{item.title}</h4>
+            </div>
+            <button
+              type="button"
+              className="vbd-toast-close"
+              onClick={() => dismissToast(item.id)}
+              aria-label="알림 닫기"
+            >
+              ✕
+            </button>
+          </div>
+          <div className="vbd-toast-meta">
+            <span
+              className="vbd-stage-badge"
+              style={{ backgroundColor: `${stageColor(item.stage)}22`, color: stageColor(item.stage) }}
+            >
+              {stageLabel(item.stage)}
+            </span>
+          </div>
+          <div className="vbd-toast-actions">
+            <button
+              type="button"
+              className="vbd-toast-go"
+              title="검증게시판에서 이슈 열기"
+              aria-label="목록으로 이동하여 이슈 상세 보기"
+              onClick={() => {
+                dismissToast(item.id);
+                onGoToIssue(item.issueId);
+              }}
+            >
+              <IcListGo />
+              <span>목록으로 이동</span>
+            </button>
+          </div>
+        </article>
+      ))}
+    </div>
+  );
+};
+
+export default VerificationIssueToastStack;
@@ -0,0 +1,87 @@
+import React from 'react';
+import { stageColor, stageLabel, type VerificationIssueStage } from '../../utils/verificationBoardStages';
+
+interface Props {
+  stage: VerificationIssueStage;
+  size?: number;
+  className?: string;
+  title?: string;
+}
+
+function StageGlyph({ stage }: { stage: VerificationIssueStage }) {
+  switch (stage) {
+    case 'REGISTERED':
+      return (
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <rect x="3" y="2" width="10" height="12" rx="1.5" />
+          <path d="M8 5v4M6 7h4" />
+        </svg>
+      );
+    case 'IN_FIX':
+      return (
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <path d="M11.5 2.5l2 2-6.5 6.5H5v-2L11.5 2.5z" />
+          <path d="M9.5 4.5l2 2" />
+        </svg>
+      );
+    case 'FIX_COMPLETE':
+      return (
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <circle cx="8" cy="8" r="5.5" />
+          <path d="M5.5 8l1.8 1.8L10.8 6.2" />
+        </svg>
+      );
+    case 'RE_REGISTERED':
+      return (
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <path d="M11 2.5h2.5V5" />
+          <path d="M4.5 13.5H2V11" />
+          <path d="M12.8 5.2A4.5 4.5 0 1 0 6.5 11.5" />
+        </svg>
+      );
+    case 'COMPLETE':
+      return (
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <path d="M3 4.5h10v8H3z" />
+          <path d="M6 4.5V3.5a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v1" />
+          <path d="M6 8.5l1.5 1.5L10 7" />
+        </svg>
+      );
+    default:
+      return (
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
+          <circle cx="8" cy="8" r="4" />
+        </svg>
+      );
+  }
+}
+
+const VerificationStageIcon: React.FC<Props> = ({
+  stage,
+  size = 32,
+  className = '',
+  title,
+}) => {
+  const color = stageColor(stage);
+  const label = title ?? stageLabel(stage);
+
+  return (
+    <span
+      className={`vbd-stage-icon ${className}`.trim()}
+      style={{
+        width: size,
+        height: size,
+        color,
+        backgroundColor: `${color}18`,
+        borderColor: `${color}44`,
+      }}
+      title={label}
+      aria-label={label}
+      role="img"
+    >
+      <StageGlyph stage={stage} />
+    </span>
+  );
+};
+
+export default VerificationStageIcon;
@@ -0,0 +1,82 @@
+/**
+ * 검증 이슈 등록·단계 변경 실시간 알림 (STOMP)
+ */
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { subscribeStompTopic } from '../utils/stompChartBroker';
+import {
+  VERIFICATION_ISSUE_EVENT_TOPIC,
+  eventToToast,
+  parseVerificationIssueEvent,
+  shouldShowVerificationIssueEvent,
+  type VerificationIssueToastItem,
+} from '../utils/verificationIssueEvents';
+
+interface ContextValue {
+  toasts: VerificationIssueToastItem[];
+  dismissToast: (id: string) => void;
+  dismissAll: () => void;
+}
+
+const VerificationIssueNotificationContext = createContext<ContextValue | null>(null);
+
+interface ProviderProps {
+  /** 검증게시판 메뉴 접근 가능 */
+  enabled: boolean;
+  /** 일반 설정 — 검증 이슈 알림 ON */
+  notifyEnabled: boolean;
+  children: React.ReactNode;
+}
+
+export const VerificationIssueNotificationProvider: React.FC<ProviderProps> = ({
+  enabled,
+  notifyEnabled,
+  children,
+}) => {
+  const [toasts, setToasts] = useState<VerificationIssueToastItem[]>([]);
+  const active = enabled && notifyEnabled;
+
+  const dismissToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  const dismissAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  useEffect(() => {
+    if (!active) {
+      setToasts([]);
+      return;
+    }
+
+    return subscribeStompTopic(VERIFICATION_ISSUE_EVENT_TOPIC, msg => {
+      const event = parseVerificationIssueEvent(msg.body);
+      if (!event || !shouldShowVerificationIssueEvent(event)) return;
+
+      const toast = eventToToast(event);
+      setToasts(prev => {
+        const withoutDup = prev.filter(t => t.id !== toast.id);
+        return [toast, ...withoutDup].slice(0, 8);
+      });
+    });
+  }, [active]);
+
+  const value = useMemo(
+    () => ({ toasts, dismissToast, dismissAll }),
+    [toasts, dismissToast, dismissAll],
+  );
+
+  return (
+    <VerificationIssueNotificationContext.Provider value={value}>
+      {children}
+    </VerificationIssueNotificationContext.Provider>
+  );
+};
+
+export function useVerificationIssueNotification(): ContextValue {
+  const ctx = useContext(VerificationIssueNotificationContext);
+  if (!ctx) {
+    throw new Error('useVerificationIssueNotification must be used within VerificationIssueNotificationProvider');
+  }
+  return ctx;
+}
@@ -110,6 +110,7 @@ export function resolveAppDefaults(s: AppSettingsDto) {
    tradeAlertPopupPosition: s.tradeAlertPopupPosition ?? 'right',
    tradeAlertPopupLayout:   s.tradeAlertPopupLayout   ?? 'stack',
    tradeAlertPopupGridCols: s.tradeAlertPopupGridCols ?? 2,
+    verificationIssueNotify: s.verificationIssueNotify ?? true,
    liveStrategyCheck:  s.liveStrategyCheck  ?? false,
    liveStrategyId:     s.liveStrategyId     ?? null,
    liveExecutionType:  s.liveExecutionType  ?? 'CANDLE_CLOSE',
@@ -0,0 +1,953 @@
+/* 검증게시판 */
+.bps-page--vbd .bps-center {
+  min-width: 0;
+}
+
+.vbd-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.vbd-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  border: 1px solid var(--border, #363a45);
+  border-radius: 6px;
+  background: var(--panel, #1e222d);
+  color: var(--text, #d1d4dc);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.vbd-icon-btn:hover:not(:disabled) {
+  background: var(--hover, #2a2e39);
+  border-color: var(--accent, #2196f3);
+}
+
+.vbd-icon-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.vbd-icon-btn--danger:hover:not(:disabled) {
+  border-color: #ef5350;
+  color: #ef5350;
+}
+
+.vbd-icon-btn-label {
+  font-size: 11px;
+}
+
+/* 좌측 목록 */
+.vbd-list-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  gap: 8px;
+}
+
+.vbd-list-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 0 2px;
+}
+
+.vbd-stage-select,
+.vbd-search-input {
+  width: 100%;
+  padding: 7px 10px;
+  border: 1px solid var(--border, #363a45);
+  border-radius: 6px;
+  background: var(--input-bg, #131722);
+  color: var(--text, #d1d4dc);
+  font-size: 12px;
+}
+
+.vbd-list-count {
+  font-size: 11px;
+  color: var(--text-muted, #787b86);
+  padding: 0 4px;
+}
+
+.vbd-list-count-sub {
+  opacity: 0.8;
+}
+
+.vbd-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.vbd-list-empty {
+  padding: 24px 12px;
+  text-align: center;
+  color: var(--text-muted, #787b86);
+  font-size: 12px;
+}
+
+.vbd-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 10px;
+  border: none;
+  border-bottom: 1px solid var(--border, #2a2e39);
+  background: transparent;
+  color: var(--text, #d1d4dc);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.vbd-list-item:hover {
+  background: var(--hover, #2a2e39);
+}
+
+.vbd-list-item--active {
+  background: rgba(33, 150, 243, 0.12);
+  border-left: 3px solid var(--accent, #2196f3);
+  padding-left: 7px;
+}
+
+.vbd-stage-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  border: 1px solid;
+}
+
+.vbd-stage-icon svg {
+  width: 58%;
+  height: 58%;
+}
+
+.vbd-list-item-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.vbd-list-item-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.vbd-stage-badge {
+  display: inline-block;
+  padding: 2px 7px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.vbd-stage-badge--lg {
+  font-size: 12px;
+  padding: 4px 10px;
+}
+
+.vbd-list-title {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.vbd-list-meta {
+  font-size: 10px;
+  color: var(--text-muted, #787b86);
+  white-space: nowrap;
+}
+
+/* 우측 상세 */
+.vbd-detail {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.vbd-detail-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 20px 8px;
+}
+
+.vbd-detail-footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 20px 14px;
+  border-top: 1px solid var(--border, #2a2e39);
+  background: var(--panel, #1e222d);
+}
+
+.vbd-detail-dirty-hint {
+  font-size: 11px;
+  color: var(--accent, #2196f3);
+  min-width: 0;
+  flex: 1;
+}
+
+.vbd-detail-footer-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.vbd-detail--empty {
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted, #787b86);
+  font-size: 14px;
+}
+
+.vbd-detail-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.vbd-detail-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.35;
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+}
+
+.vbd-detail-title-input {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--border, #363a45);
+  border-radius: 6px;
+  background: var(--input-bg, #131722);
+  color: var(--text, #d1d4dc);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.vbd-detail-stage-select {
+  flex-shrink: 0;
+  min-width: 108px;
+  padding: 8px 10px;
+  border: 1px solid var(--border, #363a45);
+  border-radius: 6px;
+  background: var(--input-bg, #131722);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.vbd-field--inline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 0;
+}
+
+.vbd-detail-content-input {
+  width: 100%;
+  min-height: 160px;
+  padding: 10px 12px;
+  border: 1px solid var(--border, #363a45);
+  border-radius: 6px;
+  background: var(--input-bg, #131722);
+  color: var(--text, #d1d4dc);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.65;
+  resize: vertical;
+}
+
+.vbd-detail-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-size: 11px;
+  color: var(--text-muted, #787b86);
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border, #2a2e39);
+}
+
+.vbd-detail-path {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: rgba(33, 150, 243, 0.06);
+  border: 1px solid rgba(33, 150, 243, 0.2);
+}
+
+.vbd-detail-path-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent, #2196f3);
+  flex-shrink: 0;
+}
+
+.vbd-detail-path-value {
+  font-size: 12px;
+  color: var(--text, #d1d4dc);
+  word-break: break-all;
+}
+
+.vbd-detail-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  margin-bottom: 8px;
+}
+
+.vbd-detail-content {
+  margin: 0;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.65;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text, #d1d4dc);
+}
+
+/* 모달 */
+.vbd-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 6000;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.vbd-modal {
+  width: min(520px, 100%);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--panel, #1e222d);
+  border: 1px solid var(--border, #363a45);
+  border-radius: 10px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+}
+
+.vbd-modal--wide {
+  width: min(640px, 100%);
+}
+
+.vbd-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border, #363a45);
+}
+
+.vbd-modal-header h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.vbd-modal-close {
+  border: none;
+  background: transparent;
+  color: var(--text-muted, #787b86);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+
+.vbd-modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.vbd-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.vbd-field--grow {
+  flex: 1;
+}
+
+.vbd-field-label {
+  font-size: 11px;
+  color: var(--text-muted, #787b86);
+}
+
+.vbd-field-hint {
+  font-size: 10px;
+  color: var(--text-muted, #787b86);
+  line-height: 1.4;
+}
+
+.vbd-path-wrap {
+  position: relative;
+}
+
+.vbd-path-input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--border, #363a45);
+  border-radius: 6px;
+  background: var(--input-bg, #131722);
+  color: var(--text, #d1d4dc);
+  font-size: 13px;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.vbd-path-suggest {
+  position: absolute;
+  z-index: 7100;
+  left: 0;
+  right: 0;
+  top: calc(100% + 4px);
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  max-height: 220px;
+  overflow-y: auto;
+  background: var(--panel, #1e222d);
+  border: 1px solid var(--border, #363a45);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.vbd-path-suggest-item {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: var(--text, #d1d4dc);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  line-height: 1.35;
+}
+
+.vbd-path-suggest-item:hover,
+.vbd-path-suggest-item--active {
+  background: var(--hover, #2a2e39);
+  color: var(--accent, #2196f3);
+}
+
+.vbd-path-hint {
+  margin: 4px 0 0;
+  font-size: 10px;
+  color: var(--text-muted, #787b86);
+}
+
+.vbd-field input,
+.vbd-field select,
+.vbd-field textarea {
+  padding: 8px 10px;
+  border: 1px solid var(--border, #363a45);
+  border-radius: 6px;
+  background: var(--input-bg, #131722);
+  color: var(--text, #d1d4dc);
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.vbd-field textarea {
+  resize: vertical;
+  min-height: 160px;
+}
+
+.vbd-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.vbd-btn {
+  padding: 8px 16px;
+  border: 1px solid var(--border, #363a45);
+  border-radius: 6px;
+  background: var(--panel, #1e222d);
+  color: var(--text, #d1d4dc);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.vbd-btn--primary {
+  background: var(--accent, #2196f3);
+  border-color: var(--accent, #2196f3);
+  color: #fff;
+}
+
+.vbd-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.vbd-btn--sm {
+  padding: 5px 12px;
+  font-size: 12px;
+}
+
+/* 댓글 */
+.vbd-comments {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border, #2a2e39);
+  max-height: 45%;
+  min-height: 180px;
+}
+
+.vbd-comments-header {
+  flex-shrink: 0;
+}
+
+.vbd-comments-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text, #d1d4dc);
+}
+
+.vbd-comments-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.vbd-comments-empty {
+  margin: 0;
+  padding: 12px 0;
+  font-size: 12px;
+  color: var(--text-muted, #787b86);
+  text-align: center;
+}
+
+.vbd-comment {
+  padding: 10px 12px;
+  border: 1px solid var(--border, #2a2e39);
+  border-radius: 8px;
+  background: var(--panel-alt, rgba(255, 255, 255, 0.02));
+}
+
+.vbd-comment-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.vbd-comment-author {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent, #2196f3);
+}
+
+.vbd-comment-date {
+  font-size: 10px;
+  color: var(--text-muted, #787b86);
+  flex: 1;
+}
+
+.vbd-comment-actions {
+  display: flex;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.vbd-comment-action {
+  border: none;
+  background: transparent;
+  color: var(--text-muted, #787b86);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 2px 4px;
+}
+
+.vbd-comment-action:hover:not(:disabled) {
+  color: var(--text, #d1d4dc);
+}
+
+.vbd-comment-action--danger:hover:not(:disabled) {
+  color: #ef5350;
+}
+
+.vbd-comment-action:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.vbd-comment-body {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text, #d1d4dc);
+}
+
+.vbd-comment-textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--border, #363a45);
+  border-radius: 6px;
+  background: var(--input-bg, #131722);
+  color: var(--text, #d1d4dc);
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.vbd-comment-edit {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vbd-comment-edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.vbd-comment-compose {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vbd-comment-compose-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 첨부 이미지 */
+.vbd-attachments {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 0;
+  border-top: 1px solid var(--border, #2a2e39);
+  border-bottom: 1px solid var(--border, #2a2e39);
+  margin-bottom: 8px;
+}
+
+.vbd-attachments--compact {
+  padding: 8px 0;
+  margin-bottom: 0;
+  border-bottom: none;
+}
+
+.vbd-attachments--compact .vbd-attach-zone {
+  min-height: 80px;
+}
+
+.vbd-attach-zone--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.vbd-attachments-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.vbd-attachments-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  flex: 1;
+}
+
+.vbd-attach-zone {
+  position: relative;
+  min-height: 100px;
+  padding: 10px;
+  border: 1px dashed var(--border, #444);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
+  outline: none;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.vbd-attach-zone:focus {
+  border-color: var(--accent, #2196f3);
+}
+
+.vbd-attach-zone--over {
+  border-color: var(--accent, #2196f3);
+  background: rgba(33, 150, 243, 0.08);
+}
+
+.vbd-attach-hint {
+  margin: 0;
+  padding: 20px 8px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-muted, #787b86);
+  line-height: 1.5;
+}
+
+.vbd-attach-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 10px;
+}
+
+.vbd-attach-item {
+  position: relative;
+  margin: 0;
+  border: 1px solid var(--border, #363a45);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--panel, #1e222d);
+}
+
+.vbd-attach-thumb {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: zoom-in;
+}
+
+.vbd-attach-item img {
+  display: block;
+  width: 100%;
+  height: 100px;
+  object-fit: cover;
+  pointer-events: none;
+}
+
+.vbd-attach-caption {
+  padding: 4px 6px;
+  font-size: 10px;
+  color: var(--text-muted, #787b86);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vbd-attach-remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.65);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.vbd-attach-item:hover .vbd-attach-remove {
+  opacity: 1;
+}
+
+.vbd-attach-uploading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+  color: #fff;
+  font-size: 13px;
+  border-radius: 8px;
+}
+
+.vbd-attach-ctx {
+  position: fixed;
+  z-index: 7000;
+  min-width: 180px;
+  padding: 4px 0;
+  background: var(--panel, #1e222d);
+  border: 1px solid var(--border, #363a45);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.vbd-attach-ctx button {
+  display: block;
+  width: 100%;
+  padding: 8px 14px;
+  border: none;
+  background: transparent;
+  color: var(--text, #d1d4dc);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.vbd-attach-ctx button:hover {
+  background: var(--hover, #2a2e39);
+}
+
+/* 검증 이슈 알림 팝업 */
+.vbd-toast-stack {
+  position: fixed;
+  left: 16px;
+  bottom: 16px;
+  z-index: 6500;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: min(360px, calc(100vw - 32px));
+  pointer-events: none;
+}
+
+.vbd-toast-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  pointer-events: auto;
+}
+
+.vbd-toast-toolbar-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted, #787b86);
+}
+
+.vbd-toast-dismiss-all {
+  border: none;
+  background: transparent;
+  color: var(--accent, #2196f3);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 2px 4px;
+}
+
+.vbd-toast-card {
+  pointer-events: auto;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--border, #363a45);
+  background: var(--panel, #1e222d);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
+  animation: vbd-toast-in 0.22s ease-out;
+}
+
+@keyframes vbd-toast-in {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.vbd-toast-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.vbd-toast-head-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.vbd-toast-kind {
+  margin: 0 0 4px;
+  font-size: 11px;
+  color: var(--text-muted, #787b86);
+}
+
+.vbd-toast-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.vbd-toast-close {
+  border: none;
+  background: transparent;
+  color: var(--text-muted, #787b86);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 2px;
+  line-height: 1;
+}
+
+.vbd-toast-meta {
+  margin-top: 8px;
+}
+
+.vbd-toast-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+.vbd-toast-go {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--border, #444);
+  border-radius: 6px;
+  background: rgba(33, 150, 243, 0.08);
+  color: var(--accent, #2196f3);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.vbd-toast-go:hover {
+  background: rgba(33, 150, 243, 0.16);
+}
@@ -0,0 +1,148 @@
+/**
+ * GoldenChart 화면·기능별 재현 경로 카탈로그 (검증 이슈 재현경로 자동완성)
+ *
+ * path: 사용자에게 표시·저장되는 경로 (메뉴-화면-… 형식)
+ * keywords: 입력 검색용 별칭 (메뉴명, 기능명, 영문 등)
+ */
+
+export interface AppNavigationPathEntry {
+  path: string;
+  keywords: string[];
+}
+
+const P = (path: string, ...keywords: string[]): AppNavigationPathEntry => ({
+  path,
+  keywords: [path, ...keywords],
+});
+
+/** 프로젝트에서 제공하는 주요 화면·기능 경로 */
+export const APP_NAVIGATION_PATHS: AppNavigationPathEntry[] = [
+  // ── 상단 메뉴 ──
+  P('메뉴-대시보드', 'dashboard', '홈'),
+  P('메뉴-실시간 차트', 'chart', '실시간차트', '캔들', '차트'),
+  P('메뉴-가상매매', 'virtual', '가상', '모의'),
+  P('메뉴-추세검색', 'trend', '추세', '검색'),
+  P('메뉴-검증게시판', 'verification', 'QA', '이슈', '검증'),
+  P('메뉴-전략편집기', 'strategy-editor', '전략', '편집'),
+  P('메뉴-백테스팅', 'backtest', '백테스트', '히스토리'),
+  P('메뉴-설정', 'settings', '환경설정'),
+
+  // ── 실시간 차트 · 툴바 ──
+  P('메뉴-실시간 차트-종목 변경', '심볼', '검색', '마켓'),
+  P('메뉴-실시간 차트-워치리스트', 'watchlist', '관심'),
+  P('메뉴-실시간 차트-시간봉 변경', 'timeframe', '분봉', '일봉'),
+  P('메뉴-실시간 차트-차트 유형', '캔들', '봉', 'line', 'heikin'),
+  P('메뉴-실시간 차트-지표 추가 버튼', '지표', 'indicator', '추가', 'Ctrl+I', '보조지표'),
+  P('메뉴-실시간 차트-지표 추가 팝업-지표 검색', '지표검색', 'RSI', 'MACD', '이동평균'),
+  P('메뉴-실시간 차트-지표 추가 팝업-보조지표 설정', '지표설정', '활성지표'),
+  P('메뉴-실시간 차트-보조지표 설정 버튼', '일괄설정', '보조지표설정'),
+  P('메뉴-실시간 차트-실행 취소', 'undo', 'Ctrl+Z'),
+  P('메뉴-실시간 차트-다시 실행', 'redo', 'Ctrl+Y'),
+  P('메뉴-실시간 차트-자석모드', 'magnet', '스냅'),
+  P('메뉴-실시간 차트-전체 드로잉 삭제', '드로잉', 'drawing'),
+  P('메뉴-실시간 차트-통계 패널', 'stats', '통계'),
+  P('메뉴-실시간 차트-자동 피보나치', 'fib', '피보'),
+  P('메뉴-실시간 차트-그리드 표시', 'grid', '격자'),
+  P('메뉴-실시간 차트-트레이딩/차트 모드 전환', 'mode', '트레이딩'),
+  P('메뉴-실시간 차트-백테스팅 전략 선택', '백테', '전략선택'),
+  P('메뉴-실시간 차트-백테스팅 설정', 'bt설정'),
+  P('메뉴-실시간 차트-백테스팅 결과 보기', 'bt결과'),
+  P('메뉴-실시간 차트-실시간 전략 체크', 'live', '라이브전략'),
+  P('메뉴-실시간 차트-마켓 패널', '마켓', '좌측패널'),
+  P('메뉴-실시간 차트-확대경', 'magnifier', '돋보기'),
+  P('메뉴-실시간 차트-레이아웃 설정', 'layout', '분할'),
+  P('메뉴-실시간 차트-화면 맞춤', 'fit', 'F키'),
+  P('메뉴-실시간 차트-현재 시각으로 이동', 'realtime', 'now'),
+  P('메뉴-실시간 차트-매매 시그널 알림', 'trade', '시그널', '알림'),
+  P('메뉴-실시간 차트-가격 알림', 'alert', '가격'),
+  P('메뉴-실시간 차트-스크린샷', 'screenshot', '캡처'),
+  P('메뉴-실시간 차트-전체화면', 'fullscreen'),
+
+  // ── 설정 카테고리 ──
+  P('메뉴-설정-일반 설정', 'general', '언어', '테마'),
+  P('메뉴-설정-차트 설정', 'chart설정', '캔들색', '범례'),
+  P('메뉴-설정-보조지표 설정', 'indicators', '지표기본값', 'Main탭'),
+  P('메뉴-설정-백테스팅', 'bt옵션', '자본'),
+  P('메뉴-설정-전략 설정', 'strategy', '전략기본'),
+  P('메뉴-설정-가상매매', 'paper', '가상자본'),
+  P('메뉴-설정-추세검색', 'trend설정', '배점'),
+  P('메뉴-설정-알림 설정', 'alert설정', '소리', '팝업'),
+  P('메뉴-설정-네트워크', 'network', 'API', 'WebSocket'),
+  P('메뉴-설정-관리자 설정', 'admin', '권한', '역할'),
+
+  // ── 가상매매 ──
+  P('메뉴-가상매매-투자대상 그리드', '타겟', '종목'),
+  P('메뉴-가상매매-우측 매매 탭', '주문', 'trade'),
+  P('메뉴-가상매매-우측 호가 탭', '호가', 'orderbook'),
+  P('메뉴-가상매매-우측 체결 탭', '체결', 'history'),
+
+  // ── 추세검색 ──
+  P('메뉴-추세검색-검색 실행', 'run', '스캔'),
+  P('메뉴-추세검색-결과 카드', '결과', '차트미리보기'),
+
+  // ── 검증게시판 ──
+  P('메뉴-검증게시판-이슈 등록', '등록', '추가'),
+  P('메뉴-검증게시판-이슈 수정', '수정', '편집'),
+  P('메뉴-검증게시판-이슈 삭제', '삭제'),
+  P('메뉴-검증게시판-첨부 이미지', '이미지', '스크린샷', '첨부'),
+  P('메뉴-검증게시판-댓글', 'comment', '코멘트'),
+
+  // ── 전략편집기 ──
+  P('메뉴-전략편집기-전략 목록', '목록', '리스트'),
+  P('메뉴-전략편집기-노드 캔버스', 'flow', '노드', '조건'),
+  P('메뉴-전략편집기-지표 팔레트', 'palette', '팔레트'),
+  P('메뉴-전략편집기-전략 저장', 'save'),
+  P('메뉴-전략편집기-전략 JSON보내기', 'export', '보내기'),
+  P('메뉴-전략편집기-전략 JSON 가져오기', 'import', '가져오기'),
+
+  // ── 백테스팅 ──
+  P('메뉴-백테스팅-결과 목록', '히스토리', 'history'),
+  P('메뉴-백테스팅-분석 차트', 'analysis'),
+
+  // ── 상단 메뉴바 기타 ──
+  P('메뉴-알림 목록', 'notifications', '시그널목록'),
+  P('메뉴-테마 전환', 'theme', '다크', '라이트'),
+  P('메뉴-로그인', 'login', 'auth'),
+];
+
+function normalizeForSearch(s: string): string {
+  return s.toLowerCase().replace(/\s+/g, '');
+}
+
+/**
+ * 입력 문자열과 관련된 경로 후보 (최대 limit건, 관련도 순)
+ */
+export function searchAppNavigationPaths(query: string, limit = 12): AppNavigationPathEntry[] {
+  const q = query.trim();
+  if (!q) return APP_NAVIGATION_PATHS.slice(0, limit);
+
+  const nq = normalizeForSearch(q);
+  const tokens = q.toLowerCase().split(/\s+/).filter(Boolean);
+
+  type Scored = { entry: AppNavigationPathEntry; score: number };
+  const scored: Scored[] = [];
+
+  for (const entry of APP_NAVIGATION_PATHS) {
+    let score = 0;
+    const pathNorm = normalizeForSearch(entry.path);
+
+    if (entry.path.includes(q)) score += 80;
+    if (pathNorm.includes(nq)) score += 60;
+    if (pathNorm.startsWith(nq)) score += 40;
+
+    for (const kw of entry.keywords) {
+      const kn = normalizeForSearch(kw);
+      if (kw.includes(q)) score += 50;
+      if (kn.includes(nq)) score += 35;
+      if (kn.startsWith(nq)) score += 25;
+      for (const t of tokens) {
+        if (kn.includes(t) || kw.toLowerCase().includes(t)) score += 15;
+      }
+    }
+
+    if (score > 0) scored.push({ entry, score });
+  }
+
+  scored.sort((a, b) => b.score - a.score || a.entry.path.localeCompare(b.entry.path, 'ko'));
+  return scored.slice(0, limit).map(s => s.entry);
+}
@@ -404,6 +404,8 @@ export interface AppSettingsDto {
  tradeAlertPopupLayout?: string;
  /** 그리드 배치 열 개수 (2~4) */
  tradeAlertPopupGridCols?: number;
+  /** 검증 이슈 등록·단계 변경 알림 팝업 (기본 true) */
+  verificationIssueNotify?: boolean;
  /** 실시간 전략 체크 마스터 ON — ON이면 DB 관심종목 전체가 체크 대상 */
  liveStrategyCheck?:   boolean;
  /** 관심종목 공통 전략 ID */
@@ -0,0 +1,183 @@
+/**
+ * 클립보드·붙여넣기 이미지 → 업로드용 File 정규화
+ */
+const ALLOWED_MIME = new Set([
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+  'image/bmp',
+]);
+
+/** 클립보드 항목에서 우선 선택할 MIME (macOS TIFF 등 제외) */
+const CLIPBOARD_PREFERRED = [
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/gif',
+  'image/bmp',
+];
+
+function normalizeMime(raw: string | undefined): string | null {
+  if (!raw) return null;
+  const base = raw.split(';')[0]?.trim().toLowerCase() ?? '';
+  if (base === 'image/jpg' || base === 'image/pjpeg') {
+    return 'image/jpeg';
+  }
+  if (base === 'image/x-png') {
+    return 'image/png';
+  }
+  return ALLOWED_MIME.has(base) ? base : null;
+}
+
+function extForMime(mime: string): string {
+  switch (mime) {
+    case 'image/jpeg': return 'jpg';
+    case 'image/png': return 'png';
+    case 'image/gif': return 'gif';
+    case 'image/webp': return 'webp';
+    case 'image/bmp': return 'bmp';
+    default: return 'png';
+  }
+}
+
+function guessMimeFromName(name: string): string | undefined {
+  const lower = name.toLowerCase();
+  if (lower.endsWith('.jpg') || lower.endsWith('.jpeg')) return 'image/jpeg';
+  if (lower.endsWith('.png')) return 'image/png';
+  if (lower.endsWith('.gif')) return 'image/gif';
+  if (lower.endsWith('.webp')) return 'image/webp';
+  if (lower.endsWith('.bmp')) return 'image/bmp';
+  return undefined;
+}
+
+/** File MIME·이름 정규화 (클립보드·붙여넣기 대응) */
+export function normalizeImageFile(file: File): File | null {
+  const mime = normalizeMime(file.type)
+    ?? normalizeMime(guessMimeFromName(file.name))
+    ?? 'image/png';
+
+  if (!ALLOWED_MIME.has(mime)) return null;
+  if (file.size === 0) return null;
+
+  const ext = extForMime(mime);
+  const name = file.name && !file.name.startsWith('blob')
+    ? file.name
+    : `clipboard-${Date.now()}.${ext}`;
+
+  if (file.type === mime && file.name === name) return file;
+  return new File([file], name, { type: mime, lastModified: file.lastModified });
+}
+
+/** FileList / File[] → 허용 이미지만 */
+export function pickImageFiles(list: FileList | File[]): File[] {
+  return Array.from(list)
+    .map(normalizeImageFile)
+    .filter((f): f is File => f != null);
+}
+
+/** 백엔드 제한(5MB) 초과 시 JPEG로 축소 */
+export async function compressImageIfNeeded(
+  file: File,
+  maxBytes = 5 * 1024 * 1024,
+): Promise<File> {
+  if (file.size <= maxBytes) return file;
+
+  let bitmap: ImageBitmap;
+  try {
+    bitmap = await createImageBitmap(file);
+  } catch {
+    throw new Error('IMAGE_READ_FAILED');
+  }
+
+  let w = bitmap.width;
+  let h = bitmap.height;
+  const maxDim = 2560;
+  if (w > maxDim || h > maxDim) {
+    const scale = Math.min(maxDim / w, maxDim / h);
+    w = Math.max(1, Math.round(w * scale));
+    h = Math.max(1, Math.round(h * scale));
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    bitmap.close();
+    throw new Error('IMAGE_READ_FAILED');
+  }
+  ctx.drawImage(bitmap, 0, 0, w, h);
+  bitmap.close();
+
+  let quality = 0.9;
+  let blob: Blob | null = null;
+  for (let i = 0; i < 8; i++) {
+    blob = await new Promise<Blob | null>(resolve => {
+      canvas.toBlob(resolve, 'image/jpeg', quality);
+    });
+    if (blob && blob.size <= maxBytes) break;
+    quality -= 0.1;
+  }
+
+  if (!blob || blob.size > maxBytes) {
+    throw new Error('IMAGE_TOO_LARGE');
+  }
+
+  const base = file.name.replace(/\.[^.]+$/, '') || 'image';
+  return new File([blob], `${base}.jpg`, { type: 'image/jpeg', lastModified: Date.now() });
+}
+
+/** 업로드 전 이미지 정규화·용량 조정 */
+export async function prepareImagesForUpload(files: File[]): Promise<File[]> {
+  const normalized = pickImageFiles(files);
+  const out: File[] = [];
+  for (const f of normalized) {
+    out.push(await compressImageIfNeeded(f));
+  }
+  return out;
+}
+
+/** ClipboardEvent / DataTransfer 에서 이미지 File 추출 */
+export function filesFromDataTransfer(data: DataTransfer): File[] {
+  const out: File[] = [];
+  for (const item of Array.from(data.items)) {
+    if (item.kind !== 'file') continue;
+    const file = item.getAsFile();
+    if (!file) continue;
+    const normalized = normalizeImageFile(file);
+    if (normalized) out.push(normalized);
+  }
+  if (out.length === 0) {
+    return pickImageFiles(data.files);
+  }
+  return out;
+}
+
+/** navigator.clipboard.read() 결과 → File[] */
+export async function filesFromClipboardRead(): Promise<File[]> {
+  if (!navigator.clipboard?.read) {
+    throw new Error('CLIPBOARD_UNSUPPORTED');
+  }
+
+  const items = await navigator.clipboard.read();
+  const files: File[] = [];
+
+  for (const item of items) {
+    const type = CLIPBOARD_PREFERRED.find(t => item.types.includes(t));
+    if (!type) continue;
+
+    const blob = await item.getType(type);
+    if (!blob || blob.size === 0) continue;
+
+    const mime = normalizeMime(blob.type) ?? type;
+    const ext = extForMime(mime);
+    files.push(new File(
+      [blob],
+      `clipboard-${Date.now()}.${ext}`,
+      { type: mime },
+    ));
+  }
+
+  return files;
+}
@@ -12,7 +12,7 @@ export type SettingsCategoryId =
  | 'paper' | 'trend-search' | 'alert' | 'network' | 'admin';

 export const TOP_MENU_IDS: TopMenuId[] = [
-  'dashboard', 'chart', 'virtual', 'trend-search', 'strategy-editor', 'backtest', 'settings',
+  'dashboard', 'chart', 'virtual', 'trend-search', 'strategy-editor', 'backtest', 'settings', 'verification-board',
 ];

 export const SETTINGS_MENU_IDS: SettingsCategoryId[] = [
@@ -20,7 +20,7 @@ export const SETTINGS_MENU_IDS: SettingsCategoryId[] = [
 ];

 export const ALL_MENU_IDS = [
-  'dashboard', 'chart', 'paper', 'virtual', 'trend-search', 'strategy', 'strategy-editor', 'backtest', 'notifications', 'settings',
+  'dashboard', 'chart', 'paper', 'virtual', 'trend-search', 'verification-board', 'strategy', 'strategy-editor', 'backtest', 'notifications', 'settings',
  ...SETTINGS_MENU_IDS.map(id => `settings_${id}` as const),
 ] as const;

@@ -32,6 +32,7 @@ export const MENU_LABELS: Record<string, string> = {
  paper: '모의투자',
  virtual: '가상매매',
  'trend-search': '추세검색',
+  'verification-board': '검증게시판',
  strategy: '투자전략',
  'strategy-editor': '전략편집기',
  backtest: '백테스팅',
@@ -0,0 +1,213 @@
+import type { VerificationIssueStage } from './verificationBoardStages';
+
+const API_BASE = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8080/api';
+
+export interface VerificationIssueDto {
+  id?: number;
+  title: string;
+  content: string;
+  reproductionPath?: string;
+  stage: VerificationIssueStage;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+function getDeviceId(): string {
+  let id = localStorage.getItem('gc_device_id');
+  if (!id) {
+    id = crypto.randomUUID();
+    localStorage.setItem('gc_device_id', id);
+  }
+  return id;
+}
+
+function authHeaders(): Record<string, string> {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    'x-device-id': getDeviceId(),
+  };
+  const userId = localStorage.getItem('gc_user_id');
+  if (userId) headers['x-user-id'] = userId;
+  return headers;
+}
+
+function authHeadersMultipart(): Record<string, string> {
+  const headers: Record<string, string> = {
+    'x-device-id': getDeviceId(),
+  };
+  const userId = localStorage.getItem('gc_user_id');
+  if (userId) headers['x-user-id'] = userId;
+  return headers;
+}
+
+export function verificationIssueImageUrl(issueId: number, imageId: number): string {
+  return `${API_BASE}/verification-issues/${issueId}/images/${imageId}/file`;
+}
+
+async function apiGet<T>(path: string): Promise<T | null> {
+  try {
+    const res = await fetch(`${API_BASE}${path}`, { headers: authHeaders() });
+    if (!res.ok) return null;
+    return (await res.json()) as T;
+  } catch {
+    return null;
+  }
+}
+
+async function mutateOrThrow<T>(path: string, init: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...init,
+    headers: { ...authHeaders(), ...(init.headers ?? {}) },
+  });
+  const text = await res.text().catch(() => '');
+  if (!res.ok) {
+    throw new Error(text ? text.slice(0, 200) : `요청 실패 (${res.status})`);
+  }
+  if (res.status === 204 || !text) return undefined as T;
+  return JSON.parse(text) as T;
+}
+
+export async function loadVerificationIssues(
+  stage?: VerificationIssueStage | '',
+): Promise<VerificationIssueDto[]> {
+  const qs = stage ? `?stage=${encodeURIComponent(stage)}` : '';
+  return (await apiGet<VerificationIssueDto[]>(`/verification-issues${qs}`)) ?? [];
+}
+
+export async function loadVerificationIssue(id: number): Promise<VerificationIssueDto | null> {
+  return apiGet<VerificationIssueDto>(`/verification-issues/${id}`);
+}
+
+export async function saveVerificationIssue(dto: VerificationIssueDto): Promise<VerificationIssueDto> {
+  return mutateOrThrow<VerificationIssueDto>('/verification-issues', {
+    method: 'POST',
+    body: JSON.stringify(dto),
+  });
+}
+
+export async function deleteVerificationIssue(id: number): Promise<void> {
+  await mutateOrThrow<void>(`/verification-issues/${id}`, { method: 'DELETE' });
+}
+
+// ── 댓글 ─────────────────────────────────────────────────────────────────────
+
+export interface VerificationIssueCommentDto {
+  id?: number;
+  issueId?: number;
+  content: string;
+  authorName?: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export async function loadVerificationIssueComments(
+  issueId: number,
+): Promise<VerificationIssueCommentDto[]> {
+  return (await apiGet<VerificationIssueCommentDto[]>(
+    `/verification-issues/${issueId}/comments`,
+  )) ?? [];
+}
+
+export async function createVerificationIssueComment(
+  issueId: number,
+  dto: Pick<VerificationIssueCommentDto, 'content' | 'authorName'>,
+): Promise<VerificationIssueCommentDto> {
+  return mutateOrThrow<VerificationIssueCommentDto>(
+    `/verification-issues/${issueId}/comments`,
+    { method: 'POST', body: JSON.stringify(dto) },
+  );
+}
+
+export async function updateVerificationIssueComment(
+  issueId: number,
+  commentId: number,
+  dto: Pick<VerificationIssueCommentDto, 'content'>,
+): Promise<VerificationIssueCommentDto> {
+  return mutateOrThrow<VerificationIssueCommentDto>(
+    `/verification-issues/${issueId}/comments/${commentId}`,
+    { method: 'PUT', body: JSON.stringify(dto) },
+  );
+}
+
+export async function deleteVerificationIssueComment(
+  issueId: number,
+  commentId: number,
+): Promise<void> {
+  await mutateOrThrow<void>(
+    `/verification-issues/${issueId}/comments/${commentId}`,
+    { method: 'DELETE' },
+  );
+}
+
+// ── 첨부 이미지 ─────────────────────────────────────────────────────────────
+
+export interface VerificationIssueImageDto {
+  id?: number;
+  issueId?: number;
+  fileName?: string;
+  contentType?: string;
+  fileSize?: number;
+  sortOrder?: number;
+  url?: string;
+  createdAt?: string;
+}
+
+export async function loadVerificationIssueImages(
+  issueId: number,
+): Promise<VerificationIssueImageDto[]> {
+  return (await apiGet<VerificationIssueImageDto[]>(
+    `/verification-issues/${issueId}/images`,
+  )) ?? [];
+}
+
+export async function uploadVerificationIssueImages(
+  issueId: number,
+  files: File[],
+): Promise<VerificationIssueImageDto[]> {
+  const form = new FormData();
+  files.forEach(f => form.append('files', f));
+  const res = await fetch(`${API_BASE}/verification-issues/${issueId}/images`, {
+    method: 'POST',
+    headers: authHeadersMultipart(),
+    body: form,
+  });
+  const text = await res.text().catch(() => '');
+  if (!res.ok) {
+    throw new Error(parseVerificationUploadError(res.status, text));
+  }
+  return JSON.parse(text) as VerificationIssueImageDto[];
+}
+
+function parseVerificationUploadError(status: number, text: string): string {
+  if (text) {
+    try {
+      const json = JSON.parse(text) as { message?: string };
+      if (json.message) return json.message;
+    } catch {
+      if (text.includes('413') || text.toLowerCase().includes('too large')) {
+        return '업로드 용량이 너무 큽니다. 이미지를 줄이거나 5MB 이하 파일을 사용하세요.';
+      }
+      if (!text.trimStart().startsWith('<')) {
+        return text.slice(0, 200);
+      }
+    }
+  }
+  if (status === 413) {
+    return '업로드 용량이 너무 큽니다. 이미지를 줄이거나 5MB 이하 파일을 사용하세요.';
+  }
+  if (status === 400) return '이미지 형식 또는 크기를 확인하세요. (jpeg, png, gif, webp, bmp · 파일당 5MB)';
+  return `이미지 업로드에 실패했습니다. (${status})`;
+}
+
+export async function deleteVerificationIssueImage(
+  issueId: number,
+  imageId: number,
+): Promise<void> {
+  const res = await fetch(
+    `${API_BASE}/verification-issues/${issueId}/images/${imageId}`,
+    { method: 'DELETE', headers: authHeadersMultipart() },
+  );
+  if (!res.ok && res.status !== 204) {
+    throw new Error(`삭제 실패 (${res.status})`);
+  }
+}
@@ -0,0 +1,33 @@
+/** 검증 이슈 처리 단계 */
+export type VerificationIssueStage =
+  | 'REGISTERED'
+  | 'IN_FIX'
+  | 'FIX_COMPLETE'
+  | 'RE_REGISTERED'
+  | 'COMPLETE';
+
+export interface VerificationIssueStageMeta {
+  value: VerificationIssueStage;
+  label: string;
+  color: string;
+}
+
+export const VERIFICATION_ISSUE_STAGES: VerificationIssueStageMeta[] = [
+  { value: 'REGISTERED',   label: '등록',     color: '#42a5f5' },
+  { value: 'IN_FIX',       label: '수정중',   color: '#ffa726' },
+  { value: 'FIX_COMPLETE', label: '수정완료', color: '#66bb6a' },
+  { value: 'RE_REGISTERED', label: '재등록',  color: '#ab47bc' },
+  { value: 'COMPLETE',     label: '완료',     color: '#78909c' },
+];
+
+export const STAGE_BY_VALUE = Object.fromEntries(
+  VERIFICATION_ISSUE_STAGES.map(s => [s.value, s]),
+) as Record<VerificationIssueStage, VerificationIssueStageMeta>;
+
+export function stageLabel(stage: VerificationIssueStage): string {
+  return STAGE_BY_VALUE[stage]?.label ?? stage;
+}
+
+export function stageColor(stage: VerificationIssueStage): string {
+  return STAGE_BY_VALUE[stage]?.color ?? '#78909c';
+}
@@ -0,0 +1,63 @@
+import type { VerificationIssueStage } from './verificationBoardStages';
+
+export const VERIFICATION_ISSUE_EVENT_TOPIC = '/sub/verification-issues/events';
+
+export type VerificationIssueEventType = 'CREATED' | 'STAGE_CHANGED';
+
+export interface VerificationIssueEventDto {
+  eventType: VerificationIssueEventType;
+  issueId: number;
+  title: string;
+  stage: VerificationIssueStage;
+  previousStage?: VerificationIssueStage | null;
+  updatedAt?: string;
+  sourceDeviceId?: string | null;
+}
+
+export interface VerificationIssueToastItem {
+  id: string;
+  issueId: number;
+  title: string;
+  stage: VerificationIssueStage;
+  previousStage?: VerificationIssueStage | null;
+  eventType: VerificationIssueEventType;
+}
+
+export function getVerificationDeviceId(): string {
+  let id = localStorage.getItem('gc_device_id');
+  if (!id) {
+    id = crypto.randomUUID();
+    localStorage.setItem('gc_device_id', id);
+  }
+  return id;
+}
+
+export function parseVerificationIssueEvent(raw: string): VerificationIssueEventDto | null {
+  try {
+    const data = JSON.parse(raw) as VerificationIssueEventDto;
+    if (data.issueId == null || !data.eventType || !data.title) return null;
+    if (data.eventType !== 'CREATED' && data.eventType !== 'STAGE_CHANGED') return null;
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+export function shouldShowVerificationIssueEvent(event: VerificationIssueEventDto): boolean {
+  const localDevice = getVerificationDeviceId();
+  if (event.sourceDeviceId && event.sourceDeviceId === localDevice) {
+    return false;
+  }
+  return true;
+}
+
+export function eventToToast(event: VerificationIssueEventDto): VerificationIssueToastItem {
+  return {
+    id: `${event.eventType}-${event.issueId}-${event.updatedAt ?? Date.now()}`,
+    issueId: event.issueId,
+    title: event.title,
+    stage: event.stage,
+    previousStage: event.previousStage,
+    eventType: event.eventType,
+  };
+}