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

## 📋 개요

화면 관리 시스템에서 사용자가 **입력 타입**과 **세부 타입**을 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 - 입력 타입 선택

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

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

**동작:**

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

### 2. DetailSettingsPanel - 세부 타입 선택

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

```typescript
// 세부 타입 선택
<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`

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

```typescript
// 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. 테이블 타입 관리 시스템 업데이트

---

## ✅ 체크리스트

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

---

## 📝 사용 예시

### 텍스트 입력 필드 생성

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

### 날짜 입력 필드 생성

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

---

## 🐛 문제 해결

### 세부 타입이 표시되지 않음

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

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

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

---

## 📚 참고 자료

- [테이블 타입 관리 개선 계획서](../테이블_타입_관리_개선_계획서.md)
- [테이블 타입 관리 개선 사용 가이드](../테이블_타입_관리_개선_사용_가이드.md)
- [화면관리 시스템 개요](./screen-management-system.md)