Feat/#97 admin page

src/App.js

@@ -13,13 +13,15 @@ import MyPageAccount from './pages/MyPage/MyPageAccount';
 import Complete from './pages/Education/Complete';
 import NotFound from './pages/Error/NotFound';
 import EmailVerification from './pages/Join/EmailVerification';
+import AdminPage from './pages/Admin/AdminPage';
 function App() {
   return (
     <ThemeProvider theme={Theme}>
       <GlobalStyle />
       <Header />
       <Routes>
         <Route path='/' element={<Main />} />
+        <Route path='/admin' element={<AdminPage />} />
         <Route path='/education' element={<EducationSelect />} />
         <Route path='/education/basic' element={<Game type='basic' />} />
         <Route path='/education/advanced' element={<Game type='advanced' />} />

src/components/Header.js

@@ -12,6 +12,7 @@ const Header = () => {
   const loginState = JSON.parse(sessionStorage.getItem('loginState'));
   const location = useLocation();
   const [nowPath, setNowPath] = useState('');
+  const [isAdmin, setIsAdmin] = useState(false);
 
   const onClickLogout = (data) => {
     if (confirm('로그아웃 하시겠습니까?')) {
@@ -34,6 +35,7 @@ const Header = () => {
     if (loginState) {
       GetUserInfo((res) => {
         setUserName(res.data.user.nickname);
+        console.log(res);
       });
     }
   }, []);
@@ -43,7 +45,14 @@ const Header = () => {
     console.log(nowPath);
   }, [location]);
 
+  useEffect(() => {
+    GetUserInfo((res) => {
+      if (res.data.user.role === 'ADMIN') setIsAdmin(true);
+    });
+  }, []);
+
   return (
+    // 관리자 아이디로 로그인 했을시 헤더에 따로 띄우기
     <>
       {nowPath === '/' ||
       nowPath === '/education' ||
@@ -60,6 +69,9 @@ const Header = () => {
           <Learning onClick={() => navigate('/education')}>학습하기</Learning>
           {loginState ? (
             <SignBox>
+              {isAdmin && (
+                <GoAdmin onClick={() => navigate('/admin')}>admin</GoAdmin>
+              )}
               <UserPageBtn onClick={() => navigate('/mypage/education')}>
                 {userName} 님 환영합니다!
               </UserPageBtn>
@@ -100,6 +112,7 @@ const SignBox = styled.div`
   margin-left: auto;
   margin-right: 67px;
   display: flex;
+  //justify-content: center;
 `;
 const SignBtn = styled.button`
   height: 27px;
@@ -132,3 +145,12 @@ const LogoIcon = styled.img`
   margin-left: 30px;
   cursor: pointer;
 `;
+
+const GoAdmin = styled.button`
+  width: 50px;
+  background: gold;
+  font-size: 15px;
+  font-weight: 700;
+  color: ${({ theme }) => theme.colors.RED};
+  padding-right: 20px;
+`;

src/pages/Admin/AdminPage.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const AdminPage = () => {
+  return (
+    <>
+      <AdminPageBox>여기는 어드민 페이지 입니다. . . .</AdminPageBox>
+    </>
+  );
+};
+
+export default AdminPage;
+
+const AdminPageBox = styled.div`
+  width: 100%;
+`;