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

2025-10-29 14:33:24 +09:00
parent 5888c2844b
commit 448cdcc9d2
17 changed files with 462 additions and 334 deletions
--- a/src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx
+++ b/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>
--- a/src/entities/additional-service/ui/link-payment/apply/link-payment-step2.tsx
+++ b/src/entities/additional-service/ui/link-payment/apply/link-payment-step2.tsx
@@ -1,7 +1,8 @@
-import {ProcessStep} from "@/entities/transaction/model/types";
-import {useSetOnBack} from "@/widgets/sub-layout/use-sub-layout";
+import { ProcessStep } from "@/entities/transaction/model/types";
+import { useSetOnBack } from "@/widgets/sub-layout/use-sub-layout";
 import { IdentityType, Language } from '@/entities/additional-service/model/types'
 import { LinkContentType, LinkPaymentFormData } from "@/entities/additional-service/model/link-pay/types";
+import { PatternFormat } from 'react-number-format';

 export interface LinkPaymentStep2Props {
    setProcessStep: ((processStep: ProcessStep) => void);
@@ -18,6 +19,7 @@ export const LinkPaymentStep2 = ({
        setProcessStep(ProcessStep.One);
    });

+
    const handleInputChange = (field: string, value: string) => {
        setFormData({ ...formData, [field]: value });
    };
@@ -53,34 +55,39 @@ export const LinkPaymentStep2 = ({
                    </div>
                </div>

-                <div className="issue-row gap-10">
-                    <div className="issue-label wid-105">구매자 이메일</div>
-                    <div className="issue-field">
-                        <input
-                            type="text"
-                            placeholder="test@nicepay.co.kr"
-                            value={formData.email}
-                            onChange={(e) => handleInputChange('email', e.target.value)}
-                        />
+                {formData.sendMethod === 'EMAIL' &&
+                    <div className="issue-row gap-10">
+                        <div className="issue-label wid-105">구매자 이메일</div>
+                        <div className="issue-field">
+                            <input
+                                type="text"
+                                placeholder="test@nicepay.co.kr"
+                                value={formData.email}
+                                onChange={(e) => handleInputChange('email', e.target.value)}
+                            />
+                        </div>
                    </div>
-                </div>
+                }

-                <div className="issue-row gap-10">
-                    <div className="issue-label wid-105">구매자<br/>휴대폰 번호</div>
-                    <div className="issue-field">
-                        <input
-                            type="text"
-                            placeholder="01012345678"
-                            value={formData.phoneNumber}
-                            onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
-                        />
+                {(formData.sendMethod === 'SMS' || formData.sendMethod === 'KAKAO') &&
+                    <div className="issue-row gap-10">
+                        <div className="issue-label wid-105">구매자<br />휴대폰 번호</div>
+                        <div className="issue-field">
+                            <input
+                                type="text"
+                                placeholder="01012345678"
+                                value={formData.phoneNumber}
+                                onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
+                            />
+                        </div>
                    </div>
-                </div>
+                }
+

                <div className="issue-row gap-10 beetween">
                    <div className="issue-label wid-105">구매자 정보 대조</div>
                    <label className="settings-switch">
-                        <input type="checkbox" checked={formData.isIdentity} onChange={(e) => handleIdentityToggle(e.target.checked)}/>
+                        <input type="checkbox" checked={formData.isIdentity} onChange={(e) => handleIdentityToggle(e.target.checked)} />
                        <span className="slider"></span>
                    </label>
                </div>
@@ -89,14 +96,16 @@ export const LinkPaymentStep2 = ({
                    <div className="issue-field">
                        <div className="chip-row">
                            <span
-                                className={`keyword-tag flex-1 ${formData.identityType === IdentityType.INDIVIDUAL ? 'active' : ''}`}
-                                onClick={() => handleIdendityTypeChange(IdentityType.INDIVIDUAL)}
+                                className={`keyword-tag flex-1 ${formData.identityType === IdentityType.INDIVIDUAL ? 'active' : ''} ${!formData.isIdentity ? 'disabled' : ''}`}
+                                onClick={() => formData.isIdentity && handleIdendityTypeChange(IdentityType.INDIVIDUAL)}
+                                style={!formData.isIdentity ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
                            >
                                개인
                            </span>
                            <span
-                                className={`keyword-tag flex-1 ${formData.identityType === IdentityType.CORPORATE ? 'active' : ''}`}
-                                onClick={() => handleIdendityTypeChange(IdentityType.CORPORATE)}
+                                className={`keyword-tag flex-1 ${formData.identityType === IdentityType.CORPORATE ? 'active' : ''} ${!formData.isIdentity ? 'disabled' : ''}`}
+                                onClick={() => formData.isIdentity && handleIdendityTypeChange(IdentityType.CORPORATE)}
+                                style={!formData.isIdentity ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
                            >
                                법인
                            </span>
@@ -107,12 +116,31 @@ export const LinkPaymentStep2 = ({
                <div className="issue-row gap-10">
                    <div className="issue-label wid-105"></div>
                    <div className='issue-field'>
-                        <input
-                            type="number"
-                            placeholder="생년월일 6자리"
-                            value={formData.identityValue}
-                            onChange={(e) => handleInputChange('identityValue', e.target.value)}
-                        />
+                        {formData.identityType === IdentityType.CORPORATE ? (
+                            <PatternFormat
+                                format="##########"
+                                placeholder="사업자번호 10자리"
+                                value={formData.identityValue}
+                                valueIsNumericString
+                                onValueChange={(values) => {
+                                    const { value } = values;
+                                    handleInputChange('identityValue', value);
+                                }}
+                                disabled={!formData.isIdentity}
+                            />
+                        ) : (
+                            <PatternFormat
+                                format="######"
+                                placeholder="생년월일 6자리"
+                                value={formData.identityValue}
+                                valueIsNumericString
+                                onValueChange={(values) => {
+                                    const { value } = values;
+                                    handleInputChange('identityValue', value);
+                                }}
+                                disabled={!formData.isIdentity}
+                            />
+                        )}
                    </div>
                </div>