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

- 안면인증 페이지 추가 (추후 목업으로 추가 작업 필요)

Browse Source 
- 자금이체 : isFormValid(이체신청 Validation 추가[임시] 추가 작업 필요)
This commit is contained in:
HyeonJongKim
2025-10-16 09:42:09 +09:00
parent b457716c3f
commit a351710cc7
13 changed files with 523 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/additional-service/additional-service-pages.tsx
View File

@@ -39,6 +39,7 @@ import { AccountHolderSearchRequestPage } from './account-holder-search/request-
import { AccountHolderSearchDetailPage } from './account-holder-search/detail-page';
import { AccountHolderAuthDetailPage } from './account-holder-auth/detail-page';
import { LinkPaymentSeparateApprovalPage } from './link-payment/separate-approval/link-payment-separate-approval-page';
import { FaceAuthPage } from './face-auth/face-auth-page';
export const AdditionalServicePages = () => {
return (
@@ -100,6 +101,9 @@ export const AdditionalServicePages = () => {
<Route path={ROUTE_NAMES.additionalService.payout.detail} element={<PayoutDetailPage />} />
<Route path={ROUTE_NAMES.additionalService.payout.request} element={<PayoutRequestPage />} />
</Route>
<Route path={ROUTE_NAMES.additionalService.faceAuth.base}>
<Route path={ROUTE_NAMES.additionalService.faceAuth.list} element={<FaceAuthPage />} />
</Route>
</SentryRoutes>
</>
);

204
src/pages/additional-service/face-auth/face-auth-page.tsx Normal file
View File

@@ -0,0 +1,204 @@
import moment from 'moment';
import { ProcessResult } from '@/entities/additional-service/model/types';
import { SortTypeKeys } from '@/entities/common/model/types';
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { HeaderType } from '@/entities/common/model/types';
import { useEffect, useState } from 'react';
import { useStore } from '@/shared/model/store';
import { PATHS } from '@/shared/constants/paths';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { FaceAuthList } from '@/entities/additional-service/ui/face-auth/face-auth-list';
import { FaceAuthFilter } from '@/entities/additional-service/ui/face-auth/filter/face-auth-filter';
import { FaceAuthListItem, FaceAuthTransactionType } from '@/entities/additional-service/model/face-auth/types';
import { ResultStatusBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
export const FaceAuthPage = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState({});
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [mid, setMid] = useState<string>(userMid);
const [memberId, setMemberId] = useState<string>('');
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
const [transactionType, setTransactionType] = useState<FaceAuthTransactionType>(FaceAuthTransactionType.ALL);
const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
useSetHeaderTitle('안면인증');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
//TODO : API 연동
//const { mutateAsync: faceAuthHistoryList } = useExtensionFaceAuthHistoryListMutation();
//const { mutateAsync: downloadExcel } = useExtensionFaceAuthDownloadExcelMutation();
const assembleData = (content: Array<FaceAuthListItem>) => {
console.log('rs.content:', content);
let data: any = {};
if (content && content.length > 0) {
for (let i = 0; i < content?.length; i++) {
let requestDate = content[i]?.requestDate?.substring(0, 8);
let groupDate = moment(requestDate).format('YYYYMMDD');
if (!!groupDate && !data.hasOwnProperty(groupDate)) {
data[groupDate] = [];
}
if (!!groupDate && data.hasOwnProperty(groupDate)) {
data[groupDate].push(content[i]);
}
}
}
console.log('Data : ', data);
return data;
};
const callList = (option?: {
sortType?: SortTypeKeys,
val?: string
}) => {
pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
setPageParam(pageParam);
let listParams = {
mid: mid,
memberId: memberId,
fromDate: startDate,
toDate: endDate,
transactionType: transactionType,
resultStatus: processResult,
page: pageParam
};
//faceAuthHistoryList(listParams).then((rs) => {
// setListItems(assembleData(rs.content));
//});
};
const onClickToDownloadExcel = () => {
// downloadExcel({
// mid: mid,
// memberId: memberId,
// fromDate: startDate,
// toDate: endDate,
// transactionType: transactionType,
// resultStatus: processResult
// }).then((rs) => {
// console.log('Excel Dowload Status : ' + rs.status);
// });
};
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
};
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({ sortType: sort });
};
const onClickToTransactionStatus = (val: ProcessResult) => {
setProcessResult(val);
callList({
val: val
});
};
useEffect(() => {
callList();
}, [mid, memberId, startDate, endDate, transactionType, processResult]);
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<section className="summary-section">
<div className="credit-controls">
<div>
<input
className="credit-period"
type="text"
value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
readOnly={true}
/>
<button
className="filter-btn"
aria-label="필터"
>
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt="검색옵션"
onClick={() => onClickToOpenFilter()}
/>
</button>
</div>
<button
className="download-btn"
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt="다운로드"
onClick={() => onClickToDownloadExcel()}
/>
</button>
</div>
</section>
<div className="filter-section">
<SortTypeBox
sortType={sortType}
onClickToSort={onClickToSort}
></SortTypeBox>
<div className="excrow">
<div className="full-menu-keywords no-padding">
{
ResultStatusBtnGroup.map((value, index) => (
<span
key={`key-service-code=${index}`}
className={`keyword-tag ${(processResult === value.value) ? 'active' : ''}`}
onClick={() => onClickToTransactionStatus(value.value)}
>{value.name}</span>
))
}
</div>
</div>
</div>
<FaceAuthList
listItems={listItems}
mid={mid}
></FaceAuthList>
</div>
</div>
</main>
<FaceAuthFilter
filterOn={filterOn}
setFilterOn={setFilterOn}
mid={mid}
memberId={memberId}
startDate={startDate}
endDate={endDate}
transactionType={transactionType}
processResult={processResult}
setMid={setMid}
setMemberId={setMemberId}
setStartDate={setStartDate}
setEndDate={setEndDate}
setTransactionType={setTransactionType}
setProcessResult={setProcessResult}
/>
</>
);
};

16
src/pages/additional-service/fund-account/transfer-request-page.tsx
View File

@@ -17,6 +17,7 @@ export const FundAccountTransferRequestPage = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [mid, setMid] = useState<string>(userMid);
const [transferAmount, setTransferAmount] = useState<number>(0);
const [receiveBankCode, setReceiveBankCode] = useState<string>('');
@@ -46,6 +47,14 @@ export const FundAccountTransferRequestPage = () => {
navigate(PATHS.additionalService.payout.list);
});
};
const isFormValid = () => {
return (
receiveAccountNo.trim() !== '' &&
receiveAccountName.trim() !== '' &&
transferAmount >0
)
}
return (
<>
@@ -55,9 +64,11 @@ export const FundAccountTransferRequestPage = () => {
<div className="ing-list">
<div className="billing-form gap-30">
<div className="billing-row">
<div className="billing-label">서브ID</div>
<div className="billing-label">가맹점</div>
<div className="billing-field">
<select></select>
<select>
<option>userMid</option>
</select>
</div>
</div>
<div className="billing-row">
@@ -121,6 +132,7 @@ export const FundAccountTransferRequestPage = () => {
<button
className="btn-50 btn-blue flex-1"
onClick={ callExtensionFundAccountTransferRequest }
disabled={!isFormValid}
>등록</button>
</div>
</>

13
src/pages/additional-service/key-in-payment/requeset-page.tsx
View File

@@ -13,14 +13,15 @@ import {
} from '@/widgets/sub-layout/use-sub-layout';
import { overlay } from 'overlay-kit';
import { Dialog } from '@/shared/ui/dialogs/dialog';
import { useStore } from '@/shared/model/store';
export const KeyInPaymentRequestPage = () => {
const { navigate } = useNavigate();
const location = useLocation();
const { mid: receivedMid } = location.state || {};
const userMid = useStore.getState().UserStore.mid;
const [mid, setMid] = useState<string>(receivedMid || '');
const [mid, setMid] = useState<string>(userMid || '');
const [goodsName, setGoodsName] = useState<string>('');
const [amount, setAmount] = useState<number>(0);
const [buyerName, setBuyerName] = useState<string>('');
@@ -115,7 +116,7 @@ export const KeyInPaymentRequestPage = () => {
const isValidCardNumber = () => {
return cardNo1.length === 4 && cardNo2.length === 4 &&
cardNo3.length === 4 && cardNo4.length === 4;
cardNo3.length === 4 && cardNo4.length === 4;
};
const isValidCardExpiration = () => {
@@ -293,7 +294,7 @@ export const KeyInPaymentRequestPage = () => {
<div className="billing-row">
<div className="billing-label">유효기간(월/년)<span>*</span></div>
<div className="billing-field" style={{display: 'flex', gap: '8px', alignItems: 'center'}}>
<div className="billing-field" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<input
type="text"
value={cardExpirationMonth}
@@ -305,7 +306,7 @@ export const KeyInPaymentRequestPage = () => {
pattern="[0-9]*"
maxLength={2}
placeholder='MM'
style={{flex: 1}}
style={{ flex: 1 }}
/>
<span>/</span>
<input
@@ -319,7 +320,7 @@ export const KeyInPaymentRequestPage = () => {
pattern="[0-9]*"
maxLength={2}
placeholder='YY'
style={{flex: 1}}
style={{ flex: 1 }}
/>
</div>
</div>

2
src/pages/additional-service/link-payment/apply/link-payment-apply-success-page.tsx
View File

@@ -11,7 +11,7 @@ export const LinkPaymentApplySuccessPage = () => {
useSetFooterMode(false);
const onClickToHome = () => {
navigate(PATHS.additionalService.linkPayment.base);
navigate(PATHS.additionalService.linkPayment.shippingHistory);
};
return (

63
src/pages/additional-service/payout/request-page.tsx
View File

@@ -2,10 +2,10 @@ import { IMAGE_ROOT } from "@/shared/constants/common";
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { CalendarType, HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useState } from "react";
@@ -25,7 +25,7 @@ export const PayoutRequestPage = () => {
const [settlementDate, setSettlementDate] = useState<string>('');
const { mutateAsync: extensionPayoutRequest } = useExtensionPayoutRequestMutation();
useSetHeaderTitle('지급대행 신청');
useSetHeaderType(HeaderType.RightClose);
useSetFooterMode(false);
@@ -45,6 +45,14 @@ export const PayoutRequestPage = () => {
});
};
const isFormValid = () => {
return (
submallId.trim() !== '' &&
disbursementAmount > 0 &&
settlementDate.trim() !== ''
);
};
const setNewDate = (date: string) => {
setSettlementDate(date);
setCalendarOpen(false);
@@ -62,40 +70,40 @@ export const PayoutRequestPage = () => {
<div className="billing-row">
<div className="billing-label">서브ID</div>
<div className="billing-field">
<input
type="text"
value={ submallId }
onChange={ (e) => setSubmallId(e.target.value) }
<input
type="text"
value={submallId}
onChange={(e) => setSubmallId(e.target.value)}
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">지급액</div>
<div className="billing-field">
<input
type="text"
value={ disbursementAmount }
onChange={ (e) => setDisbursementAmount(parseInt(e.target.value)) }
/>
<input
type="text"
value={disbursementAmount}
onChange={(e) => setDisbursementAmount(parseInt(e.target.value))}
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">지급일</div>
<div className="billing-field">
<div className="input-wrapper date">
<input
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value={ settlementDate }
type="text"
placeholder="날짜 선택"
value={settlementDate}
/>
<button
<button
className="date-btn"
type="button"
onClick={ () => onClickToOpenCalendar() }
onClick={() => onClickToOpenCalendar()}
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
src={IMAGE_ROOT + '/ico_date.svg'}
alt="날짜 선택"
/>
</button>
@@ -108,16 +116,17 @@ export const PayoutRequestPage = () => {
</div>
</main>
<div className="apply-row">
<button
<button
className="btn-50 btn-blue flex-1"
onClick={ callExtensionPayoutRequest }
onClick={callExtensionPayoutRequest}
disabled={!isFormValid()}
>신청</button>
</div>
<NiceCalendar
calendarOpen={ calendarOpen }
setCalendarOpen={ setCalendarOpen }
calendarType={ CalendarType.Single }
setNewDate={ setNewDate }
calendarOpen={calendarOpen}
setCalendarOpen={setCalendarOpen}
calendarType={CalendarType.Single}
setNewDate={setNewDate}
></NiceCalendar>
</>
);