Feat/#242-S : 투표 블록 소켓 이벤트 연동 및 투표 템플릿화 리팩토링 (#255)

* refactor : debounce를 lib로 분리 후 custom hook에서 활용

* refactor : 투표 블록 리팩토링
- 투표 등록 전 후 view를 다르게 보여주지 않고 input을 항상 열어둠
- input onChange 디바운싱 적용
- isUnRegisterd -> isStartedVote 변수명 변경

* chore : 주석 제거

* refactor : 버튼 아이콘만 있을 때 재사용 가능하도록 수정

* feat : 투표 블록 템플릿으로 구현
mode에 따라 투표 UI가 바뀌도록 함

* feat : mom에 투표 블록 임시로 연결

* chore: 버튼 padding 줄이기

* refactor : 투표 create, update, end 소켓 로직 수정

* refactor : 코드리뷰 반영

Author: juyeong-s

client/src/components/Mom/index.tsx

@@ -1,9 +1,12 @@
+import VoteBlockTemplate from 'common/Templates/VoteBlock';
 import { useEffect, useRef, useState } from 'react';
+import { VOTE_MODE } from 'src/constants/block';
 import SOCKET_MESSAGE from 'src/constants/socket-message';
 import { useCRDT } from 'src/hooks/useCRDT';
 import useDebounce from 'src/hooks/useDebounce';
 import useSelectedMom from 'src/hooks/useSelectedMom';
 import useSocketContext from 'src/hooks/useSocketContext';
+import { Option, VoteMode } from 'src/types/block';
 import { v4 as uuid } from 'uuid';
 
 import Block from './Block';
@@ -15,6 +18,8 @@ function Mom() {
   const { selectedMom } = useSelectedMom();
   const { momSocket: socket } = useSocketContext();
 
+  const [voteMode, setVoteMode] = useState<VoteMode | null>(null);
+
   const {
     syncCRDT,
     spreadCRDT,
@@ -68,6 +73,9 @@ function Mom() {
     }
   };
 
+  const initialOption: Option[] = [{ id: 1, text: '', count: 0 }];
+  const [options, setOptions] = useState<Option[]>(initialOption);
+
   useEffect(() => {
     if (!selectedMom) return;
 
@@ -112,6 +120,11 @@ function Mom() {
       ee.emit(`${SOCKET_MESSAGE.BLOCK.UPDATE_TEXT}-${id}`, crdt);
     });
 
+    socket.on(SOCKET_MESSAGE.MOM.CREATE_VOTE, (options) => {
+      setVoteMode(VOTE_MODE.REGISTERED as VoteMode);
+      setOptions(options);
+    });
+
     return () => {
       [
         SOCKET_MESSAGE.MOM.INIT,
@@ -122,6 +135,7 @@ function Mom() {
         SOCKET_MESSAGE.BLOCK.INIT,
         SOCKET_MESSAGE.BLOCK.INSERT_TEXT,
         SOCKET_MESSAGE.BLOCK.DELETE_TEXT,
+        SOCKET_MESSAGE.MOM.CREATE_VOTE,
       ].forEach((event) => socket.off(event));
     };
   }, [selectedMom]);
@@ -140,11 +154,22 @@ function Mom() {
           </h1>
           <span>{new Date(selectedMom.createdAt).toLocaleString()}</span>
         </div>
+
         <div className={style['mom-body']}>
           {blocks.map((id, index) => (
             <Block key={id} id={id} index={index} onKeyDown={onKeyDown} />
           ))}
         </div>
+        {/* TODO: 임시로 놓은 투표 블록임 */}
+        <button onClick={() => setVoteMode('create')}>투표 등록</button>
+        {voteMode && (
+          <VoteBlockTemplate
+            mode={voteMode}
+            setVoteMode={setVoteMode}
+            options={options}
+            setOptions={setOptions}
+          />
+        )}
       </div>
     </div>
   ) : (

client/src/components/VoteBlock/index.tsx

@@ -1,15 +1,17 @@
 import classNames from 'classnames/bind';
+import { memo } from 'react';
 
 import style from './style.module.scss';
 
 const cx = classNames.bind(style);
 
 interface ButtonProps {
-  text: string;
+  text?: string;
   href?: string;
   icon?: JSX.Element;
   className?: string;
   isDisabled?: boolean;
+  ariaLabel?: string;
   color?: string;
   onClick?: () => void;
 }
@@ -20,6 +22,7 @@ function Button({
   icon,
   className,
   isDisabled = false,
+  ariaLabel,
   color,
   onClick,
 }: ButtonProps) {
@@ -34,15 +37,19 @@ function Button({
     </a>
   ) : (
     <button
-      className={cx(style.button, className, { disable: isDisabled })}
+      className={cx(style.button, className, {
+        disable: isDisabled,
+        foursquare: !text,
+      })}
       disabled={isDisabled}
       onClick={onClickBtn}
       style={{ backgroundColor: color }}
+      aria-label={ariaLabel}
     >
       {icon}
-      <span>{text}</span>
+      {text && <span>{text}</span>}
     </button>
   );
 }
 
-export default Button;
+export default memo(Button);

client/src/components/common/Button/index.tsx

@@ -1,22 +1,27 @@
-@import 'styles/color.module.scss';
+@import 'styles/color.module';
 
 .button {
-  width: fit-content;
   display: flex;
   align-items: center;
-  background-color: $primary-100;
+  width: fit-content;
+  padding: 10px 40px;
   border: none;
   border-radius: 40px;
-  padding: 10px 40px;
+  background-color: $primary-100;
   text-decoration: none;
 
   span {
-    color: $white;
     padding: 10px;
+    color: $white;
     font-weight: 700;
   }
 }
 
 .disable {
   background-color: $gray-300;
 }
+
+.foursquare {
+  padding: 5px;
+  border-radius: 10px;
+}