chpark/vexplor

Fork 0

Files

kjs a2c3737f7a 세부타입설정

2025-10-14 16:45:30 +09:00

6.9 KiB

Raw Permalink Blame History

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

개요

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

변경 사항

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/12 ~ 12/12)
또는 직접 픽셀 값 입력

주의 사항

기존 화면에 미치는 영향

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

스타일 우선순위

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

커스터마이징

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

테스트 방법

기본 크기 테스트

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

너비 제한 테스트

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

반응형 테스트

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

향후 개선 사항

1. 반응형 기본값

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

2. 사용자 정의 기본값

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

3. 스마트 크기 조정

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

4. 프리셋 제공

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

버전 히스토리

v1.0.0 (2025-10-14)

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

6.9 KiB Raw Permalink Blame History Unescape Escape