TextLink

문장 안에서든 혼자서든, 링크를 텍스트로 표현합니다. 표면도 고유한 높이도 없습니다. 아래에 그어지는 선과, 새 탭이나 새 창을 여는 링크에 붙는 표식이 전부입니다.

import { TextLink } from 'neba';

<TextLink href="/components/">컴포넌트</TextLink>
<TextLink href="https://neba.cdget.com/components/" newTab>모든 컴포넌트</TextLink>
<TextLink href="/guide/getting-started" underline="hover" color="primary">시작하기</TextLink>;

Props

Prop	타입	기본값	설명
href *	string	—	링크가 가리키는 곳
underline	'always' | 'hover' | 'none'	'always'	밑줄을 언제 그릴지. color가 기본적으로 없으므로 always가 기본값입니다. 선이 없으면 문장 속에서 링크를 구분할 단서가 남지 않습니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	—	의미론적 색 역할. 기본값이 없습니다. 문단 안의 링크는 대개 그 문단의 색을 그대로 씁니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	타입 스케일. 이것도 기본값이 없습니다. 문장 속 링크는 그 문장의 크기입니다
newTab	boolean	false	새 탭에서 엽니다. rel로 window.opener를 끊고, icon을 켜며, screen reader용 문장을 덧붙입니다
icon	ReactNode | boolean	newTab	라벨 뒤의 표식. true는 newTab이면 상자를 벗어나는 화살표를, 아니면 사슬을 그립니다. 노드를 주면 그 글리프로 바뀝니다
locale	string	'en'	screen reader용 문장의 언어. BCP 47 태그(ko, pt-BR, zh-Hant). 모르는 태그는 영어로 돌아갑니다
render	useRender.RenderProp	—	a 대신 다른 요소로 렌더링합니다. 대개 router가 주는 Link. href는 그대로 전달되므로 한 번만 쓰면 됩니다
children	ReactNode	—	링크의 라벨

나머지 <a> 속성은 모두 전달됩니다. rel만 예외로, 덮어쓰는 대신 합쳐집니다. 아래 newTab을 보세요.

공통 축 가운데 color와 size에는 기본값이 없습니다. 문단 안의 링크는 그 문단의 색이자 그 문단의 크기이기 때문입니다. 나머지 어휘는 Prop 규약에 있습니다.

루트에는 neba-link 클래스가 붙습니다. a를 태그 이름으로 스타일링하는 스타일시트(.prose a를 비롯한 대부분의 CSS 프레임워크)가 예외로 빼낼 수 있는 후크입니다. .prose a:not(.neba-link) { … }처럼 씁니다.

예시

underline

기본값은 always입니다. hover는 포인터가 올라갔을 때만 선을 긋고, none은 아예 긋지 않습니다. none은 링크임을 이미 다른 것이 말해 주고 있을 때(nav 바, footer, 제목 아래 나란히 놓인 줄) 씁니다.

import { TextLink } from 'neba';

export default function TextLinkUnderline() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <TextLink href="/components/">always</TextLink>
      <TextLink href="/components/" underline="hover">
        hover
      </TextLink>
      <TextLink href="/components/" underline="none" color="primary">
        none
      </TextLink>
    </div>
  );
}

hover는 선만 바꾸고 글자 색은 건드리지 않습니다. 포인터 아래에서 색이 바뀌는 단어는 읽고 있던 줄에서 시선을 떼어 놓습니다.

color

color가 없으면 링크는 주위 텍스트의 색을 그대로 씁니다. 여섯 가지 역할 색 중 하나를 주면 라벨과 선이 함께 물듭니다.

import { TextLink } from 'neba';

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

export default function TextLinkColors() {
  return (
    <div className="flex flex-col gap-4">
      <p className="m-0 text-[0.8125rem]/[1.375rem]">
        With no <code>color</code> a link is{' '}
        <TextLink href="/components/">the colour of the sentence</TextLink> it sits in.
      </p>

      <div className="flex flex-wrap items-center gap-5">
        {COLORS.map((color) => (
          <TextLink key={color} href="/components/" color={color}>
            {color}
          </TextLink>
        ))}
      </div>
    </div>
  );
}

size

이것도 기본값이 없습니다. 문장 속 링크는 그 문장의 크기입니다. 혼자 서 있는 링크에는 size를 주면 되고, 줄바꿈이 일어나는 텍스트에 맞는 행간까지 함께 따라옵니다.

import { TextLink } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function TextLinkSizes() {
  return (
    <div className="flex flex-wrap items-baseline gap-5">
      {SIZES.map((size) => (
        <TextLink key={size} href="/components/" size={size} color="primary">
          {size}
        </TextLink>
      ))}
    </div>
  );
}

newTab과 icon

newTab은 target="_blank"와, 새 페이지가 window.opener로 되돌아오지 못하게 하는 rel을 함께 붙입니다. 동시에 icon을 켭니다. 독자 아래에서 창이 바뀌는 것은 링크에서 유일하게 벌어지고 난 뒤에야 알 수 있는 일이기 때문입니다.

rel을 직접 넘기면 덮어쓰는 대신 합쳐집니다. rel="nofollow"는 SEO 결정이지 보안 결정이 아니므로, 그것 때문에 noopener가 빠지는 일은 없습니다. newTab rel="nofollow"는 nofollow noopener noreferrer가 됩니다. 같은 탭 링크의 rel은 그대로 둡니다.

icon은 양쪽 모두를 덮어씁니다. 새 탭 링크에 표식을 없애려면 false, 같은 탭 링크에 표식을 붙이려면 true, 글리프 자체를 바꾸려면 노드를 넘깁니다.

import { TextLink } from 'neba';

function DownloadIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <path
        d="M8 2.75v7m0 0L5.25 7M8 9.75 10.75 7M3 12.5h10"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export default function TextLinkExternal() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <TextLink href="https://neba.cdget.com/components/" newTab>
        New tab
      </TextLink>
      <TextLink href="https://neba.cdget.com/components/" newTab icon={false}>
        No mark
      </TextLink>
      <TextLink href="/components/" icon>
        Same tab, marked
      </TextLink>
      <TextLink href="/neba.zip" icon={<DownloadIcon />} color="secondary">
        A glyph of its own
      </TextLink>
    </div>
  );
}

locale

newTab은 화면에 그려지지 않고 읽히기만 하는 "(새 창에서 열림)" 문장을 덧붙입니다. locale은 그 문장을 어느 언어로 쓸지를 정하며, ko, pt-BR, zh-Hant 같은 BCP 47 태그를 받습니다. 번역이 없는 태그는 영어로 돌아갑니다.

<TextLink href="https://neba.cdget.com/components/" newTab locale="ko">
  모든 컴포넌트
</TextLink>

render

render는 다른 것은 그대로 둔 채 요소만 바꿉니다. 대개는 router가 주는 Link입니다. href는 TextLink에 그대로 두면 되므로 한 번만 씁니다.

import Link from 'next/link';

<TextLink href="/components/" render={<Link href="/components/" />}>
  컴포넌트
</TextLink>;

접근성

• 새 탭에서 열리는 링크는 그 사실을 accessible name에 담습니다. 페이지의 언어로 읽히도록 locale을 지정하세요.
• underline="none"은 색만을 링크의 단서로 남깁니다. 색만으로는 모든 독자에게 전달되지 않으므로, 주변 레이아웃이 이미 링크임을 말하고 있는 자리에만 쓰세요.
• focus ring은 color가 없어도 그려집니다. 사라지는 대신 primary ring으로 돌아갑니다.