124 lines
2.9 KiB
JavaScript
124 lines
2.9 KiB
JavaScript
import { useEffect } from 'react';
|
|
import { styled } from 'styled-components';
|
|
import Button from '../common/button/Button';
|
|
import DatePickerComponent from '../common/Date/DatePickerComponent';
|
|
|
|
import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper, InputGroup, DatePickerWrapper } from '../../styles/Components';
|
|
|
|
const SegmentSearchBar = ({ resultData, setResultData, handleSearch, fetchData }) => {
|
|
// 초기 날짜 세팅
|
|
const END_DATE = new Date();
|
|
|
|
// resultData에 임의 날짜 넣어주기
|
|
useEffect(() => {
|
|
setResultData({
|
|
search_dt: END_DATE,
|
|
});
|
|
}, []);
|
|
|
|
// 발송 날짜 세팅 로직
|
|
const handleSelectedDate = data => {
|
|
const sendDate = new Date(data);
|
|
const resultSendData = new Date(sendDate.getFullYear(), sendDate.getMonth(), sendDate.getDate());
|
|
|
|
setResultData({ search_dt: resultSendData });
|
|
};
|
|
|
|
// 발송 날짜 세팅 로직
|
|
|
|
const handleReset = e => {
|
|
e.preventDefault();
|
|
setResultData({ search_dt: END_DATE });
|
|
|
|
fetchData(END_DATE);
|
|
};
|
|
|
|
// console.log(resultData);
|
|
|
|
return (
|
|
<>
|
|
<FormWrapper>
|
|
<SearchbarStyle2>
|
|
<SearchRow>
|
|
<SearchItem>
|
|
<InputLabel>집계 기준일</InputLabel>
|
|
<InputGroup>
|
|
<DatePickerWrapper>
|
|
<DatePickerComponent name="집계 기준일" selectedDate={resultData.search_dt} handleSelectedDate={data => handleSelectedDate(data)} maxDate={new Date()} />
|
|
</DatePickerWrapper>
|
|
</InputGroup>
|
|
</SearchItem>
|
|
{/* 기획 보류 */}
|
|
{/* <SearchItem>
|
|
<InputLabel>조회 국가</InputLabel>
|
|
<SelectInput>
|
|
<option value="">ALL</option>
|
|
<option value="">KR</option>
|
|
<option value="">EN</option>
|
|
<option value="">JP</option>
|
|
<option value="">TH</option>
|
|
</SelectInput>
|
|
</SearchItem> */}
|
|
<BtnWrapper $gap="8px">
|
|
<Button theme="reset" handleClick={handleReset} />
|
|
<Button
|
|
theme="search"
|
|
text="검색"
|
|
handleClick={e => {
|
|
e.preventDefault();
|
|
handleSearch(resultData.search_dt);
|
|
}}
|
|
/>
|
|
</BtnWrapper>
|
|
</SearchRow>
|
|
<SearchNoti>※ 집계 기준일 기준 -100일까지의 Segment 유저 분포를 집계합니다.</SearchNoti>
|
|
</SearchbarStyle2>
|
|
</FormWrapper>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SegmentSearchBar;
|
|
|
|
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: 10px;
|
|
`;
|
|
|
|
const SearchRow = styled.div`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px 0;
|
|
`;
|
|
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;
|
|
}
|
|
`;
|
|
const SearchNoti = styled.div`
|
|
font-size: 12px;
|
|
color: #999;
|
|
letter-spacing: 0.5px;
|
|
`;
|