refactor: Input 컴포넌트 재사용성 개선, CSS 스타일 정의 위치 수정

woowacourse · May 3, 2021 · ab1db8d · ab1db8d
1 parent c57b0e2
commit ab1db8d
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 85 deletions.
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
@@ -6,21 +6,17 @@ import styles from './style.css';
 
 const cx = classnames.bind(styles);
 
-export const Input = forwardRef(({ container, className, ...props }, ref) => {
-  const inputClass = cx('Input', className);
-
+export const Input = forwardRef(({ container, className, ...rest }, ref) => {
   if (container) {
     return (
       <Container className={container}>
-        <input className={inputClass} {...props} ref={ref} />
+        <input className={cx('Input', className)} {...rest} ref={ref} />
       </Container>
     );
   }
-  return <input className={inputClass} {...props} ref={ref} />;
+  return <input className={cx('Input', className)} {...rest} ref={ref} />;
 });
 
-Input.displayName = 'Input';
-
 Input.propTypes = {
   container: PropTypes.string,
   className: PropTypes.string,
@@ -29,6 +25,8 @@ Input.propTypes = {
   disabled: PropTypes.bool,
   type: PropTypes.oneOf([
     'submit',
+    'button',
+    'reset',
     'text',
     'number',
     'password',
@@ -46,14 +44,13 @@ Input.propTypes = {
     'tel',
     'email',
     'file',
-  ]),
+    'image',
+    'hidden',
+  ]).isRequired,
 };
 
 Input.defaultProps = {
-  container: null,
-  className: null,
-  id: null,
-  placeholder: '',
-  disabled: false,
   type: 'text',
 };
+
+Input.displayName = 'Input';
diff --git a/src/components/Input/style.css b/src/components/Input/style.css
@@ -17,77 +17,7 @@
   -moz-appearance: textfield;
 }
 
-/* 공통 배경 */
 
-.CardInfoForm__Input__Filler--filled {
-  border-radius: 0.4375rem;
-  margin: 0.25rem;
-  background-color: #ecebf1;
-}
-
-.CardInfoForm__Input__Filler--transparent {
-  border-radius: 0.4375rem;
-  margin: 0.25rem;
-  background-color: transparent;
-}
-
-/* 카드 번호*/
-
-.CardNumberInput__Filler {
-  width: 100%;
-  border-radius: 0.4375rem;
-  margin: 0.25rem;
-}
-
-.CardNumberInput__Field {
-  width: 2.8125rem;
-  letter-spacing: 0.2rem;
-}
-
-/* 만료일 */
-
-.ExpirationDateInput__Filler {
-  width: 43%;
-}
-
-.ExpirationDateInput__Field {
-  width: 1.9rem;
-  letter-spacing: 0.2rem;
-}
-
-/* 카드 소유자 */
-
-.OwnerNameInput__Filler {
-  width: 100%;
-}
-
-.OwnerNameInput__Field {
-  width: 18rem;
-}
-
-/* 보안코드 */
-
-.SecurityCodeInput__Filler {
-  width: 26%;
-}
-
-.SecurityCodeInput__Field {
-  width: 2rem;
-  letter-spacing: 0.3rem;
-}
-
-/* 비밀번호 */
-
-.CardPasswordInput__Filler {
-  width: 2.8125rem;
-  border-radius: 0.4375rem;
-  margin: 0.25rem;
-}
-
-.CardPasswordInput__Field {
-  width: 1.2rem;
-  text-align: center;
-}
 
 /* 카드별명 */
 

diff --git a/src/components/Label/index.js b/src/components/Label/index.js
@@ -15,5 +15,5 @@ export const Label = ({ className, children, ...rest }) => {
 
 Label.propTypes = {
   htmlFor: PropTypes.string,
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
 };
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
@@ -21,5 +21,5 @@ Modal.propTypes = {
   isOpen: PropTypes.bool,
   className: PropTypes.string,
   styles: PropTypes.object,
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
 };
diff --git a/src/pages/AddCardPages/AddFormPage/style.css b/src/pages/AddCardPages/AddFormPage/style.css
@@ -27,8 +27,31 @@
   opacity: 0.5;
 }
 
+.CardInfoForm__Input__Filler--filled {
+  border-radius: 0.4375rem;
+  margin: 0.25rem;
+  background-color: #ecebf1;
+}
+
+.CardInfoForm__Input__Filler--transparent {
+  border-radius: 0.4375rem;
+  margin: 0.25rem;
+  background-color: transparent;
+}
+
 /* 카드번호 입력 */
 
+.CardNumberInput__Filler {
+  width: 100%;
+  border-radius: 0.4375rem;
+  margin: 0.25rem;
+}
+
+.CardNumberInput__Field {
+  width: 2.8125rem;
+  letter-spacing: 0.2rem;
+}
+
 .CardNumberInput__Separator {
   text-align: center;
   color: #04c09e;
@@ -42,6 +65,15 @@
 
 /* 만료일 입력 */
 
+.ExpirationDateInput__Filler {
+  width: 43%;
+}
+
+.ExpirationDateInput__Field {
+  width: 1.9rem;
+  letter-spacing: 0.2rem;
+}
+
 .ExpirationDateInput__Separator {
   color: #737373;
   font-size: 0.75rem;
@@ -68,13 +100,30 @@
   width: 2rem;
 }
 
+.OwnerNameInput__Filler {
+  width: 100%;
+}
+
+.OwnerNameInput__Field {
+  width: 18rem;
+}
+
 /* 보안코드 입력 */
 
 .SecurityCodeInput__Wrapper {
   display: flex;
   align-items: center;
 }
 
+.SecurityCodeInput__Filler {
+  width: 26%;
+}
+
+.SecurityCodeInput__Field {
+  width: 2rem;
+  letter-spacing: 0.3rem;
+}
+
 .SecurityCodeInput__GuideImage {
   visibility: hidden;
 }
@@ -83,6 +132,19 @@
   visibility: visible;
 }
 
+/* 비밀번호 입력 */
+
+.CardPasswordInput__Filler {
+  width: 2.8125rem;
+  border-radius: 0.4375rem;
+  margin: 0.25rem;
+}
+
+.CardPasswordInput__Field {
+  width: 1.2rem;
+  text-align: center;
+}
+
 /* 카드사 선택 모달 */
 
 .CardCompanySelectModal--bottom {