디자인 불일치 대거 수정 (#229)

* feat: add comment box

* fix: comment chip icon

* fix: remove meatball button from a/b topic card

* chore: add @toss/utils

* feat: add formatToKoreanNumber

* fix: RadioInput visibility

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

* refactor(comment-box): replace comment preview api

* fix(topic-swiper): useSwiperSlide not working

* fix(home): get b side topic only

* feat: add width prop to Flex

* feat: add isBig prop to commentBox

* feat: add ellipsis prop to Text

* feat: show CTA if comments empty

* fix: add key prop to SwiperSlide

* fix: add exception handling for comments by topic creator

package.json

@@ -17,6 +17,7 @@
     "@sentry/react": "^7.101.0",
     "@tanstack/react-query": "^5.4.3",
     "@toss/date": "^1.1.8",
+    "@toss/utils": "^1.4.6",
     "@types/styled-components": "^5.1.28",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",

src/apis/comment/useComment.ts

@@ -6,7 +6,7 @@ import {
   useQueryClient,
 } from '@tanstack/react-query';
 
-import { CommentReaction, CommentResponse } from '@interfaces/api/comment';
+import { CommentReaction, CommentResponse, LatestComment } from '@interfaces/api/comment';
 
 import { PagingDataResponse } from '@interfaces/api';
 
@@ -20,6 +20,10 @@ const getComments = ({ topicId, page, size }: { topicId: number; page: number; s
   );
 };
 
+const getCommentPreview = (topicId: number) => {
+  return client.get<LatestComment>(`/topics/${topicId}/comment`);
+};
+
 const createComments = ({ topicId, content }: { topicId: number; content: string }) => {
   return client.post<CommentResponse>({
     path: `/comments`,
@@ -47,10 +51,10 @@ const useComments = (topicId: number) => {
   });
 };
 
-const useLatestComment = (topicId: number, enabled: boolean) => {
+const usePreviewComment = (topicId: number, enabled: boolean) => {
   return useQuery({
     queryKey: [COMMENT_KEY, 'latest', topicId],
-    queryFn: () => getComments({ topicId: topicId, page: 0, size: 1 }),
+    queryFn: () => getCommentPreview(topicId),
     enabled: enabled,
   });
 };
@@ -96,4 +100,4 @@ const useReactComment = (topicId: number, commentId: number) => {
   });
 };
 
-export { COMMENT_KEY, useComments, useCreateComment, useReactComment, useLatestComment };
+export { COMMENT_KEY, useComments, useCreateComment, useReactComment, usePreviewComment };

src/assets/icons/index.ts

@@ -15,6 +15,7 @@ import CameraIcon from './camera.svg?react';
 import CheckIcon from './check.svg?react';
 import ClockIcon from './clock.svg?react';
 import CloseIcon from './close.svg?react';
+import CommentBoxIcon from './comment-box.svg?react';
 import CommentIcon from './comment.svg?react';
 import DefaultProfileIcon from './default-profile.svg?react';
 import DeleteIcon from './delete.svg?react';
@@ -60,6 +61,7 @@ export {
   ClockIcon,
   CloseIcon,
   CommentIcon,
+  CommentBoxIcon,
   DefaultProfileIcon,
   DownChevronIcon,
   GoogleIcon,

src/components/A/ATopicCard.tsx

@@ -12,6 +12,8 @@ import { TopicResponse } from '@interfaces/api/topic';
 
 import { colors } from '@styles/theme';
 
+import { MeatballIcon } from '@icons/index';
+
 import { getDateDiff } from '@utils/date';
 
 interface AlphaTopicCardProps {
@@ -34,6 +36,8 @@ const AlphaTopicCard = React.memo(({ topic, onVote, chip }: AlphaTopicCardProps)
     onVote(topic.topicId, side);
   };
 
+  const handleOptionClick = () => {};
+
   return (
     <>
       <Col padding={'20px'}>
@@ -46,7 +50,10 @@ const AlphaTopicCard = React.memo(({ topic, onVote, chip }: AlphaTopicCardProps)
           <Text size={18} weight={500} color={colors.white}>
             {topic.topicTitle}
           </Text>
-          <button> - </button>
+          {/* TBD: 1차 스펙 아웃 */}
+          {/* <button onClick={handleOptionClick}>
+            <MeatballIcon fill={colors.white_60} />
+          </button> */}
         </Row>
         <Col gap={5} style={{ marginBottom: 14 }}>
           <ProgressBar

src/components/B/BTopicCard.tsx

@@ -8,6 +8,8 @@ import { TopicResponse } from '@interfaces/api/topic';
 
 import { colors } from '@styles/theme';
 
+import { MeatballIcon } from '@icons/index';
+
 import { getDateDiff } from '@utils/date';
 
 import { CardContainer, CardFooter } from './BTopicCard.styles';
@@ -24,6 +26,8 @@ const BTopicCard = ({ topic }: BTopicCardProps) => {
     navigate(`/topics/b/${topic.topicId}`, { state: { topic } });
   };
 
+  const handleOptionClick = () => {};
+
   return (
     <>
       <CardContainer onClick={handleCardClick}>
@@ -57,7 +61,10 @@ const BTopicCard = ({ topic }: BTopicCardProps) => {
             <Text size={18} weight={600} color={colors.white}>
               {topic.topicTitle}
             </Text>
-            <button>-</button>
+            {/* TBD: 1차 스펙 아웃 */}
+            {/* <button onClick={handleOptionClick}>
+              <MeatballIcon fill={colors.white_60} />
+            </button> */}
           </Row>
           <Row gap={5}>
             <BTopicChoice

src/components/Home/Comment/Comment.tsx

@@ -83,10 +83,18 @@ const Comment = React.memo(({ comment, choices }: CommentProps) => {
               </Row>
               <Text
                 size={14}
-                color={comment.writersVotedOption === 'CHOICE_A' ? colors.A_60 : colors.B_60}
+                color={
+                  comment.writersVotedOption
+                    ? comment.writersVotedOption === 'CHOICE_A'
+                      ? colors.A_60
+                      : colors.B_60
+                    : colors.purple
+                }
                 weight={600}
               >
-                {choices[comment.writersVotedOption === 'CHOICE_A' ? 0 : 1].content.text}
+                {comment.writersVotedOption
+                  ? choices[comment.writersVotedOption === 'CHOICE_A' ? 0 : 1].content.text
+                  : '작성자'}
               </Text>
             </Col>
           </Row>

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

@@ -9,22 +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`
-  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 CommnetBodyContainer = styled.div`
@@ -41,8 +25,7 @@ export const CommentInfoContainer = styled.div`
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  height: 40px;
-  padding: 0 16px;
+  padding: 10px 16px;
   margin-top: 11px;
   background-color: #64519b;
   border-radius: 10px 10px 0 0;
@@ -54,46 +37,36 @@ export const Comment = styled.div`
   display: flex;
   gap: 10px;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   width: 100%;
-  height: 57px;
-  padding: 0 16px;
   background-color: ${colors.navy2};
   border-radius: 0 0 10px 10px;
 `;
 
 export const Blur = styled('div')<{ $voted: 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.$voted ? 'blur(2px)' : 'blur(0px)')};
+  filter: ${(props) => (!props.$voted ? 'blur(2px)' : 'unset')};
 `;
 
 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;
+  margin: 14px 0;
   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%);
 `;