Merge pull request #319 from WeGo-Together/hwanwook-fix/chat-input

[Fix] 채팅 관련 여러가지 에러 수정 작업

Author: wooktori

src/app/chat/[roomId]/ChatRoomPage.tsx …p/message/chat/[roomId]/ChatRoomPage.tsxsrc/app/chat/[roomId]/ChatRoomPage.tsx renamed to src/app/message/chat/[roomId]/ChatRoomPage.tsx src/app/chat/[roomId]/ChatRoomPage.tsx renamed to src/app/message/chat/[roomId]/ChatRoomPage.tsx

@@ -38,7 +38,8 @@ export const ChatInput = ({ onSubmit }: IProps) => {
       <div className='relative w-full max-w-110'>
         <textarea
           ref={inputRef}
-          className='bg-mono-white text-text-md-medium w-full resize-none rounded-2xl border border-gray-300 px-4 py-4 text-gray-800 placeholder:text-gray-500 focus:outline-none [&::-webkit-scrollbar]:hidden'
+          className='bg-mono-white text-text-md-medium w-full resize-none rounded-2xl border border-gray-300 px-4 py-4 pr-14 break-words text-gray-800 placeholder:text-gray-500 focus:outline-none [&::-webkit-scrollbar]:hidden'
+          maxLength={1000}
           placeholder='메세지를 입력해주세요.'
           rows={1}
           value={message}

src/app/chat/[roomId]/page.tsx src/app/message/chat/[roomId]/page.tsxsrc/app/chat/[roomId]/page.tsx renamed to src/app/message/chat/[roomId]/page.tsx

@@ -19,7 +19,7 @@ interface IProps {
 export const ChatList = ({ userId, accessToken }: IProps) => {
   const router = useRouter();
   const handleClick = (chatId: number) => {
-    router.push(`/chat/${chatId}`);
+    router.push(`/message/chat/${chatId}`);
   };
   const { data: chatList } = useGetChatList({ userId });
 
@@ -62,19 +62,25 @@ export const ChatList = ({ userId, accessToken }: IProps) => {
             {/* 텍스트 영역 */}
             <div className='flex flex-1 flex-col'>
               <span className='text-text-md-bold text-gray-800'>{chat.chatRoomName}</span>
-              <span className={cn('text-text-sm-medium line-clamp-1 text-gray-700')}>
+              <span
+                className={cn(
+                  'text-text-sm-medium line-clamp-1 overflow-hidden break-all text-gray-700',
+                )}
+              >
                 {chat.lastMessage ? chat.lastMessage.content : '아직 대화가 없습니다.'}
               </span>
             </div>
 
             {/* 안 읽은 메시지 수 */}
             <span
               className={cn(
-                'text-mono-white text-text-xs-bold rounded-full bg-red-500 px-2 py-0.5',
+                'text-mono-white text-text-xs-bold bg-mint-500 flex items-center justify-center rounded-full',
                 chat.unreadCount === 0 && 'opacity-0',
+                chat.unreadCount < 10 && 'size-6',
+                chat.unreadCount >= 10 && 'h-6 w-7',
               )}
             >
-              {chat.unreadCount > 99 ? '99+' : chat.unreadCount}
+              {chat.unreadCount > 99 ? '99' : chat.unreadCount}
             </span>
           </li>
         ))

src/components/pages/chat/chat-input/index.tsx

@@ -19,7 +19,7 @@ export const ExpandableText = ({ text, className }: Props) => {
     <>
       <span
         ref={textRef}
-        className={`line-clamp-20 block whitespace-pre-line text-gray-800 ${className}`}
+        className={`line-clamp-20 block break-all whitespace-pre-line text-gray-800 ${className}`}
       >
         {text}
       </span>

src/components/pages/chat/chat-list/index.tsx

@@ -7,7 +7,7 @@ export const LongTextModal = ({ text }: { text: string }) => (
     </div>
 
     <div className='scrollbar-thin max-h-[70vh] overflow-y-auto px-1'>
-      <div className='whitespace-pre-line text-gray-800'>{text}</div>
+      <div className='break-all whitespace-pre-line text-gray-800'>{text}</div>
     </div>
   </ModalContent>
 );

src/components/pages/chat/chat-long-text/index.tsx

@@ -19,7 +19,7 @@ export const MyChat = ({ item }: IProps) => {
       </div>
 
       <div className='ml-1.5'>
-        <div className='bg-mint-200 mt-1 max-w-60 rounded-tl-2xl rounded-tr-sm rounded-br-2xl rounded-bl-2xl px-4 py-3'>
+        <div className='bg-mint-200 mt-1 max-w-60 rounded-tl-2xl rounded-tr-sm rounded-br-2xl rounded-bl-2xl px-4 py-3 break-words'>
           <ExpandableText text={content} />
         </div>
       </div>

src/components/pages/chat/chat-modal/index.tsx

@@ -28,7 +28,7 @@ export const OtherChat = ({ item }: IProps) => {
       <div className='mr-1.5 max-w-60'>
         <span className='text-text-xs-medium text-gray-800'>{senderName}</span>
 
-        <div className='bg-mono-white mt-1 rounded-tl-sm rounded-tr-2xl rounded-br-2xl rounded-bl-2xl px-4 py-3'>
+        <div className='bg-mono-white mt-1 rounded-tl-sm rounded-tr-2xl rounded-br-2xl rounded-bl-2xl px-4 py-3 break-words'>
           <ExpandableText text={content} />
         </div>
       </div>