feat: board create button 추가 (#83)

src/pages/board/boardList/BoardListPage.tsx

@@ -1,22 +1,32 @@
 import { useEffect } from 'react';
 
 import { PageUiStoreImpl } from './BoardListPageUiStore';
-import { Boards } from './components';
+import { Boards, BoardCreateButton } from './components';
 
 import { UniformLogo } from '@/assets';
 import { BodyScreen, GNB, Header, PageBody, PageStoreHOC } from '@/components';
 import { usePageUiStore } from '@/hooks';
+import { useRootStore } from '@/stores/RootStore';
 
 const BoardListPage: React.FC = () => {
-  const { fetch } = usePageUiStore<PageUiStore.BoardList>();
+  const { fetchBoards } = usePageUiStore<PageUiStore.BoardList>();
+  const {
+    auth: { fetch, me },
+  } = useRootStore();
 
   useEffect(() => {
     fetch();
+    fetchBoards();
   }, [fetch]);
 
   return (
     <>
-      <Header title="게시판 목록" RightComponent={<UniformLogo />} />
+      {me?.isAdmin || me?.isCircleLeader || me?.isPresident ? (
+        <Header title="게시판 목록" RightComponent={<BoardCreateButton />} />
+      ) : (
+        <Header title="게시판 목록" RightComponent={<UniformLogo />} />
+      )}
+
       <PageBody>
         <BodyScreen>
           <Boards />

src/pages/board/boardList/BoardListPageUiStore.ts

@@ -10,7 +10,7 @@ export class BoardListPageUiStore {
   }
 
   // 생성한 게시판의 카테고리가 이미 있으면 그 카테고리 안에 넣고, 없으면 새로 생성
-  *fetch(): Generator {
+  *fetchBoards(): Generator {
     const boards = (yield Repo.fetch()) as Model.Board[];
     this.boards = new Map();
 

src/pages/board/boardList/components/BoardCreateButton.tsx

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+import CreateIcon from '@mui/icons-material/Create';
+import { observer } from 'mobx-react-lite';
+import { generatePath, useParams } from 'react-router-dom';
+
+import { ClearLink, RightButtonWrapper } from '@/components';
+import { PAGE_URL, PostParams } from '@/configs/path';
+import { usePageUiStore } from '@/hooks';
+
+export const BoardCreateButton: React.FC = observer(() => {
+  return (
+    <Wrapper to={generatePath(PAGE_URL.BoardCreate)}>
+      <Icon />
+    </Wrapper>
+  );
+});
+
+const Wrapper = styled(ClearLink)`
+  ${RightButtonWrapper}
+`;
+
+const Icon = styled(CreateIcon)`
+  position: absolute;
+  top: 14px;
+  right: 20px;
+`;

src/pages/board/boardList/components/index.ts

@@ -1 +1,2 @@
 export { Boards } from './Boards';
+export { BoardCreateButton } from './BoardCreateButton';