.app-popup-shell,
+.app-popup-overlay--dim > .tam-modal,
+.app-popup-overlay--dim > .lsp-modal,
+.app-popup-overlay--dim > .gc-popup-panel,
+.brm-overlay > .brm-modal,
+.ism-overlay > .ism-dialog,
+.ibsm-overlay > .ibsm-dialog,
+.mcs-overlay > .mcs-dialog,
+.dsm-overlay > .dsm-dialog,
+.sp-modal-overlay > .sp-modal,
+.obj-tree-overlay > .obj-tree-panel,
+.ind-overlay > .ind-panel,
+.plsp-overlay > .plsp-popup,
+.login-modal-backdrop > .login-modal {
+ pointer-events: auto;
+}
+
+.app-popup-overlay > .app-popup-shell,
+.tam-overlay > .tam-modal,
+.lsp-overlay > .lsp-modal {
+ pointer-events: auto;
+}
+
+/* ── 셸 (모달 컨테이너) ── */
+.app-popup-shell,
+.tam-modal,
+.lsp-modal,
+.gc-popup-panel,
+.bts-modal,
+.brm-modal,
+.ism-dialog,
+.ibsm-dialog,
+.mcs-dialog,
+.dsm-dialog,
+.sp-modal,
+.obj-tree-panel,
+.ind-panel,
+.plsp-popup,
+.indicator-modal,
+.login-modal {
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+ background: var(--bg2, #1e222d);
+ border: 1px solid var(--app-popup-accent, var(--tam-accent, rgba(63, 126, 245, 0.35)));
+ border-radius: 12px;
+ box-shadow:
+ 0 0 0 1px var(--app-popup-accent-glow, var(--tam-accent-glow, rgba(63, 126, 245, 0.08))),
+ 0 20px 60px rgba(0, 0, 0, 0.65),
+ 0 0 40px var(--app-popup-accent-glow, rgba(63, 126, 245, 0.06));
+ overflow: hidden;
+ font-size: 13px;
+ color: var(--text, #c0caf5);
+ font-family: var(--font, 'Noto Sans KR', sans-serif);
+ max-width: 96vw;
+ max-height: 90vh;
+}
+
+/* ── 헤더 ── */
+.app-popup-header,
+.gc-popup-header.tam-header,
+.gc-popup-header.lsp-header,
+.gc-popup-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ padding: 10px 14px;
+ flex-shrink: 0;
+ cursor: grab;
+ user-select: none;
+ touch-action: none;
+ border-bottom: 1px solid var(--border, rgba(122, 162, 247, 0.12));
+ background: linear-gradient(
+ 180deg,
+ rgba(63, 126, 245, 0.14) 0%,
+ rgba(63, 126, 245, 0.04) 28px,
+ var(--bg3, #1f2335) 100%
+ );
+}
+.app-popup-header:active,
+.gc-popup-header:active { cursor: grabbing; }
+
+.app-popup-header-left,
+.tam-header-left,
+.lsp-header-left {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ flex: 1;
+ min-width: 0;
+}
+
+.app-popup-badge,
+.tam-badge,
+.lsp-badge {
+ display: inline-block;
+ padding: 3px 10px;
+ border-radius: 20px;
+ font-size: 11px;
+ font-weight: 800;
+ color: #fff;
+ letter-spacing: 1.2px;
+ flex-shrink: 0;
+}
+
+.app-popup-header-title,
+.tam-header-title,
+.lsp-header-title,
+.gc-popup-title {
+ font-size: 14px;
+ font-weight: 700;
+ color: var(--text, #c0caf5);
+ letter-spacing: 0.4px;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.app-popup-header-ko,
+.tam-header-ko,
+.lsp-header-ko {
+ font-size: 12px;
+ font-weight: 400;
+ color: var(--text2, #9aa5ce);
+}
+
+.app-popup-close,
+.tam-close,
+.lsp-close,
+.gc-popup-close,
+.bts-close,
+.brm-close,
+.ism-close,
+.ibsm-close,
+.login-modal-close {
+ background: none;
+ border: none;
+ color: var(--text3, #6272a4);
+ font-size: 16px;
+ cursor: pointer;
+ padding: 2px 6px;
+ line-height: 1;
+ border-radius: 4px;
+ transition: color 0.15s, background 0.15s;
+ flex-shrink: 0;
+}
+.app-popup-close:hover,
+.tam-close:hover,
+.lsp-close:hover,
+.gc-popup-close:hover,
+.bts-close:hover,
+.brm-close:hover { color: var(--text, #c0caf5); background: var(--bg4, rgba(255, 255, 255, 0.07)); }
+
+/* ── 본문 ── */
+.app-popup-body {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 12px 14px 14px;
+ overflow-y: auto;
+ flex: 1;
+ min-height: 0;
+}
+
+.app-popup-section {
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--border, rgba(122, 162, 247, 0.1));
+}
+.app-popup-section--gradient {
+ background: linear-gradient(
+ 135deg,
+ var(--app-popup-accent-glow, rgba(63, 126, 245, 0.08)) 0%,
+ transparent 60%
+ );
+}
+
+.app-popup-card {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ margin: 0 14px;
+ padding: 11px 14px;
+ background: var(--bg3, #1f2335);
+ border: 1px solid var(--border, rgba(122, 162, 247, 0.12));
+ border-radius: 9px;
+}
+
+.app-popup-field-row {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+.app-popup-field-label {
+ font-size: 11.5px;
+ color: var(--text2, #9aa5ce);
+ flex-shrink: 0;
+ min-width: 42px;
+}
+
+.app-popup-input,
+.app-popup-select {
+ flex: 1;
+ min-width: 0;
+ box-sizing: border-box;
+ background: var(--bg3, #1f2335);
+ border: 1px solid var(--border, rgba(122, 162, 247, 0.18));
+ border-radius: 6px;
+ outline: none;
+ color: var(--text, #c0caf5);
+ font-size: 12.5px;
+ padding: 7px 10px;
+ transition: border-color 0.15s;
+}
+.app-popup-input:focus,
+.app-popup-select:focus {
+ border-color: var(--app-popup-accent, #3f7ef5);
+}
+
+.app-popup-btn {
+ padding: 7px 11px;
+ border: 1px solid var(--border, rgba(122, 162, 247, 0.18));
+ border-radius: 6px;
+ background: var(--bg3, #1f2335);
+ color: var(--text2, #9aa5ce);
+ font-size: 11.5px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+.app-popup-btn:hover {
+ border-color: var(--app-popup-accent, #3f7ef5);
+ color: var(--text, #c0caf5);
+ background: var(--bg4, #414868);
+}
+.app-popup-btn--primary {
+ width: 100%;
+ padding: 12px;
+ border: none;
+ border-radius: 8px;
+ background: var(--app-popup-accent, #3f7ef5);
+ color: #fff;
+ font-size: 14px;
+ font-weight: 800;
+ box-shadow: 0 4px 16px var(--app-popup-accent-glow, rgba(63, 126, 245, 0.25));
+}
+.app-popup-btn--primary:hover { opacity: 0.92; }
+
+.app-popup-disclaimer {
+ font-size: 10.5px;
+ color: var(--text3, #6272a4);
+ text-align: center;
+ margin: 0;
+ line-height: 1.5;
+}
+
+/* 레거시 오버레이 통일 */
+.brm-overlay,
+.ism-overlay,
+.ibsm-overlay,
+.mcs-overlay,
+.dsm-overlay,
+.sp-modal-overlay,
+.obj-tree-overlay,
+.ind-overlay,
+.plsp-overlay,
+.login-modal-backdrop {
+ position: fixed;
+ inset: 0;
+ z-index: 5000;
+ background: rgba(0, 0, 0, 0.45);
+}
+
+/* 라이트 테마 */
+.app.light .app-popup-shell,
+.app.light .tam-modal,
+.app.light .lsp-modal,
+.app.light .gc-popup-panel,
+.app.light .bts-modal,
+.app.light .brm-modal,
+.app.light .ism-dialog,
+.app.light .login-modal {
+ background: #ffffff;
+ border-color: rgba(25, 118, 210, 0.35);
+ color: #212121;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 0 40px rgba(25, 118, 210, 0.08);
+}
+.app.light .app-popup-header,
+.app.light .gc-popup-header {
+ background: linear-gradient(180deg, rgba(25, 118, 210, 0.1) 0%, #f5f7fa 100%);
+ border-color: rgba(0, 0, 0, 0.1);
+}
+.app.light .app-popup-header-title,
+.app.light .gc-popup-title { color: #1a237e; }
+.app.light .app-popup-header-ko { color: #546e7a; }
+.app.light .app-popup-card { background: #f5f7fa; border-color: rgba(0, 0, 0, 0.1); }
+.app.light .app-popup-input,
+.app.light .app-popup-select { background: #f0f3f8; border-color: rgba(0, 0, 0, 0.12); color: #212121; }
diff --git a/frontend_golden/src/components/DraggablePaper.tsx b/frontend_golden/src/components/DraggablePaper.tsx
index 003c41f..8706925 100644
--- a/frontend_golden/src/components/DraggablePaper.tsx
+++ b/frontend_golden/src/components/DraggablePaper.tsx
@@ -2,22 +2,38 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Paper } from '@mui/material';
/**
- * 드래그 가능한 Dialog Paper 컴포넌트
- * 모든 Dialog에서 재사용 가능
+ * 드래그 가능한 Dialog Paper — tam 스타일 팝업, 마운트 시 화면 중앙 배치
*/
const DraggablePaper = (props: any) => {
const paperRef = useRef
(null);
const [isDragging, setIsDragging] = useState(false);
- const [position, setPosition] = useState({ x: 0, y: 60 }); // 초기 위치를 더 아래로 (60px)
+ const [position, setPosition] = useState({ x: 0, y: 0 });
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+ const centeredOnce = useRef(false);
+
+ useEffect(() => {
+ if (centeredOnce.current) return;
+ const el = paperRef.current;
+ if (!el) return;
+ const placeCenter = () => {
+ const w = el.offsetWidth || 400;
+ const h = el.offsetHeight || 320;
+ setPosition({
+ x: Math.max(8, (window.innerWidth - w) / 2),
+ y: Math.max(8, (window.innerHeight - h) / 2),
+ });
+ centeredOnce.current = true;
+ };
+ placeCenter();
+ const id = requestAnimationFrame(placeCenter);
+ return () => cancelAnimationFrame(id);
+ }, []);
const handleMouseDown = (e: React.MouseEvent) => {
- // 타이틀바 영역에서만 드래그 시작
const target = e.target as HTMLElement;
- // 버튼, 아이콘버튼, 또는 그 내부 요소를 클릭한 경우 드래그 시작 안 함
- if (target.closest('.MuiDialogTitle-root') &&
- !target.closest('button') &&
- !target.closest('.MuiButton-root') &&
+ if (target.closest('.MuiDialogTitle-root') &&
+ !target.closest('button') &&
+ !target.closest('.MuiButton-root') &&
!target.closest('.MuiIconButton-root')) {
setIsDragging(true);
setDragStart({
@@ -29,17 +45,9 @@ const DraggablePaper = (props: any) => {
const handleMouseMove = useCallback((e: MouseEvent) => {
if (isDragging && paperRef.current) {
- // 새 위치 계산
- let newX = e.clientX - dragStart.x;
- let newY = e.clientY - dragStart.y;
-
- // 상단만 제한 (0보다 작아지지 않도록)
- const minY = 0;
- newY = Math.max(minY, newY);
-
setPosition({
- x: newX,
- y: newY,
+ x: e.clientX - dragStart.x,
+ y: Math.max(0, e.clientY - dragStart.y),
});
}
}, [isDragging, dragStart]);
@@ -71,12 +79,29 @@ const DraggablePaper = (props: any) => {
left: position.x,
margin: 0,
cursor: isDragging ? 'grabbing' : 'default',
+ borderRadius: '12px',
+ border: '1px solid rgba(63, 126, 245, 0.35)',
+ backgroundImage: 'none',
+ backgroundColor: '#1e222d',
+ boxShadow: '0 0 0 1px rgba(63,126,245,0.08), 0 20px 60px rgba(0,0,0,0.65), 0 0 40px rgba(63,126,245,0.06)',
+ overflow: 'hidden',
'& .MuiDialogTitle-root': {
cursor: 'grab',
userSelect: 'none',
- '&:active': {
- cursor: 'grabbing',
- },
+ 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,
+ '&:active': { cursor: 'grabbing' },
+ },
+ '& .MuiDialogContent-root': {
+ bgcolor: '#1e222d',
+ color: '#c0caf5',
+ },
+ '& .MuiDialogActions-root': {
+ bgcolor: '#1e222d',
+ borderTop: '1px solid rgba(122,162,247,0.1)',
},
}}
/>
@@ -84,4 +109,3 @@ const DraggablePaper = (props: any) => {
};
export default DraggablePaper;
-
diff --git a/frontend_golden/src/components/GoldenPopupDialogTitle.tsx b/frontend_golden/src/components/GoldenPopupDialogTitle.tsx
new file mode 100644
index 0000000..3a0c81f
--- /dev/null
+++ b/frontend_golden/src/components/GoldenPopupDialogTitle.tsx
@@ -0,0 +1,39 @@
+/**
+ * TradeAlertModal 스타일 MUI Dialog 타이틀 (배지 + EN/KO 제목)
+ */
+import React from 'react';
+import { Box, DialogTitle, IconButton, Typography } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { goldenPopupBadgeSx, goldenPopupDialogTitleSx } from '../utils/goldenPopupStyles';
+
+interface Props {
+ badge?: string;
+ title: React.ReactNode;
+ titleKo?: React.ReactNode;
+ onClose?: () => void;
+ extra?: React.ReactNode;
+}
+
+const GoldenPopupDialogTitle: React.FC = ({ badge, title, titleKo, onClose, extra }) => (
+
+
+ {badge ? {badge} : null}
+
+ {title}
+ {titleKo ? (
+
+ ({titleKo})
+
+ ) : null}
+
+
+ {extra}
+ {onClose ? (
+
+
+
+ ) : null}
+
+);
+
+export default GoldenPopupDialogTitle;
diff --git a/frontend_golden/src/components/LoginDialog.tsx b/frontend_golden/src/components/LoginDialog.tsx
index bc3f6ee..08c973c 100644
--- a/frontend_golden/src/components/LoginDialog.tsx
+++ b/frontend_golden/src/components/LoginDialog.tsx
@@ -1,7 +1,6 @@
import React, { useState } from 'react';
import {
Dialog,
- DialogTitle,
DialogContent,
DialogActions,
TextField,
@@ -14,9 +13,10 @@ import {
InputAdornment,
Divider,
} from '@mui/material';
-import { Visibility, VisibilityOff, Close, AccountCircle } from '@mui/icons-material';
+import { Visibility, VisibilityOff, AccountCircle } from '@mui/icons-material';
import { useAuth } from '../contexts/AuthContext';
import DraggablePaper from './DraggablePaper';
+import GoldenPopupDialogTitle from './GoldenPopupDialogTitle';
interface LoginDialogProps {
open: boolean;
@@ -87,32 +87,15 @@ const LoginDialog: React.FC = ({ open, onClose, onSwitchToSign
pointerEvents: 'none',
'& .MuiDialog-container': {
pointerEvents: 'none',
- alignItems: 'flex-start',
+ alignItems: 'center',
+ justifyContent: 'center',
},
}}
PaperProps={{
- sx: {
- pointerEvents: 'auto',
- boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
- border: '2px solid rgba(80, 100, 160, 0.5)',
- }
+ sx: { pointerEvents: 'auto' },
}}
>
-
-
- 🔐 로그인
-
-
-
-
-
+