[Deploy]

CHANGELOG.md

@@ -77,3 +77,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 - [피드 페이지 UI 수정](https://github.com/NoGiveUpWeCarry/front/issues/165)
 - [레이아웃 UI 수정](https://github.com/NoGiveUpWeCarry/front/issues/162)
+
+## [0.2.2] - 2025-03-27
+
+### Fixed
+
+- 채팅페이지 새로고침시 발생했던 에러 해결
+
+### Changed
+
+- 채팅페이지 반응형 개선

src/components/molecules/FeedDetailUserInfo.tsx

@@ -4,8 +4,8 @@ import { useNavigate } from 'react-router-dom';
 import { useDeleteFeed } from '@/hooks/queries/feed.query';
 import PostFeedModal from '@/components/organisms/modals/PostFeedModal';
 import usePostModal from '@/hooks/usePostModal';
-import formatTimeAgo from '@/utils/formatTimeAgo';
 import AvatarPopup from '@/components/molecules/AvatarPopup';
+import { formatDateFromNow } from '@/utils/format';
 
 interface FeedDetailUserInfoProps {
   userId: number;
@@ -63,7 +63,7 @@ const FeedDetailUserInfo = ({
             <p className='font-medium'>{userRole}&nbsp;&nbsp;</p>
             <span>&#183;</span>
             <p className='font-medium'>
-              &nbsp;&nbsp;{formatTimeAgo(createdAt)}
+              &nbsp;&nbsp;{formatDateFromNow(createdAt)}
             </p>
           </div>
         </div>

src/components/molecules/MoreButton.tsx

@@ -0,0 +1,21 @@
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
+
+interface MoreButtonProps {
+  hasMore: boolean;
+  onClickMore: () => void;
+}
+
+const MoreButton = ({ hasMore, onClickMore }: MoreButtonProps) => {
+  if (!hasMore) return null;
+
+  return (
+    <button
+      className='text-[#838383] flex w-full justify-end items-center gap-1'
+      onClick={onClickMore}
+    >
+      더보기 <ChevronRightIcon width={12} strokeWidth={3} />
+    </button>
+  );
+};
+
+export default MoreButton;

src/components/atoms/TabsButton.tsx → src/components/molecules/TabButton.tsx

@@ -1,16 +1,15 @@
 import Button from '@/components/atoms/Button';
 import { cn } from '@/lib/utils';
-import { PropsWithChildren } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 
-interface IProps {
+interface IProps extends HTMLAttributes<HTMLButtonElement> {
   isActive: boolean;
-  onClick: () => void;
 }
 
-const TabsButton = ({
+const TabButton = ({
   isActive,
-  onClick,
   children,
+  ...rest
 }: PropsWithChildren<IProps>) => {
   return (
     <Button
@@ -22,11 +21,11 @@ const TabsButton = ({
         isActive ? 'bg-white font-medium' : 'bg-none text-darkgray font-normal',
         '!w-full'
       )}
-      onClick={onClick}
+      {...rest}
     >
       {children}
     </Button>
   );
 };
 
-export default TabsButton;
+export default TabButton;

src/components/molecules/chat/ChatHeaderInfo.tsx

@@ -1,25 +1,51 @@
 import Title from '@/components/atoms/Title';
 import SearchMessage from '@/components/organisms/chat/SearchMessage';
+import { useChannel } from '@/hooks/chat/useChannel';
 import { useChatStore } from '@/store/chatStore';
 import { Channel } from '@/types/channel.type';
+import { useEffect } from 'react';
+import { useShallow } from 'zustand/shallow';
 
 interface ChatHeaderInfoProps {
   currentChannelId: Channel['channelId'];
 }
 
 const ChatHeaderInfo = ({ currentChannelId }: ChatHeaderInfoProps) => {
-  const channels = useChatStore((state) => state.channels);
+  const { setState, channels } = useChatStore(
+    useShallow((state) => ({
+      setState: state.setState,
+      channels: state.channels,
+    }))
+  );
+  const { channel } = useChannel(currentChannelId);
+
+  useEffect(() => {
+    setState({
+      channels: {
+        ...channels,
+        [channel.channelId]: channel,
+      },
+    });
+  }, [channel]);
+
   return (
     <div className='flex justify-between flex-1 h-[76px] items-center'>
-      <div className='flex flex-col h-full justify-center'>
-        <Title size='md' fontWeight='bold' lineClamp={1}>
-          {channels[currentChannelId]?.title}
+      <div className='flex flex-col h-full justify-center w-full'>
+        <Title
+          size='md'
+          fontWeight='bold'
+          lineClamp={1}
+          className='text-ellipsis w-[90%]'
+        >
+          {channel.title}
         </Title>
         <div className='text-caption1 text-[#838383]'>
-          {channels[currentChannelId]?.users.length}명의 맴버가 있습니다.
+          {channel.users.length}명의 맴버가 있습니다.
         </div>
       </div>
-      <SearchMessage currentChannelId={currentChannelId} />
+      <div className='flex-shrink-0'>
+        <SearchMessage currentChannelId={currentChannelId} />
+      </div>
     </div>
   );
 };

src/components/molecules/contents/FeedContentsUserTitle.tsx

@@ -1,4 +1,4 @@
-import formatTimeAgo from '@/utils/formatTimeAgo';
+import { formatDateFromNow } from '@/utils/format';
 
 interface FeedContentsUserTitleProps {
   userNickname: string;
@@ -29,7 +29,7 @@ const FeedContentsUserTitle = ({
             •
           </span>
           <span className='text-slate-700 text-sm'>
-            {formatTimeAgo(createdAt)}
+            {formatDateFromNow(createdAt)}
           </span>
         </div>
       )}

src/components/molecules/hub/HubContentsUserTitle.tsx

@@ -1,4 +1,4 @@
-import formatTimeAgo from '@/utils/formatTimeAgo';
+import { formatDateFromNow } from '@/utils/format';
 interface ContentsUserTitleProps {
   nickname: string;
   role?: string;
@@ -17,7 +17,7 @@ const HubContentsUserTitle = ({
         <span className='text-gray-500 text-sm'>{role}</span>
         <span>•</span>
         <span className='text-gray-400 text-sm'>
-          {formatTimeAgo(createdAt)}
+          {formatDateFromNow(createdAt)}
         </span>
       </div>
     </div>

src/components/molecules/search/SearchInput.tsx

@@ -0,0 +1,18 @@
+import Icon from '@/components/atoms/Icon';
+import Input from '@/components/atoms/Input';
+import { InputHTMLAttributes } from 'react';
+
+const SearchInput = ({ ...props }: InputHTMLAttributes<HTMLInputElement>) => (
+  <div className='mb-6 w-full h-6 flex items-center'>
+    <Icon type='search' className='w-6 h-6' color='gray' />
+    <Input
+      bgColor='transparent'
+      className='border-0 h-full !text-[16px]'
+      autoFocus
+      placeholder='검색어 입력'
+      {...props}
+    />
+  </div>
+);
+
+export default SearchInput;