..

src/entities/transaction/model/types.ts

@@ -153,12 +153,10 @@ export interface BillingListProps {
 export interface AllTransactionListItem {
   tid?: string;
   mid?: string;
-  stateDate?: string;
+  transactionDateTime?: string;
-  stateCode?: string;
+  statusCode?: string;
-  stateName?: string;
   installmentMonth?: string;
   serviceCode?: string;
-  serviceName?: string;
   serviceDetailName?: string;
   goodsAmount?: number;
 };
@@ -221,8 +219,8 @@ export interface AllTransactionListSummaryParams extends AllTransactionListParam
 }
 
 export interface AllTransactionListSummaryResponse {
-  totalTransactionCount: number;
+  totalCount: number;
-  totalTransactionAmount: number;
+  totalAmount: number;
 };
 export interface AllTransactionListParams {
   moid?: string;

src/entities/transaction/ui/list-date-group.tsx

@@ -25,12 +25,9 @@ export const ListDateGroup = ({
             key={ key }
             tid={ items[i]?.tid }
             mid={ items[i]?.mid }
-            stateDate={ items[i]?.stateDate }
+            statusCode={ items[i]?.statusCode }
-            stateCode={ items[i]?.stateCode }
-            stateName={ items[i]?.stateName }
             installmentMonth={ items[i]?.installmentMonth }
             serviceCode={ items[i]?.serviceCode }
-            serviceName={ items[i]?.serviceName }
             serviceDetailName={ items[i]?.serviceDetailName }
             goodsAmount={ items[i]?.goodsAmount }
 

src/entities/transaction/ui/list-item.tsx

@@ -6,8 +6,8 @@ import moment from 'moment';
 
 export const ListItem = ({
   transactionCategory,
-  tid, mid, stateDate, stateCode, stateName,
+  tid, mid, statusCode,
-  installmentMonth, serviceCode, serviceName,
+  installmentMonth, serviceCode,
   serviceDetailName, goodsAmount,
   id, amount, customerName, issueNumber,
   issueStatus, paymentMethod, processResult, 
@@ -18,13 +18,13 @@ export const ListItem = ({
   const { navigate } = useNavigate();
   const getItemClass = () => {
     let rs = '';
-    if(stateCode === '0'){
+    if(statusCode === '0'){
       rs = '';
     }
-    else if(stateCode === '1'){
+    else if(statusCode === '1'){
       rs = 'approved';
     }
-    else if(stateCode === '2'){
+    else if(statusCode === '2'){
       rs = 'refund';
     }
     return rs;
@@ -32,13 +32,13 @@ export const ListItem = ({
 
   const getDotClass = (str?: string) => {
     let rs = '';
-    if(stateCode === '0'){
+    if(statusCode === '0'){
       rs = '';
     }
-    else if(stateCode === '1'){
+    else if(statusCode === '1'){
       rs = 'blue';
     }
-    else if(stateCode === '2'){
+    else if(statusCode === '2'){
       rs = 'gray';
     }
     return rs;
@@ -82,7 +82,7 @@ export const ListItem = ({
   const getTime = () => {
     let timeStr = '';
     if(transactionCategory === TransactionCategory.AllTransaction){
-      let time = stateDate?.substring(8, 12);
+      let time = transactionDateTime?.substring(8, 12);
       timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
     }
     else{
@@ -94,7 +94,15 @@ export const ListItem = ({
   const getTitle = () => {
     let str = '';
     if(transactionCategory === TransactionCategory.AllTransaction){
-      str = `${serviceName}(${serviceDetailName})`;
+      let strDetailName = serviceDetailName?.split('|').join(',');
+      if(strDetailName){
+        let last = strDetailName.slice(-1);
+        if(last === ','){
+          strDetailName = strDetailName.substring(0, strDetailName.length - 1);
+        }
+        str = `(${strDetailName})`;
+      }
+      
     }
     else if(transactionCategory === TransactionCategory.CashReceipt){
       str = `${customerName}(${issueNumber})`
@@ -115,7 +123,7 @@ export const ListItem = ({
         <div className="transaction-details">
           <span>{ getTime() }</span>
           <span className="separator">|</span>
-          <span>{ stateName }</span>
+          <span>{ statusCode }</span>
           <span className="separator">|</span>
           <span>{ mid }</span>
           {

src/pages/transaction/all-transaction/list-page.tsx

@@ -49,8 +49,8 @@ export const AllTransactionListPage = () => {
   const [searchCl, setSearchCl] = useState<AllTransactionSearchCl | undefined>();
   const [searchValue, setSearchValue] = useState<string | undefined>();
 
-  const [totalTransactionCount, setTotalTransactionCount] = useState<number>(0);
+  const [totalCount, setTotalCount] = useState<number>(0);
-  const [totalTransactionAmount, setTotalTransactionAmount] = useState<number>(0);
+  const [totalAmount, setTotalAmount] = useState<number>(0);
   
     
 	useSetHeaderTitle('거래내역 조회');
@@ -96,8 +96,8 @@ export const AllTransactionListPage = () => {
       setListItems(assembleData(rs.content));
     });
     allTransactionListSummary(listSummaryParams).then((rs) => {
-      setTotalTransactionAmount(rs.totalTransactionAmount);
+      setTotalAmount(rs.totalAmount);
-      setTotalTransactionCount(rs.totalTransactionCount);
+      setTotalCount(rs.totalCount);
     });
   };
 
@@ -105,8 +105,8 @@ export const AllTransactionListPage = () => {
     let data: any = {};
     if(content && content.length > 0){
       for(let i=0;i<content?.length;i++){
-        let stateDate = content[i]?.stateDate?.substring(0, 8);
+        let transactionDateTime = content[i]?.transactionDateTime?.substring(0, 8);
-        let groupDate = moment(stateDate).format('YYYYMMDD');
+        let groupDate = moment(transactionDateTime).format('YYYYMMDD');
         if(!!groupDate && !data.hasOwnProperty(groupDate)){
           data[groupDate] = [];
         }
@@ -171,9 +171,21 @@ export const AllTransactionListPage = () => {
 
   useEffect(() => {
     callServiceCodeOptions();
-    callList();
   }, []);
 
+  useEffect(() => {
+    callList();
+  }, [
+    mid, moid, 
+    tid, fromDate, 
+    toDate, stateCode, 
+    serviceCode, minAmount, 
+    maxAmount, bankCode,
+    cardCode, searchCl,
+    searchValue
+  ]);
+
+
 	return (
 		<>
 			<main>
@@ -184,10 +196,10 @@ export const AllTransactionListPage = () => {
 							<div className="summary-amount">
 								<span className="amount-text">
                   <NumericFormat
-                    value={ totalTransactionAmount } 
+                    value={ totalAmount } 
                     thousandSeparator
                     displayType="text"
-                    suffix={ '원' }
+                    suffix='원'
                   ></NumericFormat> 
                 </span>
 								<div className="summary-actions">
@@ -216,11 +228,11 @@ export const AllTransactionListPage = () => {
 									<span className="detail-label">거래건수</span>
 									<span className="detail-value">
                     <NumericFormat
-                      value={ totalTransactionCount } 
+                      value={ totalCount } 
                       thousandSeparator
                       displayType="text"
-                      prefix={ '총 ' }
+                      prefix='총 '
-                      suffix={ ' 건' }
+                      suffix=' 건'
                     ></NumericFormat>
                   </span>
 								</div>

src/shared/ui/filter/calendar.tsx

@@ -26,22 +26,31 @@ export const FilterCalendar = ({
   const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
   const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);
   
+  const [newStartDate, setNewStartDate] = useState<string>('');
+  const [newEndDate, setNewEndDate] = useState<string>('');
+
   const setFilterDate = (dateOptions: FilterDateOptions) => {
     if(dateOptions === FilterDateOptions.Today){
-      setStartDate(moment().format('YYYY.MM.DD'));
+      setStartDate(moment().format('YYYYMMDD'));
-      setEndDate(moment().format('YYYY.MM.DD'));
+      setNewStartDate(moment().format('YYYY.MM.DD'));
+      setEndDate(moment().format('YYYYMMDD'));
+      setNewEndDate(moment().format('YYYY.MM.DD'));
       setDateReadyOnly(true);
       setFilterDateOptionsBtn(FilterDateOptions.Today);
     } 
     else if(dateOptions === FilterDateOptions.Week){
-      setStartDate(moment().subtract(1, 'week').format('YYYY.MM.DD'));
+      setStartDate(moment().subtract(1, 'week').format('YYYYMMDD'));
-      setEndDate(moment().format('YYYY.MM.DD'));
+      setNewStartDate(moment().subtract(1, 'week').format('YYYY.MM.DD'));
+      setEndDate(moment().format('YYYYMMDD'));
+      setNewEndDate(moment().format('YYYY.MM.DD'));
       setDateReadyOnly(true);
       setFilterDateOptionsBtn(FilterDateOptions.Week);
     }
     else if(dateOptions === FilterDateOptions.Month){
-      setStartDate(moment().subtract(1, 'month').format('YYYY.MM.DD'));
+      setStartDate(moment().subtract(1, 'month').format('YYYYMMDD'));
-      setEndDate(moment().format('YYYY.MM.DD'));
+      setNewStartDate(moment().subtract(1, 'month').format('YYYY.MM.DD'));
+      setEndDate(moment().format('YYYYMMDD'));
+      setNewEndDate(moment().format('YYYY.MM.DD'));
       setDateReadyOnly(true);
       setFilterDateOptionsBtn(FilterDateOptions.Month);
     }
@@ -65,16 +74,31 @@ export const FilterCalendar = ({
 
   const setNewDate = (date: string) => {
     if(calendarType === CalendarType.Start){
-      setStartDate(date);
+      setStartDate(moment(date).format('YYYYMMDD'));
+      setNewStartDate(moment(date).format('YYYY.MM.DD'));
     }
     else if(calendarType === CalendarType.End){
-      setEndDate(date);
+      setEndDate(moment(date).format('YYYYMMDD'));
+      setNewEndDate(moment(date).format('YYYY.MM.DD'));
     }
     setCalendarOpen(false);
   }
 
   useEffect(() => {
-    
+    if(startDate && startDate.length === 8){
+      let str = startDate.substring(0, 4)+'.'+startDate.substring(4, 6)+'.'+startDate.substring(6, 8);
+      setNewStartDate(str);
+    }
+    else{
+      setNewStartDate(startDate);
+    }
+    if(endDate && endDate.length === 8){
+      let str = endDate.substring(0, 4)+'.'+endDate.substring(4, 6)+'.'+endDate.substring(6, 8);
+      setNewEndDate(str);
+    }
+    else{
+      setNewEndDate(endDate);
+    }
   }, []);
   return (
     <>
@@ -106,7 +130,7 @@ export const FilterCalendar = ({
                 className="date-input"
                 type="text"
                 placeholder="날짜 선택"
-                value={ startDate }
+                value={ newStartDate }
                 onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                 readOnly={ dateReadOnly }
               />
@@ -128,7 +152,7 @@ export const FilterCalendar = ({
                 className="date-input"
                 type="text"
                 placeholder="날짜 선택"
-                value={ endDate }
+                value={ newEndDate }
                 onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                 readOnly={ dateReadOnly }
               />
@@ -149,8 +173,8 @@ export const FilterCalendar = ({
       <NiceCalendar
         calendarOpen={ calendarOpen }
         setCalendarOpen={ setCalendarOpen }
-        startDate={ startDate }
+        startDate={ newStartDate }
-        endDate={ endDate }
+        endDate={ newEndDate }
         calendarType={ calendarType }
         setNewDate={ setNewDate }
       ></NiceCalendar>