ars 상세 , 요청

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { IMAGE_ROOT } from '@/shared/constants/common';
@@ -10,12 +10,23 @@ import {
 	useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { ArsPaymentMethod, ExtensionArsApplyParams } from '@/entities/additional-service/model/ars/types';
 
 export const ArsRequestPage = () => {
   const { navigate } = useNavigate();
 
   const { mutateAsync: arsApply } = useExtensionArsApplyMutation();
 
+  const [mid, setMid] = useState<string>('');
+  const [moid, setMoid] = useState<string>('');
+  const [goodsName, setGoodsName] = useState<string>('');
+  const [amount, setAmount] = useState<number>(0);
+  const [instmntMonth, setInstmntMonth] = useState<string>('');
+  const [buyerName, setBuyerName] = useState<string>('');
+  const [phoneNumber, setPhoneNumber] = useState<string>('');
+  const [email, setEamil] = useState<string>('');
+  const [arsPaymentMethod, setArsPaymentMethod] = useState<ArsPaymentMethod>(ArsPaymentMethod.SMS);
+
   useSetHeaderTitle('결제 신청');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
@@ -23,17 +34,17 @@ export const ArsRequestPage = () => {
     navigate(PATHS.additionalService.ars.list);
   });
 
-  const callArsRequest = () => {
-    let arsApplyParams = {
-      mid: 'string',
-      moid: 'string',
-      goodsName: 'string',
-      amount: 0,
-      instmntMonth: '00',
-      buyerName: 'string',
-      phoneNumber: 'string',
-      email: 'string',
-      arsPaymentMethod: 'SMS',
+  const callArsApply = () => {
+    let arsApplyParams: ExtensionArsApplyParams = {
+      mid: mid,
+      moid: moid,
+      goodsName: goodsName,
+      amount: amount,
+      instmntMonth: instmntMonth,
+      buyerName: buyerName,
+      phoneNumber: phoneNumber,
+      email: email,
+      arsPaymentMethod: arsPaymentMethod,
     };
     arsApply(arsApplyParams).then((rs) => {
       navigate(PATHS.additionalService.ars.requestSuccess);
@@ -47,9 +58,29 @@ export const ArsRequestPage = () => {
   };
 
   const onClickToRequest = () => {
-    callArsRequest();
+    callArsApply();
   };  
 
+  const getArsPaymentMethodBtns = () => {
+    let rs = [];
+    rs.push(
+      <div 
+        key="ars-payment-method-btns"
+        className="seg-buttons"
+      >
+        <button 
+          className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.SMS)? 'btn-blue': 'btn-white'}`}
+          onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.SMS) }
+        >{ ArsPaymentMethod.SMS }</button>
+        <button 
+          className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.ARS)? 'btn-blue': 'btn-white'}`}
+          onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.ARS) }
+        >{ ArsPaymentMethod.ARS }</button>
+      </div>
+    );
+    return rs;
+  };
+
   return (
     <>
       <main>
@@ -73,7 +104,8 @@ export const ArsRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="wadizcop0g2025062"
+                      value={ moid }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value) }
                     />
                   </div>
                 </div>
@@ -83,7 +115,8 @@ export const ArsRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="123456" 
+                      value={ goodsName }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value) }
                     />
                   </div>
                 </div>
@@ -93,7 +126,8 @@ export const ArsRequestPage = () => {
                     <div className="billing-field">
                       <input 
                         type="text" 
-                        value="1000"
+                        value={ amount }
+                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setAmount(parseInt(e.target.value)) }  
                       />
                     </div>
                   </div>
@@ -113,7 +147,8 @@ export const ArsRequestPage = () => {
                     <div className="billing-field">
                       <input
                         type="text" 
-                        value="김테스트" 
+                        value={ buyerName }
+                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
                       />
                     </div>
                   </div>
@@ -123,7 +158,8 @@ export const ArsRequestPage = () => {
                     <div className="billing-field">
                       <input 
                         type="text" 
-                        value="01012345678" 
+                        value={ phoneNumber }
+                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
                       />
                     </div>
                   </div>
@@ -133,7 +169,8 @@ export const ArsRequestPage = () => {
                     <div className="billing-field">
                       <input 
                         type="text" 
-                        value="NICE@NAVER.COM"
+                        value={ email }
+                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value) }
                       />
                     </div>
                   </div>
@@ -141,10 +178,7 @@ export const ArsRequestPage = () => {
                   <div className="billing-row">
                     <div className="billing-label">결제 방식 <span>*</span></div>
                     <div className="billing-field">
-                      <div className="seg-buttons">
-                        <button className="btn-36 btn-blue light">SMS</button>
-                        <button className="btn-36 btn-white light">호전환</button>
-                      </div>
+                    { getArsPaymentMethodBtns() }  
                     </div>
                   </div>
               </div>