부가서비스

- 계좌점유인증 상세정보,필터,엑셀다운 API 연동
- 계좌성명조회 상세정보 페이지 수정

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

@@ -0,0 +1,114 @@
+import moment from 'moment';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { AccountHolderAuthFilterProps, AuthAndTransferStatus } from '@/entities/additional-service/model/types';
+import { authStatusBtnGroup } from '@/entities/additional-service/model/account-holder-auth/constant';
+
+export const AccountHolderAuthFilter = ({
+    filterOn,
+    setFilterOn,
+    mid,
+    startDate,
+    endDate,
+    authStatus,
+    setMid,
+    setStartDate,
+    setEndDate,
+    setAuthStatus
+}: AccountHolderAuthFilterProps) => {
+
+    const [filterMid, setFilterMid] = useState<string>(mid);
+    const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
+    const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
+    const [filterAuthStatus, setFilterAuthStatus] = useState<AuthAndTransferStatus>(authStatus);
+
+    const variants = {
+        hidden: { x: '100%' },
+        visible: { x: '0%' },
+    };
+
+    let MidOptions = [
+        { name: 'nictest001m', value: 'nictest001m' },
+        { name: 'nictest002m', value: 'nictest002m' }
+    ];
+
+    const onClickToClose = () => {
+        setFilterOn(false);
+    };
+
+    const onClickToSetFilter = () => {
+        setMid(filterMid);
+        setStartDate(filterStartDate);
+        setEndDate(filterEndDate);
+        setAuthStatus(filterAuthStatus);
+        onClickToClose();
+    };
+
+    return (
+        <>
+            <motion.div
+                id="fullMenuModal"
+                className="full-menu-modal"
+                initial="hidden"
+                animate={(filterOn) ? 'visible' : 'hidden'}
+                variants={variants}
+                transition={{ duration: 0.3 }}
+                style={{
+                    width: '100%',
+                    height: '100%',
+                }}
+            >
+                <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={mid}
+                            selectSetter={setMid}
+                            selectOptions={MidOptions}
+                        ></FilterSelect>
+
+                        <FilterCalendar
+                            startDate={filterStartDate}
+                            endDate={filterEndDate}
+                            setStartDate={setFilterStartDate}
+                            setEndDate={setFilterEndDate}
+                        ></FilterCalendar>
+
+                        <FilterButtonGroups
+                            title='지급상태'
+                            activeValue={filterAuthStatus}
+                            btnGroups={authStatusBtnGroup}
+                            setter={setFilterAuthStatus}
+                        ></FilterButtonGroups>
+                    </div>
+                    <div className="apply-row">
+                        <button
+                            className="btn-50 btn-blue flex-1"
+                            onClick={() => onClickToSetFilter()}
+                        >적용</button>
+                    </div>
+                </div>
+            </motion.div>
+        </>
+    )
+}

src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx

@@ -1,8 +1,7 @@
 import moment from 'moment';
-import { useEffect } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
-import { ChangeEvent, useState } from 'react';
+import { useState } from 'react';
 import {
     AccountHolderSearchType,
     AccountHolderSearchFilterProps,
@@ -36,8 +35,8 @@ export const AccountHolderSearchFilter = ({
     const [filterMid, setFilterMid] = useState<string>(mid);
     const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchType>(searchType);
     const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
-    const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
-    const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+    const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
+    const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
     const [filterBank, setFilterBank] = useState<string>(bank)
     const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
     const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);

src/entities/additional-service/ui/info-wrap/detail-info-wrap.tsx

@@ -1,7 +1,5 @@
 import moment from 'moment';
-import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { AdditionalServiceCategory, DetailInfoSectionProps } from '../../model/types';
-import { SlideDown } from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 
 export const DetailInfoWrap = ({
@@ -9,13 +7,12 @@ export const DetailInfoWrap = ({
     detailInfo
 }: DetailInfoSectionProps) => {
 
-    console.log("DetailInfo Check: ", detailInfo)
-
     return (
         <>
             <div className="txn-section">
                 <div className="section-title">상세 정보</div>
                 <ul className="kv-list">
+                    {/*링크결제_발송내역*/}
                     {(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) &&
                         <>
                             < li className="kv-row">
@@ -36,6 +33,73 @@ export const DetailInfoWrap = ({
                             </li>
                         </>
                     }
+                    {/*계좌성명조회*/}
+                    {(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) &&
+                        <>
+                            <li className="kv-row">
+                                <span className="k">조회 일시</span>
+                                <span className="v">{detailInfo?.requestDate && moment(detailInfo.requestDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">결과</span>
+                                <span className="v">{detailInfo?.resultStatus}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">실패사유</span>
+                                <span className="v">{detailInfo?.failureReason}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">은행</span>
+                                <span className="v">{detailInfo?.bankName}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">계좌번호</span>
+                                <span className="v">{detailInfo?.accountNo}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">요청 구분</span>
+                                <span className="v">{detailInfo?.requestWay}</span>
+                            </li>
+                        </>
+
+                    }
+                    {/*계좌점유인증*/}
+                    {(additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) &&
+                        <>
+                            < li className="kv-row">
+                                <span className="k">가맹점상호</span>
+                                <span className="v">{detailInfo?.companyName}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">MID</span>
+                                <span className="v">{detailInfo?.mid}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">요청일시</span>
+                                <span className="v">{detailInfo?.requestDate && detailInfo?.requestDate}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">은행</span>
+                                <span className="v">{detailInfo?.bankName}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">계좌번호</span>
+                                <span className="v">{detailInfo?.accountNo}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">예금주</span>
+                                <span className="v">{detailInfo?.accountName}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">결과</span>
+                                <span className="v">{detailInfo?.transferStatus}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">실패사유</span>
+                                <span className="v">{detailInfo?.failureReason && detailInfo?.failureReason}</span>
+                            </li>
+                        </>
+                    }
                 </ul >
             </div >
         </>

src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx

@@ -1,5 +1,4 @@
 import moment from 'moment';
-import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
 import { AdditionalServiceCategory, DetailInfoSectionKeys } from '../../model/types';
 import { DetailInfoSectionProps } from '../../model/types';
@@ -16,26 +15,32 @@ export const TitleInfoWrap = ({
     }
   };
 
-  let newTitleInfo: Record<string, any> | undefined = titleInfo;
-  console.log("NewTitleInfo Check: ", newTitleInfo)
-
   const onClickToDownloadConfirmation = () => {
 
   };
 
-
-
   return (
     <>
+      {/* 계좌성명조회*/}
       {additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch && (
         <>
           <div className="num-amount">
             <span className="amount">{titleInfo?.accountNo}</span>
           </div>
           <div className="num-store">{titleInfo?.bankName}</div>
-          <div className="num-day">{titleInfo?.requestDate}</div>
+          <div className="num-day">{titleInfo?.requestDate && moment(titleInfo.requestDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</div>
         </>
       )}
+      {additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth && (
+        <>
+          <div className="num-amount">
+            <span className="amount">{titleInfo?.accountName}</span>
+          </div>
+          <div className="num-store">{titleInfo?.accountNo}</div>
+          <div className="num-day">{titleInfo?.scheduledSendDate && moment(titleInfo.scheduledSendDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')} [발송예정일자로 변경 필요]</div>
+        </>
+      )}
+      {/*링크결제_발송내역*/}
       {additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory && (
         <>
           <div className="num-amount">
@@ -52,6 +57,7 @@ export const TitleInfoWrap = ({
           <div className="num-day">{titleInfo?.sendDate}</div>
         </>
       )}
+      {/*링크결제_발송대기*/}
       {additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending && (
         <>
           <>

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

@@ -283,6 +283,13 @@ export const ListItem = ({
           {resultStatus === 'SUCCESS' ? '성공' : '실패'}
         </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.KeyInPayment) {
       rs.push(
@@ -296,13 +303,6 @@ 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
     ) {