- 거래내역 필터 기획상 미일치 수정

src/entities/additional-service/ui/payout/detail/payout-detail.tsx

@@ -172,7 +172,14 @@ export const PayoutDetail = ({
                             </li>
                             <li className="kv-row">
                                 <span className="k">{t('additionalService.payout.disbursementDateTime')}</span>
-                                <span className="v">{detail?.settlementDateTime ? moment(detail?.settlementDateTime, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : ""}</span>
+                                <span className="v">
+                                  {detail?.settlementDateTime
+                                    ? detail.settlementDateTime.length === 8
+                                      ? moment(detail.settlementDateTime, 'YYYYMMDD').format('YYYY.MM.DD')
+                                      : moment(detail.settlementDateTime, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')
+                                    : ""
+                                  }
+                                </span>
                             </li>
                             <li className="kv-row">
                                 <span className="k">{t('additionalService.payout.businessNumber')}</span>

src/entities/transaction/model/types.ts

@@ -56,7 +56,7 @@ export enum AllTransactionServiceCode {
 };
 
 export enum AllTransactionSearchCl {
-  ALL = 'ALL',
+  ALL = '',
   CARD_NO = 'CARD_NO',
   CARD_APPROVAL_NO = 'CARD_APPROVAL_NO',
   BANK_BUYER_NM = 'BANK_BUYER_NM',
@@ -774,8 +774,8 @@ export interface AllTransactionFilterProps extends FilterProps {
   maxAmount?: number;
   cardCode?: string;
   bankCode?: string;
-  searchCl?: AllTransactionSearchCl;
+  searchCl: AllTransactionSearchCl;
-  searchValue?: string;
+  searchValue: string;
   setMid: (mid: string) => void;
   setMoid: (moid: string) => void;
   setTid: (tid: string) => void;
@@ -787,8 +787,8 @@ export interface AllTransactionFilterProps extends FilterProps {
   setMaxAmount: (maxAmount?: number) => void;
   setCardCode: (cardCode: string | undefined) => void;
   setBankCode: (bankCode: string | undefined) => void;
-  setSearchCl: (searchCl: AllTransactionSearchCl | undefined) => void;
+  setSearchCl: (searchCl: AllTransactionSearchCl) => void;
-  setSearchValue: (searchValue: string | undefined) => void;
+  setSearchValue: (searchValue: string) => void;
   serviceCodeOptions?: Array<Record<string, any>>;
 };
 export interface CashReceiptFilterProps extends FilterProps {

src/entities/transaction/ui/filter/all-transaction-filter.tsx

@@ -72,8 +72,8 @@ export const AllTransactionFilter = ({
 
   const [filterCardBankCode, setFilterCardBankCode] = useState<string>('');
 
-  const [filterSearchCl, setFilterSearchCl] = useState<AllTransactionSearchCl | undefined>(searchCl);
+  const [filterSearchCl, setFilterSearchCl] = useState<AllTransactionSearchCl>(searchCl);
-  const [filterSearchValue, setFilterSearchValue] = useState<string | undefined>(searchValue);
+  const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
 
   const [searchClOptionsGroup, setSearchClOptionsGroup] = useState<Array<Record<string, string>>>([]);
 
@@ -150,42 +150,57 @@ export const AllTransactionFilter = ({
     setFilterServiceCode(value);
 
     if(value === ''){
-      setFilterSearchCl(undefined);
+      options.push({name: t('filter.searchOptions.all'), value: AllTransactionSearchCl.ALL});
     }
     else if(value === '01'){
+      options.push({name: t('filter.searchOptions.all'), value: AllTransactionSearchCl.ALL});
       options.push({name: t('filter.searchOptions.cardNumber'), value: AllTransactionSearchCl.CARD_NO});
       options.push({name: t('filter.searchOptions.approvalNumber'), value: AllTransactionSearchCl.CARD_APPROVAL_NO});
     }
     else if(value === '02'){
+      options.push({name: t('filter.searchOptions.all'), value: AllTransactionSearchCl.ALL});
       options.push({name: t('filter.searchOptions.buyerName'), value: AllTransactionSearchCl.BANK_BUYER_NM});
     }
     else if(value === '03'){
+      options.push({name: t('filter.searchOptions.all'), value: AllTransactionSearchCl.ALL});
       options.push({name: t('filter.searchOptions.virtualAccountNumber'), value: AllTransactionSearchCl.VACCT_NO});
       options.push({name: t('filter.searchOptions.depositorName'), value: AllTransactionSearchCl.VACCT_DEPOSIT_NM});
     }
     else if(value === '05'){
+      options.push({name: t('filter.searchOptions.all'), value: AllTransactionSearchCl.ALL});
       options.push({name: t('filter.searchOptions.phoneNumber'), value: AllTransactionSearchCl.TEL_NO});
     }
     else if(value === '14'){
+      options.push({name: t('filter.searchOptions.all'), value: AllTransactionSearchCl.ALL});
       options.push({name: t('filter.searchOptions.culturelandId'), value: AllTransactionSearchCl.SSGMONEY_GIFT_NO});
     }
     else if(value === '21'){
+      options.push({name: t('filter.searchOptions.all'), value: AllTransactionSearchCl.ALL});
       options.push({name: t('filter.searchOptions.giftCardNumber'), value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO});
     }
     else if(value === '24'){
+      options.push({name: t('filter.searchOptions.all'), value: AllTransactionSearchCl.ALL});
       options.push({name: t('filter.searchOptions.approvalNumber'), value: AllTransactionSearchCl.CMSBANK_USER_ID});
     }
     else if(value === '26'){
+      options.push({name: t('filter.searchOptions.all'), value: AllTransactionSearchCl.ALL});
       options.push({name: t('filter.searchOptions.customerId'), value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO});
     }
     else if(value === '31'){
+      options.push({name: t('filter.searchOptions.all'), value: AllTransactionSearchCl.ALL});
       options.push({name: t('filter.searchOptions.tmoneyCardNumber'), value: AllTransactionSearchCl.TMONEY_CARD_NO});
     }
     setSearchClOptionsGroup(options);
 
-    // 옵션이 있을 경우 첫 번째 옵션을 자동으로 선택
+    // 현재 searchCl이 기본값이 아니고 새 옵션 목록에 없으면 첫 번째 옵션으로 설정하고 searchValue 초기화
     if(options.length > 0 && options[0]){
-      setFilterSearchCl(options[0].value as AllTransactionSearchCl);
+      if (filterSearchCl !== '') {
+        const currentSearchClExists = options.some(opt => opt.value === filterSearchCl);
+        if (!currentSearchClExists) {
+          setFilterSearchCl(options[0].value as AllTransactionSearchCl);
+          setFilterSearchValue('');
+        }
+      }
     }
 
   };
@@ -204,6 +219,12 @@ export const AllTransactionFilter = ({
     setSearchClOptions(val);
   };
 
+  const handleSearchClChange = (value: any) => {
+    setFilterSearchCl(value);
+    // searchCl이 변경되면 searchValue 초기화
+    setFilterSearchValue('');
+  };
+
 
   useEffect(() => {
     onChangeServiceCode(serviceCode);
@@ -289,12 +310,13 @@ export const AllTransactionFilter = ({
             <FilterSelectInput
               title={t('filter.detailSearch')}
               selectValue={ filterSearchCl }
-              selectSetter={ setFilterSearchCl }
+              selectSetter={ handleSearchClChange }
               selectOptions={ searchClOptionsGroup }
               inputValue={ filterSearchValue }
               inputSetter={ setFilterSearchValue }
               handleInputFocus={ handleInputFocus}
               keyboardAwarePadding={ keyboardAwarePadding }
+              disabled={ filterSearchCl === AllTransactionSearchCl.ALL }
             ></FilterSelectInput>
 
           </div>

src/locales/en.json

@@ -109,6 +109,7 @@
         "processingResult": "Result",
         "deliveryStatus": "Delivery Status",
         "searchOptions": {
+            "all": "All",
             "cardNumber": "Card Number",
             "approvalNumber": "Approval Number",
             "buyerName": "Purchaser Name",

src/locales/ko.json

@@ -109,6 +109,7 @@
         "processingResult": "처리결과",
         "deliveryStatus": "배송상태",
         "searchOptions": {
+            "all": "전체",
           "cardNumber": "카드번호",
           "approvalNumber": "승인번호",
           "buyerName": "구매자명",

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

@@ -52,8 +52,8 @@ const defaultParams = {
   maxAmount: undefined,
   cardCode: undefined,
   bankCode: undefined,
-  searchCl: undefined,
+  searchCl: '' as AllTransactionSearchCl,
-  searchValue: undefined
+  searchValue: ''
 };
 export const AllTransactionListPage = () => {
   const { navigate } = useNavigate();
@@ -81,8 +81,8 @@ export const AllTransactionListPage = () => {
 	const [maxAmount, setMaxAmount] = useState<number | undefined>(defaultParams.maxAmount);
   const [cardCode, setCardCode] = useState<string | undefined>(defaultParams.cardCode);
   const [bankCode, setBankCode] = useState<string | undefined>(defaultParams.bankCode);
-  const [searchCl, setSearchCl] = useState<AllTransactionSearchCl | undefined>(defaultParams.searchCl);
+  const [searchCl, setSearchCl] = useState<AllTransactionSearchCl>(defaultParams.searchCl);
-  const [searchValue, setSearchValue] = useState<string | undefined>(defaultParams.searchValue);
+  const [searchValue, setSearchValue] = useState<string>(defaultParams.searchValue);
 
   const [totalCount, setTotalCount] = useState<number>(0);
   const [totalAmount, setTotalAmount] = useState<number>(0);
@@ -137,8 +137,8 @@ export const AllTransactionListPage = () => {
       goodsName: goodsName,
       cardCode: cardCode,
       bankCode: bankCode,
-      searchCl: searchCl,
+      searchCl: searchCl === '' ? undefined : searchCl,
-      searchValue: searchValue,
+      searchValue: searchCl === '' ? undefined : (searchValue || ""),
       sortType: sortType
     };
     let listParams: AllTransactionListParams = {
@@ -236,8 +236,8 @@ export const AllTransactionListPage = () => {
         goodsName: goodsName,
         cardCode: cardCode,
         bankCode: bankCode,
-        searchCl: searchCl,
+        searchCl: searchCl === '' ? undefined : searchCl,
-        searchValue: searchValue,
+        searchValue: searchCl === '' ? undefined : (searchValue || ""),
       };
       transactionDownloadExcel(params).then((rs: TransactionDownloadExcelResponse) => {
         console.log(rs);
@@ -264,6 +264,10 @@ export const AllTransactionListPage = () => {
     let val = e.target.value;
     // onchagne 에서 useState가 즉시 반영 안되므로 값을 직접 바로 넘긴다.
     setServiceCode(val);
+    
+    // serviceCode 변경 시 searchCl을 전체(ALL)로 초기화
+    setSearchCl(AllTransactionSearchCl.ALL);
+    setSearchValue('');
   };
 
   const getServiceCodeOptions = () => {

src/shared/ui/filter/select-input.tsx

@@ -9,6 +9,7 @@ export interface FilterSelectInputProps {
   inputSetter?: (value: any) => void;
   handleInputFocus?: (e: FocusEvent<HTMLInputElement>) => void;
   keyboardAwarePadding?: CSSProperties;
+  disabled?: boolean;
 };
 export const FilterSelectInput = ({
   title,
@@ -18,7 +19,8 @@ export const FilterSelectInput = ({
   inputValue,
   inputSetter,
   handleInputFocus,
-  keyboardAwarePadding
+  keyboardAwarePadding,
+  disabled = false
 }: FilterSelectInputProps) => {
   const getSelectOptions = () => {
     let rs = [];
@@ -66,9 +68,10 @@ export const FilterSelectInput = ({
             className="flex-1"
             type="text"
             style={{ height: '38px' }}
-            value={inputValue}
+            value={inputValue || ''}
             onChange={onChangeInput}
             onFocus={handleInputFocus}
+            disabled={disabled}
           />
         </div>
       </div>