From 2e92d2d1d131a89d9ea635de55e0047defe50477 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Tue, 23 Jul 2024 22:57:54 +0900
Subject: [PATCH 01/18] =?UTF-8?q?feat:=20#321=20-=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next.config.js                          | 10 ++++++++++
 src/app/not-found.tsx                   |  1 +
 src/components/Space/SpaceForm.tsx      |  3 +++
 src/components/common/Avatar/Avatar.tsx |  3 +++
 src/components/common/Space/Space.tsx   |  6 ++++++
 5 files changed, 23 insertions(+)

diff --git a/next.config.js b/next.config.js
index fa48f8a5..ff4b8157 100644
--- a/next.config.js
+++ b/next.config.js
@@ -13,7 +13,17 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 
 const nextConfig = {
   images: {
+    minimumCacheTTL: 1 * 60 * 60 * 24 * 365,
     domains: ['linkhub-s3.s3.ap-northeast-2.amazonaws.com'],
+    formats: ['image/avif', 'image/webp'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'linkhub-s3.s3.ap-northeast-2.amazonaws.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
   },
   async redirects() {
     return [
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 9ed7ea91..1360b4c7 100644
--- 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/components/Space/SpaceForm.tsx b/src/components/Space/SpaceForm.tsx
index c20e9a84..c6ea8bee 100644
--- a/src/components/Space/SpaceForm.tsx
+++ b/src/components/Space/SpaceForm.tsx
@@ -114,11 +114,14 @@ const SpaceForm = ({ spaceType, space }: SpaceFormProps) => {
         <div onClick={() => selectSpaceImage?.current?.click()}>
           {thumnail ? (
             <Image
+              priority
               className="h-[188px] object-cover"
               src={thumnail}
               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">
diff --git a/src/components/common/Avatar/Avatar.tsx b/src/components/common/Avatar/Avatar.tsx
index b244c81b..0df2bc7e 100644
--- a/src/components/common/Avatar/Avatar.tsx
+++ b/src/components/common/Avatar/Avatar.tsx
@@ -14,6 +14,7 @@ export interface AvatarProps {
 const Avatar = ({ src, alt, className }: AvatarProps) => {
   return (
     <Image
+      priority
       src={src}
       alt={alt}
       fill
@@ -21,6 +22,8 @@ const Avatar = ({ src, alt, className }: AvatarProps) => {
         className,
         'rounded-full border border-slate3 object-cover',
       )}
+      placeholder="blur"
+      blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII="
     />
   )
 }
diff --git a/src/components/common/Space/Space.tsx b/src/components/common/Space/Space.tsx
index 2637f1ff..b32edad2 100644
--- a/src/components/common/Space/Space.tsx
+++ b/src/components/common/Space/Space.tsx
@@ -74,10 +74,13 @@ const Space = ({
           href={`/space/${spaceId}`}>
           {spaceImage && (
             <Image
+              priority
               className="z-[-100] rounded-md object-cover opacity-50"
               src={spaceImage || ''}
               alt="space-image"
               fill
+              placeholder="blur"
+              blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII="
             />
           )}
           <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">
@@ -110,10 +113,13 @@ const Space = ({
       ) : (
         <div className="relative flex flex-col gap-10 p-4">
           <Image
+            priority
             className="z-[-100] object-cover"
             src={spaceImage || ''}
             alt="space-image"
             fill
+            placeholder="blur"
+            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII="
           />
           <div className="flex justify-end gap-2">
             <Button

From 7c6c90a58ae507316661dbcde228591c1cc6e2f5 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Wed, 24 Jul 2024 00:00:23 +0900
Subject: [PATCH 02/18] =?UTF-8?q?feat:=20#321=20-=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Space/Space.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/common/Space/Space.tsx b/src/components/common/Space/Space.tsx
index b32edad2..94d4b930 100644
--- a/src/components/common/Space/Space.tsx
+++ b/src/components/common/Space/Space.tsx
@@ -81,6 +81,7 @@ const Space = ({
               fill
               placeholder="blur"
               blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII="
+              sizes="(max-width: 768px) 22vw, (max-width: 1200px) 100px, 110px"
             />
           )}
           <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">

From 7109c04e782a4baf984592c089bc58a78930c759 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Wed, 24 Jul 2024 01:05:46 +0900
Subject: [PATCH 03/18] =?UTF-8?q?feat:=20#321=20-=20link=20prefetch=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/CategoryList/CategoryListItem.tsx | 1 +
 src/components/common/Comment/Comment.tsx               | 1 +
 src/components/common/Header/Header.tsx                 | 5 ++++-
 src/components/common/LinkItem/LinkItem.tsx             | 2 ++
 src/components/common/Sidebar/Sidebar.tsx               | 5 +++++
 src/components/common/Space/Space.tsx                   | 1 +
 src/components/common/Tab/TabItem.tsx                   | 1 +
 src/components/common/User/User.tsx                     | 1 +
 8 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/common/CategoryList/CategoryListItem.tsx b/src/components/common/CategoryList/CategoryListItem.tsx
index d40c7a5a..db440ca5 100644
--- a/src/components/common/CategoryList/CategoryListItem.tsx
+++ b/src/components/common/CategoryList/CategoryListItem.tsx
@@ -30,6 +30,7 @@ const CategoryListItem = ({
 
   return as === 'link' ? (
     <Link
+      prefetch={true}
       href={{
         pathname,
         query: {
diff --git a/src/components/common/Comment/Comment.tsx b/src/components/common/Comment/Comment.tsx
index 4b136123..44cdab9f 100644
--- a/src/components/common/Comment/Comment.tsx
+++ b/src/components/common/Comment/Comment.tsx
@@ -81,6 +81,7 @@ const Comment = ({
         <div className="flex w-full flex-col gap-y-1">
           <div className="flex items-center justify-between">
             <Link
+              prefetch={true}
               href={`/user/${memberId}`}
               className="text-sm font-semibold text-gray9">
               {nickname}
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index fcdc1246..e003989a 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -31,7 +31,9 @@ const Header = () => {
       <div className="fixed z-50 flex w-full items-center justify-between border-b border-slate-100 bg-bgColor px-4 py-2.5 dark:border-slate-800">
         <div className="flex items-center justify-center">
           <Button>
-            <Link href="/">
+            <Link
+              prefetch={true}
+              href="/">
               <LinkIcon className="h-8 w-8 text-slate9" />
             </Link>
           </Button>
@@ -44,6 +46,7 @@ const Header = () => {
         <div className="flex items-center justify-center gap-x-1">
           {isLoggedIn && (
             <Link
+              prefetch={true}
               href="/notification/invite"
               className="relative flex h-8 w-8 items-center justify-center">
               <BellIcon className="h-6 w-6 text-slate9" />
diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
index 3f181839..237f802e 100644
--- a/src/components/common/LinkItem/LinkItem.tsx
+++ b/src/components/common/LinkItem/LinkItem.tsx
@@ -124,6 +124,7 @@ const LinkItem = ({
       {type === 'list' ? (
         <div className="flex items-center justify-between gap-2 border-t border-slate3 px-3 py-2 last:border-b">
           <Link
+            prefetch={true}
             onClick={() => isMember && handleSaveReadInfo({ spaceId, linkId })}
             className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-gray9"
             href={url}
@@ -199,6 +200,7 @@ const LinkItem = ({
       ) : (
         <div className="flex min-h-[101.5px] flex-col justify-between gap-1 rounded-md border border-slate3 px-3 py-2.5">
           <Link
+            prefetch={true}
             onClick={() => isMember && handleSaveReadInfo({ spaceId, linkId })}
             className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-gray9"
             href={url}
diff --git a/src/components/common/Sidebar/Sidebar.tsx b/src/components/common/Sidebar/Sidebar.tsx
index 5a0d382d..891dcf76 100644
--- a/src/components/common/Sidebar/Sidebar.tsx
+++ b/src/components/common/Sidebar/Sidebar.tsx
@@ -89,6 +89,7 @@ const Sidebar = ({ isSidebarOpen, onClose }: SidebarProps) => {
                   </Button>
                 </div>
                 <Link
+                  prefetch={true}
                   href={`/user/${currentUser.memberId}`}
                   className="mb-2 mt-4 flex items-center px-2 py-2 text-base font-bold text-gray9"
                   onClick={onClose}>
@@ -125,6 +126,7 @@ const Sidebar = ({ isSidebarOpen, onClose }: SidebarProps) => {
                       Object.values(spaces).map(({ spaceId, spaceName }) => (
                         <li key={spaceId}>
                           <Link
+                            prefetch={true}
                             href={`/space/${spaceId}`}
                             className="block px-3 py-1.5 text-sm text-gray9 hover:underline"
                             onClick={onClose}>
@@ -134,6 +136,7 @@ const Sidebar = ({ isSidebarOpen, onClose }: SidebarProps) => {
                       ))}
                   </ul>
                   <Link
+                    prefetch={true}
                     href={`/user/${currentUser.memberId}/space`}
                     className="font-gray6 my-2 block w-full rounded-3xl border border-slate6 px-3 py-2.5 text-center text-sm font-medium text-slate6"
                     onClick={onClose}>
@@ -141,6 +144,7 @@ const Sidebar = ({ isSidebarOpen, onClose }: SidebarProps) => {
                   </Link>
                 </div>
                 <Link
+                  prefetch={true}
                   href="/space/create"
                   className="my-2 flex items-center px-2 py-2 text-base font-bold text-gray9"
                   onClick={onClose}>
@@ -155,6 +159,7 @@ const Sidebar = ({ isSidebarOpen, onClose }: SidebarProps) => {
                 <XMarkIcon className="h-6 w-6" />
               </Button>
               <Link
+                prefetch={true}
                 href={`/login`}
                 className="w-full py-2 text-base font-bold text-gray9"
                 onClick={onClose}>
diff --git a/src/components/common/Space/Space.tsx b/src/components/common/Space/Space.tsx
index 94d4b930..af90df9e 100644
--- a/src/components/common/Space/Space.tsx
+++ b/src/components/common/Space/Space.tsx
@@ -70,6 +70,7 @@ const Space = ({
     <>
       {type === 'Card' ? (
         <Link
+          prefetch={true}
           className="relative flex gap-3 rounded-md border border-slate3 p-2"
           href={`/space/${spaceId}`}>
           {spaceImage && (
diff --git a/src/components/common/Tab/TabItem.tsx b/src/components/common/Tab/TabItem.tsx
index 42560437..4c2ae79f 100644
--- a/src/components/common/Tab/TabItem.tsx
+++ b/src/components/common/Tab/TabItem.tsx
@@ -10,6 +10,7 @@ interface TabItemProps {
 const TabItem = ({ active, text, dest }: TabItemProps) => {
   return (
     <Link
+      prefetch={true}
       style={{ width: '100%' }}
       href={dest}>
       <div
diff --git a/src/components/common/User/User.tsx b/src/components/common/User/User.tsx
index 349d2c09..1f12d29e 100644
--- a/src/components/common/User/User.tsx
+++ b/src/components/common/User/User.tsx
@@ -54,6 +54,7 @@ const User = ({
         </div>
         <div className="flex grow flex-col gap-y-0.5 overflow-hidden py-0.5">
           <Link
+            prefetch={true}
             href={`/user/${memberId}`}
             className="block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold text-gray9">
             {nickname}

From 72a7883d2d922d529abfbe543c624169f5be54e3 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Wed, 24 Jul 2024 01:18:26 +0900
Subject: [PATCH 04/18] =?UTF-8?q?feat:=20#321=20-=20mockData=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/SearchModal/SearchModal.tsx        |   1 -
 .../SearchModal/hooks/useSearchModal.ts       |   3 -
 src/data/index.ts                             | 631 ------------------
 3 files changed, 635 deletions(-)
 delete mode 100644 src/data/index.ts

diff --git a/src/components/common/SearchModal/SearchModal.tsx b/src/components/common/SearchModal/SearchModal.tsx
index a1df3070..49efd6e3 100644
--- a/src/components/common/SearchModal/SearchModal.tsx
+++ b/src/components/common/SearchModal/SearchModal.tsx
@@ -27,7 +27,6 @@ const SearchModal = ({ onClose }: SearchModalProps) => {
     })
   const searchModalRef = useRef<HTMLDivElement>(null)
   const {
-    trends,
     handleOverlayClick,
     handleTargetChange,
     handleKeywordClick,
diff --git a/src/components/common/SearchModal/hooks/useSearchModal.ts b/src/components/common/SearchModal/hooks/useSearchModal.ts
index 0d29acfe..6bf207b8 100644
--- a/src/components/common/SearchModal/hooks/useSearchModal.ts
+++ b/src/components/common/SearchModal/hooks/useSearchModal.ts
@@ -4,7 +4,6 @@ import {
   UseFormSetFocus,
   UseFormSetValue,
 } from 'react-hook-form'
-import { mock_trendData } from '@/data'
 import { useRouter } from 'next/navigation'
 import { notify } from '../../Toast/Toast'
 import { SearchFormValues } from '../SearchModal'
@@ -23,7 +22,6 @@ const useSearchModal = ({
   onClose,
 }: useSearchModalProps) => {
   const router = useRouter()
-  const trends = mock_trendData
 
   useEffect(() => {
     setFocus('search')
@@ -53,7 +51,6 @@ const useSearchModal = ({
   }
 
   return {
-    trends,
     handleTargetChange,
     handleKeywordClick,
     handleOverlayClick,
diff --git a/src/data/index.ts b/src/data/index.ts
deleted file mode 100644
index 8ba6007c..00000000
--- a/src/data/index.ts
+++ /dev/null
@@ -1,631 +0,0 @@
-import { User } from '@/types'
-
-export const mock_LinkData = [
-  {
-    id: 1,
-    title: '자바스크립트 클로저를 활용하는 방법 말줄임표 확인하는 제목입니다',
-    url: 'https://naver.com',
-    tagName: '개발',
-    tagColor: 'pink',
-    readUsers: [
-      { id: 'user1', profile: '/duck.jpg' },
-      { id: 'user2', profile: '/duck.jpg' },
-      { id: 'user3', profile: '/duck.jpg' },
-      { id: 'user4', profile: '/duck.jpg' },
-      { id: 'user5', profile: '/duck.jpg' },
-    ],
-    isLiked: false,
-    likeCount: 7,
-  },
-  {
-    id: 2,
-    title: '링크 제목',
-    url: 'https://github.com',
-    tagName: '오둥이',
-    tagColor: 'pink',
-    readUsers: [
-      { id: 'user6', profile: '/duck.jpg' },
-      { id: 'user7', profile: '/duck.jpg' },
-      { id: 'user8', profile: '/duck.jpg' },
-      { id: 'user9', profile: '/duck.jpg' },
-      { id: 'user10', profile: '/duck.jpg' },
-    ],
-    isLiked: true,
-    likeCount: 5,
-  },
-  {
-    id: 3,
-    title: '링크 제목',
-    url: 'https://programmers.co.kr',
-    tagName: '데브코스',
-    tagColor: 'pink',
-    readUsers: [
-      { id: 'user11', profile: '/duck.jpg' },
-      { id: 'user12', profile: '/duck.jpg' },
-      { id: 'user13', profile: '/duck.jpg' },
-      { id: 'user14', profile: '/duck.jpg' },
-      { id: 'user15', profile: '/duck.jpg' },
-    ],
-    isLiked: false,
-    likeCount: 1,
-  },
-  {
-    id: 4,
-    title: '링크 제목',
-    url: 'https://nextjs.org/docs/app/api-reference/components/link',
-    tagName: '개발',
-    tagColor: 'pink',
-    readUsers: [
-      { id: 'user16', profile: '/duck.jpg' },
-      { id: 'user17', profile: '/duck.jpg' },
-      { id: 'user18', profile: '/duck.jpg' },
-      { id: 'user19', profile: '/duck.jpg' },
-      { id: 'user20', profile: '/duck.jpg' },
-    ],
-    isLiked: true,
-    likeCount: 2,
-  },
-  {
-    id: 5,
-    title: '링크 제목',
-    url: 'https://tailwindcss.com/docs/installation',
-    tagName: '개발',
-    tagColor: 'pink',
-    readUsers: [
-      { id: 'user21', profile: '/duck.jpg' },
-      { id: 'user22', profile: '/duck.jpg' },
-      { id: 'user23', profile: '/duck.jpg' },
-      { id: 'user24', profile: '/duck.jpg' },
-      { id: 'user25', profile: '/duck.jpg' },
-    ],
-    isLiked: false,
-    likeCount: 5,
-  },
-  {
-    id: 6,
-    title:
-      '자바스크립트 클로저를 활용하는 방법 말줄임표 확인하는 제목입니다 자바스크립트 클로저를 활용하는 방법 말줄임표 확인하는 제목입니다',
-    url: 'https://velog.io/',
-    tagName: '개발',
-    tagColor: 'pink',
-    readUsers: [],
-    isLiked: true,
-    likeCount: 3,
-  },
-]
-
-export const mock_memberData = [
-  {
-    memberId: 1,
-    nickname: '오둥이',
-    aboutMe: '안녕하세요',
-    profilePath: '/duck.jpg',
-    SpaceMemberRole: 'OWNER',
-  },
-  {
-    memberId: 2,
-    nickname: '백둥이',
-    aboutMe: '안녕하세요',
-    profilePath: '/duck.jpg',
-    SpaceMemberRole: 'CANVIEW',
-  },
-  {
-    memberId: 3,
-    nickname: '풀택이',
-    aboutMe: '안녕하세요',
-    profilePath: '/duck.jpg',
-    SpaceMemberRole: 'CANVIEW',
-  },
-]
-
-export const mock_userData: User = {
-  id: '3',
-  name: '프롱이',
-  profile: '/duck.jpg',
-  category: 'ENTER_ART',
-  newsLetter: false,
-  email: 'abc@gmail.com',
-  description: '쇼핑 정보를 모으고 있어요!',
-  follower: 138,
-  following: 182,
-  mySpaces: [
-    {
-      name: 'My Space 1',
-      id: 'my-space-1',
-    },
-    {
-      name: 'My Space 2',
-      id: 'my-space-2',
-    },
-    {
-      name: 'My Space 3',
-      id: 'my-space-3',
-    },
-    {
-      name: 'My Space 4',
-      id: 'my-space-4',
-    },
-    {
-      name: 'My Space 5',
-      id: 'my-space-5',
-    },
-  ],
-  favoriteSpaces: [
-    {
-      name: 'Favorite Space 1',
-      id: 'favorite-space-1',
-    },
-    {
-      name: 'Favorite Space 2',
-      id: 'favorite-space-2',
-    },
-    {
-      name: 'Favorite Space 3',
-      id: 'favorite-space-3',
-    },
-    {
-      name: 'Favorite Space 4',
-      id: 'favorite-space-4',
-    },
-    {
-      name: 'Favorite Space 5',
-      id: 'favorite-space-5',
-    },
-  ],
-}
-
-export const mock_userData2 = {
-  id: 6,
-  name: '프롱이',
-  profile: '/duck.jpg',
-  email: 'abc@gmail.com',
-  category: '생활•노하우•쇼핑',
-  description: '쇼핑 정보를 모으고 있어요!',
-  follower: [
-    {
-      userId: 1,
-      userName: '백둥이',
-      profile: '/duck.jpg',
-      description: '안녕 난 백둥이',
-      isFollow: false,
-    },
-    {
-      userId: 2,
-      userName: '풀택이',
-      profile: '/duck.jpg',
-      description: '안녕 난 풀택이',
-      isFollow: true,
-    },
-    {
-      userId: 3,
-      userName: '오둥이',
-      profile: '/duck.jpg',
-      description: '안녕 난 오둥이',
-      isFollow: false,
-    },
-    {
-      userId: 123,
-      userName: '프롱이',
-      profile: '/duck.jpg',
-      description: '안녕 난 프롱이',
-      isFollow: false,
-    },
-  ],
-
-  following: [
-    {
-      userId: 1,
-      userName: '육둥이',
-      profile: '/duck.jpg',
-      description: '안녕 난 육둥이',
-      isFollow: false,
-    },
-    {
-      userId: 2,
-      userName: '칠둥이',
-      profile: '/duck.jpg',
-      description: '안녕 난 칠둥이',
-      isFollow: true,
-    },
-    {
-      userId: 3,
-      userName: '팔둥이',
-      profile: '/duck.jpg',
-      description: '안녕 난 팔둥이',
-      isFollow: false,
-    },
-    {
-      userId: 123,
-      userName: '프롱이',
-      profile: '/duck.jpg',
-      description: '안녕 난 프롱이',
-      isFollow: false,
-    },
-  ],
-  mySpaces: [
-    {
-      userName: '프롱이',
-      spaceId: 1,
-      spaceImage: '/TestImage.svg',
-      spaceName: '강남역 맛집 리스트 모음 스페이스',
-      description: '내 기준 강남역에서 맛있는 맛집 링크 모음집',
-      category: '생활•노하우•쇼핑',
-      favorite: 60,
-      scrap: 40,
-      comment: true,
-    },
-    {
-      userName: '프롱이',
-      spaceId: 2,
-      spaceImage: '/TestImage.svg',
-      spaceName: '홍대역 맛집 리스트 모음 스페이스',
-      description: '내 기준 홍대역에서 맛있는 맛집 링크 모음집',
-      category: '생활•노하우•쇼핑',
-      favorite: 50,
-      scrap: 40,
-      comment: true,
-    },
-    {
-      userName: '프롱이',
-      spaceId: 3,
-      spaceImage: '/TestImage.svg',
-      spaceName: '구리역 맛집 리스트 모음 스페이스',
-      description: '내 기준 구리역에서 맛있는 맛집 링크 모음집',
-      category: '생활•노하우•쇼핑',
-      favorite: 40,
-      scrap: 40,
-      comment: true,
-    },
-    {
-      userName: '프롱이',
-      spaceId: 4,
-      spaceImage: '/TestImage.svg',
-      spaceName: '신촌역 맛집 리스트 모음 스페이스',
-      description: '내 기준 신촌역에서 맛있는 맛집 링크 모음집',
-      category: '생활•노하우•쇼핑',
-      favorite: 30,
-      scrap: 40,
-      comment: true,
-    },
-    {
-      userName: '프롱이',
-      spaceId: 5,
-      spaceImage: '/TestImage.svg',
-      spaceName: '수원역 맛집 리스트 모음 스페이스',
-      description: '내 기준 수원역에서 맛있는 맛집 링크 모음집',
-      category: '생활•노하우•쇼핑',
-      favorite: 20,
-      scrap: 40,
-      comment: true,
-    },
-  ],
-  favoriteSpaces: [
-    {
-      userName: '백둥이',
-      spaceId: 1,
-      spaceImage: '/TestImage.svg',
-      spaceName: '스프링 지식 모음 스페이스',
-      description: '스프링 관련 링크 모음집',
-      category: '생활•노하우•쇼핑',
-      favorite: 60,
-      scrap: 40,
-      comment: true,
-    },
-    {
-      userName: '백둥이',
-      spaceId: 2,
-      spaceImage: '/TestImage.svg',
-      spaceName: '코틀린 지식 모음 스페이스',
-      description: '코틀린 관련 링크 모음집',
-      category: '생활•노하우•쇼핑',
-      favorite: 50,
-      scrap: 40,
-      comment: true,
-    },
-    {
-      userName: '풀택이',
-      spaceId: 3,
-      spaceImage: '/TestImage.svg',
-      spaceName: '클린 코드 모음 스페이스',
-      description: '클린 코드 관련 링크 모음집',
-      category: '생활•노하우•쇼핑',
-      favorite: 40,
-      scrap: 40,
-      comment: true,
-    },
-    {
-      userName: '백둥이',
-      spaceId: 4,
-      spaceImage: '/TestImage.svg',
-      spaceName: '객체지향 모음 스페이스',
-      description: '객체지향 관련 링크 모음집',
-      category: '생활•노하우•쇼핑',
-      favorite: 30,
-      scrap: 40,
-      comment: true,
-    },
-    {
-      userName: '풀택이',
-      spaceId: 5,
-      spaceImage: '/TestImage.svg',
-      spaceName: '알고리즘 모음 스페이스',
-      description: '알고리즘 관련 링크 모음집',
-      category: '생활•노하우•쇼핑',
-      favorite: 20,
-      scrap: 40,
-      comment: true,
-    },
-  ],
-}
-
-export const mock_spaceData = {
-  spaceId: 108,
-  spaceName: '강남역 맛집 리스트 모음 스페이스',
-  description: '내 기준 강남역에서 맛있는 맛집 링크 모음집',
-  category: 'ENTER_ART',
-  isVisible: true,
-  isComment: true,
-  isLinkSummarizable: true,
-  isReadMarkEnabled: true,
-  viewCount: 0,
-  scrapCount: 0,
-  favoriteCount: 0,
-  spaceImagePath: '/TestImage.svg',
-  isOwner: true,
-  isCanEdit: true,
-  hasFavorite: true,
-  memberDetailInfos: [
-    {
-      memberId: 0,
-      nickname: 'string',
-      aboutMe: 'string',
-      profilePath: 'string',
-      SpaceMemberRole: 'OWNER',
-    },
-  ],
-}
-
-export const mock_notificationData: {
-  id: number
-  notificationType: 'COMMENT' | 'FOLLOW' | 'INVITATION'
-  userId: number
-  userName: string
-  spaceId?: number
-  spaceName?: string
-  isRead: boolean
-  isAccept?: boolean
-}[] = [
-  {
-    id: 1,
-    notificationType: 'FOLLOW',
-    userId: 1,
-    userName: '프롱이',
-    isRead: false,
-  },
-  {
-    id: 2,
-    notificationType: 'COMMENT',
-    userId: 1,
-    userName: '프롱이',
-    spaceId: 123,
-    spaceName: '리액트 모음집',
-    isRead: false,
-    isAccept: false,
-  },
-  {
-    id: 3,
-    notificationType: 'COMMENT',
-    userId: 1,
-    userName: '백둥이',
-    spaceId: 456,
-    spaceName: '스프링',
-    isRead: false,
-    isAccept: false,
-  },
-  {
-    id: 4,
-    notificationType: 'FOLLOW',
-    userId: 1,
-    userName: '백둥이',
-    isRead: true,
-  },
-  {
-    id: 5,
-    notificationType: 'COMMENT',
-    userId: 1,
-    userName: '풀택이',
-    spaceId: 789,
-    spaceName: '풀스택 지식 모음집',
-    isRead: true,
-    isAccept: false,
-  },
-]
-
-export const mock_notificationInviteData: {
-  id: number
-  type: 'comment' | 'follow' | 'space'
-  userId: number
-  userName: string
-  spaceId?: number
-  spaceName?: string
-  isRead: boolean
-  isAccept?: boolean
-}[] = [
-  {
-    id: 3,
-    type: 'space',
-    userId: 1,
-    userName: '프롱이',
-    spaceId: 123,
-    spaceName: '개발 모음',
-    isRead: false,
-    isAccept: false,
-  },
-  {
-    id: 4,
-    type: 'space',
-    userId: 1,
-    userName: '백둥이',
-    spaceId: 123,
-    spaceName: '스프링',
-    isRead: false,
-    isAccept: false,
-  },
-  {
-    id: 5,
-    type: 'space',
-    userId: 1,
-    userName: '풀택이',
-    spaceId: 123,
-    spaceName: '풀스택 지식 모음집',
-    isRead: true,
-    isAccept: true,
-  },
-]
-
-export const mock_commentData = [
-  {
-    commentId: 1,
-    user: { id: 1, name: '프롱이', profile: '/duck.jpg' },
-    comment: '어쩌구',
-    date: new Date(),
-    auth: true,
-    replyCount: 0,
-  },
-  {
-    commentId: 2,
-    user: { id: 2, name: '백둥이', profile: '/duck.jpg' },
-    comment: '저쩌구',
-    date: new Date(),
-    auth: false,
-    replyCount: 2,
-  },
-]
-
-export const mock_replyData = [
-  {
-    commentId: 3,
-    user: { id: 3, name: '풀택이', profile: '/duck.jpg' },
-    comment: '쏼라쏼라',
-    date: new Date(),
-    auth: false,
-  },
-  {
-    commentId: 4,
-    user: { id: 1, name: '프롱이', profile: '/duck.jpg' },
-    comment: '훌라훌라',
-    date: new Date(),
-    auth: true,
-  },
-]
-
-export const mock_trendData = [
-  {
-    keyword: '어쩌구',
-  },
-  {
-    keyword: '저쩌구',
-  },
-  {
-    keyword: '쏼라쏼라',
-  },
-  {
-    keyword: '훌라훌라',
-  },
-  {
-    keyword: '나하항',
-  },
-]
-
-export const mock_usersData = [
-  {
-    id: 1,
-    name: 'dudwns',
-    oneLiner: '안녕하세요',
-    profile: '/duck.jpg',
-    isFollow: true,
-  },
-  {
-    id: 2,
-    name: 'bomi',
-    oneLiner: '안녕하세요',
-    profile: '/duck.jpg',
-    isFollow: false,
-  },
-  {
-    id: 3,
-    name: '프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱이',
-    oneLiner:
-      '안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요',
-    profile: '/duck.jpg',
-  },
-]
-
-export const mock_spacesData = [
-  {
-    userName: 'frong',
-    spaceId: 123,
-    spaceImage: '/TestImage.svg',
-    spaceName: '강남역 맛집 리스트 모음 스페이스',
-    description: '내 기준 강남역에서 맛있는 맛집 링크 모음집',
-    category: '생활•노하우•쇼핑',
-    favorite: 60,
-    scrap: 40,
-    comment: true,
-  },
-  {
-    userName: 'backdung',
-    spaceId: 456,
-    spaceImage: '/TestImage.svg',
-    spaceName: '역삼역 맛집 리스트 모음 스페이스',
-    description: '내 기준 역삼역에서 맛있는 맛집 링크 모음집',
-    category: '생활•노하우•쇼핑',
-    favorite: 0,
-    scrap: 10,
-    comment: true,
-  },
-  {
-    userName: '프롱',
-    spaceId: 0,
-    spaceImage: '/TestImage.svg',
-    spaceName: '삼성역 맛집 리스트 모음 스페이스',
-    description: '내 기준 삼성역에서 맛있는 맛집 링크 모음집',
-    category: '생활•노하우•쇼핑',
-    favorite: 99,
-    scrap: 24,
-    comment: true,
-  },
-  {
-    userName: '백둥',
-    spaceId: 1,
-    spaceImage: '/TestImage.svg',
-    spaceName: '삼성역 맛집 리스트 모음 스페이스',
-    description: '내 기준 삼성역에서 맛있는 맛집 링크 모음집',
-    category: '생활•노하우•쇼핑',
-    favorite: 99,
-    scrap: 24,
-    comment: true,
-  },
-  {
-    userName: '머쓱',
-    spaceId: 2,
-    spaceImage: '/TestImage.svg',
-    spaceName: '삼성역 맛집 리스트 모음 스페이스',
-    description: '내 기준 삼성역에서 맛있는 맛집 링크 모음집',
-    category: '생활•노하우•쇼핑',
-    favorite: 99,
-    scrap: 24,
-    comment: true,
-  },
-  {
-    userName: '타드',
-    spaceId: 3,
-    spaceImage: '/TestImage.svg',
-    spaceName: '삼성역 맛집 리스트 모음 스페이스',
-    description: '내 기준 삼성역에서 맛있는 맛집 링크 모음집',
-    category: '생활•노하우•쇼핑',
-    favorite: 99,
-    scrap: 24,
-    comment: true,
-  },
-]

From de693984c18b39468b5636fc6c81470e64bb8243 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Tue, 30 Jul 2024 18:59:55 +0900
Subject: [PATCH 05/18] =?UTF-8?q?feat:=20#321=20-=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20suspense=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx                              | 105 +++++++-----------
 .../PopularLinkList/PopularLinkList.tsx       |  64 +++++++++++
 .../PopularLinkList/PopularLinkSkeleton.tsx   |  36 ++++++
 .../hooks/useGetPopularLinks.ts               |  11 ++
 .../SpaceList/hooks/useMainSpacesQuery.ts     |  81 ++++++++------
 .../common/MainSpaceList/MainSpaceList.tsx    |   9 +-
 src/hooks/useGetPopularLinks.ts               |  23 ----
 7 files changed, 194 insertions(+), 135 deletions(-)
 create mode 100644 src/components/PopularLinkList/PopularLinkList.tsx
 create mode 100644 src/components/PopularLinkList/PopularLinkSkeleton.tsx
 create mode 100644 src/components/PopularLinkList/hooks/useGetPopularLinks.ts
 delete mode 100644 src/hooks/useGetPopularLinks.ts

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 051c365e..d7b79c6e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,84 +1,49 @@
 '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 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 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 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>
+        <Spinner />
+      </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]">
+          {/* <PopularLinkList /> */}
+          <DynamicPopularLinkList />
+        </div>
       </section>
       <section>
         <div className="sticky top-[53px] z-40 bg-bgColor">
@@ -97,7 +62,13 @@ export default function Home() {
             onChange={handleCategoryChange}
           />
         </div>
-        <MainSpaceList
+        {/* <MainSpaceList
+          queryKey="main"
+          sort={sort ?? ''}
+          category={category ?? ''}
+          fetchFn={fetchGetSpaces}
+        /> */}
+        <DynamicMainSpaceList
           queryKey="main"
           sort={sort ?? ''}
           category={category ?? ''}
diff --git a/src/components/PopularLinkList/PopularLinkList.tsx b/src/components/PopularLinkList/PopularLinkList.tsx
new file mode 100644
index 00000000..d704ca84
--- /dev/null
+++ 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
new file mode 100644
index 00000000..5251b030
--- /dev/null
+++ 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
new file mode 100644
index 00000000..30225bf5
--- /dev/null
+++ 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/SpaceList/hooks/useMainSpacesQuery.ts b/src/components/SpaceList/hooks/useMainSpacesQuery.ts
index 6517a488..0bdb9d7f 100644
--- a/src/components/SpaceList/hooks/useMainSpacesQuery.ts
+++ b/src/components/SpaceList/hooks/useMainSpacesQuery.ts
@@ -1,6 +1,9 @@
 import { PAGE_SIZE } from '@/constants'
 import { SpaceResBody } from '@/types'
-import { useInfiniteQuery } from '@tanstack/react-query'
+import {
+  useInfiniteQuery,
+  useSuspenseInfiniteQuery,
+} from '@tanstack/react-query'
 import { SpaceListProps } from '../SpaceList'
 
 interface MainSpacePageType {
@@ -27,44 +30,48 @@ const useMainSpacesQuery = ({
         : 'created_at'
       : undefined
   const categoryValue = category === 'all' ? '' : category.toUpperCase()
-  const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
-    queryKey: [
-      'spaces',
-      queryKey,
-      {
-        ...(memberId && { memberId: memberId }),
-        ...(sortValue && { sort: sortValue }),
-        category: categoryValue,
-        keyword,
+  const { data, fetchNextPage, hasNextPage, isLoading } =
+    useSuspenseInfiniteQuery({
+      queryKey: [
+        'spaces',
+        queryKey,
+        {
+          ...(memberId && { memberId: memberId }),
+          ...(sortValue && { sort: sortValue }),
+          category: categoryValue,
+          keyword,
+        },
+      ],
+      queryFn: ({ pageParam }) =>
+        fetchFn({
+          memberId,
+          lastFavoriteCount: pageParam.lastFavoriteCount,
+          lastSpaceId: pageParam.lastSpaceId,
+          pageSize: PAGE_SIZE,
+          sort: sortValue,
+          filter: categoryValue,
+          keyWord: keyword,
+        }),
+      initialPageParam: {
+        lastSpaceId: undefined,
+        lastFavoriteCount: undefined,
       },
-    ],
-    queryFn: ({ pageParam }) =>
-      fetchFn({
-        memberId,
-        lastFavoriteCount: pageParam.lastFavoriteCount,
-        lastSpaceId: pageParam.lastSpaceId,
-        pageSize: PAGE_SIZE,
-        sort: sortValue,
-        filter: categoryValue,
-        keyWord: keyword,
-      }),
-    initialPageParam: { lastSpaceId: undefined, lastFavoriteCount: undefined },
-    getNextPageParam: (
-      lastPage: MainSpacePageType,
-    ):
-      | {
-          lastSpaceId: number | undefined
-          lastFavoriteCount: number | undefined
-        }
-      | undefined => {
-      return lastPage.metaData?.hasNext
-        ? {
-            lastSpaceId: lastPage.metaData.lastId,
-            lastFavoriteCount: lastPage.metaData.lastFavoriteCount,
+      getNextPageParam: (
+        lastPage: MainSpacePageType,
+      ):
+        | {
+            lastSpaceId: number | undefined
+            lastFavoriteCount: number | undefined
           }
-        : undefined
-    },
-  })
+        | undefined => {
+        return lastPage.metaData?.hasNext
+          ? {
+              lastSpaceId: lastPage.metaData.lastId,
+              lastFavoriteCount: lastPage.metaData.lastFavoriteCount,
+            }
+          : undefined
+      },
+    })
 
   return {
     spaces: data,
diff --git a/src/components/common/MainSpaceList/MainSpaceList.tsx b/src/components/common/MainSpaceList/MainSpaceList.tsx
index f67f3201..e6844ffb 100644
--- a/src/components/common/MainSpaceList/MainSpaceList.tsx
+++ b/src/components/common/MainSpaceList/MainSpaceList.tsx
@@ -6,11 +6,8 @@ import useMainSpacesQuery from '@/components/SpaceList/hooks/useMainSpacesQuery'
 import { CATEGORIES_RENDER } from '@/constants'
 import useInfiniteScroll from '@/hooks/useInfiniteScroll'
 import { SearchSpaceReqBody, SpaceResBody } from '@/types'
-import Button from '../Button/Button'
-import DeferredComponent from '../DeferedComponent/DeferedComponent'
 import { MORE_TEXT } from '../LinkList/constants'
 import Space from '../Space/Space'
-import Spinner from '../Spinner/Spinner'
 
 export interface SpaceListProps {
   memberId?: number
@@ -50,11 +47,7 @@ const MainSpaceList = ({
 
   const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage })
 
-  return isSpacesLoading ? (
-    <DeferredComponent>
-      <Spinner />
-    </DeferredComponent>
-  ) : (
+  return (
     <>
       <ul
         className=" mb-4 grid gap-4 gap-y-2 px-4 pt-2"
diff --git a/src/hooks/useGetPopularLinks.ts b/src/hooks/useGetPopularLinks.ts
deleted file mode 100644
index d29bcddd..00000000
--- a/src/hooks/useGetPopularLinks.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useEffect, useState } from 'react'
-import { fetchGetPopularLinks } from '@/services/link/link'
-import { PopularLinkResBody } from '@/types'
-
-const useGetPopularLinks = () => {
-  const [links, setLinks] = useState<PopularLinkResBody[]>()
-  const [isLoading, setIsLoading] = useState(false)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      setIsLoading(true)
-      const data = await fetchGetPopularLinks()
-      const linkData = data.responses
-      setLinks(linkData)
-      setIsLoading(false)
-    }
-    fetchData()
-  }, [setIsLoading])
-
-  return { links, isPopularLinksLoading: isLoading }
-}
-
-export default useGetPopularLinks

From b02106c0e856c80c30c13585ccc46b3ee7507425 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Tue, 30 Jul 2024 19:05:05 +0900
Subject: [PATCH 06/18] =?UTF-8?q?feat:=20#321=20-=20=EB=B8=94=EB=9F=AC=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Space/SpaceForm.tsx      | 2 --
 src/components/common/Avatar/Avatar.tsx | 2 --
 src/components/common/Space/Space.tsx   | 4 ----
 3 files changed, 8 deletions(-)

diff --git a/src/components/Space/SpaceForm.tsx b/src/components/Space/SpaceForm.tsx
index c6ea8bee..9ac3204b 100644
--- 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">
diff --git a/src/components/common/Avatar/Avatar.tsx b/src/components/common/Avatar/Avatar.tsx
index 0df2bc7e..12a37789 100644
--- a/src/components/common/Avatar/Avatar.tsx
+++ b/src/components/common/Avatar/Avatar.tsx
@@ -22,8 +22,6 @@ const Avatar = ({ src, alt, className }: AvatarProps) => {
         className,
         'rounded-full border border-slate3 object-cover',
       )}
-      placeholder="blur"
-      blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII="
     />
   )
 }
diff --git a/src/components/common/Space/Space.tsx b/src/components/common/Space/Space.tsx
index af90df9e..44ec0f11 100644
--- a/src/components/common/Space/Space.tsx
+++ b/src/components/common/Space/Space.tsx
@@ -80,8 +80,6 @@ const Space = ({
               src={spaceImage || ''}
               alt="space-image"
               fill
-              placeholder="blur"
-              blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII="
               sizes="(max-width: 768px) 22vw, (max-width: 1200px) 100px, 110px"
             />
           )}
@@ -120,8 +118,6 @@ const Space = ({
             src={spaceImage || ''}
             alt="space-image"
             fill
-            placeholder="blur"
-            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII="
           />
           <div className="flex justify-end gap-2">
             <Button

From 1fac745f9ab4df36dda5b28fb7e2bf7cb3eb4f7b Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Thu, 1 Aug 2024 19:12:28 +0900
Subject: [PATCH 07/18] =?UTF-8?q?feat:=20#321=20-=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EC=8A=A4=EC=BC=88?=
 =?UTF-8?q?=EB=A0=88=ED=86=A4=ED=86=A4UI=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx                              | 12 +---
 .../PopularLinkList/PopularLinkList.tsx       | 66 +++++++++++++++++++
 .../MainSpaceList/MainSpaceSkeleton.tsx       | 40 +++++++++++
 3 files changed, 108 insertions(+), 10 deletions(-)
 create mode 100644 src/components/PopularLink/PopularLinkList/PopularLinkList.tsx
 create mode 100644 src/components/common/MainSpaceList/MainSpaceSkeleton.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d7b79c6e..a48750c5 100644
--- a/src/app/page.tsx
+++ b/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 ?? ''}
diff --git a/src/components/PopularLink/PopularLinkList/PopularLinkList.tsx b/src/components/PopularLink/PopularLinkList/PopularLinkList.tsx
new file mode 100644
index 00000000..42fb2768
--- /dev/null
+++ 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/common/MainSpaceList/MainSpaceSkeleton.tsx b/src/components/common/MainSpaceList/MainSpaceSkeleton.tsx
new file mode 100644
index 00000000..97168e5b
--- /dev/null
+++ b/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

From 1651668ecd5b94f4c807088d0b6fa3d333049d65 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Sat, 3 Aug 2024 19:36:49 +0900
Subject: [PATCH 08/18] =?UTF-8?q?chore:=20#324=20-=20react=20=EB=B2=84?=
 =?UTF-8?q?=EC=A0=84=2018.0.0=EC=97=90=EC=84=9C=2018.2.0=EB=A1=9C=20?=
 =?UTF-8?q?=EC=97=85=EA=B7=B8=EB=A0=88=EC=9D=B4=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 4 ++--
 package.json      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a7a41c83..2a461131 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,8 +21,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/package.json b/package.json
index caf04a8f..99e3d9d0 100644
--- 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",

From d316df3ea33b4ee98797f79968f780b31262bed1 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Sat, 3 Aug 2024 20:00:41 +0900
Subject: [PATCH 09/18] =?UTF-8?q?feat:=20#324=20-=20=EC=9D=B8=EA=B8=B0?=
 =?UTF-8?q?=EB=A7=81=ED=81=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20hyd?=
 =?UTF-8?q?ration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx                              | 28 ++++++++++---------
 .../HydratePopularLinkList.tsx                | 21 ++++++++++++++
 .../PopularLinkListController.tsx             | 26 +++++++++++++++++
 .../hooks/useGetPopularLinks.ts               |  2 +-
 src/lib/queryClient.ts                        |  5 ++++
 5 files changed, 68 insertions(+), 14 deletions(-)
 create mode 100644 src/components/PopularLinkList/HydratePopularLinkList.tsx
 create mode 100644 src/components/PopularLinkList/PopularLinkListController.tsx
 create mode 100644 src/lib/queryClient.ts

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a48750c5..5b15de7a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,23 +2,24 @@
 
 import { CategoryList, Dropdown, Spinner } from '@/components'
 import FloatingButton from '@/components/FloatingButton/FloatingButton'
-import PopularLinkSkeleton from '@/components/PopularLinkList/PopularLinkSkeleton'
+import HydratePopularLinkList from '@/components/PopularLinkList/HydratePopularLinkList'
+// import PopularLinkSkeleton from '@/components/PopularLinkList/PopularLinkSkeleton'
 import DeferredComponent from '@/components/common/DeferedComponent/DeferedComponent'
 import MainSpaceSkeleton from '@/components/common/MainSpaceList/MainSpaceSkeleton'
 import { useCategoryParam, useSortParam } from '@/hooks'
 import { fetchGetSpaces } from '@/services/space/spaces'
 import dynamic from 'next/dynamic'
 
-const DynamicPopularLinkList = dynamic(
-  () => import('@/components/PopularLinkList/PopularLinkList'),
-  {
-    loading: () => (
-      <DeferredComponent>
-        <PopularLinkSkeleton />
-      </DeferredComponent>
-    ),
-  },
-)
+// const DynamicPopularLinkList = dynamic(
+//   () => import('@/components/PopularLinkList/PopularLinkList'),
+//   {
+//     loading: () => (
+//       <DeferredComponent>
+//         <PopularLinkSkeleton />
+//       </DeferredComponent>
+//     ),
+//   },
+// )
 const DynamicMainSpaceList = dynamic(
   () => import('@/components/common/MainSpaceList/MainSpaceList'),
   {
@@ -37,12 +38,13 @@ export default function Home() {
 
   return (
     <>
-      <section className="px-4 pb-8">
+      {/* <section className="px-4 pb-8">
         <h2 className="py-4 font-bold text-gray9">인기있는 링크</h2>
         <div className="min-h-[101.5px]">
           <DynamicPopularLinkList />
         </div>
-      </section>
+      </section> */}
+      <HydratePopularLinkList />
       <section>
         <div className="sticky top-[53px] z-40 bg-bgColor">
           <div className="flex items-center justify-between px-4 pt-2">
diff --git a/src/components/PopularLinkList/HydratePopularLinkList.tsx b/src/components/PopularLinkList/HydratePopularLinkList.tsx
new file mode 100644
index 00000000..49323fdd
--- /dev/null
+++ b/src/components/PopularLinkList/HydratePopularLinkList.tsx
@@ -0,0 +1,21 @@
+import getQueryClient from '@/lib/queryClient'
+import { fetchGetPopularLinks } from '@/services/link/link'
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query'
+import PopularLinkListController from './PopularLinkListController'
+
+const HydratePopularLinkList = async () => {
+  const queryClient = getQueryClient()
+  await queryClient.prefetchQuery({
+    queryKey: ['useGetPopularLinks'],
+    queryFn: () => fetchGetPopularLinks(),
+  })
+  const dehydratedState = dehydrate(queryClient)
+
+  return (
+    <HydrationBoundary state={dehydratedState}>
+      <PopularLinkListController />
+    </HydrationBoundary>
+  )
+}
+
+export default HydratePopularLinkList
diff --git a/src/components/PopularLinkList/PopularLinkListController.tsx b/src/components/PopularLinkList/PopularLinkListController.tsx
new file mode 100644
index 00000000..aee33a22
--- /dev/null
+++ b/src/components/PopularLinkList/PopularLinkListController.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import DeferredComponent from '../common/DeferedComponent/DeferedComponent'
+import PopularLinkSkeleton from './PopularLinkSkeleton'
+
+const DynamicPopularLinkList = dynamic(() => import('./PopularLinkList'), {
+  loading: () => (
+    <DeferredComponent>
+      <PopularLinkSkeleton />
+    </DeferredComponent>
+  ),
+})
+
+const PopularLinkListController = () => {
+  return (
+    <section className="px-4 pb-8">
+      <h2 className="py-4 font-bold text-gray9">인기있는 링크</h2>
+      <div className="min-h-[101.5px]">
+        <DynamicPopularLinkList />
+      </div>
+    </section>
+  )
+}
+
+export default PopularLinkListController
diff --git a/src/components/PopularLinkList/hooks/useGetPopularLinks.ts b/src/components/PopularLinkList/hooks/useGetPopularLinks.ts
index 30225bf5..5bd8eb12 100644
--- a/src/components/PopularLinkList/hooks/useGetPopularLinks.ts
+++ b/src/components/PopularLinkList/hooks/useGetPopularLinks.ts
@@ -4,7 +4,7 @@ import { useSuspenseQuery } from '@tanstack/react-query'
 const useGetPopularLinks = () => {
   return useSuspenseQuery({
     queryKey: ['popularLinks'],
-    queryFn: () => fetchGetPopularLinks(),
+    queryFn: async () => await fetchGetPopularLinks(),
   })
 }
 
diff --git a/src/lib/queryClient.ts b/src/lib/queryClient.ts
new file mode 100644
index 00000000..34ef3e2a
--- /dev/null
+++ b/src/lib/queryClient.ts
@@ -0,0 +1,5 @@
+import { cache } from 'react'
+import { QueryClient } from '@tanstack/react-query'
+
+const getQueryClient = cache(() => new QueryClient())
+export default getQueryClient

From 7e74e5029c77337d10034cf986c8145568cdc627 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Fri, 9 Aug 2024 02:16:06 +0900
Subject: [PATCH 10/18] =?UTF-8?q?feat:=20#324=20-=20Provider=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A7=88=EC=9A=B4=ED=8A=B8?=
 =?UTF-8?q?=EC=9D=B4=EC=A0=84=20null=20=EB=A6=AC=ED=84=B4=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Providers/Providers.tsx | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/Providers/Providers.tsx b/src/components/Providers/Providers.tsx
index 2e08beaf..6e228838 100644
--- a/src/components/Providers/Providers.tsx
+++ b/src/components/Providers/Providers.tsx
@@ -1,20 +1,9 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { ThemeProvider } from 'next-themes'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
-  const [isMount, setMount] = useState(false)
-
-  useEffect(() => {
-    setMount(true)
-  }, [])
-
-  if (!isMount) {
-    return null
-  }
-
-  return <ThemeProvider attribute="class">{children}</ThemeProvider>
+  return <NextThemesProvider attribute="class">{children}</NextThemesProvider>
 }
 
 export default Providers

From ffee84f6d056e4ed3468920466eea3ab077dfc1a Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Fri, 9 Aug 2024 02:21:41 +0900
Subject: [PATCH 11/18] =?UTF-8?q?feat:=20#324=20-=20=EC=9D=B8=EA=B8=B0?=
 =?UTF-8?q?=EB=A7=81=ED=81=AC=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=88=ED=99=94=20=EB=B0=8F=20fetch=20=EC=A0=9C=EC=99=B8=20s?=
 =?UTF-8?q?sr=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PopularLinkList/PopularLinkList.tsx          | 6 ++++--
 .../PopularLinkList/PopularLinkListController.tsx           | 1 +
 src/components/PopularLinkList/hooks/useGetPopularLinks.ts  | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/PopularLinkList/PopularLinkList.tsx b/src/components/PopularLinkList/PopularLinkList.tsx
index d704ca84..89e9804d 100644
--- a/src/components/PopularLinkList/PopularLinkList.tsx
+++ b/src/components/PopularLinkList/PopularLinkList.tsx
@@ -1,11 +1,13 @@
+'use client'
+
+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'
-import { ChipColors } from '../common/Chip/Chip'
-import LinkItem from '../common/LinkItem/LinkItem'
 import useGetPopularLinks from './hooks/useGetPopularLinks'
 
 const PopularLinkList = () => {
diff --git a/src/components/PopularLinkList/PopularLinkListController.tsx b/src/components/PopularLinkList/PopularLinkListController.tsx
index aee33a22..1588032a 100644
--- a/src/components/PopularLinkList/PopularLinkListController.tsx
+++ b/src/components/PopularLinkList/PopularLinkListController.tsx
@@ -10,6 +10,7 @@ const DynamicPopularLinkList = dynamic(() => import('./PopularLinkList'), {
       <PopularLinkSkeleton />
     </DeferredComponent>
   ),
+  ssr: false,
 })
 
 const PopularLinkListController = () => {
diff --git a/src/components/PopularLinkList/hooks/useGetPopularLinks.ts b/src/components/PopularLinkList/hooks/useGetPopularLinks.ts
index 5bd8eb12..448e482c 100644
--- a/src/components/PopularLinkList/hooks/useGetPopularLinks.ts
+++ b/src/components/PopularLinkList/hooks/useGetPopularLinks.ts
@@ -3,8 +3,8 @@ import { useSuspenseQuery } from '@tanstack/react-query'
 
 const useGetPopularLinks = () => {
   return useSuspenseQuery({
-    queryKey: ['popularLinks'],
-    queryFn: async () => await fetchGetPopularLinks(),
+    queryKey: ['PopularLinks'],
+    queryFn: fetchGetPopularLinks,
   })
 }
 

From 4b9768bf063ff7d7b2a36a037caa1e912a3daf5a Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Fri, 9 Aug 2024 02:27:05 +0900
Subject: [PATCH 12/18] =?UTF-8?q?feat:=20#324=20-=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=20fetch=20=EC=A0=9C?=
 =?UTF-8?q?=EC=99=B8=20ssr=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B8=ED=99=94=EB=A9=B4=20ssr=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx                            | 10 +--
 src/app/page.tsx                              | 70 ++-----------------
 .../SpaceList/hooks/useMainSpacesQuery.ts     |  5 +-
 .../CategoryList/CategoryListController.tsx   | 16 +++++
 .../common/Dropdown/DropdownController.tsx    | 19 +++++
 .../MainSpaceList/MainSpaceController.tsx     | 49 +++++++++++++
 .../MainSpaceList/SpaceListController.tsx     | 31 ++++++++
 .../common/Toast/ToastContainer.tsx           |  2 -
 src/lib/contexts/TanstackQueryContext.tsx     | 11 ++-
 9 files changed, 133 insertions(+), 80 deletions(-)
 create mode 100644 src/components/common/CategoryList/CategoryListController.tsx
 create mode 100644 src/components/common/Dropdown/DropdownController.tsx
 create mode 100644 src/components/common/MainSpaceList/MainSpaceController.tsx
 create mode 100644 src/components/common/MainSpaceList/SpaceListController.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0c82f8ec..4167f5fe 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -53,16 +53,12 @@ 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">
+              <div className="relative mx-auto min-h-screen w-full pb-4 shadow-xl">
                 <Header />
                 <main className="pt-[53px]">{children}</main>
               </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5b15de7a..3a32ddf2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,75 +1,13 @@
 'use client'
 
-import { CategoryList, Dropdown, Spinner } from '@/components'
-import FloatingButton from '@/components/FloatingButton/FloatingButton'
-import HydratePopularLinkList from '@/components/PopularLinkList/HydratePopularLinkList'
-// import PopularLinkSkeleton from '@/components/PopularLinkList/PopularLinkSkeleton'
-import DeferredComponent from '@/components/common/DeferedComponent/DeferedComponent'
-import MainSpaceSkeleton from '@/components/common/MainSpaceList/MainSpaceSkeleton'
-import { useCategoryParam, useSortParam } from '@/hooks'
-import { fetchGetSpaces } from '@/services/space/spaces'
-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>
-    ),
-  },
-)
+import PopularLinkListController from '@/components/PopularLinkList/PopularLinkListController'
+import MainSpaceController from '@/components/common/MainSpaceList/MainSpaceController'
 
 export default function Home() {
-  const { sort, sortIndex, handleSortChange } = useSortParam('space')
-  const { category, categoryIndex, handleCategoryChange } =
-    useCategoryParam('all')
-
   return (
     <>
-      {/* <section className="px-4 pb-8">
-        <h2 className="py-4 font-bold text-gray9">인기있는 링크</h2>
-        <div className="min-h-[101.5px]">
-          <DynamicPopularLinkList />
-        </div>
-      </section> */}
-      <HydratePopularLinkList />
-      <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>
-        <DynamicMainSpaceList
-          queryKey="main"
-          sort={sort ?? ''}
-          category={category ?? ''}
-          fetchFn={fetchGetSpaces}
-        />
-      </section>
-      <FloatingButton />
+      <PopularLinkListController />
+      <MainSpaceController />
     </>
   )
 }
diff --git a/src/components/SpaceList/hooks/useMainSpacesQuery.ts b/src/components/SpaceList/hooks/useMainSpacesQuery.ts
index 0bdb9d7f..15f67da7 100644
--- a/src/components/SpaceList/hooks/useMainSpacesQuery.ts
+++ b/src/components/SpaceList/hooks/useMainSpacesQuery.ts
@@ -1,9 +1,6 @@
 import { PAGE_SIZE } from '@/constants'
 import { SpaceResBody } from '@/types'
-import {
-  useInfiniteQuery,
-  useSuspenseInfiniteQuery,
-} from '@tanstack/react-query'
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
 import { SpaceListProps } from '../SpaceList'
 
 interface MainSpacePageType {
diff --git a/src/components/common/CategoryList/CategoryListController.tsx b/src/components/common/CategoryList/CategoryListController.tsx
new file mode 100644
index 00000000..4c839f9e
--- /dev/null
+++ b/src/components/common/CategoryList/CategoryListController.tsx
@@ -0,0 +1,16 @@
+import { useCategoryParam } from '@/hooks'
+import CategoryList from './CategoryList'
+
+const CategoryListController = () => {
+  const { categoryIndex, handleCategoryChange } = useCategoryParam('all')
+
+  return (
+    <CategoryList
+      type="all"
+      defaultIndex={categoryIndex}
+      onChange={handleCategoryChange}
+    />
+  )
+}
+
+export default CategoryListController
diff --git a/src/components/common/Dropdown/DropdownController.tsx b/src/components/common/Dropdown/DropdownController.tsx
new file mode 100644
index 00000000..d8424cfc
--- /dev/null
+++ b/src/components/common/Dropdown/DropdownController.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import { useSortParam } from '@/hooks'
+import Dropdown from './Dropdown'
+
+const DropdownController = () => {
+  const { sortIndex, handleSortChange } = useSortParam('space')
+
+  return (
+    <Dropdown
+      type="space"
+      placement="right"
+      defaultIndex={sortIndex}
+      onChange={handleSortChange}
+    />
+  )
+}
+
+export default DropdownController
diff --git a/src/components/common/MainSpaceList/MainSpaceController.tsx b/src/components/common/MainSpaceList/MainSpaceController.tsx
new file mode 100644
index 00000000..3ea3e95b
--- /dev/null
+++ b/src/components/common/MainSpaceList/MainSpaceController.tsx
@@ -0,0 +1,49 @@
+// 'use client'
+import { Suspense } from 'react'
+import FloatingButton from '@/components/FloatingButton/FloatingButton'
+import CategoryListController from '../CategoryList/CategoryListController'
+import DeferredComponent from '../DeferedComponent/DeferedComponent'
+import DropdownController from '../Dropdown/DropdownController'
+import Spinner from '../Spinner/Spinner'
+import SpaceListController from './SpaceListController'
+
+const MainSpaceController = () => {
+  return (
+    <>
+      <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>
+            <Suspense
+              fallback={
+                <DeferredComponent>
+                  <Spinner />
+                </DeferredComponent>
+              }>
+              <DropdownController />
+            </Suspense>
+          </div>
+          <Suspense
+            fallback={
+              <DeferredComponent>
+                <Spinner />
+              </DeferredComponent>
+            }>
+            <CategoryListController />
+          </Suspense>
+        </div>
+        <Suspense
+          fallback={
+            <DeferredComponent>
+              <Spinner />
+            </DeferredComponent>
+          }>
+          <SpaceListController />
+        </Suspense>
+      </section>
+      <FloatingButton />
+    </>
+  )
+}
+
+export default MainSpaceController
diff --git a/src/components/common/MainSpaceList/SpaceListController.tsx b/src/components/common/MainSpaceList/SpaceListController.tsx
new file mode 100644
index 00000000..be283eb6
--- /dev/null
+++ b/src/components/common/MainSpaceList/SpaceListController.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { useCategoryParam, useSortParam } from '@/hooks'
+import { fetchGetSpaces } from '@/services/space/spaces'
+import dynamic from 'next/dynamic'
+import DeferredComponent from '../DeferedComponent/DeferedComponent'
+import MainSpaceSkeleton from './MainSpaceSkeleton'
+
+const DynamicMainSpaceList = dynamic(() => import('./MainSpaceList'), {
+  loading: () => (
+    <DeferredComponent>
+      <MainSpaceSkeleton />
+    </DeferredComponent>
+  ),
+})
+
+const SpaceListController = () => {
+  const { sort } = useSortParam('space')
+  const { category } = useCategoryParam('all')
+
+  return (
+    <DynamicMainSpaceList
+      queryKey="main"
+      sort={sort ?? ''}
+      category={category ?? ''}
+      fetchFn={fetchGetSpaces}
+    />
+  )
+}
+
+export default SpaceListController
diff --git a/src/components/common/Toast/ToastContainer.tsx b/src/components/common/Toast/ToastContainer.tsx
index 7538002e..d2791142 100644
--- a/src/components/common/Toast/ToastContainer.tsx
+++ b/src/components/common/Toast/ToastContainer.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import { ToastContainer as TContainer } from 'react-toastify'
 
 export default function ToastContainer() {
diff --git a/src/lib/contexts/TanstackQueryContext.tsx b/src/lib/contexts/TanstackQueryContext.tsx
index 3c43be53..b84870d9 100644
--- a/src/lib/contexts/TanstackQueryContext.tsx
+++ b/src/lib/contexts/TanstackQueryContext.tsx
@@ -10,7 +10,16 @@ interface TanstackQueryContextProps {
 export default function TanstackQueryContext({
   children,
 }: TanstackQueryContextProps) {
-  const [queryClient] = useState(() => new QueryClient())
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+          },
+        },
+      }),
+  )
 
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

From 01ee488ab1679ed0f920bc35ed11bd8e7de7b164 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Fri, 9 Aug 2024 02:38:13 +0900
Subject: [PATCH 13/18] =?UTF-8?q?feat:=20#324=20-=20Suspense=20=EB=B0=94?=
 =?UTF-8?q?=EC=9A=B4=EB=8D=94=EB=A6=AC=EC=97=90=20Header=20=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4167f5fe..2857f339 100644
--- 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'
@@ -59,7 +60,9 @@ export default function RootLayout({
           <body className={`bg-bgColor ${pretendard.variable}`}>
             <Providers>
               <div className="relative mx-auto min-h-screen w-full pb-4 shadow-xl">
-                <Header />
+                <Suspense>
+                  <Header />
+                </Suspense>
                 <main className="pt-[53px]">{children}</main>
               </div>
               <ToastContainer />

From 633151ff87fa51039e914cc1246e22de8339cc3f Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Wed, 14 Aug 2024 14:35:25 +0900
Subject: [PATCH 14/18] =?UTF-8?q?feat:=20324=20-=20query=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=20=EC=9C=A0=ED=8B=B8=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/queryClient.ts | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/lib/queryClient.ts b/src/lib/queryClient.ts
index 34ef3e2a..57eb4f7e 100644
--- a/src/lib/queryClient.ts
+++ b/src/lib/queryClient.ts
@@ -1,5 +1,31 @@
-import { cache } from 'react'
-import { QueryClient } from '@tanstack/react-query'
+import {
+  QueryClient,
+  defaultShouldDehydrateQuery,
+  isServer,
+} from '@tanstack/react-query'
 
-const getQueryClient = cache(() => new QueryClient())
-export default getQueryClient
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+      dehydrate: {
+        shouldDehydrateQuery: (query) =>
+          defaultShouldDehydrateQuery(query) ||
+          query.state.status === 'pending',
+      },
+    },
+  })
+}
+
+let browserQueryClient: QueryClient | undefined = undefined
+
+export function getQueryClient() {
+  if (isServer) {
+    return makeQueryClient()
+  } else {
+    if (!browserQueryClient) browserQueryClient = makeQueryClient()
+    return browserQueryClient
+  }
+}

From 661423bdaac9318a52646daa393cdbd19c4d60d2 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Wed, 14 Aug 2024 14:37:56 +0900
Subject: [PATCH 15/18] =?UTF-8?q?feat:=20#324=20-=20=EC=9D=B8=EA=B8=B0?=
 =?UTF-8?q?=EB=A7=81=ED=81=AC=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20prefetching=20=EB=B0=8F=20ssr=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PopularLinkList/HydratePopularLinkList.tsx   | 16 ++++++++--------
 .../PopularLinkList/PopularLinkList.tsx          |  4 +++-
 src/lib/contexts/TanstackQueryContext.tsx        | 14 +++-----------
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/components/PopularLinkList/HydratePopularLinkList.tsx b/src/components/PopularLinkList/HydratePopularLinkList.tsx
index 49323fdd..659e7037 100644
--- a/src/components/PopularLinkList/HydratePopularLinkList.tsx
+++ b/src/components/PopularLinkList/HydratePopularLinkList.tsx
@@ -1,21 +1,21 @@
-import getQueryClient from '@/lib/queryClient'
+import React from 'react'
+import { getQueryClient } from '@/lib/queryClient'
 import { fetchGetPopularLinks } from '@/services/link/link'
 import { HydrationBoundary, dehydrate } from '@tanstack/react-query'
-import PopularLinkListController from './PopularLinkListController'
+import PopularLinkList from './PopularLinkList'
 
 const HydratePopularLinkList = async () => {
   const queryClient = getQueryClient()
   await queryClient.prefetchQuery({
-    queryKey: ['useGetPopularLinks'],
-    queryFn: () => fetchGetPopularLinks(),
+    queryKey: ['PopularLinks'],
+    queryFn: fetchGetPopularLinks,
   })
-  const dehydratedState = dehydrate(queryClient)
 
   return (
-    <HydrationBoundary state={dehydratedState}>
-      <PopularLinkListController />
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <PopularLinkList />
     </HydrationBoundary>
   )
 }
 
-export default HydratePopularLinkList
+export default React.memo(HydratePopularLinkList)
diff --git a/src/components/PopularLinkList/PopularLinkList.tsx b/src/components/PopularLinkList/PopularLinkList.tsx
index 89e9804d..9c0ee71f 100644
--- a/src/components/PopularLinkList/PopularLinkList.tsx
+++ b/src/components/PopularLinkList/PopularLinkList.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import React from 'react'
 import { ChipColors } from '@/components/common/Chip/Chip'
 import LinkItem from '@/components/common/LinkItem/LinkItem'
 import { PopularLinkResBody } from '@/types'
@@ -12,6 +13,7 @@ import useGetPopularLinks from './hooks/useGetPopularLinks'
 
 const PopularLinkList = () => {
   const { data } = useGetPopularLinks()
+
   return (
     <Swiper
       slidesPerView={2.2}
@@ -63,4 +65,4 @@ const PopularLinkList = () => {
   )
 }
 
-export default PopularLinkList
+export default React.memo(PopularLinkList)
diff --git a/src/lib/contexts/TanstackQueryContext.tsx b/src/lib/contexts/TanstackQueryContext.tsx
index b84870d9..bb93d52f 100644
--- a/src/lib/contexts/TanstackQueryContext.tsx
+++ b/src/lib/contexts/TanstackQueryContext.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { getQueryClient } from '../queryClient'
 
 interface TanstackQueryContextProps {
   children: React.ReactNode
@@ -10,16 +11,7 @@ interface TanstackQueryContextProps {
 export default function TanstackQueryContext({
   children,
 }: TanstackQueryContextProps) {
-  const [queryClient] = useState(
-    () =>
-      new QueryClient({
-        defaultOptions: {
-          queries: {
-            staleTime: 60 * 1000,
-          },
-        },
-      }),
-  )
+  const [queryClient] = useState(getQueryClient())
 
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

From 168a2f1c7b13bd0a21b572b29201849e68640a64 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Wed, 14 Aug 2024 14:42:13 +0900
Subject: [PATCH 16/18] =?UTF-8?q?feat:=20#324=20-=20=EB=A9=94=EC=9D=B8=20?=
 =?UTF-8?q?=ED=99=88=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=EB=A6=AC=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next.config.js                                |  1 +
 package-lock.json                             | 28 ++++-------
 src/app/page.tsx                              | 21 +++++---
 .../hooks/useGetPopularLinks.ts               |  4 +-
 .../MainSpaceList/FloatingBtnController.tsx   |  9 ++++
 .../MainSpaceList/MainSpaceController.tsx     | 49 -------------------
 .../common/MainSpaceList/MainSpaceHeader.tsx  | 23 +++++++++
 .../MainSpaceList/SpaceListController.tsx     | 16 +-----
 src/hooks/useCategoryParam.ts                 |  2 +-
 src/hooks/useSortParam.ts                     |  2 +-
 src/services/space/spaces.ts                  | 11 +++--
 11 files changed, 70 insertions(+), 96 deletions(-)
 create mode 100644 src/components/common/MainSpaceList/FloatingBtnController.tsx
 delete mode 100644 src/components/common/MainSpaceList/MainSpaceController.tsx
 create mode 100644 src/components/common/MainSpaceList/MainSpaceHeader.tsx

diff --git a/next.config.js b/next.config.js
index ff4b8157..aa4261ff 100644
--- a/next.config.js
+++ b/next.config.js
@@ -12,6 +12,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 })
 
 const nextConfig = {
+  reactStrictMode: false,
   images: {
     minimumCacheTTL: 1 * 60 * 60 * 24 * 365,
     domains: ['linkhub-s3.s3.ap-northeast-2.amazonaws.com'],
diff --git a/package-lock.json b/package-lock.json
index 2a461131..c1328fb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3008,37 +3008,29 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.8.3",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.8.3.tgz",
-      "integrity": "sha512-SWFMFtcHfttLYif6pevnnMYnBvxKf3C+MHMH7bevyYfpXpTMsLB9O6nNGBdWSoPwnZRXFNyNeVZOw25Wmdasow==",
+      "version": "5.51.21",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.21.tgz",
+      "integrity": "sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.8.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.8.4.tgz",
-      "integrity": "sha512-CD+AkXzg8J72JrE6ocmuBEJfGzEzu/bzkD6sFXFDDB5yji9N20JofXZlN6n0+CaPJuIi+e4YLCbGsyPFKkfNQA==",
+      "version": "5.51.23",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.23.tgz",
+      "integrity": "sha512-CfJCfX45nnVIZjQBRYYtvVMIsGgWLKLYC4xcUiYEey671n1alvTZoCBaU9B85O8mF/tx9LPyrI04A6Bs2THv4A==",
+      "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.8.3"
+        "@tanstack/query-core": "5.51.21"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0",
-        "react-native": "*"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
+        "react": "^18.0.0"
       }
     },
     "node_modules/@trivago/prettier-plugin-sort-imports": {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3a32ddf2..7d5fe810 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,22 @@
-'use client'
-
-import PopularLinkListController from '@/components/PopularLinkList/PopularLinkListController'
-import MainSpaceController from '@/components/common/MainSpaceList/MainSpaceController'
+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() {
   return (
     <>
-      <PopularLinkListController />
-      <MainSpaceController />
+      <section className="px-4 pb-8">
+        <h2 className="py-4 font-bold text-gray9">인기있는 링크</h2>
+        <div className="min-h-[101.5px]">
+          <HydratePopularLinkList />
+        </div>
+      </section>
+      <section>
+        <MainSpaceHeader />
+        <SpaceListController />
+      </section>
+      <FloatingBtnController />
     </>
   )
 }
diff --git a/src/components/PopularLinkList/hooks/useGetPopularLinks.ts b/src/components/PopularLinkList/hooks/useGetPopularLinks.ts
index 448e482c..ffaf58f5 100644
--- a/src/components/PopularLinkList/hooks/useGetPopularLinks.ts
+++ b/src/components/PopularLinkList/hooks/useGetPopularLinks.ts
@@ -1,8 +1,8 @@
 import { fetchGetPopularLinks } from '@/services/link/link'
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 
 const useGetPopularLinks = () => {
-  return useSuspenseQuery({
+  return useQuery({
     queryKey: ['PopularLinks'],
     queryFn: fetchGetPopularLinks,
   })
diff --git a/src/components/common/MainSpaceList/FloatingBtnController.tsx b/src/components/common/MainSpaceList/FloatingBtnController.tsx
new file mode 100644
index 00000000..577f5b56
--- /dev/null
+++ b/src/components/common/MainSpaceList/FloatingBtnController.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import FloatingButton from '@/components/FloatingButton/FloatingButton'
+
+const FloatingBtnController = () => {
+  return <FloatingButton />
+}
+
+export default FloatingBtnController
diff --git a/src/components/common/MainSpaceList/MainSpaceController.tsx b/src/components/common/MainSpaceList/MainSpaceController.tsx
deleted file mode 100644
index 3ea3e95b..00000000
--- a/src/components/common/MainSpaceList/MainSpaceController.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// 'use client'
-import { Suspense } from 'react'
-import FloatingButton from '@/components/FloatingButton/FloatingButton'
-import CategoryListController from '../CategoryList/CategoryListController'
-import DeferredComponent from '../DeferedComponent/DeferedComponent'
-import DropdownController from '../Dropdown/DropdownController'
-import Spinner from '../Spinner/Spinner'
-import SpaceListController from './SpaceListController'
-
-const MainSpaceController = () => {
-  return (
-    <>
-      <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>
-            <Suspense
-              fallback={
-                <DeferredComponent>
-                  <Spinner />
-                </DeferredComponent>
-              }>
-              <DropdownController />
-            </Suspense>
-          </div>
-          <Suspense
-            fallback={
-              <DeferredComponent>
-                <Spinner />
-              </DeferredComponent>
-            }>
-            <CategoryListController />
-          </Suspense>
-        </div>
-        <Suspense
-          fallback={
-            <DeferredComponent>
-              <Spinner />
-            </DeferredComponent>
-          }>
-          <SpaceListController />
-        </Suspense>
-      </section>
-      <FloatingButton />
-    </>
-  )
-}
-
-export default MainSpaceController
diff --git a/src/components/common/MainSpaceList/MainSpaceHeader.tsx b/src/components/common/MainSpaceList/MainSpaceHeader.tsx
new file mode 100644
index 00000000..471a7edd
--- /dev/null
+++ b/src/components/common/MainSpaceList/MainSpaceHeader.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { Suspense } from 'react'
+import CategoryListController from '../CategoryList/CategoryListController'
+import DropdownController from '../Dropdown/DropdownController'
+
+const MainSpaceHeader = () => {
+  return (
+    <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>
+        <Suspense>
+          <DropdownController />
+        </Suspense>
+      </div>
+      <Suspense>
+        <CategoryListController />
+      </Suspense>
+    </div>
+  )
+}
+
+export default MainSpaceHeader
diff --git a/src/components/common/MainSpaceList/SpaceListController.tsx b/src/components/common/MainSpaceList/SpaceListController.tsx
index be283eb6..9a4f920a 100644
--- a/src/components/common/MainSpaceList/SpaceListController.tsx
+++ b/src/components/common/MainSpaceList/SpaceListController.tsx
@@ -1,7 +1,5 @@
-'use client'
-
+// 'use client'
 import { useCategoryParam, useSortParam } from '@/hooks'
-import { fetchGetSpaces } from '@/services/space/spaces'
 import dynamic from 'next/dynamic'
 import DeferredComponent from '../DeferedComponent/DeferedComponent'
 import MainSpaceSkeleton from './MainSpaceSkeleton'
@@ -15,17 +13,7 @@ const DynamicMainSpaceList = dynamic(() => import('./MainSpaceList'), {
 })
 
 const SpaceListController = () => {
-  const { sort } = useSortParam('space')
-  const { category } = useCategoryParam('all')
-
-  return (
-    <DynamicMainSpaceList
-      queryKey="main"
-      sort={sort ?? ''}
-      category={category ?? ''}
-      fetchFn={fetchGetSpaces}
-    />
-  )
+  return <DynamicMainSpaceList />
 }
 
 export default SpaceListController
diff --git a/src/hooks/useCategoryParam.ts b/src/hooks/useCategoryParam.ts
index 56ec074a..9a6704da 100644
--- a/src/hooks/useCategoryParam.ts
+++ b/src/hooks/useCategoryParam.ts
@@ -6,7 +6,7 @@ const useCategoryParam = (type: keyof typeof CATEGORIES) => {
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const category = searchParams.get('category')
+  const category = searchParams.get('category') || ''
   const categoryIndex = category
     ? Object.values(CATEGORIES[type]).indexOf(category)
     : 0
diff --git a/src/hooks/useSortParam.ts b/src/hooks/useSortParam.ts
index f0bab206..3d04f760 100644
--- a/src/hooks/useSortParam.ts
+++ b/src/hooks/useSortParam.ts
@@ -6,7 +6,7 @@ const useSortParam = (type: keyof typeof DROPDOWN_OPTIONS) => {
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const sort = searchParams.get('sort')
+  const sort = searchParams.get('sort') || undefined
   const sortIndex = sort
     ? Object.values(DROPDOWN_OPTIONS[type]).indexOf(sort)
     : 0
diff --git a/src/services/space/spaces.ts b/src/services/space/spaces.ts
index 32b4ed16..4d89cc6e 100644
--- a/src/services/space/spaces.ts
+++ b/src/services/space/spaces.ts
@@ -1,12 +1,13 @@
+import { PAGE_SIZE } from '@/constants'
 import { SearchSpaceReqBody, SpaceInviteResBody } from '@/types'
 import { apiClient } from '../apiServices'
 
 const fetchGetSpaces = async ({
-  lastSpaceId,
-  lastFavoriteCount,
-  pageSize,
-  sort,
-  filter,
+  lastSpaceId = undefined,
+  lastFavoriteCount = undefined,
+  pageSize = PAGE_SIZE,
+  sort = 'created_at',
+  filter = 'all',
 }: SearchSpaceReqBody) => {
   const path = '/api/spaces'
   const params = {

From e8590a7f72a75e8b4a61415de357f4ad2fa03b89 Mon Sep 17 00:00:00 2001
From: "B._.OMI" <krshlee22@naver.com>
Date: Wed, 14 Aug 2024 14:56:09 +0900
Subject: [PATCH 17/18] =?UTF-8?q?feat:=20#324=20-=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=EB=A6=AC=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=20prefetch=20=EC=A0=81=EC=9A=A9(=EC=88=98=EC=A0=95=EC=A4=91)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PopularLinkListController.tsx             | 27 ------
 .../SpaceList/hooks/useMainSpacesQuery.ts     | 86 ++++++++++---------
 .../MainSpaceList/HydrateMainSpaceList.tsx    | 32 +++++++
 .../common/MainSpaceList/MainSpaceList.tsx    | 36 +++-----
 4 files changed, 88 insertions(+), 93 deletions(-)
 delete mode 100644 src/components/PopularLinkList/PopularLinkListController.tsx
 create mode 100644 src/components/common/MainSpaceList/HydrateMainSpaceList.tsx

diff --git a/src/components/PopularLinkList/PopularLinkListController.tsx b/src/components/PopularLinkList/PopularLinkListController.tsx
deleted file mode 100644
index 1588032a..00000000
--- a/src/components/PopularLinkList/PopularLinkListController.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client'
-
-import dynamic from 'next/dynamic'
-import DeferredComponent from '../common/DeferedComponent/DeferedComponent'
-import PopularLinkSkeleton from './PopularLinkSkeleton'
-
-const DynamicPopularLinkList = dynamic(() => import('./PopularLinkList'), {
-  loading: () => (
-    <DeferredComponent>
-      <PopularLinkSkeleton />
-    </DeferredComponent>
-  ),
-  ssr: false,
-})
-
-const PopularLinkListController = () => {
-  return (
-    <section className="px-4 pb-8">
-      <h2 className="py-4 font-bold text-gray9">인기있는 링크</h2>
-      <div className="min-h-[101.5px]">
-        <DynamicPopularLinkList />
-      </div>
-    </section>
-  )
-}
-
-export default PopularLinkListController
diff --git a/src/components/SpaceList/hooks/useMainSpacesQuery.ts b/src/components/SpaceList/hooks/useMainSpacesQuery.ts
index 15f67da7..c1649cab 100644
--- a/src/components/SpaceList/hooks/useMainSpacesQuery.ts
+++ b/src/components/SpaceList/hooks/useMainSpacesQuery.ts
@@ -1,6 +1,9 @@
 import { PAGE_SIZE } from '@/constants'
 import { SpaceResBody } from '@/types'
-import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
+import {
+  useInfiniteQuery,
+  useSuspenseInfiniteQuery,
+} from '@tanstack/react-query'
 import { SpaceListProps } from '../SpaceList'
 
 interface MainSpacePageType {
@@ -21,54 +24,53 @@ const useMainSpacesQuery = ({
   fetchFn,
 }: SpaceListProps) => {
   const sortValue =
-    queryKey === 'main' || queryKey === 'search'
+    queryKey === 'main'
       ? sort === 'favorite'
         ? 'favorite_count'
         : 'created_at'
       : undefined
   const categoryValue = category === 'all' ? '' : category.toUpperCase()
-  const { data, fetchNextPage, hasNextPage, isLoading } =
-    useSuspenseInfiniteQuery({
-      queryKey: [
-        'spaces',
-        queryKey,
-        {
-          ...(memberId && { memberId: memberId }),
-          ...(sortValue && { sort: sortValue }),
-          category: categoryValue,
-          keyword,
-        },
-      ],
-      queryFn: ({ pageParam }) =>
-        fetchFn({
-          memberId,
-          lastFavoriteCount: pageParam.lastFavoriteCount,
-          lastSpaceId: pageParam.lastSpaceId,
-          pageSize: PAGE_SIZE,
-          sort: sortValue,
-          filter: categoryValue,
-          keyWord: keyword,
-        }),
-      initialPageParam: {
-        lastSpaceId: undefined,
-        lastFavoriteCount: undefined,
+  const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
+    queryKey: [
+      'spaces',
+      queryKey,
+      {
+        ...(memberId && { memberId: memberId }),
+        ...(sortValue && { sort: sortValue }),
+        category: categoryValue,
+        keyword,
       },
-      getNextPageParam: (
-        lastPage: MainSpacePageType,
-      ):
-        | {
-            lastSpaceId: number | undefined
-            lastFavoriteCount: number | undefined
+    ],
+    queryFn: ({ pageParam }) =>
+      fetchFn({
+        memberId,
+        lastFavoriteCount: pageParam.lastFavoriteCount,
+        lastSpaceId: pageParam.lastSpaceId,
+        pageSize: PAGE_SIZE,
+        sort: sortValue,
+        filter: categoryValue,
+        keyWord: keyword,
+      }),
+    initialPageParam: {
+      lastSpaceId: undefined,
+      lastFavoriteCount: undefined,
+    },
+    getNextPageParam: (
+      lastPage: MainSpacePageType,
+    ):
+      | {
+          lastSpaceId: number | undefined
+          lastFavoriteCount: number | undefined
+        }
+      | undefined => {
+      return lastPage.metaData?.hasNext
+        ? {
+            lastSpaceId: lastPage.metaData.lastId,
+            lastFavoriteCount: lastPage.metaData.lastFavoriteCount,
           }
-        | undefined => {
-        return lastPage.metaData?.hasNext
-          ? {
-              lastSpaceId: lastPage.metaData.lastId,
-              lastFavoriteCount: lastPage.metaData.lastFavoriteCount,
-            }
-          : undefined
-      },
-    })
+        : undefined
+    },
+  })
 
   return {
     spaces: data,
diff --git a/src/components/common/MainSpaceList/HydrateMainSpaceList.tsx b/src/components/common/MainSpaceList/HydrateMainSpaceList.tsx
new file mode 100644
index 00000000..38b421a3
--- /dev/null
+++ b/src/components/common/MainSpaceList/HydrateMainSpaceList.tsx
@@ -0,0 +1,32 @@
+import { PAGE_SIZE } from '@/constants'
+import { getQueryClient } from '@/lib/queryClient'
+import { fetchGetSpaces } from '@/services/space/spaces'
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query'
+import MainSpaceList from './MainSpaceList'
+
+const HydrateMainSpaceList = () => {
+  const queryClient = getQueryClient()
+  void queryClient.prefetchInfiniteQuery({
+    queryKey: ['spaces', 'main', { category: '', sort: 'created_at' }],
+    queryFn: () =>
+      fetchGetSpaces({
+        lastSpaceId: undefined,
+        lastFavoriteCount: undefined,
+        pageSize: PAGE_SIZE,
+        sort: 'created_at',
+        filter: 'all',
+      }),
+    initialPageParam: 0,
+  })
+
+  const dehydreatedState = dehydrate(queryClient)
+  console.log(dehydreatedState)
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <MainSpaceList />
+    </HydrationBoundary>
+  )
+}
+
+export default HydrateMainSpaceList
diff --git a/src/components/common/MainSpaceList/MainSpaceList.tsx b/src/components/common/MainSpaceList/MainSpaceList.tsx
index e6844ffb..722becd7 100644
--- a/src/components/common/MainSpaceList/MainSpaceList.tsx
+++ b/src/components/common/MainSpaceList/MainSpaceList.tsx
@@ -4,47 +4,35 @@ import { Fragment } from 'react'
 import { NONE_SEARCH_RESULT } from '@/components/SpaceList/constants'
 import useMainSpacesQuery from '@/components/SpaceList/hooks/useMainSpacesQuery'
 import { CATEGORIES_RENDER } from '@/constants'
+import { useCategoryParam, useSortParam } from '@/hooks'
 import useInfiniteScroll from '@/hooks/useInfiniteScroll'
-import { SearchSpaceReqBody, SpaceResBody } from '@/types'
+import { fetchGetSpaces } from '@/services/space/spaces'
+import { SpaceResBody } from '@/types'
+import { useQueryClient } from '@tanstack/react-query'
 import { MORE_TEXT } from '../LinkList/constants'
 import Space from '../Space/Space'
 
 export interface SpaceListProps {
   memberId?: number
-  queryKey: string
-  sort?: string
-  category: string
   keyword?: string
-  fetchFn: ({
-    memberId,
-    pageNumber,
-    lastFavoriteCount,
-    lastSpaceId,
-    pageSize,
-    sort,
-    filter,
-    keyWord,
-  }: SearchSpaceReqBody) => Promise<any>
 }
 
-const MainSpaceList = ({
-  queryKey,
-  memberId,
-  sort,
-  category,
-  keyword,
-  fetchFn,
-}: SpaceListProps) => {
+const MainSpaceList = ({ memberId, keyword }: SpaceListProps) => {
+  const { sort } = useSortParam('space')
+  const { category } = useCategoryParam('all')
   const { spaces, fetchNextPage, hasNextPage, isSpacesLoading } =
     useMainSpacesQuery({
-      queryKey,
+      queryKey: 'main',
       memberId,
       sort,
       category,
       keyword,
-      fetchFn,
+      fetchFn: fetchGetSpaces,
     })
 
+  const queryClient = useQueryClient()
+  console.log(queryClient.getQueryCache())
+
   const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage })
 
   return (

From 8c25ca6ce9d24fad78fa6cf0550bc40c2e4dacc7 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Mon, 9 Sep 2024 13:47:30 +0900
Subject: [PATCH 18/18] =?UTF-8?q?feat:=20s3=20=EC=A3=BC=EC=86=8C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next.config.js     | 4 ++--
 src/app/layout.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/next.config.js b/next.config.js
index aa4261ff..e5d052a9 100644
--- a/next.config.js
+++ b/next.config.js
@@ -15,12 +15,12 @@ const nextConfig = {
   reactStrictMode: false,
   images: {
     minimumCacheTTL: 1 * 60 * 60 * 24 * 365,
-    domains: ['linkhub-s3.s3.ap-northeast-2.amazonaws.com'],
+    domains: ['linkhub-s3-2025.s3.ap-northeast-2.amazonaws.com'],
     formats: ['image/avif', 'image/webp'],
     remotePatterns: [
       {
         protocol: 'https',
-        hostname: 'linkhub-s3.s3.ap-northeast-2.amazonaws.com',
+        hostname: 'linkhub-s3-2025.s3.ap-northeast-2.amazonaws.com',
         port: '',
         pathname: '/**',
       },
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2857f339..9c596afc 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -36,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',