sam-react-prod/claudedocs/item-master/[DESIGN-2025-12-12] item-master-form-builder-roadmap.md

품목기준관리 → 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종)

type FieldType = 'textbox' | 'number' | 'dropdown' | 'checkbox' | 'date' | 'textarea';

확장안 (15종+)

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. 섹션 디자인 옵션

현재 섹션 구조

interface ItemSectionResponse {
  section_name: string;
  section_type: 'BASIC' | 'BOM';
  // 디자인 옵션 없음 ❌
}

확장안: 섹션 스타일링

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. 노션 스타일 블록 시스템

블록 타입 추가

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

블록 속성

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 스키마 확장

// 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    - "/" 명령어로 블록 추가

---

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

현재

{ expectedValue: "Product" }

개선안: AND/OR 연산자 추가

{
  operator: "AND",
  conditions: [
    { fieldKey: "item_type", operator: "===", value: "Product" },
    { fieldKey: "price", operator: ">", value: 100000 }
  ]
}

계산 필드 추가

interface ComputedField {
  field_key: string;
  formula: "multiply(qty, unit_price)"; // 또는 expression
  dependencies: ["qty", "unit_price"];
  readonly: true;
}

필드 권한 모델

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

워크플로우 연동

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