diff --git a/packages/core/lib/components/Link.tsx b/packages/core/lib/components/Link.tsx index 0111b12..2397b5c 100644 --- a/packages/core/lib/components/Link.tsx +++ b/packages/core/lib/components/Link.tsx @@ -6,6 +6,7 @@ export type LinkProps = { color?: Color; children: React.ReactNode; className?: string; + title?: string; } & React.ComponentPropsWithoutRef; export const Link = ({ @@ -14,6 +15,7 @@ export const Link = ({ color = 'gray-90', children, className = '', + title, ...props }: LinkProps) => { const sizeClass = { @@ -31,6 +33,8 @@ export const Link = ({ return ( {children} diff --git a/packages/core/lib/components/LinkButton.tsx b/packages/core/lib/components/LinkButton.tsx index d3740fb..4a10d20 100644 --- a/packages/core/lib/components/LinkButton.tsx +++ b/packages/core/lib/components/LinkButton.tsx @@ -8,6 +8,7 @@ export type LinkButtonProps = { children: React.ReactNode; className?: string; link: string; + title?: string; } & React.ComponentPropsWithoutRef; export const LinkButton = ({ @@ -16,6 +17,7 @@ export const LinkButton = ({ children, className = '', link, + title, ...props }: LinkButtonProps) => { const baseStyles = @@ -52,6 +54,7 @@ export const LinkButton = ({ href={link} role="link" weight={variantStyles.weight} + title={title} {...props} > {children} diff --git a/stories/core/LinkButton.stories.ts b/stories/core/LinkButton.stories.ts index c117c70..1d9f34b 100644 --- a/stories/core/LinkButton.stories.ts +++ b/stories/core/LinkButton.stories.ts @@ -33,6 +33,7 @@ export const Accent: Story = { variant: 'accent', children: '링크 버튼: Accent', link: 'https://uiux.egovframe.go.kr/guide/index.html', + title: 'uiux.egovframe.go.kr 이동', }, }; @@ -40,6 +41,7 @@ export const Default: Story = { args: { children: '링크 버튼: Default', link: 'https://uiux.egovframe.go.kr/guide/index.html', + title: 'uiux.egovframe.go.kr 이동', }, }; @@ -47,6 +49,7 @@ export const Small: Story = { args: { children: '링크 버튼: Default', link: 'https://uiux.egovframe.go.kr/guide/index.html', + title: 'uiux.egovframe.go.kr 이동', size: 'small', }, }; @@ -55,6 +58,7 @@ export const Medium: Story = { args: { children: '링크 버튼: Default', link: 'https://uiux.egovframe.go.kr/guide/index.html', + title: 'uiux.egovframe.go.kr 이동', size: 'medium', }, }; @@ -63,6 +67,7 @@ export const Large: Story = { args: { children: '링크 버튼: Default', link: 'https://uiux.egovframe.go.kr/guide/index.html', + title: 'uiux.egovframe.go.kr 이동', size: 'large', }, }; @@ -71,6 +76,7 @@ export const popupLink: Story = { args: { children: '팝업 링크 버튼', link: 'https://uiux.egovframe.go.kr/guide/index.html', + title: 'uiux.egovframe.go.kr 이동', target: '_blank', rel: 'noopener noreferrer', },