From 54c2e08223f2f3118d8136790fa6e4be5527cb58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=8B=AC=EC=9E=AC=EC=97=BD?= <jysim0326@ajou.ac.kr>
Date: Mon, 9 Dec 2024 22:18:56 +0900
Subject: [PATCH 1/2] =?UTF-8?q?design:=20=EB=A9=94=EC=8B=9C=EC=A7=80?=
 =?UTF-8?q?=EC=97=90=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=EC=9D=B4=EB=A6=84=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EA=B4=80=EB=A0=A8=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChattingDetail.jsx | 51 ++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/components/ChattingDetail.jsx b/src/components/ChattingDetail.jsx
index a7af646..518c9f3 100644
--- a/src/components/ChattingDetail.jsx
+++ b/src/components/ChattingDetail.jsx
@@ -824,7 +824,10 @@ function ChattingDetail() {
         <NoticeContainer isCollapsed={isNoticeCollapsed}>
           {!isNoticeCollapsed ? (
             <>
-              <NoticeMessage isCollapsed={isNoticeCollapsed} onClick={handleNoticeClick}>
+              <NoticeMessage
+                isCollapsed={isNoticeCollapsed}
+                onClick={handleNoticeClick}
+              >
                 πŸ“’ {notice?.message}
               </NoticeMessage>
               <NoticeSender>{notice?.sender}</NoticeSender>
@@ -854,7 +857,7 @@ function ChattingDetail() {
       {/* 곡지사항 상세 λͺ¨λ‹¬ */}
       {isNoticeDetailModalOpen && (
         <ChattingNoticeDetailModal
-          initialNotice={selectedNotice} // 처음 ν‘œμ‹œν•  곡지사항
+          initialNotice={selectedNotice}
           notices={notices}
           onClose={closeNoticeDetailModal}
           onSelectNotice={(notice) => setSelectedNotice(notice)}
@@ -897,7 +900,9 @@ function ChattingDetail() {
               theme="purple"
               onClick={handleArrowDown}
               state={
-                currentSearchIndex < searchResults.length - 1 ? "default" : "disable"
+                currentSearchIndex < searchResults.length - 1
+                  ? "default"
+                  : "disable"
               }
               icon={<FaArrowDown />}
             />
@@ -926,21 +931,20 @@ function ChattingDetail() {
             const prevMessage = messages[index - 1];
             const nextMessage = messages[index + 1];
 
-            // 이전 λ©”μ‹œμ§€μ™€ 비ꡐ
             const sameSenderAsPrev =
               prevMessage && prevMessage.sender === messageData.sender;
 
-            // λ‹€μŒ λ©”μ‹œμ§€μ™€ 비ꡐ
             const sameSenderAsNext =
               nextMessage && nextMessage.sender === messageData.sender;
 
-            // ν˜„μž¬ λ©”μ‹œμ§€μ˜ νƒ€μž„μŠ€νƒ¬ν”„
-            const messageTime = new Date(messageData.timestamp).toLocaleTimeString([], {
-              hour: "2-digit",
-              minute: "2-digit",
-            });
+            const messageTime = new Date(messageData.timestamp).toLocaleTimeString(
+              [],
+              {
+                hour: "2-digit",
+                minute: "2-digit",
+              }
+            );
 
-            // 이전 λ©”μ‹œμ§€μ˜ νƒ€μž„μŠ€νƒ¬ν”„
             const prevMessageTime =
               prevMessage &&
               new Date(prevMessage.timestamp).toLocaleTimeString([], {
@@ -948,11 +952,9 @@ function ChattingDetail() {
                 minute: "2-digit",
               });
 
-            // μƒˆλ‘œμš΄ λΆ„ λ‹¨μœ„ λ©”μ‹œμ§€μΈμ§€ 확인
-            const isNewMinute = !prevMessage || messageTime !== prevMessageTime;
-
-            // λ§ˆμ§€λ§‰ λ©”μ‹œμ§€μΈμ§€ 확인
-            const isLastMessageInGroup = !sameSenderAsNext || messageTime !== nextMessage.timestamp;
+            // const isNewMinute = !prevMessage || messageTime !== prevMessageTime;
+            const isLastMessageInGroup = !sameSenderAsNext;
+            const isDifferentUserFromPrev = !sameSenderAsPrev;
 
             if (messageData.type === "join" || messageData.type === "leave") {
               return (
@@ -960,12 +962,11 @@ function ChattingDetail() {
               );
             }
 
-            // 읽지 μ•Šμ€ μ‚¬λžŒ 수
             const unreadCountValue = unreadCount(messageData._id);
 
             return (
               <div key={index}>
-                {isNewMinute && !isMine && (
+                {isDifferentUserFromPrev && !isMine && (
                   <strong
                     style={{
                       display: "block",
@@ -977,10 +978,15 @@ function ChattingDetail() {
                     {messageData.sender}
                   </strong>
                 )}
+
                 <MessageContainer
                   isMine={isMine}
                   highlighted={searchResults[currentSearchIndex] === messageData}
-                  ref={searchResults[currentSearchIndex] === messageData ? highlightedMessageRef : null}
+                  ref={
+                    searchResults[currentSearchIndex] === messageData
+                      ? highlightedMessageRef
+                      : null
+                  }
                   style={{
                     marginTop: sameSenderAsPrev ? "-16px" : "8px",
                     justifyContent: isMine ? "flex-end" : "flex-start",
@@ -988,7 +994,9 @@ function ChattingDetail() {
                 >
                   <MessageBubble
                     isMine={isMine}
-                    highlighted={searchResults[currentSearchIndex] === messageData}
+                    highlighted={
+                      searchResults[currentSearchIndex] === messageData
+                    }
                     onContextMenu={(e) => handleRightClick(e, messageData)}
                     style={{
                       textAlign: isMine ? "right" : "left",
@@ -1013,6 +1021,7 @@ function ChattingDetail() {
                         {unreadCountValue > 0 && `${unreadCountValue}`}
                       </span>
                     </div>
+
                     {isLastMessageInGroup && (
                       <MessageTimestamp isMine={isMine}>
                         {messageTime}
@@ -1047,7 +1056,7 @@ function ChattingDetail() {
         </Button>
       </ChatRoomInput>
     </ChatRoomContainer>
-  );  
+  );
 }
 
 export default ChattingDetail;
\ No newline at end of file
-- 
GitLab


From a83c06f52a1dfdb59f82a1d54c207671a87c61a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=8B=AC=EC=9E=AC=EC=97=BD?= <jysim0326@ajou.ac.kr>
Date: Mon, 9 Dec 2024 22:22:25 +0900
Subject: [PATCH 2/2] =?UTF-8?q?design:=20=EC=A0=84=EC=86=A1=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20nowrap=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChattingDetail.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ChattingDetail.jsx b/src/components/ChattingDetail.jsx
index 518c9f3..c55d0ce 100644
--- a/src/components/ChattingDetail.jsx
+++ b/src/components/ChattingDetail.jsx
@@ -945,12 +945,12 @@ function ChattingDetail() {
               }
             );
 
-            const prevMessageTime =
-              prevMessage &&
-              new Date(prevMessage.timestamp).toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit",
-              });
+            // const prevMessageTime =
+            //   prevMessage &&
+            //   new Date(prevMessage.timestamp).toLocaleTimeString([], {
+            //     hour: "2-digit",
+            //     minute: "2-digit",
+            //   });
 
             // const isNewMinute = !prevMessage || messageTime !== prevMessageTime;
             const isLastMessageInGroup = !sameSenderAsNext;
-- 
GitLab