diff --git a/public/images/ico_del_minus.svg b/public/images/ico_del_minus.svg new file mode 100644 index 0000000..1a67536 --- /dev/null +++ b/public/images/ico_del_minus.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/ico_menu_plus_no.svg b/public/images/ico_menu_plus_no.svg new file mode 100644 index 0000000..8b86aca --- /dev/null +++ b/public/images/ico_menu_plus_no.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/icon_ing11.svg b/public/images/icon_ing11.svg new file mode 100644 index 0000000..74eb248 --- /dev/null +++ b/public/images/icon_ing11.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/images/sample_banner_0.png b/public/images/sample_banner_0.png new file mode 100644 index 0000000..b793423 Binary files /dev/null and b/public/images/sample_banner_0.png differ diff --git a/public/images/sample_banner_1.png b/public/images/sample_banner_1.png new file mode 100644 index 0000000..0167924 Binary files /dev/null and b/public/images/sample_banner_1.png differ diff --git a/src/entities/common/model/types.ts b/src/entities/common/model/types.ts index 8e1395a..4d1529c 100644 --- a/src/entities/common/model/types.ts +++ b/src/entities/common/model/types.ts @@ -1,3 +1,7 @@ +export enum SuccessResult { + SUCCESS = 'SUCCESS', + FAIL = 'FAIL' +}; export interface DefaultRequestPagination { cursor: string; size: number; diff --git a/src/entities/transaction/api/use-billing-charge-mutation.ts b/src/entities/transaction/api/use-billing-charge-mutation.ts new file mode 100644 index 0000000..30d8913 --- /dev/null +++ b/src/entities/transaction/api/use-billing-charge-mutation.ts @@ -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(API_URL.billingDetail(), params), + ); +}; + +export const useBillingChargeMutation = (options?: UseMutationOptions) => { + const mutation = useMutation({ + ...options, + mutationFn: (params: BillingChargeParams) => billingCharge(params), + }); + + return { + ...mutation, + }; +}; diff --git a/src/entities/transaction/api/use-billing-detail-mutation.ts b/src/entities/transaction/api/use-billing-detail-mutation.ts index c3a7103..816a95b 100644 --- a/src/entities/transaction/api/use-billing-detail-mutation.ts +++ b/src/entities/transaction/api/use-billing-detail-mutation.ts @@ -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(API_URL.billingDetail(), params), + axios.post(API_URL.billingDetail(), params), ); }; -export const useBillingDetailMutation = (options?: UseMutationOptions) => { - const mutation = useMutation({ +export const useBillingDetailMutation = (options?: UseMutationOptions) => { + const mutation = useMutation({ ...options, mutationFn: (params: BillingDetailParams) => billingDetail(params), }); diff --git a/src/entities/transaction/api/use-cash-receipt-manual-issue.ts b/src/entities/transaction/api/use-cash-receipt-manual-issue.ts new file mode 100644 index 0000000..e530cdb --- /dev/null +++ b/src/entities/transaction/api/use-cash-receipt-manual-issue.ts @@ -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(API_URL.cashReceiptManualIssue(), params), + ); +}; + +export const useCashReceiptManualIssueMutation = (options?: UseMutationOptions) => { + const mutation = useMutation({ + ...options, + mutationFn: (params: CashReceiptManualIssueParams) => cashReceiptManualIssue(params), + }); + + return { + ...mutation, + }; +}; diff --git a/src/entities/transaction/api/use-cash-receipt-purpose-update.ts b/src/entities/transaction/api/use-cash-receipt-purpose-update.ts new file mode 100644 index 0000000..1b0843c --- /dev/null +++ b/src/entities/transaction/api/use-cash-receipt-purpose-update.ts @@ -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(API_URL.cashReceiptPurposeUpdate(), params), + ); +}; + +export const useCashReceiptPurposeUpdateMutation = (options?: UseMutationOptions) => { + const mutation = useMutation({ + ...options, + mutationFn: (params: CashReceiptPurposeUpdateParams) => cashReceiptPurposeUpdate(params), + }); + + return { + ...mutation, + }; +}; diff --git a/src/entities/transaction/api/use-escrow-mail-resend-mutation.ts b/src/entities/transaction/api/use-escrow-mail-resend-mutation.ts new file mode 100644 index 0000000..b356dbc --- /dev/null +++ b/src/entities/transaction/api/use-escrow-mail-resend-mutation.ts @@ -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(API_URL.escrowMailResend(), params), + ); +}; + +export const useEscrowMailResendMutation = (options?: UseMutationOptions) => { + const mutation = useMutation({ + ...options, + mutationFn: (params: EscrowMailResendParams) => escrowMailResend(params), + }); + + return { + ...mutation, + }; +}; diff --git a/src/entities/transaction/model/types.ts b/src/entities/transaction/model/types.ts index aeb51c3..bfecdb6 100644 --- a/src/entities/transaction/model/types.ts +++ b/src/entities/transaction/model/types.ts @@ -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> }; -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 DetailInfoProps extends DetailResponse{ - transactionCategory: TransactionCategory; +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; 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 { + +}; \ No newline at end of file diff --git a/src/entities/transaction/ui/billing-list.tsx b/src/entities/transaction/ui/billing-list.tsx index 61c2403..ac0ac76 100644 --- a/src/entities/transaction/ui/billing-list.tsx +++ b/src/entities/transaction/ui/billing-list.tsx @@ -25,7 +25,7 @@ export const BillingList = ({ }; const onClickToNavigate = () => { - navigate(PATHS.transaction.billing.paymentRequest); + navigate(PATHS.transaction.billing.charge); }; return ( diff --git a/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx b/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx index 73720cd..4833550 100644 --- a/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx +++ b/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx @@ -1,10 +1,44 @@ +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(() => { navigate(PATHS.transaction.cashReceipt.list); }); @@ -18,7 +52,7 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => { @@ -29,12 +63,14 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
@@ -45,6 +81,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => { ) => setProductName(e.target.value) } /> @@ -54,6 +92,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => { ) => setBuyerName(e.target.value) } /> @@ -63,6 +103,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => { ) => setIssueNumber(e.target.value) } /> @@ -72,6 +114,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => { ) => setEmail(e.target.value) } /> @@ -81,6 +125,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => { ) => setPhoneNumber(e.target.value) } /> diff --git a/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx b/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx index 6a90aeb..1c00e93 100644 --- a/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx +++ b/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx @@ -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 ( <>

발행 금액 입력

@@ -27,6 +49,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({ @@ -39,6 +62,8 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({ className="error" type="text" placeholder="" + value={ supplyAmount } + onChange={ (e: ChangeEvent) => setSupplyAmount(e.target.value) } /> @@ -49,26 +74,32 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({ className="error" type="text" placeholder="" + value={ vatAmount } + onChange={ (e: ChangeEvent) => setVatAmount(e.target.value) } />
-
발행번호
+
면세금액
) => setTaxFreeAmount(e.target.value) } />
-
이메일 주소
+
봉사료
) => setServiceCharge(e.target.value) } />
diff --git a/src/entities/transaction/ui/bottom-sheet-changes-cash-receit-uses.tsx b/src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx similarity index 51% rename from src/entities/transaction/ui/bottom-sheet-changes-cash-receit-uses.tsx rename to src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx index 7ea779e..7508e61 100644 --- a/src/entities/transaction/ui/bottom-sheet-changes-cash-receit-uses.tsx +++ b/src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx @@ -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) && +
+ } +

신청 방법을 선택하세요

@@ -13,9 +44,10 @@ export const BottomSheetChangesCashReceitUses = () => { className="close-btn" type="button" > - 닫기 onClickToClose() } />
@@ -35,9 +67,10 @@ export const BottomSheetChangesCashReceitUses = () => {
-
+ ); }; \ No newline at end of file diff --git a/src/entities/transaction/ui/bottom-sheet-email.tsx b/src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx similarity index 62% rename from src/entities/transaction/ui/bottom-sheet-email.tsx rename to src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx index a12f1f8..380cde3 100644 --- a/src/entities/transaction/ui/bottom-sheet-email.tsx +++ b/src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx @@ -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) && +
+ } +

이메일 주소를 선택하세요

@@ -16,6 +47,7 @@ export const BottomSheetEmail = () => { 닫기 onClickToClose() } />
@@ -27,7 +59,7 @@ export const BottomSheetEmail = () => {
메일
@@ -54,10 +86,10 @@ export const BottomSheetEmail = () => {
-
+ ); }; \ No newline at end of file diff --git a/src/entities/transaction/ui/info-wrap/amount-info-wrap.tsx b/src/entities/transaction/ui/info-wrap/amount-info-wrap.tsx index f58188e..a2acfd6 100644 --- a/src/entities/transaction/ui/info-wrap/amount-info-wrap.tsx +++ b/src/entities/transaction/ui/info-wrap/amount-info-wrap.tsx @@ -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> = { + 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> = { + // 신용카드 + '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 | undefined = amountInfo; + const subLi = () => { + let rs = []; + if(!!newAmountInfo && !!serviceCode && !!showSubItems[serviceCode]){ + for(let i=0;i + ·  { subItems[k]?.name } + + { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'string') && + newAmountInfo[k] + } + { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'number') && + + } + { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'date') && + moment(newAmountInfo[k]).format('YYYY.MM.DD') + } + + + ); + } + } + } + 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 }} >
    -
  • - ·  신용카드 - - - -
    • -
  • - ·  포인트 - - - -
    • -
  • - ·  쿠폰 - - - -
    • -
  • - ·  에스크로 - - - -
    • + { subLi() }
diff --git a/src/entities/transaction/ui/info-wrap/billing-info-wrap.tsx b/src/entities/transaction/ui/info-wrap/billing-info-wrap.tsx new file mode 100644 index 0000000..f84c5a1 --- /dev/null +++ b/src/entities/transaction/ui/info-wrap/billing-info-wrap.tsx @@ -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( +
  • + 할부개월 + { billingInfo?.installmentMonth }개월 할부 +
    • + ); + } + else{ + rs.push( +
  • + 할부개월 + 일시불 +
    • + ); + } + return rs; + }; + return ( + <> +
    +
    중요 정보
    +
      +
    • + 빌키 + { billingInfo?.billKey } +
      • +
    • + TID + { billingInfo?.tid } +
      • +
    • + 주분번호 + { billingInfo?.orderNumber } +
      • +
    • + 승인번호 + { billingInfo?.approvalNumber } +
      • +
    • + 승인일자 + { moment(billingInfo?.approvalDate).format('YYYY.MM.DD') } +
      • +
    • + 요청상태 + { billingInfo?.requestStatus } +
      • +
    • + 처리결과 + { billingInfo?.processResult } +
      • + { getInstallmentMonth() } +
    • + 상품명 + { billingInfo?.productName } +
      • +
    • + 구매자 + { billingInfo?.buyerName } +
      • +
    +
    + + ) +}; \ No newline at end of file diff --git a/src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx b/src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx index 302fea7..9d843fe 100644 --- a/src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx +++ b/src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx @@ -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,11 +8,7 @@ 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){ onClickToShowInfo(InfoWrapKeys.Issue); @@ -27,17 +22,46 @@ export const DetailInfoWrap = ({ className="section-title with-toggle" onClick={ () => onClickToSetShowInfo() } > - 정산 정보 + 상세 정보 - - - +
      +
    • + 취소일자 + { moment(detailInfo?.cancelDate).format('YYYY.MM.DD') } +
      • +
    • + 취소승인번호 + { detailInfo?.cancelApprovalNumber } +
      • +
    • + 현금영수증 + { detailInfo?.receiptInfo } +
      • +
    • + TID + { detailInfo?.tid } +
      • +
    • + 거래ID + { detailInfo?.merchantTid } +
      • +
    • + 서브몰명 + { detailInfo?.subMallName } +
      • +
    • + 서브몰 사업자 번호 + { detailInfo?.subMallBusinessNumber } +
      • +
    • + 발행경로 + { detailInfo?.issueChannel } +
      • +
    • + 실패사유 + { detailInfo?.failureReason } +
      • +
    ) diff --git a/src/entities/transaction/ui/info-wrap/escrow-info-wrap.tsx b/src/entities/transaction/ui/info-wrap/escrow-info-wrap.tsx index 318fd4f..86bab13 100644 --- a/src/entities/transaction/ui/info-wrap/escrow-info-wrap.tsx +++ b/src/entities/transaction/ui/info-wrap/escrow-info-wrap.tsx @@ -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 }} > - +
  • + 배송상태 + { escrowInfo?.deliveryStatus } +
    • +
  • + 배송등록 + { moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') } +
    • +
  • + 배송완료 + { moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') } +
    • +
  • + 구매확인 + { moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') } +
    • +
  • + 구매거절 + { escrowInfo?.purchaseRejectReason } +
    • +
  • + 거절사유 + { escrowInfo?.rejectReason } +
    • +
  • + 에스크로인증번호 + { escrowInfo?.escrowCertNumber } +
    • +
  • + 택배사 + { escrowInfo?.deliveryCompany } +
    • +
  • + 운송장번호 + { escrowInfo?.trackingNumber } +
    • +
  • + 배송주소 + { escrowInfo?.deliveryAddress } +
    • diff --git a/src/entities/transaction/ui/info-wrap/important-info-wrap.tsx b/src/entities/transaction/ui/info-wrap/important-info-wrap.tsx index a7eb684..bb5bd55 100644 --- a/src/entities/transaction/ui/info-wrap/important-info-wrap.tsx +++ b/src/entities/transaction/ui/info-wrap/important-info-wrap.tsx @@ -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 -}: DetailInfoProps) => { - - const onClickToSetShowInfo = () => { - if(!!onClickToShowInfo){ - onClickToShowInfo(InfoWrapKeys.Important); - } + serviceCode + }: DetailInfoProps) => { + + const subItems: Record> = { + 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> = { + // 신용카드 + '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 | undefined = importantInfo; + const subLi = () => { + let rs = []; + + if(!!newImportantInfo && !!serviceCode && !!showSubItems[serviceCode]){ + for(let i=0;i + ·  { subItems[k]?.name } + + { (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'string') && + newImportantInfo[k] + } + { (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'number') && + + } + { (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'date') && + moment(newImportantInfo[k]).format('YYYY.MM.DD') + } + + + ); + } + } + } + return rs; + }; + return ( <>
    중요 정보
      -
    • - 주문번호 - { importantInfo?.ordNo } -
      • -
    • - TID - { importantInfo?.tid } -
      • -
    • - 결제상태 - { importantInfo?.tradeStatus } -
      • -
    • - 결제수단 - { importantInfo?.tradeMethod } -
      • -
    • - 승인일 - { moment(importantInfo?.approvalDate).format('YYYY.MM.DD') } -
      • - { - /* -
    • - 취소일 - 2025.06.08 -
      • - */ + { (transactionCategory === TransactionCategory.AllTransaction) && + subLi() } -
    • - 상품명 - { importantInfo?.productName } -
      • + { (transactionCategory === TransactionCategory.Escrow) && + <> +
    • + 주문번호 + { importantInfo?.orderNumber } +
      • +
    • + TID + { importantInfo?.tid } +
      • +
    • + 거래상태 + { importantInfo?.transactionStatus } +
      • +
    • + 결제수단 + { importantInfo?.paymentMethod } +
      • +
    • + 승인일 + { moment(importantInfo?.approvalDateTime).format('YYYY.MM.DD HH:mm:ss') } +
      • +
    • + 취소일 + { importantInfo?.cancelDate } +
      • +
    • + 상품명 + { importantInfo?.productName } +
      • + + } +
    diff --git a/src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx b/src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx index 8f3eec2..448f654 100644 --- a/src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx +++ b/src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx @@ -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 ( <>
    -
    onClickToSetShowInfo() } - > - 정산 정보 -
    - - - +
    발급 정보
    +
      +
    • + 승인번호 + { issueInfo?.approvalNumber } +
      • +
    • + 발행번호 + { issueInfo?.issueNumber } +
      • +
    • + 발행일시 + { moment(issueInfo?.issueDateTime).format('YYYY.MM.DD HH:mm:ss') } +
      • +
    • + 용도 + { purpose } +
      • +
    • + 결제수단 + { issueInfo?.paymentMethod } +
      • +
    • + 상품명 + { issueInfo?.productName } +
      • +
    • + 진행상태 + { issueInfo?.transmissionStatus } +
      • +
    • + 거래구분 + { issueInfo?.transactionType } +
      • +
    ) diff --git a/src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx b/src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx index 6eb50a4..8c61e08 100644 --- a/src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx +++ b/src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx @@ -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> = { + 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> = { + // 신용카드 + '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 | undefined = partCancelInfo; + const subLi = () => { + let rs = []; + + if(!!newPartCancelInfo && !!serviceCode && !!showSubItems[serviceCode]){ + for(let i=0;i + ·  { subItems[k]?.name } + + { (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'string') && + newPartCancelInfo[k] + } + { (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'number') && + + } + { (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'date') && + moment(newPartCancelInfo[k]).format('YYYY.MM.DD') + } + + + ); + } + } + } + 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 }} > -
  • - 원거래 TID - { partCancelInfo?.originalTid } -
    • -
  • - 원거래 금액 - - - -
    • -
  • - 부분취소 TID - nictest00m01012506171629294150 -
    • -
  • - 부분취소 금액 - 50,000원 -
    • -
  • - 부분취소 후 잔액 - - - -
    • + { subLi() } diff --git a/src/entities/transaction/ui/info-wrap/payment-info-wrap.tsx b/src/entities/transaction/ui/info-wrap/payment-info-wrap.tsx index 39d3160..a53f201 100644 --- a/src/entities/transaction/ui/info-wrap/payment-info-wrap.tsx +++ b/src/entities/transaction/ui/info-wrap/payment-info-wrap.tsx @@ -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> = { + 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> = { + // 신용카드 + '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 | undefined = paymentInfo; + const subLi = () => { + let rs = []; + + if(!!newPaymentInfo && !!serviceCode && !!showSubItems[serviceCode]){ + for(let i=0;i + ·  { subItems[k]?.name } + + { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') && + newPaymentInfo[k] + } + { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'number') && + + } + { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'date') && + moment(newPaymentInfo[k]).format('YYYY.MM.DD') + } + + + ); + } + } + } + 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 }} > -
  • - 승인 금액 - 10,000,000원 -
    • -
  • - 부가세 - 0원 -
    • + { (transactionCategory === TransactionCategory.AllTransaction) && + subLi() + } + { (transactionCategory === TransactionCategory.Escrow) && + <> +
  • + 승인 금액 + + + +
    • +
  • + 승인 번호 + { paymentInfo?.approvalNumber } +
    • + + } diff --git a/src/entities/transaction/ui/info-wrap/settlement-info-wrap.tsx b/src/entities/transaction/ui/info-wrap/settlement-info-wrap.tsx index 42bf5d1..87f8607 100644 --- a/src/entities/transaction/ui/info-wrap/settlement-info-wrap.tsx +++ b/src/entities/transaction/ui/info-wrap/settlement-info-wrap.tsx @@ -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> = { + approvalSettleDate: {name: '승인정산일', type: 'date'}, + approvalSettleAmount: {name: '승인정산금액', type: 'number'}, + cancelSettleDate: {name: '취소정산일', type: 'date'}, + cancelSettleAmount: {name: '취소정산금액', type: 'number'}, + }; + + const showSubItems: Record> = { + // 신용카드 + '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 | undefined = settlementInfo; + const subLi = () => { + let rs = []; + + if(!!newSettlementInfo && !!serviceCode && !!showSubItems[serviceCode]){ + for(let i=0;i + ·  { subItems[k]?.name } + + { (checkValue(newSettlementInfo[k]) && subItems[k]?.type === 'string') && + newSettlementInfo[k] + } + { (checkValue(newSettlementInfo[k]) && subItems[k]?.type === 'number') && + + } + { (checkValue(newSettlementInfo[k]) && subItems[k]?.type === 'date') && + moment(newSettlementInfo[k]).format('YYYY.MM.DD') + } + + + ); + } + } + } + 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 }} > -
  • - 정산 예정일 - { moment(settlementInfo?.approvalSettleDate).format('YYYY.MM.DD') } -
    • -
  • - 정산 상태 - 예정 -
    • + { subLi() } diff --git a/src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx b/src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx index 217ef0c..5e51278 100644 --- a/src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx +++ b/src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx @@ -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> = { + 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> = { + // 신용카드 + '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 | undefined = transactionInfo; + const subLi = () => { + let rs = []; + + if(!!newTransactionInfo && !!serviceCode && !!showSubItems[serviceCode]){ + for(let i=0;i + ·  { subItems[k]?.name } + + { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'string') && + newTransactionInfo[k] + } + { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'number') && + + } + { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'date') && + moment(newTransactionInfo[k]).format('YYYY.MM.DD') + } + + + ); + } + } + } + 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 +121,22 @@ export const TransactionInfoWrap = ({ variants={ variants } transition={{ duration: 0.3 }} > -
  • - 가맹점명 - NICE PAY -
    • -
  • - 사업자번호 - 123-45-67890 -
    • + { (transactionCategory === TransactionCategory.AllTransaction) && + subLi() + } + { (transactionCategory === TransactionCategory.Escrow) && + <> +
  • + 가맹점명 + NICE PAY +
    • +
  • + 사업자번호 + 123-45-67890 +
    • + + } + diff --git a/src/entities/transaction/ui/list-date-group.tsx b/src/entities/transaction/ui/list-date-group.tsx index b5628d3..48af300 100644 --- a/src/entities/transaction/ui/list-date-group.tsx +++ b/src/entities/transaction/ui/list-date-group.tsx @@ -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 } > ) } diff --git a/src/entities/transaction/ui/list-item.tsx b/src/entities/transaction/ui/list-item.tsx index 187ee0b..46169c8 100644 --- a/src/entities/transaction/ui/list-item.tsx +++ b/src/entities/transaction/ui/list-item.tsx @@ -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 time = stateDate?.substring(8, 12); - let timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4); - return timeStr; + let timeStr = ''; + if(transactionCategory === TransactionCategory.AllTransaction){ + let time = stateDate?.substring(8, 12); + 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( + <> + { getTime() } + | + { stateName } + | + { mid } + + ); + } + else if(transactionCategory === TransactionCategory.CashReceipt){ + rs.push( + <> + { getTime() } + | + { issueStatus } + | + { paymentMethod } + | + { processResult } + + ); + } + else if(transactionCategory === TransactionCategory.Escrow){ + rs.push( + <> + { getTime() } + | + { deliveryStatus } + | + { settlementStatus } + | + { cancelStatus } + + ); + } + else if(transactionCategory === TransactionCategory.Billing){ + rs.push( + <> + { getTime() } + | + { processResult } + | + { paymentMethod } + + ); + } + return rs; }; return ( @@ -97,13 +171,9 @@ export const ListItem = ({
    -
    { `${serviceName}(${serviceDetailName})` }
    +
    { getTitle() }
    - { stateName } - | - { getTime() } - | - { mid } + { getDetail() } { (!!installmentMonth && parseInt(installmentMonth) > 1) && <> | diff --git a/src/entities/user/lib/use-user-info.ts b/src/entities/user/lib/use-user-info.ts index 276b207..ca6e3ba 100644 --- a/src/entities/user/lib/use-user-info.ts +++ b/src/entities/user/lib/use-user-info.ts @@ -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); } } diff --git a/src/entities/user/model/types.ts b/src/entities/user/model/types.ts index 7177ef9..97b05a8 100644 --- a/src/entities/user/model/types.ts +++ b/src/entities/user/model/types.ts @@ -14,7 +14,7 @@ export interface LoginResponse { accessTokenExpiresIn?: number; refreshTokenExpiresIn?: number; menuGrants?: Array; - usrid?: string; + // usrid?: string; clientAddressIP?: string; tempToken?: string, tempTokenExpiresIn?: number; diff --git a/src/pages/home/home-page.tsx b/src/pages/home/home-page.tsx index f1c3b20..d266036 100644 --- a/src/pages/home/home-page.tsx +++ b/src/pages/home/home-page.tsx @@ -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); } diff --git a/src/pages/transaction/all-transaction/detail-page.tsx b/src/pages/transaction/all-transaction/detail-page.tsx index 47c5af8..625ad2f 100644 --- a/src/pages/transaction/all-transaction/detail-page.tsx +++ b/src/pages/transaction/all-transaction/detail-page.tsx @@ -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(); const [importantInfo, setImportantInfo] = useState(); @@ -136,18 +137,21 @@ export const AllTransactionDetailPage = () => { transactionCategory={ TransactionCategory.AllTransaction } amountInfo={ amountInfo } show={ showAmountInfo } - tid={ tid } + tid={ tid } + serviceCode={ serviceCode } onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) } > -
    +
    -
    +
    onClickToShowInfo(infoWrapKey) } > @@ -155,6 +159,7 @@ export const AllTransactionDetailPage = () => { onClickToShowInfo(infoWrapKey) } > @@ -162,6 +167,7 @@ export const AllTransactionDetailPage = () => { onClickToShowInfo(infoWrapKey) } > @@ -169,6 +175,7 @@ export const AllTransactionDetailPage = () => { onClickToShowInfo(infoWrapKey) } > diff --git a/src/pages/transaction/all-transaction/list-page.tsx b/src/pages/transaction/all-transaction/list-page.tsx index 00d7139..e599b7b 100644 --- a/src/pages/transaction/all-transaction/list-page.tsx +++ b/src/pages/transaction/all-transaction/list-page.tsx @@ -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) => { + const assembleData = (content: Array) => { let data: any = {}; if(content && content.length > 0){ for(let i=0;i { if(!!serviceCodeOptions && serviceCodeOptions.length > 0) for(let i=0;i{ serviceCodeOptions[i]?.text } + ) } return rs; diff --git a/src/pages/transaction/billing/payment-request-page.tsx b/src/pages/transaction/billing/charge-page.tsx similarity index 55% rename from src/pages/transaction/billing/payment-request-page.tsx rename to src/pages/transaction/billing/charge-page.tsx index 31825c1..5b33abc 100644 --- a/src/pages/transaction/billing/payment-request-page.tsx +++ b/src/pages/transaction/billing/charge-page.tsx @@ -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('BIKYvattest01m'); + const [productName, setProductName] = useState('테스트상품123'); + const [productAmount, setProductAmount] = useState(1000000); + const [orderNumber, setOrderNumber] = useState('P146733723'); + const [buyerName, setBuyerName] = useState('김테스트'); + const [paymentRequestDate, setPaymentRequestDate] = useState('2025-06-08'); + const [installmentMonth, setInstallmentMonth] = useState('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( + + ); + rs.push( + + ); + for(let i=2;i<=24;i++){ + let val = (i < 10)? '0'+i: ''+i; + rs.push( + + ); + }; + return rs; + }; + return ( <>
    @@ -26,15 +82,14 @@ export const BillingPaymentRequestPage = () => {
    결제 정보 입력
    -
    빌키 *
    @@ -43,7 +98,8 @@ export const BillingPaymentRequestPage = () => {
    ) => setProductName(e.target.value) } />
    @@ -52,7 +108,8 @@ export const BillingPaymentRequestPage = () => {
    ) => setProductAmount(e.target.value) } />
    @@ -61,7 +118,8 @@ export const BillingPaymentRequestPage = () => {
    ) => setOrderNumber(e.target.value) } />
    @@ -70,7 +128,8 @@ export const BillingPaymentRequestPage = () => {
    ) => setBuyerName(e.target.value) } />
    @@ -81,8 +140,8 @@ export const BillingPaymentRequestPage = () => {
    - +
    diff --git a/src/pages/transaction/billing/detail-page.tsx b/src/pages/transaction/billing/detail-page.tsx index 301da46..9f59fec 100644 --- a/src/pages/transaction/billing/detail-page.tsx +++ b/src/pages/transaction/billing/detail-page.tsx @@ -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,23 +17,14 @@ 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 [billingInfo, setBillingInfo] = useState(); - const [amountInfo, setAmountInfo] = useState(); - const [importantInfo, setImportantInfo] = useState(); - const [paymentInfo, setPaymentInfo] = useState(); - const [transactionInfo, setTransactionInfo] = useState(); - const [settlementInfo, setSettlementInfo] = useState(); - const [partCancelInfo, setPartCancelInfo] = useState(); - const [showAmount, setShowAmount] = useState(false); - const [showPayment, setShowPayment] = useState(false); - const [showTransaction, setShowTransaction] = useState(false); - const [showSettlement, setShowSettlement] = useState(false); - const [showPartCancel, setShowPartCancel] = useState(false); - useSetHeaderTitle('빌링 상세'); useSetHeaderType(HeaderType.RightClose); useSetOnBack(() => { @@ -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 ( <>
    @@ -98,48 +53,28 @@ export const BillingDetailPage = () => {
    - onClickToShowInfo(info) } - > -
    - -
    - onClickToShowInfo(info) } - > +
    +
    +
    + + 원 +
    +
    + { 'nitnitni' } +
    +
    + +
    - onClickToShowInfo(info) } - > -
    - onClickToShowInfo(info) } - > -
    - onClickToShowInfo(info) } - > +
    -
    diff --git a/src/pages/transaction/billing/list-page.tsx b/src/pages/transaction/billing/list-page.tsx index 3f495c6..d7de029 100644 --- a/src/pages/transaction/billing/list-page.tsx +++ b/src/pages/transaction/billing/list-page.tsx @@ -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('all'); const [sortBy, setSortBy] = useState(SortByKeys.New); const [listItems, setListItems] = useState({}); const [filterOn, setFilterOn] = useState(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) => { + const assembleData = (content: Array) => { let data: any = {}; if(content && content.length > 0){ for(let i=0;i { const { navigate } = useNavigate(); @@ -29,8 +30,9 @@ export const CashReceiptDetailPage = () => { const [issueInfo, setIssueInfo] = useState(); const [detailInfo, setDetailInfo] = useState(); - const [showIssueInfo, setShowIssueInfo] = useState(false); const [showDetailInfo, setShowDetailInfo] = useState(false); + const [bottomSheetOn, setBottomSheetOn] = useState(false); + const [purpose, setPurpose] = useState(); 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 ( <>
    @@ -73,8 +96,7 @@ export const CashReceiptDetailPage = () => { onClickToShowInfo(infoWrapKey) } + purpose={ purpose } >
    { > +
    + +
    + ); }; \ No newline at end of file diff --git a/src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx b/src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx index db32de1..03d0968 100644 --- a/src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx +++ b/src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx @@ -1,30 +1,66 @@ -import {useState} from 'react'; -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 {HeaderType} from '@/entities/common/model/types'; -import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/sub-layout/use-sub-layout'; +import { useState } from 'react'; +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 { 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.One); + const [businessNumber, setBusinessNumber] = useState('5459577852'); + const [purpose, setPurpose] = useState(CashReceiptPurpose.INCOME_DEDUCTION); + const [productName, setProductName] = useState('상품명'); + const [buyerName, setBuyerName] = useState('구매자명'); + const [issueNumber, setIssueNumber] = useState('01012341234'); + const [email, setEmail] = useState('test123@nicepay.com'); + const [phoneNumber, setPhoneNumber] = useState('01012341234'); + const [supplyAmount, setSupplyAmount] = useState(9091); + const [vatAmount, setVatAmount] = useState(909); + const [taxFreeAmount, setTaxFreeAmount] = useState(0); + const [serviceCharge, setServiceCharge] = useState(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); } }; @@ -36,34 +72,60 @@ export const CashReceitHandWrittenIssuancePage = () => {
    - {(processStep === ProcessStep.One) && -
    - } - {(processStep === ProcessStep.Two) && -
    - } + {(processStep === ProcessStep.One) && +
    + } + {(processStep === ProcessStep.Two) && +
    + }
    - { (processStep === ProcessStep.One) && - - } - { (processStep === ProcessStep.Two) && - - }
    + { (processStep === ProcessStep.One) && + + } + { (processStep === ProcessStep.Two) && + + }
    + > + { (processStep === ProcessStep.One) && '다음' } + { (processStep === ProcessStep.Two) && '발행' } +
    diff --git a/src/pages/transaction/cash-receipt/list-page.tsx b/src/pages/transaction/cash-receipt/list-page.tsx index 4f0555b..c235ea8 100644 --- a/src/pages/transaction/cash-receipt/list-page.tsx +++ b/src/pages/transaction/cash-receipt/list-page.tsx @@ -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) => { + const assembleData = (content: Array) => { let data: any = {}; if(content && content.length > 0){ for(let i=0;i { const { navigate } = useNavigate(); const location = useLocation(); + const [amountInfo, setAmountInfo] = useState(); const [importantInfo, setImportantInfo] = useState(); const [escrowInfo, setEscrowInfo] = useState(); const [paymentInfo, setPaymentInfo] = useState(); const [transactionInfo, setTransactionInfo] = useState(); const [settlementInfo, setSettlementInfo] = useState(); + const [showAmountInfo, setShowAmountInfo] = useState(false); const [showImportantInfo, setShowImportantInfo] = useState(false); const [showEscroInfo, setShowEscroInfo] = useState(false); const [showPaymentInfo, setShowPaymentInfo] = useState(false); const [showTransactionInfo, setShowTransactionInfo] = useState(false); const [showSettlementInfo, setShowSettlementInfo] = useState(false); - + const [bottomSheetOn, setBottomSheetOn] = useState(false); + + const [orderNumber, setOrderNumber] = useState(); + const [tid, setTid] = useState(); 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 = () => { onClickToShowInfo(infoWrapKey) } + >
    {
    +
    + +
    + ); }; \ No newline at end of file diff --git a/src/pages/transaction/escrow/list-page.tsx b/src/pages/transaction/escrow/list-page.tsx index b285e58..2d193dd 100644 --- a/src/pages/transaction/escrow/list-page.tsx +++ b/src/pages/transaction/escrow/list-page.tsx @@ -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('all'); const [sortBy, setSortBy] = useState(SortByKeys.New); const [listItems, setListItems] = useState({}); const [filterOn, setFilterOn] = useState(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) => { + const assembleData = (content: Array) => { let data: any = {}; if(content && content.length > 0){ for(let i=0;i { @@ -35,7 +35,7 @@ export const TransactionPages = () => { } /> } /> - } /> + } /> diff --git a/src/shared/api/urls.ts b/src/shared/api/urls.ts index 1b63047..34f839f 100644 --- a/src/shared/api/urls.ts +++ b/src/shared/api/urls.ts @@ -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`; }, diff --git a/src/shared/constants/paths.ts b/src/shared/constants/paths.ts index 2ba693b..139eb0b 100644 --- a/src/shared/constants/paths.ts +++ b/src/shared/constants/paths.ts @@ -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, ), } }, diff --git a/src/shared/constants/route-names.ts b/src/shared/constants/route-names.ts index 289ffa3..4478733 100644 --- a/src/shared/constants/route-names.ts +++ b/src/shared/constants/route-names.ts @@ -23,7 +23,7 @@ export const ROUTE_NAMES = { base: '/billing/*', list: 'list', detail: 'detail', - paymentRequest: 'payment-request', + charge: 'charge', } }, settlement: { diff --git a/src/shared/ui/assets/css/style-fix.css b/src/shared/ui/assets/css/style-fix.css index 09cd30c..ed38e09 100644 --- a/src/shared/ui/assets/css/style-fix.css +++ b/src/shared/ui/assets/css/style-fix.css @@ -18,4 +18,15 @@ 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; } \ No newline at end of file diff --git a/src/shared/ui/assets/css/style.css b/src/shared/ui/assets/css/style.css index 8a5b14e..55b763c 100644 --- a/src/shared/ui/assets/css/style.css +++ b/src/shared/ui/assets/css/style.css @@ -105,7 +105,11 @@ body {} } .ht-20 {height: 20px !important;} +.pt-10 {padding-top: 10px !important;} +.pt-16 {padding-top: 16px !important;} .pt-20 {padding-top: 20px !important;} +.pt-30 {padding-top: 30px !important;} +.pt-46 {padding-top: 46px !important;} .pb-120 {padding-bottom: 120px !important;} .mt-30 {margin-top: 30px !important;} @@ -114,6 +118,7 @@ body {} .mt-10 {margin-top: 10px !important;} .mb-16 {margin-bottom: 16px !important;} .mb-20 {margin-bottom: 20px !important;} +.mb-30 {margin-bottom: 30px !important;} .mr-0 {margin-right: 0px !important;} .mr-10 {margin-right: 10px !important;} @@ -127,10 +132,10 @@ body {} text-align: right; } -.flex-1 {flex: 1;} -.flex-2 {flex: 2;} -.flex-3 {flex: 3;} -.flex-4 {flex: 4;} +.flex-1 {flex: 1; min-width: inherit !important;} +.flex-2 {flex: 2; min-width: inherit !important;} +.flex-3 {flex: 3; min-width: inherit !important;} +.flex-4 {flex: 4; min-width: inherit !important;} /* layout */ @@ -147,6 +152,18 @@ header { z-index: 1000; } +.wrapper.bg-blue { + background: var(--color-F4F8FF); +} + +.wrapper.bg-blue header { + background: transparent; +} + +.wrapper.bg-blue header .heading-select { + background: transparent; +} + .header-content { display: flex; justify-content: space-between; @@ -231,12 +248,12 @@ main { padding-bottom: 70px; /* 하단 탭바 공간 확보 */ } -main.pop { - padding-bottom: 0; +main.pop, main.pb-0 { + padding-bottom: 0 !important; } main.full-height { - padding-bottom: 0; + padding-bottom: 0 !important; } .lnb { @@ -352,15 +369,20 @@ footer { background: #F4F8FF; } +main.pb-0 .tab-pane { + min-height: inherit; +} + .tab-pane { + position: relative; display: none; padding: 1rem; min-height: calc(100vh - 120px); box-sizing: border-box; } + .tab-pane.sub { - padding-top: 0!important; - padding-bottom: 60px; + padding-bottom: 60px !important; } .tab-pane.active { @@ -391,6 +413,10 @@ footer { -ms-overflow-style: none; /* Internet Explorer 10+ */ } +.flex-wrap { + flex-wrap: wrap; +} + .swiper-wrapper::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } @@ -490,7 +516,6 @@ footer { .day-tab-btn { padding: 2px 16px; - /* border: 1px solid var(--color-E5E5E5); */ background: var(--color-white); color: #999; border-radius: 6px; @@ -532,7 +557,7 @@ footer { font-size: var(--fs-20); font-weight: var(--fw-700); color: #000; - margin-top: 20px; + margin-top: 16px; } .won01 { @@ -607,7 +632,7 @@ footer { /* Heading */ h3 { - font-size: var(--fs-18); + font-size: var(--fs-20); font-weight: var(--fw-700); color: var(--color-111111); } @@ -630,7 +655,7 @@ input { appearance:none; height: 40px; font-size: var(--fs-15); - color: var(--color-111111); + color: var(--color-2D3436); border: none; outline: 1px solid rgba(217, 217, 217, 1); padding: 6px 12px; @@ -686,13 +711,15 @@ input:disabled { background: #f5f5f5; } +input:disabled + button img {opacity: .3;} + input[readonly] { color: var(--color-2D3436); - background: var(--color-white); + background: #f5f5f5; } input[readonly] + button.date-btn { - opacity: 1; + opacity: .3; } input::placeholder { @@ -793,9 +820,6 @@ textarea { textarea:focus { outline: 1px solid var(--color-111111); - /* border-color: var(--input-border-focus); - outline: none; - box-shadow: 0 0 0 3px rgba(11, 102, 195, 0.2); */ } textarea[disabled] { @@ -830,10 +854,10 @@ select::-ms-expand { select { height: 40px; - padding: 6px 40px 6px 12px; + padding: 6px 35px 6px 12px; border: 0; border: 1px solid var(--color-CCCCCC); - color: var(--color-111111); + color: var(--color-2D3436); font-size: var(--fs-15); border-radius: 8px; -moz-border-radius: 6px; @@ -854,7 +878,7 @@ select.heading-select:active { } select:disabled { - background-color: #f9f9f9; + background-color: #f5f5f5; } /* link */ @@ -976,13 +1000,6 @@ button:disabled { border: 1px solid #999; } -/* .btn-exel { - padding-left: 36px; - padding-right: 10px; - background: url("../images/ico_excel.svg") no-repeat left 10px center; -} */ - - /* checkbox */ .check_box { @@ -996,7 +1013,7 @@ button:disabled { .check_box label { position: absolute; left: 0; - top: 3px; + top: 2px; cursor: pointer; } @@ -1093,6 +1110,11 @@ input[type="radio"] { /* dashboard */ /* 진행률 표시줄 스타일 */ + +.issue-progress { + margin-top: 10px; +} + .progressbar { width: 100%; padding: 1rem 0 0 0; @@ -1102,7 +1124,7 @@ input[type="radio"] { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 6px; + margin-bottom: 8px; } .progress-title { @@ -1153,7 +1175,8 @@ input[type="radio"] { font-size: var(--fs-14); color: var(--color-111111); font-weight: var(--fw-400); - margin-top: 10px; + margin-top: 12px; + text-align: right; } .remain-limit strong { @@ -1248,8 +1271,7 @@ input[type="radio"] { .notice-box { background: var(--color-white); - margin-top: 1rem; - padding-bottom: 26px; + padding-bottom: 1rem; border-radius: 12px; } @@ -1262,7 +1284,7 @@ input[type="radio"] { display: flex; align-items: center; justify-content: space-between; - padding: 1rem; + padding: 1.188rem 1rem; border-bottom: 1px solid #eaeaea; cursor: pointer; transition: background-color 0.2s ease; @@ -1335,7 +1357,7 @@ input[type="radio"] { } .today-sales.mt-sty { - margin-top: 0.8rem !important; + margin-top: 0.7rem !important; } .two-account { @@ -1364,7 +1386,7 @@ input[type="radio"] { .ranking ul { display: block; - margin-top: 1rem; + margin-top: 12px; } .ranking ul li { @@ -1419,7 +1441,7 @@ input[type="radio"] { width: 100%; height: 100%; background: #fff; - z-index: 9999; + z-index: 2000; display: none; overflow-y: auto; } @@ -1464,10 +1486,10 @@ input[type="radio"] { } .option-list { - padding: 16px 10px; + padding: 0 10px; display: flex; flex-direction: column; - gap: 28px; + gap: 16px; } .option-list-nopadding { @@ -1487,7 +1509,7 @@ input[type="radio"] { } .opt-field.mt_top { - margin-top: -20px; + margin-top: -10px; } .opt-label { @@ -1503,7 +1525,7 @@ input[type="radio"] { .opt-controls { display: flex; align-items: center; - gap: 10px; + gap: 12px; flex-wrap: nowrap; } @@ -1568,6 +1590,14 @@ input[type="radio"] { width: 110px; } +.w-120 { + width: 120px; +} + +.w-130 { + width: 125px; +} + .w-140 { width: 140px; } @@ -1889,7 +1919,7 @@ input[type="radio"] { /* 요약 섹션 */ .summary-section { - padding: 30px 26px; + padding: 0 26px 30px 26px; margin-left: -16px; margin-right: -16px; border-bottom: 1px solid #e6e6e6; @@ -1903,7 +1933,7 @@ input[type="radio"] { font-size: var(--fs-16); color: var(--color-111111); font-weight: var(--fw-700); - margin-bottom: 3px; + margin-bottom: 1px; } .summary-label.label { @@ -1912,11 +1942,13 @@ input[type="radio"] { /* subTab (정산달력/정산내역) */ .subTab { + position: absolute; + left: 0; + right: 0; + top: 0; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #e6e6e6; - margin-left: -26px; - margin-right: -26px; width: calc(100% + 52px); max-width: 100vw; box-sizing: border-box; @@ -1943,7 +1975,7 @@ input[type="radio"] { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 20px; + margin-bottom: 16px; } /* Place button right next to amount-text for divTop variant */ @@ -2008,7 +2040,7 @@ input[type="radio"] { .summary-details { display: flex; flex-direction: column; - gap: 6px; + gap: 2px; margin-bottom: 10px; } @@ -2030,7 +2062,7 @@ input[type="radio"] { display: flex; justify-content: space-between; align-items: center; - padding: 16px 10px; + padding: 15px 10px; margin-bottom: 10px; } @@ -2054,8 +2086,8 @@ input[type="radio"] { } .sort-divider { - color: var(--color-CCCCCC); - font-size: var(--fs-12); + color: var(--color-d6d6d6); + font-size: var(--fs-13); } @@ -2086,7 +2118,7 @@ input[type="radio"] { } .transaction-status { - margin-right: 12px; + margin-right: 10px; margin-top: 8px; } @@ -2129,9 +2161,12 @@ input[type="radio"] { } .transaction-details .separator { + position: relative; + top: 1px; color: var(--color-d6d6d6); font-size: 13px; font-weight: 100; + padding: 0 2px; } .transaction-amount { @@ -2268,6 +2303,7 @@ div .credit-period { margin: 0; padding: 16px; background-color: var(--color-F4F8FF); + border-radius: 6px; } .summary-extend .summary-amount-list .bdr-6 { @@ -2278,7 +2314,7 @@ div .credit-period { display: flex; justify-content: space-between; align-items: center; - padding: 3px 0; + padding: 2px 0; font-size: var(--fs-15); } @@ -2297,7 +2333,7 @@ div .credit-period { } .summary-extend .summary-amount-item .value { - color: var(--color-111111); + color: var(--color-2D3436); font-weight: var(--fw-500); font-size: var(--fs-16); } @@ -2337,14 +2373,14 @@ div .credit-period { /* 알림함 */ .sub-wrap { width: 100%; - padding: 20px 26px 20px; + padding: 16px 26px; overflow: auto; } .notice-tabs { display: flex; gap: 8px; - margin-bottom: 22px; + margin-bottom: 16px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; @@ -2375,7 +2411,7 @@ div .credit-period { .tab36.on { background: var(--color-3E6AFC); - color: #fff; + color: var(--color-white); border-color: var(--color-3E6AFC); } @@ -2383,14 +2419,21 @@ div .credit-period { display: flex; justify-content: center; padding: 14px 16px; - margin-top: 10px; - background: #F4F8FF; + margin-top: 26px; + background: var(--color-F4F8FF); border-radius: 8px; } .notice-tip { - font-size: 14px !important; - color: #2D3436 !important; + position: relative; + font-size: var(--fs-14) !important; + color: var(--color-2D3436) !important; +} + +.notice-tip span { + position: absolute; + left: 0; + top: 0; } .sub .notice-item { @@ -2399,41 +2442,37 @@ div .credit-period { } /* 공지사항 상세 (Figma 1651:3135) */ -.notice-detail{ - /* padding:20px 0 0 */ -} - .notice-detail__title{ - font-size:var(--fs-20); - font-weight:var(--fw-600); - line-height:1.4; - color:var(--color-2D3436); - margin:0 0 10px + font-size: var(--fs-20); + font-weight: var(--fw-600); + color: var(--color-2D3436); + margin: 0 0 10px } .notice-detail__meta{ font-size:var(--fs-17); - color:#999; - margin-bottom:30px + color: var(--color-999999); + margin-bottom: 20px } .notice-detail__divider{ - height:1px; - background:#EAEAEA; - margin-bottom:30px + height: 1px; + background: var(--color-EaEaEa); + margin-bottom: 30px } .notice-detail__body{ - white-space:pre-line; - font-size:var(--fs-17); - line-height:1.4; - color:var(--color-2D3436) + white-space: pre-line; + font-size: var(--fs-17); + line-height: 1.3; + color: var(--color-2D3436) } .notice-alert { padding: 14px 16px; background: var(--color-F4F8FF); font-size: var(--fs-14); color: var(--color-2D3436); + margin-bottom: 26px; } /* 설정 (Figma 1651:3409) */ @@ -2467,7 +2506,7 @@ div .credit-period { font-size: var(--fs-16); font-weight: var(--fw-700); color: var(--color-2D3436); - padding-bottom: 16px; + padding-bottom: 10px; } .settings-row { @@ -2489,15 +2528,8 @@ div .credit-period { background: url("../images/Forward.svg") no-repeat right center; } -.settings-row-title { - font-size: var(--fs-16); - color: var(--color-2D3436); -} - .bd-style { - font-size: var(--fs-16); - font-weight: var(--fw-700); - color: var(--color-2D3436); + font-weight: var(--fw-700) !important; } .settings-switch { @@ -2608,8 +2640,8 @@ div .credit-period { .txn-doc{ display: flex; align-items: center; - padding: 10px 0 0; - margin-bottom: 20px; + padding: 30px 0 0; + margin-bottom: 5px; } .doc-btn{ @@ -2625,7 +2657,7 @@ div .credit-period { .txn-divider{ border-bottom: 1px solid #EAEAEA; - margin: 0; + margin-top: 16px; } .txn-divider.minus { @@ -2660,7 +2692,7 @@ div .credit-period { justify-content: space-between; align-items: start; gap: 10px; - padding: 0 0 20px; + padding: 0 0 19px; flex-wrap: wrap; } @@ -2673,7 +2705,6 @@ div .credit-period { } .kv-row .k{ - min-width: 32%; font-size: var(--fs-17); color: var(--color-666666) } @@ -2693,6 +2724,7 @@ div .credit-period { color: var(--color-2D3436); font-weight: var(--fw-500); text-align: right; + max-width: 60%; } .amount-expand { @@ -2703,7 +2735,6 @@ div .credit-period { } .amount-info { - margin-top: 30px; background: var(--color-F4F8FF); padding: 16px; border-radius: 6px; @@ -2731,7 +2762,7 @@ div .credit-period { .amount-item .value { font-size: var(--fs-16); font-weight: var(--fw-500); - color: var(--color-111111); + color: var(--color-2D3436); text-align: right; } @@ -2739,6 +2770,35 @@ div .credit-period { color: #000; } +/* 토스트바 */ +.toast-bar { + position: fixed; + left: 0; + right: 0; + bottom: 6%; + display: flex; + justify-content: center; + pointer-events: none; + z-index: 2100; +} +.toast-bar .toast { + max-width: 358px; + width: calc(100% - 32px); + background: rgba(45, 52, 54, 0.8); + border-radius: 8px; + padding: 16px; + display: flex; + justify-content: center; + align-items: center; + pointer-events: auto; +} +.toast-bar .toast-text { + font-size: var(--fs-16); + font-weight: var(--fw-500); + color: var(--color-white); + text-align: center; +} + /* 바텀시트 이메일 선택 */ .bg-dim { position: fixed; @@ -2772,11 +2832,15 @@ div .credit-period { margin-bottom: 0; } +.bottomsheet.banner .bottomsheet-content img { + width: 100%; +} + .bottom-btn { display: flex; justify-content: space-between; align-items: center; - padding: 5px 26px 16px 26px; + padding: 5px 26px 20px 26px; } .bottom-btn span { @@ -2787,7 +2851,7 @@ div .credit-period { } .bottomsheet-header { - margin-bottom: 26px; + margin-bottom: 30px; } .bottomsheet-title { @@ -2834,7 +2898,7 @@ div .credit-period { .bottomsheet-content { position: relative; - margin-bottom: 24px; + margin-bottom: 30px; } .banner-page { @@ -3061,9 +3125,8 @@ div .credit-period { /* 부분취소 테이블 */ .tb_both { border-bottom: 1px solid #D9D9D9; - /* border-radius: 8px; */ - margin-top: 10px; - padding: 7px 0 30px 0; + margin-top: 16px; + padding: 0 0 30px 0; } .partial-cancel-table { width: 100%; @@ -3213,7 +3276,7 @@ div .credit-period { font-size: var(--fs-20) !important; font-weight: var(--fw-700); color: var(--color-2D3436); - padding: 0; + padding: 0 0 10px 0; margin-bottom: 0 !important; } @@ -3303,7 +3366,7 @@ div .credit-period { font-size: var(--fs-20); font-weight: var(--fw-700); color: var(--color-2D3436); - padding: 0; + padding: 0 0 5px 0; } .billing-form { @@ -3318,11 +3381,11 @@ div .credit-period { } .gap-16 { - gap: 16px; + gap: 16px !important; } .gap-30 { - gap: 30px; + gap: 30px !important; } .billing-row { @@ -3355,7 +3418,7 @@ div .credit-period { text-align: right; } .billing-field .date input, .billing-field select { - padding-right: 40px; + padding-right: 35px; } .billing-inline { @@ -3373,7 +3436,7 @@ div .credit-period { /* 정산달력 */ .calendar-wrap { - padding: 30px 10px 0 10px; + padding: 0 10px 0 10px; } .top-select, .top-select select { @@ -3554,7 +3617,7 @@ span.scheduled { } .calendar-wrap .settlement-list { - padding: 16px 0 30px; + padding: 16px 0; } .calendar-wrap .settlement-item { @@ -3601,7 +3664,7 @@ span.scheduled { /* 부가서비스 소개 (option-list 하위 전용) */ .ing-list { - padding: 16px 10px; + padding: 10px; display: flex; flex-direction: column; gap: 16px; @@ -3796,7 +3859,7 @@ ul.txn-amount-detail li span:last-child { font-size: var(--fs-17); font-weight: var(--fw-500); color: var(--color-2D3436); - padding-bottom: 26px; + padding-bottom: 30px; padding-left: 15px; } @@ -3818,6 +3881,7 @@ ul.txn-amount-detail li span:last-child { background: #F5F5F5; border-radius: 8px; margin-bottom: 8px; + margin-top: 26px; } .card-fee-box .label { @@ -3907,6 +3971,8 @@ ul.txn-amount-detail li span:last-child { flex-direction: column; margin-left: -26px; margin-right: -26px; + max-height: 300px; + overflow-y: auto; } .card-option { @@ -3973,7 +4039,7 @@ ul.txn-amount-detail li span:last-child { padding: 10px 16px; background: #F5F5F5; border-radius: 8px; - margin-bottom: 20px; + margin-bottom: 26px; } .fee-cycle .card-fee-box .label { @@ -4057,7 +4123,7 @@ ul.txn-amount-detail li span:last-child { .notify-bar span { display: block; width: 100%; - padding: 1px 16px 1px 30px; + padding: 0 16px 0 30px; font-size: var(--fs-14); color: var(--color-2D3436); } @@ -4078,6 +4144,9 @@ ul.txn-amount-detail li span:last-child { } /* 가맹점 정보 화면 전용 */ +.merchant-info { + padding: 0 10px; +} .merchant-info .section + .section { margin-top: 10px; } @@ -4085,10 +4154,11 @@ ul.txn-amount-detail li span:last-child { .merchant-info .section-title { font-size: var(--fs-17); font-weight: var(--fw-700); - padding: 4px 0 20px 0; - display:flex; - align-items:center; - gap:6px; + padding: 2px 0 2px 0; + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 16px; } .merchant-info .kv-list { @@ -4125,7 +4195,7 @@ ul.txn-amount-detail li span:last-child { .pwd-buttons { display: grid; grid-template-columns: 1fr; - gap: 10px; + gap: 20px; } .pwd-btn { width: 100%; @@ -4249,14 +4319,14 @@ ul.txn-amount-detail li span:last-child { .ic20.plus { width: 20px; height: 20px; - background: url('../images/ico_menu_plus.svg') no-repeat center center; + background: url('../images/ico_menu_plus_no.svg') no-repeat center center; } .icon-btn.minus { width: 36px; height: 36px; border-radius: 6px; - background: #F5F5F5 url('../images/ico_app_delete.svg') no-repeat center center; + background: #F5F5F5 url('../images/ico_del_minus.svg') no-repeat center center; } .notice-bar { @@ -4346,9 +4416,9 @@ ul.txn-amount-detail li span:last-child { } .settings-row-title { - color: var(--color-777777); - font-size: var(--fs-15); - font-weight: var(--fw-500); + color: var(--color-2D3436); + font-size: var(--fs-16); + font-weight: var(--fw-400); } .bd-sub.dot { @@ -4371,6 +4441,10 @@ ul.txn-amount-detail li span:last-child { gap: 16px; } +/* .user-add.gap-30 { + gap: 30px +} */ + .user-add.info { display: flex; flex-direction: column; @@ -4386,7 +4460,7 @@ ul.txn-amount-detail li span:last-child { .ua-label { font-size: var(--fs-16); - font-weight: var(--fw-700); + font-weight: var(--fw-500); color: var(--color-2D3436); } @@ -4402,7 +4476,7 @@ ul.txn-amount-detail li span:last-child { .ua-help.error { color: var(--color-EB5757); - margin-top: -10px; + margin-top: -20px; } .ua-desc .ua-title { @@ -4445,7 +4519,7 @@ ul.txn-amount-detail li span:last-child { } .ing-list.add { - gap: 30px; + gap: 40px; } /* 세금 계산서_리스트 (80) */ @@ -4683,7 +4757,7 @@ ul.txn-amount-detail li span:last-child { .summary-section.no-border { /* ensure same as 94 page */ border-bottom: 0; - padding-bottom: 16px; + padding-bottom: 0; } /* 95_SMS 결제 통보_재발송 bottomsheet */ @@ -4704,7 +4778,7 @@ ul.txn-amount-detail li span:last-child { background: #F5F5F5; border-radius: 10px; padding: 16px; - margin-bottom: 26px; + margin-bottom: 30px; } .resend-text { @@ -4718,9 +4792,9 @@ ul.txn-amount-detail li span:last-child { flex: 1; white-space: wrap; height: auto !important; - padding: 5px 0; + padding: 5px 10px; text-align: center; - line-height: 150% !important; + line-height: 1.4 !important; } /* 98 알림톡 결제 통보_서비스 설정_토스트포함 */ @@ -4838,6 +4912,7 @@ ul.txn-amount-detail li span:last-child { display: flex; align-items: center; gap: 10px; + color: var(--color-2D3436); } /* 101 링크결제_결제신청_2단계 */ @@ -4911,6 +4986,7 @@ ul.txn-amount-detail li span:last-child { .account-frame .credit-summary { margin-top: 26px; } + .account-frame .credit-summary .row { display: flex; flex-direction: column; @@ -4921,6 +4997,7 @@ ul.txn-amount-detail li span:last-child { font-size: var(--fs-16); margin-bottom: 6px; } + .account-frame .credit-summary .row > span { width: 100%; display: block; @@ -4949,30 +5026,38 @@ ul.txn-amount-detail li span:last-child { .transaction-details.gap-0 { gap: 0; } + /* 104 지급대행_상세 */ .pay-top { display: flex; flex-direction: column; gap: 0; - padding: 30px 10px 0; + padding: 10px 10px 0; } + .pay-top .num-amount .amount { font-size: var(--fs-28); font-weight: var(--fw-700); color: var(--color-2D3436); } -.pay-top .num-store, -.pay-top .num-day { + +.pay-top .num-store { + margin-top: 2px; +} + +.pay-top .num-store, .pay-top .num-day { font-size: var(--fs-17); font-weight: 600; color: #999999; } + .receipt-row { display: flex; align-items: center; gap: 10px; padding-top: 26px; } + .receipt-btn { display: inline-flex; align-items: center; @@ -4981,20 +5066,24 @@ ul.txn-amount-detail li span:last-child { border-radius: 6px; background: #F4F8FF; } + .detail-divider { height: 1px; background: #EAEAEA; - margin: 26px -26px; + margin: 20px -26px; } + .pay-detail { padding: 0 10px; } + .pay-detail .detail-title { font-size: var(--fs-17); font-weight: var(--fw-700); color: var(--color-2D3436); padding-bottom: 16px; } + /* 105 알림톡 결제 통보 -> 지급대행 신청 폼 */ .billing-form.gap-16 { gap: 16px; @@ -5170,14 +5259,14 @@ ul.txn-amount-detail li span:last-child { .agree-desc { font-size: var(--fs-17); color: var(--color-2D3436); - padding-left: 16px; + padding-left: 22px; } .agree-desc::before { content: '●'; display: block; position: absolute; - left: 26px; + left: 32px; right: 0; font-size: 5px; } @@ -5206,8 +5295,7 @@ ul.txn-amount-detail li span:last-child { display: flex; flex-direction: column; gap: 16px; - padding-top: 16px; - padding-bottom: 26px; + padding: 16px 10px 26px 10px } /* 113 정산매장 */ @@ -5217,6 +5305,7 @@ ul.txn-amount-detail li span:last-child { .store-filter { width: 100%; + margin-bottom: 26px; } .store-input { @@ -5237,7 +5326,7 @@ ul.txn-amount-detail li span:last-child { /* 114 공지사항 */ .notice114 { - padding: 16px 10px 20px 10px; + padding: 0 10px; } .notice-controls { @@ -5383,7 +5472,7 @@ ul.txn-amount-detail li span:last-child { /* 115 자주 묻는 질문 */ .faq-section { - padding: 20px 10px 16px 10px; + padding: 0 10px; } .faq-search { position: relative; @@ -5458,7 +5547,7 @@ ul.txn-amount-detail li span:last-child { /* 116 자주 묻는 질문_상세 */ .faq-detail { - padding: 20px 10px 30px 10px; + padding: 0 10px; } .faq-detail__title { @@ -5475,15 +5564,13 @@ ul.txn-amount-detail li span:last-child { } .faq-detail__body { - white-space: pre-line; font-size: var(--fs-17); - line-height: 1.4; color: var(--color-2D3436); } /* 117 1:1 문의 */ .inq117 { - padding: 20px 10px 16px 10px; + padding: 0 10px; } .inq-merchant { @@ -5723,4 +5810,5 @@ ul.txn-amount-detail li span:last-child { border-radius: 8px; padding: 12px; box-sizing: border-box; -} \ No newline at end of file +} + diff --git a/src/shared/ui/assets/images/ico_del_minus.svg b/src/shared/ui/assets/images/ico_del_minus.svg new file mode 100644 index 0000000..1a67536 --- /dev/null +++ b/src/shared/ui/assets/images/ico_del_minus.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/ui/assets/images/ico_menu_plus_no.svg b/src/shared/ui/assets/images/ico_menu_plus_no.svg new file mode 100644 index 0000000..8b86aca --- /dev/null +++ b/src/shared/ui/assets/images/ico_menu_plus_no.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/ui/assets/images/icon_ing11.svg b/src/shared/ui/assets/images/icon_ing11.svg new file mode 100644 index 0000000..74eb248 --- /dev/null +++ b/src/shared/ui/assets/images/icon_ing11.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/shared/ui/assets/images/sample_banner_0.png b/src/shared/ui/assets/images/sample_banner_0.png new file mode 100644 index 0000000..b793423 Binary files /dev/null and b/src/shared/ui/assets/images/sample_banner_0.png differ diff --git a/src/shared/ui/assets/images/sample_banner_1.png b/src/shared/ui/assets/images/sample_banner_1.png new file mode 100644 index 0000000..0167924 Binary files /dev/null and b/src/shared/ui/assets/images/sample_banner_1.png differ diff --git a/src/shared/ui/menu/index.tsx b/src/shared/ui/menu/index.tsx index eac3855..d520820 100644 --- a/src/shared/ui/menu/index.tsx +++ b/src/shared/ui/menu/index.tsx @@ -142,7 +142,7 @@ export const Menu = ({ >
    -
    { userInfo.usrid } (madzoneviper)
    +
    { 'nictest001m' } (madzoneviper)