feat: #321 - link prefetch 적용

Team-TenTen · Jul 23, 2024 · 7109c04 · 7109c04
1 parent 7c6c90a
commit 7109c04
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,13 +136,15 @@ 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}>
                     스페이스 전체보기
                   </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
@@ -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
@@ -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
@@ -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}