[#37] add : 검색 페이지 구현

bithumbNFT · Oct 7, 2021 · 294f4b6 · 294f4b6
1 parent 29699ab
commit 294f4b6
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 11 deletions.
diff --git a/src/App.js b/src/App.js
@@ -21,6 +21,7 @@ function App() {
   const Kakao = lazy(() => import('./components/LoginModal/login/kakao'));
   const Naver = lazy(() => import('./components/LoginModal/login/naver'));
   const Login = lazy(() => import('./pages/login'));
+  const Search = lazy(() => import('./pages/search'));
 
   return (
     <>
@@ -31,6 +32,7 @@ function App() {
           {/* 홈화면 */}
           <Route exact path="/" component={Home} />
           {/* 경매 페이지 */}
+          <Route exact path="/search/:id" component={Search} />
           <AuthRoute
             path="/auction/:id"
             render={props => <Auction {...props} />}

diff --git a/src/components/Common/Header/index.js b/src/components/Common/Header/index.js
@@ -1,10 +1,9 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { AiOutlineSearch } from 'react-icons/ai';
 import { Link, useHistory } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
-import { BsBell } from 'react-icons/bs';
 import { logoutRequestAction } from 'reducers/user';
-import { Gnb, Menu, User, Title, UserProfile, NotiIcon } from './styles';
+import { Gnb, Menu, User, Title, UserProfile } from './styles';
 
 function Header() {
   // [TODO] logInLoading, logInError 일 때 상태 처리하기
@@ -14,6 +13,9 @@ function Header() {
     logInError: state.userReducer.logInError,
     me: state.userReducer.me,
   }));
+  // 검색
+  const [searchValue, setSearchValue] = useState('');
+
   const userInfo = JSON.parse(localStorage.getItem('userInfo'));
   const history = useHistory();
   const dispatch = useDispatch();
@@ -22,10 +24,23 @@ function Header() {
     dispatch(logoutRequestAction(localStorage.getItem('social')));
   });
 
+  const onChangeSearch = useCallback(e => {
+    setSearchValue(e.target.value);
+  }, []);
+
   const GoToPage = name => {
     history.push(name);
   };
 
+  const onSubmit = useCallback(
+    e => {
+      e.preventDefault();
+      // 로컬 스토리지에 해당 searchValue를 저장해야 한다
+      history.push(`/search/${searchValue}`);
+      setSearchValue('');
+    },
+    [searchValue, history],
+  );
   return (
     <Gnb>
       <div className="navWrap">
@@ -41,7 +56,15 @@ function Header() {
 
         <User>
           <li className="search">
-            <input type="search" />
+            <form onSubmit={onSubmit}>
+              <input
+                type="search"
+                value={searchValue}
+                onChange={onChangeSearch}
+                placeholder="NFT 경매품을 입력하세요."
+              />
+            </form>
+
             <span>
               <i>
                 <AiOutlineSearch />
@@ -51,9 +74,6 @@ function Header() {
 
           {userInfo ? (
             <>
-              <NotiIcon onClick={() => GoToPage('/notice')}>
-                <BsBell />
-              </NotiIcon>
               <UserProfile onClick={() => GoToPage('/mypage')}>
                 <img src={userInfo.picture} alt="profileImage" />
               </UserProfile>

diff --git a/src/components/Common/Header/styles.js b/src/components/Common/Header/styles.js
@@ -35,7 +35,7 @@ export const User = styled.ul`
   li {
     color: #4a4a4a;
     line-height: 1.5;
-    font-size: 16px;
+    font-size: 1rem;
     margin-left: 1em;
     &.user {
       border: 1px solid #dbdbdb;
@@ -47,19 +47,20 @@ export const User = styled.ul`
   }
   .search {
     position: relative;
-    width: 12rem;
+    width: 15rem;
     background: #f6f6f6;
     color: #5f5f5f;
     border-radius: 3px;
     span {
       position: absolute;
       font-size: 1.4em;
-      right: 9px;
+      right: 11px;
       top: 6px;
     }
   }
   input {
-    padding: 0.5rem;
+    padding: 0.5rem 0.8rem;
+    font-size: 1rem;
   }
   input::-ms-clear,
   input::-ms-reveal {
@@ -101,6 +102,7 @@ export const UserProfile = styled.div`
     width: 100%;
     height: 100%;
     border-radius: 50%;
+    object-fit: cover;
   }
 `;
 

diff --git a/src/pages/search/index.js b/src/pages/search/index.js
@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import Header from 'components/Common/Header';
+import { FiSearch } from 'react-icons/fi';
+import { Empty } from 'antd';
+import styled from '@emotion/styled';
+
+const Search = ({ match }) => {
+  const { username } = match.params;
+
+  // const [keyWords, setKeyWords] = useState([]);
+
+  // useEffect(() => {
+  //   if (typeof window !== 'undefined') {
+  //     const result = localStorage.getItem('keywords') || [];
+  //     setKeyWords(JSON.parse(result));
+  //   }
+  // }, []);
+
+  // useEffect(() => {
+  //   localStorage.setItem('ketwords', JSON.stringify(keyWords));
+  // }, [keyWords]);
+
+  // 검색어 추가
+  // const handleAddKeyword = text => {
+  //   const newKeyword = {
+  //     id: Date.now(),
+  //     text,
+  //   };
+  //   setKeyWords([newKeyword, ...keyWords]);
+  // };
+
+  return (
+    <>
+      <Header />
+
+      <SearchWrap>
+        <h2>
+          <FiSearch />
+          이것을 찾으셨나요 ? &nbsp;{' '}
+          <strong>&quot;{match.params.id}&quot;</strong>
+        </h2>
+
+        <NoContent>
+          <Empty description={false} />
+          <h3>해당 검색 결과가 없습니다.</h3>
+        </NoContent>
+      </SearchWrap>
+    </>
+  );
+};
+
+export default Search;
+
+const SearchWrap = styled.main`
+  width: 1200px;
+  margin: 0 auto;
+  height: 100vh;
+  h2 {
+    font-size: 32px;
+    margin-top: 6rem;
+    display: flex;
+    align-content: center;
+
+    svg {
+      margin-right: 1rem;
+    }
+    strong {
+      font-weight: 700;
+      color: #fe5000;
+    }
+  }
+  h3 {
+    font-size: 1rem;
+    color: #616568;
+    margin-top: 1rem;
+    font-weight: 400;
+    text-align: center;
+  }
+`;
+const NoContent = styled.section`
+  margin-top: 350px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+`;