[#57]Refactor:최적화

Sweet-red-beans · Mar 27, 2022 · 0bd23a7 · 0bd23a7
1 parent f8e6ba9
commit 0bd23a7
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 36 deletions.
diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js b/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js
@@ -25,6 +25,7 @@ let stompClient = null;
 //transaction_id 값 바꾸기
 const DMDetail = ({ selectedRoom }) => {
   const navigation = useNavigate();
+  const cookies = new Cookies();
 
   const [modalOpen, setModalOpen] = useState(false);
 
@@ -36,7 +37,8 @@ const DMDetail = ({ selectedRoom }) => {
   const [imgFile, setImgFile] = useState(null);
   const [imgBase64, setImgBase64] = useState(null);
 
-  const [myNickname, setMyNickname] = useState('');
+  const [myNickname, setMyNickname] = useState(cookies.get('user').nickname);
+  const [userStatus, setUserStatus] = useState(null);
 
   const openModal = () => {
     setModalOpen(true);
@@ -84,6 +86,7 @@ const DMDetail = ({ selectedRoom }) => {
       );
     });
     setComplete(selectedRoom.is_complete);
+    setUserStatus(selectedRoom.not_mine_user_status);
 
     return () => {
       if (stompClient != null) {
@@ -271,15 +274,13 @@ const DMDetail = ({ selectedRoom }) => {
         <div className={style.notMyArea}>
           <img
             src={
-              selectedRoom.user_status === '정지' ||
-              selectedRoom.user_status === '탈퇴'
+              userStatus === '정지' || userStatus === '탈퇴'
                 ? user
                 : selectedRoom.not_mine_profile_url
             }
           />
           <div>
-            {selectedRoom.user_status === '정지' ||
-            selectedRoom.user_status === '탈퇴'
+            {userStatus === '정지' || userStatus === '탈퇴'
               ? '(알수없음)'
               : selectedRoom.not_mine_nickname}
           </div>

diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMList.js b/frontend/sweet-red-beans/src/components/DMPage/DMList.js
@@ -7,24 +7,8 @@ import { SELECTED_DM } from '../../actions/types';
 import { useNavigate } from 'react-router';
 import style from '../../css/DMPage/DMList.module.css';
 
-const DMList = () => {
+const DMList = ({ DMlist }) => {
   const dispatch = useDispatch();
-  const [DMlist, setDMList] = useState([]);
-  useEffect(() => {
-    //DM 목록 조회
-    axios
-      .get('http://localhost:8080/direct-message', {
-        withCredentials: true,
-      })
-      .then((response) => {
-        setDMList(response.data.room_id);
-      })
-      .catch((error) => {});
-
-    return () => {
-      setDMList(null);
-    };
-  }, []);
 
   const DMListClick = (selectedRoom, e) => {
     dispatch({

diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js b/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js
@@ -14,13 +14,33 @@ const DMListThumbnail = ({ dm }) => {
     if (s === undefined) {
       return null;
     } else {
-      return s.selectedRoom;
+      if (s.selectedRoom !== undefined) {
+        return s.selectedRoom;
+      } else if (s.DMCreate !== undefined) {
+        return s.DMCreate;
+      } else {
+        return null;
+      }
     }
   });
 
+  console.log(selectedRoomId);
+  useEffect(() => {
+    if (selectedRoomId !== null) {
+      if (dm.chat_room_id === selectedRoomId.chat_room_id) {
+        console.log(dm);
+        console.log('현재 : ', selectedRoomId);
+        setCurrentRoom(true);
+      } else {
+        setCurrentRoom(false);
+      }
+    }
+  }, []);
   useEffect(() => {
     if (selectedRoomId !== null) {
       if (dm.chat_room_id === selectedRoomId.chat_room_id) {
+        console.log(dm);
+        console.log('현재 : ', selectedRoomId);
         setCurrentRoom(true);
       } else {
         setCurrentRoom(false);
@@ -33,24 +53,24 @@ const DMListThumbnail = ({ dm }) => {
       <div className={currentRoom ? style.currentThumbnail : style.thumbnail}>
         <img
           src={
-            dm.user_status === '정지' || dm.user_status === '탈퇴'
+            dm.not_mine_user_status === '정지' ||
+            dm.not_mine_user_status === '탈퇴'
               ? user
               : dm.not_mine_profile_url
           }
         />
 
         <div className={style.contentArea}>
           <div>
-            {dm.user_status === '정지' || dm.user_status === '탈퇴'
+            {dm.not_mine_user_status === '정지' ||
+            dm.not_mine_user_status === '탈퇴'
               ? '(알수없음)'
               : dm.not_mine_nickname}
           </div>
           <div>{dm.recent_message}</div>
         </div>
         <div>
-          {dm.recent_message_date === '2020-01-01T00:00:00'
-            ? ''
-            : parseDate(dm.recent_message_date)}
+          {dm.recent_message === null ? '' : parseDate(dm.recent_message_date)}
         </div>
       </div>
     </>

diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMPage.js b/frontend/sweet-red-beans/src/components/DMPage/DMPage.js
@@ -8,19 +8,48 @@ import style from '../../css/DMPage/DMPage.module.css';
 import { SELECTED_DM } from '../../actions/types';
 
 const DMPage = () => {
+  const [DMlist, setDMList] = useState([]);
   const selectedRoomId = useSelector((s) => {
     if (s === undefined) {
       return null;
     } else {
-      return s.selectedRoom;
+      if (s.selectedRoom !== undefined) {
+        return s.selectedRoom;
+      } else if (s.DMCreate !== undefined) {
+        return s.DMCreate;
+      } else {
+        return null;
+      }
     }
   });
 
+  useEffect(() => {
+    //DM 목록 조회
+    axios
+      .get('http://localhost:8080/direct-message', {
+        withCredentials: true,
+      })
+      .then((response) => {
+        setDMList(response.data.room_id);
+      })
+      .catch((error) => {});
+
+    return () => {
+      setDMList(null);
+    };
+  }, []);
+
+  console.log(selectedRoomId);
+
+  useEffect(() => {
+    console.log(selectedRoomId);
+  }, [selectedRoomId]);
+
   return (
     <>
       <div className={style.dmpage}>
         <div>
-          <DMList />
+          <DMList DMlist={DMlist} />
         </div>
 
         <div>

diff --git a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js
@@ -100,6 +100,10 @@ const TransactionDetail = ({ transaction }) => {
       alert('정지되거나 탈퇴한 사용자입니다.');
       return;
     }
+    if (status === '마감') {
+      alert('이미 마감되었습니다.');
+      return;
+    }
     const body = {
       transaction_id: transaction.transaction_id,
     };
@@ -109,9 +113,10 @@ const TransactionDetail = ({ transaction }) => {
       })
       .then((response) => {
         dispatch({
-          type: SELECTED_DM,
+          type: DM_CREATE,
           DMCreate: response.data,
         });
+        console.log(response.data);
         navigation('/DM');
         return;
       })
@@ -290,11 +295,7 @@ const TransactionDetail = ({ transaction }) => {
             ) : (
               <div className={style.notMineButtonArea}>
                 <button onClick={openModal}></button>
-                {status === '진행중' ? (
-                  <button onClick={DMClick}></button>
-                ) : (
-                  <button disabled={true}></button>
-                )}
+                <button onClick={DMClick}></button>
                 {likeStatus ? (
                   <button
                     onClick={likeClick}