refactor : Refactor TopicCard and TopicCardContainer components

eliminate useState,useEffect in TopicCardContainer
woowacourse-teams · Jan 14, 2024 · 7036e7e · 7036e7e
1 parent fed8719
commit 7036e7e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 22 deletions.
diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx
@@ -1,4 +1,5 @@
-import { SyntheticEvent, useContext, useState } from 'react';
+import { QueryObserverResult, RefetchOptions } from '@tanstack/react-query';
+import { useContext, useState } from 'react';
 import { styled } from 'styled-components';
 
 import SeeTogetherSVG from '../../assets/seeTogetherBtn_filled.svg';
@@ -26,7 +27,9 @@ interface OnClickDesignatedProps {
 interface TopicCardExtendedProps extends TopicCardProps {
   cardType: 'default' | 'modal';
   onClickDesignated?: ({ topicId, topicName }: OnClickDesignatedProps) => void;
-  getTopicsFromServer?: () => void;
+  getTopicsFromServer?: (
+    options?: RefetchOptions | undefined,
+  ) => Promise<QueryObserverResult<TopicCardProps[], Error>>;
 }
 
 function TopicCard({
@@ -39,7 +42,6 @@ function TopicCard({
   pinCount,
   bookmarkCount,
   isInAtlas,
-  isBookmarked,
   onClickDesignated,
   getTopicsFromServer,
 }: TopicCardExtendedProps) {

diff --git a/frontend/src/components/TopicCardContainer/index.tsx b/frontend/src/components/TopicCardContainer/index.tsx
@@ -1,11 +1,8 @@
 import { Swiper, Tab } from 'map-befine-swiper';
-import { useEffect, useState } from 'react';
 import { styled } from 'styled-components';
 
-import useGet from '../../apiHooks/useGet';
 import useTopicsQuery from '../../hooks/api/useTopicsQuery';
 import useKeyDown from '../../hooks/useKeyDown';
-import { TopicCardProps } from '../../types/Topic';
 import Box from '../common/Box';
 import Flex from '../common/Flex';
 import Space from '../common/Space';
@@ -26,20 +23,8 @@ function TopicCardContainer({
   containerDescription,
   routeWhenSeeAll,
 }: TopicCardContainerProps) {
-  const [_, setTopics] = useState<TopicCardProps[] | null>(null);
+  const { topics, refetchTopics } = useTopicsQuery(url);
   const { elementRef, onElementKeyDown } = useKeyDown<HTMLSpanElement>();
-  const { fetchGet } = useGet();
-
-  const setTopicsFromServer = async () => {
-    await fetchGet<TopicCardProps[]>(
-      url,
-      '지도를 가져오는데 실패했습니다. 잠시 후 다시 시도해주세요.',
-      (response) => {
-        setTopics(response);
-      },
-    );
-  };
-  const { topics } = useTopicsQuery(url);
 
   return (
     <section>
@@ -110,7 +95,7 @@ function TopicCardContainer({
                       bookmarkCount={topic.bookmarkCount}
                       isInAtlas={topic.isInAtlas}
                       isBookmarked={topic.isBookmarked}
-                      getTopicsFromServer={setTopicsFromServer}
+                      getTopicsFromServer={refetchTopics}
                     />
                     <CustomSpace />
                   </Flex>

diff --git a/frontend/src/hooks/api/useTopicsQuery.ts b/frontend/src/hooks/api/useTopicsQuery.ts
@@ -3,11 +3,11 @@ import { useQuery } from '@tanstack/react-query';
 import { getTopics } from '../../api';
 
 const useTopicsQuery = (url: string) => {
-  const { data: topics } = useQuery({
+  const { data: topics, refetch: refetchTopics } = useQuery({
     queryKey: ['topics', url],
     queryFn: () => getTopics(url),
   });
-  return { topics };
+  return { topics, refetchTopics };
 };
 
 export default useTopicsQuery;