Merge develop → main

src/components/Footer.tsx

@@ -75,7 +75,7 @@ const Footer = () => {
         ))}
         <div
           onClick={handleFollowChannel}
-          className="relative cursor-pointer py-[12px] custom-h4 text-gray700 max-lg:text-[16px] max-phone:text-[14px] max-lg:px-[0px]">
+          className="cursor-pointer py-[12px] custom-h4 text-gray700 max-lg:text-[16px] max-phone:text-[14px] max-lg:px-[0px]">
           고객센터
         </div>
       </nav>

src/components/Navbar/Navbar.tsx

@@ -139,8 +139,8 @@ const Navbar = () => {
                     src={data?.data.has_unread_messages ? MessageIcon : MessageIcon}
                     alt="메세지 알림"
                     className="self-center max-phone:w-[16px] max-phone:h-[16px]"
-                    // onClick={() => navigate('/chat')}
-                    onClick={() => setIsMessageModalShow((prev) => !prev)}
+                    onClick={() => navigate('/chat')}
+                    // onClick={() => setIsMessageModalShow((prev) => !prev)}
                   />
                   <img
                     src={data?.data.profile_image || UserIcon}

src/pages/ChatPage/ChatPage.tsx

@@ -1,19 +1,32 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import ChatList from './components/ChatList';
 import ChattingRoom from './components/ChattingRoom';
+import useGetInfiniteChatRooms from '@/hooks/queries/ChatPage/useGetInfiniteChatRooms';
 
 const ChatPage = () => {
   const [selectedRoomId, setSelectedRoomId] = useState<number | null>(null);
   const isTablet = window.innerWidth < 1024;
 
+  const { data } = useGetInfiniteChatRooms({ limit: 20 }); // 채팅 목록 조회
+
+  useEffect(() => {
+    const latestRoomId = data?.pages?.[0]?.data?.rooms?.[0]?.room_id;
+
+    if (latestRoomId) {
+      setSelectedRoomId(latestRoomId);
+    }
+  }, [data]);
+
   return (
     <div className="px-[102px] max-lg:px-[40px] max-phone:px-[20px] max-lg:bg-white max-lg:h-dvh">
       {(!isTablet || selectedRoomId === null) && (
         <h1 className="custom-h1 pt-[64px] mb-[56px] max-lg:pt-[32px] max-lg:mb-[20px]">메시지</h1>
       )}
 
       <div className="lg:flex gap-[20px]">
-        {(!isTablet || selectedRoomId === null) && <ChatList setSelectedRoomId={setSelectedRoomId} />}
+        {(!isTablet || selectedRoomId === null) && (
+          <ChatList setSelectedRoomId={setSelectedRoomId} selectedRoomId={selectedRoomId} />
+        )}
         {(!isTablet || selectedRoomId !== null) && <ChattingRoom selectedRoomId={selectedRoomId!} />}
       </div>
     </div>

src/pages/ChatPage/components/ChatBubble.tsx

@@ -12,21 +12,36 @@ interface ChatBubbleProps {
   files: Attachment[];
   isMine: boolean;
   popup?: boolean;
+  date: string;
+  showTime?: boolean;
 }
 
-const ChatBubble = ({ text, files, isMine, popup }: ChatBubbleProps) => {
+const ChatBubble = ({ text, files, isMine, popup, date, showTime }: ChatBubbleProps) => {
   const [preview, setPreview] = useState<string | null>(null);
   const [selected, setSelected] = useState<Attachment | null>(null);
   const hasFile = files.some((file) => file.type === 'FILE');
 
+  const formatTime = (date: string) => {
+    const d = new Date(date);
+
+    return new Intl.DateTimeFormat('ko-KR', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+    }).format(d);
+  };
+
   return (
-    <div className={clsx('flex', isMine ? 'justify-end' : 'justify-start')}>
+    <div className={clsx('flex gap-2', isMine ? 'justify-end' : 'justify-end flex-row-reverse')}>
+      {showTime && <div className={clsx('custom-body3 text-gray700 self-end')}>{formatTime(date)}</div>}
+
       <div
         className={clsx(
           'px-[20px] py-[16px] custom-body1 max-w-[316px] w-fit',
           isMine
             ? 'bg-primary text-white rounded-l-[32px] rounded-tr-[32px]'
             : 'bg-background rounded-r-[32px] rounded-bl-[32px]',
+          hasFile && 'flex flex-col gap-[16px]',
         )}>
         {text}
 

src/pages/ChatPage/components/ChatList.tsx

@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router-dom';
 
 interface ChatListProps {
   setSelectedRoomId: (roomId: number) => void;
+  selectedRoomId: number | null;
 }
 
 type ActiveButton = {
@@ -21,7 +22,7 @@ const BUTTONS: ActiveButton[] = [
   { id: 3, label: '고정된 메시지', filter: 'pinned' },
 ];
 
-const ChatList = ({ setSelectedRoomId }: ChatListProps) => {
+const ChatList = ({ setSelectedRoomId, selectedRoomId }: ChatListProps) => {
   const [search, setSearch] = useState('');
   const [activeButton, setActiveButton] = useState<ActiveButton>(BUTTONS[0]);
   const isTablet = window.innerWidth < 1024;
@@ -81,6 +82,7 @@ const ChatList = ({ setSelectedRoomId }: ChatListProps) => {
               last_message={list.last_message}
               unread_count={list.unread_count}
               is_pinned={list.is_pinned}
+              is_clicked={list.room_id === selectedRoomId}
               onClick={() => {
                 if (isTablet) {
                   navigate(`/chat/${list.room_id}`);

src/pages/ChatPage/components/ChatListItem.tsx

@@ -1,5 +1,6 @@
 import formatDate from '@/utils/formatDate';
 import Default from '@assets/icon-profile-image-default.svg';
+import clsx from 'clsx';
 
 interface ChatListItemProps {
   partner: {
@@ -13,16 +14,20 @@ interface ChatListItemProps {
   };
   unread_count: number;
   is_pinned: boolean;
+  is_clicked: boolean;
   onClick: () => void;
 }
 
-const ChatListItem = ({ partner, last_message, unread_count, onClick }: ChatListItemProps) => {
+const ChatListItem = ({ partner, last_message, unread_count, is_clicked, onClick }: ChatListItemProps) => {
   const { month, day } = formatDate(last_message.sent_at);
 
   return (
     <div
       onClick={onClick}
-      className="p-[16px] flex gap-[16px] items-center lg:max-w-[317px] w-full cursor-pointer hover:bg-background rounded-[8px]">
+      className={clsx(
+        'p-[16px] flex gap-[16px] items-start lg:max-w-[317px] w-full cursor-pointer hover:bg-background rounded-[8px]',
+        is_clicked && 'bg-background',
+      )}>
       <div className="size-[48px] shrink-0">
         <img
           src={partner.profile_image_url || Default}

src/pages/ChatPage/components/ChattingRoom.tsx

@@ -42,6 +42,11 @@ const ChattingRoom = ({ selectedRoomId, className, popup }: ChattingRoomProps) =
   const [showMenu, setShowMenu] = useState<boolean>(false); // 메뉴 클릭 여부
   const [showDownload, setShowDownload] = useState<boolean>(false); // 내가 다운받은 프롬프트
   const [showDownloadAll, setShowDownloadAll] = useState<boolean>(false); // 내가 다운받은 프롬프트 더 보기
+  const [fileError, setFileError] = useState<string>('');
+
+  const MAX_FILE_COUNT = 3;
+  const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
   const menuRef = useRef<HTMLDivElement | null>(null);
   const isFirstLoad = useRef(true); // 처음 입장했는지
   const prevHeightRef = useRef(0);
@@ -135,7 +140,7 @@ const ChattingRoom = ({ selectedRoomId, className, popup }: ChattingRoomProps) =
     });
   };
 
-  const handleEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleEnter = (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     if (e.key === 'Enter') {
       handleSubmit();
     }
@@ -157,11 +162,20 @@ const ChattingRoom = ({ selectedRoomId, className, popup }: ChattingRoomProps) =
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selected = e.target.files;
     if (!selected) return;
-    if (files.length === 3) return;
-    if (previews.length === 3) return;
+
+    setFileError('');
 
     const fileArr = Array.from(selected);
 
+    const countError = files.length + fileArr.length > MAX_FILE_COUNT;
+    const sizeError = fileArr.find((file) => file.size > MAX_FILE_SIZE);
+
+    if (countError || sizeError) {
+      setFileError('이미지, 파일은 최대 3개, 10mb까지 업로드할 수 있어요!');
+      e.target.value = '';
+      return;
+    }
+
     setFiles((prev) => [...prev, ...fileArr]);
 
     const previewUrl = fileArr.map((file) => URL.createObjectURL(file));
@@ -176,6 +190,8 @@ const ChattingRoom = ({ selectedRoomId, className, popup }: ChattingRoomProps) =
 
     setPreviews((prev) => prev.filter((_, i) => i !== idx));
     setFiles((prev) => prev.filter((_, i) => i !== idx));
+
+    setFileError('');
   };
 
   const isNearBottom = () => {
@@ -428,7 +444,7 @@ const ChattingRoom = ({ selectedRoomId, className, popup }: ChattingRoomProps) =
                 ) : (
                   <PinIcon onClick={() => mutatePatchPinChat(selectedRoomId)} className="cursor-pointer" />
                 )}
-                <DotsIcon className="cursor-pointer" onClick={() => setShowMenu((prev) => !prev)} />
+                <DotsIcon className="cursor-pointer w-[24px]" onClick={() => setShowMenu((prev) => !prev)} />
 
                 {/* 메뉴 */}
                 {showMenu && (
@@ -443,7 +459,7 @@ const ChattingRoom = ({ selectedRoomId, className, popup }: ChattingRoomProps) =
             <section
               ref={scrollRef}
               onScroll={handleScroll}
-              className="flex flex-col gap-[20px] flex-1 min-h-0 overflow-auto">
+              className="flex flex-col gap-[20px] flex-1 min-h-0 overflow-auto pr-[16px]">
               <div ref={ref} className="h-2 shrink-0"></div>
 
               {/* 사용자 정보 부분 */}
@@ -487,31 +503,48 @@ const ChattingRoom = ({ selectedRoomId, className, popup }: ChattingRoomProps) =
               {/* 날짜 */}
               <div className="py-[16px] flex items-center">
                 <div className="w-full h-[1px] bg-gray400"></div>
-                <div className="px-[20px] text-gray400">{`${year}.${month}.${day}(${dayOfWeek})`}</div>
+                <div className="px-[20px] text-gray400 ">{`${year}.${month}.${day}(${dayOfWeek})`}</div>
                 <div className="w-full h-[1px] bg-gray400"></div>
               </div>
 
               {/* 메시지 */}
               {messages && (
                 <div className="flex flex-col gap-[8px] flex-1">
-                  {messages.map((msg) => (
-                    <ChatBubble
-                      key={msg.message_id}
-                      text={msg.content}
-                      files={msg.attachments}
-                      isMine={(msg.sender_id ?? msg?.sender?.user_id) === user.user_id}
-                      popup={popup}
-                    />
-                  ))}
+                  {messages.map((msg, idx) => {
+                    const nextMessage = messages[idx + 1];
+
+                    const isSameSender =
+                      (msg.sender_id ?? msg?.sender?.user_id) ===
+                      (nextMessage?.sender_id ?? nextMessage?.sender?.user_id);
+
+                    const isSameMinute =
+                      nextMessage &&
+                      new Date(msg.sent_at).getHours() === new Date(nextMessage.sent_at).getHours() &&
+                      new Date(msg.sent_at).getMinutes() === new Date(nextMessage.sent_at).getMinutes();
+
+                    const showTime = !(isSameSender && isSameMinute);
+
+                    return (
+                      <ChatBubble
+                        key={msg.message_id}
+                        text={msg.content}
+                        files={msg.attachments}
+                        isMine={(msg.sender_id ?? msg?.sender?.user_id) === user.user_id}
+                        popup={popup}
+                        date={msg.sent_at}
+                        showTime={showTime}
+                      />
+                    );
+                  })}
                 </div>
               )}
 
               {/* <div ref={bottomRef} className="h-2 bg-red-400 shrink-0"></div> */}
             </section>
 
             {/* 입력창 */}
-            <div className="flex flex-col w-full relative bg-background">
-              <div className="w-full px-[20px] py-[16px] rounded-[8px] flex gap-[20px] items-start">
+            <div className="flex flex-col w-full relative bg-white pt-[20px]">
+              <div className="w-full h-max px-[20px] py-[16px] rounded-[8px] flex gap-[20px] items-start bg-background">
                 <div className="flex gap-[8px]">
                   {/* 파일 선택 */}
                   <label>
@@ -526,16 +559,31 @@ const ChattingRoom = ({ selectedRoomId, className, popup }: ChattingRoomProps) =
                   </label>
                 </div>
 
-                <div className="flex-1">
+                <div className="flex-1 flex flex-col gap-[4px] h-max">
                   {/* 채팅 입력 */}
-                  <input
+                  <textarea
                     value={input}
                     onChange={(e) => setInput(e.target.value)}
+                    onInput={(e) => {
+                      const target = e.currentTarget;
+
+                      target.style.height = 'auto';
+                      target.style.height = `${Math.min(target.scrollHeight, 102)}px`;
+
+                      if (target.scrollHeight > 102) {
+                        target.style.overflowY = 'auto';
+                      } else {
+                        target.style.overflowY = 'hidden';
+                      }
+                    }}
                     onKeyDown={handleEnter}
                     placeholder="메시지를 입력해주세요."
-                    className="flex-1 cursor-pointer custom-body1 plcaeholder:font-['SCoreDream'] placeholder:custom-body1 placeholder:text-gray500"
+                    rows={1}
+                    className="w-full min-h-[24px] max-h-[102px] resize-none cursor-pointer custom-body1 placeholder:font-['SCoreDream'] placeholder:custom-body1 placeholder:text-gray500"
                   />
 
+                  {fileError && <div className="custom-button2 text-alert">{fileError}</div>}
+
                   <div className="flex gap-[4px] flex-wrap">
                     {previews.length > 0 &&
                       previews.map((item, idx) => (

src/pages/ChatPage/components/PreviewItem.tsx

@@ -16,7 +16,7 @@ const PreviewItem = ({ imageURL, fileSize, type, name, handleDeleteImage }: Prev
   return (
     <div
       className={clsx(
-        'bg-white p-[8px] border border-gray300 rounded-[12px] w-full flex gap-[16px] items-center',
+        'bg-white p-[8px] border border-gray300 rounded-[12px] w-full flex gap-[8px] items-center',
         type.startsWith('image/') ? 'max-w-[150px]' : 'max-w-[256px] h-[56px] min-w-0',
       )}>
       {/* 이미지 */}
@@ -28,19 +28,25 @@ const PreviewItem = ({ imageURL, fileSize, type, name, handleDeleteImage }: Prev
 
       {/* 파일 */}
       {!type.startsWith('image/') && (
-        <div className="flex gap-[10px] items-center flex-1 min-w-0">
+        <div className="flex gap-[4px] items-center flex-1 min-w-0">
           <AttachIcon className="text-black size-[24px] shrink-0" />
-          <p className={clsx('custom-button2 truncate text-black max-w-fit')}>{name}</p>
+          <p
+            className={clsx(
+              'truncate text-black max-w-fit',
+              type.startsWith('image/') ? 'custom-button2' : 'custom-button1',
+            )}>
+            {name}
+          </p>
         </div>
       )}
 
       {handleDeleteImage && (
         <div className="flex items-center gap-[16px] shrink-0">
           {/* 파일 및 이미지 선택 시 파일 사이즈 */}
-          <p className="custom-button3">{fileSize}</p>
+          <p className="custom-button2">{fileSize}</p>
 
           {/* 파일 및 이미지 삭제 */}
-          <XIcon onClick={handleDeleteImage} className="cursor-pointer shrink-0 text-gray500" />
+          <XIcon onClick={handleDeleteImage} className="cursor-pointer shrink-0 text-gray500 size-[24px]" />
         </div>
       )}
 

src/pages/ProfilePage/components/ProfileCard.tsx

@@ -94,6 +94,13 @@ const ProfileCard = ({ mypage }: ProfileCardProps) => {
     });
   };
 
+  // 채팅하기 로그인 관련
+  const handleChatting = () => {
+    handleShowLoginModal(() => {
+      openChatRoom(member_id);
+    });
+  };
+
   const normalizedFollowerList: FollowerWithStatus[] =
     followerData?.data.map((f) => ({
       ...f,
@@ -215,7 +222,7 @@ const ProfileCard = ({ mypage }: ProfileCardProps) => {
 
           {!isMyProfile && !isAdmin && (
             <div className="flex gap-[20px]">
-              <ProfileButton text="문의하기" type="chat" onClick={() => openChatRoom(member_id)} />
+              <ProfileButton text="문의하기" type="chat" onClick={handleChatting} />
               <ProfileButton
                 text={isFollow ? '팔로우 완료' : '팔로우'}
                 type={isFollow ? 'check' : 'plus'}