[11]SocialGallery Project

SideMenu

1) UI

2) Link

##SideMenue.jsx
<Link to="?category=MOVIE" onClick={()=>{
                        window.location.href('')
                    }}>영화/드라마</Link>
...(생략)

3) Louter

##App.js
   <Route path="/movie" element={<Movie></Movie>}></Route>
   <Route path="/broadcast" element={<Broadcast></Broadcast>}></Route>
   <Route path="/life" element={<Life></Life>}></Route>
   <Route path="/travel" element={<Travel></Travel>}></Route>

4) 카테고리별 페이지 기능

##Content.jsx
    useEffect(() => {
        const params = new URLSearchParams(window.location.search);
        let category = params.get("category")

        if (category === null) {
            axios.get(base_URL+ `/api/post`).then(
                res => {
                    console.log('전체')
                })
        } else if (category) {
            axios.get(base_URL + `/api/post/category?category=` + category)
            .then(res => {
                dispatch(setMainImg([...res.data.list]))
                    
                }
            )
        }
    }, [])

• category가 null이면 전체 게시글을 보여주고 category가 존재한다면 그에 맞는 api 맵핑

5) 결과