refactor(universal-form-modal): ConfigPanel 모달 분리 및 설정 패널 오버플로우 수정

- UniversalFormModalConfigPanel을 3개 모달로 분리 (2300줄 → 300줄)
  - FieldDetailSettingsModal: 필드 상세 설정
  - SaveSettingsModal: 저장 설정
  - SectionLayoutModal: 섹션 레이아웃 설정
- FloatingPanel, DetailSettingsPanel 가로 스크롤 오버플로우 수정
- SelectOptionConfig에 saveColumn 필드 추가 (저장 값 별도 지정)
This commit is contained in:
SeongHyun Kim
2025-12-11 15:29:37 +09:00
parent 190a677067
commit 6a676dcf5c
8 changed files with 2467 additions and 2069 deletions

View File

@@ -267,7 +267,7 @@ export const FloatingPanel: React.FC<FloatingPanelProps> = ({
{/* 컨텐츠 */}
<div
ref={contentRef}
className={autoHeight ? "flex-1" : "flex-1 overflow-auto"}
className={autoHeight ? "flex-1 w-full overflow-hidden" : "flex-1 w-full overflow-y-auto overflow-x-hidden"}
style={
autoHeight
? {}

View File

@@ -878,7 +878,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
};
return (
<div className="space-y-4" key={selectedComponent.id}>
<div className="space-y-4 w-full min-w-0" key={selectedComponent.id}>
<div className="flex items-center gap-2 border-b pb-2">
<Settings className="h-4 w-4 text-primary" />
<h3 className="text-sm font-semibold">{definition.name} </h3>
@@ -998,7 +998,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
</div>
{/* 설정 패널 영역 */}
<div className="flex-1 overflow-y-auto p-4">{renderComponentConfigPanel()}</div>
<div className="flex-1 overflow-y-auto overflow-x-hidden p-4 w-full">{renderComponentConfigPanel()}</div>
</div>
);
}
@@ -1156,8 +1156,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
</div>
{/* 컴포넌트 설정 패널 */}
<div className="flex-1 overflow-y-auto px-6 pb-6">
<div className="space-y-6">
<div className="flex-1 overflow-y-auto overflow-x-hidden px-6 pb-6 w-full min-w-0">
<div className="space-y-6 w-full min-w-0">
{/* DynamicComponentConfigPanel */}
<DynamicComponentConfigPanel
componentId={componentId}
@@ -1396,8 +1396,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
</div>
{/* 상세 설정 영역 */}
<div className="flex-1 overflow-y-auto p-4">
<div className="space-y-6">
<div className="flex-1 overflow-y-auto overflow-x-hidden p-4 w-full min-w-0">
<div className="space-y-6 w-full min-w-0">
{console.log("🔍 [DetailSettingsPanel] widget 타입:", selectedComponent?.type, "autoFill:", widget.autoFill)}
{/* 🆕 자동 입력 섹션 */}
<div className="space-y-4 rounded-md border border-red-500 bg-yellow-50 p-4">