[IMPROVE] prefetchQuery를 이용한 초기 렌더링 속도 개선 (#38)

* feat: 라이브러리 페이지 이동 전, 카테고리 상세 이동 전 prefetchQuery 적용

* fix: 카테고리 내부에 있는 콘텐츠는 드래그가 안되도록 수정

* feat: 콘텐츠 상세 조회 전 prefetchQuery 적용

* refactor: 분을 나타내는 상수 추가 및 적용

* chore: metaBase 추가 및 extension에서 사용하지 않는 host_permissions 제거

* fix: 모달 닫기 시 전역 상태 초기화가 되도록 수정

* feat: 토픽 보드 이동 시 prefetchQuery 적용

Author: gs0428

apps/extension/manifest.json

@@ -13,7 +13,7 @@
   "background": {
     "service_worker": "service-worker.js"
   },
-  "host_permissions": ["https://api.linkyboard.com/*", "http://localhost:3000/*"],
+  "host_permissions": ["https://api.linkyboard.com/*"],
   "icons": {
     "128": "public/icon128.png"
   }

apps/web/src/app/(with-side-bar)/topic/[id]/layout.tsx

@@ -1,10 +1,10 @@
 import TopicStickerDetailModal from "@/components/(with-side-bar)/topic/sticker/topic-sticker-detail-modal";
 
-interface TopicStickerDetailLayoutProps {
+interface TopicBoardLayoutProps {
   children: React.ReactNode;
 }
 
-export default function TopicStickerDetailLayout({ children }: TopicStickerDetailLayoutProps) {
+export default function TopicBoardLayout({ children }: TopicBoardLayoutProps) {
   return (
     <>
       {children}

apps/web/src/app/layout.tsx

@@ -26,6 +26,7 @@ const jetbrainsMono = JetBrains_Mono({
 });
 
 export const metadata: Metadata = {
+  metadataBase: new URL("https://www.linkyboard.com"),
   title: "LinkyBoard - 지식을 연결하는 스마트 지식 관리 서비스",
   description:
     "흩어진 정보를 하나로 연결하는 지식 관리 플랫폼. 웹 콘텐츠를 수집하고 시각화하여 나만의 지식 보드를 만들어 보세요.",

apps/web/src/components/(with-side-bar)/layout/index.tsx

@@ -4,7 +4,11 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 import Logo from "@/assets/logo.svg";
+import { CATEGORY } from "@/constants/category";
+import { MINUTE } from "@/constants/time";
+import { queryClient } from "@/lib/tanstack";
 import { useMobileMenuStore } from "@/lib/zustand/mobile-menu";
+import { getCategories } from "@/services/category";
 import { cn } from "@linkyboard/utils";
 
 import type { LucideIcon } from "lucide-react";
@@ -30,6 +34,16 @@ export default function Sidebar() {
 
   const { isOpen, close } = useMobileMenuStore();
 
+  const onMouseEnter = (href: string) => {
+    if (href === "/library") {
+      queryClient.prefetchQuery({
+        queryKey: [CATEGORY.GET_CATEGORIES],
+        queryFn: getCategories,
+        staleTime: MINUTE,
+      });
+    }
+  };
+
   return (
     <>
       {/* Sidebar */}
@@ -55,6 +69,7 @@ export default function Sidebar() {
             <Link
               key={item.label}
               href={item.href}
+              onMouseEnter={() => onMouseEnter(item.href)}
               className={cn(
                 "mb-2 flex items-center gap-3 rounded-md px-4 py-3 transition-all duration-300",
                 pathname.startsWith(item.href)

apps/web/src/components/(with-side-bar)/layout/recent-topic-item.tsx

@@ -1,5 +1,9 @@
 import RemoveTopicDialog from "@/components/(with-side-bar)/topic/remove-topic-dialog";
+import { MINUTE } from "@/constants/time";
+import { TOPIC } from "@/constants/topic";
+import { queryClient } from "@/lib/tanstack";
 import type { TopicDTO } from "@/models/topic";
+import { getTopicBoardById } from "@/services/topic";
 import { Dialog, DialogTrigger } from "@linkyboard/components";
 import { cn } from "@linkyboard/utils";
 
@@ -34,13 +38,22 @@ const getTopicColor = (topicId: number) => {
 export default function RecentTopicItem({ isSelected, topic, onTopicClick }: RecentTopicItemProps) {
   const color = getTopicColor(topic.id);
 
+  const onMouseEnter = () => {
+    queryClient.prefetchQuery({
+      queryKey: [TOPIC.GET_TOPIC_BOARD_BY_ID, topic.id.toString()],
+      queryFn: async () => await getTopicBoardById(topic.id.toString()),
+      staleTime: MINUTE,
+    });
+  };
+
   return (
     <div
       className={cn(
         "group mb-2 flex cursor-pointer items-center justify-between gap-3 rounded-md p-2 transition-all duration-300",
         isSelected ? "bg-sidebar-primary text-sidebar-primary-foreground" : "hover:bg-accent"
       )}
       onClick={onTopicClick}
+      onMouseEnter={onMouseEnter}
     >
       <div className="flex items-center gap-2">
         <div className={cn("h-2 w-2 rounded-full", color)} />

apps/web/src/components/(with-side-bar)/library/category-list.tsx

@@ -3,10 +3,13 @@
 import { useRouter } from "next/navigation";
 
 import { CATEGORY } from "@/constants/category";
-import { invalidateQueries } from "@/lib/tanstack";
+import { CONTENT } from "@/constants/content";
+import { MINUTE } from "@/constants/time";
+import { invalidateQueries, queryClient } from "@/lib/tanstack";
 import { useDeleteCategory } from "@/lib/tanstack/mutation/category";
 import { useGetCategories } from "@/lib/tanstack/query/category";
 import type { CategoryDTO } from "@/models/category";
+import { getCategoryContentById } from "@/services/content";
 import {
   Button,
   Dialog,
@@ -60,8 +63,19 @@ function CategoryItem(props: CategoryDTO) {
     router.push(`/library?category=${props.id},${props.name}`);
   };
 
+  const onMouseEnter = () => {
+    queryClient.prefetchQuery({
+      queryKey: [CONTENT.GET_CATEGORY_CONTENT_BY_ID, props.id.toString()],
+      queryFn: async () => getCategoryContentById(props.id.toString()),
+      staleTime: MINUTE,
+    });
+  };
+
   return (
-    <div className="bg-card border-border hover:border-primary relative cursor-pointer rounded-lg border p-6 transition-all duration-300 hover:-translate-y-1 hover:transform hover:shadow-lg">
+    <div
+      className="bg-card border-border hover:border-primary relative cursor-pointer rounded-lg border p-6 transition-all duration-300 hover:-translate-y-1 hover:transform hover:shadow-lg"
+      onMouseEnter={onMouseEnter}
+    >
       <Dialog>
         <DialogTrigger
           className="absolute right-2 top-2 rounded-md p-1 text-red-500 transition-colors hover:bg-red-100 hover:text-red-700 disabled:opacity-50"

apps/web/src/components/(with-side-bar)/library/content-item.tsx

@@ -1,10 +1,15 @@
+import { CONTENT } from "@/constants/content";
+import { MINUTE } from "@/constants/time";
+import { queryClient } from "@/lib/tanstack";
+import { getContentById } from "@/services/content";
 import type { CategoryContentDTO } from "@linkyboard/types";
 import { cn } from "@linkyboard/utils";
 
 import { FileText, Globe, Youtube } from "lucide-react";
 
 interface ContentItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   item: CategoryContentDTO;
+  draggable?: boolean;
 }
 
 const contentType = {
@@ -22,7 +27,7 @@ const contentType = {
   },
 };
 
-export default function ContentItem({ item, ...props }: ContentItemProps) {
+export default function ContentItem({ item, draggable = false, ...props }: ContentItemProps) {
   const { className, ...restProps } = props;
 
   const onDragStart = (e: React.DragEvent<HTMLButtonElement>) => {
@@ -37,16 +42,27 @@ export default function ContentItem({ item, ...props }: ContentItemProps) {
     e.currentTarget.style.opacity = "1";
   };
 
+  const onMouseEnter = () => {
+    if (draggable) return;
+
+    queryClient.prefetchQuery({
+      queryKey: [CONTENT.GET_CONTENT_BY_ID, item.id],
+      queryFn: async () => getContentById(item.id),
+      staleTime: MINUTE,
+    });
+  };
+
   return (
     <button
       className={cn(
         "bg-card border-border hover:border-primary group cursor-pointer rounded-lg border p-6 text-start transition-all duration-300 hover:-translate-y-1 hover:transform hover:shadow-lg",
         className
       )}
       aria-label={`${item.title} 콘텐츠 상세보기`}
-      draggable
+      draggable={draggable}
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
+      onMouseEnter={onMouseEnter}
       {...restProps}
     >
       <div className="mb-4 flex items-center gap-4">

apps/web/src/components/(with-side-bar)/topic/add-content-list.tsx

@@ -130,6 +130,7 @@ export default function AddContentList({ type, id, isTopicLoading, nodes }: AddC
           ) : (
             filteredContents?.map((item) => (
               <ContentItem
+                draggable
                 key={`${item.id}-content-item`}
                 item={item}
                 onClick={() => onAddContent(item)}

apps/web/src/components/(with-side-bar)/topic/sticker/topic-sticker-detail-modal.tsx

@@ -48,7 +48,7 @@ export default function TopicStickerDetailModal() {
             <button onClick={onRouteToDetail}>
               <MoveDiagonal2 size={20} />
             </button>
-            <button onClick={() => router.back()}>
+            <button onClick={() => topicStore.reset()}>
               <X size={20} />
             </button>
           </div>

apps/web/src/components/(with-side-bar)/topic/sticker/topic-sticker.tsx

@@ -1,3 +1,4 @@
+import { MINUTE } from "@/constants/time";
 import { TOPIC } from "@/constants/topic";
 import { queryClient } from "@/lib/tanstack";
 import { useTopicStore } from "@/lib/zustand/topic";
@@ -20,7 +21,7 @@ export default function TopicSticker({ item }: { item: TopicDTO }) {
     queryClient.prefetchQuery({
       queryKey: [TOPIC.GET_TOPIC_BY_ID, item.id.toString(), null],
       queryFn: () => getTopicById(item.id.toString()),
-      staleTime: 1000 * 60,
+      staleTime: MINUTE,
     });
   };