feat: 화면 디자이너 모달 및 제어 관리 탭 기능 추가

- 화면 설정 모달에 "제어 관리" 탭 추가하여 버튼 제어 설정을 간편하게 관리 - 버튼 액션 설정 기능 구현: 버튼 목록 표시 및 각 버튼의 액션 타입 수정 가능 - 화면 디자이너 모달 통합: 전체화면 Dialog 내부에 ScreenDesigner 임베드 - URL 쿼리 파라미터로 화면 디자이너 자동 열기 기능 추가 - 화면 캔버스 크기 자동 조절 기능 구현: 최소 크기 보장 및 여유 마진 추가 - 필드 추가/제거 기능 개선: 기존 그리드 컬럼 변경 로직과 통합하여 사용자 경험 향상
2026-01-14 14:35:27 +09:00
parent 905a9f62c3
commit f321aaf7aa
12 changed files with 3022 additions and 1124 deletions
--- a/docs/화면설정모달_개선_완료_보고서.md
+++ b/docs/화면설정모달_개선_완료_보고서.md
@@ -247,21 +247,153 @@ interface TableColumnAccordionProps {
 - 필터 테이블: 보라색 테마 (`purple`)
 - `themeColor`, `themeIcon`, `themeBadge` 변수로 동적 스타일 적용

-### 9. 드래그 앤 드롭 컬럼 순서 변경
+### 9. 제어 관리 탭 (신규)

-#### 9.1 기능 설명
+#### 9.1 개요
+- 화면 설정 모달에 **"제어 관리"** 탭 추가
+- 화면 디자이너의 버튼 제어 설정을 간편하게 관리
+- 상세 설정은 화면 디자이너 링크 제공
+
+#### 9.2 버튼 액션 설정
+- 화면에 배치된 버튼 목록 표시
+- 버튼별 액션 타입, 대상 화면, 플로우 연동 등 수정 가능
+- **편집** 버튼 클릭 시 인라인 편집 모드 활성화
+- **저장** 버튼 클릭 시 `screenApi.saveLayout()` 으로 저장
+
+#### 9.3 지원 액션 타입
+| 액션 | 설명 |
+|------|------|
+| `save` | 저장 |
+| `delete` | 삭제 |
+| `edit` | 편집 |
+| `copy` | 복사 |
+| `navigate` | 페이지 이동 |
+| `modal` | 모달 열기 |
+| `openModalWithData` | 데이터 전달 + 모달 |
+| `openRelatedModal` | 연관 데이터 모달 |
+| `transferData` | 데이터 전달 |
+| `quickInsert` | 즉시 저장 |
+| `control` | 제어 흐름 |
+| `view_table_history` | 테이블 이력 |
+| `excel_download` | 엑셀 다운로드 |
+| `excel_upload` | 엑셀 업로드 |
+
+#### 9.4 모달/네비게이션 화면 선택
+- 액션 타입이 `modal`, `openModalWithData`, `openRelatedModal`인 경우:
+  - **모달 화면** 선택 가능
+  - 검색 가능한 드롭다운 (Combobox)
+  - **현재 그룹** 화면 우선 표시, **다른 그룹** 화면도 선택 가능
+- 액션 타입이 `navigate`인 경우:
+  - **이동 화면** 선택 가능
+  - 동일하게 검색 가능한 드롭다운 제공
+
+#### 9.5 다중 플로우 연동 지원 (신규)
+- **한 버튼에 여러 플로우 연동 가능**
+- 버튼별 플로우 목록을 세로 리스트 형식으로 표시
+- 각 플로우별 **실행 타이밍** 개별 설정: `before` (버튼 실행 전), `after` (버튼 실행 후)
+- 플로우 개별 제거 가능 (X 버튼)
+- **플로우 추가** 버튼으로 새 플로우 연동 (검색 가능한 Combobox)
+- 화면 디자이너의 `webTypeConfig.dataflowConfig.flowConfigs` 배열로 저장
+
+#### 9.6 상시 편집 모드 (개선)
+- 기존: "편집" 버튼 클릭 시에만 설정 변경 가능
+- 개선: **상시 편집 가능** (별도 편집 버튼 없음)
+- 변경사항이 있으면 "저장" 버튼 활성화
+- 더 빠르고 직관적인 설정 변경 경험
+
+#### 9.7 섹션 구분 개선 (UI 개선)
+- **버튼 액션 설정** 섹션:
+  - 파란색 테마 (`border-blue-200 bg-blue-50/30`)
+  - 헤더: `bg-blue-100/50 text-blue-900`
+  - 아이콘: MousePointer (파란색)
+- **플로우 연동 현황** 섹션:
+  - 보라색 테마 (`border-purple-200 bg-purple-50/30`)
+  - 헤더: `bg-purple-100/50 text-purple-900`
+  - 아이콘: Workflow (보라색)
+- 시각적으로 명확한 섹션 구분
+
+#### 9.8 플로우 연동 현황 표시 개선
+- 플로우 이름: **일반 텍스트**로 표시 (배지 아님)
+- 연동된 버튼: 배지로 표시
+- 미연동 플로우: **보라색 "미연동" 배지**로 표시
+- 플로우 관리 바로가기 버튼 제공
+
+#### 9.9 다중 플로우 저장 로직
+```typescript
+// 버튼 설정 저장 시 다중 플로우 처리
+if (values.linkedFlows !== undefined) {
+  if (values.linkedFlows && values.linkedFlows.length > 0) {
+    comp.webTypeConfig.enableDataflowControl = true;
+    comp.webTypeConfig.dataflowConfig = {
+      controlMode: "flow",
+      // 다중 플로우 저장
+      flowConfigs: values.linkedFlows.map((lf: any) => ({
+        flowId: lf.id,
+        flowName: lf.name,
+        executionTiming: lf.timing || "after",
+      })),
+      // 레거시 호환 - 첫 번째 플로우를 단일 flowConfig로도 저장
+      flowConfig: {
+        flowId: values.linkedFlows[0].id,
+        flowName: values.linkedFlows[0].name,
+        executionTiming: values.linkedFlows[0].timing || "after",
+      },
+    };
+  } else {
+    // 플로우 연동 해제 (빈 배열)
+    comp.webTypeConfig.enableDataflowControl = false;
+    delete comp.webTypeConfig.dataflowConfig;
+  }
+}
+```
+
+#### 9.10 화면 목록 조회 로직
+```typescript
+// 1. 전체 화면 조회 (모든 화면의 ID→이름 맵핑)
+const allScreensResponse = await screenApi.getScreens({ size: 1000 });
+const allScreensMap = new Map<number, string>();
+allScreensResponse.data.forEach((s: any) => {
+  const sid = Number(s.screenId || s.screen_id || s.id);
+  const sname = s.screenName || s.screen_name || s.name || `화면 ${sid}`;
+  if (!isNaN(sid)) allScreensMap.set(sid, sname);
+});
+
+// 2. 그룹 내 화면 조회
+if (groupId) {
+  const groupResponse = await getScreenGroup(groupId);
+  if (groupResponse.success && groupResponse.data?.screens) {
+    groupScreenIds = groupResponse.data.screens.map((s: any) => 
+      Number(s.screen_id || s.screenId || s.id)
+    ).filter(id => !isNaN(id));
+  }
+}
+
+// 3. 화면 목록 구성 (그룹 내 우선, 전체 포함)
+groupScreenIds.forEach(sid => {
+  screenListResult.push({ id: sid, name: allScreensMap.get(sid), inGroup: true });
+});
+allScreensMap.forEach((name, id) => {
+  if (!groupScreenIds.includes(id)) {
+    screenListResult.push({ id, name, inGroup: false });
+  }
+});
+```
+
+### 10. 드래그 앤 드롭 컬럼 순서 변경
+
+#### 10.1 기능 설명
 - 사용 중인 컬럼(필드)을 드래그하여 순서 변경 가능
 - 드래그 중에는 시각적으로만 순서 변경, **드롭 시에만 저장**
 - 드래그 취소(영역 밖으로 나간 경우) 시 원래 순서로 복원

-#### 9.2 드래그 상태 관리
+#### 10.2 드래그 상태 관리
 ```typescript
 // 드래그 상태
 const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
 const [localColumnOrder, setLocalColumnOrder] = useState<string[] | null>(null);
 ```

-#### 9.3 드래그 핸들러
+#### 10.3 드래그 핸들러
 ```typescript
 // 드래그 시작: 현재 순서를 로컬 상태로 저장
 const handleDragStart = (e: React.DragEvent, index: number) => {
@@ -297,12 +429,12 @@ const handleDragEnd = () => {
 };
 ```

-#### 9.4 시각적 피드백
+#### 10.4 시각적 피드백
 - 드래그 가능한 컬럼: `cursor-grab active:cursor-grabbing`
 - 드래그 중인 컬럼: `opacity-50 scale-95`
 - 드래그 중 실시간 순서 변경 표시

-#### 9.5 저장 로직 (`handleColumnReorder`)
+#### 10.5 저장 로직 (`handleColumnReorder`)
 ```typescript
 const handleColumnReorder = async (tableType: "main" | "filter", newOrder: string[]) => {
  const currentLayout = await screenApi.getLayout(screenId);
@@ -337,7 +469,7 @@ const handleColumnReorder = async (tableType: "main" | "filter", newOrder: strin
 };
 ```

-#### 9.6 지원 범위
+#### 10.6 지원 범위
 - 메인 테이블: `onColumnReorder={(newOrder) => handleColumnReorder("main", newOrder)}`
 - 필터 테이블: `onColumnReorder={(newOrder) => handleColumnReorder("filter", newOrder)}`
 - 지원 배열:
@@ -346,6 +478,190 @@ const handleColumnReorder = async (tableType: "main" | "filter", newOrder: strin
  - `componentConfig.usedColumns`
  - `componentConfig.columns`

+### 11. FlowEditor 임베드 (신규)
+
+#### 11.1 개요
+- 제어 관리 탭에서 **플로우 빠른 생성** 시 전체 FlowEditor를 모달로 임베드
+- 골격 생성이 아닌 **완전한 플로우 생성** 가능
+- 저장 시 자동으로 버튼에 연동
+
+#### 11.2 FlowEditor 컴포넌트 수정
+```typescript
+interface FlowEditorProps {
+  initialFlowId?: number | null;
+  onSaveComplete?: (flowId: number, flowName: string) => void; // 저장 완료 콜백
+  embedded?: boolean; // 임베디드 모드
+}
+```
+
+#### 11.3 FlowToolbar 수정
+- 저장 완료 시 `onSaveComplete` 콜백 호출
+- 기존 postMessage 로직 대체
+
+#### 11.4 사용 방법
+1. "새 플로우" 버튼 클릭
+2. 전체화면 모달에서 FlowEditor 열림
+3. 플로우 완전 구성 (테이블, 필드 매핑, 조건 등)
+4. 저장 시 자동으로:
+   - 플로우 생성
+   - 버튼에 연동 (버튼에서 시작한 경우)
+   - 플로우 목록 새로고침
+
+### 12. 화면 캔버스 크기 자동 조절 (신규)
+
+#### 12.1 문제
+- 기존: iframe 크기가 고정되어 화면 내용이 잘림
+- 특히 폼 화면에서 인풋 필드, 저장 버튼 등이 보이지 않음
+
+#### 12.2 해결
+- 백엔드: 컴포넌트 최대 좌표 기준으로 `canvasWidth`, `canvasHeight` 계산
+- 프론트엔드: `PreviewTab`에 캔버스 크기 전달, 여유 마진 추가
+
+#### 12.3 구현
+```typescript
+// 백엔드 (screenGroupController.ts)
+const rightEdge = (row.position_x || 0) + (row.width || 100);
+const bottomEdge = (row.position_y || 0) + (row.height || 30);
+if (rightEdge > summaryMap[screenId].canvasWidth) {
+  summaryMap[screenId].canvasWidth = rightEdge;
+}
+if (bottomEdge > summaryMap[screenId].canvasHeight) {
+  summaryMap[screenId].canvasHeight = bottomEdge;
+}
+
+// 프론트엔드 (ScreenSettingModal.tsx)
+const designWidth = Math.max((canvasWidth || 400) + 120, 500);
+const designHeight = Math.max((canvasHeight || 400) + 250, 650);
+```
+
+### 13. 인풋 필드 인식 개선 (신규)
+
+#### 13.1 문제
+- 폼 화면의 인풋 필드가 "필드"로 인식되지 않음
+- 필드 매핑 0개로 표시
+
+#### 13.2 원인
+- 백엔드 SQL 쿼리에서 `columnName` 속성을 추출하지 않음
+- 프론트엔드에서 `bindField`를 필드 카운트에 포함하지 않음
+
+#### 13.3 해결
+```sql
+-- 백엔드 SQL 수정
+COALESCE(
+  properties->'componentConfig'->>'bindField',
+  properties->>'bindField',
+  properties->'componentConfig'->>'field',
+  properties->>'field',
+  properties->>'columnName'  -- 추가됨
+) as bind_field,
+```
+
+```typescript
+// 프론트엔드 필드 카운트 수정
+layoutItems.forEach((item) => {
+  if (item.usedColumns) {
+    item.usedColumns.forEach((col) => layoutColumnsSet.add(col));
+  }
+  if (item.bindField) {
+    layoutColumnsSet.add(item.bindField); // 추가됨
+  }
+});
+```
+
+### 14. 폼 화면 필드 추가/제거 (신규)
+
+#### 14.1 기존 그리드 vs 폼 화면
+- **그리드 화면**: `leftPanel.columns`, `rightPanel.columns` 배열에서 컬럼 추가/제거
+- **폼 화면**: `text-input` 등 컴포넌트 자체를 추가/제거해야 함
+
+#### 14.2 구현
+```typescript
+// 필드 추가: 새 text-input 컴포넌트 생성
+if (isAddingField && !columnChanged) {
+  const newFormComponent: LayoutItem = {
+    id: `comp-${Date.now()}`,
+    componentType: "text-input",
+    label: newColumn,
+    bindField: newColumn,
+    position_x: newComponentX,
+    position_y: newComponentY,
+    width: 300,
+    height: 30,
+    // ...
+  };
+  updatedComponents.push(newFormComponent);
+}
+
+// 필드 제거: bindField가 일치하는 컴포넌트 삭제
+if (isRemovingField && !columnChanged) {
+  updatedComponents = updatedComponents.filter((comp: any) => 
+    comp.bindField?.toLowerCase() !== oldColumn.toLowerCase()
+  );
+}
+```
+
+### 15. 화면 디자이너 모달 통합 (신규)
+
+#### 15.1 개요
+- 기존: "디자이너" 버튼 클릭 시 새 탭/창에서 열림
+- 변경: 전체화면 Dialog 내부에 ScreenDesigner 임베드
+
+#### 15.2 장점
+- 화면 설정 모달을 닫지 않고 디자이너 사용
+- 디자이너 닫을 때 자동 새로고침
+
+#### 15.3 구현
+```tsx
+<Dialog open={showDesignerModal} onOpenChange={setShowDesignerModal}>
+  <DialogContent className="max-w-[98vw] h-[95vh] p-0 overflow-hidden">
+    <ScreenDesigner
+      selectedScreen={{...}}
+      onBackToList={async () => {
+        setShowDesignerModal(false);
+        await loadData();
+        setIframeKey(prev => prev + 1);
+      }}
+    />
+  </DialogContent>
+</Dialog>
+```
+
+### 16. 그룹 내 화면 전환 셀렉트박스 (신규)
+
+#### 16.1 개요
+- 그룹에 여러 화면이 있을 때 모달 내에서 화면 전환 가능
+- 모달을 닫지 않고도 다른 화면 설정 가능
+
+#### 16.2 구현
+```typescript
+// 그룹 내 화면 목록 로드
+const loadGroupScreens = useCallback(async () => {
+  if (!groupId) return;
+  const groupRes = await getScreenGroup(groupId);
+  if (groupRes.success && groupRes.data) {
+    const screens = groupRes.data.screens || [];
+    screens.sort((a, b) => (a.display_order || 0) - (b.display_order || 0));
+    setGroupScreens(screens);
+  }
+}, [groupId]);
+
+// 화면 선택 변경 핸들러
+const handleScreenChange = useCallback(async (newScreenId: number) => {
+  const selectedScreen = groupScreens.find(s => s.screen_id === newScreenId);
+  if (!selectedScreen) return;
+  
+  setCurrentScreenId(newScreenId);
+  setCurrentScreenName(selectedScreen.screen_name);
+  setCurrentMainTable(selectedScreen.table_name);
+  setIframeKey(prev => prev + 1);
+}, [groupScreens]);
+```
+
+#### 16.3 UI
+- 그룹 내 화면이 2개 이상: 제목 옆에 셀렉트박스 표시
+- 그룹 내 화면이 1개: 기존처럼 텍스트 표시
+- 화면 역할(screen_role)도 함께 표시
+
 ## 기술 스택

 ### 신규 의존성
@@ -449,13 +765,17 @@ const handleColumnChange = async (fieldLabel: string, oldColumn: string, newColu

 | 파일 | 변경 내용 |
 |------|----------|
-| `frontend/components/screen/ScreenSettingModal.tsx` | 전체 UI 개선, 줌/드래그 기능, 컬럼 변경/추가/제거 기능, 조인 설정 기능, 필드 매핑 통합, 실시간 반영 |
+| `frontend/components/screen/ScreenSettingModal.tsx` | 전체 UI 개선, 줌/드래그 기능, 컬럼 변경/추가/제거 기능, 조인 설정 기능, 필드 매핑 통합, 실시간 반영, 제어 관리 탭 추가, 버튼 액션 설정, 플로우 연동, FlowEditor 임베드, ScreenDesigner 모달 임베드, 그룹 내 화면 전환 셀렉트박스 |
 | `frontend/components/screen/ScreenRelationFlow.tsx` | `filterKeyMapping`, `joinColumnRefs` 데이터 전달 |
+| `frontend/components/dataflow/node-editor/FlowEditor.tsx` | `onSaveComplete` 콜백, `embedded` 모드 props 추가 |
+| `frontend/components/dataflow/node-editor/FlowToolbar.tsx` | 저장 완료 시 `onSaveComplete` 콜백 호출 |
 | `frontend/lib/api/entityJoin.ts` | `companyCodeOverride` 파라미터 추가 |
 | `frontend/lib/api/screen.ts` | `saveLayout`, `getLayout` API 사용 |
 | `frontend/lib/api/tableManagement.ts` | `getTableList`, `getColumnList`, `updateColumnSettings` API |
 | `frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx` | `companyCode` prop 추가 |
+| `frontend/lib/registry/components/button/ButtonPrimaryComponent.tsx` | `webTypeConfig.backgroundColor/textColor` 지원 추가 |
 | `backend-node/src/controllers/entityJoinController.ts` | `companyCodeOverride` 처리 로직 추가 |
+| `backend-node/src/controllers/screenGroupController.ts` | `bind_field` 쿼리에 `columnName` 추가, `canvasWidth`/`canvasHeight` 계산 |

 ## 사용 방법

@@ -512,10 +832,124 @@ const handleColumnChange = async (fieldLabel: string, oldColumn: string, newColu
 - 미사용 컬럼은 드래그 불가
 - 드래그 중에는 저장되지 않고, 드롭 시에만 저장됨

+### 그룹 내 화면 전환
+1. 화면 설정 모달을 열면 제목 옆에 **셀렉트박스** 표시 (그룹 내 화면이 2개 이상일 때)
+2. 셀렉트박스 클릭하여 같은 그룹의 다른 화면 선택
+3. 선택 즉시:
+   - 화면 데이터 자동 리로드
+   - 프리뷰 iframe 자동 새로고침
+4. 화면 역할(list, form, modal 등)도 함께 표시
+
+**참고:**
+- 그룹 내 화면이 1개뿐이면 기존처럼 텍스트로 표시
+- 모달을 닫지 않고도 여러 화면 설정 가능
+
+### 플로우 빠른 생성
+1. 제어 관리 탭의 "플로우 연동 현황"에서 **"새 플로우"** 버튼 클릭
+2. 또는 버튼별 플로우 선택에서 **"새 플로우 생성"** 옵션 클릭
+3. 전체화면 모달에서 FlowEditor가 열림
+4. 플로우를 완전하게 구성 (테이블 선택, 필드 매핑, 조건 등)
+5. 저장 시 자동으로 해당 버튼에 연동
+
+**참고:**
+- 버튼에서 생성 시: 해당 버튼에 자동 연동
+- 헤더에서 생성 시: 연동 없이 플로우만 생성
+- 모달을 닫으면 플로우 목록 자동 새로고침
+
+### 화면 디자이너 열기
+1. 화면 설정 모달의 제목 옆 **외부 링크 아이콘** 클릭
+2. 전체화면 모달에서 ScreenDesigner가 열림
+3. 컴포넌트 배치, 속성 변경 등 디자인 작업 수행
+4. 모달 닫을 때 자동으로:
+   - 화면 데이터 리로드
+   - 프리뷰 iframe 새로고침
+
+---
+
+## 향후 개선 계획 (Phase 2)
+
+### 컨셉: "손쉬운 사용"
+> 화면 디자이너에 들어가지 않고도 **자잘한 설정을 빠르게** 처리
+> **화면 테스트 → 설정 수정 → 다시 테스트** 사이클을 최소화
+
+### 1순위: 버튼 이름 변경 + 색상 변경 ✅ 완료
+| 항목 | 내용 |
+|------|------|
+| **필요성** | 오타 수정, 문구 변경, 버튼 색상 변경 시 화면 디자이너 진입 필요 |
+| **현재 상태** | ✅ **구현 완료** |
+| **구현 내용** | |
+
+#### 버튼 이름 변경
+- 버튼 이름을 직접 입력 필드에서 수정 가능
+- 실시간 버튼 프리뷰 제공
+- 저장 위치: `componentConfig.text`, `comp.label`, `comp.title` (레거시 호환)
+
+#### 버튼 색상 변경
+- 배경색 + 글자색 컬러 피커 제공
+- **프리셋 색상 버튼**: 파랑, 초록, 빨강, 회색, 흰색
+- 실시간 버튼 프리뷰에 색상 반영
+- 저장 위치:
+  - 배경색: `componentConfig.backgroundColor`, `style.backgroundColor`
+  - 글자색: `componentConfig.textColor`, `style.color`, `style.labelColor`
+
+### 1순위: 컬럼 라벨(표시명) 변경
+| 항목 | 내용 |
+|------|------|
+| **필요성** | "거래처코드" → "고객코드" 같은 헤더 변경 |
+| **현재 상태** | 컬럼명만 표시, 수정 불가 |
+| **구현 방향** | 컬럼 설정 패널에 "표시명" Input 추가 |
+| **주의사항** | 라벨만 변경, 실제 DB 컬럼명(`columnName`)은 변경 불가 (company_code 안전) |
+| **예상 난이도** | 중간 (1시간) |
+
+### 2순위: 확인 메시지 설정 ✅ 완료
+| 항목 | 내용 |
+|------|------|
+| **필요성** | "삭제하시겠습니까?" 같은 확인 다이얼로그 메시지 수정 |
+| **현재 상태** | ✅ **구현 완료** |
+| **구현 내용** | 저장/삭제 버튼에 확인 메시지 Input 필드 추가, 화면 디자이너와 동일하게 `confirmMessage` 저장 |
+
+### 추가 요청: 플로우 빠른 생성 ✅ 완료
+| 항목 | 내용 |
+|------|------|
+| **필요성** | 시스템관리 > 제어관리에 나가지 않고 바로 플로우 생성 |
+| **현재 상태** | ✅ **구현 완료** |
+| **구현 내용** | FlowEditor를 전체화면 모달로 임베드, 저장 시 자동 버튼 연동 |
+| **현재 상태** | 플로우 선택/연동만 가능, 생성 불가 |
+| **구현 방안** | |
+
+#### 방안 A: 모달 내 간이 플로우 생성
+- 장점: 화면 이탈 없음
+- 단점: FlowEditor 축소판 개발 필요 (큰 작업)
+
+#### 방안 B: iframe으로 FlowEditor 임베드
+- 장점: 기존 FlowEditor 재사용
+- 단점: 화면 공간 부족, 상태 동기화 복잡
+
+#### 방안 C: 새 창/탭으로 FlowEditor 열기 + 콜백
+- 장점: 전체 기능 사용 가능, 개발 비용 최소
+- 단점: 화면 전환 필요
+
+#### 방안 D: 간이 플로우 템플릿 선택 ⭐ 권장
+- 장점: 빠른 설정, 사용자 친화적
+- 단점: 커스터마이징 제한
+
+**템플릿 종류 예시:**
+- 데이터 저장 (INSERT)
+- 데이터 수정 (UPDATE)
+- 이력 저장 (INSERT to 이력 테이블)
+- 외부 API 호출
+
+### 미포함 항목 (상세 설정 권장)
+- 버튼 표시/숨김
+- 버튼 색상 변경
+- 컬럼 너비 조정
+- 필터 라벨 변경
+- 화면 이름/설명 변경
+
 ---

 ## 완료일
-2026-01-13
+2026-01-14

 ## 변경 이력
 - 2026-01-12: 최초 작성 (줌/드래그/클릭, company_code 전달)
@@ -533,3 +967,62 @@ const handleColumnChange = async (fieldLabel: string, oldColumn: string, newColu
 - 2026-01-13: `MainTableAccordion`과 `FilterTableAccordion`을 `TableColumnAccordion`으로 통합
 - 2026-01-13: 드래그 앤 드롭 컬럼 순서 변경 기능 구현
 - 2026-01-13: 드래그 중에는 로컬 상태만 변경, 드롭 시에만 저장하도록 최적화
+- 2026-01-13: "제어 관리" 탭 신규 추가 (버튼 액션 설정, 플로우 연동)
+- 2026-01-13: 버튼별 플로우 연동 및 실행 타이밍 설정 기능
+- 2026-01-13: 모달/네비게이션 화면 선택 시 검색 가능한 Combobox 적용
+- 2026-01-13: 화면 목록 조회 개선 (전체 화면 조회 후 그룹별 분류)
+- 2026-01-13: 외부 연동 섹션 제거 (미사용)
+- 2026-01-13: 플로우 연동 섹션 추가 (화면에 연동된 전체 플로우 목록)
+- 2026-01-13: **다중 플로우 지원** - 한 버튼에 여러 플로우 연동 가능 (`flowConfigs` 배열)
+- 2026-01-13: **상시 편집 모드** - "편집" 버튼 제거, 상시 설정 변경 가능
+- 2026-01-13: **섹션 구분 개선** - 버튼 액션(파란색) / 플로우 연동(보라색) 테마 분리
+- 2026-01-13: **플로우 표시 방식 개선** - 플로우명은 텍스트, 미연동은 보라색 배지
+- 2026-01-13: **플로우 타이밍 개별 설정** - 각 플로우별 실행 전/후 설정 가능
+- 2026-01-13: **향후 개선 계획 문서화** - 버튼 이름 변경, 컬럼 라벨 변경, 확인 메시지 설정, 플로우 빠른 생성
+- 2026-01-13: **버튼 이름 변경 기능 구현** - `<span>` → `<Input>`, `componentConfig.text` 저장
+- 2026-01-13: **버튼 색상 변경 기능 추가** - 배경색/글자색 컬러 피커, 프리셋 색상 버튼, 실시간 프리뷰
+- 2026-01-13: **버튼 색상 저장 위치 수정** - `webTypeConfig.backgroundColor/textColor`에 저장 (OptimizedButtonComponent와 일치)
+- 2026-01-14: **버튼 색상 렌더링 수정** - `ButtonPrimaryComponent.tsx`에서 `webTypeConfig.backgroundColor/textColor` 지원 추가
+- 2026-01-14: **확인 메시지 설정 기능 추가** - 화면 디자이너와 동일하게 `confirmMessage` 필드 사용, Input으로 메시지 설정
+- 2026-01-14: **확인 메시지 save/delete 전용** - `save`/`delete` 액션에서만 확인 메시지 필드 표시, 다른 액션 타입으로 변경 시 confirmMessage 자동 제거
+- 2026-01-14: **플로우 빠른 생성 기능 구현** - 제어 플로우 에디터와 동일한 형식으로 플로우 **골격** 생성
+  - 플로우 연동 현황 헤더에 "빠른 생성" 버튼 추가
+  - 버튼별 플로우 추가 드롭다운에도 "새 플로우 빠른 생성" 옵션 추가
+  - 생성 후 자동 연동 옵션 (선택한 버튼에 자동 연결)
+  - 테이블 선택 또는 직접 입력, 액션 타입 선택 (INSERT/UPDATE/DELETE)
+  - **중요**: 빠른 생성은 기본 구조만 생성, 필드 매핑/WHERE 조건은 제어 관리에서 추가 설정 필요
+  - "생성만" / "생성 후 편집" 버튼으로 워크플로우 선택 가능
+  - 경고 안내 UI 추가 (추가 설정 필요 안내)
+- 2026-01-14: **플로우 빠른 생성 → FlowEditor 임베드 방식으로 변경**
+  - 골격 생성 대신 **전체 FlowEditor를 전체화면 모달로 임베드**
+  - 플로우 생성 후 자동으로 버튼에 연동
+  - `FlowEditor` 컴포넌트에 `onSaveComplete` 콜백과 `embedded` 모드 추가
+  - `FlowToolbar`에서 저장 완료 시 콜백 호출
+- 2026-01-14: **인풋 필드 인식 개선**
+  - 백엔드 `getMultipleScreenLayoutSummary` SQL 쿼리에 `properties->>'columnName'` 추가
+  - `bindField`, `componentConfig.field`, `componentConfig.valueField` 를 `usedColumns`에 포함
+  - 프론트엔드 `stats` 계산 시 `item.bindField`도 `layoutColumnsSet`에 추가
+  - `TableColumnAccordion`에 `usedFields` props 전달하여 필드 배지 정확히 표시
+- 2026-01-14: **화면 캔버스 크기 자동 조절**
+  - 백엔드에서 `canvasWidth`, `canvasHeight` 계산 (컴포넌트 최대 좌표 기준)
+  - `PreviewTab`에서 `canvasWidth`, `canvasHeight` props 수신
+  - 여유 마진 추가: 가로 +120px, 세로 +250px (패딩, 헤더, 하단 요소 고려)
+  - 최소 크기 보장 (가로 500px, 세로 650px)
+- 2026-01-14: **폼 화면 필드 추가/제거 기능**
+  - `handleColumnChange`에서 `text-input` 등 폼 컴포넌트 처리 로직 추가
+  - 필드 추가 시: 마지막 컴포넌트 아래에 새 `text-input` 컴포넌트 자동 배치
+  - 필드 제거 시: `bindField`가 일치하는 컴포넌트 삭제
+  - 기존 그리드 컬럼 변경 로직과 통합
+- 2026-01-14: **화면 디자이너 모달 통합**
+  - 기존: "디자이너" 버튼 클릭 시 새 탭/창에서 열림
+  - 변경: **전체화면 Dialog 내부에 ScreenDesigner 임베드**
+  - `showDesignerModal` 상태로 모달 제어
+  - 디자이너 닫을 때 `loadData()` + `setIframeKey()` 호출하여 자동 새로고침
+- 2026-01-14: **그룹 내 화면 전환 기능 (셀렉트박스)**
+  - `groupId`가 있으면 `getScreenGroup(groupId)`로 그룹 내 화면 목록 조회
+  - 그룹 내 화면이 2개 이상일 때 제목 옆에 **셀렉트박스** 표시
+  - 화면 선택 시:
+    - `currentScreenId`, `currentScreenName`, `currentMainTable` 상태 업데이트
+    - 레이아웃 데이터 자동 리로드
+    - iframe 자동 새로고침
+  - 화면 역할(screen_role)도 함께 표시 (예: "거래처 목록 (list)")