부가서비스

- SMS 결제 통보 상세정보,재발송 바텀시트 목업 API 연결

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;
+}

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;
-}

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>
 

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

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>
       )
     }

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">발신자(번호) : {smsDetailData?.senderName || '-'}({smsDetailData?.senderNumber || '-'})</div>
-          <div className="resend-row">수신자(번호) : 김*환(010****7000)</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>

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}

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