# 컴포넌트 기본 너비 설정 가이드

## 개요

화면 관리에서 각 컴포넌트 타입별로 적절한 기본 너비를 설정하고, 컴포넌트가 지정된 너비를 벗어나지 않도록 스타일을 적용했습니다.

## 변경 사항

### 1. 인풋 컴포넌트 기본 너비 조정

각 인풋 타입별로 적절한 기본 크기를 설정했습니다:

#### 텍스트 입력 계열

- **텍스트 입력** (`text-input`): 300px × 40px
- **숫자 입력** (`number-input`): 200px × 40px
- **텍스트 영역** (`textarea-basic`): 400px × 100px

#### 선택 입력 계열

- **선택상자** (`select-basic`): 250px × 40px
- **날짜 선택** (`date-input`): 220px × 40px
- **체크박스** (`checkbox-basic`): 150px × 32px
- **라디오 버튼** (`radio-basic`): 150px × 32px
- **슬라이더** (`slider-basic`): 250px × 40px
- **토글 스위치** (`toggle-switch`): 180px × 40px

#### 파일 및 기타

- **파일 업로드** (`file-upload`): 350px × 40px

#### 표시 컴포넌트

- **기본 버튼** (`button-primary`): 120px × 40px
- **텍스트 표시** (`text-display`): 150px × 24px
- **이미지 표시** (`image-display`): 200px × 200px
- **구분선** (`divider-line`): 400px × 2px
- **아코디언** (`accordion-basic`): 400px × 200px

#### 데이터 컴포넌트

- **테이블 리스트** (`table-list`): 120px × 600px
- **카드 표시** (`card-display`): 기존 유지

### 2. 공통 스타일 적용

`/frontend/lib/registry/components/common/inputStyles.ts` 파일의 모든 스타일 클래스에 다음을 추가:

- `max-w-full`: 최대 너비를 부모 컨테이너로 제한
- `overflow-hidden`: 내용이 넘칠 경우 숨김 처리

적용된 클래스:

- `INPUT_CLASSES.base`
- `INPUT_CLASSES.container`
- `INPUT_CLASSES.textarea`
- `INPUT_CLASSES.select`
- `INPUT_CLASSES.flexContainer`

### 3. 개별 컴포넌트 스타일 적용

#### TextInputComponent

- 컨테이너 div: `max-w-full overflow-hidden` 추가
- input 요소: `max-w-full` 추가
- textarea 요소: `max-w-full` 추가

#### RealtimePreviewDynamic

- 컴포넌트 렌더링 컨테이너: `max-w-full overflow-hidden` 추가

## 적용 효과

### 1. 일관된 초기 크기

- 컴포넌트 드래그 앤 드롭 시 각 타입별로 적절한 기본 크기로 생성됨
- 사용자가 별도로 크기를 조정할 필요 없이 바로 사용 가능

### 2. 그리드 시스템과의 통합

- **그리드 활성화 시**: `defaultSize.width`를 기준으로 적절한 그리드 컬럼 수 자동 계산
  - 예: 300px 너비 → 약 3-4 컬럼 (그리드 설정에 따라 다름)
  - 계산된 컬럼 수에 맞춰 정확한 너비로 재조정
- **그리드 비활성화 시**: `defaultSize`의 픽셀 값을 그대로 사용
- 일관된 사용자 경험 제공

### 3. 너비 제한

- 컴포넌트가 설정된 너비를 벗어나지 않음
- 부모 컨테이너 크기에 맞춰 자동으로 조정됨
- 레이아웃 깨짐 방지

### 4. 반응형 대응

- `max-w-full` 속성으로 부모 컨테이너에 맞춰 자동 축소
- `overflow-hidden`으로 내용 넘침 방지

## 사용 방법

### 새 컴포넌트 생성 시

1. 컴포넌트 팔레트에서 원하는 타입 선택
2. 캔버스에 드래그 앤 드롭
3. 자동으로 적절한 기본 크기로 생성됨

### 크기 조정

1. 컴포넌트 선택
2. 속성 패널에서 "컴포넌트 너비" 선택
3. 드롭다운에서 원하는 너비 선택 (1/12 ~ 12/12)
4. 또는 직접 픽셀 값 입력

## 주의 사항

### 기존 화면에 미치는 영향

- 이미 생성된 컴포넌트는 영향 받지 않음
- 새로 생성되는 컴포넌트만 새로운 기본값 적용

### 스타일 우선순위

1. 인라인 style 속성
2. componentConfig에서 설정한 크기
3. defaultSize (새로 적용된 기본값)

### 커스터마이징

- 각 컴포넌트의 `index.ts` 파일에서 `defaultSize` 수정 가능
- 프로젝트 요구사항에 맞춰 조정 가능

## 테스트 방법

### 기본 크기 테스트

```
1. 화면 디자이너 열기
2. 각 인풋 타입 컴포넌트를 캔버스에 드롭
3. 기본 크기가 적절한지 확인
4. 여러 컴포넌트를 나란히 배치하여 일관성 확인
```

### 너비 제한 테스트

```
1. 컴포넌트 생성 후 선택
2. 속성 패널에서 너비를 작은 값으로 설정 (예: 100px)
3. 컴포넌트 내부의 input이 너비를 벗어나지 않는지 확인
4. 긴 텍스트 입력 시 overflow 처리 확인
```

### 반응형 테스트

```
1. 레이아웃 컨테이너 내부에 컴포넌트 배치
2. 레이아웃 크기를 조정하여 컴포넌트가 적절히 축소되는지 확인
3. 다양한 화면 해상도에서 테스트
```

## 관련 파일

### 컴포넌트 정의 파일

- `/frontend/lib/registry/components/text-input/index.ts`
- `/frontend/lib/registry/components/number-input/index.ts`
- `/frontend/lib/registry/components/select-basic/index.ts`
- `/frontend/lib/registry/components/date-input/index.ts`
- `/frontend/lib/registry/components/textarea-basic/index.ts`
- `/frontend/lib/registry/components/checkbox-basic/index.ts`
- `/frontend/lib/registry/components/radio-basic/index.ts`
- `/frontend/lib/registry/components/file-upload/index.ts`
- `/frontend/lib/registry/components/slider-basic/index.ts`
- `/frontend/lib/registry/components/toggle-switch/index.ts`
- `/frontend/lib/registry/components/button-primary/index.ts`
- `/frontend/lib/registry/components/text-display/index.ts`
- `/frontend/lib/registry/components/image-display/index.ts`
- `/frontend/lib/registry/components/divider-line/index.ts`
- `/frontend/lib/registry/components/accordion-basic/index.ts`
- `/frontend/lib/registry/components/table-list/index.ts`

### 공통 스타일 파일

- `/frontend/lib/registry/components/common/inputStyles.ts`

### 렌더링 관련 파일

- `/frontend/components/screen/RealtimePreviewDynamic.tsx`
- `/frontend/lib/registry/components/text-input/TextInputComponent.tsx`

### 화면 디자이너

- `/frontend/components/screen/ScreenDesigner.tsx`
  - `handleComponentDrop` 함수 (1751-1800줄): 컴포넌트 드롭 시 그리드 컬럼 수 자동 계산
  - 그리드 활성화 시: `defaultSize.width` 기반으로 gridColumns 계산 후 너비 재조정
  - 그리드 비활성화 시: `defaultSize` 그대로 사용

## 향후 개선 사항

### 1. 반응형 기본값

- 화면 크기에 따라 다른 기본값 적용
- 모바일, 태블릿, 데스크톱 각각 최적화

### 2. 사용자 정의 기본값

- 사용자가 자주 사용하는 크기를 기본값으로 저장
- 프로젝트별 기본값 설정 기능

### 3. 스마트 크기 조정

- 주변 컴포넌트에 맞춰 자동으로 크기 조정
- 레이블 길이에 따른 동적 너비 계산

### 4. 프리셋 제공

- 폼 레이아웃 프리셋 (라벨-입력 쌍)
- 검색 바 프리셋
- 로그인 폼 프리셋

## 버전 히스토리

### v1.0.0 (2025-10-14)

- 초기 기본 너비 설정 적용
- 공통 스타일에 max-w-full, overflow-hidden 추가
- 모든 인풋 컴포넌트 기본 크기 조정