Feat/complete vote

src/components/Home/ChoiceSlide/ChoiceSlide.tsx

@@ -23,7 +23,7 @@ const ChoiceSlide = ({ side, topicContent }: ChoiceSlideProps) => {
             right: 95,
           }}
         >
-          <Text color={'rgba(255, 255, 255, 0.4)'} size={200} weight={900}>
+          <Text color={colors.white_40} size={200} weight={900}>
             A
           </Text>
         </div>
@@ -45,7 +45,7 @@ const ChoiceSlide = ({ side, topicContent }: ChoiceSlideProps) => {
           left: 107,
         }}
       >
-        <Text color={'rgba(255, 255, 255, 0.4)'} size={200} weight={900}>
+        <Text color={colors.white_40} size={200} weight={900}>
           B
         </Text>
       </div>

src/components/Home/TopicCard/TopicCard.tsx

@@ -4,6 +4,7 @@ import Text from '@components/commons/Text/Text';
 import ChoiceSlider from '@components/Home/ChoiceSlider/ChoiceSlider';
 import CommentBox from '@components/Home/CommentBox/CommentBox';
 import Timer from '@components/Home/Timer/Timer';
+import VoteCompletion from '@components/Home/VoteCompletion/VoteCompletion';
 import useBottomSheet from '@hooks/useBottomSheet/useBottomSheet';
 import { TopicResponse } from '@interfaces/api/topic';
 
@@ -98,7 +99,7 @@ const TopicCard = () => {
           </Text>
         </UserInfoContainer>
         {hasVoted ? (
-          <div>선택 완료</div> // TODO: 선택 완료 컴포넌트
+          <VoteCompletion side={'A'} topicContent={'10년 전 과거로가기'}></VoteCompletion> // TODO: 선택 완료 컴포넌트
         ) : (
           <ChoiceSlider onVote={handleOnVote} choices={data.choices} />
         )}

src/components/Home/VoteCompletion/VoteCompletion.styles.tsx

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+import { colors } from '@styles/theme';
+
+export const VoteCompletionContainer = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 246px;
+  padding: 36px 20px 0;
+`;
+
+export const VoteCompletionLabel = styled.div`
+  position: absolute;
+  left: 50%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 82px;
+  height: 27px;
+  font-size: 15px;
+  font-weight: bold;
+  color: ${colors.white};
+  background-color: ${colors.navy2};
+  border-radius: 30px;
+  transform: translate(-50%, -50%);
+`;
+
+export const VoteCompletionBackground = styled.div<{ side: 'A' | 'B' }>`
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 148px;
+  overflow: hidden;
+  background-color: ${(props) =>
+    props.side === 'A' ? 'rgb(208 67 118 / 20%)' : 'rgb(20 152 170 / 20%)'};
+  border-radius: 10px;
+`;
+
+export const VoteCompletionTextContainer = styled.div`
+  position: absolute;
+  top: -43px;
+`;

src/components/Home/VoteCompletion/VoteCompletion.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import Text from '@components/commons/Text/Text';
+import { UserProfileImage } from '@components/Home/TopicCard/TopicCard.styles';
+import useModal from '@hooks/useModal/useModal';
+
+import { colors } from '@styles/theme';
+
+import { MeatballIcon } from '@icons/index';
+
+import {
+  VoteCompletionContainer,
+  VoteCompletionBackground,
+  VoteCompletionLabel,
+  VoteCompletionTextContainer,
+} from './VoteCompletion.styles';
+
+interface VoteCompletionProps {
+  side: 'A' | 'B';
+  topicContent: string;
+}
+
+const VoteCompletion = ({ side, topicContent }: VoteCompletionProps) => {
+  const handleOnClickCommentMenu = () => {};
+
+  return (
+    <VoteCompletionContainer>
+      <VoteCompletionBackground side={side}>
+        <div style={{ zIndex: 1 }}>
+          <Text color={colors.white} size={20} weight={600}>
+            {topicContent}
+          </Text>
+        </div>
+
+        <VoteCompletionTextContainer>
+          <Text
+            color={side === 'A' ? 'rgba(208, 67, 118, 0.40)' : 'rgba(20, 152, 170, 0.40)'}
+            size={200}
+            weight={900}
+          >
+            {side}
+          </Text>
+        </VoteCompletionTextContainer>
+      </VoteCompletionBackground>
+      <VoteCompletionLabel>선택 완료</VoteCompletionLabel>
+    </VoteCompletionContainer>
+  );
+};
+
+export default VoteCompletion;