- 안명인증 페이지 추가

src/entities/additional-service/api/face-auth/use-extension-face-auth-download-excel-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import {
+  ExtensionFaceAuthExcelDownlaodPrams,
+  ExtensionFaceAuthExcelDownlaodResponse
+} from '../../model/face-auth/types';
+import {
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionFaceAuthDownloadExcel = (params: ExtensionFaceAuthExcelDownlaodPrams) => {
+  return resultify(
+    axios.post<ExtensionFaceAuthExcelDownlaodResponse>(API_URL_ADDITIONAL_SERVICE.extensionFaceAuthExcelDownload(), params),
+  );
+};
+
+export const useExtensionFaceAuthDownloadExcelMutation = (options?: UseMutationOptions<ExtensionFaceAuthExcelDownlaodResponse, CBDCAxiosError, ExtensionFaceAuthExcelDownlaodPrams>) => {
+  const mutation = useMutation<ExtensionFaceAuthExcelDownlaodResponse, CBDCAxiosError, ExtensionFaceAuthExcelDownlaodPrams>({
+    ...options,
+    mutationFn: (params: ExtensionFaceAuthExcelDownlaodPrams) => extensionFaceAuthDownloadExcel(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/additional-service/api/face-auth/use-extension-face-auth-list-mutation.ts

@@ -0,0 +1,26 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+import { ExtensionFaceAuthListParams, ExtensionFaceAuthListResponse } from '../../model/face-auth/types';
+
+export const extensionFaceAuthList = (params: ExtensionFaceAuthListParams) => {
+    return resultify(
+        axios.post<ExtensionFaceAuthListResponse>(API_URL_ADDITIONAL_SERVICE.extensionFaceAuthList(), params),
+    );
+};
+
+export const useExtensionFaceAuthListtMutation = (options?: UseMutationOptions<ExtensionFaceAuthListResponse, CBDCAxiosError, ExtensionFaceAuthListParams>) => {
+    const mutation = useMutation<ExtensionFaceAuthListResponse, CBDCAxiosError, ExtensionFaceAuthListParams>({
+        ...options,
+        mutationFn: (params: ExtensionFaceAuthListParams) => extensionFaceAuthList(params),
+    });
+
+    return {
+        ...mutation,
+    };
+};

src/entities/additional-service/model/face-auth/constant.ts

@@ -1,9 +1,36 @@
-import { ProcessResult } from "../types";
+import { FaceAuthResult, FaceAuthTransType } from "./types";
+
+export const AuthResultBtnGroup = [
+    { name: '전체', value: FaceAuthResult.ALL },
+    { name: '성공', value: FaceAuthResult.SUCCESS },
+    { name: '실패', value: FaceAuthResult.FAIL },
+];
+
+export const TransactionTypeBtnGroup = [
+    { name: '전체', value: FaceAuthTransType.ALL },
+    { name: '인증', value: FaceAuthTransType.AUTH },
+    { name: '등록', value: FaceAuthTransType.REGISTER },
+];
 
 
+export const getAuthResultStatusText = (status?: string): string => {
+    if (!status) return '';
 
-export const ResultStatusBtnGroup = [
+    const authResultMap: Record<string, string> = {
-    { name: '전체', value: ProcessResult.ALL },
+        'SUCCESS': '성공',
-    { name: '성공', value: ProcessResult.SUCCESS },
+        'FAIL': '실패'
-    { name: '실패', value: ProcessResult.FAIL },
+    }
-];
+
+    return authResultMap[status] || status;
+}
+
+export const getTransTypeText = (transType?: string): string => {
+    if (!transType) return '';
+
+    const transTypeMap: Record<string, string> = {
+        'REGISTER': '등록',
+        'AUTH': '인증'
+    }
+
+    return transTypeMap[transType] || transType;
+}

src/entities/additional-service/model/face-auth/types.ts

@@ -3,19 +3,32 @@
 // 안면인증 관련 타입들
 // ========================================
 
-import { FilterProps, ListItemProps, ProcessResult } from "../types";
+import { DefaulResponsePagination, DefaultRequestPagination } from "@/entities/common/model/types";
+import { ExtensionRequestParams, FilterProps, ListItemProps, ProcessResult } from "../types";
 
-export enum FaceAuthTransactionType {
+export enum FaceAuthTransType {
-  ALL = "ALL",
+  ALL = "",
-  AUTH = "AUTH",
+  REGISTER = "REGISTER",
-  REGISTER = "REGISTER"
+  AUTH = "AUTH"
+}
+
+export enum FaceAuthResult {
+  ALL = "",
+  SUCCESS = "SUCCESS",
+  FAIL = "FAIL"
 }
 
 export interface FaceAuthListItem {
-  tid?: string;
+  companyName?: string;
+  mid?: string;
+  groupId?: string;
   requestDate?: string;
-  resultStatus?: string;
+  requestTime?: string;
-  name?: string;
+  cpid?: string;
+  userMallId?: string;
+  transType?: FaceAuthTransType;
+  authResult?: string;
+  failReason?: string;
 }
 
 export interface FaceAuthListProps {
@@ -25,15 +38,39 @@ export interface FaceAuthListProps {
 
 export interface FaceAuthFilterProps extends FilterProps {
   mid: string;
-  memberId: string;
+  userMallId: string;
-  startDate: string;
+  fromDate: string;
-  endDate: string;
+  toDate: string;
-  transactionType: FaceAuthTransactionType;
+  transType: FaceAuthTransType;
-  processResult: ProcessResult;
+  authResult: FaceAuthResult;
   setMid: (mid: string) => void;
-  setMemberId: (memberId: string) => void;
+  setUserMallId: (userMallId: string) => void;
-  setStartDate: (startDate: string) => void;
+  setFromDate: (fromDate: string) => void;
-  setEndDate: (endDate: string) => void;
+  setToDate: (toDate: string) => void;
-  setTransactionType: (transactionType: FaceAuthTransactionType) => void;
+  setTransType: (transType: FaceAuthTransType) => void;
-  setProcessResult: (processResult: ProcessResult) => void;
+  setAuthResult: (authResult: FaceAuthResult) => void;
+}
+
+export interface ExtensionFaceAuthListParams extends ExtensionRequestParams {
+  fromDate: string;
+  toDate: string;
+  userMallId: string;
+  transType: FaceAuthTransType;
+  authResult: string;
+  page?: DefaultRequestPagination
+}
+
+export interface ExtensionFaceAuthListResponse extends DefaulResponsePagination {
+  content: Array<FaceAuthListItem>
+}
+
+export interface ExtensionFaceAuthExcelDownlaodPrams {
+  mid: string;
+  email: string;
+  fromDate: string;
+  toDate: string;
+}
+
+export interface ExtensionFaceAuthExcelDownlaodResponse {
+  status : boolean;
 }

src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {ProcessResult} from '../../../model/types';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterInput } from '@/shared/ui/filter/input';
@@ -9,60 +9,53 @@ 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';
+import { FaceAuthFilterProps, FaceAuthResult, FaceAuthTransType } from '@/entities/additional-service/model/face-auth/types';
+import { AuthResultBtnGroup, TransactionTypeBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
 
 export const FaceAuthFilter = ({
 	filterOn,
 	setFilterOn,
 	mid,
-	memberId,
+	userMallId,
-	startDate,
+	fromDate,
-	endDate,
+	toDate,
-	transactionType,
+	transType,
-	processResult,
+	authResult,
 	setMid,
-	setMemberId,
+	setUserMallId,
-	setStartDate,
+	setFromDate,
-	setEndDate,
+	setToDate,
-	setTransactionType,
+	setTransType,
-	setProcessResult
+	setAuthResult
 }: FaceAuthFilterProps) => {
 
 	const [filterMid, setFilterMid] = useState<string>(mid);
-	const [filterMemberId, setFilterMemberId] = useState<string>(memberId);
+	const [filterMemberId, setFilterMemberId] = useState<string>(userMallId);
-	const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
+	const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYYMMDD'));
-	const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
+	const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYYMMDD'));
-	const [filterTransactionType, setFilterTransactionType] = useState<FaceAuthTransactionType>(transactionType);
+	const [filterTransType, setFIlterTransType] = useState<FaceAuthTransType>(transType);
-	const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
+	const [filterAuthResult, setFilterAuthResult] = useState<FaceAuthResult>(authResult);
 
 	const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
+	useEffect(() => {
+		setFilterAuthResult(authResult);
+	}, [authResult]);
+
 	const onClickToClose = () => {
 		setFilterOn(false);
 	};
 
 	const onClickToSetFilter = () => {
 		setMid(filterMid);
-		setMemberId(filterMemberId);
+		setUserMallId(filterMemberId);
-		setStartDate(filterStartDate);
+		setFromDate(filterFromDate);
-		setEndDate(filterEndDate);
+		setToDate(filterToDate);
-		setTransactionType(filterTransactionType);
+		setTransType(filterTransType);
-		setProcessResult(filterProcessResult);
+		setAuthResult(filterAuthResult);
 		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
@@ -105,24 +98,24 @@ export const FaceAuthFilter = ({
 						></FilterInput>
 
 						<FilterCalendar
-							startDate={filterStartDate}
+							startDate={filterFromDate}
-							endDate={filterEndDate}
+							endDate={filterToDate}
-							setStartDate={setFilterStartDate}
+							setStartDate={setFilterFromDate}
-							setEndDate={setFilterEndDate}
+							setEndDate={setFilterToDate}
 						></FilterCalendar>
 
 						<FilterButtonGroups
 							title='거래유형'
-							activeValue={filterTransactionType}
+							activeValue={filterTransType}
-							btnGroups={transactionTypeBtnGroup}
+							btnGroups={TransactionTypeBtnGroup}
-							setter={setFilterTransactionType}
+							setter={setFIlterTransType}
 						></FilterButtonGroups>
 
 						<FilterButtonGroups
 							title='인증결과'
-							activeValue={filterProcessResult}
+							activeValue={filterAuthResult}
-							btnGroups={processResultBtnGroup}
+							btnGroups={AuthResultBtnGroup}
-							setter={setFilterProcessResult}
+							setter={setFilterAuthResult}
 						></FilterButtonGroups>
 					</div>
 					<div className="apply-row">

src/entities/additional-service/ui/list-date-group.tsx

@@ -30,6 +30,7 @@ export const ListDateGroup = ({
             paymentDate= { items[i]?.paymentDate}
             paymentStatus={ items[i]?.paymentStatus}
             requestDate={ items[i]?.requestDate }
+            requestTime={ items[i]?.requestTime}
             registDate={ items[i]?.registDate }
             bankName={ items[i]?.bankName}
             accountName={ items[i]?.accountName}
@@ -69,6 +70,12 @@ export const ListDateGroup = ({
             paymentMethod={ items[i]?.paymentMethod }
             receiverName={ items[i]?.receiverName }
             serviceCode={ items[i]?.serviceCode}
+            groupId={ items[i]?.groupId}
+            cpid={ items[i]?.cpid}
+            userMallId={ items[i]?.userMallId}
+            transType={ items[i]?.transType }
+            authResult={ items[i]?.authResult }
+            failReason={ items[i]?.failReason }
 
             smsCl= { items[i]?.smsCl }
             onResendClick={ onResendClick }

src/entities/additional-service/ui/list-item.tsx

@@ -11,6 +11,7 @@ import { getKeyInPaymentPaymentStatusName } from '../model/key-in/constant';
 import { getArsPaymentStatusName, getArsOrderStatusName } from '../model/ars/constant';
 import { ServiceCode } from '../model/alimtalk/types';
 import { getAlimtalkAlimClText, getAlimtalkSendClTypeText, getAlimtalkSendTypeText, getAlimtalkServiceCodeText } from '../model/alimtalk/constant';
+import { getAuthResultStatusText, getTransTypeText } from '../model/face-auth/constant';
 
 export const ListItem = ({
   additionalServiceCategory,
@@ -32,8 +33,8 @@ export const ListItem = ({
   buyerName,receiverInfo,
   seq,serviceCode,sendDate,
 
-  smsCl,
+  smsCl,groupId,userMallId,transType,
-  name,
+  authResult,failReason,requestTime,
   onResendClick
 }: ListItemProps) => {
   const { navigate } = useNavigate();
@@ -87,10 +88,10 @@ export const ListItem = ({
       }
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
-      if (resultStatus === "SUCCESS") {
+      if (authResult === "SUCCESS") {
         rs = 'blue';
       }
-      else if (resultStatus === "FAIL") {
+      else if (authResult === "FAIL") {
         rs = 'gray';
       }
     }
@@ -237,6 +238,14 @@ export const ListItem = ({
         }
       });
     }
+    // else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+    //   navigate(PATHS.additionalService.faceAuth.detail, {
+    //     state: {
+    //       additionalServiceCategory: additionalServiceCategory,
+    //       mid: mid
+    //     }
+    //   })
+    // }
     else {
       alert('additionalServiceCategory가 존재하지 않습니다.');
     }
@@ -301,10 +310,9 @@ export const ListItem = ({
       statusText = transferStatus || '';
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
-      statusText = status || '';
+      statusText = getTransTypeText(transType)
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
-      console.log(smsCl)
       statusText = getSmsClName(smsCl);
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
@@ -331,7 +339,7 @@ export const ListItem = ({
       str = `${accountNo}`;
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
-      str = `${name}(${tid})`;
+      str = `${userMallId}(${mid})`;
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory ||
       additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait
@@ -390,11 +398,15 @@ export const ListItem = ({
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
       rs.push(
-        //TODO : 
         <div key="face-auth" className="transaction-details">
-          <span>{processStatus}</span>
+          <span>{getStatus()}</span>
           <span className="separator">|</span>
-          <span>{status}</span>
+          <span>
+            {authResult === 'FAIL'
+              ? `${getAuthResultStatusText(authResult)}: ${failReason}`
+              : getAuthResultStatusText(authResult)
+            }
+          </span>
         </div>
       );
     }
@@ -512,8 +524,8 @@ export const ListItem = ({
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
       rs.push(
-        <div className={`status-label ${resultStatus === 'SUCCESS' ? 'success' : 'fail'}`}>
+        <div className={`status-label ${authResult === 'SUCCESS' ? 'success' : 'fail'}`}>
-          {resultStatus === 'SUCCESS' ? '성공' : '실패'}
+          {authResult === 'SUCCESS' ? '성공' : '실패'}
         </div>
       );
     }

src/entities/common/model/types.ts

@@ -91,6 +91,7 @@ export enum SortTypeKeys {
 export interface SortTypeBoxProps {
   sortType: SortTypeKeys;
   onClickToSort: (sortType: SortTypeKeys) => void;
+  sortOptions?: Array<{key: SortTypeKeys, label: string}>;
 };
 
 export interface CodesSelectParams {

src/entities/common/ui/sort-type-box.tsx

@@ -1,21 +1,25 @@
 import { SortTypeKeys, SortTypeBoxProps } from '../model/types';
 export const SortTypeBox = ({
   sortType,
-  onClickToSort
+  onClickToSort,
+  sortOptions = [
+    { key: SortTypeKeys.LATEST, label: '최신순' },
+    { key: SortTypeKeys.HIGH_AMOUNT, label: '고액순' }
+  ]
 }: SortTypeBoxProps) => {
-   
+
   return (
     <>
       <div className="sort-options">
-        <button 
+        {sortOptions.map((option, index) => (
-          className={ `sort-btn ${(sortType === SortTypeKeys.LATEST)? 'active': ''}` }
+          <span key={option.key}>
-          onClick={ () => onClickToSort(SortTypeKeys.LATEST) }
+            {index > 0 && <span className="sort-divider">|  </span>}
-        >최신순</button>
+            <button
-        <span className="sort-divider">|</span>
+              className={`sort-btn ${(sortType === option.key) ? 'active' : ''}`}
-        <button 
+              onClick={() => onClickToSort(option.key)}
-          className={ `sort-btn ${(sortType === SortTypeKeys.HIGH_AMOUNT)? 'active': ''}` }
+            >{option.label}</button>
-          onClick={ () => onClickToSort(SortTypeKeys.HIGH_AMOUNT) }
+          </span>
-        >고액순</button>
+        ))}
       </div>
     </>
   );

src/pages/additional-service/face-auth/face-auth-page.tsx

@@ -1,12 +1,11 @@
 import moment from 'moment';
-import { ProcessResult } from '@/entities/additional-service/model/types';
+import { AdditionalServiceCategory, ProcessResult } from '@/entities/additional-service/model/types';
-import { SortTypeKeys } from '@/entities/common/model/types';
+import { DefaultRequestPagination, HeaderType, 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 { JSX, useEffect, useState } from 'react';
-import { useEffect, useState } from 'react';
 import { useStore } from '@/shared/model/store';
 import { PATHS } from '@/shared/constants/paths';
 import {
@@ -16,26 +15,28 @@ import {
     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 { ExtensionFaceAuthExcelDownlaodPrams, ExtensionFaceAuthExcelDownlaodResponse, ExtensionFaceAuthListParams, ExtensionFaceAuthListResponse, FaceAuthListItem, FaceAuthResult, FaceAuthTransType } from '@/entities/additional-service/model/face-auth/types';
-import { ResultStatusBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
+import { AuthResultBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { useExtensionFaceAuthListtMutation } from '@/entities/additional-service/api/face-auth/use-extension-face-auth-list-mutation';
+import { useExtensionFaceAuthDownloadExcelMutation } from '@/entities/additional-service/api/face-auth/use-extension-face-auth-download-excel-mutation';
+import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
 
 export const FaceAuthPage = () => {
     const { navigate } = useNavigate();
     const userMid = useStore.getState().UserStore.mid;
 
     const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
-    const [listItems, setListItems] = useState({});
+    const [listItems, setListItems] = useState<Array<FaceAuthListItem>>([]);
-    const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
     const [filterOn, setFilterOn] = useState<boolean>(false);
-    const [mid, setMid] = useState<string>(userMid);
+    const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
-    const [memberId, setMemberId] = useState<string>('');
+    const [mid, setMid] = useState<string>("faceauth0m");
-    const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
+    const [userMallId, setUserMallId] = useState<string>('');
-    const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+    const [fromDate, setFromDate] = useState<string>('20220101');
-    const [transactionType, setTransactionType] = useState<FaceAuthTransactionType>(FaceAuthTransactionType.ALL);
+    const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
-    const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
+    const [transType, setTransType] = useState<FaceAuthTransType>(FaceAuthTransType.ALL);
+    const [authResult, setAuthResult] = useState<FaceAuthResult>(FaceAuthResult.ALL);
     const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
 
     useSetHeaderTitle('안면인증');
@@ -45,48 +46,31 @@ export const FaceAuthPage = () => {
         navigate(PATHS.home);
     });
 
-    //TODO : API 연동
+    const { mutateAsync: faceAuthHistoryList } = useExtensionFaceAuthListtMutation();
-    //const { mutateAsync: faceAuthHistoryList } = useExtensionFaceAuthHistoryListMutation();
+    const { mutateAsync: downloadExcel } = useExtensionFaceAuthDownloadExcelMutation();
-    //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
+        authResult?: FaceAuthResult
     }) => {
-        pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
+        let params: ExtensionFaceAuthListParams = {
-        setPageParam(pageParam);
-        let listParams = {
             mid: mid,
-            memberId: memberId,
+            userMallId: userMallId,
-            fromDate: startDate,
+            fromDate: fromDate,
-            toDate: endDate,
+            toDate: toDate,
-            transactionType: transactionType,
+            transType: transType,
-            resultStatus: processResult,
+            authResult: option?.authResult ?? authResult,
             page: pageParam
         };
 
-        //faceAuthHistoryList(listParams).then((rs) => {
+        if (params.page) {
-        //    setListItems(assembleData(rs.content));
+            params.page.sortType = option?.sortType || sortType;
-        //});
+            setPageParam(params.page);
+        }
+
+        faceAuthHistoryList(params).then((rs: ExtensionFaceAuthListResponse) => {
+            setListItems(rs.content);
+        });
     };
 
     const onClickToOpenEmailBottomSheet = () => {
@@ -95,17 +79,15 @@ export const FaceAuthPage = () => {
 
     const onSendRequest = (selectedEmail?: string) => {
         if (selectedEmail) {
-            // downloadExcel({
+            const params: ExtensionFaceAuthExcelDownlaodPrams = {
-            //     mid: mid,
+                mid: mid,
-            //     //email: selectedEmail,
+                email: selectedEmail,
-            //     memberId: memberId,
+                fromDate: fromDate,
-            //     fromDate: startDate,
+                toDate: toDate
-            //     toDate: endDate,
+            };
-            //     transactionType: transactionType,
+            downloadExcel(params).then((rs: ExtensionFaceAuthExcelDownlaodResponse) => {
-            //     resultStatus: processResult
+                console.log('Excel Download Status:', rs.status);
-            // }).then((rs) => {
+            });
-            //     console.log('Excel Download Status: ' + rs.status);
-            // });
         }
         setEmailBottomSheetOn(false);
     };
@@ -119,16 +101,62 @@ export const FaceAuthPage = () => {
         callList({ sortType: sort });
     };
 
-    const onClickToTransactionStatus = (val: ProcessResult) => {
+    const onClickToAuthResult = (val: FaceAuthResult) => {
-        setProcessResult(val);
+        setAuthResult(val);
         callList({
-            val: val
+            authResult: val
         });
     };
 
+    const getListDateGroup = () => {
+        let rs= [];
+        let date = '';
+        let list= [];
+        for (let i = 0; i < listItems.length; i++) {
+            let item = listItems[i];
+            if (!!item) {
+                let requestDate = item?.requestDate;
+                requestDate = requestDate?.substring(0, 8);
+                if (!!requestDate) {
+                    if (i === 0) {
+                        date = requestDate;
+                    }
+                    if (date !== requestDate) {
+                        if (list.length > 0) {
+                            rs.push(
+                                <ListDateGroup
+                                    additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
+                                    mid={mid}
+                                    key={date + '-' + i}
+                                    date={date}
+                                    items={list as any}
+                                ></ListDateGroup>
+                            );
+                        }
+                        date = requestDate;
+                        list = [];
+                    }
+                    list.push(item);
+                }
+            }
+        }
+        if (list.length > 0) {
+            rs.push(
+                <ListDateGroup
+                    additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
+                    mid={mid}
+                    key={date + '-last'}
+                    date={date}
+                    items={list as any}
+                ></ListDateGroup>
+            );
+        }
+        return rs;
+    };
+
     useEffect(() => {
         callList();
-    }, [mid, memberId, startDate, endDate, transactionType, processResult]);
+    }, [mid, userMallId, fromDate, toDate, transType, authResult]);
 
     return (
         <>
@@ -141,7 +169,7 @@ export const FaceAuthPage = () => {
                                     <input
                                         className="credit-period"
                                         type="text"
-                                        value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
+                                        value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
                                         readOnly={true}
                                     />
                                     <button
@@ -172,25 +200,28 @@ export const FaceAuthPage = () => {
                             <SortTypeBox
                                 sortType={sortType}
                                 onClickToSort={onClickToSort}
+                                sortOptions={[
+                                    { key: SortTypeKeys.LATEST, label: '최신순' },
+                                    { key: SortTypeKeys.OLDEST, label: '오래된순' }
+                                ]}
                             ></SortTypeBox>
                             <div className="excrow">
                                 <div className="full-menu-keywords no-padding">
                                     {
-                                        ResultStatusBtnGroup.map((value, index) => (
+                                        AuthResultBtnGroup.map((value, index) => (
                                             <span
                                                 key={`key-service-code=${index}`}
-                                                className={`keyword-tag ${(processResult === value.value) ? 'active' : ''}`}
+                                                className={`keyword-tag ${(authResult === value.value) ? 'active' : ''}`}
-                                                onClick={() => onClickToTransactionStatus(value.value)}
+                                                onClick={() => onClickToAuthResult(value.value)}
                                             >{value.name}</span>
                                         ))
                                     }
                                 </div>
                             </div>
                         </div>
-                        <FaceAuthList
+                        <section className="transaction-list">
-                            listItems={listItems}
+                            {getListDateGroup()}
-                            mid={mid}
+                        </section>
-                        ></FaceAuthList>
                     </div>
                 </div>
             </main>
@@ -198,17 +229,17 @@ export const FaceAuthPage = () => {
                 filterOn={filterOn}
                 setFilterOn={setFilterOn}
                 mid={mid}
-                memberId={memberId}
+                userMallId={userMallId}
-                startDate={startDate}
+                fromDate={fromDate}
-                endDate={endDate}
+                toDate={toDate}
-                transactionType={transactionType}
+                transType={transType}
-                processResult={processResult}
+                authResult={authResult}
                 setMid={setMid}
-                setMemberId={setMemberId}
+                setUserMallId={setUserMallId}
-                setStartDate={setStartDate}
+                setFromDate={setFromDate}
-                setEndDate={setEndDate}
+                setToDate={setToDate}
-                setTransactionType={setTransactionType}
+                setTransType={setTransType}
-                setProcessResult={setProcessResult}
+                setAuthResult={setAuthResult}
             />
             <EmailBottomSheet
                 bottomSheetOn={emailBottomSheetOn}

src/shared/api/api-url-additional-service.ts

@@ -217,4 +217,17 @@ export const API_URL_ADDITIONAL_SERVICE = {
     // POST: 자금이체 > 입금확인증 다운로드
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/fund-account/result/receipt`;
   },
+  extensionFaceAuthList: () => {
+    // POST: 안면인증 목록 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/face-auth/list`;
+  },
+  extensionFaceAuthExcelDownload: () => {
+    // POST: 안면인증 엑셀 다운로드
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/face-auth/excel`;
+  },
+  extensionFaceAuthDetail: () => {
+    // POST: 안면인증 상세 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/face-auth/detail`;
+  },
+
 };