..

2025-10-15 19:49:21 +09:00
parent a07e80e60c
commit b457716c3f
5 changed files with 85 additions and 46 deletions
--- a/src/entities/transaction/model/types.ts
+++ b/src/entities/transaction/model/types.ts
@@ -153,12 +153,10 @@ export interface BillingListProps {
 export interface AllTransactionListItem {
  tid?: string;
  mid?: string;
-  stateDate?: string;
-  stateCode?: string;
-  stateName?: string;
+  transactionDateTime?: string;
+  statusCode?: 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;
-  totalTransactionAmount: number;
+  totalCount: number;
+  totalAmount: number;
 };
 export interface AllTransactionListParams {
  moid?: string;
--- a/src/entities/transaction/ui/list-date-group.tsx
+++ b/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 }
-            stateCode={ items[i]?.stateCode }
-            stateName={ items[i]?.stateName }
+            statusCode={ items[i]?.statusCode }
            installmentMonth={ items[i]?.installmentMonth }
            serviceCode={ items[i]?.serviceCode }
-            serviceName={ items[i]?.serviceName }
            serviceDetailName={ items[i]?.serviceDetailName }
            goodsAmount={ items[i]?.goodsAmount }

--- a/src/entities/transaction/ui/list-item.tsx
+++ b/src/entities/transaction/ui/list-item.tsx
@@ -6,8 +6,8 @@ import moment from 'moment';

 export const ListItem = ({
  transactionCategory,
-  tid, mid, stateDate, stateCode, stateName,
-  installmentMonth, serviceCode, serviceName,
+  tid, mid, statusCode,
+  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>
          {
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/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 [totalTransactionAmount, setTotalTransactionAmount] = useState<number>(0);
+  const [totalCount, setTotalCount] = 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);
-      setTotalTransactionCount(rs.totalTransactionCount);
+      setTotalAmount(rs.totalAmount);
+      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 groupDate = moment(stateDate).format('YYYYMMDD');
+        let transactionDateTime = content[i]?.transactionDateTime?.substring(0, 8);
+        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={ '총 ' }
-                      suffix={ ' 건' }
+                      prefix='총 '
+                      suffix=' 건'
                    ></NumericFormat>
                  </span>
 								</div>
--- a/src/shared/ui/filter/calendar.tsx
+++ b/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'));
-      setEndDate(moment().format('YYYY.MM.DD'));
+      setStartDate(moment().format('YYYYMMDD'));
+      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'));
-      setEndDate(moment().format('YYYY.MM.DD'));
+      setStartDate(moment().subtract(1, 'week').format('YYYYMMDD'));
+      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'));
-      setEndDate(moment().format('YYYY.MM.DD'));
+      setStartDate(moment().subtract(1, 'month').format('YYYYMMDD'));
+      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 }
-        endDate={ endDate }
+        startDate={ newStartDate }
+        endDate={ newEndDate }
        calendarType={ calendarType }
        setNewDate={ setNewDate }
      ></NiceCalendar>