@t3q-ui/design-system 0.0.0-stage → 1.56.0

package/skills/tds/rules.md

@@ -0,0 +1,28 @@
+## TDS UI 규칙 (@t3q-ui/design-system)
+
+이 프로젝트의 UI 는 `@t3q-ui/design-system`(TDS) 으로 만든다. 아래 규칙을 따른다. 새 화면을 만드는 순서는 `/tds` Skill(`.claude/skills/tds/SKILL.md`)에 있다.
+
+### 규칙
+
+1. **Import first.** UI 는 `@t3q-ui/design-system` 의 기존 Public Component 를 우선 사용한다.
+2. **Do not recreate.** 존재하는 Component(Button, TextField, Select, Table, AgGridTable, Dialog, Drawer, Badge, Toast, Pagination, PageHeader …)를 직접 재구현하지 않는다. `<button>`, `<input>`, `<select>`, `<table>` 을 직접 쓰지 않는다.
+3. **Search first.** UI 코드를 쓰기 전에 아래 "조회 경로" 로 관련 Component 와 Pattern 을 먼저 찾는다.
+4. **Do not guess props.** Props·variant 이름을 추측하지 않는다. 조회해서 확인한 것만 쓴다.
+5. **Use Pattern.** 기존 Pattern(`@t3q-ui/design-system/patterns` — ListPage·DetailPage·FormPage·FormDrawer·FormDialog·DashboardLayout)이 있으면 Pattern 으로 시작한다. 화면 구조를 새로 설계하지 않는다. 상세 개요 탭의 블록(정보·표·목록)은 전부 `Panel` 안에 둔다 — 제목 + 표를 카드 없이 맨몸으로 두지 않는다(이웃이 카드인데 하나만 카드 밖이면 감점, 2026-10-21 18차). 카드 안의 표는 `Table`(가벼운 표)로 그리고 `AgGridTable`(회색 머리줄·테두리 상자)은 카드 안에 넣지 않는다(2026-10-21 19차).
+6. **Tokens only.** 색상은 `sys-*` System 토큰과 시맨틱 이름(`primary`, `danger`, `success`, `warning`, `info`, `secondary`)만. raw hex, Tailwind 기본 팔레트(`red-500`), 임의값(`bg-[#…]`, `p-[13px]`)을 쓰지 않는다. 간격은 2/4/6/8/12/16/24/32px 이고 **세 단계로 쓴다 — 붙어 있는 요소 8 · 한 묶음 안 16 · 묶음(섹션) 사이 32(폼 섹션 사이는 48)**. 같은 간격을 화면 전체에 반복하지 않는다. 나란히 놓인 버튼 사이는 8px. Component 외형은 `variant` / `size` prop 으로 바꾸고 `className` 으로 색·배경·라운드를 덧씌우지 않는다.
+7. **One main.** 페이지 내용은 앱 레이아웃의 `<main>` **하나** 안에 둔다. Pattern 본문은 `<section>` 이므로 `<main>` 을 또 만들지 않는다. `<main>` 에 padding·max-width·배경을 주지 않는다 — Pattern 이 헤더 띠(화면 끝까지)와 본문 여백(24px)을 가진다(`<main className='p-8'>` 로 감싸면 헤더가 가장자리에서 떠 보인다). **사이드바·상단바 같은 앱 셸을 새로 그리지 않는다** — 과제는 페이지 하나이고 Pattern 이 헤더(제목·행동)를 그린다. 셸이 꼭 필요하면 `DashboardLayout` 을 쓰고, `fixed` 사이드바로 Pattern 을 덮지 않는다(2026-10-20 17차: Codex 가 그린 사이드바가 ListPage 제목을 덮어 27점).
+8. **Verify.** 구현 후 프로젝트의 타입검사와 빌드(예: `tsc --noEmit`, `vite build` 또는 `next build`)가 통과하는지 확인한다.
+9. **Cover the request.** 요청문에 적힌 요소와 동작(열, 필터와 건수, 정렬 표시, 상세 항목, 버튼과 비활성 사유, 확인 창, 로딩·빈·오류 상태, 제출 중 상태)은 **빠짐없이** 구현한다. Pattern 이 제공하지 않는 것은 생략하지 말고 Pattern 의 슬롯(`filters`·`titleRight`·`detail`·`banner`·`footer`·`note`·`actionsNote`) 안에 Component 로 만든다. 마지막에 요청문을 체크리스트로 삼아 하나씩 대조한다.
+
+### 조회 경로
+
+Storybook MCP 서버 `tds-storybook` 이 정본이다. 추측하기 전에 조회한다.
+
+- `docs-list` — Component·Pattern 목록과 ID
+- `docs-show` — ID 하나의 설명(언제 쓰나 / 언제 안 쓰나 / 대신)·props·variant
+- `docs-show-story` — 특정 story 의 코드 예시
+
+MCP 를 부르지 않는 도구(Codex 등)이거나 MCP 가 없거나 응답하지 않으면 Skill 안의 **`reference/components.md`** 를 읽는다 — `docs-list`·`docs-show`·`docs-show-story` 와 같은 내용(ID · 언제 쓰나 / 안 쓰나 / 대신 · props · 예시 코드)을 파일로 둔 것이다(Claude `.claude/skills/tds/reference/components.md`, Codex `.agents/skills/tds/reference/components.md`). 그것도 없으면 설치된 패키지의 타입 선언을 읽는다. 각 선언 위 JSDoc 에 "언제 쓰나 / 언제 안 쓰나 / 대신" 이 있다.
+
+- Component: `node_modules/@t3q-ui/design-system/dist/index.d.ts`
+- Pattern: `node_modules/@t3q-ui/design-system/dist/patterns/index.d.ts`