컴포넌트 — 그림 색인

클래스 이름을 몰라도 됩니다. 찾는 모양을 눈으로 고르고, 이름을 클릭하면 복사됩니다. 그대로 AI에게 주거나 코드에 붙여넣으세요.

위 그림은 설명용 이미지가 아니라 실물입니다. 정본 jt-utilities.css를 그대로 불러와 그리므로, 시스템이 바뀌면 이 색인도 함께 바뀝니다.

티어가 뭔가요

난이도가 아니라 필요해지는 순서입니다.

		언제 필요해지나
Tier 1	12종	앱을 만들면 무조건 씁니다 — 버튼·입력·표·모달
Tier 2	13종	화면이 늘면 곧 필요합니다 — 토스트·검색·페이지네이션·하단 탭바
Tier 3	22종	실무 데이터가 들어오면 필요합니다 — 날짜·파일 업로드·타임라인·트리

Tier 1·2는 컴포넌트마다 개별 페이지가 있습니다(왼쪽 목록). 각 페이지에는 미리보기 · 코드 · 하지 말 것 · 접근성 · 노브가 들어 있습니다.

🚫

컴포넌트 계약 4조를 먼저 읽으세요. jt-utilities.css를 직접 고치는 순간 다음 버전에서 그 수정이 사라집니다. 모양을 바꿔야 하면 --jt-* 노브만 덮어쓰세요.

/* ✅ 올바름 — 이 페이지에서만 버튼을 넓게 */
.checkout .jt-btn { --jt-btn-min-w: 120px; }
 
/* 🚫 금지 — 시스템 파일 수정 */
.jt-btn { min-width: 120px; }

먼저 비슷한 것으로 대체 가능한지 확인하세요. 컴포넌트가 늘어날수록 시스템은 무거워지고, 무거워지면 아무도 안 씁니다.

없는 것	대신 쓰세요
멀티셀렉트	`<select multiple>` + 필터 태그
분할 버튼	버튼 + 메뉴
인라인 확인(Popconfirm)	모달
캘린더 위젯	날짜 입력 — OS 기본 달력이 접근성·다국어에서 항상 낫습니다

그래도 필요하면 도움말 · 새 컴포넌트 요청으로 제안해 주세요.