operationSystem-front/src/components/DataManage/CreditLogSearchBar.js

import { styled } from 'styled-components';
import { useState } from 'react';

import Button from '../../components/common/button/Button';

import DatePicker, { registerLocale } from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { getMonth, getYear } from 'date-fns';
import range from 'lodash/range';

import { TextInput, SelectInput, DatePickerWrapper, InputLabel, BtnWrapper } from '../../styles/Components';

const GoodsLogSearchBar = () => {
	const [startDate, setStartDate] = useState(new Date());
	const [endDate, setEndDate] = useState(new Date());
	const [selectData, setSelectData] = useState('default');
	const years = range(1990, getYear(new Date()) + 1, 1);
	const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

	const handleChange = e => {
		setSelectData(e.target.value);
	};

	return (
		<>
			<SearchbarStyle2>
				<SearchRow>
					<SearchItem>
						<InputLabel>조회 기간</InputLabel>
						<DatePickerWrapper>
							<InputGroup>
								<DatePicker
									selected={startDate}
									onChange={date => setStartDate(date)}
									className="datepicker"
									placeholderText="검색기간 선택"
									calendarClassName="calendar"
									dateFormat="yyyy - MM - dd"
									locale="ko"
									renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
										<div className="calendar-top">
											<button
												className="btn-prev"
												onClick={e => {
													e.preventDefault();
													decreaseMonth();
												}}
												disabled={prevMonthButtonDisabled}></button>
											<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
												{years.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											.
											<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
												{months.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											<button
												className="btn-next"
												onClick={e => {
													e.preventDefault();
													increaseMonth();
												}}
												disabled={nextMonthButtonDisabled}></button>
										</div>
									)}
								/>
								<SelectInput>
									<option value="">00</option>
									<option value="">01</option>
								</SelectInput>
								<SelectInput>
									<option value="">00</option>
									<option value="">01</option>
								</SelectInput>
							</InputGroup>
							<span>~</span>
							<InputGroup>
								<DatePicker
									selected={endDate}
									onChange={date => setEndDate(date)}
									className="datepicker"
									placeholderText="검색기간 선택"
									calendarClassName="calendar"
									dateFormat="yyyy - MM - dd"
									minDate = {startDate}
									locale="ko"
									renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
										<div className="calendar-top">
											<button
												className="btn-prev"
												onClick={e => {
													e.preventDefault();
													decreaseMonth();
												}}
												disabled={prevMonthButtonDisabled}></button>
											<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
												{years.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											.
											<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
												{months.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											<button
												className="btn-next"
												onClick={e => {
													e.preventDefault();
													increaseMonth();
												}}
												disabled={nextMonthButtonDisabled}></button>
										</div>
									)}
								/>
								<SelectInput>
									<option value="">00</option>
									<option value="">01</option>
								</SelectInput>
								<SelectInput>
									<option value="">00</option>
									<option value="">01</option>
								</SelectInput>
							</InputGroup>
						</DatePickerWrapper>
					</SearchItem>
				</SearchRow>
				<SearchRow>
					<SearchItem>
						<InputLabel>조회 대상</InputLabel>
						<TextInput type="text" placeholder="조회 대상 유저의 GUID를 입력하세요." width="600px" />
					</SearchItem>
					<BtnWrapper $gap="8px">
						<Button theme="reset" />
						<Button theme="gray" text="검색" />
					</BtnWrapper>
				</SearchRow>
			</SearchbarStyle2>
		</>
	);
};

export default GoodsLogSearchBar;

const SearchbarStyle = styled.div`
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 0;
	font-size: 14px;
	padding: 20px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	margin-bottom: 40px;
`;
const SearchbarStyle2 = styled(SearchbarStyle)`
	flex-flow: column;
	gap: 20px;
`;

const SearchRow = styled.div`
	display: flex;
	flex-wrap: wrap;
	gap: 20px 0;
`;

const InputGroup = styled.div`
	display: flex;
	align-items: center;
	gap: 5px;
`;

const SearchItem = styled.div`
	display: flex;
	align-items: center;
	gap: 20px;
	margin-right: 50px;

	${TextInput}, ${SelectInput} {
		height: 35px;
	}
	${TextInput} {
		padding: 0 10px;
		max-width: 400px;
	}
`;