From 13f74ca8518384b7381d431536e54e2ec5980870 Mon Sep 17 00:00:00 2001
From: steven-yn <ssungyeon94@gmail.com>
Date: Sat, 2 Mar 2024 15:43:58 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=A1=B4=20Button=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20LinkedButton=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=84=B0=EB=A7=81=ED=9B=84=20=EA=B3=B5=EC=9A=A9=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A5=BC=20=EC=83=88=EB=A1=9C=20=EB=A7=8C=EB=93=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Contact/Contact.tsx            |  6 +-
 src/components/MainProject/MainProject.tsx    |  6 +-
 ...{ButtonBoard.tsx => LinkedButtonBoard.tsx} | 11 ++-
 src/composable/Button/Button.css.ts           | 75 ++-----------------
 src/composable/Button/Button.tsx              | 28 +++----
 .../Button/helper/getSepcificButtonStatus.ts  |  2 +-
 .../LinkedButton/LinkedButton.css.ts          | 73 ++++++++++++++++++
 .../LinkedButton.test.tsx}                    | 18 ++---
 src/composable/LinkedButton/LinkedButton.tsx  | 49 ++++++++++++
 src/stories/Common/ButtonBoard.mdx            |  8 --
 ...n.stories.tsx => LinkedButton.stories.tsx} | 10 +--
 src/stories/Common/LinkedButtonBoard.mdx      |  8 ++
 12 files changed, 171 insertions(+), 123 deletions(-)
 rename src/components/storybook/{ButtonBoard.tsx => LinkedButtonBoard.tsx} (92%)
 create mode 100644 src/composable/LinkedButton/LinkedButton.css.ts
 rename src/composable/{Button/Button.test.tsx => LinkedButton/LinkedButton.test.tsx} (70%)
 create mode 100644 src/composable/LinkedButton/LinkedButton.tsx
 delete mode 100644 src/stories/Common/ButtonBoard.mdx
 rename src/stories/Common/{Button.stories.tsx => LinkedButton.stories.tsx} (85%)
 create mode 100644 src/stories/Common/LinkedButtonBoard.mdx

diff --git a/src/components/Contact/Contact.tsx b/src/components/Contact/Contact.tsx
index f9b8990..4fe8fa5 100644
--- a/src/components/Contact/Contact.tsx
+++ b/src/components/Contact/Contact.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
-import Button from '@/composable/Button/Button';
 import Clipboard from '@/composable/Clipboard/Clipboard';
+import LinkedButton from '@/composable/LinkedButton/LinkedButton';
 import SectionTitle from '@/composable/SectionTitle/SectionTitle';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import { ContactSectionProps, StaticContextContact } from './Contact.context';
@@ -55,9 +55,9 @@ const Description = () => {
 const Send = () => {
   const { data } = getStaticContext(StaticContextContact);
   return (
-    <Button as="a" className={sendStyle} size="L" href={`mailto:${data.email}`}>
+    <LinkedButton className={sendStyle} size="L" href={`mailto:${data.email}`}>
       메일 보내기
-    </Button>
+    </LinkedButton>
   );
 };
 
diff --git a/src/components/MainProject/MainProject.tsx b/src/components/MainProject/MainProject.tsx
index f43362c..6661a82 100644
--- a/src/components/MainProject/MainProject.tsx
+++ b/src/components/MainProject/MainProject.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
-import Button from '@/composable/Button/Button';
+import LinkedButton from '@/composable/LinkedButton/LinkedButton';
 import Mock from '@/composable/Mock/Mock';
 import {
   backgroundGradientVariants,
@@ -44,9 +44,9 @@ const MainProject = ({ src, device, title, period, description }: Props) => {
         <p className={titleStyle}>{title}</p>
         <p className={periodStyle}>{period}</p>
         <p className={descriptionStyle}>{description}</p>
-        <Button className={buttonStyle} as="button" size="M">
+        <LinkedButton className={buttonStyle} size="M">
           더보기
-        </Button>
+        </LinkedButton>
       </div>
     </article>
   );
diff --git a/src/components/storybook/ButtonBoard.tsx b/src/components/storybook/LinkedButtonBoard.tsx
similarity index 92%
rename from src/components/storybook/ButtonBoard.tsx
rename to src/components/storybook/LinkedButtonBoard.tsx
index 803c8b8..8324183 100644
--- a/src/components/storybook/ButtonBoard.tsx
+++ b/src/components/storybook/LinkedButtonBoard.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
-import Button from '@/composable/Button/Button';
 import Grid from '@/composable/Grid/Grid';
+import LinkedButton from '@/composable/LinkedButton/LinkedButton';
 import Text from '@/composable/Text/Text';
 import {
   backgroundColorVariants,
@@ -23,7 +23,7 @@ const buttonStates: {
   { size: 'L', status: 'PRESS', text: '메일 보내기' },
 ];
 
-const ButtonBoard = () => {
+const LinkedButtonBoard = () => {
   // 각 버튼 상태에 대한 버튼 렌더링
   return (
     <Grid
@@ -79,18 +79,17 @@ const ButtonBoard = () => {
         Press
       </Text>
       {buttonStates.map(({ size, status, text }) => (
-        <Button
-          as="button"
+        <LinkedButton
           key={`${size}-${status}`}
           size={size}
           status={status}
           width={size === 'M' ? '6.875rem' : '20rem'}
         >
           {text}
-        </Button>
+        </LinkedButton>
       ))}
     </Grid>
   );
 };
 
-export default ButtonBoard;
+export default LinkedButtonBoard;
diff --git a/src/composable/Button/Button.css.ts b/src/composable/Button/Button.css.ts
index d4700c3..6e47465 100644
--- a/src/composable/Button/Button.css.ts
+++ b/src/composable/Button/Button.css.ts
@@ -1,73 +1,8 @@
-import { style, styleVariants } from '@vanilla-extract/css';
-import { flexCenter } from '@/styles/common/flex.css';
-import {
-  commonColorThemeVars,
-  userColorThemeVars,
-} from '@/styles/theme/index.css';
+import { style } from '@vanilla-extract/css';
 
-export const buttonStyle = style([
-  flexCenter,
-  {
-    gap: '0.625rem',
+export const buttonStyle = style({
+  transition: 'opacity 0.2s ease-in-out',
+  ':hover': {
+    opacity: 0.8,
   },
-]);
-
-const MHOVER = {
-  backgroundColor: 'rgba(255, 255, 255, 0.8)',
-};
-
-const MPRESS = {
-  transition: 'none',
-  backgroundColor: commonColorThemeVars.token['gray-scale-00'],
-  boxShadow: '0px 3px 2px 0px rgba(0, 0, 0, 0.12) inset',
-};
-
-const LHOVER = {
-  border: '1.5px solid',
-  borderColor: commonColorThemeVars.token['gray-scale-01'],
-  color: commonColorThemeVars.token['gray-scale-01'],
-  opacity: 0.8,
-};
-
-const LPRESS = {
-  transition: 'none',
-  borderColor: commonColorThemeVars.token['gray-scale-00'],
-  color: commonColorThemeVars.token['gray-scale-00'],
-  opacity: 1,
-  backgroundColor: 'rgba(255, 255, 255, 0.08)',
-};
-
-export const buttonVariants = styleVariants({
-  M: [
-    buttonStyle,
-    {
-      display: 'inline-flex',
-      padding: '0.625rem 0.75rem',
-      borderRadius: '0.5rem',
-      backgroundColor: commonColorThemeVars.token['gray-scale-00'],
-      color: userColorThemeVars.token['tertiary'],
-      ':hover': MHOVER,
-      ':active': MPRESS,
-    },
-  ],
-  L: [
-    buttonStyle,
-    {
-      padding: '0.625rem',
-      backgroundColor: 'transparent',
-      border: '1px solid',
-      borderColor: commonColorThemeVars.token['gray-scale-00'],
-      borderRadius: '0.25rem',
-      color: commonColorThemeVars.token['gray-scale-00'],
-      ':hover': LHOVER,
-      ':active': LPRESS,
-    },
-  ],
-});
-
-export const buttonStatusVariants = styleVariants({
-  MHOVER,
-  MPRESS,
-  LHOVER,
-  LPRESS,
 });
diff --git a/src/composable/Button/Button.tsx b/src/composable/Button/Button.tsx
index 151b57b..28fe646 100644
--- a/src/composable/Button/Button.tsx
+++ b/src/composable/Button/Button.tsx
@@ -1,47 +1,39 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
-import { fontVariants } from '@/styles/common/font.css';
 import Tag from '../Tag/Tag';
-import { buttonVariants } from './Button.css';
-import { getSpecificButtonStatus } from './helper/getSepcificButtonStatus';
+import { buttonStyle } from './Button.css';
 
 interface Props {
   className?: string;
-  size: 'M' | 'L';
   as: 'button' | 'a';
+  type?: 'button' | 'submit';
   href?: string;
-  status?: 'DEFAULT' | 'HOVER' | 'PRESS';
   width?: string;
   style?: React.CSSProperties;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onSubmit?: React.FormEventHandler<HTMLButtonElement>;
 }
 
 const Button = ({
   className,
   children,
-  as,
+  as = 'button',
+  type = 'button',
   href,
-  size,
-  status = 'DEFAULT',
   width,
   style,
   onClick,
+  onSubmit,
 }: PropsWithChildren<Props>) => {
   return (
     <Tag
-      type="button"
+      className={classNames(className, buttonStyle)}
+      style={{ ...style, width }}
       as={as}
       href={href}
-      className={classNames(
-        className,
-        buttonVariants[size],
-        fontVariants[
-          size === 'M' ? 'paragraph-m-medium' : 'paragraph-s-regular'
-        ],
-        getSpecificButtonStatus?.(size, status),
-      )}
+      type={type}
       onClick={onClick}
-      style={{ ...style, width }}
+      onSubmit={onSubmit}
     >
       {children}
     </Tag>
diff --git a/src/composable/Button/helper/getSepcificButtonStatus.ts b/src/composable/Button/helper/getSepcificButtonStatus.ts
index 8870a0b..be6f84d 100644
--- a/src/composable/Button/helper/getSepcificButtonStatus.ts
+++ b/src/composable/Button/helper/getSepcificButtonStatus.ts
@@ -1,4 +1,4 @@
-import { buttonStatusVariants } from '../Button.css';
+import { buttonStatusVariants } from '@/composable/LinkedButton/LinkedButton.css';
 
 export const getSpecificButtonStatus =
   process.env.STORYBOOK || process.env.NODE_ENV === 'test'
diff --git a/src/composable/LinkedButton/LinkedButton.css.ts b/src/composable/LinkedButton/LinkedButton.css.ts
new file mode 100644
index 0000000..d4700c3
--- /dev/null
+++ b/src/composable/LinkedButton/LinkedButton.css.ts
@@ -0,0 +1,73 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { flexCenter } from '@/styles/common/flex.css';
+import {
+  commonColorThemeVars,
+  userColorThemeVars,
+} from '@/styles/theme/index.css';
+
+export const buttonStyle = style([
+  flexCenter,
+  {
+    gap: '0.625rem',
+  },
+]);
+
+const MHOVER = {
+  backgroundColor: 'rgba(255, 255, 255, 0.8)',
+};
+
+const MPRESS = {
+  transition: 'none',
+  backgroundColor: commonColorThemeVars.token['gray-scale-00'],
+  boxShadow: '0px 3px 2px 0px rgba(0, 0, 0, 0.12) inset',
+};
+
+const LHOVER = {
+  border: '1.5px solid',
+  borderColor: commonColorThemeVars.token['gray-scale-01'],
+  color: commonColorThemeVars.token['gray-scale-01'],
+  opacity: 0.8,
+};
+
+const LPRESS = {
+  transition: 'none',
+  borderColor: commonColorThemeVars.token['gray-scale-00'],
+  color: commonColorThemeVars.token['gray-scale-00'],
+  opacity: 1,
+  backgroundColor: 'rgba(255, 255, 255, 0.08)',
+};
+
+export const buttonVariants = styleVariants({
+  M: [
+    buttonStyle,
+    {
+      display: 'inline-flex',
+      padding: '0.625rem 0.75rem',
+      borderRadius: '0.5rem',
+      backgroundColor: commonColorThemeVars.token['gray-scale-00'],
+      color: userColorThemeVars.token['tertiary'],
+      ':hover': MHOVER,
+      ':active': MPRESS,
+    },
+  ],
+  L: [
+    buttonStyle,
+    {
+      padding: '0.625rem',
+      backgroundColor: 'transparent',
+      border: '1px solid',
+      borderColor: commonColorThemeVars.token['gray-scale-00'],
+      borderRadius: '0.25rem',
+      color: commonColorThemeVars.token['gray-scale-00'],
+      ':hover': LHOVER,
+      ':active': LPRESS,
+    },
+  ],
+});
+
+export const buttonStatusVariants = styleVariants({
+  MHOVER,
+  MPRESS,
+  LHOVER,
+  LPRESS,
+});
diff --git a/src/composable/Button/Button.test.tsx b/src/composable/LinkedButton/LinkedButton.test.tsx
similarity index 70%
rename from src/composable/Button/Button.test.tsx
rename to src/composable/LinkedButton/LinkedButton.test.tsx
index 99e20a2..af3e206 100644
--- a/src/composable/Button/Button.test.tsx
+++ b/src/composable/LinkedButton/LinkedButton.test.tsx
@@ -1,14 +1,14 @@
 import { render, fireEvent } from '@testing-library/react';
-import Button from './Button';
-import { buttonStatusVariants, buttonVariants } from './Button.css';
+import LinkedButton from './LinkedButton';
+import { buttonStatusVariants, buttonVariants } from './LinkedButton.css';
 
-describe('Button 컴포넌트', () => {
+describe('LinkedButton 컴포넌트', () => {
   it('클래스 이름이 올바르게 적용되어야 한다', () => {
     const className = 'test-class';
     const { getByRole } = render(
-      <Button as="button" className={className} size="M">
+      <LinkedButton className={className} size="M">
         테스트 버튼
-      </Button>,
+      </LinkedButton>,
     );
 
     const button = getByRole('button');
@@ -18,9 +18,9 @@ describe('Button 컴포넌트', () => {
 
   it('상태에 따라 적절한 클래스가 적용되어야 한다', () => {
     const { getByRole } = render(
-      <Button as="button" size="M" status="HOVER">
+      <LinkedButton size="M" status="HOVER">
         테스트 버튼
-      </Button>,
+      </LinkedButton>,
     );
 
     const button = getByRole('button');
@@ -30,9 +30,9 @@ describe('Button 컴포넌트', () => {
   it('onClick 핸들러가 호출되어야 한다', () => {
     const handleClick = jest.fn();
     const { getByRole } = render(
-      <Button as="button" size="M" onClick={handleClick}>
+      <LinkedButton size="M" onClick={handleClick}>
         테스트 버튼
-      </Button>,
+      </LinkedButton>,
     );
 
     const button = getByRole('button');
diff --git a/src/composable/LinkedButton/LinkedButton.tsx b/src/composable/LinkedButton/LinkedButton.tsx
new file mode 100644
index 0000000..1cc6167
--- /dev/null
+++ b/src/composable/LinkedButton/LinkedButton.tsx
@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+import { PropsWithChildren } from 'react';
+import { fontVariants } from '@/styles/common/font.css';
+import Button from '../Button/Button';
+import { getSpecificButtonStatus } from '../Button/helper/getSepcificButtonStatus';
+import { buttonVariants } from './LinkedButton.css';
+
+interface Props {
+  className?: string;
+  size: 'M' | 'L';
+  href?: string;
+  status?: 'DEFAULT' | 'HOVER' | 'PRESS';
+  width?: string;
+  style?: React.CSSProperties;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const LinkedButton = ({
+  className,
+  children,
+  href,
+  size,
+  status = 'DEFAULT',
+  width,
+  style,
+  onClick,
+}: PropsWithChildren<Props>) => {
+  return (
+    <Button
+      as="a"
+      type="button"
+      href={href || ''}
+      className={classNames(
+        className,
+        buttonVariants[size],
+        fontVariants[
+          size === 'M' ? 'paragraph-m-medium' : 'paragraph-s-regular'
+        ],
+        getSpecificButtonStatus?.(size, status),
+      )}
+      onClick={onClick}
+      style={{ ...style, width }}
+    >
+      {children}
+    </Button>
+  );
+};
+
+export default LinkedButton;
diff --git a/src/stories/Common/ButtonBoard.mdx b/src/stories/Common/ButtonBoard.mdx
deleted file mode 100644
index 9d9fc1e..0000000
--- a/src/stories/Common/ButtonBoard.mdx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import ButtonBoard from '@/components/storybook/ButtonBoard';
-
-<Meta title="Common/Button/ButtonBoard" />
-
-# ButtonBoard
-
-<ButtonBoard />
diff --git a/src/stories/Common/Button.stories.tsx b/src/stories/Common/LinkedButton.stories.tsx
similarity index 85%
rename from src/stories/Common/Button.stories.tsx
rename to src/stories/Common/LinkedButton.stories.tsx
index 5788a75..dcd5aed 100644
--- a/src/stories/Common/Button.stories.tsx
+++ b/src/stories/Common/LinkedButton.stories.tsx
@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
-import Button from '@/composable/Button/Button';
+import LinkedButton from '@/composable/LinkedButton/LinkedButton';
 import { backgroundColorVariants } from '@/styles/common/color.css';
 
-const meta: Meta<typeof Button> = {
-  title: 'Common/Button',
-  component: Button,
+const meta: Meta<typeof LinkedButton> = {
+  title: 'Common/Button/LinkedButton',
+  component: LinkedButton,
   tags: ['autodocs'],
   parameters: { layout: 'fullscreen' },
   argTypes: {
@@ -35,7 +35,7 @@ const meta: Meta<typeof Button> = {
   ],
 };
 
-type Story = StoryObj<typeof Button>;
+type Story = StoryObj<typeof LinkedButton>;
 
 export const Default_M: Story = {
   args: {
diff --git a/src/stories/Common/LinkedButtonBoard.mdx b/src/stories/Common/LinkedButtonBoard.mdx
new file mode 100644
index 0000000..85fe3ba
--- /dev/null
+++ b/src/stories/Common/LinkedButtonBoard.mdx
@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/blocks';
+import LinkedButtonBoard from '@/components/storybook/LinkedButtonBoard';
+
+<Meta title="Common/Button/LinkedButtonBoard" />
+
+# LinkedButtonBoard
+
+<LinkedButtonBoard />