Merge pull request #200 from prgrms-web-devcourse-final-project/feat/159-chat-request-and-cancel

[feat] 채팅 기능 구현 중, youtube player 수정

Author: denshou

src/apis/axios.ts

@@ -11,6 +11,27 @@ export const axiosInstance = axios.create({
   baseURL: API_BASE_URL,
   withCredentials: true, // RT 자동 포함
 });
+export const axiosChatInstance = axios.create({
+  baseURL: '/chatapi',
+});
+
+// 요청 인터셉터
+axiosChatInstance.interceptors.request.use(
+  async (config) => {
+    // 토큰 가져오기
+    const token = useAuthStore.getState().accessToken;
+    // 토큰이 있으면 요청 헤더에 추가
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+      // console.log('요청 헤더에 Authorization 추가됨:', config.headers);
+    }
+    return config;
+  },
+  (error) => {
+    console.log('요청 인터셉터 에러', error);
+    Promise.reject(error);
+  },
+);
 
 // 요청 인터셉터
 axiosInstance.interceptors.request.use(

src/apis/chat.ts

@@ -1,46 +1,39 @@
-import { axiosInstance } from './axios';
+import { axiosChatInstance, axiosInstance } from './axios';
 
 //채팅 목록 불러오기(지난 대화 기록 페이지)
 export const loadChatList = async () => {
   const { data } = await axiosInstance.get(`/chat/room-list`);
   return data;
 };
-
-//채팅방 기록 불러오기(시간 끝난 채팅방 채팅 기록)
-//수신,송신자 정보 / messageList 정보
-export const loadChatMessages = async (roomId: number) => {
-  const { data } = await axiosInstance.get(`/chat/messages/${roomId}`);
-  return data;
-};
 //채팅 요청
 export const requestChat = async (emotionRecordId: number) => {
-  const { data } = await axiosInstance.post(`/chat/request`, emotionRecordId, {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
+  const { data } = await axiosInstance.post(`/chat/request?recordId=${emotionRecordId}`, {});
   return data;
 };
 //채팅 요청 취소
 export const cancelChatRequest = async (emotionRecordId: number) => {
-  const { data } = await axiosInstance.delete(`/chat/request`, {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    data: JSON.stringify(emotionRecordId),
-  });
+  const { data } = await axiosInstance.delete(`/chat/request?recordId=${emotionRecordId}`, {});
   return data;
 };
 //채팅방 생성
 export const createChatroom = async (emotionRecordId: number) => {
-  const { data } = await axiosInstance.post(
-    `/chat/create?recordId=${emotionRecordId}`,
-    {},
-  );
+  const { data } = await axiosInstance.post(`/chat/create?recordId=${emotionRecordId}`, {});
   return data;
 };
 //채팅방 닫기
 export const closeChatroom = async (chatRoomId: number) => {
   const { data } = await axiosInstance.post(`/chat/close?chatRoomId=${chatRoomId}`, {});
   return data;
 };
+//채팅방 기록 불러오기
+export const loadChatHistory = async (chatRoomId: number) => {
+  const { data } = await axiosChatInstance.get(`/chat/history/${chatRoomId}`);
+  return data;
+};
+//채팅방 상세 정보
+export const loadChatRoomDetail = async (chatRoomId: number) => {
+  const { data } = await axiosInstance.get(`/chat/room/detail`, {
+    params: { chatRoomId: chatRoomId },
+  });
+  return data;
+};

src/components/ChatConnectLoadingSheet.tsx

@@ -13,7 +13,7 @@ dayjs.extend(duration);
 export default function ChatConnectLoadingSheet() {
   const navigate = useNavigate();
 
-  const { currentRecord, setCurrentRecord, closeAllSheets, closeSheet } = useSheetStore();
+  const { currentRecord, closeAllSheets, closeSheet } = useSheetStore();
 
   const [timeLeft, setTimeLeft] = useState(60);
 
@@ -72,21 +72,17 @@ export default function ChatConnectLoadingSheet() {
   //채팅방 생성 (요청 받는 사람 입장에서 생성?)
   //sse로 받은 recordId로 채팅방 생성
   //sse로 받은 상대 정보로 '보내는 사람' 바꾸기
-  //생성 시 currentRecord 에 id 저장
   const createChat = async () => {
     try {
-      const data = await createChatroom(10);
+      //1 = recordId
+      const data = await createChatroom(1);
       console.log(data);
-      // const chatRoomId = data.data.chatRoomId; 배포할때 잠시 주석처리하겠습니다
-
-      if (data.code === 200) {
-        //임시
-        setCurrentRecord({ recordId: 10 });
-        //
-        navigate(`/chatroom/10`);
-        closeAllSheets();
-      }
+      const chatRoomId = data.data.chatRoomId;
+
+      //200
       //409 이면 이미 채팅방 있음 => 기존 채팅방으로
+      navigate(`/chatroom/${chatRoomId}`);
+      closeAllSheets();
     } catch (error) {
       console.log(error);
     }
@@ -100,6 +96,7 @@ export default function ChatConnectLoadingSheet() {
   };
 
   //채팅 신청한 사람은 상대가 수락했다는 sse 받으면 closeAllSheet, chatroom으로 이동
+  //sse로 채팅방 번호 받기
 
   if (connetFail) {
     return (

src/components/MusicCard.tsx

@@ -54,14 +54,15 @@ export default function MusicCard({
       try {
         const currentMusicId = spotifyId;
         const res = await getSpotifyVideoId(currentMusicId);
-        const savedVideoId = res.data.videoId;
+        const savedVideoId = res.data;
+        console.log(savedVideoId)
         setCurrentVideoId(savedVideoId);
       } catch (error) {
         console.log(error);
       }
     };
     getVideoId();
-  }, []);
+  }, [spotifyId]);
 
   const { setVideoId, players, setIsPlaying } = useYouTubeStore();
 

src/components/modalSheet/CardDetailModal.tsx

@@ -30,51 +30,40 @@ function CardDetailModal({ isChatting, recordId, handleDelete, handleEdit }: Car
   const [currentVideoId, setCurrentVideoId] = useState<string | null>(null);
 
   useEffect(() => {
+    if (!data?.data?.spotifyMusic) return; // 데이터가 없으면 실행하지 않음
+
+    setCurrentRecord(data.data);
+
     const getVideoId = async () => {
       if (!data?.data?.spotifyMusic) return; // 데이터가 없으면 실행하지 않음
-
+      //videoId 없으면 검색
       try {
         const currentMusicId = data.data.spotifyMusic.spotifyId;
         const res = await getSpotifyVideoId(currentMusicId);
-        const savedVideoId = res.data.videoId;
+        const savedVideoId = res.data;
         setCurrentVideoId(savedVideoId);
       } catch (error) {
         console.log(error);
       }
     };
-    getVideoId();
-  }, []);
 
-  // videoId가 변경될 때마다 zustand store의 videoId를 업데이트
-  useEffect(() => {
-    if (currentVideoId) {
-      setVideoId('2', currentVideoId); // YouTube store의 videoId를 업데이트
+    if (data.data.spotifyMusic.videoId) {
+      setCurrentVideoId(data.data.spotifyMusic.videoId);
+    } else {
+      getVideoId();
     }
-  }, [currentVideoId]);
-
-  useEffect(() => {
-    if (!data?.data?.spotifyMusic) return; // 데이터가 없으면 실행하지 않음
-    console.log(data?.data);
-
-    setCurrentRecord(data.data);
 
     return () => {
       setCurrentRecord(null);
     };
   }, [data]);
 
-  // //sheet open 시 스크롤 제거
-  // useEffect(() => {
-  //   if (isCardSheetOpen) {
-  //     document.body.style.overflow = 'hidden'; // 스크롤 막기
-  //   } else {
-  //     document.body.style.overflow = 'auto'; // 스크롤 복원
-  //   }
-
-  //   return () => {
-  //     document.body.style.overflow = 'auto';
-  //   };
-  // }, [isCardSheetOpen]);
+  // videoId가 변경될 때마다 zustand store의 videoId를 업데이트
+  useEffect(() => {
+    if (currentVideoId) {
+      setVideoId('3', currentVideoId); // YouTube store의 videoId를 업데이트
+    }
+  }, [currentVideoId]);
 
   if (!isCardSheetOpen) {
     return null;

src/components/modalSheet/ChatActionButtons.tsx

@@ -47,21 +47,20 @@ function ChatActionButtons({
     try {
       const data = await requestChat(recordId);
       console.log(data);
-      if (data.code === 200) {
-        console.log('채팅 요청 성공');
 
-        openSheet('isChatLoadingSheetOpen');
-      } else {
-        console.log('채팅 요청 실패');
-        openModal({
-          title: '잠시 후 다시 시도해 주세요',
-          onConfirm: () => {
-            closeModal();
-          },
-        });
-      }
+      //200
+      console.log('채팅 요청 성공');
+      openSheet('isChatLoadingSheetOpen');
+      //409면 데이터로 chatroomid 추가로 옴
+      //리시버 false
     } catch (error) {
       console.log(error);
+      openModal({
+        title: '잠시 후 다시 시도해 주세요',
+        onConfirm: () => {
+          closeModal();
+        },
+      });
     }
   };
 

src/layouts/Layout.tsx

@@ -5,7 +5,8 @@ import HeaderWithBack from '@/layouts/header/HeaderWithBack';
 import HeaderChat from '@/layouts/header/HeaderChat';
 import { twMerge } from 'tailwind-merge';
 import PostButton from '@/components/PostButton';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
+import { useScrollStore } from '@/store/scrollStore';
 
 function Layout() {
   const location = useLocation(); // 현재 URL 가져오기
@@ -49,7 +50,11 @@ function Layout() {
   const hasPostButton = location.pathname === '/home' || location.pathname === '/mypage';
 
   //헤더 클릭 시 스크롤
-  const scrollContainerRef = useRef<HTMLDivElement>(null); // 스크롤 컨테이너 참조
+  const { setScrollContainerRefCurrent } = useScrollStore();
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null); // 스크롤 컨테이너 참조
+  useEffect(() => {
+    if (scrollContainerRef.current) setScrollContainerRefCurrent(scrollContainerRef.current);
+  }, [scrollContainerRef]);
 
   const handleScrollToTop = () => {
     if (scrollContainerRef.current) {

src/layouts/header/HeaderChat.tsx

@@ -74,8 +74,10 @@ function HeaderChat({ showLogo = false, showNickname = false }: HeaderChatProps)
                 }
                 console.log('확인');
                 console.log(chatRoomId);
-                const data = await closeChatroom(Number(10));
+                const data = await closeChatroom(Number(chatRoomId));
                 console.log(data);
+                //+ 웹소켓 연결 끊기
+                //+ 로딩
 
                 navigate('/home');
                 closeModal();

src/pages/chat/Chat.tsx

@@ -9,6 +9,7 @@ export default function Chat({}) {
   useEffect(() => {
     const getChatList = async () => {
       const { data } = await loadChatList();
+      console.log(data);
       setChatList(data);
     };
     getChatList();
@@ -24,7 +25,7 @@ export default function Chat({}) {
   return (
     <div className="w-full mt-[12px] mb-[58px] flex flex-col gap-4">
       {chatList.map((item) => (
-        <ChatHistoryCard item={item} key={item.chatroom_id} />
+        <ChatHistoryCard item={item} key={item.chatRoomId} />
       ))}
     </div>
   );