Feat admin chargpage '관리자 충전 페이지 작업 중'

COMAtching · Aug 28, 2024 · 5526ce5 · 5526ce5
1 parent 8e430f1
commit 5526ce5
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 10 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -37,7 +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="/adminpage/*" element={<Adminpage />} />          
             <Route path="/admin-select" element={<AdminSelect />} />
             <Route path="/loading" element={<Loading />} />
             <Route path="/code-reader" element={<CodeReader />} />

diff --git a/src/components/AdminRequestListContainer.jsx b/src/components/AdminRequestListContainer.jsx
@@ -139,6 +139,7 @@ function AdminRequestListContainer({ request, setRequests }) {
           alt="cost"
           className={adminRequestListItemImg}
         />
+        <p className={adminRequestListElementUserIDID}> 입금액</p>
         <input
           type="text"
           value={value.add_point}

diff --git a/src/components/Adminnavbar.jsx b/src/components/Adminnavbar.jsx
@@ -1,14 +1,17 @@
 import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import '../css/components/AdminNavbar.css';
 
 function AdminNavbar() {
     const [activeMenu, setActiveMenu] = useState('main');
     const [menuOpen, setMenuOpen] = useState(false);
     const [chargeRequestCount, setChargeRequestCount] = useState(3);
+    const navigate = useNavigate();
 
-    const handleMenuClick = (menu) => {
+    const handleMenuClick = (menu, path) => {
         setActiveMenu(menu);
         setMenuOpen(false);
+        navigate(path); // 네비게이트 함수로 경로 이동
     };
 
     const toggleMenu = () => {
@@ -28,6 +31,7 @@ function AdminNavbar() {
             const data = JSON.parse(event.data);
             if (data.topic === '/topic/chargeRequests') {
                 setChargeRequestCount(data.requestCount); // 충전 요청 건수를 상태에 저장
+
             }
         };
 
@@ -54,13 +58,13 @@ function AdminNavbar() {
             <div className={`menu ${menuOpen ? 'open' : ''}`}>
                 <div
                     className={`menu-item ${activeMenu === 'main' ? 'active' : ''}`}
-                    onClick={() => handleMenuClick('main')}
+                    onClick={() => handleMenuClick('main', '/adminpage')}
                 >
                     Main
                 </div>
                 <div
                     className={`menu-item ${activeMenu === 'request' ? 'active' : ''}`}
-                    onClick={() => handleMenuClick('request')}
+                    onClick={() => handleMenuClick('request', '/adminpage/charge-requests')}
                 >
                     충전요청
                     {chargeRequestCount > 0 && (
@@ -69,13 +73,13 @@ function AdminNavbar() {
                 </div>
                 <div
                     className={`menu-item ${activeMenu === 'user-management' ? 'active' : ''}`}
-                    onClick={() => handleMenuClick('user-management')}
+                    onClick={() => handleMenuClick('user-management', '/adminpage/user-management')}
                 >
                     가입자관리
                 </div>
                 <div
                     className={`menu-item ${activeMenu === 'team-management' ? 'active' : ''}`}
-                    onClick={() => handleMenuClick('team-management')}
+                    onClick={() => handleMenuClick('team-management', '/adminpage/team-management')}
                 >
                     팀관리
                 </div>

diff --git a/src/css/pages/ChargeRequests.css b/src/css/pages/ChargeRequests.css
@@ -0,0 +1,4 @@
+.container{
+  margin-top: 100px;
+
+}
diff --git a/src/pages/Adminmain.jsx b/src/pages/Adminmain.jsx
@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function AdminmainPage() {
+    const [data, setData] = useState(null);
+
+    useEffect(() => {
+        // API 호출
+        axios.get('/adminpage')
+            .then(response => {
+                setData(response.data);
+            })
+            .catch(error => {
+                console.error('There was an error fetching the data!', error);
+            });
+    }, []);
+
+    return (
+        <div>
+            <h1>Main Page</h1>
+            {data ? (
+                <div>
+                    <h2>Admin Data:</h2>
+                    <pre>{JSON.stringify(data, null, 2)}</pre>
+                </div>
+            ) : (
+                <p>Loading data...</p>
+            )}
+        </div>
+    );
+}
+
+export default AdminmainPage;
diff --git a/src/pages/AdminpageCharge.jsx b/src/pages/AdminpageCharge.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import AdminNavbar from '../components/Adminnavbar';
+
+function AdminpageCharge() {
+    return (
+        <div className="login-container">
+            <AdminNavbar/>
+        </div>
+    );
+}
+
+export default AdminpageCharge;
diff --git a/src/pages/Adminpage_login.jsx b/src/pages/Adminpage_login.jsx
@@ -1,12 +1,23 @@
 import React from 'react';
+import { Route, Routes } from 'react-router-dom';
 import AdminNavbar from '../components/Adminnavbar';
+import AdminmainPage from './Adminmain';
+import ChargeRequestsPage from './ChargeRequestsPage';
+import UserManagementPage from './UserManagementPage';
+import TeamManagementPage from './TeamManagementPage';
 
-function Adminpagelogin() {
+function Adminpage() {
     return (
-        <div className="login-container">
-            <AdminNavbar/>
+        <div>
+            <AdminNavbar />
+            <Routes>
+                <Route path="/" element={<AdminmainPage />} />
+                <Route path="/charge-requests" element={<ChargeRequestsPage />} />
+                <Route path="/user-management" element={<UserManagementPage />} />
+                <Route path="/team-management" element={<TeamManagementPage />} />
+            </Routes>
         </div>
     );
 }
 
-export default Adminpagelogin;
+export default Adminpage;
diff --git a/src/pages/ChargeRequestsPage.jsx b/src/pages/ChargeRequestsPage.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import '../css/pages/ChargeRequests.css'
+import AdminRequestList from '../components/AdminRequestList';
+function ChargeRequestsPage() {
+    return (
+        <div className='container'>
+
+            {/* 충전 요청 관련 기능 구현 */}
+            <AdminRequestList />
+        </div>
+    );
+}
+
+export default ChargeRequestsPage;
diff --git a/src/pages/TeamManagementPage.jsx b/src/pages/TeamManagementPage.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+function TeamManagementPage() {
+    return (
+        <div>
+            <h1>Team Management</h1>
+            <p>This is the Team Management page.</p>
+            {/* 팀 관리 관련 기능 구현 */}
+        </div>
+    );
+}
+
+export default TeamManagementPage;
diff --git a/src/pages/UserManagementPage.jsx b/src/pages/UserManagementPage.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+function UserManagementPage() {
+    return (
+        <div>
+            <h1>User Management</h1>
+            <p>This is the User Management page.</p>
+            {/* 사용자 관리 관련 기능 구현 */}
+        </div>
+    );
+}
+
+export default UserManagementPage;