Mido

src/pages/Consumer/Reservation.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from "react"; // useMemo 추가
 import { useNavigate, useParams } from "react-router-dom";
-import { MessageSquare, Clock, X, Phone, MapPin } from "lucide-react";
+import { Clock, X, Phone, MapPin } from "lucide-react";
 import api from "@/apis/axiosInstance";
 import UserNavbar from "@/layout/UserNavbar";
 import "../../styles/color-system.css";
@@ -217,15 +217,6 @@ const Reservation = () => {
         <section className="bg-[var(--color-grey-1000)]] px-5 py-4">
           <div className="mb-1 flex items-center justify-between">
             <h2 className="h0 text-[var(--color-grey-150)]">{shopData.name}</h2>
-            <button className="flex items-center gap-1">
-              <MessageSquare
-                size={20}
-                className="text-[color:var(--color-grey-450)]"
-              />
-              <span className="caption1 text-[color:var(--color-grey-450)]">
-                채팅
-              </span>
-            </button>
           </div>
           <p className="body1 truncate text-[color:var(--color-grey-450)]">
             {shopData.introText}

src/pages/Manager/Home/AboutReservationPage.tsx

@@ -94,7 +94,6 @@ function StatusModal({
 export default function AboutReservationPage({
   onBack,
   onStatusChange,
-  onChat,
 }: ReservationDetailPageProps = {}) {
   const navigate = useNavigate();
   const params = useParams();
@@ -285,36 +284,6 @@ export default function AboutReservationPage({
                 </span>
               </div>
             </div>
-            <button
-              onClick={onChat}
-              className="flex items-center space-x-2 rounded-lg bg-[#3a3a3a] py-[6px] pr-2 pl-3"
-            >
-              <span className="body1 text-[#bdbebd]">채팅</span>
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g clip-path="url(#clip0_3562_10626)">
-                  <path
-                    d="M3.21379 2.72888C3.5142 2.68275 3.76174 2.76777 3.85246 2.7992C3.9815 2.84392 4.12899 2.9104 4.24211 2.96131L12.6005 6.72302C12.7109 6.77268 12.8567 6.83739 12.9745 6.90369C13.0711 6.95803 13.3491 7.11707 13.5116 7.44568C13.6843 7.79484 13.6843 8.20492 13.5116 8.55408C13.3491 8.88257 13.071 9.04175 12.9745 9.09607C12.8567 9.16237 12.7108 9.22709 12.6005 9.27673L4.24504 13.0365C4.13147 13.0876 3.98366 13.1548 3.85441 13.1996C3.75089 13.2355 3.44173 13.3417 3.08293 13.2416C2.70427 13.1359 2.39771 12.8578 2.2548 12.4916C2.11947 12.1447 2.19327 11.8268 2.21867 11.7201C2.25033 11.5871 2.30316 11.4339 2.34269 11.3158L3.44621 8.01697L2.33879 4.67908C2.29972 4.56138 2.24702 4.4086 2.21574 4.27576C2.19062 4.16897 2.11815 3.85133 2.25383 3.50525C2.39719 3.13971 2.7037 2.86252 3.08195 2.7572L3.21379 2.72888ZM3.49992 7.24939V8.74939H6.99992C7.41413 8.74939 7.74992 8.4136 7.74992 7.99939C7.74975 7.58533 7.41403 7.24939 6.99992 7.24939H3.49992Z"
-                    fill="#BDBEBD"
-                  />
-                </g>
-                <defs>
-                  <clipPath id="clip0_3562_10626">
-                    <rect
-                      width="12"
-                      height="12"
-                      fill="white"
-                      transform="translate(2 2)"
-                    />
-                  </clipPath>
-                </defs>
-              </svg>
-            </button>
           </div>
 
           {/* Customer Photos */}

src/pages/Manager/Home/TodaysFilteredReservationsPage.tsx

@@ -1,11 +1,13 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import Header from "@/layout/Header";
 import ManagerNavbar from "@/layout/ManagerNavbar";
 import RightChevronIcon from "@/assets/icon_right-chevron.svg";
 import LeftChevronIcon from "@/assets/icon_left-chevron.svg";
 import { getMonthlyReservations } from "@/apis/manager_home/home";
+import { getUserInfo } from "@/apis/mypage/mypage";
+import axios from "axios";
 
 type FilterKey = "pending" | "completed" | "cancelled";
 
@@ -119,6 +121,67 @@ export default function TodaysFilteredReservationsPage() {
 
   const fmt = (t?: string) => (t ?? "").slice(0, 5);
 
+  const userIdRef = useRef<number | null>(null);
+  const shopIdRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const userInfo = await getUserInfo();
+        if (!cancelled) {
+          userIdRef.current = userInfo.id;
+          shopIdRef.current = userInfo.shopMembers?.[0]?.shopId ?? null;
+          if (shopIdRef.current) {
+            localStorage.setItem("shopId", String(shopIdRef.current));
+          }
+        }
+      } catch (e) {
+        console.error("failed to load user info", e);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // 채팅방 입장
+  const handleCreateRoom = async (customerId: number, customerName: string) => {
+    try {
+      const token = localStorage.getItem("accessToken");
+      const shopId = shopIdRef.current;
+      const designerId = userIdRef.current;
+
+      if (!token || !designerId || !shopId) {
+        console.error("정보가 부족합니다.");
+        return;
+      }
+
+      const response = await axios.post(
+        `${import.meta.env.VITE_API_BASE_URL}/chat/rooms`,
+        { shopId, customerId, designerId },
+        { headers: { Authorization: `Bearer ${token}` } },
+      );
+
+      const roomId = response.data.data.roomId;
+      navigate(`/chat/rooms/${roomId}`, {
+        state: {
+          customerId,
+          name: customerName,
+        },
+      });
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        console.error("채팅방 생성 실패", {
+          message: error.message,
+          response: error.response,
+          status: error.response?.status,
+          data: error.response?.data,
+        });
+      }
+    }
+  };
+
   return (
     <div className="mx-auto min-h-screen max-w-[375px] bg-[var(--color-grey-1000)] pb-24 text-[var(--color-grey-150)]">
       <Header />
@@ -164,6 +227,9 @@ export default function TodaysFilteredReservationsPage() {
                 onClick={() =>
                   navigate(`/manager/reservations/${item.reservationId}`)
                 }
+                onChat={() =>
+                  handleCreateRoom(item.customerId, item.customerName)
+                }
               />
             ))}
             {list.length === 0 && (