Dynamic

런타임에 자식 컴포넌트를 동적으로 렌더링하는 컨테이너 컴포넌트

개요

Cals Dynamic은 children으로 전달된 임의의 컴포넌트를 레이블과 함께 렌더링하는 컨테이너 컴포넌트입니다. 특정 Foundation 프리미티브를 래핑하지 않으며, 동적 폼 화면 구성에 활용됩니다.

주요 특징

✅ children 기반 렌더링: 어떤 React 컴포넌트든 children으로 전달 가능
✅ FormItem 내장: label/required/description/error prop으로 폼 레이블 자동 래핑
✅ 클릭 이벤트: onClick 설정 시 클릭 가능 상태로 전환
✅ 가시성 제어: visible prop으로 조건부 렌더링
✅ 스타일 오버라이드: 배경색·전경색·글꼴 등 인라인 스타일 직접 지정

기본 사용

children으로 내부 컨트롤을 전달합니다.

Preview

레이블

title prop으로 레이블을 표시합니다. orientation으로 레이블 위치를 제어합니다.

Preview

동의 여부

클릭 동작

onClick이 설정되면 클릭 가능한 상태로 동작합니다.

Preview

클릭 가능한 영역

스타일 오버라이드

배경색, 텍스트 색상, 폰트 등 시각적 스타일을 직접 지정합니다.

Preview

스타일 적용됨

다양한 children

어떤 컴포넌트든 children으로 전달 가능합니다.

Preview

API

Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	동적으로 렌더링할 자식 컴포넌트
`visible`	`boolean`	`true`	표시 여부 (false → 렌더링 안 함)
`title`	`string`	-	레이블 텍스트 (label 대체)
`showLabel`	`boolean`	`false`	빈 레이블 공간 표시
`payloadEncrypt`	`boolean`	-	전송 데이터 암호화 플래그 (메타데이터)
`backgroundColor`	`string`	-	배경색
`color`	`string`	-	텍스트 색상
`fontSize`	`string`	-	폰트 크기
`fontWeight`	`string \| number`	-	폰트 굵기
`fontFamily`	`string`	-	폰트 패밀리
`fontStyle`	`string`	-	폰트 스타일 (italic 등)
`textAlign`	`string`	-	텍스트 정렬
`borderColor`	`string`	-	테두리 색상
`borderWidth`	`string`	-	테두리 두께
`className`	`string`	-	컴포넌트 컨테이너 CSS 클래스
`formClassName`	`string`	-	FormItem 래퍼 CSS 클래스
`label`	`ReactNode`	-	FormItem 레이블
`orientation`	`"horizontal" \| "vertical"`	-	FormItem 레이블 방향
`required`	`boolean`	-	필수 입력 표시
`description`	`ReactNode`	-	FormItem 설명
`error`	`ReactNode`	-	FormItem 에러 메시지

Events

Event	Type	Description
`onClick`	`() => void`	클릭 시 호출

접근성

권장 사항

✅ onClick이 설정되면 자동으로 role="button", tabIndex=0, Enter/Space 키보드 지원이 추가됩니다.
✅ label prop으로 컨테이너의 목적을 명확히 제공하세요.
❌ onClick 없이 시각적으로만 클릭 가능한 것처럼 보이게 하지 마세요.

Dynamic

개요

주요 특징

기본 사용

Preview

Code

레이블

Preview

Code

클릭 동작

Preview

Code

스타일 오버라이드

Preview

Code

다양한 children

Preview

Code

API

Props

Events

접근성

권장 사항

관련 컴포넌트