refactor(topic-card): separate header from comment box

src/components/Home/CommentBox/CommentBox.styles.tsx

@@ -9,7 +9,6 @@ export const CommentContainer = styled.div`
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  padding: 41px 20px 0;
 `;
 
 export const CommentHeader = styled.div`

src/components/Home/CommentBox/CommentBox.tsx

@@ -1,23 +1,14 @@
 import { formatToKoreanNumber } from '@toss/utils';
 import React from 'react';
 
-import useReportTopic from '@apis/topic/useReportTopic';
-import { Col } from '@components/commons/Flex/Flex';
-import ActionModalButton from '@components/commons/Modal/ActionModalButton';
 import Text from '@components/commons/Text/Text';
 import { UserProfileImage } from '@components/Home/TopicCard/TopicCard.styles';
-import useModal from '@hooks/useModal/useModal';
 import { LatestComment } from '@interfaces/api/comment';
-import { TopicResponse } from '@interfaces/api/topic';
 
 import { colors } from '@styles/theme';
 
-import { HideIcon, MeatballIcon, RefreshIcon, ReportIcon } from '@icons/index';
-
 import {
   CommentContainer,
-  CommentHeader,
-  KeywordContainer,
   CommentInfoContainer,
   Comment,
   HighlightText,
@@ -28,66 +19,21 @@ import {
 
 interface CommentBoxProps {
   onClick: () => void;
-  topicId: number;
   hasVoted: boolean;
-  side: TopicResponse['topicSide'];
-  keyword: TopicResponse['keyword'];
   commentCount: number;
   voteCount: number;
   latestComment: LatestComment | undefined;
 }
 
 const CommentBox = ({
   onClick,
-  topicId,
-  side,
-  keyword,
   commentCount,
   voteCount,
   latestComment,
   hasVoted,
 }: CommentBoxProps) => {
-  const { Modal, toggleModal } = useModal('action');
-  const reportMutation = useReportTopic(topicId);
-
-  const handleOnClickCommentMenu = () => {
-    toggleModal();
-  };
-
-  const handleHideTopic = () => {};
-
-  const handleReportTopic = () => {
-    reportMutation.mutate();
-    toggleModal();
-  };
-
-  const handleRevoteTopic = () => {
-    throw new Error('투표 다시하기 기능을 사용할 수 없습니다.');
-  };
-
   return (
     <CommentContainer>
-      <CommentHeader>
-        <KeywordContainer>
-          <Text size={13} weight={'regular'} color={colors.purple}>
-            {side === 'TOPIC_A' ? 'A' : 'B'} 사이드
-          </Text>
-          {keyword && (
-            <>
-              {' '}
-              <Text size={14} weight={'regular'} color={colors.white_20}>
-                |
-              </Text>
-              <Text size={13} weight={'regular'} color={colors.white_60}>
-                {keyword.keywordName}
-              </Text>
-            </>
-          )}
-        </KeywordContainer>
-        <button onClick={handleOnClickCommentMenu}>
-          <MeatballIcon fill={colors.white_60} />
-        </button>
-      </CommentHeader>
       <CommnetBodyContainer onClick={onClick}>
         <CommentInfoContainer>
           <Text size={14} weight={600} color={colors.white_60}>
@@ -107,25 +53,6 @@ const CommentBox = ({
           {!hasVoted && <CommentButton>선택하고 댓글 보기</CommentButton>}
         </Comment>
       </CommnetBodyContainer>
-      <Modal>
-        <Col padding={'36px 24px'} gap={20}>
-          <ActionModalButton
-            handleClick={handleHideTopic}
-            Icon={() => <HideIcon />}
-            label={'이런 토픽은 안볼래요'}
-          />
-          <ActionModalButton
-            handleClick={handleReportTopic}
-            Icon={() => <ReportIcon />}
-            label={'신고하기'}
-          />
-          <ActionModalButton
-            handleClick={handleRevoteTopic}
-            Icon={() => <RefreshIcon />}
-            label={'투표 다시 하기'}
-          />
-        </Col>
-      </Modal>
     </CommentContainer>
   );
 };

src/components/Home/TopicCard/TopicCard.styles.tsx

@@ -9,7 +9,6 @@ export const TopicCardContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 100px;
   overflow: hidden;
 `;
 
@@ -91,3 +90,9 @@ export const SelectTextContainer = styled.div<{ $voted: boolean }>`
   margin: 4px 0 0;
   visibility: ${(props) => (props.$voted ? 'hidden' : 'visible')};
 `;
+
+export const TopicFooter = styled.div`
+  box-sizing: border-box;
+  width: 100%;
+  padding: 50px 20px 0;
+`;

src/components/Home/TopicCard/TopicCard.tsx

@@ -3,7 +3,10 @@ import { useSearchParams } from 'react-router-dom';
 import { useSwiperSlide } from 'swiper/react';
 
 import { useLatestComment } from '@apis/comment/useComment';
+import useReportTopic from '@apis/topic/useReportTopic';
 import useVoteTopic from '@apis/topic/useVoteTopic';
+import { Col, Row } from '@components/commons/Flex/Flex';
+import ActionModalButton from '@components/commons/Modal/ActionModalButton';
 import ProfileImg from '@components/commons/ProfileImg/ProfileImg';
 import Text from '@components/commons/Text/Text';
 import { Toast } from '@components/commons/Toast/Toast';
@@ -12,14 +15,22 @@ 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 useModal from '@hooks/useModal/useModal';
 import { LatestComment } from '@interfaces/api/comment';
 import { Choice, TopicResponse } from '@interfaces/api/topic';
 
 import { useAuthStore } from '@store/auth';
 
 import { colors } from '@styles/theme';
 
-import { LeftDoubleArrowIcon, RightDoubleArrowIcon } from '@icons/index';
+import {
+  HideIcon,
+  LeftDoubleArrowIcon,
+  MeatballIcon,
+  RefreshIcon,
+  ReportIcon,
+  RightDoubleArrowIcon,
+} from '@icons/index';
 
 import { ResponseError } from '@apis/fetch';
 
@@ -32,6 +43,7 @@ import {
   UserInfoContainer,
   TopicCardContainer,
   SelectTextContainer,
+  TopicFooter,
 } from './TopicCard.styles';
 
 interface TopicCardProps {
@@ -51,6 +63,8 @@ const TopicCard = ({ topic }: TopicCardProps) => {
     topic.selectedOption !== null || isMyTopic
   );
   const [latestComment, setLatestComment] = useState<LatestComment | undefined>();
+  const { Modal, toggleModal } = useModal('action');
+  const reportMutation = useReportTopic(topic.topicId);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -69,12 +83,27 @@ const TopicCard = ({ topic }: TopicCardProps) => {
     }
   }, [isSuccess]);
 
+  const handleHideTopic = () => {};
+
+  const handleReportTopic = () => {
+    reportMutation.mutate();
+    toggleModal();
+  };
+
+  const handleRevoteTopic = () => {
+    throw new Error('투표 다시하기 기능을 사용할 수 없습니다.');
+  };
+
   const handleOnClickCommentBox = () => {
     if (isMyTopic || topic.selectedOption !== null) {
       toggleSheet();
     }
   };
 
+  const handleOnClickCommentMenu = () => {
+    toggleModal();
+  };
+
   const handleOnVote = async (choiceOption: Choice['choiceOption']) => {
     try {
       const data = await voteMutation.mutateAsync({
@@ -140,20 +169,58 @@ const TopicCard = ({ topic }: TopicCardProps) => {
           </Text>
           <RightDoubleArrowIcon />
         </SelectTextContainer>
-        <CommentBox
-          side={topic.topicSide}
-          hasVoted={topic.selectedOption !== null || isMyTopic}
-          topicId={topic.topicId}
-          commentCount={topic.commentCount}
-          voteCount={topic.voteCount}
-          keyword={topic.keyword}
-          latestComment={latestComment}
-          onClick={handleOnClickCommentBox}
-        />
+        <TopicFooter>
+          <Row>
+            <Row gap={6}>
+              <Text size={13} weight={'regular'} color={colors.purple}>
+                {topic.topicSide === 'TOPIC_A' ? 'A' : 'B'} 사이드
+              </Text>
+              {topic.keyword && (
+                <>
+                  <Text size={14} weight={'regular'} color={colors.white_20}>
+                    |
+                  </Text>
+                  <Text size={13} weight={'regular'} color={colors.white_60}>
+                    {topic.keyword.keywordName}
+                  </Text>
+                </>
+              )}
+            </Row>
+            <button onClick={handleOnClickCommentMenu}>
+              <MeatballIcon fill={colors.white_60} />
+            </button>
+          </Row>
+          <CommentBox
+            hasVoted={topic.selectedOption !== null || isMyTopic}
+            commentCount={topic.commentCount}
+            voteCount={topic.voteCount}
+            latestComment={latestComment}
+            onClick={handleOnClickCommentBox}
+          />
+        </TopicFooter>
       </TopicCardContainer>
       <CommentSheet>
         <TopicComments topic={topic} />
       </CommentSheet>
+      <Modal>
+        <Col padding={'36px 24px'} gap={20}>
+          <ActionModalButton
+            handleClick={handleHideTopic}
+            Icon={() => <HideIcon />}
+            label={'이런 토픽은 안볼래요'}
+          />
+          <ActionModalButton
+            handleClick={handleReportTopic}
+            Icon={() => <ReportIcon />}
+            label={'신고하기'}
+          />
+          <ActionModalButton
+            handleClick={handleRevoteTopic}
+            Icon={() => <RefreshIcon />}
+            label={'투표 다시 하기'}
+          />
+        </Col>
+      </Modal>
     </React.Fragment>
   );
 };