style: 고급 검색 ui 개선

@@ -8,7 +8,7 @@ const Background = styled.div``;
 
 
 const ModalWrapper = styled.div`
 const ModalWrapper = styled.div`
   width: 400px;
   width: 400px;
-  height: 300px;
+  height: 194px;
 `;
 `;
 
 
 const ModalContent = styled.div`
 const ModalContent = styled.div`
@@ -23,13 +23,13 @@ const ModalContent = styled.div`
 const SearchWrap = styled.div`
 const SearchWrap = styled.div`
   position: absolute;
   position: absolute;
   top: 80%;
   top: 80%;
-  left: 20%;
+  right: 20%;
 `;
 `;
 
 
 const CloseWrap = styled.div`
 const CloseWrap = styled.div`
   position: absolute;
   position: absolute;
   top: 80%;
   top: 80%;
-  right: 20%;
+  left: 20%;
 `;
 `;
 
 
 const StandardWrap = styled.div`
 const StandardWrap = styled.div`
@@ -51,7 +51,6 @@ const TextWrap = styled.div`
   width: 360px;
   width: 360px;
   top: ${props => props.top};
   top: ${props => props.top};
   right: ${props => props.right};
   right: ${props => props.right};
-  border-bottom: 2px solid #dee2e6;
   padding-left: 20px;
   padding-left: 20px;
   padding-bottom: ${props => props.bottom};
   padding-bottom: ${props => props.bottom};
 `;
 `;
@@ -59,8 +58,7 @@ const TextWrap = styled.div`
 const Modal = ({ showModal, setShowModal }) => {
 const Modal = ({ showModal, setShowModal }) => {
   const [query, setQuery] = useState('');
   const [query, setQuery] = useState('');
   const [keywordQuery, setKeywordQuery] = useState('');
   const [keywordQuery, setKeywordQuery] = useState('');
-  const [writerQuery, setWriterQuery] = useState('');
-  const [dateQuery, setDateQuery] = useState('');
+  const [writer, setWriter] = useState('');
   const history = useHistory();
   const history = useHistory();
   const modalRef = useRef();
   const modalRef = useRef();
   const closeModal = e => {
   const closeModal = e => {
@@ -76,7 +74,7 @@ const Modal = ({ showModal, setShowModal }) => {
           <Card shadow="lg">
           <Card shadow="lg">
             <ModalWrapper>
             <ModalWrapper>
               <ModalContent>
               <ModalContent>
-                <TextWrap top="6%" right="10%" bottom="4%" height="40px">
+                <TextWrap top="8%" right="10%" bottom="4%" height="40px">
                   기본검색
                   기본검색
                 </TextWrap>
                 </TextWrap>
                 <StandardWrap>
                 <StandardWrap>
@@ -103,7 +101,7 @@ const Modal = ({ showModal, setShowModal }) => {
                     }}
                     }}
                   />
                   />
                 </StandardWrap>
                 </StandardWrap>
-                <TextWrap top="24%" right="10%" bottom="31%">
+                <TextWrap top="34%" right="10%" bottom="31%">
                   고급검색
                   고급검색
                 </TextWrap>
                 </TextWrap>
                 <AdvancedWrap>
                 <AdvancedWrap>
@@ -124,28 +122,29 @@ const Modal = ({ showModal, setShowModal }) => {
                     }}
                     }}
                     placeholder="작성자"
                     placeholder="작성자"
                     type="text"
                     type="text"
-                    value={decodeURIComponent(writerQuery)}
-                    onChange={e => setWriterQuery(e.target.value)}
-                  />
-                  <TextInput
-                    inputStyle={{
-                      marginBottom: 18,
-                      fontSize: 15,
-                    }}
-                    placeholder="생성 날짜"
-                    type="text"
-                    value={decodeURIComponent(dateQuery)}
-                    onChange={e => setDateQuery(e.target.value)}
+                    value={decodeURIComponent(writer)}
+                    onChange={e => setWriter(e.target.value)}
                   />
                   />
                 </AdvancedWrap>
                 </AdvancedWrap>
               </ModalContent>
               </ModalContent>
               <CloseWrap onClick={() => setShowModal(prev => !prev)}>
               <CloseWrap onClick={() => setShowModal(prev => !prev)}>
-                <Button width="100px" color="blue">
+                <Button width="100px" color="gray">
                   닫기
                   닫기
                 </Button>
                 </Button>
               </CloseWrap>
               </CloseWrap>
-              <SearchWrap>
-                <Button width="100px" color="gray">
+              <SearchWrap
+                onClick={() => {
+                  const searchQuery = {};
+                  if (query !== '') searchQuery.query = query;
+                  if (keywordQuery !== '') searchQuery.keyword = keywordQuery;
+                  if (writer !== '') searchQuery.writer = writer;
+                  const params = new URLSearchParams(searchQuery);
+                  history.push(
+                    `search?${decodeURIComponent(params.toString())}`
+                  );
+                }}
+              >
+                <Button width="100px" color="blue">
                   검색
                   검색
                 </Button>
                 </Button>
               </SearchWrap>
               </SearchWrap>

@@ -18,10 +18,16 @@ const Buttons = ({
   width,
   width,
   fontsize,
   fontsize,
   icon = '',
   icon = '',
+  onClick,
 }) => {
 }) => {
   return (
   return (
     <ButtonBlock float={float} width={width} fontsize={fontsize}>
     <ButtonBlock float={float} width={width} fontsize={fontsize}>
-      <Button size={size} color={color || 'blue'} rightIcon={icon}>
+      <Button
+        onClick={onClick}
+        size={size}
+        color={color || 'blue'}
+        rightIcon={icon}
+      >
         {children}
         {children}
       </Button>
       </Button>
     </ButtonBlock>
     </ButtonBlock>

@@ -43,8 +43,10 @@ const MyInput = ({
 }) => {
 }) => {
   const [query, setQuery] = useState('');
   const [query, setQuery] = useState('');
   const history = useHistory();
   const history = useHistory();
-  const search = useLocation();
-  const name = decodeURIComponent(search.search.substring(7));
+  const { search } = useLocation();
+  const name = decodeURIComponent(
+    new URLSearchParams(search).get('query') || ''
+  );
   const dispatch = useDispatch();
   const dispatch = useDispatch();
 
 
   useEffect(() => {
   useEffect(() => {

@@ -15,7 +15,6 @@ const ImageWrapper = styled.div`
 `;
 `;
 const Thumbnails = ({ srcs }) => {
 const Thumbnails = ({ srcs }) => {
   const [lists, setLists] = useState([]);
   const [lists, setLists] = useState([]);
-  console.log(srcs);
   const placeholder = () => {
   const placeholder = () => {
     if (srcs.length < 4) {
     if (srcs.length < 4) {
       const list = [];
       const list = [];

@@ -19,4 +19,12 @@ export const esApi = {
 
 
     return res.data;
     return res.data;
   },
   },
+  // searchByFilter: async (filters, searchWord = '') => {
+  //   // const res = await esInstance.post(
+  //   //   `/api/as/v1/engines/${process.env.REACT_APP_ENGINE_NAME}/search`,
+  //   //   {
+  //   //     query: searchWord,
+  //   //   }
+  //   // );
+  // },
 };
 };