부가서비스

- SMS 결제 통보 상세정보,재발송 바텀시트 목업 API 연결
2025-09-24 18:08:49 +09:00
parent 65a519f957
commit 3f404366cb
8 changed files with 46 additions and 31 deletions
--- a/src/entities/additional-service/model/sms-payment/types.ts
+++ b/src/entities/additional-service/model/sms-payment/types.ts
@@ -23,7 +23,7 @@ export interface SmsPaymentListItem {
 export interface SmsPaymentListProps {
    listItems: Record<string, Array<ListItemProps>>;
    mid: string;
-    onResendClick?: () => void;
+    onResendClick?: (mid: string, tid: string) => void;
 }

 export interface SmsPaymentFilterProps extends FilterProps {
@@ -85,3 +85,9 @@ export interface ExtensionSmsResendParams extends ExtensionRequestParams {
 export interface ExtensionSmsResendResponse {
    status: boolean;
 }
+
+export interface SmsPaymentDetailResendProps {
+  bottomSmsPaymentDetailResendOn: boolean;
+  setBottomSmsPaymentDetailResendOn: (bottomSmsPaymentDetailResendOn: boolean) => void;
+  smsDetailData: ExtensionSmsDetailResponse | null;
+}
--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
@@ -4,6 +4,7 @@ import { FundAccountTransferContentItem, FundAccountResultContentItem } from './
 import { ArsListContent } from './ars/types';
 import { AlimtalkListContent } from './alimtalk/types';
 import { SmsPaymentListItem } from './sms-payment/types';
+import type { ExtensionSmsDetailResponse } from './sms-payment/types';

 // ========================================
 // 공통 Enums 및 타입들
@@ -398,7 +399,7 @@ export interface ListItemProps extends
  ArsListContent, AlimtalkListContent {
  additionalServiceCategory?: AdditionalServiceCategory;
  mid?: string;
-  onResendClick?: () => void;
+  onResendClick?: (mid: string, tid: string) => void;
 }

 export interface ListDateGroupProps {
@@ -406,7 +407,7 @@ export interface ListDateGroupProps {
  date?: string;
  items?: Array<ListItemProps>;
  mid?: string;
-  onResendClick?: () => void;
+  onResendClick?: (mid: string, tid: string) => void;
 }

 export interface AdditionalServiceListProps {
@@ -773,13 +774,6 @@ export interface ExtensionSmsDetailParams extends ExtensionRequestParams {
  tid: string;
 }

-export interface ExtensionSmsDetailResponse {
-  senderNumber: string;
-  senderName: string;
-  receiverNumber: string;
-  receiverName: string;
-  sendMessage: string;
-}
 // ========================================


@@ -826,7 +820,3 @@ export interface ArsCardPaymentFinishProps {
  setRequestSuccess: (requestSuccess: boolean) => void;
 }

-export interface SmsPaymentDetailResendProps {
-  bottomSmsPaymentDetailResendOn: boolean;
-  setBottomSmsPaymentDetailResendOn: (bottomSmsPaymentDetailResendOn: boolean) => void;
-}
--- 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
@@ -120,17 +120,17 @@ export const AccountHolderSearchFilter = ({
                        <FilterSelect
                            title='가맹점'
                            selectValue={mid}
-                            selectSetter={setFilterMid}
+                            selectSetter={setMid}
                            selectOptions={MidOptions}
                        ></FilterSelect>

                        <FilterSelectInput
                            title='예금주/계좌번호'
                            selectValue={searchType}
-                            selectSetter={setFilterSearchType}
+                            selectSetter={setSearchType}
                            selectOptions={searchTypeOption}
                            inputValue={searchKeyword}
-                            inputSetter={setFilterSearchKeyword}
+                            inputSetter={setSearchKeyword}
                        ></FilterSelectInput>
                        <FilterCalendar
                            startDate={filterStartDate}
@@ -142,7 +142,7 @@ export const AccountHolderSearchFilter = ({
                        <FilterSelect
                            title='은행'
                            selectValue={bank}
-                            selectSetter={setFilterBank}
+                            selectSetter={setBank}
                            selectOptions={bankOptions}
                        ></FilterSelect>

--- a/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
+++ b/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
@@ -105,7 +105,7 @@ export const KeyInPaymentFilter = ({
                        <FilterSelect
                            title='가맹점'
                            selectValue={filterMid}
-                            selectSetter={setFilterMid}
+                            selectSetter={setMid}
                            selectOptions={MidOptions}
                        ></FilterSelect>
                        <FilterCalendar
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -519,12 +519,12 @@ export const ListItem = ({
        >{sendCl}</div>
      );
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick) {
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick && tid) {
      rs.push(
        <div
        key="sms-payment-amount"
        className={`status-label success`}
-        onClick={() => onResendClick()}
+        onClick={() => mid && tid && onResendClick(mid, tid)}
        >{'재발송'}</div>
      )
    }
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-detail-resend.tsx
+++ b/src/entities/additional-service/ui/sms-payment/sms-payment-detail-resend.tsx
@@ -1,10 +1,11 @@
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { SmsPaymentDetailResendProps } from '../../model/types';
+import { SmsPaymentDetailResendProps } from '../../../additional-service/model/sms-payment/types';

 export const SmsPaymentDetailResend = ({
  bottomSmsPaymentDetailResendOn,
-  setBottomSmsPaymentDetailResendOn
+  setBottomSmsPaymentDetailResendOn,
+  smsDetailData
 }: SmsPaymentDetailResendProps) => {
  
  const variants = {
@@ -44,11 +45,11 @@ export const SmsPaymentDetailResend = ({
          </div>
        </div>
        <div className="resend-info">
-          <div className="resend-row">발신자(번호) : 유앤아이피부과(16610808)</div>
-          <div className="resend-row">수신자(번호) : 김*환(010****7000)</div>
+          <div className="resend-row">발신자(번호) : {smsDetailData?.senderName || '-'}({smsDetailData?.senderNumber || '-'})</div>
+          <div className="resend-row">수신자(번호) : {smsDetailData?.receiverName || '-'}({smsDetailData?.receiverNumber || '-'})</div>
        </div>
        <div className="resend-box">
-          <p className="resend-text">[유앤아이피부과]김*환님, 신한은행 110322141414 (300원 06/08 입금완료)</p>
+          <p className="resend-text">{smsDetailData?.sendMessage || '-'}</p>
        </div>
        <div className="bottomsheet-footer">
          <button className="btn-50 btn-blue flex-1" type="button">신청</button>
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx
+++ b/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx
@@ -102,17 +102,17 @@ export const SmsPaymentFilter = ({
            <FilterSelect
              title='가맹점'
              selectValue={mid}
-              selectSetter={setFilterMid}
+              selectSetter={setMid}
              selectOptions={MidOptions}
            ></FilterSelect>

            <FilterSelectInput
              title='주문자,수신번호'
              selectValue={searchCl}
-              selectSetter={setFilterSearchCl}
+              selectSetter={setSearchCl}
              selectOptions={searchTypeOption}
              inputValue={searchValue}
-              inputSetter={setFilterSearchValue}
+              inputSetter={setSearchValue}
            ></FilterSelectInput>
            <FilterCalendar
              startDate={filterFromDate}
--- a/src/pages/additional-service/sms-payment/sms-payment-page.tsx
+++ b/src/pages/additional-service/sms-payment/sms-payment-page.tsx
@@ -10,11 +10,12 @@ import {
  useSetHeaderType,
  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-import { SmsPaymentListItem, SmsPaymentSearchType, SmsType } from '@/entities/additional-service/model/sms-payment/types';
+import { SmsPaymentListItem, SmsPaymentSearchType, SmsType, ExtensionSmsDetailResponse } 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';
 import { SmsPaymentFilter } from '@/entities/additional-service/ui/sms-payment/sms-payment-filter';
+import { useExtensionSmsDetailMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-detail-mutation';


 export const SmsPaymentPage = () => {
@@ -26,14 +27,17 @@ export const SmsPaymentPage = () => {
  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [mid, setMid] = useState<string>('nictest001m');
+  const [tid, setTid] = useState<string>('');
  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 [smsDetailData, setSmsDetailData] = useState<ExtensionSmsDetailResponse | null>(null);

  const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
  const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
+  const { mutateAsync: detail } = useExtensionSmsDetailMutation();

  useSetHeaderTitle('SMS 결제 통보');
  useSetHeaderType(HeaderType.LeftArrow);
@@ -79,6 +83,17 @@ export const SmsPaymentPage = () => {
    return data;
  };

+  const callDetail = (selectedMid: string, selectedTid: string) => {
+    console.log("Selected Mid: ", selectedMid, "Selected Tid: ", selectedTid)
+    detail({
+      mid: selectedMid,
+      tid: selectedTid
+    }).then((rs) => {
+      console.log('Detail info : ', rs)
+      setSmsDetailData(rs);
+    })
+  }
+
  const onClickToDownloadExcel = () => {
    downloadExcel({
      mid: mid,
@@ -103,7 +118,9 @@ export const SmsPaymentPage = () => {
  };


-  const onClickToShowDetail = () => {
+  const onClickToShowDetail = (selectedMid: string, selectedTid: string) => {
+    setTid(selectedTid);
+    callDetail(selectedMid, selectedTid);
    setBottomSmsPaymentDetailResendOn(true);
  };

@@ -161,6 +178,7 @@ export const SmsPaymentPage = () => {
      <SmsPaymentDetailResend
        bottomSmsPaymentDetailResendOn={bottomSmsPaymentDetailResendOn}
        setBottomSmsPaymentDetailResendOn={setBottomSmsPaymentDetailResendOn}
+        smsDetailData={smsDetailData}
      ></SmsPaymentDetailResend>

      <SmsPaymentFilter