Components
1. DataGrid
1.1 Tables
Data Table (주문내역)
| 주문일시 | 주문번호 | 주문상태 | 주문금액 | 상품정보 | 주문자명 | 작업 | |
|---|---|---|---|---|---|---|---|
| 2024-10-16 10:30:00 | ord251016123456 | 결제완료 |
50,000원
+45,000원
|
노트북 거치대
외 2건
|
유 김철수 | ||
| 2024-10-15 18:20:00 | ord251015345678 | 배송중 |
95,000원
+89,700원
|
USB 허브
외 3건
|
박지성 |
Log Table (로그/이력)
처리일시, 처리자, 이벤트를 표시하는 로그 테이블
| 처리일시 | 처리자 | 이벤트 |
|---|---|---|
| 2025-10-28 10:30:25 | 관리자 (admin) | 결제 링크 재발송 |
| 2025-10-28 09:15:00 | 시스템 | 주문 상태 변경: 결제대기 → 결제완료 |
| 2025-10-27 18:45:30 | 홍길동 (user123) | 배송지 정보 수정 |
Mobile Card View (Log Table 반응형)
로그 테이블의 모바일 카드 형태
관리자 (admin)
2025-10-28 10:30:25
결제 링크 재발송
시스템
2025-10-28 09:15:00
주문 상태 변경: 결제대기 → 결제완료
홍길동 (user123)
2025-10-27 18:45:30
배송지 정보 수정
Mobile Card View (DataGrid 반응형)
사용자 목록 형태 - 주요필드 + 서브텍스트 + 뱃지
{primary_label}
{primary_value}
({sub_value})
{badge_label}
{badge_value}
{field1_label}
{field1_value}
{field2_label}
{field2_value}
{field3_label}
{field3_value}
{status_label}
{status_value}
{field4_label}
{field4_value}
{field5_label}
{field5_value}
권한 관리 형태 - 인라인 뱃지 + 아이콘 값 + 전체너비 필드
{primary_label}
{primary_value}
{inline_badge}
{secondary_label}
{secondary_value}
{field1_label}
{field1_value}
{status_label}
{status_value}
{fullwidth_label}
{fullwidth_value}
설치 카드 형태 - 아이콘 + 뱃지그룹 + 토글/버튼 액션
{title}
{status_badge}
{version}
{description}
{meta1_label}: {meta1_value}
{meta2_label}: {meta2_value}
{title}
{status_badge}
{version}
{description}
{meta1_label}: {meta1_value}
{meta2_label}: {meta2_value}
1.2 CardGrid
테이블 대신 카드 형태로 데이터를 표시하는 그리드 레이아웃
확장 관리 형태 (모듈/플러그인/템플릿)
아이콘 + 제목 + 뱃지그룹 + 설명 + 메타정보 + 토글/버튼
{title}
{version}
{status_badge}
{description}
{meta1_label}: {meta1_value}
{meta2_label}: {meta2_value}
{title}
{version}
{status_badge}
{description}
{meta1_label}: {meta1_value}
{meta2_label}: {meta2_value}
게시판 관리 형태
뱃지 + 제목 + 서브텍스트 + 메타정보 (심플 가로형)
{category}
{title}
({sub_text})
{meta1_label}: {meta1_value}
·
{meta2_label}: {meta2_value}
{category}
{title}
({sub_text})
{meta1_label}: {meta1_value}
·
{meta2_label}: {meta2_value}
2. Modals
Modal Trigger Buttons
Confirm Modal
확인/취소 액션을 요청하는 컴팩트한 확인 모달
Confirm Modal with Alert
경고/정보 영역이 포함된 확인 모달 (삭제 시 영향 범위 표시 등)
3. Cards
Setting Card
쇼핑몰 정보
쇼핑몰의 기본 정보를 설정합니다.
Section Title Card
구분선이 있는 섹션 제목 스타일 - 주문상세, 회원상세 등에서 사용
주문정보
주문상품
섹션 내용...
Setting Card (Module Source)
모듈/플러그인에 의해 동적으로 추가된 UI 섹션 - 우측 상단에 출처 표시
플러그인
섹션 제목
플러그인에 의해 추가된 섹션입니다.
모듈
섹션 제목
모듈에 의해 추가된 섹션입니다.
Account Card (무통장 계좌)
기본 계좌
은행
KB국민은행
계좌번호
123-456-789012
Accordion Card
title
content
Accordion Card (Toggle Only)
content
4. Tabs
기본 탭
언더라인 탭
5. Toast
사용자가 활성화되었습니다.
오류가 발생했습니다.
주의가 필요합니다.
정보를 확인해주세요.
6. Dropdown Menu
7. Drag List
기본 드래그 리스트
title
description
item
item (active)
계층형 드래그 리스트
부모-자식 관계가 있는 트리 구조 리스트
title
description
parent (expanded)
child item
child item
item
parent (collapsed)
8. Custom Select
Custom Select (Select.tsx 호환)
Multi Select (체크박스 드롭다운)
Ghost Select (배경 없는 셀렉트)
Searchable Dropdown (검색 가능한 드롭다운)
9. Search Bar
기본 검색바 (반응형)
모바일: 세로 배치 / 데스크탑(md 이상): 가로 배치
10. Filter Row
필터 행 (반응형)
모바일: 세로 배치 / 데스크탑(md 이상): 가로 배치, 라벨 세로 중앙 정렬
결제수단
접속기기
실패일시
~
클래스 설명
| 클래스 | 설명 |
|---|---|
.filter-row |
필터 행 컨테이너 (mb-4 포함). 반응형: 모바일 세로, 데스크탑 가로 배치 |
.filter-row-last |
마지막 필터 행 (mb 없음) |
.filter-label |
필터 라벨. 데스크탑에서 세로 중앙 정렬, 고정 너비(w-14) |
.filter-buttons |
필터 버튼 그룹 컨테이너 (flex-wrap) |