feat: Search page - store searches keyword in localStorage

src/pages/Search/BeforeSearch.jsx

@@ -1,19 +1,15 @@
 import React, { useState } from 'react'
 import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import '~/animate.css'
 import Logo from '../../components/common/Logo'
 import { cls } from '../../utils'
 
-const BeforeSearch = () => {
+const BeforeSearch = ({ goSearch }) => {
+  const searchKeyword = 'searchKeyword'
+  const local = JSON.parse(window.localStorage.getItem(searchKeyword))
   const [animation, setAnimation] = useState('')
-  const [recentSearches, setRecentSearches] = useState([
-    '키르시',
-    '어라운드 앤',
-    '데일리백',
-    '숄더백',
-    '후드티',
-    '에뛰드',
-  ])
+  const [recentSearches, setRecentSearches] = useState(local)
   const [popularSearches, setPopularSearches] = useState([
     '키르시',
     '어라운드 앤',
@@ -26,37 +22,43 @@ const BeforeSearch = () => {
     '남자 가방',
     '아이쉐도우',
   ])
-  const [deleteSearchAnimation, setDeleteSearchAnimation] = useState('')
   const [deleteSearch, setDeleteSearch] = useState('')
   const [removeAllSearch, setRemoveAllSearch] = useState('')
+  const navigate = useNavigate()
 
   useEffect(() => {
-    // const local = localStorage.getItem('recentSearches')
-    // setRecentSearches(local)
     setAnimation('openSearchBar')
     setTimeout(() => {
       setAnimation('')
     }, 1000)
   }, [])
 
+  useEffect(() => {
+    setRecentSearches(JSON.parse(window.localStorage.getItem(searchKeyword)))
+  }, [goSearch, deleteSearch, removeAllSearch])
+
   const removeSearch = (item) => {
     setDeleteSearch(item)
-    setDeleteSearchAnimation('deleteSearch')
     setTimeout(() => {
-      setRecentSearches(recentSearches.filter((word) => word !== item))
+      window.localStorage.setItem(
+        searchKeyword,
+        JSON.stringify(recentSearches.filter((word) => word !== item)),
+      )
+      setDeleteSearch('')
     }, 500)
   }
+
   const removeAll = () => {
     setRemoveAllSearch('deleteSearch')
     setTimeout(() => {
-      setRecentSearches([])
+      window.localStorage.setItem(searchKeyword, JSON.stringify([]))
       setRemoveAllSearch('')
     }, 500)
   }
 
   return (
-    <div className={`${animation} w-full h-[calc(100vh-170px)] relative`}>
-      <div className="px-7 py-4 text-sm text-black-600">
+    <div className={`${animation} w-full`}>
+      <div className="h-72 px-7 mt-2 py-2 text-sm text-black-600">
         <div className="flex justify-between py-4">
           <div className="font-bold text-base text-black">최근 검색어</div>
           {recentSearches && recentSearches.length > 0 && (
@@ -75,7 +77,12 @@ const BeforeSearch = () => {
                   item === deleteSearch && 'deleteSearch',
                 )}
               >
-                <div className="font-medium py-1.5 truncate">{item}</div>
+                <div
+                  className="font-medium py-1.5 truncate"
+                  onClick={() => navigate(`${item}`)}
+                >
+                  {item}
+                </div>
                 <div
                   className="w-4 h-4 relative bg-white-100 rounded-full flex justify-center items-center"
                   onClick={() => removeSearch(item)}
@@ -95,7 +102,7 @@ const BeforeSearch = () => {
       </div>
 
       {popularSearches && popularSearches.length > 0 && (
-        <div className="w-full px-7 text-sm text-black-600 absolute bottom-0">
+        <div className="w-full px-7 text-sm text-black-600">
           <div className="font-bold text-base text-black py-6">인기 검색어</div>
           <ul className="grid grid-rows-5 grid-cols-2 grid-flow-col gap-2">
             {popularSearches.map((item, idx) => (

src/pages/Search/SearchHeader.jsx

@@ -1,33 +1,77 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ReactComponent as SearchIcon } from '/public/assets/search_icon.svg'
 import CartIcon from '~/components/common/CartIcon'
 import { ReactComponent as BackOn } from '/public/assets/back-small.svg'
 import '~/animate.css'
+import { useEffect } from 'react'
 
-const SearchHeader = ({ focus, setFocus, animation, setAnimation }) => {
+const SearchHeader = ({ setGoSearch }) => {
+  const [focus, setFocus] = useState(false)
+  const [inputAnimation, setInputAnimation] = useState('')
+  const [value, setValue] = useState('')
   const navigate = useNavigate()
-  const onFocusHandler = () => {
+
+  useEffect(() => {
+    setFocus(true)
+    setInputAnimation('openSearchBar')
+    setTimeout(() => {
+      setInputAnimation('')
+    }, 1000)
+  }, [])
+
+  const onFocusHandler = (e) => {
     if (!focus) {
+      // input 창이 닫혀있다면 input 창 열어주기 + 애니메이션
       setFocus(true)
-      setAnimation('openSearchBar')
+      setInputAnimation('openSearchBar')
       setTimeout(() => {
-        setAnimation('')
+        setInputAnimation('')
       }, 1000)
     } else {
-      setAnimation('closeSearchBar')
-      setTimeout(() => {
-        setFocus(false)
-        setAnimation('')
-      }, 1000)
+      if (value) {
+        // input에 사용자가 입력한 내용이 있다면 검색하기
+        goSearch(e)
+      } else {
+        // input이 비어있다면 input창 닫아주기
+        setInputAnimation('closeSearchBar')
+        setTimeout(() => {
+          setFocus(false)
+          setInputAnimation('')
+        }, 1000)
+      }
     }
   }
 
-  const goSearch = (e) => {
-    if (e.keyCode === 13) {
-      if (e.target.value.trim === '') return
-      console.log(e.target.value)
+  const goSearch = () => {
+    // 검색어가 빈칸을 제외하고 빈 배열일 경우, 함수를 실행시키지 않고 리턴
+    if (value.trim === '') return
+    const local = JSON.parse(localStorage.getItem('searchKeyword'))
+
+    // local에 저장된 키워드들이 없다면 키값을 설정하고 그 키워드만 로컬에 저장 후 리턴
+    if (!local) {
+      window.localStorage.setItem('searchKeyword', JSON.stringify([value]))
+      return
     }
+
+    // 이전에 검색한 기록이 있는 키워드는 지운 후, 맨 앞에서 추가
+    local.map((item, idx) => {
+      if (item === value) local.splice(idx, 1)
+    })
+
+    // 검색어 최대 6개만 저장
+    if (local.length >= 6) local.pop()
+
+    // 새로운 검색어를 맨 앞으로 저장
+    window.localStorage.setItem(
+      'searchKeyword',
+      JSON.stringify([value, ...local]),
+    )
+    setGoSearch(true)
+    setTimeout(() => {
+      setGoSearch(false)
+      navigate(`${value}`)
+    }, 300)
   }
 
   return (
@@ -39,10 +83,12 @@ const SearchHeader = ({ focus, setFocus, animation, setAnimation }) => {
             {focus && (
               <input
                 type="text"
-                className={`${animation} w-full px-2 py-2 placeholder:text-black-200 focus-visible:outline-none border-b-2 border-primary`}
+                value={value}
+                className={`${inputAnimation} w-full px-2 py-2 placeholder:text-black-200 focus-visible:outline-none border-b-2 border-primary`}
                 placeholder="#어라운드 앤"
-                onKeyDown={() => {
-                  if (e.keyCode === 13) {
+                onChange={(e) => setValue(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.keyCode === 13) {
                     goSearch()
                   }
                 }}