diff --git a/frontend/src/apiHooks/new/useGetAllTopics.ts b/frontend/src/apiHooks/new/useGetAllTopics.ts
deleted file mode 100644
index 489ed836..00000000
--- a/frontend/src/apiHooks/new/useGetAllTopics.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
-
-import { getAllTopics } from '../../apis/new';
-
-const useGetAllTopics = () => {
-  const { data: allTopics } = useSuspenseQuery({
-    queryKey: ['GetAllTopics'],
-    queryFn: getAllTopics,
-  });
-
-  return { allTopics };
-};
-
-export default useGetAllTopics;
diff --git a/frontend/src/apiHooks/new/useGetBestTopics.ts b/frontend/src/apiHooks/new/useGetBestTopics.ts
deleted file mode 100644
index 8fbdc9b7..00000000
--- a/frontend/src/apiHooks/new/useGetBestTopics.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
-
-import { getBestTopics } from '../../apis/new';
-
-const useGetBestTopics = () => {
-  const { data: bestTopics } = useSuspenseQuery({
-    queryKey: ['GetBestTopics'],
-    queryFn: getBestTopics,
-  });
-
-  return { bestTopics };
-};
-
-export default useGetBestTopics;
diff --git a/frontend/src/apiHooks/new/useGetBookmarks.ts b/frontend/src/apiHooks/new/useGetBookmarks.ts
deleted file mode 100644
index d6486d07..00000000
--- a/frontend/src/apiHooks/new/useGetBookmarks.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
-
-import { getBookmarks } from '../../apis/new';
-
-const useGetBookmarks = () => {
-  const { data: bookmarks } = useSuspenseQuery({
-    queryKey: ['GetBookmarks'],
-    queryFn: getBookmarks,
-  });
-
-  return { bookmarks };
-};
-
-export default useGetBookmarks;
diff --git a/frontend/src/apiHooks/new/useGetNewestTopics.ts b/frontend/src/apiHooks/new/useGetNewestTopics.ts
deleted file mode 100644
index 8a8cf1a9..00000000
--- a/frontend/src/apiHooks/new/useGetNewestTopics.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
-
-import { getNewestTopics } from '../../apis/new';
-
-const useGetNewestTopics = () => {
-  const { data: newestTopics } = useSuspenseQuery({
-    queryKey: ['GetNewestTopics'],
-    queryFn: getNewestTopics,
-  });
-
-  return { newestTopics };
-};
-
-export default useGetNewestTopics;
diff --git a/frontend/src/apiHooks/new/useGetTopics.ts b/frontend/src/apiHooks/new/useGetTopics.ts
new file mode 100644
index 00000000..ffb65693
--- /dev/null
+++ 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
index 422ef921..a5f81fec 100644
--- 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
index d505af47..e5ba5620 100644
--- 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
index 45e419ae..7e21b22a 100644
--- 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
index f5ffeda1..7efd8d30 100644
--- 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
index 47db7fc8..0d2bb398 100644
--- a/frontend/src/pages/SeeAllAllTopics.tsx
+++ b/frontend/src/pages/SeeAllAllTopics.tsx
@@ -1,15 +1,14 @@
+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';
 
@@ -17,7 +16,7 @@ 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>
   );
diff --git a/frontend/src/pages/SeeAllBestTopics.tsx b/frontend/src/pages/SeeAllBestTopics.tsx
index bd82560a..0412968d 100644
--- a/frontend/src/pages/SeeAllBestTopics.tsx
+++ b/frontend/src/pages/SeeAllBestTopics.tsx
@@ -1,23 +1,22 @@
+import { Suspense } from 'react';
 import { styled } from 'styled-components';
 
-import useGetBestTopics from '../apiHooks/new/useGetBestTopics';
-import { getBestTopics } 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 SeeAllBestTopics() {
+function SeeAllAllTopics() {
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('home');
 
-  const { bestTopics: topics } = useGetBestTopics();
+  const { routingHandlers } = useNavigator();
 
   return (
     <Wrapper>
@@ -28,47 +27,21 @@ function SeeAllBestTopics() {
         $fontSize="extraLarge"
         $fontWeight="bold"
         tabIndex={ARIA_FOCUS}
-        aria-label="인기 급상승할 지도 전체보기 페이지 입니다."
+        aria-label="모두일 지도 전체보기 페이지 입니다."
       >
-        인기 급상승할 지도?
+        새로울 지도?
       </MediaText>
 
       <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={getBestTopics}
-                />
-              </ul>
-            ))}
-          </Grid>
-        </Flex>
-      )}
+      <Suspense fallback={<TopicListSkeleton />}>
+        <TopicCardList
+          url="/topics/bests"
+          commentWhenEmpty="생성된 지도가 없습니다. 지도를 만들어보세요."
+          routePageName="지도 만들러 가기"
+          routePage={routingHandlers.newTopic}
+        />
+      </Suspense>
 
       <Space size={8} />
     </Wrapper>
@@ -85,4 +58,4 @@ const Wrapper = styled(Box)`
   }
 `;
 
-export default SeeAllBestTopics;
+export default SeeAllAllTopics;
diff --git a/frontend/src/pages/SeeAllNewestTopics.tsx b/frontend/src/pages/SeeAllNewestTopics.tsx
index a18d91e5..afe2c0ef 100644
--- a/frontend/src/pages/SeeAllNewestTopics.tsx
+++ b/frontend/src/pages/SeeAllNewestTopics.tsx
@@ -1,23 +1,22 @@
+import { Suspense } from 'react';
 import { styled } from 'styled-components';
 
-import useGetNewestTopics from '../apiHooks/new/useGetNewestTopics';
-import { getNewestTopics } 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 SeeAllNewestTopics() {
+function SeeAllAllTopics() {
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('home');
 
-  const { newestTopics: topics } = useGetNewestTopics();
+  const { routingHandlers } = useNavigator();
 
   return (
     <Wrapper>
@@ -28,47 +27,22 @@ function SeeAllNewestTopics() {
         $fontSize="extraLarge"
         $fontWeight="bold"
         tabIndex={ARIA_FOCUS}
-        aria-label="새로울 지도 전체보기 페이지 입니다."
+        aria-label="모두일 지도 전체보기 페이지 입니다."
       >
-        새로울 지도?
+        인기 급상승할 지도?
       </MediaText>
 
       <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={getNewestTopics}
-                />
-              </ul>
-            ))}
-          </Grid>
-        </Flex>
-      )}
+      <Suspense fallback={<TopicListSkeleton />}>
+        <TopicCardList
+          url="/topics/newest"
+          commentWhenEmpty="생성된 지도가 없습니다. 지도를 만들어보세요."
+          routePageName="지도 만들러 가기"
+          routePage={routingHandlers.newTopic}
+        />
+      </Suspense>
+
       <Space size={8} />
     </Wrapper>
   );
@@ -84,4 +58,4 @@ const Wrapper = styled(Box)`
   }
 `;
 
-export default SeeAllNewestTopics;
+export default SeeAllAllTopics;