[Deploy]

CHANGELOG.md

@@ -99,3 +99,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 ### Fixed
 
 - 피드, 프로젝트 검색 결과 표시 안 되는 문제 해결
+
+## [0.2.4] - 2025-04-03
+
+### Fixed
+
+- 채팅페이지, 이미지 전송 시 크기 제한 1MB로 설정
+- "새로운 메시지가 왔습니다."버튼 클릭해도 사라지지 않는 버그 해결

src/components/molecules/FileUploadButton.tsx

@@ -1,3 +1,4 @@
+import { LIMIT } from '@/constants/limit';
 import { useFileContext } from '@/context/useFileContext';
 import { optimizeImage } from '@/utils/optimizeImage';
 import {
@@ -23,6 +24,14 @@ const FileUploadButton = ({ accept, children, className, onChange }: Props) => {
     if (file) {
       if (file.type.match(/image\/*/)) {
         const optimizedImage = await optimizeImage(file);
+        if (optimizedImage.size > LIMIT.MAX_IMAGE_SIZE) {
+          alert(
+            `이미지 크기가 너무 큽니다. 최대 ${LIMIT.MAX_IMAGE_SIZE / 1e6}MB 까지 업로드 가능합니다.`
+          );
+          setFile(null);
+          e.target.value = '';
+          return;
+        }
         setFile(optimizedImage);
       } else {
         setFile(file);

src/components/molecules/chat/ChatHeaderInfo.tsx

@@ -3,6 +3,7 @@ import Title from '@/components/atoms/Title';
 import ToggleButton from '@/components/molecules/ToggleButton';
 import SearchMessage from '@/components/organisms/chat/SearchMessage';
 import { useChannel } from '@/hooks/chat/useChannel';
+import useAuthStore from '@/store/authStore';
 import { useChatStore } from '@/store/chatStore';
 import { Channel } from '@/types/channel.type';
 import { useEffect, useState } from 'react';
@@ -13,6 +14,11 @@ interface ChatHeaderInfoProps {
 }
 
 const ChannelInfo = ({ channel }: { channel: Channel }) => {
+  const currentUserId = useAuthStore((state) => state.userInfo.userId);
+  const channelTitle =
+    channel.type === 'private'
+      ? channel.users.find((user) => user.userId !== currentUserId)?.name
+      : channel.title;
   return (
     <div className='flex flex-col h-full justify-center w-full'>
       <Title
@@ -21,7 +27,7 @@ const ChannelInfo = ({ channel }: { channel: Channel }) => {
         lineClamp={1}
         className='text-ellipsis w-[90%] md:text-[25px]'
       >
-        {channel.title}
+        {channelTitle ?? '채팅방'}
       </Title>
       <div className='text-caption1 text-[#838383]'>
         {channel.users.length}명의 맴버가 있습니다.

src/components/molecules/chat/NewMessageNotification.tsx

@@ -1,28 +1,29 @@
 import { useEffect } from 'react';
 import NewMessage from './NewMessage';
-import { useChatStore } from '@/store/chatStore';
 import { useInView } from 'react-intersection-observer';
 
 interface Props {
   onClick: () => void;
+  hasNewMessage: boolean;
+  setChatState: (state: Partial<{ hasNewMessage: boolean }>) => void;
 }
 
-export const NewMessageNotification = ({ onClick }: Props) => {
-  const setState = useChatStore((state) => state.setState);
-
-  const hasNewMessage = useChatStore((state) => state.hasNewMessage);
-
+export const NewMessageNotification = ({
+  onClick,
+  hasNewMessage,
+  setChatState,
+}: Props) => {
   const { ref: newMessageRef, inView: isNewMessageInView } = useInView();
 
   useEffect(() => {
     if (isNewMessageInView) {
-      setState({ hasNewMessage: false });
+      setChatState({ hasNewMessage: false });
     }
   }, [isNewMessageInView]);
 
   return (
     <>
-      <div ref={newMessageRef} />
+      <div ref={newMessageRef} className='sr-only w-1 h-1' />
       {hasNewMessage && !isNewMessageInView && <NewMessage onClick={onClick} />}
     </>
   );

src/components/organisms/chat/ChatMessages.tsx

@@ -6,6 +6,7 @@ import { useMessageScroll } from '@/hooks/chat/useMessageScroll';
 import { MessageList } from '@/components/organisms/chat/MessageList';
 import { NewMessageNotification } from '@/components/molecules/chat/NewMessageNotification';
 import LoadingDots from '@/components/molecules/LoadingDots';
+import { useChatStore } from '@/store/chatStore';
 
 interface ChatMessagesProps {
   currentChannelId: Channel['channelId'];
@@ -54,11 +55,19 @@ const ChatMessages = ({ currentChannelId }: ChatMessagesProps) => {
       onFetchPrevious: fetchPreviousPage,
     });
 
+  const { hasNewMessage, setChatState } = useChatStore(
+    useShallow((state) => ({
+      hasNewMessage: state.hasNewMessage,
+      setChatState: state.setState,
+    }))
+  );
+
   const handleNewMessageClick = () => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer) return;
     scrollContainer.scrollTop = scrollContainer.scrollHeight;
     setSearchState({ searchMode: false });
+    setChatState({ hasNewMessage: false });
   };
 
   if (isLoading) {
@@ -82,7 +91,11 @@ const ChatMessages = ({ currentChannelId }: ChatMessagesProps) => {
         isFetchingNextPage={isFetchingNextPage}
         handleImageLoaded={handleImageLoaded}
       />
-      <NewMessageNotification onClick={handleNewMessageClick} />
+      <NewMessageNotification
+        onClick={handleNewMessageClick}
+        hasNewMessage={hasNewMessage}
+        setChatState={setChatState}
+      />
     </div>
   );
 };

src/constants/limit.ts

@@ -1,4 +1,5 @@
 export const LIMIT = {
   SEARCH_MESSAGES: 30,
   INFINITE_MESSAGES: 30,
+  MAX_IMAGE_SIZE: 1e6,
 };

src/store/authStore.ts

@@ -24,7 +24,6 @@ const useAuthStore = create(
         (set, get) => ({
           setAccessToken: (token: string) => {
             set({ accessToken: token, isLoggedIn: !!token });
-            // localStorage.setItem('@token', token);
             sessionStorage.setItem('@token', token);
           },
           login: (user: User, token: string) => {
@@ -33,8 +32,7 @@ const useAuthStore = create(
               accessToken: token,
               userInfo: user,
             });
-            // localStorage.setItem('@token', token);
-            sessionStorage.setItem('@token', token); // 테스트 하기 위해 sessionStorage로 변경함
+            sessionStorage.setItem('@token', token);
           },
           logout: () => {
             set({