CoreLink

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Link를 사용하세요.

CoreLink는 단일 props 기반 텍스트 하이퍼링크 컴포넌트입니다.

2가지 size — sm (body-1), md (body-2)
isUnderline — 텍스트 아래 밑줄 표시
trailingElement — 텍스트 뒤에 아이콘 배치
방문 상태 — visited 색상(purple[80]) 자동 적용
네이티브 <a> 기반 — href, target, rel 등 네이티브 props 지원

Usage

기본 사용법

<HStack $css={{ gap: '16px' }}>
<CoreLink href="https://example.com" text="링크 sm" size="sm" />
<CoreLink href="https://example.com" text="링크 md" size="md" />
</HStack>

Underline 표시

<HStack $css={{ gap: '16px' }}>
<CoreLink href="https://example.com" text="밑줄 없음" />
<CoreLink href="https://example.com" text="밑줄 있음" isUnderline />
</HStack>

Trailing Element (외부 링크 아이콘)

<CoreLink
href="https://featuring-front-core.vercel.app"
text="외부 링크"
trailingElement={<IconLaunchOutline />}
target="_blank"
rel="noopener noreferrer"
/>

문장 안에서 사용

<Typo typography="body2" color="text1">
자세한 내용은{' '}
<CoreLink href="https://example.com" text="공식 문서" isUnderline />를 참고하세요.
</Typo>

Props

ComponentPropsWithoutRef<'a'>를 확장한 컴포넌트입니다.

Prop

Type

CoreLinkSize

Prop

Type

스타일

Size Variants

Size	Typography
`sm`	`body[1]`
`md`	`body[2]`

Color States

상태	색상
Default	`blue[60]`
Hover	`blue[70]`
Active	`blue[80]`
Focus	`blue[70]` (outline: none)
Visited	`purple[80]`
Disabled	`text[5]`

Trailing 아이콘은 16 × 16px 고정 크기로 렌더링됩니다.

마이그레이션 가이드

Link는 Compound composition 패턴으로 더 유연한 레이아웃 구성을 지원합니다. underline prop 값이 세분화되었고, render prop으로 Next.js Link 등 라우터 연동이 가능합니다.

Before / After

// Before (CoreLink)
<CoreLink
  href="https://example.com"
  text="외부 링크"
  trailingElement={<IconLaunchOutline />}
  isUnderline
  target="_blank"
  rel="noopener noreferrer"
/>

// After (Link)
<Link.Root href="https://example.com" underline="always" target="_blank">
  <Link.Text>외부 링크</Link.Text>
  <Link.Icon><IconLaunchOutline /></Link.Icon>
</Link.Root>

변경 사항

CoreLink	Link
`text` prop	`Link.Text` 서브컴포넌트
`trailingElement`	`Link.Icon` 서브컴포넌트
`isUnderline` (boolean)	`underline`: `'always'` \| `'hover'` \| `'none'`
라우터 연동 불가	`render` prop으로 Next.js Link 등 연동
visited 자동 적용	`visited` prop으로 opt-out 가능

On this page