diff --git a/src/entities/common/model/constant.ts b/src/entities/common/model/constant.ts index 209a5a7..d72871d 100644 --- a/src/entities/common/model/constant.ts +++ b/src/entities/common/model/constant.ts @@ -77,7 +77,7 @@ export const MenuItems = [ menuIcon: 'payment-icon', subMenu: [ {menuId: '42', parent: '41', menuName: '결제정보', path: PATHS.payment.info}, - {menuId: '43', parent: '41', menuName: '결제데이터통보', path: PATHS.payment.dataNotification}, + {menuId: '43', parent: '41', menuName: '결제데이터통보', path: PATHS.payment.notificationData}, ] }, { diff --git a/src/entities/merchant/ui/info-wrap.tsx b/src/entities/merchant/ui/info-wrap.tsx index 7713532..0e4a6a7 100644 --- a/src/entities/merchant/ui/info-wrap.tsx +++ b/src/entities/merchant/ui/info-wrap.tsx @@ -13,6 +13,7 @@ import { useStore } from '@/shared/model/store'; export const InfoWrap = () => { const userMids = useStore.getState().UserStore.userMids; const midOptions = useStore.getState().UserStore.selectOptionsMids; + const mid = useStore.getState().UserStore.mid; const [data, setData] = useState(); @@ -34,8 +35,8 @@ export const InfoWrap = () => { }; useEffect(() => { - if(userMids[0]){ - callInfo(userMids[0]); + if(!!mid){ + callInfo(mid); } }, []); @@ -50,6 +51,7 @@ export const InfoWrap = () => { )) } diff --git a/src/entities/merchant/ui/registration-status-wrap.tsx b/src/entities/merchant/ui/registration-status-wrap.tsx index eb0bf62..37119d8 100644 --- a/src/entities/merchant/ui/registration-status-wrap.tsx +++ b/src/entities/merchant/ui/registration-status-wrap.tsx @@ -17,6 +17,7 @@ import { useStore } from '@/shared/model/store'; export const RegistrationStatusWrap = () => { const userMids = useStore.getState().UserStore.userMids; const midOptions = useStore.getState().UserStore.selectOptionsMids; + const mid = useStore.getState().UserStore.mid; const [onlineInfomation, setOnlineInfomation] = useState(); const [offlineInfomation, setOfflineInfomation] = useState(); @@ -43,8 +44,8 @@ export const RegistrationStatusWrap = () => { }; useEffect(() => { - if(userMids[0]){ - callInfo(userMids[0]); + if(!!mid){ + callInfo(mid); } }, []); @@ -59,6 +60,7 @@ export const RegistrationStatusWrap = () => { )) } diff --git a/src/entities/payment/model/types.ts b/src/entities/payment/model/types.ts index 55b4060..a24a122 100644 --- a/src/entities/payment/model/types.ts +++ b/src/entities/payment/model/types.ts @@ -1,6 +1,6 @@ export enum PaymentTabKeys { Info = 'Info', - DataNotification = 'DataNotification', + NotificationData = 'NotificationData', }; export enum PaymentInfoItemType { Comission = 'Comission', @@ -9,7 +9,7 @@ export enum PaymentInfoItemType { export interface PaymentTabProps { activeTab: PaymentTabKeys; }; -export enum DataNotificationNotifyContentKey { +export enum NotifyRowKeys { CreditCard = 'CreditCard', AccountTransfer = 'AccountTransfer', VirtualAccount = 'VirtualAccount', diff --git a/src/entities/payment/ui/data-notification-notify-content.tsx b/src/entities/payment/ui/data-notification-notify-content.tsx deleted file mode 100644 index 6dd5ced..0000000 --- a/src/entities/payment/ui/data-notification-notify-content.tsx +++ /dev/null @@ -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(false); - - const openNotifyContent = () => { - const staus = !isOpen; - setIsOpen(staus); - if(!!staus){ - setOpenChild(type); - } - else { - setOpenChild(null) - } - }; - - useEffect(() => { - if(!!openChild && openChild !== type){ - setIsOpen(false); - } - }, [openChild]); - - return ( - <> -
openNotifyContent() } - > - { paymentMethodName } - -
- - { isOpen && -
-
    -
  • 시작일자 : { (!!startDate)? moment(startDate).format('YYYY-MM-DD'): '' }
    • -
  • 관리자 메일 : { adminEmail }
    • -
  • URL/IP : { urlIp }
    • -
  • 재전송 간격 : { retransmissionInterval }
    • -
  • 재전송 횟수 : { retransmissionCount }
    • -
  • OK 체크 : { okCheck }
    • -
  • 암호화 전송여부 : { encryptionStatus }
    • -
-
- } - - - ); -}; \ No newline at end of file diff --git a/src/entities/payment/ui/info-wrap.tsx b/src/entities/payment/ui/info-wrap.tsx index 5d344ca..1c0923c 100644 --- 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 ( <> -
+
서비스 이용, 수수료 및 정산주기
    { getList(PaymentInfoItemType.Comission) } diff --git a/src/entities/payment/ui/data-notification-wrap.tsx b/src/entities/payment/ui/notification-data-wrap.tsx similarity index 67% rename from src/entities/payment/ui/data-notification-wrap.tsx rename to src/entities/payment/ui/notification-data-wrap.tsx index b2931b2..0008732 100644 --- a/src/entities/payment/ui/data-notification-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>(); const [creditCard, setCreditCard] = useState>(); const [accountTransfer, setAccountTransfer] = useState>(); @@ -25,25 +15,50 @@ export const DataNotificationWrap = ({ const [mobilePayment, setMobilePayment] = useState>(); const [escrowPayment, setEscrowPayment] = useState>(); - const [openChild, setOpenChild] = useState(null); + const [openChild, setOpenChild] = useState(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 ( <>
    - onChangeMid(e.target.value) } + > + { + midOptions.map((value, index) => ( + + )) + }
    @@ -52,9 +67,9 @@ export const DataNotificationWrap = ({
    • - + >
    • - + >
    • - + >
    • - + >
    • - + >
    diff --git a/src/entities/payment/ui/payment-tab.tsx b/src/entities/payment/ui/payment-tab.tsx index 6d7d269..201c75c 100644 --- 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) } >결제 정보
diff --git a/src/entities/payment/ui/section/notify-row.tsx b/src/entities/payment/ui/section/notify-row.tsx new file mode 100644 index 0000000..113b424 --- /dev/null +++ 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(false); + + const openNotifyRow = () => { + const staus = !isOpen; + setIsOpen(staus); + if(!!staus){ + setOpenChild(type); + } + else { + setOpenChild(null) + } + }; + + useEffect(() => { + if(!!openChild && openChild !== type){ + setIsOpen(false); + } + }, [openChild]); + + return ( + <> +
openNotifyRow() } + > + { paymentMethodName } + +
+ + { isOpen && +
+
    +
  • 시작일자 : { (!!startDate)? moment(startDate).format('YYYY-MM-DD'): '' }
    • +
  • 관리자 메일 : { adminEmail }
    • +
  • URL/IP : { urlIp }
    • +
  • 재전송 간격 : { retransmissionInterval }
    • +
  • 재전송 횟수 : { retransmissionCount }
    • +
  • OK 체크 : { okCheck }
    • +
  • 암호화 전송여부 : { encryptionStatus }
    • +
+
+ } + + + ); +}; \ No newline at end of file diff --git a/src/entities/user/model/store.ts b/src/entities/user/model/store.ts index de63d32..033e437 100644 --- a/src/entities/user/model/store.ts +++ b/src/entities/user/model/store.ts @@ -2,6 +2,7 @@ import { lens } from '@dhmk/zustand-lens'; import { SetStateAction } from 'react'; import { UserFavorite, UserInfo } from './types'; import { StorageKeys } from '@/shared/constants/local-storage'; +import { StatementSync } from 'node:sqlite'; export interface UserInfoState { userInfo: UserInfo; @@ -13,13 +14,16 @@ export interface UserInfoState { setUserMids: (update: SetStateAction>) => void; selectOptionsMids: Array>; setSelectOptionsMids: (update: SetStateAction>>) => void; + mid: string; + setMid: (update: SetStateAction) => void; }; const initialUserInfoState = { userInfo: {} as UserInfo, userFavorite: [] as Array, userMids: [] as Array, - selectOptionsMids: [] as Array> + selectOptionsMids: [] as Array>, + mid: '' as string } as UserInfoState; export const createUserInfoStore = lens((set, get) => ({ @@ -87,4 +91,14 @@ export const createUserInfoStore = lens((set, get) => ({ }; }); }, + setMid: (update) => { + set((state: UserInfoState) => { + const newMid = (typeof update === 'function') + ? update(state.mid): update; + return { + ...state, + mid: newMid + } + }); + } })); diff --git a/src/pages/payment/data-notification/data-notification-page.tsx b/src/pages/payment/data-notification/data-notification-page.tsx deleted file mode 100644 index be766cc..0000000 --- a/src/pages/payment/data-notification/data-notification-page.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { useEffect, useState } from 'react'; -import { PATHS } from '@/shared/constants/paths'; -import { useNavigate } from '@/shared/lib/hooks/use-navigate'; -import { PaymentTab } from '@/entities/payment/ui/payment-tab'; -import { DataNotificationWrap } from '@/entities/payment/ui/data-notification-wrap'; -import { PaymentNonCardResponse, PaymentNotificationDataResponse, PaymentTabKeys } from '@/entities/payment/model/types'; -import { usePaymentNotificationDataMutation } from '@/entities/payment/api/use-payment-notification-data-mutation'; -import { HeaderType } from '@/entities/common/model/types'; -import { - useSetHeaderTitle, - useSetHeaderType, - useSetFooterMode, - useSetOnBack -} from '@/widgets/sub-layout/use-sub-layout'; - -export const DataNotificationPage = () => { - const { navigate } = useNavigate(); - - const { mutateAsync: paymentNotificationData } = usePaymentNotificationDataMutation(); - - const [activeTab, setActiveTab] = useState(PaymentTabKeys.DataNotification); - const [mid, setMid] = useState('nictest00g'); - const [gid, setGid] = useState('nictest00g'); - const [paymentNotificationDataResult, setPaymentNotificationDataResult] = useState(); - - useSetHeaderTitle('결제 관리'); - useSetHeaderType(HeaderType.LeftArrow); - useSetFooterMode(true); - useSetOnBack(() => { - navigate(PATHS.home); - }); - - const callPaymentNotificationData = () => { - let params = { - mid: mid, - gid: gid - }; - - paymentNotificationData(params).then((rs) => { - console.log(rs); - setPaymentNotificationDataResult(rs); - }); - }; - - useEffect(() => { - callPaymentNotificationData(); - }, []); - - return ( - <> -
-
-
- - { !!paymentNotificationDataResult && - - } -
-
-
- - ); -}; \ No newline at end of file diff --git a/src/pages/payment/info/info-page.tsx b/src/pages/payment/info/info-page.tsx index b786a80..2c9c8eb 100644 --- a/src/pages/payment/info/info-page.tsx +++ b/src/pages/payment/info/info-page.tsx @@ -27,7 +27,7 @@ export const InfoPage = () => { return ( <>
-
+
diff --git a/src/pages/payment/notification-data/notification-data-page.tsx b/src/pages/payment/notification-data/notification-data-page.tsx new file mode 100644 index 0000000..2fe7a25 --- /dev/null +++ b/src/pages/payment/notification-data/notification-data-page.tsx @@ -0,0 +1,38 @@ +import { useState } from 'react'; +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { PaymentTab } from '@/entities/payment/ui/payment-tab'; +import { NotificationDataWrap } from '@/entities/payment/ui/notification-data-wrap'; +import { PaymentTabKeys } from '@/entities/payment/model/types'; +import { HeaderType } from '@/entities/common/model/types'; +import { + useSetHeaderTitle, + useSetHeaderType, + useSetFooterMode, + useSetOnBack +} from '@/widgets/sub-layout/use-sub-layout'; + +export const NotificationDataPage = () => { + const { navigate } = useNavigate(); + const [activeTab, setActiveTab] = useState(PaymentTabKeys.NotificationData); + + useSetHeaderTitle('결제 관리'); + useSetHeaderType(HeaderType.LeftArrow); + useSetFooterMode(true); + useSetOnBack(() => { + navigate(PATHS.home); + }); + + return ( + <> +
+
+
+ + +
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/pages/payment/payment-pages.tsx b/src/pages/payment/payment-pages.tsx index 80c7594..04fca4d 100644 --- a/src/pages/payment/payment-pages.tsx +++ b/src/pages/payment/payment-pages.tsx @@ -2,14 +2,14 @@ import { Route } from 'react-router-dom'; import { SentryRoutes } from '@/shared/configs/sentry'; import { ROUTE_NAMES } from '@/shared/constants/route-names'; import { InfoPage } from './info/info-page'; -import { DataNotificationPage } from './data-notification/data-notification-page'; +import { NotificationDataPage } from './notification-data/notification-data-page'; export const PaymentPages = () => { return ( <> } /> - } /> + } /> ); diff --git a/src/shared/constants/paths.ts b/src/shared/constants/paths.ts index 02499ed..4537206 100644 --- a/src/shared/constants/paths.ts +++ b/src/shared/constants/paths.ts @@ -85,7 +85,7 @@ export const PATHS: RouteNamesType = { payment: { base: generatePath(ROUTE_NAMES.payment.base), info: generatePath(ROUTE_NAMES.payment.base, ROUTE_NAMES.payment.info), - dataNotification: generatePath(ROUTE_NAMES.payment.base, ROUTE_NAMES.payment.dataNotification), + notificationData: generatePath(ROUTE_NAMES.payment.base, ROUTE_NAMES.payment.notificationData), }, account: { base: generatePath(ROUTE_NAMES.account.base), diff --git a/src/shared/constants/route-names.ts b/src/shared/constants/route-names.ts index b894549..d9964a1 100644 --- a/src/shared/constants/route-names.ts +++ b/src/shared/constants/route-names.ts @@ -40,7 +40,7 @@ export const ROUTE_NAMES = { payment: { base: '/payment/*', info: 'info', - dataNotification: 'data-notification' + notificationData: 'notification-data' }, account: { base: '/account/*', diff --git a/src/shared/ui/filter/select.tsx b/src/shared/ui/filter/select.tsx index 39c629b..b246438 100644 --- a/src/shared/ui/filter/select.tsx +++ b/src/shared/ui/filter/select.tsx @@ -18,6 +18,7 @@ export const FilterSelect = ({ ); } diff --git a/src/widgets/sub-layout/index.tsx b/src/widgets/sub-layout/index.tsx index 2b76dfc..3e08d85 100644 --- a/src/widgets/sub-layout/index.tsx +++ b/src/widgets/sub-layout/index.tsx @@ -119,6 +119,9 @@ export const SubLayout = () => { }; }); useStore.getState().UserStore.setSelectOptionsMids(options); + if(!!rs.mids[0]){ + useStore.getState().UserStore.setMid(rs.mids[0]); + } }); };