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

- 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/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"
         >