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