수정된 위치:
- 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
