127 lines
11 KiB
JSON
127 lines
11 KiB
JSON
|
{
|
||
|
|
"featureDescription": "Phase B: 메타 컴포넌트 확장 + UnifiedConfigPanel + 캔버스 통합\n\n## 목표\nfrontend/lib/meta-components/ 하위에 Layout/Display/Search/Modal 4개 메타 컴포넌트 렌더러를 추가하고,\nMetaComponentRenderer(통합 디스패처), UnifiedConfigPanel(통합 설정 패널)을 구현한다.\n\n## 중요 규칙\n- 모든 프론트엔드 파일은 \"use client\" 선언\n- shadcn/ui 컴포넌트 사용 (import from \"@/components/ui/...\")\n- cn() 유틸리티 사용 (import { cn } from \"@/lib/utils\")\n- API 호출 시 apiClient 사용 (import { apiClient } from \"@/lib/api/client\")\n- Tailwind CSS 클래스 사용\n\n## 구현할 파일 목록\n\n### 1. 타입 확장 (frontend/lib/api/metaComponent.ts)\nMetaComponent.type에 추가: \"meta-layout\" | \"meta-display\" | \"meta-search\" | \"meta-modal\"\n새 인터페이스:\n\n```typescript\nexport interface LayoutComponentConfig {\n mode: \"columns\" | \"rows\" | \"tabs\" | \"accordion\" | \"card\";\n areas?: { id: string; label?: string; size?: string; collapsible?: boolean; }[];\n tabs?: { id: string; label: string; icon?: string; }[];\n gap?: number;\n padding?: number;\n bordered?: boolean;\n title?: string;\n}\n\nexport interface DisplayComponentConfig {\n displayType: \"text\" | \"heading\" | \"divider\" | \"badge\" | \"alert\" | \"stat\" | \"spacer\" | \"progress\";\n text?: { content: string; size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"; weight?: \"normal\" | \"medium\" | \"semibold\" | \"bold\"; align?: \"left\" | \"center\" | \"right\"; };\n stat?: { value: string; label: string; change?: string; changeType?: \"increase\" | \"decrease\" | \"neutral\"; };\n dataBinding?: { tableName?: string; columnName?: string; expression?: string; };\n}\n\nexport interface SearchComponentConfig {\n targetDataView: string;\n mode: \"simple\" | \"advanced\" | \"combined\";\n fields?: { columnName: string; label: string; searchType: \"text\" | \"exact\" | \"range\" | \"select\" | \"date_range\"; }[];\n quickFilters?: { label: string; filter: { column: string; operator: string; value: any }; }[];\n}\n\nexport interface ModalComponentConfig {\n trigger: \"button\" | \"row_click\" | \"row_double_click\" | \"action\";\n triggerLabel?: string;\n content: {\n type: \"form\" | \"screen\" | \"custom\";\n formConfig?: { tableName: string; mode: \"create\" | \"edit\" | \"view\"; columns: string[]; layout?: \"single\" | \"two_column\"; };\n screenId?: number;\n };\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n onClose?: ActionStep[];\n}\n```\n\nMetaComponent.config union 타입도 확장해서 위 4개 포함.\n\n### 2. Layout 렌더러 (frontend/lib/meta-components/Layout/LayoutRenderer.tsx)\n- mode=\"columns\": CSS Grid로 영역 분할\n- mode=\"rows\": CSS Grid 세로 분할\n- mode=\"tabs\": shadcn Tabs 사용\n- mode=\"accordion\": shadcn Accordion 사용\n- mode=\"card\": shadcn Card로 감싸기\n- children은 Record<string, React.ReactNode> 형태로 각 area에 매핑\n\n### 3. Display 렌더러 (frontend/lib/meta-components/Display/DisplayRenderer.tsx)\n- text: <p> + 크기/굵기/정렬 스타일\n- heading: text-xl~text-3xl + font-bold\n- divider: shadcn <Separator />\n- badge: shadcn <Badge>\n- alert: shadcn <Alert>\n- stat: 통계 카드 (큰 숫자 + 라벨 + 변화율 화살표)\n- spacer: <div className=\"h-{size}\">\n- progress: <Progress> (shadcn)\n\n### 4. Search 렌더러 (frontend/lib/meta-components/Search/SearchRenderer.tsx)\n- simple: Input + Search 버튼\n- advanced: 여러 필드를 grid로 배치 (FieldRenderer 재사용)\n- combined: simple + \"상세 검색\" 토글 버튼으로 advanced 표시/숨김\n- onSearch 콜백으로 검색 조건 전달\n\n### 5. Modal 렌더러 (frontend/lib/meta-components/Modal/ModalRenderer.tsx)\n- shadcn Dialog 기반\n- trigger=\"button\": 버튼 클릭으로 열기\n- content.type=\"form\": FieldRenderer로 폼 자동 구성\n- size별 Dialog 너비 조절\n- 프로젝트 표준 모달 패턴 준수 (max-w-[95vw] sm:max-w-[500px] 등
|
||
|
|
"round": 2,
|
||
|
|
"maxRounds": 5,
|
||
|
|
"agents": [
|
||
|
|
"frontend"
|
||
|
|
],
|
||
|
|
"messages": [
|
||
|
|
{
|
||
|
|
"round": 1,
|
||
|
|
"from": "frontend",
|
||
|
|
"type": "implementation",
|
||
|
|
"content": "Phase B: 메타 컴포넌트 4종 + 통합 디스패처 + 설정 패널 구현 완료\n\nLayout/Display/Search/Modal 렌더러 4개와 MetaComponentRenderer, UnifiedConfigPanel을 구현했어. 타입도 확장했고, 모든 컴포넌트가 shadcn/ui 기반으로 반응형 디자인 지원해. 프로젝트 표준 모달 패턴도 준수했어!",
|
||
|
|
"timestamp": "2026-02-27T15:25:48.104Z"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"round": 2,
|
||
|
|
"from": "frontend",
|
||
|
|
"type": "question",
|
||
|
|
"content": "Round 1 구현 완료 - 백엔드 동기화 필요 여부 확인\n\nPhase B 프론트엔드 구현을 완료했어.\n\n**구현 완료 항목:**\n- MetaComponent 타입 확장 (4개 신규: meta-layout/display/search/modal)\n- Layout/Display/Search/Modal 렌더러 4개 구현\n- MetaComponentRenderer (통합 디스패처) 구현\n- UnifiedConfigPanel (통합 설정 패널) 구현\n- index.ts 업데이트 (META_COMPONENT_REGISTRY 7개 컴포넌트 등록)\n\n**주요 특징:**\n1. **Layout**: columns/rows/tabs/accordion/card 5가지 레이아웃 모드\n2. **Display**: text/heading/divider/badge/alert/stat/spacer/progress 8가지 표시 타입\n3. **Search**: simple/advanced/combined 3가지 검색 모드, 빠른 필터 지원\n4. **Modal**: form/screen/custom 콘텐츠 타입, 프로젝트 표준 모달 패턴 준수\n5. **UnifiedConfigPanel**: 5개 탭(기본/데이터/표시/연동/조건), 간편/상세 모드 토글\n\n모든 컴포넌트가 shadcn/ui 기반, 반응형 디자인, TypeScript strict mode 준수했어.\n\n**확인 필요:**\n백엔드에서 이 4개 새 타입(meta-layout/display/search/modal)의 config 스키마 검증이나 추가 작업이 필요한지 확인이 필요해. 프론트엔드는 타입만 확장했지만, 백엔드 DB 스키마나 API 검증 로직 업데이트가 필요할 수도 있어.",
|
||
|
|
"timestamp": "2026-02-27T15:26:01.901Z"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"round": 2,
|
||
|
|
"from": "frontend",
|
||
|
|
"type": "question",
|
||
|
|
"content": "[to:backend] meta_component_registry 테이블이나 API에서 새로 추가된 4개 타입(meta-layout, meta-display, meta-search, meta-modal)에 대한 config 스키마 검증이나 추가 작업이 필요해? 프론트엔드 타입은 LayoutComponentConfig, DisplayComponentConfig, SearchComponentConfig, ModalComponentConfig로 정의했는데, 백엔드 쪽 동기화가 필요한지 확인 부탁해!",
|
||
|
|
"timestamp": "2026-02-27T15:26:01.901Z"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"artifacts": [
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/api/metaComponent.ts",
|
||
|
|
"action": "modify",
|
||
|
|
"summary": "MetaComponent 타입에 meta-layout/display/search/modal 추가. LayoutComponentConfig, DisplayComponentConfig, SearchComponentConfig, ModalComponentConfig 인터페이스 정의"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/meta-components/Layout/LayoutRenderer.tsx",
|
||
|
|
"action": "create",
|
||
|
|
"summary": "columns/rows/tabs/accordion/card 5가지 레이아웃 모드 지원. shadcn Tabs, Accordion, Card 컴포넌트 사용"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/meta-components/Display/DisplayRenderer.tsx",
|
||
|
|
"action": "create",
|
||
|
|
"summary": "text/heading/divider/badge/alert/stat/spacer/progress 8가지 표시 타입 지원. shadcn Separator, Badge, Alert, Progress 사용"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/meta-components/Search/SearchRenderer.tsx",
|
||
|
|
"action": "create",
|
||
|
|
"summary": "simple/advanced/combined 3가지 검색 모드 지원. 빠른 필터, 상세 검색 토글 기능 포함"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/meta-components/Modal/ModalRenderer.tsx",
|
||
|
|
"action": "create",
|
||
|
|
"summary": "shadcn Dialog 기반 모달. form/screen/custom 콘텐츠 타입 지원. 프로젝트 표준 모달 패턴 준수 (max-w-[95vw] sm:max-w-[500px])"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/meta-components/MetaComponentRenderer.tsx",
|
||
|
|
"action": "create",
|
||
|
|
"summary": "통합 디스패처. component.type에 따라 7가지 렌더러 중 적절한 것 호출 (Field/DataView/Action/Layout/Display/Search/Modal)"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/meta-components/config/UnifiedConfigPanel.tsx",
|
||
|
|
"action": "create",
|
||
|
|
"summary": "통합 설정 패널. shadcn Tabs로 5개 탭 (기본/데이터/표시/연동/조건). 간편/상세 모드 토글. 컴포넌트 타입별 설정 필드 동적 표시"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/meta-components/index.ts",
|
||
|
|
"action": "modify",
|
||
|
|
"summary": "새 렌더러 4개 + MetaComponentRenderer + UnifiedConfigPanel export. META_COMPONENT_REGISTRY에 7개 컴포넌트 전부 등록"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/meta-components/Layout/index.ts",
|
||
|
|
"action": "create",
|
||
|
|
"summary": "LayoutRenderer export"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/meta-components/Display/index.ts",
|
||
|
|
"action": "create",
|
||
|
|
"summary": "DisplayRenderer export"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/meta-components/Search/index.ts",
|
||
|
|
"action": "create",
|
||
|
|
"summary": "SearchRenderer export"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"agent": "frontend",
|
||
|
|
"round": 1,
|
||
|
|
"filePath": "frontend/lib/meta-components/Modal/index.ts",
|
||
|
|
"action": "create",
|
||
|
|
"summary": "ModalRenderer export"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"testResults": [
|
||
|
|
{
|
||
|
|
"passed": true,
|
||
|
|
"exitCode": 0,
|
||
|
|
"stdout": "EXIT:0\n",
|
||
|
|
"stderr": "",
|
||
|
|
"duration": 3214
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"converged": true
|
||
|
|
}
|