nice-app-web/src/pages/additional-service/ars/request-page.tsx

import { ChangeEvent, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useLocation } from 'react-router';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useExtensionArsApplyMutation } from '@/entities/additional-service/api/ars/use-extension-ars-apply-mutation';
import { HeaderType } from '@/entities/common/model/types';
import {
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { ArsPaymentMethod, ExtensionArsApplyParams, ExtensionArsApplyResponse } from '@/entities/additional-service/model/ars/types';
import { ArsRequestSuccessPage } from './request-success-page';
import { useStore } from '@/shared/model/store';
import { snackBar } from '@/shared/lib';

export const ArsRequestPage = () => {
  const { navigate } = useNavigate();
  const location = useLocation();

  const midOptions = useStore.getState().UserStore.selectOptionsMids

  const { mid: receivedMid } = location.state || {};

  const { mutateAsync: arsApply } = useExtensionArsApplyMutation();

  const [mid, setMid] = useState<string>(receivedMid || '');
  const [moid, setMoid] = useState<string>('');
  const [goodsName, setGoodsName] = useState<string>('');
  const [amount, setAmount] = useState<number>(0);
  const [instmntMonth, setInstmntMonth] = useState<string>('00');
  const [buyerName, setBuyerName] = useState<string>('');
  const [phoneNumber, setPhoneNumber] = useState<string>('');
  const [email, setEamil] = useState<string>('');
  const [arsPaymentMethod, setArsPaymentMethod] = useState<ArsPaymentMethod>(ArsPaymentMethod.SMS);
  const [successPageOn, setSuccessPageOn] = useState<boolean>(false);
  const [resultMessage, setResultMessage] = useState<string>('');

  useSetHeaderTitle('결제 신청');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.additionalService.ars.list);
  });

  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: 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}` || '[실패] 신청을 실패하였습니다.')
    })

  };

  const onClickToRequest = () => {
    callArsApply();
  };

  const isValidPhoneNumber = (phone: string) => {
    // 한국 휴대폰 번호: 010, 011, 016, 017, 018, 019로 시작, 10-11자리
    const phoneRegex = /^01[0|1|6|7|8|9][0-9]{7,8}$/;
    return phoneRegex.test(phone);
  };

  const isFormValid = () => {
    return (
      mid.trim() !== '' &&
      moid.trim() !== '' &&
      goodsName.trim() !== '' &&
      amount > 0 &&
      buyerName.trim() !== '' &&
      isValidPhoneNumber(phoneNumber)
    );
  };

  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>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="billing-form gap-16">
                <div className="billing-row">
                  <div className="billing-label">가맹점 <span>*</span></div>
                  <div className="billing-field">
                    <select
                      value={mid}
                      onChange={(e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value)}
                    >
                      {
                        midOptions.map((value) => (
                          <option
                            key={value.value}
                            value={value.value}
                          >{value.name}</option>
                        ))
                      }
                    </select>
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">주문번호 <span>*</span></div>
                  <div className="billing-field">
                    <input
                      type="text"
                      value={moid}
                      onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
                    />
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">상품명 <span>*</span></div>
                  <div className="billing-field">
                    <input
                      type="text"
                      value={goodsName}
                      onChange={(e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value)}
                    />
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">금액 <span>*</span></div>
                  <div className="billing-field">
                    <input
                      type="text"
                      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]*"     // 브라우저 기본 숫자만 유효하도록
                    />
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">할부기간 <span>*</span></div>
                  <div className="billing-field">
                    <select
                      disabled
                      value={instmntMonth}
                      onChange={(e: ChangeEvent<HTMLSelectElement>) => setInstmntMonth(e.target.value)}
                    >
                      <option value="00">일시불</option>
                    </select>
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">구매자명 <span>*</span></div>
                  <div className="billing-field">
                    <input
                      type="text"
                      value={buyerName}
                      onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
                    />
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">휴대폰 번호 <span>*</span></div>
                  <div className="billing-field">
                    <input
                      type="tel"
                      value={phoneNumber}
                      placeholder='01012345678'
                      onChange={(e: ChangeEvent<HTMLInputElement>) => {
                        const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
                        setPhoneNumber(onlyNumbers);
                      }}
                      className={phoneNumber && !isValidPhoneNumber(phoneNumber) ? 'error' : ''}
                      inputMode="numeric"
                      pattern="[0-9]*"
                      maxLength={11}
                    />
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">이메일</div>
                  <div className="billing-field">
                    <input
                      type="text"
                      value={email}
                      placeholder='test@nicepay.co.kr'
                      onChange={(e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value)}
                    />
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">결제 방식 <span>*</span></div>
                  <div className="billing-field">
                    {getArsPaymentMethodBtns()}
                  </div>
                </div>
              </div>
            </div>
            <div className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
                onClick={() => onClickToRequest()}
                disabled={!isFormValid()}
              >결제 신청</button>
            </div>
          </div>
        </div>
      </main>

      <ArsRequestSuccessPage
        pageOn={successPageOn}
        setPageOn={setSuccessPageOn}
        resultMessage={resultMessage}
      />
    </>
  );
};