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

src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx

@@ -3,6 +3,8 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 import { SingleDatePicker } from '@/shared/ui/filter/single-date-picker';
 import { LinkPaymentFormData, LinkPaymentSendMethod } from '@/entities/additional-service/model/link-pay/types';
+import { NumericFormat } from 'react-number-format';
+import { ChangeEvent } from 'react';
 
 interface LinkPaymentStep1Props {
   formData: LinkPaymentFormData;
@@ -25,9 +27,7 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
   };
 
   const handleAmountChange = (value: string) => {
-    // 숫자만 추출
     const onlyNumbers = value.replace(/[^0-9]/g, '');
-    // 빈 문자열이면 0, 아니면 숫자로 변환 (앞의 0 제거됨)
     const numericValue = onlyNumbers === '' ? 0 : parseInt(onlyNumbers, 10);
     setFormData({ ...formData, amount: numericValue });
   };
@@ -93,13 +93,15 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
         <div className="issue-row gap-10">
           <div className="issue-label">상품가격</div>
           <div className="issue-field">
-            <input
-              type="text"
-              placeholder="0"
-              value={formData.amount === 0 ? '' : formData.amount}
-              onChange={(e) => handleAmountChange(e.target.value)}
-              inputMode="numeric"
-              pattern="[0-9]*"
+            <NumericFormat
+              value={formData.amount}
+              allowNegative={false}
+              displayType="input"
+              thousandSeparator={true}
+              onValueChange={(values) => {
+                const { floatValue } = values;
+                setFormData({...formData, amount: floatValue ?? 0});
+              }}
             />
           </div>
         </div>