refactor: useSuspenseQuery 를 통한 선언적으로 로딩상태 처리

frontend/src/apiHooks/new/useGetAllTopics.ts

@@ -1,14 +1,14 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { getAllTopics } from '../../apis/new';
 
 const useGetAllTopics = () => {
-  const { isLoading, data: allTopics } = useQuery({
+  const { data: allTopics } = useSuspenseQuery({
     queryKey: ['GetAllTopics'],
     queryFn: getAllTopics,
   });
 
-  return { isLoading, allTopics };
+  return { allTopics };
 };
 
 export default useGetAllTopics;

frontend/src/apiHooks/new/useGetBestTopics.ts

@@ -1,14 +1,14 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { getBestTopics } from '../../apis/new';
 
 const useGetBestTopics = () => {
-  const { isLoading, data: bestTopics } = useQuery({
+  const { data: bestTopics } = useSuspenseQuery({
     queryKey: ['GetBestTopics'],
     queryFn: getBestTopics,
   });
 
-  return { isLoading, bestTopics };
+  return { bestTopics };
 };
 
 export default useGetBestTopics;

frontend/src/apiHooks/new/useGetBookmarks.ts

@@ -1,14 +1,14 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { getBookmarks } from '../../apis/new';
 
 const useGetBookmarks = () => {
-  const { isLoading, data: bookmarks } = useQuery({
+  const { data: bookmarks } = useSuspenseQuery({
     queryKey: ['GetBookmarks'],
     queryFn: getBookmarks,
   });
 
-  return { isLoading, bookmarks };
+  return { bookmarks };
 };
 
 export default useGetBookmarks;

frontend/src/apiHooks/new/useGetNewestTopics.ts

@@ -1,14 +1,14 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { getNewestTopics } from '../../apis/new';
 
 const useGetNewestTopics = () => {
-  const { isLoading, data: newestTopics } = useQuery({
+  const { data: newestTopics } = useSuspenseQuery({
     queryKey: ['GetNewestTopics'],
     queryFn: getNewestTopics,
   });
 
-  return { isLoading, newestTopics };
+  return { newestTopics };
 };
 
 export default useGetNewestTopics;

frontend/src/components/Skeletons/TopicListSkeleton.tsx

@@ -1,11 +1,17 @@
 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} />
+      <Space size={5} />
       <TopicCardWrapper>
         <TopicCardSkeleton />
         <TopicCardSkeleton />
@@ -21,10 +27,20 @@ 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;

frontend/src/pages/Bookmark.tsx

@@ -11,8 +11,6 @@ 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 SkeletonBox from '../components/Skeletons/common/SkeletonBox';
-import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
 import TopicCard from '../components/TopicCard';
 import { ARIA_FOCUS, FULLSCREEN } from '../constants';
 import useNavigator from '../hooks/useNavigator';
@@ -24,22 +22,7 @@ function Bookmark() {
   useSetNavbarHighlight('favorite');
 
   const { routingHandlers } = useNavigator();
-  const { isLoading, bookmarks: topics } = useGetBookmarks();
-
-  if (isLoading)
-    return (
-      <>
-        <Wrapper>
-          <Space size={5} />
-          <SkeletonBox width={160} height={32} />
-          <Space size={0} />
-          <SkeletonBox width={230} height={16} />
-
-          <Space size={5} />
-          <TopicListSkeleton />
-        </Wrapper>
-      </>
-    );
+  const { bookmarks: topics } = useGetBookmarks();
 
   return (
     <Wrapper>

frontend/src/pages/SeeAllAllTopics.tsx

@@ -8,8 +8,6 @@ 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 SkeletonBox from '../components/Skeletons/common/SkeletonBox';
-import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
 import TopicCard from '../components/TopicCard';
 import { ARIA_FOCUS, FULLSCREEN } from '../constants';
 import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
@@ -19,22 +17,7 @@ function SeeAllAllTopics() {
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('home');
 
-  const { isLoading, allTopics: topics } = useGetAllTopics();
-
-  if (isLoading)
-    return (
-      <>
-        <Wrapper>
-          <Space size={5} />
-
-          <SkeletonBox width={160} height={32} />
-          <Space size={4} />
-
-          <Space size={5} />
-          <TopicListSkeleton />
-        </Wrapper>
-      </>
-    );
+  const { allTopics: topics } = useGetAllTopics();
 
   return (
     <Wrapper>

frontend/src/pages/SeeAllBestTopics.tsx

@@ -8,8 +8,6 @@ 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 SkeletonBox from '../components/Skeletons/common/SkeletonBox';
-import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
 import TopicCard from '../components/TopicCard';
 import { ARIA_FOCUS, FULLSCREEN } from '../constants';
 import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
@@ -19,22 +17,7 @@ function SeeAllBestTopics() {
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('home');
 
-  const { isLoading, bestTopics: topics } = useGetBestTopics();
-
-  if (isLoading)
-    return (
-      <>
-        <Wrapper>
-          <Space size={5} />
-
-          <SkeletonBox width={160} height={32} />
-          <Space size={4} />
-
-          <Space size={5} />
-          <TopicListSkeleton />
-        </Wrapper>
-      </>
-    );
+  const { bestTopics: topics } = useGetBestTopics();
 
   return (
     <Wrapper>

frontend/src/pages/SeeAllNewestTopics.tsx

@@ -8,8 +8,6 @@ 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 SkeletonBox from '../components/Skeletons/common/SkeletonBox';
-import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
 import TopicCard from '../components/TopicCard';
 import { ARIA_FOCUS, FULLSCREEN } from '../constants';
 import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
@@ -19,22 +17,7 @@ function SeeAllNewestTopics() {
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('home');
 
-  const { isLoading, newestTopics: topics } = useGetNewestTopics();
-
-  if (isLoading)
-    return (
-      <>
-        <Wrapper>
-          <Space size={5} />
-
-          <SkeletonBox width={160} height={32} />
-          <Space size={4} />
-
-          <Space size={5} />
-          <TopicListSkeleton />
-        </Wrapper>
-      </>
-    );
+  const { newestTopics: topics } = useGetNewestTopics();
 
   return (
     <Wrapper>

frontend/src/router.tsx

@@ -2,6 +2,7 @@ import { lazy, ReactNode, Suspense } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 
 import AuthLayout from './components/Layout/AuthLayout';
+import TopicListSkeleton from './components/Skeletons/TopicListSkeleton';
 import Home from './pages/Home';
 import NotFound from './pages/NotFound';
 import RootPage from './pages/RootPage';
@@ -79,36 +80,36 @@ const routes: routeElement[] = [
       {
         path: 'see-all/popularity',
         element: (
-          <SuspenseComp>
+          <Suspense fallback={<TopicListSkeleton />}>
             <SeeAllBestTopics />
-          </SuspenseComp>
+          </Suspense>
         ),
         withAuth: false,
       },
       {
         path: 'see-all/near',
         element: (
-          <SuspenseComp>
+          <Suspense fallback={<TopicListSkeleton />}>
             <SeeAllAllTopics />
-          </SuspenseComp>
+          </Suspense>
         ),
         withAuth: false,
       },
       {
         path: 'see-all/latest',
         element: (
-          <SuspenseComp>
+          <Suspense fallback={<TopicListSkeleton />}>
             <SeeAllNewestTopics />
-          </SuspenseComp>
+          </Suspense>
         ),
         withAuth: false,
       },
       {
         path: 'favorite',
         element: (
-          <SuspenseComp>
+          <Suspense fallback={<TopicListSkeleton />}>
             <Bookmark />
-          </SuspenseComp>
+          </Suspense>
         ),
         withAuth: true,
       },