관리자 확인페이지

src/App.js

@@ -13,6 +13,7 @@ import Mypage from './pages/mypage';
 import Adminpage from './pages/adminpage';
 import Adminhome from './pages/adminhome';
 import Adminprofile from './pages/adminprofile';
+import Isadmin from './pages/isadmin';
 
 function App() {
   const navigate = useNavigate();
@@ -49,6 +50,7 @@ function App() {
           <Route path='*' element={<div>없는 페이지</div>}></Route>
         </Route>
         {/*관리자 페이지*/ }
+        <Route path='/isadmin' element={<Isadmin navigate={navigate}></Isadmin>}></Route>
         <Route path="/adminpage" element={
           <Adminpage></Adminpage>}>
           <Route path="" element={

src/pages/adminpage.js

@@ -3,21 +3,21 @@ import { useState, useEffect } from 'react';
 import { Button, Container, Nav, Navbar, Row, Col } from 'react-bootstrap';
 import { Routes, Route, Link, useNavigate, Outlet, useLocation } from 'react-router-dom';
 import Animore_logo from '../img/13.png';
+import Isadmin from './isadmin';
 
 function Adminpage() {
   const navigate = useNavigate();
   const location = useLocation();
-
   const [activeItem, setActiveItem] = useState('/');
-
+  
   const handleItemClick = (path) => {
     setActiveItem(path);
     navigate(path);
   };
 
   return (
     <div className="Adminpage">
-      {/*location 객체는 pathname 속성을 포함하고 있으므로, 
+      {/* location 객체는 pathname 속성을 포함하고 있으므로, 
       location.pathname을 사용하여 경로를 비교해야 합니다. */
         location.pathname === '/adminpage/withdrawalConf' ? null : <Header navigate={navigate}></Header>
       }

src/pages/isadmin.css

@@ -0,0 +1,66 @@
+.admininfo {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    margin: auto;
+    width: 90%;
+}
+
+.message1 {
+    margin-top: 12px;
+    font-size: 24px;
+    white-space: nowrap;
+}
+
+.message2 {
+    margin-top: 12px;
+    font-size: 18px;
+    color: #808080;
+    white-space: nowrap;
+}
+
+#password {
+    border: 1px solid #808080;
+    width: 50%;
+}
+
+.confirm-button2 {
+    margin-top: 3%;
+    margin-bottom: 5%;
+    height: 50px;
+    width: 50%;
+    padding: 8px 16px;
+    background-color: #808080;
+    color: #ffffff;
+    border: 2px solid #808080;
+    font-size: 17px;
+    font-weight: bold;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+
+.memberinfo h2 {
+    font-weight: bold;
+}
+
+.content {
+    font-weight: bold;
+    padding-top: 30px;
+    border-top: 2px solid #000;
+    margin-top: 30px;
+}
+
+.password-options {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 25px;
+}
+
+.password-options p {
+    font-size: 16px;
+    color: #808080;
+    white-space: nowrap;
+}

src/pages/isadmin.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import './isadmin.css';
+import key from '../img/key.png';
+
+function Isadmin(props) {
+    let password = '1234';
+    let [입력값, 입력값변경] = useState('');
+
+    return (
+        <div className="admininfo">
+            <h2>비밀번호 재확인</h2>
+            <div className="content">
+                <img src={key} alt="열쇠" width="50"></img>
+                <form>
+                    <p className="message1">비밀번호 재확인</p>
+                    <p className="message2">회원님은 관리자전용 계정입니다.</p>
+                    <p className="message2">2차 비밀번호를 입력해주세요</p>
+                    <input type="password" id="password" name="password" required placeholder="비밀번호 입력"
+                        onChange={(e) => { 입력값변경(e.target.value) }}
+                    />
+                    <div>
+                        <button type="submit" className="confirm-button2"
+                            onClick={()=>{
+                                입력값 === password ? props.navigate("/adminpage") : alert('비밀번호가 틀렸습니다')
+                            }}
+                        >확인</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default Isadmin;