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

18
src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const AccountHolderAuthPage = () => {
useSetHeaderTitle('계좌점유인증');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
return (
<>
</>
);
};

18
src/pages/additional-service/account-holder-search/account-holder-search-page.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const AccountHolderSearchPage = () => {
useSetHeaderTitle('계좌성명조회');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
return (
<>
</>
);
};

41
src/pages/additional-service/additional-service-pages.tsx Normal file
View File

@@ -0,0 +1,41 @@
import { Route } from 'react-router-dom';
import { SentryRoutes } from '@/shared/configs/sentry';
import { ROUTE_NAMES } from '@/shared/constants/route-names';
import { IntroPage } from './intro/intro-page';
import { ArsCardPaymentListPage } from './ars-card-payment/list-page';
import { ArsCardPaymentRequestPage } from './ars-card-payment/request-page';
import { ArsCardPaymentRequestSuccessPage } from './ars-card-payment/request-success-page';
import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page';
import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page';
import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page';
import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
import { LinkPaymentPage } from './link-payment/link-payment-page';
import { KakaoPaymentNotificationPage } from './kakao-payment-notification/kakao-payment-notification-page';
import { FundTransferPage } from './fund-transfer/fund-transfer-page';
import { SettlementAgencyPage } from './settlement-agency/settlement-agency-page';
import { PaymentAgencyPage } from './payment-agency/payment-agency-page';
export const AdditionalServicePages = () => {
return (
<>
<SentryRoutes>
<Route path={ROUTE_NAMES.additionalService.intro} element={<IntroPage />} />
<Route path={ROUTE_NAMES.additionalService.arsCardPayment.base}>
<Route path={ROUTE_NAMES.additionalService.arsCardPayment.list} element={<ArsCardPaymentListPage />} />
<Route path={ROUTE_NAMES.additionalService.arsCardPayment.request} element={<ArsCardPaymentRequestPage />} />
<Route path={ROUTE_NAMES.additionalService.arsCardPayment.requestSuccess} element={<ArsCardPaymentRequestSuccessPage />} />
</Route>
<Route path={ROUTE_NAMES.additionalService.keyInPayment} element={<KeyInPaymentPage />} />
<Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentNotificationPage />} />
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch} element={<AccountHolderSearchPage />} />
<Route path={ROUTE_NAMES.additionalService.accountHolderAuth} element={<AccountHolderAuthPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment} element={<LinkPaymentPage />} />
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification} element={<KakaoPaymentNotificationPage />} />
<Route path={ROUTE_NAMES.additionalService.fundTransfer} element={<FundTransferPage />} />
<Route path={ROUTE_NAMES.additionalService.settlementAgency} element={<SettlementAgencyPage />} />
<Route path={ROUTE_NAMES.additionalService.paymentAgency} element={<PaymentAgencyPage />} />
</SentryRoutes>
</>
);
};

217
src/pages/additional-service/ars-card-payment/list-page.tsx Normal file
View File

@@ -0,0 +1,217 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const ArsCardPaymentListPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('신용카드 ARS 결제');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
const onClickToNavigation = () => {
navigate(PATHS.additionalService.arsCardPayment.request);
};
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active" id="tab1">
<section className="summary-section">
<div className="credit-controls">
<div>
<input
className="credit-period"
type="text"
value="2025.06.01 ~ 2025.06.30"
readOnly={ true }
/>
<button
className="filter-btn"
aria-label="필터"
>
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt="검색옵션"
/>
</button>
</div>
<button
className="download-btn"
aria-label="다운로드"
>
<img
src={ IMAGE_ROOT +'/ico_download.svg' }
alt="다운로드"
/>
</button>
</div>
</section>
<section className="filter-section">
<div className="sort-options">
<button className="sort-btn active">최신순</button>
<span className="sort-divider">|</span>
<button className="sort-btn">고액순</button>
</div>
<div className="excrow">
<div className="full-menu-keywords no-padding">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">결제완료</span>
<span className="keyword-tag">배송등록</span>
</div>
</div>
</section>
<section className="transaction-list">
<div className="date-group">
<div className="date-header">25.06.08(일)</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">김*환(7000)</div>
<div className="transaction-details">
<span>20:00ㅣ미결제ㅣ결제대기ㅣSMS</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
<div className="transaction-item refund">
<div className="transaction-status">
<div className="status-dot gray"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">최*길(7000)</div>
<div className="transaction-details">
<span>20:00ㅣ결제완료ㅣ결제성공ㅣ호전환</span>
</div>
</div>
<div className="transaction-amount">23,845,000원</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">박*준(7000)</div>
<div className="transaction-details">
<span>20:00ㅣ결제완료ㅣ결제성공ㅣ호전환</span>
</div>
</div>
<div className="transaction-amount">534,000원</div>
</div>
<div className="transaction-item refund">
<div className="transaction-status">
<div className="status-dot gray"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">이*신(7000)</div>
<div className="transaction-details">
<span>20:00ㅣ미결제ㅣ취소완료ㅣSMS</span>
</div>
</div>
<div className="transaction-amount">4,254,000원</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">김*환(7000)</div>
<div className="transaction-details">
<span>20:00ㅣ미결제ㅣ기간만료ㅣSMS</span>
</div>
</div>
<div className="transaction-amount">948,000원</div>
</div>
</div>
<div className="date-group">
<div className="date-header">25.06.08(일)</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">신용카드(카카오머니, 카카오)</div>
<div className="transaction-details">
<span>승인ㅣ20:00ㅣcroquis01m</span>
</div>
</div>
<div className="transaction-amount">3,583,000원</div>
</div>
<div className="transaction-item refund">
<div className="transaction-status">
<div className="status-dot gray"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">신용카드(현대카드., 토스)</div>
<div className="transaction-details">
<span>환불ㅣ20:00ㅣcroquis01m</span>
</div>
</div>
<div className="transaction-amount">874,000원</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">계좌간편결제(국민은행, PAYU)</div>
<div className="transaction-details">
<span>승인ㅣ20:00ㅣcroquis01m</span>
</div>
</div>
<div className="transaction-amount">23,562,000원</div>
</div>
<div className="transaction-item refund">
<div className="transaction-status">
<div className="status-dot gray"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">휴대폰</div>
<div className="transaction-details">
<span>환불ㅣ20:00ㅣcroquis01m</span>
</div>
</div>
<div className="transaction-amount">783,000원</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">SSG 은행계좌(농협중앙회)</div>
<div className="transaction-details">
<span>승인ㅣ20:00ㅣcroquis01m</span>
</div>
</div>
<div className="transaction-amount">3,923,000원</div>
</div>
</div>
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigation() }
>결제 신청</button>
</div>
</div>
</div>
</main>
</>
);
};

163
src/pages/additional-service/ars-card-payment/request-page.tsx Normal file
View File

@@ -0,0 +1,163 @@
import { useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useExtensionArsApplyMutation } from '@/entities/additional-service/api/use-extension-ars-apply-mutation';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const ArsCardPaymentRequestPage = () => {
const { navigate } = useNavigate();
const { mutateAsync: arsApply } = useExtensionArsApplyMutation();
useSetHeaderTitle('결제 신청');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.additionalService.arsCardPayment.list);
});
const callArsCardPaymentRequest = () => {
let arsApplyParams = {
mid: 'string',
moid: 'string',
goodsName: 'string',
amount: 0,
instmntMonth: '00',
buyerName: 'string',
phoneNumber: 'string',
email: 'string',
arsPaymentMethod: 'SMS',
};
arsApply(arsApplyParams).then((rs) => {
navigate(PATHS.additionalService.arsCardPayment.requestSuccess);
console.log(rs)
}).catch(() => {
}).finally(() => {
});
};
const onClickToRequest = () => {
callArsCardPaymentRequest();
};
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="option-list">
<div className="billing-form gap-16">
<div className="billing-row">
<div className="billing-label">가맹점 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value="nictest001m"
readOnly={ true }
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">주문번호 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value="wadizcop0g2025062"
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">상품명 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value="123456"
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">금액 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value="1000"
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">할부기간 <span>*</span></div>
<div className="billing-field">
<select disabled>
<option selected>일시불</option>
<option>일시불</option>
</select>
</div>
</div>
<div className="billing-row">
<div className="billing-label">구매자명 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value="김테스트"
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">휴대폰 번호 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value="01012345678"
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">이메일</div>
<div className="billing-field">
<input
type="text"
value="NICE@NAVER.COM"
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">결제 방식 <span>*</span></div>
<div className="billing-field">
<div className="seg-buttons">
<button className="btn-36 btn-blue light">SMS</button>
<button className="btn-36 btn-white light">호전환</button>
</div>
</div>
</div>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToRequest() }
>결제 신청</button>
</div>
</div>
</div>
</main>
</>
);
};

43
src/pages/additional-service/ars-card-payment/request-success-page.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderType,
useSetFooterMode,
} from '@/widgets/sub-layout/use-sub-layout';
export const ArsCardPaymentRequestSuccessPage = () => {
const { navigate } = useNavigate();
useSetHeaderType(HeaderType.NoHeader);
useSetFooterMode(false);
const onClickToNavigate = () => {
navigate(PATHS.additionalService.arsCardPayment.list);
};
return (
<>
<div className="success-page" >
<div className="success-body">
<div
className="success-icon"
aria-hidden="true"
></div>
<h1 className="success-title">
<span>신용카드 ARS</span><br/>
<span>결제 신청이 완료되었습니다.</span>
</h1>
<div className="success-result">
<p className="result-text">결과 : [0000] ARS 요청 처리 완료</p>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
>확인</button>
</div>
</div>
</>
);
};

18
src/pages/additional-service/fund-transfer/fund-transfer-page.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const FundTransferPage = () => {
useSetHeaderTitle('자금이체');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
return (
<>
</>
);
};

124
src/pages/additional-service/intro/intro-page.tsx Normal file
View File

@@ -0,0 +1,124 @@
import { PATHS } from '@/shared/constants/paths';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IntroListItem } from '@/entities/additional-service/ui/intro-list-item';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const IntroPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('부가서비스 소개');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
useSetOnBack(() => {
navigate(PATHS.home);
});
const usingList = [
{
className: 'list-wrap01', serviceName: 'SMS 결제 통보', serviceDesc: '입금 요청부터 완료까지 SMS 자동 전송',
icon: IMAGE_ROOT + '/icon_ing03.svg', path: PATHS.additionalService.smsPaymentNotification
},
{
className: 'list-wrap01', serviceName: '신용카드 ARS 결제', serviceDesc: '전화 한 통으로 결제 성공 편리하고 안전한 서비스',
icon: IMAGE_ROOT + '/icon_ing01.svg', path: PATHS.additionalService.arsCardPayment.list
},
{
className: 'list-wrap01', serviceName: 'KEY-IN 결제', serviceDesc: '상담 중 카드정보 입력으로 간편한 결제 지원',
icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment
},
{
className: 'list-wrap01', serviceName: '계좌성명조회', serviceDesc: '예금주 정보 입력으로 즉시 예금주 확인',
icon: IMAGE_ROOT + '/icon_ing04.svg', path: PATHS.additionalService.accountHolderSearch
},
];
const requestList = [
{
className: 'list-wrap02', serviceName: '지급대행', serviceDesc: '하위 가맹점에 빠른 정산금 지급 지급대행 서비스',
icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.paymentAgency
},
{
className: 'list-wrap02', serviceName: '정산대행', serviceDesc: '하위 가맹점 정산금 계산부터 지급까지 자동 해결 서비스',
icon: IMAGE_ROOT + '/icon_ing06.svg', path: PATHS.additionalService.settlementAgency
},
{
className: 'list-wrap02', serviceName: '링크 결제', serviceDesc: '결제 링크 전송만으로 어디서든 결제 가능 서비스',
icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment
},
{
className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',
icon: IMAGE_ROOT + '/icon_ing08.svg', path: PATHS.additionalService.fundTransfer
},
{
className: 'list-wrap02', serviceName: '계좌점유인증', serviceDesc: '1원 송금으로 실제 계좌 점유 확인 여부',
icon: IMAGE_ROOT + '/icon_ing09.svg', path: PATHS.additionalService.accountHolderAuth
},
{
className: 'list-wrap02', serviceName: '알림톡 결제통보', serviceDesc: '결제 상태를 알림톡으로 쉽고 빠른 안내',
icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.kakaoPaymentNotification
},
];
const getUsingList = () => {
let rs = [];
for(let i=0;i<usingList.length;i++){
rs.push(
<IntroListItem
key={ 'key-using-' + i }
className={ usingList[i]?.className }
serviceName={ usingList[i]?.serviceName }
serviceDesc={ usingList[i]?.serviceDesc }
icon={ usingList[i]?.icon }
path={ usingList[i]?.path }
></IntroListItem>
);
}
return rs;
};
const getRequestList = () => {
let rs = [];
for(let i=0;i<requestList.length;i++){
rs.push(
<IntroListItem
key={ 'key-request-' + i }
className={ requestList[i]?.className }
serviceName={ requestList[i]?.serviceName }
serviceDesc={ requestList[i]?.serviceDesc }
icon={ requestList[i]?.icon }
path={ requestList[i]?.path }
></IntroListItem>
);
}
return rs;
};
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active" id="tab1">
<div className="ing-list">
<div className="input-wrapper top-select">
<select>
<option value="1">nicetest00g</option>
<option value="2">nicetest00g</option>
<option value="3">nicetest00g</option>
</select>
</div>
<h3 className="ing-title">사용중인 서비스</h3>
{ getUsingList() }
<h3 className="ing-title">신청 가능한 서비스</h3>
{ getRequestList() }
</div>
</div>
</div>
</main>
</>
);
};

18
src/pages/additional-service/kakao-payment-notification/kakao-payment-notification-page.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const KakaoPaymentNotificationPage = () => {
useSetHeaderTitle('알림톡 결제통보');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
return (
<>
</>
);
};

18
src/pages/additional-service/key-in-payment/key-in-payment-page.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const KeyInPaymentPage = () => {
useSetHeaderTitle('KEY-IN 결제');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
return (
<>
</>
);
};

18
src/pages/additional-service/link-payment/link-payment-page.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const LinkPaymentPage = () => {
useSetHeaderTitle('링크결제');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
return (
<>
</>
);
};

18
src/pages/additional-service/payment-agency/payment-agency-page.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const PaymentAgencyPage = () => {
useSetHeaderTitle('지급대행');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
return (
<>
</>
);
};

18
src/pages/additional-service/settlement-agency/settlement-agency-page.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const SettlementAgencyPage = () => {
useSetHeaderTitle('정산대행');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
return (
<>
</>
);
};

149
src/pages/additional-service/sms-payment-notification/sms-payment-notification-page.tsx Normal file
View File

@@ -0,0 +1,149 @@
import { useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment-detail-resend';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const SmsPaymentNotificationPage = () => {
const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
useSetHeaderTitle('SMS 결제 통보');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
const onClickToShowDetail = () => {
setBottomSmsPaymentDetailResendOn(true);
};
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<section className="summary-section no-border">
<div className="credit-controls">
<div>
<input
className="credit-period"
type="text"
value="2025.06.01 ~ 2025.06.31"
readOnly={ true }
/>
<button
className="filter-btn"
aria-label="필터"
>
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt="검색옵션"
/>
</button>
</div>
<button
className="download-btn"
aria-label="다운로드"
>
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt="다운로드"
/>
</button>
</div>
</section>
<section className="transaction-list">
<div className="date-group">
<div className="date-header">25.06.08(일)</div>
<div
className="transaction-item approved"
onClick={ () => onClickToShowDetail() }
>
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">김*환(7000)</div>
<div className="transaction-details">
<span>nictest01m</span>
<span className="separator">ㅣ</span>
<span>가상계좌 요청</span>
</div>
</div>
<div className="resend-label">재발송</div>
</div>
<div className="transaction-item refund">
<div className="transaction-status">
<div className="status-dot gray"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">최*길(010333*****)</div>
<div className="transaction-details">
<span>nictest01m</span>
<span className="separator">ㅣ</span>
<span>가상계좌 요청+입금</span>
</div>
</div>
<div className="resend-label">재발송</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">박*준(010333*****)</div>
<div className="transaction-details">
<span>nictest01m</span>
<span className="separator">ㅣ</span>
<span>가상계좌 요청+입금</span>
</div>
</div>
<div className="resend-label">재발송</div>
</div>
<div className="transaction-item refund">
<div className="transaction-status">
<div className="status-dot gray"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">이*신(010333*****)</div>
<div className="transaction-details">
<span>nictest01m</span>
<span className="separator">ㅣ</span>
<span>가상계좌 요청</span>
</div>
</div>
<div className="resend-label">재발송</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">김*환(010333*****)</div>
<div className="transaction-details">
<span>nictest01m</span>
<span className="separator">|</span>
<span>가상계좌 요청</span>
</div>
</div>
<div className="resend-label">재발송</div>
</div>
</div>
</section>
</div>
</div>
</main>
<SmsPaymentDetailResend
bottomSmsPaymentDetailResendOn={ bottomSmsPaymentDetailResendOn }
setBottomSmsPaymentDetailResendOn={ setBottomSmsPaymentDetailResendOn }
></SmsPaymentDetailResend>
</>
);
};