🚚 Rename: 버튼 size로 변수명 변경 및 type 추가

FRONTENDSCHOOL5 · Oct 27, 2023 · f5c1e22 · f5c1e22
1 parent 2e1267a
commit f5c1e22
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 79 deletions.
diff --git a/src/components/common/Button/Button.jsx b/src/components/common/Button/Button.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { ButtonStyle } from './ButtonStyle';
+
+const Button = ({
+  type,
+  text,
+  size,
+  isClicked = false,
+  isDisabled = false,
+  isDarkMode = false,
+  handleClick,
+}) => {
+
+  let sizeDeco = {
+    width: '',
+    height: '',
+    padding: '',
+    textSize: '1.4rem',
+    radius: '',
+  };
+
+  switch (size) {
+    case 'XL':
+      sizeDeco.width = '35rem';
+      sizeDeco.height = '3.2rem';
+      sizeDeco.padding = '0.7rem 0';
+      sizeDeco.radius = '3.2rem';
+      break;
+    case 'L':
+      sizeDeco.width = '32.2rem';
+      sizeDeco.height = '4.4rem';
+      sizeDeco.padding = '1.3rem 0';
+      sizeDeco.radius = '4.4rem';
+      break;
+    case 'ML':
+      sizeDeco.width = '12rem';
+      sizeDeco.height = '4.4rem';
+      sizeDeco.padding = '1.3rem 0';
+      sizeDeco.radius = '4.4rem';
+      break;
+    case 'M':
+      sizeDeco.width = '12rem';
+      sizeDeco.height = '3.4rem';
+      sizeDeco.padding = '0.8rem 0';
+      sizeDeco.radius = '3rem';
+      break;
+    case 'MS':
+      sizeDeco.width = '9rem';
+      sizeDeco.height = '3.2rem';
+      sizeDeco.padding = '0.7rem 0';
+      sizeDeco.radius = '3.2rem';
+      break;
+    case 'S':
+      sizeDeco.width = '5.6rem';
+      sizeDeco.height = '2.8rem';
+      sizeDeco.padding = '0.7rem 0';
+      sizeDeco.textSize = '1.2rem';
+      sizeDeco.radius = '2.6rem';
+      break;
+    default:
+  }
+
+  return (
+    <ButtonStyle
+      type={type}
+      sizeStyle={sizeDeco}
+      isDisabled={isDisabled}
+      isClicked={isClicked}
+      isDarkMode={isDarkMode}
+      onClick={handleClick}
+    >
+      {text}
+    </ButtonStyle>
+  );
+};
+export default Button;
diff --git a/src/components/common/Button/ButtonContainer.jsx b/src/components/common/Button/ButtonContainer.jsx
diff --git a/...ts/common/Button/ButtonContainerStyle.jsx → src/components/common/Button/ButtonStyle.jsx b/...ts/common/Button/ButtonContainerStyle.jsx → src/components/common/Button/ButtonStyle.jsx
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 import Theme from '../../../styles/Theme';
 
-export const Button = styled.button`
-  width: ${(props) => props.typeStyle.width};
-  height: ${(props) => props.typeStyle.height};
-  border-radius: ${(props) => props.typeStyle.radius};
-  padding: ${(props) => props.typeStyle.padding};
-  font-size: ${(props) => props.typeStyle.textSize};
+export const ButtonStyle = styled.button`
+  width: ${(props) => props.sizeStyle.width};
+  height: ${(props) => props.sizeStyle.height};
+  border-radius: ${(props) => props.sizeStyle.radius};
+  padding: ${(props) => props.sizeStyle.padding};
+  font-size: ${(props) => props.sizeStyle.textSize};
   border: ${(props) =>
     props.isClicked ? `1px solid ${props.isDarkMode ? Theme.darkColors.mainColor : Theme.colors.mainColor}` : 'none'};
   background-color: ${(props) =>