Merge branch 'feature/v2-renewal' of http://39.117.244.52:3000/kjs/ERP-node into feat/multilang

- 테이블 설정 모달에 테이블 타입 관리 모달을 추가하여 데이터베이스 테이블과 컬럼의 타입을 관리할 수 있도록 개선
- 기존의 테이블 생성 모달을 제거하고, 버튼 텍스트를 "새 테이블 생성"에서 "테이블 타입 관리"로 변경
- 테이블 타입 관리 모달의 헤더 및 설명 추가, 모달 닫기 버튼 기능 구현
- 테이블 데이터 새로고침 기능을 추가하여 모달 닫기 시 데이터가 최신 상태로 유지되도록 개선

backend-node/src/controllers/screenGroupController.ts

@@ -1055,7 +1055,8 @@ export const getMultipleScreenLayoutSummary = async (req: Request, res: Response
           properties->'componentConfig'->>'bindField',
           properties->>'bindField',
           properties->'componentConfig'->>'field',
-          properties->>'field'
+          properties->>'field',
+          properties->>'columnName'
         ) as bind_field,
         -- componentConfig 전체 (JavaScript에서 다양한 패턴 파싱용)
         properties->'componentConfig' as component_config
@@ -1158,6 +1159,17 @@ export const getMultipleScreenLayoutSummary = async (req: Request, res: Response
         }
       }
       
+      // 4. bindField가 있으면 usedColumns에 추가 (인풋 필드, 텍스트 필드 등)
+      if (row.bind_field && !usedColumns.includes(row.bind_field)) {
+        usedColumns.push(row.bind_field);
+      }
+      
+      // 5. componentConfig.field 또는 componentConfig.valueField도 추가
+      const configField = componentConfig.field || componentConfig.valueField;
+      if (configField && typeof configField === 'string' && !usedColumns.includes(configField)) {
+        usedColumns.push(configField);
+      }
+      
       if (summaryMap[screenId]) {
         summaryMap[screenId].widgetCounts[componentKind] = 
           (summaryMap[screenId].widgetCounts[componentKind] || 0) + 1;

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)")

frontend/app/(main)/admin/screenMng/screenMngList/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+import { useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ArrowLeft, Plus, RefreshCw, Search, LayoutGrid, LayoutList } from "lucide-react";
@@ -20,6 +21,7 @@ type Step = "list" | "design" | "template";
 type ViewMode = "tree" | "table";
 
 export default function ScreenManagementPage() {
+  const searchParams = useSearchParams();
   const [currentStep, setCurrentStep] = useState<Step>("list");
   const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
   const [selectedGroup, setSelectedGroup] = useState<{ id: number; name: string; company_code?: string } | null>(null);
@@ -51,6 +53,20 @@ export default function ScreenManagementPage() {
     loadScreens();
   }, [loadScreens]);
 
+  // URL 쿼리 파라미터로 화면 디자이너 자동 열기
+  useEffect(() => {
+    const openDesignerId = searchParams.get("openDesigner");
+    if (openDesignerId && screens.length > 0) {
+      const screenId = parseInt(openDesignerId, 10);
+      const targetScreen = screens.find((s) => s.screenId === screenId);
+      if (targetScreen) {
+        setSelectedScreen(targetScreen);
+        setCurrentStep("design");
+        setStepHistory(["list", "design"]);
+      }
+    }
+  }, [searchParams, screens]);
+
   // 화면 설계 모드일 때는 전체 화면 사용
   const isDesignMode = currentStep === "design";
 

frontend/components/dataflow/node-editor/FlowEditor.tsx

@@ -65,6 +65,10 @@ const nodeTypes = {
  */
 interface FlowEditorInnerProps {
   initialFlowId?: number | null;
+  /** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
+  onSaveComplete?: (flowId: number, flowName: string) => void;
+  /** 임베디드 모드 여부 */
+  embedded?: boolean;
 }
 
 // 플로우 에디터 툴바 버튼 설정
@@ -87,7 +91,7 @@ const flowToolbarButtons: ToolbarButton[] = [
   },
 ];
 
-function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
+function FlowEditorInner({ initialFlowId, onSaveComplete, embedded = false }: FlowEditorInnerProps) {
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const { screenToFlowPosition, setCenter } = useReactFlow();
 
@@ -385,7 +389,7 @@ function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
 
           {/* 상단 툴바 */}
           <Panel position="top-center" className="pointer-events-auto">
-            <FlowToolbar validations={validations} />
+            <FlowToolbar validations={validations} onSaveComplete={onSaveComplete} />
           </Panel>
         </ReactFlow>
       </div>
@@ -416,13 +420,21 @@ function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
  */
 interface FlowEditorProps {
   initialFlowId?: number | null;
+  /** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
+  onSaveComplete?: (flowId: number, flowName: string) => void;
+  /** 임베디드 모드 여부 (헤더 표시 여부 등) */
+  embedded?: boolean;
 }
 
-export function FlowEditor({ initialFlowId }: FlowEditorProps = {}) {
+export function FlowEditor({ initialFlowId, onSaveComplete, embedded = false }: FlowEditorProps = {}) {
   return (
     <div className="h-full w-full">
       <ReactFlowProvider>
-        <FlowEditorInner initialFlowId={initialFlowId} />
+        <FlowEditorInner 
+          initialFlowId={initialFlowId} 
+          onSaveComplete={onSaveComplete}
+          embedded={embedded}
+        />
       </ReactFlowProvider>
     </div>
   );

frontend/components/dataflow/node-editor/FlowToolbar.tsx

@@ -17,9 +17,11 @@ import { useToast } from "@/hooks/use-toast";
 
 interface FlowToolbarProps {
   validations?: FlowValidation[];
+  /** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
+  onSaveComplete?: (flowId: number, flowName: string) => void;
 }
 
-export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
+export function FlowToolbar({ validations = [], onSaveComplete }: FlowToolbarProps) {
   const { toast } = useToast();
   const { zoomIn, zoomOut, fitView } = useReactFlow();
   const {
@@ -59,13 +61,27 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
     const result = await saveFlow();
     if (result.success) {
       toast({
-        title: "✅ 플로우 저장 완료",
+        title: "저장 완료",
         description: `${result.message}\nFlow ID: ${result.flowId}`,
         variant: "default",
       });
+      
+      // 임베디드 모드에서 저장 완료 콜백 호출
+      if (onSaveComplete && result.flowId) {
+        onSaveComplete(result.flowId, flowName);
+      }
+      
+      // 부모 창이 있으면 postMessage로 알림 (새 창에서 열린 경우)
+      if (window.opener && result.flowId) {
+        window.opener.postMessage({
+          type: "FLOW_SAVED",
+          flowId: result.flowId,
+          flowName: flowName,
+        }, "*");
+      }
     } else {
       toast({
-        title: "❌ 저장 실패",
+        title: "저장 실패",
         description: result.message,
         variant: "destructive",
       });

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -110,11 +110,7 @@ const CascadingDropdownWrapper: React.FC<CascadingDropdownWrapperProps> = ({
   const isDisabled = disabled || !parentValue || loading;
 
   return (
-    <Select
+    <Select value={value || ""} onValueChange={(newValue) => onChange?.(newValue)} disabled={isDisabled}>
-      value={value || ""}
-      onValueChange={(newValue) => onChange?.(newValue)}
-      disabled={isDisabled}
-    >
       <SelectTrigger className="h-full w-full">
         {loading ? (
           <div className="flex items-center gap-2">
@@ -224,14 +220,18 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       if (langKeysToFetch.length > 0 && userLang) {
         try {
           const { apiClient } = await import("@/lib/api/client");
-          const response = await apiClient.post("/multilang/batch", {
+          const response = await apiClient.post(
+            "/multilang/batch",
+            {
               langKeys: [...new Set(langKeysToFetch)], // 중복 제거
-          }, {
+            },
+            {
               params: {
                 userLang,
                 companyCode: user?.companyCode || "*",
               },
-          });
+            },
+          );
 
           if (response.data?.success && response.data?.data) {
             setTranslations(response.data.data);
@@ -265,10 +265,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   const finalFormData = { ...localFormData, ...externalFormData };
 
   // 개선된 검증 시스템 (선택적 활성화)
-  const enhancedValidation = enableEnhancedValidation && screenInfo && tableColumns.length > 0 
+  const enhancedValidation =
+    enableEnhancedValidation && screenInfo && tableColumns.length > 0
       ? useFormValidation(
           finalFormData,
-        allComponents.filter(c => c.type === 'widget') as WidgetComponent[],
+          allComponents.filter((c) => c.type === "widget") as WidgetComponent[],
           tableColumns,
           {
             id: screenInfo.id,
@@ -276,7 +277,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             tableName: screenInfo.tableName,
             screenResolution: { width: 800, height: 600 },
             gridSettings: { size: 20, color: "#e0e0e0", opacity: 0.5 },
-          description: "동적 화면"
+            description: "동적 화면",
           },
           {
             enableRealTimeValidation: true,
@@ -284,12 +285,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             enableAutoSave: false,
             showToastMessages: true,
             ...validationOptions,
-        }
+          },
         )
       : null;
 
   // 자동값 생성 함수
-  const generateAutoValue = useCallback(async (autoValueType: string, ruleId?: string): Promise<string> => {
+  const generateAutoValue = useCallback(
+    async (autoValueType: string, ruleId?: string): Promise<string> => {
       const now = new Date();
       switch (autoValueType) {
         case "current_datetime":
@@ -322,7 +324,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         default:
           return "";
       }
-  }, [userName]); // userName 의존성 추가
+    },
+    [userName],
+  ); // userName 의존성 추가
 
   // 팝업 화면 레이아웃 로드
   React.useEffect(() => {
@@ -335,23 +339,23 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           // 화면 레이아웃과 화면 정보를 병렬로 가져오기
           const [layout, screen] = await Promise.all([
             screenApi.getLayout(popupScreen.screenId),
-            screenApi.getScreen(popupScreen.screenId)
+            screenApi.getScreen(popupScreen.screenId),
           ]);
 
           console.log("📊 팝업 화면 로드 완료:", {
             componentsCount: layout.components?.length || 0,
             screenInfo: {
               screenId: screen.screenId,
-              tableName: screen.tableName
+              tableName: screen.tableName,
             },
-            popupFormData: {}
+            popupFormData: {},
           });
 
           setPopupLayout(layout.components || []);
           setPopupScreenResolution(layout.screenResolution || null);
           setPopupScreenInfo({
             id: popupScreen.screenId,
-            tableName: screen.tableName
+            tableName: screen.tableName,
           });
 
           // 팝업 formData 초기화
@@ -375,7 +379,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     external: externalFormData,
     local: localFormData,
     merged: formData,
-    hasExternalCallback: !!onFormDataChange
+    hasExternalCallback: !!onFormDataChange,
   });
 
   // 폼 데이터 업데이트
@@ -408,7 +412,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       // console.log("🔧 initAutoInputFields 실행 시작");
       for (const comp of allComponents) {
         // 🆕 type: "component" 또는 type: "widget" 모두 처리
-        if (comp.type === 'widget' || comp.type === 'component') {
+        if (comp.type === "widget" || comp.type === "component") {
           const widget = comp as WidgetComponent;
           const fieldName = widget.columnName || widget.id;
 
@@ -416,7 +420,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) {
             const autoFillConfig = widget.autoFill || (comp as any).autoFill;
             const currentValue = formData[fieldName];
-            if (currentValue === undefined || currentValue === '') {
+            if (currentValue === undefined || currentValue === "") {
               const { sourceTable, filterColumn, userField, displayColumn } = autoFillConfig;
 
               // 사용자 정보에서 필터 값 가져오기
@@ -424,12 +428,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
               if (userValue && sourceTable && filterColumn && displayColumn) {
                 try {
-                  const result = await tableTypeApi.getTableRecord(
+                  const result = await tableTypeApi.getTableRecord(sourceTable, filterColumn, userValue, displayColumn);
-                    sourceTable,
-                    filterColumn,
-                    userValue,
-                    displayColumn
-                  );
 
                   updateFormData(fieldName, result.value);
                 } catch (error) {
@@ -441,11 +440,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
 
           // 기존 widget 타입 전용 로직은 widget인 경우만
-          if (comp.type !== 'widget') continue;
+          if (comp.type !== "widget") continue;
 
           // 텍스트 타입 위젯의 자동입력 처리 (기존 로직)
-          if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') && 
+          if (
-              widget.webTypeConfig) {
+            (widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") &&
+            widget.webTypeConfig
+          ) {
             const config = widget.webTypeConfig as TextTypeConfig;
             const isAutoInput = config?.autoInput || false;
 
@@ -454,20 +455,21 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               const currentValue = formData[fieldName];
               console.log(`🔍 자동입력 필드 체크: ${fieldName}`, {
                 currentValue,
-                isEmpty: currentValue === undefined || currentValue === '',
+                isEmpty: currentValue === undefined || currentValue === "",
                 isAutoInput,
-                autoValueType: config.autoValueType
+                autoValueType: config.autoValueType,
               });
 
-              if (currentValue === undefined || currentValue === '') {
+              if (currentValue === undefined || currentValue === "") {
-                const autoValue = config.autoValueType === "custom" 
+                const autoValue =
+                  config.autoValueType === "custom"
                     ? config.customValue || ""
                     : generateAutoValue(config.autoValueType);
 
                 console.log("🔄 자동입력 필드 초기화:", {
                   fieldName,
                   autoValueType: config.autoValueType,
-                  autoValue
+                  autoValue,
                 });
 
                 updateFormData(fieldName, autoValue);
@@ -657,7 +659,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
         // 자동입력 관련 처리
         const isAutoInput = config?.autoInput || false;
-        const autoValue = isAutoInput && config?.autoValueType
+        const autoValue =
+          isAutoInput && config?.autoValueType
             ? config.autoValueType === "custom"
               ? config.customValue || ""
               : generateAutoValue(config.autoValueType)
@@ -1144,8 +1147,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const currentValue = getCurrentValue();
 
         // 화면 ID 추출 (URL에서)
-        const screenId = typeof window !== 'undefined' && window.location.pathname.includes('/screens/') 
+        const screenId =
-          ? parseInt(window.location.pathname.split('/screens/')[1]) 
+          typeof window !== "undefined" && window.location.pathname.includes("/screens/")
+            ? parseInt(window.location.pathname.split("/screens/")[1])
             : null;
 
         console.log("📁 InteractiveScreenViewer - File 위젯:", {
@@ -1210,7 +1214,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             if (uploadResult.success) {
               // console.log("📁 업로드 완료된 파일 데이터:", uploadResult.data);
 
-              setLocalFormData(prev => ({ ...prev, [fieldName]: uploadResult.data }));
+              setLocalFormData((prev) => ({ ...prev, [fieldName]: uploadResult.data }));
 
               // 외부 폼 데이터 변경 콜백 호출
               if (onFormDataChange) {
@@ -1233,7 +1237,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
         const clearFile = () => {
           const fieldName = widget.columnName || widget.id;
-          setLocalFormData(prev => ({ ...prev, [fieldName]: null }));
+          setLocalFormData((prev) => ({ ...prev, [fieldName]: null }));
 
           // 외부 폼 데이터 변경 콜백 호출
           if (onFormDataChange) {
@@ -1256,36 +1260,28 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
           return (
             <div className="mt-2 space-y-2">
-              <div className="text-sm font-medium text-foreground">
+              <div className="text-foreground text-sm font-medium">업로드된 파일 ({fileData.length}개)</div>
-                업로드된 파일 ({fileData.length}개)
-              </div>
               {fileData.map((fileInfo: any, index: number) => {
-                const isImage = fileInfo.type?.startsWith('image/');
+                const isImage = fileInfo.type?.startsWith("image/");
 
                 return (
-                  <div key={index} className="flex items-center gap-2 rounded border bg-muted p-2">
+                  <div key={index} className="bg-muted flex items-center gap-2 rounded border p-2">
-                    <div className="flex h-16 w-16 items-center justify-center rounded bg-muted/50">
+                    <div className="bg-muted/50 flex h-16 w-16 items-center justify-center rounded">
                       {isImage ? (
                         <div className="text-success text-xs font-medium">IMG</div>
                       ) : (
-                        <File className="h-8 w-8 text-muted-foreground" />
+                        <File className="text-muted-foreground h-8 w-8" />
                       )}
                     </div>
-                    <div className="flex-1 min-w-0">
+                    <div className="min-w-0 flex-1">
-                      <p className="text-sm font-medium text-foreground truncate">{fileInfo.name}</p>
+                      <p className="text-foreground truncate text-sm font-medium">{fileInfo.name}</p>
-                      <p className="text-xs text-muted-foreground">
+                      <p className="text-muted-foreground text-xs">{(fileInfo.size / 1024 / 1024).toFixed(2)} MB</p>
-                        {(fileInfo.size / 1024 / 1024).toFixed(2)} MB
+                      <p className="text-muted-foreground text-xs">{fileInfo.type || "알 수 없는 형식"}</p>
+                      <p className="text-muted-foreground/70 text-xs">
+                        업로드: {new Date(fileInfo.uploadedAt).toLocaleString("ko-KR")}
                       </p>
-                      <p className="text-xs text-muted-foreground">{fileInfo.type || '알 수 없는 형식'}</p>
-                      <p className="text-xs text-muted-foreground/70">업로드: {new Date(fileInfo.uploadedAt).toLocaleString('ko-KR')}</p>
                     </div>
-                    <Button
+                    <Button type="button" variant="ghost" size="sm" onClick={clearFile} className="h-8 w-8 p-0">
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={clearFile}
-                      className="h-8 w-8 p-0"
-                    >
                       <X className="h-4 w-4" />
                     </Button>
                   </div>
@@ -1309,45 +1305,45 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 required={required}
                 multiple={config?.multiple}
                 accept={config?.accept}
-                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+                className="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
                 style={{ zIndex: 1 }}
               />
-              <div className={cn(
+              <div
+                className={cn(
                   "flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors",
                   currentValue && currentValue.files && currentValue.files.length > 0
-                  ? 'border-success/30 bg-success/10' 
+                    ? "border-success/30 bg-success/10"
-                  : 'border-input bg-muted hover:border-input/80 hover:bg-muted/80',
+                    : "border-input bg-muted hover:border-input/80 hover:bg-muted/80",
-                readonly && 'cursor-not-allowed opacity-50',
+                  readonly && "cursor-not-allowed opacity-50",
-                !readonly && 'cursor-pointer'
+                  !readonly && "cursor-pointer",
-              )}>
+                )}
+              >
                 <div className="space-y-2">
                   {currentValue && currentValue.files && currentValue.files.length > 0 ? (
                     <>
                       <div className="flex items-center justify-center">
-                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-success/20">
+                        <div className="bg-success/20 flex h-8 w-8 items-center justify-center rounded-full">
-                          <svg className="h-5 w-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <svg className="text-success h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                           </svg>
                         </div>
                       </div>
-                      <p className="text-sm font-medium text-success">
+                      <p className="text-success text-sm font-medium">
-                        {currentValue.totalCount === 1 
+                        {currentValue.totalCount === 1 ? "파일 선택됨" : `${currentValue.totalCount}개 파일 선택됨`}
-                          ? '파일 선택됨' 
-                          : `${currentValue.totalCount}개 파일 선택됨`}
                       </p>
-                      <p className="text-xs text-success/80">
+                      <p className="text-success/80 text-xs">
                         총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB
                       </p>
-                      <p className="text-xs text-success/80">클릭하여 다른 파일 선택</p>
+                      <p className="text-success/80 text-xs">클릭하여 다른 파일 선택</p>
                     </>
                   ) : (
                     <>
-                      <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
+                      <Upload className="text-muted-foreground mx-auto h-8 w-8" />
-                      <p className="text-sm text-muted-foreground">
+                      <p className="text-muted-foreground text-sm">
-                        {config?.dragDrop ? '파일을 드래그하여 놓거나 클릭하여 선택' : '클릭하여 파일 선택'}
+                        {config?.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"}
                       </p>
                       {(config?.accept || config?.maxSize) && (
-                        <div className="text-xs text-muted-foreground space-y-1">
+                        <div className="text-muted-foreground space-y-1 text-xs">
                           {config.accept && <div>허용 형식: {config.accept}</div>}
                           {config.maxSize && <div>최대 크기: {config.maxSize}MB</div>}
                           {config.multiple && <div>다중 선택 가능</div>}
@@ -1361,7 +1357,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
             {/* 파일 미리보기 */}
             {renderFilePreview()}
-          </div>
+          </div>,
         );
       }
 
@@ -1369,7 +1365,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const widget = comp as WidgetComponent;
         const config = widget.webTypeConfig as CodeTypeConfig | undefined;
 
-        console.log(`🔍 [InteractiveScreenViewer] Code 위젯 렌더링:`, {
+        console.log("🔍 [InteractiveScreenViewer] Code 위젯 렌더링:", {
           componentId: widget.id,
           columnName: widget.columnName,
           codeCategory: config?.codeCategory,
@@ -1403,7 +1399,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               onEvent={(event: string, data: any) => {
                 // console.log(`Code widget event: ${event}`, data);
               }}
-            />
+            />,
           );
         } catch (error) {
           // console.error("DynamicWebTypeRenderer 로딩 실패, 기본 Select 사용:", error);
@@ -1422,7 +1418,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               <SelectContent>
                 <SelectItem value="loading">로딩 중...</SelectItem>
               </SelectContent>
-            </Select>
+            </Select>,
           );
         }
       }
@@ -1531,22 +1527,22 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           // console.log("💾 기존 방식으로 저장 - currentFormData:", currentFormData);
 
           // formData 유효성 체크를 완화 (빈 객체라도 위젯이 있으면 저장 진행)
-          const hasWidgets = allComponents.some(comp => comp.type === 'widget');
+          const hasWidgets = allComponents.some((comp) => comp.type === "widget");
           if (!hasWidgets) {
             alert("저장할 입력 컴포넌트가 없습니다.");
             return;
           }
 
           // 필수 항목 검증
-          const requiredFields = allComponents.filter(c => c.required && (c.columnName || c.id));
+          const requiredFields = allComponents.filter((c) => c.required && (c.columnName || c.id));
-          const missingFields = requiredFields.filter(field => {
+          const missingFields = requiredFields.filter((field) => {
             const fieldName = field.columnName || field.id;
             const value = currentFormData[fieldName];
             return !value || value.toString().trim() === "";
           });
 
           if (missingFields.length > 0) {
-            const fieldNames = missingFields.map(f => f.label || f.columnName || f.id).join(", ");
+            const fieldNames = missingFields.map((f) => f.label || f.columnName || f.id).join(", ");
             alert(`다음 필수 항목을 입력해주세요: ${fieldNames}`);
             return;
           }
@@ -1561,9 +1557,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             const mappedData: Record<string, any> = {};
 
             // 입력 가능한 컴포넌트에서 데이터 수집
-            allComponents.forEach(comp => {
+            allComponents.forEach((comp) => {
               // 위젯 컴포넌트이고 입력 가능한 타입인 경우
-              if (comp.type === 'widget') {
+              if (comp.type === "widget") {
                 const widget = comp as WidgetComponent;
                 const fieldName = widget.columnName || widget.id;
                 let value = currentFormData[fieldName];
@@ -1572,12 +1568,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                   widgetType: widget.widgetType,
                   formDataValue: value,
                   hasWebTypeConfig: !!widget.webTypeConfig,
-                  config: widget.webTypeConfig
+                  config: widget.webTypeConfig,
                 });
 
                 // 자동입력 필드인 경우에만 값이 없을 때 생성
-                if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') && 
+                if (
-                    widget.webTypeConfig) {
+                  (widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") &&
+                  widget.webTypeConfig
+                ) {
                   const config = widget.webTypeConfig as TextTypeConfig;
                   const isAutoInput = config?.autoInput || false;
 
@@ -1585,24 +1583,25 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                     isAutoInput,
                     autoValueType: config?.autoValueType,
                     hasValue: !!value,
-                    value
+                    value,
                   });
 
-                  if (isAutoInput && config?.autoValueType && (!value || value === '')) {
+                  if (isAutoInput && config?.autoValueType && (!value || value === "")) {
                     // 자동입력이고 값이 없을 때만 생성
-                    value = config.autoValueType === "custom" 
+                    value =
+                      config.autoValueType === "custom"
                         ? config.customValue || ""
                         : generateAutoValue(config.autoValueType);
 
                     console.log("💾 자동입력 값 저장 (값이 없어서 생성):", {
                       fieldName,
                       autoValueType: config.autoValueType,
-                      generatedValue: value
+                      generatedValue: value,
                     });
                   } else if (isAutoInput && value) {
                     console.log("💾 자동입력 필드지만 기존 값 유지:", {
                       fieldName,
-                      existingValue: value
+                      existingValue: value,
                     });
                   } else if (!isAutoInput) {
                     // console.log(`📝 일반 입력 필드: ${fieldName} = "${value}"`);
@@ -1627,17 +1626,17 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               매핑된데이터: mappedData,
               화면정보: screenInfo,
               전체컴포넌트수: allComponents.length,
-              위젯컴포넌트수: allComponents.filter(c => c.type === 'widget').length,
+              위젯컴포넌트수: allComponents.filter((c) => c.type === "widget").length,
             });
 
             // 각 컴포넌트의 상세 정보 로그
             // console.log("🔍 컴포넌트별 데이터 수집 상세:");
-            allComponents.forEach(comp => {
+            allComponents.forEach((comp) => {
-              if (comp.type === 'widget') {
+              if (comp.type === "widget") {
                 const widget = comp as WidgetComponent;
                 const fieldName = widget.columnName || widget.id;
                 const value = currentFormData[fieldName];
-                const hasValue = value !== undefined && value !== null && value !== '';
+                const hasValue = value !== undefined && value !== null && value !== "";
                 // console.log(`  - ${fieldName} (${widget.widgetType}): "${value}" (값있음: ${hasValue}, 컬럼명: ${widget.columnName})`);
               }
             });
@@ -1648,9 +1647,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             }
 
             // 테이블명 결정 (화면 정보에서 가져오거나 첫 번째 컴포넌트의 테이블명 사용)
-            const tableName = screenInfo.tableName || 
+            const tableName =
-                             allComponents.find(c => c.columnName)?.tableName ||
+              screenInfo.tableName || allComponents.find((c) => c.columnName)?.tableName || "dynamic_form_data"; // 기본값
-                             "dynamic_form_data"; // 기본값
 
             // 🆕 자동으로 작성자 정보 추가 (user.userId가 확실히 있음)
             const writerValue = user.userId;
@@ -1691,7 +1689,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               // 저장 후 데이터 초기화 (선택사항)
               if (onFormDataChange) {
                 const resetData: Record<string, any> = {};
-                Object.keys(formData).forEach(key => {
+                Object.keys(formData).forEach((key) => {
                   resetData[key] = "";
                 });
                 onFormDataChange(resetData);
@@ -1705,7 +1703,6 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
         };
 
-
         // 삭제 액션
         const handleDeleteAction = async () => {
           const confirmMessage = config?.confirmMessage || "정말로 삭제하시겠습니까?";
@@ -1723,9 +1720,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
 
           // 테이블명 결정
-          const tableName = screenInfo?.tableName || 
+          const tableName =
-                           allComponents.find(c => c.columnName)?.tableName ||
+            screenInfo?.tableName || allComponents.find((c) => c.columnName)?.tableName || "unknown_table";
-                           "unknown_table";
 
           if (!tableName || tableName === "unknown_table") {
             alert("테이블 정보가 없어 삭제할 수 없습니다.");
@@ -1745,7 +1741,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               // 삭제 후 폼 초기화
               if (onFormDataChange) {
                 const resetData: Record<string, any> = {};
-                Object.keys(formData).forEach(key => {
+                Object.keys(formData).forEach((key) => {
                   resetData[key] = "";
                 });
                 onFormDataChange(resetData);
@@ -1797,7 +1793,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const handleSearchAction = () => {
           // console.log("🔍 검색 실행:", formData);
           // 검색 로직
-          const searchTerms = Object.values(formData).filter(v => v && v.toString().trim());
+          const searchTerms = Object.values(formData).filter((v) => v && v.toString().trim());
           if (searchTerms.length === 0) {
             alert("검색할 내용을 입력해주세요.");
           } else {
@@ -1810,7 +1806,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           if (confirm("모든 입력을 초기화하시겠습니까?")) {
             if (onFormDataChange) {
               const resetData: Record<string, any> = {};
-              Object.keys(formData).forEach(key => {
+              Object.keys(formData).forEach((key) => {
                 resetData[key] = "";
               });
               onFormDataChange(resetData);
@@ -1840,12 +1836,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             // console.log("🔄 모달 내부에서 닫기 - 모달 닫기 시도");
 
             // 모달의 닫기 버튼을 찾아서 클릭
-            const modalCloseButton = document.querySelector('[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close');
+            const modalCloseButton = document.querySelector(
+              '[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close',
+            );
             if (modalCloseButton) {
               (modalCloseButton as HTMLElement).click();
             } else {
               // ESC 키 이벤트 발생시키기
-              const escEvent = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, which: 27 });
+              const escEvent = new KeyboardEvent("keydown", { key: "Escape", keyCode: 27, which: 27 });
               document.dispatchEvent(escEvent);
             }
           } else if (isInPopup) {
@@ -1889,7 +1887,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             console.log("🎯 화면으로 이동:", {
               screenId: config.navigateScreenId,
               target: config.navigateTarget || "_self",
-              path: screenPath
+              path: screenPath,
             });
 
             if (config.navigateTarget === "_blank") {
@@ -1901,7 +1899,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             // URL로 이동
             console.log("🔗 URL로 이동:", {
               url: config.navigateUrl,
-              target: config.navigateTarget || "_self"
+              target: config.navigateTarget || "_self",
             });
 
             if (config.navigateTarget === "_blank") {
@@ -1913,7 +1911,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             console.log("🔗 네비게이션 정보가 설정되지 않았습니다:", {
               navigateType,
               hasUrl: !!config?.navigateUrl,
-              hasScreenId: !!config?.navigateScreenId
+              hasScreenId: !!config?.navigateScreenId,
             });
           }
         };
@@ -1938,27 +1936,32 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
         // 버튼 텍스트 다국어 적용 (componentConfig.langKey 확인)
         const buttonLangKey = (widget as any).componentConfig?.langKey;
-        const buttonText = buttonLangKey && translations[buttonLangKey] 
+        const buttonText =
+          buttonLangKey && translations[buttonLangKey]
             ? translations[buttonLangKey]
             : (widget as any).componentConfig?.text || label || "버튼";
 
+        // 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용
+        const hasCustomColors = config?.backgroundColor || config?.textColor;
+
         return applyStyles(
-          <Button
+          <button
             onClick={handleButtonClick}
             disabled={readonly}
-            size="sm"
+            className={`focus:ring-ring w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none disabled:opacity-50 ${
-            variant={config?.variant || "default"}
+              hasCustomColors
-            className="w-full"
+                ? ""
+                : "bg-background border-foreground text-foreground hover:bg-muted/50 border shadow-xs"
+            }`}
             style={{
               height: "100%",
-              // 설정값이 있으면 우선 적용
               backgroundColor: config?.backgroundColor,
               color: config?.textColor,
               borderColor: config?.borderColor,
             }}
           >
             {buttonText}
-          </Button>
+          </button>,
         );
       }
 
@@ -1986,24 +1989,25 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       componentId: fileComponent.id,
       currentUploadedFiles: fileComponent.uploadedFiles?.length || 0,
       hasOnFormDataChange: !!onFormDataChange,
-      userInfo: user ? { userId: user.userId, companyCode: user.companyCode } : "no user"
+      userInfo: user ? { userId: user.userId, companyCode: user.companyCode } : "no user",
     });
 
-    const handleFileUpdate = useCallback(async (updates: Partial<FileComponent>) => {
+    const handleFileUpdate = useCallback(
+      async (updates: Partial<FileComponent>) => {
         // 실제 화면에서는 파일 업데이트를 처리
         console.log("📎 InteractiveScreenViewer - 파일 컴포넌트 업데이트:", {
           updates,
           hasUploadedFiles: !!updates.uploadedFiles,
           uploadedFilesCount: updates.uploadedFiles?.length || 0,
-        hasOnFormDataChange: !!onFormDataChange
+          hasOnFormDataChange: !!onFormDataChange,
         });
 
         if (updates.uploadedFiles && onFormDataChange) {
           const fieldName = fileComponent.columnName || fileComponent.id;
 
           // attach_file_info 테이블 구조에 맞는 데이터 생성
-        const fileInfoForDB = updates.uploadedFiles.map(file => ({
+          const fileInfoForDB = updates.uploadedFiles.map((file) => ({
-          objid: file.objid.replace('temp_', ''), // temp_ 제거
+            objid: file.objid.replace("temp_", ""), // temp_ 제거
             target_objid: "",
             saved_file_name: file.savedFileName,
             real_file_name: file.realFileName,
@@ -2016,7 +2020,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             regdate: file.regdate,
             status: file.status,
             parent_target_objid: "",
-          company_code: file.companyCode
+            company_code: file.companyCode,
           }));
 
           // console.log("💾 attach_file_info 형태로 변환된 데이터:", fileInfoForDB);
@@ -2025,12 +2029,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           const formDataValue = {
             fileCount: updates.uploadedFiles.length,
             docType: fileComponent.fileConfig.docType,
-          files: updates.uploadedFiles.map(file => ({
+            files: updates.uploadedFiles.map((file) => ({
               objid: file.objid,
               realFileName: file.realFileName,
               fileSize: file.fileSize,
-            status: file.status
+              status: file.status,
-          }))
+            })),
           };
 
           // console.log("📝 FormData 저장값:", { fieldName, formDataValue });
@@ -2038,14 +2042,15 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
           // TODO: 실제 API 연동 시 attach_file_info 테이블에 저장
           // await saveFilesToDatabase(fileInfoForDB);
-        
         } else {
           console.warn("⚠️ 파일 업데이트 실패:", {
             hasUploadedFiles: !!updates.uploadedFiles,
-          hasOnFormDataChange: !!onFormDataChange
+            hasOnFormDataChange: !!onFormDataChange,
           });
         }
-    }, [fileComponent, onFormDataChange]);
+      },
+      [fileComponent, onFormDataChange],
+    );
 
     return (
       <div className="h-full w-full">
@@ -2128,7 +2133,6 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     marginBottom: component.style?.labelMarginBottom || "4px",
   };
 
-
   // 상위에서 라벨을 표시한 경우, 컴포넌트 내부에서는 라벨을 숨김
   const componentForRendering = shouldShowLabel
     ? {
@@ -2149,23 +2153,27 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             <TableOptionsToolbar />
 
             {/* 메인 컨텐츠 */}
-          <div className="h-full flex-1" style={{ width: '100%' }}>
+            <div className="h-full flex-1" style={{ width: "100%" }}>
               {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
               {shouldShowLabel && (
-              <label className="mb-2 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                <label className="mb-2 block text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                   {labelText}
-                {(component.required || component.componentConfig?.required) && <span className="ml-1 text-destructive">*</span>}
+                  {(component.required || component.componentConfig?.required) && (
+                    <span className="text-destructive ml-1">*</span>
+                  )}
                 </label>
               )}
 
               {/* 실제 위젯 - 상위에서 라벨을 렌더링했으므로 자식은 라벨 숨김 */}
-          <div className="h-full" style={{ width: '100%', height: '100%' }}>{renderInteractiveWidget(componentForRendering)}</div>
+              <div className="h-full" style={{ width: "100%", height: "100%" }}>
+                {renderInteractiveWidget(componentForRendering)}
+              </div>
             </div>
           </div>
 
           {/* 개선된 검증 패널 (선택적 표시) */}
           {showValidationPanel && enhancedValidation && (
-          <div className="absolute bottom-4 right-4 z-50">
+            <div className="absolute right-4 bottom-4 z-50">
               <FormValidationIndicator
                 validationState={enhancedValidation.validationState}
                 saveState={enhancedValidation.saveState}
@@ -2183,11 +2191,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           )}
 
           {/* 모달 화면 */}
-        <Dialog open={!!popupScreen} onOpenChange={() => {
+          <Dialog
+            open={!!popupScreen}
+            onOpenChange={() => {
               setPopupScreen(null);
               setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
-        }}>
+            }}
-          <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">
+          >
+            <DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden p-0">
               <DialogHeader className="px-6 pt-4 pb-2">
                 <DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
               </DialogHeader>
@@ -2198,13 +2209,16 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                     <div className="text-muted-foreground">화면을 불러오는 중...</div>
                   </div>
                 ) : popupLayout.length > 0 ? (
-                <div className="relative bg-background border rounded" style={{ 
+                  <div
+                    className="bg-background relative rounded border"
+                    style={{
                       width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%",
                       height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px",
                       minHeight: "400px",
                       position: "relative",
-                  overflow: "hidden"
+                      overflow: "hidden",
-                }}>
+                    }}
+                  >
                     {/* 팝업에서도 실제 위치와 크기로 렌더링 */}
                     {popupLayout.map((popupComponent) => (
                       <div
@@ -2230,12 +2244,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                               fieldName,
                               value,
                               valueType: typeof value,
-                            prevFormData: popupFormData
+                              prevFormData: popupFormData,
                             });
 
-                          setPopupFormData(prev => ({ 
+                            setPopupFormData((prev) => ({
                               ...prev,
-                            [fieldName]: value 
+                              [fieldName]: value,
                             }));
                           }}
                         />

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -835,12 +835,18 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
       }
     };
 
+    // 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용
+    const hasCustomColors = config?.backgroundColor || config?.textColor || comp.style?.backgroundColor || comp.style?.color;
+    
     return (
-      <Button
+      <button
         onClick={handleClick}
-        variant={(config?.variant as any) || "default"}
-        size={(config?.size as any) || "default"}
         disabled={config?.disabled}
+        className={`w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${
+          hasCustomColors 
+            ? '' 
+            : 'bg-background border border-foreground text-foreground shadow-xs hover:bg-muted/50'
+        }`}
         style={{
           // 컴포넌트 스타일 적용
           ...comp.style,
@@ -853,7 +859,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
         }}
       >
         {label || "버튼"}
-      </Button>
+      </button>
     );
   };
 

frontend/components/screen/OptimizedButtonComponent.tsx

@@ -637,24 +637,28 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
     }
   }
 
+  // 색상이 설정되어 있으면 variant 스타일을 무시하고 직접 스타일 적용
+  const hasCustomColors = config?.backgroundColor || config?.textColor;
+  
   return (
     <div className="relative">
       <Button
         onClick={handleClick}
         disabled={isExecuting || disabled}
-        variant={config?.variant || "default"}
+        // 색상이 설정되어 있으면 variant를 적용하지 않아서 Tailwind 색상 클래스가 덮어씌우지 않도록 함
+        variant={hasCustomColors ? undefined : (config?.variant || "default")}
         className={cn(
           "transition-all duration-200",
           isExecuting && "cursor-wait opacity-75",
           backgroundJobs.size > 0 && "border-primary/20 bg-accent",
-          config?.backgroundColor && { backgroundColor: config.backgroundColor },
+          // 커스텀 색상이 없을 때만 기본 스타일 적용
-          config?.textColor && { color: config.textColor },
+          !hasCustomColors && "bg-primary text-primary-foreground hover:bg-primary/90",
-          config?.borderColor && { borderColor: config.borderColor },
         )}
         style={{
-          backgroundColor: config?.backgroundColor,
+          // 커스텀 색상이 있을 때만 인라인 스타일 적용
-          color: config?.textColor,
+          ...(config?.backgroundColor && { backgroundColor: config.backgroundColor }),
-          borderColor: config?.borderColor,
+          ...(config?.textColor && { color: config.textColor }),
+          ...(config?.borderColor && { borderColor: config.borderColor }),
         }}
       >
         {/* 메인 버튼 내용 */}

frontend/components/screen/widgets/types/ButtonWidget.tsx

@@ -32,14 +32,27 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
     }
   };
 
+  // 커스텀 색상 확인 (config 또는 style에서)
+  const hasCustomBg = config?.backgroundColor || style?.backgroundColor;
+  const hasCustomColor = config?.textColor || style?.color;
+  const hasCustomColors = hasCustomBg || hasCustomColor;
+  
+  // 실제 적용할 배경색과 글자색
+  const bgColor = config?.backgroundColor || style?.backgroundColor;
+  const textColor = config?.textColor || style?.color;
+  
   // 디자인 모드에서는 div로 렌더링하여 버튼 동작 완전 차단
   if (isDesignMode) {
     return (
       <div
         onClick={handleClick} // 클릭 핸들러 추가하여 이벤트 전파
-        className={`flex items-center justify-center rounded-md bg-blue-600 px-4 text-sm font-medium text-white ${className || ""} `}
+        className={`flex items-center justify-center rounded-md px-4 text-sm font-medium ${
+          hasCustomColors ? '' : 'bg-blue-600 text-white'
+        } ${className || ""}`}
         style={{
           ...style,
+          backgroundColor: bgColor,
+          color: textColor,
           width: "100%",
           height: "100%",
           cursor: "pointer", // 선택 가능하도록 포인터 표시
@@ -56,9 +69,13 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
       type="button"
       onClick={handleClick}
       disabled={disabled || readonly}
-      className={`flex items-center justify-center rounded-md bg-blue-600 px-4 text-sm font-medium text-white transition-colors duration-200 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${className || ""} `}
+      className={`flex items-center justify-center rounded-md px-4 text-sm font-medium transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${
+        hasCustomColors ? '' : 'bg-blue-600 text-white hover:bg-blue-700'
+      } ${className || ""}`}
       style={{
         ...style,
+        backgroundColor: bgColor,
+        color: textColor,
         width: "100%",
         height: "100%",
       }}

frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx

@@ -511,15 +511,50 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     ...component.componentConfig, // 🔥 화면 디자이너에서 저장된 action 등 포함
   } as ButtonPrimaryConfig;
 
-  // 🎨 동적 색상 설정 (속성편집 모달의 "색상" 필드와 연동)
+  // 🎨 동적 색상 설정 (webTypeConfig 우선, 레거시 style.labelColor 지원)
-  const getLabelColor = () => {
+  const getButtonBackgroundColor = () => {
-    if (isDeleteAction()) {
+    // 1순위: webTypeConfig.backgroundColor (화면설정 모달에서 저장)
-      return component.style?.labelColor || "#ef4444"; // 빨간색 기본값 (Tailwind red-500)
+    if (component.webTypeConfig?.backgroundColor) {
+      return component.webTypeConfig.backgroundColor;
     }
-    return component.style?.labelColor || "#212121"; // 검은색 기본값 (shadcn/ui primary)
+    // 2순위: componentConfig.backgroundColor
+    if (componentConfig.backgroundColor) {
+      return componentConfig.backgroundColor;
+    }
+    // 3순위: style.backgroundColor
+    if (component.style?.backgroundColor) {
+      return component.style.backgroundColor;
+    }
+    // 4순위: style.labelColor (레거시)
+    if (component.style?.labelColor) {
+      return component.style.labelColor;
+    }
+    // 기본값: 삭제 버튼이면 빨강, 아니면 파랑
+    if (isDeleteAction()) {
+      return "#ef4444"; // 빨간색 (Tailwind red-500)
+    }
+    return "#3b82f6"; // 파란색 (Tailwind blue-500)
   };
 
-  const buttonColor = getLabelColor();
+  const getButtonTextColor = () => {
+    // 1순위: webTypeConfig.textColor (화면설정 모달에서 저장)
+    if (component.webTypeConfig?.textColor) {
+      return component.webTypeConfig.textColor;
+    }
+    // 2순위: componentConfig.textColor
+    if (componentConfig.textColor) {
+      return componentConfig.textColor;
+    }
+    // 3순위: style.color
+    if (component.style?.color) {
+      return component.style.color;
+    }
+    // 기본값: 흰색
+    return "#ffffff";
+  };
+
+  const buttonColor = getButtonBackgroundColor();
+  const buttonTextColor = getButtonTextColor();
 
   // 액션 설정 처리 - DB에서 문자열로 저장된 액션을 객체로 변환
   const processedConfig = { ...componentConfig };
@@ -1131,7 +1166,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
         } : undefined,
       } as ButtonActionContext;
 
-      // 확인이 필요한 액션인지 확인
+      // 확인이 필요한 액션인지 확인 (save/delete만 확인 다이얼로그 표시)
       if (confirmationRequiredActions.includes(processedConfig.action.type)) {
         // 확인 다이얼로그 표시
         setPendingAction({
@@ -1267,8 +1302,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     minHeight: "40px",
     border: "none",
     borderRadius: "0.5rem",
-    backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor, // 🔧 background → backgroundColor로 변경
+    backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor,
-    color: finalDisabled ? "#9ca3af" : "white",
+    color: finalDisabled ? "#9ca3af" : buttonTextColor, // 🔧 webTypeConfig.textColor 지원
     // 🔧 크기 설정 적용 (sm/md/lg)
     fontSize: componentConfig.size === "sm" ? "0.75rem" : componentConfig.size === "lg" ? "1rem" : "0.875rem",
     fontWeight: "600",