테이블 패널 컴포넌트 기본 너비 설정
개요
테이블 패널에서 컬럼과 필터를 드래그 드롭으로 추가할 때, 각 웹타입별로 적절한 기본 너비(gridColumns)가 자동으로 설정되도록 개선했습니다.
문제점
기존 방식
- 모든 컬럼:
gridColumns: 2 (2/12, 16.67%) 고정
- 모든 필터:
gridColumns: 3 (3/12, 25%) 고정
- 웹타입에 관계없이 동일한 너비 적용
- 긴 텍스트 입력이나 짧은 숫자 입력 모두 같은 크기
문제 사례
❌ text (긴 텍스트) → 2컬럼 (너무 좁음)
❌ textarea (여러 줄) → 2컬럼 (너무 좁음)
❌ checkbox (체크박스) → 2컬럼 (너무 넓음)
해결 방법
웹타입별 기본 너비 함수 추가
// 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 (컬럼 추가)
// Before
const newColumn: DataTableColumn = {
// ...
gridColumns: 2, // ❌ 모든 타입에 2 고정
// ...
};
// After
const newColumn: DataTableColumn = {
// ...
gridColumns: getDefaultGridColumns(widgetType), // ✅ 웹타입별 자동 계산
// ...
};
2. addFilter (필터 추가)
// Before
const newFilter: DataTableFilter = {
// ...
gridColumns: 3, // ❌ 모든 타입에 3 고정
// ...
};
// After
const newFilter: DataTableFilter = {
// ...
gridColumns: getDefaultGridColumns(widgetType), // ✅ 웹타입별 자동 계산
// ...
};
3. addVirtualFileColumn (가상 파일 컬럼 추가)
// 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. 컬럼 추가
- 테이블 선택
- "컬럼 추가" 버튼 클릭 또는 드롭다운에서 컬럼 선택
- 웹타입에 맞는 기본 너비로 자동 생성됨
- 필요시 속성 패널에서 너비 조정 가능
2. 필터 추가
- 테이블 선택
- "필터 추가" 버튼 클릭
- 웹타입에 맞는 기본 너비로 자동 생성됨
- 필요시 컬럼별 너비 조정 가능
3. 가상 파일 컬럼 추가
- "파일 컬럼" 버튼 클릭
- 파일 타입에 맞는 기본 너비(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컬럼 (넘침 → 다음 줄로 이동)
테스트 체크리스트
컬럼 추가 테스트
필터 추가 테스트
가상 파일 컬럼 테스트
수동 조정 테스트
관련 파일
수정된 파일
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줄)
관련 문서
버전 히스토리
v1.0.0 (2025-10-14)
- 웹타입별 기본 너비 자동 설정 기능 추가
getDefaultGridColumns 함수 구현addColumn, addFilter, addVirtualFileColumn 함수에 적용