refactor: Button 컴포넌트 재사용성 개선, BackButton 컴포넌트 생성

woowacourse · May 3, 2021 · 398f431 · 398f431
1 parent 6e6bebb
commit 398f431
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 71 deletions.
diff --git a/src/components/BackwardButton/index.js b/src/components/BackwardButton/index.js
@@ -0,0 +1,38 @@
+/* eslint-disable react/jsx-curly-brace-presence */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { Button } from '../Button';
+import styles from './style.css';
+
+const cx = classNames.bind(styles);
+
+export const BackwardButton = ({ className, size, color, strokeWidth }) => {
+  return (
+    <Button className={cx(['BackwardButton', className])}>
+      <svg viewBox={`0 0 ${size} ${size}`} height={size} width={size} fill="none">
+        <path
+          d={`
+              M ${size / 2} 1 
+              L 1 ${size / 2} 
+              L ${size / 2} ${size}`}
+          stroke={color}
+          strokeWidth={strokeWidth}
+        />
+      </svg>
+    </Button>
+  );
+};
+
+BackwardButton.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.oneOf([PropTypes.string, PropTypes.number]).isRequired,
+  strokeWidth: PropTypes.oneOf([PropTypes.string, PropTypes.number]).isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+BackwardButton.defaultProps = {
+  size: 16,
+  strokeWidth: 1.5,
+  color: '#525252',
+};
diff --git a/src/components/BackwardButton/style.css b/src/components/BackwardButton/style.css
@@ -0,0 +1,5 @@
+.BackwardButton {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: 1.5rem;
+}
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -1,28 +1,26 @@
 /* eslint-disable react/button-has-type */
 import React from 'react';
 import PropTypes from 'prop-types';
-import './style.css';
+import classNames from 'classnames/bind';
+import styles from './style.css';
 
-export const Button = ({ type, theme, backgroundColor, children, ...props }) => {
+const cx = classNames.bind(styles);
+
+export const Button = ({ className, type, children, ...rest }) => {
   return (
-    <button type={type} className={['Button', `Button--${theme}`].join(' ')} style={{ backgroundColor }} {...props}>
+    <button className={cx(['Button', className])} type={type} {...rest}>
       {children}
     </button>
   );
 };
 
 Button.propTypes = {
-  type: PropTypes.oneOf(['submit', 'reset', 'button']),
-  theme: PropTypes.oneOf(['submit', 'question-mark', 'card-company', 'backward']),
-  backgroundColor: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  className: PropTypes.string,
+  type: PropTypes.oneOf(['submit', 'reset', 'button']).isRequired,
   onClick: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 };
 
 Button.defaultProps = {
   type: 'submit',
-  theme: 'submit',
-  backgroundColor: 'transparent',
-  children: '',
-  onClick: null,
 };
diff --git a/src/components/Button/style.css b/src/components/Button/style.css
@@ -2,33 +2,5 @@
   margin: 0.25rem;
   border: none;
   cursor: pointer;
-}
-
-.Button--submit {
-  color: #04c09e;
-  font-size: 0.875rem;
-  text-align: end;
-  position: absolute;
-  bottom: 1rem;
-  right: 0.5rem;
-}
-
-.Button--question-mark {
-  font-size: 1.25rem;
-  width: 1.6875rem;
-  height: 1.6875rem;
-  color: #969696;
-  border: 1px solid #bababa;
-  border-radius: 50%;
-}
-
-.Button--card-company {
-  width: 2.3125rem;
-  height: 2.3125rem;
-  border-radius: 50%;
-}
-
-.Button--backward {
-  width: 1.25rem;
-  height: 1.25rem;
+  background-color: transparent;
 }
diff --git a/src/components/index.js b/src/components/index.js
@@ -1,3 +1,4 @@
+import { BackwardButton } from './BackwardButton';
 import { Button } from './Button';
 import { Card } from './Card';
 import { Circle } from './Circle';
@@ -10,4 +11,4 @@ import { Modal } from './Modal';
 import { Text } from './Text';
 import { Heading } from './Heading';
 
-export { Button, Card, Circle, CreditCardPreview, Container, Form, Input, Label, Modal, Text, Heading };
+export { BackwardButton, Button, Card, Circle, CreditCardPreview, Container, Form, Input, Label, Modal, Text, Heading };
diff --git a/src/pages/AddCardPages/AddCompletePage/CardNicknameForm/index.js b/src/pages/AddCardPages/AddCompletePage/CardNicknameForm/index.js
@@ -23,6 +23,7 @@ export const CardNicknameForm = (props) => {
         onChange={(e) => handleNicknameInputChange({ e, setNickname })}
       />
       <Button
+        className="CardNicknameForm__Submit_Button"
         disabled={nickname === initialNickname}
         onClick={(e) => handleNicknameSubmit({ e, setRoute, cardInfo, addCardInfoToList })}
       >

diff --git a/src/pages/AddCardPages/AddCompletePage/style.css b/src/pages/AddCardPages/AddCompletePage/style.css
@@ -15,7 +15,16 @@
   margin-top: 3rem;
 }
 
-.CardNicknameForm .Button:disabled {
+.CardNicknameForm__Submit_Button {
+  color: #04c09e;
+  font-size: 0.875rem;
+  text-align: end;
+  position: absolute;
+  bottom: 1rem;
+  right: 0.5rem;
+}
+
+.CardNicknameForm__Submit_Button:disabled {
   cursor: default;
   opacity: 0.5;
 }
diff --git a/src/pages/AddCardPages/AddFormPage/CardCompanySelectModal/index.js b/src/pages/AddCardPages/AddFormPage/CardCompanySelectModal/index.js
@@ -26,17 +26,15 @@ export function CardCompanyList({ setCardInfo, setIsModalOpen }) {
 }
 
 function CardCompanyItem({ company, setCardInfo, setIsModalOpen }) {
-  const { name, color } = company;
-
   return (
     <li className="CardCompanyList__Item">
       <Button
-        name={name}
-        backgroundColor={color}
-        theme="card-company"
+        className="CardCompanyList__Item__Button"
+        name={company.name}
+        style={{ backgroundColor: company.color }}
         onClick={(e) => handleCardCompanySelect({ e, setCardInfo, setIsModalOpen })}
       />
-      <Label>{name}</Label>
+      <Label>{company.name}</Label>
     </li>
   );
 }
diff --git a/src/pages/AddCardPages/AddFormPage/CardInfoForm/SecurityCodeInput/index.js b/src/pages/AddCardPages/AddFormPage/CardInfoForm/SecurityCodeInput/index.js
@@ -18,10 +18,10 @@ export const SecurityCodeInput = (props) => {
           maxLength={SECURITY_CODE_LENGTH}
           value={securityCode}
         />
-        <Button theme="question-mark" type="button">
+        <Button className="SecurityCodeInput__Guide__Button" type="button">
           ?
         </Button>
-        <img className="SecurityCodeInput__GuideImage" width="80" src={cvcImage} alt="cvc" />
+        <img className="SecurityCodeInput__Guide__Image" width="80" src={cvcImage} alt="cvc" />
       </div>
     </>
   );

diff --git a/src/pages/AddCardPages/AddFormPage/CardInfoForm/index.js b/src/pages/AddCardPages/AddFormPage/CardInfoForm/index.js
@@ -51,6 +51,7 @@ export const CardInfoForm = (props) => {
       />
       <PasswordInput password={password} setPassword={setPassword} ref={passwordInputRef} />
       <Button
+        className="CardInfoForm__Submit_Button"
         disabled={!isFormFulFilled({ cardInfo, initialCardInfo })}
         onClick={(e) => handleCardInfoSubmit({ e, cardInfo, setIsModalOpen, initialCardInfo, setRoute })}
       >

diff --git a/src/pages/AddCardPages/AddFormPage/index.js b/src/pages/AddCardPages/AddFormPage/index.js
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, CreditCardPreview, Heading } from '../../../components';
+import { BackwardButton, CreditCardPreview, Heading } from '../../../components';
 import { CardInfoForm } from './CardInfoForm';
 import { CardCompanySelectModal } from './CardCompanySelectModal';
 import { getFormattedCardInfo } from '../../../cardInfoFormatter';
@@ -35,16 +35,3 @@ export const AddFormPage = (props) => {
     </div>
   );
 };
-
-function BackwardButton() {
-  const size = 16;
-  const color = '#525252';
-
-  return (
-    <Button theme="backward" onClick={() => {}}>
-      <svg viewBox={`0 0 ${size} ${size}`} height={size} width={size} fill="none">
-        <path d="M8.30426 1L1.36476 8.78658L9.15134 15.7261" stroke={color} strokeWidth="1.5" />
-      </svg>
-    </Button>
-  );
-}
diff --git a/src/pages/AddCardPages/AddFormPage/style.css b/src/pages/AddCardPages/AddFormPage/style.css
@@ -8,10 +8,6 @@
   align-items: center;
 }
 
-.AddFormPage__Heading > .Button--backward {
-  margin-right: 1.5rem;
-}
-
 /* 카드 정보 작성 폼 */
 
 .CardInfoForm {
@@ -24,7 +20,16 @@
   margin-top: 1rem;
 }
 
-.CardInfoForm .Button:disabled {
+.CardInfoForm__Submit_Button {
+  color: #04c09e;
+  font-size: 0.875rem;
+  text-align: end;
+  position: absolute;
+  bottom: 1rem;
+  right: 0.5rem;
+}
+
+.CardInfoForm__Submit_Button:disabled {
   cursor: default;
   opacity: 0.5;
 }
@@ -126,11 +131,21 @@
   letter-spacing: 0.3rem;
 }
 
-.SecurityCodeInput__GuideImage {
+.SecurityCodeInput__Guide__Button {
+  margin-left: 0.75rem;
+  font-size: 1.25rem;
+  width: 1.6875rem;
+  height: 1.6875rem;
+  color: #969696;
+  border: 1px solid #bababa;
+  border-radius: 50%;
+}
+
+.SecurityCodeInput__Guide__Image {
   visibility: hidden;
 }
 
-.SecurityCodeInput__Wrapper > .Button:hover ~ .SecurityCodeInput__GuideImage {
+.SecurityCodeInput__Wrapper > .Button:hover ~ .SecurityCodeInput__Guide__Image {
   visibility: visible;
 }
 
@@ -169,3 +184,9 @@
   flex-direction: column;
   align-items: center;
 }
+
+.CardCompanyList__Item__Button {
+  width: 2.3125rem;
+  height: 2.3125rem;
+  border-radius: 50%;
+}