Feat adminpage 'adminpage 구현 완료'

src/App.jsx

@@ -17,6 +17,7 @@ import Redirection from "./pages/RedirectionPage.jsx";
 import OpenExternalBrowser from "./OpenExternalBrowser.jsx";
 import Userinfo from "./pages/User_info_page.jsx";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Adminpage from "./pages/Adminpage.jsx";
 import "./App.css";
 import "./axiosConfig.jsx";
 import Matching from "./pages/Matching.jsx";
@@ -36,6 +37,7 @@ export default function App() {
             <Route path="/match" element={<Match />} />
             <Route path="/check-result" element={<Checkresult />} />
             <Route path="/admin" element={<Admin />} />
+            <Route path="/adminpage" element={<Adminpage />} />
             <Route path="/admin-select" element={<AdminSelect />} />
             <Route path="/loading" element={<Loading />} />
             <Route path="/code-reader" element={<CodeReader />} />

src/components/Adminnavbar.jsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import '../css/components/AdminNavbar.css';
+
+function AdminNavbar() {
+    const [activeMenu, setActiveMenu] = useState('main');
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [chargeRequestCount, setChargeRequestCount] = useState(3);
+
+    const handleMenuClick = (menu) => {
+        setActiveMenu(menu);
+        setMenuOpen(false);
+    };
+
+    const toggleMenu = () => {
+        setMenuOpen(!menuOpen);
+    };
+
+    // This useEffect hook will simulate fetching data from the backend
+    useEffect(() => {
+        // WebSocket 연결 로직 예시
+        const socket = new WebSocket('ws://your-websocket-url');
+
+        socket.onopen = () => {
+            console.log('WebSocket connected');
+        };
+
+        socket.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            if (data.topic === '/topic/chargeRequests') {
+                setChargeRequestCount(data.requestCount); // 충전 요청 건수를 상태에 저장
+            }
+        };
+
+        socket.onclose = () => {
+            console.log('WebSocket disconnected');
+        };
+
+        return () => {
+            socket.close(); // 컴포넌트가 언마운트될 때 WebSocket 연결 해제
+        };
+    }, []);
+
+    return (
+        <div className="admin-navbar">
+            {/* 로고 */}
+            <img src="/assets/admin_logo.svg" alt="Logo" className="logo" />
+
+            {/* 햄버거 메뉴 아이콘 */}
+            <div className="hamburger-menu" onClick={toggleMenu}>
+                &#9776;
+            </div>
+
+            {/* 메뉴 */}
+            <div className={`menu ${menuOpen ? 'open' : ''}`}>
+                <div
+                    className={`menu-item ${activeMenu === 'main' ? 'active' : ''}`}
+                    onClick={() => handleMenuClick('main')}
+                >
+                    Main
+                </div>
+                <div
+                    className={`menu-item ${activeMenu === 'request' ? 'active' : ''}`}
+                    onClick={() => handleMenuClick('request')}
+                >
+                    충전요청
+                    {chargeRequestCount > 0 && (
+                        <span className="request-count">{chargeRequestCount}</span>
+                    )}
+                </div>
+                <div
+                    className={`menu-item ${activeMenu === 'user-management' ? 'active' : ''}`}
+                    onClick={() => handleMenuClick('user-management')}
+                >
+                    가입자관리
+                </div>
+                <div
+                    className={`menu-item ${activeMenu === 'team-management' ? 'active' : ''}`}
+                    onClick={() => handleMenuClick('team-management')}
+                >
+                    팀관리
+                </div>
+            </div>
+            <div className={`admin-info ${menuOpen ? 'open' : ''}`}>
+                <p className="admin-info_admin">관리자 오준석님</p>
+                <p className='admin-info_class'>가톨릭대학교</p>
+            </div>
+        </div>
+    );
+}
+
+export default AdminNavbar;

src/css/components/AdminNavbar.css

@@ -0,0 +1,151 @@
+.admin-navbar {
+  position: fixed; /* 화면 위에 고정 */
+  top: 0;
+  left: 0;
+  width: calc(100vw - 48px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: white;
+  padding: 10px 20px;
+  border-bottom: 2px solid #e0e0e0;
+  z-index: 1000; /* 다른 요소들 위에 표시되도록 z-index 설정 */
+}
+
+.admin-navbar .logo {
+  width: 140px;
+  height: 40px; /* 로고 이미지 크기 조정 */
+  margin-left: 24px;
+}
+
+.admin-navbar .menu {
+  display: flex;
+  gap: 48px;
+}
+
+.admin-navbar .menu-item {
+  color: gray;
+  font-weight: normal;
+  font-size: 24px;
+  cursor: pointer;
+
+  transition: color 0.3s, font-weight 0.3s;
+
+  position: relative; /* 밑줄을 추가하기 위해 상대 위치 설정 */
+}
+
+.admin-navbar .menu-item.active {
+  color: black;
+  font-weight: bold;
+}
+
+.admin-navbar .menu-item.active:after {
+  content: '';
+  position: absolute;
+  bottom: -12px; /* navbar의 경계선에 맞추기 위한 위치 설정 */
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: black;
+}
+
+.admin-navbar .admin-info {
+  background-color: #e0e0e0;
+  padding: 8px 12px;
+  width: 110px;
+  height: 40px;
+}
+
+.admin-info_admin {
+  font-size: 10px;
+  color: black;
+  font-weight: bold;
+  margin: 0px;
+}
+
+.admin-info_class {
+  font-size: 10px;
+  color: #797777;
+}
+.admin-navbar .hamburger-menu {
+  display: none;
+  font-size: 30px;
+  cursor: pointer;
+}
+/* 반응형 디자인을 위한 미디어 쿼리 */
+@media (max-width: 700px) {
+  .admin-navbar {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+    width: 100%;
+  }
+
+  .admin-navbar .logo {
+    margin-bottom: 10px;
+  }
+
+  .admin-navbar .hamburger-menu {
+    display: block;
+  }
+  .hamburger-menu{
+    position: fixed;
+    top: 5px;
+    right: 10px;
+  }
+  .admin-navbar .menu {
+    flex-direction: column;
+    gap: 10px;
+    width: 50%;
+    display: none;
+  }
+
+  .admin-navbar .menu.open {
+    display: flex;
+  }
+
+  .admin-navbar .menu-item {
+    font-size: 24px;
+    margin-right: 0;
+    text-align: left;
+  }
+
+  .admin-navbar .menu-item.active:after {
+    bottom: -8px;
+    height: 2px;
+  }
+
+  .admin-navbar .admin-info {
+    width: 100%;
+    background-color: #f0f0f0;
+    padding: 10px;
+    margin-top: 10px;
+    text-align: left;
+    display: none;
+  }
+}
+.request-count {
+  background-color: #FF775E;
+  color: white;
+  border-radius: 50%;
+  padding: 2px 6px;
+  font-size: 10px;
+  margin-left: 3px;
+}
+@media (max-width: 480px) {
+  .admin-navbar .menu-item {
+    font-size: 16px;
+  }
+
+  .admin-navbar .admin-info {
+    padding: 8px;
+  }
+
+  .admin-navbar .logo {
+    width: 100px;
+    height: 30px;
+  }
+  .admin-info.open {
+    display: block;
+  }
+}