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 1/3] =?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
From c9881234e3800c02f99a613b96dd2622cd25fad9 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: Tue, 10 Dec 2024 00:28:37 +0900
Subject: [PATCH 2/3] =?UTF-8?q?design:=20=EC=B1=84=ED=8C=85=EB=A9=94?=
=?UTF-8?q?=EC=8B=9C=EC=A7=80=20=ED=99=94=EB=A9=B4=20=ED=91=9C=EC=8B=9C=20?=
=?UTF-8?q?=ED=81=AC=EA=B8=B0=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 | 7 +++----
1 file changed, 3 insertions(+), 4 deletions(-)
diff --git a/src/components/ChattingDetail.jsx b/src/components/ChattingDetail.jsx
index 3a3330e..de1aa52 100644
--- a/src/components/ChattingDetail.jsx
+++ b/src/components/ChattingDetail.jsx
@@ -1019,12 +1019,11 @@ function ChattingDetail() {
<MessageBubble
isMine={isMine}
- highlighted={
- searchResults[currentSearchIndex] === messageData
- }
+ highlighted={searchResults[currentSearchIndex] === messageData}
onContextMenu={(e) => handleRightClick(e, messageData)}
style={{
- textAlign: isMine ? "right" : "left",
+ textAlign: "left",
+ maxWidth: "75%", // 화면의 75%를 넘지 않도록 제한
}}
>
<div
--
GitLab
From dc9600b49b4eb1e956ad9d17f9e68c6e21168189 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: Tue, 10 Dec 2024 00:35:47 +0900
Subject: [PATCH 3/3] =?UTF-8?q?design:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?=
=?UTF-8?q?=EC=9D=B4=EB=A6=84,=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EA=B0=84?=
=?UTF-8?q?=EA=B2=A9=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 | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/ChattingDetail.jsx b/src/components/ChattingDetail.jsx
index de1aa52..318a02a 100644
--- a/src/components/ChattingDetail.jsx
+++ b/src/components/ChattingDetail.jsx
@@ -972,7 +972,7 @@ function ChattingDetail() {
<strong
style={{
display: "block",
- marginBottom: "2px",
+ marginBottom: "-12px",
fontSize: "0.9em",
color: "#555",
}}
--
GitLab