From 3854c897638a0ca84a275dd89b4a90567c229fe7 Mon Sep 17 00:00:00 2001
From: chaeyoung103 <thdcodud103@naver.com>
Date: Tue, 19 Dec 2023 21:02:24 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20theme=EC=97=90=20=EC=A0=80=EC=9E=A5?=
 =?UTF-8?q?=EB=90=9C=20=EC=BB=AC=EB=9F=AC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Home/ChoiceSlide/ChoiceSlide.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Home/ChoiceSlide/ChoiceSlide.tsx b/src/components/Home/ChoiceSlide/ChoiceSlide.tsx
index d580ece..75edfc2 100644
--- a/src/components/Home/ChoiceSlide/ChoiceSlide.tsx
+++ b/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>

From fb32374be213a8f3cafbe1f0b0ea5a5d195b4ab8 Mon Sep 17 00:00:00 2001
From: chaeyoung103 <thdcodud103@naver.com>
Date: Tue, 19 Dec 2023 21:02:45 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=84=A0=ED=83=9D=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Home/TopicCard/TopicCard.tsx   |  3 +-
 .../VoteCompletion/VoteCompletion.styles.tsx  | 51 +++++++++++++++++++
 .../Home/VoteCompletion/VoteCompletion.tsx    | 50 ++++++++++++++++++
 3 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Home/VoteCompletion/VoteCompletion.styles.tsx
 create mode 100644 src/components/Home/VoteCompletion/VoteCompletion.tsx

diff --git a/src/components/Home/TopicCard/TopicCard.tsx b/src/components/Home/TopicCard/TopicCard.tsx
index 24db230..7dd2404 100644
--- a/src/components/Home/TopicCard/TopicCard.tsx
+++ b/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} />
         )}
diff --git a/src/components/Home/VoteCompletion/VoteCompletion.styles.tsx b/src/components/Home/VoteCompletion/VoteCompletion.styles.tsx
new file mode 100644
index 0000000..18ac0a4
--- /dev/null
+++ b/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;
+`;
diff --git a/src/components/Home/VoteCompletion/VoteCompletion.tsx b/src/components/Home/VoteCompletion/VoteCompletion.tsx
new file mode 100644
index 0000000..699baa3
--- /dev/null
+++ b/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;