115 lines
5.8 KiB
Markdown
115 lines
5.8 KiB
Markdown
|
# Phase A: 메타 컴포넌트 코어 개발
|
||
|
|
|
||
|
|
## 개요
|
||
|
|
70개 이상의 기존 컴포넌트를 7개 메타 컴포넌트로 통합하는 첫 단계.
|
||
|
|
핵심 3개 메타 컴포넌트(Field, DataView, Action)와 통합 설정 패널(UnifiedConfigPanel)을 구현한다.
|
||
|
|
|
||
|
|
## 중요 제약사항
|
||
|
|
- DB 변경은 testvex DB에만 수행 (postgresql://postgres:ph0909!!@39.117.244.52:11132/testvex)
|
||
|
|
- 기존 plm DB(vexplor-dev)는 절대 수정하지 않음
|
||
|
|
- 기존 V2 컴포넌트는 유지하면서 새 메타 컴포넌트를 병렬 추가
|
||
|
|
- version "3.0"으로 새 레이아웃 저장
|
||
|
|
|
||
|
|
## 작업 목록
|
||
|
|
|
||
|
|
### Task 1: DB 스키마 - 메타 컴포넌트 지원 테이블
|
||
|
|
- **담당**: db
|
||
|
|
- **테스트**: SELECT로 테이블 존재 확인
|
||
|
|
- **내용**:
|
||
|
|
- testvex DB에 screen_layouts_v3 테이블이 이미 존재하면 활용, 없으면 생성
|
||
|
|
- 메타 컴포넌트 설정을 저장할 구조 설계 (JSONB 활용)
|
||
|
|
- reactive_bindings 테이블 생성 (컴포넌트 간 연동 정보 저장)
|
||
|
|
- 마이그레이션 SQL 작성: db/migrations/ 폴더에 저장
|
||
|
|
|
||
|
|
### Task 2: 백엔드 - 메타 컴포넌트 API
|
||
|
|
- **담당**: backend
|
||
|
|
- **테스트**: curl로 API 응답 확인
|
||
|
|
- **내용**:
|
||
|
|
- backend-node/src/routes/ 에 metaComponentRoutes.ts 생성
|
||
|
|
- backend-node/src/services/ 에 metaComponentService.ts 생성
|
||
|
|
- API 엔드포인트:
|
||
|
|
- GET /api/meta/field-config/:tableName/:columnName - 컬럼의 webType 기반 Field 설정 자동 생성
|
||
|
|
- GET /api/meta/table-columns/:tableName - 테이블 컬럼 목록 + webType + FK 관계 자동 감지
|
||
|
|
- POST /api/meta/layout/save - 메타 컴포넌트 기반 레이아웃 저장 (version: "3.0")
|
||
|
|
- GET /api/meta/layout/:screenId - 메타 컴포넌트 레이아웃 로드
|
||
|
|
- POST /api/meta/bindings/save - Reactive Bindings 저장
|
||
|
|
- GET /api/meta/bindings/:screenId - Reactive Bindings 조회
|
||
|
|
- company_code 멀티테넌시 필수 적용
|
||
|
|
- req.user.companyCode 기반 필터링
|
||
|
|
|
||
|
|
### Task 3: 프론트엔드 - Field 메타 컴포넌트
|
||
|
|
- **담당**: frontend
|
||
|
|
- **내용**:
|
||
|
|
- frontend/lib/meta-components/ 디렉토리 생성
|
||
|
|
- frontend/lib/meta-components/Field/ 디렉토리:
|
||
|
|
- FieldRenderer.tsx - webType에 따라 적절한 입력 UI 렌더링
|
||
|
|
- FieldConfigPanel.tsx - 통합 Field 설정 패널
|
||
|
|
- fieldTypes.ts - Field 관련 TypeScript 인터페이스
|
||
|
|
- useFieldData.ts - Field 데이터 바인딩 훅
|
||
|
|
- webType별 렌더링: text, number, date, datetime, select, entity, checkbox, radio, file, textarea, toggle, slider
|
||
|
|
- entity 타입: 조인 테이블 자동 감지 + 검색 가능한 Select
|
||
|
|
- select 타입: code_table 자동 연결
|
||
|
|
- 기존 V2 컴포넌트 레지스트리에 'meta-field' 타입으로 등록
|
||
|
|
|
||
|
|
### Task 4: 프론트엔드 - DataView 메타 컴포넌트
|
||
|
|
- **담당**: frontend
|
||
|
|
- **내용**:
|
||
|
|
- frontend/lib/meta-components/DataView/ 디렉토리:
|
||
|
|
- DataViewRenderer.tsx - viewMode에 따라 테이블/카드/리스트 렌더링
|
||
|
|
- DataViewConfigPanel.tsx - DataView 설정 패널
|
||
|
|
- dataViewTypes.ts - DataView 관련 TypeScript 인터페이스
|
||
|
|
- useDataView.ts - 데이터 조회/페이징/정렬/필터 훅
|
||
|
|
- views/TableView.tsx - 테이블 뷰 모드
|
||
|
|
- views/CardView.tsx - 카드 뷰 모드
|
||
|
|
- 뷰 모드 전환 버튼 (사용자가 런타임에 전환)
|
||
|
|
- 마스터-디테일 자동 연결 지원
|
||
|
|
- 컬럼 설정: 표시/숨김, 순서, 정렬, 합계
|
||
|
|
- 기존 V2 컴포넌트 레지스트리에 'meta-dataview' 타입으로 등록
|
||
|
|
|
||
|
|
### Task 5: 프론트엔드 - Action 메타 컴포넌트
|
||
|
|
- **담당**: frontend
|
||
|
|
- **내용**:
|
||
|
|
- frontend/lib/meta-components/Action/ 디렉토리:
|
||
|
|
- ActionRenderer.tsx - 버튼 렌더링 + steps 파이프라인 실행
|
||
|
|
- ActionConfigPanel.tsx - Action 설정 패널 (동작 순서 설정)
|
||
|
|
- actionTypes.ts - Action 관련 TypeScript 인터페이스
|
||
|
|
- useActionPipeline.ts - ActionStep 순차 실행 훅
|
||
|
|
- ActionStep 타입: save, delete, refresh, navigate, openModal, setField, api, toast, validate
|
||
|
|
- 실행 조건: always, selected, field_value, expression
|
||
|
|
- 확인 대화상자 지원
|
||
|
|
- 기존 V2 컴포넌트 레지스트리에 'meta-action' 타입으로 등록
|
||
|
|
|
||
|
|
### Task 6: 프론트엔드 - 통합 설정 패널 (UnifiedConfigPanel)
|
||
|
|
- **담당**: frontend
|
||
|
|
- **내용**:
|
||
|
|
- frontend/lib/meta-components/UnifiedConfigPanel/ 디렉토리:
|
||
|
|
- UnifiedConfigPanel.tsx - 모든 메타 컴포넌트의 설정을 하나의 패널로 통합
|
||
|
|
- tabs/BasicTab.tsx - 기본 설정 (라벨, 필수, 읽기전용, 타입)
|
||
|
|
- tabs/DataTab.tsx - 데이터 연결 (테이블, 컬럼, 기본값)
|
||
|
|
- tabs/DisplayTab.tsx - 표시 설정 (너비, 위치, 도움말)
|
||
|
|
- tabs/BindingTab.tsx - 연동 설정 (다른 컴포넌트와 연결)
|
||
|
|
- tabs/ConditionTab.tsx - 조건 설정 (표시/활성 조건)
|
||
|
|
- 3단계 모드: 간편/상세/개발자
|
||
|
|
- 기존 V2PropertiesPanel과 병렬 사용 가능
|
||
|
|
|
||
|
|
### Task 7: 프론트엔드 - Reactive Bindings 엔진
|
||
|
|
- **담당**: frontend
|
||
|
|
- **내용**:
|
||
|
|
- frontend/lib/meta-components/bindings/ 디렉토리:
|
||
|
|
- ReactiveBindingEngine.ts - 바인딩 이벤트 처리 엔진
|
||
|
|
- bindingTypes.ts - Reactive Binding 인터페이스
|
||
|
|
- useReactiveBindings.ts - 바인딩 관리 훅
|
||
|
|
- BindingVisualizer.tsx - 연동 시각화 패널 (하단)
|
||
|
|
- 지원하는 소스 이벤트: change, select, click, load
|
||
|
|
- 지원하는 타겟 액션: filter, setValue, show, hide, enable, disable, refresh
|
||
|
|
- 변환 타입: direct, lookup, calculate, condition
|
||
|
|
|
||
|
|
### Task 8: 메타 컴포넌트를 ScreenDesigner에 통합
|
||
|
|
- **담당**: frontend
|
||
|
|
- **내용**:
|
||
|
|
- ScreenDesigner.tsx에서 메타 컴포넌트를 인식하도록 수정
|
||
|
|
- 컴포넌트 팔레트에 "메타 컴포넌트" 섹션 추가 (Field, DataView, Action)
|
||
|
|
- 메타 컴포넌트 드래그 앤 드롭 지원
|
||
|
|
- 메타 컴포넌트 선택 시 UnifiedConfigPanel 표시 (기존 V2PropertiesPanel 대신)
|
||
|
|
- version "3.0" 레이아웃 저장/로드 지원
|