Merge pull request #130 from ezcode-my/fix/chat

[feat] 채팅 전송시 스크롤 자동이동 , 채팅 보낸 유저 이름 추가

Author: grimza99

next.config.ts

@@ -3,13 +3,15 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   /* config options here */
   reactStrictMode: false, // Strict Mode 비활성화
-  remotePatterns: [
-    {
-      protocol: 'https',
-      hostname: 'ezcode-s3.s3.ap-northeast-2.amazonaws.com',
-      pathname: '/**',
-    },
-  ],
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'ezcode-s3.s3.ap-northeast-2.amazonaws.com',
+        pathname: '/**',
+      },
+    ],
+  },
   webpack(config) {
     // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule: any) => rule.test?.test?.('.svg'));

src/app/globals.css

@@ -13,6 +13,7 @@
   --color-border_primary: #a4a1aa;
 
   --color-gray700: #364153;
+  --color-gray500: #888;
   --color-active: #1e3e2c;
 }
 

src/features/chat/ui/chatMessage/ChatMessage.tsx

@@ -7,19 +7,16 @@ export default function ChatMessage({ msg, userNickname }: IChatMessageProps) {
   const formattedDate = formatDate(msg.time);
 
   return (
-    <li className={`flex ${isOwn ? 'justify-end' : 'justify-start'}`}>
-      <div className={`max-w-[70%] ${isOwn ? 'order-2' : 'order-1'}`}>
-        <div
-          className={`px-4 py-2 rounded-[14px] ${
-            isOwn ? 'bg-[#214d35] text-white' : 'bg-[#1a2332] text-white'
-          }`}
-        >
-          <p className="whitespace-pre-wrap break-words">{msg.message}</p>
-        </div>
-        <p className={`text-xs text-[#888] mt-1 ${isOwn ? 'text-right' : 'text-left'}`}>
-          {formattedDate}
-        </p>
+    <li className={`flex flex-col ${isOwn ? 'items-end' : 'items-start'}`}>
+      <p className={`text-sm ${isOwn ? 'text-right' : 'text-left'}`}>{msg.name}</p>
+      <div
+        className={`max-w-[70%] w-fit px-4 py-2 rounded-[14px] ${isOwn ? ' bg-primary' : ' bg-secondary-background'}`}
+      >
+        <p className="whitespace-pre-wrap break-words">{msg.message}</p>
       </div>
+      <p className={`text-xs text-gray500 mt-1 ${isOwn ? 'text-right' : 'text-left'}`}>
+        {formattedDate}
+      </p>
     </li>
   );
 }

src/features/chat/ui/chatRoom/index.tsx

@@ -6,6 +6,7 @@ import SystemMessage from '../chatMessage/SystemMessage';
 import ChatMessage from '../chatMessage/ChatMessage';
 import ChatRoomHeader from './ChatRoomHeader';
 import { useMyInfoQuery } from '@/entities/mypage/model/query';
+import { useEffect, useRef } from 'react';
 
 interface ChatProps {
   roomId: number;
@@ -15,6 +16,7 @@ interface ChatProps {
 export default function ChatRoom({ roomId, roomTitle }: ChatProps) {
   useJoinChatRoom(roomId);
   const { data } = useMyInfoQuery();
+  const endRef = useRef<HTMLDivElement>(null);
   const nickname = data?.data.result.nickname;
   const { initMessages, realTimeMessages } = useChatWebSocketStore();
   // const { setIsLeaved } = useChatWebSocketActions();
@@ -23,6 +25,18 @@ export default function ChatRoom({ roomId, roomTitle }: ChatProps) {
   //   setIsLeaved(false);
   // }, [roomId]);
 
+  useEffect(() => {
+    if (endRef.current) {
+      endRef.current.scrollIntoView({ behavior: 'instant' });
+    }
+  }, [roomId, initMessages]);
+
+  useEffect(() => {
+    if (endRef.current) {
+      endRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [realTimeMessages]);
+
   return (
     <section className="w-full flex h-full flex-col justify-center flex-4/5">
       {!!roomId ? (
@@ -46,6 +60,7 @@ export default function ChatRoom({ roomId, roomTitle }: ChatProps) {
                 })}
               </ul>
             )}
+            <div ref={endRef} />
           </div>
           <ChatInput chatRoomId={roomId} />
         </>