From 5526ce5883dcb8611499e9645a2139f5ea3a408f Mon Sep 17 00:00:00 2001
From: ohjunseok <ojspp000@naver.com>
Date: Wed, 28 Aug 2024 17:47:49 +0900
Subject: [PATCH] =?UTF-8?q?Feat=20admin=20chargpage=20'=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=EC=9E=90=20=EC=B6=A9=EC=A0=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=A4=91'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                  |  2 +-
 src/components/AdminRequestListContainer.jsx |  1 +
 src/components/Adminnavbar.jsx               | 14 ++++++---
 src/css/pages/ChargeRequests.css             |  4 +++
 src/pages/Adminmain.jsx                      | 33 ++++++++++++++++++++
 src/pages/AdminpageCharge.jsx                | 12 +++++++
 src/pages/Adminpage_login.jsx                | 19 ++++++++---
 src/pages/ChargeRequestsPage.jsx             | 14 +++++++++
 src/pages/TeamManagementPage.jsx             | 13 ++++++++
 src/pages/UserManagementPage.jsx             | 13 ++++++++
 10 files changed, 115 insertions(+), 10 deletions(-)
 create mode 100644 src/css/pages/ChargeRequests.css
 create mode 100644 src/pages/Adminmain.jsx
 create mode 100644 src/pages/AdminpageCharge.jsx
 create mode 100644 src/pages/ChargeRequestsPage.jsx
 create mode 100644 src/pages/TeamManagementPage.jsx
 create mode 100644 src/pages/UserManagementPage.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 48dd0b8..0b4ae33 100644
--- 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
index a0e58c4..d790271 100644
--- 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
index f7ba240..2c894d8 100644
--- 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
new file mode 100644
index 0000000..515d752
--- /dev/null
+++ b/src/css/pages/ChargeRequests.css
@@ -0,0 +1,4 @@
+.container{
+  margin-top: 100px;
+  
+}
\ No newline at end of file
diff --git a/src/pages/Adminmain.jsx b/src/pages/Adminmain.jsx
new file mode 100644
index 0000000..192c292
--- /dev/null
+++ 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
new file mode 100644
index 0000000..1c7b65b
--- /dev/null
+++ 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
index c31b429..ce39b89 100644
--- 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;
\ No newline at end of file
diff --git a/src/pages/ChargeRequestsPage.jsx b/src/pages/ChargeRequestsPage.jsx
new file mode 100644
index 0000000..b40d1c6
--- /dev/null
+++ 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
new file mode 100644
index 0000000..3a1e44c
--- /dev/null
+++ 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
new file mode 100644
index 0000000..80beb47
--- /dev/null
+++ 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;