toast

2025-10-22 14:21:14 +09:00
parent 1e7f13d5cc
commit 556b3f2a6a
27 changed files with 178 additions and 397 deletions
--- a/src/pages/transaction/billing/charge-page.tsx
+++ b/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>
    </>
  );
 };
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -32,9 +32,9 @@ export const BillingListPage = () => {
 	const [mid, setMid] = useState<string>(userMid);
 	const [searchType, setSearchType] = useState<BillingSearchType>(BillingSearchType.ALL);
 	const [searchKeyword, setSearchKeyword] = useState<string>('');
-	// const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-	const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
-	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
+	//const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
 	const [requestStatus, setRequestStatus] = useState<BillingRequestStatus>(BillingRequestStatus.ALL);
 	const [processResult, setProcessResult] = useState<BillingProcessResult>(BillingProcessResult.ALL);
 	const [paymentMethod, setPaymentMethod] = useState<BillingPaymentMethod>(BillingPaymentMethod.ALL);
@@ -76,8 +76,9 @@ export const BillingListPage = () => {
 			maxAmount: newMaxAmount,
 			page: pageParam
    };
+
 		if(listParams.page){
-			listParams.page.sortType = (option?.sortType)? option.sortType: sortType;
+			listParams.page.sortType = option?.sortType || sortType;
    	setPageParam(listParams.page);
 		}
 				    
@@ -114,6 +115,14 @@ export const BillingListPage = () => {
  useEffect(() => {
    callList();
  }, []);
+	useEffect(() => {
+		callList();
+	}, [
+		mid, searchType, searchKeyword,
+		startDate, endDate,
+		requestStatus, processResult, paymentMethod,
+		minAmount, maxAmount
+	]);
 	
 	return (
 		<>
--- a/src/pages/transaction/cash-receipt/list-page.tsx
+++ b/src/pages/transaction/cash-receipt/list-page.tsx
@@ -5,7 +5,18 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { CashReceiptList } from '@/entities/transaction/ui/cash-receipt-list';
-import { CashReceiptListItem, TransactionCategory, CashReceiptPurposeType, CashReceiptProcessResult, ListItemProps, CashReceiptListParams, CashReceiptTransactionType, CashReceiptSearchNumberType, CashReceiptSummaryParams, CashReceiptListResponse, CashReceiptSummaryResponse } from '@/entities/transaction/model/types';
+import { 
+	TransactionCategory, 
+	CashReceiptPurposeType, 
+	CashReceiptProcessResult, 
+	ListItemProps, 
+	CashReceiptListParams, 
+	CashReceiptTransactionType, 
+	CashReceiptSearchNumberType, 
+	CashReceiptSummaryParams, 
+	CashReceiptListResponse, 
+	CashReceiptSummaryResponse 
+} from '@/entities/transaction/model/types';
 import { useCashReceiptListMutation } from '@/entities/transaction/api/use-cash-receipt-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
@@ -127,9 +138,8 @@ export const CashReceiptListPage = () => {
    callList();
  }, [
    mid, startDate, endDate, 
-    purposeType, transactionType, 
-    processResult, searchNumberType, 
-    searchNumber
+    purposeType, transactionType, processResult,
+    searchNumberType, searchNumber
  ]);

 	return (
--- a/src/pages/transaction/escrow/list-page.tsx
+++ b/src/pages/transaction/escrow/list-page.tsx
@@ -5,7 +5,15 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { EscrowList } from '@/entities/transaction/ui/escrow-list';
-import { EscrowListItem, TransactionCategory, EscrowDeliveryStatus, EscrowSearchType, EscrowSettlementStatus, ListItemProps } from '@/entities/transaction/model/types';
+import { 
+	TransactionCategory, 
+	EscrowDeliveryStatus, 
+	EscrowSearchType, 
+	EscrowSettlementStatus, 
+	ListItemProps, 
+	EscrowListParams,
+	EscrowListResponse
+} from '@/entities/transaction/model/types';
 import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
@@ -32,9 +40,9 @@ export const EscrowListPage = () => {
 	const [mid, setMid] = useState<string>(userMid);
 	const [searchType, setSearchType] = useState<EscrowSearchType>(EscrowSearchType.ALL);
 	const [searchKeyword, setSearchKeyword] = useState<string>('');
-	//const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-	const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
-	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
+	// const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
 	const [deliveryStatus, setDeliveryStatus] = useState<EscrowDeliveryStatus>(EscrowDeliveryStatus.ALL);
 	const [settlementStatus, setSettlementStatus] = useState<EscrowSettlementStatus>(EscrowSettlementStatus.ALL);
 	const [minAmount, setMinAmount] = useState<number>();
@@ -62,7 +70,7 @@ export const EscrowListPage = () => {
 		if(!!maxAmount && typeof(maxAmount) === 'string'){
 			newMaxAmount = parseInt(maxAmount);
 		}
-    let listParams = {
+    let listParams: EscrowListParams = {
      mid: mid,
  		searchType: 'ORDER_NUMBER',
  		searchKeyword: searchKeyword,
@@ -74,12 +82,13 @@ export const EscrowListPage = () => {
  		maxAmount: newMaxAmount,
 			page: pageParam
    };
+
 		if(listParams.page){
-			listParams.page.sortType = (option?.sortType)? option.sortType: sortType;
+			listParams.page.sortType = option?.sortType || sortType;
    	setPageParam(listParams.page);
 		}

-		escrowList(listParams).then((rs) => {
+		escrowList(listParams).then((rs: EscrowListResponse) => {
      setListItems(rs.content);
    });
  };
@@ -112,6 +121,14 @@ export const EscrowListPage = () => {
  useEffect(() => {
    callList();
  }, []);
+	useEffect(() => {
+		callList();
+	}, [
+		mid, searchType, searchKeyword,
+		startDate, endDate,
+		deliveryStatus, settlementStatus,
+		minAmount, maxAmount
+	]);

 	return (
 		<>