자금이체 이체신청 상세 및 이체 등록

src/pages/additional-service/fund-account/transfer-request-page.tsx

@@ -1,6 +1,126 @@
-export const FundAccountTransferRequestPage = () => {
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+import { useState } from 'react';
+import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';
+import { ExtensionFundAccountTransferRequestParams, ExtensionFundAccountTransferRequestResponse } from '@/entities/additional-service/model/fund-account/types';
 
+
+export const FundAccountTransferRequestPage = () => {
+  const { navigate } = useNavigate();
+
+  const [mid, setMid] = useState<string>('nictest001m')
+  const [transferAmount, setTransferAmount] = useState<number>(0);
+  const [receiveBankCode, setReceiveBankCode] = useState<string>('');
+  const [receiveAccountNo, setReceiveAccountNo] = useState<string>('');
+  const [receiveAccountName, setReceiveAccountName] = useState<string>('');
+  const [transferMemo, setTransferMemo] = useState<string>('');
+
+  const { mutateAsync: extensionFundAccountRequest } = useExtensionFundAccountTransferRequestMutation();
+  
+  useSetHeaderTitle('자금이체 이체등록');
+  useSetHeaderType(HeaderType.RightClose);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.additionalService.fundAccount.transferList);
+  });
+
+  const callExtensionFundAccountTransferRequest = () => {
+    let params: ExtensionFundAccountTransferRequestParams = {
+      mid: mid,
+      transferAmount: transferAmount,
+      receiveBankCode: receiveBankCode,
+      receiveAccountNo: receiveAccountNo,
+      receiveAccountName: receiveAccountName,
+      transferMemo: transferMemo
+    };
+    extensionFundAccountRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => {
+      navigate(PATHS.additionalService.payout.list);
+    });
+  };
+  
   return (
-    <></>
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="ing-list">
+              <div className="billing-form gap-30">
+                <div className="billing-row">
+                  <div className="billing-label">서브ID</div>
+                  <div className="billing-field">
+                    <select></select>
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">은행</div>
+                  <div className="billing-field">
+                    <select></select>
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">계좌번호</div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value={ receiveAccountNo }
+                      onChange={ (e) => setReceiveAccountNo(e.target.value) }
+                     />
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">예금주명</div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value={ receiveAccountName }
+                      onChange={ (e) => setReceiveAccountName(e.target.value) }
+                     />
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">이체금액</div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value={ transferAmount }
+                      onChange={ (e) => setTransferAmount(parseInt(e.target.value)) }
+                     />
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">주문번호</div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                    />
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">입금인자</div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <div className="apply-row">
+        <button 
+          className="btn-50 btn-blue flex-1"
+          onClick={ callExtensionFundAccountTransferRequest }
+        >등록</button>
+      </div>
+    </>
   );
 };