admin 권한 추가

frontend/src/auth/admin.tsx

-import { get } from "mongoose";
 import React, { FormEvent, useEffect, useState, MouseEvent } from "react";
-import { Link } from "react-router-dom";
+import { Link, Navigate } from "react-router-dom";
 import { mainimgApi } from "../apis";
-// import { profileUpload } from "../apis/profile.api";
 import { catchErrors } from "../helpers";
 import { MainimgType } from "../types";
 import { MySlide } from "./adminslide";
-
-// export interface ImgState {
-//     state: MainimgType;
-// }
+import { useAuth } from "./auth.context";
 
 export default function Admin() {
   // 이미지 전체 불러오기
   const [getimgs, setGetimgs] = useState<MainimgType[]>([]);
-
-    async function imgsData() {
-        const imgs = await mainimgApi.getmainimg();
-        setGetimgs(imgs);
-    }
-    useEffect(() => {
-        imgsData();
-    }, []);
   // 이미지 추가하기
   const [addimg, setAddimg] = useState<MainimgType>({
     _id: "",
@@ -30,12 +17,25 @@ export default function Admin() {
     title: "",
     fileInfo: { originalfilename: "", newfilename: "" },
   });
-
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [addSuccess, setAddSuccess] = useState(false);
   const [delSuccess, setDelSuccess] = useState(false);
   const [file, setFile] = useState<File>();
+  const { user } = useAuth();
+
+  if (user.role !== "admin") {
+    alert("이용 권한이 없습니다.");
+    return <Navigate to={"/"} replace />;
+  }
+
+  async function imgsData() {
+    const imgs = await mainimgApi.getmainimg();
+    setGetimgs(imgs);
+  }
+  useEffect(() => {
+    imgsData();
+  }, []);
 
   function handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
     const { name, value } = event.currentTarget;
@@ -68,11 +68,8 @@ export default function Admin() {
         const res = await mainimgApi.mainimg(formdata);
         console.log("확인 중 ", res);
         alert("img 추가되었습니다");
-                setGetimgs([...getimgs, res])
-            }
-            else (
-                console.log("file === undefined")
-            )
+        setGetimgs([...getimgs, res]);
+      } else console.log("file === undefined");
     } catch (error) {
       console.log("에러발생");
       catchErrors(error, setError);
@@ -81,7 +78,6 @@ export default function Admin() {
     }
   }
 
-
   // 이미지 삭제하기
   async function handleDeleteClick(event: MouseEvent<HTMLButtonElement>) {
     try {
@@ -94,8 +90,8 @@ export default function Admin() {
         setDelSuccess(true);
         setError("");
         alert("img 삭제되었습니다");
-                const deleteimg = getimgs.filter(pic=>picId!==pic._id)
-                setGetimgs(deleteimg)
+        const deleteimg = getimgs.filter((pic) => picId !== pic._id);
+        setGetimgs(deleteimg);
       } else {
         return false;
       }
@@ -110,9 +106,6 @@ export default function Admin() {
   let limit = 15;
   const numPages = Math.ceil(getimgs.length / 15);
 
-    // const location = useLocation() as ImgState;
-    // const img = location.state;
-
   const slides = [];
   for (let i = 0; i < numPages; i++) {
     const k = [
@@ -122,7 +115,9 @@ export default function Admin() {
           <div key={index}>
             <div className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}>
               <img
-                                src={"http://localhost:3000/images/" + picture.fileInfo.newfilename}
+                src={
+                  "http://localhost:3000/images/" + picture.fileInfo.newfilename
+                }
                 className="w-full h-10 md:h-20 object-center"
               />
               <p className="text-center text-xs">{picture.title}</p>

frontend/src/home/header.tsx

@@ -39,7 +39,7 @@ export default function Header() {
                 프로필
               </Link>
               <div className="border-0 border-r-2 border-black "></div>
-              <div></div>
+              {user.role === "admin" ? <Link to={"/admin"}>어드민</Link> : null}
               <button
                 className="ml-2 text-xs"
                 onClick={() => {

frontend/src/types/index.tsx

@@ -4,6 +4,7 @@ export interface IUser {
   email?: string;
   isLoggedIn: boolean;
   _id?: string;
+  role?: string;
 }
 
 export interface LoginUser {