goldenChat base source add

2026-05-23 15:11:48 +09:00
commit a4ea7762b5
2081 changed files with 1155760 additions and 0 deletions
@@ -0,0 +1,78 @@
+/**
+ * 드래그 가능한 모달 프레임 — 그라데이션 타이틀바(gc-popup-header) + 화면 중앙 초기 배치
+ */
+import React from 'react';
+import { useDraggablePanel } from '../hooks/useDraggablePanel';
+
+export interface DraggableModalFrameProps {
+  onClose: () => void;
+  title: React.ReactNode;
+  children: React.ReactNode;
+  overlayClassName?: string;
+  dialogClassName?: string;
+  bodyClassName?: string;
+  zIndex?: number;
+  width?: number | string;
+  closeOnBackdrop?: boolean;
+}
+
+export const DraggableModalFrame: React.FC<DraggableModalFrameProps> = ({
+  onClose,
+  title,
+  children,
+  overlayClassName = 'sp-modal-overlay',
+  dialogClassName = 'sp-modal',
+  bodyClassName = 'sp-modal-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>
+  );
+};
+
+export default DraggableModalFrame;