feat: VoteBlock 컴포넌트 소켓 이벤트에 블럭 id 추가

- 기능 블럭들의 소켓 이벤트 플로우 조정 이후 ee 적용 예정
- 컴포넌트와 템플릿 VoteBlock 디렉토리로 이동

Author: se030

client/src/components/common/Templates/VoteBlock/index.tsx renamed to client/src/components/Block/VoteBlock/VoteBlockTemplate.tsx

@@ -67,7 +67,7 @@ function VoteBlockTemplate({
     setOptions(validOptions);
     setVoteMode(VoteMode.REGISTERED);
 
-    socket.emit(BLOCK_EVENT.CREATE_VOTE, validOptions);
+    socket.emit(BLOCK_EVENT.CREATE_VOTE, id, validOptions);
 
     toast('투표 등록 완료 ^^', { type: 'info' });
   };
@@ -87,7 +87,7 @@ function VoteBlockTemplate({
   };
 
   const onEnd = () => {
-    socket.emit(BLOCK_EVENT.END_VOTE);
+    socket.emit(BLOCK_EVENT.END_VOTE, id);
   };
 
   const onChange: ChangeEventHandler<HTMLInputElement> = ({ target }) => {
@@ -109,20 +109,23 @@ function VoteBlockTemplate({
 
     setSelectedOptionId(targetId);
 
-    socket.emit(BLOCK_EVENT.UPDATE_VOTE, targetId, user?.id);
+    socket.emit(BLOCK_EVENT.UPDATE_VOTE, id, targetId, user?.id);
   };
 
   useEffect(() => {
-    socket.on(BLOCK_EVENT.UPDATE_VOTE, (participantCount) => {
+    socket.on(`${BLOCK_EVENT.UPDATE_VOTE}-${id}`, (participantCount) => {
       setParticipantCount(participantCount);
     });
 
-    socket.on(BLOCK_EVENT.END_VOTE, ({ options, participantCount }) => {
-      setVoteMode(VoteMode.END);
-      setOptions(options);
-      setParticipantCount(participantCount);
-      toast('투표가 종료되었어요 ^^');
-    });
+    socket.on(
+      `${BLOCK_EVENT.END_VOTE}-${id}`,
+      ({ options, participantCount }) => {
+        setVoteMode(VoteMode.END);
+        setOptions(options);
+        setParticipantCount(participantCount);
+        toast('투표가 종료되었어요 ^^');
+      },
+    );
 
     return () => {
       socket.off(BLOCK_EVENT.UPDATE_VOTE);

client/src/components/Block/VoteBlock.tsx renamed to client/src/components/Block/VoteBlock/index.tsx

@@ -1,10 +1,11 @@
 import { BLOCK_EVENT } from '@wabinar/constants/socket-message';
 import { useState, useEffect } from 'react';
-import VoteBlockTemplate from 'src/components/common/Templates/VoteBlock';
 import { VoteMode } from 'src/constants/block';
 import useSocketContext from 'src/hooks/useSocketContext';
 import { Option } from 'src/types/block';
 
+import VoteBlockTemplate from './VoteBlockTemplate';
+
 interface VoteBlockProps {
   id: string;
 }
@@ -17,7 +18,7 @@ function VoteBlock({ id }: VoteBlockProps) {
   const [options, setOptions] = useState<Option[]>(initialOption);
 
   useEffect(() => {
-    socket.on(BLOCK_EVENT.CREATE_VOTE, (options) => {
+    socket.on(`${BLOCK_EVENT.CREATE_VOTE}-${id}`, (options) => {
       setVoteMode(VoteMode.REGISTERED as VoteMode);
       setOptions(options);
     });