결제 데이터 통보

src/entities/payment/model/types.ts

@@ -9,6 +9,13 @@ export enum PaymentInfoItemType {
 export interface PaymentTabProps {
   activeTab: PaymentTabKeys;
 };
+export enum DataNotificationNotifyContentKey {
+  CreditCard = 'CreditCard',
+  AccountTransfer = 'AccountTransfer',
+  VirtualAccount = 'VirtualAccount',
+  MobilePayment = 'MobilePayment',
+  EscrowPayment = 'EscrowPayment',
+};
 export interface InfoItemProps {
   type?: PaymentInfoItemType;
   payName?: string;

src/entities/payment/ui/data-notification-notify-content.tsx

@@ -2,9 +2,11 @@ import moment from 'moment';
 import { useEffect, useState } from 'react';
 import { SlideDown } from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
+import { DataNotificationNotifyContentKey } from '../model/types';
 
 export interface DataNotificationNotifyContentProps {
   paymentMethodName: string;
+  type: DataNotificationNotifyContentKey;
   startDate?: string;
   adminEmail?: string;
   urlIp?: string;
@@ -12,11 +14,12 @@ export interface DataNotificationNotifyContentProps {
   retransmissionCount?: string;
   okCheck?: string;
   encryptionStatus?: string;
-  isChildOpen: boolean;
-  setIsChildOpen: (isChildOpen: boolean) => void;
+  openChild: DataNotificationNotifyContentKey | null;
+  setOpenChild: (openChild: DataNotificationNotifyContentKey | null) => void;
 };
 export const DataNotificationNotifyContent = ({
   paymentMethodName,
+  type,
   startDate,
   adminEmail,
   urlIp,
@@ -24,23 +27,28 @@ export const DataNotificationNotifyContent = ({
   retransmissionCount,
   okCheck,
   encryptionStatus,
-  isChildOpen,
-  setIsChildOpen
+  openChild,
+  setOpenChild
 }: DataNotificationNotifyContentProps) => {
   
   const [isOpen, setIsOpen] = useState<boolean>(false);
   
   const openNotifyContent = () => {
-    setIsOpen(!isOpen);
-    setIsChildOpen(!isOpen);
+    const staus = !isOpen;
+    setIsOpen(staus);
+    if(!!staus){
+      setOpenChild(type);  
+    }
+    else {
+      setOpenChild(null)
+    }
   };
 
   useEffect(() => {
-    console.log('useEffect ', isChildOpen)
-    if(!!isChildOpen){
-      //setIsOpen(false);
-    }
-  }, [isChildOpen])
+   if(!!openChild && openChild !== type){
+    setIsOpen(false);
+   }
+  }, [openChild])
 
   return (
     <>

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

@@ -8,18 +8,13 @@ import {
   VirtualAccount,
   MobilePayment,
   EscrowPayment,
+  DataNotificationNotifyContentKey,
   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) => {
@@ -30,7 +25,7 @@ export const DataNotificationWrap = ({
   const [mobilePayment, setMobilePayment] = useState<Record<string, any>>();
   const [escrowPayment, setEscrowPayment] = useState<Record<string, any>>();
 
-  const [isChildOpen, setIsChildOpen] = useState<boolean>(false);
+  const [openChild, setOpenChild] = useState<DataNotificationNotifyContentKey | null>(null);
 
   useEffect(() => {
     setMerchantInfo(paymentNotificationData?.merchantInfo);
@@ -40,7 +35,7 @@ export const DataNotificationWrap = ({
     setMobilePayment(paymentNotificationData?.mobilePayment.detail);
     setEscrowPayment(paymentNotificationData?.escrowPayment.detail);
   }, []);
-
+  
   return (
     <>
       <div className="ing-list">
@@ -59,6 +54,7 @@ export const DataNotificationWrap = ({
             <li>
               <DataNotificationNotifyContent
                 paymentMethodName={ '신용카드' }
+                type={ DataNotificationNotifyContentKey.CreditCard }
                 startDate={ creditCard?.startDate }
                 adminEmail={ creditCard?.adminEmail }
                 urlIp={ creditCard?.urlIp }
@@ -66,14 +62,15 @@ export const DataNotificationWrap = ({
                 retransmissionCount={ creditCard?.retransmissionCount }
                 okCheck={ creditCard?.okCheck}
                 encryptionStatus={ creditCard?.encryptionStatus }
-                isChildOpen={ isChildOpen }
-                setIsChildOpen={ setIsChildOpen }
+                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 }
@@ -81,14 +78,15 @@ export const DataNotificationWrap = ({
                 retransmissionCount={ accountTransfer?.retransmissionCount }
                 okCheck={ accountTransfer?.okCheck}
                 encryptionStatus={ accountTransfer?.encryptionStatus }
-                isChildOpen={ isChildOpen }
-                setIsChildOpen={ setIsChildOpen }
+                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 }
@@ -96,14 +94,15 @@ export const DataNotificationWrap = ({
                 retransmissionCount={ virtualAccount?.retransmissionCount }
                 okCheck={ virtualAccount?.okCheck}
                 encryptionStatus={ virtualAccount?.encryptionStatus }
-                isChildOpen={ isChildOpen }
-                setIsChildOpen={ setIsChildOpen }
+                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 }
@@ -111,14 +110,15 @@ export const DataNotificationWrap = ({
                 retransmissionCount={ mobilePayment?.retransmissionCount }
                 okCheck={ mobilePayment?.okCheck}
                 encryptionStatus={ mobilePayment?.encryptionStatus }
-                isChildOpen={ isChildOpen }
-                setIsChildOpen={ setIsChildOpen }
+                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 }
@@ -126,8 +126,8 @@ export const DataNotificationWrap = ({
                 retransmissionCount={ escrowPayment?.retransmissionCount }
                 okCheck={ escrowPayment?.okCheck}
                 encryptionStatus={ escrowPayment?.encryptionStatus }
-                isChildOpen={ isChildOpen }
-                setIsChildOpen={ setIsChildOpen }
+                openChild={ openChild }
+                setOpenChild={ setOpenChild }
               ></DataNotificationNotifyContent>
             </li>
           </ul>