지급대행 요청

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

@@ -1,24 +1,55 @@
 import { IMAGE_ROOT } from "@/shared/constants/common";
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { HeaderType } from '@/entities/common/model/types';
+import { CalendarType, HeaderType } from '@/entities/common/model/types';
 import { 
 	useSetHeaderTitle,
 	useSetHeaderType,
 	useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { 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";
 
 export const PayoutRequestPage = () => {
   const { navigate } = useNavigate();
 
+  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
+  const [mid, setMid] = useState<string>('nictest001m')
+  const [submallId, setSubmallId] = useState<string>('');
+  const [disbursementAmount, setDisbursementAmount] = useState<number>(0);
+  const [settlementDate, setSettlementDate] = useState<string>('');
+
+  const { mutateAsync: extensionPayoutRequest } = useExtensionPayoutRequestMutation();
+  
   useSetHeaderTitle('지급대행 신청');
-  useSetHeaderType(HeaderType.LeftArrow);
+  useSetHeaderType(HeaderType.RightClose);
   useSetFooterMode(false);
   useSetOnBack(() => {
     navigate(PATHS.additionalService.payout.list);
   });
 
+  const callExtensionPayoutRequest = () => {
+    let params: ExtensionPayoutRequestParams = {
+      mid: mid,
+      submallId: submallId,
+      disbursementAmount: disbursementAmount,
+      settlementDate: settlementDate,
+    };
+    extensionPayoutRequest(params).then((rs: ExtensionPayoutRequestResponse) => {
+      navigate(PATHS.additionalService.payout.list);
+    });
+  };
+
+  const setNewDate = (date: string) => {
+    setSettlementDate(date);
+    setCalendarOpen(false);
+  };
+  const onClickToOpenCalendar = () => {
+    setCalendarOpen(true);
+  };
   return (
     <>
       <main>
@@ -31,8 +62,8 @@ export const PayoutRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="BIKYvattest01m" 
-                      readOnly={ true }
+                      value={ submallId }
+                      onChange={ (e) => setSubmallId(e.target.value) }
                     />
                   </div>
                 </div>
@@ -41,8 +72,8 @@ export const PayoutRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="테스트상품123" 
-                      readOnly={ true }
+                      value={ disbursementAmount }
+                      onChange={ (e) => setDisbursementAmount(parseInt(e.target.value)) }
                      />
                   </div>
                 </div>
@@ -54,11 +85,12 @@ export const PayoutRequestPage = () => {
                         className="date-input"
                         type="text" 
                         placeholder="날짜 선택" 
-                        value="2025.06.08" 
+                        value={ settlementDate }
                       />
                       <button 
                         className="date-btn"
                         type="button"
+                        onClick={ () => onClickToOpenCalendar() }
                       >
                         <img
                           src={ IMAGE_ROOT + '/ico_date.svg' }
@@ -73,6 +105,18 @@ export const PayoutRequestPage = () => {
           </div>
         </div>
       </main>
+      <div className="apply-row">
+        <button 
+          className="btn-50 btn-blue flex-1"
+          onClick={ callExtensionPayoutRequest }
+        >신청</button>
+      </div>
+      <NiceCalendar
+        calendarOpen={ calendarOpen }
+        setCalendarOpen={ setCalendarOpen }
+        calendarType={ CalendarType.Single }
+        setNewDate={ setNewDate }
+      ></NiceCalendar>
     </>
   );
 };