단축키 · 코드 · 링크

글 속의 키 · 코드 · 링크입니다. 솟은 것은 누르는 것(키캡), 파인 것은 적는 것(코드)입니다.

키캡은 오른쪽 아래로 (2, 2) 두께가 있는 솟은 키이고, 메뉴 · 버튼 · 툴팁 안의 sm 만 (1, 1) 입니다. Mac 은 기호(⌘ ⌥ ⇧ ⌃ ↵), Windows · Linux 는 글자(Ctrl · Alt · Shift · Enter)이고 키캡에 찍히는 글자는 언어와 상관없이 자판의 각인대로 둡니다. 기호는 스크린 리더가 읽지 못해 Keys 는 '커맨드 K' 같은 읽는 말을 함께 둡니다.

링크는 밑줄이 늘 있고(글자색 45%, hover 에 100%) 색만으로 링크를 말하지 않습니다. 앱 안 링크는 LinkProvider 가 준 라우터 링크로 그립니다.

import: import { Kbd, Keys, Code, TextLink, usePlatform } from "@uyoolabs/ui/ui";
쓰는 경우: 단축키 목록 · 메뉴 항목의 단축키 · 버튼 꼬리('저장 ⌘↵') · 작성창 안내에 Kbd · Keys 를, 문서 · 메시지 본문의 코드에 Code 를, 글 속 링크에 TextLink 를 씁니다.
쓰지 않는 경우: 키가 아닌 값(코드 · 식별자 · 경로)에 Kbd 를 쓰지 않습니다(Code 나 IdValue). '+' 를 넣어 조합을 적지 않습니다. 클라이언트에서 navigator 로 플랫폼을 추측해 첫 렌더를 바꾸지 않습니다(하이드레이션). 링크의 밑줄을 지우지 않습니다.

Kbd · Keys

md 22(2, 2) · sm 18(1, 1).

동작	Mac	Windows · Linux
검색	`⌘K커맨드 K`	`CtrlK컨트롤 K`
명령 팔레트	`⇧⌘P시프트 커맨드 P`	`ShiftCtrlP시프트 컨트롤 P`
보내기	`⌘↵커맨드 엔터`	`CtrlEnter컨트롤 엔터`
줄바꿈	`⇧↵시프트 엔터`	`ShiftEnter시프트 엔터`

/Esc⌘K

Code · TextLink

코드는 파인 홈이고 줄이 바뀌면 상자가 줄마다 이어집니다.

저장소 org/payments 의 main 브랜치에 반영됩니다. 자세한 값은 결제 설정에서 바꿉니다. PG 문서 (새 탭에서 열림)

키보드

키	동작
`Tab`	TextLink 로 옮깁니다. Kbd · Keys · Code 는 포커스를 받지 않습니다.
`Enter`	링크를 엽니다. 바깥 링크는 새 탭에서 열립니다.

props

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

Kbd

prop	타입	기본값	설명
size	"sm" \| "md"	"md"	md 22(2, 2) · sm 18(1, 1). 메뉴 · 버튼 · 툴팁 안은 sm
children필수	ReactNode	—
className	string	—

Keys

prop	타입	기본값	설명
keys필수	readonly KeyName[]	—	["mod", "K"] · ["shift", "enter"]. 키 이름이 아닌 글자는 그대로 키캡에 적는다
platform	"mac" \| "other"	"other"	기본 other(Windows · Linux)
size	"sm" \| "md"	"md"
lang	"ko" \| "en" \| "ja"	—
labels	Partial<KeysLabels>	—
className	string	—

Code

prop	타입	기본값	설명
children필수	ReactNode	—
className	string	—

TextLink

prop	타입	기본값	설명
href	string	—
external	boolean	—	새 탭 + 아이콘 + sr 문장
asChild	boolean	—	자식 링크 요소에 모양만 입힌다
lang	"ko" \| "en" \| "ja"	—
labels	Partial<TextLinkLabels>	—
children필수	ReactNode	—

이 밖에 <a> props(href 제외)를 그대로 받습니다.