[FEAT] chat room UI

src/components/estimate/detail/EstimateChatAction.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import Button from "@/components/common/Button/Button";
+import Toast from "@/components/common/Toast/Toast";
+import { useGetOrCreateChatRoom } from "@/hooks/useChatRoom";
+import { WriteIcon } from "@/icons";
+import { getApiErrorMessage } from "@/lib/api/getApiErrorMessage";
+import { APP_ROUTES } from "@/lib/constants/appRoutes";
+import { cn } from "@/lib/utils/cn";
+
+interface EstimateChatActionProps {
+  estimateId: number;
+  className?: string;
+  buttonClassName?: string;
+}
+
+/**
+ * 견적 상세 채팅방 진입 CTA
+ * // 2026.08.06 김성현 - [추가] 고객·기사 상세 공통 채팅방 생성 및 이동
+ */
+export default function EstimateChatAction({
+  estimateId,
+  className,
+  buttonClassName,
+}: EstimateChatActionProps) {
+  const router = useRouter();
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
+  const chatRoomMutation = useGetOrCreateChatRoom();
+
+  const handleClick = async () => {
+    try {
+      const room = await chatRoomMutation.mutateAsync({ estimateId });
+      router.push(APP_ROUTES.CHATS.ROOM(room.id));
+    } catch (error) {
+      setToastMessage(getApiErrorMessage(error, "채팅방을 준비하지 못했습니다."));
+    }
+  };
+
+  return (
+    <>
+      <div className={cn("flex w-full justify-end", className)}>
+        <Button
+          variant="outline"
+          size="cta"
+          className={cn("w-[200px] whitespace-nowrap", buttonClassName)}
+          disabled={chatRoomMutation.isPending}
+          aria-busy={chatRoomMutation.isPending}
+          onClick={() => void handleClick()}
+          rightIcon={<WriteIcon className="size-20 shrink-0" aria-hidden="true" />}
+        >
+          {chatRoomMutation.isPending ? "채팅 준비 중" : "채팅하기"}
+        </Button>
+      </div>
+
+      {toastMessage ? <Toast onClose={() => setToastMessage(null)}>{toastMessage}</Toast> : null}
+    </>
+  );
+}

src/components/estimate/detail/EstimateDetailLayout.tsx

@@ -18,7 +18,7 @@ export const ESTIMATE_DETAIL_LAYOUT_CLASSES = {
   // Desktop 본문 840 + aside 320 + gap 40 = 1200 (container)
   // overflow-clip 제거 — focus ring이 aside 경계에서 잘리지 않도록 폭만으로 제한
   mainClassName: "gap-24 md:gap-30 xl:w-210 xl:shrink-0",
-  asideClassName: "gap-28 md:gap-40 xl:w-80 xl:shrink-0",
+  asideClassName: "gap-28 md:gap-40 xl:w-[320px] xl:shrink-0",
 } as const;
 
 interface EstimateDetailLayoutProps {

src/components/estimate/pending/PendingEstimateDetailView.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 
 import Toast from "@/components/common/Toast/Toast";
+import EstimateChatAction from "@/components/estimate/detail/EstimateChatAction";
 import EstimateDetailActions from "@/components/estimate/detail/EstimateDetailActions";
 import EstimateDetailComment from "@/components/estimate/detail/EstimateDetailComment";
 import EstimateDetailDriverSummary from "@/components/estimate/detail/EstimateDetailDriverSummary";
@@ -42,6 +43,7 @@ function PendingEstimateDetailContent({ estimateId, data }: PendingEstimateDetai
   const estimateRequestId = data.estimateRequest.id;
   const canCancelRequest = isCancelableEstimateRequestStatus(data.estimateRequest.status);
   const displayName = data.mover.nickname || data.mover.name;
+  const showChatAction = data.status === "SENT";
 
   const confirmMutation = useConfirmEstimate(estimateId, {
     onSuccess: () => setConfirmToastMessage("견적이 확정되었습니다."),
@@ -77,19 +79,24 @@ function PendingEstimateDetailContent({ estimateId, data }: PendingEstimateDetai
           </>
         }
         aside={
-          <EstimateDetailActions
-            price={data.price}
-            buttonSize="detail"
-            isConfirmed={data.isConfirmed}
-            canConfirm={data.canConfirm}
-            confirmDisabledReason={data.confirmDisabledReason}
-            isConfirming={confirmMutation.isPending}
-            onConfirm={() => confirmMutation.mutate()}
-            canCancelRequest={canCancelRequest}
-            isCanceling={cancelFlow.isCancelPending}
-            onCancelRequest={cancelFlow.openCancelModal}
-            cancelButtonRef={cancelFlow.cancelButtonRef}
-          />
+          <div className="flex w-full flex-col gap-16">
+            <EstimateDetailActions
+              price={data.price}
+              buttonSize="detail"
+              isConfirmed={data.isConfirmed}
+              canConfirm={data.canConfirm}
+              confirmDisabledReason={data.confirmDisabledReason}
+              isConfirming={confirmMutation.isPending}
+              onConfirm={() => confirmMutation.mutate()}
+              canCancelRequest={canCancelRequest}
+              isCanceling={cancelFlow.isCancelPending}
+              onCancelRequest={cancelFlow.openCancelModal}
+              cancelButtonRef={cancelFlow.cancelButtonRef}
+            />
+            {showChatAction ? (
+              <EstimateChatAction estimateId={estimateId} buttonClassName="w-full" />
+            ) : null}
+          </div>
         }
       />
 
@@ -119,6 +126,7 @@ function PendingEstimateDetailContent({ estimateId, data }: PendingEstimateDetai
  * // 2026.07.25 정슬기 - [추가]
  * // 2026.07.30 정슬기 - [수정] useEstimateDetail·Layout·Actions 통합
  * // 2026.08.03 정슬기 - [수정] 레이아웃·코멘트·요청 취소 액션 · Header 뒤로가기
+ * // 2026.08.06 김성현 - [수정] 대기 견적 상세 채팅방 진입 CTA 추가
  */
 export default function PendingEstimateDetailView({ estimateId }: PendingEstimateDetailViewProps) {
   const { data, isLoading, isError, error, refetch } = useEstimateDetail(estimateId);

src/components/estimate/sent/SentEstimateChatAction.tsx

@@ -0,0 +1,13 @@
+import EstimateChatAction from "@/components/estimate/detail/EstimateChatAction";
+
+interface SentEstimateChatActionProps {
+  estimateId: number;
+}
+
+/**
+ * // 2026.08.06 김성현 - [추가] 보낸 견적 상세 채팅방 진입 CTA
+ * // 2026.08.06 김성현 - [수정] 공통 EstimateChatAction 재사용
+ */
+export default function SentEstimateChatAction({ estimateId }: SentEstimateChatActionProps) {
+  return <EstimateChatAction estimateId={estimateId} />;
+}

src/components/estimate/sent/SentEstimateDetailPage.tsx

@@ -2,10 +2,12 @@
 
 import { Text } from "@/components/common/Text";
 import EstimateDetailLayout, {
+  ESTIMATE_DETAIL_LAYOUT_CLASSES,
   EstimateDetailQueryState,
 } from "@/components/estimate/detail/EstimateDetailLayout";
 import { EstimateDetailInfoSection } from "@/components/estimate/detail/EstimateDetailInfoSection";
 import EstimateDetailPrice from "@/components/estimate/detail/EstimateDetailPrice";
+import SentEstimateChatAction from "@/components/estimate/sent/SentEstimateChatAction";
 import { MoveTypeChip } from "@/components/common/Chip/MoveTypeChip";
 import DesignatedChip from "@/components/estimate/DesignatedChip";
 import { useSentEstimateDetail } from "@/hooks/useSentEstimates";
@@ -124,14 +126,17 @@ export default function SentEstimateDetailPage({ estimateId }: SentEstimateDetai
 
   const estimate = query.data;
   const request = estimate.estimateRequest;
+  // 2026.08.06 김성현 - [수정] 견적 조율 가능한 보낸 견적에서 채팅방 진입 CTA 노출
+  const showChatAction = estimate.status === "SENT";
 
   return (
     <EstimateDetailLayout
       showProfile={false}
       backFallbackHref={APP_ROUTES.MOVER_ESTIMATES.SENT}
       contentClassName="pt-35 pb-64 md:pt-[46px] md:pb-80 lg:pt-[43px] lg:pb-37-5"
-      rowClassName="gap-20 md:gap-32 lg:gap-0"
-      mainClassName="gap-20 md:gap-30 lg:w-210"
+      rowClassName={ESTIMATE_DETAIL_LAYOUT_CLASSES.rowClassName}
+      mainClassName="gap-20 md:gap-30 xl:w-210 xl:shrink-0"
+      asideClassName="items-end gap-28 md:gap-40 xl:w-80 xl:shrink-0"
       main={
         <>
           <div className="flex w-full flex-col gap-20 md:gap-26">
@@ -170,6 +175,7 @@ export default function SentEstimateDetailPage({ estimateId }: SentEstimateDetai
           <SentEstimateComment comment={estimate.comment} />
         </>
       }
+      aside={showChatAction ? <SentEstimateChatAction estimateId={estimate.id} /> : undefined}
     />
   );
 }

src/lib/constants/appRoutes.ts

@@ -62,4 +62,8 @@ export const APP_ROUTES = {
     SENT_DETAIL: (estimateId: number) => `/estimate/sent/${estimateId}`,
     REJECTED: "/estimate/rejected",
   },
+  // 2026.08.06 김성현 - [추가] 채팅방 상세 페이지 경로
+  CHATS: {
+    ROOM: (roomId: number) => `/chats/${roomId}`,
+  },
 } as const;