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>
2026-05-23 16:56:37 +09:00
parent 67db5982d9
commit eaf067db1c
15 changed files with 1383 additions and 494 deletions
@@ -0,0 +1,73 @@
+/** TradeAlertModal(tam-) 기준 MUI Dialog 공통 스타일 — frontend_golden */
+export const GOLDEN_POPUP_ACCENT = '#3f7ef5';
+export const GOLDEN_POPUP_ACCENT_GLOW = 'rgba(63,126,245,0.22)';
+
+export const goldenPopupDialogPaperSx = {
+  borderRadius: '12px',
+  border: `1px solid ${GOLDEN_POPUP_ACCENT}40`,
+  background: '#1e222d',
+  backgroundImage: 'none',
+  boxShadow: `0 0 0 1px ${GOLDEN_POPUP_ACCENT_GLOW}, 0 20px 60px rgba(0,0,0,0.65), 0 0 40px ${GOLDEN_POPUP_ACCENT_GLOW}`,
+  overflow: 'hidden',
+  maxWidth: '96vw',
+  maxHeight: '90vh',
+} as const;
+
+export const goldenPopupDialogTitleSx = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 1,
+  py: 1.25,
+  px: 1.75,
+  cursor: 'grab',
+  userSelect: 'none',
+  background: `linear-gradient(180deg, rgba(63,126,245,0.14) 0%, rgba(63,126,245,0.04) 28px, #1f2335 100%)`,
+  borderBottom: '1px solid rgba(122,162,247,0.12)',
+  color: '#c0caf5',
+  fontSize: '14px',
+  fontWeight: 700,
+  letterSpacing: '0.4px',
+  '&:active': { cursor: 'grabbing' },
+} as const;
+
+export const goldenPopupDialogContentSx = {
+  px: 1.75,
+  py: 1.5,
+  bgcolor: '#1e222d',
+  color: '#c0caf5',
+} as const;
+
+export const goldenPopupDialogActionsSx = {
+  px: 1.75,
+  py: 1.25,
+  bgcolor: '#1e222d',
+  borderTop: '1px solid rgba(122,162,247,0.1)',
+} as const;
+
+export const goldenPopupBadgeSx = {
+  display: 'inline-block',
+  px: 1.25,
+  py: 0.35,
+  borderRadius: '20px',
+  fontSize: '11px',
+  fontWeight: 800,
+  color: '#fff',
+  letterSpacing: '1.2px',
+  bgcolor: GOLDEN_POPUP_ACCENT,
+  flexShrink: 0,
+} as const;
+
+/** Dialog 공통 props (드래그 Paper + tam 스타일) */
+export function goldenPopupDialogProps(width = 400) {
+  return {
+    hideBackdrop: true,
+    PaperProps: {
+      sx: {
+        ...goldenPopupDialogPaperSx,
+        width,
+        m: 0,
+      },
+    },
+  } as const;
+}