nice-app-web/src/entities/payment/ui/data-notification-wrap.tsx

import { useEffect, useState } from 'react';
import { DataNotificationNotifyContent } from './data-notification-notify-content';

import { 
  MerchantInfo,
  CreditCard,
  AccountTransfer,
  VirtualAccount,
  MobilePayment,
  EscrowPayment,
  DataNotificationNotifyContentKey,
  PaymentNotificationDataResponse
} from '../model/types';
export interface DataNotificationWrapProps {
  paymentNotificationData?: PaymentNotificationDataResponse;
};

export const DataNotificationWrap = ({
  paymentNotificationData
}: DataNotificationWrapProps) => {
  const [merchantInfo, setMerchantInfo] = useState<Record<string, any>>();
  const [creditCard, setCreditCard] = useState<Record<string, any>>();
  const [accountTransfer, setAccountTransfer] = useState<Record<string, any>>();
  const [virtualAccount, setVirtualAccount] = useState<Record<string, any>>();
  const [mobilePayment, setMobilePayment] = useState<Record<string, any>>();
  const [escrowPayment, setEscrowPayment] = useState<Record<string, any>>();

  const [openChild, setOpenChild] = useState<DataNotificationNotifyContentKey | null>(null);

  useEffect(() => {
    setMerchantInfo(paymentNotificationData?.merchantInfo);
    setCreditCard(paymentNotificationData?.creditCard.detail);
    setAccountTransfer(paymentNotificationData?.accountTransfer.detail);
    setVirtualAccount(paymentNotificationData?.virtualAccount.detail);
    setMobilePayment(paymentNotificationData?.mobilePayment.detail);
    setEscrowPayment(paymentNotificationData?.escrowPayment.detail);
  }, []);
  
  return (
    <>
      <div className="ing-list">
        <div className="input-wrapper top-select mt-16">
          <select>
            <option value="1">nicetest00g</option>
            <option value="2">nicetest00g</option>
            <option value="3">nicetest00g</option>
          </select>
        </div>
        <div className="notify-container">
          <div className="notify-header">
            <h3 className="notify-title">결제데이터 통보 조회</h3>
          </div>
          <ul className="notify-list">
            <li>
              <DataNotificationNotifyContent
                paymentMethodName={ '신용카드' }
                type={ DataNotificationNotifyContentKey.CreditCard }
                startDate={ creditCard?.startDate }
                adminEmail={ creditCard?.adminEmail }
                urlIp={ creditCard?.urlIp }
                retransmissionInterval={ creditCard?.retransmissionInterval }
                retransmissionCount={ creditCard?.retransmissionCount }
                okCheck={ creditCard?.okCheck}
                encryptionStatus={ creditCard?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
                ></DataNotificationNotifyContent>
            </li>
            <li className="notify-divider"></li>
            <li>
              <DataNotificationNotifyContent
                paymentMethodName={ '계좌이체' }
                type={ DataNotificationNotifyContentKey.AccountTransfer }
                startDate={ accountTransfer?.startDate }
                adminEmail={ accountTransfer?.adminEmail }
                urlIp={ accountTransfer?.urlIp }
                retransmissionInterval={ accountTransfer?.retransmissionInterval }
                retransmissionCount={ accountTransfer?.retransmissionCount }
                okCheck={ accountTransfer?.okCheck}
                encryptionStatus={ accountTransfer?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
              ></DataNotificationNotifyContent>
            </li>
            <li className="notify-divider"></li>
            <li>
              <DataNotificationNotifyContent
                paymentMethodName={ '가상계좌' }
                type={ DataNotificationNotifyContentKey.VirtualAccount }
                startDate={ virtualAccount?.startDate }
                adminEmail={ virtualAccount?.adminEmail }
                urlIp={ virtualAccount?.urlIp }
                retransmissionInterval={ virtualAccount?.retransmissionInterval }
                retransmissionCount={ virtualAccount?.retransmissionCount }
                okCheck={ virtualAccount?.okCheck}
                encryptionStatus={ virtualAccount?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
              ></DataNotificationNotifyContent>
            </li>
            <li className="notify-divider"></li>
            <li>
              <DataNotificationNotifyContent
                paymentMethodName={ '휴대폰' }
                type={ DataNotificationNotifyContentKey.MobilePayment }
                startDate={ mobilePayment?.startDate }
                adminEmail={ mobilePayment?.adminEmail }
                urlIp={ mobilePayment?.urlIp }
                retransmissionInterval={ mobilePayment?.retransmissionInterval }
                retransmissionCount={ mobilePayment?.retransmissionCount }
                okCheck={ mobilePayment?.okCheck}
                encryptionStatus={ mobilePayment?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
              ></DataNotificationNotifyContent>
            </li>
            <li className="notify-divider"></li>
            <li>
              <DataNotificationNotifyContent
                paymentMethodName={ '에스크로 결제' }
                type={ DataNotificationNotifyContentKey.EscrowPayment }
                startDate={ escrowPayment?.startDate }
                adminEmail={ escrowPayment?.adminEmail }
                urlIp={ escrowPayment?.urlIp }
                retransmissionInterval={ escrowPayment?.retransmissionInterval }
                retransmissionCount={ escrowPayment?.retransmissionCount }
                okCheck={ escrowPayment?.okCheck}
                encryptionStatus={ escrowPayment?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
              ></DataNotificationNotifyContent>
            </li>
          </ul>
        </div>
        <div className="notify-bar">
          <span>결제데이터 통보 설정은 PC에서 가능합니다.</span>
          <span>전송 설정한 지불수단만 노출됩니다.</span>
        </div>
      </div>
    </>
  );
};