부가서비스

- SMS 결제통보 엑셀 다운로드 API 추가, 재발송 버튼 클릭시 Bottom Sheet 출현
2025-09-24 17:32:25 +09:00
parent 69bafcd2c5
commit 65a519f957
9 changed files with 193 additions and 20 deletions
--- a/src/entities/additional-service/model/sms-payment/types.ts
+++ b/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 {
--- a/src/entities/additional-service/model/types.ts
+++ b/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 {
--- a/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-filter.tsx
+++ b/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-filter.tsx
--- a/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx
+++ b/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>

--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/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>
        )
      }  
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/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>
      )
    }
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx
+++ b/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>
    </>
  );
 };
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
+++ b/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>
            )
        }
--- a/src/pages/additional-service/sms-payment/sms-payment-page.tsx
+++ b/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}
-            mid={mid}
+              listItems={listItems}
+              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>
    </>
  );
 };