부가서비스

- SMS 결제 통보 리스트 API 연동

src/pages/additional-service/additional-service-pages.tsx

@@ -7,7 +7,7 @@ import { ArsDetailPage } from './ars/detail-page';
 import { ArsRequestPage } from './ars/request-page';
 import { ArsRequestSuccessPage } from './ars/request-success-page';
 import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page';
-import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page';
+import { SmsPaymentPage } from './sms-payment/sms-payment-page';
 import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page';
 import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
 import { LinkPaymentHistoryPage } from './link-payment/link-payment-history-page';
@@ -56,7 +56,7 @@ export const AdditionalServicePages = () => {
           <Route path={ROUTE_NAMES.additionalService.keyInPayment.request} element={<KeyInPaymentRequestPage />} />
           <Route path={ROUTE_NAMES.additionalService.keyInPayment.requestSuccess} element={<KeyInPaymentRequestSuccessPage />} />
         </Route>
-        <Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentNotificationPage />} />
+        <Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentPage />} />
         <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.base}>
           <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.list} element={<AccountHolderSearchPage />} />
           <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.detail} element={<AccountHolderSearchDetailPage />} />

src/pages/additional-service/sms-payment-notification/sms-payment-notification-page.tsx

@@ -1,149 +0,0 @@
-import { useState } from 'react';
-import { IMAGE_ROOT } from '@/shared/constants/common';
-import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment-detail-resend';
-import { HeaderType } from '@/entities/common/model/types';
-import { 
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode
-} from '@/widgets/sub-layout/use-sub-layout';
-
-export const SmsPaymentNotificationPage = () => {
-  const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
-
-  useSetHeaderTitle('SMS 결제 통보');
-  useSetHeaderType(HeaderType.LeftArrow);
-  useSetFooterMode(true);
-
-  const onClickToShowDetail = () => {
-    setBottomSmsPaymentDetailResendOn(true);
-  };
-  
-  return (
-    <>
-      <main>
-        <div className="tab-content">
-          <div className="tab-pane sub active">
-            <section className="summary-section no-border">
-              <div className="credit-controls">
-                <div>
-                  <input 
-                    className="credit-period"
-                    type="text"
-                    value="2025.06.01 ~ 2025.06.31"
-                    readOnly={ true }
-                  />
-                  <button 
-                    className="filter-btn"
-                    aria-label="필터"
-                  >
-                    <img 
-                      src={ IMAGE_ROOT + '/ico_setting.svg' }
-                      alt="검색옵션"
-                    />
-                  </button>
-                </div>
-                <button 
-                  className="download-btn"
-                  aria-label="다운로드"
-                >
-                  <img 
-                    src={ IMAGE_ROOT + '/ico_download.svg' }
-                    alt="다운로드"
-                  />
-                </button>
-              </div>
-            </section>
-            <section className="transaction-list">
-              <div className="date-group">
-                <div className="date-header">25.06.08(일)</div>
-                <div 
-                  className="transaction-item approved"
-                  onClick={ () => onClickToShowDetail() }
-                >
-                  <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>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</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">최*길(010333*****)</div>
-                    <div className="transaction-details">
-                      <span>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청+입금</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</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">박*준(010333*****)</div>
-                    <div className="transaction-details">
-                      <span>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청+입금</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</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">이*신(010333*****)</div>
-                    <div className="transaction-details">
-                      <span>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</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">김*환(010333*****)</div>
-                      <div className="transaction-details">
-                        <span>nictest01m</span>
-                        <span className="separator">|</span>
-                        <span>가상계좌 요청</span>
-                      </div>
-                    </div>
-                    <div className="resend-label">재발송</div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-      </main>
-
-      <SmsPaymentDetailResend
-        bottomSmsPaymentDetailResendOn={ bottomSmsPaymentDetailResendOn }
-        setBottomSmsPaymentDetailResendOn={ setBottomSmsPaymentDetailResendOn }
-      ></SmsPaymentDetailResend>
-    </>
-  );
-};

src/pages/additional-service/sms-payment/sms-payment-page.tsx

@@ -0,0 +1,163 @@
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment/sms-payment-detail-resend';
+import { HeaderType, SortByKeys } from '@/entities/common/model/types';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
+import {
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+import { SmsPaymentListItem, SmsPaymentSearchType, SmsType } from '@/entities/additional-service/model/sms-payment/types';
+import { useExtensionSmsListMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-list-mutation';
+import { useExtensionSmsDownloadExcelMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-download-excel-mutation';
+import { SmsPaymentList } from '@/entities/additional-service/ui/sms-payment/sms-payment-list';
+
+
+export const SmsPaymentPage = () => {
+  const { navigate } = useNavigate();
+  const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
+
+  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [listItems, setListItems] = useState({});
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [searchCl, setSearchCl] = useState<SmsPaymentSearchType>(SmsPaymentSearchType.BUYER_NAME)
+  const [searchValue, setSearchValue] = useState<string>('')
+  const [fromDate, setFromDate] = useState(moment().format('YYYY-MM-DD'));
+  const [toDate, setToDate] = useState(moment().format('YYYY-MM-DD'));
+  const [smsCl, setSmsCl] = useState<SmsType>(SmsType.ALL);
+
+  const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
+  const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
+
+  useSetHeaderTitle('SMS 결제 통보');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+
+  const callList = (option?: {
+    sortBy?: string,
+    val?: string
+  }) => {
+    pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
+    setPageParam(pageParam);
+
+    let listParams = {
+      mid: mid,
+      searchCl: searchCl,
+      searchValue: searchValue,
+      fromDate: fromDate,
+      toDate: toDate,
+      smsCl: smsCl === SmsType.ALL ? '' : smsCl,
+      page: pageParam
+    }
+
+    smsPaymentList(listParams).then((rs) => {
+      setListItems(assembleData(rs.content));
+    })
+  }
+
+  const assembleData = (content: Array<SmsPaymentListItem>) => {
+    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 onClickToDownloadExcel = () => {
+    downloadExcel({
+      mid: mid,
+      searchCl: searchCl,
+      searchValue: searchValue,
+      fromDate: fromDate,
+      toDate: toDate,
+      smsCl: smsCl === SmsType.ALL ? '' : smsCl,
+    })
+  }
+
+
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+
+  const onClickToSort = (sort: SortByKeys) => {
+    setSortBy(sort);
+    callList({ sortBy: sort })
+  };
+
+
+  const onClickToShowDetail = () => {
+    setBottomSmsPaymentDetailResendOn(true);
+  };
+
+  useEffect(() => {
+    callList();
+  }, []);
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <section className="summary-section no-border">
+              <div className="credit-controls">
+                <div>
+                  <input
+                    className="credit-period"
+                    type="text"
+                    value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
+                    readOnly={true}
+                  />
+                  <button
+                    className="filter-btn"
+                    aria-label="필터"
+                  >
+                    <img
+                      src={IMAGE_ROOT + '/ico_setting.svg'}
+                      alt="검색옵션"
+                      onClick={() => onClickToOpenFilter()}
+                    />
+                  </button>
+                </div>
+                <button
+                  className="download-btn"
+                  aria-label="다운로드"
+                >
+                  <img
+                    src={IMAGE_ROOT + '/ico_download.svg'}
+                    alt="다운로드"
+                    onClick={() => onClickToDownloadExcel()}
+                  />
+                </button>
+              </div>
+            </section>
+            <div className="detail-divider"></div>
+            <SmsPaymentList
+            listItems={listItems}
+            mid={mid}
+            ></SmsPaymentList>
+          </div>
+        </div>
+      </main>
+
+      <SmsPaymentDetailResend
+        bottomSmsPaymentDetailResendOn={bottomSmsPaymentDetailResendOn}
+        setBottomSmsPaymentDetailResendOn={setBottomSmsPaymentDetailResendOn}
+      ></SmsPaymentDetailResend>
+    </>
+  );
+};