226 lines
6.9 KiB
Markdown
226 lines
6.9 KiB
Markdown
# 컴포넌트 기본 너비 설정 가이드
|
||
|
||
## 개요
|
||
|
||
화면 관리에서 각 컴포넌트 타입별로 적절한 기본 너비를 설정하고, 컴포넌트가 지정된 너비를 벗어나지 않도록 스타일을 적용했습니다.
|
||
|
||
## 변경 사항
|
||
|
||
### 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 추가
|
||
- 모든 인풋 컴포넌트 기본 크기 조정
|