- getListDateGroup 수정

- 알림톡 필터 추가
- 일부 부가서비스 엑셀다운로드 바텀시트 추가

src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx

@@ -25,37 +25,16 @@ import { NumericFormat } from 'react-number-format';
 import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction-filter';
 import { PATHS } from '@/shared/constants/paths';
 import { useStore } from '@/shared/model/store';
-import useIntersectionObserver from '@/widgets/intersection-observer';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 
 export const FundAccountTransferListWrap = () => {
   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<FundAccountTransferContentItem>>([]);
   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 [searchCl, setSearchCl] = useState<FundAccountSearchCl>(FundAccountSearchCl.ACCOUNT_NAME);
@@ -65,7 +44,7 @@ export const FundAccountTransferListWrap = () => {
   const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.ALL);
   const [bankCode, setBankCode] = useState<string>('');
 
-  const [email, setEmail] = useState<string>('');
+  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
   const [balance, setBalance] = useState<number>(0);
 
   const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
@@ -74,17 +53,8 @@ export const FundAccountTransferListWrap = () => {
 
   const callList = (option?: {
     sortType?: SortTypeKeys,
-    status?: FundAccountStatus,
-    resetPage?: boolean
+    status?: FundAccountStatus
   }) => {
-    setOnActionIntersect(false);
-
-    const currentPageParam = option?.resetPage
-      ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
-      : { ...pageParam, sortType: option?.sortType ?? sortType };
-
-    setPageParam(currentPageParam);
-
     let listSummaryParams: ExtensionFundAccountTransferListParams = {
       mid: mid,
       searchCl: searchCl,
@@ -93,41 +63,37 @@ export const FundAccountTransferListWrap = () => {
       fromDate: fromDate,
       toDate: toDate,
       resultStatus: option?.status ?? status,
-      ... {
-        page: currentPageParam
-      }
+      page: pageParam
     };
 
+    if (listSummaryParams.page) {
+      listSummaryParams.page.sortType = option?.sortType || sortType;
+      setPageParam(listSummaryParams.page);
+    }
+
     extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
-      setListItems(option?.resetPage ? rs.content : [
-        ...listItems,
-        ...rs.content
-      ]);
-      if (rs.hasNext) {
-        setNextCursor(rs.nextCursor);
-        setPageParam({
-          ...currentPageParam,  // pageParam이 아니라 currentPageParam 사용
-          cursor: rs.nextCursor
-        });
-        setOnActionIntersect(true)
-      }
-      else {
-        setNextCursor(null);
-      }
+      setListItems(rs.content);
     });
     callBalance();
   };
 
-  const callDownloadExcel = () => {
-    let params: ExtensionFundAccountTransferExcelParams = {
-      mid: mid,
-      email: email,
-      fromDate: fromDate,
-      toDate: toDate,
-    };
-    extensionFundAccountTransferExcel(params).then((rs: ExtensionFundAccountTransferExcelResponse) => {
+  const onClickToOpenEmailBottomSheet = () => {
+    setEmailBottomSheetOn(true);
+  };
 
-    });
+  const onSendRequest = (selectedEmail?: string) => {
+    if (selectedEmail) {
+      const params: ExtensionFundAccountTransferExcelParams = {
+        mid: mid,
+        email: selectedEmail,
+        fromDate: fromDate,
+        toDate: toDate,
+      };
+      extensionFundAccountTransferExcel(params).then((rs: ExtensionFundAccountTransferExcelResponse) => {
+        console.log('Excel Download Status:', rs.status);
+      });
+    }
+    setEmailBottomSheetOn(false);
   };
 
   const callBalance = () => {
@@ -139,59 +105,54 @@ export const FundAccountTransferListWrap = () => {
     });
   };
 
-
-  const onClickToDownloadExcel = () => {
-    callDownloadExcel();
-  };
-
   const onClickToOpenFilter = () => {
     setFilterOn(!filterOn);
   };
 
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
-    callList({ 
-      sortType: sort, 
-      resetPage: true 
+    callList({
+      sortType: sort
     });
   };
-  
+
   const onClickToStatus = (val: FundAccountStatus) => {
     setStatus(val);
     callList({
-      status: val,
-      resetPage: true
+      status: val
     });
   };
 
   const getListDateGroup = () => {
-    let rs: JSX.Element[] = [];
-    let date = '';
-    let list: FundAccountTransferContentItem[] = [];
+    let rs = [];
+  let date = '';
+    let list = [];
     for (let i = 0; i < listItems.length; i++) {
-      // registDate format: "20211018140420" (YYYYMMDDHHmmss)
-      let registDate = listItems[i]?.registDate || '';
-      let itemDate = registDate.substring(0, 8);
-      if (i === 0) {
-        date = itemDate;
-      }
-      if (date !== itemDate) {
-        // 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!)
-        if (list.length > 0) {
-          rs.push(
-            <ListDateGroup
-              additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
-              mid={mid}
-              key={date + '-' + i}
-              date={date}  // 이전 날짜 사용
-              items={list as any}
-            ></ListDateGroup>
-          );
+      let items = listItems[i];
+      if (!!items) {
+        let registDate = items?.registDate;
+        registDate = registDate?.substring(0, 8);
+        if (!!registDate) {
+          if (i === 0) {
+            date = registDate;
+          }
+          if (date !== registDate) {
+            date = registDate;
+            if (list.length > 0) {
+              rs.push(
+                <ListDateGroup
+                  additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
+                  key={date + '-' + i}
+                  date={date}
+                  items={list}
+                ></ListDateGroup>
+              );
+            }
+            list = [];
+          }
+          list.push(items);
         }
-        date = itemDate;  // 그 다음에 날짜 업데이트
-        list = [];
       }
-      list.push(listItems[i] as any);
     }
     if (list.length > 0) {
       rs.push(
@@ -200,7 +161,7 @@ export const FundAccountTransferListWrap = () => {
           mid={mid}
           key={date + '-last'}
           date={date}
-          items={list as any}
+          items={list}
         ></ListDateGroup>
       );
     }
@@ -208,8 +169,7 @@ export const FundAccountTransferListWrap = () => {
   };
 
   useEffect(() => {
-    // 필터 조건이 변경되면 첫 페이지부터 다시 시작
-    callList({ resetPage: true });
+    callList();
   }, [
     mid,
     searchCl,
@@ -249,7 +209,7 @@ export const FundAccountTransferListWrap = () => {
           <button
             className="download-btn"
             aria-label="다운로드"
-            onClick={() => onClickToDownloadExcel()}
+            onClick={onClickToOpenEmailBottomSheet}
           >
             <img
               src={IMAGE_ROOT + '/ico_download.svg'}
@@ -298,7 +258,6 @@ export const FundAccountTransferListWrap = () => {
 
       <section className="transaction-list pb-86">
         {getListDateGroup()}
-        <div ref={setTarget}></div>
       </section>
       <div className="apply-row">
         <button
@@ -324,6 +283,14 @@ export const FundAccountTransferListWrap = () => {
         setBankCode={setBankCode}
         setStatus={setStatus}
       ></FundAccountTransactionFilter>
+
+      <EmailBottomSheet
+        bottomSheetOn={emailBottomSheetOn}
+        setBottomSheetOn={setEmailBottomSheetOn}
+        imageSave={false}
+        sendEmail={true}
+        sendRequest={onSendRequest}
+      />
     </>
   );
 };