feat: 현금영수증 번호는 숫자만 입력 가능하도록 제한

- 현금영수증 번호가 숫자인지 유효성 검사 추가

src/pages/Payment/index.tsx

@@ -22,14 +22,31 @@ const PaymentPage = () => {
   const [receiptType, setReceiptType] = useState('personal');
   const [receiptNumber, setReceiptNumber] = useState('');
   const [messageError, setMessageError] = useState('');
+  const [receiptError, setReceiptError] = useState('');
 
   const handlePayment = () => {
+    // 카드 메시지 유효성 검사
     if (!message) {
       setMessageError('카드 메시지를 입력해주세요.');
       return;
     }
+    if (message.length > 100) {
+      setMessageError('카드 메시지는 100자를 초과할 수 없습니다.');
+      return;
+    }
     setMessageError('');
 
+    // 현금영수증 번호 유효성 검사
+    if (receipt && !receiptNumber) {
+      setReceiptError('현금영수증 번호를 입력해주세요.');
+      return;
+    }
+    if (receipt && !/^\d*$/.test(receiptNumber)) {
+      setReceiptError('현금영수증 번호는 숫자만 입력 가능합니다.');
+      return;
+    }
+    setReceiptError('');
+
     alert('주문이 완료되었습니다');
   };
 
@@ -52,26 +69,6 @@ const PaymentPage = () => {
     );
   }
 
-  const handlePayment = () => {
-    if (!message) {
-      setMessageError('카드 메시지를 입력해주세요.');
-      return;
-    }
-    if (message.length > 100) {
-      setMessageError('카드 메시지는 100자를 초과할 수 없습니다.');
-      return;
-    }
-    setMessageError('');
-
-    if (receipt && !receiptNumber) {
-      setReceiptError('현금영수증 번호를 입력해주세요.');
-      return;
-    }
-    setReceiptError('');
-
-    alert('주문이 완료되었습니다');
-  };
-
   return (
     <Box display="flex" p={4} justifyContent="space-between" maxWidth="1200px" margin="0 auto">
       <Box flex="1" mr={4}>
@@ -128,6 +125,11 @@ const PaymentPage = () => {
                 placeholder="(-없이) 숫자만 입력하세요."
                 invalid={!/^\d*$/.test(receiptNumber)}
               />
+              {receiptError && (
+                <Text color="red.500" mt={2}>
+                  {receiptError}
+                </Text>
+              )}
             </Box>
           )}
           <Box mt={4} borderTop="1px solid #e2e8f0" pt={4}>
@@ -138,7 +140,7 @@ const PaymentPage = () => {
               {productDetail.price.sellingPrice.toLocaleString()}원
             </Text>
           </Box>
-          <Button size="large" theme="kakao" onClick={handlePayment} width="100%" mt={4}>
+          <Button size="large" theme="kakao" onClick={handlePayment}>
             {productDetail.price.sellingPrice.toLocaleString()}원 결제하기
           </Button>
         </Box>