[#47]관리자페이지 디자인

frontend/sweet-red-beans/src/components/Comment/Comment.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import styles from "../../css/Comments.module.css"
 import axios from "axios";
 import { useNavigate } from "react-router";
 import { useSelector } from "react-redux";

frontend/sweet-red-beans/src/components/DMPage/DMDetail.js

@@ -101,22 +101,20 @@ const DMDetail = ({selectedRoom}) => {
         setContents(prev=>[...prev, message]);
     };
 
-
     const onChange = useCallback(
         (e) => {
             setMessage(e.target.value);
         }, []
     )
 
-
-    const disconnect = () => {
-        if(stompClient != null) {
-            stompClient.disconnect();
-        }
-    }
+    useEffect(() => {
+        console.log("아ㅏ아아ㅏ아아아아");
+    }, [])
 
     //이제까지 메시지 내역 조회
     useEffect(() => {
+        setContents([]);
+        setMessage("");
         if(selectedRoom !== undefined){
             axios.get("http://localhost:8080/direct-message/detail", {
                 withCredentials: true,
@@ -139,6 +137,12 @@ const DMDetail = ({selectedRoom}) => {
             })
         });
         setComplete(selectedRoom.is_complete)
+
+        return () => {
+            if(stompClient != null) {
+                stompClient.disconnect();
+            }
+        }
     }, [selectedRoom])
 
     //신뢰도 +1 주는 버튼

frontend/sweet-red-beans/src/components/Modals/Modal.js

@@ -20,11 +20,11 @@ const Modal = (props) => {
               {header}
             </header>
           <main>{props.children}</main>
-          <footer>
-            {/* <button className="close" onClick={close}>
+          {/* <footer>
+            <button className="close" onClick={close}>
               close
-            </button> */}
-          </footer>
+            </button>
+          </footer> */}
         </section>
       ) : null}
     </div>

frontend/sweet-red-beans/src/components/MyPage/MyPageAdmin.js

@@ -2,12 +2,13 @@ import React, { useEffect, useState } from "react";
 import Report from "../Report/Report";
 import axios from "axios";
 import Pagination from "./MyPageDetail/Pagination";
+import style from "../../css/MyPage/MyPageAdmin.module.css";
 
 const MyPageAdmin = () => {
     const [reports, setReports] = useState([]);
     const [reportIsHere, setReportIsHere] = useState(false);
 
-    const [limit, setLimit] = useState(10);
+    const [limit, setLimit] = useState(15);
     const [page, setPage] = useState(1);
     const offset = (page - 1) * limit;
 
@@ -27,21 +28,33 @@ const MyPageAdmin = () => {
 
     return (
         <>
-        {reportIsHere ? reports.slice(offset, offset + limit).map((item, index) => (
-            <article key={index}>
-            <Report report={item}/>
-            </article>
-        )) : null}
+        <div className={style.layout}>
+            <div className={style.reportBox}>
+                <div className={style.topBar}>
+                    <div>승인여부</div>
+                    <div>신고자</div>
+                    <div>신고 받은 사람</div>
+                    <div>신고한 시간</div>
+                </div>
+                <main>
+                {reportIsHere ? reports.slice(offset, offset + limit).map((item, index) => (
+                    <article key={index}>
+                        <Report report={item}/>
+                    </article>
+                )) : null}
+                </main>
+            </div>
+            <footer>
+                {reports !== undefined ? 
+                <Pagination total={reports.length}
+                limit={limit}
+                page={page}
+                setPage={setPage}/>
+                : null
+                }
+            </footer>
+        </div>
 
-        <footer>
-            {reports !== undefined ? 
-            <Pagination total={reports.length}
-            limit={limit}
-            page={page}
-            setPage={setPage}/>
-            : null
-            }
-        </footer>
         </>
     )
 }

frontend/sweet-red-beans/src/components/Report/Report.js

@@ -1,46 +1,123 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+import style from "../../css/Report/Report.module.css";
+import Modal from "../Modals/Modal";
 
 const Report = ({report}) => {
+    const navigation = useNavigate();
+    const [modalOpen, setModalOpen] = useState(false);
     const [content, setContent] = useState("");
     const [date, setDate] = useState("");
     const [nickname, setNickname] = useState("");
-    const [disable, setDisable] = useState(false);
     const [reportedNickname, setReportedNickname] = useState("");
+    const [isComplete, setIsComplete] = useState(false);
+
+    const openModal = () => {
+        setModalOpen(true);
+    };
+    const closeModal = () => {
+        setModalOpen(false);
+    };
 
     useEffect(() => {
         setContent(report.report_content);
         setDate(report.written_date)
         setNickname(report.nickname);
         setReportedNickname(report.reported_nickname)
-    }, [])
+        setIsComplete(report.is_complete);
+        console.log(report);
+    }, [report])
+
+    const useConfirm = (message = null, onConfirm, onCancel) => {
+        if (!onConfirm || typeof onConfirm !== "function") {
+            return;
+        }
+        if (onCancel && typeof onCancel !== "function") {
+            return;
+        }
+
+        const confirmAction = () => {
+            if (window.confirm(message)) {
+            onConfirm();
+            } else {
+            onCancel();
+            }
+        };
+
+        return confirmAction;
+    };
 
-    const reportAcceptClick = () => {
+    const confirm = () => {
         axios.patch('http://localhost:8080/manager/report', {
-            user_id:report.user_id
+            user_id:report.reported_nickname
         },
         {withCredentials: true}
         )
         .then((response) => {
         if(response.data){
-            setDisable(true);
             console.log(response.data)
         }
         })
         .catch((error) => {
             console.log(error);
         })
+        closeModal();
+        navigation(0);
+    }
+
+    const cancelConfirm = () => console.log("승인 취소")
+
+    const reportAcceptClick = useConfirm(
+        "승인하시겠습니까?",
+        confirm,
+        cancelConfirm
+    );
+
+    const parseDate = (written_date) => {
+        const d = new Date(written_date);
+        const year = d.getFullYear();
+        let month = d.getMonth();
+        let date = d.getDate();
+        let hours = d.getHours();
+        let min = d.getMinutes();
+        if(month<10){
+            month = '0'+month;
+        }
+        if(date<10){
+            date = '0'+date;
+        }
+        if(hours<10){
+            hours = '0'+hours;
+        }
+        if(min<10){
+            min = '0'+min;
+        }
+        return (
+            <div>{year}-{month}-{date} {hours} : {min}</div>
+        )
     }
 
     return (
         <>
-        <div>{content}</div>
-        <div>{date}</div>
-        <div>{nickname}</div>
-        <div>신고당한 사람 : {reportedNickname}</div>
-        <div>
-            <button onClick={reportAcceptClick} disabled={disable}>승인 처리하기</button>
+        <Modal open={modalOpen} close={closeModal}>
+            <form className={style.modal}>
+                <div className={style.topArea}>
+                    <div>신고자 : {nickname}</div>
+                    <div>{parseDate(date)}</div>
+                </div>
+                <div>신고 받은 사람 : {reportedNickname}</div>
+                <div>{content}</div>
+                <button onClick={reportAcceptClick}>승인하기</button>
+            </form>
+        </Modal>
+        <div className={style.main} onClick={openModal}>
+            <div className={isComplete ? style.complete : style.incomplete}>{isComplete ? "승인" : "미승인"}</div>
+            <div>{nickname}</div>
+            <div>{reportedNickname}</div>
+            <div>{parseDate(date)}</div>
         </div>
+
         </>
     )
 }

frontend/sweet-red-beans/src/components/TopBar/LogIn.js

@@ -74,9 +74,15 @@ const LogIn = () =>{
         const date = new Date();
         date.setMinutes(date.getMinutes() + 30);
         cookies.set("login", true, {expires: date});
+        cookies.set("user", {
+          authority:response.data.authority,
+          porfileImage:response.data.image_url,
+          nickname:response.data.nickname,
+        }, {expires:date});
 
         setModalOpen(false);
-        navigation(0);
+
+
 
       } else {
         alert("로그인에 실패했습니다.");
@@ -95,6 +101,7 @@ const LogIn = () =>{
     .then(response => {
       if(response.data.result){
         cookies.remove("login")
+        cookies.remove("user")
         navigation(0)
       } else {
         alert("로그아웃에 실패했습니다.");

frontend/sweet-red-beans/src/components/TopBar/NavigationBar.js

@@ -4,8 +4,10 @@ import { Link } from "react-router-dom";
 import styles from "../../css/TopBar/NavigationBar.module.css";
 import BottomCategory from "./BottomCategory";
 import { useNavigate } from "react-router";
+import { Cookies } from "react-cookie";
 
 const NavigationBar = () => {
+    const cookies = new Cookies();
     const navigation = useNavigate();
     const [hide, setHide] = useState(true);
     const [userId, setUserId] = useState(false);
@@ -44,7 +46,14 @@ const NavigationBar = () => {
     }
 
     const mypageClick = () => {
-        navigation('/mypage');
+        const authority = cookies.get("user").authority
+        if(authority === "일반") {
+            navigation('/mypage');
+        }
+        else if (authority === "관리자") {
+            navigation('/adminpage');
+        }
+
     }
 
 

frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js

@@ -8,9 +8,12 @@ import { getCookie } from "../../Cookie";
 import { useNavigate } from "react-router";
 import { useSelector } from "react-redux";
 import userImage from "../../img/user.png";
+import { Cookies } from "react-cookie";
 
 const TransactionPage = () => {
-    const navigation = useNavigate()
+    const cookies = new Cookies();
+    const navigation = useNavigate();
+
     const [modalOpen, setModalOpen] = useState(false);
     const [transactions, setTransactions] = useState([]);
     const [transactionIsHere, setTransactionIsHere] = useState(false);
@@ -32,7 +35,6 @@ const TransactionPage = () => {
     //내 프로필
     const [nickname, setNickname] = useState("");
     const [profileImage, setProfileImage] = useState("");
-    const [reliability, setReliability] = useState(0);
 
     const [fetching, setFetching] = useState(false);
 
@@ -231,21 +233,15 @@ const TransactionPage = () => {
         .catch(error => console.log(error));
 
         //내 프로필 조회
-        axios.get('http://localhost:8080/mypage',{
-          withCredentials: true ,
-        })
-        .then(response => {
-            setNickname(response.data.user.nickname);
-            setProfileImage(response.data.user.profile_url);
-            setReliability(response.data.user.reliability);
-        })
-        .catch(error => {
-            if(error.response.status === 401){
-              setNickname("익명");
-              setProfileImage(userImage);
-              setReliability(0);
-            }
-        });
+        if(cookies.get("user")){
+          setNickname(cookies.get("user").nickname);
+          setProfileImage(cookies.get("user").porfileImage);
+        }
+        else {
+          setNickname("익명");
+          setProfileImage(userImage);
+        }
+
     }, [])
 
     useEffect(()=>{

frontend/sweet-red-beans/src/css/DMPage/DMList.module.css

@@ -23,5 +23,4 @@
     border-radius: 20px;
     background-clip: padding-box;
     border: 4px solid transparent;
-
 }