Develop

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"

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>
+  );
+}

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;
+          `;
+    }
+  }}
+`;

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";
+}

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"