Merge pull request #1191 from woowacourse-teams/FE/test

[FE] 🔖 버그 수정 내역 deploy

Author: greetings1012

frontend/src/apis/websocket/websocket.ts

@@ -7,15 +7,32 @@ export const getConnection = () => {
 };
 
 export const subscribeTopic = <T>(client: Client | null, destination: string, handler: (body: T) => void) => {
-  if (!client?.connected) {
-    console.error('웹소켓 연결에 실패했습니다.');
+  if (!client) {
+    console.error('웹소켓 클라이언트가 없습니다.');
     return;
   }
 
-  client.subscribe(destination, (message: Message) => {
-    const body: T = JSON.parse(message.body);
-    handler(body);
-  });
+  const subscribe = () => {
+    if (client.connected) {
+      client.subscribe(destination, (message: Message) => {
+        const body: T = JSON.parse(message.body);
+        handler(body);
+      });
+    } else {
+      console.error('웹소켓 연결에 실패했습니다.');
+    }
+  };
+
+  client.onConnect = () => {
+    console.log('웹소켓 연결이 성공적으로 재설정되었습니다.');
+    subscribe();
+  };
+
+  client.onDisconnect = () => {
+    console.warn('웹소켓 연결이 해제되었습니다.');
+  };
+
+  subscribe();
 };
 
 export const publishMessage = (client: Client | null, destination: string, contents?: object) => {

frontend/src/components/PairRoom/PairRoleCard/PairRoleCard.styles.ts

@@ -32,8 +32,8 @@ const RoleBox = styled.div`
 export const DriverBox = styled(RoleBox)`
   background: linear-gradient(
     180deg,
-    ${({ theme }) => theme.color.secondary[50]},
-    ${({ theme }) => theme.color.secondary[200]}
+    ${({ theme }) => theme.color.primary[50]},
+    ${({ theme }) => theme.color.primary[100]}
   );
 `;
 
@@ -72,19 +72,19 @@ const RoleLabel = styled.div`
 `;
 
 export const DriverLabel = styled(RoleLabel)`
-  background-color: ${({ theme }) => theme.color.secondary[500]};
+  background-color: ${({ theme }) => theme.color.primary[600]};
 `;
 
 export const NavigatorLabel = styled(RoleLabel)`
-  background-color: ${({ theme }) => theme.color.primary[600]};
+  background-color: ${({ theme }) => theme.color.secondary[500]};
 `;
 
 export const DriverText = styled.p`
   overflow: hidden;
 
   max-width: 10rem;
 
-  color: ${({ theme }) => theme.color.secondary[900]};
+  color: ${({ theme }) => theme.color.primary[900]};
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
@@ -94,7 +94,7 @@ export const NavigatorText = styled.p`
 
   max-width: 10rem;
 
-  color: ${({ theme }) => theme.color.primary[900]};
+  color: ${({ theme }) => theme.color.secondary[900]};
   text-overflow: ellipsis;
   white-space: nowrap;
 `;

frontend/src/hooks/PairRoom/useCategorySocket.ts

@@ -31,7 +31,7 @@ const useCategory = (defaultCategories: Category[]) => {
         client.unsubscribe(`/topic/${accessCode}/category`);
       }
     };
-  }, [client]);
+  }, [client, isConnected]);
 
   return { categories: [DEFAULT_CATEGORY, ...(categories || [])] };
 };

frontend/src/hooks/PairRoom/usePairRoomStatusSocket.ts

@@ -36,7 +36,7 @@ const usePairRoomStatusSocket = (defaultStatus: PairRoomStatus) => {
         client.unsubscribe(`/topic/${accessCode}/pair-room/status`);
       }
     };
-  }, [client]);
+  }, [client, isConnected]);
 };
 
 export default usePairRoomStatusSocket;

frontend/src/hooks/PairRoom/useReferenceSocket.ts

@@ -22,7 +22,7 @@ const useReference = (defaultReferences: Reference[]) => {
         client.unsubscribe(`/topic/${accessCode}/reference-link`);
       }
     };
-  }, [client]);
+  }, [client, isConnected]);
 
   return { references };
 };

frontend/src/hooks/PairRoom/useTimerSocket.ts

@@ -69,7 +69,7 @@ const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: ()
 
       case TimerStatus.RUNNING:
         setIsActive(true);
-        addToast({ status: 'WARNING', message: '타이머가 진행 중입니다.' });
+        // addToast({ status: 'WARNING', message: '타이머가 진행 중입니다.' });
         break;
 
       case TimerStatus.PAUSE:
@@ -120,7 +120,7 @@ const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: ()
       window.removeEventListener('beforeunload', handleBeforeUnload);
       unsubscribeTopics();
     };
-  }, [client]);
+  }, [client, isConnected]);
 
   return {
     duration: durationRef.current,

frontend/src/hooks/PairRoom/useTodoSocket.ts

@@ -23,7 +23,7 @@ const useTodo = (defaultTodos: Todo[]) => {
         client.unsubscribe(`/topic/${accessCode}/todo`);
       }
     };
-  }, [client]);
+  }, [client, isConnected]);
 
   return { todos };
 };