조회조건 레이아웃 수정

src/components/ServiceManage/index.js

@@ -17,6 +17,10 @@ import MailListSearchBar from './searchBar/MailListSearchBar';
 import LandInfoSearchBar from './searchBar/LandInfoSearchBar';
 import BusinessLogSearchBar from './searchBar/BusinessLogSearchBar';
 import DataInitSearchBar from './searchBar/DataInitSearchBar';
+import LogViewSearchBar from './searchBar/LogViewSearchBar';
+import AdminViewSearchBar from './searchBar/AdminViewSearchBar';
+import CaliumRequestSearchBar from './searchBar/CaliumRequestSearchBar';
+
 //etc
 import ReportListSummary from './ReportListSummary';
 import WhiteListSearchBar from './WhiteListRegistBar';
@@ -29,6 +33,9 @@ export {
 	LandInfoSearchBar,
 	BusinessLogSearchBar,
 	DataInitSearchBar,
+	LogViewSearchBar,
+	AdminViewSearchBar,
+	CaliumRequestSearchBar,
 	ReportListAnswerModal,
 	ReportListDetailModal,
 	ReportListSearchBar,

src/components/ServiceManage/searchBar/AdminViewSearchBar.js

@@ -1,9 +1,9 @@
 import { styled } from 'styled-components';
 
-import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../styles/Components';
-import Button from '../common/button/Button';
-import CheckBox from '../common/input/CheckBox';
-import { SearchBarLayout } from '../common/SearchBar';
+import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../../styles/Components';
+import Button from '../../common/button/Button';
+import CheckBox from '../../common/input/CheckBox';
+import { SearchBarLayout } from '../../common/SearchBar';
 import { useState } from 'react';
 
 const AdminViewSearchBar = ({ handleSearch, groupList, setResultData, setCurrentPage }) => {

src/components/ServiceManage/searchBar/BattleEventSearchBar.js

@@ -230,15 +230,8 @@ const BattleEventSearchBar = ({ searchParams, onSearch, onReset, configData, rew
 				handleEndDate={date => onSearch({ endDate: 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} secondColumnData={optionList} direction={'column'} />;
+	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={onReset} handleSubmit={handleSubmit} />;
 };
 
 export default BattleEventSearchBar;

src/components/ServiceManage/searchBar/BusinessLogSearchBar.js

@@ -197,15 +197,8 @@ const BusinessLogSearchBar = ({ searchParams, onSearch, onReset }) => {
 				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} secondColumnData={optionList} direction={'column'} />;
+	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={onReset} handleSubmit={handleSubmit} />;
 };
 
 export default BusinessLogSearchBar;

src/components/ServiceManage/searchBar/CaliumRequestSearchBar.js

@@ -72,15 +72,9 @@ const CaliumRequestSearchBar = ({ handleSearch, setResultData }) => {
 				))}
 			</SelectInput>
 		</>,
-		<>
-			<BtnWrapper $gap="8px">
-				<Button theme="reset" handleClick={handleReset} type="button" />
-				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
-			</BtnWrapper>
-		</>,
 	];
 
-	return <SearchBarLayout firstColumnData={searchList} direction={'column'} />;
+	return <SearchBarLayout firstColumnData={searchList} direction={'column'} onReset={handleReset} handleSubmit={handleSubmit} />;
 };
 
 export default CaliumRequestSearchBar;

src/components/ServiceManage/searchBar/DataInitSearchBar.js

@@ -117,16 +117,9 @@ const DataInitSearchBar = ({ searchParams, onSearch, onReset }) => {
 				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'} />;
+	return <SearchBarLayout firstColumnData={searchList} direction={'column'} onReset={onReset} handleSubmit={handleSubmit} />;
 };
 
 export default DataInitSearchBar;

src/components/ServiceManage/searchBar/EventListSearchBar.js

@@ -89,15 +89,8 @@ const EventListSearchBar = ({ handleSearch, setResultData }) => {
 				))}
 			</SelectInput>
 		</>,
-		<></>,<></>,<></>,<></>,<></>,<></>,<></>,<></>,<></>,<></>,<></>,<></>,<></>,
-		<>
-			<BtnWrapper $gap="8px">
-				<Button theme="reset" handleClick={handleReset} type="button" />
-				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
-			</BtnWrapper>
-		</>,
 	];
-	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} />;
+	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={handleReset} handleSubmit={handleSubmit} />;
 };
 
 export default EventListSearchBar;

src/components/ServiceManage/searchBar/ItemsSearchBar.js

@@ -114,14 +114,8 @@ const ItemsSearchBar = ({ handleSearch, setResultData }) => {
 				maxDate={new Date()}
 			/>
 		</>,
-		<>
-			<BtnWrapper $gap="8px">
-				<Button theme="reset" handleClick={handleReset} />
-				<Button theme="search" text="검색" type="submit" handleClick={handleSubmit} />
-			</BtnWrapper>
-		</>,
 	];
-	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} />;
+	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={handleReset} handleSubmit={handleSubmit} />;
 };
 
 export default ItemsSearchBar;

src/components/ServiceManage/searchBar/LandAuctionSearchBar.js

@@ -191,15 +191,8 @@ const LandAuctionSearchBar = ({ searchParams, onSearch, onReset }) => {
 				handleEndDate={date => onSearch({ auctionEndDate: 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} secondColumnData={optionList} direction={'column'} />;
+	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={onReset} handleSubmit={handleSubmit} />;
 };
 
 export default LandAuctionSearchBar;

src/components/ServiceManage/searchBar/LandInfoSearchBar.js

@@ -187,15 +187,8 @@ const LandInfoSearchBar = ({ searchParams, onSearch, onReset }) => {
 				handleEndDate={date => onSearch({ endDate: 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} secondColumnData={optionList} direction={'column'} />;
+	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={onReset} handleSubmit={handleSubmit} />;
 };
 
 export default LandInfoSearchBar;

src/components/ServiceManage/searchBar/LogViewSearchBar.js

@@ -1,9 +1,9 @@
 import { styled } from 'styled-components';
 import { useState } from 'react';
 
-import { TextInput, InputLabel, SelectInput, BtnWrapper } from '../../styles/Components';
-import Button from '../common/button/Button';
-import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
+import { TextInput, InputLabel, SelectInput, BtnWrapper } from '../../../styles/Components';
+import Button from '../../common/button/Button';
+import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
 
 const LogViewSearchBar = ({ handleSearch, resultData }) => {
 	const [searchData, setSearchData] = useState({

src/components/ServiceManage/searchBar/MailListSearchBar.js

@@ -130,14 +130,8 @@ const MailListSearchBar = ({ handleSearch, setResultData }) => {
 				))}
 			</SelectInput>
 		</>,
-		<>
-			<BtnWrapper $gap="8px">
-				<Button theme="reset" handleClick={handleReset} type="button" />
-				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
-			</BtnWrapper>
-		</>,
 	];
-	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} />;
+	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={handleReset} handleSubmit={handleSubmit} />;
 };
 
 export default MailListSearchBar;

src/components/ServiceManage/searchBar/ReportListSearchBar.js

@@ -123,14 +123,8 @@ const ReportListSearchBar = ({ handleSearch, setResultData }) => {
 				<TextInput placeholder="입력" onChange={e => setSearchData({ ...searchData, searchKey: e.target.value })} />
 			</InputGroup>
 		</>,
-		<>
-			<BtnWrapper $gap="8px">
-				<Button theme="reset" handleClick={handleReset} type="button" />
-				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
-			</BtnWrapper>
-		</>,
 	];
-	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} />;
+	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={handleReset} handleSubmit={handleSubmit} />;
 };
 
 export default ReportListSearchBar;

src/components/ServiceManage/searchBar/UserBlockSearchBar.js

@@ -104,14 +104,8 @@ const UserBlockSearchBar = ({ handleSearch, setResultData }) => {
 				))}
 			</SelectInput>
 		</>,
-		<>
-			<BtnWrapper $gap="8px">
-				<Button theme="reset" handleClick={handleReset} />
-				<Button theme="search" text="검색" type="submit" handleClick={handleSubmit} />
-			</BtnWrapper>
-		</>,
 	];
-	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} />;
+	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={handleReset} handleSubmit={handleSubmit} />;
 };
 
 export default UserBlockSearchBar;

src/components/UserManage/CaliumRequestSearchBar.js

@@ -1,86 +0,0 @@
-import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../styles/Components';
-import Button from '../common/button/Button';
-import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
-import { useState } from 'react';
-import { caliumStatus } from '../../assets/data/options';
-
-const CaliumRequestSearchBar = ({ handleSearch, setResultData }) => {
-	const [searchData, setSearchData] = useState({
-		content: '',
-		status: 'ALL',
-		startDate: '',
-		endDate: '',
-	});
-
-	const handleSubmit = event => {
-		event.preventDefault();
-
-		handleSearch(
-			searchData.content,
-			searchData.status ? searchData.status : 'ALL',
-			searchData.startDate ? searchData.startDate : '',
-			searchData.endDate ? searchData.endDate : new Date(),
-			(searchData.startDate && searchData.endDate === '') && setSearchData({ startDate : searchData.startDate ,endDate : new Date()}),
-		);
-
-		setResultData(searchData);
-	};
-
-	const handleReset = () => {
-		setSearchData({
-			content: '',
-			status: 'ALL',
-			startDate: '',
-			endDate: '',
-			order: 'DESC',
-		});
-
-		handleSearch('', 'ALL', '', '');
-		setResultData('', 'ALL', '', '');
-
-		window.location.reload();
-	};
-
-	const searchList = [
-		<>
-			<InputLabel>등록 일자</InputLabel>
-			<SearchPeriod
-				startDate={searchData.startDate}
-				handleStartDate={data => {
-					setSearchData({ ...searchData, startDate: data });
-				}}
-				endDate={searchData.endDate}
-				handleEndDate={data => setSearchData({ ...searchData, endDate: data })}
-			/>
-		</>,
-		<>
-			<InputLabel>요청 내용</InputLabel>
-			<TextInput
-				type="text"
-				placeholder="요청 내용"
-				value={searchData.content}
-				onChange={e => setSearchData({ ...searchData, content: e.target.value })}
-			/>
-		</>,
-		<>
-			<InputLabel>요청 상태</InputLabel>
-			<SelectInput value={searchData.status} onChange={e => setSearchData({ ...searchData, status: e.target.value })}>
-				{caliumStatus.map((data, index) => (
-					<option key={index} value={data.value}>
-						{data.name}
-					</option>
-				))}
-			</SelectInput>
-		</>,
-		<>
-			<BtnWrapper $gap="8px">
-				<Button theme="reset" handleClick={handleReset} type="button" />
-				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
-			</BtnWrapper>
-		</>,
-	];
-
-	return <SearchBarLayout firstColumnData={searchList} direction={'column'} />;
-};
-
-export default CaliumRequestSearchBar;

src/components/UserManage/index.js

@@ -1,17 +1,11 @@
-import CaliumRequestSearchBar from './CaliumRequestSearchBar';
 import CaliumRequestRegistModal from './CaliumRequestRegistModal'
-import AdminViewSearchBar from './AdminViewSearchBar'
 import AuthRegistBar from './AuthRegistBar'
 import LogViewModal from './LogViewModal'
-import LogViewSearchBar from './LogViewSearchBar'
 import AuthGroupRows from './AuthGroupRows'
 
 export {
-	CaliumRequestSearchBar,
 	CaliumRequestRegistModal,
-	AdminViewSearchBar,
 	AuthRegistBar,
-	LogViewSearchBar,
 	LogViewModal,
 	AuthGroupRows
 }

src/components/common/SearchBar/SearchBarLayout.js

@@ -1,7 +1,8 @@
 import { styled } from 'styled-components';
-import { TextInput, SelectInput, SearchBarAlert } from '../../../styles/Components';
+import { TextInput, SelectInput, SearchBarAlert, BtnWrapper } from '../../../styles/Components';
+import Button from '../button/Button';
 
-const SearchBarLayout = ({ firstColumnData, secondColumnData, direction }) => {
+const SearchBarLayout = ({ firstColumnData, secondColumnData, direction, onReset, handleSubmit }) => {
 	return (
 		<SearchbarStyle direction={direction}>
 			<SearchRow>
@@ -16,6 +17,12 @@ const SearchBarLayout = ({ firstColumnData, secondColumnData, direction }) => {
 					))}
 				</SearchRow>
 			)}
+			<SearchRow>
+				<BtnWrapper $gap="8px">
+					<Button theme="search" text="검색" handleClick={handleSubmit} type="button" />
+					<Button theme="reset" handleClick={onReset} type="button" />
+				</BtnWrapper>
+			</SearchRow>
 		</SearchbarStyle>
 	);
 };
@@ -23,16 +30,16 @@ const SearchBarLayout = ({ firstColumnData, secondColumnData, direction }) => {
 export default SearchBarLayout;
 
 const SearchbarStyle = styled.div`
-	width: 100%;
-	display: flex;
-	flex-wrap: wrap;
-	font-size: 14px;
-	padding: 20px;
-	border-top: 1px solid #000;
-	border-bottom: 1px solid #000;
-	margin: 0 0 40px;
-	flex-flow: ${props => props.direction};
-	gap: ${props => (props.direction === 'column' ? '20px' : '20px 0')};
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 14px;
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    margin: 0 0 40px;
+    flex-flow: ${props => props.direction};
+    gap: ${props => (props.direction === 'column' ? '20px' : '20px 0')};
 `;
 
 const SearchItem = styled.div`
@@ -54,4 +61,10 @@ const SearchRow = styled.div`
 	display: flex;
 	flex-wrap: wrap;
 	gap: 20px 0;
+
+    &:last-child {
+        border-top: 1px solid #e0e0e0;
+        padding-top: 15px;
+        margin-top: 15px;
+    }
 `;

src/pages/UserManage/AdminView.js

@@ -7,7 +7,7 @@ import Pagination from '../../components/common/Pagination/Pagination';
 import Modal from '../../components/common/modal/Modal';
 
 import { AdminViewList, AdminViewGroupList, AdminLoginApprove, AdminDeleteUser, AdminChangeGroup, AdminChangePw } from '../../apis/Admin';
-import AdminViewSearchBar from '../../components/UserManage/AdminViewSearchBar';
+import {AdminViewSearchBar} from '../../components/ServiceManage';
 import { useNavigate } from 'react-router-dom';
 
 import { authList } from '../../store/authList';

src/pages/UserManage/CaliumRequest.js

@@ -19,10 +19,11 @@ import {
 } from '../../styles/ModuleComponents';
 import {Button, ExcelDownButton, Pagination, DynamicModal, ViewTableInfo, Loading} from '../../components/common';
 import { convertKTC, truncateText } from '../../utils';
-import { CaliumRequestRegistModal, CaliumRequestSearchBar } from '../../components/UserManage';
+import { CaliumRequestRegistModal } from '../../components/UserManage';
 import { CaliumCharge, CaliumRequestView } from '../../apis';
 import { withAuth } from '../../hooks/hook';
 import { convertEndDateToISO, convertStartDateToISO } from '../../utils/date';
+import {CaliumRequestSearchBar} from '../../components/ServiceManage';
 
 const CaliumRequest = () => {
 	const token = sessionStorage.getItem('token');

src/pages/UserManage/LogView.js

@@ -1,6 +1,6 @@
 import { Fragment, useState, useEffect } from 'react';
 
-import LogViewSearchBar from '../../components/UserManage/LogViewSearchBar';
+import {LogViewSearchBar} from '../../components/ServiceManage';
 import { Title, FormWrapper, SelectInput, TableInfo, ListCount, ListOption, TableStyle, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';
 import Button from '../../components/common/button/Button';
 import Pagination from '../../components/common/Pagination/Pagination';