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/PopupShell.tsx

@@ -1,81 +1,15 @@
 /**
- * 공통 팝업 셸 — 그라데이션 타이틀바 + 드래그 이동
+ * 공통 팝업 셸 — AppPopup 래퍼 (하위 호환)
  */
 import React from 'react';
-import { useDraggablePanel } from '../hooks/useDraggablePanel';
+import AppPopup, { type AppPopupProps } from './AppPopup';
 
-export interface PopupShellProps {
-  onClose: () => void;
+export type PopupShellProps = Omit<AppPopupProps, 'titleKo' | 'badge'> & {
   title: React.ReactNode;
-  children: React.ReactNode;
-  /** 패널 너비 (px 또는 CSS 값) */
-  width?: number | string;
-  className?: string;
-  dialogClassName?: string;
-  centered?: boolean;
-  zIndex?: number;
-  closeOnBackdrop?: boolean;
-  initialPosition?: { x: number; y: number };
-}
-
-export const PopupShell: React.FC<PopupShellProps> = ({
-  onClose,
-  title,
-  children,
-  width,
-  className,
-  dialogClassName,
-  centered = true,
-  zIndex = 5000,
-  closeOnBackdrop = true,
-  initialPosition,
-}) => {
-  const {
-    panelRef,
-    dragging,
-    onHeaderPointerDown, headerTouchStyle,
-    panelStyle,
-    headerCursor,
-  } = useDraggablePanel({ centerOnMount: centered, initialPosition });
-
-  return (
-    <div
-      className={`gc-popup-overlay${className ? ` ${className}` : ''}`}
-      style={{ zIndex }}
-      onMouseDown={e => {
-        if (closeOnBackdrop && e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={panelRef}
-        className={`gc-popup-panel${dialogClassName ? ` ${dialogClassName}` : ''}`}
-        style={{
-          ...panelStyle,
-          width,
-          cursor: dragging ? 'grabbing' : undefined,
-        }}
-        onMouseDown={e => e.stopPropagation()}
-      >
-        <div
-          className="gc-popup-header"
-          onPointerDown={onHeaderPointerDown}
-          style={{ cursor: headerCursor, ...headerTouchStyle }}
-        >
-          <span className="gc-popup-title">{title}</span>
-          <button
-            type="button"
-            className="gc-popup-close"
-            onMouseDown={e => e.stopPropagation()}
-            onClick={onClose}
-            aria-label="닫기"
-          >
-            ✕
-          </button>
-        </div>
-        {children}
-      </div>
-    </div>
-  );
 };
 
+export const PopupShell: React.FC<PopupShellProps> = (props) => (
+  <AppPopup backdrop={props.backdrop ?? true} {...props} />
+);
+
 export default PopupShell;