kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ERP-node/docs/컴포넌트_분석_및_통합_계획.md

10 KiB
Raw Permalink Blame History

입력 컴포넌트 분석 및 통합 계획

작성일: 2024-12-23 상태: 1차 정리 완료

분석 대상 컴포넌트 목록

번호 컴포넌트 ID 한글명 패널 표시 통합 대상
1 rack-structure 렉 구조 설정 숨김 UnifiedBiz (rack)
2 mail-recipient-selector 메일 수신자 선택 숨김 DataFlow 전용
3 repeater-field-group 반복 필드 그룹 숨김 현재 사용 안함
4 universal-form-modal 범용 폼 모달 유지 독립 유지
5 selected-items-detail-input 선택 항목 상세입력 유지 독립 유지
6 entity-search-input 엔티티 검색 입력 숨김 UnifiedSelect (entity 모드)
7 image-widget 이미지 위젯 숨김 UnifiedMedia (image)
8 autocomplete-search-input 자동완성 검색 입력 숨김 UnifiedSelect (autocomplete 모드)
9 location-swap-selector 출발지/도착지 선택 유지 독립 유지
10 file-upload 파일 업로드 숨김 UnifiedMedia (file)

1. 렉 구조 설정 (rack-structure)

현재 구현

  • 위치: frontend/lib/registry/components/rack-structure/
  • 주요 기능:
    • 창고 렉 위치를 열 범위와 단 수로 일괄 생성
    • 조건별 설정 (렉 라인, 열 범위, 단 수)
    • 미리보기 및 통계 표시
    • 템플릿 저장/불러오기
  • 카테고리: INPUT
  • 크기: 1200 x 800

분석

  • WMS(창고관리) 전용 특수 컴포넌트
  • 복잡한 비즈니스 로직 포함 (위치 코드 자동 생성)
  • formData 컨텍스트 의존 (창고ID, 층, 구역 등)

통합 방안

  • 결정: UnifiedBiz 컴포넌트의 rack 비즈니스 타입으로 통합
  • 이유: 비즈니스 특화 컴포넌트이므로 UnifiedBiz가 적합
  • 작업:
    • UnifiedBiz에서 bizType="rack" 선택 시 RackStructureComponent 렌더링
    • 설정 패널 통합

2. 메일 수신자 선택 (mail-recipient-selector)

현재 구현

  • 위치: frontend/lib/registry/components/mail-recipient-selector/
  • 주요 기능:
    • 내부 인원 선택 (user_info 테이블)
    • 외부 이메일 직접 입력
    • 수신자(To) / 참조(CC) 구분
  • 카테고리: INPUT
  • 크기: 400 x 200

분석

  • 메일 발송 워크플로우 전용 컴포넌트
  • 내부 사용자 검색 + 외부 이메일 입력 복합 기능
  • DataFlow 노드에서 참조됨 (EmailActionProperties)

통합 방안

  • 결정: 독립 유지
  • 이유:
    • 메일 시스템 전용 복합 기능
    • 다른 컴포넌트와 기능이 겹치지 않음
    • DataFlow와의 긴밀한 연동

3. 반복 필드 그룹 (repeater-field-group)

현재 구현

  • 위치: frontend/components/webtypes/RepeaterInput.tsx, frontend/components/webtypes/config/RepeaterConfigPanel.tsx
  • 주요 기능:
    • 동적 항목 추가/제거
    • 다양한 필드 타입 지원 (text, number, select, category, calculated 등)
    • 계산식 필드 (합계, 평균 등)
    • 레이아웃 옵션 (grid, table, card)
    • 드래그앤드롭 순서 변경
  • 카테고리: INPUT
  • 크기: 화면 설정에 따라 동적

분석

  • 매우 복잡한 컴포넌트 (943줄)
  • 견적서, 주문서 등 반복 입력이 필요한 화면에서 핵심 역할
  • 카테고리 매핑, 계산식, 반응형 지원

통합 방안

  • 결정: 독립 유지
  • 이유:
    • 너무 복잡하고 기능이 방대함
    • 이미 잘 동작하고 있음
    • 통합 시 오히려 유지보수 어려워짐

4. 범용 폼 모달 (universal-form-modal)

현재 구현

  • 위치: frontend/lib/registry/components/universal-form-modal/
  • 주요 기능:
    • 섹션 기반 폼 레이아웃
    • 반복 섹션 (겸직 등록 등)
    • 채번규칙 연동
    • 다중 행 저장
    • 외부 데이터 수신
  • 카테고리: INPUT
  • 크기: 800 x 600

분석

  • ScreenModal, SaveModal과 기능 중복 가능성
  • 섹션 기반 레이아웃이 핵심 차별점
  • 복잡한 입력 시나리오 지원

통합 방안

  • 결정: UnifiedGroup의 formModal 타입으로 통합 검토
  • 현실적 접근:
    • 당장 통합보다는 ScreenModal 시스템과의 차별화 유지
    • 향후 섹션 기반 레이아웃 기능을 ScreenModal에 반영

5. 선택 항목 상세입력 (selected-items-detail-input)

현재 구현

  • 위치: frontend/lib/registry/components/selected-items-detail-input/
  • 주요 기능:
    • 선택된 데이터 목록 표시
    • 각 항목별 추가 필드 입력
    • 레이아웃 옵션 (grid, table)
  • 카테고리: INPUT
  • 크기: 800 x 400

분석

  • RepeatScreenModal과 연계되는 컴포넌트
  • 선택된 항목에 대한 상세 정보 일괄 입력 용도
  • 특수한 사용 사례 (품목 선택 후 수량 입력 등)

통합 방안

  • 결정: 독립 유지
  • 이유:
    • 특수한 워크플로우 지원
    • 다른 컴포넌트와 기능 중복 없음

6. 엔티티 검색 입력 (entity-search-input)

현재 구현

  • 위치: frontend/lib/registry/components/entity-search-input/
  • 주요 기능:
    • 콤보박스 모드 (inline)
    • 모달 검색 모드
    • 추가 필드 표시 옵션
  • 카테고리: INPUT
  • 크기: 300 x 40
  • webType: entity

분석

  • UnifiedSelect의 entity 모드와 기능 중복
  • 모달 검색 기능이 차별점
  • EntityWidget과도 유사

통합 방안

  • 결정: UnifiedSelect entity 모드로 통합
  • 작업:
    • UnifiedSelect에 searchMode: "modal" | "inline" | "autocomplete" 옵션 추가
    • 모달 검색 UI 통합
    • 기존 entity-search-input은 deprecated 처리

7. 이미지 위젯 (image-widget)

현재 구현

  • 위치: frontend/lib/registry/components/image-widget/
  • 주요 기능:
    • 이미지 업로드
    • 미리보기
    • 드래그앤드롭 지원
  • 카테고리: INPUT
  • 크기: 200 x 200
  • webType: image

분석

  • UnifiedMedia의 ImageUploader와 기능 동일
  • 이미 ImageWidget 컴포넌트 재사용 중

통합 방안

  • 결정: UnifiedMedia image 타입으로 통합 완료
  • 상태: 이미 UnifiedMedia.ImageUploader로 구현됨
  • 작업:
    • 컴포넌트 패널에서 image-widget 제거
    • UnifiedMedia 사용 권장

8. 자동완성 검색 입력 (autocomplete-search-input)

현재 구현

  • 위치: frontend/lib/registry/components/autocomplete-search-input/
  • 주요 기능:
    • 타이핑 시 드롭다운 검색
    • 엔티티 테이블 연동
    • 추가 필드 표시
  • 카테고리: INPUT
  • 크기: 300 x 40
  • webType: entity

분석

  • entity-search-input과 유사하지만 UI 방식이 다름
  • Command/Popover 기반 자동완성

통합 방안

  • 결정: UnifiedSelect entity 모드의 autocomplete 옵션으로 통합
  • 작업:
    • UnifiedSelect에서 searchMode: "autocomplete" 옵션 추가
    • 자동완성 검색 로직 통합

9. 출발지/도착지 선택 (location-swap-selector)

현재 구현

  • 위치: frontend/lib/registry/components/location-swap-selector/
  • 주요 기능:
    • 출발지/도착지 두 개 필드 동시 관리
    • 스왑 버튼으로 교환
    • 모바일 최적화 UI
    • 다양한 데이터 소스 (table, code, static)
  • 카테고리: INPUT
  • 크기: 400 x 100

분석

  • 물류/운송 시스템 전용 컴포넌트
  • 두 개의 Select를 묶은 복합 컴포넌트
  • 스왑 기능이 핵심

통합 방안

  • 결정: 독립 유지
  • 이유:
    • 특수 용도 (물류 시스템)
    • 다른 컴포넌트와 기능 중복 없음
    • 복합 필드 관리 (출발지 + 도착지)

10. 파일 업로드 (file-upload)

현재 구현

  • 위치: frontend/lib/registry/components/file-upload/
  • 주요 기능:
    • 파일 선택/업로드
    • 드래그앤드롭
    • 업로드 진행률 표시
    • 파일 목록 관리
  • 카테고리: INPUT
  • 크기: 350 x 240
  • webType: file

분석

  • UnifiedMedia의 FileUploader와 기능 동일
  • attach_file_info 테이블 연동

통합 방안

  • 결정: UnifiedMedia file 타입으로 통합
  • 상태: 이미 UnifiedMedia.FileUploader로 구현됨
  • 작업:
    • 컴포넌트 패널에서 file-upload 제거
    • UnifiedMedia 사용 권장

통합 우선순위 및 작업 계획

Phase 1: 즉시 통합 가능 (작업 최소)

컴포넌트 통합 대상 예상 작업량 비고
image-widget UnifiedMedia (image) 1일 이미 구현됨, 패널에서 숨기기만
file-upload UnifiedMedia (file) 1일 이미 구현됨, 패널에서 숨기기만

Phase 2: 기능 통합 필요 (중간 작업)

컴포넌트 통합 대상 예상 작업량 비고
entity-search-input UnifiedSelect (entity) 3일 모달 검색 모드 추가
autocomplete-search-input UnifiedSelect (entity) 2일 autocomplete 모드 추가
rack-structure UnifiedBiz (rack) 2일 비즈니스 타입 연결

Phase 3: 독립 유지 (작업 없음)

컴포넌트 이유
mail-recipient-selector 메일 시스템 전용
repeater-field-group 너무 복잡, 잘 동작 중
universal-form-modal ScreenModal과 차별화 필요
selected-items-detail-input 특수 워크플로우
location-swap-selector 물류 시스템 전용

결론

즉시 실행 가능한 작업

  1. ComponentsPanel 정리:

    • image-widget, file-upload 숨김 처리 (UnifiedMedia 사용)
    • 중복 컴포넌트 정리

  2. UnifiedBiz 연결:

    • bizType: "rack" 선택 시 RackStructureComponent 렌더링 연결

향후 계획

  1. UnifiedSelect에 entity 검색 모드 통합
  2. UnifiedMedia 설정 패널 강화
  3. 독립 유지 컴포넌트들의 문서화

컴포넌트 패널 정리 제안

숨길 컴포넌트 (Unified로 대체됨)

  • image-widget → UnifiedMedia 사용
  • file-upload → UnifiedMedia 사용
  • entity-search-input → UnifiedSelect (entity 모드) 사용 예정
  • autocomplete-search-input → UnifiedSelect (autocomplete 모드) 사용 예정

유지할 컴포넌트 (독립 기능)

  • rack-structure - WMS 전용 (UnifiedBiz 연결 예정)
  • mail-recipient-selector - 메일 시스템 전용
  • repeater-field-group - 반복 입력 전용
  • universal-form-modal - 복잡한 폼 전용
  • selected-items-detail-input - 상세 입력 전용
  • location-swap-selector - 물류 시스템 전용