Unify popup UI to TradeAlertModal design system.

Add AppPopup shell, shared CSS, MUI theme overrides, and center positioning for consistent modal styling across frontend and frontend_golden.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/DraggableModalFrame.tsx

@@ -1,12 +1,14 @@
 /**
- * 드래그 가능한 모달 프레임 — 그라데이션 타이틀바(gc-popup-header) + 화면 중앙 초기 배치
+ * 드래그 가능한 모달 프레임 — AppPopup 기반
  */
 import React from 'react';
-import { useDraggablePanel } from '../hooks/useDraggablePanel';
+import AppPopup from './AppPopup';
 
 export interface DraggableModalFrameProps {
   onClose: () => void;
   title: React.ReactNode;
+  titleKo?: React.ReactNode;
+  badge?: string;
   children: React.ReactNode;
   overlayClassName?: string;
   dialogClassName?: string;
@@ -19,60 +21,32 @@ export interface DraggableModalFrameProps {
 export const DraggableModalFrame: React.FC<DraggableModalFrameProps> = ({
   onClose,
   title,
+  titleKo,
+  badge,
   children,
   overlayClassName = 'sp-modal-overlay',
   dialogClassName = 'sp-modal',
-  bodyClassName = 'sp-modal-body',
+  bodyClassName = 'sp-modal-body app-popup-body',
   zIndex = 1000,
   width,
   closeOnBackdrop = true,
-}) => {
-  const {
-    panelRef,
-    dragging,
-    onHeaderPointerDown, headerTouchStyle,
-    panelStyle,
-    headerCursor,
-  } = useDraggablePanel({ centerOnMount: true });
-
-  return (
-    <div
-      className={overlayClassName}
-      style={{ zIndex }}
-      onMouseDown={e => {
-        if (closeOnBackdrop && e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={panelRef}
-        className={dialogClassName}
-        style={{
-          ...panelStyle,
-          ...(width != null ? { width } : {}),
-          cursor: dragging ? 'grabbing' : undefined,
-        }}
-        onMouseDown={e => e.stopPropagation()}
-      >
-        <div
-          className="gc-popup-header sp-modal-header"
-          onPointerDown={onHeaderPointerDown}
-          style={{ cursor: headerCursor, ...headerTouchStyle }}
-        >
-          <span className="gc-popup-title sp-modal-title">{title}</span>
-          <button
-            type="button"
-            className="gc-popup-close"
-            onMouseDown={e => e.stopPropagation()}
-            onClick={onClose}
-            aria-label="닫기"
-          >
-            ✕
-          </button>
-        </div>
-        <div className={bodyClassName}>{children}</div>
-      </div>
-    </div>
-  );
-};
+}) => (
+  <AppPopup
+    onClose={onClose}
+    title={title}
+    titleKo={titleKo}
+    badge={badge}
+    overlayClassName={overlayClassName}
+    shellClassName={dialogClassName}
+    bodyClassName={bodyClassName}
+    zIndex={zIndex}
+    width={width ?? 420}
+    backdrop
+    closeOnBackdrop={closeOnBackdrop}
+    centered
+  >
+    {children}
+  </AppPopup>
+);
 
 export default DraggableModalFrame;