Merge pull request #199 from 42-world/feature/switching

Feature/switching
42-world · Mar 3, 2022 · 3319902 · 3319902
2 parents 7844cfa + f41ef16
commit 3319902
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 3 deletions.
diff --git 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
@@ -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 = () => {
     <>
       <Styled.StyledList component="nav" aria-label="mailbox folders">
         <GlobalStyled.BoardTitleDiv>
-          <div className="board_name">{curCate}</div>
+          <FormControl className="category_form" fullWidth>
+            <NativeSelect
+              defaultValue={categoryId - 1}
+              onChange={e => {
+                handleChangeCate(e.target.value);
+              }}
+            >
+              {cateList.map((cate, idx) => {
+                return <option value={idx}>{cate}</option>;
+              })}
+            </NativeSelect>
+          </FormControl>
         </GlobalStyled.BoardTitleDiv>
-
         {articles &&
           articles.map(article => {
             if (categoryId === '3')