payment 이하 구조 변경

2025-10-10 12:45:02 +09:00
parent 18b2f9188a
commit 306629be53
18 changed files with 228 additions and 216 deletions
--- a/src/entities/payment/ui/data-notification-notify-content.tsx
+++ b/src/entities/payment/ui/data-notification-notify-content.tsx
@@ -1,79 +0,0 @@
-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">시작일자 : { (!!startDate)? 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/info-wrap.tsx
+++ b/src/entities/payment/ui/info-wrap.tsx
@@ -162,17 +162,19 @@ export const InfoWrap = () => {
  };

  const callPaymentIntallmentDetail = () => {
-    let params: PaymentInstallmentDetailParams  = {
-      mid: mid,
-      cardCompany: cardCompany
-    };
-    
-    paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => {
-      console.log(rs);
-      setCardCompany(rs.cardCompany);
-      setCardCompanyOptions(rs.cardCompanyOptions);
-      setInstallmentDetails(rs.installmentDetails);
-    });
+    if(!!cardCompany){
+      let params: PaymentInstallmentDetailParams  = {
+        mid: mid,
+        cardCompany: cardCompany
+      };
+      
+      paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => {
+        console.log(rs);
+        setCardCompany(rs.cardCompany);
+        setCardCompanyOptions(rs.cardCompanyOptions);
+        setInstallmentDetails(rs.installmentDetails);
+      });
+    }
  };
  useEffect(() => {
    callPaymentCard();
@@ -185,7 +187,7 @@ export const InfoWrap = () => {

  return (
    <>
-      <div className="ing-list pb-70">
+      <div className="ing-list">
        <div className="ing-title">서비스 이용, 수수료 및 정산주기</div>
        <ul className="ing-card-list">
          { getList(PaymentInfoItemType.Comission) }
--- a/src/entities/payment/ui/notification-data-wrap.tsx
+++ b/src/entities/payment/ui/notification-data-wrap.tsx
@@ -1,23 +1,13 @@
 import { useEffect, useState } from 'react';
-import { DataNotificationNotifyContent } from './data-notification-notify-content';
+import { NotifyRowKeys } from '../model/types';
+import { usePaymentNotificationDataMutation } from '../api/use-payment-notification-data-mutation';
+import { useStore } from '@/shared/model/store';
+import { NotifyRow } from './section/notify-row';

-import { 
-  MerchantInfo,
-  CreditCard,
-  AccountTransfer,
-  VirtualAccount,
-  MobilePayment,
-  EscrowPayment,
-  DataNotificationNotifyContentKey,
-  PaymentNotificationDataResponse
-} from '../model/types';
-export interface DataNotificationWrapProps {
-  paymentNotificationData?: PaymentNotificationDataResponse;
-};
+export const NotificationDataWrap = () => {
+  const midOptions = useStore.getState().UserStore.selectOptionsMids;
+  const mid = useStore.getState().UserStore.mid;

-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>>();
@@ -25,25 +15,50 @@ export const DataNotificationWrap = ({
  const [mobilePayment, setMobilePayment] = useState<Record<string, any>>();
  const [escrowPayment, setEscrowPayment] = useState<Record<string, any>>();

-  const [openChild, setOpenChild] = useState<DataNotificationNotifyContentKey | null>(null);
+  const [openChild, setOpenChild] = useState<NotifyRowKeys | null>(null);

+  const { mutateAsync: paymentNotificationData } = usePaymentNotificationDataMutation();
+
+  const callPaymentNotificationData = (selectedMid: string) => {
+    let params = {
+      mid: selectedMid,
+      gid: selectedMid
+    };
+      
+    paymentNotificationData(params).then((rs) => {
+      console.log(rs);
+      setMerchantInfo(rs?.merchantInfo);
+      setCreditCard(rs?.creditCard.detail);
+      setAccountTransfer(rs?.accountTransfer.detail);
+      setVirtualAccount(rs?.virtualAccount.detail);
+      setMobilePayment(rs?.mobilePayment.detail);
+      setEscrowPayment(rs?.escrowPayment.detail);
+    });
+  };
+  const onChangeMid = (value: string) => {
+    callPaymentNotificationData(value);
+  };
  useEffect(() => {
-    setMerchantInfo(paymentNotificationData?.merchantInfo);
-    setCreditCard(paymentNotificationData?.creditCard.detail);
-    setAccountTransfer(paymentNotificationData?.accountTransfer.detail);
-    setVirtualAccount(paymentNotificationData?.virtualAccount.detail);
-    setMobilePayment(paymentNotificationData?.mobilePayment.detail);
-    setEscrowPayment(paymentNotificationData?.escrowPayment.detail);
+    if(!!mid){
+      callPaymentNotificationData(mid);
+    }
  }, []);
  
  return (
    <>
      <div className="ing-list">
        <div className="input-wrapper top-select mt-16">
-          <select>
-            <option value="1">nicetest00g</option>
-            <option value="2">nicetest00g</option>
-            <option value="3">nicetest00g</option>
+          <select
+            onChange={ (e) => onChangeMid(e.target.value) }
+          >
+          { 
+            midOptions.map((value, index) => (
+              <option
+                key={ value.value }
+                value={ value.value }
+              >{ value.name }</option>
+            )) 
+          }  
          </select>
        </div>
        <div className="notify-container">
@@ -52,9 +67,9 @@ export const DataNotificationWrap = ({
          </div>
          <ul className="notify-list">
            <li>
-              <DataNotificationNotifyContent
+              <NotifyRow
                paymentMethodName={ '신용카드' }
-                type={ DataNotificationNotifyContentKey.CreditCard }
+                type={ NotifyRowKeys.CreditCard }
                startDate={ creditCard?.startDate }
                adminEmail={ creditCard?.adminEmail }
                urlIp={ creditCard?.urlIp }
@@ -64,13 +79,13 @@ export const DataNotificationWrap = ({
                encryptionStatus={ creditCard?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
-                ></DataNotificationNotifyContent>
+                ></NotifyRow>
            </li>
            <li className="notify-divider"></li>
            <li>
-              <DataNotificationNotifyContent
+              <NotifyRow
                paymentMethodName={ '계좌이체' }
-                type={ DataNotificationNotifyContentKey.AccountTransfer }
+                type={ NotifyRowKeys.AccountTransfer }
                startDate={ accountTransfer?.startDate }
                adminEmail={ accountTransfer?.adminEmail }
                urlIp={ accountTransfer?.urlIp }
@@ -80,13 +95,13 @@ export const DataNotificationWrap = ({
                encryptionStatus={ accountTransfer?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
-              ></DataNotificationNotifyContent>
+              ></NotifyRow>
            </li>
            <li className="notify-divider"></li>
            <li>
-              <DataNotificationNotifyContent
+              <NotifyRow
                paymentMethodName={ '가상계좌' }
-                type={ DataNotificationNotifyContentKey.VirtualAccount }
+                type={ NotifyRowKeys.VirtualAccount }
                startDate={ virtualAccount?.startDate }
                adminEmail={ virtualAccount?.adminEmail }
                urlIp={ virtualAccount?.urlIp }
@@ -96,13 +111,13 @@ export const DataNotificationWrap = ({
                encryptionStatus={ virtualAccount?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
-              ></DataNotificationNotifyContent>
+              ></NotifyRow>
            </li>
            <li className="notify-divider"></li>
            <li>
-              <DataNotificationNotifyContent
+              <NotifyRow
                paymentMethodName={ '휴대폰' }
-                type={ DataNotificationNotifyContentKey.MobilePayment }
+                type={ NotifyRowKeys.MobilePayment }
                startDate={ mobilePayment?.startDate }
                adminEmail={ mobilePayment?.adminEmail }
                urlIp={ mobilePayment?.urlIp }
@@ -112,13 +127,13 @@ export const DataNotificationWrap = ({
                encryptionStatus={ mobilePayment?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
-              ></DataNotificationNotifyContent>
+              ></NotifyRow>
            </li>
            <li className="notify-divider"></li>
            <li>
-              <DataNotificationNotifyContent
+              <NotifyRow
                paymentMethodName={ '에스크로 결제' }
-                type={ DataNotificationNotifyContentKey.EscrowPayment }
+                type={ NotifyRowKeys.EscrowPayment }
                startDate={ escrowPayment?.startDate }
                adminEmail={ escrowPayment?.adminEmail }
                urlIp={ escrowPayment?.urlIp }
@@ -128,7 +143,7 @@ export const DataNotificationWrap = ({
                encryptionStatus={ escrowPayment?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
-              ></DataNotificationNotifyContent>
+              ></NotifyRow>
            </li>
          </ul>
        </div>
--- a/src/entities/payment/ui/payment-tab.tsx
+++ b/src/entities/payment/ui/payment-tab.tsx
@@ -15,8 +15,8 @@ export const PaymentTab = ({
      if(tab === PaymentTabKeys.Info){
        navigate(PATHS.payment.info);
      }
-      else if(tab === PaymentTabKeys.DataNotification){
-        navigate(PATHS.payment.dataNotification);
+      else if(tab === PaymentTabKeys.NotificationData){
+        navigate(PATHS.payment.notificationData);
      }
    }
  };
@@ -28,8 +28,8 @@ export const PaymentTab = ({
          onClick={ () => onClickToNavigation(PaymentTabKeys.Info) } 
        >결제 정보</button>
        <button 
-          className={`subtab-btn ${(activeTab === PaymentTabKeys.DataNotification)? 'active': ''}` }
-          onClick={ () => onClickToNavigation(PaymentTabKeys.DataNotification) } 
+          className={`subtab-btn ${(activeTab === PaymentTabKeys.NotificationData)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(PaymentTabKeys.NotificationData) } 
        >결제데이터 통보</button>
      </div>
    </>
--- a/src/entities/payment/ui/section/notify-row.tsx
+++ b/src/entities/payment/ui/section/notify-row.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 { NotifyRowKeys } from '../../model/types';
+
+export interface NotifyRowProps {
+  paymentMethodName: string;
+  type: NotifyRowKeys;
+  startDate?: string;
+  adminEmail?: string;
+  urlIp?: string;
+  retransmissionInterval?: string;
+  retransmissionCount?: string;
+  okCheck?: string;
+  encryptionStatus?: string;
+  openChild: NotifyRowKeys | null;
+  setOpenChild: (openChild: NotifyRowKeys | null) => void;
+};
+
+export const NotifyRow = ({
+  paymentMethodName,
+  type,
+  startDate,
+  adminEmail,
+  urlIp,
+  retransmissionInterval,
+  retransmissionCount,
+  okCheck,
+  encryptionStatus,
+  openChild,
+  setOpenChild
+}: NotifyRowProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  
+  const openNotifyRow = () => {
+    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={ () => openNotifyRow() }
+        >
+          <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">시작일자 : { (!!startDate)? 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>
+      </>
+    );
+};