Merge pull request #2 from joong8812/feature/button

✨ feat: 버튼 컴포넌트 개발

src/components/Button.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import styled from 'styled-components';
+import { theme } from '@/styles/theme';
+
+interface ButtonProps {
+  name?: string;
+  text: string;
+  backgroundColor?: string;
+  fontColor?: string;
+  padding?: string;
+  width?: string;
+  borderRadius?: string;
+  borderColor?: string;
+  border?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const Button = ({
+  text,
+  backgroundColor = theme.color.button.white,
+  fontColor = theme.color.font.black,
+  padding = '10px',
+  width = '',
+  borderRadius = '',
+  borderColor = theme.color.border.white,
+  border = '',
+  ...otherProps
+}: ButtonProps) => {
+  return (
+    <>
+      <StyledButton
+        {...otherProps}
+        backgroundColor={backgroundColor}
+        fontColor={fontColor}
+        padding={padding}
+        width={width}
+        borderRadius={borderRadius}
+        borderColor={borderColor}
+        border={border}
+      >
+        {text}
+      </StyledButton>
+    </>
+  );
+};
+
+export default Button;
+
+const StyledButton = styled.button<{
+  backgroundColor: string;
+  fontColor: string;
+  padding: string;
+  width: string;
+  borderRadius: string;
+  borderColor: string;
+  border: string;
+}>`
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  color: ${({ fontColor }) => fontColor};
+  padding: ${({ padding }) => padding};
+  width: ${({ width }) => width};
+  border-radius: ${({ borderRadius }) => borderRadius};
+  border-color: ${({ borderColor }) => borderColor};
+  border: ${({ border }) => border};
+`;

src/styles/theme.ts

@@ -5,8 +5,8 @@ const color = {
   background: {
     white: '#FFFFFF',
     lightgray: '#F4F4F4',
-    lightblue: '#5FA5C4',
     gray: '#EFEFEF',
+    lightblue: '#5FA5C4',
   },
 
   font: {
@@ -15,14 +15,16 @@ const color = {
     black: '#000000',
   },
   border: {
+    white: '#FFFFFF',
     lightgray: '#EAEAEA',
     darkgray: '#C2C2C2',
     darkblue: '#4B617A',
     black: '#000000',
   },
   button: {
-    darkgray: '#959595',
+    white: '#FFFFFF',
     gray: '#B4B4B4',
+    darkgray: '#959595',
     blue: '#4375D1',
   },
 };