A 사이드 토픽 카드 텍스트 영역 및 소수점 이슈 해결

src/components/A/ATopicCard.tsx

@@ -14,47 +14,50 @@ import { colors } from '@styles/theme';
 
 import { getDateDiff } from '@utils/date';
 
-interface AlphaTopicCardProps extends TopicResponse {
-  chip?: 'popular' | 'close';
+interface AlphaTopicCardProps {
+  topic: TopicResponse;
   onVote: (topicId: number, side: 'CHOICE_A' | 'CHOICE_B') => void;
+  chip?: 'popular' | 'close';
 }
 
-const AlphaTopicCard = React.memo((props: AlphaTopicCardProps) => {
+const AlphaTopicCard = React.memo(({ topic, onVote, chip }: AlphaTopicCardProps) => {
   const { BottomSheet: CommentSheet, toggleSheet } = useBottomSheet({});
-  const [A, B] = props.choices;
+  const [A, B] = topic.choices;
+  const roundedPercentageA = Math.round((A.voteCount / topic.voteCount) * 100);
+  const roundedPercentageB = 100 - roundedPercentageA;
 
   const handleCommentChipClick = () => {
     toggleSheet();
   };
 
   const handleVote = (side: 'CHOICE_A' | 'CHOICE_B') => {
-    props.onVote(props.topicId, side);
+    onVote(topic.topicId, side);
   };
 
   return (
     <>
       <Col padding={'20px'}>
-        {props.chip && (
+        {chip && (
           <Row style={{ marginBottom: 12 }}>
             <Chip tintColor={'#D3FF9C'} label={'실시간 인기 토픽'} />
           </Row>
         )}
         <Row justifyContent={'space-between'} style={{ marginBottom: 14 }}>
           <Text size={18} weight={500} color={colors.white}>
-            {props.topicTitle}
+            {topic.topicTitle}
           </Text>
           <button> - </button>
         </Row>
         <Col gap={5} style={{ marginBottom: 14 }}>
           <ProgressBar
-            revealed={props.selectedOption !== null}
-            highlighted={props.selectedOption === 'CHOICE_A'}
+            revealed={topic.selectedOption !== null}
+            highlighted={topic.selectedOption === 'CHOICE_A'}
             title={A.content.text || ''}
-            percentage={(A.voteCount / props.voteCount) * 100}
+            percentage={roundedPercentageA}
             onClick={() => handleVote('CHOICE_A')}
             left={() => (
               <Text
-                color={props.selectedOption === 'CHOICE_A' ? colors.A_80 : colors.A_40}
+                color={topic.selectedOption === 'CHOICE_A' ? colors.A_80 : colors.A_40}
                 size={24}
                 weight={900}
               >
@@ -63,14 +66,14 @@ const AlphaTopicCard = React.memo((props: AlphaTopicCardProps) => {
             )}
           />
           <ProgressBar
-            revealed={props.selectedOption !== null}
-            highlighted={props.selectedOption === 'CHOICE_B'}
+            revealed={topic.selectedOption !== null}
+            highlighted={topic.selectedOption === 'CHOICE_B'}
             title={B.content.text || ''}
-            percentage={(B.voteCount / props.voteCount) * 100}
+            percentage={roundedPercentageB}
             onClick={() => handleVote('CHOICE_B')}
             left={() => (
               <Text
-                color={props.selectedOption === 'CHOICE_B' ? colors.B_80 : colors.B_40}
+                color={topic.selectedOption === 'CHOICE_B' ? colors.B_80 : colors.B_40}
                 size={24}
                 weight={900}
               >
@@ -81,13 +84,13 @@ const AlphaTopicCard = React.memo((props: AlphaTopicCardProps) => {
         </Col>
         <Row justifyContent={'space-between'} alignItems={'center'}>
           <Text size={13} color={colors.white_40}>
-            {getDateDiff(props.createdAt)} 전
+            {getDateDiff(topic.createdAt)} 전
           </Text>
-          <CommentChip count={props.commentCount} onClick={handleCommentChipClick} />
+          <CommentChip count={topic.commentCount} onClick={handleCommentChipClick} />
         </Row>
       </Col>
       <CommentSheet>
-        <TopicComments topic={props} />
+        <TopicComments topic={topic} />
       </CommentSheet>
     </>
   );

src/components/commons/ProgressBar/ProgressBar.tsx

@@ -34,9 +34,9 @@ const ProgressBar = ({
         style={{ zIndex: 20, width: 'unset' }}
       >
         {left && left()}
-        <Text size={14} weight={textWeight} color={textColor}>
+        <Content size={14} weight={textWeight} color={textColor}>
           {title}
-        </Text>
+        </Content>
       </Row>
       {revealed && (
         <>
@@ -76,3 +76,12 @@ const PercentageBar = styled.div<{ percentage: number; highlighted: boolean }>`
   transition: 0.2s;
   transition-timing-function: ease-in-out;
 `;
+
+const Content = styled(Text)`
+  display: -webkit-box;
+  height: 100%;
+  overflow: hidden;
+  word-wrap: break-word;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+`;

src/routes/A/ATopics.tsx

@@ -6,12 +6,15 @@ import ATopicCard from '@components/A/ATopicCard';
 import { Col, Row } from '@components/commons/Flex/Flex';
 import Layout from '@components/commons/Layout/Layout';
 import Text from '@components/commons/Text/Text';
+import { Toast } from '@components/commons/Toast/Toast';
 import ToggleSwitch from '@components/commons/ToggleSwitch/ToggleSwitch';
 
 import { colors } from '@styles/theme';
 
 import { ALogoIcon, UpDownChevronIcon } from '@icons/index';
 
+import { ResponseError } from '@apis/fetch';
+
 import { Container } from './ATopics.styles';
 
 const ATopics = () => {
@@ -27,12 +30,18 @@ const ATopics = () => {
     setTopicFilter(e.target.value);
   };
 
-  const handleVote = (topicId: number, side: 'CHOICE_A' | 'CHOICE_B') => {
-    voteMutation.mutate({
-      topicId: topicId,
-      choiceOption: side,
-      votedAt: new Date().getTime() / 1000,
-    });
+  const handleVote = async (topicId: number, side: 'CHOICE_A' | 'CHOICE_B') => {
+    try {
+      await voteMutation.mutateAsync({
+        topicId: topicId,
+        choiceOption: side,
+        votedAt: new Date().getTime() / 1000,
+      });
+    } catch (error) {
+      if (error instanceof ResponseError && error.errorData.abCode === 'VOTED_BY_AUTHOR') {
+        Toast.error('토픽을 작성한 사람은 투표할 수 없어요');
+      }
+    }
   };
 
   return (
@@ -83,24 +92,7 @@ const ATopics = () => {
         </Row>
         <Col style={{ backgroundColor: 'inherit', paddingBottom: 100 }}>
           {topics?.map((topic) => {
-            return (
-              <ATopicCard
-                key={topic.topicId}
-                topicId={topic.topicId}
-                topicSide={'TOPIC_A'}
-                topicTitle={topic.topicTitle}
-                deadline={topic.deadline}
-                voteCount={topic.voteCount}
-                topicContent={topic.topicContent}
-                keyword={topic.keyword}
-                choices={topic.choices}
-                author={topic.author}
-                selectedOption={topic.selectedOption}
-                commentCount={topic.commentCount}
-                createdAt={topic.createdAt}
-                onVote={handleVote}
-              />
-            );
+            return <ATopicCard key={topic.topicId} topic={topic} onVote={handleVote} />;
           })}
         </Col>
       </Container>