diff --git a/src/components/ChattingDetail.jsx b/src/components/ChattingDetail.jsx index a7af6466e15b8389f482d8cf5fe6cc571c260a59..c55d0ceb676ed602b4859beb1abd0c32666683c6 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,33 +931,30 @@ 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 prevMessageTime = - prevMessage && - new Date(prevMessage.timestamp).toLocaleTimeString([], { + const messageTime = new Date(messageData.timestamp).toLocaleTimeString( + [], + { hour: "2-digit", minute: "2-digit", - }); + } + ); - // μλ‘μ΄ λΆ λ¨μ λ©μμ§μΈμ§ νμΈ - const isNewMinute = !prevMessage || messageTime !== prevMessageTime; + // const prevMessageTime = + // prevMessage && + // new Date(prevMessage.timestamp).toLocaleTimeString([], { + // hour: "2-digit", + // minute: "2-digit", + // }); - // λ§μ§λ§ λ©μμ§μΈμ§ νμΈ - 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