- 안면인증 페이지 추가 (추후 목업으로 추가 작업 필요)

- 자금이체 : isFormValid(이체신청 Validation 추가[임시] 추가 작업 필요)

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

@@ -2,10 +2,10 @@ import { IMAGE_ROOT } from "@/shared/constants/common";
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { CalendarType, HeaderType } from '@/entities/common/model/types';
-import { 
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode,
+import {
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useState } from "react";
@@ -25,7 +25,7 @@ export const PayoutRequestPage = () => {
   const [settlementDate, setSettlementDate] = useState<string>('');
 
   const { mutateAsync: extensionPayoutRequest } = useExtensionPayoutRequestMutation();
-  
+
   useSetHeaderTitle('지급대행 신청');
   useSetHeaderType(HeaderType.RightClose);
   useSetFooterMode(false);
@@ -45,6 +45,14 @@ export const PayoutRequestPage = () => {
     });
   };
 
+  const isFormValid = () => {
+    return (
+      submallId.trim() !== '' &&
+      disbursementAmount > 0 &&
+      settlementDate.trim() !== ''
+    );
+  };
+
   const setNewDate = (date: string) => {
     setSettlementDate(date);
     setCalendarOpen(false);
@@ -62,40 +70,40 @@ export const PayoutRequestPage = () => {
                 <div className="billing-row">
                   <div className="billing-label">서브ID</div>
                   <div className="billing-field">
-                    <input 
-                      type="text" 
-                      value={ submallId }
-                      onChange={ (e) => setSubmallId(e.target.value) }
+                    <input
+                      type="text"
+                      value={submallId}
+                      onChange={(e) => setSubmallId(e.target.value)}
                     />
                   </div>
                 </div>
                 <div className="billing-row">
                   <div className="billing-label">지급액</div>
                   <div className="billing-field">
-                    <input 
-                      type="text" 
-                      value={ disbursementAmount }
-                      onChange={ (e) => setDisbursementAmount(parseInt(e.target.value)) }
-                     />
+                    <input
+                      type="text"
+                      value={disbursementAmount}
+                      onChange={(e) => setDisbursementAmount(parseInt(e.target.value))}
+                    />
                   </div>
                 </div>
                 <div className="billing-row">
                   <div className="billing-label">지급일</div>
                   <div className="billing-field">
                     <div className="input-wrapper date">
-                      <input 
+                      <input
                         className="date-input"
-                        type="text" 
-                        placeholder="날짜 선택" 
-                        value={ settlementDate }
+                        type="text"
+                        placeholder="날짜 선택"
+                        value={settlementDate}
                       />
-                      <button 
+                      <button
                         className="date-btn"
                         type="button"
-                        onClick={ () => onClickToOpenCalendar() }
+                        onClick={() => onClickToOpenCalendar()}
                       >
                         <img
-                          src={ IMAGE_ROOT + '/ico_date.svg' }
+                          src={IMAGE_ROOT + '/ico_date.svg'}
                           alt="날짜 선택"
                         />
                       </button>
@@ -108,16 +116,17 @@ export const PayoutRequestPage = () => {
         </div>
       </main>
       <div className="apply-row">
-        <button 
+        <button
           className="btn-50 btn-blue flex-1"
-          onClick={ callExtensionPayoutRequest }
+          onClick={callExtensionPayoutRequest}
+          disabled={!isFormValid()}
         >신청</button>
       </div>
       <NiceCalendar
-        calendarOpen={ calendarOpen }
-        setCalendarOpen={ setCalendarOpen }
-        calendarType={ CalendarType.Single }
-        setNewDate={ setNewDate }
+        calendarOpen={calendarOpen}
+        setCalendarOpen={setCalendarOpen}
+        calendarType={CalendarType.Single}
+        setNewDate={setNewDate}
       ></NiceCalendar>
     </>
   );