feat: search logic 추가

@@ -134,9 +134,7 @@ const Header = () => {
               />
               />
             </DropDownWrap>
             </DropDownWrap>
           </DropDownContainer>
           </DropDownContainer>
-          <InputBlock color="blue" fontsize="20px" width="850px" display="">
-            <input />
-          </InputBlock>
+          <InputBlock color="blue" fontsize="20px" width="850px" display="" />
         </SearchContainer>
         </SearchContainer>
         <MenuContainer>
         <MenuContainer>
           <ul>
           <ul>

@@ -2,8 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { TextInput } from '@mantine/core';
 import { TextInput } from '@mantine/core';
 import styled from 'styled-components';
 import styled from 'styled-components';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useHistory, useLocation } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import SearchBox from './SearchBox';
 import SearchBox from './SearchBox';
 import { inputColorMap } from '../../lib/styles/palette';
 import { inputColorMap } from '../../lib/styles/palette';
+import { esApi } from '../../lib/api/elasticsearch';
+import { setParsedDocuments } from '../../features/parsedDocumentsSlice';
 
 
 const InputBlock = styled.div`
 const InputBlock = styled.div`
   width: ${props => props.width};
   width: ${props => props.width};
@@ -40,10 +43,16 @@ const MyInput = ({
   const history = useHistory();
   const history = useHistory();
   const search = useLocation();
   const search = useLocation();
   const name = search.search.substring(7);
   const name = search.search.substring(7);
+  const dispatch = useDispatch();
+
   useEffect(() => {
   useEffect(() => {
+    const setSearchDatas = async () => {
+      const { results } = await esApi.search(name);
+      dispatch(setParsedDocuments(results));
+    };
     setQuery(name);
     setQuery(name);
-  }, []);
-
+    setSearchDatas();
+  }, [name]);
   return (
   return (
     <InputBlock
     <InputBlock
       color={color}
       color={color}

+import { createSlice } from '@reduxjs/toolkit';
+
+const parsedDocumentsSlice = createSlice({
+  name: 'parsedDocuments',
+  initialState: {
+    documents: [],
+  },
+  reducers: {
+    setParsedDocuments: (state, action) => {
+      state.documents = action.payload;
+    },
+  },
+});
+
+export const { setParsedDocuments } = parsedDocumentsSlice.actions;
+
+export default parsedDocumentsSlice.reducer;

 import React from 'react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactDOM from 'react-dom';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
 import App from './App';
 import App from './App';
+import rootReducer from './reducers';
+
+const store = configureStore({
+  reducer: rootReducer,
+});
 
 
 ReactDOM.render(
 ReactDOM.render(
   <React.StrictMode>
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   </React.StrictMode>,
   document.getElementById('root')
   document.getElementById('root')
 );
 );

@@ -9,7 +9,6 @@ const Main = styled.div`
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
-  padding-left: 7%;
 `;
 `;
 
 
 const Container = styled.div`
 const Container = styled.div`

 import React from 'react';
 import React from 'react';
+import { useSelector } from 'react-redux';
 import Header from '../components/Header';
 import Header from '../components/Header';
-import Main from '../components/document/index';
+import Main from '../components/document';
 
 
 const SearchPage = () => {
 const SearchPage = () => {
+  const parsedDocuments = useSelector(state => state.parsedDocuments);
+
+  if (parsedDocuments.length === 0) {
+    return (
+      <>
+        <Header />
+        <div>검색 결과가 없습니다.</div>
+      </>
+    );
+  }
   return (
   return (
     <>
     <>
       <Header />
       <Header />

+import { combineReducers } from 'redux';
+import parsedDocumentsReducer from '../features/parsedDocumentsSlice';
+
+export default combineReducers({
+  parsedDocuments: parsedDocumentsReducer,
+});