Merge pull request #14 from SeWoong-Han/main

feat: 소켓 연결 테스트

package.json

@@ -25,6 +25,7 @@
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "remark-gfm": "^4.0.0",
+    "sockjs-client": "^1.6.1",
     "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },

src/components/chat/ChatRoom.js

@@ -0,0 +1,69 @@
+import styles from './ChatRoom.module.css';
+import * as Stomp from '@stomp/stompjs';
+import { useSelector } from 'react-redux';
+import * as SockJS from 'sockjs-client';
+
+function ChatRoom() {
+    const jwtToken = useSelector(state => state.loginSlice.accessToken);
+    console.log("jwt token", jwtToken);
+    // 클라이언트 생성
+    const Client = new Stomp.Client({
+        // SockJS 엔드포인트 URL
+        // webSocketFactory: () => new SockJS('http://localhost:8080/ws'),
+        // webSocketFactory: () => new WebSocket('ws://localhost:8080/ws'),
+        brokerURL: 'ws://localhost:8080/ws',
+        // 로그인 자격 정보
+        connectHeaders: {
+            login: "",
+            passcode: "",
+            headers: {
+                Authorization: `Bearer ${jwtToken}`,  // JWT를 헤더에 추가
+                'content-type': 'text/event-stream',
+                'Cache-Control': 'no-cache',
+                'Connection': 'keep-alive',
+                'X-Accel-Buffering': 'no',
+            }
+        },
+
+        // 통신 로그
+        debug: (log) => console.log('STOMP : ', log),
+
+        // 연결 성공 시 실행될 콜백 함수
+        onConnect: (frame) => {
+            // 구독 설정
+            Client.subscribe('/queue/chat', (message) => {
+                const payload = JSON.parse(message.body);
+                console.log('message : ', payload);
+            },
+            // {
+            //     Authorization: `Bearer ${jwtToken}`,  // JWT를 헤더에 추가
+            //     'content-type': 'text/event-stream'
+            // }
+            );
+        },
+
+        // 연결 실패 시 실행될 콜백 함수
+        onStompError: (frame) => {
+            console.error('STOMP : ', frame);
+        },
+    });
+    const onClick = () => {
+        console.log('success');
+        Client.publish({
+            destination: '/pub/chat',
+            body: JSON.stringify('First Message'),  // 임시로 first message 보내서 테스트
+        });
+    }
+    const active = () => {
+        Client.activate();
+        console.log("client :",Client);
+    }
+    return (
+        <div>
+            <div className={styles.container}>채팅 내용이 보이는 곳</div>
+            <button onClick={onClick}>전송</button>
+            <button onClick={active}>연결</button>
+        </div>
+    )
+}
+export default ChatRoom;

src/components/chat/ChatRoom.module.css

@@ -0,0 +1,10 @@
+/* 채팅창 크기,스타일링은 나중에 변경 예정 */
+.container {
+	background-color: gray;
+	height: 80%;
+	margin-bottom: 30px;
+}
+
+
+
+

src/components/chat/EnterChat.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { Drawer } from "antd";
+import ChatRoom from "./ChatRoom";
 
 export const EnterChat = ({ setIsChatOpen }) => {
   const showDrawer = () => {
@@ -12,9 +13,7 @@ export const EnterChat = ({ setIsChatOpen }) => {
   return (
     <>
       <Drawer title="Basic Drawer" onClose={onClose} open={showDrawer}>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
+        <ChatRoom />
       </Drawer>
     </>
   );

src/components/ide/CreateProjectModal.js

@@ -46,13 +46,15 @@ export const CreateProjectModal = ({ setIsCreateProjectModalOpen, member }) => {
       .post(`${process.env.REACT_APP_API_SERVER_HOST}/projects`, {
         name: value.project.name,
         problemId: value.project.problemId,
+
         memberId: member.memberId,
       })
       .then((response) => {
         console.log(response);
         if (response.status == 201) {
           setProjectId(response.data);
         }
+
       })
       .catch((error) => {
         console.log(error);
@@ -112,11 +114,13 @@ export const CreateProjectModal = ({ setIsCreateProjectModalOpen, member }) => {
             onChange={onChange}
             // onSearch={onSearch}
             // filterOption={filterOption}
+
             options={problemList.map((problem) => ({
               key: problem.id,
               value: problem.id,
               label: problem.title,
             }))}
+
           />
         </Form.Item>
         <Form.Item
@@ -138,4 +142,4 @@ export const CreateProjectModal = ({ setIsCreateProjectModalOpen, member }) => {
       </Form>
     </Modal>
   );
-};
+};

src/components/ide/IDEBottomBar.js

@@ -78,4 +78,4 @@ export const IdeBottomBar = ({ sender, setSender, isDarkMode }) => {
       </div>
     </>
   );
-};
+};

src/redux/store.js

@@ -3,6 +3,6 @@ import loginSlice from "./reducers/loginSlice";
 
  export default configureStore({
     reducer: {
-        'loginSlice': loginSlice
+        'loginSlice': loginSlice,
     }
  })