feat: #310 - 메인페이지 Suspense적용 및 스켈레톤UI 적용

메인페이지 Suspense적용 및 스켈레톤UI 적용
Team-TenTen · Aug 3, 2024 · 70a2c6e · 70a2c6e
2 parents a8708e7 + 1fac745
commit 70a2c6e
Show file tree

Hide file tree

Showing 12 changed files with 292 additions and 143 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,84 +1,47 @@
 'use client'
 
-import { CategoryList, Dropdown, LinkItem, Spinner } from '@/components'
+import { CategoryList, Dropdown, Spinner } from '@/components'
 import FloatingButton from '@/components/FloatingButton/FloatingButton'
-import { ChipColors } from '@/components/common/Chip/Chip'
+import PopularLinkSkeleton from '@/components/PopularLinkList/PopularLinkSkeleton'
 import DeferredComponent from '@/components/common/DeferedComponent/DeferedComponent'
-import MainSpaceList from '@/components/common/MainSpaceList/MainSpaceList'
+import MainSpaceSkeleton from '@/components/common/MainSpaceList/MainSpaceSkeleton'
 import { useCategoryParam, useSortParam } from '@/hooks'
-import useGetPopularLinks from '@/hooks/useGetPopularLinks'
 import { fetchGetSpaces } from '@/services/space/spaces'
-import { PopularLinkResBody } from '@/types'
-import 'swiper/css'
-import 'swiper/css/free-mode'
-import 'swiper/css/pagination'
-import { FreeMode } from 'swiper/modules'
-import { Swiper, SwiperSlide } from 'swiper/react'
+import dynamic from 'next/dynamic'
+
+const DynamicPopularLinkList = dynamic(
+  () => import('@/components/PopularLinkList/PopularLinkList'),
+  {
+    loading: () => (
+      <DeferredComponent>
+        <PopularLinkSkeleton />
+      </DeferredComponent>
+    ),
+  },
+)
+const DynamicMainSpaceList = dynamic(
+  () => import('@/components/common/MainSpaceList/MainSpaceList'),
+  {
+    loading: () => (
+      <DeferredComponent>
+        <MainSpaceSkeleton />
+      </DeferredComponent>
+    ),
+  },
+)
 
 export default function Home() {
-  const { links, isPopularLinksLoading } = useGetPopularLinks()
   const { sort, sortIndex, handleSortChange } = useSortParam('space')
   const { category, categoryIndex, handleCategoryChange } =
     useCategoryParam('all')
 
-  return isPopularLinksLoading ? (
-    <DeferredComponent>
-      <Spinner />
-    </DeferredComponent>
-  ) : (
+  return (
     <>
       <section className="px-4 pb-8">
         <h2 className="py-4 font-bold text-gray9">인기있는 링크</h2>
-        {links && (
-          <Swiper
-            slidesPerView={2.2}
-            breakpoints={{
-              640: {
-                slidesPerView: 2.2,
-              },
-              743: {
-                slidesPerView: 3.2,
-              },
-              1099: {
-                slidesPerView: 4.2,
-              },
-              1455: {
-                slidesPerView: 5.2,
-              },
-              1811: {
-                slidesPerView: 6.2,
-              },
-              2152: {
-                slidesPerView: 7.2,
-              },
-
-              2324: {
-                slidesPerView: 8.2,
-              },
-            }}
-            spaceBetween={16}
-            freeMode={true}
-            pagination={{
-              clickable: true,
-            }}
-            modules={[FreeMode]}
-            className="mySwiper">
-            {links.map((link: PopularLinkResBody) => (
-              <SwiperSlide key={link.linkId}>
-                <LinkItem
-                  linkId={link.linkId}
-                  title={link.title}
-                  url={link.url}
-                  tagName={link.tagName}
-                  tagColor={link.tagColor as ChipColors}
-                  isInitLiked={link.isLiked}
-                  likeInitCount={link.likeCount}
-                  type="card"
-                />
-              </SwiperSlide>
-            ))}
-          </Swiper>
-        )}
+        <div className="min-h-[101.5px]">
+          <DynamicPopularLinkList />
+        </div>
       </section>
       <section>
         <div className="sticky top-[53px] z-40 bg-bgColor">
@@ -97,7 +60,7 @@ export default function Home() {
             onChange={handleCategoryChange}
           />
         </div>
-        <MainSpaceList
+        <DynamicMainSpaceList
           queryKey="main"
           sort={sort ?? ''}
           category={category ?? ''}

diff --git a/src/components/PopularLink/PopularLinkList/PopularLinkList.tsx b/src/components/PopularLink/PopularLinkList/PopularLinkList.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import useGetPopularLinks from '@/components/PopularLinkList/hooks/useGetPopularLinks'
+import { ChipColors } from '@/components/common/Chip/Chip'
+import LinkItem from '@/components/common/LinkItem/LinkItem'
+import { PopularLinkResBody } from '@/types'
+import 'swiper/css'
+import 'swiper/css/free-mode'
+import 'swiper/css/pagination'
+import { FreeMode } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+const PopularLinkList = () => {
+  const { data } = useGetPopularLinks()
+  return (
+    <Swiper
+      slidesPerView={2.2}
+      breakpoints={{
+        640: {
+          slidesPerView: 2.2,
+        },
+        743: {
+          slidesPerView: 3.2,
+        },
+        1099: {
+          slidesPerView: 4.2,
+        },
+        1455: {
+          slidesPerView: 5.2,
+        },
+        1811: {
+          slidesPerView: 6.2,
+        },
+        2152: {
+          slidesPerView: 7.2,
+        },
+        2324: {
+          slidesPerView: 8.2,
+        },
+      }}
+      spaceBetween={16}
+      freeMode={true}
+      pagination={{
+        clickable: true,
+      }}
+      modules={[FreeMode]}
+      className="mySwiper">
+      {data?.responses.map((link: PopularLinkResBody) => (
+        <SwiperSlide key={link.linkId}>
+          <LinkItem
+            linkId={link.linkId}
+            title={link.title}
+            url={link.url}
+            tagName={link.tagName}
+            tagColor={link.tagColor as ChipColors}
+            isInitLiked={link.isLiked}
+            likeInitCount={link.likeCount}
+            type="card"
+          />
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  )
+}
+
+export default PopularLinkList
diff --git a/src/components/PopularLinkList/PopularLinkList.tsx b/src/components/PopularLinkList/PopularLinkList.tsx
@@ -0,0 +1,64 @@
+import { PopularLinkResBody } from '@/types'
+import 'swiper/css'
+import 'swiper/css/free-mode'
+import 'swiper/css/pagination'
+import { FreeMode } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { ChipColors } from '../common/Chip/Chip'
+import LinkItem from '../common/LinkItem/LinkItem'
+import useGetPopularLinks from './hooks/useGetPopularLinks'
+
+const PopularLinkList = () => {
+  const { data } = useGetPopularLinks()
+  return (
+    <Swiper
+      slidesPerView={2.2}
+      breakpoints={{
+        640: {
+          slidesPerView: 2.2,
+        },
+        743: {
+          slidesPerView: 3.2,
+        },
+        1099: {
+          slidesPerView: 4.2,
+        },
+        1455: {
+          slidesPerView: 5.2,
+        },
+        1811: {
+          slidesPerView: 6.2,
+        },
+        2152: {
+          slidesPerView: 7.2,
+        },
+        2324: {
+          slidesPerView: 8.2,
+        },
+      }}
+      spaceBetween={16}
+      freeMode={true}
+      pagination={{
+        clickable: true,
+      }}
+      modules={[FreeMode]}
+      className="mySwiper">
+      {data?.responses.map((link: PopularLinkResBody) => (
+        <SwiperSlide key={link.linkId}>
+          <LinkItem
+            linkId={link.linkId}
+            title={link.title}
+            url={link.url}
+            tagName={link.tagName}
+            tagColor={link.tagColor as ChipColors}
+            isInitLiked={link.isLiked}
+            likeInitCount={link.likeCount}
+            type="card"
+          />
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  )
+}
+
+export default PopularLinkList
diff --git a/src/components/PopularLinkList/PopularLinkSkeleton.tsx b/src/components/PopularLinkList/PopularLinkSkeleton.tsx
@@ -0,0 +1,36 @@
+const LinkSkeleton = () => {
+  return (
+    <div className="mr-4 min-w-[164px]">
+      <div className="flex min-h-[101.5px] flex-col justify-between gap-1 rounded-md border border-slate3 px-3 py-2.5">
+        <div className="button-round h-[20px] w-3/4 bg-slate-100 text-sm font-medium text-gray9 dark:bg-slate-800" />
+        <div>
+          <div className="button-round inline-flex h-[24px] w-[40.74px] rounded-xl bg-slate-100 px-2.5 py-1 text-center text-xs font-medium dark:bg-slate-800" />
+        </div>
+        <div className="flex items-center justify-end">
+          <div className="button-round h-[26px] w-[41.28px] bg-slate-100 dark:bg-slate-800" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const PopularLinkSkeleton = () => {
+  return (
+    <div className="overflow-hidden">
+      <div className="flex">
+        <LinkSkeleton />
+        <LinkSkeleton />
+        <LinkSkeleton />
+        <LinkSkeleton />
+        <LinkSkeleton />
+        <LinkSkeleton />
+        <LinkSkeleton />
+        <LinkSkeleton />
+        <LinkSkeleton />
+        <LinkSkeleton />
+      </div>
+    </div>
+  )
+}
+
+export default PopularLinkSkeleton
diff --git a/src/components/PopularLinkList/hooks/useGetPopularLinks.ts b/src/components/PopularLinkList/hooks/useGetPopularLinks.ts
@@ -0,0 +1,11 @@
+import { fetchGetPopularLinks } from '@/services/link/link'
+import { useSuspenseQuery } from '@tanstack/react-query'
+
+const useGetPopularLinks = () => {
+  return useSuspenseQuery({
+    queryKey: ['popularLinks'],
+    queryFn: () => fetchGetPopularLinks(),
+  })
+}
+
+export default useGetPopularLinks
diff --git a/src/components/Space/SpaceForm.tsx b/src/components/Space/SpaceForm.tsx
@@ -120,8 +120,6 @@ const SpaceForm = ({ spaceType, space }: SpaceFormProps) => {
               width={5000}
               height={188}
               alt="spaceImage"
-              placeholder="blur"
-              blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII="
             />
           ) : (
             <div className="flex h-[188px] items-center justify-center border-4 border-dashed border-slate5">