diff --git a/src/features/vote/components/voteSelect/VoteSelect.tsx b/src/features/vote/components/voteSelect/VoteSelect.tsx index aef114d..7b92e8e 100644 --- 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 ( - + {type === SELECT_TYPE.PartLeader && {subText}} {mainText} {type === SELECT_TYPE.Demoday && {subText}} @@ -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 index f96e39e..b4c51e0 100644 --- 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} /> ))}