- getListDateGroup 수정

- 알림톡 필터 추가 - 일부 부가서비스 엑셀다운로드 바텀시트 추가
2025-10-23 10:49:15 +09:00
parent 79271caab3
commit 53f6731205
40 changed files with 1022 additions and 1130 deletions
--- a/src/pages/additional-service/ars/list-page.tsx
+++ b/src/pages/additional-service/ars/list-page.tsx
@@ -3,9 +3,9 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types';
 import {
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode,
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { JSX, useEffect, useState } from 'react';
@@ -20,37 +20,15 @@ import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { ArsPaymentStatusBtnGroup } from '@/entities/additional-service/model/ars/constant';
 import { ArsFilter } from '@/entities/additional-service/ui/filter/ars-filter';
 import { useStore } from '@/shared/model/store';
-import useIntersectionObserver from '@/widgets/intersection-observer';

 export const ArsListPage = () => {
  const { navigate } = useNavigate();

-  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
-  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
-    entries.forEach((entry: IntersectionObserverEntry) => {
-      if (entry.isIntersecting) {
-        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
-        if (onActionIntersect) {
-          callList();
-        }
-      }
-      else {
-        console.log('Element is no longer intersecting with the root.');
-      }
-    });
-  };
-
-  const { setTarget } = useIntersectionObserver({
-    threshold: 1,
-    onIntersect
-  });
-
  const userMid = useStore.getState().UserStore.mid;

  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<ArsListContent>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
-  const [nextCursor, setNextCursor] = useState<string | null>(null);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
  const [mid, setMid] = useState<string>(userMid);
  const [moid, setMoid] = useState<string>('');
@@ -63,7 +41,7 @@ export const ArsListPage = () => {

  const { mutateAsync: extensionArsList } = useExtensionArsListMutation();
  const { mutateAsync: extensionArsDownloadExcel } = useExtensionArsDownloadExcelMutation();
-  
+
  useSetHeaderTitle('신용카드 ARS 결제');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
@@ -73,17 +51,8 @@ export const ArsListPage = () => {

  const callList = (option?: {
    sortType?: SortTypeKeys,
-    paymentStatus?: PaymentStatus,
-    resetPage?: boolean
+    paymentStatus?: PaymentStatus
  }) => {
-    setOnActionIntersect(false);
-
-    const currentPageParam = option?.resetPage
-      ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
-      : { ...pageParam, sortType: option?.sortType ?? sortType };
-
-    setPageParam(currentPageParam);
-
    let params: ExtensionArsListParams = {
      mid: mid,
      moid: moid,
@@ -93,25 +62,16 @@ export const ArsListPage = () => {
      orderStatus: orderStatus,
      minAmount: minAmount,
      maxAmount: maxAmount,
-      page: currentPageParam
+      page: pageParam
    };
+
+    if (params.page) {
+      params.page.sortType = option?.sortType || sortType;
+      setPageParam(params.page);
+    }
+
    extensionArsList(params).then((rs: ExtensionArsListResponse) => {
-      // resetPage면 기존 리스트 무시, 아니면 추가
-      setListItems(option?.resetPage ? rs.content : [
-        ...listItems,
-        ...rs.content
-      ]);
-      if (rs.hasNext) {
-        setNextCursor(rs.nextCursor);
-        setPageParam({
-          ...currentPageParam,
-          cursor: rs.nextCursor
-        });
-        setOnActionIntersect(true)
-      }
-      else {
-        setNextCursor(null);
-      }
+      setListItems(rs.content);
    });
  };

@@ -146,21 +106,21 @@ export const ArsListPage = () => {
  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
    callList({
-      sortType: sort,
-      resetPage: true
+      sortType: sort
    });
  };
  const onClickToPaymentStatus = (val: PaymentStatus) => {
    setPaymentStatus(val);
    callList({
-      paymentStatus: val,
-      resetPage: true
+      paymentStatus: val
    });
  };

  useEffect(() => {
-    // 필터 조건이 변경되면 첫 페이지부터 다시 시작
-    callList({ resetPage: true });
+    callList();
+  }, []);
+  useEffect(() => {
+    callList();
  }, [
    mid,
    moid,
@@ -173,33 +133,36 @@ export const ArsListPage = () => {
  ]);

  const getListDateGroup = () => {
-    let rs: JSX.Element[] = [];
+    let rs = [];
    let date = '';
-    let list: ArsListContent[] = [];
+    let list = [];
    for (let i = 0; i < listItems.length; i++) {
-      // paymentDate format: "20211018140420" (YYYYMMDDHHmmss)
-      let paymentDate = listItems[i]?.paymentDate || '';
-      let itemDate = paymentDate.substring(0, 8);
-      if (i === 0) {
-        date = itemDate;
-      }
-      if (date !== itemDate) {
-        // 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!)
-        if (list.length > 0) {
-          rs.push(
-            <ListDateGroup
-              additionalServiceCategory={AdditionalServiceCategory.Ars}
-              mid={mid}
-              key={date + '-' + i}
-              date={date}
-              items={list as any}
-            ></ListDateGroup>
-          );
+      let item = listItems[i];
+      if (!!item) {
+        let paymentDate = item?.paymentDate || '';
+        let itemDate = paymentDate.substring(0, 8);
+        if (!!itemDate) {
+          if (i === 0) {
+            date = itemDate;
+          }
+          if (date !== itemDate) {
+            date = itemDate;
+            if (list.length > 0) {
+              rs.push(
+                <ListDateGroup
+                  additionalServiceCategory={AdditionalServiceCategory.Ars}
+                  mid={mid}
+                  key={date + '-' + i}
+                  date={date}
+                  items={list}
+                ></ListDateGroup>
+              );
+            }
+            list = [];
+          }
+          list.push(item);
        }
-        date = itemDate;  // 그 다음에 날짜 업데이트
-        list = [];
      }
-      list.push(listItems[i] as any);
    }
    if (list.length > 0) {
      rs.push(
@@ -223,30 +186,30 @@ export const ArsListPage = () => {
            <section className="summary-section">
              <div className="credit-controls">
                <div>
-                  <input 
+                  <input
                    className="credit-period"
                    type="text"
-                    value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') } 
-                    readOnly={ true }
+                    value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
+                    readOnly={true}
                  />
-                  <button 
-                    className="filter-btn" 
+                  <button
+                    className="filter-btn"
                    aria-label="필터"
-                    onClick={ () => onClickToOpenFilter() }
+                    onClick={() => onClickToOpenFilter()}
                  >
-                    <img 
-                      src={ IMAGE_ROOT + '/ico_setting.svg' }
+                    <img
+                      src={IMAGE_ROOT + '/ico_setting.svg'}
                      alt="검색옵션"
                    />
                  </button>
                </div>
-                <button 
-                  className="download-btn" 
+                <button
+                  className="download-btn"
                  aria-label="다운로드"
-                  onClick={ () => onClickToDownloadExcel() }
+                  onClick={() => onClickToDownloadExcel()}
                >
-                  <img 
-                    src={ IMAGE_ROOT +'/ico_download.svg' }
+                  <img
+                    src={IMAGE_ROOT + '/ico_download.svg'}
                    alt="다운로드"
                  />
                </button>
@@ -255,56 +218,55 @@ export const ArsListPage = () => {

            <section className="filter-section">
              <SortTypeBox
-                sortType={ sortType }
-                onClickToSort={ onClickToSort }
+                sortType={sortType}
+                onClickToSort={onClickToSort}
              ></SortTypeBox>
              <div className="excrow mr-0">
                <div className="full-menu-keywords no-padding">
                  {
                    ArsPaymentStatusBtnGroup.map((value, index) => (
-                      <span 
-                        key={ `key-service-code=${ index }` }
-                        className={ `keyword-tag ${(paymentStatus === value.value)? 'active': ''}` }
-                        onClick={ () => onClickToPaymentStatus(value.value) }
-                      >{ value.name }</span>
+                      <span
+                        key={`key-service-code=${index}`}
+                        className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}
+                        onClick={() => onClickToPaymentStatus(value.value)}
+                      >{value.name}</span>
                    ))
                  }
                </div>
              </div>
            </section>
-            
+
            <section className="transaction-list">
-              { getListDateGroup() }
-              <div ref={setTarget}></div>
+              {getListDateGroup()}
            </section>
            <div className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToNavigate() }
+                onClick={() => onClickToNavigate()}
              >결제 신청</button>
            </div>
          </div>
        </div>
      </main>
      <ArsFilter
-        filterOn={ filterOn }
-        setFilterOn={ setFilterOn }
-        mid={ mid }
-        moid={ moid }
-        fromDate={ fromDate }
-        toDate={ toDate }
-        paymentStatus={ paymentStatus }
-        orderStatus={ orderStatus }
-        minAmount={ minAmount }
-        maxAmount={ maxAmount }
-        setMid={ setMid }
-        setMoid={ setMoid }
-        setFromDate={ setFromDate }
-        setToDate={ setToDate }
-        setPaymentStatus={ setPaymentStatus }
-        setOrderStatus={ setOrderStatus }
-        setMinAmount={ setMinAmount }
-        setMaxAmount={ setMaxAmount }
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+        mid={mid}
+        moid={moid}
+        fromDate={fromDate}
+        toDate={toDate}
+        paymentStatus={paymentStatus}
+        orderStatus={orderStatus}
+        minAmount={minAmount}
+        maxAmount={maxAmount}
+        setMid={setMid}
+        setMoid={setMoid}
+        setFromDate={setFromDate}
+        setToDate={setToDate}
+        setPaymentStatus={setPaymentStatus}
+        setOrderStatus={setOrderStatus}
+        setMinAmount={setMinAmount}
+        setMaxAmount={setMaxAmount}
      ></ArsFilter>
    </>
  );