- 링크결제 API 수정

- 지급대행 수정
2025-10-21 14:24:51 +09:00
parent c3fbb91888
commit ab5bea6aeb
30 changed files with 784 additions and 590 deletions
--- a/src/pages/additional-service/account-holder-search/request-page.tsx
+++ b/src/pages/additional-service/account-holder-search/request-page.tsx
@@ -10,10 +10,13 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useExtensionAccountHolderSearchRequestMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-reqeust-mutation';
 import { ExtensionAccountHolderSearchRequestParams } from '@/entities/additional-service/model/account-holder-search/types';
+import { useStore } from '@/shared/model/store';

 export const AccountHolderSearchRequestPage = () => {
    const { navigate } = useNavigate();

+    const userMid = useStore.getState().UserStore.mid
+
    useSetHeaderTitle('계좌성명조회_신청');
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);
@@ -24,7 +27,7 @@ export const AccountHolderSearchRequestPage = () => {
    const { mutateAsync: accountHolderSearchRequest } = useExtensionAccountHolderSearchRequestMutation();

    const [formData, setFormData] = useState({
-        mid: 'nictest00m',
+        mid: userMid,
        bankCode: '',
        accountNo: ''
    })
--- a/src/pages/additional-service/link-payment/apply/link-payment-apply-confirm-page.tsx
+++ b/src/pages/additional-service/link-payment/apply/link-payment-apply-confirm-page.tsx
@@ -30,7 +30,7 @@ export const LinkPaymentApplyConfirmPage = () => {
            goodsName: formData.goodsName,
            amount: formData.amount,
            moid: formData.moid,
-            paymentExpiryDate: formData.paymentExpiryDate.replace(/\./g, ''),
+            paymentLimitDate: formData.paymentLimitDate.replace(/\./g, ''),
            buyerName: formData.buyerName,
            email: formData.email,
            phoneNumber: formData.phoneNumber,
--- a/src/pages/additional-service/link-payment/apply/link-payment-apply-page.tsx
+++ b/src/pages/additional-service/link-payment/apply/link-payment-apply-page.tsx
@@ -8,20 +8,22 @@ import {useNavigate} from '@/shared/lib/hooks/use-navigate';
 import {PATHS} from "@/shared/constants/paths";
 import { IdentityType, Language } from '@/entities/additional-service/model/types';
 import { LinkContentType, LinkPaymentFormData, LinkPaymentSendMethod } from '@/entities/additional-service/model/link-pay/types';
+import { useStore } from '@/shared/model/store';
+import moment from 'moment';



 export const LinkPaymentApplyPage = () => {
    const { navigate } = useNavigate();
-
+    const userMid = useStore.getState().UserStore.mid;
    const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
    const [formData, setFormData] = useState<LinkPaymentFormData>({
-      mid: 'nictest00m',
+      mid: userMid,
      sendMethod: LinkPaymentSendMethod.SMS,
      goodsName: '',
      amount: 0,
      moid: '',
-      paymentExpiryDate: '',
+      paymentLimitDate: moment().format('YYYY.MM.DD'),
      buyerName: '',
      email: '',
      phoneNumber: '',
@@ -36,10 +38,52 @@ export const LinkPaymentApplyPage = () => {
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);

+  // Step1 필수 필드 검증
+  const isStep1Valid = () => {
+    return (
+      formData.mid !== '' &&
+      formData.sendMethod !== '' &&
+      formData.goodsName.trim() !== '' &&
+      formData.amount > 0 &&
+      formData.moid.trim() !== '' &&
+      formData.paymentLimitDate !== ''
+    );
+  };
+
+  // 전화번호 형식 검증
+  const isValidPhoneNumber = (phone: string) => {
+    const phoneRegex = /^01[0|1|6|7|8|9][0-9]{7,8}$/;
+    return phoneRegex.test(phone);
+  };
+
+  // 이메일 형식 검증
+  const isValidEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  // Step2 필수 필드 검증
+  const isStep2Valid = () => {
+    const basicFieldsValid = (
+      formData.buyerName.trim() !== '' &&
+      formData.email.trim() !== '' &&
+      isValidEmail(formData.email) &&
+      formData.phoneNumber.trim() !== '' &&
+      isValidPhoneNumber(formData.phoneNumber)
+    );
+
+    // isIdentity가 true면 identityValue도 필수
+    if (formData.isIdentity) {
+      return basicFieldsValid && formData.identityValue.trim() !== '';
+    }
+
+    return basicFieldsValid;
+  };
+
  const onClickToBack = () => {
-        navigate(-1);
-    };
-  
+    setProcessStep(ProcessStep.One);
+  };
+
  const onClickToChangeTab = () => {
      if(processStep === ProcessStep.One) {
          setProcessStep(ProcessStep.Two);
@@ -93,7 +137,8 @@ export const LinkPaymentApplyPage = () => {
                  <div className="apply-row">
                      <button
                          className="btn-50 btn-blue flex-1"
-                          onClick={() => onClickToChangeTab() }
+                          onClick={() => onClickToChangeTab()}
+                          disabled={!isStep1Valid()}
                      >다음</button>
                  </div>
              }
@@ -101,11 +146,12 @@ export const LinkPaymentApplyPage = () => {
                  <div className="apply-row two-button">
                      <button
                          className="btn-50 btn-darkgray flex-1"
-                            onClick={() => onClickToBack() }
-                            >이전</button>
+                          onClick={() => onClickToBack()}
+                      >이전</button>
                      <button
                          className="btn-50 btn-blue flex-3"
-                          onClick={() => onClickToChangeTab() }
+                          onClick={() => onClickToChangeTab()}
+                          disabled={!isStep2Valid()}
                      >결제 신청</button>
                  </div>
              }
--- a/src/pages/additional-service/link-payment/link-payment-detail-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-detail-page.tsx
@@ -18,12 +18,13 @@ import { PaymentInfoWrap } from '@/entities/additional-service/ui/info-wrap/paym
 import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap';
 import { useExtensionLinkPayHistoryResendMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-history-resend-mutation';
 import { ExtensionLinkPayHistoryDetailParams, ExtensionLinkPayHistoryResendParams } from '@/entities/additional-service/model/link-pay/types';
+import moment from 'moment';

 export const LinkPaymentDetailPage = () => {
  const { navigate } = useNavigate();
  const location = useLocation();

-  const { mid, tid } = location.state || {};
+  const { mid, tid, requestId, subReqId } = location.state || {};

  const [titleInfo, setTitleInfo] = useState<TitleInfo>();
  const [detailInfo, setDetailInfo] = useState<DetailInfo>();
@@ -34,16 +35,19 @@ export const LinkPaymentDetailPage = () => {
  useSetHeaderTitle('링크결제 상세');
  useSetHeaderType(HeaderType.RightClose);
  useSetOnBack(() => {
-    navigate(PATHS.additionalService.linkPayment.shippingHistory);
+    navigate(-1); // 브라우저 히스토리를 이용한 뒤로가기
  });
  useSetFooterMode(false);

  const { mutateAsync: linkPayHistoryDetail } = useExtensionLinkPayHistoryDetailMutation();
  const { mutateAsync: linkPayHistoryResend } = useExtensionLinkPayHistoryResendMutation();
+  
+  // 상세내역 조회
  const callDetail = () => {
    let detailParam: ExtensionLinkPayHistoryDetailParams = {
      mid: mid,
-      tid: tid
+      requestId: requestId,
+      subReqId: subReqId
    }
    linkPayHistoryDetail(detailParam).then((rs: DetailResponse) => {
      console.log("Detail Info: ", rs)
@@ -53,15 +57,18 @@ export const LinkPaymentDetailPage = () => {
    })
  }

+  //제발송 API
  const resendPayment = () => {
    let resendParam: ExtensionLinkPayHistoryResendParams = {
      mid: mid,
-      tid: tid
+      requestId: requestId,
+      sendMethod: paymentInfo?.sendMethod
    }
    linkPayHistoryResend(resendParam)
      .then((response) => {
        console.log("Resend 성공 응답: ", response);
-        onClickToNavigate(PATHS.additionalService.linkPayment.shippingHistory)
+        // 현재 화면 유지하고 데이터 새로고침
+        callDetail();
      })
      .catch((error) => {
        console.error("Resend 실패: ", error);
@@ -103,6 +110,24 @@ export const LinkPaymentDetailPage = () => {
      state: { mid, tid }
    });
  };
+
+  // 재발송 버튼 활성화 조건 체크
+  const isResendEnabled = () => {
+    // paymentStatus가 "ACTIVE"이고
+    if (paymentInfo?.paymentStatus !== 'ACTIVE') {
+      return false;
+    }
+
+    // paymentLimitDate가 오늘 날짜를 지나지 않았을 때
+    if (paymentInfo?.paymentLimitDate) {
+      const limitDate = moment(paymentInfo.paymentLimitDate, 'YYYYMMDD');
+      const today = moment().startOf('day');
+      return limitDate.isSameOrAfter(today);
+    }
+
+    return false;
+  };
+
  useEffect(() => {
    callDetail();
  }, []);
@@ -129,18 +154,19 @@ export const LinkPaymentDetailPage = () => {
                detailInfo={detailInfo}
              ></DetailInfoWrap>
            </div>
-            <div className="apply-row">
+            {/* <div className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
                onClick={() => onClickToSeparateApproval()}
              >분리승인 상세</button>
-            </div>
-            {/* <div className="apply-row">
+            </div> */}
+            <div className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
                onClick={() => onClickToResend()}
+                disabled={!isResendEnabled()}
              >재발송</button>
-            </div> */}
+            </div>
          </div>
        </div>
      </main >
--- a/src/pages/additional-service/link-payment/link-payment-wait-detail-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-wait-detail-page.tsx
@@ -21,7 +21,7 @@ import { ExtensionLinkPayWaitDeleteParams, ExtensionLinkPayWaitDetailParams } fr
 export const LinkPaymentWaitDetailPage = () => {
  const { navigate } = useNavigate();
  const location = useLocation();
-  const { mid, tid } = location.state || {};
+  const { mid, requestId } = location.state || {};
  const [titleInfo, setTitleInfo] = useState<TitleInfo>();
  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();

@@ -34,10 +34,11 @@ export const LinkPaymentWaitDetailPage = () => {

  const { mutateAsync: linkPayWaitDetail } = useExtensionLinkPayWaitDetailMutation();
  const { mutateAsync: linkPayWaitDelete } = useExtensionLinkPayWaitDeleteMutation();
+
  const callDetail = () => {
    let detailParam: ExtensionLinkPayWaitDetailParams = {
      mid: mid,
-      tid: tid
+      requestId: requestId
    }

    linkPayWaitDetail(detailParam).then((rs: DetailResponse) => {
@@ -51,7 +52,7 @@ export const LinkPaymentWaitDetailPage = () => {
  const deletePayment = () => {
    let deleteParam: ExtensionLinkPayWaitDeleteParams = {
      mid: mid,
-      tid: tid
+      requestId: requestId
    }
    linkPayWaitDelete(deleteParam)
      .then((response) => {
--- a/src/pages/additional-service/payout/detail-page.tsx
+++ b/src/pages/additional-service/payout/detail-page.tsx
@@ -21,6 +21,8 @@ export const PayoutDetailPage = () => {
  const tid = location.state.tid;
  const mid = location.state.mid;

+  const [requestType, setRequestType] = useState<string>('');
+  const [email, setEmail] = useState<string>('');
  const [detail, setDetail] = useState<ExtensionPayoutDetailResponse>();

  const { mutateAsync: extensionPayoutDetail } = useExtensionPayoutDetailMutation();
@@ -48,6 +50,8 @@ export const PayoutDetailPage = () => {
    let params: ExtensionPayoutDetailDownloadCertificateParams = {
      tid: tid,
      mid: mid,
+      requestType: requestType,
+      email: email
    };
    extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
      console.log(rs);
@@ -74,8 +78,8 @@ export const PayoutDetailPage = () => {
                  ></NumericFormat>
                </span>
              </div>
-              <div className="num-store">나이스테스트가맹점</div>
-              <div className="num-day">2025.08.19</div>
+              <div className="num-store">{detail?.companyName}</div>
+              <div className="num-day">{detail?.settlementDate}</div>
              <div className="receipt-row">
                <button
                  className="receipt-btn"
@@ -105,7 +109,7 @@ export const PayoutDetailPage = () => {
                </li>
                <li className="kv-row">
                  <span className="k">지급일시</span>
-                  <span className="v">{ detail?.settlementDate }</span>
+                  <span className="v">{ detail?.settlementDateTime }</span>
                </li>
                <li className="kv-row">
                  <span className="k">사업자번호</span>
--- a/src/pages/additional-service/payout/list-page.tsx
+++ b/src/pages/additional-service/payout/list-page.tsx
@@ -1,6 +1,6 @@
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { HeaderType, SortTypeKeys } from '@/entities/common/model/types';
+import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useExtensionPayoutListMutation } from '@/entities/additional-service/api/payout/use-extension-payout-list-mutation';
 import {
@@ -10,11 +10,11 @@ import {
  ExtensionPayoutListResponse,
  PayoutContent,
  PayoutDisbursementStatus,
-  PayoutSearchCl
+  PayoutSearchDateType
 } from '@/entities/additional-service/model/payout/types';
-import { useEffect, useState } from 'react';
+import { JSX, useEffect, useState } from 'react';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { 
+import {
 	useSetHeaderTitle,
 	useSetHeaderType,
 	useSetFooterMode,
@@ -28,22 +28,44 @@ import { PayoutDisbursementStatusBtnGroup } from '@/entities/additional-service/
 import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
 import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
 import { useStore } from '@/shared/model/store';
+import useIntersectionObserver from '@/widgets/intersection-observer';

 export const PayoutListPage = () => {
  const { navigate } = useNavigate();
  const userMid = useStore.getState().UserStore.mid;

+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
+  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
+    entries.forEach((entry: IntersectionObserverEntry) => {
+      if (entry.isIntersecting) {
+        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
+        if (onActionIntersect) {
+          callExtensionPayoutList();
+        }
+      }
+      else {
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };
+
+  const { setTarget } = useIntersectionObserver({
+    threshold: 1,
+    onIntersect
+  });
+
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
-  const [listItems, setListItems] = useState<Record<string, Array<PayoutContent>>>({});
+  const [listItems, setListItems] = useState<Array<PayoutContent>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
-  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
+  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
  const [mid, setMid] = useState<string>(userMid);
-  const [searchCl, setSearchCl] = useState<PayoutSearchCl>(PayoutSearchCl.REQUEST_DATE);
+  const [searchDateType, setSearchDateType] = useState<PayoutSearchDateType>(PayoutSearchDateType.REQUEST_DATE);
  const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
  const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
-  const [disbursementStatus, setDisbursementStatus] = useState<PayoutDisbursementStatus>(PayoutDisbursementStatus.ALL);
-  const [minAmount, setMinAmount] = useState<number>();
-	const [maxAmount, setMaxAmount] = useState<number>();
+  const [status, setStatus] = useState<PayoutDisbursementStatus>(PayoutDisbursementStatus.ALL);
+  const [minAmount, setMinAmount] = useState<number>(0);
+	const [maxAmount, setMaxAmount] = useState<number>(50000000);

  const { mutateAsync: extensionPayoutList } = useExtensionPayoutListMutation();
  const { mutateAsync: extensionPayoutExcel } = useExtensionPayoutExcelMutation();
@@ -58,22 +80,20 @@ export const PayoutListPage = () => {
  const onClickToNavigation = () => {
    navigate(PATHS.additionalService.payout.request);
  };
-  const onClickToGoDetail = (tid?: string) => {
-    if(!!tid){
-      navigate(PATHS.additionalService.payout.detail, {
-        state: {
-          tid: tid
-        }
-      });
-    }
-  };

  const callExtensionPayoutList = (option?: {
-    sortType?: SortTypeKeys, 
-    val?: string
+    sortType?: SortTypeKeys,
+    status?: PayoutDisbursementStatus,
+    resetPage?: boolean
  }) => {
-    pageParam.sortType = (option?.sortType)? option.sortType: sortType;
-    setPageParam(pageParam);
+    setOnActionIntersect(false);
+
+    const currentPageParam = option?.resetPage
+      ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
+      : { ...pageParam, sortType: option?.sortType ?? sortType };
+
+    setPageParam(currentPageParam);
+
 		let newMinAmount = minAmount;
 		if(!!minAmount && typeof(minAmount) === 'string'){
 			newMinAmount = parseInt(minAmount);
@@ -84,26 +104,41 @@ export const PayoutListPage = () => {
 		}
    let params: ExtensionPayoutListParams = {
      mid: mid,
-      searchCl: searchCl,
+      searchDateType: searchDateType,
      fromDate: fromDate,
      toDate: toDate,
-      disbursementStatus: disbursementStatus,
-      minAmount: minAmount,
-      maxAmount: maxAmount,
-      page: pageParam
+      status: option?.status ?? status,
+      minAmount: newMinAmount,
+      maxAmount: newMaxAmount,
+      page: currentPageParam
    };
    extensionPayoutList(params).then((rs: ExtensionPayoutListResponse) => {
-      setListItems(assembleData(rs.content));
+      // resetPage면 기존 리스트 무시, 아니면 추가
+      setListItems(option?.resetPage ? rs.content : [
+        ...listItems,
+        ...rs.content
+      ]);
+      if (rs.hasNext) {
+        setNextCursor(rs.nextCursor);
+        setPageParam({
+          ...currentPageParam,
+          cursor: rs.nextCursor
+        });
+        setOnActionIntersect(true)
+      }
+      else {
+        setNextCursor(null);
+      }
    });
  };

  const callDownloadExcel = () => {
     let params: ExtensionPayoutExcelParams = {
      mid: mid,
-      searchCl: searchCl,
+      searchDateType: searchDateType,
      fromDate: fromDate,
      toDate: toDate,
-      disbursementStatus: disbursementStatus,
+      status: status,
      minAmount: minAmount,
      maxAmount: maxAmount,
    };
@@ -112,29 +147,6 @@ export const PayoutListPage = () => {
    });
  };

-  const assembleData = (content: Array<PayoutContent>) => {
-    let data: any = {};
-    if(content && content.length > 0){
-      for(let i=0;i<content?.length;i++){
-        let date;
-        if(searchCl === PayoutSearchCl.REQUEST_DATE){
-          date = content[i]?.requestDate?.substring(0, 8);
-        }
-        else if(searchCl === PayoutSearchCl.PROXY_DATE){
-          date = content[i]?.settlementDate?.substring(0, 8);
-        }
-        let groupDate = moment(date).format('YYYYMMDD');
-        if(!!groupDate && !data.hasOwnProperty(groupDate)){
-          data[groupDate] = [];
-        }
-        if(!!groupDate && data.hasOwnProperty(groupDate)){
-          data[groupDate].push(content[i]);
-        }
-      }
-    }
-    return data;
-  };
-
  const onClickToDownloadExcel = () => {
    callDownloadExcel();
  };
@@ -143,37 +155,79 @@ export const PayoutListPage = () => {
  };
  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
-    callExtensionPayoutList({sortType: sort});
+    callExtensionPayoutList({
+      sortType: sort,
+      resetPage: true
+    });
  };
  const onClickToDisbursementStatus = (val: PayoutDisbursementStatus) => {
-    setDisbursementStatus(val);
+    setStatus(val);
    callExtensionPayoutList({
-      val: val
+      status: val,
+      resetPage: true
    });
  };

-
  useEffect(() => {
-    callExtensionPayoutList();
-  }, []);
+    // 필터 조건이 변경되면 첫 페이지부터 다시 시작
+    callExtensionPayoutList({ resetPage: true });
+  }, [
+    mid,
+    searchDateType,
+    fromDate,
+    toDate,
+    status,
+    minAmount,
+    maxAmount
+  ]);

-  const getPayoutList = () => {
-    let rs = [];
-    if(Object.keys(listItems).length > 0){
-      for (const [key, value] of Object.entries(listItems)) {
-        rs.push(
-          <ListDateGroup
-            additionalServiceCategory={ AdditionalServiceCategory.Payout }
-            mid={ mid }
-            key={ key }
-            date={ key }
-            items={ value }
-          ></ListDateGroup>
-        );  
+  const getListDateGroup = () => {
+    let rs: JSX.Element[] = [];
+    let date = '';
+    let list: PayoutContent[] = [];
+    for (let i = 0; i < listItems.length; i++) {
+      // requestDate 또는 settlementDate format: "20211018140420" (YYYYMMDDHHmmss)
+      let itemDateStr = '';
+      if (searchDateType === PayoutSearchDateType.REQUEST_DATE) {
+        itemDateStr = listItems[i]?.requestDate || '';
+      } else if (searchDateType === PayoutSearchDateType.SETTLEMENT_DATE) {
+        itemDateStr = listItems[i]?.settlementDate || '';
      }
+      let itemDate = itemDateStr.substring(0, 8);
+      if (i === 0) {
+        date = itemDate;
+      }
+      if (date !== itemDate) {
+        // 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!)
+        if (list.length > 0) {
+          rs.push(
+            <ListDateGroup
+              additionalServiceCategory={AdditionalServiceCategory.Payout}
+              mid={mid}
+              key={date + '-' + i}
+              date={date}
+              items={list as any}
+            ></ListDateGroup>
+          );
+        }
+        date = itemDate;  // 그 다음에 날짜 업데이트
+        list = [];
+      }
+      list.push(listItems[i] as any);
+    }
+    if (list.length > 0) {
+      rs.push(
+        <ListDateGroup
+          additionalServiceCategory={AdditionalServiceCategory.Payout}
+          mid={mid}
+          key={date + '-last'}
+          date={date}
+          items={list as any}
+        ></ListDateGroup>
+      );
    }
    return rs;
-  }
+  };

  return (
    <>
@@ -234,7 +288,7 @@ export const PayoutListPage = () => {
                  PayoutDisbursementStatusBtnGroup.map((value, index) => (
                    <span 
                      key={ `key-service-code=${ index }` }
-                      className={ `keyword-tag ${(disbursementStatus === value.value)? 'active': ''}` }
+                      className={ `keyword-tag ${(status === value.value)? 'active': ''}` }
                      onClick={ () => onClickToDisbursementStatus(value.value) }
                    >{ value.name }</span>
                  ))
@@ -242,14 +296,15 @@ export const PayoutListPage = () => {
                </div>
              </div>
            </section>
-            <div className="transaction-list">
-              { getPayoutList() }  
-              <div className="apply-row">
-                <button 
-                  className="btn-50 btn-blue flex-1"
-                  onClick={ () => onClickToNavigation() }
-                >지급대행 신청</button>
-              </div>
+            <section className="transaction-list">
+              { getListDateGroup() }
+              <div ref={setTarget}></div>
+            </section>
+            <div className="apply-row">
+              <button
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToNavigation() }
+              >지급대행 신청</button>
            </div>
          </div>
        </div>
@@ -258,17 +313,17 @@ export const PayoutListPage = () => {
        filterOn={ filterOn }
        setFilterOn={ setFilterOn }
        mid={ mid }
-        searchCl={ searchCl }
+        searchDateType={ searchDateType }
        fromDate={ fromDate }
        toDate={ toDate }
-        disbursementStatus= { disbursementStatus }
+        status= { status }
        minAmount={ minAmount }
        maxAmount={ maxAmount }
        setMid={ setMid }
-        setSearchCl={ setSearchCl }
+        setSearchDateType={ setSearchDateType }
        setFromDate={ setFromDate }
        setToDate={ setToDate }
-        setDisbursementStatus={ setDisbursementStatus }
+        setStatus={ setStatus }
        setMinAmount={ setMinAmount }
        setMaxAmount={ setMaxAmount }
      ></PayoutFilter>
--- a/src/pages/additional-service/payout/request-page.tsx
+++ b/src/pages/additional-service/payout/request-page.tsx
@@ -13,6 +13,7 @@ import { useExtensionPayoutRequestMutation } from "@/entities/additional-service
 import { ExtensionPayoutRequestParams, ExtensionPayoutRequestResponse } from "@/entities/additional-service/model/payout/types";
 import NiceCalendar from "@/shared/ui/calendar/nice-calendar";
 import { useStore } from "@/shared/model/store";
+import moment from 'moment';

 export const PayoutRequestPage = () => {
  const { navigate } = useNavigate();
@@ -54,7 +55,7 @@ export const PayoutRequestPage = () => {
  };

  const setNewDate = (date: string) => {
-    setSettlementDate(date);
+    setSettlementDate(moment(date).format('YYYYMMDD'));
    setCalendarOpen(false);
  };
  const onClickToOpenCalendar = () => {
@@ -68,7 +69,7 @@ export const PayoutRequestPage = () => {
            <div className="ing-list">
              <div className="billing-form gap-30">
                <div className="billing-row">
-                  <div className="billing-label">서브ID</div>
+                  <div className="billing-label">서브ID<span>*</span></div>
                  <div className="billing-field">
                    <input
                      type="text"
@@ -78,7 +79,7 @@ export const PayoutRequestPage = () => {
                  </div>
                </div>
                <div className="billing-row">
-                  <div className="billing-label">지급액</div>
+                  <div className="billing-label">지급액<span>*</span></div>
                  <div className="billing-field">
                    <input
                      type="text"
@@ -88,7 +89,7 @@ export const PayoutRequestPage = () => {
                  </div>
                </div>
                <div className="billing-row">
-                  <div className="billing-label">지급일</div>
+                  <div className="billing-label">지급일<span>*</span></div>
                  <div className="billing-field">
                    <div className="input-wrapper date">
                      <input
@@ -101,6 +102,7 @@ export const PayoutRequestPage = () => {
                        className="date-btn"
                        type="button"
                        onClick={() => onClickToOpenCalendar()}
+                        disabled={!isFormValid}
                      >
                        <img
                          src={IMAGE_ROOT + '/ico_date.svg'}