[1단계 - 페이먼츠] - 하쿠(이동현) 미션 제출합니다.

src/App.tsx

@@ -1,51 +1,48 @@
-import "./App.css";
-import styled from "styled-components";
-import CardPreview from "./components/cardPreview/CardPreview";
-import CardNumberSection from "./components/cardNumberSection/CardNumberSection";
-import CardExpirationPeriodSection from "./components/cardExpirationPeriodSection/CardExpirationPeriodSection";
-import CardCVCNumberSection from "./components/cardCVCNumberSection/CardCVCNumberSection";
-import { useState } from "react";
-import { ExpirationPeriod, Position } from "./\btypes/index.types";
-import { INITIALIZE_VALUE } from "./constants/constant";
+import './App.css';
+import styled from 'styled-components';
+import CardPreview from './components/cardPreview/CardPreview';
+import CardNumberSection from './components/cardNumberSection/CardNumberSection';
+import CardExpirationPeriodSection from './components/cardExpirationPeriodSection/CardExpirationPeriodSection';
+import CardCVCNumberSection from './components/cardCVCNumberSection/CardCVCNumberSection';
+import { useState } from 'react';
+import { ExpirationPeriod, Position } from './types/index.types';
+import { INITIALIZE_VALUE } from './constants/constant';
 
 const StyledApp = styled.div`
-display: flex;
-justify-content : center;
-`
-
+  display: flex;
+  justify-content: center;
+`;
 
 const StyledFrame = styled.div`
-display: inline-flex;
-padding: 77px 30px 19px 31px;
-flex-direction: column;
-justify-content: flex-end;
-align-items : center;
-gap: 45px;
-background-color: white;
-width: 100%;
-max-width: 600px;
-box-sizing: border-box;
-`
-
+  display: inline-flex;
+  padding: 77px 30px 19px 31px;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 45px;
+  background-color: white;
+  width: 100%;
+  max-width: 600px;
+  box-sizing: border-box;
+`;
 
 type CardNumberState = {
   [key in Position]: string;
 };
 
 type ExpirationPeriodState = {
   [key in keyof ExpirationPeriod]: string;
-}
-
+};
 
 function App() {
   const [cardNumber, setCardNumber] = useState<CardNumberState>({
     first: INITIALIZE_VALUE,
     second: INITIALIZE_VALUE,
     third: INITIALIZE_VALUE,
-    fourth : INITIALIZE_VALUE,
+    fourth: INITIALIZE_VALUE,
   });
 
-  const [expirationPeriod, setExpirationPeriod] = useState<ExpirationPeriodState >({
+  const [expirationPeriod, setExpirationPeriod] = useState<ExpirationPeriodState>({
     month: INITIALIZE_VALUE,
     year: INITIALIZE_VALUE,
   });
@@ -55,27 +52,30 @@ function App() {
   function changeCardNumber(position: Position, cardNumber: string) {
     setCardNumber((prev) => {
       prev[position] = cardNumber;
-      return {...prev}
-    })
+      return { ...prev };
+    });
   }
 
   function changeExpirationPeriod(expirationPeriod: keyof ExpirationPeriod, date: string) {
     setExpirationPeriod((prev) => {
       prev[expirationPeriod] = date;
-      return {...prev}
-    })
+      return { ...prev };
+    });
   }
 
-   function changeCVCNumber(CVCNumber : string ) {
+  function changeCVCNumber(CVCNumber: string) {
     setCVCNumber(CVCNumber);
   }
 
   return (
     <StyledApp>
       <StyledFrame>
-        <CardPreview cardNumber={cardNumber} expirationPeriod={expirationPeriod}  />
+        <CardPreview cardNumber={cardNumber} expirationPeriod={expirationPeriod} />
         <CardNumberSection cardNumber={cardNumber} changeCardNumber={changeCardNumber} />
-        <CardExpirationPeriodSection expirationPeriod={expirationPeriod} changeExpirationPeriod={changeExpirationPeriod}/>
+        <CardExpirationPeriodSection
+          expirationPeriod={expirationPeriod}
+          changeExpirationPeriod={changeExpirationPeriod}
+        />
         <CardCVCNumberSection CVCNumber={CVCNumber} changeCVCNumber={changeCVCNumber} />
       </StyledFrame>
     </StyledApp>

src/components/cardCVCNumberInputs/CardCVCNumberInputs.tsx

@@ -1,58 +1,57 @@
-import Input from "../input/Input"
-import { CardCVCNumberSectionProps } from "../../\btypes/index.types"
-import { useState } from "react"
-import { isValidLength, isValidNumber } from "../../util/validation"
-import { NO_ERROR } from "../../constants/constant"
-import { StyledContainer, StyledInputWrap, StyledErrorMessage } from "../../styled-component/inputs"
+import Input from '../input/Input';
+import { CardCVCNumberSectionProps } from '../../types/index.types';
+import { useState } from 'react';
+import { isValidLength, isValidNumber } from '../../util/validation';
+import { NO_ERROR } from '../../constants/constant';
+import { StyledContainer, StyledInputWrap, StyledErrorMessage } from '../../styled-component/inputs';
 
 const CVC_NUMBER_LENGTH = 3;
 
 const errorMessage = {
-    length: '3자리만 입력 가능합니다.',
-    number : '숫자만 입력 가능합니다.'
-}
+  length: '3자리만 입력 가능합니다.',
+  number: '숫자만 입력 가능합니다.',
+};
 
 function CardCVCNumberInputs({ CVCNumber, changeCVCNumber }: CardCVCNumberSectionProps) {
+  const [error, setError] = useState(NO_ERROR);
 
-      const [error, setError] = useState(NO_ERROR);
-
-     function checkValidation(length : number, CVCNumber: string) {
-        if (CVCNumber === NO_ERROR) {
-            setError(NO_ERROR)
-            return;
-        }
-
-        if (!isValidLength(CVCNumber, length)) {
-            setError(errorMessage.length)
-            return;
-         }
-         if (!isValidNumber(CVCNumber)) {
-               setError(errorMessage.number)
-            return;
-        }
-
-        setError(NO_ERROR)
+  function checkValidation(length: number, CVCNumber: string) {
+    if (CVCNumber === NO_ERROR) {
+      setError(NO_ERROR);
+      return;
     }
 
+    if (!isValidLength(CVCNumber, length)) {
+      setError(errorMessage.length);
+      return;
+    }
+    if (!isValidNumber(CVCNumber)) {
+      setError(errorMessage.number);
+      return;
+    }
 
-    return (
-        <StyledContainer>
-            <label htmlFor="">CVC</label>
-           <StyledInputWrap>
-                <Input
-                    value={CVCNumber}
-                    onChange={(e) => {
-                    changeCVCNumber(e.target.value);
-                    checkValidation(CVC_NUMBER_LENGTH, e.target.value);
-                    }}
-                    isError={error !== NO_ERROR}
-                    width='100%'
-                    maxLength={CVC_NUMBER_LENGTH}
-                    placeholder='123' />
-            </StyledInputWrap>
-            {error !== NO_ERROR ? <StyledErrorMessage>{error}</StyledErrorMessage> : null}
-        </StyledContainer>
-    )
+    setError(NO_ERROR);
+  }
+
+  return (
+    <StyledContainer>
+      <label htmlFor="">CVC</label>
+      <StyledInputWrap>
+        <Input
+          value={CVCNumber}
+          onChange={(e) => {
+            changeCVCNumber(e.target.value);
+            checkValidation(CVC_NUMBER_LENGTH, e.target.value);
+          }}
+          isError={error !== NO_ERROR}
+          width="100%"
+          maxLength={CVC_NUMBER_LENGTH}
+          placeholder="123"
+        />
+      </StyledInputWrap>
+      {error !== NO_ERROR ? <StyledErrorMessage>{error}</StyledErrorMessage> : null}
+    </StyledContainer>
+  );
 }
 
-export default CardCVCNumberInputs
+export default CardCVCNumberInputs;

src/components/cardCVCNumberSection/CardCVCNumberSection.tsx

@@ -1,24 +1,24 @@
-import SectionTitle from "../sectionTitle/SectionTitle"
-import CardCVCNumberInputs from "../cardCVCNumberInputs/CardCVCNumberInputs"
-import styled from "styled-components"
-import { CardCVCNumberSectionProps } from "../../\btypes/index.types"
+import SectionTitle from '../sectionTitle/SectionTitle';
+import CardCVCNumberInputs from '../cardCVCNumberInputs/CardCVCNumberInputs';
+import styled from 'styled-components';
+import { CardCVCNumberSectionProps } from '../../types/index.types';
 
 const StyledContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 16px;
-    width: 100%;
-`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+`;
 
-function CardCVCNumberSection({ CVCNumber, changeCVCNumber } : CardCVCNumberSectionProps) {
-    return (
-        <StyledContainer>
-            <SectionTitle title='CVC 번호를 입력해 주세요'/>
-            <CardCVCNumberInputs CVCNumber={CVCNumber} changeCVCNumber={changeCVCNumber}/>
-        </StyledContainer>
-    )
+function CardCVCNumberSection({ CVCNumber, changeCVCNumber }: CardCVCNumberSectionProps) {
+  return (
+    <StyledContainer>
+      <SectionTitle title="CVC 번호를 입력해 주세요" />
+      <CardCVCNumberInputs CVCNumber={CVCNumber} changeCVCNumber={changeCVCNumber} />
+    </StyledContainer>
+  );
 }
 
-export default CardCVCNumberSection
+export default CardCVCNumberSection;