diff --git a/CHANGELOG.md b/CHANGELOG.md index d9c1101..b7ee036 100644 --- a/CHANGELOG.md +++ b/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로 설정 +- "새로운 메시지가 왔습니다."버튼 클릭해도 사라지지 않는 버그 해결 diff --git a/src/components/molecules/FileUploadButton.tsx b/src/components/molecules/FileUploadButton.tsx index 7688676..4efc29c 100644 --- a/src/components/molecules/FileUploadButton.tsx +++ b/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); diff --git a/src/components/molecules/chat/ChatHeaderInfo.tsx b/src/components/molecules/chat/ChatHeaderInfo.tsx index 07b6644..f2d4531 100644 --- a/src/components/molecules/chat/ChatHeaderInfo.tsx +++ b/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 (
{ lineClamp={1} className='text-ellipsis w-[90%] md:text-[25px]' > - {channel.title} + {channelTitle ?? '채팅방'}
{channel.users.length}명의 맴버가 있습니다. diff --git a/src/components/molecules/chat/NewMessageNotification.tsx b/src/components/molecules/chat/NewMessageNotification.tsx index 1ad2daa..b9afcaf 100644 --- a/src/components/molecules/chat/NewMessageNotification.tsx +++ b/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 ( <> -
+
{hasNewMessage && !isNewMessageInView && } ); diff --git a/src/components/organisms/chat/ChatMessages.tsx b/src/components/organisms/chat/ChatMessages.tsx index b3ad6fa..35e52e1 100644 --- a/src/components/organisms/chat/ChatMessages.tsx +++ b/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} /> - +
); }; diff --git a/src/constants/limit.ts b/src/constants/limit.ts index a9a643e..028af02 100644 --- a/src/constants/limit.ts +++ b/src/constants/limit.ts @@ -1,4 +1,5 @@ export const LIMIT = { SEARCH_MESSAGES: 30, INFINITE_MESSAGES: 30, + MAX_IMAGE_SIZE: 1e6, }; diff --git a/src/store/authStore.ts b/src/store/authStore.ts index 0a6c989..c7c35ab 100644 --- a/src/store/authStore.ts +++ b/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({