Team-TenTen · dudwns · Sep 9, 2024 · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024
diff --git a/next.config.js b/next.config.js
@@ -12,8 +12,19 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 })
 
 const nextConfig = {
+  reactStrictMode: false,
   images: {
-    domains: ['linkhub-s3.s3.ap-northeast-2.amazonaws.com'],
+    minimumCacheTTL: 1 * 60 * 60 * 24 * 365,
+    domains: ['linkhub-s3-2025.s3.ap-northeast-2.amazonaws.com'],
+    formats: ['image/avif', 'image/webp'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'linkhub-s3-2025.s3.ap-northeast-2.amazonaws.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
   },
   async redirects() {
     return [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,8 +26,8 @@
     "next-pwa": "^5.6.0",
     "next-themes": "^0.2.1",
     "open-graph-scraper": "^6.3.2",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
     "react-spinners": "^0.13.8",
     "react-toastify": "^9.1.3",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import { Providers } from '@/components'
 import Header from '@/components/common/Header/Header'
 import ToastContainer from '@/components/common/Toast/ToastContainer'
@@ -35,7 +36,7 @@ export const metadata: Metadata = {
     locale: 'ko_KR',
     type: 'website',
     images: [
-      'https://linkhub-s3.s3.ap-northeast-2.amazonaws.com/linkhub-og-image.png',
+      'https://linkhub-s3-2025.s3.ap-northeast-2.amazonaws.com/linkhub-og-image.png',
     ],
   },
   manifest: '/manifest.json',
@@ -53,17 +54,15 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html
-      lang="ko"
-      className={`${pretendard.variable}`}>
+    <html lang="ko">
       <TanstackQueryContext>
         <AuthProvider>
-          <body className="bg-bgColor">
+          <body className={`bg-bgColor ${pretendard.variable}`}>
             <Providers>
-              <div
-                id="root"
-                className="relative	mx-auto min-h-screen w-full pb-4 shadow-xl">
-                <Header />
+              <div className="relative mx-auto min-h-screen w-full pb-4 shadow-xl">
+                <Suspense>
+                  <Header />
+                </Suspense>
                 <main className="pt-[53px]">{children}</main>
               </div>
               <ToastContainer />

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -11,6 +11,7 @@ const NotFoundPage = () => {
         width={240}
         height={300}
         alt="404"
+        placeholder="blur"
       />
       <div className="flex flex-col items-center text-base">
         <div>{NOT_FOUND.TEXT_1}</div>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,110 +1,22 @@
-'use client'
-
-import { CategoryList, Dropdown, LinkItem, Spinner } from '@/components'
-import FloatingButton from '@/components/FloatingButton/FloatingButton'
-import { ChipColors } from '@/components/common/Chip/Chip'
-import DeferredComponent from '@/components/common/DeferedComponent/DeferedComponent'
-import MainSpaceList from '@/components/common/MainSpaceList/MainSpaceList'
-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 HydratePopularLinkList from '@/components/PopularLinkList/HydratePopularLinkList'
+import FloatingBtnController from '@/components/common/MainSpaceList/FloatingBtnController'
+import MainSpaceHeader from '@/components/common/MainSpaceList/MainSpaceHeader'
+import SpaceListController from '@/components/common/MainSpaceList/SpaceListController'
 
 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]">
+          <HydratePopularLinkList />
+        </div>
       </section>
       <section>
-        <div className="sticky top-[53px] z-40 bg-bgColor">
-          <div className="flex items-center justify-between px-4 pt-2">
-            <h2 className="font-bold text-gray9">스페이스 모음</h2>
-            <Dropdown
-              type="space"
-              placement="right"
-              defaultIndex={sortIndex}
-              onChange={handleSortChange}
-            />
-          </div>
-          <CategoryList
-            type="all"
-            defaultIndex={categoryIndex}
-            onChange={handleCategoryChange}
-          />
-        </div>
-        <MainSpaceList
-          queryKey="main"
-          sort={sort ?? ''}
-          category={category ?? ''}
-          fetchFn={fetchGetSpaces}
-        />
+        <MainSpaceHeader />
+        <SpaceListController />
       </section>
-      <FloatingButton />
+      <FloatingBtnController />
     </>
   )
 }
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/HydratePopularLinkList.tsx b/src/components/PopularLinkList/HydratePopularLinkList.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { getQueryClient } from '@/lib/queryClient'
+import { fetchGetPopularLinks } from '@/services/link/link'
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query'
+import PopularLinkList from './PopularLinkList'
+
+const HydratePopularLinkList = async () => {
+  const queryClient = getQueryClient()
+  await queryClient.prefetchQuery({
+    queryKey: ['PopularLinks'],
+    queryFn: fetchGetPopularLinks,
+  })
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <PopularLinkList />
+    </HydrationBoundary>
+  )
+}
+
+export default React.memo(HydratePopularLinkList)