feat: implement for TextLink component

frontend/apps/service-site/src/features/posts/components/LinkText/LinkText.module.css

@@ -0,0 +1,13 @@
+.link {
+  color: var(--primary-color);
+
+  &:hover {
+    background-image: linear-gradient(
+      var(--primary-color),
+      var(--primary-color)
+    );
+    background-size: 100% 1px;
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+  }
+}

frontend/apps/service-site/src/features/posts/components/LinkText/LinkText.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { LinkText } from '.'
+
+const StoryComponent = () => {
+  return <LinkText href="https://www.google.com">dummy</LinkText>
+}
+
+const meta = {
+  component: StoryComponent,
+} satisfies Meta<typeof StoryComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

frontend/apps/service-site/src/features/posts/components/LinkText/LinkText.tsx

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'react'
+import styles from './LinkText.module.css'
+
+type Props = PropsWithChildren & {
+  href: string
+}
+
+export const LinkText = ({ children, ...props }: Props) => {
+  return (
+    <a {...props} className={styles.link} href={props.href}>
+      {children}
+    </a>
+  )
+}

frontend/apps/service-site/src/features/posts/components/LinkText/index.ts

@@ -0,0 +1 @@
+export * from './LinkText'

frontend/apps/service-site/src/features/posts/components/index.ts

@@ -12,6 +12,7 @@ export * from './PostCategories'
 export * from './PostTags'
 export * from './PostWriter'
 export * from './OrderList'
+export * from './LinkText'
 
 export * from './PostDetailPage'
 export * from './PostListPage'

frontend/apps/service-site/src/libs/contentlayer/MDXContent.tsx

@@ -5,6 +5,7 @@ import {
   Code,
   Heading,
   LinkCard,
+  LinkText,
   OrderList,
 } from '@/features/posts'
 import type { MDXComponents } from 'mdx/types'
@@ -52,6 +53,13 @@ const mdxComponents: MDXComponents = {
   ol: ({ children, ...props }) => {
     return <OrderList {...props}>{children}</OrderList>
   },
+  a: ({ children, href = '#', ...props }) => {
+    return (
+      <LinkText href={href} {...props}>
+        {children}
+      </LinkText>
+    )
+  },
 }
 
 type Props = {