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

- 자금이체 : isFormValid(이체신청 Validation 추가[임시] 추가 작업 필요)
2025-10-16 09:42:09 +09:00
parent b457716c3f
commit a351710cc7
13 changed files with 523 additions and 41 deletions
--- a/src/entities/additional-service/model/face-auth/constant.ts
+++ b/src/entities/additional-service/model/face-auth/constant.ts
@@ -0,0 +1,7 @@
+import { ProcessResult } from "../types";
+
+export const ResultStatusBtnGroup = [
+    { name: '전체', value: ProcessResult.ALL },
+    { name: '성공', value: ProcessResult.SUCCESS },
+    { name: '실패', value: ProcessResult.FAIL },
+];
--- a/src/entities/additional-service/model/face-auth/types.ts
+++ b/src/entities/additional-service/model/face-auth/types.ts
@@ -0,0 +1,39 @@
+
+// ========================================
+// 안면인증 관련 타입들
+// ========================================
+
+import { FilterProps, ListItemProps, ProcessResult } from "../types";
+
+export enum FaceAuthTransactionType {
+  ALL = "ALL",
+  AUTH = "AUTH",
+  REGISTER = "REGISTER"
+}
+
+export interface FaceAuthListItem {
+  tid?: string;
+  requestDate?: string;
+  resultStatus?: string;
+  name?: string;
+}
+
+export interface FaceAuthListProps {
+  listItems: Record<string, Array<ListItemProps>>;
+  mid: string;
+}
+
+export interface FaceAuthFilterProps extends FilterProps {
+  mid: string;
+  memberId: string;
+  startDate: string;
+  endDate: string;
+  transactionType: FaceAuthTransactionType;
+  processResult: ProcessResult;
+  setMid: (mid: string) => void;
+  setMemberId: (memberId: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setTransactionType: (transactionType: FaceAuthTransactionType) => void;
+  setProcessResult: (processResult: ProcessResult) => void;
+}
--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
@@ -5,6 +5,7 @@ import { ArsListContent } from './ars/types';
 import { AlimtalkListContent } from './alimtalk/types';
 import { SmsPaymentListItem } from './sms-payment/types';
 import type { ExtensionSmsDetailResponse } from './sms-payment/types';
+import { FaceAuthListItem } from './face-auth/types';

 // ========================================
 // 공통 Enums 및 타입들
@@ -30,6 +31,7 @@ export enum AdditionalServiceCategory {
  Payout = 'Payout',
  Ars = 'Ars',
  Alimtalk = 'Alimtalk',
+  FaceAuth = 'FaceAuth'
 }

 // ========================================
@@ -387,7 +389,7 @@ export interface ListItemProps extends
  LinkPaymentWaitListItem, SmsPaymentListItem,
  PayoutContent, FundAccountTransferContentItem,
  FundAccountResultContentItem,
-  ArsListContent, AlimtalkListContent {
+  ArsListContent, AlimtalkListContent, FaceAuthListItem {
  additionalServiceCategory?: AdditionalServiceCategory;
  mid?: string;
  onResendClick?: (mid: string, tid: string) => void;
--- a/src/entities/additional-service/ui/face-auth/face-auth-list.tsx
+++ b/src/entities/additional-service/ui/face-auth/face-auth-list.tsx
@@ -0,0 +1,32 @@
+import { ListDateGroup } from '../list-date-group';
+import { AdditionalServiceCategory } from '../../model/types';
+import { FaceAuthListProps } from '../../model/face-auth/types';
+
+export const FaceAuthList = ({
+    listItems,
+    mid
+}: FaceAuthListProps) => {
+    const getListDateGroup = () => {
+        let rs = [];
+        for (const [key, value] of Object.entries(listItems)) {
+            rs.push(
+                <ListDateGroup
+                    additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
+                    key={key}
+                    date={key}
+                    items={value}
+                    mid={mid}
+                ></ListDateGroup>
+            );
+        }
+        return rs;
+    };
+
+    return (
+        <>
+            <div className="transaction-list">
+                {getListDateGroup()}
+            </div>
+        </>
+    );
+};
--- a/src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx
+++ b/src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx
@@ -0,0 +1,138 @@
+import moment from 'moment';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import {ProcessResult} from '../../../model/types';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterInput } from '@/shared/ui/filter/input';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
+import { useStore } from '@/shared/model/store';
+import { FaceAuthFilterProps, FaceAuthTransactionType } from '@/entities/additional-service/model/face-auth/types';
+
+export const FaceAuthFilter = ({
+	filterOn,
+	setFilterOn,
+	mid,
+	memberId,
+	startDate,
+	endDate,
+	transactionType,
+	processResult,
+	setMid,
+	setMemberId,
+	setStartDate,
+	setEndDate,
+	setTransactionType,
+	setProcessResult
+}: FaceAuthFilterProps) => {
+
+	const [filterMid, setFilterMid] = useState<string>(mid);
+	const [filterMemberId, setFilterMemberId] = useState<string>(memberId);
+	const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
+	const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
+	const [filterTransactionType, setFilterTransactionType] = useState<FaceAuthTransactionType>(transactionType);
+	const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
+
+	const midOptions = useStore.getState().UserStore.selectOptionsMids;
+
+	const onClickToClose = () => {
+		setFilterOn(false);
+	};
+
+	const onClickToSetFilter = () => {
+		setMid(filterMid);
+		setMemberId(filterMemberId);
+		setStartDate(filterStartDate);
+		setEndDate(filterEndDate);
+		setTransactionType(filterTransactionType);
+		setProcessResult(filterProcessResult);
+		onClickToClose();
+	};
+
+	const transactionTypeBtnGroup = [
+		{ name: '전체', value: FaceAuthTransactionType.ALL },
+		{ name: '인증', value: FaceAuthTransactionType.AUTH },
+		{ name: '등록', value: FaceAuthTransactionType.REGISTER },
+	];
+
+	const processResultBtnGroup = [
+		{ name: '전체', value: ProcessResult.ALL },
+		{ name: '성공', value: ProcessResult.SUCCESS },
+		{ name: '실패', value: ProcessResult.FAIL },
+	];
+
+	return (
+		<>
+			<motion.div
+				className="full-menu-modal"
+				initial="hidden"
+				animate={(filterOn) ? 'visible' : 'hidden'}
+				variants={ FilterMotionVariants }
+				transition={ FilterMotionDuration }
+				style={ FilterMotionStyle }
+			>
+				<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 pt-16">
+						<FilterSelect
+							title='가맹점'
+							selectValue={filterMid}
+							selectSetter={setFilterMid}
+							selectOptions={midOptions}
+						></FilterSelect>
+
+						<FilterInput
+							title='가맹점회원ID'
+							inputValue={filterMemberId}
+							inputSetter={setFilterMemberId}
+						></FilterInput>
+
+						<FilterCalendar
+							startDate={filterStartDate}
+							endDate={filterEndDate}
+							setStartDate={setFilterStartDate}
+							setEndDate={setFilterEndDate}
+						></FilterCalendar>
+
+						<FilterButtonGroups
+							title='거래유형'
+							activeValue={filterTransactionType}
+							btnGroups={transactionTypeBtnGroup}
+							setter={setFilterTransactionType}
+						></FilterButtonGroups>
+
+						<FilterButtonGroups
+							title='인증결과'
+							activeValue={filterProcessResult}
+							btnGroups={processResultBtnGroup}
+							setter={setFilterProcessResult}
+						></FilterButtonGroups>
+					</div>
+					<div className="apply-row">
+						<button
+							className="btn-50 btn-blue flex-1"
+							onClick={() => onClickToSetFilter()}
+						>적용</button>
+					</div>
+				</div>
+			</motion.div>
+		</>
+	);
+}
--- a/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
+++ b/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
@@ -26,9 +26,7 @@ export const KeyInPaymentList = ({
  };

  const onClickToNavigate = () => {
-    navigate(PATHS.additionalService.keyInPayment.request, {
-      state: { mid }
-    });
+    navigate(PATHS.additionalService.keyInPayment.request);
  };

  return (
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -28,6 +28,7 @@ export const ListItem = ({
  paymentMethod, receiverName,

  smsCl,
+  name,
  onResendClick
 }: ListItemProps) => {
  const { navigate } = useNavigate();
@@ -80,6 +81,14 @@ export const ListItem = ({
        rs = 'gray';
      }
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+      if (resultStatus === "SUCCESS") {
+        rs = 'blue';
+      }
+      else if (resultStatus === "FAIL") {
+        rs = 'gray';
+      }
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      if (paymentStatus === "PAYMENT_COMPLETE") {
        rs = 'blue';
@@ -115,12 +124,15 @@ export const ListItem = ({
  };

  const onClickToNavigate = () => {
+    // 상세페이지 없음
    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment ||
-      additionalServiceCategory === AdditionalServiceCategory.SMSPayment
+      additionalServiceCategory === AdditionalServiceCategory.SMSPayment ||
+      additionalServiceCategory === AdditionalServiceCategory.FaceAuth
    ) {

      return;
    }
+    //이하 상세페이지 존재
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      navigate(PATHS.additionalService.accountHolderAuth.detail, {
        state: {
@@ -225,6 +237,10 @@ export const ListItem = ({
      let time = requestDate?.substring(8, 14);
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+      let time = requestDate?.substring(8, 14);
+      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      timeStr = moment(requestDate).format('mm:ss');
    }
@@ -256,6 +272,9 @@ export const ListItem = ({
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      str = `${accountNo}`;
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+      str = `${name}(${tid})`;
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory ||
      additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait
    ) {
@@ -316,6 +335,16 @@ export const ListItem = ({
        </div>
      );
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+      rs.push(
+        //TODO : 추후 수정 필요
+        <div key="face-auth" className="transaction-details">
+          <span>{processStatus}</span>
+          <span className="separator">|</span>
+          <span>{status}</span>
+        </div>
+      );
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
        rs.push(
@@ -418,6 +447,13 @@ export const ListItem = ({
        </div>
      );
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+      rs.push(
+        <div className={`status-label ${resultStatus === 'SUCCESS' ? 'success' : 'fail'}`}>
+          {resultStatus === 'SUCCESS' ? '성공' : '실패'}
+        </div>
+      );
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      rs.push(
        <div className={`status-label ${(transferStatus === 'REQUEST' || transferStatus === 'SUCCESS') ? 'success' : 'fail'}`}>