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

Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

Browse Source
This commit is contained in:
Jay Sheen
2025-09-11 18:07:35 +09:00
parent ba77a8b58a 84288188dc
commit e53300f4a9
55 changed files with 1997 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/images/ico_del_minus.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="36" rx="6" fill="#F5F5F5"/>
<g clip-path="url(#clip0_2269_6765)">
<rect x="9" y="17" width="18" height="2" rx="1" fill="#999999"/>
</g>
<defs>
<clipPath id="clip0_2269_6765">
<rect x="8" y="8" width="20" height="20" rx="10" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B

11
public/images/ico_menu_plus_no.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2269_6819)">
<rect x="1" y="9" width="18" height="2" rx="1" fill="#999999"/>
<rect x="11" y="1" width="18" height="2" rx="1" transform="rotate(90 11 1)" fill="#999999"/>
</g>
<defs>
<clipPath id="clip0_2269_6819">
<rect width="20" height="20" rx="10" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 414 B

13
public/images/icon_ing11.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="80" height="80" rx="40" fill="#F4F8FF"/>
<path d="M62.9999 26V21.8988C62.9999 19.7455 61.2543 18 59.1011 18H54.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.9999 26V21.8988C16.9999 19.7455 18.7454 18 20.8987 18H24.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M62.9999 54V58.1012C62.9999 60.2545 61.2543 62 59.1011 62H54.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.9999 54V58.1012C16.9999 60.2545 18.7454 62 20.8987 62H24.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="22.9999" y="23" width="34" height="34" rx="4.36364" fill="#86CBFF"/>
<path d="M35.1083 45.9883C36.8146 47.6106 40.7305 49.2609 45.1779 45.9883" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="31.4999" y="33.5" width="1" height="2.5" rx="0.5" stroke="white"/>
<rect x="48.4999" y="33.5" width="1" height="3" rx="0.5" stroke="white"/>
<path d="M40.2273 34.5762V40.7018C40.2273 41.6249 39.8098 42.3507 38.3182 42.5164" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="21.4544" y1="40.0009" x2="58.5453" y2="40.0009" stroke="#F05D92" stroke-width="2.18182" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
public/images/sample_banner_0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
public/images/sample_banner_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

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

@@ -1,3 +1,7 @@
export enum SuccessResult {
SUCCESS = 'SUCCESS',
FAIL = 'FAIL'
};
export interface DefaultRequestPagination {
cursor: string;
size: number;

29
src/entities/transaction/api/use-billing-charge-mutation.ts Normal file
View File

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

8
src/entities/transaction/api/use-billing-detail-mutation.ts
View File

@@ -4,7 +4,7 @@ import { resultify } from '@/shared/lib/resultify';
import { CBDCAxiosError } from '@/shared/@types/error';
import {
BillingDetailParams,
DetailResponse
BillingDetailResponse
} from '../model/types';
import {
useMutation,
@@ -13,12 +13,12 @@ import {
export const billingDetail = (params: BillingDetailParams) => {
return resultify(
axios.post<DetailResponse>(API_URL.billingDetail(), params),
axios.post<BillingDetailResponse>(API_URL.billingDetail(), params),
);
};
export const useBillingDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, BillingDetailParams>) => {
const mutation = useMutation<DetailResponse, CBDCAxiosError, BillingDetailParams>({
export const useBillingDetailMutation = (options?: UseMutationOptions<BillingDetailResponse, CBDCAxiosError, BillingDetailParams>) => {
const mutation = useMutation<BillingDetailResponse, CBDCAxiosError, BillingDetailParams>({
...options,
mutationFn: (params: BillingDetailParams) => billingDetail(params),
});

29
src/entities/transaction/api/use-cash-receipt-manual-issue.ts Normal file
View File

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

29
src/entities/transaction/api/use-cash-receipt-purpose-update.ts Normal file
View File

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

29
src/entities/transaction/api/use-escrow-mail-resend-mutation.ts Normal file
View File

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

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

@@ -1,4 +1,4 @@
import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
import { DefaulResponsePagination, DefaultRequestPagination, SuccessResult } from '@/entities/common/model/types';
export enum CancelTabKeys {
All = 'All',
@@ -33,11 +33,16 @@ export enum ProcessStep {
One = 'One',
Two = 'Two',
};
export enum CashReceiptPurpose {
ALL = 'ALL',
INCOME_DEDUCTION = 'INCOME_DEDUCTION',
EXPENSE_PROOF = 'EXPENSE_PROOF',
};
export interface SortOptionsBoxProps {
sortBy: SortByKeys;
onCliCkToSort: (sortBy: SortByKeys) => void;
};
export interface ListItemProps extends ListItem{
export interface ListItemProps extends AllTransactionListItem, CashReceiptListItem, EscrowListItem, BillingListItem {
transactionCategory?: TransactionCategory;
};
export interface ListDateGroupProps {
@@ -61,10 +66,8 @@ export interface BillingListProps {
transactionCategory: TransactionCategory;
listItems: Record<string, Array<ListItemProps>>
};
export interface ListItem {
export interface AllTransactionListItem {
tid?: string;
issueNumber?: number;
billKey?: string;
mid?: string;
stateDate?: string;
stateCode?: string;
@@ -75,11 +78,35 @@ export interface ListItem {
serviceDetailName?: string;
goodsAmount?: number;
};
export interface CashReceiptListItem {
id?: number;
amount?: number;
customerName?: string;
issueNumber?: number;
issueStatus?: string;
paymentMethod?: string;
processResult?: string;
transactionDateTime?: string;
};
export interface EscrowListItem {
id?: number;
mid?: string;
transactionDateTime?: string;
customerName?: string;
issueNumber?: number;
transactionAmount?: number;
deliveryStatus?: string;
settlementStatus?: string;
cancelStatus?: string;
};
export interface BillingListItem extends BillingItem {
};
export interface BillingItem {
billKey: string;
tid: string;
orderNumber: string;
billKey?: string;
tid?: string;
orderNumber?: string;
approvalNumber?: string;
approvalDate?: string;
transactionDateTime?: string;
@@ -142,28 +169,28 @@ export interface CashReceiptListParams {
};
export interface EscrowListParams {
mid: string;
searchType: string;
searchKeyword: string;
startDate: string;
endDate: string;
deliveryStatus: string;
settlementStatus: string;
minAmount: number;
maxAmount: number;
pagination: DefaultRequestPagination;
mid?: string;
searchType?: string;
searchKeyword?: string;
startDate?: string;
endDate?: string;
deliveryStatus?: string;
settlementStatus?: string;
minAmount?: number;
maxAmount?: number;
pagination?: DefaultRequestPagination;
};
export interface BillingListParams {
mid: string;
searchType: string;
searchKeyword: string;
startDate: string;
endDate: string;
requestStatus: string;
processResult: string;
paymentMethod: string;
pagination: DefaultRequestPagination
mid?: string;
searchType?: string;
searchKeyword?: string;
startDate?: string;
endDate?: string;
requestStatus?: string;
processResult?: string;
paymentMethod?: string;
pagination?: DefaultRequestPagination
};
export interface AllTransactionDetailParams {
@@ -279,7 +306,7 @@ export interface IssueInfo {
approvalNumber?: number;
issueNumber?: number;
issueDateTime?: string;
purpose?: string;
purpose?: CashReceiptPurpose;
paymentMethod?: string;
productName?: string;
transmissionStatus?: string;
@@ -309,18 +336,7 @@ export interface EscrowInfo {
deliveryAddress: string;
};
export interface DetailResponse {
amountInfo?: AmountInfo;
importantInfo?: ImportantInfo;
paymentInfo?: PaymentInfo;
transactionInfo?: TransactionInfo;
settlementInfo?: SettlementInfo;
partCancelInfo?: PartCancelInfo;
issueInfo?: IssueInfo;
detailInfo?: DetailInfo;
escrowInfo?: EscrowInfo;
};
export interface BillingDetailResponse {
export interface BillingInfo {
billKey: string;
tid: string;
orderNumber: string;
@@ -333,11 +349,28 @@ export interface BillingDetailResponse {
buyerName: string;
}
export interface DetailResponse {
amountInfo?: AmountInfo;
importantInfo?: ImportantInfo;
paymentInfo?: PaymentInfo;
transactionInfo?: TransactionInfo;
settlementInfo?: SettlementInfo;
partCancelInfo?: PartCancelInfo;
issueInfo?: IssueInfo;
detailInfo?: DetailInfo;
escrowInfo?: EscrowInfo;
billingInfo?: BillingInfo;
};
export interface BillingDetailResponse extends BillingInfo {
}
export interface DetailInfoProps extends DetailResponse {
transactionCategory: TransactionCategory;
transactionCategory?: TransactionCategory;
show?: boolean;
tid?: string;
issueNumber?: number;
serviceCode?: string;
purpose?: CashReceiptPurpose;
onClickToShowInfo?: (info: InfoWrapKeys) => void;
}
export interface DetailArrowProps {
@@ -387,4 +420,53 @@ export interface AllTransactionCancelInfoResponse {
export interface FilterProps {
filterOn: boolean;
setFilterOn: (filterOn: boolean) => void;
}
};
export interface CashReceiptPurposeUpdateParams {
issueNumber: number;
newPurpose: string;
};
export interface CashReceiptPurposeUpdateResponse {
issueNumber: number;
beforePurposeType: CashReceiptPurpose;
afterPurposeType: CashReceiptPurpose;
updateDateTime: string;
};
export interface CashReceiptManualIssueParams {
businessNumber: string,
purpose: CashReceiptPurpose
productName: string,
buyerName: string,
issueNumber: string,
email: string,
phoneNumber: string,
supplyAmount: number,
vatAmount: number,
taxFreeAmount: number,
serviceCharge: number
};
export interface CashReceiptManualIssueResponse {
approvalNumber: number,
totalAmount: number,
issueDateTime: string,
issueResult: SuccessResult
};
export interface BillingChargeParams {
billKey: string;
productName: string;
productAmount: number | string;
orderNumber: string;
buyerName: string;
paymentRequestDate: string;
installmentMonth: string;
};
export interface BillingChargeResponse {
};
export interface EscrowMailResendParams {
orderNumber?: string;
tid?: string;
};
export interface EscrowMailResendResponse {
};

2
src/entities/transaction/ui/billing-list.tsx
View File

@@ -25,7 +25,7 @@ export const BillingList = ({
};
const onClickToNavigate = () => {
navigate(PATHS.transaction.billing.paymentRequest);
navigate(PATHS.transaction.billing.charge);
};
return (

54
src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx
View File

@@ -1,8 +1,42 @@
import { ChangeEvent } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { CashReceiptPurpose } from '../model/types';
export const CashReceiptHandWrittenIssuanceStep1 = () => {
export interface CashReceiptHandWrittenIssuanceStep1Props {
businessNumber?: string;
purpose?: CashReceiptPurpose;
productName?: string;
buyerName?: string;
issueNumber?: string;
email?: string;
phoneNumber?: string;
setBusinessNumber: (businessNumber: string) => void;
setPurpose: (purpose: CashReceiptPurpose) => void;
setProductName: (productName: string) => void;
setBuyerName: (buyerName: string) => void;
setIssueNumber: (issueNumber: string) => void;
setEmail: (email: string) => void;
setPhoneNumber: (phoneNumber: string) => void;
};
export const CashReceiptHandWrittenIssuanceStep1 = ({
businessNumber,
purpose,
productName,
buyerName,
issueNumber,
email,
phoneNumber,
setBusinessNumber,
setPurpose,
setProductName,
setBuyerName,
setIssueNumber,
setEmail,
setPhoneNumber
}: CashReceiptHandWrittenIssuanceStep1Props) => {
const { navigate } = useNavigate();
useSetOnBack(() => {
@@ -18,7 +52,7 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
<input
className="error"
type="text"
value="123456789"
value={ businessNumber }
disabled={ true }
/>
</div>
@@ -29,12 +63,14 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
<div className="issue-field">
<div className="seg-buttons">
<button
className="btn-40 btn-blue"
className={ `btn-40 ${(purpose === CashReceiptPurpose.INCOME_DEDUCTION)? 'btn-blue': 'btn-white'}` }
type="button"
onClick={ () => setPurpose(CashReceiptPurpose.INCOME_DEDUCTION) }
>소득공제</button>
<button
className="btn-40 btn-white"
className={ `btn-40 ${(purpose === CashReceiptPurpose.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` }
type="button"
onClick={ () => setPurpose(CashReceiptPurpose.EXPENSE_PROOF) }
>지출증빙</button>
</div>
</div>
@@ -45,6 +81,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
<input
type="text"
placeholder="상품명"
value={ productName }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
/>
</div>
</div>
@@ -54,6 +92,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
<input
type="text"
placeholder="구매자명"
value={ buyerName }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
/>
</div>
</div>
@@ -63,6 +103,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
<input
type="text"
placeholder="사업자번호 OR 휴대폰번호"
value={ issueNumber }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setIssueNumber(e.target.value) }
/>
</div>
</div>
@@ -72,6 +114,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
<input
type="email"
placeholder="TEST123@nicepay.com"
value={ email }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value) }
/>
</div>
</div>
@@ -81,6 +125,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
<input
type="tel"
placeholder="01012345678"
value={ phoneNumber }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
/>
</div>
</div>

41
src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx
View File

@@ -1,15 +1,37 @@
import { ChangeEvent } from 'react';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { ProcessStep } from '../model/types';
export interface CashReceiptHandWrittenIssuanceStep2Props {
setProcessStep: ((processStep: ProcessStep) => void);
setProcessStep: (processStep: ProcessStep) => void;
supplyAmount: number | string;
vatAmount: number | string;
taxFreeAmount: number | string;
serviceCharge: number | string;
setSupplyAmount: (supplyAmount: number | string) => void;
setVatAmount: (vatAmount: number | string) => void;
setTaxFreeAmount: (taxFreeAmount: number | string) => void;
setServiceCharge: (serviceCharge: number | string) => void;
};
export const CashReceiptHandWrittenIssuanceStep2 = ({
setProcessStep
setProcessStep,
supplyAmount,
vatAmount,
taxFreeAmount,
serviceCharge,
setSupplyAmount,
setVatAmount,
setTaxFreeAmount,
setServiceCharge
}: CashReceiptHandWrittenIssuanceStep2Props) => {
useSetOnBack(() => {
setProcessStep(ProcessStep.One);
});
const onClickToVatCalculate = () => {
};
return (
<>
<h2 className="issue-title">발행 금액 입력</h2>
@@ -27,6 +49,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
<button
className="btn-40 btn-white"
type="button"
onClick={ () => onClickToVatCalculate() }
>VAT자동계산</button>
</div>
</div>
@@ -39,6 +62,8 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
className="error"
type="text"
placeholder=""
value={ supplyAmount }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setSupplyAmount(e.target.value) }
/>
</div>
</div>
@@ -49,26 +74,32 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
className="error"
type="text"
placeholder=""
value={ vatAmount }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setVatAmount(e.target.value) }
/>
</div>
</div>
<div className="issue-row">
<div className="issue-label">발행번호</div>
<div className="issue-label">면세금액</div>
<div className="issue-field">
<input
className="error"
type="text"
placeholder=""
value={ taxFreeAmount }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setTaxFreeAmount(e.target.value) }
/>
</div>
</div>
<div className="issue-row">
<div className="issue-label">이메일 주소</div>
<div className="issue-label">봉사료</div>
<div className="issue-field">
<input
type="email"
className="error"
type="text"
placeholder=""
value={ serviceCharge }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setServiceCharge(e.target.value) }
/>
</div>
</div>

39
src/entities/transaction/ui/bottom-sheet-changes-cash-receit-uses.tsx → src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx
View File

@@ -1,11 +1,42 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
export const BottomSheetChangesCashReceitUses = () => {
export interface CashReceitPurposeUpdateBottomSheetProps {
setBottomSheetOn: (bottomSheetOn: boolean) => void;
bottomSheetOn: boolean;
callPurposeUpdate: () => void;
};
export const CashReceitPurposeUpdateBottomSheet = ({
setBottomSheetOn,
bottomSheetOn,
callPurposeUpdate
}: CashReceitPurposeUpdateBottomSheetProps) => {
const onClickToClose = () => {
setBottomSheetOn(false);
};
const onCliickToPurposeUpdate = () => {
callPurposeUpdate();
};
const variants = {
hidden: { y: '100%' },
visible: { y: '0%' },
};
return (
<>
{ (bottomSheetOn) &&
<div className="bg-dim"></div>
<div className="bottomsheet">
}
<motion.div
className="bottomsheet"
initial="hidden"
animate={ (bottomSheetOn)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.5 }}
>
<div className="bottomsheet-header">
<div className="bottomsheet-title">
<h2>신청 방법을 선택하세요</h2>
@@ -16,6 +47,7 @@ export const BottomSheetChangesCashReceitUses = () => {
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
onClick={ () => onClickToClose() }
/>
</button>
</div>
@@ -35,9 +67,10 @@ export const BottomSheetChangesCashReceitUses = () => {
<button
className="btn-50 btn-blue flex-1"
type="button"
onClick={ () => onCliickToPurposeUpdate() }
>신청</button>
</div>
</div>
</motion.div>
</>
);
};

42
src/entities/transaction/ui/bottom-sheet-email.tsx → src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx
View File

@@ -1,11 +1,42 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
export const BottomSheetEmail = () => {
export interface EscrowMailResendBottomSheetProps {
setBottomSheetOn: (bottomSheetOn: boolean) => void;
bottomSheetOn: boolean;
callMailResend: () => void;
};
export const EscrowMailResendBottomSheet = ({
setBottomSheetOn,
bottomSheetOn,
callMailResend
}: EscrowMailResendBottomSheetProps) => {
const onClickToClose = () => {
setBottomSheetOn(false);
};
const onClickToMailResend = () => {
callMailResend();
};
const variants = {
hidden: { y: '100%' },
visible: { y: '0%' },
};
return (
<>
{ (bottomSheetOn) &&
<div className="bg-dim"></div>
<div className="bottomsheet">
}
<motion.div
className="bottomsheet"
initial="hidden"
animate={ (bottomSheetOn)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.5 }}
>
<div className="bottomsheet-header">
<div className="bottomsheet-title">
<h2>이메일 주소를 선택하세요</h2>
@@ -16,6 +47,7 @@ export const BottomSheetEmail = () => {
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
onClick={ () => onClickToClose() }
/>
</button>
</div>
@@ -27,7 +59,7 @@ export const BottomSheetEmail = () => {
<div className="mail-icon">
<div className="mail-icon-bg"></div>
<img
src="../images/ico_email.svg"
src={ IMAGE_ROOT +'/ico_email.svg' }
alt="메일"
/>
</div>
@@ -54,10 +86,10 @@ export const BottomSheetEmail = () => {
<button
className="btn-50 btn-blue flex-1"
type="button"
disabled
onClick={ () => onClickToMailResend() }
>신청</button>
</div>
</div>
</motion.div>
</>
);
};

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

@@ -1,3 +1,4 @@
import moment from 'moment';
import { motion } from 'framer-motion';
import { NumericFormat } from 'react-number-format';
import { DetailArrow } from '../detail-arrow';
@@ -9,9 +10,93 @@ export const AmountInfoWrap = ({
amountInfo,
show,
tid,
serviceCode,
onClickToShowInfo
}: DetailInfoProps) => {
const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
const subItems: Record<string, Record<string, string>> = {
mid: {name: 'MID', type: 'string'},
amount: {name: '거래금액', type: 'number'},
cardAmount: {name: '신용카드금액', type: 'number'},
pointAmount: {name: '포인트금액', type: 'number'},
couponAmount: {name: '쿠폰금액', type: 'number'},
kakaoMoney: {name: '카카오머니', type: 'number'},
kakaoPoint: {name: '카카오포인트', type: 'number'},
kakaoInstantDiscount: {name: '카카오 즉시할인', type: 'number'},
naverPoint: {name: '네이버 포인트', type: 'number'},
tossMoney: {name: '토스머니', type: 'number'},
tossDiscount: {name: '토스할인', type: 'number'},
paycoPoint: {name: '페이코 포인트', type: 'number'},
paycoCoupon: {name: '페이코 쿠폰', type: 'number'},
escrowFee: {name: '에스크로수수료', type: 'number'}
};
const showTop = ['01', '02', '03', '26'];
const showSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['mid', 'cardAmount', 'pointAmount',
'couponAmount', 'escrowFee', 'kakaoMoney',
'kakaoPoint', 'kakaoInstantDiscount', 'naverPoint',
'tossMoney', 'tossDiscount', 'paycoPoint', 'paycoCoupon'
],
// 계좌이체
'02': ['amount', 'mid', 'escrowFee'],
// 가상계좌
'03': ['amount', 'mid'],
// 휴대폰
'04': ['amount', 'mid'],
// 계좌간편결제
'26': ['amount', 'mid', 'escrowFee'],
// SSG머니
'21': ['amount', 'mid'],
// SSG은행계좌
'24': ['amount', 'mid'],
// 문화상품권
'14': ['amount', 'mid'],
// 티머니페이
'31': ['amount', 'mid'],
};
const checkValue = (val: any) => {
return (!!val || val === 0);
};
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(!!k){
rs.push(
<li
key={`key-amount-item-${i}`}
className="amount-item"
>
<span className="label">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
<span className="value">
{ (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'string') &&
newAmountInfo[k]
}
{ (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'number') &&
<NumericFormat
value={ newAmountInfo[k] }
thousandSeparator
displayType="text"
></NumericFormat>
}
{ (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'date') &&
moment(newAmountInfo[k]).format('YYYY.MM.DD')
}
</span>
</li>
);
}
}
}
return rs;
}
const variants = {
hidden: { height: 0, padding: 0, margin: 0, display: 'none' },
visible: { height: 'auto', padding: '16px', margin: '10px 0', display: 'block' },
@@ -62,46 +147,7 @@ export const AmountInfoWrap = ({
transition={{ duration: 0.3 }}
>
<ul className="amount-list">
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;신용카드</span>
<span className="value">
<NumericFormat
value={ amountInfo?.cardAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;포인트</span>
<span className="value">
<NumericFormat
value={ amountInfo?.pointAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;쿠폰</span>
<span className="value minus">
<NumericFormat
value={ amountInfo?.couponAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;에스크로</span>
<span className="value">
<NumericFormat
value={ amountInfo?.escrowFee }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
{ subLi() }
</ul>
</motion.div>

80
src/entities/transaction/ui/info-wrap/billing-info-wrap.tsx Normal file
View File

@@ -0,0 +1,80 @@
import moment from 'moment';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
export const BillingInfoWrap = ({
billingInfo,
}: DetailInfoProps) => {
const getInstallmentMonth = () => {
let rs = [];
if((!!billingInfo?.installmentMonth && parseInt(billingInfo?.installmentMonth) > 1)){
rs.push(
<li
key={ `key-installmentMonth`}
className="kv-row"
>
<span className="k">할부개월</span>
<span className="v">{ billingInfo?.installmentMonth }개월 할부</span>
</li>
);
}
else{
rs.push(
<li
key={ `key-installmentMonth`}
className="kv-row"
>
<span className="k">할부개월</span>
<span className="v">일시불</span>
</li>
);
}
return rs;
};
return (
<>
<div className="txn-section">
<div className="section-title">중요 정보</div>
<ul className="kv-list">
<li className="kv-row">
<span className="k">빌키</span>
<span className="v">{ billingInfo?.billKey }</span>
</li>
<li className="kv-row">
<span className="k">TID</span>
<span className="v">{ billingInfo?.tid }</span>
</li>
<li className="kv-row">
<span className="k">주분번호</span>
<span className="v">{ billingInfo?.orderNumber }</span>
</li>
<li className="kv-row">
<span className="k">승인번호</span>
<span className="v">{ billingInfo?.approvalNumber }</span>
</li>
<li className="kv-row">
<span className="k">승인일자</span>
<span className="v">{ moment(billingInfo?.approvalDate).format('YYYY.MM.DD') }</span>
</li>
<li className="kv-row">
<span className="k">요청상태</span>
<span className="v">{ billingInfo?.requestStatus }</span>
</li>
<li className="kv-row">
<span className="k">처리결과</span>
<span className="v">{ billingInfo?.processResult }</span>
</li>
{ getInstallmentMonth() }
<li className="kv-row">
<span className="k">상품명</span>
<span className="v">{ billingInfo?.productName }</span>
</li>
<li className="kv-row">
<span className="k">구매자</span>
<span className="v">{ billingInfo?.buyerName }</span>
</li>
</ul>
</div>
</>
)
};

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

@@ -1,5 +1,4 @@
import moment from 'moment';
import { motion } from 'framer-motion';
import { DetailArrow } from '../detail-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
@@ -9,10 +8,6 @@ export const DetailInfoWrap = ({
show,
onClickToShowInfo
}: DetailInfoProps) => {
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
@@ -27,17 +22,46 @@ export const DetailInfoWrap = ({
className="section-title with-toggle"
onClick={ () => onClickToSetShowInfo() }
>
정산 정보 <DetailArrow show={ show }></DetailArrow>
상세 정보 <DetailArrow show={ show }></DetailArrow>
</div>
<motion.ul
className="kv-list"
initial="hidden"
animate={ (show)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
>
</motion.ul>
<ul className="kv-list">
<li className="kv-row">
<span className="k">취소일자</span>
<span className="v">{ moment(detailInfo?.cancelDate).format('YYYY.MM.DD') }</span>
</li>
<li className="kv-row">
<span className="k">취소승인번호</span>
<span className="v">{ detailInfo?.cancelApprovalNumber }</span>
</li>
<li className="kv-row">
<span className="k">현금영수증</span>
<span className="v">{ detailInfo?.receiptInfo }</span>
</li>
<li className="kv-row">
<span className="k">TID</span>
<span className="v">{ detailInfo?.tid }</span>
</li>
<li className="kv-row">
<span className="k">거래ID</span>
<span className="v">{ detailInfo?.merchantTid }</span>
</li>
<li className="kv-row">
<span className="k">서브몰명</span>
<span className="v">{ detailInfo?.subMallName }</span>
</li>
<li className="kv-row">
<span className="k">서브몰 사업자 번호</span>
<span className="v">{ detailInfo?.subMallBusinessNumber }</span>
</li>
<li className="kv-row">
<span className="k">발행경로</span>
<span className="v">{ detailInfo?.issueChannel }</span>
</li>
<li className="kv-row">
<span className="k">실패사유</span>
<span className="v">{ detailInfo?.failureReason }</span>
</li>
</ul>
</div>
</>
)

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

@@ -10,8 +10,8 @@ export const EscrowInfoWrap = ({
onClickToShowInfo
}: DetailInfoProps) => {
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
hidden: { height: 0, display: 'none' },
visible: { height: 'auto', display: 'block' },
};
const onClickToSetShowInfo = () => {
@@ -36,7 +36,46 @@ export const EscrowInfoWrap = ({
variants={ variants }
transition={{ duration: 0.3 }}
>
<li className="kv-row">
<span className="k">배송상태</span>
<span className="v">{ escrowInfo?.deliveryStatus }</span>
</li>
<li className="kv-row">
<span className="k">배송등록</span>
<span className="v">{ moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') }</span>
</li>
<li className="kv-row">
<span className="k">배송완료</span>
<span className="v">{ moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') }</span>
</li>
<li className="kv-row">
<span className="k">구매확인</span>
<span className="v">{ moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') }</span>
</li>
<li className="kv-row">
<span className="k">구매거절</span>
<span className="v">{ escrowInfo?.purchaseRejectReason }</span>
</li>
<li className="kv-row">
<span className="k">거절사유</span>
<span className="v">{ escrowInfo?.rejectReason }</span>
</li>
<li className="kv-row">
<span className="k">에스크로인증번호</span>
<span className="v">{ escrowInfo?.escrowCertNumber }</span>
</li>
<li className="kv-row">
<span className="k">택배사</span>
<span className="v">{ escrowInfo?.deliveryCompany }</span>
</li>
<li className="kv-row">
<span className="k">운송장번호</span>
<span className="v">{ escrowInfo?.trackingNumber }</span>
</li>
<li className="kv-row">
<span className="k">배송주소</span>
<span className="v">{ escrowInfo?.deliveryAddress }</span>
</li>
</motion.ul>
</div>
</>

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

@@ -1,56 +1,138 @@
import moment from 'moment';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import { NumericFormat } from 'react-number-format';
import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
export const ImportantInfoWrap = ({
transactionCategory,
importantInfo,
show,
onClickToShowInfo
serviceCode
}: DetailInfoProps) => {
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(InfoWrapKeys.Important);
}
const subItems: Record<string, Record<string, string>> = {
ordNo: {name: '주문번호', type: 'string'},
tid: {name: 'TID', type: 'string'},
tradeStatus: {name: '거래상태', type: 'string'},
tradeMethod: {name: '거래수단', type: 'string'},
approvalDate: {name: '승인일', type: 'date'},
tradeDate: {name: '거래일', type: 'date'},
requestDate: {name: '요청일', type: 'date'},
cancelDate: {name: '취소일', type: 'date'},
productName: {name: '상품명', type: 'string'}
};
const showSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
'approvalDate', 'cancelDate', 'productName'],
// 계좌이체
'02': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
'tradeDate', 'cancelDate', 'productName'],
// 가상계좌
'03': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
'requestDate', 'cancelDate', 'productName'],
// 휴대폰
'04': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
'tradeDate', 'cancelDate', 'productName'],
// 계좌간편결제
'26': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
'tradeDate', 'cancelDate', 'productName'],
// SSG머니
'21': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
'tradeDate', 'cancelDate', 'productName'],
// SSG은행계좌
'24': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
'tradeDate', 'cancelDate', 'productName'],
// 문화상품권
'14': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
'tradeDate', 'cancelDate', 'productName'],
// 티머니페이
'31': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
'tradeDate', 'cancelDate', 'productName'],
};
const checkValue = (val: any) => {
return (!!val || val === 0);
};
let newImportantInfo: Record<string, any> | undefined = importantInfo;
const subLi = () => {
let rs = [];
if(!!newImportantInfo && !!serviceCode && !!showSubItems[serviceCode]){
for(let i=0;i<showSubItems[serviceCode].length;i++){
let k = showSubItems[serviceCode][i];
if(!!k){
rs.push(
<li
key={`key-important-item-${i}`}
className="kv-row"
>
<span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
<span className="v">
{ (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'string') &&
newImportantInfo[k]
}
{ (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'number') &&
<NumericFormat
value={ newImportantInfo[k] }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
}
{ (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'date') &&
moment(newImportantInfo[k]).format('YYYY.MM.DD')
}
</span>
</li>
);
}
}
}
return rs;
};
return (
<>
<div className="txn-section">
<div className="section-title">중요 정보</div>
<ul className="kv-list">
{ (transactionCategory === TransactionCategory.AllTransaction) &&
subLi()
}
{ (transactionCategory === TransactionCategory.Escrow) &&
<>
<li className="kv-row">
<span className="k">주문번호</span>
<span className="v">{ importantInfo?.ordNo }</span>
<span className="v">{ importantInfo?.orderNumber }</span>
</li>
<li className="kv-row">
<span className="k">TID</span>
<span className="v">{ importantInfo?.tid }</span>
</li>
<li className="kv-row">
<span className="k">결제상태</span>
<span className="v">{ importantInfo?.tradeStatus }</span>
<span className="k">거래상태</span>
<span className="v">{ importantInfo?.transactionStatus }</span>
</li>
<li className="kv-row">
<span className="k">결제수단</span>
<span className="v">{ importantInfo?.tradeMethod }</span>
<span className="v">{ importantInfo?.paymentMethod }</span>
</li>
<li className="kv-row">
<span className="k">승인일</span>
<span className="v">{ moment(importantInfo?.approvalDate).format('YYYY.MM.DD') }</span>
<span className="v">{ moment(importantInfo?.approvalDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
</li>
{
/*
<li className="kv-row">
<span className="k">취소일</span>
<span className="v">2025.06.08</span>
<span className="v">{ importantInfo?.cancelDate }</span>
</li>
*/
}
<li className="kv-row">
<span className="k">상품명</span>
<span className="v">{ importantInfo?.productName }</span>
</li>
</>
}
</ul>
</div>
</>

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

@@ -1,43 +1,51 @@
import moment from 'moment';
import { motion } from 'framer-motion';
import { DetailArrow } from '../detail-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import moment from 'moment';
export const IssueInfoWrap = ({
transactionCategory,
issueInfo,
show,
onClickToShowInfo
purpose,
}: DetailInfoProps) => {
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(InfoWrapKeys.Issue);
}
};
return (
<>
<div className="txn-section">
<div
className="section-title with-toggle"
onClick={ () => onClickToSetShowInfo() }
>
정산 정보 <DetailArrow show={ show }></DetailArrow>
</div>
<motion.ul
className="kv-list"
initial="hidden"
animate={ (show)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
>
</motion.ul>
<div className="section-title">발급 정보</div>
<ul className="kv-list">
<li className="kv-row">
<span className="k">승인번호</span>
<span className="v">{ issueInfo?.approvalNumber }</span>
</li>
<li className="kv-row">
<span className="k">발행번호</span>
<span className="v">{ issueInfo?.issueNumber }</span>
</li>
<li className="kv-row">
<span className="k">발행일시</span>
<span className="v">{ moment(issueInfo?.issueDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
</li>
<li className="kv-row">
<span className="k">용도</span>
<span className="v">{ purpose }</span>
</li>
<li className="kv-row">
<span className="k">결제수단</span>
<span className="v">{ issueInfo?.paymentMethod }</span>
</li>
<li className="kv-row">
<span className="k">상품명</span>
<span className="v">{ issueInfo?.productName }</span>
</li>
<li className="kv-row">
<span className="k">진행상태</span>
<span className="v">{ issueInfo?.transmissionStatus }</span>
</li>
<li className="kv-row">
<span className="k">거래구분</span>
<span className="v">{ issueInfo?.transactionType }</span>
</li>
</ul>
</div>
</>
)

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

@@ -1,3 +1,4 @@
import moment from 'moment';
import { motion } from 'framer-motion';
import { NumericFormat } from 'react-number-format';
import { DetailArrow } from '../detail-arrow';
@@ -6,13 +7,93 @@ import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
export const PartCancelInfoWrap = ({
transactionCategory,
partCancelInfo,
serviceCode,
show,
onClickToShowInfo
}: DetailInfoProps) => {
const subItems: Record<string, Record<string, string>> = {
originalTid: {name: '원거래 TID', type: 'string'},
originalAmount: {name: '원거래 금액', type: 'number'},
partCancelTid: {name: (serviceCode === '05')? '재승인 TID': '부분취소 TID', type: 'string'},
partCancelAmount: {name: '부분취소 금액', type: 'number'},
remainingAmount: {name: (serviceCode === '05')? '재승인 금액': '부분취소 후 잔액', type: 'number'},
};
console.log(serviceCode)
const showSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['originalTid', 'originalAmount', 'partCancelTid',
'partCancelAmount', 'remainingAmount'],
// 계좌이체
'02': ['originalTid', 'originalAmount', 'partCancelTid',
'partCancelAmount', 'remainingAmount'],
// 가상계좌
'03': ['originalTid', 'originalAmount', 'partCancelTid',
'partCancelAmount', 'remainingAmount'],
// 휴대폰
'04': ['originalTid', 'originalAmount', 'partCancelTid',
'partCancelAmount', 'remainingAmount'],
// 계좌간편결제
'26': ['originalTid', 'originalAmount', 'partCancelTid',
'partCancelAmount', 'remainingAmount'],
// SSG머니
'21': ['originalTid', 'originalAmount', 'partCancelTid',
'partCancelAmount', 'remainingAmount'],
// SSG은행계좌
'24': ['originalTid', 'originalAmount', 'partCancelTid',
'partCancelAmount', 'remainingAmount'],
// 문화상품권
'14': ['originalTid', 'originalAmount', 'partCancelTid',
'partCancelAmount', 'remainingAmount'],
// 티머니페이
'31': ['originalTid', 'originalAmount', 'partCancelTid',
'partCancelAmount', 'remainingAmount'],
};
const checkValue = (val: any) => {
return (!!val || val === 0);
};
let newPartCancelInfo: Record<string, any> | undefined = partCancelInfo;
const subLi = () => {
let rs = [];
if(!!newPartCancelInfo && !!serviceCode && !!showSubItems[serviceCode]){
for(let i=0;i<showSubItems[serviceCode].length;i++){
let k = showSubItems[serviceCode][i];
if(!!k){
rs.push(
<li
key={`key-important-item-${i}`}
className="kv-row"
>
<span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
<span className="v">
{ (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'string') &&
newPartCancelInfo[k]
}
{ (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'number') &&
<NumericFormat
value={ newPartCancelInfo[k] }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
}
{ (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'date') &&
moment(newPartCancelInfo[k]).format('YYYY.MM.DD')
}
</span>
</li>
);
}
}
}
return rs;
};
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
hidden: { height: 0, display: 'none' },
visible: { height: 'auto', display: 'block' },
};
const onClickToSetShowInfo = () => {
@@ -37,40 +118,7 @@ export const PartCancelInfoWrap = ({
variants={ variants }
transition={{ duration: 0.3 }}
>
<li className="kv-row">
<span className="k">원거래 TID</span>
<span className="v">{ partCancelInfo?.originalTid }</span>
</li>
<li className="kv-row">
<span className="k">원거래 금액</span>
<span className="v">
<NumericFormat
value={ partCancelInfo?.originalAmount }
thousandSeparator
displayType="text"
suffix={ '원' }
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">부분취소 TID</span>
<span className="v">nictest00m01012506171629294150</span>
</li>
<li className="kv-row">
<span className="k">부분취소 금액</span>
<span className="v">50,000원</span>
</li>
<li className="kv-row nopadding">
<span className="k">부분취소 후 잔액</span>
<span className="v">
<NumericFormat
value={ partCancelInfo?.remainingAmount }
thousandSeparator
displayType="text"
suffix={ '원' }
></NumericFormat>
</span>
</li>
{ subLi() }
</motion.ul>
</div>
</>

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

@@ -1,16 +1,122 @@
import moment from 'moment';
import { motion } from 'framer-motion';
import { DetailArrow } from '../detail-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
import { NumericFormat } from 'react-number-format';
export const PaymentInfoWrap = ({
transactionCategory,
paymentInfo,
serviceCode,
show,
onClickToShowInfo
}: DetailInfoProps) => {
const subItems: Record<string, Record<string, string>> = {
approvalAcquire: {name: '승인매입', type: 'string'},
approvalReturn: {name: '승인반송(횟수)', type: 'number'},
approvalReAcquire: {name: '승인재매입(횟수)', type: 'number'},
approvalVAN: {name: '승인VAN', type: 'string'},
cancelAcquire: {name: '취소매입', type: 'string'},
cancelReturn: {name: '취소반송', type: 'string'},
cancelReAcquire: {name: '취소재매입', type: 'string'},
acquireVAN: {name: '매입VAN', type: 'string'},
acquireCompany: {name: '매입사(발급사)', type: 'string'},
cardNumber: {name: '카드번호', type: 'string'},
approvalNumber: {name: '승인번호', type: 'string'},
installmentPeriod: {name: '할부기간', type: 'number'},
authentication: {name: '인증', type: 'string'},
accountType: {name: '유형', type: 'string'},
bankName: {name: '은행명', type: 'string'},
accountNumber: {name: '계좌번호', type: 'string'},
depositBankName: {name: '입금금융기관명', type: 'string'},
depositorName: {name: '입금자명', type: 'string'},
depositDeadline: {name: '입금기한', type: 'date'},
depositDate: {name: '입금일', type: 'date'},
refundScheduleDate: {name: '환불예정일', type: 'date'},
refundBankName: {name: '환불은행명', type: 'string'},
refundAccountNumber: {name: '환불계좌번호', type: 'string'},
accountHolder: {name: '예금주', type: 'string'},
refundCompleteDate: {name: '환불완료일', type: 'date'},
partner: {name: '제휴사', type: 'string'},
cpid: {name: 'CPID', type: 'string'},
productCategory: {name: '상품구분', type: 'string'},
phoneNumber: {name: '휴대폰번호', type: 'string'},
customerId: {name: '고객ID', type: 'string'},
giftCardNumber: {name: '상품권번호', type: 'string'},
culturelandId: {name: '컬처랜드ID', type: 'string'},
};
const showSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['approvalAcquire', 'approvalReturn', 'approvalReAcquire',
'approvalVAN', 'cancelAcquire', 'cancelReturn', 'cancelReAcquire',
'acquireVAN', 'acquireCompany', 'cardNumber', 'approvalNumber',
'installmentPeriod', 'authentication'],
// 계좌이체
'02': ['accountType', 'bankName', 'accountNumber'],
// 가상계좌
'03': ['bankName', 'accountNumber', 'depositBankName', 'depositorName',
'depositDeadline', 'depositDate', 'refundScheduleDate',
'refundBankName', 'refundAccountNumber', 'accountHolder'],
// 휴대폰
'04': ['refundCompleteDate', 'partner', 'cpid', 'productCategory', 'phoneNumber'],
// 계좌간편결제
'26': ['bankName', 'refundCompleteDate', 'accountHolder', 'accountType', 'customerId'],
// SSG머니
'21': ['giftCardNumber'],
// SSG은행계좌
'24': [],
// 문화상품권
'14': ['culturelandId'],
// 티머니페이
'31': ['cardNumber', 'approvalNumber', 'cpid'],
};
const checkValue = (val: any) => {
return (!!val || val === 0);
};
let newPaymentInfo: Record<string, any> | undefined = paymentInfo;
const subLi = () => {
let rs = [];
if(!!newPaymentInfo && !!serviceCode && !!showSubItems[serviceCode]){
for(let i=0;i<showSubItems[serviceCode].length;i++){
let k = showSubItems[serviceCode][i];
if(!!k){
rs.push(
<li
key={`key-important-item-${i}`}
className="kv-row"
>
<span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
<span className="v">
{ (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
newPaymentInfo[k]
}
{ (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'number') &&
<NumericFormat
value={ newPaymentInfo[k] }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
}
{ (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'date') &&
moment(newPaymentInfo[k]).format('YYYY.MM.DD')
}
</span>
</li>
);
}
}
}
return rs;
};
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
hidden: { height: 0, display: 'none' },
visible: { height: 'auto', display: 'block' },
};
const onClickToSetShowInfo = () => {
@@ -35,14 +141,28 @@ export const PaymentInfoWrap = ({
variants={ variants }
transition={{ duration: 0.3 }}
>
{ (transactionCategory === TransactionCategory.AllTransaction) &&
subLi()
}
{ (transactionCategory === TransactionCategory.Escrow) &&
<>
<li className="kv-row">
<span className="k">승인 금액</span>
<span className="v">10,000,000원</span>
<span className="v">
<NumericFormat
value={ paymentInfo?.paymentAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">부가세</span>
<span className="v">0원</span>
<span className="k">승인 번호</span>
<span className="v">{ paymentInfo?.approvalNumber }</span>
</li>
</>
}
</motion.ul>
</div>
</>

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

@@ -1,4 +1,5 @@
import moment from 'moment';
import { NumericFormat } from 'react-number-format';
import { motion } from 'framer-motion';
import { DetailArrow } from '../detail-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
@@ -6,12 +7,92 @@ import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
export const SettlementInfoWrap = ({
transactionCategory,
settlementInfo,
serviceCode,
show,
onClickToShowInfo
}: DetailInfoProps) => {
const subItems: Record<string, Record<string, string>> = {
approvalSettleDate: {name: '승인정산일', type: 'date'},
approvalSettleAmount: {name: '승인정산금액', type: 'number'},
cancelSettleDate: {name: '취소정산일', type: 'date'},
cancelSettleAmount: {name: '취소정산금액', type: 'number'},
};
const showSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['approvalSettleDate', 'approvalSettleAmount',
'cancelSettleDate', 'cancelSettleAmount'],
// 계좌이체
'02': ['approvalSettleDate', 'approvalSettleAmount',
'cancelSettleDate', 'cancelSettleAmount'],
// 가상계좌
'03': ['approvalSettleDate', 'approvalSettleAmount',
'cancelSettleDate', 'cancelSettleAmount'],
// 휴대폰
'04': ['approvalSettleDate', 'approvalSettleAmount',
'cancelSettleDate', 'cancelSettleAmount'],
// 계좌간편결제
'26': ['approvalSettleDate', 'approvalSettleAmount',
'cancelSettleDate', 'cancelSettleAmount'],
// SSG머니
'21': ['approvalSettleDate', 'approvalSettleAmount',
'cancelSettleDate', 'cancelSettleAmount'],
// SSG은행계좌
'24': ['approvalSettleDate', 'approvalSettleAmount',
'cancelSettleDate', 'cancelSettleAmount'],
// 문화상품권
'14': ['approvalSettleDate', 'approvalSettleAmount',
'cancelSettleDate', 'cancelSettleAmount'],
// 티머니페이
'31': ['approvalSettleDate', 'approvalSettleAmount',
'cancelSettleDate', 'cancelSettleAmount'],
};
const checkValue = (val: any) => {
return (!!val || val === 0);
};
let newSettlementInfo: Record<string, any> | undefined = settlementInfo;
const subLi = () => {
let rs = [];
if(!!newSettlementInfo && !!serviceCode && !!showSubItems[serviceCode]){
for(let i=0;i<showSubItems[serviceCode].length;i++){
let k = showSubItems[serviceCode][i];
if(!!k){
rs.push(
<li
key={`key-important-item-${i}`}
className="kv-row"
>
<span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
<span className="v">
{ (checkValue(newSettlementInfo[k]) && subItems[k]?.type === 'string') &&
newSettlementInfo[k]
}
{ (checkValue(newSettlementInfo[k]) && subItems[k]?.type === 'number') &&
<NumericFormat
value={ newSettlementInfo[k] }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
}
{ (checkValue(newSettlementInfo[k]) && subItems[k]?.type === 'date') &&
moment(newSettlementInfo[k]).format('YYYY.MM.DD')
}
</span>
</li>
);
}
}
}
return rs;
};
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
hidden: { height: 0, display: 'none' },
visible: { height: 'auto', display: 'block' },
};
const onClickToSetShowInfo = () => {
@@ -36,14 +117,7 @@ export const SettlementInfoWrap = ({
variants={ variants }
transition={{ duration: 0.3 }}
>
<li className="kv-row">
<span className="k">정산 예정일</span>
<span className="v">{ moment(settlementInfo?.approvalSettleDate).format('YYYY.MM.DD') }</span>
</li>
<li className="kv-row">
<span className="k">정산 상태</span>
<span className="v">예정</span>
</li>
{ subLi() }
</motion.ul>
</div>
</>

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

@@ -1,16 +1,102 @@
import moment from 'moment';
import { motion } from 'framer-motion';
import { DetailArrow } from '../detail-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
import { NumericFormat } from 'react-number-format';
export const TransactionInfoWrap = ({
transactionCategory,
transactionInfo,
serviceCode,
show,
onClickToShowInfo
}: DetailInfoProps) => {
const subItems: Record<string, Record<string, string>> = {
buyerName: {name: '구매자명', type: 'string'},
email: {name: '이메일', type: 'string'},
phoneNumber: {name: '전화번호', type: 'string'},
cancelReason: {name: '취소사유', type: 'string'},
cancelRequestor: {name: '취소요청자', type: 'string'},
partialCancel: {name: '부분취소', type: 'string'},
cashReceiptIssue: {name: '현금영수증발행', type: 'string'},
};
const showSubItems: Record<string, Array<string>> = {
// 신용카드
'01': ['buyerName', 'email', 'phoneNumber', 'cancelReason',
'cancelRequestor', 'partialCancel'],
// 계좌이체
'02': ['buyerName', 'email', 'phoneNumber', 'cancelReason',
'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
// 가상계좌
'03': ['buyerName', 'email', 'phoneNumber', 'cancelReason',
'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
// 휴대폰
'04': ['buyerName', 'email', 'phoneNumber', 'cancelReason',
'cancelRequestor'],
// 계좌간편결제
'26': ['buyerName', 'email', 'phoneNumber', 'cancelReason',
'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
// SSG머니
'21': ['buyerName', 'email', 'phoneNumber', 'cancelReason',
'cancelRequestor'],
// SSG은행계좌
'24': ['buyerName', 'email', 'phoneNumber', 'cancelReason',
'cancelRequestor'],
// 문화상품권
'14': ['buyerName', 'email', 'phoneNumber', 'cancelReason',
'cancelRequestor'],
// 티머니페이
'31': ['buyerName', 'email', 'phoneNumber', 'cancelReason',
'cancelRequestor'],
};
const checkValue = (val: any) => {
return (!!val || val === 0);
};
let newTransactionInfo: Record<string, any> | undefined = transactionInfo;
const subLi = () => {
let rs = [];
if(!!newTransactionInfo && !!serviceCode && !!showSubItems[serviceCode]){
for(let i=0;i<showSubItems[serviceCode].length;i++){
let k = showSubItems[serviceCode][i];
if(!!k){
rs.push(
<li
key={`key-important-item-${i}`}
className="kv-row"
>
<span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
<span className="v">
{ (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'string') &&
newTransactionInfo[k]
}
{ (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'number') &&
<NumericFormat
value={ newTransactionInfo[k] }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
}
{ (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'date') &&
moment(newTransactionInfo[k]).format('YYYY.MM.DD')
}
</span>
</li>
);
}
}
}
return rs;
};
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
hidden: { height: 0, display: 'none' },
visible: { height: 'auto', display: 'block' },
};
const onClickToSetShowInfo = () => {
@@ -35,6 +121,11 @@ export const TransactionInfoWrap = ({
variants={ variants }
transition={{ duration: 0.3 }}
>
{ (transactionCategory === TransactionCategory.AllTransaction) &&
subLi()
}
{ (transactionCategory === TransactionCategory.Escrow) &&
<>
<li className="kv-row">
<span className="k">가맹점명</span>
<span className="v">NICE PAY</span>
@@ -43,6 +134,9 @@ export const TransactionInfoWrap = ({
<span className="k">사업자번호</span>
<span className="v">123-45-67890</span>
</li>
</>
}
</motion.ul>
</div>
</>

19
src/entities/transaction/ui/list-date-group.tsx
View File

@@ -24,8 +24,6 @@ export const ListDateGroup = ({
transactionCategory={ transactionCategory }
key={ key }
tid={ items[i]?.tid }
issueNumber={ items[i]?.issueNumber }
billKey={ items[i]?.billKey }
mid={ items[i]?.mid }
stateDate={ items[i]?.stateDate }
stateCode={ items[i]?.stateCode }
@@ -35,6 +33,23 @@ export const ListDateGroup = ({
serviceName={ items[i]?.serviceName }
serviceDetailName={ items[i]?.serviceDetailName }
goodsAmount={ items[i]?.goodsAmount }
id={ items[i]?.id }
amount={ items[i]?.amount }
customerName={ items[i]?.customerName }
issueNumber={ items[i]?.issueNumber }
issueStatus={ items[i]?.issueStatus }
paymentMethod={ items[i]?.paymentMethod }
processResult={ items[i]?.processResult }
transactionDateTime={ items[i]?.transactionDateTime }
transactionAmount={ items[i]?.transactionAmount }
deliveryStatus={ items[i]?.deliveryStatus }
settlementStatus={ items[i]?.settlementStatus }
cancelStatus={ items[i]?.cancelStatus }
billKey={ items[i]?.billKey }
orderNumber={ items[i]?.orderNumber }
></ListItem>
)
}

112
src/entities/transaction/ui/list-item.tsx
View File

@@ -2,21 +2,18 @@ import { NumericFormat } from 'react-number-format';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListItemProps, TransactionCategory } from '../model/types';
import moment from 'moment';
export const ListItem = ({
transactionCategory,
tid,
issueNumber,
billKey,
mid,
stateDate,
stateCode,
stateName,
installmentMonth,
serviceCode,
serviceName,
serviceDetailName,
goodsAmount
tid, mid, stateDate, stateCode, stateName,
installmentMonth, serviceCode, serviceName,
serviceDetailName, goodsAmount,
id, amount, customerName, issueNumber,
issueStatus, paymentMethod, processResult,
transactionDateTime, transactionAmount,
deliveryStatus, settlementStatus,
cancelStatus, billKey, orderNumber
}: ListItemProps) => {
const { navigate } = useNavigate();
const getItemClass = () => {
@@ -51,7 +48,8 @@ export const ListItem = ({
if(transactionCategory === TransactionCategory.AllTransaction){
navigate(PATHS.transaction.allTransaction.detail, {
state: {
tid: tid
tid: tid,
serviceCode: serviceCode
}
});
}
@@ -82,9 +80,85 @@ export const ListItem = ({
};
const getTime = () => {
let timeStr = '';
if(transactionCategory === TransactionCategory.AllTransaction){
let time = stateDate?.substring(8, 12);
let timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
return timeStr;
timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
}
else{
timeStr = moment(transactionDateTime).format('HH:mm');
}
return timeStr
};
const getTitle = () => {
let str = '';
if(transactionCategory === TransactionCategory.AllTransaction){
str = `${serviceName}(${serviceDetailName})`;
}
else if(transactionCategory === TransactionCategory.CashReceipt){
str = `${customerName}(${issueNumber})`
}
else if(transactionCategory === TransactionCategory.Escrow){
str = `${customerName}(${issueNumber})`
}
else if(transactionCategory === TransactionCategory.Billing){
str = `${billKey}`
}
return str;
};
const getDetail = () => {
let rs = [];
if(transactionCategory === TransactionCategory.AllTransaction){
rs.push(
<>
<span>{ getTime() }</span>
<span className="separator">|</span>
<span>{ stateName }</span>
<span className="separator">|</span>
<span>{ mid }</span>
</>
);
}
else if(transactionCategory === TransactionCategory.CashReceipt){
rs.push(
<>
<span>{ getTime() }</span>
<span className="separator">|</span>
<span>{ issueStatus }</span>
<span className="separator">|</span>
<span>{ paymentMethod }</span>
<span className="separator">|</span>
<span>{ processResult }</span>
</>
);
}
else if(transactionCategory === TransactionCategory.Escrow){
rs.push(
<>
<span>{ getTime() }</span>
<span className="separator">|</span>
<span>{ deliveryStatus }</span>
<span className="separator">|</span>
<span>{ settlementStatus }</span>
<span className="separator">|</span>
<span>{ cancelStatus }</span>
</>
);
}
else if(transactionCategory === TransactionCategory.Billing){
rs.push(
<>
<span>{ getTime() }</span>
<span className="separator">|</span>
<span>{ processResult }</span>
<span className="separator">|</span>
<span>{ paymentMethod }</span>
</>
);
}
return rs;
};
return (
@@ -97,13 +171,9 @@ export const ListItem = ({
<div className={ `status-dot ${getDotClass()}`}></div>
</div>
<div className="transaction-content">
<div className="transaction-title">{ `${serviceName}(${serviceDetailName})` }</div>
<div className="transaction-title">{ getTitle() }</div>
<div className="transaction-details">
<span>{ stateName }</span>
<span className="separator">|</span>
<span>{ getTime() }</span>
<span className="separator">|</span>
<span>{ mid }</span>
{ getDetail() }
{ (!!installmentMonth && parseInt(installmentMonth) > 1) &&
<>
<span className="separator">|</span>

6
src/entities/user/lib/use-user-info.ts
View File

@@ -23,7 +23,7 @@ export const useUserInfo = () => {
accessTokenExpiresIn,
refreshTokenExpiresIn,
menuGrants,
usrid,
// usrid,
// clientAddressIP,
// requires2FA
} = result;
@@ -33,10 +33,10 @@ export const useUserInfo = () => {
setLocalStorage(StorageKeys.AccessTokenExpiresIn, accessTokenExpiresIn);
setLocalStorage(StorageKeys.RefreshTokenExpiresIn, refreshTokenExpiresIn);
setLocalStorage(StorageKeys.MenuGrants, menuGrants);
setLocalStorage(StorageKeys.Usrid, usrid);
// setLocalStorage(StorageKeys.Usrid, usrid);
// setLocalStorage(StorageKeys.ClientAddressIP, clientAddressIP);
// setLocalStorage(StorageKeys.Requires2FA, requires2FA);
console.log(result)
useStore.getState().UserStore.setUserInfo(result);
}
}

2
src/entities/user/model/types.ts
View File

@@ -14,7 +14,7 @@ export interface LoginResponse {
accessTokenExpiresIn?: number;
refreshTokenExpiresIn?: number;
menuGrants?: Array<MenuGrantsItem>;
usrid?: string;
// usrid?: string;
clientAddressIP?: string;
tempToken?: string,
tempTokenExpiresIn?: number;

4
src/pages/home/home-page.tsx
View File

@@ -56,7 +56,7 @@ export const HomePage = () => {
let accessTokenExpiresIn = getLocalStorage(StorageKeys.AccessTokenExpiresIn);
let refreshTokenExpiresIn = getLocalStorage(StorageKeys.RefreshTokenExpiresIn);
let menuGrants = getLocalStorage(StorageKeys.TokenType);
let usrid = getLocalStorage(StorageKeys.Usrid);
// let usrid = getLocalStorage(StorageKeys.Usrid);
useStore.getState().UserStore.setUserInfo({
tokenType: tokenType,
@@ -65,7 +65,7 @@ export const HomePage = () => {
accessTokenExpiresIn: accessTokenExpiresIn,
refreshTokenExpiresIn: refreshTokenExpiresIn,
menuGrants: menuGrants,
usrid: usrid
// usrid: usrid
});
setLoginSuccess(true);
}

11
src/pages/transaction/all-transaction/detail-page.tsx
View File

@@ -35,6 +35,7 @@ export const AllTransactionDetailPage = () => {
const { navigate } = useNavigate();
const location = useLocation();
const tid = location.state.tid;
const serviceCode = location.state.serviceCode;
const [amountInfo, setAmountInfo] = useState<AmountInfo>();
const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
@@ -137,17 +138,20 @@ export const AllTransactionDetailPage = () => {
amountInfo={ amountInfo }
show={ showAmountInfo }
tid={ tid }
serviceCode={ serviceCode }
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
></AmountInfoWrap>
<div className="txn-divider minus"></div>
<div className="txn-divider"></div>
<ImportantInfoWrap
transactionCategory={ TransactionCategory.AllTransaction }
importantInfo={ importantInfo }
serviceCode={ serviceCode }
></ImportantInfoWrap>
<div className="txn-divider minus"></div>
<div className="txn-divider"></div>
<PaymentInfoWrap
transactionCategory={ TransactionCategory.AllTransaction }
paymentInfo={ paymentInfo }
serviceCode={ serviceCode }
show={ showPaymentInfo }
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
></PaymentInfoWrap>
@@ -155,6 +159,7 @@ export const AllTransactionDetailPage = () => {
<TransactionInfoWrap
transactionCategory={ TransactionCategory.AllTransaction }
transactionInfo={ transactionInfo }
serviceCode={ serviceCode }
show={ showTransactionInfo }
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
></TransactionInfoWrap>
@@ -162,6 +167,7 @@ export const AllTransactionDetailPage = () => {
<SettlementInfoWrap
transactionCategory={ TransactionCategory.AllTransaction }
settlementInfo={ settlementInfo }
serviceCode={ serviceCode }
show={ showSettlementInfo }
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
></SettlementInfoWrap>
@@ -169,6 +175,7 @@ export const AllTransactionDetailPage = () => {
<PartCancelInfoWrap
transactionCategory={ TransactionCategory.AllTransaction }
partCancelInfo={ partCancelInfo }
serviceCode={ serviceCode }
show={ showPartCancelInfo }
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
></PartCancelInfoWrap>

13
src/pages/transaction/all-transaction/list-page.tsx
View File

@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { AllTransactionList } from '@/entities/transaction/ui/all-transaction-list';
import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
import { AllTransactionListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-mutation';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
@@ -84,12 +84,12 @@ export const AllTransactionListPage = () => {
});
};
const assembleData = (content: Array<ListItem>) => {
const assembleData = (content: Array<AllTransactionListItem>) => {
let data: any = {};
if(content && content.length > 0){
for(let i=0;i<content?.length;i++){
let stateDate = content[i]?.stateDate;
let groupDate = stateDate?.substring(0, 8);
let stateDate = content[i]?.stateDate?.substring(0, 8);
let groupDate = moment(stateDate).format('YYYYMMDD');
if(!!groupDate && !data.hasOwnProperty(groupDate)){
data[groupDate] = [];
}
@@ -141,7 +141,10 @@ export const AllTransactionListPage = () => {
if(!!serviceCodeOptions && serviceCodeOptions.length > 0)
for(let i=0;i<serviceCodeOptions.length;i++){
rs.push(
<option value={serviceCodeOptions[i]?.value}>{ serviceCodeOptions[i]?.text }</option>
<option
key={`key-${i}`}
value={serviceCodeOptions[i]?.value}
>{ serviceCodeOptions[i]?.text }</option>
)
}
return rs;

91
src/pages/transaction/billing/payment-request-page.tsx → src/pages/transaction/billing/charge-page.tsx
View File

@@ -1,7 +1,9 @@
import { ChangeEvent, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { useBillingChargeMutation } from '@/entities/transaction/api/use-billing-charge-mutation';
import {
useSetOnBack,
useSetHeaderTitle,
@@ -9,9 +11,17 @@ import {
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const BillingPaymentRequestPage = () => {
export const BillingChargePage = () => {
const { navigate } = useNavigate();
const [billKey, setBillKey] = useState<string>('BIKYvattest01m');
const [productName, setProductName] = useState<string>('테스트상품123');
const [productAmount, setProductAmount] = useState<number | string>(1000000);
const [orderNumber, setOrderNumber] = useState<string>('P146733723');
const [buyerName, setBuyerName] = useState<string>('김테스트');
const [paymentRequestDate, setPaymentRequestDate] = useState<string>('2025-06-08');
const [installmentMonth, setInstallmentMonth] = useState<string>('00');
useSetHeaderTitle('빌링 결제 신청');
useSetHeaderType(HeaderType.RightClose);
useSetOnBack(() => {
@@ -19,6 +29,52 @@ export const BillingPaymentRequestPage = () => {
});
useSetFooterMode(false);
const { mutateAsync: billingCharge } = useBillingChargeMutation();
const onClickToBillingCharge = () => {
let params = {
billKey: billKey,
productName: productName,
productAmount: productAmount,
orderNumber: orderNumber,
buyerName: buyerName,
paymentRequestDate: paymentRequestDate,
installmentMonth: installmentMonth
};
billingCharge(params).then((rs) => {
console.log(rs);
alert('성공')
navigate(PATHS.transaction.billing.list);
});
};
const makeInstallmentMonthSelect = () => {
let rs = [];
rs.push(
<option
key={ `key-installment` }
value=''
>선택</option>
);
rs.push(
<option
key={ `key-installment-0` }
value='00'
>일시불</option>
);
for(let i=2;i<=24;i++){
let val = (i < 10)? '0'+i: ''+i;
rs.push(
<option
key={ `key-installment-${i}`}
value={ val }
>{i}개월</option>
);
};
return rs;
};
return (
<>
<main>
@@ -26,15 +82,14 @@ export const BillingPaymentRequestPage = () => {
<div className="tab-pane sub active">
<div className="option-list">
<div className="billing-title">결제 정보 입력</div>
<div className="billing-form">
<div className="billing-row">
<div className="billing-label">빌키 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value="BIKYvattest01m"
readOnly={ true }
value={ billKey }
/>
</div>
</div>
@@ -43,7 +98,8 @@ export const BillingPaymentRequestPage = () => {
<div className="billing-field">
<input
type="text"
value="테스트상품123"
value={ productName }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
/>
</div>
</div>
@@ -52,7 +108,8 @@ export const BillingPaymentRequestPage = () => {
<div className="billing-field">
<input
type="text"
value="1,000,000"
value={ productAmount }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(e.target.value) }
/>
</div>
</div>
@@ -61,7 +118,8 @@ export const BillingPaymentRequestPage = () => {
<div className="billing-field">
<input
type="text"
value="P146733723"
value={ orderNumber }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value) }
/>
</div>
</div>
@@ -70,7 +128,8 @@ export const BillingPaymentRequestPage = () => {
<div className="billing-field">
<input
type="text"
value="김테스트"
value={ buyerName }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
/>
</div>
</div>
@@ -81,8 +140,8 @@ export const BillingPaymentRequestPage = () => {
<div className="input-wrapper date wid-100">
<input
type="text"
value="2025/03/21"
placeholder=""
value={ paymentRequestDate }
/>
<button
className="date-btn"
@@ -101,19 +160,21 @@ export const BillingPaymentRequestPage = () => {
<div className="billing-row">
<div className="billing-label">할부 개월</div>
<div className="billing-field">
<select>
<option value="">선택</option>
<option value="0">일시불</option>
<option value="2">2개월</option>
<option value="3">3개월</option>
<option value="6">6개월</option>
<select
value={ installmentMonth }
onChange={ (e: ChangeEvent<HTMLSelectElement>) => setBuyerName(e.target.value) }
>
{ makeInstallmentMonthSelect() }
</select>
</div>
</div>
</div>
</div>
<div className="apply-row">
<button className="btn-50 btn-blue flex-1">결제 신청</button>
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToBillingCharge() }
>결제 신청</button>
</div>
</div>
</div>

117
src/pages/transaction/billing/detail-page.tsx
View File

@@ -1,28 +1,15 @@
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { PATHS } from '@/shared/constants/paths';
import { Dialog } from '@/shared/ui/dialogs/dialog';
import { overlay } from 'overlay-kit';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useBillingDetailMutation } from '@/entities/transaction/api/use-billing-detail-mutation';
import { AmountInfoWrap } from '@/entities/transaction/ui/info-wrap/amount-info-wrap';
import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
import { PaymentInfoWrap } from '@/entities/transaction/ui/info-wrap/payment-info-wrap';
import { TransactionInfoWrap } from '@/entities/transaction/ui/info-wrap/transaction-info-wrap';
import { SettlementInfoWrap } from '@/entities/transaction/ui/info-wrap/settlement-info-wrap';
import { PartCancelInfoWrap } from '@/entities/transaction/ui/info-wrap/part-cancel-info-wrap';
import { BillingInfoWrap } from '@/entities/transaction/ui/info-wrap/billing-info-wrap';
import { HeaderType } from '@/entities/common/model/types';
import {
TransactionCategory,
BillingDetailParams,
DetailResponse,
AmountInfo,
ImportantInfo,
PaymentInfo,
TransactionInfo,
SettlementInfo,
PartCancelInfo,
InfoWrapKeys
BillingDetailResponse,
BillingInfo
} from '@/entities/transaction/model/types';
import {
useSetOnBack,
@@ -30,22 +17,13 @@ import {
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { NumericFormat } from 'react-number-format';
export const BillingDetailPage = () => {
const { navigate } = useNavigate();
const location = useLocation();
const [amountInfo, setAmountInfo] = useState<AmountInfo>();
const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
const [partCancelInfo, setPartCancelInfo] = useState<PartCancelInfo>();
const [showAmount, setShowAmount] = useState<boolean>(false);
const [showPayment, setShowPayment] = useState<boolean>(false);
const [showTransaction, setShowTransaction] = useState<boolean>(false);
const [showSettlement, setShowSettlement] = useState<boolean>(false);
const [showPartCancel, setShowPartCancel] = useState<boolean>(false);
const [billingInfo, setBillingInfo] = useState<BillingInfo>();
useSetHeaderTitle('빌링 상세');
useSetHeaderType(HeaderType.RightClose);
@@ -60,37 +38,14 @@ export const BillingDetailPage = () => {
let billingDetailParams: BillingDetailParams = {
billKey: location?.state.billKey
};
billingDetail(billingDetailParams).then((rs: DetailResponse) => {
setAmountInfo(rs.amountInfo);
setImportantInfo(rs.importantInfo);
setPaymentInfo(rs.paymentInfo);
setTransactionInfo(rs.transactionInfo);
setSettlementInfo(rs.settlementInfo);
setPartCancelInfo(rs.partCancelInfo);
billingDetail(billingDetailParams).then((rs: BillingDetailResponse) => {
setBillingInfo(rs);
});
};
useEffect(() => {
callDetail();
}, []);
const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
if(infoWrapKey === InfoWrapKeys.Amount){
setShowAmount(!showAmount);
}
else if(infoWrapKey === InfoWrapKeys.Payment){
setShowPayment(!showPayment);
}
else if(infoWrapKey === InfoWrapKeys.Transaction){
setShowTransaction(!showTransaction);
}
else if(infoWrapKey === InfoWrapKeys.Settlement){
setShowSettlement(!showSettlement);
}
else if(infoWrapKey === InfoWrapKeys.PartCancel){
setShowPartCancel(!showPartCancel);
}
};
return (
<>
<main>
@@ -98,49 +53,29 @@ export const BillingDetailPage = () => {
<div className="tab-pane sub active">
<div className="option-list">
<div className="txn-detail">
<AmountInfoWrap
transactionCategory={ TransactionCategory.Billing }
amountInfo={ amountInfo }
show={ showAmount }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></AmountInfoWrap>
<div className="txn-divider minus"></div>
<ImportantInfoWrap
transactionCategory={ TransactionCategory.Billing }
importantInfo={ importantInfo }
></ImportantInfoWrap>
<div className="txn-divider minus"></div>
<PaymentInfoWrap
transactionCategory={ TransactionCategory.Billing }
paymentInfo={ paymentInfo }
show={ showPayment }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></PaymentInfoWrap>
<div className="txn-divider"></div>
<TransactionInfoWrap
transactionCategory={ TransactionCategory.Billing }
transactionInfo={ transactionInfo }
show={ showTransaction }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></TransactionInfoWrap>
<div className="txn-divider"></div>
<SettlementInfoWrap
transactionCategory={ TransactionCategory.Billing }
settlementInfo={ settlementInfo }
show={ showSettlement }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></SettlementInfoWrap>
<div className="txn-divider"></div>
<PartCancelInfoWrap
transactionCategory={ TransactionCategory.Billing }
partCancelInfo={ partCancelInfo }
show={ showPartCancel }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></PartCancelInfoWrap>
<div className="txn-num-group">
<div className="txn-amount">
<div className="value">
<NumericFormat
value={ 100000000 }
thousandSeparator
displayType="text"
></NumericFormat>
<span className="unit">원</span>
</div>
<div className="txn-mid">
<span className="value">{ 'nitnitni' }</span>
</div>
</div>
</div>
<div className="txn-divider"></div>
<BillingInfoWrap
billingInfo={ billingInfo }
></BillingInfoWrap>
</div>
</div>
</div>
</div>
</main>
</>

15
src/pages/transaction/billing/list-page.tsx
View File

@@ -1,10 +1,11 @@
import moment from 'moment';
import { useEffect, useState } from 'react';
import { useStore } from '@/shared/model/store';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { BillingList } from '@/entities/transaction/ui/billing-list';
import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
import { BillingListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
import { useBillingListMutation } from '@/entities/transaction/api/use-billing-list-mutation';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
@@ -27,14 +28,15 @@ const serviceCodes = [
export const BillingListPage = () => {
const { navigate } = useNavigate();
const userInfo = useStore((state) => state.UserStore.UserInfo);
const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
const [listItems, setListItems] = useState({});
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
useSetHeaderTitle('빌링');
useSetHeaderType(HeaderType.LeftArrow);
@@ -55,7 +57,7 @@ export const BillingListPage = () => {
let listParams = {
mid: 'nictest001m',
searchType: 'ALL',
searchKeyword: 'P14633723',
searchKeyword: '',
startDate: startDate,
endDate: endDate,
requestStatus: 'ALL',
@@ -69,12 +71,11 @@ export const BillingListPage = () => {
});
}
const assembleData = (content: Array<ListItem>) => {
const assembleData = (content: Array<BillingListItem>) => {
let data: any = {};
if(content && content.length > 0){
for(let i=0;i<content?.length;i++){
let stateDate = content[i]?.stateDate;
let groupDate = stateDate?.substring(0, 8);
let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
if(!!groupDate && !data.hasOwnProperty(groupDate)){
data[groupDate] = [];
}

59
src/pages/transaction/cash-receipt/detail-page.tsx
View File

@@ -1,8 +1,6 @@
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { PATHS } from '@/shared/constants/paths';
import { Dialog } from '@/shared/ui/dialogs/dialog';
import { overlay } from 'overlay-kit';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useCashReceiptDetailMutation } from '@/entities/transaction/api/use-cash-receipt-detail-mutation';
import { IssueInfoWrap } from '@/entities/transaction/ui/info-wrap/issue-info-wrap';
@@ -14,7 +12,8 @@ import {
DetailResponse,
IssueInfo,
DetailInfo,
InfoWrapKeys
InfoWrapKeys,
CashReceiptPurpose
} from '@/entities/transaction/model/types';
import {
useSetOnBack,
@@ -22,6 +21,8 @@ import {
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { CashReceitPurposeUpdateBottomSheet } from '@/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet';
import { useCashReceiptPurposeUpdateMutation } from '@/entities/transaction/api/use-cash-receipt-purpose-update';
export const CashReceiptDetailPage = () => {
const { navigate } = useNavigate();
@@ -29,8 +30,9 @@ export const CashReceiptDetailPage = () => {
const [issueInfo, setIssueInfo] = useState<IssueInfo>();
const [detailInfo, setDetailInfo] = useState<DetailInfo>();
const [showIssueInfo, setShowIssueInfo] = useState<boolean>(false);
const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
const [purpose, setPurpose] = useState<CashReceiptPurpose>();
useSetHeaderTitle('현금영수증 상세');
useSetHeaderType(HeaderType.RightClose);
@@ -39,15 +41,35 @@ export const CashReceiptDetailPage = () => {
});
useSetFooterMode(false);
const { mutateAsync: escroDetail } = useCashReceiptDetailMutation();
const issueNumber = location?.state.issueNumber
const { mutateAsync: cashReceiptDetail } = useCashReceiptDetailMutation();
const { mutateAsync: cashReceiptPurposeUpdate } = useCashReceiptPurposeUpdateMutation();
const callPurposeUpdate = () => {
let newPurpose = (purpose === CashReceiptPurpose.EXPENSE_PROOF)
? CashReceiptPurpose.INCOME_DEDUCTION: CashReceiptPurpose.EXPENSE_PROOF;
let params = {
issueNumber: issueNumber,
newPurpose: newPurpose
};
cashReceiptPurposeUpdate(params).then((rs) => {
setPurpose(rs.afterPurposeType);
setBottomSheetOn(false);
alert('toast : 용도 변경을 성공하였습니다.')
});
};
const callDetail = () => {
let cashReceitDetailParams: CashReceiptDetailParams = {
issueNumber: location?.state.issueNumber
issueNumber: issueNumber
};
escroDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
cashReceiptDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
setIssueInfo(rs.issueInfo);
setDetailInfo(rs.detailInfo);
if(rs.issueInfo){
setPurpose(rs.issueInfo.purpose);
}
});
};
useEffect(() => {
@@ -55,14 +77,15 @@ export const CashReceiptDetailPage = () => {
}, []);
const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
if(infoWrapKey === InfoWrapKeys.Issue){
setShowIssueInfo(!showIssueInfo);
}
else if(infoWrapKey === InfoWrapKeys.Detail){
if(infoWrapKey === InfoWrapKeys.Detail){
setShowDetailInfo(!showDetailInfo);
}
};
const onClickToPurposeUpdate = () => {
setBottomSheetOn(true);
};
return (
<>
<main>
@@ -73,8 +96,7 @@ export const CashReceiptDetailPage = () => {
<IssueInfoWrap
transactionCategory={ TransactionCategory.CashReceipt }
issueInfo={ issueInfo }
show={ showIssueInfo }
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
purpose={ purpose }
></IssueInfoWrap>
<div className="txn-divider minus"></div>
<DetailInfoWrap
@@ -85,9 +107,20 @@ export const CashReceiptDetailPage = () => {
></DetailInfoWrap>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToPurposeUpdate() }
>용도 변경</button>
</div>
</div>
</div>
</main>
<CashReceitPurposeUpdateBottomSheet
setBottomSheetOn={ setBottomSheetOn }
bottomSheetOn={ bottomSheetOn }
callPurposeUpdate={ callPurposeUpdate }
></CashReceitPurposeUpdateBottomSheet>
</>
);
};

74
src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx
View File

@@ -3,28 +3,64 @@ import {PATHS} from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { CashReceiptHandWrittenIssuanceStep1 } from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step1';
import { CashReceiptHandWrittenIssuanceStep2 } from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step2';
import {ProcessStep} from '@/entities/transaction/model/types';
import { CashReceiptPurpose, ProcessStep } from '@/entities/transaction/model/types';
import { HeaderType} from '@/entities/common/model/types';
import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
import { useCashReceiptManualIssueMutation } from '@/entities/transaction/api/use-cash-receipt-manual-issue';
export const CashReceitHandWrittenIssuancePage = () => {
const { navigate } = useNavigate();
// 1 or 2
const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
const [businessNumber, setBusinessNumber] = useState<string>('5459577852');
const [purpose, setPurpose] = useState<CashReceiptPurpose>(CashReceiptPurpose.INCOME_DEDUCTION);
const [productName, setProductName] = useState<string>('상품명');
const [buyerName, setBuyerName] = useState<string>('구매자명');
const [issueNumber, setIssueNumber] = useState<string>('01012341234');
const [email, setEmail] = useState<string>('test123@nicepay.com');
const [phoneNumber, setPhoneNumber] = useState<string>('01012341234');
const [supplyAmount, setSupplyAmount] = useState<number | string>(9091);
const [vatAmount, setVatAmount] = useState<number | string>(909);
const [taxFreeAmount, setTaxFreeAmount] = useState<number | string>(0);
const [serviceCharge, setServiceCharge] = useState<number | string>(0);
useSetHeaderTitle('수기 발행');
useSetHeaderType(HeaderType.RightClose);
useSetFooterMode(false);
const { mutateAsync: cashReceiptManualIssue } = useCashReceiptManualIssueMutation();
const callManualIssue = () => {
let params = {
businessNumber: businessNumber,
purpose: purpose,
productName: productName,
buyerName: buyerName,
issueNumber: issueNumber,
email: email,
phoneNumber: phoneNumber,
supplyAmount: 9091,
vatAmount: 909,
taxFreeAmount: 0,
serviceCharge: 0
};
cashReceiptManualIssue(params).then((rs) => {
console.log(rs);
alert('완료');
navigate(PATHS.transaction.cashReceipt.list);
});
};
const onClickToChangeTab = () => {
if(processStep === ProcessStep.One){
setProcessStep(ProcessStep.Two);
}
else if(processStep === ProcessStep.Two){
callManualIssue();
// 완료시?
alert('완료');
navigate(PATHS.transaction.cashReceipt.list);
//alert('완료');
// navigate(PATHS.transaction.cashReceipt.list);
}
};
@@ -49,21 +85,47 @@ export const CashReceitHandWrittenIssuancePage = () => {
></div>
}
</div>
</div>
{ (processStep === ProcessStep.One) &&
<CashReceiptHandWrittenIssuanceStep1></CashReceiptHandWrittenIssuanceStep1>
<CashReceiptHandWrittenIssuanceStep1
businessNumber={ businessNumber }
purpose={ purpose }
productName={ productName }
buyerName={ buyerName }
issueNumber={ issueNumber }
email={ email }
phoneNumber={ phoneNumber }
setBusinessNumber={ setBusinessNumber }
setPurpose={ setPurpose }
setProductName={ setProductName }
setBuyerName={ setBuyerName }
setIssueNumber={ setIssueNumber }
setEmail={ setEmail }
setPhoneNumber={ setPhoneNumber }
></CashReceiptHandWrittenIssuanceStep1>
}
{ (processStep === ProcessStep.Two) &&
<CashReceiptHandWrittenIssuanceStep2
setProcessStep={ setProcessStep }
supplyAmount={ supplyAmount }
vatAmount={ vatAmount }
taxFreeAmount={ taxFreeAmount }
serviceCharge={ serviceCharge }
setSupplyAmount={ setSupplyAmount }
setVatAmount={ setVatAmount }
setTaxFreeAmount={ setTaxFreeAmount }
setServiceCharge={ setServiceCharge }
></CashReceiptHandWrittenIssuanceStep2>
}
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToChangeTab() }
>다음</button>
>
{ (processStep === ProcessStep.One) && '다음' }
{ (processStep === ProcessStep.Two) && '발행' }
</button>
</div>
</div>
</div>

8
src/pages/transaction/cash-receipt/list-page.tsx
View File

@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { CashReceiptList } from '@/entities/transaction/ui/cash-receipt-list';
import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
import { CashReceiptListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
import { useCashReceiptListMutation } from '@/entities/transaction/api/use-cash-receipt-list-mutation';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
@@ -63,17 +63,17 @@ export const CashReceiptListPage = () => {
};
cashReceiptList(listParams).then((rs) => {
console.log(rs)
setListItems(assembleData(rs.content));
});
};
const assembleData = (content: Array<ListItem>) => {
const assembleData = (content: Array<CashReceiptListItem>) => {
let data: any = {};
if(content && content.length > 0){
for(let i=0;i<content?.length;i++){
let stateDate = content[i]?.stateDate;
let groupDate = stateDate?.substring(0, 8);
let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
if(!!groupDate && !data.hasOwnProperty(groupDate)){
data[groupDate] = [];
}

48
src/pages/transaction/escrow/detail-page.tsx
View File

@@ -28,22 +28,29 @@ import {
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { EscrowMailResendBottomSheet } from '@/entities/transaction/ui/escrow-mail-resend-bottom-sheet';
import { useEscrowMailResendMutation } from '@/entities/transaction/api/use-escrow-mail-resend-mutation';
export const EscrowDetailPage = () => {
const { navigate } = useNavigate();
const location = useLocation();
const [amountInfo, setAmountInfo] = useState<ImportantInfo>();
const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
const [escrowInfo, setEscrowInfo] = useState<EscrowInfo>();
const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
const [showImportantInfo, setShowImportantInfo] = useState<boolean>(false);
const [showEscroInfo, setShowEscroInfo] = useState<boolean>(false);
const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
const [orderNumber, setOrderNumber] = useState<string>();
const [tid, setTid] = useState<string>();
useSetHeaderTitle('에스크로 상세');
useSetHeaderType(HeaderType.RightClose);
@@ -52,26 +59,47 @@ export const EscrowDetailPage = () => {
});
useSetFooterMode(false);
const { mutateAsync: escroDetail } = useEscrowDetailMutation();
const { mutateAsync: escrowDetail } = useEscrowDetailMutation();
const { mutateAsync: escrowMailResend } = useEscrowMailResendMutation()
const callDetail = () => {
let escroDetailParams: EscrowDetailParams = {
issueNumber: location?.state.issueNumber,
};
escroDetail(escroDetailParams).then((rs: DetailResponse) => {
escrowDetail(escroDetailParams).then((rs: DetailResponse) => {
setImportantInfo(rs.importantInfo);
setEscrowInfo(rs.escrowInfo);
setPaymentInfo(rs.paymentInfo);
setTransactionInfo(rs.transactionInfo);
setSettlementInfo(rs.settlementInfo);
setOrderNumber(rs.importantInfo?.ordNo);
setTid(rs.importantInfo?.tid);
});
};
useEffect(() => {
callDetail();
}, []);
const onClickToShowMailResend = () => {
setBottomSheetOn(true);
};
const callMailResend = () => {
let params = {
orderNumber: orderNumber,
tid: tid,
};
escrowMailResend(params).then((rs: any) => {
console.log(rs);
});
};
const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
if(infoWrapKey === InfoWrapKeys.Important){
if(infoWrapKey === InfoWrapKeys.Amount){
setShowAmountInfo(!showAmountInfo);
}
else if(infoWrapKey === InfoWrapKeys.Important){
setShowImportantInfo(!showImportantInfo);
}
else if(infoWrapKey === InfoWrapKeys.Escrow){
@@ -98,8 +126,7 @@ export const EscrowDetailPage = () => {
<ImportantInfoWrap
transactionCategory={ TransactionCategory.Escrow }
importantInfo={ importantInfo }
show={ showImportantInfo }
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
></ImportantInfoWrap>
<div className="txn-divider minus"></div>
<EscrowInfoWrap
@@ -132,9 +159,20 @@ export const EscrowDetailPage = () => {
<div className="txn-divider"></div>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToShowMailResend() }
>메일 재발송</button>
</div>
</div>
</div>
</main>
<EscrowMailResendBottomSheet
setBottomSheetOn={ setBottomSheetOn }
bottomSheetOn={ bottomSheetOn }
callMailResend={ callMailResend }
></EscrowMailResendBottomSheet>
</>
);
};

27
src/pages/transaction/escrow/list-page.tsx
View File

@@ -1,10 +1,11 @@
import moment from 'moment';
import { useEffect, useState } from 'react';
import { useStore } from '@/shared/model/store';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { EscrowList } from '@/entities/transaction/ui/escrow-list';
import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
import { EscrowListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
@@ -26,14 +27,15 @@ const serviceCodes = [
export const EscrowListPage = () => {
const { navigate } = useNavigate();
const userInfo = useStore((state) => state.UserStore.UserInfo);
const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
const [listItems, setListItems] = useState({});
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
useSetHeaderTitle('에스크로');
useSetHeaderType(HeaderType.LeftArrow);
@@ -49,32 +51,33 @@ export const EscrowListPage = () => {
sortBy?: string,
val?: string
}) => {
pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
// pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
setPageParam(pageParam);
let listParams = {
mid: "nictest001m",
searchType: "ORDER_NUMBER",
searchKeyword: "01384234",
mid: 'nictest001m',
searchType: 'ORDER_NUMBER',
searchKeyword: '',
startDate: startDate,
endDate: endDate,
deliveryStatus: "ALL",
settlementStatus: "ALL",
deliveryStatus: 'ALL',
settlementStatus: 'ALL',
minAmount: 0,
maxAmount: 999999999,
pagination: pageParam
};
console.log(listParams)
escrowList(listParams).then((rs) => {
setListItems(assembleData(rs.content));
});
};
const assembleData = (content: Array<ListItem>) => {
const assembleData = (content: Array<EscrowListItem>) => {
let data: any = {};
if(content && content.length > 0){
for(let i=0;i<content?.length;i++){
let stateDate = content[i]?.stateDate;
let groupDate = stateDate?.substring(0, 8);
let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
if(!!groupDate && !data.hasOwnProperty(groupDate)){
data[groupDate] = [];
}

4
src/pages/transaction/transaction-pages.tsx
View File

@@ -11,7 +11,7 @@ import { EscrowListPage } from './escrow/list-page';
import { EscrowDetailPage } from './escrow/detail-page';
import { BillingListPage } from './billing/list-page';
import { BillingDetailPage } from './billing/detail-page';
import { BillingPaymentRequestPage } from './billing/payment-request-page';
import { BillingChargePage } from './billing/charge-page';
export const TransactionPages = () => {
@@ -35,7 +35,7 @@ export const TransactionPages = () => {
<Route path={ROUTE_NAMES.transaction.billing.base}>
<Route path={ROUTE_NAMES.transaction.billing.list} element={<BillingListPage />} />
<Route path={ROUTE_NAMES.transaction.billing.detail} element={<BillingDetailPage />} />
<Route path={ROUTE_NAMES.transaction.billing.paymentRequest} element={<BillingPaymentRequestPage />} />
<Route path={ROUTE_NAMES.transaction.billing.charge} element={<BillingChargePage />} />
</Route>
</SentryRoutes>
</>

8
src/shared/api/urls.ts
View File

@@ -148,15 +148,15 @@ export const API_URL = {
/* Escro Management - 에스크로 API */
escrowList: () => {
// POST: 에스크로 목록 조회
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/escrows/list`;
return `${API_BASE_URL}/api/v1/escrows/list`;
},
escrowDetail: () => {
// POST: 에스크로 목록 상세 조회
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/escrows/detail`;
return `${API_BASE_URL}/api/v1/escrows/detail`;
},
escroMailResend: () => {
escrowMailResend: () => {
// POST: 에스크로 메일 재발송
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/escrows/mail/resend`;
return `${API_BASE_URL}/api/v1/escrows/mail/resend`;
},

4
src/shared/constants/paths.ts
View File

@@ -65,9 +65,9 @@ export const PATHS: RouteNamesType = {
`${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.billing.base}`,
ROUTE_NAMES.transaction.billing.detail,
),
paymentRequest: generatePath(
charge: generatePath(
`${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.billing.base}`,
ROUTE_NAMES.transaction.billing.paymentRequest,
ROUTE_NAMES.transaction.billing.charge,
),
}
},

2
src/shared/constants/route-names.ts
View File

@@ -23,7 +23,7 @@ export const ROUTE_NAMES = {
base: '/billing/*',
list: 'list',
detail: 'detail',
paymentRequest: 'payment-request',
charge: 'charge',
}
},
settlement: {

11
src/shared/ui/assets/css/style-fix.css
View File

@@ -19,3 +19,14 @@ main {
.ic20.rot-180{
transform: rotate(180deg);
}
.txn-divider{
z-index: 20;
}
.txn-section{
z-index: 20;
background-color: #ffffff;
}
.kv-list{
padding-bottom: 20px;
z-index: 10;
}

348
src/shared/ui/assets/css/style.css
View File

File diff suppressed because it is too large Load Diff

11
src/shared/ui/assets/images/ico_del_minus.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="36" rx="6" fill="#F5F5F5"/>
<g clip-path="url(#clip0_2269_6765)">
<rect x="9" y="17" width="18" height="2" rx="1" fill="#999999"/>
</g>
<defs>
<clipPath id="clip0_2269_6765">
<rect x="8" y="8" width="20" height="20" rx="10" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B

11
src/shared/ui/assets/images/ico_menu_plus_no.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2269_6819)">
<rect x="1" y="9" width="18" height="2" rx="1" fill="#999999"/>
<rect x="11" y="1" width="18" height="2" rx="1" transform="rotate(90 11 1)" fill="#999999"/>
</g>
<defs>
<clipPath id="clip0_2269_6819">
<rect width="20" height="20" rx="10" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 414 B

13
src/shared/ui/assets/images/icon_ing11.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="80" height="80" rx="40" fill="#F4F8FF"/>
<path d="M62.9999 26V21.8988C62.9999 19.7455 61.2543 18 59.1011 18H54.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.9999 26V21.8988C16.9999 19.7455 18.7454 18 20.8987 18H24.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M62.9999 54V58.1012C62.9999 60.2545 61.2543 62 59.1011 62H54.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.9999 54V58.1012C16.9999 60.2545 18.7454 62 20.8987 62H24.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="22.9999" y="23" width="34" height="34" rx="4.36364" fill="#86CBFF"/>
<path d="M35.1083 45.9883C36.8146 47.6106 40.7305 49.2609 45.1779 45.9883" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="31.4999" y="33.5" width="1" height="2.5" rx="0.5" stroke="white"/>
<rect x="48.4999" y="33.5" width="1" height="3" rx="0.5" stroke="white"/>
<path d="M40.2273 34.5762V40.7018C40.2273 41.6249 39.8098 42.3507 38.3182 42.5164" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="21.4544" y1="40.0009" x2="58.5453" y2="40.0009" stroke="#F05D92" stroke-width="2.18182" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/shared/ui/assets/images/sample_banner_0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/shared/ui/assets/images/sample_banner_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

2
src/shared/ui/menu/index.tsx
View File

@@ -142,7 +142,7 @@ export const Menu = ({
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title">{ userInfo.usrid } <span>(madzoneviper)</span></div>
<div className="full-menu-title">{ 'nictest001m' } <span>(madzoneviper)</span></div>
<div className="full-menu-actions">
<button
className="full-menu-settings"

2
src/widgets/navigation/header.tsx
View File

@@ -118,7 +118,7 @@ export const HeaderNavigation = ({
}
{
(headerType === HeaderType.RightClose) &&
<div className="header-content sub">
<div className="header-content">
<div className="header-center">{ headerTitle }</div>
<div className="header-right">
<button className="header-btn">