add: Code explain

src/App.tsx

@@ -6,6 +6,7 @@ import StudyEnterRoom from 'page/StudyEnterRoom';
 import LoginHome from 'page/AfterLoginHome';
 import StudyRoom from 'page/StudyRoom';
 import UserInfo from 'page/UserInfo';
+import ChatRoom from 'page/ChatRoom';
 // import HeaderItem from 'component/HeaderItem';
 
 function App() {
@@ -17,6 +18,7 @@ function App() {
         <Route path="/LoginHome" element={<LoginHome />} />
         <Route path="/StudyEnterRoom" element={<StudyEnterRoom />} />
         <Route path="/StudyRoom" element={<StudyRoom />} />
+        <Route path="/ChatRoom" element={<ChatRoom />} />
         {/* <Route path="/studyRooms/:roomUuid/users" element={<UserInfo />} />
         <Route path="/studyRooms/:roomUuid" element={<StudyRoom />} /> */}
       </Routes>

src/hooks/BaseUrl.ts

@@ -1,3 +1,22 @@
+/*
+baseurl.ts 파일:
+서버 API 및 WebSocket URL, OpenVidu 서버 정보 등의 상수 값을 정의하는 파일입니다.
+
+openviduapi.ts 파일:
+OpenVidu 서버와 통신하여 비디오 세션 생성과 토큰 생성을 수행하는 함수를 정의한 파일입니다.
+
+useOpenvidu.ts 파일:
+OpenVidu 라이브러리를 사용하여 비디오 세션과 스트림을 관리하는 커스텀 훅입니다.
+사용자의 비디오 스트림을 생성하고 OpenVidu 세션에 연결하는 논리를 캡슐화하며, 카메라 및 마이크 상태 변경을 처리합니다.
+
+useStream.ts 파일:
+개별 비디오 스트림을 관리하는 커스텀 훅입니다.
+스트림의 화면에 표시할 비디오 엘리먼트를 관리하며, 스트림의 화자 상태, 마이크 및 비디오 활성화 상태 변경을 처리합니다.
+
+useWebsocket.ts 파일:
+Stomp.js 라이브러리를 사용하여 웹소켓 연결을 관리하는 커스텀 훅입니다.
+onConnect 콜백 함수와 연결 재시도 딜레이를 설정하여 웹소켓 연결을 관리하며, 연결 상태를 추적합니다.
+*/
 export const BASE_URL = 'http://localhost:8080/api/v1';
 export const WS_BASE_URL = 'ws://localhost:8080/signal';
 

src/page/ChatRoom.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { useWebSocket } from 'hooks/useWebSocket';
+
+interface Message {
+  userId: string | null;
+  userName: string | null;
+  message: string | null;
+}
+
+export default function ChatRoom() {
+  const [messageInput, setMessageInput] = useState('');
+  const [messages, setMessages] = useState<Message[]>([]);
+  const { stompClient, connected } = useWebSocket({
+    onConnect: (frame, client) => {
+      // 서버에 접속 성공 시 동작할 로직
+      console.log('WebSocket 연결 성공');
+      client.subscribe('/topic/chat', (message) => {
+        const payload: Message = JSON.parse(message.body);
+        setMessages((prevMessages) => [...prevMessages, payload]);
+      });
+    },
+  });
+
+  useEffect(() => {
+    // 연결 상태 변화를 감지하여 동작할 로직
+    console.log('WebSocket 연결 상태:', connected);
+  }, [connected]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (messageInput.trim() !== '') {
+      const newMessage: Message = {
+        userId: 'user1', // 사용자 아이디 혹은 이름 설정
+        userName: 'User 1', // 사용자 이름 설정
+        message: messageInput,
+      };
+      stompClient.current?.publish({
+        destination: '/app/send-message',
+        body: JSON.stringify(newMessage),
+      });
+      setMessageInput('');
+    }
+  };
+
+  return (
+    <div>
+      <h1>실시간 채팅</h1>
+      <div>
+        {messages.map((message, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <div key={index}>
+            <strong>{message.userName}: </strong>
+            {message.message}
+          </div>
+        ))}
+      </div>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          value={messageInput}
+          onChange={(e) => setMessageInput(e.target.value)}
+        />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  );
+}

src/page/StudyEnterRoom.tsx

@@ -35,7 +35,7 @@ export default function StudyEnterRoom() {
             />
           </div>
           <NavBtn>
-            <FormBtnLink to="/StudyRoom">입장</FormBtnLink>
+            <FormBtnLink to="/ChatRoom">입장</FormBtnLink>
           </NavBtn>
         </form>
       </RoundTwo>

src/page/StudyRoom2.tsx

@@ -15,7 +15,6 @@ import SockJS from 'sockjs-client';
 import { Client, IMessage } from '@stomp/stompjs';
 import { BASE_URL } from 'hooks/BaseUrl';
 import { Mic, MicOff, Videocam, VideocamOff } from '@mui/icons-material';
-import Webcam from 'react-webcam';
 import { useOpenvidu } from 'hooks/UseOpenVidu';
 import { useWebSocket } from 'hooks/useWebSocket';
 import { StreamManager } from 'openvidu-browser';