Merge pull request #429 from js43o/fix-notification-message

[Fix] 채팅 입장/퇴장 알림 메시지 최대 길이 제한
boostcampwm2023 · Dec 11, 2023 · 215c6a5 · 215c6a5
2 parents 9859eb1 + c046bd9
commit 215c6a5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/ChatItem.css.ts b/app/frontend/src/components/Sidebar/Contents/Chatting/ChatItem.css.ts
@@ -29,12 +29,13 @@ export const notification = style([
     justifyContent: 'center',
     flexShrink: 0,
     alignSelf: 'center',
+    maxWidth: '100%',
     padding: '0.4rem 1.6rem',
     border: `1px solid ${vars.color.grayscale100}`,
     borderRadius: '100rem',
     margin: '1rem 0',
     color: vars.color.grayscale200,
-    overflow: 'hidden auto',
+    overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
   },

diff --git a/app/frontend/src/hooks/useChatting.ts b/app/frontend/src/hooks/useChatting.ts
@@ -30,11 +30,13 @@ export function useChatting(postId: string) {
 
   const notifyToJoin = useCallback(
     (nickname: string, userId: string) => {
+      const parsedNickname =
+        nickname.length > 10 ? `${nickname.slice(0, 10)}...` : nickname;
       socketClient.sendMessage({
         messageType: 'notification',
         user: userId,
         room: postId,
-        contents: `${nickname} 님이 입장하셨습니다.`,
+        contents: `${parsedNickname} 님이 입장하셨습니다.`,
         date: new Date(),
       });
     },
@@ -43,11 +45,13 @@ export function useChatting(postId: string) {
 
   const notifyToLeave = useCallback(
     (nickname: string, userId: string) => {
+      const parsedNickname =
+        nickname.length > 10 ? `${nickname.slice(0, 10)}...` : nickname;
       socketClient.sendMessage({
         messageType: 'notification',
         user: userId,
         room: postId,
-        contents: `${nickname} 님이 퇴장하셨습니다.`,
+        contents: `${parsedNickname} 님이 퇴장하셨습니다.`,
         date: new Date(),
       });
     },