feat: 화면 디자이너 모달 및 제어 관리 탭 기능 추가
- 화면 설정 모달에 "제어 관리" 탭 추가하여 버튼 제어 설정을 간편하게 관리 - 버튼 액션 설정 기능 구현: 버튼 목록 표시 및 각 버튼의 액션 타입 수정 가능 - 화면 디자이너 모달 통합: 전체화면 Dialog 내부에 ScreenDesigner 임베드 - URL 쿼리 파라미터로 화면 디자이너 자동 열기 기능 추가 - 화면 캔버스 크기 자동 조절 기능 구현: 최소 크기 보장 및 여유 마진 추가 - 필드 추가/제거 기능 개선: 기존 그리드 컬럼 변경 로직과 통합하여 사용자 경험 향상
This commit is contained in:
DDD1542
parent
905a9f62c3
commit
f321aaf7aa
|
|
@ -1010,7 +1010,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
|
||||
|
|
@ -1113,6 +1114,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;
|
||||
|
|
|
|||
|
|
@ -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)")
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1909,23 +1909,27 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
|
|||
}
|
||||
};
|
||||
|
||||
// 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용
|
||||
const hasCustomColors = config?.backgroundColor || config?.textColor;
|
||||
|
||||
return applyStyles(
|
||||
<Button
|
||||
<button
|
||||
onClick={handleButtonClick}
|
||||
disabled={readonly}
|
||||
size="sm"
|
||||
variant={config?.variant || "default"}
|
||||
className="w-full"
|
||||
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={{
|
||||
height: "100%",
|
||||
// 설정값이 있으면 우선 적용
|
||||
backgroundColor: config?.backgroundColor,
|
||||
color: config?.textColor,
|
||||
borderColor: config?.borderColor,
|
||||
}}
|
||||
>
|
||||
{label || "버튼"}
|
||||
</Button>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -834,12 +834,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,
|
||||
|
|
@ -852,7 +858,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
|
|||
}}
|
||||
>
|
||||
{label || "버튼"}
|
||||
</Button>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
config?.borderColor && { borderColor: config.borderColor },
|
||||
// 커스텀 색상이 없을 때만 기본 스타일 적용
|
||||
!hasCustomColors && "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: config?.backgroundColor,
|
||||
color: config?.textColor,
|
||||
borderColor: config?.borderColor,
|
||||
// 커스텀 색상이 있을 때만 인라인 스타일 적용
|
||||
...(config?.backgroundColor && { backgroundColor: config.backgroundColor }),
|
||||
...(config?.textColor && { color: config.textColor }),
|
||||
...(config?.borderColor && { borderColor: config.borderColor }),
|
||||
}}
|
||||
>
|
||||
{/* 메인 버튼 내용 */}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -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%",
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -495,15 +495,50 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
...component.componentConfig, // 🔥 화면 디자이너에서 저장된 action 등 포함
|
||||
} as ButtonPrimaryConfig;
|
||||
|
||||
// 🎨 동적 색상 설정 (속성편집 모달의 "색상" 필드와 연동)
|
||||
const getLabelColor = () => {
|
||||
if (isDeleteAction()) {
|
||||
return component.style?.labelColor || "#ef4444"; // 빨간색 기본값 (Tailwind red-500)
|
||||
// 🎨 동적 색상 설정 (webTypeConfig 우선, 레거시 style.labelColor 지원)
|
||||
const getButtonBackgroundColor = () => {
|
||||
// 1순위: webTypeConfig.backgroundColor (화면설정 모달에서 저장)
|
||||
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 };
|
||||
|
|
@ -1115,7 +1150,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
} : undefined,
|
||||
} as ButtonActionContext;
|
||||
|
||||
// 확인이 필요한 액션인지 확인
|
||||
// 확인이 필요한 액션인지 확인 (save/delete만 확인 다이얼로그 표시)
|
||||
if (confirmationRequiredActions.includes(processedConfig.action.type)) {
|
||||
// 확인 다이얼로그 표시
|
||||
setPendingAction({
|
||||
|
|
@ -1251,8 +1286,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
minHeight: "40px",
|
||||
border: "none",
|
||||
borderRadius: "0.5rem",
|
||||
backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor, // 🔧 background → backgroundColor로 변경
|
||||
color: finalDisabled ? "#9ca3af" : "white",
|
||||
backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor,
|
||||
color: finalDisabled ? "#9ca3af" : buttonTextColor, // 🔧 webTypeConfig.textColor 지원
|
||||
// 🔧 크기 설정 적용 (sm/md/lg)
|
||||
fontSize: componentConfig.size === "sm" ? "0.75rem" : componentConfig.size === "lg" ? "1rem" : "0.875rem",
|
||||
fontWeight: "600",
|
||||
|
|
|
|||
Loading…
Reference in New Issue