결제데이터통보

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

@@ -0,0 +1,71 @@
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+
+export interface DataNotificationNotifyContentProps {
+  paymentMethodName: string;
+  startDate?: string;
+  adminEmail?: string;
+  urlIp?: string;
+  retransmissionInterval?: string;
+  retransmissionCount?: string;
+  okCheck?: string;
+  encryptionStatus?: string;
+  isChildOpen: boolean;
+  setIsChildOpen: (isChildOpen: boolean) => void;
+};
+export const DataNotificationNotifyContent = ({
+  paymentMethodName,
+  startDate,
+  adminEmail,
+  urlIp,
+  retransmissionInterval,
+  retransmissionCount,
+  okCheck,
+  encryptionStatus,
+  isChildOpen,
+  setIsChildOpen
+}: DataNotificationNotifyContentProps) => {
+  
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  
+  const openNotifyContent = () => {
+    setIsOpen(!isOpen);
+    setIsChildOpen(!isOpen);
+  };
+
+  useEffect(() => {
+    console.log('useEffect ', isChildOpen)
+    if(!!isChildOpen){
+      //setIsOpen(false);
+    }
+  }, [isChildOpen])
+
+  return (
+    <>
+      <div 
+        className="notify-row" 
+        onClick={ () => openNotifyContent() }
+      >
+        <span className="notify-name">{ paymentMethodName }</span>
+        <span className={`ic20 arrow-down ${(isOpen)? 'rot-180': ''}`}></span>
+      </div>
+      <SlideDown className={'my-dropdown-slidedown'}>
+        { isOpen &&
+          <div className="notify-content">
+            <ul className="notify-detail-list">
+              <li className="notify-detail-item">시작일자 : { moment(startDate).format('YYYY-MM-DD') }</li>
+              <li className="notify-detail-item">관리자 메일 : { adminEmail } </li>
+              <li className="notify-detail-item">URL/IP : { urlIp }</li>
+              <li className="notify-detail-item">재전송 간격 : { retransmissionInterval }</li>
+              <li className="notify-detail-item">재전송 횟수 : { retransmissionCount }</li>
+              <li className="notify-detail-item">OK 체크 : { okCheck }</li>
+              <li className="notify-detail-item">암호화 전송여부 : { encryptionStatus }</li>
+            </ul>
+          </div>
+        }
+      </SlideDown>
+    </>
+  );
+};

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>

src/entities/payment/ui/info-item.tsx

@@ -1,6 +1,7 @@
 import { InfoItemProps } from '../model/types';
 
 export const InfoItem = ({
+  type,
   payName,
   payImage,
   infoLink 

src/entities/payment/ui/info-wrap.tsx

@@ -92,6 +92,7 @@ export const InfoWrap = ({
           { getList(PaymentInfoItemType.NoInterest) }
         </ul>
       </div>
+    
     </>
   );
 };