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

src/components/Modal/index.js

@@ -5,14 +5,13 @@ import styles from './style.css';
 
 const cx = classnames.bind(styles);
 
-export const Modal = ({ isOpen, className, children, ...props }) => {
-  const modalClass = cx('Modal', { 'Modal--open': isOpen });
-  const modalContentClass = cx('Modal__Content', className);
-
+export const Modal = ({ isOpen, className, style, children, ...rest }) => {
   return (
-    <div className={modalClass} {...props}>
+    <div className={cx('Modal', { 'Modal--open': isOpen })} {...rest}>
       <div className="Modal__ViewPort">
-        <div className={modalContentClass}>{children}</div>
+        <div className={cx('Modal__Content', className)} style={style}>
+          {children}
+        </div>
       </div>
     </div>
   );
@@ -21,5 +20,6 @@ export const Modal = ({ isOpen, className, children, ...props }) => {
 Modal.propTypes = {
   isOpen: PropTypes.bool,
   className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  styles: PropTypes.object,
+  children: PropTypes.node,
 };

src/components/Modal/style.css

@@ -32,11 +32,3 @@
   background: #fff;
   border-radius: 5px;
 }
-
-.CardCompanySelectModal--bottom {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  border-radius: 5px 5px 0 0;
-  padding-bottom: 0.875rem;
-}

src/pages/AddCardPages/AddCompletePage/CardNicknameForm/style.css

@@ -1,3 +1,8 @@
 .CardNicknameForm > .Button--submit {
   margin-top: 11rem;
 }
+
+.CardNicknameForm .Button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}

src/pages/AddCardPages/AddFormPage/CardCompanySelectModal/index.js

@@ -2,7 +2,6 @@
 import { Button, Label, Modal } from '../../../../components';
 import { handleCardCompanySelect, handleDimmedAreaClick } from './handler';
 import { CARD_COMPANY_LIST } from '../../../../constants';
-import './style.css';
 
 export const CardCompanySelectModal = ({ isOpen, setCardInfo, setIsModalOpen }) => {
   return (
@@ -30,7 +29,7 @@ function CardCompanyItem({ company, setCardInfo, setIsModalOpen }) {
   const { name, color } = company;
 
   return (
-    <li className="CardCompanyItem">
+    <li className="CardCompanyList__Item">
       <Button
         name={name}
         backgroundColor={color}

src/pages/AddCardPages/AddFormPage/CardInfoForm/index.js

@@ -7,7 +7,6 @@ import { SecurityCodeInput } from './SecurityCodeInput';
 import { PasswordInput } from './PasswordInput';
 import { handleCardInfoSubmit } from './handler';
 import { isFormFulFilled } from './validator';
-import './style.css';
 
 export const CardInfoForm = (props) => {
   const { initialCardInfo, cardInfo, setCardInfo, setIsModalOpen, setRoute } = props;

src/pages/AddCardPages/AddFormPage/style.css

@@ -12,8 +12,100 @@
   margin-right: 1.5rem;
 }
 
-.CreditCardPreview {
+/* 카드 정보 작성 폼 */
+
+.CardInfoForm {
+  margin-top: 1.5rem;
+}
+
+.CardInfoForm > .Label {
+  margin-top: 1rem;
+}
+
+.CardInfoForm .Button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+/* 카드번호 입력 */
+
+.CardNumberInput__Separator {
+  text-align: center;
+  color: #04c09e;
+  font-size: 0.75rem;
+  width: 1rem;
+}
+
+.CardNumberInput__Separator--hidden {
+  visibility: hidden;
+}
+
+/* 만료일 입력 */
+
+.ExpirationDateInput__Separator {
+  color: #737373;
+  font-size: 0.75rem;
+  text-align: center;
+  width: 1rem;
+}
+
+/* 카드 소유자 이름 입력 */
+
+.OwnerNameInput__Header {
   display: flex;
-  justify-content: center;
-  margin-top: 0.75rem;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+
+.OwnerNameInput__Header .Label {
+  flex-grow: 2;
+}
+
+.OwnerNameInput__Header__Text {
+  margin: 0 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-align: end;
+  color: #525252;
+  width: 2rem;
+}
+
+/* 보안코드 입력 */
+
+.SecurityCodeInput__Wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.SecurityCodeInput__GuideImage {
+  visibility: hidden;
+}
+
+.SecurityCodeInput__Wrapper > .Button:hover ~ .SecurityCodeInput__GuideImage {
+  visibility: visible;
+}
+
+/* 카드사 선택 모달 */
+
+.CardCompanySelectModal--bottom {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-radius: 5px 5px 0 0;
+  padding-bottom: 0.875rem;
+}
+
+.CardCompanyList {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  row-gap: 1rem;
+  padding: 0.875rem 2rem;
+}
+
+.CardCompanyList__Item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

src/pages/CardListPage/index.js

@@ -9,9 +9,9 @@ export const CardListPage = (props) => {
   return (
     <div className="CardListPage">
       <Heading>보유카드</Heading>
-      <button className="Card__AddButton" onClick={handleAddButtonClick}>
+      <button className="CardListPage__AddButton" onClick={handleAddButtonClick}>
         <Card>
-          <Text className="CardListPage__Text">+</Text>
+          <Text className="CardListPage__AddSign">+</Text>
         </Card>
       </button>
     </div>

src/pages/CardListPage/style.css

@@ -5,7 +5,7 @@
   align-items: flex-start;
 }
 
-.Card__AddButton {
+.CardListPage__AddButton {
   margin-top: 3.75rem;
   align-self: center;
   padding: 0;
@@ -17,8 +17,14 @@
   cursor: pointer;
 }
 
-.CardListPage__Text {
+.CardListPage__AddSign {
   width: 100%;
   font-size: 1.875rem;
   text-align: center;
 }
+
+.CreditCardPreview {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.75rem;
+}