fix: TopicCard nullable한 필드 예외처리 추가

src/apis/topic/useTopics.ts

@@ -14,7 +14,7 @@ import client from '@apis/fetch';
 export const TOPIC_KEY = 'topics';
 
 const getTopics = () => {
-  return client.get<PagingDataResponse<TopicResponse>>('/topics/info/voting?size=100');
+  return client.get<PagingDataResponse<TopicResponse>>('/topics/info?size=100');
 };
 
 const useTopics = () => {

src/components/Home/CommentBox/CommentBox.tsx

@@ -6,6 +6,7 @@ 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';
 
@@ -27,8 +28,8 @@ interface CommentBoxProps {
   onClick: () => void;
   topicId: number;
   hasVoted: boolean;
-  side: 'A' | 'B';
-  keyword: string;
+  side: TopicResponse['topicSide'];
+  keyword: TopicResponse['keyword'];
   commentCount: number;
   voteCount: number;
   latestComment: LatestComment | undefined;
@@ -65,14 +66,19 @@ const CommentBox = ({
       <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}
+            {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} />

src/components/Home/TopicCard/TopicCard.tsx

@@ -127,7 +127,7 @@ const TopicCard = ({ topic }: TopicCardProps) => {
             choices={topic.choices.length > 0 ? topic.choices : choices}
           />
         )}
-        <Timer endTime={topic.deadline} />
+        {topic.deadline && <Timer endTime={topic.deadline} />}
         <SelectTextContainer $voted={topic.selectedOption !== null}>
           <LeftDoubleArrowIcon />
           <Text size={14} weight={'regular'} color={colors.white_40}>
@@ -136,12 +136,12 @@ const TopicCard = ({ topic }: TopicCardProps) => {
           <RightDoubleArrowIcon />
         </SelectTextContainer>
         <CommentBox
-          side={topic.keyword.topicSide === 'TOPIC_A' ? 'A' : 'B'}
+          side={topic.topicSide}
           hasVoted={topic.selectedOption !== null}
           topicId={topic.topicId}
           commentCount={0}
           voteCount={0}
-          keyword={'키워드'}
+          keyword={topic.keyword}
           latestComment={latestComment}
           onClick={handleOnClickCommentBox}
         />

src/interfaces/api/topic.ts

@@ -5,12 +5,12 @@ export const CHOICE_OPTIONS = {
 
 interface TopicResponse {
   topicId: number;
-  topicSide: string;
+  topicSide: 'TOPIC_A' | 'TOPIC_B';
   topicTitle: string;
-  deadline: number; // 1702914494
+  deadline: number | null; // 1702914494
   voteCount: number;
-  topicContent: string; // TBD
-  keyword: Keyword;
+  topicContent: string | null;
+  keyword: Keyword | null;
   choices: Choice[];
   author: Author;
   selectedOption: typeof CHOICE_OPTIONS.CHOICE_A | typeof CHOICE_OPTIONS.CHOICE_B | null;

src/routes/A/AlphaTopics.tsx

@@ -71,7 +71,7 @@ const AlphaTopics = () => {
           <AlphaTopicCard
             chip="popular"
             topicId={241}
-            topicSide={'A'}
+            topicSide={'TOPIC_A'}
             topicTitle={'topicTitle'}
             deadline={0}
             voteCount={42}