From 0afb217918a268c8c71d16aeb249b06280117a97 Mon Sep 17 00:00:00 2001
From: yjudy0531 <yjudy0531@gmail.com>
Date: Thu, 13 Aug 2026 20:03:41 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20TradeDetailPage=20=EC=B1=84=ED=8C=85?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20API=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ProposalDetailContent.tsx의 handleChat 패턴을 참고하여 createOrGetChatRoom
호출 후 채팅방으로 이동하도록 연결

미검증(로컬 CORS 이슈로 테스트 불가) - PR 리뷰 시 실제 동작 확인 필요

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/pages/mypage/TradeDetailPage.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/pages/mypage/TradeDetailPage.tsx b/src/pages/mypage/TradeDetailPage.tsx
index b0037e0..ba83116 100644
--- a/src/pages/mypage/TradeDetailPage.tsx
+++ b/src/pages/mypage/TradeDetailPage.tsx
@@ -8,6 +8,7 @@ import { useTradeStatusChange } from '@/features/trade/api/useTradeStatusChange'
 import type { TradeStatus } from '@/features/trade/api/types';
 import { buildTradeTimeline } from '@/features/trade/lib/buildTradeTimeline';
 import { resolveImageUrl } from '@/shared/lib/resolveImageUrl';
+import { createOrGetChatRoom } from '@/features/chat/api/room';
 
 const SectionTitle = ({ children }: { children: ReactNode }) => (
   <p className="px-[16px] pt-[24px] pb-[8px] text-[12px] text-[#767676]">{children}</p>
@@ -68,6 +69,7 @@ const TradeDetailPage = () => {
     Boolean((location.state as { shippingConfirmed?: boolean } | null)?.shippingConfirmed),
   );
   const shippingToastHandledRef = useRef(false);
+  const [isChatLoading, setIsChatLoading] = useState(false);
 
   useEffect(() => {
     if (!showShippingToast || shippingToastHandledRef.current) return;
@@ -146,6 +148,17 @@ const TradeDetailPage = () => {
     );
   };
 
+  const handleChat = async () => {
+    if (isChatLoading) return;
+    setIsChatLoading(true);
+    try {
+      const { chatRoomId } = await createOrGetChatRoom(trade.itemId);
+      navigate(`/chat/${chatRoomId}`);
+    } finally {
+      setIsChatLoading(false);
+    }
+  };
+
   return (
     <div className="relative mx-auto min-h-dvh w-full max-w-[390px] bg-[#FFFFFF] font-sans">
       <header className="sticky top-0 z-10 flex h-[52px] items-center justify-between border-b border-[#F0F0F0] bg-white px-[16px]">
@@ -291,7 +304,7 @@ const TradeDetailPage = () => {
             </p>
           </div>
         </div>
-        <Button variant="ghost" size="36">
+        <Button variant="ghost" size="36" onClick={handleChat} disabled={isChatLoading}>
           채팅하기
         </Button>
       </div>