323 lines
9.6 KiB
Markdown
323 lines
9.6 KiB
Markdown
|
# 테이블 패널 컴포넌트 기본 너비 설정
|
||
|
|
|
||
|
|
## 개요
|
||
|
|
|
||
|
|
테이블 패널에서 컬럼과 필터를 드래그 드롭으로 추가할 때, 각 웹타입별로 적절한 기본 너비(gridColumns)가 자동으로 설정되도록 개선했습니다.
|
||
|
|
|
||
|
|
## 문제점
|
||
|
|
|
||
|
|
### 기존 방식
|
||
|
|
|
||
|
|
- **모든 컬럼**: `gridColumns: 2` (2/12, 16.67%) 고정
|
||
|
|
- **모든 필터**: `gridColumns: 3` (3/12, 25%) 고정
|
||
|
|
- 웹타입에 관계없이 동일한 너비 적용
|
||
|
|
- 긴 텍스트 입력이나 짧은 숫자 입력 모두 같은 크기
|
||
|
|
|
||
|
|
### 문제 사례
|
||
|
|
|
||
|
|
```
|
||
|
|
❌ text (긴 텍스트) → 2컬럼 (너무 좁음)
|
||
|
|
❌ textarea (여러 줄) → 2컬럼 (너무 좁음)
|
||
|
|
❌ checkbox (체크박스) → 2컬럼 (너무 넓음)
|
||
|
|
```
|
||
|
|
|
||
|
|
## 해결 방법
|
||
|
|
|
||
|
|
### 웹타입별 기본 너비 함수 추가
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// DataTableConfigPanel.tsx (891-929줄)
|
||
|
|
const getDefaultGridColumns = (webType: WebType): number => {
|
||
|
|
const widthMap: Record<WebType, number> = {
|
||
|
|
// 텍스트 입력 계열 (넓게)
|
||
|
|
text: 4, // 1/3 (33%)
|
||
|
|
email: 4, // 1/3 (33%)
|
||
|
|
tel: 3, // 1/4 (25%)
|
||
|
|
url: 4, // 1/3 (33%)
|
||
|
|
textarea: 6, // 절반 (50%)
|
||
|
|
|
||
|
|
// 숫자/날짜 입력 (중간)
|
||
|
|
number: 2, // 2/12 (16.67%)
|
||
|
|
decimal: 2, // 2/12 (16.67%)
|
||
|
|
date: 3, // 1/4 (25%)
|
||
|
|
datetime: 3, // 1/4 (25%)
|
||
|
|
time: 2, // 2/12 (16.67%)
|
||
|
|
|
||
|
|
// 선택 입력 (중간)
|
||
|
|
select: 3, // 1/4 (25%)
|
||
|
|
radio: 3, // 1/4 (25%)
|
||
|
|
checkbox: 2, // 2/12 (16.67%)
|
||
|
|
boolean: 2, // 2/12 (16.67%)
|
||
|
|
|
||
|
|
// 코드/참조 (넓게)
|
||
|
|
code: 3, // 1/4 (25%)
|
||
|
|
entity: 4, // 1/3 (33%)
|
||
|
|
|
||
|
|
// 파일/이미지 (넓게)
|
||
|
|
file: 4, // 1/3 (33%)
|
||
|
|
image: 3, // 1/4 (25%)
|
||
|
|
|
||
|
|
// 기타
|
||
|
|
button: 2, // 2/12 (16.67%)
|
||
|
|
label: 2, // 2/12 (16.67%)
|
||
|
|
};
|
||
|
|
|
||
|
|
return widthMap[webType] || 3; // 기본값 3 (1/4, 25%)
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
## 적용된 함수
|
||
|
|
|
||
|
|
### 1. addColumn (컬럼 추가)
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// Before
|
||
|
|
const newColumn: DataTableColumn = {
|
||
|
|
// ...
|
||
|
|
gridColumns: 2, // ❌ 모든 타입에 2 고정
|
||
|
|
// ...
|
||
|
|
};
|
||
|
|
|
||
|
|
// After
|
||
|
|
const newColumn: DataTableColumn = {
|
||
|
|
// ...
|
||
|
|
gridColumns: getDefaultGridColumns(widgetType), // ✅ 웹타입별 자동 계산
|
||
|
|
// ...
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2. addFilter (필터 추가)
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// Before
|
||
|
|
const newFilter: DataTableFilter = {
|
||
|
|
// ...
|
||
|
|
gridColumns: 3, // ❌ 모든 타입에 3 고정
|
||
|
|
// ...
|
||
|
|
};
|
||
|
|
|
||
|
|
// After
|
||
|
|
const newFilter: DataTableFilter = {
|
||
|
|
// ...
|
||
|
|
gridColumns: getDefaultGridColumns(widgetType), // ✅ 웹타입별 자동 계산
|
||
|
|
// ...
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
### 3. addVirtualFileColumn (가상 파일 컬럼 추가)
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// Before
|
||
|
|
const newColumn: DataTableColumn = {
|
||
|
|
// ...
|
||
|
|
widgetType: "file",
|
||
|
|
gridColumns: 2, // ❌ 파일 타입에 2 고정
|
||
|
|
// ...
|
||
|
|
};
|
||
|
|
|
||
|
|
// After
|
||
|
|
const newColumn: DataTableColumn = {
|
||
|
|
// ...
|
||
|
|
widgetType: "file",
|
||
|
|
gridColumns: getDefaultGridColumns("file"), // ✅ 파일 타입 기본값 (4컬럼, 33%)
|
||
|
|
// ...
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
## 웹타입별 기본 너비 상세
|
||
|
|
|
||
|
|
### 텍스트 입력 계열 (넓게 설정)
|
||
|
|
|
||
|
|
| 웹타입 | 컬럼 수 | 퍼센트 | 설명 |
|
||
|
|
| -------- | ------- | ------ | -------------------------- |
|
||
|
|
| text | 4 | 33% | 일반 텍스트 입력 |
|
||
|
|
| email | 4 | 33% | 이메일 주소 (길이 필요) |
|
||
|
|
| tel | 3 | 25% | 전화번호 (중간 길이) |
|
||
|
|
| url | 4 | 33% | URL 주소 (길이 필요) |
|
||
|
|
| textarea | 6 | 50% | 여러 줄 텍스트 (가장 넓게) |
|
||
|
|
|
||
|
|
### 숫자/날짜 입력 (중간 설정)
|
||
|
|
|
||
|
|
| 웹타입 | 컬럼 수 | 퍼센트 | 설명 |
|
||
|
|
| -------- | ------- | ------ | -------------- |
|
||
|
|
| number | 2 | 16.67% | 정수 입력 |
|
||
|
|
| decimal | 2 | 16.67% | 소수 입력 |
|
||
|
|
| date | 3 | 25% | 날짜 선택 |
|
||
|
|
| datetime | 3 | 25% | 날짜+시간 선택 |
|
||
|
|
| time | 2 | 16.67% | 시간 선택 |
|
||
|
|
|
||
|
|
### 선택 입력 (중간 설정)
|
||
|
|
|
||
|
|
| 웹타입 | 컬럼 수 | 퍼센트 | 설명 |
|
||
|
|
| -------- | ------- | ------ | --------------- |
|
||
|
|
| select | 3 | 25% | 드롭다운 선택 |
|
||
|
|
| radio | 3 | 25% | 라디오 버튼 |
|
||
|
|
| checkbox | 2 | 16.67% | 체크박스 (작게) |
|
||
|
|
| boolean | 2 | 16.67% | 참/거짓 (작게) |
|
||
|
|
|
||
|
|
### 코드/참조 (넓게 설정)
|
||
|
|
|
||
|
|
| 웹타입 | 컬럼 수 | 퍼센트 | 설명 |
|
||
|
|
| ------ | ------- | ------ | ----------------------- |
|
||
|
|
| code | 3 | 25% | 코드 선택 |
|
||
|
|
| entity | 4 | 33% | 엔티티 참조 (길이 필요) |
|
||
|
|
|
||
|
|
### 파일/이미지 (넓게 설정)
|
||
|
|
|
||
|
|
| 웹타입 | 컬럼 수 | 퍼센트 | 설명 |
|
||
|
|
| ------ | ------- | ------ | ------------- |
|
||
|
|
| file | 4 | 33% | 파일 업로드 |
|
||
|
|
| image | 3 | 25% | 이미지 업로드 |
|
||
|
|
|
||
|
|
### 기타
|
||
|
|
|
||
|
|
| 웹타입 | 컬럼 수 | 퍼센트 | 설명 |
|
||
|
|
| ---------- | ------- | ------ | ------------------ |
|
||
|
|
| button | 2 | 16.67% | 버튼 |
|
||
|
|
| label | 2 | 16.67% | 라벨 |
|
||
|
|
| **기본값** | 3 | 25% | 정의되지 않은 타입 |
|
||
|
|
|
||
|
|
## 적용 효과
|
||
|
|
|
||
|
|
### Before (기존)
|
||
|
|
|
||
|
|
```
|
||
|
|
[컬럼 추가]
|
||
|
|
- 이름 (text) → 2컬럼 → 너무 좁음 😞
|
||
|
|
- 설명 (textarea) → 2컬럼 → 너무 좁음 😞
|
||
|
|
- 나이 (number) → 2컬럼 → 적절함 😐
|
||
|
|
- 활성화 (checkbox) → 2컬럼 → 너무 넓음 😞
|
||
|
|
|
||
|
|
[필터 추가]
|
||
|
|
- 검색어 (text) → 3컬럼 → 약간 좁음 😐
|
||
|
|
- 날짜 (date) → 3컬럼 → 적절함 😐
|
||
|
|
- 승인 (boolean) → 3컬럼 → 너무 넓음 😞
|
||
|
|
```
|
||
|
|
|
||
|
|
### After (개선)
|
||
|
|
|
||
|
|
```
|
||
|
|
[컬럼 추가]
|
||
|
|
- 이름 (text) → 4컬럼 (33%) → 적절함 ✅
|
||
|
|
- 설명 (textarea) → 6컬럼 (50%) → 충분함 ✅
|
||
|
|
- 나이 (number) → 2컬럼 (16.67%) → 적절함 ✅
|
||
|
|
- 활성화 (checkbox) → 2컬럼 (16.67%) → 적절함 ✅
|
||
|
|
|
||
|
|
[필터 추가]
|
||
|
|
- 검색어 (text) → 4컬럼 (33%) → 충분함 ✅
|
||
|
|
- 날짜 (date) → 3컬럼 (25%) → 적절함 ✅
|
||
|
|
- 승인 (boolean) → 2컬럼 (16.67%) → 적절함 ✅
|
||
|
|
```
|
||
|
|
|
||
|
|
## 사용 방법
|
||
|
|
|
||
|
|
### 1. 컬럼 추가
|
||
|
|
|
||
|
|
1. 테이블 선택
|
||
|
|
2. "컬럼 추가" 버튼 클릭 또는 드롭다운에서 컬럼 선택
|
||
|
|
3. 웹타입에 맞는 기본 너비로 자동 생성됨
|
||
|
|
4. 필요시 속성 패널에서 너비 조정 가능
|
||
|
|
|
||
|
|
### 2. 필터 추가
|
||
|
|
|
||
|
|
1. 테이블 선택
|
||
|
|
2. "필터 추가" 버튼 클릭
|
||
|
|
3. 웹타입에 맞는 기본 너비로 자동 생성됨
|
||
|
|
4. 필요시 컬럼별 너비 조정 가능
|
||
|
|
|
||
|
|
### 3. 가상 파일 컬럼 추가
|
||
|
|
|
||
|
|
1. "파일 컬럼" 버튼 클릭
|
||
|
|
2. 파일 타입에 맞는 기본 너비(4컬럼, 33%)로 생성됨
|
||
|
|
|
||
|
|
### 4. 너비 조정 (수동)
|
||
|
|
|
||
|
|
**컬럼 너비 조정**:
|
||
|
|
|
||
|
|
- 컬럼 설정 탭에서 각 컬럼별 "컬럼 너비" 드롭다운 선택
|
||
|
|
- 1/12 (8.33%)부터 12/12 (100%)까지 선택 가능
|
||
|
|
- 기본값은 웹타입에 따라 자동 설정됨
|
||
|
|
|
||
|
|
**필터 너비 조정**:
|
||
|
|
|
||
|
|
- 필터 설정 탭에서 각 필터별 "필터 너비" 드롭다운 선택
|
||
|
|
- 1/12 (8.33%)부터 12/12 (100%)까지 선택 가능
|
||
|
|
- 기본값은 웹타입에 따라 자동 설정됨
|
||
|
|
|
||
|
|
## 주의 사항
|
||
|
|
|
||
|
|
### 기존 데이터
|
||
|
|
|
||
|
|
- **영향 없음**: 이미 생성된 컬럼/필터는 변경되지 않음
|
||
|
|
- **새로 추가되는 항목만** 새로운 기본값 적용
|
||
|
|
|
||
|
|
### 커스터마이징
|
||
|
|
|
||
|
|
- 기본값이 맞지 않으면 수동으로 조정 가능
|
||
|
|
- 자주 사용하는 너비가 있다면 `getDefaultGridColumns` 함수 수정 가능
|
||
|
|
|
||
|
|
### 레이아웃 고려
|
||
|
|
|
||
|
|
- 한 행에 총 12컬럼까지 배치 가능
|
||
|
|
- 예: 4컬럼 + 4컬럼 + 4컬럼 = 12컬럼 (딱 맞음)
|
||
|
|
- 예: 4컬럼 + 4컬럼 + 6컬럼 = 14컬럼 (넘침 → 다음 줄로 이동)
|
||
|
|
|
||
|
|
## 테스트 체크리스트
|
||
|
|
|
||
|
|
### 컬럼 추가 테스트
|
||
|
|
|
||
|
|
- [ ] text 타입 컬럼 추가 → 4컬럼(33%) 확인
|
||
|
|
- [ ] number 타입 컬럼 추가 → 2컬럼(16.67%) 확인
|
||
|
|
- [ ] textarea 타입 컬럼 추가 → 6컬럼(50%) 확인
|
||
|
|
- [ ] select 타입 컬럼 추가 → 3컬럼(25%) 확인
|
||
|
|
- [ ] checkbox 타입 컬럼 추가 → 2컬럼(16.67%) 확인
|
||
|
|
|
||
|
|
### 필터 추가 테스트
|
||
|
|
|
||
|
|
- [ ] text 타입 필터 추가 → 4컬럼(33%) 확인
|
||
|
|
- [ ] date 타입 필터 추가 → 3컬럼(25%) 확인
|
||
|
|
- [ ] boolean 타입 필터 추가 → 2컬럼(16.67%) 확인
|
||
|
|
|
||
|
|
### 가상 파일 컬럼 테스트
|
||
|
|
|
||
|
|
- [ ] 파일 컬럼 추가 → 4컬럼(33%) 확인
|
||
|
|
|
||
|
|
### 수동 조정 테스트
|
||
|
|
|
||
|
|
- [ ] 생성 후 너비 수동 변경 가능한지 확인
|
||
|
|
- [ ] 변경된 너비가 저장/로드 시 유지되는지 확인
|
||
|
|
|
||
|
|
## 관련 파일
|
||
|
|
|
||
|
|
### 수정된 파일
|
||
|
|
|
||
|
|
#### 1. `/frontend/components/screen/panels/DataTableConfigPanel.tsx`
|
||
|
|
|
||
|
|
- `getDefaultGridColumns` 함수 추가 (891-929줄)
|
||
|
|
- `addColumn` 함수 수정 (954줄) - 웹타입별 기본 너비 자동 계산
|
||
|
|
- `addFilter` 함수 수정 (781줄) - 웹타입별 기본 너비 자동 계산
|
||
|
|
- `addVirtualFileColumn` 함수 수정 (1055줄) - 파일 타입 기본 너비 적용
|
||
|
|
- 컬럼 설정 UI 개선 (1652줄) - "그리드 컬럼" → "컬럼 너비" (1/12 ~ 12/12)
|
||
|
|
- 필터 설정 UI 개선 (2131줄) - "그리드 컬럼" → "필터 너비" (1/12 ~ 12/12)
|
||
|
|
|
||
|
|
#### 2. `/frontend/components/screen/ScreenDesigner.tsx`
|
||
|
|
|
||
|
|
- `getDefaultGridColumns` 함수 추가 (1946-1984줄) - 드래그 드롭 컴포넌트용
|
||
|
|
- `getDefaultGridColumnsForTemplate` 함수 추가 (1429-1438줄) - 템플릿 컴포넌트용
|
||
|
|
- 템플릿 컴포넌트 생성 시 기본 너비 적용 (1514줄)
|
||
|
|
- 폼 컨테이너 내 컴포넌트 생성 시 기본 너비 적용 (2151줄)
|
||
|
|
- 드래그 드롭 컴포넌트 생성 시 기본 너비 적용 (2194줄)
|
||
|
|
|
||
|
|
### 관련 문서
|
||
|
|
|
||
|
|
- [컴포넌트*기본*너비*설정*가이드.md](./컴포넌트_기본_너비_설정_가이드.md)
|
||
|
|
- [그리드*컬럼수*옵션\_통합.md](./그리드_컬럼수_옵션_통합.md)
|
||
|
|
|
||
|
|
## 버전 히스토리
|
||
|
|
|
||
|
|
### v1.0.0 (2025-10-14)
|
||
|
|
|
||
|
|
- 웹타입별 기본 너비 자동 설정 기능 추가
|
||
|
|
- `getDefaultGridColumns` 함수 구현
|
||
|
|
- `addColumn`, `addFilter`, `addVirtualFileColumn` 함수에 적용
|