Feat/#289-S : 투표 결과 UI에 보여주기 (#292)

* feat : 투표 결과 텍스트로 보여주기

* feat : 투표 블록 결과 시각화 UI
- 브라우저 100% 비율로 보는 걸 추천드려요 ..^^

* feat : 투표 결과 퍼센트 소수점 2자리까지만 표시

Co-authored-by: Seyoung Kim <[email protected]>

Author: juyeong-s

client/src/components/common/Templates/VoteBlock/index.tsx

@@ -10,6 +10,7 @@ import useSelectedMom from 'src/hooks/useSelectedMom';
 import useSocketContext from 'src/hooks/useSocketContext';
 import { useUserContext } from 'src/hooks/useUserContext';
 import { Option, VoteMode } from 'src/types/block';
+import color from 'styles/color.module.scss';
 
 import style from './style.module.scss';
 
@@ -119,7 +120,7 @@ function VoteBlockTemplate({
     socket.on(BLOCK_EVENT.END_VOTE, ({ options, participantCount }) => {
       setVoteMode('end');
       setOptions(options);
-      setParticipantCount(participantCount);
+      setParticipantCount(Number(participantCount));
       toast('투표가 종료되었어요 ^^');
     });
 
@@ -129,6 +130,14 @@ function VoteBlockTemplate({
     };
   }, [setParticipantCount]);
 
+  const getPercent = (count: number) => {
+    return (count / participantCount) * 100;
+  };
+
+  const getVoteResultText = (count: number) => {
+    return `(${count}/${participantCount}) ${getPercent(count).toFixed(2)}%`;
+  };
+
   return (
     <div className={style['vote-container']}>
       <h3 className={style.title}>투표</h3>
@@ -139,7 +148,7 @@ function VoteBlockTemplate({
       )}
 
       <ul>
-        {options.map(({ id, text }, index) => (
+        {options.map(({ id, text, count }, index) => (
           <li
             className={cx('option-item', {
               'selected-item':
@@ -148,11 +157,21 @@ function VoteBlockTemplate({
             key={id}
             onClick={() => onSelect(id)}
           >
+            {isEndMode && (
+              <div
+                className={style['vote-result-bar']}
+                style={{
+                  width: `${getPercent(count)}%`,
+                  backgroundColor: color.highlight100,
+                }}
+              ></div>
+            )}
+
             <div className={style['box-fill']}>{index + 1}</div>
             <input
               type="text"
               className={cx('option-input', {
-                selected: isRegisteredMode,
+                'cursor-enable': !isCreateMode,
               })}
               placeholder="항목을 입력해주세요"
               onChange={onChange}
@@ -167,6 +186,11 @@ function VoteBlockTemplate({
                 onClick={() => onDelete(id)}
               />
             )}
+            {isEndMode && (
+              <div className={style['vote-result-text']}>
+                {getVoteResultText(count)}
+              </div>
+            )}
           </li>
         ))}
       </ul>

client/src/components/common/Templates/VoteBlock/style.module.scss

@@ -23,51 +23,68 @@
   .option-item {
     display: flex;
     position: relative;
-    flex-direction: row;
+    z-index: 1;
     align-items: center;
 
     width: 100%;
+    height: 50px;
 
     margin: 14px 0px;
-    padding: 12px;
-    border: 4px solid transparent;
+    padding: 0;
+
+    overflow: hidden;
+    border: 4px solid initial;
 
     border-radius: 12px;
     box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
 
     cursor: pointer;
 
+    .vote-result-bar {
+      position: absolute;
+      z-index: -1;
+      height: 50px;
+    }
+
     .box-fill {
       display: flex;
       align-items: center;
       justify-content: center;
 
-      width: 30px;
-      height: 30px;
+      min-width: 30px;
+      min-height: 30px;
 
       margin-right: 12px;
+      margin-left: 10px;
       border-radius: 4px;
       background-color: $primary-100;
       color: $white;
       font-size: 16px;
     }
 
     .option-input {
-      width: 100%;
+      flex-grow: 1;
       background-color: transparent;
     }
-    .selected {
+    .cursor-enable {
       cursor: pointer;
     }
 
     .position-right {
       position: absolute;
       right: 0;
     }
+
+    .vote-result-text {
+      margin-right: 10px;
+      margin-left: auto;
+      font-size: 12px;
+      text-align: right;
+    }
   }
 
   .selected-item {
-    border: 4px solid $highlight-100;
+    border: 4px solid $highlight-200;
   }
 
   .vote-buttons {