From cf8eac496520a259716f676d26fb543f9a7ca102 Mon Sep 17 00:00:00 2001
From: Yoonchulchung <yoonchul005@gmail.com>
Date: Thu, 12 Feb 2026 21:38:21 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EA=B1=B0=EC=A0=88=ED=95=98=EA=B8=B0=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=82=98?=
 =?UTF-8?q?=EC=98=A4=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../proposal/received-proposal-content.tsx    |  85 ++++---
 .../components/Bubbles/ProposalMessage.tsx    | 220 ++++++++++++++----
 .../components/Bubbles/SystemEventMessage.tsx |   2 +-
 .../room/components/CollaborationBar.tsx      |  49 ++--
 app/routes/room/components/MessageRender.tsx  |   1 +
 app/routes/room/page.tsx                      |  12 +-
 6 files changed, 252 insertions(+), 117 deletions(-)

diff --git a/app/routes/business/proposal/received-proposal-content.tsx b/app/routes/business/proposal/received-proposal-content.tsx
index b637df6c..ed70949f 100644
--- a/app/routes/business/proposal/received-proposal-content.tsx
+++ b/app/routes/business/proposal/received-proposal-content.tsx
@@ -1,12 +1,14 @@
 import { useState, useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams, useLocation } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 import { useHideHeader } from "../../../hooks/useHideHeader";
+import { useHideBottomTab } from "../../../hooks/useHideBottomTab";
 import NavigationHeader from "../../../components/common/NavigateHeader";
 
 import CampaignBrandCard from "../components/CampaignBrandCard";
 import CampaignInfoGroup from "../components/CampaignInfoGroup";
 import Modal from "../../../components/common/Modal";
+import FilterBottomSheet from "../../../components/common/FilterBottomSheet";
 import LoadingSpinner from "../../../components/common/LoadingSpinner";
 
 import { getProposalDetail, approveCampaignProposal, rejectCampaignProposal, type ProposalDetail } from "./api/proposal";
@@ -33,7 +35,16 @@ export default function ReceivedProposalContent() {
 
     const [rejectReason, setRejectReason] = useState("");
     const navigate = useNavigate();
+    const location = useLocation();
     useHideHeader(true);
+    useHideBottomTab(modalType === "reject" || modalType === "rejectSuccess");
+
+    // 채팅에서 거절하기로 진입한 경우 자동으로 거절 모달 열기
+    useEffect(() => {
+        if (location.state?.openReject && !isLoading && proposal) {
+            setModalType("reject");
+        }
+    }, [location.state, isLoading, proposal]);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -226,45 +237,20 @@ export default function ReceivedProposalContent() {
                 </button>
             </div>
 
-            <Modal isOpen={modalType !== "none"} onClose={closeModal} className="w-full max-w-[340px] p-8 px-6">
-                {/* 모달 */}
-                {modalType === "confirm" && (
-                    <div className="flex flex-col items-center text-center">
-                        <button onClick={closeModal} className="absolute top-6 left-6">
-                            <img src={closeIcon} alt="close" className="w-5 h-5 opacity-40" />
-                        </button>
-                        <div className="mt-8 mb-6">
-                            <img src={checkIcon} alt="check" className="w-[80px] h-[80px]" />
-                        </div>
-                        <h3 className="text-[20px] font-bold text-text-black mb-10">제안을 수락하시겠습니까?</h3>
-                        <div className="flex w-full gap-3">
-                            <button onClick={closeModal} className="w-[90px] py-4 border border-core-3 rounded-[16px] text-core-1 font-bold">취소</button>
-                            <button onClick={handleConfirm} className="flex-1 py-4 bg-core-1 rounded-[16px] text-white font-bold">수락하기</button>
-                        </div>
-                    </div>
-                )}
-
-                {modalType === "success" && (
-                    <div className="flex flex-col items-center text-center py-4">
-                        <div className="mb-6"><img src={checkIcon} alt="check" className="w-[80px] h-[80px]" /></div>
-                        <h3 className="text-[22px] font-bold text-text-black mb-2">수락하기 완료</h3>
-                        <p className="text-[16px] text-text-gray3 mb-10 leading-snug">브랜드와 채팅방에서<br />협업을 진행해주세요</p>
-                        <button onClick={() => window.location.reload()} className="w-full py-4 bg-core-1 rounded-[16px] text-white font-bold">완료하기</button>
-                    </div>
-                )}
-
+            {/* 거절 바텀시트 */}
+            <FilterBottomSheet isOpen={modalType === "reject" || modalType === "rejectSuccess"} onClose={closeModal} className="h-[60%]">
                 {modalType === "reject" && (
-                    <div className="flex flex-col w-full">
-                        <h3 className="text-[18px] font-bold text-text-black mb-6">비플레인 선크림 리뷰 콘텐츠</h3>
+                    <div className="flex flex-col h-full px-6 pt-8 pb-6">
+                        <h3 className="text-[20px] font-bold text-text-black mb-6">{proposal?.title}</h3>
 
-                        <div className="flex flex-col gap-2 mb-8">
+                        <div className="flex flex-col gap-2 flex-1">
                             <label className="text-[16px] font-bold text-text-black">거절 이유</label>
                             <div className="relative">
                                 <textarea
                                     value={rejectReason}
                                     onChange={(e) => setRejectReason(e.target.value.slice(0, 500))}
                                     placeholder="거절 이유를 입력해주세요"
-                                    className="w-full h-[160px] p-4 bg-white border border-text-gray5 rounded-[12px] text-body1 resize-none focus:outline-none focus:border-core-1"
+                                    className="w-full h-[140px] p-4 bg-white border border-text-gray5 rounded-[12px] text-body1 resize-none focus:outline-none focus:border-core-1"
                                 />
                                 <span className="absolute bottom-3 right-4 text-[12px] text-text-gray4">
                                     {rejectReason.length}/500
@@ -273,8 +259,8 @@ export default function ReceivedProposalContent() {
                             <p className="text-[12px] text-text-gray3">*거절 이유 작성은 선택사항 입니다</p>
                         </div>
 
-                        <div className="flex w-full gap-3">
-                            <button onClick={closeModal} className="w-[90px] py-4 border border-core-3 rounded-[16px] text-core-1 font-bold">취소하기</button>
+                        <div className="flex w-full gap-3 mt-auto pt-6">
+                            <button onClick={closeModal} className="w-[110px] py-4 border border-core-3 rounded-[16px] text-core-1 font-bold shrink-0">취소하기</button>
                             <button
                                 onClick={handleRejectSubmit}
                                 disabled={isProcessing}
@@ -287,13 +273,42 @@ export default function ReceivedProposalContent() {
                 )}
 
                 {modalType === "rejectSuccess" && (
-                    <div className="flex flex-col items-center text-center py-4">
+                    <div className="flex flex-col items-center text-center px-6 py-10">
                         <div className="mb-6"><img src={checkIcon} alt="check" className="w-[80px] h-[80px]" /></div>
                         <h3 className="text-[22px] font-bold text-text-black mb-2">거절하기 완료</h3>
                         <p className="text-[16px] text-text-gray3 mb-10">다른 협업을 확인해주세요</p>
+                        <button onClick={() => navigate(-1)} className="w-full py-4 bg-core-1 rounded-[16px] text-white font-bold">완료하기</button>
+                    </div>
+                )}
+            </FilterBottomSheet>
+
+            <Modal isOpen={modalType === "confirm" || modalType === "success"} onClose={closeModal} className="w-full max-w-[340px] p-8 px-6">
+                {/* 모달 */}
+                {modalType === "confirm" && (
+                    <div className="flex flex-col items-center text-center">
+                        <button onClick={closeModal} className="absolute top-6 left-6">
+                            <img src={closeIcon} alt="close" className="w-5 h-5 opacity-40" />
+                        </button>
+                        <div className="mt-8 mb-6">
+                            <img src={checkIcon} alt="check" className="w-[80px] h-[80px]" />
+                        </div>
+                        <h3 className="text-[20px] font-bold text-text-black mb-10">제안을 수락하시겠습니까?</h3>
+                        <div className="flex w-full gap-3">
+                            <button onClick={closeModal} className="w-[90px] py-4 border border-core-3 rounded-[16px] text-core-1 font-bold">취소</button>
+                            <button onClick={handleConfirm} className="flex-1 py-4 bg-core-1 rounded-[16px] text-white font-bold">수락하기</button>
+                        </div>
+                    </div>
+                )}
+
+                {modalType === "success" && (
+                    <div className="flex flex-col items-center text-center py-4">
+                        <div className="mb-6"><img src={checkIcon} alt="check" className="w-[80px] h-[80px]" /></div>
+                        <h3 className="text-[22px] font-bold text-text-black mb-2">수락하기 완료</h3>
+                        <p className="text-[16px] text-text-gray3 mb-10 leading-snug">브랜드와 채팅방에서<br />협업을 진행해주세요</p>
                         <button onClick={() => window.location.reload()} className="w-full py-4 bg-core-1 rounded-[16px] text-white font-bold">완료하기</button>
                     </div>
                 )}
+
             </Modal>
         </div>
     );
diff --git a/app/routes/room/components/Bubbles/ProposalMessage.tsx b/app/routes/room/components/Bubbles/ProposalMessage.tsx
index 50e0b646..dbbaafe5 100644
--- a/app/routes/room/components/Bubbles/ProposalMessage.tsx
+++ b/app/routes/room/components/Bubbles/ProposalMessage.tsx
@@ -1,4 +1,6 @@
+import { useState } from "react";
 import { useNavigate } from "react-router";
+import { approveCampaignProposal } from "../../../business/proposal/api/proposal";
 
 type BaseProps = {
   createdAt?: string;
@@ -6,6 +8,7 @@ type BaseProps = {
   campaignName: string;
   bodyText: string;
   proposalDirection: "NONE" | "BRAND_TO_CREATOR" | "CREATOR_TO_BRAND";
+  proposalStatus?: string;
 };
 
 type ProposalCardProps = BaseProps & {
@@ -20,6 +23,13 @@ type ApplyCardProps = BaseProps & {
 
 type Props = ProposalCardProps | ApplyCardProps;
 
+const CheckIcon = () => (
+  <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="40" cy="40" r="40" fill="#6666E5" />
+    <path d="M24 40L35 51L56 30" stroke="white" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
 export default function ProposalMessage(props: Props) {
   const {
     kind,
@@ -28,11 +38,137 @@ export default function ProposalMessage(props: Props) {
     campaignName,
     bodyText,
     proposalDirection,
+    proposalStatus,
   } = props;
   const proposalId = kind === "APPLY_CARD" ? (props as ApplyCardProps).applyId : (props as ProposalCardProps).proposalId;
   const timeText = createdAt ?? "";
   const navigate = useNavigate();
 
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [actionDone, setActionDone] = useState<"accepted" | "rejected" | null>(null);
+  const [modalState, setModalState] = useState<"confirm" | "success" | null>(null);
+
+  const isAlreadyProcessed = proposalStatus === "MATCHED" || proposalStatus === "REJECTED" || proposalStatus === "CANCELED";
+  const showButtons = proposalDirection === "BRAND_TO_CREATOR" && !isAlreadyProcessed && !actionDone;
+
+  const handleAcceptClick = () => {
+    if (isProcessing) return;
+    setModalState("confirm");
+  };
+
+  const handleConfirmAccept = async () => {
+    try {
+      setIsProcessing(true);
+      const response = await approveCampaignProposal(proposalId);
+      if (response.isSuccess) {
+        setModalState("success");
+        setActionDone("accepted");
+      } else {
+        setModalState(null);
+        alert(response.message || "수락 처리 중 오류가 발생했습니다.");
+      }
+    } catch (error) {
+      console.error("제안 수락 실패:", error);
+      setModalState(null);
+      alert("서버와 통신 중 에러가 발생했습니다.");
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleReject = () => {
+    navigate(`/business/proposal?type=received&proposalId=${proposalId}`, {
+      state: { openReject: true },
+    });
+  };
+
+  const AcceptModal = () => {
+    if (!modalState) return null;
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        <div
+          className="absolute inset-0 bg-black/40"
+          onClick={() => !isProcessing && setModalState(null)}
+        />
+
+        <div className="relative bg-white rounded-[20px] w-[calc(100%-48px)] max-w-[400px] px-6 pt-6 pb-8 flex flex-col items-center">
+          {modalState === "confirm" && (
+            <button
+              type="button"
+              onClick={() => setModalState(null)}
+              className="absolute top-5 left-5 w-8 h-8 flex items-center justify-center"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M2 2L14 14M14 2L2 14" stroke="#5B5D6B" strokeWidth="2" strokeLinecap="round" />
+              </svg>
+            </button>
+          )}
+
+          <div className="mt-10 mb-8">
+            <CheckIcon />
+          </div>
+
+          {modalState === "confirm" ? (
+            <>
+              <div className="text-[22px] leading-[30px] font-medium text-[#111] text-callout3 mb-10">
+                제안을 수락하시겠습니까?
+              </div>
+
+              <div className="w-full flex items-center gap-3">
+                <button
+                  type="button"
+                  onClick={() => setModalState(null)}
+                  className="w-[120px] h-[54px] rounded-[14px] border border-[#B7B7F3] text-[#6666E5] text-[17px] font-semibold shrink-0"
+                >
+                  취소
+                </button>
+                <button
+                  type="button"
+                  onClick={handleConfirmAccept}
+                  disabled={isProcessing}
+                  className="flex-1 h-[54px] rounded-[14px] bg-[#6666E5] text-white text-[17px] font-semibold disabled:opacity-50"
+                >
+                  {isProcessing ? "처리 중..." : "수락하기"}
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="text-[22px] leading-[30px] font-bold text-[#111] text-center mb-3">
+                수락하기 완료
+              </div>
+              <div className="text-[15px] leading-[22px] text-[#9B9BA1] text-center whitespace-pre-line mb-10">
+                {"브랜드와 채팅방에서\n협업을 진행해주세요"}
+              </div>
+
+              <button
+                type="button"
+                onClick={() => setModalState(null)}
+                className="w-full h-[54px] rounded-[14px] bg-[#6666E5] text-white text-[17px] font-semibold"
+              >
+                완료하기
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const ArrowButton = ({ onClick }: { onClick: () => void }) => (
+    <button
+      type="button"
+      onClick={onClick}
+      className="w-6 h-6 grid place-items-center text-gray2"
+      aria-label="expand"
+    >
+      <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0.552734 12.5068L6.05273 6.50684L0.552734 0.506836" stroke="#5B5D6B" strokeWidth="1.5"/>
+      </svg>
+    </button>
+  );
+
   if (proposalDirection == "CREATOR_TO_BRAND") {
     return (
       <div className="flex w-full justify-end">
@@ -58,16 +194,7 @@ export default function ProposalMessage(props: Props) {
                   <div className="min-w-0 text-[14px] leading-[20px] style-Medium text-[#404252] truncate">
                     {campaignName}
                   </div>
-                  <button
-                    type="button"
-                    onClick={() => navigate(`/business/proposal?type=sent&proposalId=${proposalId}`)}
-                    className="w-6 h-6 grid place-items-center text-gray2"
-                    aria-label="expand"
-                  >
-                    <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M0.552734 12.5068L6.05273 6.50684L0.552734 0.506836" stroke="#5B5D6B" strokeWidth="1.5"/>
-                    </svg>
-                  </button>
+                  <ArrowButton onClick={() => navigate(`/business/proposal?type=sent&proposalId=${proposalId}`)} />
                 </div>
               </div>
             </div>
@@ -89,6 +216,8 @@ export default function ProposalMessage(props: Props) {
 
   if (proposalDirection == "BRAND_TO_CREATOR") {
     return (
+      <>
+      <AcceptModal />
       <div className="flex justify-start">
         <div className="w-fit flex items-start gap-[10px] max-w-full">
           {/* avatar */}
@@ -129,26 +258,7 @@ export default function ProposalMessage(props: Props) {
                       {campaignName}
                     </div>
 
-                    <button
-                      type="button"
-                      onClick={() => navigate(`/business/proposal?type=received&proposalId=${proposalId}`)}
-                      className="w-6 h-6 grid place-items-center text-gray2"
-                      aria-label="expand"
-                    >
-                      <svg
-                        width="8"
-                        height="14"
-                        viewBox="0 0 8 14"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M0.552734 12.5068L6.05273 6.50684L0.552734 0.506836"
-                          stroke="#5B5D6B"
-                          strokeWidth="1.5"
-                        />
-                      </svg>
-                    </button>
+                    <ArrowButton onClick={() => navigate(`/business/proposal?type=received&proposalId=${proposalId}`)} />
                   </div>
                 </div>
               </div>
@@ -163,25 +273,36 @@ export default function ProposalMessage(props: Props) {
                 </div>
               </div>
 
-              <div className="flex items-center gap-[9px]">
-                {/* accept */}
-                <button
-                  type="button"
-                  onClick={() => {}} // TODO: 제안 수락
-                  className="h-[32px] flex-1 rounded-[6px] bg-[#6666E5] text-white text-[14px] leading-[20px] font-Medium"
-                >
-                  제안 수락하기
-                </button>
+              {/* 수락/거절 버튼 */}
+              {showButtons && (
+                <div className="flex items-center gap-[9px]">
+                  <button
+                    type="button"
+                    onClick={handleAcceptClick}
+                    disabled={isProcessing}
+                    className="h-[32px] flex-1 rounded-[6px] bg-[#6666E5] text-white text-[14px] leading-[20px] font-Medium disabled:opacity-50"
+                  >
+                    {isProcessing ? "처리 중..." : "제안 수락하기"}
+                  </button>
 
-                {/* reject */}
-                <button
-                  type="button"
-                  onClick={() => {}} // TODO: 제안 거절
-                  className="w-[72px] h-[32px] rounded-[6px] bg-white text-[#6666E5] text-[14px] leading-[20px] style-Medium border border-[#B7B7F3]"
-                >
-                  거절하기
-                </button>
-              </div>
+                  <button
+                    type="button"
+                    onClick={handleReject}
+                    disabled={isProcessing}
+                    className="w-[72px] h-[32px] rounded-[6px] bg-white text-[#6666E5] text-[14px] leading-[20px] style-Medium border border-[#B7B7F3] disabled:opacity-50"
+                  >
+                    거절하기
+                  </button>
+                </div>
+              )}
+
+              {/* 처리 완료 상태 표시 */}
+              {actionDone === "accepted" && (
+                <div className="text-[12px] text-[#6666E5] style-Medium text-center">수락 완료</div>
+              )}
+              {actionDone === "rejected" && (
+                <div className="text-[12px] text-[#9B9BA1] style-Medium text-center">거절 완료</div>
+              )}
             </div>
 
             {timeText ? (
@@ -192,8 +313,9 @@ export default function ProposalMessage(props: Props) {
           </div>
         </div>
       </div>
+      </>
     );
   }
 
   return null;
-}
\ No newline at end of file
+}
diff --git a/app/routes/room/components/Bubbles/SystemEventMessage.tsx b/app/routes/room/components/Bubbles/SystemEventMessage.tsx
index 38469f45..3ccd970f 100644
--- a/app/routes/room/components/Bubbles/SystemEventMessage.tsx
+++ b/app/routes/room/components/Bubbles/SystemEventMessage.tsx
@@ -1,5 +1,5 @@
 export const CHAT_NOTICE_TEXT = {
-  PROPOSAL_ACCEPTED: "제안이 수락되었습니다.\n협업을 시작해 주세요.",
+  PROPOSAL_ACCEPTED: "캠페인이 매칭 되었습니다.\n협업을 시작해 주세요.",
   PROPOSAL_REJECTED: "제안이 수락되지 않았습니다.\n다른 협업 기회를 확인해보세요.",
   PROPOSAL_CANCELED: "제안이 취소되었습니다.\n다른 협업 기회를 확인해보세요.",
 
diff --git a/app/routes/room/components/CollaborationBar.tsx b/app/routes/room/components/CollaborationBar.tsx
index 5c23b07c..df1ee09d 100644
--- a/app/routes/room/components/CollaborationBar.tsx
+++ b/app/routes/room/components/CollaborationBar.tsx
@@ -10,37 +10,32 @@ export default function CollaborationSummaryBar({
   subtitle,
 }: Props) {
   return (
-    <div>
-      <div className="w-full max-w-[430px] h-[64px] bg-white flex items-center gap-3 px-3.5">
-        {/* 썸네일 */}
-        <div className="w-[40px] h-[40px] rounded-[10px] bg-[#F3F4F8] flex items-center justify-center overflow-hidden shrink-0">
-          {thumbnailUrl ? (
-            <img
-              src={thumbnailUrl}
-              alt=""
-              className="w-[36px] h-[36px] object-cover rounded-[8px]"
-            />
-          ) : null}
-        </div>
+    <div className="w-full h-[64px] bg-white flex items-center gap-3 px-3.5">
+      {/* 썸네일 */}
+      <div className="w-[40px] h-[40px] rounded-[10px] bg-[#F3F4F8] flex items-center justify-center overflow-hidden shrink-0">
+        {thumbnailUrl ? (
+          <img
+            src={thumbnailUrl}
+            alt=""
+            className="w-[36px] h-[36px] object-cover rounded-[8px]"
+          />
+        ) : null}
+      </div>
 
-        {/* 텍스트 영역 */}
-        <div className="min-w-0 flex flex-col justify-center gap-[2px]">
-          <div className="flex items-center gap-2">
-            <span
-              className="
-                bg-[#E6E6F3] text-[#6666E5] text-[10px] leading-[14px] px-[6px] py-[2px] rounded-[6px] shrink-0"
-            >
-              협업 중
-            </span>
+      {/* 텍스트 영역 */}
+      <div className="min-w-0 flex-1 flex flex-col justify-center gap-[2px]">
+        <div className="flex items-center gap-2">
+          <span className="bg-[#E6E6F3] text-[#6666E5] text-[10px] leading-[14px] px-[6px] py-[2px] rounded-[6px] shrink-0">
+            협업 중
+          </span>
 
-            <div className="text-[14px] leading-[20px] text-[#111] font-semibold truncate">
-              {title}
-            </div>
+          <div className="min-w-0 text-[14px] leading-[20px] text-[#111] font-semibold truncate">
+            {title}
           </div>
+        </div>
 
-          <div className="mt-[2px] text-[12px] leading-[16px] text-[#5B5D6B] truncate">
-            {subtitle}
-          </div>
+        <div className="mt-[2px] text-[12px] leading-[16px] text-[#5B5D6B] truncate">
+          {subtitle}
         </div>
       </div>
     </div>
diff --git a/app/routes/room/components/MessageRender.tsx b/app/routes/room/components/MessageRender.tsx
index 5abaa896..6b8c73bb 100644
--- a/app/routes/room/components/MessageRender.tsx
+++ b/app/routes/room/components/MessageRender.tsx
@@ -79,6 +79,7 @@ export default function MessageRenderer({
               campaignName={sys.payload.campaignName}
               bodyText={sys.payload.campaignSummary}
               proposalDirection={sys.payload.proposalDirection}
+              proposalStatus={sys.payload.proposalStatus}
             />
           )
 
diff --git a/app/routes/room/page.tsx b/app/routes/room/page.tsx
index 4b46e987..1e2e7b9b 100644
--- a/app/routes/room/page.tsx
+++ b/app/routes/room/page.tsx
@@ -104,12 +104,10 @@ export default function ChattingRoom({ roomId }: Props) {
 
   const partnerName = detail?.opponentName ?? "";
   const partnerAvatarUrl = detail?.opponentProfileImageUrl ?? "";
-  const isCollaborating = detail?.isCollaborating ?? false;
-
   const collabTitle = detail?.campaignSummary?.campaignTitle ?? "";
   const collabSubtitle = detail?.campaignSummary?.brandName ?? "";
   const collabThumb = detail?.campaignSummary?.campaignImageUrl ?? partnerAvatarUrl;
-  const summaryBarHeight = isCollaborating ? 64 : 0;
+  const summaryBarHeight = detail?.campaignSummary ? 64 : 0;
 
 
   const actions: AttachmentAction[] = useMemo(
@@ -180,17 +178,21 @@ export default function ChattingRoom({ roomId }: Props) {
       >
         <div className="w-full">
           <div className="w-full space-y-2">
-            {messages.map((m) => {
+            {messages.map((m, idx) => {
               const isMe = m.senderType === "USER" && m.senderId === myUserId;
               const { dateText, timeText } = formatKoreanDateTime(m.createdAt);
               const messageKey = m.clientMessageId || m.messageId || `${m.roomId}-${m.createdAt}`;
 
+              const prev = idx > 0 ? messages[idx - 1] : null;
+              const isSameSender = prev && prev.senderId === m.senderId && prev.senderType === m.senderType;
+              const showAvatar = !isMe && !isSameSender;
+
               return (
                 <MessageRenderer
                   key={messageKey}
                   message={m}
                   timeText={`${dateText}\n${timeText}`}
-                  avatarSrc={isMe ? undefined : partnerAvatarUrl}
+                  avatarSrc={showAvatar ? partnerAvatarUrl : undefined}
                 />
               );
             })}