From 96f7ba1c4c7eaebcf0802c03e91bf3c9432701aa Mon Sep 17 00:00:00 2001
From: jomo34 <trillion32@naver.com>
Date: Sun, 16 Jun 2024 01:54:20 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=B1=84=ED=8C=85=20=EB=AF=B8?=
 =?UTF-8?q?=EC=99=84=EC=84=B1=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/chat-list/[chatId]/index.tsx | 69 ++++++++++++++++----------
 src/pages/chat-list/index.tsx          | 10 ++--
 2 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/pages/chat-list/[chatId]/index.tsx b/src/pages/chat-list/[chatId]/index.tsx
index 389885c..9f010b1 100644
--- a/src/pages/chat-list/[chatId]/index.tsx
+++ b/src/pages/chat-list/[chatId]/index.tsx
@@ -335,18 +335,18 @@ function ChatRoom() {
           // ex : 커넥션을 맺은 후 채팅을 보내다 토큰이 만료 됐을때
           console.error('STOMP 에러 발생');
           console.error('STOMP Error:', frame.headers.message);
-          // setErrorModalOpen(true);
+          setErrorModalOpen(true);
         },
         onDisconnect: () => {
           console.error('연결끊김');
           client.current.deactivate();
-          // router.back();
+          setErrorModalOpen(true);
         },
         onWebSocketError: event => {
           // ex : 애초에 토큰이 만료된 상태로 커넥션을 시도할때
           console.error('웹소켓 에러발생', event);
-          // client.current.deactivate();
-          // setErrorModalOpen(true);
+          client.current.deactivate();
+          setErrorModalOpen(true);
         },
       });
     }
@@ -395,29 +395,37 @@ function ChatRoom() {
     }
   };
 
-  const DirectToChatListPage = (stateName: string) => {
-    if (stateName === 'ErrorModalOpen') {
-      setErrorModalOpen(false);
-    } else if (stateName === 'isReport') {
-      setIsReport(false);
-    }
+  const DirectToChatListPage = () => {
+    setErrorModalOpen(false);
     router.replace('/chat-list');
   };
 
   useEffect(() => {
     let timer: NodeJS.Timeout;
 
-    if (ErrorModalOpen || isDeliveryStart || isDeliveryFinish || isBlack) {
+    if (ErrorModalOpen || isBlack) {
       timer = setTimeout(() => {
         setErrorModalOpen(false);
+        setIsBlackModalOpen(false);
+        router.replace('/chat-list');
+      }, 2000);
+    }
+
+    return () => clearTimeout(timer);
+  }, [ErrorModalOpen, isBlack]);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (isDeliveryStart || isDeliveryFinish) {
+      timer = setTimeout(() => {
         setIsDeliveryStart(false);
         setIsDeliveryFinish(false);
-        router.replace('/chat-list');
       }, 2000);
     }
 
     return () => clearTimeout(timer);
-  }, [ErrorModalOpen, isDeliveryStart, isDeliveryFinish, isBlack]);
+  }, [isDeliveryStart, isDeliveryFinish]);
 
   const clickCancelQuit = () => {
     setIsQuitModalOpen(false);
@@ -544,7 +552,7 @@ function ChatRoom() {
         <CenterModal
           hasDescription
           closeModal={clickCancleBlackWhenReport}
-          title="차단되었습니다"
+          title="신고되었습니다"
           handleClickYes={handleBlack}
           childrens={<div>상대방을 차단할까요?</div>}
         />
@@ -634,21 +642,26 @@ function ChatRoom() {
         <div />
       )}
       <ChattingHistory ref={scrollRef}>
-        {data?.pages[0] ? (
+        {data?.pages[0].messages.length > 0 ? (
           data?.pages
             .flatMap(page => page.messages)
             .map((message, index, messages) => {
-              const nextMessage = messages[index - 1];
-              const nextMessageDate =
-                index !== 0 ? new Date(nextMessage.sendTime) : new Date();
-
+              const prevMessage = index > 0 ? messages[index - 1] : null;
               const isNewDate =
-                index === 0
-                  ? false
-                  : !isSameDay(
-                      new Date(message.sendTime),
-                      new Date(nextMessage.sendTime),
-                    );
+                index === 0 ||
+                !isSameDay(
+                  new Date(message.sendTime),
+                  new Date(prevMessage.sendTime),
+                );
+
+              if (index !== 0) {
+                console.log(
+                  isSameDay(
+                    new Date(message.sendTime),
+                    new Date(prevMessage.sendTime),
+                  ),
+                );
+              }
 
               const isImage = message.messageType === 'IMAGE';
 
@@ -656,7 +669,9 @@ function ChatRoom() {
                 return (
                   <>
                     {isNewDate && (
-                      <TimeStamp>{formatTimeStamp(nextMessageDate)}</TimeStamp>
+                      <TimeStamp>
+                        {formatTimeStamp(new Date(message.sendTime))}
+                      </TimeStamp>
                     )}
                     <MyMessageDiv key={message.messageId}>
                       {isImage ? (
@@ -678,7 +693,7 @@ function ChatRoom() {
               return (
                 <>
                   {isNewDate && (
-                    <TimeStamp>{formatTimeStamp(nextMessageDate)}</TimeStamp>
+                    <TimeStamp>{formatTimeStamp(prevMessage)}</TimeStamp>
                   )}
                   <OpponentMessageDiv key={message.messageId}>
                     <OpponentProfileImage src={opponentProfileImage} />
diff --git a/src/pages/chat-list/index.tsx b/src/pages/chat-list/index.tsx
index e532db7..7d868e5 100644
--- a/src/pages/chat-list/index.tsx
+++ b/src/pages/chat-list/index.tsx
@@ -112,18 +112,18 @@ export default function ChatList() {
           // ex : 커넥션을 맺은 후 채팅을 보내다 토큰이 만료 됐을때
           console.error('STOMP 에러 발생');
           console.error('STOMP Error:', frame.headers.message);
-          // setErrorModalOpen(true);
+          setErrorModalOpen(true);
         },
         onDisconnect: () => {
           console.error('연결끊김');
           client.current.deactivate();
-          router.back();
+          setErrorModalOpen(true);
         },
         onWebSocketError: event => {
           // ex : 애초에 토큰이 만료된 상태로 커넥션을 시도할때
           console.error('웹소켓 에러발생', event);
-          // client.current.deactivate();
-          // setErrorModalOpen(true);
+          client.current.deactivate();
+          setErrorModalOpen(true);
         },
       });
     }
@@ -246,7 +246,7 @@ export default function ChatList() {
       </Modal>
       <PageHeader title="채팅" />
       <ChattingList>
-        {!data?.pages[0].chatList ? (
+        {data?.pages[0].chatList.length === 0 ? (
           <div>채팅방이 없습니다.</div>
         ) : (
           data?.pages