From dfa5cde29519c99dbeca5a829e74edca8f23f700 Mon Sep 17 00:00:00 2001 From: ghdtnals Date: Tue, 9 Dec 2025 19:28:44 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20useDebouncedCallback=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/entities/post/ui/card/PostCard.tsx | 23 +-------------- src/widgets/header/ui/Header.tsx | 12 ++++---- src/widgets/header/ui/HeaderDesktop.tsx | 19 ------------- src/widgets/header/ui/MobileSideMenu.tsx | 22 ++------------- src/widgets/main/ui/SideMenu/SideMenu.tsx | 34 ----------------------- 5 files changed, 9 insertions(+), 101 deletions(-) diff --git a/src/entities/post/ui/card/PostCard.tsx b/src/entities/post/ui/card/PostCard.tsx index 71eff1e0..9c138dee 100644 --- a/src/entities/post/ui/card/PostCard.tsx +++ b/src/entities/post/ui/card/PostCard.tsx @@ -2,9 +2,6 @@ import Image from "next/image"; import Link from "next/link"; -import { useQueryClient } from "@tanstack/react-query"; -import { getPostDetail } from "@/entities/post/api/getPostDetail"; -import { useDebouncedCallback } from "@/shared/lib/useDebouncedCallback"; import PostStatusBadge from "../badge/PostStatusBadge"; import { PostStatus } from "../../model/types/post"; @@ -32,26 +29,8 @@ const PostCard = ({ thumbnail, status, }: PostCardProps) => { - const queryClient = useQueryClient(); - - const { debouncedCallback: handleMouseEnter, cancel: handleMouseLeave } = - useDebouncedCallback(() => { - const cached = queryClient.getQueryData(["postDetail", postingId]); - if (cached) return; - - queryClient.prefetchQuery({ - queryKey: ["postDetail", postingId], - queryFn: () => getPostDetail(postingId), - staleTime: 1000 * 60 * 3, - }); - }, 200); - return ( - +
diff --git a/src/widgets/header/ui/Header.tsx b/src/widgets/header/ui/Header.tsx index 561cd665..95d137e3 100644 --- a/src/widgets/header/ui/Header.tsx +++ b/src/widgets/header/ui/Header.tsx @@ -19,12 +19,12 @@ const navItems = [ icon: "/icons/chats.svg", hasDivider: false, }, - { - href: "/ai", - label: "분석하기", - icon: "/icons/analyze.svg", - hasDivider: true, - }, + // { + // href: "/ai", + // label: "분석하기", + // icon: "/icons/analyze.svg", + // hasDivider: true, + // }, { href: "/my", label: "마이페이지", diff --git a/src/widgets/header/ui/HeaderDesktop.tsx b/src/widgets/header/ui/HeaderDesktop.tsx index 21ed8570..ca51edf0 100644 --- a/src/widgets/header/ui/HeaderDesktop.tsx +++ b/src/widgets/header/ui/HeaderDesktop.tsx @@ -2,9 +2,6 @@ import Link from "next/link"; import SearchForm from "./SearchForm"; -import { useQueryClient } from "@tanstack/react-query"; -import { getMyProfile } from "@/entities/user/api/mypage"; -import { useDebouncedCallback } from "@/shared/lib/useDebouncedCallback"; interface HeaderDesktopProps { isLogined: boolean; @@ -26,18 +23,6 @@ const HeaderDesktop = ({ navItems, onOpenChat, }: HeaderDesktopProps) => { - const queryClient = useQueryClient(); - - const handleProfilePrefetch = () => { - queryClient.prefetchQuery({ - queryKey: ["userProfile"], - queryFn: getMyProfile, - }); - }; - - const { debouncedCallback: debouncedPrefetch, cancel: cancelPrefetch } = - useDebouncedCallback(handleProfilePrefetch, 500); - return (
@@ -71,10 +56,6 @@ const HeaderDesktop = ({ {label}

{label}

diff --git a/src/widgets/header/ui/MobileSideMenu.tsx b/src/widgets/header/ui/MobileSideMenu.tsx index 59a18f4c..042e977f 100644 --- a/src/widgets/header/ui/MobileSideMenu.tsx +++ b/src/widgets/header/ui/MobileSideMenu.tsx @@ -6,10 +6,6 @@ import Link from "next/link"; import { useModalStore } from "@/shared/model/modal.store"; import { useAuthStore } from "@/features/auth/model/auth.store"; import cn from "@/shared/lib/cn"; -import { apiFetch } from "@/shared/api/fetcher"; -import { useQueryClient } from "@tanstack/react-query"; -import { getMyProfile } from "@/entities/user/api/mypage"; -import { useDebouncedCallback } from "@/shared/lib/useDebouncedCallback"; export default function MobileSideMenu({ onClose, @@ -27,18 +23,6 @@ export default function MobileSideMenu({ const { openModal, closeModal } = useModalStore(); const [isVisible, setIsVisible] = useState(false); - const queryClient = useQueryClient(); - - const handleProfilePrefetch = () => { - queryClient.prefetchQuery({ - queryKey: ["userProfile"], - queryFn: getMyProfile, - }); - }; - - const { debouncedCallback: debouncedPrefetch, cancel: cancelPrefetch } = - useDebouncedCallback(handleProfilePrefetch, 500); - useEffect(() => { const timer = requestAnimationFrame(() => setIsVisible(true)); return () => cancelAnimationFrame(timer); @@ -102,13 +86,13 @@ export default function MobileSideMenu({
  • - 분석하기 - + */}
  • @@ -116,8 +100,6 @@ export default function MobileSideMenu({ href="/my" className="block px-4 py-3 text-white hover:bg-white/10" onClick={handleClose} - onMouseEnter={debouncedPrefetch} - onMouseLeave={cancelPrefetch} > 마이페이지 diff --git a/src/widgets/main/ui/SideMenu/SideMenu.tsx b/src/widgets/main/ui/SideMenu/SideMenu.tsx index b1c89f29..4669e173 100644 --- a/src/widgets/main/ui/SideMenu/SideMenu.tsx +++ b/src/widgets/main/ui/SideMenu/SideMenu.tsx @@ -1,10 +1,7 @@ "use client"; -import { useQueryClient } from "@tanstack/react-query"; -import { getPosts } from "@/entities/post/api/getPosts"; import cn from "@/shared/lib/cn"; import { useRouter } from "next/navigation"; -import { useDebouncedCallback } from "@/shared/lib/useDebouncedCallback"; import { useSearchParams } from "next/navigation"; interface SideMenuProps { @@ -15,33 +12,6 @@ interface SideMenuProps { const SideMenu = ({ categories, selectedCategory }: SideMenuProps) => { const router = useRouter(); const searchParams = useSearchParams(); - const queryClient = useQueryClient(); - - const prefetchData = async (category: string) => { - const existing = queryClient.getQueryData([ - "posts", - category, - "latest", - "", - ]); - if (existing) return; - - queryClient.prefetchInfiniteQuery({ - queryKey: ["posts", category, "latest", ""], - queryFn: ({ pageParam = 1 }) => - getPosts({ - category, - sort: "latest", - page: pageParam, - keyword: "", - }), - initialPageParam: 1, - staleTime: 1000 * 60 * 5, - }); - }; - - const { debouncedCallback: handleHover, cancel: cancelHover } = - useDebouncedCallback(prefetchData, 200); const handleSelect = async (category: string) => { if (category === selectedCategory) return; @@ -52,8 +22,6 @@ const SideMenu = ({ categories, selectedCategory }: SideMenuProps) => { params.delete("keyword"); router.push(`/?${params.toString()}`); - - cancelHover(); }; return ( @@ -74,8 +42,6 @@ const SideMenu = ({ categories, selectedCategory }: SideMenuProps) => {