Feat : 모달/인풋/버튼 완성 ~~:

package.json

@@ -13,6 +13,7 @@
     "apexcharts": "^3.52.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.12",
@@ -42,5 +43,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-modal": "^3.16.3"
   }
 }

src/Component/Button/button.tsx

@@ -0,0 +1,26 @@
+import styled from "styled-components"
+import React from "react"
+import { buttonSize, buttonType } from "../../Styles/button";
+import { ButtonStyleProps, ButtonProps } from "../../constants/interface";
+
+const ButtonStyle = styled.button<ButtonStyleProps>`
+    border-radius: 10px;
+
+    ${(props) => buttonSize[props.size]}
+    ${(props) => buttonType[props.colorType]?.[props.state]}
+`
+
+const Button = ({onClick, children, ...styleprops}: ButtonProps) => {
+    return (
+        <>
+            <ButtonStyle {...styleprops} onClick={onClick}>
+                {children}
+            </ButtonStyle>
+        </>
+    )
+}
+
+export default Button;
+
+// 버튼 사용 예시 
+{/* <Button state="normal" colorType="main" size="small">버튼</Button> */}