kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ERP-node/docs/input-type-detail-type-syst...

9.7 KiB
Raw Blame History

입력 타입과 세부 타입 시스템 가이드

📋 개요

화면 관리 시스템에서 사용자가 입력 타입과 세부 타입을 2단계로 선택할 수 있는 시스템입니다.

구조

  1. 입력 타입 (Input Type): 테이블 타입 관리에서 정의한 8개 핵심 타입
  2. 세부 타입 (Detail Type): 입력 타입의 구체적인 구현 방식 (웹타입)
입력 타입 (PropertiesPanel에서 선택)
    ↓
세부 타입 (DetailSettingsPanel에서 선택)
    ↓
세부 설정 (DetailSettingsPanel에서 설정)

🎯 8개 핵심 입력 타입과 세부 타입

1. 텍스트 (text)

사용 가능한 세부 타입:

  • text - 일반 텍스트 입력
  • email - 이메일 주소 입력
  • tel - 전화번호 입력
  • url - 웹사이트 주소 입력
  • textarea - 여러 줄 텍스트 입력
  • password - 비밀번호 입력 (마스킹)

2. 숫자 (number)

사용 가능한 세부 타입:

  • number - 정수 숫자 입력
  • decimal - 소수점 포함 숫자 입력

3. 날짜 (date)

사용 가능한 세부 타입:

  • date - 날짜 선택 (YYYY-MM-DD)
  • datetime - 날짜와 시간 선택
  • time - 시간 선택 (HH:mm)

4. 코드 (code)

세부 타입:

  • code - 공통 코드 선택 (세부 타입 고정)
  • 코드 카테고리는 상세 설정에서 선택

5. 엔티티 (entity)

세부 타입:

  • entity - 다른 테이블 참조 (세부 타입 고정)
  • 참조 테이블은 상세 설정에서 선택

6. 선택박스 (select)

사용 가능한 세부 타입:

  • select - 기본 드롭다운 선택
  • dropdown - 검색 기능이 있는 드롭다운

7. 체크박스 (checkbox)

사용 가능한 세부 타입:

  • checkbox - 단일 체크박스
  • boolean - On/Off 스위치

8. 라디오버튼 (radio)

세부 타입:

  • radio - 라디오 버튼 그룹 (세부 타입 고정)

🔧 사용 방법

1. PropertiesPanel - 입력 타입 선택

위젯 컴포넌트를 선택하면 속성 편집 패널에서 입력 타입을 선택할 수 있습니다.

// 입력 타입 선택
<select value={getBaseInputType(widget.widgetType)}>
  <option value="text">텍스트</option>
  <option value="number">숫자</option>
  <option value="date">날짜</option>
  // ...
</select>

동작:

  • 입력 타입을 선택하면 해당 타입의 기본 세부 타입이 자동으로 설정됩니다
  • 예: text 입력 타입 선택 → text 세부 타입 자동 설정

2. DetailSettingsPanel - 세부 타입 선택

상세 설정 패널에서 선택한 입력 타입의 세부 타입을 선택할 수 있습니다.

// 세부 타입 선택
<Select value={widget.widgetType}>
  <SelectItem value="text">일반 텍스트</SelectItem>
  <SelectItem value="email">이메일</SelectItem>
  <SelectItem value="tel">전화번호</SelectItem>
  // ...
</Select>

동작:

  • 입력 타입에 해당하는 세부 타입만 표시됩니다
  • 세부 타입을 변경하면 widgetType 속성이 업데이트됩니다

3. DetailSettingsPanel - 세부 설정

세부 타입을 선택한 후, 해당 타입의 상세 설정을 할 수 있습니다.

예:

  • 날짜 (date): 날짜 형식, 최소/최대 날짜 등
  • 숫자 (number): 최소/최대값, 소수점 자리수 등
  • 코드 (code): 코드 카테고리 선택
  • 엔티티 (entity): 참조 테이블, 표시 컬럼 선택

📁 파일 구조

새로 추가된 파일

frontend/types/input-type-mapping.ts

입력 타입과 세부 타입 매핑 정의

// 8개 핵심 입력 타입
export type BaseInputType = "text" | "number" | "date" | ...;

// 입력 타입별 세부 타입 매핑
export const INPUT_TYPE_DETAIL_TYPES: Record<BaseInputType, DetailTypeOption[]>;

// 유틸리티 함수들
export function getBaseInputType(webType: WebType): BaseInputType;
export function getDetailTypes(baseInputType: BaseInputType): DetailTypeOption[];
export function getDefaultDetailType(baseInputType: BaseInputType): WebType;

수정된 파일

frontend/components/screen/panels/PropertiesPanel.tsx

  • 입력 타입 선택 UI 추가
  • 웹타입 선택 → 입력 타입 선택으로 변경

frontend/components/screen/panels/DetailSettingsPanel.tsx

  • 세부 타입 선택 UI 추가
  • 입력 타입 표시
  • 세부 타입 목록 동적 생성

🎨 UI 레이아웃

┌─────────────────────────────────────────────────────────────┐
│ 속성 편집 (PropertiesPanel)                                  │
├─────────────────────────────────────────────────────────────┤
│ 입력 타입: [텍스트 ▼]  ← 8개 중 선택                        │
│            세부 타입은 "상세 설정"에서 선택하세요            │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ 상세 설정 (DetailSettingsPanel)                              │
├─────────────────────────────────────────────────────────────┤
│ 입력 타입: [text]                                            │
├─────────────────────────────────────────────────────────────┤
│ 세부 타입 선택:                                              │
│ [일반 텍스트 ▼]  ← 입력 타입에 따라 동적으로 변경           │
│   - 일반 텍스트                                              │
│   - 이메일                                                   │
│   - 전화번호                                                 │
│   - URL                                                      │
│   - 여러 줄 텍스트                                           │
│   - 비밀번호                                                 │
├─────────────────────────────────────────────────────────────┤
│ [세부 설정 영역]                                             │
│ (선택한 세부 타입에 맞는 설정 패널)                          │
└─────────────────────────────────────────────────────────────┘

🔄 데이터 흐름

1. 새 컴포넌트 생성 시

테이블 컬럼 드래그
  → 컬럼의 dataType 분석
  → 입력 타입 자동 선택 (text, number, date 등)
  → 기본 세부 타입 자동 설정 (text, number, date 등)

2. 입력 타입 변경 시

PropertiesPanel에서 입력 타입 선택
  → 해당 입력 타입의 기본 세부 타입 설정
  → DetailSettingsPanel 세부 타입 목록 업데이트

3. 세부 타입 변경 시

DetailSettingsPanel에서 세부 타입 선택
  → widgetType 업데이트
  → 해당 세부 타입의 설정 패널 표시

🚀 확장 가능성

세부 타입 추가

새로운 세부 타입을 추가하려면:

  1. frontend/types/input-type-mapping.ts의 INPUT_TYPE_DETAIL_TYPES에 추가
  2. 해당 세부 타입의 설정 패널 구현
  3. DB의 web_types 테이블에 레코드 추가

입력 타입 추가

새로운 입력 타입을 추가하려면:

  1. BaseInputType 타입에 추가
  2. BASE_INPUT_TYPE_OPTIONS에 옵션 추가
  3. INPUT_TYPE_DETAIL_TYPES에 세부 타입 목록 정의
  4. 테이블 타입 관리 시스템 업데이트

✅ 체크리스트

  • 8개 핵심 입력 타입 정의
  • 입력 타입별 세부 타입 매핑
  • PropertiesPanel에 입력 타입 선택 UI 추가
  • DetailSettingsPanel에 세부 타입 선택 UI 추가
  • 입력 타입 변경 시 기본 세부 타입 자동 설정
  • 세부 타입 변경 시 widgetType 업데이트
  • 타입 안전성 보장 (TypeScript)

📝 사용 예시

텍스트 입력 필드 생성

  1. PropertiesPanel에서 입력 타입을 "텍스트"로 선택
  2. DetailSettingsPanel로 이동
  3. 세부 타입에서 "이메일" 선택
  4. 이메일 형식 검증 등 세부 설정 입력

날짜 입력 필드 생성

  1. PropertiesPanel에서 입력 타입을 "날짜"로 선택
  2. DetailSettingsPanel로 이동
  3. 세부 타입에서 "날짜+시간" 선택
  4. 날짜 형식, 최소/최대 날짜 등 설정

🐛 문제 해결

세부 타입이 표시되지 않음

  • 입력 타입이 올바르게 설정되었는지 확인
  • getDetailTypes() 함수가 올바른 값을 반환하는지 확인

입력 타입 변경 시 세부 타입이 초기화되지 않음

  • getDefaultDetailType() 함수 확인
  • onUpdateProperty("widgetType", ...) 호출 확인

📚 참고 자료