[FEAT] [HIGH-66] QA 사항 반영 및 클릭 로깅 API 연동

src/apis/content/postContentClick.ts

@@ -0,0 +1,16 @@
+import { axiosInstance } from "@/apis/axiosInstance";
+import { END_POINTS } from "@/constants/api";
+
+interface PostContentClickParams {
+  contentId: number;
+}
+
+const postContentClick = async ({ contentId }: PostContentClickParams) => {
+  const response = await axiosInstance.post(END_POINTS.CONTENT_CLICK, {
+    contentId,
+  });
+
+  return response.data;
+};
+
+export default postContentClick;

src/apis/shorts/getShortsById.ts

@@ -1,4 +1,3 @@
-// src/apis/shorts/getShortsById.ts
 import { axiosInstance } from "@/apis/axiosInstance";
 import { END_POINTS } from "@/constants/api";
 import type { ShortsItem } from "@/types/shorts";

src/components/Home/molecule/RecommendationSection.tsx

@@ -1,6 +1,7 @@
 import { Link } from "react-router-dom";
 import ContentCard from "@/components/Home/atom/ContentCard";
 import { PATH } from "@/constants/path";
+import useContentClickMutation from "@/hooks/queries/content/useContentClickMutation";
 import type { RecommendContent } from "@/types/RecommendContentsResponse";
 
 interface RecommendationSectionProps {
@@ -14,6 +15,8 @@ const RecommendationSection = ({
   customHeader,
   contents,
 }: RecommendationSectionProps) => {
+  const { mutatePostContentClick } = useContentClickMutation();
+
   return (
     <section className="mt-6">
       {customHeader ? (
@@ -30,6 +33,9 @@ const RecommendationSection = ({
             style={{ width: "clamp(100px, 22vw, 160px)" }}>
             <Link
               to={PATH.CONTENT_DETAIL.replace(":id", String(content.contentId))}
+              onClick={() =>
+                mutatePostContentClick({ contentId: content.contentId })
+              }
               className="block focus:outline-none focus-visible:ring-2 ring-offset-2 ring-custom-point">
               <ContentCard
                 thumbnailUrl={content.thumbnailUrl}

src/components/search/organism/SearchContentList.tsx

@@ -4,6 +4,7 @@ import SearchContentItem from "@/components/search/molecules/SearchContentItem";
 import { Input } from "@/components/ui/input";
 import { PATH } from "@/constants/path";
 import { useSearchContent } from "@/hooks/onboarding/useSearchContent";
+import useContentClickMutation from "@/hooks/queries/content/useContentClickMutation";
 
 const SEARCH_LIMIT = 10;
 
@@ -19,7 +20,10 @@ export default function SearchContentList() {
     targetRef,
   } = useSearchContent(SEARCH_LIMIT);
 
+  const { mutatePostContentClick } = useContentClickMutation();
+
   const handleItemClick = (contentId: number) => {
+    mutatePostContentClick({ contentId });
     navigate(PATH.CONTENT_DETAIL.replace(":id", String(contentId)));
   };
 

src/components/shorts/organism/ReelCard.tsx

@@ -4,7 +4,6 @@ import { X } from "lucide-react";
 import { postShortsWatchLog } from "@/apis/shorts/postShortsWatchLog";
 import ReelProgressBar from "@/components/shorts/molecules/ReelProgressBar";
 import { Button } from "@/components/ui/button";
-import { PATH } from "@/constants/path";
 import { useCommentTimeline } from "@/hooks/shorts/useCommentTimeline";
 import { useShortsLikeInfo } from "@/hooks/shorts/useShortsLikeInfo";
 import { useVideoPlayer } from "@/hooks/shorts/useVideoPlayer";
@@ -61,7 +60,7 @@ export default function ReelCard({ reel }: ReelCardProps) {
       }).catch((e) => console.error("시청 로그 전송 실패", e));
     }
 
-    navigate(PATH.HOME);
+    navigate(-1);
   };
 
   return (

src/components/shorts/organism/ReelOverlay.tsx

@@ -14,6 +14,7 @@ import {
 } from "@/components/ui/drawer";
 import { END_POINTS } from "@/constants/api";
 import { useIntersectionObserver } from "@/hooks/common/useIntersectionObserver";
+import useContentClickMutation from "@/hooks/queries/content/useContentClickMutation";
 import { useCommentInfiniteQuery } from "@/hooks/queries/shorts/useCommentInfiniteQuery";
 import { useDislikeMutation } from "@/hooks/queries/shorts/useDislikeMutation";
 import { useLikeMutation } from "@/hooks/queries/shorts/useLikeMutation";
@@ -46,6 +47,7 @@ export default function ReelOverlay({
   contentId,
 }: ReelOverlayProps) {
   const navigate = useNavigate();
+  const { mutatePostContentClick } = useContentClickMutation();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [activeComment, setActiveComment] = useState<CommentWithTime | null>(
     null
@@ -102,6 +104,7 @@ export default function ReelOverlay({
   });
 
   const handleTitleClick = () => {
+    mutatePostContentClick({ contentId });
     navigate(END_POINTS.CONTENT_DETAIL(contentId));
   };
 

src/constants/api.ts

@@ -27,6 +27,7 @@ export const END_POINTS = {
   SHORTS_COMMENT_TIMELINE: (shortsId: number) => `/shorts/${shortsId}/comments`,
   WATCH_LOG: "content/watch-log",
   USER_REVIEW: "user/reviews",
+  CONTENT_CLICK: "content/click",
 } as const;
 
 export const NETWORK_TIMEOUT = 30000;

src/hooks/queries/content/useContentClickMutation.ts

@@ -0,0 +1,14 @@
+import { useMutation } from "@tanstack/react-query";
+import postContentClick from "@/apis/content/postContentClick";
+
+const useContentClickMutation = () => {
+  const postContentClickMutation = useMutation({
+    mutationFn: postContentClick,
+  });
+
+  return {
+    mutatePostContentClick: postContentClickMutation.mutateAsync,
+  };
+};
+
+export default useContentClickMutation;

src/hooks/queries/shorts/useCommentMutation.ts

@@ -11,6 +11,9 @@ export const useCommentMutation = () => {
         queryClient.invalidateQueries({
           queryKey: ["shortsComment", shortsId, time],
         });
+        queryClient.refetchQueries({
+          queryKey: ["shortsCommentTimeline", shortsId],
+        });
       },
     }
   );

src/hooks/queries/shorts/useCommentQuery.ts

@@ -11,4 +11,3 @@ export const useCommentQuery = ({ shortsId, time }: ShortsTimeLine) => {
 
   return shortsComment;
 };
-