diff --git a/src/components/CommentBox/CommentBox.styles.tsx b/src/components/CommentBox/CommentBox.styles.tsx
new file mode 100644
index 0000000..c92c8db
--- /dev/null
+++ b/src/components/CommentBox/CommentBox.styles.tsx
@@ -0,0 +1,91 @@
+import styled from 'styled-components';
+
+import { colors } from '@styles/theme';
+
+export const CommentContainer = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 41px 20px 0;
+`;
+
+export const CommentHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 22px;
+`;
+
+export const KeywordContainer = styled.div`
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+export const CommentInfoContainer = styled.div`
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 40px;
+  padding: 0 16px;
+  margin-top: 11px;
+  background-color: #64519b;
+  border-radius: 10px 10px 0 0;
+`;
+
+export const Comment = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 57px;
+  padding: 0 16px;
+  background-color: ${colors.navy2};
+  border-radius: 0 0 10px 10px;
+`;
+
+export const Blur = styled.div<{ isVote: boolean }>`
+  box-sizing: border-box;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 29px;
+  background-color: transparent;
+  filter: ${(props) => (!props.isVote ? 'blur(2px)' : 'blur(0px)')};
+`;
+
+export const HighlightText = styled.span`
+  color: white;
+`;
+
+export const CommentButton = styled.button`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 140px;
+  height: 30px;
+  padding: 4px 14px;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 0%;
+  color: ${colors.white};
+  text-align: center;
+  background-color: ${colors.purple};
+  border-radius: 91px;
+  transform: translate(-50%, -50%);
+`;
diff --git a/src/components/CommentBox/CommentBox.tsx b/src/components/CommentBox/CommentBox.tsx
new file mode 100644
index 0000000..bbac126
--- /dev/null
+++ b/src/components/CommentBox/CommentBox.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+
+import Text from '@components/Text/Text';
+import { UserProfileImage } from '@components/TopicCard/TopicCard.styles';
+
+import { colors } from '@styles/theme';
+
+import { MeatballIcon } from '@icons/index';
+
+import {
+  CommentContainer,
+  CommentHeader,
+  KeywordContainer,
+  CommentInfoContainer,
+  Comment,
+  HighlightText,
+  Blur,
+  CommentButton,
+} from './CommentBox.styles';
+
+interface CommentBoxProps {
+  hasVoted: boolean;
+  side: 'A' | 'B';
+  keyword: string;
+  commentCount: number;
+  voteCount: number;
+  topComment: string;
+}
+
+const CommentBox = ({
+  side,
+  keyword,
+  commentCount,
+  voteCount,
+  topComment,
+  hasVoted,
+}: CommentBoxProps) => {
+  return (
+    <CommentContainer>
+      <CommentHeader>
+        <KeywordContainer>
+          <Text size={13} weight={'regular'} color={colors.purple}>
+            {side} 사이드
+          </Text>
+          <Text size={14} weight={'regular'} color={colors.white_20}>
+            |
+          </Text>
+          <Text size={13} weight={'regular'} color={colors.white_60}>
+            {keyword}
+          </Text>
+        </KeywordContainer>
+        <MeatballIcon />
+      </CommentHeader>
+      <CommentInfoContainer>
+        <Text size={14} weight={600} color={colors.white_60}>
+          <HighlightText>{commentCount}천개</HighlightText>의 댓글
+        </Text>
+        <Text size={14} weight={600} color={colors.white_60}>
+          <HighlightText>{voteCount}명</HighlightText>이 선택했어요
+        </Text>
+      </CommentInfoContainer>
+      <Comment>
+        <Blur isVote={hasVoted}>
+          <UserProfileImage />
+          <Text size={15} weight={'regular'} color={colors.white}>
+            {topComment}
+          </Text>
+        </Blur>
+        {!hasVoted && <CommentButton>선택하고 댓글 보기</CommentButton>}
+      </Comment>
+    </CommentContainer>
+  );
+};
+
+export default CommentBox;
diff --git a/src/components/TopicCard/TopicCard.styles.tsx b/src/components/TopicCard/TopicCard.styles.tsx
index 5487135..55b14fe 100644
--- a/src/components/TopicCard/TopicCard.styles.tsx
+++ b/src/components/TopicCard/TopicCard.styles.tsx
@@ -82,93 +82,5 @@ export const SelectTextContainer = styled.div`
   align-items: center;
   justify-content: space-between;
   height: 25px;
-  margin: 4px 132px 0;
-`;
-
-export const CommentContainer = styled.div`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  padding: 41px 20px 0;
-`;
-
-export const CommentHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 22px;
-`;
-
-export const KeywordContainer = styled.div`
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  justify-content: flex-start;
-`;
-
-export const CommentInfoContainer = styled.div`
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  height: 40px;
-  padding: 0 16px;
-  margin-top: 11px;
-  background-color: #64519b;
-  border-radius: 10px 10px 0 0;
-`;
-
-export const Comment = styled.div`
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  height: 57px;
-  padding: 0 16px;
-  background-color: ${colors.navy2};
-  border-radius: 0 0 10px 10px;
-`;
-
-export const Blur = styled.div<{ isVote: boolean }>`
-  box-sizing: border-box;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  height: 29px;
-  background-color: transparent;
-  filter: ${(props) => (!props.isVote ? 'blur(2px)' : 'blur(0px)')};
-`;
-
-export const HighlightText = styled.span`
-  color: white;
-`;
-
-export const CommentButton = styled.button`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 140px;
-  height: 30px;
-  padding: 4px 14px;
-  font-size: 1.5rem;
-  font-weight: 700;
-  line-height: 0%;
-  color: ${colors.white};
-  text-align: center;
-  background-color: ${colors.purple};
-  border-radius: 91px;
-  transform: translate(-50%, -50%);
+  margin: 4px 0 0;
 `;
diff --git a/src/components/TopicCard/TopicCard.tsx b/src/components/TopicCard/TopicCard.tsx
index c18cbc8..a8f59d3 100644
--- a/src/components/TopicCard/TopicCard.tsx
+++ b/src/components/TopicCard/TopicCard.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router';
 
+import CommentBox from '@components/CommentBox/CommentBox';
 import Text from '@components/Text/Text';
 import Timer from '@components/Timer/Timer';
 
@@ -17,21 +18,14 @@ import {
   UserProfileImage,
   TopicCardContainer,
   SelectTextContainer,
-  CommentContainer,
-  CommentHeader,
-  KeywordContainer,
-  CommentInfoContainer,
-  Comment,
-  HighlightText,
-  Blur,
-  CommentButton,
 } from './TopicCard.styles';
 
 const TopicCard = () => {
+  const [hasVoted, setHasVoted] = useState(false);
+
   const profileName = '닉네임닉네임';
   const topic = '10년전 또는 후로 갈 수 있다면?';
   const endTime = new Date();
-  const [isVote, SetIsVote] = useState(false);
   endTime.setHours(endTime.getHours() + 4);
 
   const navigate = useNavigate();
@@ -61,39 +55,14 @@ const TopicCard = () => {
         </Text>
         <RightDoubleArrowIcon />
       </SelectTextContainer>
-      <CommentContainer>
-        <CommentHeader>
-          <KeywordContainer>
-            <Text size={13} weight={'regular'} color={colors.purple}>
-              A 사이드
-            </Text>
-            <Text size={14} weight={'regular'} color={colors.white_20}>
-              |
-            </Text>
-            <Text size={13} weight={'regular'} color={colors.white_60}>
-              대표키워드요
-            </Text>
-          </KeywordContainer>
-          <MeatballIcon />
-        </CommentHeader>
-        <CommentInfoContainer>
-          <Text size={14} weight={600} color={colors.white_60}>
-            <HighlightText>1천개</HighlightText>의 댓글
-          </Text>
-          <Text size={14} weight={600} color={colors.white_60}>
-            <HighlightText>1.2천명</HighlightText>이 선택했어요
-          </Text>
-        </CommentInfoContainer>
-        <Comment>
-          <Blur isVote={isVote}>
-            <UserProfileImage />
-            <Text size={15} weight={'regular'} color={colors.white}>
-              나는 10년 전 과거로 가서 주식...
-            </Text>
-          </Blur>
-          {!isVote && <CommentButton>선택하고 댓글 보기</CommentButton>}
-        </Comment>
-      </CommentContainer>
+      <CommentBox
+        hasVoted={hasVoted}
+        side={'A'}
+        keyword={'키워드'}
+        commentCount={0}
+        voteCount={0}
+        topComment={'top comment here!'}
+      />
     </TopicCardContainer>
   );
 };