결제데이터통보

src/entities/payment/ui/data-notification-wrap.tsx

@@ -1,11 +1,45 @@
-import { PaymentNotificationDataResponse } from '../model/types';
+import { useEffect, useState } from 'react';
+import { DataNotificationNotifyContent } from './data-notification-notify-content';
 
+import { 
+  MerchantInfo,
+  CreditCard,
+  AccountTransfer,
+  VirtualAccount,
+  MobilePayment,
+  EscrowPayment,
+  PaymentNotificationDataResponse
+} from '../model/types';
 export interface DataNotificationWrapProps {
   paymentNotificationData?: PaymentNotificationDataResponse;
 };
+export enum DataNotificationNotifyContentKey {
+  CreditCard = 'CreditCard',
+  AccountTransfer = 'AccountTransfer',
+  VirtualAccount = 'VirtualAccount',
+  MobilePayment = 'MobilePayment',
+  EscrowPayment = 'EscrowPayment',
+};
 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 [isChildOpen, setIsChildOpen] = useState<boolean>(false);
+
+  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 (
     <>
@@ -23,37 +57,78 @@ export const DataNotificationWrap = ({
           </div>
           <ul className="notify-list">
             <li>
-              <div className="notify-row">
-                <span className="notify-name">신용카드</span>
-                <span className="ic20 arrow-down"></span>
-              </div>
+              <DataNotificationNotifyContent
+                paymentMethodName={ '신용카드' }
+                startDate={ creditCard?.startDate }
+                adminEmail={ creditCard?.adminEmail }
+                urlIp={ creditCard?.urlIp }
+                retransmissionInterval={ creditCard?.retransmissionInterval }
+                retransmissionCount={ creditCard?.retransmissionCount }
+                okCheck={ creditCard?.okCheck}
+                encryptionStatus={ creditCard?.encryptionStatus }
+                isChildOpen={ isChildOpen }
+                setIsChildOpen={ setIsChildOpen }
+                ></DataNotificationNotifyContent>
             </li>
             <li className="notify-divider"></li>
             <li>
-              <div className="notify-row">
-                <span className="notify-name">계좌이체</span>
-                <span className="ic20 arrow-down"></span>
-              </div>
+              <DataNotificationNotifyContent
+                paymentMethodName={ '계좌이체' }
+                startDate={ accountTransfer?.startDate }
+                adminEmail={ accountTransfer?.adminEmail }
+                urlIp={ accountTransfer?.urlIp }
+                retransmissionInterval={ accountTransfer?.retransmissionInterval }
+                retransmissionCount={ accountTransfer?.retransmissionCount }
+                okCheck={ accountTransfer?.okCheck}
+                encryptionStatus={ accountTransfer?.encryptionStatus }
+                isChildOpen={ isChildOpen }
+                setIsChildOpen={ setIsChildOpen }
+              ></DataNotificationNotifyContent>
             </li>
             <li className="notify-divider"></li>
             <li>
-              <div className="notify-row">
-                <span className="notify-name">가상계좌</span>
-                <span className="ic20 arrow-down"></span>
-              </div>
+              <DataNotificationNotifyContent
+                paymentMethodName={ '가상계좌' }
+                startDate={ virtualAccount?.startDate }
+                adminEmail={ virtualAccount?.adminEmail }
+                urlIp={ virtualAccount?.urlIp }
+                retransmissionInterval={ virtualAccount?.retransmissionInterval }
+                retransmissionCount={ virtualAccount?.retransmissionCount }
+                okCheck={ virtualAccount?.okCheck}
+                encryptionStatus={ virtualAccount?.encryptionStatus }
+                isChildOpen={ isChildOpen }
+                setIsChildOpen={ setIsChildOpen }
+              ></DataNotificationNotifyContent>
             </li>
             <li className="notify-divider"></li>
             <li>
-              <div className="notify-row">
-                <span className="notify-name">휴대폰</span>
-                <span className="ic20 arrow-down"></span>
-              </div>
+              <DataNotificationNotifyContent
+                paymentMethodName={ '휴대폰' }
+                startDate={ mobilePayment?.startDate }
+                adminEmail={ mobilePayment?.adminEmail }
+                urlIp={ mobilePayment?.urlIp }
+                retransmissionInterval={ mobilePayment?.retransmissionInterval }
+                retransmissionCount={ mobilePayment?.retransmissionCount }
+                okCheck={ mobilePayment?.okCheck}
+                encryptionStatus={ mobilePayment?.encryptionStatus }
+                isChildOpen={ isChildOpen }
+                setIsChildOpen={ setIsChildOpen }
+              ></DataNotificationNotifyContent>
             </li>
+            <li className="notify-divider"></li>
             <li>
-              <div className="notify-row">
-                <span className="notify-name">에스크로 결제</span>
-                <span className="ic20 arrow-down"></span>
-              </div>
+              <DataNotificationNotifyContent
+                paymentMethodName={ '에스크로 결제' }
+                startDate={ escrowPayment?.startDate }
+                adminEmail={ escrowPayment?.adminEmail }
+                urlIp={ escrowPayment?.urlIp }
+                retransmissionInterval={ escrowPayment?.retransmissionInterval }
+                retransmissionCount={ escrowPayment?.retransmissionCount }
+                okCheck={ escrowPayment?.okCheck}
+                encryptionStatus={ escrowPayment?.encryptionStatus }
+                isChildOpen={ isChildOpen }
+                setIsChildOpen={ setIsChildOpen }
+              ></DataNotificationNotifyContent>
             </li>
           </ul>
         </div>