toast

src/pages/transaction/billing/charge-page.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { HeaderType } from '@/entities/common/model/types';
+import { CalendarType, HeaderType } from '@/entities/common/model/types';
 import { useBillingChargeMutation } from '@/entities/transaction/api/use-billing-charge-mutation';
 import {
   useSetOnBack,
@@ -10,18 +10,26 @@ import {
   useSetHeaderType,
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { NumericFormat, PatternFormat } from 'react-number-format';
+import { showAlert } from '@/widgets/show-alert';
+import moment from 'moment';
+import NiceCalendar from '@/shared/ui/calendar/nice-calendar';
+import { notiBar, snackBar } from '@/shared/lib';
 
 export const BillingChargePage = () => {
   const { navigate } = useNavigate();
 
-  const [billKey, setBillKey] = useState<string>('BIKYvattest01m');
-  const [productName, setProductName] = useState<string>('테스트상품123');
-  const [productAmount, setProductAmount] = useState<number>(1000000);
-  const [orderNumber, setOrderNumber] = useState<string>('P146733723');
-  const [buyerName, setBuyerName] = useState<string>('김테스트');
-  const [paymentRequestDate, setPaymentRequestDate] = useState<string>('2025-06-08');
+  const [billKey, setBillKey] = useState<string>('');
+  const [productName, setProductName] = useState<string>('');
+  const [productAmount, setProductAmount] = useState<number>(0);
+  const [orderNumber, setOrderNumber] = useState<string>('');
+  const [buyerName, setBuyerName] = useState<string>('');
+  const [paymentRequestDate, setPaymentRequestDate] = useState<string>(moment().format('YYYY.MM.DD'));
   const [installmentMonth, setInstallmentMonth] = useState<string>('00');
 
+  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
+
+
   useSetHeaderTitle('빌링 결제 신청');
   useSetHeaderType(HeaderType.RightClose);
   useSetOnBack(() => {
@@ -31,23 +39,64 @@ export const BillingChargePage = () => {
 
   const { mutateAsync: billingCharge } = useBillingChargeMutation();
 
+  const setNewDate = (date: string) => {
+    setPaymentRequestDate(moment(date).format('YYYY.MM.DD'));
+    setCalendarOpen(false);
+  };
+  const onClickToOpenCalendar = () => {
+    setCalendarOpen(true);
+  };
+
   const onClickToBillingCharge = () => {
+    if(!billKey){
+      showAlert('빌키는 필수 입력 항목입니다.');
+      return;
+    }
+    else if(!productName){
+      showAlert('상품명은 필수 입력 항목입니다.');
+    }
+    else if(!productAmount){
+      showAlert('상품금액은 필수 입력 항목입니다.');
+    }
+    else if(productAmount <= 0){
+      showAlert('상품금액은 0보다 커야 합니다.');
+    }
+    else if(!orderNumber){
+      showAlert('주문번호는 필수 입력 항목입니다.');
+    }
+    else if(!buyerName){
+      showAlert('구매자명은 필수 입력 항목입니다.');
+    }
+    
     let params = {
       billKey: billKey,
       productName: productName,
       productAmount: productAmount,
       orderNumber: orderNumber,
       buyerName: buyerName,
-      paymentRequestDate: paymentRequestDate,
+      paymentRequestDate: moment(paymentRequestDate).format('YYYYMMDD'),
       installmentMonth: installmentMonth
     };
     billingCharge(params).then((rs) => {
       console.log(rs);
-      alert('성공')
       navigate(PATHS.transaction.billing.list);
+    }).catch((e: any) => {
+      /*
+      if(e.response?.data?.message){
+        showAlert(e.response?.data?.message);
+        return;
+      }
+      */
     });
   };
 
+  const onChangeBillKey = (value: string) => {
+    const pattern = /^[A-Za-z0-9]+$/;
+    if(pattern.test(value) || value === ''){
+      setBillKey(value);
+    }
+  };
+
   const makeInstallmentMonthSelect = () => {
     let rs = [];
     
@@ -88,8 +137,8 @@ export const BillingChargePage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      readOnly={ true }
                       value={ billKey }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeBillKey(e.target.value) }
                     />
                   </div>
                 </div>
@@ -106,11 +155,12 @@ export const BillingChargePage = () => {
                 <div className="billing-row">
                   <div className="billing-label">상품금액 <span>*</span></div>
                   <div className="billing-field">
-                    <input 
-                      type="text" 
+                    <NumericFormat
                       value={ productAmount }
+                      allowNegative={ false }
+                      displayType="input"
                       onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(parseInt(e.target.value)) }
-                    />
+                    ></NumericFormat>
                   </div>
                 </div>
                 <div className="billing-row">
@@ -140,13 +190,14 @@ export const BillingChargePage = () => {
                     <div className="input-wrapper date wid-100">
                       <input
                         type="text"
-                        placeholder=""
+                        placeholder="날짜 선택"
                         value={ paymentRequestDate }
+                        readOnly={ true }
                       />
                       <button
                         className="date-btn"
                         type="button"
-                        
+                        onClick={ () => onClickToOpenCalendar() }
                       >
                         <img 
                           src={ IMAGE_ROOT + '/ico_date.svg' }
@@ -179,6 +230,12 @@ export const BillingChargePage = () => {
           </div>
         </div>
       </main>
+      <NiceCalendar
+        calendarOpen={ calendarOpen }
+        setCalendarOpen={ setCalendarOpen }
+        calendarType={ CalendarType.Single }
+        setNewDate={ setNewDate }
+      ></NiceCalendar>
     </>
   );
 };