feat: 게시판 생성 me 최신화 안됨 문제 및 디자인 개선 (#87)

src/AuthRouter.tsx

@@ -1,10 +1,21 @@
 import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
 import { Route } from 'react-router-dom';
 
+import { useRootStore } from '@/stores/RootStore';
+
 type Props = {
   children?: React.ReactNode;
 };
 
 export const AuthRouter: React.FC<Props> = observer(({ children, ...rest }) => {
+  const {
+    auth: { fetch },
+  } = useRootStore();
+
+  useEffect(() => {
+    fetch();
+  }, []);
+
   return <Route {...rest} render={() => children} />;
 });

src/pages/board/boardList/BoardListPage.tsx

@@ -4,29 +4,19 @@ import { PageUiStoreImpl } from './BoardListPageUiStore';
 import { Boards, BoardCreateButton } from './components';
 import { DeleteBoardModal } from './components/DeleteBoardModal';
 
-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 { fetchBoards } = usePageUiStore<PageUiStore.BoardList>();
-  const {
-    auth: { fetch, me },
-  } = useRootStore();
+  const { fetch } = usePageUiStore<PageUiStore.BoardList>();
 
   useEffect(() => {
     fetch();
-    fetchBoards();
-  }, [fetch]);
+  }, []);
 
   return (
     <>
-      {me?.isAdmin || me?.isCircleLeader || me?.isPresident ? (
-        <Header title="게시판 목록" RightComponent={<BoardCreateButton />} />
-      ) : (
-        <Header title="게시판 목록" RightComponent={<UniformLogo />} />
-      )}
+      <Header title="게시판 목록" RightComponent={<BoardCreateButton />} />
 
       <PageBody>
         <BodyScreen>

src/pages/board/boardList/BoardListPageUiStore.ts

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

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

@@ -1,26 +1,37 @@
 import styled from '@emotion/styled';
-import AddBoxIcon from '@mui/icons-material/AddBox';
+import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
 import { observer } from 'mobx-react-lite';
 import { generatePath, useParams } from 'react-router-dom';
 
+import { UniformLogo } from '@/assets';
 import { ClearLink, RightButtonWrapper } from '@/components';
 import { PAGE_URL, PostParams } from '@/configs/path';
-import { usePageUiStore } from '@/hooks';
+import { useRootStore } from '@/stores/RootStore';
 
 export const BoardCreateButton: React.FC = observer(() => {
+  const {
+    auth: { me },
+  } = useRootStore();
+
   return (
-    <Wrapper to={generatePath(PAGE_URL.BoardCreate)}>
-      <Icon fontSize="large" />
-    </Wrapper>
+    <>
+      {me && (me.isAdmin || me.isCircleLeader || me.isPresident) ? (
+        <Wrapper to={generatePath(PAGE_URL.BoardCreate)}>
+          <Icon fontSize="large" />
+        </Wrapper>
+      ) : (
+        <UniformLogo />
+      )}
+    </>
   );
 });
 
 const Wrapper = styled(ClearLink)`
   ${RightButtonWrapper}
 `;
 
-const Icon = styled(AddBoxIcon)`
+const Icon = styled(PlaylistAddIcon)`
   position: absolute;
-  top: 11px;
-  right: 20px;
+  top: 9px;
+  right: 25px;
 `;