vexplor/docs/테이블_패널_컴포넌트_기본_너비_설정.md

테이블 패널 컴포넌트 기본 너비 설정

개요

테이블 패널에서 컬럼과 필터를 드래그 드롭으로 추가할 때, 각 웹타입별로 적절한 기본 너비(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. 컬럼 추가

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

버전 히스토리

v1.0.0 (2025-10-14)

• 웹타입별 기본 너비 자동 설정 기능 추가
• getDefaultGridColumns 함수 구현
• addColumn, addFilter, addVirtualFileColumn 함수에 적용