[KAN-122] fix(euna): 프론트 코드 수정

Try-AngIe · Jul 24, 2024 · 67a38e4 · 67a38e4
1 parent 1b588f7
commit 67a38e4
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 36 deletions.
diff --git a/client/src/components/member/account/AccountInfo.jsx b/client/src/components/member/account/AccountInfo.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import Input from '@/components/common/inputs/Input';
 import { useInvoiceStore } from '@/stores/useInvoiceStore';
 import { verifyCMS } from '@/apis/validation';
+import { formatBirthDate } from '@/utils/format/formatBirth';
 
 const AccountInfo = ({ accountInfo, setAccountInfo }) => {
   const selectedCard = useInvoiceStore(state => state.selectedCard);
@@ -10,20 +11,6 @@ const AccountInfo = ({ accountInfo, setAccountInfo }) => {
   const [isVerified, setIsVerified] = useState(false);
   const [verificationResult, setVerificationResult] = useState(null);
 
-  const formatBirthDate = value => {
-    const cleaned = value.replace(/\D/g, '');
-    let formatted = cleaned;
-
-    if (cleaned.length > 4) {
-      formatted = `${cleaned.slice(0, 4)}-${cleaned.slice(4)}`;
-    }
-    if (cleaned.length > 6) {
-      formatted = `${formatted.slice(0, 7)}-${formatted.slice(7)}`;
-    }
-
-    return formatted.slice(0, 10);
-  };
-
   const handleInputChange = e => {
     const { name, value } = e.target;
     let formattedValue = value;

diff --git a/client/src/components/member/account/ChooseBank.jsx b/client/src/components/member/account/ChooseBank.jsx
@@ -2,9 +2,11 @@ import { convertToProductSummary } from '@/pages/member/InvoicePage';
 import { useInvoiceStore } from '@/stores/useInvoiceStore';
 import React, { useState } from 'react';
 
-const ChooseBank = ({billingInfo}) => {
-  const setSelectedCard = useInvoiceStore((state) => state.setSelectedCard);
-  const selectedCard = useInvoiceStore((state) => state.selectedCard);
+const ChooseBank = ({ billingInfo }) => {
+  // const setSelectedCard = useInvoiceStore((state) => state.setSelectedCard);
+  // const selectedCard = useInvoiceStore((state) => state.selectedCard);
+
+  const { setSelectedCard, selectedCard } = useInvoiceStore();
 
   const cardOptions = [
     '기업은행',
@@ -36,7 +38,9 @@ const ChooseBank = ({billingInfo}) => {
       <h4 className='text-sm text-gray-500 mb-2 font-semibold'>결제금액</h4>
       <div className='mb-4 h-24 border border-mint rounded-lg p-4 flex flex-col justify-between'>
         <div>
-          <p className='text-base font-semibold'>{convertToProductSummary(billingInfo.billingProducts)}</p>
+          <p className='text-base font-semibold'>
+            {convertToProductSummary(billingInfo.billingProducts)}
+          </p>
           <p className='text-xs text-gray-500'>{billingInfo.billingDate}</p>
         </div>
         <div className='self-end'>

diff --git a/client/src/components/member/card/CardInfo.jsx b/client/src/components/member/card/CardInfo.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import Input from '@/components/common/inputs/Input';
 import { useInvoiceStore } from '@/stores/useInvoiceStore';
 import { verifyCard } from '@/apis/validation';
+import { formatBirthDate } from '@/utils/format/formatBirth';
 
 const CardInfo = ({ cardInfo, setCardInfo }) => {
   const selectedCard = useInvoiceStore(state => state.selectedCard);
@@ -10,20 +11,6 @@ const CardInfo = ({ cardInfo, setCardInfo }) => {
   const [isVerified, setIsVerified] = useState(false);
   const [verificationResult, setVerificationResult] = useState(null);
 
-  const formatBirthDate = value => {
-    const cleaned = value.replace(/\D/g, '');
-    let formatted = cleaned;
-
-    if (cleaned.length > 4) {
-      formatted = `${cleaned.slice(0, 4)}-${cleaned.slice(4)}`;
-    }
-    if (cleaned.length > 6) {
-      formatted = `${formatted.slice(0, 7)}-${formatted.slice(7)}`;
-    }
-
-    return formatted.slice(0, 10);
-  };
-
   const formatExpiryDate = value => {
     const cleaned = value.replace(/\D/g, '');
     let formatted = cleaned;

diff --git a/client/src/components/member/card/ChooseCard.jsx b/client/src/components/member/card/ChooseCard.jsx
@@ -3,10 +3,6 @@ import { useInvoiceStore } from '@/stores/useInvoiceStore';
 import React, { useState } from 'react';
 
 const ChooseCard = () => {
-  // const setSelectedCard = useInvoiceStore(state => state.setSelectedCard);
-  // const selectedCard = useInvoiceStore(state => state.selectedCard);
-  // const invoiceInfo = useInvoiceStore(state => state.invoiceInfo);
-
   const { setSelectedCard, selectedCard, invoiceInfo } = useInvoiceStore();
 
   const cardOptions = [

diff --git a/client/src/utils/format/formatBirth.js b/client/src/utils/format/formatBirth.js
@@ -16,3 +16,18 @@ export const removeDashesFromBirth = birth => {
   // 생년월일에서 모든 대시를 제거하고 숫자만 이어붙임
   return birth.replace(/-/g, '');
 };
+
+// <------ 생년월일 포맷팅 함수 ------>
+export const formatBirthDate = value => {
+  const cleaned = value.replace(/\D/g, '');
+  let formatted = cleaned;
+
+  if (cleaned.length > 4) {
+    formatted = `${cleaned.slice(0, 4)}-${cleaned.slice(4)}`;
+  }
+  if (cleaned.length > 6) {
+    formatted = `${formatted.slice(0, 7)}-${formatted.slice(7)}`;
+  }
+
+  return formatted.slice(0, 10);
+};