Merge branch 'dev' into feature/infinity

42-world · Mar 3, 2022 · 73e9627 · 73e9627
2 parents d0500fd + 3319902
commit 73e9627
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 4 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';
 
@@ -21,6 +23,7 @@ const CategoryBody = () => {
   let hasNextPage = true;
   const [target, setTarget] = useState(null);
   const [curCate, setCurCate] = useState('');
+  const cateList = ['자유 게시판', '익명 게시판', '공지 게시판'];
   const loca = useLocation();
   const navi = useNavigate();
   const categoryId = loca.pathname.split('/')[2];
@@ -38,14 +41,24 @@ const CategoryBody = () => {
   //   const result = await ArticleService.getArticles(categoryId);
   //   console.log('result ,', result);
   //   const meta = result.meta;
-
   //   setArticles(result.data);
   //   setIsLoaded(false);
   //   setHasNextPage(meta.hasNextPage);
   //   hasNextPage = meta.hasNextPage;
-
   // };
 
+  const handleChangeCate = id => {
+    navi(`/category/${parseInt(id) + 1}`);
+  };
+
+  useEffect(() => {
+    if (categoryId > 3) {
+      alert('준비 중입니다!');
+      navi('/');
+    }
+    setCurCate(getCategoryByUrl(loca));
+  }, [categoryId]);
+
   // 동기적으로 sleep하는 함수
   // const sleep = delay => {
   //   let start = new Date().getTime();
@@ -98,9 +111,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')