123 lines
3.1 KiB
JavaScript
123 lines
3.1 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { styled } from 'styled-components';
|
|
import Button from '../common/button/Button';
|
|
|
|
import 'react-datepicker/dist/react-datepicker.css';
|
|
import DatePickerComponent from '../common/Date/DatePickerComponent';
|
|
|
|
import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper, InputGroup, DatePickerWrapper } from '../../styles/Components';
|
|
|
|
const PlayTimeSearchBar = ({ resultData, setResultData, handleSearch, fetchData }) => {
|
|
// 초기 날짜 세팅
|
|
let d = new Date();
|
|
const START_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(0, 0, 0, 0));
|
|
const END_DATE = new Date();
|
|
|
|
// resultData에 임의 날짜 넣어주기
|
|
useEffect(() => {
|
|
setResultData({
|
|
send_dt: START_DATE,
|
|
end_dt: END_DATE,
|
|
});
|
|
}, []);
|
|
|
|
const searchType = [
|
|
{ name: '전체', value: 'ALL' },
|
|
{ name: '한국어', value: 'KR' },
|
|
{ name: '영어', value: 'EN' },
|
|
{ name: '일본어', value: 'JP' },
|
|
{ name: '태국어', value: 'TH' },
|
|
];
|
|
|
|
// 발송 날짜 세팅 로직
|
|
const handleSelectedDate = data => {
|
|
const sendDate = new Date(data);
|
|
const resultSendData = new Date(sendDate.getFullYear(), sendDate.getMonth(), sendDate.getDate());
|
|
|
|
setResultData({ ...resultData, send_dt: resultSendData });
|
|
};
|
|
|
|
// 발송 날짜 세팅 로직
|
|
const handleEndDate = data => {
|
|
const endDate = new Date(data);
|
|
const resultSendData = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
|
|
|
|
setResultData({ ...resultData, end_dt: resultSendData });
|
|
};
|
|
|
|
const handleReset = e => {
|
|
e.preventDefault();
|
|
setResultData({ send_dt: START_DATE, end_dt: END_DATE });
|
|
|
|
fetchData(START_DATE, END_DATE);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<FormWrapper>
|
|
<SearchbarStyle>
|
|
<SearchItem>
|
|
<InputLabel>집계 기준일</InputLabel>
|
|
<InputGroup>
|
|
<DatePickerWrapper>
|
|
<DatePickerComponent
|
|
name="시작 일자"
|
|
selectedDate={resultData.send_dt}
|
|
handleSelectedDate={data => handleSelectedDate(data)}
|
|
maxDate={new Date()} />
|
|
<span>~</span>
|
|
<DatePickerComponent
|
|
name="종료 일자"
|
|
selectedDate={resultData.end_dt}
|
|
handleSelectedDate={data => handleEndDate(data)}
|
|
pastDate = {resultData.send_dt}
|
|
maxDate={new Date()} />
|
|
</DatePickerWrapper>
|
|
</InputGroup>
|
|
</SearchItem>
|
|
<BtnWrapper $gap="8px">
|
|
<Button theme="reset" handleClick={handleReset} />
|
|
<Button
|
|
theme="search"
|
|
text="검색"
|
|
handleClick={e => {
|
|
e.preventDefault();
|
|
handleSearch(resultData.send_dt, resultData.end_dt);
|
|
}}
|
|
/>
|
|
</BtnWrapper>
|
|
</SearchbarStyle>
|
|
</FormWrapper>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PlayTimeSearchBar;
|
|
|
|
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 SearchItem = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-right: 50px;
|
|
|
|
${TextInput}, ${SelectInput} {
|
|
height: 35px;
|
|
}
|
|
${TextInput} {
|
|
padding: 0 10px;
|
|
max-width: 400px;
|
|
}
|
|
`;
|