From a4506ccfbc1a3f88b00cdf9d310001f9eaa19479 Mon Sep 17 00:00:00 2001 From: "focp212@naver.com" Date: Thu, 18 Sep 2025 16:03:02 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B0=80=EB=A7=B9=EC=A0=90=EA=B4=80=EB=A6=AC?= =?UTF-8?q?=20=EB=93=B1=EB=A1=9D=ED=98=84=ED=99=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/entities/merchant/model/types.ts | 16 ++-- src/entities/merchant/ui/info-wrap.tsx | 8 +- .../ui/info-wrap/account-info-wrap.tsx | 32 +++++++ .../merchant/ui/info-wrap/card-info-wrap.tsx | 66 ++++++++++++++ .../ui/info-wrap/escrow-info-wrap.tsx | 87 +++++++++++++++++++ .../ui/info-wrap/online-info-wrap.tsx | 53 +++++++++++ .../merchant/ui/registration-status-wrap.tsx | 74 +++++++++++++++- 7 files changed, 326 insertions(+), 10 deletions(-) create mode 100644 src/entities/merchant/ui/info-wrap/account-info-wrap.tsx create mode 100644 src/entities/merchant/ui/info-wrap/card-info-wrap.tsx create mode 100644 src/entities/merchant/ui/info-wrap/escrow-info-wrap.tsx create mode 100644 src/entities/merchant/ui/info-wrap/online-info-wrap.tsx diff --git a/src/entities/merchant/model/types.ts b/src/entities/merchant/model/types.ts index f512cdd..a358678 100644 --- a/src/entities/merchant/model/types.ts +++ b/src/entities/merchant/model/types.ts @@ -48,6 +48,10 @@ export enum InfoWrapKeys { Merchant = 'Merchant', Technical = 'Technical', Settlement = 'Settlement', + Online = 'Online', + Offline = 'Offline', + Card = 'Card', + Escrow = 'Escrow' }; export interface MerchantMidParams { mid: string; @@ -110,10 +114,10 @@ export interface CardApplications { statusName: string; }; export interface Escrow { - companyName: string; - businessRegistrationNumber: string; - escrowStatus: EscrowStatus, - address: string; - merchantUrl: string; - serviceRegistrationNumber: string; + companyName?: string; + businessRegistrationNumber?: string; + escrowStatus?: EscrowStatus, + address?: string; + merchantUrl?: string; + serviceRegistrationNumber?: string; }; \ No newline at end of file diff --git a/src/entities/merchant/ui/info-wrap.tsx b/src/entities/merchant/ui/info-wrap.tsx index d1b2b3c..be6e248 100644 --- a/src/entities/merchant/ui/info-wrap.tsx +++ b/src/entities/merchant/ui/info-wrap.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import { useMerchantMidMutation } from '../api/use-merchant-mid-mutation'; import { BusinessInfoWrap } from './info-wrap/business-info-wrap'; import { ManagerInfoWrap } from './info-wrap/manager-info-wrap'; - +import { AccountInfoWrap } from './info-wrap/account-info-wrap'; import { InfoWrapKeys, MerchantMidParams, @@ -27,7 +27,7 @@ export const InfoWrap = () => { }; useEffect(() => { - callInfo(); + // callInfo(); }, []); return ( @@ -75,7 +75,9 @@ export const InfoWrap = () => { setOpenChild={ setOpenChild } >
- +

※ 가맹점 정보는 앱에서 수정할 수 없습니다.
PC 가맹점 관리자에서 설정해 주세요.

diff --git a/src/entities/merchant/ui/info-wrap/account-info-wrap.tsx b/src/entities/merchant/ui/info-wrap/account-info-wrap.tsx new file mode 100644 index 0000000..5905d69 --- /dev/null +++ b/src/entities/merchant/ui/info-wrap/account-info-wrap.tsx @@ -0,0 +1,32 @@ +import { MerchantMidResponse } from '../../model/types'; + +export interface AccountInfoWrapProps { + data?: MerchantMidResponse +}; + +export const AccountInfoWrap = ({ + data +}: AccountInfoWrapProps) => { + + return ( + <> +
+
정산계좌
+ +
+ + ); +}; \ No newline at end of file diff --git a/src/entities/merchant/ui/info-wrap/card-info-wrap.tsx b/src/entities/merchant/ui/info-wrap/card-info-wrap.tsx new file mode 100644 index 0000000..bd702ac --- /dev/null +++ b/src/entities/merchant/ui/info-wrap/card-info-wrap.tsx @@ -0,0 +1,66 @@ +import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; +import { CardApplications, Escrow, EscrowStatus, InfoWrapKeys, MerchantMidResponse } from '../../model/types'; +import SlideDown from 'react-slidedown'; +import 'react-slidedown/lib/slidedown.css'; +import { useEffect, useState } from 'react'; + +export interface CardInfoWrapProps { + type: InfoWrapKeys; + title?: string; + cardApplications?: Array + openChild: InfoWrapKeys | null; + setOpenChild: (openChild: InfoWrapKeys | null) => void; +}; + +export const CardInfoWrap = ({ + type, + title, + cardApplications, + openChild, + setOpenChild +}: CardInfoWrapProps) => { + + const [isOpen, setIsOpen] = useState(false); + + const opeSection = () => { + const staus = !isOpen; + setIsOpen(staus); + if(!!staus){ + setOpenChild(type); + } + else { + setOpenChild(null) + } + }; + + useEffect(() => { + if(!!openChild && openChild !== type){ + setIsOpen(false); + } + }, [openChild]); + + return ( + <> +
+
opeSection() } + > + { title } +
+ + { isOpen && +
    + { cardApplications?.map((value, index) => ( +
  • + { value.cardCompanyName } + { `${value.partnerServiceName}(${value.statusName})` } +
    • + )) + } +
+ } + +
+ + ); +}; \ No newline at end of file diff --git a/src/entities/merchant/ui/info-wrap/escrow-info-wrap.tsx b/src/entities/merchant/ui/info-wrap/escrow-info-wrap.tsx new file mode 100644 index 0000000..0485233 --- /dev/null +++ b/src/entities/merchant/ui/info-wrap/escrow-info-wrap.tsx @@ -0,0 +1,87 @@ +import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; +import { Escrow, EscrowStatus, InfoWrapKeys, MerchantMidResponse } from '../../model/types'; +import SlideDown from 'react-slidedown'; +import 'react-slidedown/lib/slidedown.css'; +import { useEffect, useState } from 'react'; + +export interface EscrowInfoWrapProps extends Escrow { + type: InfoWrapKeys; + title?: string; + openChild: InfoWrapKeys | null; + setOpenChild: (openChild: InfoWrapKeys | null) => void; +}; + +export const EscrowInfoWrap = ({ + type, + title, + companyName, + businessRegistrationNumber, + escrowStatus, + address, + merchantUrl, + serviceRegistrationNumber, + openChild, + setOpenChild +}: EscrowInfoWrapProps) => { + + const [isOpen, setIsOpen] = useState(false); + + const opeSection = () => { + const staus = !isOpen; + setIsOpen(staus); + if(!!staus){ + setOpenChild(type); + } + else { + setOpenChild(null) + } + }; + + useEffect(() => { + if(!!openChild && openChild !== type){ + setIsOpen(false); + } + }, [openChild]); + + return ( + <> +
+
opeSection() } + > + { title } +
+ + { isOpen && +
    +
  • + 상호 + { companyName } +
    • +
  • + 사업자번호 + { businessRegistrationNumber } +
    • +
  • + NICECROW 가입 + { escrowStatus } +
    • +
  • + 소재지 + { address } +
    • +
  • + URL + { merchantUrl } +
    • +
  • + 서비스 등록번호 + { serviceRegistrationNumber } +
    • +
+ } + +
+ + ); +}; \ No newline at end of file diff --git a/src/entities/merchant/ui/info-wrap/online-info-wrap.tsx b/src/entities/merchant/ui/info-wrap/online-info-wrap.tsx new file mode 100644 index 0000000..ec9f720 --- /dev/null +++ b/src/entities/merchant/ui/info-wrap/online-info-wrap.tsx @@ -0,0 +1,53 @@ +import moment from 'moment'; +import { OnlineInfomation } from '../../model/types'; + +export interface OnlineInfoWrapProps { + data?: OnlineInfomation +}; + +export const OnlineInfoWrap = ({ + data +}: OnlineInfoWrapProps) => { + + return ( + <> +
+
온라인 등록현황
+
    +
  • + 상태 + { data?.usageStatus } +
    • +
  • + 상호 + { data?.companyName } +
    • +
  • + 사업자 번호 + { data?.businessRegistrationNumber } +
    • +
  • + 발급일자 + { data?.registrationDate } +
    • +
  • + 계약완료 여부 + { data?.contractStatus } +
    • +
  • + 홈페이지 심사 여부 + { data?.cardAuditStatus } +
    • +
  • + 보증보험 + { data?.insuranceAmount } +
    • +
  • + { (data?.insuranceExpiryDate)? `(${moment(data?.insuranceExpiryDate).format('YYYY.MM.DD')})`: '' } + +
    • +
+
+ + ); +}; \ No newline at end of file diff --git a/src/entities/merchant/ui/registration-status-wrap.tsx b/src/entities/merchant/ui/registration-status-wrap.tsx index 9873394..4339d55 100644 --- a/src/entities/merchant/ui/registration-status-wrap.tsx +++ b/src/entities/merchant/ui/registration-status-wrap.tsx @@ -1,8 +1,80 @@ +import { useEffect, useState } from 'react'; +import { useMerchantMidStatusMutation } from '../api/use-merchant-mid-status-mutation'; +import { + CardApplications, + Escrow, + InfoWrapKeys, + MerchantMidStatusParams, + MerchantMidStatusResponse, + OfflineInfomation, + OnlineInfomation +} from '../model/types'; +import { OnlineInfoWrap } from './info-wrap/online-info-wrap'; +import { CardInfoWrap } from './info-wrap/card-info-wrap'; +import { EscrowInfoWrap } from './info-wrap/escrow-info-wrap'; + export const RegistrationStatusWrap = () => { + const [mid, setMid] = useState('nictest001m'); + const [onlineInfomation, setOnlineInfomation] = useState(); + const [offlineInfomation, setOfflineInfomation] = useState(); + const [cardApplications, setCardApplications] = useState>(); + const [escrow, setEscrow] = useState(); + + const [openChild, setOpenChild] = useState(null); + const { mutateAsync: merchantMidStatus } = useMerchantMidStatusMutation(); + + const callInfo = () => { + let params: MerchantMidStatusParams = { + mid: mid + }; + merchantMidStatus(params).then((rs: MerchantMidStatusResponse) => { + setOnlineInfomation(rs.onlineInfomation); + setOfflineInfomation(rs.offlineInfomation); + setCardApplications(rs.cardApplications); + setEscrow(rs.escrow); + }); + }; + + useEffect(() => { + // callInfo(); + }, []); + return ( <> - +
+ +
+
+ +
+ +
+ +
); }; \ No newline at end of file