diff --git a/packages/triple-email-document/src/elements/links.test.tsx b/packages/triple-email-document/src/elements/links.test.tsx index 4ca54e9ee4..79145861f4 100644 --- a/packages/triple-email-document/src/elements/links.test.tsx +++ b/packages/triple-email-document/src/elements/links.test.tsx @@ -2,6 +2,26 @@ import { render, screen } from '@testing-library/react' import { ELEMENTS } from '../index' +test('디폴트형 링크 Element를 렌더링합니다.', () => { + const Links = ELEMENTS.links + + render( + , + ) + + const anchorElement = screen.getByRole('link') + + expect(anchorElement).toHaveAttribute('href', 'Test Href') + expect(anchorElement).toHaveStyleRule('color', '#2987f0') + expect(anchorElement).toHaveStyleRule('text-decoration', 'underline') + expect(anchorElement).toHaveTextContent('Default Styled Link') +}) + test('버튼형 링크 Element를 렌더링합니다.', () => { const Links = ELEMENTS.links diff --git a/packages/triple-email-document/src/elements/links.tsx b/packages/triple-email-document/src/elements/links.tsx index edfd2787b0..f5233bbbd3 100644 --- a/packages/triple-email-document/src/elements/links.tsx +++ b/packages/triple-email-document/src/elements/links.tsx @@ -15,10 +15,26 @@ export interface LinksDocument { type: 'links' value: { links: Link[] - display: 'button' | 'block' | 'largeButton' | 'largeCompactButton' + display: + | 'default' + | 'button' + | 'block' + | 'largeButton' + | 'largeCompactButton' } } +const DefaultLink = styled.a` + display: inline-block; + margin-right: 20px; + font-size: 15px; + font-weight: bold; + color: #2987f0; + text-decoration: underline; + overflow-wrap: break-word; + white-space: pre-line; +` + const ButtonLink = styled.a` padding: 13px 25px; display: inline-block; @@ -77,6 +93,7 @@ declare module 'react' { } const LINK_BOXES = { + default: DefaultLinkBox, button: ButtonBox, block: BlockBox, largeButton: LargeBox, @@ -84,6 +101,7 @@ const LINK_BOXES = { } const LINK_ELEMENTS = { + default: DefaultLink, button: ButtonLink, block: BlockLink, largeButton: LargeLink, @@ -123,6 +141,14 @@ export default function LinksView({ ) } +function DefaultLinkBox({ children }: PropsWithChildren) { + return ( + + {children} + + ) +} + function ButtonBox({ children }: PropsWithChildren) { return (