- 부가서비스: KeyIn결제 목업 API 연결

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -6,21 +6,24 @@ import { HeaderType } from '@/entities/common/model/types';
 import {
   useSetHeaderTitle,
   useSetHeaderType,
-  useSetFooterMode
+  useSetFooterMode,
+  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { PATHS } from '@/shared/constants/paths';
 import { useExtensionKeyinDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-keyin-download-excel-mutation';
 import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter';
-import { KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types';
-import { SortOptionsBox } from '@/entities/additional-service/ui/link-payment/sort-options-box';
+import { AdditionalServiceCategory, KeyInPaymentListItem, KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types';
+import { SortOptionsBox } from '@/entities/additional-service/ui/sort-options-box';
 import { useExtensionKeyinListMutation } from '@/entities/additional-service/api/use-extension-keyin-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
+import { KeyInPaymentList } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-list';
 
+// contant로 옮기기
 const requestStatusBtnGroup = [
   { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
   { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
-  { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
-  { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL }
+  { name: '전취소', value: KeyInPaymentTransactionStatus.ALL_CANCEL },
+  { name: '후취소', value: KeyInPaymentTransactionStatus.AFTER_CANCEL }
 ];
 
 export const KeyInPaymentPage = () => {
@@ -42,43 +45,99 @@ export const KeyInPaymentPage = () => {
   useSetHeaderTitle('KEY-IN 결제');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
 
   const { mutateAsync: keyinList } = useExtensionKeyinListMutation();
   const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation();
 
+  const callList = (option?: {
+    sortBy?: string,
+    val?: string
+  }) => {
+    pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
+    setPageParam(pageParam);
+    let newMinAmount = minAmount;
+    if (!!minAmount && typeof (minAmount) === 'string') {
+      newMinAmount = parseInt(minAmount);
+    }
+    let newMaxAmount = maxAmount;
+    if (!!maxAmount && typeof (maxAmount) === 'string') {
+      newMaxAmount = parseInt(maxAmount);
+    }
+    let listParams = {
+      mid: mid,
+      fromDate: startDate,
+      toDate: endDate,
+      paymentStatus: transactionStatus,
+      minAmount: newMinAmount,
+      maxAmount: newMaxAmount,
+      page: pageParam
+    };
+
+    keyinList(listParams).then((rs) => {
+      setListItems(assembleData(rs.content));
+    });
+  }
+
+  const assembleData = (content: Array<KeyInPaymentListItem>) => {
+    console.log('rs.content:', content)
+    let data: any = {};
+    if (content && content.length > 0) {
+      for (let i = 0; i < content?.length; i++) {
+        let paymentDate = content[i]?.paymentDate?.substring(0, 8);
+        let groupDate = moment(paymentDate).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 onClickToOpenFilter = () => {
     setFilterOn(!filterOn);
   };
 
   const onClickToDownloadExcel = () => {
-    // downloadExcel({
-    //   mid,
-    //   fromDate: '',
-    //   toDate: '',
-    //   paymentStatus: '',
-    //   minAmount: 0,
-    //   maxAmount: 0
-    // }).then((rs) => {
+    let newMinAmount = minAmount;
+    if (!!minAmount && typeof (minAmount) === 'string') {
+      newMinAmount = parseInt(minAmount);
+    }
+    let newMaxAmount = maxAmount;
+    if (!!maxAmount && typeof (maxAmount) === 'string') {
+      newMaxAmount = parseInt(maxAmount);
+    }
+    downloadExcel({
+      mid: mid,
+      fromDate: startDate,
+      toDate: endDate,
+      paymentStatus: transactionStatus,
+      minAmount: minAmount,
+      maxAmount: maxAmount
+    }).then((rs) => {
 
-    // });
+    });
   };
 
   const onClickToSort = (sort: SortByKeys) => {
     setSortBy(sort);
-    // TODO : callList 구현
+    callList({ sortBy: sort })
   };
 
   const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => {
     setTransactionStatus(val);
-    // TODO : callList 구현
+    callList({ val: val });
   };
 
-  const onClickToNavigation = () => {
-    navigate(PATHS.additionalService.keyInPayment.request)
-  }
-
   useEffect(() => {
-    // TODO : callList();
+    callList();
   }, []);
 
   return (
@@ -92,7 +151,7 @@ export const KeyInPaymentPage = () => {
                   <input
                     className="credit-period"
                     type="text"
-                    value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') } 
+                    value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
                     readOnly={true}
                   />
                   <button
@@ -109,6 +168,7 @@ export const KeyInPaymentPage = () => {
                 <button
                   className="download-btn"
                   aria-label="다운로드"
+                  onClick={() => onClickToDownloadExcel()}
                 >
                   <img
                     src={IMAGE_ROOT + '/ico_download.svg'}
@@ -138,102 +198,29 @@ export const KeyInPaymentPage = () => {
                 </div>
               </div>
             </div>
-
-            <section className="transaction-list">
-              <div className="date-group">
-                <div className="date-header">2025.06.08(일)</div>
-
-                <div className="transaction-item approved">
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">김*환(7000)</div>
-                    <div className="transaction-details">
-                      <span>20:00ㅣ승인</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">5,254,000원</div>
-                </div>
-
-                <div className="transaction-item refund">
-                  <div className="transaction-status">
-                    <div className="status-dot gray"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">최*길(7000)</div>
-                    <div className="transaction-details">
-                      <span>08:35ㅣ승인</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">23,845,000원</div>
-                </div>
-
-                <div className="transaction-item approved">
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">김*환(7000)</div>
-                    <div className="transaction-details">
-                      <span>20:00ㅣ승인</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">5,254,000원</div>
-                </div>
-
-                <div className="transaction-item approved">
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">김*환(7000)</div>
-                    <div className="transaction-details">
-                      <span>20:00ㅣ후취소</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">5,254,000원</div>
-                </div>
-
-                <div className="transaction-item refund">
-                  <div className="transaction-status">
-                    <div className="status-dot gray"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">최*길(7000)</div>
-                    <div className="transaction-details">
-                      <span>20:00ㅣ후취소</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">23,845,000원</div>
-                </div>
-              </div>
-            </section>
-            <div className="apply-row">
-              <button
-                className="btn-50 btn-blue flex-1"
-                onClick={() => onClickToNavigation()}
-              >결제 신청</button>
-            </div>
-            <KeyInPaymentFilter
-              filterOn={filterOn}
-              setFilterOn={setFilterOn}
-              mid={mid}
-              startDate={startDate}
-              endDate={endDate}
-              transactionStatus={transactionStatus}
-              minAmount={minAmount}
-              maxAmount={maxAmount}
-              setMid={setMid}
-              setStartDate={setStartDate}
-              setEndDate={setEndDate}
-              setTransactionStatus={setTransactionStatus}
-              setMinAmount={setMinAmount}
-              setMaxAmount={setMaxAmount}
-            ></KeyInPaymentFilter>
+            <KeyInPaymentList
+              listItems={listItems}
+              additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
+            ></KeyInPaymentList>
           </div>
         </div>
       </main>
+      <KeyInPaymentFilter
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+        mid={mid}
+        startDate={startDate}
+        endDate={endDate}
+        transactionStatus={transactionStatus}
+        minAmount={minAmount}
+        maxAmount={maxAmount}
+        setMid={setMid}
+        setStartDate={setStartDate}
+        setEndDate={setEndDate}
+        setTransactionStatus={setTransactionStatus}
+        setMinAmount={setMinAmount}
+        setMaxAmount={setMaxAmount}
+      ></KeyInPaymentFilter>
     </>
   );
 };

src/pages/additional-service/key-in-payment/requeset-page.tsx

@@ -38,7 +38,7 @@ export const KeyInPaymentRequestPage = () => {
             moid: 'SMS',
         };
         keyInApply(keyInApplyParams).then((rs) => {
-            navigate(PATHS.additionalService.arsCardPayment.requestSuccess);
+            navigate(PATHS.additionalService.keyInPayment.requestSuccess);
             console.log(rs)
         }).catch(() => {