feat: #321 - 메인스페이스 스켈레톤톤UI 적용

src/app/page.tsx

@@ -2,10 +2,9 @@
 
 import { CategoryList, Dropdown, Spinner } from '@/components'
 import FloatingButton from '@/components/FloatingButton/FloatingButton'
-// import PopularLinkList from '@/components/PopularLinkList/PopularLinkList'
 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 { fetchGetSpaces } from '@/services/space/spaces'
 import dynamic from 'next/dynamic'
@@ -25,7 +24,7 @@ const DynamicMainSpaceList = dynamic(
   {
     loading: () => (
       <DeferredComponent>
-        <Spinner />
+        <MainSpaceSkeleton />
       </DeferredComponent>
     ),
   },
@@ -41,7 +40,6 @@ export default function Home() {
       <section className="px-4 pb-8">
         <h2 className="py-4 font-bold text-gray9">인기있는 링크</h2>
         <div className="min-h-[101.5px]">
-          {/* <PopularLinkList /> */}
           <DynamicPopularLinkList />
         </div>
       </section>
@@ -62,12 +60,6 @@ export default function Home() {
             onChange={handleCategoryChange}
           />
         </div>
-        {/* <MainSpaceList
-          queryKey="main"
-          sort={sort ?? ''}
-          category={category ?? ''}
-          fetchFn={fetchGetSpaces}
-        /> */}
         <DynamicMainSpaceList
           queryKey="main"
           sort={sort ?? ''}

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

src/components/common/MainSpaceList/MainSpaceSkeleton.tsx

@@ -0,0 +1,40 @@
+const SpaceSkeleton = () => {
+  return (
+    <li>
+      <a
+        href="#"
+        className="relative flex gap-3 rounded-md border border-slate3 p-2">
+        <div className="flex grow flex-col justify-center gap-1 rounded-md bg-white bg-opacity-60 px-3 py-1.5 dark:bg-gray-900 dark:bg-opacity-60">
+          <div className="h-[24px]">
+            <div className="button-round h-[20px] w-3/4 bg-slate-100 text-sm font-medium dark:bg-slate-800" />
+          </div>
+          <div className="line-clamp-1 h-[16px] w-1/2 rounded-xl bg-slate-100 text-xs font-normal dark:bg-slate-800" />
+          <div className="flex items-center pt-1">
+            <div className="inline-flex h-[24px] w-1/5 rounded-xl bg-slate-100 px-2.5 py-1 text-center text-xs font-medium dark:bg-slate-800" />
+          </div>
+        </div>
+      </a>
+    </li>
+  )
+}
+
+const MainSpaceSkeleton = () => {
+  return (
+    <ul
+      className="mb-4 grid gap-4 gap-y-2 px-4 pt-2"
+      style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))' }}>
+      <SpaceSkeleton />
+      <SpaceSkeleton />
+      <SpaceSkeleton />
+      <SpaceSkeleton />
+      <SpaceSkeleton />
+      <SpaceSkeleton />
+      <SpaceSkeleton />
+      <SpaceSkeleton />
+      <SpaceSkeleton />
+      <SpaceSkeleton />
+    </ul>
+  )
+}
+
+export default MainSpaceSkeleton