🚑 웹소켓 연결 URL 변경

woowacourse-teams · Feb 4, 2025 · 1cb0a55 · 1cb0a55
1 parent a7fd48b
commit 1cb0a55
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 22 deletions.
diff --git a/frontend/src/apis/websocket/websocket.ts b/frontend/src/apis/websocket/websocket.ts
@@ -3,7 +3,7 @@ import { Client, Message } from '@stomp/stompjs';
 const SOCKET_URL = process.env.REACT_SOCKET_API_URL;
 
 export const getConnection = () => {
-  return new Client({ brokerURL: `${SOCKET_URL}/ws-connect` });
+  return new Client({ brokerURL: `${SOCKET_URL}/ws` });
 };
 
 export const subscribeTopic = <T>(client: Client | null, destination: string, handler: (body: T) => void) => {

diff --git a/frontend/src/hooks/PairRoom/usePairRoom.ts b/frontend/src/hooks/PairRoom/usePairRoom.ts
@@ -31,9 +31,8 @@ const usePairRoom = () => {
       addToast({ status: 'ERROR', message: `웹소켓 연결 과정에서 오류가 발생했습니다. ${error}` });
     };
 
-    window.addEventListener('beforeunload', handleBeforeUnload);
-
     client.activate();
+    window.addEventListener('beforeunload', handleBeforeUnload);
 
     return () => {
       client.deactivate();

diff --git a/frontend/src/hooks/PairRoom/useTimer.ts b/frontend/src/hooks/PairRoom/useTimer.ts
@@ -23,19 +23,18 @@ enum TimerStatus {
   UPDATE = 'update',
 }
 
-const STATUS = TimerStatus;
-
 const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: () => void) => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
   const { client, isConnected, accessCode } = useSocketStore();
+  const { addToast } = useToastStore();
 
   const [timeLeft, setTimeLeft] = useState(defaultTimeLeft);
   const [isActive, setIsActive] = useState(false);
 
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
   const alarmAudio = useRef(new Audio(AlarmSound));
 
-  const { addToast } = useToastStore();
   const { fireNotification } = useNotification();
 
   const handleStart = () => {
@@ -51,10 +50,9 @@ const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: ()
     setTimeLeft(defaultTime);
     onTimerStop();
 
+    // 타이머 종료 알람 플레이
     alarmAudio.current.play();
-    fireNotification('타이머가 끝났어요!', '드라이버 / 내비게이터 역할을 바꿔 주세요!', {
-      requireInteraction: true,
-    });
+    fireNotification('타이머가 끝났어요!', '드라이버 / 내비게이터 역할을 바꿔 주세요!', { requireInteraction: true });
 
     addToast({ status: 'SUCCESS', message: '타이머가 종료되었습니다.' });
     addToast({ status: 'INFO', message: '드라이버 / 내비게이터 역할을 바꿔 주세요!' });
@@ -71,23 +69,23 @@ const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: ()
 
   const handleTimerStatusEvent = (status: TimerStatus) => {
     switch (status) {
-      case STATUS.COMPLETE:
+      case TimerStatus.COMPLETE:
         navigate(`/room/${accessCode}/retrospectForm`, { state: { valid: true } });
         addToast({ status: 'WARNING', message: '페어룸이 종료되었습니다.' });
         break;
 
-      case STATUS.START:
-      case STATUS.RUNNING:
+      case TimerStatus.START:
+      case TimerStatus.RUNNING:
         setIsActive(true);
         addToast({ status: 'SUCCESS', message: '타이머가 시작되었습니다.' });
         break;
 
-      case STATUS.PAUSE:
+      case TimerStatus.PAUSE:
         setIsActive(false);
         addToast({ status: 'WARNING', message: '타이머가 일시 정지되었습니다.' });
         break;
 
-      case STATUS.UPDATE:
+      case TimerStatus.UPDATE:
         queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_PAIR_ROOM_TIMER] });
         addToast({ status: 'WARNING', message: '타이머 시간이 변경되었습니다.' });
         break;

diff --git a/frontend/src/hooks/PairRoom/useTodo.ts b/frontend/src/hooks/PairRoom/useTodo.ts
@@ -6,14 +6,15 @@ import { Todo } from '@/apis/http/todo';
 import { subscribeTopic } from '@/apis/websocket/websocket';
 
 const useTodo = (defaultTodos: Todo[]) => {
-  const [todos, setTodos] = useState<Todo[]>(defaultTodos);
-
   const { client, isConnected, accessCode } = useSocketStore();
 
+  const [todos, setTodos] = useState<Todo[]>(defaultTodos);
+
   const handleTodos = (todos: Todo[]) => setTodos(todos);
 
   useEffect(() => {
     if (client && isConnected) {
+      // 전체 투두
       subscribeTopic<Todo[]>(client, `/topic/${accessCode}/todo`, handleTodos);
     }
 

diff --git a/frontend/src/pages/PairRoom/PairRoom.tsx b/frontend/src/pages/PairRoom/PairRoom.tsx
@@ -24,13 +24,14 @@ 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);
 
-  usePairRoom();
-  const { isConnected } = useSocketStore();
-
   const {
     driver: latestDriver,
     navigator: latestNavigator,

diff --git a/frontend/src/stores/socketStore.ts b/frontend/src/stores/socketStore.ts
@@ -15,8 +15,8 @@ const useSocketStore = create<SocketStore>((set) => ({
   isConnected: false,
   accessCode: '',
   setClient: (client) => set({ client }),
-  setAccessCode: (accessCode) => set({ accessCode }),
   setIsConnected: (isConnected) => set({ isConnected }),
+  setAccessCode: (accessCode) => set({ accessCode }),
 }));
 
 export default useSocketStore;