변경 사항:
1. InteractiveScreenViewer - handleEditAction 수정 ✅
- config에서 editModalTitle, editModalDescription 읽기
- openEditModal 이벤트로 제목/설명 전달
2. ButtonTypeConfig 타입 추가 ✅
- editModalTitle 필드 추가
- editModalDescription 필드 추가
3. ButtonConfigPanel 수정 ✅
- webTypeConfig에도 제목/설명 저장
- 이중 저장 (action + webTypeConfig)
결과:
- ✅ 버튼의 수정 액션 실행 시 설정한 제목이 모달에 표시됨
- ✅ 버튼의 수정 액션 실행 시 설정한 설명이 모달에 표시됨
- ✅ EditModal이 openEditModal 이벤트에서 제목/설명 받음
- ✅ 전체 데이터 흐름 완성
추가된 기능:
1. ButtonConfigPanel - 수정 모달 제목/설명 입력 필드 추가 ✅
2. EditModal - 제목/설명 props 추가 및 조건부 헤더 렌더링 ✅
3. DataTableConfigPanel - 수정 모달 설정 섹션 추가 ✅
4. InteractiveDataTable - editModalConfig에서 제목/설명 읽기 ✅
5. screen/[screenId]/page - 제목/설명 전달 추가 ✅
6. 타입 정의 - editModalConfig 추가 ✅
변경된 파일:
- frontend/components/screen/config-panels/ButtonConfigPanel.tsx
- frontend/components/screen/EditModal.tsx
- frontend/components/screen/InteractiveDataTable.tsx
- frontend/components/screen/panels/DataTableConfigPanel.tsx
- frontend/app/(main)/screens/[screenId]/page.tsx
- frontend/types/screen-legacy-backup.ts
결과:
- ✅ 수정 버튼에서 모달 제목과 설명을 설정할 수 있음
- ✅ 데이터테이블에서도 수정 모달 설정 가능
- ✅ 제목과 설명이 모달 헤더에 표시됨
- ✅ 설정하지 않으면 기본 동작 유지
수정된 위치:
- line 271: fromColumns (소스 필드)
- line 289: toColumns (소스 필드)
- line 623: fromColumns (필드 매핑)
- line 638: toColumns (필드 매핑)
- line 737: getAvailableFieldsForMapping (대상 필드)
모든 .map() 앞에 .filter() 추가:
- 빈 columnName 제외
- 중복 키 방지
- React 경고 해결
문제:
- toColumns에 빈 문자열 columnName 중복
- 중복된 키 to_ 생성
- React 키 중복 경고
수정:
- fromColumns filter 추가
- toColumns filter 추가
- 빈 문자열 컬럼 제외
에러:
Encountered two children with the same key
문제:
- SelectItem에 빈 문자열 value 전달 시 에러
- col.columnName이 빈 문자열일 수 있음
수정:
- filter에 col.columnName 체크 추가
- 빈 문자열 컬럼 제외
에러 메시지:
A <Select.Item /> must have a value prop
that is not an empty string
## 백엔드
- DashboardController: 대시보드 CRUD 및 쿼리 실행 API
- DashboardService: 비즈니스 로직 처리
- PostgreSQL 연동 및 데이터 관리
## 프론트엔드
- DashboardDesigner: 캔버스 기반 대시보드 디자이너
- QueryEditor: SQL 쿼리 편집 및 미리보기
- ChartRenderer: 다양한 차트 타입 지원 (Bar, Line, Area, Donut, Stacked, Combo)
- DashboardViewer: 실시간 데이터 반영 뷰어
## 개선사항
- 콘솔 로그 프로덕션 준비 (주석 처리)
- 차트 컴포넌트 확장 (6가지 타입)
- 실시간 쿼리 실행 및 데이터 바인딩
- 테이블 헤더 스타일링 개선 (더 진한 배경색, 오렌지 호버 효과)
- 파일첨부 컴포넌트 개선 (뚝뚝 잘리는 문제 해결, 패딩/아이콘 크기 조정)
- 카드 디스플레이 스타일링 개선 (명확한 테두리, 오렌지 호버 효과)
- 라벨 표시 기능 수정 (드롭다운 라벨링 문제, 체크박스 풀리는 문제 해결)
- 패널 및 레이아웃 개선 (카드 간격 통일, 주황색 영역 추가)
- CSS 통일성 작업 (Select 컴포넌트 너비 w-48로 조정)
- 정렬 화살표 표시 조건 수정 (정렬된 컬럼에서만 화살표 표시)
- 테이블 스타일링 통일 (SingleTableWithSticky, TableListComponent, InteractiveDataTable)
✨ 새로운 기능:
- 드래그 앤 드롭 대시보드 설계 도구
- SQL 쿼리 에디터 및 실시간 실행
- Recharts 기반 차트 컴포넌트 (Bar, Pie, Line)
- 차트 데이터 매핑 및 설정 UI
- 요소 이동, 크기 조절, 삭제 기능
- 레이아웃 저장 기능
📦 추가된 컴포넌트:
- DashboardDesigner: 메인 설계 도구
- QueryEditor: SQL 쿼리 작성 및 실행
- ChartConfigPanel: 차트 설정 패널
- ChartRenderer: 실제 차트 렌더링
- CanvasElement: 드래그 가능한 캔버스 요소
🔧 기술 스택:
- Recharts 라이브러리 추가
- TypeScript 타입 정의 완비
- 독립적 컴포넌트 구조로 설계
🎯 접속 경로: /admin/dashboard
