Macbook
eaf067db1c
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>
53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
/**
|
|
* 드래그 가능한 모달 프레임 — AppPopup 기반
|
|
*/
|
|
import React from 'react';
|
|
import AppPopup from './AppPopup';
|
|
|
|
export interface DraggableModalFrameProps {
|
|
onClose: () => void;
|
|
title: React.ReactNode;
|
|
titleKo?: React.ReactNode;
|
|
badge?: string;
|
|
children: React.ReactNode;
|
|
overlayClassName?: string;
|
|
dialogClassName?: string;
|
|
bodyClassName?: string;
|
|
zIndex?: number;
|
|
width?: number | string;
|
|
closeOnBackdrop?: boolean;
|
|
}
|
|
|
|
export const DraggableModalFrame: React.FC<DraggableModalFrameProps> = ({
|
|
onClose,
|
|
title,
|
|
titleKo,
|
|
badge,
|
|
children,
|
|
overlayClassName = 'sp-modal-overlay',
|
|
dialogClassName = 'sp-modal',
|
|
bodyClassName = 'sp-modal-body app-popup-body',
|
|
zIndex = 1000,
|
|
width,
|
|
closeOnBackdrop = true,
|
|
}) => (
|
|
<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;
|