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] =?UTF-8?q?feat:=20#321=20-=20link=20prefetch=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/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}