Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

src/entities/home/ui/home-notice-list.tsx

@@ -37,7 +37,6 @@ export const HomeNoticeList = () => {
     };
   
     noticeList(listParams).then((rs) => {
-      console.log(rs)
       setResultList(rs.content);
     });
   };

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

@@ -0,0 +1,79 @@
+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;
+  retransmissionInterval?: string;
+  retransmissionCount?: string;
+  okCheck?: string;
+  encryptionStatus?: string;
+  openChild: DataNotificationNotifyContentKey | null;
+  setOpenChild: (openChild: DataNotificationNotifyContentKey | null) => void;
+};
+export const DataNotificationNotifyContent = ({
+  paymentMethodName,
+  type,
+  startDate,
+  adminEmail,
+  urlIp,
+  retransmissionInterval,
+  retransmissionCount,
+  okCheck,
+  encryptionStatus,
+  openChild,
+  setOpenChild
+}: DataNotificationNotifyContentProps) => {
+  
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  
+  const openNotifyContent = () => {
+    const staus = !isOpen;
+    setIsOpen(staus);
+    if(!!staus){
+      setOpenChild(type);  
+    }
+    else {
+      setOpenChild(null)
+    }
+  };
+
+  useEffect(() => {
+   if(!!openChild && openChild !== type){
+    setIsOpen(false);
+   }
+  }, [openChild])
+
+  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,12 +1,41 @@
-import { PaymentNotificationDataResponse } from '../model/types';
+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">
@@ -23,37 +52,83 @@ 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={ '신용카드' }
+                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>
-              <div className="notify-row">
-                <span className="notify-name">계좌이체</span>
-                <span className="ic20 arrow-down"></span>
-              </div>
+              <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>
-              <div className="notify-row">
-                <span className="notify-name">가상계좌</span>
-                <span className="ic20 arrow-down"></span>
-              </div>
+              <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>
-              <div className="notify-row">
-                <span className="notify-name">휴대폰</span>
-                <span className="ic20 arrow-down"></span>
-              </div>
+              <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>
-              <div className="notify-row">
-                <span className="notify-name">에스크로 결제</span>
-                <span className="ic20 arrow-down"></span>
-              </div>
+              <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>

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>
+    
     </>
   );
 };