ID 복사
문서 고유 ID(DEUX-<시스템>-<8자>)를 클립보드로 복사하는 작은 버튼이다. ID 글자는 평소에 보이지 않고, 복사한 순간에만 버튼 아래 토스트로 잠깐 보인다. 카드 전체가 링크인 자리에 놓여도 복사 클릭이 이동으로 번지지 않는다. ID 형식과 목록 정의는 @duolabs-deux/contracts 의 defineDocumentationIds 가 맡는다.
상태
기본
compact
활용 방법
카탈로그 카드
카드 머리 오른쪽에 아이콘만 둔다. 카드가 링크여도 복사만 일어난다.
Preview
사업자등록 확인
형식 검사 뒤 국세청 상태를 조회한다.
tsx
<CopyId id={UNIT_IDS["biz-registry"]} label="유닛 ID" compact />
상세 제목 옆
상세 화면 머리에는 라벨이 붙은 기본 모양을 둔다.
Preview
결재·승인 요청
tsx
<h1>결재·승인 요청</h1><CopyId id={FLOW_IDS["/approval-request"]} label="플로우 ID" />
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| id | string | - | 복사할 ID |
| label | string | "ID" | 무엇의 ID 인지. 접근 가능한 이름과 툴팁에 「<label> 복사」로 쓴다 |
| compact | boolean | false | 아이콘만(카드 · 목록용). 기본은 아이콘과 「ID 복사」 |
| className | string | - | button root 클래스 |
| ...props | Omit<ComponentPropsWithoutRef<"button">, "children" | "type"> | - | 네이티브 button 속성. onClick 은 복사 뒤가 아니라 복사 전에 불린다 |