diff --git a/src/Pages/CategoryPage/CategoryPage.styled.js b/src/Pages/CategoryPage/CategoryPage.styled.js index 1791abd..e215f02 100644 --- a/src/Pages/CategoryPage/CategoryPage.styled.js +++ b/src/Pages/CategoryPage/CategoryPage.styled.js @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import GlobalStyled from 'Styled/Global.styled'; import ListItem from '@mui/material/ListItem'; @@ -28,6 +29,35 @@ const MainBody = styled.div` } } } + .category_form { + * { + border: none !important; + border-bottom: none !important; + } + *:hover { + border: none !important; + border-bottom: none !important; + } + *::before { + border: none !important; + border-bottom: none !important; + } + *::after { + border: none !important; + border-bottom: none !important; + } + + select { + color: ${GlobalStyled.theme.categoryNameTextColor}; + font-size: 1.1rem; + font-weight: 700; + padding-top: 0; + padding-bottom: 0; + } + svg { + color: ${GlobalStyled.theme.categoryNameTextColor}; + } + } `; const CusListItem = styled(ListItem)` diff --git a/src/Pages/CategoryPage/Components/CategoryBody.jsx b/src/Pages/CategoryPage/Components/CategoryBody.jsx index e6b7bdc..f82ca87 100644 --- a/src/Pages/CategoryPage/Components/CategoryBody.jsx +++ b/src/Pages/CategoryPage/Components/CategoryBody.jsx @@ -6,6 +6,8 @@ import { ArticleService } from 'Network'; import { PreviewArticleNoti, PreviewArticle } from 'Components'; import CircularProgress from '@mui/material/CircularProgress'; +import NativeSelect from '@mui/material/NativeSelect'; +import FormControl from '@mui/material/FormControl'; import Fab from '@mui/material/Fab'; import CreateIcon from '@mui/icons-material/Create'; @@ -19,6 +21,7 @@ const CategoryBody = () => { const [hasNextPage, setHasNextPage] = useState(true); const [target, setTarget] = useState(null); const [curCate, setCurCate] = useState(''); + const cateList = ['자유 게시판', '익명 게시판', '공지 게시판']; const loca = useLocation(); const navi = useNavigate(); const categoryId = loca.pathname.split('/')[2]; @@ -31,6 +34,10 @@ const CategoryBody = () => { navi(`/article/${id}`); }; + const handleChangeCate = id => { + navi(`/category/${parseInt(id) + 1}`); + }; + const setInitalArticles = async () => { setIsLoaded(true); const result = await ArticleService.getArticles(categoryId); @@ -48,7 +55,7 @@ const CategoryBody = () => { } setCurCate(getCategoryByUrl(loca)); setInitalArticles(); - }, []); + }, [categoryId]); // 무한 스크롤 임시 정지 @@ -93,9 +100,19 @@ const CategoryBody = () => { <> -
{curCate}
+ + { + handleChangeCate(e.target.value); + }} + > + {cateList.map((cate, idx) => { + return ; + })} + +
- {articles && articles.map(article => { if (categoryId === '3')