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

첫 커밋

Browse Source
This commit is contained in:
focp212@naver.com
2025-09-05 15:36:48 +09:00
commit 05238b04c1
825 changed files with 176358 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/entities/transaction/ui/all-transaction-all-cancel.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
export const AllTransactionAllCancel = () => {
return (
<>
<div className="form-section">
<div className="form-group">
<label className="form-label">취소 비밀번호</label>
<div className="input-wrapper wid-100 error">
<input
className="wid-100 align-right"
type="password"
value="2736356352"
/>
</div>
</div>
<div className="error-msg">비밀번호 불일치</div>
<div className="form-group">
<label className="form-label">은행</label>
<div className="input-wrapper wid-100">
<select className="wid-100 align-right">
<option>선택</option>
<option>KB국민은행</option>
<option>22323213123</option>
</select>
</div>
</div>
<div className="form-group">
<label className="form-label">계좌번호</label>
<div className="input-wrapper wid-100">
<input
className="form-input wid-100"
type="text"
placeholder=""
/>
</div>
</div>
<div className="form-group">
<label className="form-label">예금주</label>
<div className="input-wrapper wid-100">
<input
className="form-input wid-100"
type="text"
placeholder=""
/>
</div>
</div>
<div className="notice-text wid-100">
<p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p>
</div>
</div>
</>
);
};

31
src/entities/transaction/ui/all-transaction-list.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { AllTransactionListProps } from '../model/types';
import { ListDateGroup } from './list-date-group';
export const AllTransactionList = ({
pageType,
listItems
}: AllTransactionListProps) => {
const getListDateGroup = () => {
let rs = [];
for (const [key, value] of Object.entries(listItems)) {
rs.push(
<ListDateGroup
pageType={ pageType }
key={ key }
date={ key }
items={ value }
></ListDateGroup>
);
}
return rs;
};
return (
<>
<div className="transaction-list">
{ getListDateGroup() }
</div>
</>
);
};

124
src/entities/transaction/ui/all-transaction-part-cancel.tsx Normal file
View File

@@ -0,0 +1,124 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
export const AllTransactionPartCancel = () => {
return (
<>
<div className="tb_both">
<table className="partial-cancel-table">
<colgroup>
<col width="30%" />
<col width="30%" />
<col width="40%" />
</colgroup>
<thead>
<tr>
<th className="header-empty"></th>
<th className="header-balance">잔액</th>
<th className="header-cancel">취소금액</th>
</tr>
</thead>
<tbody>
<tr>
<td className="row-label">과세액</td>
<td className="row-balance">555,550,000</td>
<td className="row-cancel">
<input
className="cancel-input"
type="text"
value=""
/>
</td>
</tr>
<tr>
<td className="row-label">부가세</td>
<td className="row-balance">50,000</td>
<td className="row-cancel">
<input
className="cancel-input"
type="text"
placeholder=""
/>
</td>
</tr>
<tr>
<td className="row-label">면세</td>
<td className="row-balance">50,000</td>
<td className="row-cancel">
<input
className="cancel-input"
type="text"
placeholder=""
/>
</td>
</tr>
<tr>
<td className="row-label">봉사료</td>
<td className="row-balance">50,000</td>
<td className="row-cancel">
<input
className="cancel-input"
type="text"
placeholder=""
/>
</td>
</tr>
</tbody>
</table>
</div>
<div className="form-section">
<div className="form-group">
<label className="form-label">취소 비밀번호</label>
<div className="input-wrapper wid-100 error">
<input
className="wid-100 align-right"
type="password"
value=""
/>
</div>
</div>
<div className="error-msg">비밀번호 불일치</div>
<div className="form-group">
<label className="form-label">은행</label>
<div className="input-wrapper wid-100">
<select className="wid-100 align-right">
<option>선택</option>
<option>KB국민은행</option>
<option>22323213123</option>
</select>
</div>
</div>
<div className="form-group">
<label className="form-label">계좌번호</label>
<div className="input-wrapper wid-100">
<input
className="form-input wid-100"
type="text"
placeholder=""
/>
</div>
</div>
<div className="form-group">
<label className="form-label">예금주</label>
<div className="input-wrapper wid-100">
<input
className="form-input wid-100"
type="text"
placeholder=""
/>
</div>
</div>
<div className="notice-text wid-100">
<p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p>
</div>
</div>
</>
);
};

44
src/entities/transaction/ui/billing-list.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { BillingListProps } from '../model/types';
import { ListDateGroup } from './list-date-group';
export const BillingList = ({
pageType,
listItems
}: BillingListProps) => {
const { navigate } = useNavigate();
const getListDateGroup = () => {
let rs = [];
for (const [key, value] of Object.entries(listItems)) {
rs.push(
<ListDateGroup
pageType={ pageType }
key={ key }
date={ key }
items={ value }
></ListDateGroup>
);
}
return rs;
};
const onClickToNavigate = () => {
navigate(PATHS.transaction.billing.paymentRequest);
};
return (
<>
<div className="transaction-list">
{ getListDateGroup() }
<div className="apply-row bottom-padding">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
>결제 신청</button>
</div>
</div>
</>
);
};

43
src/entities/transaction/ui/bottom-sheet-changes-cash-receit-uses.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
export const BottomSheetChangesCashReceitUses = () => {
return (
<>
<div className="bg-dim"></div>
<div className="bottomsheet">
<div className="bottomsheet-header">
<div className="bottomsheet-title">
<h2>신청 방법을 선택하세요</h2>
<button
className="close-btn"
type="button"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
/>
</button>
</div>
</div>
<div className="bottomsheet-content">
<div className="bottom-section">
<p>현금영수증의 용도 변경 시 기존 발급 내역이 취소되며, 선택한 용도에 맞게 새로 발급됩니다. </p>
<ul className="list-style-circle">
<li>지출증빙용 → 소득공제용</li>
<li>소득공제용 → 지출증빙용</li>
</ul>
</div>
</div>
<div className="bottomsheet-footer">
<button
className="btn-50 btn-blue flex-1"
type="button"
>신청</button>
</div>
</div>
</>
);
};

63
src/entities/transaction/ui/bottom-sheet-email.tsx Normal file
View File

@@ -0,0 +1,63 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
export const BottomSheetEmail = () => {
return (
<>
<div className="bg-dim"></div>
<div className="bottomsheet">
<div className="bottomsheet-header">
<div className="bottomsheet-title">
<h2>이메일 주소를 선택하세요</h2>
<button
className="close-btn"
type="button"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
/>
</button>
</div>
</div>
<div className="bottomsheet-content">
<div className="email-section">
<div className="email-label">
<div className="mail-icon">
<div className="mail-icon-bg"></div>
<img
src="../images/ico_email.svg"
alt="메일"
/>
</div>
<span className="label-text">메일로 받기</span>
</div>
<div className="email-select">
<div className="select-wrapper">
<select>
<option>선택</option>
<option>선택1</option>
<option>선택2</option>
</select>
</div>
</div>
<div className="error-message">
<p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
</div>
</div>
</div>
<div className="bottomsheet-footer">
<button
className="btn-50 btn-blue flex-1"
type="button"
disabled
>신청</button>
</div>
</div>
</>
);
};

90
src/entities/transaction/ui/cash-receit-hand-written-issuance-step1.tsx Normal file
View File

@@ -0,0 +1,90 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
export const CashReceitHandWrittenIssuanceStep1 = () => {
const { navigate } = useNavigate();
useSetOnBack(() => {
navigate(PATHS.transaction.cashReceit.list);
});
return (
<>
<h2 className="issue-title">발행 정보 입력</h2>
<div className="issue-form">
<div className="issue-row">
<div className="issue-label">사업자 번호</div>
<div className="issue-field">
<input
className="error"
type="text"
value="123456789"
disabled={ true }
/>
</div>
</div>
<div className="issue-row">
<div className="issue-label">용도</div>
<div className="issue-field">
<div className="seg-buttons">
<button
className="btn-40 btn-blue"
type="button"
>소득공제</button>
<button
className="btn-40 btn-white"
type="button"
>지출증빙</button>
</div>
</div>
</div>
<div className="issue-row">
<div className="issue-label">상품명</div>
<div className="issue-field">
<input
type="text"
placeholder="상품명"
/>
</div>
</div>
<div className="issue-row">
<div className="issue-label">구매자</div>
<div className="issue-field">
<input
type="text"
placeholder="구매자명"
/>
</div>
</div>
<div className="issue-row">
<div className="issue-label">발행번호</div>
<div className="issue-field">
<input
type="text"
placeholder="사업자번호 OR 휴대폰번호"
/>
</div>
</div>
<div className="issue-row">
<div className="issue-label">이메일 주소</div>
<div className="issue-field">
<input
type="email"
placeholder="TEST123@nicepay.com"
/>
</div>
</div>
<div className="issue-row">
<div className="issue-label">전화번호</div>
<div className="issue-field">
<input
type="tel"
placeholder="01012345678"
/>
</div>
</div>
</div>
</>
);
};

81
src/entities/transaction/ui/cash-receit-hand-written-issuance-step2.tsx Normal file
View File

@@ -0,0 +1,81 @@
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { ProcessStep } from '../model/types';
export interface CashReceitHandWrittenIssuanceStep2Props {
setProcessStep: ((processStep: ProcessStep) => void);
};
export const CashReceitHandWrittenIssuanceStep2 = ({
setProcessStep
}: CashReceitHandWrittenIssuanceStep2Props) => {
useSetOnBack(() => {
setProcessStep(ProcessStep.One);
});
return (
<>
<h2 className="issue-title">발행 금액 입력</h2>
<div className="issue-form">
<div className="issue-row">
<div className="issue-label">발행금액</div>
<div className="issue-field">
<div className="seg-buttons">
<input
type="text"
value="555,555,555"
readOnly={ true }
/>
<button
className="btn-40 btn-white"
type="button"
>VAT자동계산</button>
</div>
</div>
</div>
<div className="issue-row">
<div className="issue-label">공급가액</div>
<div className="issue-field">
<input
className="error"
type="text"
placeholder=""
/>
</div>
</div>
<div className="issue-row">
<div className="issue-label">VAT</div>
<div className="issue-field">
<input
className="error"
type="text"
placeholder=""
/>
</div>
</div>
<div className="issue-row">
<div className="issue-label">발행번호</div>
<div className="issue-field">
<input
className="error"
type="text"
placeholder=""
/>
</div>
</div>
<div className="issue-row">
<div className="issue-label">이메일 주소</div>
<div className="issue-field">
<input
type="email"
className="error"
placeholder=""
/>
</div>
</div>
<div className="issue-note error">
발행금액은 공급가액 VAT,면세금액, 봉사료의 총합과 같아야 합니다.
</div>
</div>
</>
);
};

44
src/entities/transaction/ui/cash-receit-list.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { CashReceitListProps } from '../model/types';
import { ListDateGroup } from './list-date-group';
export const CashReceitList = ({
pageType,
listItems
}: CashReceitListProps) => {
const { navigate } = useNavigate();
const getListDateGroup = () => {
let rs = [];
for (const [key, value] of Object.entries(listItems)) {
rs.push(
<ListDateGroup
pageType={ pageType }
key={ key }
date={ key }
items={ value }
></ListDateGroup>
);
}
return rs;
};
const onClickToNavigate = () => {
navigate(PATHS.transaction.cashReceit.handWrittenIssuance);
};
return (
<>
<div className="transaction-list">
{ getListDateGroup() }
<div className="apply-row bottom-padding">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
>수기발행</button>
</div>
</div>
</>
);
};

122
src/entities/transaction/ui/detail-amount-info.tsx Normal file
View File

@@ -0,0 +1,122 @@
import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { NumericFormat } from 'react-number-format';
import { DetailInfoKeys, DetailInfoProps } from '../model/types';
import { DetailArrow } from './detail-arrow';
import { useDownloadConfirmationMutation } from '../api/use-download-confirmation-mutation';
export const DetailAmountInfo = ({
pageType,
amountInfo,
show,
tid,
onClickToShowInfo
}: DetailInfoProps) => {
const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
const variants = {
hidden: { height: 0, padding: 0, margin: 0, display: 'none' },
visible: { height: 'auto', padding: '16px', margin: '10px 0', display: 'block' },
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(DetailInfoKeys.Amount);
}
};
const onClickToDownloadConfirmation = () => {
if(!!tid){
downloadConfirmation({
tid: tid
}).then((rs) => {
alert('거래확인서 다운 성공');
});
}
};
return (
<>
<div className="txn-num-group">
<div className="txn-amount">
<div className="value">
<NumericFormat
value={ amountInfo?.amount }
thousandSeparator
displayType="text"
></NumericFormat>
<span className="unit">원</span>
</div>
<button
className="chip-btn"
type="button"
onClick={ () => onClickToSetShowInfo() }
>
금액상세 <DetailArrow show={ show }></DetailArrow>
</button>
</div>
<motion.div
className="amount-expand"
initial="hidden"
animate={ (show)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
>
<ul className="amount-list">
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;신용카드</span>
<span className="value">
<NumericFormat
value={ amountInfo?.cardAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;포인트</span>
<span className="value">
<NumericFormat
value={ amountInfo?.pointAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;쿠폰</span>
<span className="value minus">
<NumericFormat
value={ amountInfo?.couponAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;에스크로</span>
<span className="value">
<NumericFormat
value={ amountInfo?.escrowFee }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
</ul>
</motion.div>
<div className="txn-mid">
<span className="value">{ amountInfo?.mid }</span>
</div>
<div className="txn-doc">
<button
className="doc-btn"
type="button"
onClick={ () => onClickToDownloadConfirmation() }
>거래 확인서</button>
</div>
</div>
</>
);
};

23
src/entities/transaction/ui/detail-arrow.tsx Normal file
View File

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

52
src/entities/transaction/ui/detail-important-info.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { NumericFormat } from 'react-number-format';
import moment from 'moment';
import { DetailInfoProps } from '../model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
export const DetailImportantInfo = ({
pageType,
importantInfo
}: DetailInfoProps) => {
return (
<>
<div className="txn-section">
<div className="section-title">중요 정보</div>
<ul className="kv-list">
<li className="kv-row">
<span className="k">주문번호</span>
<span className="v">{ importantInfo?.ordNo }</span>
</li>
<li className="kv-row">
<span className="k">TID</span>
<span className="v">{ importantInfo?.tid }</span>
</li>
<li className="kv-row">
<span className="k">결제상태</span>
<span className="v">{ importantInfo?.tradeStatus }</span>
</li>
<li className="kv-row">
<span className="k">결제수단</span>
<span className="v">{ importantInfo?.tradeMethod }</span>
</li>
<li className="kv-row">
<span className="k">승인일</span>
<span className="v">{ moment(importantInfo?.approvalDate).format('YYYY.MM.DD') }</span>
</li>
{
/*
<li className="kv-row">
<span className="k">취소일</span>
<span className="v">2025.06.08</span>
</li>
*/
}
<li className="kv-row">
<span className="k">상품명</span>
<span className="v">{ importantInfo?.productName }</span>
</li>
</ul>
</div>
</>
)
};

79
src/entities/transaction/ui/detail-part-cancel-info.tsx Normal file
View File

@@ -0,0 +1,79 @@
import { useState } from 'react';
import { motion } from 'framer-motion';
import { NumericFormat } from 'react-number-format';
import { DetailInfoKeys, DetailInfoProps } from '../model/types';
import { DetailArrow } from './detail-arrow';
export const DetailPartCancelInfo = ({
pageType,
partCancelInfo,
show,
onClickToShowInfo
}: DetailInfoProps) => {
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(DetailInfoKeys.PartCancel);
}
};
return (
<>
<div className="txn-section">
<div
className="section-title with-toggle"
onClick={ () => onClickToSetShowInfo() }
>
부분취소 정보 <DetailArrow show={ show }></DetailArrow>
</div>
<motion.ul
className="kv-list"
initial="hidden"
animate={ (show)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
>
<li className="kv-row">
<span className="k">원거래 TID</span>
<span className="v">{ partCancelInfo?.originalTid }</span>
</li>
<li className="kv-row">
<span className="k">원거래 금액</span>
<span className="v">
<NumericFormat
value={ partCancelInfo?.originalAmount }
thousandSeparator
displayType="text"
suffix={ '원' }
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">부분취소 TID</span>
<span className="v">nictest00m01012506171629294150</span>
</li>
<li className="kv-row">
<span className="k">부분취소 금액</span>
<span className="v">50,000원</span>
</li>
<li className="kv-row nopadding">
<span className="k">부분취소 후 잔액</span>
<span className="v">
<NumericFormat
value={ partCancelInfo?.remainingAmount }
thousandSeparator
displayType="text"
suffix={ '원' }
></NumericFormat>
</span>
</li>
</motion.ul>
</div>
</>
)
};

50
src/entities/transaction/ui/detail-payment-info.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { motion } from 'framer-motion';
import { DetailInfoKeys, DetailInfoProps } from '../model/types';
import { DetailArrow } from './detail-arrow';
export const DetailPaymentInfo = ({
pageType,
paymentInfo,
show,
onClickToShowInfo
}: DetailInfoProps) => {
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(DetailInfoKeys.Payment);
}
};
return (
<>
<div className="txn-section">
<div
className="section-title with-toggle"
onClick={ () => onClickToSetShowInfo() }
>
결제 정보 <DetailArrow show={ show }></DetailArrow>
</div>
<motion.ul
className="kv-list"
initial="hidden"
animate={ (show)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
>
<li className="kv-row">
<span className="k">승인 금액</span>
<span className="v">10,000,000원</span>
</li>
<li className="kv-row">
<span className="k">부가세</span>
<span className="v">0원</span>
</li>
</motion.ul>
</div>
</>
)
};

51
src/entities/transaction/ui/detail-settlement-info.tsx Normal file
View File

@@ -0,0 +1,51 @@
import moment from 'moment';
import { motion } from 'framer-motion';
import { DetailInfoKeys, DetailInfoProps } from '../model/types';
import { DetailArrow } from './detail-arrow';
export const DetailSettlementInfo = ({
pageType,
settlementInfo,
show,
onClickToShowInfo
}: DetailInfoProps) => {
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(DetailInfoKeys.Settlement);
}
};
return (
<>
<div className="txn-section">
<div
className="section-title with-toggle"
onClick={ () => onClickToSetShowInfo() }
>
정산 정보 <DetailArrow show={ show }></DetailArrow>
</div>
<motion.ul
className="kv-list"
initial="hidden"
animate={ (show)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
>
<li className="kv-row">
<span className="k">정산 예정일</span>
<span className="v">{ moment(settlementInfo?.approvalSettleDate).format('YYYY.MM.DD') }</span>
</li>
<li className="kv-row">
<span className="k">정산 상태</span>
<span className="v">예정</span>
</li>
</motion.ul>
</div>
</>
)
};

50
src/entities/transaction/ui/detail-transaction-info.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { motion } from 'framer-motion';
import { DetailInfoKeys, DetailInfoProps } from '../model/types';
import { DetailArrow } from './detail-arrow';
export const DetailTransactionInfo = ({
pageType,
transactionInfo,
show,
onClickToShowInfo
}: DetailInfoProps) => {
const variants = {
hidden: { height: 0, padding: 0, display: 'none' },
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
};
const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){
onClickToShowInfo(DetailInfoKeys.Transaction);
}
};
return (
<>
<div className="txn-section" onClick={ () => onClickToSetShowInfo() }>
<div
className="section-title with-toggle"
>
거래 정보 <DetailArrow show={ show }></DetailArrow>
</div>
<motion.ul
className="kv-list"
initial="hidden"
animate={ (show)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
>
<li className="kv-row">
<span className="k">가맹점명</span>
<span className="v">NICE PAY</span>
</li>
<li className="kv-row">
<span className="k">사업자번호</span>
<span className="v">123-45-67890</span>
</li>
</motion.ul>
</div>
</>
)
};

31
src/entities/transaction/ui/escro-list.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { EscroListProps } from '../model/types';
import { ListDateGroup } from './list-date-group';
export const EscroList = ({
pageType,
listItems
}: EscroListProps) => {
const getListDateGroup = () => {
let rs = [];
for (const [key, value] of Object.entries(listItems)) {
rs.push(
<ListDateGroup
pageType={ pageType }
key={ key }
date={ key }
items={ value }
></ListDateGroup>
);
}
return rs;
};
return (
<>
<div className="transaction-list">
{ getListDateGroup() }
</div>
</>
);
};

187
src/entities/transaction/ui/filter.tsx Normal file
View File

@@ -0,0 +1,187 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterProps } from '../model/types';
import { motion } from 'framer-motion';
export const Filter = ({
filterOn,
setFilterOn
}: FilterProps) => {
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const onClickToClose = () => {
setFilterOn(false);
};
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
style={{
width: '100%',
height: '100%',
}}
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center">필터</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
className="full-menu-close"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
onClick={ () => onClickToClose() }
/>
</button>
</div>
</div>
<div className="option-list pb-120">
<div className="opt-field">
<div className="opt-label">가맹점</div>
<div className="opt-controls">
<select className="flex-1">
<option>nictest001m</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">주문번호/ID</div>
<div className="opt-controls">
<select className="w-110">
<option>주문번호</option>
<option>ID</option>
</select>
<input
className="flex-1"
type="text"
placeholder=""
/>
</div>
</div>
<div className="opt-field">
<div className="opt-label">조회기간</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">당일</span>
<span className="keyword-tag">일주일</span>
<span className="keyword-tag">1개월</span>
<span className="keyword-tag">직접입력</span>
</div>
<div className="range-row">
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
type="button"
className="date-btn"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
<span className="beetween">~</span>
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
type="button"
className="date-btn"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">요청상태</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">진행중</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">요청취소</span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">저리결과</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">실패</span>
<span
className="keyword-tag"
style={{ visibility: 'hidden' }}
></span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">결제수단</div>
<div className="opt-controls">
<select className="flex-1">
<option>전체</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">거래금액</div>
<div className="opt-controls">
<div className="input-wrapper ">
<input
type="text"
placeholder=""
/>
</div>
<span> ~ </span>
<div className="input-wrapper date">
<input
type="text"
placeholder=""
/>
</div>
</div>
</div>
</div>
<div className="apply-row">
<button className="btn-50 btn-blue flex-1">적용</button>
</div>
</div>
</motion.div>
</>
);
};

52
src/entities/transaction/ui/list-date-group.tsx Normal file
View File

@@ -0,0 +1,52 @@
import moment from 'moment';
import 'moment/dist/locale/ko';
import { ListDateGroupProps } from '../model/types';
import { ListItem } from './list-item';
export const ListDateGroup = ({
pageType,
date,
items
}: ListDateGroupProps) => {
moment.locale('ko');
const getStateDate = () => {
let stateDate = moment(date).format('YY.MM.DD(ddd)');
return stateDate;
};
const getListItem = () => {
let rs = [];
if(!!items && items.length>0){
for(let i=0;i<items.length;i++){
let key = 'ListItem-'+i;
rs.push(
<ListItem
pageType={ pageType }
key={ key }
tid={ items[i]?.tid }
mid={ items[i]?.mid }
stateDate={ items[i]?.stateDate }
stateCode={ items[i]?.stateCode }
stateName={ items[i]?.stateName }
installmentMonth={ items[i]?.installmentMonth }
serviceCode={ items[i]?.serviceCode }
serviceName={ items[i]?.serviceName }
serviceDetailName={ items[i]?.serviceDetailName }
goodsAmount={ items[i]?.goodsAmount }
></ListItem>
)
}
}
return rs;
};
return (
<>
<div className="date-group">
<div className="date-header">{ getStateDate() }</div>
{ getListItem() }
</div>
</>
);
};

124
src/entities/transaction/ui/list-item.tsx Normal file
View File

@@ -0,0 +1,124 @@
import { NumericFormat } from 'react-number-format';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListItemProps, PageType } from '../model/types';
export const ListItem = ({
pageType,
tid,
mid,
stateDate,
stateCode,
stateName,
installmentMonth,
serviceCode,
serviceName,
serviceDetailName,
goodsAmount
}: ListItemProps) => {
const { navigate } = useNavigate();
const getItemClass = () => {
let rs = '';
if(stateCode === '0'){
rs = '';
}
else if(stateCode === '1'){
rs = 'approved';
}
else if(stateCode === '2'){
rs = 'refund';
}
return rs;
};
const getDotClass = (str?: string) => {
let rs = '';
if(stateCode === '0'){
rs = '';
}
else if(stateCode === '1'){
rs = 'blue';
}
else if(stateCode === '2'){
rs = 'gray';
}
return rs;
};
const onClickToNavigate = () => {
if(pageType === PageType.AllTransaction){
navigate(PATHS.transaction.allTransaction.detail + tid, {
state: {
tid: tid
}
});
}
else if(pageType === PageType.CashReceit){
navigate(PATHS.transaction.cashReceit.detail + tid, {
state: {
tid: tid
}
});
}
else if(pageType === PageType.Escro){
navigate(PATHS.transaction.escro.detail + tid, {
state: {
tid: tid
}
});
}
else if(pageType === PageType.Billing){
navigate(PATHS.transaction.billing.detail + tid, {
state: {
tid: tid
}
});
}
else{
alert('pageType 이 존재하지 않습니다.');
}
};
const getTime = () => {
let time = stateDate?.substring(8, 12);
let timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
return timeStr;
};
return (
<>
<div
className={ `transaction-item ${getItemClass()}` }
onClick={ () => onClickToNavigate() }
>
<div className="transaction-status">
<div className={ `status-dot ${getDotClass()}`}></div>
</div>
<div className="transaction-content">
<div className="transaction-title">{ `${serviceName}(${serviceDetailName})` }</div>
<div className="transaction-details">
<span>{ stateName }</span>
<span className="separator">|</span>
<span>{ getTime() }</span>
<span className="separator">|</span>
<span>{ mid }</span>
{ (!!installmentMonth && parseInt(installmentMonth) > 1) &&
<>
<span className="separator">|</span>
<span>{ installmentMonth }개월 할부</span>
</>
}
</div>
</div>
<div className="transaction-amount">
<NumericFormat
value={ goodsAmount }
thousandSeparator
displayType="text"
suffix={ '원' }
></NumericFormat>
</div>
</div>
</>
);
};

25
src/entities/transaction/ui/sort-options-box.tsx Normal file
View File

@@ -0,0 +1,25 @@
import {
SortByKeys,
SortOptionsBoxProps
} from '../model/types';
export const SortOptionsBox = ({
sortBy,
onCliCkToSort
}: SortOptionsBoxProps) => {
return (
<>
<div className="sort-options">
<button
className={ `sort-btn ${(sortBy === SortByKeys.New)? 'active': ''}` }
onClick={ () => onCliCkToSort(SortByKeys.New) }
>최신순</button>
<span className="sort-divider">|</span>
<button
className={ `sort-btn ${(sortBy === SortByKeys.Amount)? 'active': ''}` }
onClick={ () => onCliCkToSort(SortByKeys.Amount) }
>고액순</button>
</div>
</>
);
};