Merge pull request #20 from local-mood/Hyeonmin

Feat:투표장 투표 클릭 시 버튼 색깔 변경
local-mood · Dec 24, 2023 · a925ddb · a925ddb
2 parents 504bcba + ad44c1f
commit a925ddb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/features/vote/components/voteSelect/VoteSelect.tsx b/src/features/vote/components/voteSelect/VoteSelect.tsx
@@ -1,11 +1,12 @@
 import styled from "styled-components";
 import { SELECT_TYPE } from "../../constants/select-vote-type";
+import { useState } from "react";
 
 interface VoteSelectionProps {
   type: SELECT_TYPE;
   mainText: string;
   subText?: string;
-  onClick?: () => void;
+  onClick?: (mainText: string) => void;
   addClass?: string;
 }
 
@@ -16,8 +17,18 @@ export default function VoteSelect({
   onClick,
   addClass,
 }: VoteSelectionProps) {
+  const [clicked, setClicked] = useState(false);
+  const voteSelectClicked = () => {
+    onClick && onClick(mainText);
+    setClicked((prev) => !prev);
+  };
   return (
-    <VoteSelectWrapper $type={type} $addClass={addClass} onClick={onClick}>
+    <VoteSelectWrapper
+      $type={type}
+      $clicked={clicked}
+      $addClass={addClass}
+      onClick={voteSelectClicked}
+    >
       {type === SELECT_TYPE.PartLeader && <VoteSubText>{subText}</VoteSubText>}
       <VoteMainText $type={type}>{mainText}</VoteMainText>
       {type === SELECT_TYPE.Demoday && <VoteSubText>{subText}</VoteSubText>}
@@ -27,6 +38,7 @@ export default function VoteSelect({
 
 const VoteSelectWrapper = styled.div<{
   $type: SELECT_TYPE;
+  $clicked: boolean;
   $addClass: string | undefined;
 }>`
   display: flex;
@@ -53,7 +65,10 @@ const VoteSelectWrapper = styled.div<{
       : props.$type === SELECT_TYPE.PartLeader
       ? "11.7rem"
       : "14.5rem"};
-  ${(props) => props.$addClass}
+  background-color: ${(props) =>
+    props.$clicked && props.theme.colors.mainColor};
+  color: ${(props) => props.$clicked && props.theme.colors.white};
+  ${(props) => props.$addClass};
   &:hover {
     background-color: ${(props) => props.theme.colors.mainColor};
     color: ${(props) => props.theme.colors.white};

diff --git a/src/pages/vote/VoteLeader.tsx b/src/pages/vote/VoteLeader.tsx
@@ -11,6 +11,9 @@ const VoteLeader = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const part = location.state;
+  const voteLeaderSelectClicked = (mainText: string) => {
+    console.log(mainText);
+  };
   const leaders = [
     { mainText: "김현민", subText: "LocalMood" },
     { mainText: "김지원", subText: "LocalMood" },
@@ -41,6 +44,7 @@ const VoteLeader = () => {
             type={SELECT_TYPE.PartLeader}
             mainText={leader.mainText}
             subText={leader.subText}
+            onClick={voteLeaderSelectClicked}
           />
         ))}
       </LeaderContainer>