# 품목기준관리 → Low-Code Form Builder 확장 로드맵

> 작성일: 2025-12-12
> 상태: 기획/설계 단계
> 목표: 노션/Airtable 수준의 유연한 폼 빌더 구현

---

## 📊 현재 시스템 대응력 분석

### 현재 대응 가능한 시나리오

| 시나리오 | 지원 여부 | 구현 방식 |
|---------|----------|----------|
| 업종별 다른 품목 양식 | ✅ | 페이지별 item_type (FG/PT/SM/RM/CS) |
| 필드 선택적 표시 | ✅ | 섹션/필드 조합으로 구성 |
| 필드 유형 다양화 | ✅ | 6가지 타입 (text, number, dropdown, checkbox, date, textarea) |
| 필수/선택 필드 구분 | ✅ | is_required 플래그 |
| 조건부 필드 표시 | ✅ | display_condition + useConditionalDisplay |
| 템플릿 재사용 | ✅ | 섹션 템플릿 시스템 |
| BOM 구성 | ✅ | DynamicBOMSection |
| 검증 규칙 커스터마이징 | ✅ | validation_rules (min/max/pattern) |
| 단위 옵션 공유 | ✅ | unitOptions API |

### 🟢 잘 대응하는 상황들

**1. 제조업 표준 시나리오**
```
완제품(FG): 품명, 규격, 단위, BOM 구성
부품(PT): 품명, 재질, 벤딩 다이어그램
원자재(RM): 품명, 단가, 공급업체
```

**2. 조건부 필드 시나리오**
```
"품목유형이 '제품'이면 → 중량, 치수, 색상 필드 표시"
"품목유형이 '원자재'면 → 재질코드, 공급업체 필드 표시"
```

**3. 다중 테넌트 기본 격리**
```
테넌트 A: 전자부품 → 전압, 저항, 핀 수 필드
테넌트 B: 식품 → 유통기한, 보관온도, 칼로리 필드
```

### 🟡 제한적으로 대응하는 상황들

| 상황 | 현재 한계 | 워크어라운드 |
|-----|---------|------------|
| 복합 조건 (A AND B) | 단일 필드 조건만 지원 | 별도 조건 여러 개 설정 |
| 범위 조건 (값 > 100) | `===` 동등 비교만 지원 | 드롭다운으로 범위 선택 |
| 중첩 BOM | 1단계 BOM만 지원 | 수동 관리 필요 |
| 필드 간 교차 검증 | 지원 안 함 | 커스텀 훅 구현 필요 |

### 🔴 현재 대응 불가능한 예외 상황들

#### 1. 복합 조건 로직
```
❌ "품목유형='제품' AND 가격>100000 이면 승인필드 표시"
❌ "재질이 '금속' OR '플라스틱'이면 가공정보 표시"
```

#### 2. 동적 필드 생성
```
❌ "BOM 라인 수에 따라 동적으로 필드 생성"
❌ "첨부파일 수에 따라 설명 필드 추가"
```

#### 3. 필드 간 연동
```
❌ "단가 × 수량 = 합계 자동계산"
❌ "시작일 < 종료일 교차 검증"
```

#### 4. 권한 기반 필드 제어
```
❌ "관리자만 가격 수정 가능"
❌ "승인 후 품목코드 수정 불가"
```

#### 5. 워크플로우 연동
```
❌ "상태가 '승인대기'면 수정 버튼 비활성화"
❌ "저장 시 자동 결재 요청"
```

### 📊 대응력 요약

| 영역 | 현재 대응률 | 목표 대응률 |
|-----|-----------|-----------|
| 표준 제조업 | 90% | 95% |
| 서비스업 | 70% | 85% |
| 유통/물류 | 75% | 90% |
| 복잡한 승인 워크플로우 | 20% | 70% |
| 동적 계산 필드 | 0% | 60% |

---

## 🎯 확장 설계

### 1. 필드 타입 확장

#### 현재 (6종)
```typescript
type FieldType = 'textbox' | 'number' | 'dropdown' | 'checkbox' | 'date' | 'textarea';
```

#### 확장안 (15종+)
```typescript
type FieldType =
  // 기본 (기존)
  | 'textbox' | 'number' | 'dropdown' | 'checkbox' | 'date' | 'textarea'
  // 파일/미디어
  | 'file'           // 단일 파일 업로드
  | 'files'          // 다중 파일 업로드
  | 'image'          // 이미지 전용 (미리보기)
  | 'signature'      // 서명 캔버스
  // 고급 입력
  | 'richtext'       // WYSIWYG 에디터
  | 'code'           // 코드 에디터 (모나코)
  | 'color'          // 색상 선택기
  | 'rating'         // 별점/평점
  | 'slider'         // 슬라이더
  // 관계/참조
  | 'lookup'         // 다른 테이블 참조 (품목 검색처럼)
  | 'user'           // 사용자 선택
  | 'multiselect'    // 다중 선택 드롭다운
  // 레이아웃
  | 'divider'        // 구분선
  | 'heading'        // 제목 텍스트
  | 'spacer';        // 여백
```

---

### 2. 섹션 디자인 옵션

#### 현재 섹션 구조
```typescript
interface ItemSectionResponse {
  section_name: string;
  section_type: 'BASIC' | 'BOM';
  // 디자인 옵션 없음 ❌
}
```

#### 확장안: 섹션 스타일링
```typescript
interface SectionDesign {
  // 레이아웃
  layout: 'vertical' | 'horizontal' | 'grid';
  columns?: 1 | 2 | 3 | 4;        // 그리드 컬럼 수
  gap?: 'none' | 'sm' | 'md' | 'lg';

  // 접기/펼치기
  collapsible: boolean;
  defaultCollapsed: boolean;

  // 스타일
  variant: 'default' | 'card' | 'bordered' | 'ghost';
  backgroundColor?: string;       // 배경색
  borderColor?: string;           // 테두리색

  // 아이콘/헤더
  icon?: string;                  // Lucide 아이콘명
  headerStyle?: 'default' | 'accent' | 'minimal';

  // 조건부 스타일
  conditionalStyles?: {
    condition: DisplayCondition;
    styles: Partial<SectionDesign>;
  }[];
}
```

#### UI 예시
```
┌─ 📦 기본정보 ─────────────────────────────┐
│ [품명] [규격] [단위]  ← 3컬럼 그리드      │
│ [설명                               ]     │
└───────────────────────────────────────────┘

▼ 📋 상세규격 (접기/펼치기)
  [두께] [길이] [너비] [무게]

┌─ 🔧 BOM 구성 ─────────────────────────────┐ ← 카드 스타일
│ │ 품목 │ 수량 │ 단가 │ 합계 │           │
│ │ ...  │ ...  │ ...  │ ...  │           │
└───────────────────────────────────────────┘
```

---

### 3. 노션 스타일 블록 시스템

#### 블록 타입 추가
```typescript
type BlockType =
  // 콘텐츠 블록
  | 'section'        // 필드 그룹 (기존)
  | 'callout'        // 강조 박스 (아이콘 + 배경색)
  | 'quote'          // 인용구
  | 'toggle'         // 토글 리스트
  // 미디어 블록
  | 'embed'          // 외부 콘텐츠 (YouTube, 지도)
  | 'table'          // 간단한 테이블
  // 데이터 블록
  | 'database'       // 인라인 데이터베이스 (BOM 확장)
  | 'formula'        // 계산 필드 블록
```

#### 블록 속성
```typescript
interface BlockProperties {
  // 공통
  id: string;
  type: BlockType;

  // 노션 스타일 속성
  color?: 'default' | 'gray' | 'brown' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple' | 'pink' | 'red';
  backgroundColor?: string;

  // Callout 전용
  icon?: string | '💡' | '⚠️' | '📌' | '✅';

  // 중첩 가능
  children?: Block[];
}
```

---

### 4. 데이터 구조 변경

#### API 스키마 확장
```typescript
// fields 테이블 확장
interface ItemFieldRequest {
  // 기존 필드들...
  field_type: ExtendedFieldType;  // 확장된 타입

  // 새 필드들
  properties: {
    // 기존
    unit?: string;
    precision?: number;

    // 파일 관련
    accept?: string;              // "image/*", ".pdf,.doc"
    maxSize?: number;             // bytes
    maxFiles?: number;            // 다중 업로드 시

    // 참조 관련
    lookupTable?: string;         // "items", "users", "suppliers"
    lookupDisplayField?: string;  // "item_name"
    lookupValueField?: string;    // "id"
    lookupFilters?: object;       // { item_type: "RM" }

    // 계산 관련
    formula?: string;             // "qty * unit_price"
    dependencies?: string[];      // ["qty", "unit_price"]

    // 레이아웃 관련
    colspan?: number;             // 그리드에서 차지할 컬럼 수
    width?: 'auto' | 'full' | '1/2' | '1/3' | '1/4';
  };
}

// sections 테이블 확장
interface ItemSectionRequest {
  // 기존 필드들...

  // 새 필드들
  design: SectionDesign;
}
```

---

## 🚀 구현 로드맵

### Phase 1: 필수 필드 타입 (2주)
```
✅ file         - 파일 업로드 (현재 하드코딩 → 동적화)
✅ image        - 이미지 업로드 + 미리보기
✅ multiselect  - 다중 선택
✅ lookup       - 참조 필드 (품목 검색 일반화)
✅ divider      - 구분선
✅ heading      - 제목 텍스트
```

### Phase 2: 섹션 디자인 (1주)
```
✅ collapsible  - 접기/펼치기
✅ columns      - 2/3/4 컬럼 레이아웃
✅ variant      - card/bordered/ghost 스타일
✅ icon         - 섹션 아이콘
```

### Phase 3: 고급 필드 (2주)
```
✅ richtext     - WYSIWYG (TipTap 또는 Plate)
✅ signature    - 서명 캔버스
✅ rating       - 별점
✅ slider       - 범위 슬라이더
✅ formula      - 계산 필드
```

### Phase 4: 노션 블록 시스템 (3주)
```
✅ callout      - 강조 박스
✅ toggle       - 토글 리스트
✅ database     - 인라인 데이터베이스
✅ drag-drop    - 블록 순서 변경
✅ slash-cmd    - "/" 명령어로 블록 추가
```

---

## 🔧 조건 로직 강화 (권장 우선순위)

### 현재
```typescript
{ expectedValue: "Product" }
```

### 개선안: AND/OR 연산자 추가
```typescript
{
  operator: "AND",
  conditions: [
    { fieldKey: "item_type", operator: "===", value: "Product" },
    { fieldKey: "price", operator: ">", value: 100000 }
  ]
}
```

### 계산 필드 추가
```typescript
interface ComputedField {
  field_key: string;
  formula: "multiply(qty, unit_price)"; // 또는 expression
  dependencies: ["qty", "unit_price"];
  readonly: true;
}
```

### 필드 권한 모델
```typescript
interface FieldPermission {
  fieldId: number;
  role: 'admin' | 'editor' | 'viewer';
  permissions: ['view', 'edit', 'lock'];
  conditionOnStatus?: string; // "승인완료" 상태면 편집 불가
}
```

### 워크플로우 연동
```typescript
interface WorkflowTrigger {
  event: 'create' | 'update' | 'status_change';
  condition: DisplayCondition; // 기존 조건 재사용
  action: 'notify' | 'request_approval' | 'auto_update';
}
```

---

## 🎨 관리 UI 개선안

### 필드 추가 다이얼로그
```
┌─ 필드 추가 ─────────────────────────────────┐
│                                              │
│  📝 텍스트                                   │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐               │
│  │단문│ │장문│ │숫자│ │이메일│              │
│  └────┘ └────┘ └────┘ └────┘               │
│                                              │
│  📋 선택                                     │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐               │
│  │단일│ │다중│ │체크│ │라디오│              │
│  └────┘ └────┘ └────┘ └────┘               │
│                                              │
│  📎 미디어                                   │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐               │
│  │파일│ │이미지│ │서명│ │첨부│              │
│  └────┘ └────┘ └────┘ └────┘               │
│                                              │
│  🔗 관계                                     │
│  ┌────┐ ┌────┐ ┌────┐                       │
│  │참조│ │사용자│ │링크│                       │
│  └────┘ └────┘ └────┘                       │
│                                              │
│  📐 레이아웃                                 │
│  ┌────┐ ┌────┐ ┌────┐                       │
│  │구분선│ │제목│ │여백│                       │
│  └────┘ └────┘ └────┘                       │
│                                              │
└──────────────────────────────────────────────┘
```

---

## 💡 즉시 적용 가능한 개선 (Quick Wins)

1. **복합 조건 지원**: `display_condition`에 `operator` 필드 추가
2. **자동 저장**: 30초 간격 autosave 구현
3. **필드 잠금**: `readonly` 플래그 + 상태 연동
4. **감사 로그**: 필드 변경 이력 추적

---

## 📚 관련 문서

| 문서 | 위치 |
|------|------|
| 소스 파일 분리 계획 | `[PLAN-2025-11-27] item-form-component-separation.md` |
| 시스템 분석 | `[ANALYSIS] item-master-data-management.md` |
| API 명세 | `[API-2025-11-24] item-management-dynamic-api-spec.md` |
| 프론트엔드 설계 | `[DESIGN-2025-11-24] item-management-dynamic-frontend.md` |
