상품검색 페이지

web-apps/client/package.json

@@ -8,6 +8,7 @@
     "axios": "^0.19.0",
     "clsx": "^1.0.4",
     "immer": "^5.0.0",
+    "inko": "^1.1.1",
     "intersection-observer": "^0.7.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",

web-apps/client/src/App.js

@@ -11,6 +11,7 @@ import Home from './pages/main';
 import Filters from './pages/filters';
 import Location from './pages/area';
 import NewProduct from './pages/newProduct';
+import Test from './pages/search';
 
 import { FilterProvider } from './contexts/filters';
 import { SnackbarProvider } from './contexts/snackbar';
@@ -41,6 +42,7 @@ export default () => {
                 <Route exact path='/' component={Home} />
                 <Route exact path='/category' component={Filters} />
                 <Route exact path='/location' component={Location} />
+                <Route exact path='/search' component={Test} />
               </ThemeProvider>
               <ThemeProvider theme={muiTheme}>
                 <Route exact path='/chat' component={TmpChat} />

web-apps/client/src/components/search.js

@@ -0,0 +1,73 @@
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+
+import { Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+import ClearIcon from '@material-ui/icons/HighlightOff';
+
+const useStyles = makeStyles({
+  root: {
+    backgroundColor: 'rgb(244,244,244)',
+    padding: '0.2rem',
+    borderRadius: '0.5rem',
+  },
+  input: {
+    backgroundColor: 'rgb(244,244,244)',
+    border: 0,
+    flex: 1,
+    padding: 0,
+    height: '1.5rem',
+  },
+  icon: {
+    color: '#bebebe'
+  }
+});
+
+const Search = ({ onChange, onKeyDown }, ref) => {
+  const inputRef = useRef(null);
+  const classes = useStyles({});
+
+  useImperativeHandle(ref, () => ({
+    set: (input) => {
+      inputRef.current.value = input;
+    },
+    get: () => {
+      return inputRef.current.value;
+    },
+  }));
+
+  const onClearInput = () => {
+    inputRef.current.value = '';
+  };
+
+  return (
+    <Grid
+      container
+      justify='space-around'
+      alignItems='center'
+      className={classes.root}
+    >
+      <input
+        ref={inputRef}
+        placeholder='검색어를 입력하세요.'
+        className={classes.input}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+      />
+      <ClearIcon onClick={onClearInput} className={classes.icon} />
+    </Grid>
+  );
+};
+
+Search.propTypes = {
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+};
+
+Search.defaultProps = {
+  onChange: () => { },
+  onKeyDown: () => { },
+}
+
+export default forwardRef(Search);

web-apps/client/src/contexts/filters.js

@@ -12,6 +12,7 @@ const filterInfo = {
   distance: 0,
   localname: '전체',
   CATEGORYLABEL: [],
+  keyword: '',
 };
 
 const TYPE = {
@@ -23,6 +24,7 @@ const TYPE = {
   LOCAL_NAME: 5,
   COORDINATE: 6,
   DISTANCE: 7,
+  KEYWORD: 8,
 };
 
 const filterReducer = (state, { type, payload }) => {
@@ -60,6 +62,9 @@ const filterReducer = (state, { type, payload }) => {
       }
       return { ...state, distance: +payload };
 
+    case TYPE.KEYWORD:
+      return { ...state, keyword: payload };
+
     default:
       return state;
   }

web-apps/client/src/pages/main/fetch.js

@@ -24,7 +24,8 @@ const makeQuery = ({
   coordinates,
   distance,
   from,
-  limits, }) => {
+  limits,
+  keyword }) => {
   const queries = [];
   if (from) {
     queries.push(['from', from]);
@@ -42,6 +43,9 @@ const makeQuery = ({
   if (end || start) {
     queries.push(['price', `${start}${end ? `,${end}` : ''}`]);
   }
+  if (keyword.length) {
+    queries.push(['keyword', keyword]);
+  }
   const query = queries.map((q) => q.join('=')).join('&');
   return query;
 };

web-apps/client/src/pages/main/index.js

@@ -43,7 +43,7 @@ const Main = () => {
   const [settings, setSettings] = useState({ from: 0, limits: 10 });
 
   const buttons = [
-    getButtons('검색', '/', <SearchIcon />),
+    getButtons('검색', '/search', <SearchIcon />),
     getButtons('필터', '/category', <FilterIcon />),
     getButtons('알림', '/', <NotifyIcon />)
   ];

web-apps/client/src/pages/search.js

@@ -0,0 +1,115 @@
+import axios from 'axios';
+import Inko from 'inko';
+import React, { useRef, useState, useEffect, useContext } from 'react';
+
+import { useHistory } from 'react-router-dom';
+
+import { List, ListItem } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Input from '../components/search';
+import ToolBar from '../components/tool-bar';
+
+import { filterContext } from '../contexts/filters';
+
+const useStyles = makeStyles({
+  'root': {
+    width: '100%',
+    '& h6': {
+      width: '100%',
+    },
+  }
+});
+
+const getKeywordList = async (keyword) => {
+  const response = await axios.get('http://localhost:5000/info/keyword', {
+    params: { keyword }
+  })
+  return response.data;
+}
+
+const isEnglishOnly = (keyword) => !(/[가-힣]/.test(keyword));
+const isKoreanOnly = (keyword) => !(/[a-zA-Z]/.test(keyword));
+
+export default () => {
+  const SEARCH_DELAY = 500;
+  const classes = useStyles({});
+  const inputRef = useRef({ current: '' });
+  const { filter: { keyword }, dispatch, TYPE } = useContext(filterContext);
+  const [list, setList] = useState([]);
+  const [recommend, setRecommned] = useState('');
+  const timer = { current: '' };
+  const histroy = useHistory();
+
+  useEffect(() => {
+    if (keyword.length) {
+      inputRef.current.set(keyword);
+    }
+  }, []);
+
+  const inputKeyword = () => {
+    const keyword = inputRef.current.get();
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(async () => {
+      const data = await getKeywordList(keyword);
+      const list = data.map(({ _source: { word } }) => word);
+      setList(list);
+    }, SEARCH_DELAY);
+  }
+
+  useEffect(() => {
+    const keyword = inputRef.current.get();
+    let recommendKeyword = '';
+    if (list.length >= 1 || keyword.length <= 1) {
+      setRecommned('');
+      return;
+    }
+    if (isEnglishOnly(keyword)) {
+      recommendKeyword = new Inko().en2ko(keyword);
+    }
+    if (isKoreanOnly(keyword)) {
+      recommendKeyword = new Inko().ko2en(keyword);
+    }
+    if (recommendKeyword.length > 1) {
+      setRecommned(recommendKeyword);
+    };
+  }, [list]);
+
+  const onTransferKeyword = () => {
+    inputRef.current.set(recommend);
+    inputKeyword();
+  };
+
+  const updateKeyword = (event) => {
+    const name = event.target.innerText;
+    dispatch({ type: TYPE.KEYWORD, payload: name });
+    histroy.goBack();
+  };
+
+  const enterEvent = (event) => {
+    if (event.key !== 'Enter') {
+      return;
+    }
+    const name = inputRef.current.get();
+    dispatch({ type: TYPE.KEYWORD, payload: name });
+    histroy.goBack();
+  }
+
+  return (
+    <>
+      <div className={classes.root}>
+        <ToolBar title={<Input ref={inputRef} onChange={inputKeyword} onKeyDown={enterEvent} />} />
+      </div>
+      <List className={classes.root}>
+        {recommend.length > 0 &&
+          (<ListItem onClick={onTransferKeyword}>{recommend}를 입력하려 하셨나요?</ListItem>)
+        }
+        {list.map((name) => (
+          <ListItem onClick={updateKeyword} divider button key={name}>{name}</ListItem>
+        ))}
+      </List>
+    </>
+  );
+};