✨ feat: 회의 및 안건 관련 웹소켓 코드 작성 (#73)

* chore: 라이브러리 설치

* feat: 안건 일시정지 아이콘 추가

* feat: 안건 제어 및 갱신 웹소켓 코드 작성

* feat: 전체 회의 소요시간 조회 웹소켓 코드 작성

* feat: 웹소켓 코드 export

* style: css 수정

* fix: 회의 api 오류 수정

package.json

@@ -19,6 +19,7 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^5.17.19",
     "@tanstack/react-query-devtools": "^5.17.21",
     "axios": "^1.6.5",
@@ -36,6 +37,7 @@
     "react-router-dom": "^6.22.0",
     "react-scroll": "^1.9.0",
     "react-spring-bottom-sheet": "^3.4.1",
+    "sockjs-client": "^1.6.1",
     "svg-sprite": "^2.0.2",
     "swiper": "^11.0.7",
     "vaul": "^0.9.1",
@@ -56,6 +58,7 @@
     "@types/react-beautiful-dnd": "^13",
     "@types/react-dom": "^18.2.17",
     "@types/react-scroll": "^1",
+    "@types/sockjs-client": "^1",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react-swc": "^3.5.0",

sprite-config.json

@@ -1,5 +1,5 @@
 {
-  "dest": "src/components/common/SvgIcon/sprite",
+  "dest": "src/shared/common/ui/SvgIcon/sprite",
   "shape": {
     "id": {
       "separator": "-"

src/pages/meeting/MeetingCompletePage/index.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import { Header, SvgIcon, Space } from '@shared/common/ui';
+import { media } from '@shared/common/styles';
 
 import { Step1, Step2 } from '@features/meeting-complete/ui';
 import { FolderIcon } from '@features/meeting-complete/assets';
@@ -55,10 +56,15 @@ const MeetingCompletePage = () => {
 const StyledContainer = styled.div`
   position: relative;
   width: 37.5rem;
-  /* height: 100vh; */
+  height: 100vh;
   background-color: ${({ theme }) => theme.palette.light_white};
   margin: 0px -20px;
   padding: 0px 20px;
+  box-sizing: border-box;
+
+  ${media.mobile} {
+    width: 100vw;
+  }
 `;
 
 const StyledContent = styled.div`
@@ -94,6 +100,10 @@ const StyledStep = styled.div<{ isCurrentStep: boolean }>`
 `;
 
 const StyledIcon = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%);
   height: 17.3rem;
 `;
 

src/shared/common/constants/index.ts

@@ -1 +1,2 @@
 export const BASE_URL = 'http://facerain-dev.iptime.org:8080';
+export const BROKER_URL = 'ws://facerain-dev.iptime.org:8080/ws';

src/shared/common/ui/Button/Button.tsx

@@ -53,6 +53,7 @@ const StyledButton = styled.button<{
   justify-content: center;
   align-items: center;
   width: ${(props) => (props.fullWidth ? '100%' : 'auto')};
+  height: 100%;
   padding: 1.4rem 0;
   border-radius: 1.2rem;
   background-color: ${(props) =>

src/shared/common/ui/SvgIcon/assets.ts

@@ -22,6 +22,7 @@ export { default as x_circle } from '@public/icons/x_circle.svg';
 export { default as x } from '@public/icons/x.svg';
 export { default as plus } from '@public/icons/plus.svg';
 export { default as agenda } from '@public/icons/agenda.svg';
+export { default as pause } from '@public/icons/pause.svg';
 export { default as play } from '@public/icons/play.svg';
 export { default as play_disabled } from '@public/icons/play_disabled.svg';
 export { default as dots_mono } from '@public/icons/dots_mono.svg';

src/shared/meeting/apis/index.ts

@@ -3,7 +3,11 @@ export * from './mutations/useAddAgenda';
 export * from './mutations/useDeleteAgenda';
 export * from './mutations/useEditAgenda';
 export * from './mutations/useReorderAgendaList';
+// export * from './mutations/useEndMeeting';
 
 export * from './queries/useGetMeeting';
 export * from './queries/useGetMeetingMemberList';
 export * from './queries/useGetAgendaList';
+
+export * from './webSockets/useGetMeetingDuration';
+export * from './webSockets/useControlAgenda';

src/shared/meeting/apis/webSockets/useControlAgenda.ts

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef } from 'react';
+import * as StompJs from '@stomp/stompjs';
+// import SockJS from 'sockjs-client';
+
+import { getCookie } from '@shared/common/utils';
+import { useGetAgendaList } from '@shared/meeting/apis';
+import { BROKER_URL } from '@shared/common/constants';
+
+export const useControlAgenda = (
+  meetingId: string,
+  agendaId: number,
+  isFirstPendingAgenda: boolean
+) => {
+  const client = useRef<StompJs.Client | null>();
+
+  const { refetch: refetchAgendaList } = useGetAgendaList({
+    token: getCookie('token'),
+    meetingId
+  });
+
+  const connect = useCallback(() => {
+    client.current = new StompJs.Client({
+      brokerURL: BROKER_URL,
+      connectHeaders: {
+        Authorization: `${getCookie('token')}`
+      },
+      // debug: (str) => {
+      //   console.log(str);
+      // },
+      reconnectDelay: 5000,
+      heartbeatIncoming: 4000,
+      heartbeatOutgoing: 4000
+    });
+
+    // client.current.webSocketFactory = function () {
+    //   return new SockJS(
+    //     'http://facerain-dev.iptime.org:8080/ws'
+    //   );
+    // };
+
+    const callback = (message: StompJs.Message) => {
+      if (message.body) {
+        // console.log(JSON.parse(message.body));
+        refetchAgendaList();
+      }
+    };
+
+    const subscribe = () => {
+      // console.log('[구독]', client.current);
+      client.current?.subscribe(
+        `/topic/meeting/${meetingId}/agendas/${agendaId}/status`,
+        callback
+      );
+    };
+
+    client.current.onConnect = () => {
+      subscribe();
+    };
+
+    client.current.activate();
+
+    // changeClient(client.current); // 클라이언트 갱신
+  }, [meetingId, agendaId, refetchAgendaList]);
+
+  const sendMessage = (action: string) => {
+    // console.log('[메세지 전송]', client.current);
+    client.current?.publish({
+      destination: `/app/meeting/${meetingId}/agendas/${agendaId}/action`,
+      body: JSON.stringify({
+        action
+      })
+    });
+  };
+
+  const disConnect = () => {
+    if (client.current === null) {
+      return;
+    }
+    client.current?.deactivate();
+  };
+
+  useEffect(() => {
+    if (isFirstPendingAgenda) {
+      // console.log(isFirstPendingAgenda, agendaId);
+      connect();
+    }
+    // return () => disConnect();
+  }, [isFirstPendingAgenda, connect]);
+
+  return { connect, disConnect, sendMessage };
+};

src/shared/meeting/apis/webSockets/useGetMeetingDuration.ts

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from 'react';
+import * as StompJs from '@stomp/stompjs';
+// import SockJS from 'sockjs-client';
+
+import { getCookie } from '@shared/common/utils';
+
+export const useGetMeetingDuration = () => {
+  const client = useRef<StompJs.Client | null>();
+
+  const connect = () => {
+    client.current = new StompJs.Client({
+      brokerURL: 'ws://facerain-dev.iptime.org:8080/ws',
+      connectHeaders: {
+        Authorization: `${getCookie('token')}`
+      },
+      debug: (str) => {
+        console.log(str);
+      },
+      reconnectDelay: 5000,
+      heartbeatIncoming: 4000,
+      heartbeatOutgoing: 4000
+    });
+
+    // client.current.webSocketFactory = function () {
+    //   return new SockJS(
+    //     'http://facerain-dev.iptime.org:8080/ws/app/meeting/65/agendas/59/action?action=resume'
+    //   );
+    // };
+
+    const callback = (message: StompJs.Message) => {
+      if (message.body) {
+        console.log('[회의실 입장]', JSON.parse(message.body));
+        // let msg = JSON.parse(message.body);
+      }
+    };
+
+    const subscribe = () => {
+      client.current?.subscribe('/topic/meeting/65/current-duration', callback);
+    };
+
+    const sendMessage = () => {
+      client.current?.publish({
+        destination: '/app/meeting/65/current-duration',
+        body: JSON.stringify({})
+      });
+    };
+
+    client.current.onConnect = () => {
+      subscribe();
+      sendMessage();
+    };
+
+    client.current.activate();
+
+    // changeClient(client.current); // 클라이언트 갱신
+  };
+
+  const disConnect = () => {
+    if (client.current === null) {
+      return;
+    }
+    client.current?.deactivate();
+  };
+
+  useEffect(() => {
+    connect();
+    return () => disConnect();
+  }, []);
+};