backend-node/src/controllers/screenGroupController.ts

@@ -1055,8 +1055,7 @@ export const getMultipleScreenLayoutSummary = async (req: Request, res: Response
           properties->'componentConfig'->>'bindField',
           properties->>'bindField',
           properties->'componentConfig'->>'field',
-          properties->>'field',
-          properties->>'columnName'
+          properties->>'field'
         ) as bind_field,
         -- componentConfig 전체 (JavaScript에서 다양한 패턴 파싱용)
         properties->'componentConfig' as component_config
@@ -1159,17 +1158,6 @@ 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,153 +247,21 @@ interface TableColumnAccordionProps {
 - 필터 테이블: 보라색 테마 (`purple`)
 - `themeColor`, `themeIcon`, `themeBadge` 변수로 동적 스타일 적용
 
-### 9. 제어 관리 탭 (신규)
+### 9. 드래그 앤 드롭 컬럼 순서 변경
 
-#### 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.1 기능 설명
 - 사용 중인 컬럼(필드)을 드래그하여 순서 변경 가능
 - 드래그 중에는 시각적으로만 순서 변경, **드롭 시에만 저장**
 - 드래그 취소(영역 밖으로 나간 경우) 시 원래 순서로 복원
 
-#### 10.2 드래그 상태 관리
+#### 9.2 드래그 상태 관리
 ```typescript
 // 드래그 상태
 const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
 const [localColumnOrder, setLocalColumnOrder] = useState<string[] | null>(null);
 ```
 
-#### 10.3 드래그 핸들러
+#### 9.3 드래그 핸들러
 ```typescript
 // 드래그 시작: 현재 순서를 로컬 상태로 저장
 const handleDragStart = (e: React.DragEvent, index: number) => {
@@ -429,12 +297,12 @@ const handleDragEnd = () => {
 };
 ```
 
-#### 10.4 시각적 피드백
+#### 9.4 시각적 피드백
 - 드래그 가능한 컬럼: `cursor-grab active:cursor-grabbing`
 - 드래그 중인 컬럼: `opacity-50 scale-95`
 - 드래그 중 실시간 순서 변경 표시
 
-#### 10.5 저장 로직 (`handleColumnReorder`)
+#### 9.5 저장 로직 (`handleColumnReorder`)
 ```typescript
 const handleColumnReorder = async (tableType: "main" | "filter", newOrder: string[]) => {
   const currentLayout = await screenApi.getLayout(screenId);
@@ -469,7 +337,7 @@ const handleColumnReorder = async (tableType: "main" | "filter", newOrder: strin
 };
 ```
 
-#### 10.6 지원 범위
+#### 9.6 지원 범위
 - 메인 테이블: `onColumnReorder={(newOrder) => handleColumnReorder("main", newOrder)}`
 - 필터 테이블: `onColumnReorder={(newOrder) => handleColumnReorder("filter", newOrder)}`
 - 지원 배열:
@@ -478,190 +346,6 @@ 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)도 함께 표시
-
 ## 기술 스택
 
 ### 신규 의존성
@@ -765,17 +449,13 @@ const handleColumnChange = async (fieldLabel: string, oldColumn: string, newColu
 
 | 파일 | 변경 내용 |
 |------|----------|
-| `frontend/components/screen/ScreenSettingModal.tsx` | 전체 UI 개선, 줌/드래그 기능, 컬럼 변경/추가/제거 기능, 조인 설정 기능, 필드 매핑 통합, 실시간 반영, 제어 관리 탭 추가, 버튼 액션 설정, 플로우 연동, FlowEditor 임베드, ScreenDesigner 모달 임베드, 그룹 내 화면 전환 셀렉트박스 |
+| `frontend/components/screen/ScreenSettingModal.tsx` | 전체 UI 개선, 줌/드래그 기능, 컬럼 변경/추가/제거 기능, 조인 설정 기능, 필드 매핑 통합, 실시간 반영 |
 | `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` 계산 |
 
 ## 사용 방법
 
@@ -832,124 +512,10 @@ 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-14
+2026-01-13
 
 ## 변경 이력
 - 2026-01-12: 최초 작성 (줌/드래그/클릭, company_code 전달)
@@ -967,62 +533,3 @@ 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,7 +1,6 @@
 "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";
@@ -21,7 +20,6 @@ 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);
@@ -53,20 +51,6 @@ 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,10 +65,6 @@ const nodeTypes = {
  */
 interface FlowEditorInnerProps {
   initialFlowId?: number | null;
-  /** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
-  onSaveComplete?: (flowId: number, flowName: string) => void;
-  /** 임베디드 모드 여부 */
-  embedded?: boolean;
 }
 
 // 플로우 에디터 툴바 버튼 설정
@@ -91,7 +87,7 @@ const flowToolbarButtons: ToolbarButton[] = [
   },
 ];
 
-function FlowEditorInner({ initialFlowId, onSaveComplete, embedded = false }: FlowEditorInnerProps) {
+function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const { screenToFlowPosition, setCenter } = useReactFlow();
 
@@ -389,7 +385,7 @@ function FlowEditorInner({ initialFlowId, onSaveComplete, embedded = false }: Fl
 
           {/* 상단 툴바 */}
           <Panel position="top-center" className="pointer-events-auto">
-            <FlowToolbar validations={validations} onSaveComplete={onSaveComplete} />
+            <FlowToolbar validations={validations} />
           </Panel>
         </ReactFlow>
       </div>
@@ -420,21 +416,13 @@ function FlowEditorInner({ initialFlowId, onSaveComplete, embedded = false }: Fl
  */
 interface FlowEditorProps {
   initialFlowId?: number | null;
-  /** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
-  onSaveComplete?: (flowId: number, flowName: string) => void;
-  /** 임베디드 모드 여부 (헤더 표시 여부 등) */
-  embedded?: boolean;
 }
 
-export function FlowEditor({ initialFlowId, onSaveComplete, embedded = false }: FlowEditorProps = {}) {
+export function FlowEditor({ initialFlowId }: FlowEditorProps = {}) {
   return (
     <div className="h-full w-full">
       <ReactFlowProvider>
-        <FlowEditorInner 
-          initialFlowId={initialFlowId} 
-          onSaveComplete={onSaveComplete}
-          embedded={embedded}
-        />
+        <FlowEditorInner initialFlowId={initialFlowId} />
       </ReactFlowProvider>
     </div>
   );

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

@@ -17,11 +17,9 @@ import { useToast } from "@/hooks/use-toast";
 
 interface FlowToolbarProps {
   validations?: FlowValidation[];
-  /** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
-  onSaveComplete?: (flowId: number, flowName: string) => void;
 }
 
-export function FlowToolbar({ validations = [], onSaveComplete }: FlowToolbarProps) {
+export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
   const { toast } = useToast();
   const { zoomIn, zoomOut, fitView } = useReactFlow();
   const {
@@ -61,27 +59,13 @@ export function FlowToolbar({ validations = [], onSaveComplete }: FlowToolbarPro
     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,7 +110,11 @@ const CascadingDropdownWrapper: React.FC<CascadingDropdownWrapperProps> = ({
   const isDisabled = disabled || !parentValue || loading;
 
   return (
-    <Select value={value || ""} onValueChange={(newValue) => onChange?.(newValue)} disabled={isDisabled}>
+    <Select
+      value={value || ""}
+      onValueChange={(newValue) => onChange?.(newValue)}
+      disabled={isDisabled}
+    >
       <SelectTrigger className="h-full w-full">
         {loading ? (
           <div className="flex items-center gap-2">
@@ -220,18 +224,14 @@ 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,11 +265,10 @@ 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, 
@@ -277,7 +276,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,
@@ -285,13 +284,12 @@ 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":
@@ -324,9 +322,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       default:
         return "";
     }
-    },
-    [userName],
-  ); // userName 의존성 추가
+  }, [userName]); // userName 의존성 추가
 
   // 팝업 화면 레이아웃 로드
   React.useEffect(() => {
@@ -339,23 +335,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 초기화
@@ -379,7 +375,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     external: externalFormData,
     local: localFormData,
     merged: formData,
-    hasExternalCallback: !!onFormDataChange,
+    hasExternalCallback: !!onFormDataChange
   });
 
   // 폼 데이터 업데이트
@@ -412,7 +408,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;
           
@@ -420,7 +416,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;
               
               // 사용자 정보에서 필터 값 가져오기
@@ -428,7 +424,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               
               if (userValue && sourceTable && filterColumn && displayColumn) {
                 try {
-                  const result = await tableTypeApi.getTableRecord(sourceTable, filterColumn, userValue, displayColumn);
+                  const result = await tableTypeApi.getTableRecord(
+                    sourceTable,
+                    filterColumn,
+                    userValue,
+                    displayColumn
+                  );
                   
                   updateFormData(fieldName, result.value);
                 } catch (error) {
@@ -440,13 +441,11 @@ 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") &&
-            widget.webTypeConfig
-          ) {
+          if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') && 
+              widget.webTypeConfig) {
             const config = widget.webTypeConfig as TextTypeConfig;
             const isAutoInput = config?.autoInput || false;
             
@@ -455,21 +454,20 @@ 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 === "") {
-                const autoValue =
-                  config.autoValueType === "custom"
+              if (currentValue === undefined || currentValue === '') {
+                const autoValue = config.autoValueType === "custom" 
                   ? config.customValue || ""
                   : generateAutoValue(config.autoValueType);
                 
                 console.log("🔄 자동입력 필드 초기화:", {
                   fieldName,
                   autoValueType: config.autoValueType,
-                  autoValue,
+                  autoValue
                 });
                 
                 updateFormData(fieldName, autoValue);
@@ -659,8 +657,7 @@ 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)
@@ -1147,9 +1144,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const currentValue = getCurrentValue();
 
         // 화면 ID 추출 (URL에서)
-        const screenId =
-          typeof window !== "undefined" && window.location.pathname.includes("/screens/")
-            ? parseInt(window.location.pathname.split("/screens/")[1])
+        const screenId = typeof window !== 'undefined' && window.location.pathname.includes('/screens/') 
+          ? parseInt(window.location.pathname.split('/screens/')[1]) 
           : null;
 
         console.log("📁 InteractiveScreenViewer - File 위젯:", {
@@ -1214,7 +1210,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) {
@@ -1237,7 +1233,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) {
@@ -1260,28 +1256,36 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           
           return (
             <div className="mt-2 space-y-2">
-              <div className="text-foreground text-sm font-medium">업로드된 파일 ({fileData.length}개)</div>
+              <div className="text-sm font-medium text-foreground">
+                업로드된 파일 ({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="bg-muted flex items-center gap-2 rounded border p-2">
-                    <div className="bg-muted/50 flex h-16 w-16 items-center justify-center rounded">
+                  <div key={index} className="flex items-center gap-2 rounded border bg-muted p-2">
+                    <div className="flex h-16 w-16 items-center justify-center rounded bg-muted/50">
                       {isImage ? (
                         <div className="text-success text-xs font-medium">IMG</div>
                       ) : (
-                        <File className="text-muted-foreground h-8 w-8" />
+                        <File className="h-8 w-8 text-muted-foreground" />
                       )}
                     </div>
-                    <div className="min-w-0 flex-1">
-                      <p className="text-foreground truncate text-sm font-medium">{fileInfo.name}</p>
-                      <p className="text-muted-foreground text-xs">{(fileInfo.size / 1024 / 1024).toFixed(2)} MB</p>
-                      <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")}
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-foreground truncate">{fileInfo.name}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {(fileInfo.size / 1024 / 1024).toFixed(2)} MB
                       </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 type="button" variant="ghost" size="sm" onClick={clearFile} className="h-8 w-8 p-0">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={clearFile}
+                      className="h-8 w-8 p-0"
+                    >
                       <X className="h-4 w-4" />
                     </Button>
                   </div>
@@ -1305,45 +1309,45 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 required={required}
                 multiple={config?.multiple}
                 accept={config?.accept}
-                className="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer 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-input bg-muted hover:border-input/80 hover:bg-muted/80",
-                  readonly && "cursor-not-allowed opacity-50",
-                  !readonly && "cursor-pointer",
-                )}
-              >
+                  ? 'border-success/30 bg-success/10' 
+                  : 'border-input bg-muted hover:border-input/80 hover:bg-muted/80',
+                readonly && 'cursor-not-allowed opacity-50',
+                !readonly && 'cursor-pointer'
+              )}>
                 <div className="space-y-2">
                   {currentValue && currentValue.files && currentValue.files.length > 0 ? (
                     <>
                       <div className="flex items-center justify-center">
-                        <div className="bg-success/20 flex h-8 w-8 items-center justify-center rounded-full">
-                          <svg className="text-success h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-success/20">
+                          <svg className="h-5 w-5 text-success" 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-success text-sm font-medium">
-                        {currentValue.totalCount === 1 ? "파일 선택됨" : `${currentValue.totalCount}개 파일 선택됨`}
+                      <p className="text-sm font-medium text-success">
+                        {currentValue.totalCount === 1 
+                          ? '파일 선택됨' 
+                          : `${currentValue.totalCount}개 파일 선택됨`}
                       </p>
-                      <p className="text-success/80 text-xs">
+                      <p className="text-xs text-success/80">
                         총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB
                       </p>
-                      <p className="text-success/80 text-xs">클릭하여 다른 파일 선택</p>
+                      <p className="text-xs text-success/80">클릭하여 다른 파일 선택</p>
                     </>
                   ) : (
                     <>
-                      <Upload className="text-muted-foreground mx-auto h-8 w-8" />
-                      <p className="text-muted-foreground text-sm">
-                        {config?.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"}
+                      <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
+                      <p className="text-sm text-muted-foreground">
+                        {config?.dragDrop ? '파일을 드래그하여 놓거나 클릭하여 선택' : '클릭하여 파일 선택'}
                       </p>
                       {(config?.accept || config?.maxSize) && (
-                        <div className="text-muted-foreground space-y-1 text-xs">
+                        <div className="text-xs text-muted-foreground space-y-1">
                           {config.accept && <div>허용 형식: {config.accept}</div>}
                           {config.maxSize && <div>최대 크기: {config.maxSize}MB</div>}
                           {config.multiple && <div>다중 선택 가능</div>}
@@ -1357,7 +1361,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             
             {/* 파일 미리보기 */}
             {renderFilePreview()}
-          </div>,
+          </div>
         );
       }
 
@@ -1365,7 +1369,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,
@@ -1399,7 +1403,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);
@@ -1418,7 +1422,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               <SelectContent>
                 <SelectItem value="loading">로딩 중...</SelectItem>
               </SelectContent>
-            </Select>,
+            </Select>
           );
         }
       }
@@ -1527,22 +1531,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 missingFields = requiredFields.filter((field) => {
+          const requiredFields = allComponents.filter(c => c.required && (c.columnName || c.id));
+          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;
           }
@@ -1557,9 +1561,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];
@@ -1568,14 +1572,12 @@ 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") &&
-                  widget.webTypeConfig
-                ) {
+                if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') && 
+                    widget.webTypeConfig) {
                   const config = widget.webTypeConfig as TextTypeConfig;
                   const isAutoInput = config?.autoInput || false;
                   
@@ -1583,25 +1585,24 @@ 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}"`);
@@ -1626,17 +1627,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) => {
-              if (comp.type === "widget") {
+            allComponents.forEach(comp => {
+              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})`);
               }
             });
@@ -1647,8 +1648,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             }
 
             // 테이블명 결정 (화면 정보에서 가져오거나 첫 번째 컴포넌트의 테이블명 사용)
-            const tableName =
-              screenInfo.tableName || allComponents.find((c) => c.columnName)?.tableName || "dynamic_form_data"; // 기본값
+            const tableName = screenInfo.tableName || 
+                             allComponents.find(c => c.columnName)?.tableName ||
+                             "dynamic_form_data"; // 기본값
 
             // 🆕 자동으로 작성자 정보 추가 (user.userId가 확실히 있음)
             const writerValue = user.userId;
@@ -1689,7 +1691,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);
@@ -1703,6 +1705,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
         };
 
+
         // 삭제 액션
         const handleDeleteAction = async () => {
           const confirmMessage = config?.confirmMessage || "정말로 삭제하시겠습니까?";
@@ -1720,8 +1723,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
 
           // 테이블명 결정
-          const tableName =
-            screenInfo?.tableName || allComponents.find((c) => c.columnName)?.tableName || "unknown_table";
+          const tableName = screenInfo?.tableName || 
+                           allComponents.find(c => c.columnName)?.tableName ||
+                           "unknown_table";
 
           if (!tableName || tableName === "unknown_table") {
             alert("테이블 정보가 없어 삭제할 수 없습니다.");
@@ -1741,7 +1745,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);
@@ -1793,7 +1797,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 {
@@ -1806,7 +1810,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);
@@ -1836,14 +1840,12 @@ 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) {
@@ -1887,7 +1889,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             console.log("🎯 화면으로 이동:", {
               screenId: config.navigateScreenId,
               target: config.navigateTarget || "_self",
-              path: screenPath,
+              path: screenPath
             });
             
             if (config.navigateTarget === "_blank") {
@@ -1899,7 +1901,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") {
@@ -1911,7 +1913,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             console.log("🔗 네비게이션 정보가 설정되지 않았습니다:", {
               navigateType,
               hasUrl: !!config?.navigateUrl,
-              hasScreenId: !!config?.navigateScreenId,
+              hasScreenId: !!config?.navigateScreenId
             });
           }
         };
@@ -1936,32 +1938,27 @@ 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}
-            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 ${
-              hasCustomColors
-                ? ""
-                : "bg-background border-foreground text-foreground hover:bg-muted/50 border shadow-xs"
-            }`}
+            size="sm"
+            variant={config?.variant || "default"}
+            className="w-full"
             style={{
               height: "100%",
+              // 설정값이 있으면 우선 적용
               backgroundColor: config?.backgroundColor,
               color: config?.textColor,
               borderColor: config?.borderColor,
             }}
           >
             {buttonText}
-          </button>,
+          </Button>
         );
       }
 
@@ -1989,25 +1986,24 @@ 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) => ({
-            objid: file.objid.replace("temp_", ""), // temp_ 제거
+        const fileInfoForDB = updates.uploadedFiles.map(file => ({
+          objid: file.objid.replace('temp_', ''), // temp_ 제거
           target_objid: "",
           saved_file_name: file.savedFileName,
           real_file_name: file.realFileName,
@@ -2020,7 +2016,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);
@@ -2029,12 +2025,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 });
@@ -2042,15 +2038,14 @@ 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">
@@ -2133,6 +2128,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     marginBottom: component.style?.labelMarginBottom || "4px",
   };
 
+
   // 상위에서 라벨을 표시한 경우, 컴포넌트 내부에서는 라벨을 숨김
   const componentForRendering = shouldShowLabel
     ? {
@@ -2153,27 +2149,23 @@ 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 leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+              <label className="mb-2 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                 {labelText}
-                  {(component.required || component.componentConfig?.required) && (
-                    <span className="text-destructive ml-1">*</span>
-                  )}
+                {(component.required || component.componentConfig?.required) && <span className="ml-1 text-destructive">*</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 right-4 bottom-4 z-50">
+          <div className="absolute bottom-4 right-4 z-50">
             <FormValidationIndicator
               validationState={enhancedValidation.validationState}
               saveState={enhancedValidation.saveState}
@@ -2191,14 +2183,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         )}
 
         {/* 모달 화면 */}
-          <Dialog
-            open={!!popupScreen}
-            onOpenChange={() => {
+        <Dialog open={!!popupScreen} onOpenChange={() => {
           setPopupScreen(null);
           setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
-            }}
-          >
-            <DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden p-0">
+        }}>
+          <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">
             <DialogHeader className="px-6 pt-4 pb-2">
               <DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
             </DialogHeader>
@@ -2209,16 +2198,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                   <div className="text-muted-foreground">화면을 불러오는 중...</div>
                 </div>
               ) : popupLayout.length > 0 ? (
-                  <div
-                    className="bg-background relative rounded border"
-                    style={{
+                <div className="relative bg-background border rounded" 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
@@ -2244,12 +2230,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,18 +835,12 @@ 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,
@@ -859,7 +853,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
         }}
       >
         {label || "버튼"}
-      </button>
+      </Button>
     );
   };
 

frontend/components/screen/OptimizedButtonComponent.tsx

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

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

@@ -32,27 +32,14 @@ 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 px-4 text-sm font-medium ${
-          hasCustomColors ? '' : 'bg-blue-600 text-white'
-        } ${className || ""}`}
+        className={`flex items-center justify-center rounded-md bg-blue-600 px-4 text-sm font-medium text-white ${className || ""} `}
         style={{
           ...style,
-          backgroundColor: bgColor,
-          color: textColor,
           width: "100%",
           height: "100%",
           cursor: "pointer", // 선택 가능하도록 포인터 표시
@@ -69,13 +56,9 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
       type="button"
       onClick={handleClick}
       disabled={disabled || readonly}
-      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 || ""}`}
+      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 || ""} `}
       style={{
         ...style,
-        backgroundColor: bgColor,
-        color: textColor,
         width: "100%",
         height: "100%",
       }}

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

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