- 안명인증 페이지 추가

2025-10-23 19:02:04 +09:00
parent c2041f918f
commit 6e8b73bd84
12 changed files with 353 additions and 173 deletions
--- a/src/entities/additional-service/api/face-auth/use-extension-face-auth-detail-mutation.ts
+++ b/src/entities/additional-service/api/face-auth/use-extension-face-auth-detail-mutation.ts
--- a/src/entities/additional-service/api/face-auth/use-extension-face-auth-download-excel-mutation.ts
+++ b/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,
+  };
+};
--- a/src/entities/additional-service/api/face-auth/use-extension-face-auth-list-mutation.ts
+++ b/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,
+    };
+};
--- a/src/entities/additional-service/model/face-auth/constant.ts
+++ b/src/entities/additional-service/model/face-auth/constant.ts
@@ -1,9 +1,36 @@
-import { ProcessResult } from "../types";
+import { FaceAuthResult, FaceAuthTransType } from "./types";

-
-
-export const ResultStatusBtnGroup = [
-    { name: '전체', value: ProcessResult.ALL },
-    { name: '성공', value: ProcessResult.SUCCESS },
-    { name: '실패', value: ProcessResult.FAIL },
+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 '';
+
+    const authResultMap: Record<string, string> = {
+        'SUCCESS': '성공',
+        '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;
+}
--- a/src/entities/additional-service/model/face-auth/types.ts
+++ b/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 {
-  ALL = "ALL",
-  AUTH = "AUTH",
-  REGISTER = "REGISTER"
+export enum FaceAuthTransType {
+  ALL = "",
+  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;
-  name?: string;
+  requestTime?: 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;
-  startDate: string;
-  endDate: string;
-  transactionType: FaceAuthTransactionType;
-  processResult: ProcessResult;
+  userMallId: string;
+  fromDate: string;
+  toDate: string;
+  transType: FaceAuthTransType;
+  authResult: FaceAuthResult;
  setMid: (mid: string) => void;
-  setMemberId: (memberId: string) => void;
-  setStartDate: (startDate: string) => void;
-  setEndDate: (endDate: string) => void;
-  setTransactionType: (transactionType: FaceAuthTransactionType) => void;
-  setProcessResult: (processResult: ProcessResult) => void;
+  setUserMallId: (userMallId: string) => void;
+  setFromDate: (fromDate: string) => void;
+  setToDate: (toDate: string) => void;
+  setTransType: (transType: FaceAuthTransType) => 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;
 }
--- 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
@@ -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,
-	startDate,
-	endDate,
-	transactionType,
-	processResult,
+	userMallId,
+	fromDate,
+	toDate,
+	transType,
+	authResult,
 	setMid,
-	setMemberId,
-	setStartDate,
-	setEndDate,
-	setTransactionType,
-	setProcessResult
+	setUserMallId,
+	setFromDate,
+	setToDate,
+	setTransType,
+	setAuthResult
 }: 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 [filterMemberId, setFilterMemberId] = useState<string>(userMallId);
+	const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYYMMDD'));
+	const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYYMMDD'));
+	const [filterTransType, setFIlterTransType] = useState<FaceAuthTransType>(transType);
+	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);
-		setStartDate(filterStartDate);
-		setEndDate(filterEndDate);
-		setTransactionType(filterTransactionType);
-		setProcessResult(filterProcessResult);
+		setUserMallId(filterMemberId);
+		setFromDate(filterFromDate);
+		setToDate(filterToDate);
+		setTransType(filterTransType);
+		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}
-							endDate={filterEndDate}
-							setStartDate={setFilterStartDate}
-							setEndDate={setFilterEndDate}
+							startDate={filterFromDate}
+							endDate={filterToDate}
+							setStartDate={setFilterFromDate}
+							setEndDate={setFilterToDate}
 						></FilterCalendar>

 						<FilterButtonGroups
 							title='거래유형'
-							activeValue={filterTransactionType}
-							btnGroups={transactionTypeBtnGroup}
-							setter={setFilterTransactionType}
+							activeValue={filterTransType}
+							btnGroups={TransactionTypeBtnGroup}
+							setter={setFIlterTransType}
 						></FilterButtonGroups>

 						<FilterButtonGroups
 							title='인증결과'
-							activeValue={filterProcessResult}
-							btnGroups={processResultBtnGroup}
-							setter={setFilterProcessResult}
+							activeValue={filterAuthResult}
+							btnGroups={AuthResultBtnGroup}
+							setter={setFilterAuthResult}
 						></FilterButtonGroups>
 					</div>
 					<div className="apply-row">
--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/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 }
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/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,
-  name,
+  smsCl,groupId,userMallId,transType,
+  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'}`}>
-          {resultStatus === 'SUCCESS' ? '성공' : '실패'}
+        <div className={`status-label ${authResult === 'SUCCESS' ? 'success' : 'fail'}`}>
+          {authResult === 'SUCCESS' ? '성공' : '실패'}
        </div>
      );
    }
--- a/src/entities/common/model/types.ts
+++ b/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 {
--- a/src/entities/common/ui/sort-type-box.tsx
+++ b/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 
-          className={ `sort-btn ${(sortType === SortTypeKeys.LATEST)? 'active': ''}` }
-          onClick={ () => onClickToSort(SortTypeKeys.LATEST) }
-        >최신순</button>
-        <span className="sort-divider">|</span>
-        <button 
-          className={ `sort-btn ${(sortType === SortTypeKeys.HIGH_AMOUNT)? 'active': ''}` }
-          onClick={ () => onClickToSort(SortTypeKeys.HIGH_AMOUNT) }
-        >고액순</button>
+        {sortOptions.map((option, index) => (
+          <span key={option.key}>
+            {index > 0 && <span className="sort-divider">|  </span>}
+            <button
+              className={`sort-btn ${(sortType === option.key) ? 'active' : ''}`}
+              onClick={() => onClickToSort(option.key)}
+            >{option.label}</button>
+          </span>
+        ))}
      </div>
    </>
  );
--- a/src/pages/additional-service/face-auth/face-auth-page.tsx
+++ b/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 { SortTypeKeys } from '@/entities/common/model/types';
+import { AdditionalServiceCategory, ProcessResult } from '@/entities/additional-service/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 { useEffect, useState } from 'react';
+import { JSX, 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 { ResultStatusBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
+import { ExtensionFaceAuthExcelDownlaodPrams, ExtensionFaceAuthExcelDownlaodResponse, ExtensionFaceAuthListParams, ExtensionFaceAuthListResponse, FaceAuthListItem, FaceAuthResult, FaceAuthTransType } from '@/entities/additional-service/model/face-auth/types';
+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 [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+    const [listItems, setListItems] = useState<Array<FaceAuthListItem>>([]);
    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);
+    const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
+    const [mid, setMid] = useState<string>("faceauth0m");
+    const [userMallId, setUserMallId] = useState<string>('');
+    const [fromDate, setFromDate] = useState<string>('20220101');
+    const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
+    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 } = 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 { mutateAsync: faceAuthHistoryList } = useExtensionFaceAuthListtMutation();
+    const { mutateAsync: downloadExcel } = useExtensionFaceAuthDownloadExcelMutation();

    const callList = (option?: {
        sortType?: SortTypeKeys,
-        val?: string
+        authResult?: FaceAuthResult
    }) => {
-        pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
-        setPageParam(pageParam);
-        let listParams = {
+        let params: ExtensionFaceAuthListParams = {
            mid: mid,
-            memberId: memberId,
-            fromDate: startDate,
-            toDate: endDate,
-            transactionType: transactionType,
-            resultStatus: processResult,
+            userMallId: userMallId,
+            fromDate: fromDate,
+            toDate: toDate,
+            transType: transType,
+            authResult: option?.authResult ?? authResult,
            page: pageParam
        };

-        //faceAuthHistoryList(listParams).then((rs) => {
-        //    setListItems(assembleData(rs.content));
-        //});
+        if (params.page) {
+            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({
-            //     mid: mid,
-            //     //email: selectedEmail,
-            //     memberId: memberId,
-            //     fromDate: startDate,
-            //     toDate: endDate,
-            //     transactionType: transactionType,
-            //     resultStatus: processResult
-            // }).then((rs) => {
-            //     console.log('Excel Download Status: ' + rs.status);
-            // });
+            const params: ExtensionFaceAuthExcelDownlaodPrams = {
+                mid: mid,
+                email: selectedEmail,
+                fromDate: fromDate,
+                toDate: toDate
+            };
+            downloadExcel(params).then((rs: ExtensionFaceAuthExcelDownlaodResponse) => {
+                console.log('Excel Download Status:', rs.status);
+            });
        }
        setEmailBottomSheetOn(false);
    };
@@ -119,16 +101,62 @@ export const FaceAuthPage = () => {
        callList({ sortType: sort });
    };

-    const onClickToTransactionStatus = (val: ProcessResult) => {
-        setProcessResult(val);
+    const onClickToAuthResult = (val: FaceAuthResult) => {
+        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' : ''}`}
-                                                onClick={() => onClickToTransactionStatus(value.value)}
+                                                className={`keyword-tag ${(authResult === value.value) ? 'active' : ''}`}
+                                                onClick={() => onClickToAuthResult(value.value)}
                                            >{value.name}</span>
                                        ))
                                    }
                                </div>
                            </div>
                        </div>
-                        <FaceAuthList
-                            listItems={listItems}
-                            mid={mid}
-                        ></FaceAuthList>
+                        <section className="transaction-list">
+                            {getListDateGroup()}
+                        </section>
                    </div>
                </div>
            </main>
@@ -198,17 +229,17 @@ export const FaceAuthPage = () => {
                filterOn={filterOn}
                setFilterOn={setFilterOn}
                mid={mid}
-                memberId={memberId}
-                startDate={startDate}
-                endDate={endDate}
-                transactionType={transactionType}
-                processResult={processResult}
+                userMallId={userMallId}
+                fromDate={fromDate}
+                toDate={toDate}
+                transType={transType}
+                authResult={authResult}
                setMid={setMid}
-                setMemberId={setMemberId}
-                setStartDate={setStartDate}
-                setEndDate={setEndDate}
-                setTransactionType={setTransactionType}
-                setProcessResult={setProcessResult}
+                setUserMallId={setUserMallId}
+                setFromDate={setFromDate}
+                setToDate={setToDate}
+                setTransType={setTransType}
+                setAuthResult={setAuthResult}
            />
            <EmailBottomSheet
                bottomSheetOn={emailBottomSheetOn}
--- a/src/shared/api/api-url-additional-service.ts
+++ b/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`;
+  },
+
 };