From af58031a258ffc668983feead4d8db3cc887e4eb 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 23:51:29 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EC=9D=BD=EC=A7=80=20=EC=95=8A?=
=?UTF-8?q?=EC=9D=80=20=EC=82=AC=EB=9E=8C=20=EC=88=98=20=ED=91=9C=EC=8B=9C?=
=?UTF-8?q?=20=EB=94=94=EC=9E=90=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 | 58 +++++++++++++++++++++++++------
1 file changed, 47 insertions(+), 11 deletions(-)
diff --git a/src/components/ChattingDetail.jsx b/src/components/ChattingDetail.jsx
index 973f1d4..3a3330e 100644
--- a/src/components/ChattingDetail.jsx
+++ b/src/components/ChattingDetail.jsx
@@ -992,8 +992,31 @@ function ChattingDetail() {
style={{
marginTop: sameSenderAsPrev ? "-16px" : "8px",
justifyContent: isMine ? "flex-end" : "flex-start",
+ alignItems: "center", // 중앙 정렬
}}
>
+ {/* 내가 보낸 메시지: 읽지 않은 사람 수는 왼쪽에 표시 */}
+ {isMine && unreadCountValue > 0 && (
+ <div
+ style={{
+ fontSize: "0.8em",
+ color: "gray",
+ marginRight: "8px", // 메시지 버블과 간격
+ textAlign: "center",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ backgroundColor: "#f0f0f0",
+ borderRadius: "50%",
+ width: "20px",
+ height: "20px",
+ boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.1)",
+ }}
+ >
+ {unreadCountValue}
+ </div>
+ )}
+
<MessageBubble
isMine={isMine}
highlighted={
@@ -1012,24 +1035,37 @@ function ChattingDetail() {
}}
>
{highlightSearchTerm(messageData.message)}
- <span
- style={{
- marginLeft: isMine ? "0" : "16px",
- marginRight: isMine ? "16px" : "0",
- fontSize: "0.8em",
- color: "gray",
- }}
- >
- {unreadCountValue > 0 && `${unreadCountValue}`}
- </span>
</div>
- {/* 분 단위가 다르면 시간 표시 */}
+
+ {/* 메시지의 하단 시간 표시 */}
{(isNewMinute || isLastMessageInGroup) && (
<MessageTimestamp isMine={isMine}>
{messageTime}
</MessageTimestamp>
)}
</MessageBubble>
+
+ {/* 상대방이 보낸 메시지: 읽지 않은 사람 수는 오른쪽에 표시 */}
+ {!isMine && unreadCountValue > 0 && (
+ <div
+ style={{
+ fontSize: "0.8em",
+ color: "gray",
+ marginLeft: "8px", // 메시지 버블과 간격
+ textAlign: "center",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ backgroundColor: "#f0f0f0",
+ borderRadius: "50%",
+ width: "20px",
+ height: "20px",
+ boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.1)",
+ }}
+ >
+ {unreadCountValue}
+ </div>
+ )}
</MessageContainer>
</div>
);
--
GitLab