refactor: 01.17 회의를 통한 변경

* TopicCardList 컴포넌트를 이전처럼 활용하도록 한다. 전체보기 및 즐겨찾기는 거의 동일한 형태이며 중복코드가 다량 발생하여 위와 같이 수정한다. * url을 넘겨받음에 따라서 리액트 쿼리 훅, API 요청 로직 또한 하나의 훅으로 재사용한다.
woowacourse-teams · Jan 17, 2024 · 645fbf2 · 645fbf2
1 parent f2fca6e
commit 645fbf2
Show file tree

Hide file tree

Showing 12 changed files with 142 additions and 273 deletions.
diff --git a/frontend/src/apiHooks/new/useGetAllTopics.ts b/frontend/src/apiHooks/new/useGetAllTopics.ts
diff --git a/frontend/src/apiHooks/new/useGetBestTopics.ts b/frontend/src/apiHooks/new/useGetBestTopics.ts
diff --git a/frontend/src/apiHooks/new/useGetBookmarks.ts b/frontend/src/apiHooks/new/useGetBookmarks.ts
diff --git a/frontend/src/apiHooks/new/useGetNewestTopics.ts b/frontend/src/apiHooks/new/useGetNewestTopics.ts
diff --git a/frontend/src/apiHooks/new/useGetTopics.ts b/frontend/src/apiHooks/new/useGetTopics.ts
@@ -0,0 +1,14 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getTopics } from '../../apis/new';
+
+const useGetTopics = (url: string) => {
+  const { data: topics, refetch } = useSuspenseQuery({
+    queryKey: ['topics', url],
+    queryFn: () => getTopics(url),
+  });
+
+  return { topics, refetch };
+};
+
+export default useGetTopics;
diff --git a/frontend/src/apis/new/index.ts b/frontend/src/apis/new/index.ts
@@ -1,12 +1,4 @@
 import { TopicCardProps } from '../../types/Topic';
 import { http } from './http';
 
-export const getBookmarks = () =>
-  http.get<TopicCardProps[]>('/members/my/bookmarks');
-
-export const getNewestTopics = () =>
-  http.get<TopicCardProps[]>('/topics/newest');
-
-export const getAllTopics = () => http.get<TopicCardProps[]>('/topics');
-
-export const getBestTopics = () => http.get<TopicCardProps[]>('/topics/bests');
+export const getTopics = (url: string) => http.get<TopicCardProps[]>(url);
diff --git a/frontend/src/components/Skeletons/TopicListSkeleton.tsx b/frontend/src/components/Skeletons/TopicListSkeleton.tsx
@@ -1,13 +1,12 @@
 import { styled } from 'styled-components';
 
-import Box from '../common/Box';
 import Space from '../common/Space';
 import SkeletonBox from './common/SkeletonBox';
 import TopicCardSkeleton from './TopicCardSkeleton';
 
 function TopicListSkeleton() {
   return (
-    <Wrapper>
+    <>
       <Space size={5} />
       <SkeletonBox width={160} height={32} />
       <Space size={4} />
@@ -27,20 +26,10 @@ function TopicListSkeleton() {
         <TopicCardSkeleton />
         <TopicCardSkeleton />
       </TopicCardWrapper>
-    </Wrapper>
+    </>
   );
 }
 
-const Wrapper = styled(Box)`
-  width: 1140px;
-  margin: 0 auto;
-  position: relative;
-
-  @media (max-width: 1180px) {
-    width: 100%;
-  }
-`;
-
 const TopicCardWrapper = styled.section`
   display: flex;
   flex-wrap: wrap;

diff --git a/frontend/src/components/TopicCardList/index.tsx b/frontend/src/components/TopicCardList/index.tsx
@@ -1,8 +1,6 @@
-import { Fragment, useEffect, useState } from 'react';
-import { styled } from 'styled-components';
+import { ReactNode } from 'react';
 
-import useGet from '../../apiHooks/useGet';
-import { TopicCardProps } from '../../types/Topic';
+import useGetTopics from '../../apiHooks/new/useGetTopics';
 import Button from '../common/Button';
 import Flex from '../common/Flex';
 import Grid from '../common/Grid';
@@ -12,20 +10,74 @@ import TopicCard from '../TopicCard';
 
 interface TopicCardListProps {
   url: string;
-  errorMessage: string;
   commentWhenEmpty: string;
-  pageCommentWhenEmpty: string;
+  routePageName: string;
   routePage: () => void;
-  children?: React.ReactNode;
+  svgElementWhenEmpty?: ReactNode;
 }
 
 function TopicCardList({
   url,
-  errorMessage,
   commentWhenEmpty,
-  pageCommentWhenEmpty,
+  routePageName,
   routePage,
-  children,
-}: TopicCardListProps) {}
+  svgElementWhenEmpty,
+}: TopicCardListProps) {
+  const { topics, refetch } = useGetTopics(url);
+
+  if (topics.length === 0) {
+    return (
+      <Flex height="240px" $flexDirection="column" $alignItems="center">
+        <Flex $alignItems="center">
+          {svgElementWhenEmpty}
+          <Space size={1} />
+          <Text color="black" $fontSize="default" $fontWeight="normal">
+            {commentWhenEmpty}
+          </Text>
+          <Space size={4} />
+        </Flex>
+        <Space size={5} />
+        <Button variant="primary" onClick={routePage}>
+          {routePageName}
+        </Button>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex $flexWrap="wrap" $gap="20px">
+      <Grid
+        rows="auto"
+        columns={5}
+        gap={20}
+        width="100%"
+        $mediaQueries={[
+          [1180, 4],
+          [900, 3],
+          [660, 2],
+          [320, 1],
+        ]}
+      >
+        {topics.map((topic) => (
+          <ul key={topic.id}>
+            <TopicCard
+              cardType="default"
+              id={topic.id}
+              image={topic.image}
+              name={topic.name}
+              creator={topic.creator}
+              updatedAt={topic.updatedAt}
+              pinCount={topic.pinCount}
+              bookmarkCount={topic.bookmarkCount}
+              isInAtlas={topic.isInAtlas}
+              isBookmarked={topic.isBookmarked}
+              getTopicsFromServer={refetch}
+            />
+          </ul>
+        ))}
+      </Grid>
+    </Flex>
+  );
+}
 
 export default TopicCardList;
diff --git a/frontend/src/pages/Bookmark.tsx b/frontend/src/pages/Bookmark.tsx
@@ -1,17 +1,14 @@
+import { Suspense } from 'react';
 import { styled } from 'styled-components';
 
-import useGetBookmarks from '../apiHooks/new/useGetBookmarks';
-import { getBookmarks } from '../apis/new';
 import FavoriteNotFilledSVG from '../assets/favoriteBtn_notFilled.svg';
 import Box from '../components/common/Box';
-import Button from '../components/common/Button';
 import Flex from '../components/common/Flex';
-import Grid from '../components/common/Grid';
 import Space from '../components/common/Space';
 import MediaSpace from '../components/common/Space/MediaSpace';
-import Text from '../components/common/Text';
 import MediaText from '../components/common/Text/MediaText';
-import TopicCard from '../components/TopicCard';
+import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
+import TopicCardList from '../components/TopicCardList';
 import { ARIA_FOCUS, FULLSCREEN } from '../constants';
 import useNavigator from '../hooks/useNavigator';
 import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
@@ -22,7 +19,6 @@ function Bookmark() {
   useSetNavbarHighlight('favorite');
 
   const { routingHandlers } = useNavigator();
-  const { bookmarks: topics } = useGetBookmarks();
 
   return (
     <Wrapper>
@@ -48,55 +44,16 @@ function Bookmark() {
 
       <MediaSpace size={6} />
 
-      {topics ? (
-        <Flex $flexWrap="wrap" $gap="20px">
-          <Grid
-            rows="auto"
-            columns={5}
-            gap={20}
-            width="100%"
-            $mediaQueries={[
-              [1180, 4],
-              [900, 3],
-              [660, 2],
-              [320, 1],
-            ]}
-          >
-            {topics.map((topic) => (
-              <ul key={topic.id}>
-                <TopicCard
-                  cardType="default"
-                  id={topic.id}
-                  image={topic.image}
-                  name={topic.name}
-                  creator={topic.creator}
-                  updatedAt={topic.updatedAt}
-                  pinCount={topic.pinCount}
-                  bookmarkCount={topic.bookmarkCount}
-                  isInAtlas={topic.isInAtlas}
-                  isBookmarked={topic.isBookmarked}
-                  getTopicsFromServer={getBookmarks}
-                />
-              </ul>
-            ))}
-          </Grid>
-        </Flex>
-      ) : (
-        <Flex height="240px" $flexDirection="column" $alignItems="center">
-          <Flex $alignItems="center">
-            <FavoriteNotFilledSVG />
-            <Space size={1} />
-            <Text color="black" $fontSize="default" $fontWeight="normal">
-              버튼으로 지도를 즐겨찾기에 담아보세요.
-            </Text>
-            <Space size={4} />
-          </Flex>
-          <Space size={5} />
-          <Button variant="primary" onClick={routingHandlers.home}>
-            메인페이지로 가기
-          </Button>
-        </Flex>
-      )}
+      <Suspense fallback={<TopicListSkeleton />}>
+        <TopicCardList
+          url="/members/my/bookmarks"
+          commentWhenEmpty="버튼으로 지도를 즐겨찾기에 담아보세요."
+          routePageName="메인 페이지로 가기"
+          routePage={routingHandlers.home}
+          svgElementWhenEmpty={<FavoriteNotFilledSVG />}
+        />
+      </Suspense>
+
       <Space size={8} />
     </Wrapper>
   );

diff --git a/frontend/src/pages/SeeAllAllTopics.tsx b/frontend/src/pages/SeeAllAllTopics.tsx
@@ -1,23 +1,22 @@
+import { Suspense } from 'react';
 import { styled } from 'styled-components';
 
-import useGetAllTopics from '../apiHooks/new/useGetAllTopics';
-import { getAllTopics } from '../apis/new';
 import Box from '../components/common/Box';
-import Flex from '../components/common/Flex';
-import Grid from '../components/common/Grid';
 import Space from '../components/common/Space';
 import MediaSpace from '../components/common/Space/MediaSpace';
 import MediaText from '../components/common/Text/MediaText';
-import TopicCard from '../components/TopicCard';
+import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
+import TopicCardList from '../components/TopicCardList';
 import { ARIA_FOCUS, FULLSCREEN } from '../constants';
+import useNavigator from '../hooks/useNavigator';
 import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
 import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
 
 function SeeAllAllTopics() {
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('home');
 
-  const { allTopics: topics } = useGetAllTopics();
+  const { routingHandlers } = useNavigator();
 
   return (
     <Wrapper>
@@ -35,40 +34,15 @@ function SeeAllAllTopics() {
 
       <MediaSpace size={6} />
 
-      {topics && (
-        <Flex as="section" $flexWrap="wrap" $gap="20px">
-          <Grid
-            rows="auto"
-            columns={5}
-            gap={20}
-            width="100%"
-            $mediaQueries={[
-              [1180, 4],
-              [900, 3],
-              [660, 2],
-              [320, 1],
-            ]}
-          >
-            {topics.map((topic) => (
-              <ul key={topic.id}>
-                <TopicCard
-                  cardType="default"
-                  id={topic.id}
-                  image={topic.image}
-                  name={topic.name}
-                  creator={topic.creator}
-                  updatedAt={topic.updatedAt}
-                  pinCount={topic.pinCount}
-                  bookmarkCount={topic.bookmarkCount}
-                  isInAtlas={topic.isInAtlas}
-                  isBookmarked={topic.isBookmarked}
-                  getTopicsFromServer={getAllTopics}
-                />
-              </ul>
-            ))}
-          </Grid>
-        </Flex>
-      )}
+      <Suspense fallback={<TopicListSkeleton />}>
+        <TopicCardList
+          url="/topics"
+          commentWhenEmpty="생성된 지도가 없습니다. 지도를 만들어보세요."
+          routePageName="지도 만들러 가기"
+          routePage={routingHandlers.newTopic}
+        />
+      </Suspense>
+
       <Space size={8} />
     </Wrapper>
   );