email default 링크 추가

titicacadev · Dec 24, 2024 · 49488b9 · 49488b9
1 parent 365d9ee
commit 49488b9
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git 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(
+    <Links
+      value={{
+        links: [{ id: '', label: 'Default Styled Link', href: 'Test Href' }],
+        display: 'default',
+      }}
+    />,
+  )
+
+  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
@@ -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,13 +93,15 @@ declare module 'react' {
 }
 
 const LINK_BOXES = {
+  default: DefaultLinkBox,
   button: ButtonBox,
   block: BlockBox,
   largeButton: LargeBox,
   largeCompactButton: LargeBox,
 }
 
 const LINK_ELEMENTS = {
+  default: DefaultLink,
   button: ButtonLink,
   block: BlockLink,
   largeButton: LargeLink,
@@ -123,6 +141,14 @@ export default function LinksView({
   )
 }
 
+function DefaultLinkBox({ children }: PropsWithChildren<unknown>) {
+  return (
+    <DefaultBox padding={{ top: 10, left: 30, right: 30 }}>
+      {children}
+    </DefaultBox>
+  )
+}
+
 function ButtonBox({ children }: PropsWithChildren<unknown>) {
   return (
     <DefaultBox padding={{ top: 55, left: 30, right: 30 }}>