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

## 개요

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