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>