부가서비스: 계좌명 인증 상태 표시 및 날짜 선택기 개선

- AccountHolderAuth에서 transferStatus 기반 성공/실패 표시 추가
- SingleDatePicker 컴포넌트 생성 및 링크결제 Step1에 적용
- 각 리스트 아이템에 key prop 추가로 React 경고 해결

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -0,0 +1,30 @@
+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 {
+    ExtensionAccountHolderAuthListParams,
+    ExtensionAccountHolderAuthListResponse,
+    ExtensionAccountHolderSearchListParams,
+    ExtensionAccountHolderSearchListResponse,
+} from '../../model/types';
+import {
+    useMutation,
+    UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionAccountHolderAuthList = (params: ExtensionAccountHolderAuthListParams) => {
+    return resultify(
+        axios.post<ExtensionAccountHolderAuthListResponse>(API_URL_ADDITIONAL_SERVICE.extensionAccountHolderAuthList(), params),
+    );
+};
+
+export const useExtensionAccountHolderAuthListMutation = (options?: UseMutationOptions<ExtensionAccountHolderAuthListResponse, CBDCAxiosError, ExtensionAccountHolderAuthListParams>) => {
+    const mutation = useMutation<ExtensionAccountHolderAuthListResponse, CBDCAxiosError, ExtensionAccountHolderAuthListParams>({
+        ...options,
+        mutationFn: (params: ExtensionAccountHolderAuthListParams) => extensionAccountHolderAuthList(params),
+    });
+    return {
+        ...mutation,
+    };
+}

src/entities/additional-service/model/account-holder-auth/constant.ts

@@ -0,0 +1,8 @@
+import { AuthAndTransferStatus } from "../types";
+
+export const authStatusBtnGroup = [
+    { name: '전체', value: AuthAndTransferStatus.ALL },
+    { name: '요청', value: AuthAndTransferStatus.REQUEST},
+    { name: '성공', value: AuthAndTransferStatus.SUCCESS},
+    { name: '실패', value: AuthAndTransferStatus.FAIL}
+]

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

@@ -1,5 +1,6 @@
 import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
 import { PayoutContent } from './payout/types';
+import { P } from 'node_modules/framer-motion/dist/types.d-Cjd591yU';
 
 // ========================================
 // 공통 Enums 및 타입들
@@ -24,6 +25,7 @@ export interface SortOptionsBoxProps {
 // 부가서비스 카테고리 enum
 export enum AdditionalServiceCategory {
   KeyInPayment = 'KeyInPayment',
+  AccountHolderAuth = 'AccountHolderAuth',
   AccountHolderSearch = 'AccountHolderSearch',
   LinkPaymentHistory = 'LinkPaymentHistory',
   LinkPaymentPending = 'LinkPaymentPending',
@@ -135,6 +137,28 @@ export interface KeyInPaymentFilterProps extends FilterProps {
   setMaxAmount: (maxAmount: string | number) => void;
 }
 
+// ========================================
+// 계좌 점유 조회 관련 타입들
+// ========================================
+export enum AuthAndTransferStatus {
+  ALL = "ALL",
+  REQUEST = "REQUEST",
+  SUCCESS = "SUCCESS",
+  FAIL = "FAIL"
+}
+
+export interface AccountHolderAuthListItem {
+  tid?: string;
+  accountName?: string;
+  accountNo?: string;
+  requestDate?: string;
+  bankName?: string;
+  transferStatus?: AuthAndTransferStatus;
+}
+export interface AccountHolderAuthListProps {
+  listItems: Record<string, Array<ListItemProps>>;
+  mid: string;
+}
 // ========================================
 // 계좌성명 조회 관련 타입들
 // ========================================
@@ -353,7 +377,8 @@ export interface SettlementAgencyBottomAgreeProps {
 
 export interface ListItemProps extends
   KeyInPaymentListItem, AccountHolderSearchListItem,
-  LinkPaymentHistoryListItem, LinkPaymentWaitListItem,
+  AccountHolderAuthListItem,LinkPaymentHistoryListItem,
+  LinkPaymentWaitListItem,
   PayoutContent {
   additionalServiceCategory?: AdditionalServiceCategory;
   mid?: string
@@ -538,6 +563,19 @@ export interface ExtensionLinkPayWaitDeleteRespone {
   status: boolean
 }
 
+// 계좌 점유 인증 확장 서비스
+// ========================================
+export interface ExtensionAccountHolderAuthListParams extends ExtensionRequestParams {
+  fromDate: string;
+  toDate: string;
+  authStatus: String;
+  page?: DefaultRequestPagination;
+}
+
+export interface ExtensionAccountHolderAuthListResponse extends DefaulResponsePagination {
+  content: Array<ListItemProps>
+}
+
 // 계좌 성명 조회 확장 서비스
 // ========================================
 export interface ExtensionAccountHolderSearchListParams extends ExtensionRequestParams { // Request

src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx

@@ -0,0 +1,33 @@
+import { PATHS } from '@/shared/constants/paths';
+import { ListDateGroup } from '../list-date-group';
+import { AccountHolderAuthListProps, AdditionalServiceCategory } from '../../model/types';
+
+export const AccountHolderAuthList = ({
+    listItems,
+    mid
+}: AccountHolderAuthListProps) => {
+
+    const getListDateGroup = () => {
+        let rs = [];
+        for (const [key, value] of Object.entries(listItems)) {
+            rs.push(
+                <ListDateGroup
+                    additionalServiceCategory={AdditionalServiceCategory.AccountHolderAuth}
+                    key={key}
+                    date={key}
+                    items={value}
+                    mid={mid}
+                ></ListDateGroup>
+            )
+        }
+        return rs;
+    };
+
+    return (
+        <>
+            <div className="transaction-list">
+                {getListDateGroup()}
+            </div>
+        </>
+    )
+}

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

@@ -30,7 +30,9 @@ export const ListDateGroup = ({
             paymentStatus={ items[i]?.paymentStatus}
             requestDate={ items[i]?.requestDate }
             bankName={ items[i]?.bankName}
+            accountName={ items[i]?.accountName}
             accountNo={ items[i]?.accountNo }
+            transferStatus={ items[i]?.transferStatus}
             resultStatus={ items[i]?.resultStatus }
 
             amount={ items[i]?.amount }

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

@@ -13,6 +13,8 @@ export const ListItem = ({
   amount, sendDate, sendStatus, sendMethod,
   scheduledSendDate, processStatus,
 
+  accountName,transferStatus,
+
   submallId, settlementDate, companyName,
   disbursementStatus, disbursementAmount
 }: ListItemProps) => {
@@ -51,6 +53,13 @@ export const ListItem = ({
       }
 
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
+      if (transferStatus === "REQUEST" || transferStatus === "SUCCESS") {
+        rs = 'blue';
+      } else if (transferStatus === "FAIL") {
+        rs = 'gray';
+      }
+    }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       if (resultStatus === "SUCCESS") {
         rs = 'blue';
@@ -92,6 +101,15 @@ export const ListItem = ({
 
       return;
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
+      navigate(PATHS.additionalService.accountHolderAuth.detail, {
+        state: {
+          additionalServiceCategory: additionalServiceCategory,
+          mid: mid,
+          tid: tid
+        }
+      })
+    }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       navigate(PATHS.additionalService.accountHolderSearch.detail, {
         state: {
@@ -125,7 +143,7 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.SettlementAgency) {
 
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Payout){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
       navigate(PATHS.additionalService.payout.detail, {
         state: {
           additionalServiceCategory: additionalServiceCategory,
@@ -145,6 +163,10 @@ export const ListItem = ({
       let time = paymentDate?.substring(8, 12);
       timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
+      let time = requestDate?.substring(8, 14);
+      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
+    }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       let time = requestDate?.substring(8, 14);
       timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
@@ -160,11 +182,14 @@ export const ListItem = ({
     if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
       str = `${tid}(${amount})`;
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
+      str = `${accountName}(${accountNo})`
+    }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       str = `${accountNo}`
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory ||
-       additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending
+      additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending
     ) {
       if (sendMethod === "SMS") {
         str = `${"buyerName"}(${"휴대폰 번호"})`
@@ -172,7 +197,7 @@ export const ListItem = ({
         str = `${"buyerName"}(${"이메일"})`
       }
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Payout){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
       str = companyName;
     }
 
@@ -190,6 +215,15 @@ export const ListItem = ({
         </div>
       );
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
+      rs.push(
+        <div key="account-auth-list" className="transaction-details">
+          <span>{getTime()}</span>
+          <span className="separator">|</span>
+          <span>{bankName}</span>
+        </div>
+      )
+    }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       rs.push(
         <div className="transaction-details">
@@ -229,12 +263,12 @@ export const ListItem = ({
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Payout){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
       rs.push(
         <div className="transaction-details">
-          <span>{ disbursementStatus }</span>
+          <span>{disbursementStatus}</span>
           <span className="separator">|</span>
-          <span>{ submallId }</span>
+          <span>{submallId}</span>
         </div>
       );
     }
@@ -262,6 +296,13 @@ export const ListItem = ({
         </div>
       );
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
+      rs.push(
+        <div className={`status-label ${(transferStatus === 'REQUEST' || transferStatus === 'SUCCESS') ? 'success' : 'fail'}`}>
+          {(transferStatus === 'REQUEST' || transferStatus === 'SUCCESS') ? '성공' : '실패'}
+        </div>
+      );
+    }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory ||
       additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending
     ) {
@@ -276,9 +317,9 @@ export const ListItem = ({
         </div>
       )
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Payout){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
       rs.push(
-        <div 
+        <div
           key="payout-item-amount"
           className="transaction-amount"
         >