데이터 초기화 화면 추가

src/components/ServiceManage/index.js

@@ -16,6 +16,7 @@ import LandAuctionSearchBar from './searchBar/LandAuctionSearchBar'
 import MailListSearchBar from './searchBar/MailListSearchBar';
 import LandInfoSearchBar from './searchBar/LandInfoSearchBar';
 import BusinessLogSearchBar from './searchBar/BusinessLogSearchBar';
+import DataInitSearchBar from './searchBar/DataInitSearchBar';
 //etc
 import ReportListSummary from './ReportListSummary';
 import WhiteListSearchBar from './WhiteListRegistBar';
@@ -27,6 +28,7 @@ export {
 	MailListSearchBar,
 	LandInfoSearchBar,
 	BusinessLogSearchBar,
+	DataInitSearchBar,
 	ReportListAnswerModal,
 	ReportListDetailModal,
 	ReportListSearchBar,

src/components/ServiceManage/searchBar/DataInitSearchBar.js

@@ -0,0 +1,132 @@
+import { BtnWrapper, InputLabel, TextInput } from '../../../styles/Components';
+import Button from '../../common/button/Button';
+import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { InitHistoryList } from '../../../apis/Data';
+
+export const useDataInitSearch = (token, setAlertMsg) => {
+	const { t } = useTranslation();
+
+	const [searchParams, setSearchParams] = useState({
+		tran_id: '',
+		start_dt: (() => {
+			return new Date();
+		})(),
+		end_dt: (() => {
+			return new Date();
+		})(),
+	});
+
+	const [loading, setLoading] = useState(false);
+	const [data, setData] = useState(null);
+
+	useEffect(() => {
+		const initialLoad = async () => {
+			await fetchData(searchParams);
+		};
+
+		initialLoad();
+	}, [token]);
+
+	const fetchData = useCallback(async (params) => {
+		if (!token) return;
+
+		try {
+			setLoading(true);
+			const result = await InitHistoryList(
+				token,
+				params
+			);
+			if(result.result === "ERROR_LOG_MEMORY_LIMIT"){
+				setAlertMsg(t('LOG_MEMORY_LIMIT_WARNING'))
+			}else if(result.result === "ERROR_MONGODB_QUERY"){
+				setAlertMsg(t('LOG_MONGGDB_QUERY_WARNING'))
+			}
+			setData(result.data);
+			return result.data;
+		} catch (error) {
+			console.error('Error fetching auction data:', error);
+			throw error;
+		} finally {
+			setLoading(false);
+		}
+	}, [token]);
+
+	const updateSearchParams = useCallback((newParams) => {
+		setSearchParams(prev => ({
+			...prev,
+			...newParams
+		}));
+	}, []);
+
+	const handleSearch = useCallback(async (newParams = {}) => {
+		const updatedParams = {
+			...searchParams,
+			...newParams,
+		};
+		updateSearchParams(updatedParams);
+		return await fetchData(updatedParams);
+	}, [searchParams, fetchData]);
+
+	const handleReset = useCallback(async () => {
+		const now = new Date();
+		const resetParams = {
+			tran_id: '',
+			start_dt: now,
+			end_dt: now,
+		};
+		setSearchParams(resetParams);
+		return await fetchData(resetParams);
+	}, [fetchData]);
+
+	return {
+		searchParams,
+		loading,
+		data,
+		handleSearch,
+		handleReset,
+		updateSearchParams
+	};
+};
+
+const DataInitSearchBar = ({ searchParams, onSearch, onReset }) => {
+	const handleSubmit = event => {
+		event.preventDefault();
+
+		onSearch(searchParams);
+	};
+
+	const searchList = [
+		<>
+			<InputLabel>트랜잭션 ID</InputLabel>
+			<TextInput
+				type="text"
+				placeholder='트랜잭션 ID 입력'
+				value={searchParams.tran_id}
+				width="300px"
+				onChange={e => onSearch({ tran_id: e.target.value })}
+			/>
+		</>,
+		<>
+			<InputLabel>일자</InputLabel>
+			<SearchPeriod
+				startDate={searchParams.start_dt}
+				handleStartDate={date => onSearch({ start_dt: date }, false)}
+				endDate={searchParams.end_dt}
+				handleEndDate={date => onSearch({ end_dt: date }, false)}
+			/>
+		</>,
+		<></>,<></>,<></>,
+		<>
+			<BtnWrapper $gap="8px">
+				<Button theme="reset" handleClick={onReset} type="button" />
+				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
+			</BtnWrapper>
+		</>,
+	];
+
+	return <SearchBarLayout firstColumnData={searchList} direction={'column'} />;
+};
+
+export default DataInitSearchBar;