ERP-node/docs/unified-components-implementation.md

Unified Components 구현 완료 보고서

구현 일시

2024-12-19

구현된 컴포넌트 목록 (10개)

Phase 1: 핵심 입력 컴포넌트

컴포넌트	파일	모드/타입	설명
UnifiedInput	UnifiedInput.tsx	text, number, password, slider, color, button	통합 입력 컴포넌트
UnifiedSelect	UnifiedSelect.tsx	dropdown, radio, check, tag, toggle, swap	통합 선택 컴포넌트
UnifiedDate	UnifiedDate.tsx	date, time, datetime + range	통합 날짜/시간 컴포넌트

Phase 2: 레이아웃 및 그룹 컴포넌트

컴포넌트	파일	모드/타입	설명
UnifiedList	UnifiedList.tsx	table, card, kanban, list	통합 리스트 컴포넌트
UnifiedLayout	UnifiedLayout.tsx	grid, split, flex, divider, screen-embed	통합 레이아웃 컴포넌트
UnifiedGroup	UnifiedGroup.tsx	tabs, accordion, section, card-section, modal, form-modal	통합 그룹 컴포넌트

Phase 3: 미디어 및 비즈니스 컴포넌트

컴포넌트	파일	모드/타입	설명
UnifiedMedia	UnifiedMedia.tsx	file, image, video, audio	통합 미디어 컴포넌트
UnifiedBiz	UnifiedBiz.tsx	flow, rack, map, numbering, category, mapping, related-buttons	통합 비즈니스 컴포넌트
UnifiedHierarchy	UnifiedHierarchy.tsx	tree, org, bom, cascading	통합 계층 구조 컴포넌트

---

공통 인프라

설정 패널

• DynamicConfigPanel: JSON Schema 기반 동적 설정 UI 생성

렌더러

• UnifiedComponentRenderer: unifiedType에 따른 동적 컴포넌트 렌더링

---

파일 구조

frontend/components/unified/
├── index.ts                        # 모듈 인덱스
├── UnifiedComponentRenderer.tsx    # 동적 렌더러
├── DynamicConfigPanel.tsx          # JSON Schema 설정 패널
├── UnifiedInput.tsx                # 통합 입력
├── UnifiedSelect.tsx               # 통합 선택
├── UnifiedDate.tsx                 # 통합 날짜
├── UnifiedList.tsx                 # 통합 리스트
├── UnifiedLayout.tsx               # 통합 레이아웃
├── UnifiedGroup.tsx                # 통합 그룹
├── UnifiedMedia.tsx                # 통합 미디어
├── UnifiedBiz.tsx                  # 통합 비즈니스
└── UnifiedHierarchy.tsx            # 통합 계층

frontend/types/
└── unified-components.ts           # 타입 정의

db/migrations/
└── unified_component_schema.sql    # DB 스키마 (미실행)

---

사용 예시

기본 사용법

import {
  UnifiedInput,
  UnifiedSelect,
  UnifiedDate,
  UnifiedList,
  UnifiedComponentRenderer
} from "@/components/unified";

// UnifiedInput 사용
<UnifiedInput
  id="name"
  label="이름"
  required
  config={{ type: "text", placeholder: "이름을 입력하세요" }}
  value={name}
  onChange={setName}
/>

// UnifiedSelect 사용
<UnifiedSelect
  id="status"
  label="상태"
  config={{
    mode: "dropdown",
    source: "code",
    codeGroup: "ORDER_STATUS",
    searchable: true
  }}
  value={status}
  onChange={setStatus}
/>

// UnifiedDate 사용
<UnifiedDate
  id="orderDate"
  label="주문일"
  config={{ type: "date", format: "YYYY-MM-DD" }}
  value={orderDate}
  onChange={setOrderDate}
/>

// UnifiedList 사용
<UnifiedList
  id="orderList"
  label="주문 목록"
  config={{
    viewMode: "table",
    searchable: true,
    pageable: true,
    pageSize: 10,
    columns: [
      { field: "orderId", header: "주문번호", sortable: true },
      { field: "customerName", header: "고객명" },
      { field: "orderDate", header: "주문일", format: "date" },
    ]
  }}
  data={orders}
  onRowClick={handleRowClick}
/>

동적 렌더링

import { UnifiedComponentRenderer } from "@/components/unified";

// unifiedType에 따라 자동으로 적절한 컴포넌트 렌더링
<UnifiedComponentRenderer
  props={{
    unifiedType: "UnifiedInput",
    id: "dynamicField",
    label: "동적 필드",
    config: { type: "text" },
    value: fieldValue,
    onChange: setFieldValue,
  }}
/>;

---

주의사항

기존 컴포넌트와의 공존

1. 기존 컴포넌트는 그대로 유지: 모든 레거시 컴포넌트는 정상 동작
2. 신규 화면에서만 Unified 컴포넌트 사용: 기존 화면에 영향 없음
3. 마이그레이션 없음: 자동 마이그레이션 진행하지 않음

데이터베이스 마이그레이션

db/migrations/unified_component_schema.sql 파일은 아직 실행되지 않았습니다. 필요시 수동으로 실행해야 합니다:

psql -h localhost -U postgres -d plm_db -f db/migrations/unified_component_schema.sql

---

다음 단계 (선택)

1. 화면 관리 에디터 통합: Unified 컴포넌트를 화면 에디터의 컴포넌트 팔레트에 추가
2. 기존 비즈니스 컴포넌트 연동: UnifiedBiz의 플레이스홀더를 실제 구현으로 교체
3. 테스트 페이지 작성: 모든 Unified 컴포넌트 데모 페이지
4. 문서화: 각 컴포넌트별 상세 사용 가이드

---

관련 문서

• PLAN_RENEWAL.md: 리뉴얼 계획서
• docs/phase0-component-usage-analysis.md: 컴포넌트 사용 현황 분석
• docs/phase0-migration-strategy.md: 마이그레이션 전략 (참고용)