ERP-node/docs/컴포넌트_기본_너비_설정_가이드.md

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

개요

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

변경 사항

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 추가
• 모든 인풋 컴포넌트 기본 크기 조정