From ec938ac938e4cc14478b78ba4a33174cdcbdb64d Mon Sep 17 00:00:00 2001
From: "Lukas.J.Han" <lukas.j.han@gmail.com>
Date: Sat, 10 Aug 2024 11:49:55 +0900
Subject: [PATCH] feat: add link button

Signed-off-by: Lukas.J.Han <lukas.j.han@gmail.com>
---
 packages/core/lib/components/LinkButton.tsx | 60 ++++++++++++++++
 packages/core/lib/index.ts                  |  3 +-
 stories/core/LinkButton.stories.ts          | 77 +++++++++++++++++++++
 3 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/lib/components/LinkButton.tsx
 create mode 100644 stories/core/LinkButton.stories.ts

diff --git a/packages/core/lib/components/LinkButton.tsx b/packages/core/lib/components/LinkButton.tsx
new file mode 100644
index 0000000..d3740fb
--- /dev/null
+++ b/packages/core/lib/components/LinkButton.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Color } from '../colors/color.type';
+import { Link } from './Link';
+
+export type LinkButtonProps<E extends React.ElementType> = {
+  variant?: 'accent' | 'default';
+  size?: 'small' | 'medium' | 'large';
+  children: React.ReactNode;
+  className?: string;
+  link: string;
+} & React.ComponentPropsWithoutRef<E>;
+
+export const LinkButton = <E extends React.ElementType = 'a'>({
+  variant = 'default',
+  size = 'medium',
+  children,
+  className = '',
+  link,
+  ...props
+}: LinkButtonProps<E>) => {
+  const baseStyles =
+    'px-2 py-2 underline inline-flex items-center justify-center rounded-4 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200';
+
+  const variantStyles: {
+    style: string;
+    color: Color;
+    weight: 'regular' | 'bold';
+  } = {
+    accent: {
+      style: 'hover:bg-secondary-5',
+      color: 'primary' as Color,
+      weight: 'bold' as const,
+    },
+    default: {
+      style: 'hover:bg-secondary-5',
+      color: 'gray-90' as Color,
+      weight: 'regular' as const,
+    },
+  }[variant];
+
+  const linkSize = {
+    small: 's' as const,
+    medium: 'm' as const,
+    large: 'l' as const,
+  }[size];
+
+  return (
+    <Link
+      className={`${baseStyles} ${variantStyles.style} ${className}`}
+      size={linkSize}
+      color={variantStyles.color}
+      href={link}
+      role="link"
+      weight={variantStyles.weight}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};
diff --git a/packages/core/lib/index.ts b/packages/core/lib/index.ts
index bf2fcd6..5888643 100644
--- a/packages/core/lib/index.ts
+++ b/packages/core/lib/index.ts
@@ -9,6 +9,7 @@ import { Link } from './components/Link';
 import { colors } from './colors/color';
 
 import { Button } from './components/Button';
+import { LinkButton } from './components/LinkButton';
 
 export { Display, Heading, Title, Body, Detail, Label, Link, colors };
-export { Button };
+export { Button, LinkButton };
diff --git a/stories/core/LinkButton.stories.ts b/stories/core/LinkButton.stories.ts
new file mode 100644
index 0000000..c117c70
--- /dev/null
+++ b/stories/core/LinkButton.stories.ts
@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { LinkButton } from '../../packages/core/lib';
+
+const meta = {
+  title: 'Components/Link',
+  component: LinkButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: ['accent', 'default'],
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'medium', 'large'],
+      },
+    },
+  },
+} satisfies Meta<typeof LinkButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Accent: Story = {
+  args: {
+    variant: 'accent',
+    children: '링크 버튼: Accent',
+    link: 'https://uiux.egovframe.go.kr/guide/index.html',
+  },
+};
+
+export const Default: Story = {
+  args: {
+    children: '링크 버튼: Default',
+    link: 'https://uiux.egovframe.go.kr/guide/index.html',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: '링크 버튼: Default',
+    link: 'https://uiux.egovframe.go.kr/guide/index.html',
+    size: 'small',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    children: '링크 버튼: Default',
+    link: 'https://uiux.egovframe.go.kr/guide/index.html',
+    size: 'medium',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: '링크 버튼: Default',
+    link: 'https://uiux.egovframe.go.kr/guide/index.html',
+    size: 'large',
+  },
+};
+
+export const popupLink: Story = {
+  args: {
+    children: '팝업 링크 버튼',
+    link: 'https://uiux.egovframe.go.kr/guide/index.html',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+};