Merge pull request #219 from prgrms-web-devcourse-final-project/feat/189-SSE-connect

[feat] SSE 연결

Author: kangsuyeong

package-lock.json

@@ -14,10 +14,12 @@
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.9",
+    "@types/event-source-polyfill": "^1.0.5",
     "@types/node": "^22.13.4",
     "@types/youtube": "^0.1.0",
     "axios": "^1.7.9",
     "dayjs": "^1.11.13",
+    "event-source-polyfill": "^1.0.31",
     "framer-motion": "^12.4.7",
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.1",

package.json

@@ -4,7 +4,7 @@ import Layout from '@/layouts/Layout';
 import Landing from '@/pages/landing/Landing';
 import Modal from '@/components/Modal';
 import Home from '@/pages/home/Home';
-import ChatConnectLoadingSheet from '@/components/ChatConnectLoadingSheet';
+import ChatConnectLoadingSheet from '@/components/ChatConnectLoadingSheet/ChatConnectLoadingSheet';
 import Chat from '@/pages/chat/Chat';
 import ChatRoom from '@/pages/chat/ChatRoom';
 import NotFound from '@/pages/NotFound';
@@ -15,10 +15,6 @@ import UserProfile from '@/pages/userprofile/UserProfile';
 import PrivateRoute from './routes/PrivateRoute';
 import EditProfile from '@/pages/editprofile/EditProfile';
 import BlockList from '@/pages/blocklist/BlockList';
-import { useEffect } from 'react';
-import { loadYouTubeAPI } from './utils/youtubeApiLoader';
-import { useSpotifyAuth } from './hooks/useSpotifyAuth';
-import { useYouTubeStore } from './store/youtubeStore';
 import YouTubeAudioPlayer from './components/YouTubeAudioPlayer';
 
 // TODO: 테스트용 나중에 지우기
@@ -27,27 +23,17 @@ import TestLoginModal from '@/components/testLogin/TestLoginModal';
 import { useSheetStore } from './store/sheetStore';
 import AnimatedLayout from '@/layouts/AnimatedLayout';
 import KaKaoRedirection from '@/components/KaKaoRedirection';
+import { useSSE } from '@/hooks/useSSE';
+import { useYotube } from '@/hooks/useYoutube';
 
 function App() {
   const location = useLocation();
 
   const { isAuthenticated } = useAuthStore();
-  const spotifyAuth = useSpotifyAuth();
-  const { isChatLoadingSheetOpen } = useSheetStore();
-  // soundlink 로그인한 경우에만 spotify 로그인 후 토큰 가져오기
-  useEffect(() => {
-    if (isAuthenticated) {
-      console.log('Spotify Auth Initialized:', spotifyAuth);
-    }
-  }, [isAuthenticated]);
+  const { isRequestSendingSheetOpen, isRequestReceivingSheetOpen } = useSheetStore();
 
-  const { setApiReady } = useYouTubeStore();
-
-  useEffect(() => {
-    loadYouTubeAPI().then(() => {
-      setApiReady();
-    }); // 앱이 처음 실행될 때 API 로드
-  }, []);
+  useSSE(); // SSE연결
+  useYotube();
 
   return (
     <>
@@ -89,7 +75,8 @@ function App() {
         </Routes>
       </AnimatedLayout>
       <Modal />
-      {isChatLoadingSheetOpen && <ChatConnectLoadingSheet />}
+      {isRequestSendingSheetOpen && <ChatConnectLoadingSheet type="sending" />}
+      {isRequestReceivingSheetOpen && <ChatConnectLoadingSheet type="receiving" />}
       <YouTubeAudioPlayer playerId="1" />
       <YouTubeAudioPlayer playerId="2" />
       <YouTubeAudioPlayer playerId="3" />

src/App.tsx

@@ -16,11 +16,13 @@ export const cancelChatRequest = async (emotionRecordId: number) => {
   return data;
 };
 //채팅방 생성
-export const createChatroom = async (emotionRecordId: number, requestNickname: string) => {
-  const { data } = await axiosInstance.post(
-    `/chat/create?recordId=${emotionRecordId}&requestNickname=${requestNickname}`,
-    {},
-  );
+export const createChatroom = async (recordId: number, requestNickname: string) => {
+  const { data } = await axiosInstance.post(`/chat/create`, null, {
+    params: {
+      recordId,
+      requestNickname,
+    },
+  });
   return data;
 };
 //채팅방 닫기
@@ -45,3 +47,15 @@ export const loadChatRoomDetail = async (chatRoomId: number) => {
   });
   return data;
 };
+
+// 채팅 거절
+export const postRejectChat = async (emotionRecordId: number, requestNickname: string) => {
+  const { data } = await axiosInstance.post('/chat/request/reject', null, {
+    params: {
+      emotionRecordId,
+      requestNickname,
+    },
+  });
+
+  return data;
+};

src/apis/chat.ts

@@ -0,0 +1,58 @@
+import logo from '@/assets/icons/logo.svg';
+import MusicAnimation from '@components/MusicAnimation';
+import { useEffect, useState } from 'react';
+import { formattedTime } from '@/utils/formattedTime';
+import ChatRequestFailSheet from '@/components/ChatConnectLoadingSheet/ChatRequestFailSheet';
+import ChatRequestMessage from '@/components/ChatConnectLoadingSheet/ChatRequestMessage';
+import ChatRequestButton from '@/components/ChatConnectLoadingSheet/ChatRequestButton';
+import { useSheetStore } from '@/store/sheetStore';
+
+export default function ChatConnectLoadingSheet({ type }: { type: 'sending' | 'receiving' }) {
+  const { isChatConnectFail, setChatConnectFail } = useSheetStore();
+  const [timeLeft, setTimeLeft] = useState(60); // 남은 시간
+  //타이머 60초
+  useEffect(() => {
+    const endTime = new Date().getTime() + 60 * 1000; // 현재 시간 + 60초
+
+    const interval = setInterval(() => {
+      const diff = Math.max(0, Math.ceil((endTime - new Date().getTime()) / 1000)); // 남은 초 계산
+
+      setTimeLeft(diff);
+
+      if (diff <= 0) {
+        clearInterval(interval);
+        setTimeLeft(0); // 0초로 고정
+      }
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+      setChatConnectFail(false);
+    }; //interval 정리
+  }, []);
+
+  // 남은 시간이 0이되면 연결실패 처리
+  useEffect(() => {
+    if (timeLeft === 0) {
+      setChatConnectFail(true);
+    }
+  }, [timeLeft]);
+
+  if (isChatConnectFail) {
+    return <ChatRequestFailSheet />;
+  }
+  return (
+    <div className="fixed inset-0 flex justify-center items-center z-50">
+      <div className="relative w-full max-w-[600px] h-screen px-3 bg-background flex flex-col justify-center items-center">
+        <img src={logo} className="w-[186px] h-[40px] mb-5" alt="로고" />
+        <ChatRequestMessage type={type} />
+
+        <MusicAnimation />
+        <p className="body-large-b text-primary-normal mt-[120px] mb-2">
+          {formattedTime(timeLeft)}
+        </p>
+        <ChatRequestButton type={type} />
+      </div>
+    </div>
+  );
+}

src/components/ChatConnectLoadingSheet/ChatConnectLoadingSheet.tsx

@@ -0,0 +1,106 @@
+import { cancelChatRequest, createChatroom, postRejectChat } from '@/apis/chat';
+import Button from '@/components/Button';
+import { useModalStore } from '@/store/modalStore';
+import { useSheetStore } from '@/store/sheetStore';
+import { useNavigate } from 'react-router';
+
+function ChatRequestButton({ type }: { type: 'sending' | 'receiving' }) {
+  const navigate = useNavigate();
+  const { requesterInfo, currentRecord, closeAllSheets, closeSheet } = useSheetStore(); // 시트관리
+  const { openModal, closeModal } = useModalStore(); // 모달관리
+
+  //채팅 요청 취소(요청 보낸 사람)
+  const cancel = async () => {
+    if (!currentRecord?.recordId) {
+      console.log('record가 존재하지 않습니다');
+      return;
+    }
+    try {
+      console.log(currentRecord);
+      const { code } = await cancelChatRequest(currentRecord.recordId);
+      if (code === 200) {
+        console.log('취소 요청 성공');
+        closeSheet('isRequestSendingSheetOpen');
+      } else {
+        throw new Error('취소 요청 실패');
+      }
+    } catch (error) {
+      console.error(error);
+      closeSheet('isRequestSendingSheetOpen'); // 취소 요청 실패시 창 닫기
+    }
+  };
+
+  //채팅방 생성 (요청 받는 사람 입장에서 생성?)
+  //sse로 받은 recordId로 채팅방 생성
+  //sse로 받은 상대 정보로 '보내는 사람' 바꾸기
+  const createChat = async () => {
+    try {
+      const { code, data } = await createChatroom(
+        requesterInfo.emotionRecordId as number,
+        requesterInfo.nickname,
+      );
+      if (code === 200) {
+        const chatRoomId = data.chatRoomId;
+        navigate(`/chatroom/${chatRoomId}`);
+        closeAllSheets();
+      } else {
+        throw new Error('이미 취소된 요청입니다.');
+      }
+      //409 이면 이미 채팅방 있음 => 기존 채팅방으로
+    } catch (error) {
+      console.log(error);
+      openModal({
+        title: '이미 취소된 요청입니다',
+        onConfirm: () => {
+          closeModal();
+          closeSheet('isRequestReceivingSheetOpen');
+        },
+      });
+    }
+  };
+
+  //채팅 요정 거절
+  //거절 하면 거절한 사람은 바로 시트 닫기.
+  //요청 거절당한 사람은 connectFail = true
+  const refuseRequest = async () => {
+    try {
+      const { code } = await postRejectChat(
+        requesterInfo.emotionRecordId as number,
+        requesterInfo.nickname,
+      );
+      if (code === 200) {
+        console.log('거절 성공');
+        closeSheet('isRequestReceivingSheetOpen');
+      } else {
+        throw new Error('요청 취소 실패');
+      }
+    } catch (error) {
+      console.error(error);
+      closeSheet('isRequestReceivingSheetOpen');
+    }
+  };
+
+  if (type === 'sending') {
+    return (
+      <button
+        onClick={cancel}
+        className="caption-r text-gray-50 cursor-pointer border-b border-gray-50"
+      >
+        취소하기
+      </button>
+    );
+  } else {
+    return (
+      <div className="absolute bottom-10 flex gap-[6px] px-3 w-full">
+        <Button onClick={createChat} variant="primary">
+          수락하기
+        </Button>
+        <Button onClick={refuseRequest} variant="secondary">
+          거절하기
+        </Button>
+      </div>
+    );
+  }
+}
+
+export default ChatRequestButton;

src/components/ChatConnectLoadingSheet/ChatRequestButton.tsx

@@ -0,0 +1,39 @@
+import logo from '@/assets/icons/logo.svg';
+import Button from '@/components/Button';
+import sad from '@/assets/icons/sad-icon.svg';
+import { useNavigate } from 'react-router';
+import { useSheetStore } from '@/store/sheetStore';
+
+function ChatRequestFailSheet() {
+  const navigate = useNavigate();
+  const { currentRecord, closeSheet } = useSheetStore();
+  const handleClickToHome = () => {
+    closeSheet('isRequestSendingSheetOpen');
+    closeSheet('isRequestReceivingSheetOpen');
+    navigate('/home');
+  };
+  return (
+    <div className="fixed inset-0 flex justify-center items-center z-50">
+      <div className="relative w-full max-w-[600px] h-screen px-3 bg-background flex flex-col justify-center items-center">
+        <img src={logo} className="w-[186px] h-[40px] mb-5" alt="로고" />
+        <p className="h4-b text-center text-gray-50 mb-2">
+          <span className="text-primary-normal">{currentRecord?.nickName}</span>
+          <span>님과 연결되지 않았어요</span>
+        </p>
+
+        <p className="caption-r text-center text-gray-60 mb-5">
+          괜찮아요! 새로운 감정을 공유할 <br /> 다른 사람을 찾아볼까요?
+        </p>
+        <img src={sad} alt="연결실패" />
+
+        <div className="absolute bottom-10 flex gap-[6px] px-3 w-full">
+          <Button onClick={handleClickToHome} variant="primary">
+            홈으로 가기
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ChatRequestFailSheet;

src/components/ChatConnectLoadingSheet/ChatRequestFailSheet.tsx

@@ -0,0 +1,37 @@
+import { useSheetStore } from '@/store/sheetStore';
+
+interface ChatRequestMessageProps {
+  type: 'sending' | 'receiving';
+}
+
+function ChatRequestMessage({ type }: ChatRequestMessageProps) {
+  const { requesterInfo } = useSheetStore();
+  const { currentRecord } = useSheetStore();
+  if (type === 'sending') {
+    return (
+      <>
+        <p className="h4-b text-center text-gray-50 mb-2">
+          <span className="text-primary-normal">{currentRecord?.nickName || '테스트'}</span>님에게
+          대화 요청 중...
+        </p>
+        <p className="caption-r text-center text-gray-60 mb-5">
+          곧 새로운 연결이 시작됩니다. <br /> 잠시만 기다려주세요!
+        </p>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <>
+          <p className="h4-b text-center text-gray-50 mb-2">
+            <span className="text-primary-normal">{requesterInfo?.nickname || '테스트'}</span> 님이
+            대화를 요청했어요
+          </p>
+          <p className="caption-r text-center text-gray-60 mb-5">함께 이야기해 볼까요?</p>
+        </>
+      </>
+    );
+  }
+}
+
+export default ChatRequestMessage;