fix: 기권 안죽이기 안되던 버그 수정

- smallbutton을 목적에 걸맞게 voteLabel로 변경
mafia-together · Aug 25, 2024 · e082bf3 · e082bf3
1 parent fc4ac9a
commit e082bf3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 25 deletions.
diff --git a/src/components/button/SmallButton.tsx → src/components/etc/VoteLabel.tsx b/src/components/button/SmallButton.tsx → src/components/etc/VoteLabel.tsx
@@ -6,18 +6,27 @@ import { VariablesCSS } from '../../styles/VariablesCSS';
 type PropsType = {
   text: string;
   color: 'day' | 'night';
+  htmlFor: string;
 };
 
-export default function SmallButton(props: PropsType) {
+export default function Votelabel(props: PropsType) {
   const { text } = props;
 
   return (
-    <button css={container(props)}>
-      <p>{text}</p>
-    </button>
+    <label css={abstentionLabel} htmlFor={props.htmlFor}>
+      <div css={container(props)}>
+        <p>{text}</p>
+      </div>
+    </label>
   );
 }
 
+const abstentionLabel = css`
+  margin: 30px auto 16px;
+  display: flex;
+  justify-content: center;
+`;
+
 const container = (props: PropsType) => css`
   padding: 16px 30px;
   font-family: 'Cafe24Ssurround', sans-serif;

diff --git a/src/components/job/MafiaNight.tsx b/src/components/job/MafiaNight.tsx
@@ -6,7 +6,7 @@ import { postSkill, useMafiaVoteResultQuery } from '../../axios/http';
 import { middle } from '../../pages/Night';
 import { VariablesCSS } from '../../styles/VariablesCSS';
 import { Player } from '../../type';
-import SmallButton from '../button/SmallButton';
+import Votelabel from '../etc/VoteLabel';
 import PlayerGrid from '../player/PlayerGrid';
 import PlayerNight from '../player/PlayerNight';
 
@@ -68,9 +68,7 @@ export const MafiaNight = (props: PropsType) => {
         checked={nowVoteResult === 0}
         onChange={() => isAlive && setCheck(0)}
       />
-      <label htmlFor="0" css={notkillLable}>
-        <SmallButton text="안죽이기" color="night" />
-      </label>
+      <Votelabel text="안죽이기" color="night" htmlFor="0" />
     </div>
   );
 };
@@ -90,9 +88,3 @@ const notkill = () => css`
     background-color: ${VariablesCSS.kill};
   }
 `;
-
-const notkillLable = () => css`
-  margin: 60px auto 16px;
-  display: flex;
-  justify-content: center;
-`;
diff --git a/src/components/modal/Vote.tsx b/src/components/modal/Vote.tsx
@@ -5,7 +5,7 @@ import { useRecoilState } from 'recoil';
 import { postVote } from '../../axios/http';
 import { roomInfoState } from '../../recoil/roominfo/atom';
 import { VariablesCSS } from '../../styles/VariablesCSS';
-import SmallButton from '../button/SmallButton';
+import Votelabel from '../etc/VoteLabel';
 import PlayerGrid from '../player/PlayerGrid';
 import PlayerVote from '../player/PlayerVote';
 import { TimeOnlySeconds } from '../time/TimeOnlySeconds';
@@ -93,14 +93,12 @@ export default function Vote(props: PropsType) {
           <input
             type="radio"
             name="vote"
-            id="0"
+            id={ABSTAIN_NUMBER.toString()}
             checked={voteTarget === ABSTAIN_NUMBER}
             css={abstention}
             onChange={() => setVote(ABSTAIN_NUMBER, ABSTAIN_STRING)}
           />
-          <label htmlFor="0" css={abstentionLabel}>
-            <SmallButton text="기권" color="day" />
-          </label>
+          <Votelabel text="기권" color="day" htmlFor="0" />
           {timeup || voteAll || (
             <p css={message}>모든 플레이어가 투표할 시 대화 시간이 종료됩니다.</p>
           )}
@@ -175,9 +173,3 @@ const abstention = () => css`
     background-color: ${VariablesCSS.kill};
   }
 `;
-
-const abstentionLabel = () => css`
-  margin: 30px auto 16px;
-  display: flex;
-  justify-content: center;
-`;