- 부가서비스 각 요청 페이지 : SnackBar 추가, 양식 수정

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

@@ -15,6 +15,7 @@ import { ArsPaymentMethod, ExtensionArsApplyParams, ExtensionArsApplyResponse }
 import { ArsRequestSuccessPage } from './request-success-page';
 import { useStore } from '@/shared/model/store';
 import { snackBar } from '@/shared/lib';
+import { NumericFormat, PatternFormat } from 'react-number-format';
 
 export const ArsRequestPage = () => {
   const { navigate } = useNavigate();
@@ -58,17 +59,17 @@ export const ArsRequestPage = () => {
       arsPaymentMethod: arsPaymentMethod,
     };
     arsApply(arsApplyParams)
-    .then((rs: ExtensionArsApplyResponse) => {
-      if (rs.status === true) {
-        setSuccessPageOn(true);
-      } else {
-        const errorMessage = rs.error?.message || '신청을 실패하였습니다.';
-        snackBar(`[실패] ${errorMessage}`);
-      }
-    })
-    .catch((error) => {
-      snackBar(`[실패] ${error?.response?.data?.message || error?.response?.data?.error?.message}` || '[실패] 신청을 실패하였습니다.')
-    })
+      .then((rs: ExtensionArsApplyResponse) => {
+        if (rs.status === true) {
+          setSuccessPageOn(true);
+        } else {
+          const errorMessage = rs.error?.message || '신청을 실패하였습니다.';
+          snackBar(`[실패] ${errorMessage}`);
+        }
+      })
+      .catch((error) => {
+        snackBar(`[실패] ${error?.response?.data?.message || error?.response?.data?.error?.message}` || '[실패] 신청을 실패하였습니다.')
+      })
 
   };
 
@@ -82,6 +83,11 @@ export const ArsRequestPage = () => {
     return phoneRegex.test(phone);
   };
 
+  const isValidEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
   const isFormValid = () => {
     return (
       mid.trim() !== '' &&
@@ -164,16 +170,12 @@ export const ArsRequestPage = () => {
                 <div className="billing-row">
                   <div className="billing-label">금액 <span>*</span></div>
                   <div className="billing-field">
-                    <input
-                      type="text"
+                    <NumericFormat
                       value={amount}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        const onlyNumbers = e.target.value.replace(/[^0-9]/g, ''); // 숫자만 남김
-                        setAmount(onlyNumbers === '' ? 0 : parseInt(onlyNumbers));
-                      }}
-                      inputMode="numeric"  // 모바일 키보드 숫자 전용
-                      pattern="[0-9]*"     // 브라우저 기본 숫자만 유효하도록
-                    />
+                      allowNegative={false}
+                      displayType="input"
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setAmount(parseInt(e.target.value))}
+                    ></NumericFormat>
                   </div>
                 </div>
 
@@ -228,6 +230,8 @@ export const ArsRequestPage = () => {
                       value={email}
                       placeholder='test@nicepay.co.kr'
                       onChange={(e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value)}
+                      className={email && !isValidEmail(email) ? 'error' : ''}
+
                     />
                   </div>
                 </div>