# TDesign 디자인 시스템

## TDesign 디자인 시스템 인터페이스 미리보기

규칙을 검증하고 로컬에서 적용된 결과를 확인한 뒤 삭제합니다. 정책은 배포되지 않습니다.

## TDesign 디자인 시스템 디자인 참고 자료

현재 공개된 develop 브랜치의 테마 및 컴포넌트 소스를 사용하는 TDesign React입니다. 테마 값은 소스 스냅샷이며, 특정 패키지 버전과의 호환성을 보장하지 않습니다. 독립형 미리보기는 HTML 방식의 해석이고, React 예제는 실제 패키지 API를 사용합니다.

### 라이트 테마 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --td-brand-color | #0052d9 | 브랜드 7단계에서 결정되는 기본 동작입니다. |
| --td-brand-color-hover | #366ef4 | 기본 동작의 호버 상태입니다. |
| --td-brand-color-active | #003cab | 눌린 상태의 동작입니다. |
| --td-brand-color-light | #f2f3ff | 은은한 선택 배경입니다. |
| --td-bg-color-page | #eee | 바깥쪽 캔버스입니다. |
| --td-bg-color-container | #fff | 편집기 및 표 패널입니다. |
| --td-text-color-primary | rgba(0,0,0,.9) | 본문 텍스트입니다. |
| --td-text-color-secondary | rgba(0,0,0,.6) | 보조 설명 텍스트입니다. |
| --td-border-level-1-color | #e8e8e8 | 구분선입니다. |
| --td-border-level-2-color | #ddd | 컨트롤 테두리입니다. |
| --td-error-color | #d54941 | 필드 오류 역할. |
| --td-success-color | #2ba471 | 긍정적인 역할입니다. 색상만으로 대비를 판단하지 마세요. |
### 타이포그래피 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --td-font-family | PingFang SC, Microsoft YaHei, Arial Regular | 시스템 지향 글꼴 스택입니다. 이 선언은 글꼴을 다운로드하지 않습니다. |
| --td-font-body-small | 12px / 20px | 보조용 소형 레이블입니다. |
| --td-font-body-medium | 14px / 22px | 콘솔 본문 텍스트입니다. |
| --td-font-body-large | 16px / 24px | 더 큰 본문 텍스트입니다. |
| --td-font-title-medium | 600 16px / 24px | 패널 제목입니다. |
| --td-font-headline-small | 600 24px / 32px | 페이지 제목. |
| --td-font-display-medium | 600 48px / 56px | 디스플레이 역할이며 정책 편집기에는 필요하지 않습니다. |
### 크기 및 의미 기반 간격

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --td-size-1 … --td-size-8 | 2, 4, 6, 8, 12, 16, 20, 24px | 비선형 기본 스케일입니다. |
| --td-size-9 … --td-size-16 | 28, 32, 36, 40, 48, 56, 64, 72px | 더 큰 스케일 값입니다. |
| --td-comp-size-m | 32px | 중간 크기 컴포넌트 높이 별칭입니다. |
| --td-comp-paddingLR-m | 12px | 중간 크기 가로 패딩 별칭입니다. |
| --td-comp-paddingTB-l | 16px | 큰 크기 세로 패딩 별칭입니다. |
| --td-comp-margin-xl | 20px | 간격 별칭은 xl 패딩과 다릅니다. |
| --td-pop-padding-xxl | 16px | 팝업 패딩 별칭입니다. |
### 모서리 스타일

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --td-radius-small | 2px | 작은 반경입니다. |
| --td-radius-default | 3px | 기본 반경입니다. |
| --td-radius-medium | 6px | 중간 반경입니다. |
| --td-radius-large | 9px | 큰 반경입니다. |
| --td-radius-extraLarge | 12px | 특대 반경입니다. |
| --td-radius-round | 999px | 알약형 스타일. |
| --td-radius-circle | 50% | 원형 스타일을 적용하려면 너비와 높이가 같아야 합니다. |
### 폼 및 표의 동작 규약

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Form.useForm() | [form] | 인스턴스를 Form에 전달합니다. |
| FormItem name | Registered field key | 제출된 필드와 setFields 오류가 일치해야 합니다. |
| Form onSubmit | event.validateResult === true | 검증에 성공한 경우에만 애플리케이션 업데이트를 진행합니다. |
| form.setFields | name + status + validateMessage | 구체적인 필드 오류를 설정합니다. |
| FormItem for | Input association | 공식 Switch 예제에서는 for="status"를 사용합니다. |
### 데이터 표 구성

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| rowKey | Stable unique data property | 이 예제에서는 규칙마다 id를 한 번 생성합니다. |
| columns[].colKey | Data key or custom cell key | 전용 작업 열을 사용합니다. |
| columns[].cell | ({row,col,rowIndex,colIndex}) | 각 행에 맞는 컨트롤을 렌더링합니다. |
| tableLayout | fixed by default; auto available | 긴 리소스 경로에 맞춰 열 너비를 결정합니다. |
| disableDataPage | false by default | 명시적으로 비활성화하지 않으면 Table이 로컬 페이지네이션을 처리합니다. |
## TDesign 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## TDesign 디자인 시스템: 구현 방식이 명확히 구분된 콘솔 시스템

### React 구현 방식 선택하기

> TDesign에는 프레임워크별 구현이 따로 있습니다. 이 예제는 이름이 비슷한 Vue 패키지나 모바일 컴포넌트 세트가 아니라 tdesign-react를 사용합니다. 전역 스타일시트는 통합에 필요한 요소입니다. 컴포넌트만 가져오면 예시의 레이아웃과 테마 규칙까지 적용되는 것은 아닙니다.

핵심 구성은 등록된 Form과 구조화된 Table입니다. 이름, 리소스 경로, 활성화 여부는 데이터 필드이며, 행 삭제는 테이블 작업입니다. 이 예제에는 권한 부여 백엔드가 없으므로 API가 이제 보호된다는 페이지 전체의 주장은 사실이 아닙니다.

지원 사양 읽기

## TDesign 디자인 시스템 다크 모드에서 실제로 달라지는 시맨틱 색상

### 브랜드 색상 7단계가 모든 모드에 공통으로 적용되는 것은 아닙니다

라이트 테마에서는 브랜드 역할에 7단계 색상이 적용되고, 다크 테마에서는 8단계 색상이 적용됩니다. 라이트 모드의 파란색을 모든 컴포넌트에 복사하는 대신 애플리케이션 CSS에서 시맨틱 변수를 사용하세요. 다크 캔버스는 #181818, 컨테이너는 #242424이며, 두 역할은 서로 다른 표면입니다.

미리보기는 라이트 모드를 유지하도록 구성되어 있습니다. 네이티브 구현에서는 문서 루트에 theme-mode="dark"를 설정해 제공되는 다크 모드 규칙을 적용하세요. 사용자 지정 정책 예시는 별도로 범위를 지정하고, 필터로 모든 이미지를 다시 색칠하지 마세요.

```
document.documentElement.setAttribute('theme-mode', 'dark');
// Restore the published light theme:
document.documentElement.setAttribute('theme-mode', 'light');
```

코드 참조

지원 사양 읽기

## TDesign 디자인 시스템 필드의 의미를 유지하면서 조밀한 타이포그래피 구성하기

### 전체 글꼴 역할 사용하기

Body medium은 크기 14px, 줄 높이 22px를 적용합니다. Title medium은 굵기 600, 크기 16/24를 적용하며, 작은 헤드라인은 24/32를 사용합니다. 각 스타일의 용도는 다릅니다. 테이블 데이터, 패널 레이블, 페이지 제목을 모두 굵은 본문 텍스트로 표현하지 마세요.

소스의 글꼴 패밀리 이름은 사용 가능한 시스템 글꼴을 지정합니다. 애플리케이션에서 관리하는 타이포그래피에 적절한 sans-serif 대체 글꼴을 추가하고, 중국어와 라틴 문자를 함께 확인하세요. 리소스 경로에 애플리케이션의 고정폭 글꼴 스타일을 적용할 수 있지만, 이를 TDesign의 타이포그래피 토큰이라고 할 수는 없습니다.

지원 사양 읽기

## TDesign 디자인 시스템 크기 별칭을 실제 영역에 맞게 매핑하기

### 간격 이름은 서로 바꿔 쓸 수 없습니다

컴포넌트의 가로 안쪽 여백 Medium은 12px로 설정되지만, 컴포넌트 바깥 여백 Extra Large는 20px로 설정됩니다. 의미상 접미사를 하나의 추정 간격 척도에 일괄 대응하지 마세요. 편집기에서는 바깥쪽에 24px 여백을 두고 필드 간 간격을 줄여 컨트롤을 묶어 배치합니다.

독립 실행형 미리보기에서는 좁은 화면에서 편집기가 규칙 목록 위에 표시됩니다. 이 중단점은 애플리케이션의 결정이지 프레임워크가 보장하는 동작이 아닙니다. 목록에서 긴 API 경로는 줄바꿈되므로 페이지 전체가 뷰포트보다 넓어지지 않습니다.

지원 사양 읽기

## TDesign 디자인 시스템 등록, 유효성 검사 후 규칙 추가하기

### 필드 오류를 해당 키에 연결하기

Form 인스턴스는 Form 컴포넌트에 전달하고, 각 FormItem에는 필드 이름을 지정합니다. 제출 핸들러는 먼저 validateResult를 확인한 다음 수집된 필드 값을 읽습니다. 애플리케이션 검증 과정에서 문자열을 정규화하고 중복 경로를 거부하므로, 두 레이블이 같은 예시 엔드포인트를 조용히 설정하는 일을 방지합니다.

1. FormItem 키를 사용해 이름, 경로, 활성화 여부를 등록합니다.

2. 데이터를 추가하기 전에 이름이 비어 있는지 확인하고 경로가 /로 시작하지 않으면 거부합니다.

3. 같은 필드 키로 setFields를 사용해 오류를 표시하고, 입력한 값을 유지하여 수정할 수 있도록 합니다.

4. 검증을 통과한 후에만 안정적인 id를 추가하고, 결과가 로컬에만 저장됨을 알립니다.

지원 사양 읽기

## TDesign 디자인 시스템 편집과 삭제에도 행 식별자 유지하기

### 표시 데이터와 작업 셀 분리하기

테이블은 rowKey를 통해 id 필드를 가져옵니다. enabled 열은 불리언 값을 레이블 없는 색상 점 대신 읽을 수 있는 텍스트로 표시합니다. 작업 열에는 행 이름을 포함한 버튼을 렌더링하므로 보조 기술 사용자에게 구분할 수 없는 Remove 버튼 세 개가 표시되지 않습니다.

규칙 수가 적다면 전체 테이블을 페이지로 나누지 않고 표시해도 됩니다. 페이지네이션을 도입한다면 disableDataPage를 설정하기 전에 기본 제공되는 로컬 데이터 분할과 서버에서 처리하는 데이터 페이지네이션을 구분하세요. 배열 위치를 식별자로 재사용하면 행 삭제 후 순서가 바뀔 때 문제가 생길 수 있습니다.

- name은 사용자에게 표시되는 레이블이고, path는 리소스 식별자입니다.

- enabled는 애플리케이션 데이터이며 명시적인 텍스트로 렌더링됩니다.

- actions는 사용자 지정 열이므로 저장된 속성이 없어도 됩니다.

지원 사양 읽기

## TDesign 디자인 시스템 로컬 상태는 배포된 정책이 아닙니다

### 정책 편집기를 편집기로서 테스트하기

오프라인 미리보기에는 레이블이 연결된 네이티브 컨트롤, 실시간 상태 영역, 키보드 포커스 표시가 포함되어 있습니다. 이름이 비어 있거나 경로가 중복된 상태로 제출하면 폼은 열린 채로 유지되고 구체적인 문제가 표시되어야 합니다. 규칙을 삭제해도 로컬 목록만 변경됩니다.

프로덕션 서비스에는 여전히 서버 측 유효성 검사, 권한 부여, 충돌 처리, 감사 로그, 저장 거부 시 복구 기능이 필요합니다. 배포되었다고 오해할 수 있는 성공 토스트로 이런 요구사항을 흉내 내지 말고, 이 편집기를 중심으로 설계해야 합니다.

지원 사양 읽기

## TDesign 디자인 시스템 패키지를 통합하고 예제의 한계를 명확히 알리기

### 애플리케이션 코드에는 네이티브 예제 사용하기

React 예제에서는 실제 TDesign Form, Input, Switch, Button, Table 컴포넌트를 가져옵니다. 삽입된 미리보기는 패키지 다운로드나 네트워크 연결 없이 작동하도록 독립적인 HTML/CSS 방식으로 구현했습니다. 여기서 확인한 상호작용만으로는 프로젝트의 모든 라이브러리 종속성이 컴파일되었다고 볼 수 없습니다.

연결된 테마 파일은 현재 개발 중인 소스입니다. 사용자 지정 재정의를 복사하기 전에 잠금 파일에서 설치된 릴리스를 확인하고 토큰을 비교하세요. 이 페이지에서는 나중에 테마가 변경될 때 예시 팔레트 뒤에 변경 사항이 가려지지 않도록 역할 이름과 소스 출처를 명시합니다.

지원 사양 읽기

## TDesign 디자인 시스템 컴포넌트 예제

### 완전한 독립형 인터랙티브 예제

문서 전체를 index.html로 저장한 뒤 브라우저에서 여세요. TDesign의 라이트 모드 토큰과 Form/Table 구성을 독립적인 HTML/CSS 방식으로 구현한 예시입니다. 네이티브 React 런타임은 사용하지 않습니다.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>TDesign API rule editor</title><style>
*{box-sizing:border-box}body{margin:0;background:#eee;color:rgba(0,0,0,.9);font:14px/22px Arial,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fff;border-bottom:1px solid #ddd}.mark{font-weight:700;color:#0052d9;font-size:20px}.tag{background:#f2f3ff;color:#003cab;padding:4px 8px;border-radius:3px}main{padding:24px;max-width:1100px;margin:auto}h1{font-size:24px;line-height:32px;margin:0 0 8px}h2{font-size:16px;line-height:24px;margin:0 0 20px}.sub{color:rgba(0,0,0,.6);margin:0 0 24px}.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:16px}.panel{background:white;border:1px solid #e8e8e8;border-radius:6px;padding:24px}label{display:block;margin-bottom:6px}input[type=text]{width:100%;height:36px;border:1px solid #ddd;border-radius:3px;padding:0 12px;font:inherit;margin-bottom:4px}input:focus,button:focus-visible{outline:2px solid #0052d9;outline-offset:3px}.hint{font-size:12px;color:#666;margin:0 0 20px}.toggle{display:flex;gap:8px;align-items:center;margin:18px 0 24px}.toggle input{accent-color:#0052d9;width:18px;height:18px}.toggle label{margin:0}button{font:inherit;border:1px solid #ddd;border-radius:3px;padding:5px 12px;background:white;color:#0052d9;cursor:pointer}button:hover{background:#f2f3ff}.primary{background:#0052d9;color:white;border-color:#0052d9;width:100%;margin-top:8px}.primary:hover{background:#366ef4}.error{color:#ad352f;min-height:22px;margin:0}.listhead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8e8e8;padding-bottom:16px;margin-bottom:0}.listhead h2{margin:0}.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:20px 0;border-bottom:1px solid #e8e8e8}.row strong{display:block;font-weight:600}.path{display:block;overflow-wrap:anywhere;font:12px/20px monospace;color:#666}.state{font-size:12px;color:#003cab}.row button{align-self:center;font-size:12px}.diagram{margin-top:24px;padding:16px;background:#f2f3ff;border-radius:3px;display:flex;align-items:center;gap:12px}.node{padding:8px 12px;background:white;border:1px solid #b5c7ff;border-radius:3px}.diagram span{color:#0052d9}.status{font-size:12px;color:#555;min-height:20px;margin:20px 0 0}.foot{font-size:12px;color:#666;margin:20px 0 0}#empty{padding:24px 0;color:#666}@media(max-width:680px){header{padding:16px}.layout{grid-template-columns:1fr}main{padding:20px 16px}.panel{padding:20px}.diagram{flex-wrap:wrap}.tag{font-size:12px}}
</style><header><span class="mark">T / Console</span><span class="tag">Local policy workspace</span></header><main><h1>API access rules</h1><p class="sub">Define which resources belong in your draft policy.</p><div class="layout"><section class="panel"><h2>Create a rule</h2><form id="editor" novalidate><label for="name">Rule name</label><input type="text" id="name" aria-describedby="error"><p class="hint">A short label your team can recognize.</p><label for="path">Resource path</label><input type="text" id="path" placeholder="/reports" aria-describedby="path-help error"><p class="hint" id="path-help">Start with /. Each path must be unique.</p><div class="toggle"><input id="enabled" type="checkbox" checked><label for="enabled">Enabled in this draft</label></div><p class="error" id="error" role="alert"></p><button class="primary">Add local rule</button></form><p class="foot">This editor does not connect to an API gateway.</p></section><section class="panel"><div class="listhead"><h2>Policy rules</h2><span id="count" class="tag"></span></div><div id="rules"></div><div class="diagram" aria-label="Illustrative policy flow"><div class="node">Client</div><span aria-hidden="true">→</span><div class="node">Policy draft</div><span aria-hidden="true">→</span><div class="node">Resource</div></div><p class="status" id="status" role="status">Two example rules are loaded locally.</p></section></div><p class="foot">HTML interpretation of TDesign light theme roles · Native React integration is provided in the guide.</p></main><script>
const $=id=>document.getElementById(id);let rules=[{id:1,name:'Reports read access',path:'/reports',enabled:true},{id:2,name:'Billing export',path:'/billing/export',enabled:false}];let next=3;
function render(){const host=$('rules');host.replaceChildren();$('count').textContent=rules.length+' rules';if(!rules.length){const p=document.createElement('p');p.id='empty';p.textContent='No rules in this draft. Add a resource to begin.';host.append(p)}for(const rule of rules){const row=document.createElement('div');row.className='row';const copy=document.createElement('div'),name=document.createElement('strong'),path=document.createElement('code'),state=document.createElement('span'),remove=document.createElement('button');name.textContent=rule.name;path.textContent=rule.path;path.className='path';state.textContent=rule.enabled?'Enabled':'Disabled';state.className='state';copy.append(name,path,state);remove.textContent='Remove';remove.setAttribute('aria-label','Remove '+rule.name);remove.onclick=()=>{rules=rules.filter(x=>x.id!==rule.id);render();$('status').textContent='Removed '+rule.name+' from this local draft.';$('name').focus()};row.append(copy,remove);host.append(row)}}
$('editor').onsubmit=e=>{e.preventDefault();$('error').textContent='';for(const id of ['name','path'])$(id).removeAttribute('aria-invalid');const name=$('name').value.trim(),path=$('path').value.trim();const fail=!name?['name','Enter a rule name.']:!path.startsWith('/')?['path','Start the resource path with /.']:rules.some(r=>r.path===path)?['path','This path already has a rule.']:null;if(fail){$('error').textContent=fail[1];$(fail[0]).setAttribute('aria-invalid','true');$(fail[0]).focus();return}rules.push({id:next++,name,path,enabled:$('enabled').checked});render();$('status').textContent='Added '+name+' locally. No policy was deployed.';$('name').value='';$('path').value='';$('name').focus()};render();
</script></html>
```

코드 참조

- 규칙은 화면에 표시된 샘플 컬렉션에만 존재합니다. 네이티브 Form 등록, 유효성 검사 콜백, Table 렌더링은 React에서 별도로 확인할 수 있습니다.

### 등록된 규칙 편집기와 행별 삭제 기능

Form에서 이름, 리소스 경로, 활성화 여부를 입력합니다. 애플리케이션 검증은 빈 이름, 잘못된 경로, 중복 리소스를 확인하고 이를 통과한 경우에만 로컬 Table 행을 추가합니다.

```
// npm install tdesign-react react react-dom
// main.jsx — a client-side React entry point
import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Button, Form, Input, Switch, Table} from 'tdesign-react';
import 'tdesign-react/es/style/index.css';
const {FormItem} = Form;
function AccessRules() {
  const [form] = Form.useForm();
  const [rules, setRules] = useState([]);
  const [notice, setNotice] = useState('No local rules yet.');
  const addRule = ({validateResult, fields}) => {
    if (validateResult !== true) return;
    const name = String(fields.name || '').trim();
    const path = String(fields.path || '').trim();
    const invalid = !name ? ['name','Enter a rule name.'] :
      !path.startsWith('/') ? ['path','Start the resource path with /.'] :
      rules.some(rule => rule.path === path) ? ['path','This path already has a rule.'] : null;
    if (invalid) {
      form.setFields([{name:invalid[0],status:'error',validateMessage:{type:'error',message:invalid[1]}}]);
      setNotice(invalid[1]); return;
    }
    setRules(previous => [...previous, {id:crypto.randomUUID(),name,path,enabled:!!fields.enabled}]);
    setNotice(`Added ${name} to this browser session. No access policy was deployed.`);
  };
  const columns = [
    {colKey:'name', title:'Rule'}, {colKey:'path', title:'Resource'},
    {colKey:'enabled', title:'State', cell:({row}) => row.enabled ? 'Enabled' : 'Disabled'},
    {colKey:'actions', title:'Action', cell:({row}) => <Button variant="text" onClick={() => {
      setRules(previous => previous.filter(item => item.id !== row.id));
      setNotice(`Removed ${row.name} locally.`);
    }}>Remove {row.name}</Button>}
  ];
  return <main style={{padding:24,maxWidth:960,margin:'auto',font:'var(--td-font-body-medium)'}}>
    <h1>API access rules</h1>
    <Form form={form} onSubmit={addRule} labelWidth={100}>
      <FormItem name="name" label="Rule name"><Input /></FormItem>
      <FormItem name="path" label="Resource path"><Input placeholder="/reports" /></FormItem>
      <FormItem name="enabled" label="Enabled" for="enabled"><Switch /></FormItem>
      <FormItem><Button type="submit" theme="primary">Add local rule</Button></FormItem>
    </Form>
    <p role="status">{notice}</p>
    <Table rowKey="id" data={rules} columns={columns} bordered hover />
  </main>;
}
createRoot(document.getElementById('root')).render(<AccessRules />);
```

코드 참조

- Table 열 및 rowKey 계약은 위 사양에 연결되어 있습니다.

- 이 예제는 로컬 React 상태만 변경합니다. 활성화된 레이블은 권한을 결정하지 않습니다.

- 설치/API 예제는 공식 소스를 기준으로 확인했습니다. 패키지 컴파일은 테스트된 오프라인 미리보기와 별개입니다.

## TDesign 디자인 시스템 에이전트 설정

### 구현 시작점

위의 전체 클라이언트 진입점 예제에서 HTML 루트 요소를 사용하세요. tdesign-react/es/style/index.css를 한 번 가져오세요. 버전을 고정하고 배포 전에 빌드 도구에서 테스트하세요.

```
npm install tdesign-react react react-dom
```

### 프로젝트를 위한 프롬프트

```
tdesign-react의 Form과 Table을 사용해 API 규칙 편집기를 만드세요. 의미에 맞는 --td-* 역할, 등록된 필드 키, 안정적인 행 ID, 명시적 유효성 검사, 로컬 상태를 정확히 알리는 메시지를 유지하세요.
```

## TDesign 디자인 시스템의 출처와 범위

독립적인 OpenDesign 참고 자료입니다. 미리보기는 오프라인 해석본이며 Tencent 소프트웨어도, 배포된 권한 부여 서비스도 아닙니다.

- TDesign React 패키지 설치 및 구현 계열입니다.

- 라이트 테마 시맨틱 라이트 색상 매핑입니다.

- 다크 테마 다크 모드 루트 선택자 및 역할 매핑입니다.

- 타이포그래피 글꼴, 크기 및 행간 정의입니다.

- 크기 토큰 기본 및 시맨틱 간격 별칭입니다.

- 모서리 반경 공개된 모서리 값입니다.

- Form 예제 등록, 제출 및 필드 오류 API입니다.

- Table 유형 행 식별 및 열 렌더링 규약입니다.

## TDesign 디자인 시스템 관련 자료

### Thumbtack Thumbprint

Thumbprint에 문서화된 v2 프리미티브를 사용해 서비스 탐색 인터페이스를 구현하세요. 간결한 제공업체 카드, 읽기 쉬운 비교 세부 정보, 명확한 선택 상태, 항상 표시되는 후보 목록을 포함합니다.

### Twilio Paste

Paste의 테마 및 버튼 규칙과 검증된 간격 체계를 적용해 알림 초안을 작성하고, 메시지 편집·검토·실제 전송을 명확히 구분하세요.

### Visa Product 디자인 시스템

Visa의 Nova CSS를 사용해 명세서 형식 선택 화면을 명확하게 구성하세요. 기본 라디오 컨트롤, 대비되는 헤더 색상, 검토 요약을 적용합니다. 정확한 1.6.5 테마 값, 확장 가능한 간격, 전체 스타일시트 통합 방식을 확인하세요.


- [구현 레퍼런스](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [출처](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [출처](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [출처](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [출처](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [출처](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [출처](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [지원 사양 읽기](https://github.com/Tencent/tdesign-react)
- [코드 참조](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [지원 사양 읽기](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [지원 사양 읽기](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [지원 사양 읽기](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [지원 사양 읽기](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [지원 사양 읽기](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [코드 참조](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [TDesign React 패키지 설치 및 구현 계열입니다.](https://github.com/Tencent/tdesign-react)
- [라이트 테마 시맨틱 라이트 색상 매핑입니다.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [다크 테마 다크 모드 루트 선택자 및 역할 매핑입니다.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [타이포그래피 글꼴, 크기 및 행간 정의입니다.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [크기 토큰 기본 및 시맨틱 간격 별칭입니다.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [모서리 반경 공개된 모서리 값입니다.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [Form 예제 등록, 제출 및 필드 오류 API입니다.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Table 유형 행 식별 및 열 렌더링 규약입니다.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)