From 90ffb18a1c92f215a73a6a617a61138c7bff8bd1 Mon Sep 17 00:00:00 2001
From: Hanna922 <hanna.urssu@gmail.com>
Date: Wed, 4 Oct 2023 17:02:24 +0900
Subject: [PATCH 1/4] feat: add PlainButton.type.ts

---
 src/components/PlainButton/PlainButton.type.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/components/PlainButton/PlainButton.type.ts

diff --git a/src/components/PlainButton/PlainButton.type.ts b/src/components/PlainButton/PlainButton.type.ts
new file mode 100644
index 0000000..65e9fdd
--- /dev/null
+++ b/src/components/PlainButton/PlainButton.type.ts
@@ -0,0 +1,10 @@
+export type PlainButtonSize = 'small' | 'medium' | 'large';
+
+export interface PlainButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size: PlainButtonSize;
+  isPointed: boolean;
+  isWarned: boolean;
+  leftIcon?: React.ReactNode;
+  children?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}

From f393376fe48b8715125d052be7e726b25eab7792 Mon Sep 17 00:00:00 2001
From: Hanna922 <hanna.urssu@gmail.com>
Date: Wed, 4 Oct 2023 17:02:34 +0900
Subject: [PATCH 2/4] feat: add PlainButton.style.ts

---
 .../PlainButton/PlainButton.style.ts          | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/components/PlainButton/PlainButton.style.ts

diff --git a/src/components/PlainButton/PlainButton.style.ts b/src/components/PlainButton/PlainButton.style.ts
new file mode 100644
index 0000000..78d086c
--- /dev/null
+++ b/src/components/PlainButton/PlainButton.style.ts
@@ -0,0 +1,86 @@
+import { css, styled } from 'styled-components';
+
+import { typos } from '@/style';
+
+import { PlainButtonProps, PlainButtonSize } from './PlainButton.type';
+
+interface StyledPlainButtonProps {
+  $size: PlainButtonSize;
+  $isPointed: PlainButtonProps['isPointed'];
+  $isWarned: PlainButtonProps['isWarned'];
+}
+
+const getSizeStyle = ($size: PlainButtonSize) => {
+  switch ($size) {
+    case 'large':
+      return css`
+        height: 24px;
+        .icon {
+          width: 24px;
+          height: 24px;
+        }
+      `;
+    case 'medium':
+      return css`
+        height: 20px;
+        font-size: 14px;
+        ${typos.button3}
+        .icon {
+          width: 20px;
+          height: 20px;
+        }
+      `;
+    case 'small':
+      return css`
+        height: 16px;
+        font-size: 12px;
+        ${typos.button4}
+        .icon {
+          width: 16px;
+          height: 16px;
+        }
+      `;
+  }
+};
+
+const getStyle = ($isPointed: boolean, $isWarned: boolean) => {
+  if ($isWarned) {
+    return css`
+      color: ${(props) => props.theme.color.buttonWarned};
+      &:hover {
+        cursor: pointer;
+        color: ${(props) => props.theme.color.buttonWarnedPressed};
+      }
+    `;
+  } else if ($isPointed) {
+    return css`
+      color: ${(props) => props.theme.color.buttonPoint};
+      &:hover {
+        cursor: pointer;
+        color: ${(props) => props.theme.color.buttonPointPressed};
+      }
+    `;
+  } else
+    return css`
+      color: ${(props) => props.theme.color.buttonNormal};
+      &:hover {
+        cursor: pointer;
+        color: ${(props) => props.theme.color.buttonNormalPressed};
+      }
+    `;
+};
+
+export const StyledPlainButton = styled.button<StyledPlainButtonProps>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: none;
+  gap: 2px;
+  ${({ $size }) => getSizeStyle($size)}
+  ${({ $isPointed, $isWarned }) => getStyle($isPointed, $isWarned)}
+  &:disabled {
+    color: ${({ theme }) => theme.color.buttonDisabled};
+    cursor: not-allowed;
+  }
+`;

From 1e8415d16819641799843c428299b3981b620a24 Mon Sep 17 00:00:00 2001
From: Hanna922 <hanna.urssu@gmail.com>
Date: Wed, 4 Oct 2023 17:02:45 +0900
Subject: [PATCH 3/4] feat: add PlainButton & stories

---
 .../PlainButton/PlainButton.stories.tsx       | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/components/PlainButton/PlainButton.stories.tsx

diff --git a/src/components/PlainButton/PlainButton.stories.tsx b/src/components/PlainButton/PlainButton.stories.tsx
new file mode 100644
index 0000000..365c852
--- /dev/null
+++ b/src/components/PlainButton/PlainButton.stories.tsx
@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { IcGroundLine } from '@/style';
+
+import { PlainButton } from './PlainButton';
+
+const meta: Meta<typeof PlainButton> = {
+  title: 'Component/PlainButton',
+  component: PlainButton,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PlainButton>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Primary/Small',
+    size: 'small',
+    isPointed: false,
+    isWarned: false,
+  },
+};
+
+export const Pointed: Story = {
+  args: {
+    children: 'Pointed/Medium',
+    size: 'medium',
+    isPointed: true,
+    isWarned: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled/Medium',
+    size: 'medium',
+    disabled: true,
+    isPointed: false,
+    isWarned: false,
+    leftIcon: <IcGroundLine />,
+  },
+};
+
+export const Warned: Story = {
+  args: {
+    children: 'Warned/Large',
+    size: 'large',
+    isPointed: false,
+    isWarned: true,
+    rightIcon: <IcGroundLine />,
+  },
+};

From 5aca3adae2cb1a56472e2c9747829af0658256ef Mon Sep 17 00:00:00 2001
From: Hanna922 <hanna.urssu@gmail.com>
Date: Wed, 4 Oct 2023 17:03:08 +0900
Subject: [PATCH 4/4] feat: export PlainButton

---
 src/components/PlainButton/PlainButton.tsx | 40 ++++++++++++++++++++++
 src/components/PlainButton/index.ts        |  2 ++
 src/components/index.ts                    |  3 ++
 3 files changed, 45 insertions(+)
 create mode 100644 src/components/PlainButton/PlainButton.tsx
 create mode 100644 src/components/PlainButton/index.ts

diff --git a/src/components/PlainButton/PlainButton.tsx b/src/components/PlainButton/PlainButton.tsx
new file mode 100644
index 0000000..cc014c0
--- /dev/null
+++ b/src/components/PlainButton/PlainButton.tsx
@@ -0,0 +1,40 @@
+import { forwardRef } from 'react';
+
+import { IconContext } from '@/style';
+
+import { StyledPlainButton } from './PlainButton.style';
+
+import { PlainButtonProps } from '.';
+
+export const PlainButton = forwardRef<HTMLButtonElement, PlainButtonProps>(
+  ({ leftIcon, children, rightIcon, ...props }, ref) => {
+    return (
+      <StyledPlainButton
+        ref={ref}
+        disabled={props.disabled}
+        $size={props.size}
+        $isPointed={props.isPointed}
+        $isWarned={props.isWarned}
+        {...props}
+      >
+        <IconContext.Provider
+          value={{
+            color: 'currentColor',
+          }}
+        >
+          <div className="icon left-icon">{leftIcon}</div>
+        </IconContext.Provider>
+        {props.size !== 'large' && <span className="plainButton-child">{children}</span>}
+        {!leftIcon && (
+          <IconContext.Provider
+            value={{
+              color: 'currentColor',
+            }}
+          >
+            <div className="icon right-icon">{rightIcon}</div>
+          </IconContext.Provider>
+        )}
+      </StyledPlainButton>
+    );
+  }
+);
diff --git a/src/components/PlainButton/index.ts b/src/components/PlainButton/index.ts
new file mode 100644
index 0000000..06988d9
--- /dev/null
+++ b/src/components/PlainButton/index.ts
@@ -0,0 +1,2 @@
+export { PlainButton } from './PlainButton';
+export type { PlainButtonProps } from './PlainButton.type';
diff --git a/src/components/index.ts b/src/components/index.ts
index 3b95eae..e012b28 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,3 +6,6 @@ export type { YDSWrapperProps } from './YDSWrapper';
 
 export { BoxButton } from './BoxButton';
 export type { BoxButtonProps } from './BoxButton';
+
+export { PlainButton } from './PlainButton';
+export type { PlainButtonProps } from './PlainButton';