diff --git a/frontend/src/components/recruitment/MultipleFilter.tsx b/frontend/src/components/recruitment/MultipleFilter.tsx index a45c784..b285358 100644 --- 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) => { 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 (
@@ -141,7 +149,10 @@ export default function MultipleFilter() {
{filter - .filter((item) => item.category !== 'isRecruiting') // isRecruiting이 아닌 아이템들만 필터링 + .filter( + (item) => + item.category !== 'isRecruiting' && item.category !== 'keyword', + ) .map((item) => (
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 ( ) diff --git a/frontend/src/utils/atoms.ts b/frontend/src/utils/atoms.ts index 65e47df..758b886 100644 --- a/frontend/src/utils/atoms.ts +++ b/frontend/src/utils/atoms.ts @@ -103,6 +103,10 @@ const usernameState = atom({ const filterState = atom({ key: 'FilterState', default: [ + { + category: 'keyword', + name: '', + }, { category: 'isRecruiting', name: 'false',