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 (