diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index a6c23385..f545190d 100644
--- a/src/components/Footer.tsx
+++ b/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>
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 529a0347..687def25 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/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}
diff --git a/src/pages/ChatPage/ChatPage.tsx b/src/pages/ChatPage/ChatPage.tsx
index 91536e54..2bded766 100644
--- a/src/pages/ChatPage/ChatPage.tsx
+++ b/src/pages/ChatPage/ChatPage.tsx
@@ -1,11 +1,22 @@
-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) && (
@@ -13,7 +24,9 @@ const ChatPage = () => {
       )}
 
       <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>
diff --git a/src/pages/ChatPage/components/ChatBubble.tsx b/src/pages/ChatPage/components/ChatBubble.tsx
index e757242f..8736fa3c 100644
--- a/src/pages/ChatPage/components/ChatBubble.tsx
+++ b/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}
 
diff --git a/src/pages/ChatPage/components/ChatList.tsx b/src/pages/ChatPage/components/ChatList.tsx
index e7c7e80d..2eaea13c 100644
--- a/src/pages/ChatPage/components/ChatList.tsx
+++ b/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}`);
diff --git a/src/pages/ChatPage/components/ChatListItem.tsx b/src/pages/ChatPage/components/ChatListItem.tsx
index 2e80c9c4..5774bd29 100644
--- a/src/pages/ChatPage/components/ChatListItem.tsx
+++ b/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}
diff --git a/src/pages/ChatPage/components/ChattingRoom.tsx b/src/pages/ChatPage/components/ChattingRoom.tsx
index 317f4701..ef082f3c 100644
--- a/src/pages/ChatPage/components/ChattingRoom.tsx
+++ b/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,22 +503,39 @@ 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>
               )}
 
@@ -510,8 +543,8 @@ const ChattingRoom = ({ selectedRoomId, className, popup }: ChattingRoomProps) =
             </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) => (
diff --git a/src/pages/ChatPage/components/PreviewItem.tsx b/src/pages/ChatPage/components/PreviewItem.tsx
index 581ce53b..5e474ebe 100644
--- a/src/pages/ChatPage/components/PreviewItem.tsx
+++ b/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>
       )}
 
diff --git a/src/pages/ProfilePage/components/ProfileCard.tsx b/src/pages/ProfilePage/components/ProfileCard.tsx
index 9234a1c5..8f9c4aa7 100644
--- a/src/pages/ProfilePage/components/ProfileCard.tsx
+++ b/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'}
diff --git a/src/pages/PromptDetailPage/assets/kakaotalk-logo.svg b/src/pages/PromptDetailPage/assets/kakaotalk-logo.svg
index 99ffe1b6..0b436285 100644
--- a/src/pages/PromptDetailPage/assets/kakaotalk-logo.svg
+++ b/src/pages/PromptDetailPage/assets/kakaotalk-logo.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.99669 1.875C5.16664 1.875 1.25 4.98236 1.25 8.817C1.25 11.2962 2.88631 13.4681 5.35064 14.7011L4.46348 17.8911C4.46348 17.8911 4.44705 18.0399 4.54234 18.0961C4.63762 18.1523 4.75263 18.1093 4.75263 18.1093C5.02863 18.0696 7.93981 16.0102 8.44913 15.6531C8.95181 15.7259 9.47425 15.7623 10.0033 15.7623C14.8334 15.7623 18.75 12.6549 18.75 8.82025C18.75 4.98566 14.8268 1.875 9.99669 1.875Z" fill="black"/>
-<path d="M5.16148 11.2373C4.88219 11.2373 4.65547 11.0192 4.65547 10.7514V7.73328H3.86689C3.59417 7.73328 3.37402 7.51184 3.37402 7.23747C3.37402 6.96309 3.59745 6.74159 3.86689 6.74159H6.45277C6.72552 6.74159 6.94565 6.96309 6.94565 7.23747C6.94565 7.51184 6.72221 7.73328 6.45277 7.73328H5.6642V10.7514C5.6642 11.0158 5.4342 11.2373 5.15819 11.2373H5.16148ZM9.5874 11.2307C9.37715 11.2307 9.21609 11.1448 9.16684 11.006L8.91709 10.3448H7.3794L7.12965 11.006C7.08034 11.1448 6.91934 11.2307 6.70909 11.2307C6.59734 11.2307 6.4889 11.2076 6.38709 11.1646C6.24907 11.0985 6.11435 10.9233 6.26877 10.444L7.47465 7.24734C7.56009 7.00272 7.81965 6.75153 8.14821 6.74491C8.47684 6.73828 8.73965 7.00272 8.82184 7.24734L10.0277 10.444C10.1821 10.9233 10.0474 11.1051 9.9094 11.1646C9.81084 11.2109 9.69915 11.2307 9.5874 11.2307ZM8.65096 9.44566L8.14821 8.00434L7.64552 9.44566H8.65096ZM10.8393 11.1646C10.5764 11.1646 10.3563 10.9563 10.3563 10.7018V7.24734C10.3563 6.96641 10.5863 6.73828 10.8721 6.73828C11.158 6.73828 11.388 6.96972 11.388 7.24734V10.2291H12.4591C12.722 10.2291 12.9421 10.4373 12.9421 10.6919C12.9421 10.9465 12.7253 11.1547 12.4591 11.1547L10.8393 11.1646ZM13.136 10.7217V7.25066C13.136 6.96972 13.366 6.74159 13.642 6.74159C13.918 6.74159 14.148 6.97297 14.148 7.25066V8.34153L15.561 6.92009C15.7165 6.76366 16.0105 6.77734 16.1885 6.95647C16.3558 7.12472 16.3992 7.40909 16.2246 7.58784L15.0681 8.74484L16.3101 10.3977C16.477 10.6126 16.4365 10.9473 16.2115 11.1051C15.9897 11.2704 15.6639 11.2153 15.5051 11.006L14.3222 9.42916L14.148 9.60434V10.7117C14.148 11.3713 13.136 11.3968 13.136 10.7217Z" fill="#FFE812"/>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9921 4.5C12.3999 4.5 3 11.9577 3 21.1608C3 27.111 6.92715 32.3233 12.8415 35.2827L10.7124 42.9387C10.7124 42.9387 10.6729 43.2957 10.9016 43.4305C11.1303 43.5654 11.4063 43.4623 11.4063 43.4623C12.0687 43.3671 19.0556 38.4244 20.2779 37.5675C21.4844 37.7421 22.7382 37.8294 24.0079 37.8294C35.6001 37.8294 45 30.3717 45 21.1686C45 11.9656 35.5844 4.5 23.9921 4.5Z" fill="black"/>
+<path d="M12.3876 26.9696C11.7172 26.9696 11.1731 26.446 11.1731 25.8034V18.5599H9.28053C8.626 18.5599 8.09766 18.0284 8.09766 17.3699C8.09766 16.7114 8.63389 16.1798 9.28053 16.1798H15.4867C16.1413 16.1798 16.6696 16.7114 16.6696 17.3699C16.6696 18.0284 16.1333 18.5599 15.4867 18.5599H13.5941V25.8034C13.5941 26.438 13.0421 26.9696 12.3797 26.9696H12.3876ZM23.0098 26.9537C22.5052 26.9537 22.1186 26.7475 22.0004 26.4143L21.401 24.8275H17.7106L17.1112 26.4143C16.9928 26.7475 16.6064 26.9537 16.1018 26.9537C15.8336 26.9537 15.5734 26.8982 15.329 26.795C14.9978 26.6365 14.6744 26.2159 15.0451 25.0655L17.9392 17.3936C18.1442 16.8065 18.7672 16.2037 19.5557 16.1878C20.3444 16.1719 20.9752 16.8065 21.1724 17.3936L24.0665 25.0655C24.4372 26.2159 24.1138 26.6522 23.7826 26.795C23.546 26.9062 23.278 26.9537 23.0098 26.9537ZM20.7623 22.6696L19.5557 19.2104L18.3493 22.6696H20.7623ZM26.0143 26.795C25.3834 26.795 24.8551 26.2952 24.8551 25.6844V17.3936C24.8551 16.7194 25.4071 16.1719 26.0932 16.1719C26.7793 16.1719 27.3313 16.7273 27.3313 17.3936V24.5498H29.902C30.5329 24.5498 31.0612 25.0496 31.0612 25.6606C31.0612 26.2715 30.5408 26.7713 29.902 26.7713L26.0143 26.795ZM31.5265 25.732V17.4016C31.5265 16.7273 32.0785 16.1798 32.7409 16.1798C33.4033 16.1798 33.9553 16.7351 33.9553 17.4016V20.0197L37.3463 16.6082C37.7195 16.2328 38.4251 16.2656 38.8525 16.6955C39.2539 17.0993 39.3581 17.7818 38.9392 18.2108L36.1634 20.9876L39.1442 24.9545C39.5447 25.4702 39.4475 26.2736 38.9077 26.6522C38.3753 27.049 37.5934 26.9167 37.2122 26.4143L34.3733 22.63L33.9553 23.0504V25.7081C33.9553 27.2912 31.5265 27.3523 31.5265 25.732Z" fill="#FFE812"/>
 </svg>
diff --git a/src/pages/PromptDetailPage/components/PromptActions.tsx b/src/pages/PromptDetailPage/components/PromptActions.tsx
index 0ec4caa2..94b71ef3 100644
--- a/src/pages/PromptDetailPage/components/PromptActions.tsx
+++ b/src/pages/PromptDetailPage/components/PromptActions.tsx
@@ -17,6 +17,7 @@ import ReviewList from './ReviewList';
 import ReportModal from '../components/ReportModal';
 import DownloadModal from '../components/DownloadModal';
 import CreateModal from '../components/CreateModal';
+import ShareModal from '../components/ShareModal';
 
 import usePromptDownload from '@/hooks/mutations/PromptDetailPage/usePromptDownload';
 import usePromptLike from '@/hooks/mutations/PromptDetailPage/usePromptLike';
@@ -109,6 +110,7 @@ const PromptActions = ({
   const [isReportModalOpen, setIsReportModalOpen] = useState(false);
   const [isDownloadModalOpen, setIsDownloadModalOpen] = useState(false);
   const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
+  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
 
   const handlePaid = () => {
     setIsPaid(true);
@@ -350,9 +352,6 @@ const PromptActions = ({
       {/* 제목 */}
       <div className="font-bold text-[24px] pt-[25px]">[{truncateTitle(title)}]</div>
 
-      {/* 가격 */}
-      <div className="text-[24px] pt-[30px] font-bold">{isFree ? '무료' : `${price.toLocaleString()}원`}</div>
-
       {/* 버튼 영역 */}
       <div className="h-[96px] pt-[30px] box-border flex items-center">
         {isAdmin ? (
@@ -368,7 +367,15 @@ const PromptActions = ({
               buttonType="squareBig"
               style="fill"
               imgType="download"
-              text={isDownloading ? '불러오는 중…' : '다운로드'}
+              text={
+                isDownloading
+                  ? '불러오는 중…'
+                  : isPaid && !isFree
+                    ? '구매완료'
+                    : isFree
+                      ? '다운로드'
+                      : `₩${price.toLocaleString()}`
+              }
               onClick={() => handleShowLoginModal(handleDownloadClick)}
             />
             {isPaymentModalOpen && ( //유료프롬프트 & 미결제 시 PaymentModal 열기
@@ -402,6 +409,22 @@ const PromptActions = ({
           className="ml-[34px] w-[28px] h-[25px] cursor-pointer"
           onClick={handleToggleLike}
         />
+
+        {/* 공유 버튼 (찜하기 버튼 UI 재사용) */}
+        <button
+          className="ml-[10px] w-[49px] h-[49px] rounded-[12px] bg-[#FFFEFB] border-[1px] border-[#D1D5DB] flex items-center justify-center"
+          onClick={() => setIsShareModalOpen(true)}
+          aria-label="공유하기">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="18" cy="5" r="3" stroke="#6B7280" strokeWidth="1.8" />
+            <circle cx="6" cy="12" r="3" stroke="#6B7280" strokeWidth="1.8" />
+            <circle cx="18" cy="19" r="3" stroke="#6B7280" strokeWidth="1.8" />
+            <line x1="8.82" y1="10.59" x2="15.18" y2="6.41" stroke="#6B7280" strokeWidth="1.8" />
+            <line x1="8.82" y1="13.41" x2="15.18" y2="17.59" stroke="#6B7280" strokeWidth="1.8" />
+          </svg>
+        </button>
+
+        <ShareModal isOpen={isShareModalOpen} onClose={() => setIsShareModalOpen(false)} title={title} />
       </div>
 
       {/* 별점 및 리뷰보기 */}
diff --git a/src/pages/PromptDetailPage/components/PromptAuthorAndReview.tsx b/src/pages/PromptDetailPage/components/PromptAuthorAndReview.tsx
index ae3a1390..4158a4ec 100644
--- a/src/pages/PromptDetailPage/components/PromptAuthorAndReview.tsx
+++ b/src/pages/PromptDetailPage/components/PromptAuthorAndReview.tsx
@@ -20,14 +20,14 @@ import { useQueryClient } from '@tanstack/react-query';
 import useGetPromptReviews from '@/hooks/queries/PromptDetailPage/useGetAllPromptReviews';
 import useUpdateReview from '@/hooks/mutations/PromptDetailPage/useUpdateReview';
 import { useLocation } from 'react-router-dom';
+import { useOpenChatRoom } from '@/hooks/useOpenChatRoom';
+import SocialLoginModal from '@/components/Modal/SocialLoginModal';
 
 import InstaIcon from '@assets/icon-instagram-logo.svg';
 import YoutubeIcon from '@assets/icon-youtube-logo.svg';
 import XIcon from '@assets/icon-x-logo.svg';
 import TextModal from '@components/Modal/TextModal';
 import star from '../assets/star.png';
-import usePostChatRooms from '@/hooks/mutations/ChatPage/usePostChatRooms';
-import { useOpenChatRoom } from '@/hooks/useOpenChatRoom';
 
 interface Review {
   review_id: number;
@@ -93,7 +93,7 @@ const PromptAuthorAndReview = ({
   });
   const { mutate: mutateFollow } = usePatchFollow({ member_id });
   const { mutate: mutateUnFollow } = useDeleteFollow({ member_id });
-  const { handleShowLoginModal } = useShowLoginModal();
+  const { loginModalShow, setLoginModalShow, handleShowLoginModal } = useShowLoginModal();
 
   const [rating, setRating] = useState(0);
   const [reviewText, setReviewText] = useState('');
@@ -282,6 +282,13 @@ const PromptAuthorAndReview = ({
     }
   };
 
+  // 채팅하기 로그인 관련
+  const handleChatting = () => {
+    handleShowLoginModal(() => {
+      openChatRoom(member_id);
+    });
+  };
+
   return (
     <section className="flex flex-col lg:flex-row gap-[40px] mt-8 w-full max-w-[1236px] xl:px-0 mx-auto">
       {/* 작성자 프로필 카드 */}
@@ -318,8 +325,8 @@ const PromptAuthorAndReview = ({
         <div className="mt-5 flex gap-2 flex-row w-full">
           <button
             className="flex-1 h-[48px] border border-gray-400 rounded-[12px] text-[14px] text-gray-700 flex items-center justify-center gap-3 hover:bg-gray-100 transition"
-            // onClick={() => openChatRoom(member_id)}
-            onClick={() => setShowModal(true)}>
+            // onClick={() => setShowModal(true)}
+            onClick={handleChatting}>
             <img src={mail} alt="문의하기" className="w-4 h-4" />
             문의하기
           </button>
@@ -413,6 +420,9 @@ const PromptAuthorAndReview = ({
       </div>
 
       {showModal && <TextModal text="아직 오픈하지 않은 페이지예요!" onClick={() => setShowModal(false)} size="lg" />}
+      {loginModalShow && (
+        <SocialLoginModal isOpen={loginModalShow} onClose={() => setLoginModalShow(false)} onClick={() => {}} />
+      )}
     </section>
   );
 };
diff --git a/src/pages/PromptDetailPage/components/PromptDetailCard.tsx b/src/pages/PromptDetailPage/components/PromptDetailCard.tsx
index 5f645cd6..83516e35 100644
--- a/src/pages/PromptDetailPage/components/PromptDetailCard.tsx
+++ b/src/pages/PromptDetailPage/components/PromptDetailCard.tsx
@@ -24,11 +24,8 @@ import reportIcon from '../assets/report.svg';
 import star from '../assets/star.png';
 import ReportModal from '../components/ReportModal';
 import arrowRightBlack from '../assets/arrow_right.svg';
-import XIcon from '@assets/icon-x-logo.svg';
-import KakaoIcon from '../assets/kakaotalk-logo.svg';
-import LinkIcon from '../assets/link-logo.svg';
-import FacebookIcon from '../assets/facebook-logo.svg';
 import usePayment from '@/hooks/mutations/MainPage/usePostRequestPayment';
+import ShareModal from './ShareModal';
 
 interface Props {
   title: string;
@@ -126,6 +123,7 @@ const PromptDetailCard = ({
   const displayMain = normalizedImages[activeIdx] ?? '';
 
   const [liked, setLiked] = useState(false);
+  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
 
   const { data: likedSet } = useMyLikedPrompts();
 
@@ -222,73 +220,10 @@ const PromptDetailCard = ({
   //   downloadPrompt(promptId);
   // };
 
-  const currentUrl = window.location.href;
-
-  // Kakao SDK 초기화
-  useEffect(() => {
-    if (!window.Kakao) return;
-    if (!window.Kakao.isInitialized()) {
-      window.Kakao.init(import.meta.env.VITE_KAKAO_JAVASCRIPT_KEY);
-    }
-  }, []);
-
-  // Facebook 공유
-  const handleFacebookShare = () => {
-    const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}`;
-    window.open(url, '_blank', 'width=600,height=400');
-  };
-
-  // X (트위터)
-  const handleXShare = () => {
-    const text = encodeURIComponent(`${title} - PromptPlace`);
-    const url = `https://twitter.com/intent/tweet?text=${text}&url=${encodeURIComponent(currentUrl)}`;
-    window.open(url, '_blank', 'width=600,height=400');
-  };
-
-  // Kakao 공유
-  const handleKakaoShare = () => {
-    if (!window.Kakao) {
-      alert('카카오 SDK를 불러오지 못했습니다.');
-      return;
-    }
-
-    window.Kakao.Share.sendDefault({
-      objectType: 'feed',
-      content: {
-        title: title,
-        description: 'PromptPlace에서 확인해보세요!',
-        imageUrl: displayMain || 'https://your-default-image-url.com/logo.png',
-        link: {
-          mobileWebUrl: currentUrl,
-          webUrl: currentUrl,
-        },
-      },
-      buttons: [
-        {
-          title: '프롬프트 보러가기',
-          link: {
-            mobileWebUrl: currentUrl,
-            webUrl: currentUrl,
-          },
-        },
-      ],
-    });
-  };
-
-  // 링크 복사
-  const handleCopyLink = async () => {
-    try {
-      await navigator.clipboard.writeText(currentUrl);
-      alert('링크가 복사되었습니다!');
-    } catch {
-      alert('복사에 실패했습니다.');
-    }
-  };
-
   const isPaidPrompt = !isFree; // 유료 프롬프트 여부
   const hasPurchased = isPaidPrompt && isPaid; // 구매 완료 여부(유료일 때만 의미 있음)
 
-  const actionLabel = hasPurchased || isFree ? '프롬프트 다운로드' : '프롬프트 구매하기';
+  const actionLabel = isFree ? '다운로드' : hasPurchased ? '구매완료' : `₩${price.toLocaleString()}`;
 
   const guideText =
     hasPurchased || isFree
@@ -457,27 +392,21 @@ const PromptDetailCard = ({
 
               <div className="mt-[12px] flex justify-between items-center flex-wrap font-medium">
                 {/* 왼쪽 영역 */}
-                <div className="flex flex-wrap items-center gap-6">
-                  <span className="text-[14px] text-[#6B7280]">업로드&nbsp;&nbsp;&nbsp;{uploadedAt}</span>
-                  <Count imgType="eye" count={views} />
-                  <Count imgType="download" count={downloads} />
-                </div>
-
-                {/* 오른쪽 공유 */}
-                <div className="flex items-center gap-3">
-                  <span className="text-[14px] text-[#6B7280]">공유</span>
-                  <button onClick={handleFacebookShare}>
-                    <img src={FacebookIcon} alt="Facebook 공유" className="w-[18px] h-[18px] cursor-pointer" />
-                  </button>
-                  <button onClick={handleKakaoShare}>
-                    <img src={KakaoIcon} alt="Kakao 공유" className="w-[18px] h-[18px] cursor-pointer" />
-                  </button>
-                  <button onClick={handleXShare}>
-                    <img src={XIcon} alt="X 공유" className="w-[18px] h-[18px] cursor-pointer" />
-                  </button>
-                  <button onClick={handleCopyLink}>
-                    <img src={LinkIcon} alt="링크 복사" className="w-[18px] h-[18px] cursor-pointer" />
-                  </button>
+                <div className="flex flex-col gap-3">
+                  <div className="flex flex-wrap items-center gap-6">
+                    <span className="text-[14px] text-[#6B7280]">업로드&nbsp;&nbsp;&nbsp;{uploadedAt}</span>
+                    <Count imgType="eye" count={views} />
+                    <Count imgType="download" count={downloads} />
+                  </div>
+                  <div>
+                    <IconButton
+                      buttonType="squareBig"
+                      style="fill"
+                      imgType="download"
+                      text={actionLabel}
+                      onClick={onPrimaryAction}
+                    />
+                  </div>
                 </div>
               </div>
             </div>
@@ -564,28 +493,33 @@ const PromptDetailCard = ({
                 <span className="text-[12px] text-[#9aa0a6]">태그가 없습니다.</span>
               )}
             </div>
-            {/* 가격 + 버튼 */}
+            {/* 찜하기 + 공유 버튼 */}
             <div className="flex flex-col items-end text-right w-full lg:w-auto">
-              <p className="font-medium text-[24px]">{isFree ? '무료' : `${price.toLocaleString()}원`}</p>
-              {isPaid && !isFree && <span className="text-sm text-green-600">구매 완료</span>}
-              <span className="text-[12px] font-light text-[#374151] mb-[8px]">{guideText}</span>
-
-              <div className="flex items-center gap-5 mt-2 lg:mt-0">
-                <IconButton
-                  buttonType="squareBig"
-                  style="fill"
-                  imgType="download"
-                  text={actionLabel}
-                  onClick={onPrimaryAction}
-                />
-
+              <div className="flex items-center gap-3 mt-2 lg:mt-0">
+                {/* 찜하기 버튼 */}
                 <button
                   className="w-[49px] h-[49px] rounded-[12px] bg-[#FFFEFB] border-[1px] border-[#D1D5DB] flex items-center justify-center"
                   onClick={handleToggleLike}
-                  aria-label="좋아요">
-                  <img src={liked ? heartOnClick : heartNone} alt="like" className="w-[28px] h-[28px]" />
+                  aria-label="찜하기">
+                  <img src={liked ? heartOnClick : heartNone} alt="찜하기" className="w-[28px] h-[28px]" />
+                </button>
+
+                {/* 공유 버튼 */}
+                <button
+                  className="w-[49px] h-[49px] rounded-[12px] bg-[#FFFEFB] border-[1px] border-[#D1D5DB] flex items-center justify-center"
+                  onClick={() => setIsShareModalOpen(true)}
+                  aria-label="공유하기">
+                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="18" cy="5" r="3" stroke="#6B7280" strokeWidth="1.8" />
+                    <circle cx="6" cy="12" r="3" stroke="#6B7280" strokeWidth="1.8" />
+                    <circle cx="18" cy="19" r="3" stroke="#6B7280" strokeWidth="1.8" />
+                    <line x1="8.82" y1="10.59" x2="15.18" y2="6.41" stroke="#6B7280" strokeWidth="1.8" />
+                    <line x1="8.82" y1="13.41" x2="15.18" y2="17.59" stroke="#6B7280" strokeWidth="1.8" />
+                  </svg>
                 </button>
               </div>
+
+              <ShareModal isOpen={isShareModalOpen} onClose={() => setIsShareModalOpen(false)} title={title} />
             </div>
           </div>
         </div>
diff --git a/src/pages/PromptDetailPage/components/ShareModal.tsx b/src/pages/PromptDetailPage/components/ShareModal.tsx
new file mode 100644
index 00000000..f9d99ea0
--- /dev/null
+++ b/src/pages/PromptDetailPage/components/ShareModal.tsx
@@ -0,0 +1,123 @@
+import useMediaQuery from '@/hooks/queries/PromptDetailPage/useMediaQuery';
+import FacebookIcon from '../assets/facebook-logo.svg';
+import KakaoIcon from '../assets/kakaotalk-logo.svg';
+import LinkIcon from '../assets/link-logo.svg';
+import XIcon from '@assets/icon-x-logo.svg';
+
+interface ShareModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+}
+
+const ShareModal = ({ isOpen, onClose, title }: ShareModalProps) => {
+  const isMobile = useMediaQuery('(max-width: 1024px)');
+
+  if (!isOpen) return null;
+
+  const currentUrl = window.location.href;
+
+  const handleFacebookShare = () => {
+    window.open(
+      `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}`,
+      '_blank',
+      'width=600,height=400',
+    );
+    onClose();
+  };
+
+  const handleXShare = () => {
+    const text = encodeURIComponent(`${title} - PromptPlace`);
+    window.open(
+      `https://twitter.com/intent/tweet?text=${text}&url=${encodeURIComponent(currentUrl)}`,
+      '_blank',
+      'width=600,height=400',
+    );
+    onClose();
+  };
+
+  const handleKakaoShare = () => {
+    if (!window.Kakao) {
+      alert('카카오 SDK를 불러오지 못했습니다.');
+      return;
+    }
+    window.Kakao.Share.sendDefault({
+      objectType: 'feed',
+      content: {
+        title,
+        description: 'PromptPlace에서 확인해보세요!',
+        imageUrl: 'https://promptplace.co.kr/favicon-96x96.png',
+        link: { mobileWebUrl: currentUrl, webUrl: currentUrl },
+      },
+      buttons: [
+        {
+          title: '프롬프트 보러가기',
+          link: { mobileWebUrl: currentUrl, webUrl: currentUrl },
+        },
+      ],
+    });
+    onClose();
+  };
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(currentUrl);
+      alert('링크가 복사되었습니다!');
+    } catch {
+      alert('복사에 실패했습니다.');
+    }
+    onClose();
+  };
+
+  // 데스크탑: 버튼 64×64 / 모바일: 56×56
+  const btnSize = isMobile ? 'w-[56px] h-[56px]' : 'w-[64px] h-[64px]';
+  // 아이콘은 버튼보다 살짝 작게 (여백감 유지)
+  const iconSize = isMobile ? 'w-[36px] h-[36px]' : 'w-[44px] h-[44px]';
+  const labelSize = isMobile ? 'text-[10px]' : 'text-[12px]';
+
+  const items = [
+    { label: 'Facebook', icon: FacebookIcon, onClick: handleFacebookShare },
+    { label: '카카오톡', icon: KakaoIcon, onClick: handleKakaoShare },
+    { label: 'X', icon: XIcon, onClick: handleXShare },
+    { label: '링크복사', icon: LinkIcon, onClick: handleCopyLink },
+  ];
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
+      <div
+        className="bg-white rounded-[20px] shadow-2xl"
+        style={{ width: isMobile ? '320px' : '420px', padding: isMobile ? '24px' : '28px 32px' }}
+        onClick={(e) => e.stopPropagation()}>
+        {/* 헤더 */}
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="font-semibold text-[18px] text-[#111827]">공유</h2>
+          <button
+            onClick={onClose}
+            aria-label="닫기"
+            className="w-[28px] h-[28px] flex items-center justify-center text-[#6B7280] hover:text-[#111827] transition-colors">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <line x1="5" y1="5" x2="19" y2="19" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
+              <line x1="19" y1="5" x2="5" y2="19" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
+            </svg>
+          </button>
+        </div>
+
+        {/* 아이콘 4열 가로 배열 */}
+        <div className="flex justify-between items-start">
+          {items.map(({ label, icon, onClick }) => (
+            <button key={label} className="flex flex-col items-center gap-[10px]" onClick={onClick}>
+              {/* 둥근 사각형 버튼, 흰 배경 + 테두리 */}
+              <div
+                className={`${btnSize} rounded-[16px] bg-white border border-[#E5E7EB] flex items-center justify-center shadow-sm hover:border-[#6198FF] transition-colors`}>
+                <img src={icon} alt={label} className={`${iconSize} object-contain`} />
+              </div>
+              <span className={`${labelSize} text-[#374151] whitespace-nowrap font-medium`}>{label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ShareModal;