Merge pull request #410 from boostcampwm-2024/feat/redirect-to-detail-from-search

🐛 fix: 검색시 디테일 페이지로 이동

Author: jungmyunggi

client/src/components/search/SearchResults/SearchResultItem.tsx

@@ -4,11 +4,11 @@ import { CommandItem } from "@/components/ui/command";
 import { useSearchStore } from "@/store/useSearchStore";
 import { SearchResult } from "@/types/search";
 
-export default function SearchResultItem({ title, blogName, path }: SearchResult) {
+export default function SearchResultItem({ id, title, blogName }: SearchResult) {
   const { searchParam } = useSearchStore();
   return (
     <CommandItem className="flex flex-col items-start">
-      <a href={path} className="hover:underline">
+      <a href={`${id}`} className="hover:underline">
         <p className=" text-sm text-500">
           <SearchHighlight text={title} highlight={searchParam} />
         </p>

client/src/hooks/common/usePostCardActions.ts

@@ -23,9 +23,7 @@ export const usePostCardActions = (post: Post) => {
   const incrementView = ({ post, isWindowOpened }: PostWithState): PostWithState => {
     if (isWindowOpened) {
       mutate(undefined, {
-        onSuccess: () => {
-          console.log("조회수 증가 성공");
-        },
+        onSuccess: () => {},
         onError: (error) => {
           console.error("조회수 증가 실패", error);
         },
@@ -41,3 +39,17 @@ export const usePostCardActions = (post: Post) => {
 
   return { openPost, incrementView };
 };
+export function useIncrementViewByPostId(id: number) {
+  const { mutate } = usePostViewIncrement(id);
+
+  const increment = () => {
+    mutate(undefined, {
+      onSuccess: () => {},
+      onError: (error) => {
+        console.error("조회수 증가 실패", error);
+      },
+    });
+  };
+
+  return increment;
+}

client/src/pages/PostDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useParams } from "react-router-dom";
 
 import { PostContent } from "@/components/common/Card/detail/PostContent";
@@ -8,16 +8,25 @@ import Header from "@/components/layout/Header";
 import Loading from "@/pages/Loading";
 import NotFound from "@/pages/NotFound";
 
+import { useIncrementViewByPostId } from "@/hooks/common/usePostCardActions";
 import { usePostDetail } from "@/hooks/queries/usePostDetail";
 
 export default function PostDetailPage() {
   const { id } = useParams();
-  if (id && !/^\d+$/.test(id)) {
+
+  const numericId = Number(id);
+  const increment = useIncrementViewByPostId(numericId);
+  const { data, isLoading, error } = usePostDetail(numericId);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    increment();
+  }, [id]);
+
+  if (!id || !/^\d+$/.test(id)) {
     return <NotFound />;
   }
 
-  const { data, isLoading, error } = usePostDetail(Number(id));
-  const modalRef = useRef<HTMLDivElement>(null);
   if (isLoading) {
     return <Loading />;
   }