refactor: Container 컴포넌트 재사용성 개선

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

Hide file tree

Showing 3 changed files with 12 additions and 16 deletions.
diff --git a/src/components/Container/index.js b/src/components/Container/index.js
@@ -5,21 +5,17 @@ import styles from './style.css';
 
 const cx = classNames.bind(styles);
 
-export const Container = ({ className, children, ...props }) => {
+export const Container = ({ className, children, ...rest }) => {
   const containerClass = cx('Container', className);
 
   return (
-    <div className={containerClass} {...props}>
+    <div className={containerClass} {...rest}>
       {children}
     </div>
   );
 };
 
 Container.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.any.isRequired,
-};
-
-Container.defaultProps = {
-  className: '',
+  children: PropTypes.node.isRequired,
 };
diff --git a/src/components/Container/style.css b/src/components/Container/style.css
@@ -6,8 +6,3 @@
   width: 100%;
   height: 2.8125rem;
 }
-
-.CardPasswordInput {
-  display: flex;
-  flex-direction: row;
-}
diff --git a/src/pages/AddCardPages/AddFormPage/style.css b/src/pages/AddCardPages/AddFormPage/style.css
@@ -141,16 +141,21 @@
   border-radius: 50%;
 }
 
-.SecurityCodeInput__Guide__Image {
-  visibility: hidden;
+.SecurityCodeInput__Guide__Button:hover ~ .SecurityCodeInput__Guide__Image {
+  visibility: visible;
 }
 
-.SecurityCodeInput__Wrapper > .Button:hover ~ .SecurityCodeInput__Guide__Image {
-  visibility: visible;
+.SecurityCodeInput__Guide__Image {
+  visibility: hidden;
 }
 
 /* 비밀번호 입력 */
 
+.CardPasswordInput {
+  display: flex;
+  flex-direction: row;
+}
+
 .CardPasswordInput__Filler {
   width: 2.8125rem;
   border-radius: 0.4375rem;