feat: Add process work standard component implementation plan

- Introduced a comprehensive implementation plan for the v2-process-work-standard component, detailing the current state analysis, required database tables, API design, and implementation phases. - Included a structured file organization plan for both frontend and backend components, ensuring clarity in development and integration. - Updated the V2Repeater component to support new auto-fill functionalities, including parent sequence generation, enhancing data management capabilities. - Enhanced the V2RepeaterConfigPanel to allow configuration of parent sequence settings, improving user experience in managing data entries.
2026-02-24 10:15:25 +09:00
parent 9cc93b88ff
commit e8c0828d91
6 changed files with 651 additions and 36 deletions
@@ -2,8 +2,8 @@

 > **목적**: 다양한 회사에서 V2 컴포넌트를 활용하여 화면을 개발할 때 참고하는 범용 가이드
 > **대상**: 화면 설계자, 개발자
-> **버전**: 1.0.0
-> **작성일**: 2026-01-30
+> **버전**: 1.1.0
+> **작성일**: 2026-02-23 (최종 업데이트)

 ---

@@ -19,60 +19,63 @@
 | 카드 뷰 | 이미지+정보 카드 형태 | 설비정보, 대시보드 |
 | 피벗 분석 | 다차원 집계 | 매출분석, 재고현황 |
 | 반복 컨테이너 | 데이터 수만큼 UI 반복 | 주문 상세, 항목 리스트 |
+| 그룹화 테이블 | 그룹핑 기능 포함 테이블 | 카테고리별 집계, 부서별 현황 |
+| 타임라인/스케줄 | 시간축 기반 일정 관리 | 생산일정, 작업스케줄 |

 ### 1.2 불가능한 화면 유형 (별도 개발 필요)

 | 화면 유형 | 이유 | 해결 방안 |
 |-----------|------|----------|
-| 간트 차트 / 타임라인 | 시간축 기반 UI 없음 | 별도 컴포넌트 개발 or 외부 라이브러리 |
 | 트리 뷰 (계층 구조) | 트리 컴포넌트 미존재 | `v2-tree-view` 개발 필요 |
-| 그룹화 테이블 | 그룹핑 기능 미지원 | `v2-grouped-table` 개발 필요 |
 | 드래그앤드롭 보드 | 칸반 스타일 UI 없음 | 별도 개발 |
 | 모바일 앱 스타일 | 네이티브 앱 UI | 별도 개발 |
 | 복잡한 차트 | 기본 집계 외 시각화 | 차트 라이브러리 연동 |

+> **참고**: 그룹화 테이블(`v2-table-grouped`)과 타임라인 스케줄러(`v2-timeline-scheduler`)는 v1.1에서 추가되어 이제 지원됩니다.
+
 ---

-## 2. V2 컴포넌트 전체 목록 (23개)
+## 2. V2 컴포넌트 전체 목록 (25개)

-### 2.1 입력 컴포넌트 (3개)
+### 2.1 입력 컴포넌트 (4개)

 | ID | 이름 | 용도 | 주요 옵션 |
 |----|------|------|----------|
-| `v2-input` | 입력 | 텍스트, 숫자, 비밀번호, 이메일, 전화번호, URL, 여러 줄 | inputType, required, readonly, maxLength |
-| `v2-select` | 선택 | 드롭다운, 콤보박스, 라디오, 체크박스 | mode, source(distinct/static/code/entity), multiple |
-| `v2-date` | 날짜 | 날짜, 시간, 날짜시간, 날짜범위, 월, 연도 | dateType, format, showTime |
+| `v2-input` | 입력 | 텍스트, 숫자, 비밀번호, 슬라이더, 컬러 | inputType(text/number/password/slider/color/button), format(email/tel/url/currency/biz_no), required, readonly, maxLength, min, max, step |
+| `v2-select` | 선택 | 드롭다운, 콤보박스, 라디오, 체크, 태그, 토글, 스왑 | mode(dropdown/combobox/radio/check/tag/tagbox/toggle/swap), source(static/code/db/api/entity/category/distinct/select), searchable, multiple, cascading |
+| `v2-date` | 날짜 | 날짜, 시간, 날짜시간 | dateType(date/time/datetime), format, range, minDate, maxDate, showToday |
+| `v2-file-upload` | 파일 업로드 | 파일/이미지 업로드 | - |

 ### 2.2 표시 컴포넌트 (3개)

 | ID | 이름 | 용도 | 주요 옵션 |
 |----|------|------|----------|
 | `v2-text-display` | 텍스트 표시 | 라벨, 제목, 설명 텍스트 | fontSize, fontWeight, color, textAlign |
-| `v2-card-display` | 카드 디스플레이 | 테이블 데이터를 카드 형태로 표시 | cardsPerRow, showImage, columnMapping |
+| `v2-card-display` | 카드 디스플레이 | 테이블 데이터를 카드 형태로 표시 | cardsPerRow, cardSpacing, columnMapping(titleColumn/subtitleColumn/descriptionColumn/imageColumn), cardStyle(imagePosition/imageSize), dataSource(table/static/api) |
 | `v2-aggregation-widget` | 집계 위젯 | 합계, 평균, 개수, 최대, 최소 | items, filters, layout |

-### 2.3 테이블/데이터 컴포넌트 (3개)
+### 2.3 테이블/데이터 컴포넌트 (4개)

 | ID | 이름 | 용도 | 주요 옵션 |
 |----|------|------|----------|
-| `v2-table-list` | 테이블 리스트 | 데이터 조회/편집 테이블 | selectedTable, columns, pagination, filter |
-| `v2-table-search-widget` | 검색 필터 | 테이블 검색/필터/그룹 | autoSelectFirstTable, showTableSelector |
-| `v2-pivot-grid` | 피벗 그리드 | 다차원 분석 (행/열/데이터 영역) | fields, totals, aggregation |
+| `v2-table-list` | 테이블 리스트 | 데이터 조회/편집 테이블 | selectedTable, columns, pagination, filter, displayMode(table/card), checkbox, horizontalScroll, linkedFilters, excludeFilter, toolbar, tableStyle, autoLoad |
+| `v2-table-search-widget` | 검색 필터 | 테이블 검색/필터/그룹 | autoSelectFirstTable, showTableSelector, title |
+| `v2-pivot-grid` | 피벗 그리드 | 다차원 분석 (행/열/데이터 영역) | fields(area: row/column/data/filter, summaryType: sum/avg/count/min/max/countDistinct, groupInterval: year/quarter/month/week/day), dataSource(type: table/api/static, joinConfigs, filterConditions) |
+| `v2-table-grouped` | 그룹화 테이블 | 그룹핑 기능이 포함된 테이블 | - |

-### 2.4 레이아웃 컴포넌트 (8개)
+### 2.4 레이아웃 컴포넌트 (7개)

 | ID | 이름 | 용도 | 주요 옵션 |
 |----|------|------|----------|
-| `v2-split-panel-layout` | 분할 패널 | 마스터-디테일 좌우 분할 | splitRatio, resizable, relation, **displayMode: custom** |
-| `v2-tabs-widget` | 탭 위젯 | 탭 전환, 탭 내 컴포넌트 | tabs, activeTabId |
+| `v2-split-panel-layout` | 분할 패널 | 마스터-디테일 좌우 분할 | splitRatio, resizable, minLeftWidth, minRightWidth, syncSelection, panel별: displayMode(list/table/custom), relation(type/foreignKey), editButton, addButton, deleteButton, additionalTabs |
+| `v2-tabs-widget` | 탭 위젯 | 탭 전환, 탭 내 컴포넌트 | tabs(id/label/order/disabled/components), defaultTab, orientation(horizontal/vertical), allowCloseable, persistSelection |
 | `v2-section-card` | 섹션 카드 | 제목+테두리 그룹화 | title, collapsible, padding |
 | `v2-section-paper` | 섹션 페이퍼 | 배경색 그룹화 | backgroundColor, padding, shadow |
 | `v2-divider-line` | 구분선 | 영역 구분 | orientation, thickness |
 | `v2-repeat-container` | 리피터 컨테이너 | 데이터 수만큼 반복 렌더링 | dataSourceType, layout, gridColumns |
-| `v2-repeater` | 리피터 | 반복 컨트롤 | - |
-| `v2-repeat-screen-modal` | 반복 화면 모달 | 모달 반복 | - |
+| `v2-repeater` | 리피터 | 반복 컨트롤 (inline/modal) | - |

-### 2.5 액션/특수 컴포넌트 (6개)
+### 2.5 액션/특수 컴포넌트 (7개)

 | ID | 이름 | 용도 | 주요 옵션 |
 |----|------|------|----------|
@@ -82,6 +85,7 @@
 | `v2-location-swap-selector` | 위치 교환 | 위치 선택/교환 | - |
 | `v2-rack-structure` | 랙 구조 | 창고 랙 시각화 | - |
 | `v2-media` | 미디어 | 이미지/동영상 표시 | - |
+| `v2-timeline-scheduler` | 타임라인 스케줄러 | 시간축 기반 일정/작업 관리 | - |

 ---

@@ -261,8 +265,26 @@
  ],
  pagination: {
    enabled: true,
-    pageSize: 20
-  }
+    pageSize: 20,
+    showSizeSelector: true,
+    showPageInfo: true
+  },
+  displayMode: "table",       // "table" | "card"
+  checkbox: {
+    enabled: true,
+    multiple: true,
+    position: "left",
+    selectAll: true
+  },
+  horizontalScroll: {         // 가로 스크롤 설정
+    enabled: true,
+    maxVisibleColumns: 8
+  },
+  linkedFilters: [],          // 연결 필터 (다른 컴포넌트와 연동)
+  excludeFilter: {},          // 제외 필터
+  autoLoad: true,             // 자동 데이터 로드
+  stickyHeader: false,        // 헤더 고정
+  autoWidth: true             // 자동 너비 조정
 }
 ```

@@ -271,16 +293,44 @@
 ```typescript
 {
  leftPanel: {
-    tableName: "마스터_테이블명"
+    displayMode: "table",         // "list" | "table" | "custom"
+    tableName: "마스터_테이블명",
+    columns: [],                  // 컬럼 설정
+    editButton: {                 // 수정 버튼 설정
+      enabled: true,
+      mode: "auto",              // "auto" | "modal"
+      modalScreenId: ""          // 모달 모드 시 화면 ID
+    },
+    addButton: {                  // 추가 버튼 설정
+      enabled: true,
+      mode: "auto",
+      modalScreenId: ""
+    },
+    deleteButton: {               // 삭제 버튼 설정
+      enabled: true,
+      buttonLabel: "삭제",
+      confirmMessage: "삭제하시겠습니까?"
+    },
+    addModalColumns: [],          // 추가 모달 전용 컬럼
+    additionalTabs: []            // 추가 탭 설정
  },
  rightPanel: {
+    displayMode: "table",
    tableName: "디테일_테이블명",
    relation: {
-      type: "detail",          // join | detail | custom
-      foreignKey: "master_id"  // 연결 키
+      type: "detail",            // "join" | "detail" | "custom"
+      foreignKey: "master_id",   // 연결 키
+      leftColumn: "",            // 좌측 연결 컬럼
+      rightColumn: "",           // 우측 연결 컬럼
+      keys: []                   // 복합 키
    }
  },
-  splitRatio: 30  // 좌측 비율
+  splitRatio: 30,                 // 좌측 비율 (0-100)
+  resizable: true,                // 리사이즈 가능
+  minLeftWidth: 200,              // 좌측 최소 너비
+  minRightWidth: 300,             // 우측 최소 너비
+  syncSelection: true,            // 선택 동기화
+  autoLoad: true                  // 자동 로드
 }
 ```

@@ -347,12 +397,12 @@
 | 기능 | 상태 | 대안 |
 |------|------|------|
 | 트리 뷰 (BOM, 조직도) | ❌ 미지원 | 테이블로 대체 or 별도 개발 |
-| 그룹화 테이블 | ❌ 미지원 | 일반 테이블로 대체 or 별도 개발 |
-| 간트 차트 | ❌ 미지원 | 별도 개발 필요 |
 | 드래그앤드롭 정렬 | ❌ 미지원 | 순서 컬럼으로 대체 |
 | 인라인 편집 | ⚠️ 제한적 | 모달 편집으로 대체 |
 | 복잡한 차트 | ❌ 미지원 | 외부 라이브러리 연동 |

+> **v1.1 업데이트**: 그룹화 테이블(`v2-table-grouped`)과 타임라인 스케줄러(`v2-timeline-scheduler`)가 추가되어 해당 기능은 이제 지원됩니다.
+
 ### 5.2 권장하지 않는 조합

 | 조합 | 이유 |
@@ -555,9 +605,10 @@
 | 탭 화면 | ✅ 완전 | v2-tabs-widget |
 | 카드 뷰 | ✅ 완전 | v2-card-display |
 | 피벗 분석 | ✅ 완전 | v2-pivot-grid |
-| 그룹화 테이블 | ❌ 미지원 | 개발 필요 |
+| 그룹화 테이블 | ✅ 지원 | v2-table-grouped |
+| 타임라인/스케줄 | ✅ 지원 | v2-timeline-scheduler |
+| 파일 업로드 | ✅ 지원 | v2-file-upload |
 | 트리 뷰 | ❌ 미지원 | 개발 필요 |
-| 간트 차트 | ❌ 미지원 | 개발 필요 |

 ### 개발 시 핵심 원칙