vexplor/docs/etc/v2-components-implementation.md

V2 Components 구현 완료 보고서

구현 일시

2024-12-19

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

Phase 1: 핵심 입력 컴포넌트

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

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

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

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

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

---

공통 인프라

설정 패널

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

렌더러

• V2ComponentRenderer: v2Type에 따른 동적 컴포넌트 렌더링

---

파일 구조

frontend/components/v2/
├── index.ts                        # 모듈 인덱스
├── V2ComponentRenderer.tsx    # 동적 렌더러
├── DynamicConfigPanel.tsx          # JSON Schema 설정 패널
├── V2Input.tsx                # 통합 입력
├── V2Select.tsx               # 통합 선택
├── V2Date.tsx                 # 통합 날짜
├── V2List.tsx                 # 통합 리스트
├── V2Layout.tsx               # 통합 레이아웃
├── V2Group.tsx                # 통합 그룹
├── V2Media.tsx                # 통합 미디어
├── V2Biz.tsx                  # 통합 비즈니스
└── V2Hierarchy.tsx            # 통합 계층

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

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

---

사용 예시

기본 사용법

import {
  V2Input,
  V2Select,
  V2Date,
  V2List,
  V2ComponentRenderer
} from "@/components/v2";

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

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

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

// V2List 사용
<V2List
  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 { V2ComponentRenderer } from "@/components/v2";

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

---

주의사항

기존 컴포넌트와의 공존

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

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

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

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

---

다음 단계 (선택)

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

---

관련 문서

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