결제데이터통보

2025-09-16 19:48:22 +09:00
parent 60f55c98eb
commit d1556fd77d
10 changed files with 239 additions and 71 deletions
--- a/src/entities/home/ui/home-notice-list.tsx
+++ b/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);
    });
  };
--- a/src/entities/payment/ui/data-notification-notify-content.tsx
+++ b/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>
+    </>
+  );
+};
--- a/src/entities/payment/ui/data-notification-wrap.tsx
+++ b/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>
--- a/src/entities/payment/ui/info-item.tsx
+++ b/src/entities/payment/ui/info-item.tsx
@@ -1,6 +1,7 @@
 import { InfoItemProps } from '../model/types';

 export const InfoItem = ({
+  type,
  payName,
  payImage,
  infoLink 
--- a/src/entities/payment/ui/info-wrap.tsx
+++ b/src/entities/payment/ui/info-wrap.tsx
@@ -92,6 +92,7 @@ export const InfoWrap = ({
          { getList(PaymentInfoItemType.NoInterest) }
        </ul>
      </div>
+    
    </>
  );
 };
--- a/src/pages/payment/data-notification/data-notification-page.tsx
+++ b/src/pages/payment/data-notification/data-notification-page.tsx
@@ -52,9 +52,11 @@ export const DataNotificationPage = () => {
        <div className="tab-content">
          <div className="tab-pane pt-46 active">
            <PaymentTab activeTab={ activeTab }></PaymentTab>
-            <DataNotificationWrap
-              paymentNotificationData={ paymentNotificationDataResult }
-            ></DataNotificationWrap>
+            { !!paymentNotificationDataResult &&
+              <DataNotificationWrap
+                paymentNotificationData={ paymentNotificationDataResult }
+              ></DataNotificationWrap>
+            }
          </div>
        </div>
      </main>
--- a/src/pages/payment/info/info-page.tsx
+++ b/src/pages/payment/info/info-page.tsx
@@ -3,7 +3,7 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PaymentTab } from '@/entities/payment/ui/payment-tab';
 import { InfoWrap } from '@/entities/payment/ui/info-wrap';
-import { PaymentCardResponse, PaymentNonCardResponse, PaymentTabKeys } from '@/entities/payment/model/types';
+import { PaymentCardResponse, PaymentInstallmentResponse, PaymentNonCardResponse, PaymentTabKeys } from '@/entities/payment/model/types';
 import { usePaymentCardMutation } from '@/entities/payment/api/use-payment-card-mutation';
 import { usePaymentNonCardMutation } from '@/entities/payment/api/use-payment-non-card-mutation';
 import { HeaderType } from '@/entities/common/model/types';
@@ -13,18 +13,21 @@ import {
 	useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { usePaymentInstallmentMutation } from '@/entities/payment/api/use-payment-installment-mutation';

 export const InfoPage = () => {
  const { navigate } = useNavigate();

  const { mutateAsync: paymentCard } = usePaymentCardMutation();
  const { mutateAsync: paymentNonCard } = usePaymentNonCardMutation();
+  const { mutateAsync: paymentInstallment } = usePaymentInstallmentMutation();

  const [activeTab, setActiveTab] = useState<PaymentTabKeys>(PaymentTabKeys.Info);
  const [mid, setMid] = useState<string>('nictest00g');
  
  const [paymentCardResult, setPaymentCardResult] = useState<PaymentCardResponse>();
  const [paymentNonCardResult, setPaymentNonCardResult] = useState<PaymentNonCardResponse>();
+  const [paymentInstallmentResult, setPaymentInstallResult] = useState<PaymentInstallmentResponse>();

  useSetHeaderTitle('결제 관리');
  useSetHeaderType(HeaderType.LeftArrow);
@@ -55,10 +58,22 @@ export const InfoPage = () => {
      setPaymentNonCardResult(rs);
    });
  };
+  const callPaymentIntallment = () => {
+    let params = {
+      mid: mid,
+      paymentMethod: 'CREDIT_CARD'
+    };
+    
+    paymentInstallment(params).then((rs) => {
+      console.log(rs);
+      setPaymentInstallResult(rs);
+    });
+  };

  useEffect(() => {
    callPaymentCard();
    callPaymentNonCard();
+    callPaymentIntallment();
  }, []);

  return (
@@ -70,6 +85,7 @@ export const InfoPage = () => {
            <InfoWrap
              paymentCard={ paymentCardResult }
              paymentNonCard={ paymentNonCardResult }
+              paymentInstallment={ paymentInstallmentResult }
            ></InfoWrap>
          </div>
        </div>
--- a/src/pages/support/notice/list-page.tsx
+++ b/src/pages/support/notice/list-page.tsx
@@ -66,7 +66,6 @@ export const NoticeListPage = () => {
    callList();
  }, []);

-
  return (
    <>
      <main>