From 53bb7c4a291c3e8da361748bfef4d7b5ab775f2f Mon Sep 17 00:00:00 2001
From: moonhuicheol <moonhuicheol@gmail.com>
Date: Fri, 27 Dec 2024 11:57:49 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=EA=B3=B5=ED=86=B5=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20Button=EA=B5=AC=ED=98=84=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |  1 +
 src/components/ui/button/Button.tsx        | 25 ++++++
 src/components/ui/button/buttonStyle.ts    | 99 ++++++++++++++++++++++
 src/components/ui/button/button_props.d.ts | 11 +++
 yarn.lock                                  |  5 ++
 5 files changed, 141 insertions(+)
 create mode 100644 src/components/ui/button/Button.tsx
 create mode 100644 src/components/ui/button/buttonStyle.ts
 create mode 100644 src/components/ui/button/button_props.d.ts

diff --git a/package.json b/package.json
index bb9f6b2..758c217 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.2",
     "react-router-dom": "^7.0.2",
     "styled-components": "^6.1.13",
     "zustand": "^5.0.2"
diff --git a/src/components/ui/button/Button.tsx b/src/components/ui/button/Button.tsx
new file mode 100644
index 0000000..ae24887
--- /dev/null
+++ b/src/components/ui/button/Button.tsx
@@ -0,0 +1,25 @@
+import { IButtonProps } from "./button_props";
+import * as S from "./buttonStyle";
+
+export default function Button({
+  children,
+  onClickFnc,
+  type = "button",
+  disabled = false,
+  style,
+  bgColor,
+  textColor,
+}: IButtonProps) {
+  return (
+    <S.Button
+      type={type}
+      onClick={onClickFnc}
+      disabled={disabled}
+      style={style}
+      bgColor={bgColor}
+      textColor={textColor}
+    >
+      {children}
+    </S.Button>
+  );
+}
diff --git a/src/components/ui/button/buttonStyle.ts b/src/components/ui/button/buttonStyle.ts
new file mode 100644
index 0000000..c190717
--- /dev/null
+++ b/src/components/ui/button/buttonStyle.ts
@@ -0,0 +1,99 @@
+import styled from "styled-components";
+import { IButtonProps } from "./button_props";
+
+export const Button = styled.button<IButtonProps>`
+  width: 100%;
+  border-radius: 50px;
+  border: 1px solid #000000;
+
+  ${({ style }) => {
+    switch (style) {
+      case "xl":
+        return `
+          height: 80px;
+          font-weight: 500;
+          font-size: 40px;          
+        `;
+      case "l":
+        return `
+          height: 60px;
+          font-weight: 700;
+          font-size: 20px;          
+        `;
+      case "md":
+        return `
+          height: 50px;
+          font-weight: 600;
+          font-size: 18px;
+        `;
+      case "sm":
+        return `
+          height: 40px;
+          font-weight: 600;
+          font-size: 16px;
+        `;
+      case "xs":
+        return `
+          height: 30px;
+          font-weight: 600;
+          font-size: 14px;
+        `;
+      default:
+        return `
+          height: 50px;
+          font-weight: 400;
+          font-size: 16px;
+        `;
+    }
+  }};
+
+  ${({ bgColor }) => {
+    switch (bgColor) {
+      case "black":
+        return `
+          background: #000000;
+        `;
+      case "blue":
+        return `
+          background: radial-gradient(78.73% 146.71% at 50% 100.71%, #2571FF 0%, #FFFFFF 100%);
+        `;
+      case "green":
+        return `
+          background: radial-gradient(78.68% 145.31% at 50% 100.71%, #44FF92 0%, #FFFFFF 100%);
+        `;
+      case "white":
+        return `
+          background: radial-gradient(78.68% 145.31% at 50% 100.71%, #E4E4E4 0%, #FFFFFF 100%);
+        `;
+      case "red":
+        return `
+          background: radial-gradient(78.73% 146.71% at 50% 100.71%, #FF5E5E 0%, #FFFFFF 100%);
+        `;
+      default:
+        return `
+          background: transparent;
+        `;
+    }
+  }}
+
+  ${({ textColor }) => {
+    switch (textColor) {
+      case "black":
+        return `
+          color: #000000;
+        `;
+      case "white":
+        return `
+          color: #ffffff;
+        `;
+      case "gray":
+        return `
+          color: #6c6c6c
+        `;
+      default:
+        return `
+            color: inherit;
+          `;
+    }
+  }}
+`;
diff --git a/src/components/ui/button/button_props.d.ts b/src/components/ui/button/button_props.d.ts
new file mode 100644
index 0000000..082ab2e
--- /dev/null
+++ b/src/components/ui/button/button_props.d.ts
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+interface IButtonProps {
+  children: ReactNode;
+  onClickFnc?: () => void;
+  type: "button" | "submit" | "reset";
+  disabled?: boolean;
+  style: "xl" | "l" | "md" | "sm" | "xs";
+  bgColor: "black" | "green" | "red" | "white" | "blue";
+  textColor: "black" | "gray" | "white";
+}
diff --git a/yarn.lock b/yarn.lock
index 22f1b42..7f7f071 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1459,6 +1459,11 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-hook-form@^7.54.2:
+  version "7.54.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.54.2.tgz#8c26ed54c71628dff57ccd3c074b1dd377cfb211"
+  integrity sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==
+
 react-refresh@^0.14.2:
   version "0.14.2"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz"