Tier 3 — 실무 앱에서 곧 필요해지는 22종

선정 근거: IBM Carbon 40종을 전수 대조하고, 제니트리 도메인(품질·물류·PLM) 화면에서 실제로 요구되는 것을 추렸습니다. 전체를 그림으로 보려면 그림 색인에서 Tier 3 필터를 누르세요.

선정 근거: IBM Carbon 40종 전수 대조 + 제니트리 도메인(품질·물류·PLM) 실제 화면 요구. Carbon에 있으나 JT에 채택하지 않은 것: AI label(AI 전용) · Menu buttons(분할 버튼 — 메뉴로 대체) · Multiselect(<select multiple> + 필터 태그로 대체) · Popconfirm(모달로 대체).

26. 여러 줄 입력 (Textarea)

<label class="jt-label" for="memo">비고</label>
<textarea class="jt-textarea" id="memo" placeholder="특이사항을 입력하세요"></textarea>

노브: --jt-textarea-min-h (기본 96px)
하지 말 것: 고정 height. 번역·긴 입력에서 내용이 잘립니다. resize:vertical만 허용(가로 리사이즈는 레이아웃을 깹니다)

27. 날짜 (Date)

<input class="jt-date" type="date" aria-label="제조일자">
<div class="jt-date-range">
  <input class="jt-date" type="date" aria-label="시작일"> <span>~</span>
  <input class="jt-date" type="date" aria-label="종료일">
</div>

OS 기본 달력을 씁니다. 직접 만든 달력은 키보드 조작·스크린리더·다국어(요일·연호)에서 거의 항상 집니다
숫자는 --font-num이 적용되어 자릿수가 흔들리지 않습니다

28. 파일 업로드 (File uploader)

<label class="jt-upload">
  <input type="file" multiple>
  <span class="jt-ico-mask jt-ico-lg" style="--jt-ico-url:url(/brand/icons/upload.svg)" aria-hidden="true"></span>
  <span>시험성적서를 끌어다 놓거나 클릭해 선택</span>
  <span class="jt-upload-hint">PDF · JPG · PNG · 20MB 이하</span>
</label>
<ul class="jt-upload-list">
  <li class="jt-upload-item">
    <span class="jt-upload-name">COA_26H21-03.pdf</span>
    <span class="jt-upload-size">1.4 MB</span>
    <button class="jt-tag-x" aria-label="파일 제거"><span class="jt-ico-mask jt-ico-sm" style="--jt-ico-url:url(/brand/icons/close.svg)" aria-hidden="true"></span></button>
  </li>
</ul>

드래그 중에는 JS로 data-dragover="true"를 켜세요
실패한 파일은 data-state="error"
접근성: 허용 형식·최대 용량을 반드시 글자로 적습니다(.jt-upload-hint)

29. 진행률 (Progress)

<div class="jt-progress-row">
  <span class="jt-progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
    <span class="jt-progress-bar" style="width:64%"></span></span>
  <span class="jt-progress-value">64%</span>
</div>

하지 말 것: 막대만 두기. 숫자를 반드시 병기합니다(색·길이만으로는 정보 전달 불가)
상태: data-state="success" / "error"

30. 라벨-값 목록 (Descriptions)

<dl class="jt-desc">
  <dt>품목코드</dt><dd class="jt-num">CP-JT0299</dd>
  <dt>판정</dt><dd><span class="jt-badge jt-badge-pass">적합</span></dd>
</dl>

노브: --jt-desc-label-w (기본 160px)
모바일(≤639px)에서 자동으로 라벨이 위로 쌓입니다 — 좁은 화면에서 160px 라벨 열은 값을 못 담습니다
품목 상세·시험 조건·규격 화면의 표준. 이런 데이터를 <table>로 만들지 마세요

31. 메뉴 (더보기)

<details class="jt-menu">
  <summary class="jt-icon-btn" aria-label="더보기"><span class="jt-ico-mask jt-ico-sm" style="--jt-ico-url:url(/brand/icons/more_vert.svg)" aria-hidden="true"></span></summary>
  <div class="jt-menu-list">
    <button class="jt-menu-item">복제</button>
    <hr class="jt-menu-sep">
    <button class="jt-menu-item" data-danger="true">삭제</button>
  </div>
</details>

<details> 기반 — JS 없이 열리고 닫힙니다
노브: --jt-menu-min-w

32. 콘텐츠 스위처 (세그먼트)

<div class="jt-switcher" role="group" aria-label="보기 방식">
  <button class="jt-switcher-item" aria-pressed="true">표</button>
  <button class="jt-switcher-item" aria-pressed="false">카드</button>
</div>

탭과 다릅니다: 탭 = 다른 내용 / 스위처 = 같은 내용의 다른 표현(표↔카드, 월↔연)
모바일에서 탭보다 안정적이라 기간·보기방식 전환에 권장

33. 브레드크럼

<nav aria-label="현재 위치"><ol class="jt-crumb">
  <li><a href="/items">품목</a></li>
  <li><span aria-current="page">인투메디 클리닉스 리쥬</span></li>
</ol></nav>

하지 말 것: 모바일에서 통째로 감추기. 마지막 2단계만 남기세요(현재 위치를 잃습니다)

34~37. 구분선 · 목록 · 선택 타일 · 필터 태그

<hr class="jt-divider">                       <!-- 얇은 구분 -->
<hr class="jt-divider jt-divider-strong">      <!-- 섹션 구분 -->
 
<ul class="jt-list">
  <li class="jt-list-item">항목 <span class="jt-badge jt-badge-pass">적합</span></li>
</ul>
 
<label class="jt-tile">
  <input type="radio" name="pkg">
  <p class="jt-tile-title">에어리스 30ml</p>
  <p class="jt-tile-desc">1박스 120개</p>
</label>
 
<div class="jt-filterbar">
  <span class="jt-tag">적합 <button class="jt-tag-x" aria-label="적합 필터 제거"><span class="jt-ico-mask jt-ico-sm" style="--jt-ico-url:url(/brand/icons/close.svg)" aria-hidden="true"></span></button></span>
</div>

선택 타일은 라디오/체크박스를 안에 숨겨 접근성을 유지합니다. div에 클릭 이벤트만 다는 방식은 키보드로 못 고릅니다

38. 토글팁 (클릭형 도움말) ★ 중요

<details class="jt-toggletip">
  <summary aria-label="규격 근거 보기">
    <span class="jt-ico-mask jt-ico-sm" style="--jt-ico-url:url(/brand/icons/info.svg)" aria-hidden="true"></span>
  </summary>
  <div class="jt-toggletip-body">화장품 안전기준 제12개정 기준</div>
</details>

⚠️ 툴팁(.jt-tooltip)은 hover 기반이라 모바일에서 열 수 없습니다. 터치 기기에서도 봐야 하는 설명은 반드시 토글팁을 쓰세요. summary가 44px 터치 타깃을 자동 확보합니다.

39~42. 팝오버 · 로딩 버튼 · 아바타 · KPI

<button class="jt-btn" data-loading="true">저장 중</button>   <!-- 자동으로 클릭 차단 + 스피너 -->
 
<span class="jt-avatar">GS</span>
<span class="jt-avatar jt-avatar-lg"><img src="/me.jpg" alt=""></span>
 
<div class="jt-stat">
  <span class="jt-stat-label">3분기 적합률</span>
  <span class="jt-stat-value">98.2<span class="jt-stat-unit">%</span></span>
  <span class="jt-stat-delta" data-dir="up">▲ 0.4%p</span>
</div>

data-loading="true"는 두 번 눌리는 사고를 막습니다(pointer-events:none 자동)
하지 말 것: 증감을 색만으로 표시. ▲ ▼ 기호를 반드시 함께

43~45. 타임라인 · 트리 · 코드

<ol class="jt-timeline">
  <li class="jt-timeline-item" data-state="done">
    <span class="jt-timeline-time">08-21 09:14</span>
    <span class="jt-timeline-title">칭량 완료</span></li>
  <li class="jt-timeline-item" data-state="current">…</li>
  <li class="jt-timeline-item">…</li>            <!-- 예정 -->
</ol>
 
<ul class="jt-tree">
  <li><details class="jt-tree-node" open><summary>스킨케어</summary>
    <ul><li><span class="jt-tree-leaf">앰플</span></li></ul></details></li>
</ul>
 
<pre class="jt-code">코드 블록</pre>
<code class="jt-code-inline">--color-text</code>

타임라인 = 제조·품질 이력 추적. 상태 3종: (없음)=예정 / done / current
트리 = 카테고리·BOM 계층. <details> 중첩이라 JS 불필요
코드 블록은 가로 스크롤을 자기 안에서만 만듭니다(페이지가 밀리지 않음)

46~47. 표 확장 — 정렬 · 행 선택 · 선택 액션바

<div class="jt-bulkbar">
  <span class="jt-bulkbar-count">2건</span> 선택됨
  <button class="jt-btn-ghost jt-btn-sm">일괄 발행</button>
</div>
<table class="jt-table">
  <thead><tr><th aria-sort="descending">LOT</th><th aria-sort="none">품목</th></tr></thead>
  <tbody>
    <tr aria-selected="true"><td class="jt-num">26H21-03</td><td>…</td></tr>
    <tr class="jt-table-empty"><td colspan="2">조건에 맞는 결과가 없습니다</td></tr>
  </tbody>
</table>

정렬 상태는 aria-sort 속성만 바꾸면 화살표가 자동으로 바뀝니다(CSS가 처리)
하지 말 것: 어두운 .jt-bulkbar 위의 ghost 버튼에서 글자색만 바꾸기 → 흰 배경 + 흰 글자가 됩니다. 시스템이 --jt-btn-bg:transparent까지 처리해 두었으니 그대로 쓰세요

라운드 유틸리티 (`--r-none` 신설)

<img class="jt-r-none">   <!-- 각진 이미지 타일 -->
<div class="jt-r-lg">     <!-- 큰 컨테이너 -->

--r-none:0이 토큰으로 생겼습니다. border-radius:0을 직접 쓰지 말고 var(--r-none) 또는 .jt-r-none을 쓰세요 — 나중에 “각진 곳만 살짝 둥글게” 같은 조정을 한 곳에서 할 수 있습니다.

모바일 하단 탭바