feat: 좋아요 합성

sopt-makers · Dec 9, 2023 · 51c1728 · 51c1728
1 parent e3a1229
commit 51c1728
Showing 1 changed file with 41 additions and 20 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,5 +1,6 @@
 import { ampli } from '@/ampli';
-import { useInfinitePosts } from '@api/post/hooks';
+import { useInfinitePosts, useMutationUpdateLike } from '@api/post/hooks';
+import LikeButton from '@components/button/LikeButton';
 import FeedItem from '@components/page/meetingDetail/Feed/FeedItem';
 import MeetingInfo from '@components/page/meetingDetail/Feed/FeedItem/MeetingInfo';
 import MobileFeedListSkeleton from '@components/page/meetingDetail/Feed/Skeleton/MobileFeedListSkeleton';
@@ -12,10 +13,12 @@ import { useDisplay } from '@hooks/useDisplay';
 import { useIntersectionObserver } from '@hooks/useIntersectionObserver';
 import type { NextPage } from 'next';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { styled } from 'stitches.config';
 
 const Home: NextPage = () => {
   const { isTablet } = useDisplay();
+  const router = useRouter();
 
   const { data: postsData, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfinitePosts(TAKE_COUNT);
 
@@ -25,25 +28,43 @@ const Home: NextPage = () => {
     }
   };
   const { setTarget } = useIntersectionObserver({ onIntersect });
-  const renderedPosts = postsData?.pages.map(post => (
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    <Link href={`/post?id=${post?.id}`} key={post?.id}>
-      <a>
-        <FeedItem
-          /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-          /* @ts-ignore */
-          post={post}
-          HeaderSection={
-            <MeetingInfo
-              meetingInfo={
-                (post as any)?.meeting || { id: 89, title: '오늘밤 난 바람났어 강동 멋쟁이', category: '스터디' }
-              }
-            />
-          }
-        />
-      </a>
-    </Link>
-  ));
+
+  const { mutate: mutateLikeInAllPost } = useMutationUpdateLike(TAKE_COUNT);
+
+  const handleClickLike =
+    (postId: number) => (mutateCb: (postId: number) => void) => (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      ampli.clickFeedlistLike({ location: router.pathname });
+      mutateCb(postId);
+    };
+
+  const renderedPosts = postsData?.pages.map(post => {
+    if (!post) return;
+    return (
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      <Link href={`/post?id=${post?.id}`} key={post?.id}>
+        <a>
+          <FeedItem
+            /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+            /* @ts-ignore */
+            post={post}
+            LikeButton={
+              <LikeButton
+                isLiked={post.isLiked}
+                likeCount={post.likeCount}
+                onClickLike={handleClickLike(post.id)(mutateLikeInAllPost)}
+              />
+            }
+            HeaderSection={
+              <MeetingInfo
+                meetingInfo={post?.meeting || { id: 89, title: '오늘밤 난 바람났어 강동 멋쟁이', category: '스터디' }}
+              />
+            }
+          />
+        </a>
+      </Link>
+    );
+  });
 
   return (
     <>