Merge pull request #1120 from woowacourse-teams/FE/dev

[FE] 🚀 페어룸 종료 상태 STOMP 구현

frontend/src/hooks/PairRoom/usePairRoomStatusSocket.ts

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import useSocketStore from '@/stores/socketStore';
+import useToastStore from '@/stores/toastStore';
+
+import type { PairRoomStatus } from '@/apis/http/pairRoom';
+import { subscribeTopic } from '@/apis/websocket/websocket';
+
+const usePairRoomStatusSocket = (defaultStatus: PairRoomStatus) => {
+  const navigate = useNavigate();
+
+  const { client, isConnected, accessCode } = useSocketStore();
+  const { addToast } = useToastStore();
+
+  const [status, setStatus] = useState<PairRoomStatus>(defaultStatus);
+
+  const handleStatus = (status: PairRoomStatus) => setStatus(status);
+
+  useEffect(() => {
+    if (defaultStatus === 'COMPLETED') {
+      navigate(`/room/${accessCode}/completed`, { state: { valid: true }, replace: true });
+    }
+
+    if (status === 'COMPLETED') {
+      addToast({ status: 'WARNING', message: '페어룸이 종료되었습니다.' });
+      navigate(`/room/${accessCode}/retrospectForm`, { state: { valid: true } });
+    }
+  }, [status]);
+
+  useEffect(() => {
+    if (client && isConnected) {
+      subscribeTopic<{ status: PairRoomStatus }>(client, `/topic/${accessCode}/pair-room/status`, (body) =>
+        handleStatus(body.status),
+      );
+    }
+
+    return () => {
+      if (client && isConnected) {
+        client.unsubscribe(`/topic/${accessCode}/pair-room/status`);
+      }
+    };
+  }, [client]);
+
+  return { status };
+};
+
+export default usePairRoomStatusSocket;

frontend/src/hooks/PairRoom/useReferenceSocket.ts

@@ -5,12 +5,13 @@ import useSocketStore from '@/stores/socketStore';
 import { Reference } from '@/apis/http/referenceLink';
 import { subscribeTopic } from '@/apis/websocket/websocket';
 
-const useReference = (defaultReferences: Reference[]) => {
+const useReference = (defaultReferences: Reference[], categoryName: string) => {
   const { client, isConnected, accessCode } = useSocketStore();
 
   const [references, setReferences] = useState<Reference[]>(defaultReferences);
 
-  const handleReferences = (references: Reference[]) => setReferences(references);
+  const handleReferences = (references: Reference[]) =>
+    setReferences(references.filter((reference) => reference.categoryName === categoryName));
 
   useEffect(() => {
     if (client && isConnected) {

frontend/src/hooks/PairRoom/useTimerSocket.ts

@@ -1,5 +1,4 @@
 import { useState, useRef, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { AlarmSound } from '@/assets';
 
@@ -12,15 +11,13 @@ import { subscribeTopic } from '@/apis/websocket/websocket';
 import useNotification from '@/hooks/PairRoom/useNotification';
 
 enum TimerStatus {
-  COMPLETE = 'complete',
   START = 'start',
   RUNNING = 'running',
   PAUSE = 'pause',
   UPDATE = 'update',
 }
 
 const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: () => void) => {
-  const navigate = useNavigate();
   const durationRef = useRef(defaultTime);
 
   const { client, isConnected, accessCode } = useSocketStore();
@@ -65,11 +62,6 @@ const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: ()
 
   const handleTimerStatusEvent = (status: TimerStatus, data: number | null) => {
     switch (status) {
-      case TimerStatus.COMPLETE:
-        navigate(`/room/${accessCode}/retrospectForm`, { state: { valid: true } });
-        addToast({ status: 'WARNING', message: '페어룸이 종료되었습니다.' });
-        break;
-
       case TimerStatus.START:
         setIsActive(true);
         addToast({ status: 'SUCCESS', message: '타이머가 시작되었습니다.' });

frontend/src/pages/PairRoom/PairRoom.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import Loading from '@/pages/Loading/Loading';
 
@@ -14,45 +14,44 @@ import useSocketStore from '@/stores/socketStore';
 
 import useModal from '@/hooks/_common/useModal';
 import usePairRoom from '@/hooks/PairRoom/usePairRoom';
+import usePairRoomStatusSocket from '@/hooks/PairRoom/usePairRoomStatusSocket';
 
 import usePairRoomMutation from '@/queries/PairRoom/usePairRoomMutation';
 import usePairRoomQuery from '@/queries/PairRoom/usePairRoomQuery';
 
 import * as S from './PairRoom.styles';
 
 const PairRoom = () => {
-  const navigate = useNavigate();
   const { accessCode } = useParams();
 
-  // 웹소켓 연결
-  usePairRoom();
-  const { isConnected } = useSocketStore();
-
   const [driver, setDriver] = useState('');
   const [navigator, setNavigator] = useState('');
   const [isCardOpen, setIsCardOpen] = useState(false);
 
   const {
     driver: latestDriver,
     navigator: latestNavigator,
-    status,
+    status: defaultStatus,
     missionUrl,
-    duration,
-    remainingTime,
+    duration: defaultTime,
+    remainingTime: defaultTimeLeft,
     isFetching,
     todos,
     references,
     categories,
   } = usePairRoomQuery(accessCode || '');
 
+  // 웹소켓 연결
+  usePairRoom();
+  const { isConnected } = useSocketStore();
+
+  // 페어룸 상태 웹소켓
+  usePairRoomStatusSocket(defaultStatus);
+
   const { updatePairRoleMutation } = usePairRoomMutation();
 
   const { isModalOpen, closeModal } = useModal(true);
 
-  useEffect(() => {
-    if (status === 'COMPLETED') navigate(`/room/${accessCode}/completed`, { state: { valid: true }, replace: true });
-  }, [status]);
-
   useEffect(() => {
     setDriver(latestDriver);
     setNavigator(latestNavigator);
@@ -68,8 +67,8 @@ const PairRoom = () => {
       <S.Container>
         <PairRoleCard driver={driver} navigator={navigator} />
         <TimerCard
-          defaultTime={duration}
-          defaultTimeLeft={remainingTime}
+          defaultTime={defaultTime}
+          defaultTimeLeft={defaultTimeLeft}
           onTimerStop={() => updatePairRoleMutation({ accessCode: accessCode || '' })}
         />
       </S.Container>

frontend/src/queries/PairRoom/usePairRoomQuery.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 
-import { getPairRoom } from '@/apis/http/pairRoom';
+import { getPairRoom, PairRoomStatus } from '@/apis/http/pairRoom';
 
 import { QUERY_KEYS } from '@/constants/queryKeys';
 
@@ -26,7 +26,7 @@ const usePairRoomQuery = (accessCode: string) => {
   return {
     driver: pairRoom?.driver || '',
     navigator: pairRoom?.navigator || '',
-    status: pairRoom?.status || '',
+    status: (pairRoom?.status as PairRoomStatus) || '',
     missionUrl: pairRoom?.missionUrl || '',
     duration: pairRoom?.duration || 0,
     remainingTime: pairRoom?.remainingTime || 0,