컨비니 파트너센터 컴포넌트 가이드
파트너센터에서 사용되는 모든 UI 컴포넌트들을 확인할 수 있습니다.
버튼
다양한 상황에 맞는 버튼 스타일을 제공합니다.
기본 버튼
<button class="cvn-btn cvn-btn-primary">기본 버튼</button>
<button class="cvn-btn cvn-btn-secondary">보조 버튼</button>
<button class="cvn-btn cvn-btn-success">성공</button>
<button class="cvn-btn cvn-btn-warning">경고</button>
<button class="cvn-btn cvn-btn-danger">위험</button>
아웃라인 버튼
<button class="cvn-btn cvn-btn-outline-primary">아웃라인 기본</button>
<button class="cvn-btn cvn-btn-outline-secondary">아웃라인 보조</button>
버튼 크기
<button class="cvn-btn cvn-btn-primary cvn-btn-sm">작은 버튼</button>
<button class="cvn-btn cvn-btn-primary">기본 크기</button>
<button class="cvn-btn cvn-btn-primary cvn-btn-lg">큰 버튼</button>
뱃지
상태나 카테고리를 표시하는 데 사용되는 작은 레이블입니다.
기본 뱃지
Primary
Secondary
Success
Warning
Danger
<span class="cvn-badge cvn-badge-primary">Primary</span>
<span class="cvn-badge cvn-badge-secondary">Secondary</span>
아웃라인 뱃지
Primary
Secondary
<span class="cvn-badge cvn-badge-outline cvn-text-primary">Primary</span>
탭
콘텐츠를 구분하여 표시하는 네비게이션 요소입니다.
홈
프로필
설정
<div class="cvn-tabs">
<div class="cvn-tab cvn-tab-active">홈</div>
<div class="cvn-tab">프로필</div>
<div class="cvn-tab">설정</div>
</div>
페이지네이션
페이지 탐색을 위한 컴포넌트입니다.
이전
1
2
3
다음
<div class="cvn-pagination">
<div class="cvn-page-item">이전</div>
<div class="cvn-page-item">1</div>
<div class="cvn-page-item cvn-page-item-active">2</div>
<div class="cvn-page-item">3</div>
<div class="cvn-page-item">다음</div>
</div>
모달
오버레이 형태의 대화상자입니다.
모달 제목
×
모달 내용이 여기에 들어갑니다.
<div class="cvn-modal">
<div class="cvn-modal-header">
<div class="cvn-modal-title">모달 제목</div>
<div class="cvn-modal-close">×</div>
</div>
<div class="cvn-modal-body">
모달 내용이 여기에 들어갑니다.
</div>
<div class="cvn-modal-footer">
<button class="cvn-btn cvn-btn-secondary">취소</button>
<button class="cvn-btn cvn-btn-primary">확인</button>
</div>
</div>
드롭다운
클릭하여 펼쳐지는 메뉴입니다.
<div class="cvn-dropdown">
<button class="cvn-btn cvn-btn-secondary">드롭다운 버튼</button>
<div class="cvn-dropdown-menu">
<a href="#" class="cvn-dropdown-item">메뉴 항목 1</a>
<a href="#" class="cvn-dropdown-item">메뉴 항목 2</a>
<div class="cvn-dropdown-divider"></div>
<a href="#" class="cvn-dropdown-item">메뉴 항목 3</a>
</div>
</div>
토스트
임시로 표시되는 알림 메시지입니다.
알림 메시지가 표시됩니다.
×
<div class="cvn-toast">
<div>알림 메시지가 표시됩니다.</div>
<div class="cvn-toast-close">×</div>
</div>
로딩 스피너
로딩 상태를 표시하는 애니메이션 요소입니다.
<div class="cvn-spinner"></div>
툴팁
요소에 대한 추가 정보를 표시합니다.
툴팁 내용입니다.
<div class="cvn-tooltip">
<button class="cvn-btn cvn-btn-secondary">툴팁 버튼</button>
<div class="cvn-tooltip-content">툴팁 내용입니다.</div>
</div>
아코디언
접었다 펼 수 있는 콘텐츠 영역입니다.
아코디언 제목 1
아코디언 내용 1이 여기에 표시됩니다.
아코디언 제목 2
<div class="cvn-accordion">
<div class="cvn-accordion-item">
<div class="cvn-accordion-header">
아코디언 제목 1
<i class="fas fa-chevron-down"></i>
</div>
<div class="cvn-accordion-body">
아코디언 내용 1이 여기에 표시됩니다.
</div>
</div>
</div>
진행 바
진행 상태를 시각적으로 표시합니다.
<div class="cvn-progress">
<div class="cvn-progress-bar" style="width: 75%;"></div>
</div>
파일 업로드
파일을 업로드할 수 있는 드롭 영역입니다.
파일을 드래그하여 업로드하세요
또는 클릭하여 파일 선택
<div class="cvn-file-upload">
<div class="cvn-file-upload-icon">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<div>파일을 드래그하여 업로드하세요</div>
<div class="cvn-text-sm cvn-text-gray-600">또는 클릭하여 파일 선택</div>
</div>
검색 필드
검색 기능을 위한 입력 필드입니다.
<div class="cvn-search">
<i class="fas fa-search cvn-search-icon"></i>
<input type="text" class="cvn-form-control cvn-search-input" placeholder="검색어를 입력하세요">
</div>
태그
키워드나 카테고리를 표시하는 태그입니다.
태그 1
×
태그 2
×
<span class="cvn-tag">
태그 1
<span class="cvn-tag-remove">×</span>
</span>
Grid System
Basic Grid
1
2
3
Responsive Grid
1
2
3
Settlement Components
과세 공급가액
1,000,000원
과세 부가세
100,000원
총 공급가액
1,100,000원
Content Styles
Sample Content
This is a sample paragraph with content styling. The text should have proper line height and spacing.
Another paragraph to demonstrate margin bottom.
Form Components
Utility Classes
Margin Utilities
Margin Left 2
Margin Left Auto
Padding Utilities
Padding 0
Padding 4
Padding 6
Text Alignment
Centered Text
Hover Effects
Hover Background
Hover Text Color