nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

가맹점 정보, 일부 상수 및 공용 변경

Browse Source
This commit is contained in:
focp212@naver.com
2025-09-18 14:52:27 +09:00
parent 2910b20974
commit 9ba7bdd3e4
50 changed files with 623 additions and 748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/entities/business-member/api/use-business-member-info-mutation.tsx
View File

@@ -1,29 +0,0 @@
import axios from 'axios';
import { API_URL } from '@/shared/api/urls';
import { resultify } from '@/shared/lib/resultify';
import { CBDCAxiosError } from '@/shared/@types/error';
import {
BusinessMemberInfoParams,
BusinessMemberInfoResponse
} from '../model/types';
import {
useMutation,
UseMutationOptions
} from '@tanstack/react-query';
export const businessMemberInfo = (params: BusinessMemberInfoParams) => {
return resultify(
axios.post<BusinessMemberInfoResponse>(API_URL.businessMemberInfo(), params),
);
};
export const useBusinessMemberInfoMutation = (options?: UseMutationOptions<BusinessMemberInfoResponse, CBDCAxiosError, BusinessMemberInfoParams>) => {
const mutation = useMutation<BusinessMemberInfoResponse, CBDCAxiosError, BusinessMemberInfoParams>({
...options,
mutationFn: (params: BusinessMemberInfoParams) => businessMemberInfo(params),
});
return {
...mutation,
};
};

56
src/entities/business-member/model/types.ts
View File

@@ -1,56 +0,0 @@
export enum BusinessMemberTabKeys {
Info = 'Info',
RegistrationStatus = 'RegistrationStatus',
};
export enum BusinessMemberInfoKeys {
InfoContractManager = 'InfoContractManager',
InfoTechnicalManager = 'InfoTechnicalManager',
InfoSettlementManager = 'InfoSettlementManager',
InfoSettlementAccount = 'InfoSettlementAccount'
};
export interface BusinessMemberTabProps {
activeTab: BusinessMemberTabKeys;
};
export interface InfoArrowProps {
show?: boolean;
};
export interface BusinessMemberRequestParams {
tid?: string;
};
export interface InfoBasicInfoProps {
};
export interface InfoOwnerInfoProps {
};
export interface InfoCompanyInfoProps {
};
export interface InfoContractManagerProps {
};
export interface InfoTechnicalManagerProps {
};
export interface InfoSettlementManagerProps {
};
export interface InfoSettlementAccountProps {
};
export interface BusinessMemberInfoResponse {
InfoBasicInfo?: InfoBasicInfoProps;
InfoOwnerInfo?: InfoOwnerInfoProps;
InfoCompanyInfo?: InfoCompanyInfoProps;
infoContractManager?: InfoContractManagerProps;
infoTechnicalManager?: InfoTechnicalManagerProps;
infoSettlementManager?: InfoSettlementManagerProps;
infoSettlementAccount?: InfoSettlementAccountProps;
};
export interface InfoProps extends BusinessMemberInfoResponse{
show?: boolean;
onClickToShowInfo?: (info: BusinessMemberInfoKeys) => void;
};
export interface BusinessMemberInfoParams extends BusinessMemberRequestParams {
svcCd: string;
};

37
src/entities/business-member/ui/business-member-tab.tsx
View File

@@ -1,37 +0,0 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import {
BusinessMemberTabKeys,
BusinessMemberTabProps
} from '../model/types';
export const BusinessMemberTab = ({
activeTab
}: BusinessMemberTabProps) => {
const { navigate } = useNavigate();
const onClickToNavigation = (tab: BusinessMemberTabKeys) => {
if(activeTab !== tab){
if(tab === BusinessMemberTabKeys.Info){
navigate(PATHS.businessMember.info);
}
else if(tab === BusinessMemberTabKeys.RegistrationStatus){
navigate(PATHS.businessMember.registrationStatus);
}
}
};
return(
<>
<div className="subTab">
<button
className={`subtab-btn ${(activeTab === BusinessMemberTabKeys.Info)? 'active': ''}` }
onClick={ () => onClickToNavigation(BusinessMemberTabKeys.Info) }
>가맹점 정보</button>
<button
className={`subtab-btn ${(activeTab === BusinessMemberTabKeys.RegistrationStatus)? 'active': ''}` }
onClick={ () => onClickToNavigation(BusinessMemberTabKeys.RegistrationStatus) }
>등록현황</button>
</div>
</>
);
};

23
src/entities/business-member/ui/info-arrow.tsx
View File

@@ -1,23 +0,0 @@
import { useEffect, useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { InfoArrowProps } from '../model/types';
export const InfoArrow = ({ show }: InfoArrowProps) => {
const [altMsg, setAltMsg] = useState<'접기' | '펼치기'>('접기');
const [className, setClassName] = useState<string>('ic20 rot-180');
useEffect(() => {
setAltMsg((show)? '접기': '펼치기');
setClassName(`ic20 ${(show)? 'rot-180': ''}`);
}, [show]);
return (
<>
<img
className={ className }
src={ IMAGE_ROOT + '/select_arrow.svg' }
alt={ altMsg }
/>
</>
);
};

36
src/entities/business-member/ui/info-basic-info.tsx
View File

@@ -1,36 +0,0 @@
import { InfoProps } from '../model/types';
export const InfoBasicInfo = ({
InfoBasicInfo
}: InfoProps) => {
return (
<>
<div className="section">
<div className="section-title">기본정보</div>
<ul className="kv-list">
<li className="kv-row">
<span className="k">상호</span>
<span className="v">나이스테스트</span>
</li>
<li className="kv-row">
<span className="k">사업자번호</span>
<span className="v">123-45-16798</span>
</li>
<li className="kv-row">
<span className="k">사업자속성</span>
<span className="v">일반</span>
</li>
<li className="kv-row">
<span className="k">업종</span>
<span className="v">식품</span>
</li>
<li className="kv-row">
<span className="k">업태</span>
<span className="v">식품</span>
</li>
</ul>
</div>
</>
);
};

23
src/entities/business-member/ui/info-company-info.tsx
View File

@@ -1,23 +0,0 @@
import { InfoProps } from '../model/types';
export const InfoCompanyInfo = ({
InfoCompanyInfo
}: InfoProps) => {
return (
<>
<div className="section">
<ul className="kv-list">
<li className="kv-row">
<span className="k">사업장주소</span>
<span className="v">서울특별시 마포구 마포대로 217(아현동)</span>
</li>
<li className="kv-row">
<span className="k">홈페이지 주소</span>
<span className="v">https://adm.dev-nicepay.co.kr:8011</span>
</li>
</ul>
</div>
</>
);
};

53
src/entities/business-member/ui/info-contract-manager.tsx
View File

@@ -1,53 +0,0 @@
import { motion } from 'framer-motion';
import { BusinessMemberInfoKeys, InfoProps } from '../model/types';
import { InfoArrow } from './info-arrow';
export const InfoContractManager = ({
infoContractManager,
show,
onClickToShowInfo
}: InfoProps) => {
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(BusinessMemberInfoKeys.InfoContractManager);
}
};
return (
<>
<div className="section">
<div className="section-title"
onClick={ () => onClickToSetShowInfo() }
>
계약 담당자 <InfoArrow show={ show }></InfoArrow>
</div>
<motion.ul
className="kv-list"
initial="hidden"
animate={ (show)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
>
<li className="kv-row">
<span className="k">김테스트</span>
<span className="v"></span>
</li>
<li className="kv-row">
<span className="k">010-1234-****</span>
<span className="v"></span>
</li>
<li className="kv-row">
<span className="k">testkim@nicepay.co.kr</span>
<span className="v"></span>
</li>
</motion.ul>
</div>
</>
);
};

27
src/entities/business-member/ui/info-owner-info.tsx
View File

@@ -1,27 +0,0 @@
import { InfoProps } from '../model/types';
export const InfoOwnerInfo = ({
InfoOwnerInfo
}: InfoProps) => {
return (
<>
<div className="section">
<ul className="kv-list">
<li className="kv-row">
<span className="k">대표자명</span>
<span className="v">김테스트</span>
</li>
<li className="kv-row">
<span className="k">대표 연락처</span>
<span className="v">010-1234-1234</span>
</li>
<li className="kv-row">
<span className="k">대표 이메일</span>
<span className="v">testkim@nicepay.co.kr</span>
</li>
</ul>
</div>
</>
);
};

53
src/entities/business-member/ui/info-settlement-account.tsx
View File

@@ -1,53 +0,0 @@
import { motion } from 'framer-motion';
import { BusinessMemberInfoKeys, InfoProps } from '../model/types';
import { InfoArrow } from './info-arrow';
export const InfoSettlementAccount = ({
infoSettlementAccount,
show,
onClickToShowInfo
}: InfoProps) => {
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(BusinessMemberInfoKeys.InfoSettlementAccount);
}
};
return (
<>
<div className="section">
<div className="section-title"
onClick={ () => onClickToSetShowInfo() }
>
정산계좌 <InfoArrow show={ show }></InfoArrow>
</div>
<motion.ul
className="kv-list"
initial="hidden"
animate={ (show)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
>
<li className="kv-row">
<span className="k">은행</span>
<span className="v">신한은행</span>
</li>
<li className="kv-row">
<span className="k">계좌번호</span>
<span className="v">123-45-16798</span>
</li>
<li className="kv-row">
<span className="k">예금주</span>
<span className="v">김테스트</span>
</li>
</motion.ul>
</div>
</>
);
};

53
src/entities/business-member/ui/info-settlement-manager.tsx
View File

@@ -1,53 +0,0 @@
import { motion } from 'framer-motion';
import { BusinessMemberInfoKeys, InfoProps } from '../model/types';
import { InfoArrow } from './info-arrow';
export const InfoSettlementManager = ({
infoSettlementManager,
show,
onClickToShowInfo
}: InfoProps) => {
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(BusinessMemberInfoKeys.InfoSettlementManager);
}
};
return (
<>
<div className="section">
<div className="section-title"
onClick={ () => onClickToSetShowInfo() }
>
정산 담당자 <InfoArrow show={ show }></InfoArrow>
</div>
<motion.ul
className="kv-list"
initial="hidden"
animate={ (show)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
>
<li className="kv-row">
<span className="k">김테스트</span>
<span className="v"></span>
</li>
<li className="kv-row">
<span className="k">010-1234-****</span>
<span className="v"></span>
</li>
<li className="kv-row">
<span className="k">testkim@nicepay.co.kr</span>
<span className="v"></span>
</li>
</motion.ul>
</div>
</>
);
};

53
src/entities/business-member/ui/info-technical-manager.tsx
View File

@@ -1,53 +0,0 @@
import { motion } from 'framer-motion';
import { BusinessMemberInfoKeys, InfoProps } from '../model/types';
import { InfoArrow } from './info-arrow';
export const InfoTechnicalManager = ({
infoTechnicalManager,
show,
onClickToShowInfo
}: InfoProps) => {
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(BusinessMemberInfoKeys.InfoTechnicalManager);
}
};
return (
<>
<div className="section">
<div className="section-title"
onClick={ () => onClickToSetShowInfo() }
>
기술 담당자 <InfoArrow show={ show }></InfoArrow>
</div>
<motion.ul
className="kv-list"
initial="hidden"
animate={ (show)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
>
<li className="kv-row">
<span className="k">김테스트</span>
<span className="v"></span>
</li>
<li className="kv-row">
<span className="k">010-1234-****</span>
<span className="v"></span>
</li>
<li className="kv-row">
<span className="k">testkim@nicepay.co.kr</span>
<span className="v"></span>
</li>
</motion.ul>
</div>
</>
);
};

121
src/entities/business-member/ui/info-wrap.tsx
View File

@@ -1,121 +0,0 @@
import { useEffect, useState } from 'react';
import { useBusinessMemberInfoMutation } from '../api/use-business-member-info-mutation';
import { InfoBasicInfo } from './info-basic-info';
import { InfoOwnerInfo } from './info-owner-info';
import { InfoCompanyInfo } from './info-company-info';
import { InfoContractManager } from './info-contract-manager';
import { InfoTechnicalManager } from './info-technical-manager';
import { InfoSettlementManager } from './info-settlement-manager';
import { InfoSettlementAccount } from './info-settlement-account';
import {
BusinessMemberInfoParams,
BusinessMemberInfoResponse,
InfoContractManagerProps,
InfoTechnicalManagerProps,
InfoSettlementManagerProps,
InfoSettlementAccountProps,
BusinessMemberInfoKeys
} from '../model/types';
export const InfoWrap = () => {
const [infoContractManager, setInfoContractManager] = useState<InfoContractManagerProps>();
const [infoTechnicalManager, setInfoTechnicalManager] = useState<InfoTechnicalManagerProps>();
const [infoSettlementManager, setInfoSettlementManager] = useState<InfoSettlementManagerProps>();
const [infoSettlementAccount, setInfoSettlementAccount] = useState<InfoSettlementAccountProps>();
const [showInfoContractManager, setShowInfoContractManager] = useState<boolean>(false);
const [showInfoTechnicalManager, setShowInfoTechnicalManager] = useState<boolean>(false);
const [showInfoSettlementManager, setShowInfoSettlementManager] = useState<boolean>(false);
const [showInfoSettlementAccount, setShowInfoSettlemenAccount] = useState<boolean>(false);
const { mutateAsync: businessMemberInfo } = useBusinessMemberInfoMutation();
const callInfo = () => {
let businessMemberInfoParams: BusinessMemberInfoParams = {
svcCd: 'st',
};
businessMemberInfo(businessMemberInfoParams).then((rs: BusinessMemberInfoResponse) => {
setInfoContractManager(rs.infoContractManager);
setInfoTechnicalManager(rs.infoTechnicalManager);
setInfoSettlementManager(rs.infoSettlementManager);
setInfoSettlementAccount(rs.infoSettlementAccount);
});
};
const onClickToShowInfo = (info: BusinessMemberInfoKeys) => {
if(info === BusinessMemberInfoKeys.InfoContractManager){
setShowInfoContractManager(!showInfoContractManager);
}
else if(info === BusinessMemberInfoKeys.InfoTechnicalManager){
setShowInfoTechnicalManager(!showInfoTechnicalManager);
}
else if(info === BusinessMemberInfoKeys.InfoSettlementManager){
setShowInfoSettlementManager(!showInfoSettlementManager);
}
else if(info === BusinessMemberInfoKeys.InfoSettlementAccount){
setShowInfoSettlemenAccount(!showInfoSettlementAccount);
}
};
useEffect(() => {
callInfo();
}, []);
return (
<>
<div className="input-wrapper top-select mt-30">
<select>
<option value="1">nicetest00g</option>
<option value="2">nicetest00g</option>
<option value="3">nicetest00g</option>
</select>
</div>
<div className="merchant-info">
<InfoBasicInfo></InfoBasicInfo>
<div className="info-divider mb-16"></div>
<InfoOwnerInfo></InfoOwnerInfo>
<div className="info-divider mb-16"></div>
<InfoCompanyInfo></InfoCompanyInfo>
<div className="info-divider mb-16"></div>
<InfoContractManager
infoContractManager={ infoContractManager }
show={ showInfoContractManager }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></InfoContractManager>
<div className="info-divider mb-16"></div>
<InfoTechnicalManager
infoTechnicalManager={ infoTechnicalManager }
show={ showInfoTechnicalManager }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></InfoTechnicalManager>
<div className="info-divider mb-16"></div>
<InfoSettlementManager
infoSettlementManager={ infoSettlementManager }
show={ showInfoSettlementManager }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></InfoSettlementManager>
<div className="info-divider mb-16"></div>
<InfoSettlementAccount
infoSettlementManager={ infoSettlementAccount }
show={ showInfoSettlementAccount }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></InfoSettlementAccount>
<div className="notice-bottom left-align">
<p className="notice-tip">※ 가맹점 정보는 앱에서 수정할 수 없습니다.<br/>PC 가맹점 관리자에서 설정해 주세요.</p>
</div>
</div>
</>
);
};

4
src/entities/common/model/types.ts
View File

@@ -178,6 +178,6 @@ export interface EmptyTokenAddSendCodeResponse {
authCode: string;
};
export interface DetailArrowProps {
show?: boolean;
export interface SectionArrowProps {
isOpen?: boolean;
};

12
src/entities/transaction/ui/detail-arrow.tsx → src/entities/common/ui/section-title-arrow.tsx
View File

@@ -2,17 +2,17 @@ import { useEffect, useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
AltMsgKeys,
DetailArrowProps
} from '@/entities/common/model/types';
SectionArrowProps
} from '../model/types';
export const DetailArrow = ({ show }: DetailArrowProps) => {
export const SectionTitleArrow = ({ isOpen }: SectionArrowProps) => {
const [altMsg, setAltMsg] = useState<AltMsgKeys>(AltMsgKeys.Fold);
const [className, setClassName] = useState<string>('ic20 rot-180');
useEffect(() => {
setAltMsg((show)? AltMsgKeys.Fold: AltMsgKeys.UnFold);
setClassName(`ic20 ${(show)? 'rot-180': ''}`);
}, [show]);
setAltMsg((isOpen)? AltMsgKeys.Fold: AltMsgKeys.UnFold);
setClassName(`ic20 ${(isOpen)? 'rot-180': ''}`);
}, [isOpen]);
return (
<>

29
src/entities/merchant/api/use-merchant-mid-mutation.tsx Normal file
View File

@@ -0,0 +1,29 @@
import axios from 'axios';
import { API_URL_MERCHANT } from '@/shared/api/api-url-merchant';
import { resultify } from '@/shared/lib/resultify';
import { CBDCAxiosError } from '@/shared/@types/error';
import {
MerchantMidParams,
MerchantMidResponse
} from '../model/types';
import {
useMutation,
UseMutationOptions
} from '@tanstack/react-query';
export const merchantMid = (params: MerchantMidParams) => {
return resultify(
axios.post<MerchantMidResponse>(API_URL_MERCHANT.merchantMid(params.mid), params),
);
};
export const useMerchantMidMutation = (options?: UseMutationOptions<MerchantMidResponse, CBDCAxiosError, MerchantMidParams>) => {
const mutation = useMutation<MerchantMidResponse, CBDCAxiosError, MerchantMidParams>({
...options,
mutationFn: (params: MerchantMidParams) => merchantMid(params),
});
return {
...mutation,
};
};

29
src/entities/merchant/api/use-merchant-mid-status-mutation.tsx Normal file
View File

@@ -0,0 +1,29 @@
import axios from 'axios';
import { API_URL_MERCHANT } from '@/shared/api/api-url-merchant';
import { resultify } from '@/shared/lib/resultify';
import { CBDCAxiosError } from '@/shared/@types/error';
import {
MerchantMidStatusParams,
MerchantMidStatusResponse
} from '../model/types';
import {
useMutation,
UseMutationOptions
} from '@tanstack/react-query';
export const merchantMidStatus = (params: MerchantMidStatusParams) => {
return resultify(
axios.post<MerchantMidStatusResponse>(API_URL_MERCHANT.merchantMidStatus(params.mid), params),
);
};
export const useMerchantMidStatusMutation = (options?: UseMutationOptions<MerchantMidStatusResponse, CBDCAxiosError, MerchantMidStatusParams>) => {
const mutation = useMutation<MerchantMidStatusResponse, CBDCAxiosError, MerchantMidStatusParams>({
...options,
mutationFn: (params: MerchantMidStatusParams) => merchantMidStatus(params),
});
return {
...mutation,
};
};

119
src/entities/merchant/model/types.ts Normal file
View File

@@ -0,0 +1,119 @@
export enum MerchantTabKeys {
Info = 'Info',
RegistrationStatus = 'RegistrationStatus',
};
export interface MerchantTabProps {
activeTab: MerchantTabKeys;
};
export enum ContractStatus {
RECEPTION_COMPLETED = 'RECEPTION_COMPLETED',
RECEPTION_INCOMPLETE = 'RECEPTION_INCOMPLETE',
};
export enum CardAuditStatus {
REQUEST_COMPLETED = 'REQUEST_COMPLETED',
SUPPLEMENT_REQUIRED = 'SUPPLEMENT_REQUIRED'
};
export enum UsageStatus {
AVAILABLE = 'AVAILABLE',
SUSPENDED = 'SUSPENDED'
};
export enum InitialRegistrationFeeStatus {
EXEMPT = 'EXEMPT',
NOT_REGISTERED = 'NOT_REGISTERED',
UNPAID = 'UNPAID',
PAID = 'PAID',
};
export enum GuaranteeInsuranceFeeStatus {
EXEMPT = 'EXEMPT',
NOT_REGISTERED = 'NOT_REGISTERED',
UNPAID = 'UNPAID',
PAID = 'PAID',
};
export enum CardCompanyName {
BC = 'BC',
KOOKMIN = 'KOOKMIN',
HANA = 'HANA',
SAMSUNG = 'SAMSUNG',
SHINHAN = 'SHINHAN',
HYUNDAI = 'HYUNDAI',
LOTTE = 'LOTTE',
NH = 'NH',
WOORI = 'WOORI'
};
export enum EscrowStatus {
ACTIVE = 'ACTIVE',
INACTIVE = 'INACTIVE'
};
export enum InfoWrapKeys {
Merchant = 'Merchant',
Technical = 'Technical',
Settlement = 'Settlement',
};
export interface MerchantMidParams {
mid: string;
};
export interface MerchantMidResponse {
memberCompanyId?: string;
businessCompanyName?: string;
businessRegistrationNumber?: string;
businessScaleTypeName?: string;
businessType?: string;
businessCategory?: string;
representativeName?: string;
telephoneNumber?: string;
email?: string;
businessAddress?: string;
url?: string;
merchantManager?: string;
merchantManagerTelephone?: string;
merchantManagerEmail?: string;
technicalManager?: string;
technicalManagerTelephone?: string;
technicalManagerEmail?: string;
settlementManager?: string;
settlementManagerTelephone?: string;
settlementManagerEmail?: string;
bankName?: string;
accountNumber?: string;
accountHolderName?: string;
};
export interface MerchantMidStatusParams {
mid: string;
};
export interface MerchantMidStatusResponse {
onlineInfomation: OnlineInfomation;
offlineInfomation: OfflineInfomation;
cardApplications: Array<CardApplications>;
escrow: Escrow;
};
export interface OnlineInfomation {
registrationDate: string;
businessRegistrationNumber: string;
companyName: string;
contractStatus: ContractStatus;
cardAuditStatus: CardAuditStatus;
insuranceAmount: string;
insuranceExpiryDate: string;
usageStatus: UsageStatus;
};
export interface OfflineInfomation {
registrationDate: string;
contractDocumentCount: number;
initialRegistrationFeeStatus: InitialRegistrationFeeStatus;
initialRegistrationFeeAmount: string;
guaranteeInsuranceFeeStatus: GuaranteeInsuranceFeeStatus;
guaranteeInsuranceFeeAmount: string;
};
export interface CardApplications {
cardCompanyName: CardCompanyName;
partnerServiceName: string;
statusName: string;
};
export interface Escrow {
companyName: string;
businessRegistrationNumber: string;
escrowStatus: EscrowStatus,
address: string;
merchantUrl: string;
serviceRegistrationNumber: string;
};

85
src/entities/merchant/ui/info-wrap.tsx Normal file
View File

@@ -0,0 +1,85 @@
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 {
InfoWrapKeys,
MerchantMidParams,
MerchantMidResponse
} from '../model/types';
export const InfoWrap = () => {
const [mid, setMid] = useState<string>('nictest001m');
const [data, setData] = useState<MerchantMidResponse>();
const [openChild, setOpenChild] = useState<InfoWrapKeys | null>(null);
const { mutateAsync: merchantMid } = useMerchantMidMutation();
const callInfo = () => {
let params: MerchantMidParams = {
mid: mid,
};
merchantMid(params).then((rs: MerchantMidResponse) => {
setData(rs);
});
};
useEffect(() => {
callInfo();
}, []);
return (
<>
<div className="input-wrapper top-select mt-30">
<select>
<option value="1">nicetest00g</option>
<option value="2">nicetest00g</option>
<option value="3">nicetest00g</option>
</select>
</div>
<div className="merchant-info">
<BusinessInfoWrap
data={ data }
></BusinessInfoWrap>
<div className="info-divider mb-16"></div>
<ManagerInfoWrap
type={ InfoWrapKeys.Merchant }
title='계약 담당자'
manager={ data?.merchantManager }
managerTelephone={ data?.merchantManagerTelephone }
managetEmail={ data?.merchantManagerEmail }
openChild={ openChild }
setOpenChild={ setOpenChild }
></ManagerInfoWrap>
<div className="info-divider mb-16"></div>
<ManagerInfoWrap
type={ InfoWrapKeys.Technical }
title='기술 담당자'
manager={ data?.technicalManager }
managerTelephone={ data?.technicalManagerTelephone }
managetEmail={ data?.technicalManagerEmail }
openChild={ openChild }
setOpenChild={ setOpenChild }
></ManagerInfoWrap>
<div className="info-divider mb-16"></div>
<ManagerInfoWrap
type={ InfoWrapKeys.Settlement }
title='정산 담당자'
manager={ data?.settlementManager }
managerTelephone={ data?.settlementManagerTelephone }
managetEmail={ data?.settlementManagerEmail }
openChild={ openChild }
setOpenChild={ setOpenChild }
></ManagerInfoWrap>
<div className="info-divider mb-16"></div>
<div className="notice-bottom left-align">
<p className="notice-tip">※ 가맹점 정보는 앱에서 수정할 수 없습니다.<br/>PC 가맹점 관리자에서 설정해 주세요.</p>
</div>
</div>
</>
);
};

70
src/entities/merchant/ui/info-wrap/business-info-wrap.tsx Normal file
View File

@@ -0,0 +1,70 @@
import { MerchantMidResponse } from '../../model/types';
export interface BusinessInfoWrapProps {
data?: MerchantMidResponse
};
export const BusinessInfoWrap = ({
data
}: BusinessInfoWrapProps) => {
return (
<>
<div className="section">
<div className="section-title">기본정보</div>
<ul className="kv-list">
<li className="kv-row">
<span className="k">상호</span>
<span className="v">{ data?.businessCompanyName }</span>
</li>
<li className="kv-row">
<span className="k">사업자번호</span>
<span className="v">{ data?.businessRegistrationNumber }</span>
</li>
<li className="kv-row">
<span className="k">사업자속성</span>
<span className="v">{ data?.businessScaleTypeName }</span>
</li>
<li className="kv-row">
<span className="k">업종</span>
<span className="v">{ data?.businessType }</span>
</li>
<li className="kv-row">
<span className="k">업태</span>
<span className="v">{ data?.businessCategory }</span>
</li>
</ul>
</div>
<div className="info-divider mb-16"></div>
<div className="section">
<ul className="kv-list">
<li className="kv-row">
<span className="k">대표자명</span>
<span className="v">{ data?.representativeName }</span>
</li>
<li className="kv-row">
<span className="k">대표 연락처</span>
<span className="v">{ data?.telephoneNumber }</span>
</li>
<li className="kv-row">
<span className="k">대표 이메일</span>
<span className="v">{ data?.email }</span>
</li>
</ul>
</div>
<div className="info-divider mb-16"></div>
<div className="section">
<ul className="kv-list">
<li className="kv-row">
<span className="k">사업장주소</span>
<span className="v">{ data?.businessAddress }</span>
</li>
<li className="kv-row">
<span className="k">홈페이지 주소</span>
<span className="v">{ data?.url }</span>
</li>
</ul>
</div>
</>
);
};

75
src/entities/merchant/ui/info-wrap/manager-info-wrap.tsx Normal file
View File

@@ -0,0 +1,75 @@
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoWrapKeys, MerchantMidResponse } from '../../model/types';
import SlideDown from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import { useEffect, useState } from 'react';
export interface ManagerInfoWrapProps {
type: InfoWrapKeys;
title?: string;
manager?: string;
managerTelephone?: string;
managetEmail?: string;
openChild: InfoWrapKeys | null;
setOpenChild: (openChild: InfoWrapKeys | null) => void;
};
export const ManagerInfoWrap = ({
type,
title,
manager,
managerTelephone,
managetEmail,
openChild,
setOpenChild
}: ManagerInfoWrapProps) => {
const [isOpen, setIsOpen] = useState<boolean>(false);
const opeSection = () => {
const staus = !isOpen;
setIsOpen(staus);
if(!!staus){
setOpenChild(type);
}
else {
setOpenChild(null)
}
};
useEffect(() => {
if(!!openChild && openChild !== type){
setIsOpen(false);
}
}, [openChild]);
return (
<>
<div className="section">
<div className="section-title"
onClick={ () => opeSection() }
>
{ title } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ isOpen &&
<ul className="kv-list">
<li className="kv-row">
<span className="k">{ manager }</span>
<span className="v"></span>
</li>
<li className="kv-row">
<span className="k">{ managerTelephone }</span>
<span className="v"></span>
</li>
<li className="kv-row">
<span className="k">{ managetEmail }</span>
<span className="v"></span>
</li>
</ul>
}
</SlideDown>
</div>
</>
);
};

37
src/entities/merchant/ui/merchant-tab.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import {
MerchantTabKeys,
MerchantTabProps
} from '../model/types';
export const MerchantTab = ({
activeTab
}: MerchantTabProps) => {
const { navigate } = useNavigate();
const onClickToNavigation = (tab: MerchantTabKeys) => {
if(activeTab !== tab){
if(tab === MerchantTabKeys.Info){
navigate(PATHS.merchant.info);
}
else if(tab === MerchantTabKeys.RegistrationStatus){
navigate(PATHS.merchant.registrationStatus);
}
}
};
return(
<>
<div className="subTab">
<button
className={`subtab-btn ${(activeTab === MerchantTabKeys.Info)? 'active': ''}` }
onClick={ () => onClickToNavigation(MerchantTabKeys.Info) }
>가맹점 정보</button>
<button
className={`subtab-btn ${(activeTab === MerchantTabKeys.RegistrationStatus)? 'active': ''}` }
onClick={ () => onClickToNavigation(MerchantTabKeys.RegistrationStatus) }
>등록현황</button>
</div>
</>
);
};

0
src/entities/business-member/ui/registration-status-wrap.tsx → src/entities/merchant/ui/registration-status-wrap.tsx
View File

2
src/entities/payment/ui/data-notification-notify-content.tsx
View File

@@ -48,7 +48,7 @@ export const DataNotificationNotifyContent = ({
if(!!openChild && openChild !== type){
setIsOpen(false);
}
}, [openChild])
}, [openChild]);
return (
<>

4
src/entities/settlement/model/types.ts
View File

@@ -189,11 +189,11 @@ export interface AmountInfoWrapProps {
};
export interface SettlementInfoWrapProps {
settlementInfo?: SettlementInfo;
show: boolean;
isOpen: boolean;
onClickToShowInfo: (infoWrapKey: InfoWrapKeys) => void;
};
export interface TransactionInfoWrapProps {
transactionInfo?: TransactionInfo;
show: boolean;
isOpen: boolean;
onClickToShowInfo: (infoWrapKey: InfoWrapKeys) => void;
};

26
src/entities/settlement/ui/detail-arrow.tsx
View File

@@ -1,26 +0,0 @@
import { useEffect, useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
AltMsgKeys,
DetailArrowProps
} from '@/entities/common/model/types';
export const DetailArrow = ({ show }: DetailArrowProps) => {
const [altMsg, setAltMsg] = useState<AltMsgKeys>(AltMsgKeys.Fold);
const [className, setClassName] = useState<string>('ic20 rot-180');
useEffect(() => {
setAltMsg((show)? AltMsgKeys.Fold: AltMsgKeys.UnFold);
setClassName(`ic20 ${(show)? 'rot-180': ''}`);
}, [show]);
return (
<>
<img
className={ className }
src={ IMAGE_ROOT + '/select_arrow.svg' }
alt={ altMsg }
/>
</>
);
};

6
src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
View File

@@ -70,6 +70,12 @@ export const AmountInfoWrap = ({
</li>
</ul>
}
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
<ul className="kv-list">
</ul>
}
</div>
</>
);

10
src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx
View File

@@ -1,17 +1,17 @@
import moment from 'moment';
import { NumericFormat } from 'react-number-format';
import { DetailArrow } from '../detail-arrow';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import SlideDown from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import {
InfoWrapKeys,
SettlementInfoWrapProps,
SettlementPeriodType
} from '@/entities/settlement/model/types';
} from '../../model/types';
export const SettlementInfoWrap = ({
settlementInfo,
show,
isOpen,
onClickToShowInfo
}: SettlementInfoWrapProps) => {
@@ -28,10 +28,10 @@ export const SettlementInfoWrap = ({
className="section-title"
onClick={ () => onClickToSetShowInfo() }
>
정산 정보 <DetailArrow show={ show }></DetailArrow>
정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ show &&
{ isOpen &&
<ul className="kv-list">
<li className="kv-row">
<span className="k">MID</span>

8
src/entities/settlement/ui/info-wrap/transaction-info-wrap.tsx
View File

@@ -1,5 +1,5 @@
import moment from 'moment';
import { DetailArrow } from '../detail-arrow';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import SlideDown from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import {
@@ -9,7 +9,7 @@ import {
export const TransactionInfoWrap = ({
transactionInfo,
show,
isOpen,
onClickToShowInfo
}: TransactionInfoWrapProps) => {
@@ -26,10 +26,10 @@ export const TransactionInfoWrap = ({
className="section-title"
onClick={ () => onClickToSetShowInfo() }
>
거래 상세 정보 <DetailArrow show={ show }></DetailArrow>
거래 상세 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ show &&
{ isOpen &&
<ul className="kv-list">
<li className="kv-row">
<span className="k">주문번호</span>

4
src/entities/transaction/model/types.ts
View File

@@ -461,11 +461,11 @@ export interface BillingDetailResponse extends BillingInfo {
export interface DetailInfoProps extends DetailResponse {
transactionCategory?: TransactionCategory;
show?: boolean;
isOpen?: boolean;
tid?: string;
serviceCode?: string;
purposeType?: CashReceiptPurposeType;
onClickToShowInfo?: (info: InfoWrapKeys) => void;
onClickToOpenInfo?: (info: InfoWrapKeys) => void;
}
export interface DownloadConfirmationParams {

22
src/entities/transaction/ui/info-wrap/amount-info-wrap.tsx
View File

@@ -1,6 +1,6 @@
import moment from 'moment';
import { NumericFormat } from 'react-number-format';
import { DetailArrow } from '../detail-arrow';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import { SlideDown } from 'react-slidedown';
@@ -9,10 +9,10 @@ import 'react-slidedown/lib/slidedown.css';
export const AmountInfoWrap = ({
transactionCategory,
amountInfo,
show,
isOpen,
tid,
serviceCode,
onClickToShowInfo
onClickToOpenInfo
}: DetailInfoProps) => {
const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
@@ -34,7 +34,7 @@ export const AmountInfoWrap = ({
};
const showTop = ['01', '02', '03', '26'];
const showSubItems: Record<string, Array<string>> = {
const openSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['mid', 'cardAmount', 'pointAmount',
'couponAmount', 'escrowFee', 'kakaoMoney',
@@ -65,9 +65,9 @@ export const AmountInfoWrap = ({
let newAmountInfo: Record<string, any> | undefined = amountInfo;
const subLi = () => {
let rs = [];
if(!!newAmountInfo && !!serviceCode && !!showSubItems[serviceCode]){
for(let i=0;i<showSubItems[serviceCode].length;i++){
let k = showSubItems[serviceCode][i];
if(!!newAmountInfo && !!serviceCode && !!openSubItems[serviceCode]){
for(let i=0;i<openSubItems[serviceCode].length;i++){
let k = openSubItems[serviceCode][i];
if(!!k){
rs.push(
<li
@@ -99,8 +99,8 @@ export const AmountInfoWrap = ({
}
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(InfoWrapKeys.Amount);
if(!!onClickToOpenInfo){
onClickToOpenInfo(InfoWrapKeys.Amount);
}
};
@@ -131,12 +131,12 @@ export const AmountInfoWrap = ({
type="button"
onClick={ () => onClickToSetShowInfo() }
>
금액상세 <DetailArrow show={ show }></DetailArrow>
금액상세 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</button>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ !!show &&
{ !!isOpen &&
<div className="amount-expand">
<ul className="amount-list">
{ subLi() }

18
src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx
View File

@@ -1,5 +1,5 @@
import moment from 'moment';
import { DetailArrow } from '../detail-arrow';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
@@ -7,13 +7,13 @@ import 'react-slidedown/lib/slidedown.css';
export const DetailInfoWrap = ({
transactionCategory,
detailInfo,
show,
onClickToShowInfo
isOpen,
onClickToOpenInfo
}: DetailInfoProps) => {
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(InfoWrapKeys.Issue);
const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){
onClickToOpenInfo(InfoWrapKeys.Issue);
}
};
@@ -22,12 +22,12 @@ export const DetailInfoWrap = ({
<div className="txn-section">
<div
className="section-title with-toggle"
onClick={ () => onClickToSetShowInfo() }
onClick={ () => onClickToSetOpenInfo() }
>
상세 정보 <DetailArrow show={ show }></DetailArrow>
상세 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ !!show &&
{ !!isOpen &&
<ul className="kv-list">
<li className="kv-row">
<span className="k">취소일자</span>

18
src/entities/transaction/ui/info-wrap/escrow-info-wrap.tsx
View File

@@ -1,5 +1,5 @@
import moment from 'moment';
import { DetailArrow } from '../detail-arrow';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
@@ -7,13 +7,13 @@ import 'react-slidedown/lib/slidedown.css';
export const EscrowInfoWrap = ({
transactionCategory,
escrowInfo,
show,
onClickToShowInfo
isOpen,
onClickToOpenInfo
}: DetailInfoProps) => {
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(InfoWrapKeys.Escrow);
const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){
onClickToOpenInfo(InfoWrapKeys.Escrow);
}
};
@@ -22,12 +22,12 @@ export const EscrowInfoWrap = ({
<div className="txn-section">
<div
className="section-title with-toggle"
onClick={ () => onClickToSetShowInfo() }
onClick={ () => onClickToSetOpenInfo() }
>
정산 정보 <DetailArrow show={ show }></DetailArrow>
정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ !!show &&
{ !!isOpen &&
<ul className="kv-list">
<li className="kv-row">
<span className="k">배송상태</span>

8
src/entities/transaction/ui/info-wrap/important-info-wrap.tsx
View File

@@ -20,7 +20,7 @@ export const ImportantInfoWrap = ({
productName: {name: '상품명', type: 'string'}
};
const showSubItems: Record<string, Array<string>> = {
const openSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
'approvalDate', 'cancelDate', 'productName'],
@@ -57,9 +57,9 @@ export const ImportantInfoWrap = ({
const subLi = () => {
let rs = [];
if(!!newImportantInfo && !!serviceCode && !!showSubItems[serviceCode]){
for(let i=0;i<showSubItems[serviceCode].length;i++){
let k = showSubItems[serviceCode][i];
if(!!newImportantInfo && !!serviceCode && !!openSubItems[serviceCode]){
for(let i=0;i<openSubItems[serviceCode].length;i++){
let k = openSubItems[serviceCode][i];
if(!!k){
rs.push(
<li

2
src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx
View File

@@ -1,4 +1,4 @@
import { DetailArrow } from '../detail-arrow';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import moment from 'moment';

26
src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx
View File

@@ -1,6 +1,6 @@
import moment from 'moment';
import { NumericFormat } from 'react-number-format';
import { DetailArrow } from '../detail-arrow';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
@@ -9,8 +9,8 @@ export const PartCancelInfoWrap = ({
transactionCategory,
partCancelInfo,
serviceCode,
show,
onClickToShowInfo
isOpen,
onClickToOpenInfo
}: DetailInfoProps) => {
const subItems: Record<string, Record<string, string>> = {
@@ -21,7 +21,7 @@ export const PartCancelInfoWrap = ({
remainingAmount: {name: (serviceCode === '05')? '재승인 금액': '부분취소 후 잔액', type: 'number'},
};
const showSubItems: Record<string, Array<string>> = {
const openSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['originalTid', 'originalAmount', 'partCancelTid',
'partCancelAmount', 'remainingAmount'],
@@ -58,9 +58,9 @@ export const PartCancelInfoWrap = ({
const subLi = () => {
let rs = [];
if(!!newPartCancelInfo && !!serviceCode && !!showSubItems[serviceCode]){
for(let i=0;i<showSubItems[serviceCode].length;i++){
let k = showSubItems[serviceCode][i];
if(!!newPartCancelInfo && !!serviceCode && !!openSubItems[serviceCode]){
for(let i=0;i<openSubItems[serviceCode].length;i++){
let k = openSubItems[serviceCode][i];
if(!!k){
rs.push(
<li
@@ -92,9 +92,9 @@ export const PartCancelInfoWrap = ({
return rs;
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(InfoWrapKeys.PartCancel);
const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){
onClickToOpenInfo(InfoWrapKeys.PartCancel);
}
};
@@ -103,12 +103,12 @@ export const PartCancelInfoWrap = ({
<div className="txn-section">
<div
className="section-title with-toggle"
onClick={ () => onClickToSetShowInfo() }
onClick={ () => onClickToSetOpenInfo() }
>
부분취소 정보 <DetailArrow show={ show }></DetailArrow>
부분취소 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ !!show &&
{ !!isOpen &&
<ul className="kv-list">
{ subLi() }
</ul>

27
src/entities/transaction/ui/info-wrap/payment-info-wrap.tsx
View File

@@ -1,6 +1,5 @@
import moment from 'moment';
import { motion } from 'framer-motion';
import { DetailArrow } from '../detail-arrow';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
import { NumericFormat } from 'react-number-format';
import { SlideDown } from 'react-slidedown';
@@ -10,8 +9,8 @@ export const PaymentInfoWrap = ({
transactionCategory,
paymentInfo,
serviceCode,
show,
onClickToShowInfo
isOpen,
onClickToOpenInfo
}: DetailInfoProps) => {
const subItems: Record<string, Record<string, string>> = {
@@ -49,7 +48,7 @@ export const PaymentInfoWrap = ({
culturelandId: {name: '컬처랜드ID', type: 'string'},
};
const showSubItems: Record<string, Array<string>> = {
const openSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['approvalAcquire', 'approvalReturn', 'approvalReAcquire',
'approvalVAN', 'cancelAcquire', 'cancelReturn', 'cancelReAcquire',
@@ -82,9 +81,9 @@ export const PaymentInfoWrap = ({
const subLi = () => {
let rs = [];
if(!!newPaymentInfo && !!serviceCode && !!showSubItems[serviceCode]){
for(let i=0;i<showSubItems[serviceCode].length;i++){
let k = showSubItems[serviceCode][i];
if(!!newPaymentInfo && !!serviceCode && !!openSubItems[serviceCode]){
for(let i=0;i<openSubItems[serviceCode].length;i++){
let k = openSubItems[serviceCode][i];
if(!!k){
rs.push(
<li
@@ -116,9 +115,9 @@ export const PaymentInfoWrap = ({
return rs;
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(InfoWrapKeys.Payment);
const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){
onClickToOpenInfo(InfoWrapKeys.Payment);
}
};
@@ -127,12 +126,12 @@ export const PaymentInfoWrap = ({
<div className="txn-section">
<div
className="section-title with-toggle"
onClick={ () => onClickToSetShowInfo() }
onClick={ () => onClickToSetOpenInfo() }
>
결제 정보 <DetailArrow show={ show }></DetailArrow>
결제 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ !!show &&
{ !!isOpen &&
<ul className="kv-list">
{ (transactionCategory === TransactionCategory.AllTransaction) &&
subLi()

26
src/entities/transaction/ui/info-wrap/settlement-info-wrap.tsx
View File

@@ -1,6 +1,6 @@
import moment from 'moment';
import { NumericFormat } from 'react-number-format';
import { DetailArrow } from '../detail-arrow';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
@@ -9,8 +9,8 @@ export const SettlementInfoWrap = ({
transactionCategory,
settlementInfo,
serviceCode,
show,
onClickToShowInfo
isOpen,
onClickToOpenInfo
}: DetailInfoProps) => {
const subItems: Record<string, Record<string, string>> = {
@@ -20,7 +20,7 @@ export const SettlementInfoWrap = ({
cancelSettleAmount: {name: '취소정산금액', type: 'number'},
};
const showSubItems: Record<string, Array<string>> = {
const openSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['approvalSettleDate', 'approvalSettleAmount',
'cancelSettleDate', 'cancelSettleAmount'],
@@ -57,9 +57,9 @@ export const SettlementInfoWrap = ({
const subLi = () => {
let rs = [];
if(!!newSettlementInfo && !!serviceCode && !!showSubItems[serviceCode]){
for(let i=0;i<showSubItems[serviceCode].length;i++){
let k = showSubItems[serviceCode][i];
if(!!newSettlementInfo && !!serviceCode && !!openSubItems[serviceCode]){
for(let i=0;i<openSubItems[serviceCode].length;i++){
let k = openSubItems[serviceCode][i];
if(!!k){
rs.push(
<li
@@ -91,9 +91,9 @@ export const SettlementInfoWrap = ({
return rs;
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(InfoWrapKeys.Settlement);
const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){
onClickToOpenInfo(InfoWrapKeys.Settlement);
}
};
@@ -102,12 +102,12 @@ export const SettlementInfoWrap = ({
<div className="txn-section">
<div
className="section-title with-toggle"
onClick={ () => onClickToSetShowInfo() }
onClick={ () => onClickToSetOpenInfo() }
>
정산 정보 <DetailArrow show={ show }></DetailArrow>
정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ !!show &&
{ !!isOpen &&
<ul className="kv-list">
{ subLi() }
</ul>

28
src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx
View File

@@ -1,5 +1,5 @@
import moment from 'moment';
import { DetailArrow } from '../detail-arrow';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
import { NumericFormat } from 'react-number-format';
import { SlideDown } from 'react-slidedown';
@@ -9,8 +9,8 @@ export const TransactionInfoWrap = ({
transactionCategory,
transactionInfo,
serviceCode,
show,
onClickToShowInfo
isOpen,
onClickToOpenInfo
}: DetailInfoProps) => {
const subItems: Record<string, Record<string, string>> = {
@@ -23,7 +23,7 @@ export const TransactionInfoWrap = ({
cashReceiptIssue: {name: '현금영수증발행', type: 'string'},
};
const showSubItems: Record<string, Array<string>> = {
const openSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['buyerName', 'email', 'phoneNumber', 'cancelReason',
'cancelRequestor', 'partialCancel'],
@@ -60,9 +60,9 @@ export const TransactionInfoWrap = ({
const subLi = () => {
let rs = [];
if(!!newTransactionInfo && !!serviceCode && !!showSubItems[serviceCode]){
for(let i=0;i<showSubItems[serviceCode].length;i++){
let k = showSubItems[serviceCode][i];
if(!!newTransactionInfo && !!serviceCode && !!openSubItems[serviceCode]){
for(let i=0;i<openSubItems[serviceCode].length;i++){
let k = openSubItems[serviceCode][i];
if(!!k){
rs.push(
<li
@@ -94,23 +94,23 @@ export const TransactionInfoWrap = ({
return rs;
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(InfoWrapKeys.Transaction);
const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){
onClickToOpenInfo(InfoWrapKeys.Transaction);
}
};
return (
<>
<div className="txn-section" onClick={ () => onClickToSetShowInfo() }>
<div className="txn-section">
<div
className="section-title with-toggle"
onClick={ () => onClickToSetShowInfo() }
onClick={ () => onClickToSetOpenInfo() }
>
거래 정보 <DetailArrow show={ show }></DetailArrow>
거래 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ !!show &&
{ !!isOpen &&
<ul className="kv-list">
{ (transactionCategory === TransactionCategory.AllTransaction) &&
subLi()