[#56]Feat: 자유게시판 구현

Sweet-red-beans · Mar 24, 2022 · f43ced7 · f43ced7
1 parent 4fc871e
commit f43ced7
Show file tree

Hide file tree

Showing 149 changed files with 20,679 additions and 4,699 deletions.
diff --git a/frontend/sweet-red-beans/package-lock.json b/frontend/sweet-red-beans/package-lock.json
diff --git a/frontend/sweet-red-beans/package.json b/frontend/sweet-red-beans/package.json
@@ -4,22 +4,23 @@
   "private": true,
   "dependencies": {
     "@stomp/stompjs": "^6.1.2",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.25.0",
     "react": "^17.0.2",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
-    "react-router": "^6.2.1",
-    "react-router-dom": "^6.2.1",
-    "react-scripts": "5.0.0",
+    "react-router": "^6.2.2",
+    "react-router-dom": "^6.2.2",
+    "react-scripts": "^5.0.0",
     "react-slick": "^0.28.1",
     "react-stomp": "^5.1.0",
+    "react-switch": "^6.0.0",
     "redux": "^4.1.2",
     "slick-carousel": "^1.8.1",
-    "sockjs-client": "^1.5.2",
+    "sockjs-client": "^1.6.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/frontend/sweet-red-beans/public/index.html b/frontend/sweet-red-beans/public/index.html
@@ -24,6 +24,19 @@
         -moz-osx-font-smoothing: grayscale;*/
       }
 
+      body::-webkit-scrollbar{
+        width: 15px;
+      }
+
+      body::-webkit-scrollbar-thumb{
+        width: 15px;
+        background-color: #C4C4C4;
+        border-radius: 20px;
+        margin: 5px;
+        background-clip: padding-box;
+        border: 4px solid transparent;
+      }
+
       /*code {
         font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
           monospace;

diff --git a/frontend/sweet-red-beans/src/App.js b/frontend/sweet-red-beans/src/App.js
@@ -1,25 +1,18 @@
 import React from 'react';
-import TopBar from './components/TopBar/TopBar';
 import MainContent from './components/MainContent/MainContent';
-import {Route, Routes} from "react-router-dom";
-import SignUp from './components/SignUp/SignUp';
-import MainPage from './components/MainPage/MainPage';
-import EventDetailPage from "./components/EventDetailPage/EventDetailPage";
 import { Provider } from 'react-redux';
 import store from './store';
-import EventPage from './components/EventPage/EventPage';
-import InformationSharePage from './components/InformationShares/InformationSharePage';
-import InformationShareWritePage from './components/InformationShares/InformationShareWritePage';
-import InformationShareDetailPage from './components/InformationShares/InformationShareDetailPage';
-import TransactionPage from './components/TransactionPage/TransactionPage';
-import DMPage from './components/DMPage/DMPage';
 import style from './css/App/App.module.css';
+import Footer from './components/Footer/Footer';
 
 function App() {
   return (
     <div className={style.App}>
         <Provider store={store}>
           <MainContent/>
+          <footer className={style.footer}>
+            <Footer/>
+          </footer>
         </Provider>
     </div>
   );

diff --git a/frontend/sweet-red-beans/src/components/Comment/Comment.js b/frontend/sweet-red-beans/src/components/Comment/Comment.js
@@ -1,9 +1,9 @@
 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";
 import style from "../../css/Comment/Comment.module.css";
+import { parseDate } from "../../parseDate/parseDate";
 
 const Comment = ({comment}) => {
     console.log("댓글 렌더");
@@ -60,37 +60,12 @@ const Comment = ({comment}) => {
         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 (
-            `${year}-${month}-${date} ${hours} : ${min}`
-        )
-    }
-
-    console.log(comment.comment_nickname);
     return (
         <>
         <div className={style.comment}>
             <div className={style.topBar}>
-                <div>{comment.comment_nickname}</div>
+
+                <div>{comment.user_status === "정지" || comment.user_status === "탈퇴" ? "(알수없음)" : comment.comment_nickname}</div>
                 <div>{parseDate(comment.comment_written_date)}</div>
             </div>
 

diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js b/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js
@@ -4,16 +4,22 @@ import SockJS from "sockjs-client";
 import SockJsClient from 'react-stomp';
 import Stomp from "stompjs";
 import axios from "axios";
-import Modal from "../../components/Modals/ReportModal";
+import Modal from "../../components/Modals/TransactionModal";
 import style from "../../css/DMPage/DMDetail.module.css";
 import { useDispatch, useSelector } from "react-redux";
 import { SELECTED_DM } from "../../actions/types";
+import { parseDate } from "../../parseDate/parseDate";
+import { Cookies } from "react-cookie";
+import { useNavigate } from "react-router";
+import user from "../../img/user.png";
 
 let stompClient = null;
 
 //props를 selectedRoom으로 바꾸고 roomId는 selectedRoom.chat_room_id으로 바꾸기
 //transaction_id 값 바꾸기
 const DMDetail = ({selectedRoom}) => {
+    const navigation = useNavigate();
+
     const [modalOpen, setModalOpen] = useState(false);
 
     const [reportContent, setReportContent] = useState("");
@@ -60,6 +66,11 @@ const DMDetail = ({selectedRoom}) => {
 
     //전송 버튼 눌렀을 때
     const sendClick = () => {
+
+        // if(!cookies.get("login")) {
+        //     alert("로그인을 먼저 해주세요");
+        //     navigation('/')
+        // }
         sendMessage(message);
         //서버에서 받아올 때처럼 비슷한 형식으로 넣어주기 위해
         setMessage("");
@@ -101,22 +112,17 @@ 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(selectedRoom);
+        setContents([]);
+        setMessage("");
         if(selectedRoom !== undefined){
             axios.get("http://localhost:8080/direct-message/detail", {
                 withCredentials: true,
@@ -138,6 +144,13 @@ const DMDetail = ({selectedRoom}) => {
                 addMessage(newMessage);
             })
         });
+        setComplete(selectedRoom.is_complete)
+
+        return () => {
+            if(stompClient != null) {
+                stompClient.disconnect();
+            }
+        }
     }, [selectedRoom])
 
     //신뢰도 +1 주는 버튼
@@ -254,48 +267,23 @@ const DMDetail = ({selectedRoom}) => {
 
     }, [imgFile])
 
-    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 (
-            `${year}-${month}-${date} ${hours}:${min}`
-        )
-    }
-
     return (
         <>
-        <Modal open={modalOpen} close={closeModal} header="로그인">
-        <form>
-            신고사유를 적어주세요
+        <Modal open={modalOpen} close={closeModal} header="신고하기">
+        <form className={style.modal}>
+            <div>신고사유를 적어주세요</div>
             <div>
-            <textarea value={reportContent} onChange={reportContentChange} style={{width:"400px", height:"200px", cols:"20"}}></textarea>
-            <button onClick={reportClick}>신고하기</button>
+                <textarea value={reportContent} onChange={reportContentChange}></textarea>
             </div>
+            <button onClick={reportClick}>신고하기</button>
         </form>
-
         </Modal>
 
         <div className={style.chatcontainer}>
             <div className={style.topBar}></div>
             <div className={style.notMyArea}>
-                <img src={selectedRoom.not_mine_profile_url}/>
-                <div>{selectedRoom.not_mine_nickname}</div>
+                <img src={selectedRoom.user_status === "정지" || selectedRoom.user_status === "탈퇴" ? user : selectedRoom.not_mine_profile_url}/>
+                <div>{selectedRoom.user_status === "정지" || selectedRoom.user_status === "탈퇴" ? "(알수없음)" : selectedRoom.not_mine_nickname}</div>
                 <div>{selectedRoom.not_mine_reliability}</div>
                 <div>
                     <button onClick={reliabilityPlusClick}>신뢰도 주기</button>
@@ -332,7 +320,7 @@ const DMDetail = ({selectedRoom}) => {
                 {imgBase64 !== null ?
                 <div>
                     <img src={imgBase64}/>
-                    <button onClick={previewCancelClick}>{' '}&times;{' '}</button>
+                    <button onClick={previewCancelClick}></button>
                 </div>
                 : null}
                 </div>
@@ -341,8 +329,8 @@ const DMDetail = ({selectedRoom}) => {
             , [contents, imgBase64, myNickname])}
 
 
-
             {complete ? <div className={style.complete}>거래가 완료되었습니다.</div> : null}
+
             <div className={style.writeArea}>
                 <label htmlFor="upload_file"></label>
                 <input type="file" onChange={handleChangeFile} id="upload_file" style={{display:"none"}}/>

diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMList.js b/frontend/sweet-red-beans/src/components/DMPage/DMList.js
@@ -8,6 +8,7 @@ import { useNavigate } from "react-router";
 import style from "../../css/DMPage/DMList.module.css";
 
 const DMList = ({DMlist, DMListClick}) => {
+    console.log(DMlist);
     return (
         <>
         <div className={style.DMListContainer}>

diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js b/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js
@@ -1,8 +1,14 @@
 import React, { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
+import { useNavigate } from "react-router";
 import style from "../../css/DMPage/DMListThumbnail.module.css";
+import { parseDate } from "../../parseDate/parseDate";
+import user from "../../img/user.png";
 
 const DMListThumbnail = ({dm}) => {
+    //const cookies = Cookies();
+    const dispatch = useDispatch();
+    const navigation = useNavigate();
     const [currentRoom, setCurrentRoom] = useState(false);
     const selectedRoomId = useSelector(s => {
         if (s === undefined) {
@@ -14,6 +20,7 @@ const DMListThumbnail = ({dm}) => {
     })
 
     useEffect(() => {
+        console.log(dm);
         if(selectedRoomId !== null) {
             if (dm.chat_room_id === selectedRoomId) {
                 console.log("a의 번호: ", selectedRoomId);
@@ -26,40 +33,14 @@ const DMListThumbnail = ({dm}) => {
         }
     }, [selectedRoomId])
 
-
-    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}</div>
-            <div>{hours} : {min}</div>
-            </>
-        )
-    }
-
     return (
         <>
         <div className={currentRoom ? style.currentThumbnail : style.thumbnail}>
-            <img src={dm.not_mine_profile_url}/>
+
+            <img src={dm.user_status === "정지" || dm.user_status === "탈퇴" ? user : dm.not_mine_profile_url}/>
+
             <div className={style.contentArea}>
-                <div>{dm.not_mine_nickname}</div>
+                <div>{dm.user_status === "정지" || dm.user_status === "탈퇴" ? "(알수없음)" : dm.not_mine_nickname}</div>
                 <div>{dm.recent_message}</div>
             </div>
             <div>

diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMPage.js b/frontend/sweet-red-beans/src/components/DMPage/DMPage.js
@@ -34,6 +34,13 @@ const DMPage = () => {
             alert("로그인을 먼저 해주세요");
             navigation('/');
         });
+
+        return () => {
+            dispatch({
+                type: SELECTED_DM,
+                payload: null,
+            })
+        }
     }, [])
 
     const DMListClick = (selectedRoom, e) => {