Merge pull request #132 from team-offonoff/hotfix/delete-topic

fix: 투표 취소 에러 대응

src/App.tsx

@@ -1,14 +1,25 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheetManager, ThemeProvider } from 'styled-components';
 
 import GlobalStyle from '@styles/global';
 import { theme } from '@styles/theme';
 
+import client from '@apis/fetch';
+
 import Router from './routes';
 
 const App = () => {
   const queryClient = new QueryClient();
+  const isDev = import.meta.env.DEV;
+
+  useEffect(() => {
+    if (isDev) {
+      [...Array.from({ length: 20 }, (_, i) => i + 1)].map((topicId) => {
+        client.delete(`topics/${topicId}/vote`);
+      });
+    }
+  }, []);
 
   return (
     <StyleSheetManager shouldForwardProp={() => true}>

src/apis/comment/useComment.ts

@@ -48,10 +48,11 @@ const useComments = (topicId: number, enabled: boolean) => {
   });
 };
 
-const useLatestComment = (topicId: number) => {
+const useLatestComment = (topicId: number, enabled: boolean) => {
   return useQuery({
     queryKey: [COMMENT_KEY, 'latest', topicId],
     queryFn: () => getComments({ topicId: topicId, page: 0, size: 1 }),
+    enabled: enabled,
   });
 };
 

src/apis/fetch.ts

@@ -61,6 +61,18 @@ class Fetch {
     return data as TData;
   }
 
+  async delete<T>(path: string): Promise<T> {
+    const response = await fetch(`${this.baseURL}${path}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(this.accessToken && { Authorization: `Bearer ${this.accessToken}` }),
+      },
+    });
+    const data: T = await response.json();
+    return data;
+  }
+
   setAccessToken(token: string) {
     this.accessToken = token;
   }

src/components/Home/TopicCard/TopicCard.tsx

@@ -55,7 +55,10 @@ const TopicCard = ({ topic }: TopicCardProps) => {
 
   const { BottomSheet: CommentSheet, toggleSheet } = useBottomSheet({});
   const voteMutation = useVoteTopic();
-  const { data: latestCommentData, isSuccess } = useLatestComment(topic.topicId);
+  const { data: latestCommentData, isSuccess } = useLatestComment(
+    topic.topicId,
+    topic.selectedOption !== null
+  );
   const [latestComment, setLatestComment] = useState<LatestComment | undefined>();
 
   useEffect(() => {