305 lines
9.7 KiB
Markdown
305 lines
9.7 KiB
Markdown
|
# 입력 타입과 세부 타입 시스템 가이드
|
||
|
|
|
||
|
|
## 📋 개요
|
||
|
|
|
||
|
|
화면 관리 시스템에서 사용자가 **입력 타입**과 **세부 타입**을 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)
|