Link

링크는 클릭하면 새 위치로 이동하는 인라인 텍스트 요소예요.

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/link.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/link.json

class-variance-authority 를 설치하고 아래 코드를 components/ui/link.tsx 에 복사해요.

components/ui/steel/link.tsx

/** * @title Link * @description 다른 위치로 이동하는 인라인 텍스트 링크예요. 새 창 링크에는 아이콘과 스크린 리더 안내가 자동으로 붙어요. */import * as React from 'react';import { cva } from 'class-variance-authority';import { cn } from '@/lib/utils';export type LinkAppearance = 'default' | 'subtle' | 'inverse';/** * @atlaskit/link 해독 값 * - base: radius.xsmall, font-family body (크기·굵기는 주변 텍스트를 상속) * - default: color.link + 밑줄, hover/pressed 에서 밑줄이 사라지고 pressed 는 color.link.pressed * - subtle: color.text.subtle + 밑줄 없음, hover 에서 밑줄, pressed 는 color.text * - inverse: color.text.inverse + 밑줄, hover 에서 밑줄이 사라짐 (방문 색 없음) * - visited: color.link.visited / pressed 는 color.link.visited.pressed (inverse 제외) * - transition: 50ms (hover), 100ms (pressed) cubic-bezier(0.4,1,0.6,1) */const linkVariants = cva(  [    'relative box-border rounded-ds-xsmall font-ds-body underline decoration-solid',    'transition-[background-color,border-color,color,text-decoration-color] duration-50 ease-[cubic-bezier(0.4,1,0.6,1)] active:duration-100',    'outline-2 outline-offset-2 outline-transparent focus-visible:outline-ds-border-focused',  ],  {    variants: {      appearance: {        default:          'text-ds-link decoration-current hover:text-ds-link hover:decoration-transparent active:text-ds-link-pressed active:decoration-transparent',        subtle:          'text-ds-text-subtle decoration-transparent hover:text-ds-text-subtle hover:decoration-current active:text-ds-text active:decoration-current',        inverse:          'text-ds-text-inverse decoration-current visited:text-ds-text-inverse hover:text-ds-text-inverse hover:decoration-transparent active:text-ds-text-inverse active:decoration-transparent',      },      visited: {        true: 'visited:text-ds-link-visited visited:hover:text-ds-link-visited visited:focus:text-ds-link-visited visited:active:text-ds-link-visited-pressed',        false: '',      },    },    defaultVariants: { appearance: 'default', visited: true },  },);export interface LinkProps extends React.ComponentProps<'a'> {  /** 기본 `default`. `subtle` 은 평소엔 밑줄 없이 옅은 색, `inverse` 는 진한 배경 위에서 써요. */  appearance?: LinkAppearance;  /** `target="_blank"` 일 때 스크린 리더에 읽히는 안내. 기본 "(새 창에서 열림)" */  newWindowLabel?: string;  /** 자동화 테스트용 `data-testid` (새 창 아이콘은 `${testId}__icon`) */  testId?: string;}/** 새 창 아이콘 — @atlaskit/link 의 12×12 path 그대로, 0.9em 크기로 글자에 맞춘다 */function NewWindowIcon() {  return (    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden className="ms-[0.3em] inline h-[0.9em] w-[0.9em]">      <path        fillRule="evenodd"        clipRule="evenodd"        d="M0 1.82609C0 0.817938 0.817938 0 1.82609 0H3.91304V1.04348H1.82609C1.39424 1.04348 1.04348 1.39424 1.04348 1.82609V10.1739C1.04348 10.6058 1.39424 10.9565 1.82609 10.9565H10.1739C10.6058 10.9565 10.9565 10.6058 10.9565 10.1739V8.08696H12V10.1739C12 11.1821 11.1821 12 10.1739 12H1.82609C0.817938 12 0 11.1821 0 10.1739V1.82609ZM7.04348 0H12V4.95652H10.9565V1.78133L6.36893 6.36893L5.63107 5.63107L10.2187 1.04348H7.04348V0Z"        fill="currentColor"      />    </svg>  );}function Link({  appearance = 'default',  newWindowLabel = '(새 창에서 열림)',  testId,  target,  className,  children,  'aria-label': ariaLabel,  'aria-labelledby': ariaLabelledBy,  ...props}: LinkProps) {  const hiddenId = React.useId();  const isNewWindow = target === '_blank';  const showHiddenLabel = isNewWindow && ((children != null && !ariaLabel && !ariaLabelledBy) || Boolean(ariaLabelledBy));  return (    <a      data-slot="link"      data-appearance={appearance}      data-testid={testId}      target={target}      aria-label={ariaLabel && isNewWindow && !ariaLabelledBy ? `${ariaLabel} , ${newWindowLabel}` : ariaLabel}      aria-labelledby={ariaLabelledBy && isNewWindow ? `${ariaLabelledBy} ${hiddenId}` : ariaLabelledBy}      // inverse 는 대비 문제로 방문 색을 쓰지 않는다      className={cn(linkVariants({ appearance, visited: appearance !== 'inverse' }), className)}      {...props}    >      {children}      {isNewWindow && (        // 줄바꿈 시 아이콘만 다음 줄로 떨어지지 않도록 앞에 폭 없는 문자(U+FEFF)를 붙인다        <span data-testid={testId && `${testId}__icon`} className="relative top-[0.11em] inline align-baseline whitespace-nowrap">          {''}          <NewWindowIcon />        </span>      )}      {showHiddenLabel && (        <span id={hiddenId} className="sr-only">          {`, ${newWindowLabel}`}        </span>      )}    </a>  );}export { Link, linkVariants };

Examples

Appearance

default: 링크 색(color.link)과 밑줄로 일반 텍스트와 구분돼요. 마우스를 올리면 밑줄이 사라져요.
subtle: 평소에는 옅은 글자색에 밑줄이 없고, 마우스를 올리면 밑줄이 생겨요. 내비게이션이나 경로 표시처럼 링크라는 게 이미 분명한 곳에 써요.
inverse: 진한 배경 위에서 잘 보이도록 흰 글자에 밑줄을 그어요.

기본 링크 옅은 링크 (마우스를 올리면 밑줄)

진한 배경 위 링크

Visited

이미 방문한 링크는 보라색(color.link.visited)으로 보여요. inverse 는 대비 문제 때문에 방문 색을 쓰지 않아요.

이미 방문한 페이지 (지금 보는 문서)아직 방문하지 않은 페이지

Links that open in a new window or tab

target="_blank" 를 주면 링크 뒤에 새 창 아이콘이 자동으로 붙고, 스크린 리더에는 "(새 창에서 열림)" 이 함께 읽혀요. 안내 문구는 newWindowLabel 로 바꿀 수 있어요.

API 문서 보기, (새 창에서 열림)

In body text

본문 안의 링크는 여러 줄로 자연스럽게 감싸져요. 새 창 아이콘은 앞 글자와 붙어 있어 아이콘만 다음 줄로 떨어지지 않아요.

이번 릴리스에 포함된 변경 사항은 릴리스 노트에서 확인할 수 있어요. 배포 일정이 바뀌면 팀 캘린더와 서비스 상태 페이지, (새 창에서 열림)에 먼저 공유해요.

Inheriting font styles

링크는 글자 크기·굵기·행간을 주변 텍스트에서 그대로 물려받아요. 제목 안에서도, 작은 본문 안에서도 쓸 수 있어요.

결제 개편 에픽

작은 본문에서도 댓글 12개처럼 주변 글꼴을 그대로 따라요.

HTML attributes

rel, target, download 같은 <a> 의 속성은 그대로 전달돼요. 외부 사이트로 새 창을 열 때는 rel="noopener noreferrer" 를 함께 주세요.

변경 기록 (외부 사이트)회의록 내려받기 (ICO, 1KB)team@example.com 으로 메일 보내기

Usage guidelines

링크는 사람들을 새 위치로 보내요. 앱 안의 다른 화면이나 섹션, 외부 웹사이트로 이동하거나, 파일을 내려받거나, 전화번호·이메일 주소를 열 때 써요. 지금 화면에서 무언가를 실행하는 액션(폼 제출, 모달 열기)은 Button 을 써요. 버튼처럼 보여야 하는 이동은 LinkButton 을 써요.

Do· 본문에는 default

일반 문장 안의 링크는 밑줄과 색으로 구분되는 default 를 써요. 링크라는 게 이미 분명한 내비게이션에서는 subtle 을 써요.

Don't· 본문에 subtle

문장 속 링크에 subtle 을 쓰면 일반 텍스트와 구분되지 않아요.

Do· 목적지를 설명하는 라벨

"스프린트 12 보고서", "릴리스 노트"처럼 어디로 가는지 알 수 있게 써요.

Don't· 모호한 라벨

"여기", "자세히 보기"처럼 앞뒤 문맥 없이는 뜻을 알 수 없는 말에 링크를 걸지 않아요.

새 창으로 열기

기본은 같은 창에서 열어요. 새 창은 사람을 헷갈리게 할 수 있어요.
진행 중인 작업을 잃을 수 있을 때, 지금 앱을 벗어나거나 외부 사이트로 갈 때만 새 창으로 열어요.
새 창 아이콘을 숨기고 싶다면 정말 새 창이 필요한지 다시 생각해 봐요.

라벨 쓰기

한 페이지 안에서 다른 목적지에 같은 링크 텍스트를 반복하지 않아요.
다운로드 링크는 파일을 내려받는다는 사실과 파일 형식·크기를 함께 적어요. (예: "회의록 내려받기 (PDF, 2MB)")
링크를 너무 많이 넣지 않아요. 중요한 정보가 묻히고 지금 하던 일에서 주의를 빼앗아요.
본문에서는 목적지를 알려주는 데 필요한 단어에만 링크를 걸고 문장 전체에 걸지 않아요. 짧은 구절이 번역에도 유리해요.
동사는 링크의 목적을 분명히 하거나 다른 액션과 구분해야 할 때만 넣어요.
단독 링크는 구절 전체에 걸고, 끝에 문장 부호를 붙이지 않아요.

Accessibility

링크 텍스트만 읽어도 목적지나 목적을 알 수 있게 써요. 스크린 리더 사용자는 링크 목록만 따로 훑어보기도 해요.
일반 본문 안의 링크는 색만으로 구분하지 않도록 반드시 밑줄이 있는 default 를 써요.
링크 글자는 12px 이상으로 유지해 읽고 누르기 쉽게 해요.
target="_blank" 이면 화면에 보이지 않는 ", (새 창에서 열림)" 안내가 붙어요. aria-label 을 직접 줬다면 그 뒤에 안내가 이어 붙어요.
키보드: Tab 으로 포커스, Enter 로 이동해요. 포커스되면 2px 포커스 링이 보여요.

Props

Prop

Type

설치Copy Anchor Link

수동 설치

ExamplesCopy Anchor Link

AppearanceCopy Anchor Link

VisitedCopy Anchor Link

Links that open in a new window or tabCopy Anchor Link

In body textCopy Anchor Link

Inheriting font stylesCopy Anchor Link

결제 개편 에픽

HTML attributesCopy Anchor Link

Usage guidelinesCopy Anchor Link

새 창으로 열기Copy Anchor Link

라벨 쓰기Copy Anchor Link

AccessibilityCopy Anchor Link

PropsCopy Anchor Link

On this page

결제 개편 에픽

설치

Examples

Appearance

Visited

Links that open in a new window or tab

In body text

Inheriting font styles

HTML attributes

Usage guidelines

새 창으로 열기

라벨 쓰기

Accessibility

Props