컬럼 세부 타입 설정
This commit is contained in:
kjs
304
docs/input-type-detail-type-system.md
Normal file
304
docs/input-type-detail-type-system.md
Normal file
@@ -0,0 +1,304 @@
|
||||
# 입력 타입과 세부 타입 시스템 가이드
|
||||
|
||||
## 📋 개요
|
||||
|
||||
화면 관리 시스템에서 사용자가 **입력 타입**과 **세부 타입**을 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)
|
||||
Reference in New Issue
Block a user