UI 컴포넌트 예제
🔘 Button
Variants
Sizes
📝 Input
기본
필수 필드
*
정수 입력
개
비밀번호
에러 상태
에러 메시지
읽기 전용
비활성화
값 비교
🔍 중복 체크 (checkDuplicateOptions)
📄 Textarea
기본 (2줄)
자동 높이 조절
고정 줄 수 (4줄)
읽기 전용
비활성화
에러 상태
필수 입력 항목입니다.
값 비교
🔽 Select (로컬 데이터)
기본
과일 선택
다중 선택
여러 과일 선택
검색 가능
검색하여 선택
에러 상태
선택하세요
필수 선택 항목입니다.
읽기 전용
사과
비활성화
바나나
🌐 APISelect (서버 데이터)
* tableKey와 itemKey를 기반으로 서버에서 데이터를 가져옵니다.
단일 선택
브랜드 선택
다중 선택
여러 브랜드 선택
항목 추가 가능
검색 또는 추가
🔘 RadioGroup & Switch
RadioGroup
Switch
📂 Accordion
단일 열기 (collapsible)
다중 열기
🗂️ Tabs
📅 Calendar
단일 날짜 선택 (mode: single)
선택된 날짜: 2026. 2. 4.
범위 선택 (mode: range)
선택된 범위: 2026. 2. 4. ~ 2026. 2. 11.
📄 Pagination
기본 페이지네이션
현재 페이지: 1 / 25
적은 페이지 (5페이지)
단일 페이지
* 한 페이지만 있으면 좌우 화살표가 비활성화됩니다.
📁 Uploader
ImageUploader (이미지 업로드)
업로드
업로드된 이미지: 0개
ImageUploader (보기 모드, 힌트 표시)
등록된 이미지가 없습니다.
ImageUploader (보기 모드)
FileUploader (파일 업로드)
첨부파일 (최대 10개, 각 100MB 미만)
등록된 첨부파일이 없습니다.
FileUploader (보기 모드, 힌트 표시)
첨부파일 (최대 10개, 각 100MB 미만)
등록된 첨부파일이 없습니다.
FileUploader (보기 모드)
첨부파일 (최대 10개, 각 100MB 미만)
sample.jpg
📎 DndFile (드래그 앤 드롭)
기본 (단일 파일)
파일을 이곳에 드래그 앤 드롭하거나 클릭하세요
최대 1개 · 10MB 이하
다중 파일 업로드 (최대 5개, 10MB 이하)
파일을 이곳에 드래그 앤 드롭하거나 클릭하세요
최대 5개 · 10MB 이하
확장자 제한 (PDF, DOC만 허용)
파일을 이곳에 드래그 앤 드롭하거나 클릭하세요
최대 3개 · 10MB 이하 · .pdf, .doc, .docx
순서 변경 가능 (isSortable)
파일을 이곳에 드래그 앤 드롭하거나 클릭하세요
최대 10개 · 10MB 이하
보기 모드
sample-document.pdf
6 Bytes
🗄️ Drawer
📦 Modal
💡 EmptyHint
기본 EmptyHint
등록된 이미지가 없습니다.
커스텀 메시지
검색 결과가 없습니다.
커스텀 높이
데이터가 없습니다.