코드 · uyoolabs ui

코드

코드는 파인 면에 둡니다. 인라인 코드와 같은 재질이고 솟은 키캡(kbd)과 모양부터 다릅니다.

머리 줄에 언어 · 이름 · 줄 바꿈 · 복사를 두고, 긴 줄은 가로로 스크롤합니다. 20줄을 넘으면 앞 3줄과 ‘n줄 모두 보기’ 로 접습니다(그라데이션으로 흐리지 않습니다). 구문 하이라이트는 하지 않습니다. 단색이고 줄 전체가 주석인 줄만 흐린 글자입니다. 복사는 누른 순간 동기로 쓰고, 막히면 그 자리에 읽기 전용 칸을 펼칩니다.

import: import { CodeBlock, Snippet } from "@uyoolabs/ui/ui";
고르는 법: 문장 속 짧은 코드 · 값 → 인라인 Code. 명령 한 줄(설치 · CLI) → Snippet. 여러 줄 코드 · 설정 · 터미널 출력 → CodeBlock(터미널은 tone="dark"). ID · 키 하나를 복사 → IdValue.
쓰지 않는 경우: 키 조합을 CodeBlock · 인라인 코드로 적지 않습니다(Kbd). 화면에 비밀 키 전체를 늘 펼쳐 두지 않습니다 — 가린 값 + 복사 단추로 둡니다. 구문 색을 손으로 칠하지 않습니다. 코드 블록 안에 코드 블록 · 카드를 두지 않습니다.
복사 확인: ‘복사했습니다’ 는 2초 보입니다. 단추의 이름은 그대로이고 결과는 옆 라이브 영역이 말합니다. 단추 폭은 두 글자 중 긴 쪽에 고정됩니다.

CodeBlock

figure 의 이름은 title, 없으면 ‘{언어} 코드’ 입니다. 줄 번호는 읽기 · 복사에 섞이지 않습니다.

tswebhook.ts

1// PG 웹훅 서명을 검증한다. 같은 길이로 견주어 타이밍 공격을 막는다2export function verify(body: string, signature: string) {3  const mac = createHmac("sha256", process.env.PG_SECRET!);4  mac.update(body);5  return timingSafeEqual(Buffer.from(mac.digest("hex")), Buffer.from(signature, "hex"));6}

bash터미널

$ pnpm uyoo codemod v2 ./apps/web  바꿈 312곳 · 손볼 곳 4곳(MIGRATION.md 를 본다)$ pnpm test  Tests  86 passed (86)

키	동작
`Enter`·`Space`	줄 바꿈 · 복사 · ‘n줄 모두 보기’ 를 누른다
`Tab`	코드 본문이 넘칠 때만 들어온다(안쪽 2px 링)
`←`·`→`·`↑`·`↓`·`Home`·`End`	넘치는 본문을 민다
복사 실패	실패 칸이 열리고 포커스가 읽기 전용 칸으로 가서 글 전체가 골라진다 → ⌘/Ctrl+C
`Esc`	실패 칸을 닫고 포커스를 복사 단추로 돌린다(‘닫기’ 와 같다)

Snippet

설치 · CLI 명령 한 줄. 넘치면 스크롤 막대 없이 가로로 밀고, 아이콘 단추의 이름은 ‘명령 복사’ 입니다.

pnpm add @uyoolabs/ui@2.0.0-beta.4

props

소스의 타입과 JSDoc 에서 생성한 표입니다. 컴포넌트를 고치면 pnpm gen 으로 다시 만듭니다.

CodeBlock

prop	타입	기본값	설명
code필수	string	—	코드 원문. 끝의 줄바꿈 하나는 버린다
language	string	—	머리의 언어 라벨(12 mono muted). 없으면 라벨을 숨긴다('text' 를 쓰지 않는다)
title	ReactNode	—	파일 이름 · 무엇인지. figure 의 이름이 된다
lineNumbers	boolean	false	줄 번호(3ch muted). 복사 · 읽기에 섞이지 않는다
startLine	number	1	발췌한 코드의 실제 첫 줄 번호
highlightLines	readonly number[]	—	강조할 줄(실제 줄 번호). primary-soft 면만 바꾸고 왼쪽 세로 강조선을 쓰지 않는다
wrap	boolean	—	줄 바꿈(제어). 바꾸려면 onWrapChange 를 함께 준다
defaultWrap	boolean	false	줄 바꿈 처음 값(비제어). 머리의 줄 바꿈 단추가 바꾼다
onWrapChange	(wrap: boolean) => void	—	줄 바꿈 단추를 눌렀을 때
maxLines	number	20	이 줄 수를 넘으면 앞 3줄 + ‘n줄 모두 보기’ 로 접는다
copyable	boolean	true	복사 단추
tone	"default" \| "dark"	"default"	dark = 터미널. 라이트 화면 안에서도 다크 토큰으로 그린다([data-tone="dark"], W1 결정 #8)
lang	"ko" \| "en" \| "ja"	—	문구 언어. 기본 ko
labels	Partial<CodeBlockLabels>	—	기본 문구 중 바꿀 것만
className	string	—

Snippet

prop	타입	기본값	설명
command필수	string	—	명령 한 줄. 넘치면 가로 스크롤(스크롤 막대 숨김)
prompt	string \| false	"$"	앞의 프롬프트. 복사되지 않고 읽히지 않는다. false 면 그리지 않는다
lang	"ko" \| "en" \| "ja"	—	문구 언어. 기본 ko
labels	Partial<CodeBlockLabels>	—	기본 문구 중 바꿀 것만(copyCommand · copied · copyFailed …)
className	string	—