feat : 검색 기능 수정

techeer-sv · Nov 23, 2023 · 72ab841 · 72ab841
1 parent decfa96
commit 72ab841
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/frontend/src/components/recruitment/MultipleFilter.tsx b/frontend/src/components/recruitment/MultipleFilter.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { use, useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import Select, { StylesConfig } from 'react-select'
 import Image from 'next/image'
@@ -13,6 +13,7 @@ import {
   SkillType,
   FilterType,
 } from '../../utils/types'
+import { set } from 'react-hook-form'
 
 const positionOptions = Object.values(Position).map((position) => ({
   value: position,
@@ -57,11 +58,13 @@ export default function MultipleFilter() {
 
   const handleKeywordSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
-    setFilter((prevFilter) => [
-      ...prevFilter,
-      { category: 'keyword', name: keyword },
-    ])
-    setKeyword('')
+    setFilter((prevFilter) =>
+      prevFilter.map((item) =>
+        item.category === 'keyword' ? { ...item, name: keyword } : item,
+      ),
+    )
+    sessionStorage.setItem('keyword', keyword)
+    console.log({ filter })
   }
 
   const removeFilterItem = (itemToRemove: FilterType) => {
@@ -70,6 +73,11 @@ export default function MultipleFilter() {
     )
   }
 
+  useEffect(() => {
+    const searchText = sessionStorage.getItem('keyword')
+    setKeyword(searchText)
+  }, [])
+
   return (
     <div className="w-[900px] h-[80px] mb-8 flex flex-col border-solid  border-gray-400 text-lightgray">
       <div className="w-full flex h-1/2 text-sm">
@@ -141,7 +149,10 @@ export default function MultipleFilter() {
       </div>
       <div className="w-full h-1/2 flex items-center bg-slate-100">
         {filter
-          .filter((item) => item.category !== 'isRecruiting') // isRecruiting이 아닌 아이템들만 필터링
+          .filter(
+            (item) =>
+              item.category !== 'isRecruiting' && item.category !== 'keyword',
+          )
           .map((item) => (
             <div
               key={item.name}

diff --git a/frontend/src/components/recruitment/ToggleButton.tsx b/frontend/src/components/recruitment/ToggleButton.tsx
@@ -5,32 +5,26 @@ import '../../../public/css/toggle-button.css'
 
 export default function ToggleButton() {
   const [filter, setFilter] = useRecoilState(filterState)
-
-  const [isChecked, setIsChecked] = useState(
-    filter.find((f) => f.category === 'isRecruiting')?.name === 'true',
-  )
+  const [recruiting, setRecruiting] = useState(false)
 
   const handleToggle = () => {
-    const newIsRecruitingValue = String(!isChecked)
-
+    const recuitingFilter = filter.find((f) => f.category === 'isRecruiting')
     const updatedFilter = filter.map((f) =>
-      f.category === 'isRecruiting' ? { ...f, name: newIsRecruitingValue } : f,
+      f === recuitingFilter ? { ...f, name: String(!recruiting) } : f,
     )
-
     setFilter(updatedFilter)
-    setIsChecked(!isChecked)
+    setRecruiting(!recruiting)
   }
 
   useEffect(() => {
-    const recruitingFilter = filter.find((f) => f.category === 'isRecruiting')
-    if (recruitingFilter) {
-      setIsChecked(recruitingFilter.name === 'true')
+    if (filter.find((f) => f.category === 'isRecruiting')?.name === 'true') {
+      handleToggle()
     }
-  }, [filter])
+  }, [])
 
   return (
     <label className="switch">
-      <input type="checkbox" checked={isChecked} onChange={handleToggle} />
+      <input type="checkbox" checked={recruiting} onChange={handleToggle} />
       <span className="slider round"> </span>
     </label>
   )

diff --git a/frontend/src/utils/atoms.ts b/frontend/src/utils/atoms.ts
@@ -103,6 +103,10 @@ const usernameState = atom<string>({
 const filterState = atom<FilterType[]>({
   key: 'FilterState',
   default: [
+    {
+      category: 'keyword',
+      name: '',
+    },
     {
       category: 'isRecruiting',
       name: 'false',