만들려고 하는 것

• beach, windMills, Modern 버튼을 눌렀을떄, url부분에 각 ?category=’뭐시기’ 라는 형태로 날리고, 만약 똑같은 걸 한번 더 누르면, url의 쿼리 스트링을 삭제하는 것을 만든다.
• 메인 로직

const handleClick = useCallback(()=>{
        let currentQuery = {};

        if(params){
            currentQuery = qs.parse(params.toString());
        }

        console.log('현재 쿼리',currentQuery)

        const updateQuery : any = {
            ...currentQuery, 
            category : label
        }
        // 현재 쿼리 스트링의 category 값과 누른 label이 같으면 쿼리 삭제
       if(params?.get('category') === label){
        delete updateQuery.category;
       }

       // 실제로 이동시킬 쿼리 생성
       const url = qs.stringifyUrl({
        url : '/',
        query : updateQuery
       }, {skipNull : true})
			 // 실제로 이동시킴
       router.push(url);

    },[label, params, router])

만들려고 하는 것 2

• beach, windMills, Modern 버튼을 눌렀을때 label과 현재 url창의 queryString의 value를 비교해서 같으면, 버튼 밑에 짝대기를 그어준다.

function Categories(){
    const params = useSearchParams();
    const categoryValue = params?.get('category');
    const pathname = usePathname();

    const isMainPage = pathname === '/'

    if(!isMainPage){
        return null
    }

    return(
        <Container>
            <div className="pt-4 flex flex-row imtes-center justify-between overflow-x-auto">
                {categories.map((item) => (
                    <CategoryBox key={item.label} label={item.label} selected={categoryValue === item.label} icon={item.icon}/>
                ))}
            </div>
        </Container>
    )
}

• selected되었는지 안되었는지는 밖에서 컨트롤한다.