부가서비스

- SMS 결제통보 엑셀 다운로드 API 추가, 재발송 버튼 클릭시 Bottom Sheet 출현

src/entities/additional-service/model/sms-payment/types.ts

@@ -1,5 +1,5 @@
 import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
-import { ExtensionRequestParams, ListItemProps } from '../types';
+import { ExtensionRequestParams, FilterProps, ListItemProps } from '../types';
 
 export enum SmsType {
     ALL = "ALL",
@@ -23,6 +23,22 @@ export interface SmsPaymentListItem {
 export interface SmsPaymentListProps {
     listItems: Record<string, Array<ListItemProps>>;
     mid: string;
+    onResendClick?: () => void;
+}
+
+export interface SmsPaymentFilterProps extends FilterProps {
+    mid: string;
+    searchCl: SmsPaymentSearchType;
+    searchValue: string;
+    fromDate: string;
+    toDate: string;
+    smsCl: SmsType;
+    setMid: (mid: string) => void;
+    setSearchCl: (searchCl: SmsPaymentSearchType) => void;
+    setSearchValue: (searchValue: string) => void;
+    setFromDate: (fromDate: string) => void;
+    setToDate: (toDate: string) => void;
+    setSmsCl: (smsCl: SmsType) => void;
 }
 
 export interface ExtensionSmsPaymentListParams extends ExtensionRequestParams {

src/entities/additional-service/model/types.ts

@@ -397,7 +397,8 @@ export interface ListItemProps extends
   FundAccountResultContentItem,
   ArsListContent, AlimtalkListContent {
   additionalServiceCategory?: AdditionalServiceCategory;
-  mid?: string
+  mid?: string;
+  onResendClick?: () => void;
 }
 
 export interface ListDateGroupProps {
@@ -405,6 +406,7 @@ export interface ListDateGroupProps {
   date?: string;
   items?: Array<ListItemProps>;
   mid?: string;
+  onResendClick?: () => void;
 }
 
 export interface AdditionalServiceListProps {

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

@@ -39,10 +39,6 @@ export const AccountHolderSearchFilter = ({
     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);
-    const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
-
-    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
 
     const variants = {
         hidden: { x: '100%' },
@@ -124,17 +120,17 @@ export const AccountHolderSearchFilter = ({
                         <FilterSelect
                             title='가맹점'
                             selectValue={mid}
-                            selectSetter={setMid}
+                            selectSetter={setFilterMid}
                             selectOptions={MidOptions}
                         ></FilterSelect>
 
                         <FilterSelectInput
                             title='예금주/계좌번호'
                             selectValue={searchType}
-                            selectSetter={setSearchType}
+                            selectSetter={setFilterSearchType}
                             selectOptions={searchTypeOption}
                             inputValue={searchKeyword}
-                            inputSetter={setSearchKeyword}
+                            inputSetter={setFilterSearchKeyword}
                         ></FilterSelectInput>
                         <FilterCalendar
                             startDate={filterStartDate}
@@ -146,7 +142,7 @@ export const AccountHolderSearchFilter = ({
                         <FilterSelect
                             title='은행'
                             selectValue={bank}
-                            selectSetter={setBank}
+                            selectSetter={setFilterBank}
                             selectOptions={bankOptions}
                         ></FilterSelect>
 

src/entities/additional-service/ui/list-date-group.tsx

@@ -7,7 +7,8 @@ export const ListDateGroup = ({
   additionalServiceCategory,
   date,
   items,
-  mid
+  mid,
+  onResendClick
 }: ListDateGroupProps) => {
   moment.locale('ko');
   const getStateDate = () => {
@@ -65,6 +66,7 @@ export const ListDateGroup = ({
             receiverName={ items[i]?.receiverName }
 
             smsCl= { items[i]?.smsCl }
+            onResendClick={ onResendClick }
           ></ListItem>
         )
       }  

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

@@ -27,7 +27,8 @@ export const ListItem = ({
   alimCl, sendType, sendCl,
   paymentMethod, receiverName,
 
-  smsCl
+  smsCl,
+  onResendClick
 }: ListItemProps) => {
   const { navigate } = useNavigate();
   const getItemClass = () => {
@@ -518,11 +519,12 @@ export const ListItem = ({
         >{sendCl}</div>
       );
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick) {
       rs.push(
         <div
         key="sms-payment-amount"
-        className="transaction-amount"
+        className={`status-label success`}
+        onClick={() => onResendClick()}
         >{'재발송'}</div>
       )
     }

src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx

@@ -1,8 +1,140 @@
-export const SmsPaymentFilter = () => {
+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 { FilterSelectInput } from '@/shared/ui/filter/select-input';
+import { FilterDateOptions } from '@/entities/common/model/types';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { SmsPaymentFilterProps, SmsPaymentSearchType, SmsType } from '../../model/sms-payment/types';
+export const SmsPaymentFilter = ({
+  filterOn,
+  setFilterOn,
+  mid,
+  searchCl,
+  searchValue,
+  fromDate,
+  toDate,
+  smsCl,
+  setMid,
+  setSearchCl,
+  setSearchValue,
+  setFromDate,
+  setToDate,
+  setSmsCl
+}: SmsPaymentFilterProps) => {
+
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterSearchCl, setFilterSearchCl] = useState<SmsPaymentSearchType>(searchCl);
+  const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
+  const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
+  const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
+  const [filterSmsCl, setFilterSmsCl] = useState<SmsType>(smsCl);
+
+  const variants = {
+    hidden: { x: '100%' },
+    visible: { x: '0%' },
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setSearchCl(filterSearchCl);
+    setSearchValue(filterSearchValue);
+    setFromDate(filterFromDate);
+    setToDate(filterToDate);
+    setSmsCl(filterSmsCl);
+    onClickToClose();
+  };
+
+  let MidOptions = [
+    { name: 'nictest001m', value: 'nictest001m' },
+    { name: 'nictest002m', value: 'nictest002m' }
+  ];
+
+  let searchTypeOption = [
+    { name: '주문자', value: SmsPaymentSearchType.BUYER_NAME },
+    { name: '수신번호', value: SmsPaymentSearchType.RECEIVE_PHONE_NUMBER },
+  ]
+
+  let smsTypeOption = [
+    { name: '전체', value: SmsType.ALL },
+    { name: '가상계좌요청', value: SmsType.VACCOUNT_REQ },
+    { name: '가상계좌 요청+입금', value: SmsType.VACCOUNT_REQ_DEPOSIT },
+  ]
+
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
 
   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={setFilterMid}
+              selectOptions={MidOptions}
+            ></FilterSelect>
+
+            <FilterSelectInput
+              title='주문자,수신번호'
+              selectValue={searchCl}
+              selectSetter={setFilterSearchCl}
+              selectOptions={searchTypeOption}
+              inputValue={searchValue}
+              inputSetter={setFilterSearchValue}
+            ></FilterSelectInput>
+            <FilterCalendar
+              startDate={filterFromDate}
+              endDate={filterToDate}
+              setStartDate={setFilterFromDate}
+              setEndDate={setFilterToDate}
+            ></FilterCalendar>
+            <FilterButtonGroups
+              title='조회결과'
+              activeValue={filterSmsCl}
+              btnGroups={smsTypeOption}
+              setter={setFilterSmsCl}
+            ></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/sms-payment/sms-payment-list.tsx

@@ -4,7 +4,8 @@ import { ListDateGroup } from '../list-date-group';
 
 export const SmsPaymentList = ({
     listItems,
-    mid
+    mid,
+    onResendClick
 }: SmsPaymentListProps) => {
 
     const getListDateGroup = () => {
@@ -17,6 +18,7 @@ export const SmsPaymentList = ({
                     date={key}
                     items={value}
                     mid={mid}
+                    onResendClick={onResendClick}
                 ></ListDateGroup>
             )
         }

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

@@ -14,6 +14,7 @@ import { SmsPaymentListItem, SmsPaymentSearchType, SmsType } from '@/entities/ad
 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';
+import { SmsPaymentFilter } from '@/entities/additional-service/ui/sms-payment/sms-payment-filter';
 
 
 export const SmsPaymentPage = () => {
@@ -86,7 +87,9 @@ export const SmsPaymentPage = () => {
       fromDate: fromDate,
       toDate: toDate,
       smsCl: smsCl === SmsType.ALL ? '' : smsCl,
-    })
+    }).then((rs) => {
+      console.log('Excel Dowload Status : ' + rs.status)
+    });
   }
 
 
@@ -147,8 +150,9 @@ export const SmsPaymentPage = () => {
             </section>
             <div className="detail-divider"></div>
             <SmsPaymentList
-            listItems={listItems}
+              listItems={listItems}
-            mid={mid}
+              mid={mid}
+              onResendClick={onClickToShowDetail}
             ></SmsPaymentList>
           </div>
         </div>
@@ -158,6 +162,23 @@ export const SmsPaymentPage = () => {
         bottomSmsPaymentDetailResendOn={bottomSmsPaymentDetailResendOn}
         setBottomSmsPaymentDetailResendOn={setBottomSmsPaymentDetailResendOn}
       ></SmsPaymentDetailResend>
+
+      <SmsPaymentFilter
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+        mid={mid}
+        searchCl={searchCl}
+        searchValue={searchValue}
+        fromDate={fromDate}
+        toDate={toDate}
+        smsCl={smsCl}
+        setMid={setMid}
+        setSearchCl={setSearchCl}
+        setSearchValue={setSearchValue}
+        setFromDate={setFromDate}
+        setToDate={setToDate}
+        setSmsCl={setSmsCl}
+      ></SmsPaymentFilter>
     </>
   );
 };