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({