diff --git a/src/apis/content/postContentClick.ts b/src/apis/content/postContentClick.ts new file mode 100644 index 0000000..e246bd8 --- /dev/null +++ b/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; diff --git a/src/apis/shorts/getShortsById.ts b/src/apis/shorts/getShortsById.ts index 3d0c6b1..f083a0f 100644 --- a/src/apis/shorts/getShortsById.ts +++ b/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"; diff --git a/src/components/Home/molecule/RecommendationSection.tsx b/src/components/Home/molecule/RecommendationSection.tsx index 644e7a6..428be4c 100644 --- a/src/components/Home/molecule/RecommendationSection.tsx +++ b/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 (
{customHeader ? ( @@ -30,6 +33,9 @@ const RecommendationSection = ({ style={{ width: "clamp(100px, 22vw, 160px)" }}> + mutatePostContentClick({ contentId: content.contentId }) + } className="block focus:outline-none focus-visible:ring-2 ring-offset-2 ring-custom-point"> { + mutatePostContentClick({ contentId }); navigate(PATH.CONTENT_DETAIL.replace(":id", String(contentId))); }; diff --git a/src/components/shorts/organism/ReelCard.tsx b/src/components/shorts/organism/ReelCard.tsx index 5dafd02..f051318 100644 --- a/src/components/shorts/organism/ReelCard.tsx +++ b/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 ( diff --git a/src/components/shorts/organism/ReelOverlay.tsx b/src/components/shorts/organism/ReelOverlay.tsx index 8b0022c..d2de682 100644 --- a/src/components/shorts/organism/ReelOverlay.tsx +++ b/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( null @@ -102,6 +104,7 @@ export default function ReelOverlay({ }); const handleTitleClick = () => { + mutatePostContentClick({ contentId }); navigate(END_POINTS.CONTENT_DETAIL(contentId)); }; diff --git a/src/constants/api.ts b/src/constants/api.ts index c239a96..a7d180e 100644 --- a/src/constants/api.ts +++ b/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; diff --git a/src/hooks/queries/content/useContentClickMutation.ts b/src/hooks/queries/content/useContentClickMutation.ts new file mode 100644 index 0000000..5656895 --- /dev/null +++ b/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; diff --git a/src/hooks/queries/shorts/useCommentMutation.ts b/src/hooks/queries/shorts/useCommentMutation.ts index 120875c..da021d1 100644 --- a/src/hooks/queries/shorts/useCommentMutation.ts +++ b/src/hooks/queries/shorts/useCommentMutation.ts @@ -11,6 +11,9 @@ export const useCommentMutation = () => { queryClient.invalidateQueries({ queryKey: ["shortsComment", shortsId, time], }); + queryClient.refetchQueries({ + queryKey: ["shortsCommentTimeline", shortsId], + }); }, } ); diff --git a/src/hooks/queries/shorts/useCommentQuery.ts b/src/hooks/queries/shorts/useCommentQuery.ts index 9f05309..f028867 100644 --- a/src/hooks/queries/shorts/useCommentQuery.ts +++ b/src/hooks/queries/shorts/useCommentQuery.ts @@ -11,4 +11,3 @@ export const useCommentQuery = ({ shortsId, time }: ShortsTimeLine) => { return shortsComment; }; -