🖋️::add-common-button

자주쓰이는 버튼 추가

src/components/common/button/Button.style.ts

@@ -0,0 +1,30 @@
+import styled, { css } from "styled-components";
+import { lightTheme } from "styles/theme";
+
+interface styleProps {
+    visible?: boolean;
+    width?: string;
+}
+
+export const Button = styled.button<styleProps>`
+    min-width:60px;
+    width:${(props) => props.width};
+    height:28px;
+    text-align:center;
+    border-radius:15px;
+    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1);
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 14px;
+    cursor:pointer;
+
+    ${(props) =>
+        props.visible &&
+        css`
+        background-color:${lightTheme.blue};
+        color:#fff;
+        `
+    }
+`

src/components/common/button/Button.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import IButton from "interface/common/button/IButton";
+import * as Btn from "./Button.style";
+
+const Button: React.FC<IButton> = ({ visible, children, width }) => {
+  return (
+    <Btn.Button visible={visible} width={width}>
+      {children}
+    </Btn.Button>
+  );
+};
+
+export default Button;

src/components/common/button/index.ts

@@ -0,0 +1 @@
+export { default } from "./Button"

src/interface/common/button/IButton.ts

@@ -0,0 +1,4 @@
+export default interface IButton {
+    visible?: boolean;
+    width?: string;
+}

src/styles/globals.style.ts

@@ -5,6 +5,7 @@ const GlobalStyle = createGlobalStyle`
       ${reset}
       * {
         box-sizing: border-box;
+        color:${(props) => props.theme.title}
       }
       html{
         height:100%;

tsconfig.json

@@ -22,7 +22,8 @@
       "stores":["/stroes/*"],
       "styles":["/styles/*"],
       "assets":["/assets/*"],
-      "util":["/util/*"]
+      "util":["/util/*"],
+      "interface":["/interface/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],