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

src/pages/additional-service/link-payment/apply/link-payment-apply-page.tsx

@@ -1,11 +1,11 @@
-import {useState} from 'react';
-import {LinkPaymentStep1} from '@/entities/additional-service/ui/link-payment/apply/link-payment-step1';
-import {LinkPaymentStep2} from '@/entities/additional-service/ui/link-payment/apply/link-payment-step2';
-import {HeaderType} from '@/entities/common/model/types';
-import {ProcessStep} from '@/entities/transaction/model/types';
-import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/sub-layout/use-sub-layout';
-import {useNavigate} from '@/shared/lib/hooks/use-navigate';
-import {PATHS} from "@/shared/constants/paths";
+import { useState } from 'react';
+import { LinkPaymentStep1 } from '@/entities/additional-service/ui/link-payment/apply/link-payment-step1';
+import { LinkPaymentStep2 } from '@/entities/additional-service/ui/link-payment/apply/link-payment-step2';
+import { HeaderType } from '@/entities/common/model/types';
+import { ProcessStep } from '@/entities/transaction/model/types';
+import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { PATHS } from "@/shared/constants/paths";
 import { IdentityType, Language } from '@/entities/additional-service/model/types';
 import { LinkContentType, LinkPaymentFormData, LinkPaymentSendMethod } from '@/entities/additional-service/model/link-pay/types';
 import { useStore } from '@/shared/model/store';
@@ -14,25 +14,25 @@ import moment from 'moment';
 
 
 export const LinkPaymentApplyPage = () => {
-    const { navigate } = useNavigate();
-    const userMid = useStore.getState().UserStore.mid;
-    const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
-    const [formData, setFormData] = useState<LinkPaymentFormData>({
-      mid: userMid,
-      sendMethod: LinkPaymentSendMethod.SMS,
-      goodsName: '',
-      amount: 0,
-      moid: '',
-      paymentLimitDate: moment().format('YYYY.MM.DD'),
-      buyerName: '',
-      email: '',
-      phoneNumber: '',
-      isIdentity: false,
-      identityType: IdentityType.INDIVIDUAL,
-      identityValue: '',
-      language: Language.KR,
-      linkContentType: LinkContentType.BASIC
-    });
+  const { navigate } = useNavigate();
+  const userMid = useStore.getState().UserStore.mid;
+  const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
+  const [formData, setFormData] = useState<LinkPaymentFormData>({
+    mid: userMid,
+    sendMethod: LinkPaymentSendMethod.SMS,
+    goodsName: '',
+    amount: 0,
+    moid: '',
+    paymentLimitDate: moment().format('YYYY.MM.DD'),
+    buyerName: '',
+    email: '',
+    phoneNumber: '',
+    isIdentity: false,
+    identityType: IdentityType.INDIVIDUAL,
+    identityValue: '',
+    language: Language.KR,
+    linkContentType: LinkContentType.BASIC
+  });
 
   useSetHeaderTitle('링크결제 신청');
   useSetHeaderType(HeaderType.LeftArrow);
@@ -64,15 +64,11 @@ export const LinkPaymentApplyPage = () => {
 
   // Step2 필수 필드 검증
   const isStep2Valid = () => {
-    const basicFieldsValid = (
-      formData.buyerName.trim() !== '' &&
-      formData.email.trim() !== '' &&
-      isValidEmail(formData.email) &&
-      formData.phoneNumber.trim() !== '' &&
-      isValidPhoneNumber(formData.phoneNumber)
-    );
 
-    // isIdentity가 true면 identityValue도 필수
+    const basicFieldsValid = formData.sendMethod === 'EMAIL'
+      ? formData.email.trim() !== '' && isValidEmail(formData.email)
+      : formData.buyerName.trim() !== '' && formData.phoneNumber.trim() !== '' && isValidPhoneNumber(formData.phoneNumber);
+
     if (formData.isIdentity) {
       return basicFieldsValid && formData.identityValue.trim() !== '';
     }
@@ -85,14 +81,14 @@ export const LinkPaymentApplyPage = () => {
   };
 
   const onClickToChangeTab = () => {
-      if(processStep === ProcessStep.One) {
-          setProcessStep(ProcessStep.Two);
-      }
-      else if(processStep === ProcessStep.Two) {
-          navigate(PATHS.additionalService.linkPayment.requestConfirm, {
-            state: { formData }
-          });
-      }
+    if (processStep === ProcessStep.One) {
+      setProcessStep(ProcessStep.Two);
+    }
+    else if (processStep === ProcessStep.Two) {
+      navigate(PATHS.additionalService.linkPayment.requestConfirm, {
+        state: { formData }
+      });
+    }
   };
 
   return (
@@ -103,62 +99,62 @@ export const LinkPaymentApplyPage = () => {
             <div className="option-list">
               <div className="issue-progress">
                 <div className="bar">
-                    {(processStep === ProcessStep.One) &&
-                        <div
-                            className="fill"
-                            style={{ width: '50%' }}
-                        ></div>
-                    }
-                    {(processStep === ProcessStep.Two) &&
-                        <div
-                            className="fill"
-                            style={{ width: '100%' }}
-                        ></div>
-                    }
+                  {(processStep === ProcessStep.One) &&
+                    <div
+                      className="fill"
+                      style={{ width: '50%' }}
+                    ></div>
+                  }
+                  {(processStep === ProcessStep.Two) &&
+                    <div
+                      className="fill"
+                      style={{ width: '100%' }}
+                    ></div>
+                  }
                 </div>
               </div>
 
-                {(processStep === ProcessStep.One) &&
-                      <LinkPaymentStep1
-                        formData={formData}
-                        setFormData={setFormData}
-                      ></LinkPaymentStep1>
-                  }
-                  { (processStep === ProcessStep.Two) &&
-                      <LinkPaymentStep2
-                          setProcessStep={ setProcessStep }
-                          formData={formData}
-                          setFormData={setFormData}
-                      ></LinkPaymentStep2>
-                  }
-
-            </div>
               {(processStep === ProcessStep.One) &&
-                  <div className="apply-row">
-                      <button
-                          className="btn-50 btn-blue flex-1"
-                          onClick={() => onClickToChangeTab()}
-                          disabled={!isStep1Valid()}
-                      >다음</button>
-                  </div>
+                <LinkPaymentStep1
+                  formData={formData}
+                  setFormData={setFormData}
+                ></LinkPaymentStep1>
               }
               {(processStep === ProcessStep.Two) &&
-                  <div className="apply-row two-button">
-                      <button
-                          className="btn-50 btn-darkgray flex-1"
-                          onClick={() => onClickToBack()}
-                      >이전</button>
-                      <button
-                          className="btn-50 btn-blue flex-3"
-                          onClick={() => onClickToChangeTab()}
-                          disabled={!isStep2Valid()}
-                      >결제 신청</button>
-                  </div>
+                <LinkPaymentStep2
+                  setProcessStep={setProcessStep}
+                  formData={formData}
+                  setFormData={setFormData}
+                ></LinkPaymentStep2>
               }
+
+            </div>
+            {(processStep === ProcessStep.One) &&
+              <div className="apply-row">
+                <button
+                  className="btn-50 btn-blue flex-1"
+                  onClick={() => onClickToChangeTab()}
+                  disabled={!isStep1Valid()}
+                >다음</button>
+              </div>
+            }
+            {(processStep === ProcessStep.Two) &&
+              <div className="apply-row two-button">
+                <button
+                  className="btn-50 btn-darkgray flex-1"
+                  onClick={() => onClickToBack()}
+                >이전</button>
+                <button
+                  className="btn-50 btn-blue flex-3"
+                  onClick={() => onClickToChangeTab()}
+                  disabled={!isStep2Valid()}
+                >결제 신청</button>
+              </div>
+            }
           </div>
         </div>
       </main>
-      
+
     </>
   );
 };