- 부가서비스 소개 List, 권한 검증 추가

- 각 API 오류 수정

src/pages/additional-service/payout/request-page.tsx

@@ -8,12 +8,14 @@ import {
   useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 import { useExtensionPayoutRequestMutation } from "@/entities/additional-service/api/payout/use-extension-payout-request-mutation";
 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';
+import { NumericFormat } from "react-number-format";
+import { snackBar } from "@/shared/lib";
 
 export const PayoutRequestPage = () => {
   const { navigate } = useNavigate();
@@ -41,9 +43,14 @@ export const PayoutRequestPage = () => {
       disbursementAmount: disbursementAmount,
       settlementDate: settlementDate,
     };
-    extensionPayoutRequest(params).then((rs: ExtensionPayoutRequestResponse) => {
-      navigate(PATHS.additionalService.payout.list);
-    });
+    extensionPayoutRequest(params)
+    .then((rs) => {
+      snackBar("신청을 성공하였습니다.")
+    })
+    .catch((error) => {
+      snackBar(`[실패] ${error?.response?.data?.message} `|| '[실패] 신청을 실패하였습니다.')
+    })
+    ;
   };
 
   const isFormValid = () => {
@@ -58,9 +65,8 @@ export const PayoutRequestPage = () => {
     setSettlementDate(moment(date).format('YYYYMMDD'));
     setCalendarOpen(false);
   };
-  const onClickToOpenCalendar = () => {
-    setCalendarOpen(true);
-  };
+
+
   return (
     <>
       <main>
@@ -69,44 +75,44 @@ export const PayoutRequestPage = () => {
             <div className="ing-list">
               <div className="billing-form gap-30">
                 <div className="billing-row">
-                  <div className="billing-label">서브ID<span>*</span></div>
+                  <div className="billing-label">서브ID</div>
                   <div className="billing-field">
                     <input
                       type="text"
                       value={submallId}
-                      onChange={(e) => setSubmallId(e.target.value)}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setSubmallId(e.target.value)}
                     />
                   </div>
                 </div>
                 <div className="billing-row">
-                  <div className="billing-label">지급액<span>*</span></div>
+                  <div className="billing-label">지급액</div>
                   <div className="billing-field">
-                    <input
-                      type="text"
+                    <NumericFormat
                       value={disbursementAmount}
-                      onChange={(e) => setDisbursementAmount(parseInt(e.target.value))}
-                    />
+                      allowNegative={false}
+                      displayType="input"
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setDisbursementAmount(parseInt(e.target.value))}
+                    ></NumericFormat>
                   </div>
                 </div>
                 <div className="billing-row">
-                  <div className="billing-label">지급일<span>*</span></div>
+                  <div className="billing-label">지급일</div>
                   <div className="billing-field">
-                    <div className="input-wrapper date">
+                    <div className="input-wrapper date wid-100">
                       <input
-                        className="date-input"
                         type="text"
                         placeholder="날짜 선택"
-                        value={settlementDate}
+                        value={settlementDate ? moment(settlementDate).format('YYYY.MM.DD') : '' }
+                        readOnly={true}
                       />
                       <button
                         className="date-btn"
                         type="button"
-                        onClick={() => onClickToOpenCalendar()}
-                        disabled={!isFormValid}
+                        onClick={() => setCalendarOpen(true)}
                       >
                         <img
                           src={IMAGE_ROOT + '/ico_date.svg'}
-                          alt="날짜 선택"
+                          alt="clear"
                         />
                       </button>
                     </div>
@@ -129,6 +135,7 @@ export const PayoutRequestPage = () => {
         setCalendarOpen={setCalendarOpen}
         calendarType={CalendarType.Single}
         setNewDate={setNewDate}
+        minDate={new Date()}
       ></NiceCalendar>
     </>
   );