Merge branch 'develop' into feat/#627

sopt-makers · Dec 9, 2023 · 63c26b0 · 63c26b0
2 parents 6b81c35 + c6ce9b6
commit 63c26b0
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 46 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,38 @@ 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 (
+      <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} />}
+          />
+        </a>
+      </Link>
+    );
+  });
 
   return (
     <>

diff --git a/pages/mine/index.tsx b/pages/mine/index.tsx
@@ -15,8 +15,8 @@ import { MeetingListOfApplied, MeetingListOfMine } from '@components/page/meetin
 import { SSRSafeSuspense } from '@components/util/SSRSafeSuspense';
 
 const enum MeetingType {
-  MADE,
   APPLIED,
+  MADE,
 }
 
 const MinePage: NextPage = () => {

diff --git a/pages/post/index.tsx b/pages/post/index.tsx
@@ -230,29 +230,31 @@ export default function PostPage() {
         }}
       />
       <FeedListContainer>
-        <FeedListWrapper>
-          <FeedListTitle>이 모임의 다른 피드</FeedListTitle>
-          <FeedList>
-            {postsInMeeting?.map(post => {
-              if (!post) return;
-              return (
-                <Link key={post.id} href={`/post?id=${post.id}`}>
-                  <a>
-                    <FeedItem
-                      /* TODO: FeedItem 인터페이스 안 맞는거 맞춰주기. 내부에서 query params 의존하는 부분 수정하기. */
-                      /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-                      /* @ts-ignore */
-                      post={post}
-                      meetingId={meetingId}
-                      // eslint-disable-next-line prettier/prettier
+        {postsInMeeting && postsInMeeting.length > 0 && (
+          <FeedListWrapper>
+            <FeedListTitle>이 모임의 다른 피드</FeedListTitle>
+            <FeedList>
+              {postsInMeeting?.map(post => {
+                if (!post) return;
+                return (
+                  <Link key={post.id} href={`/post?id=${post.id}`}>
+                    <a>
+                      <FeedItem
+                        /* TODO: FeedItem 인터페이스 안 맞는거 맞춰주기. 내부에서 query params 의존하는 부분 수정하기. */
+                        /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+                        /* @ts-ignore */
+                        post={post}
+                        meetingId={meetingId}
+                        // eslint-disable-next-line prettier/prettier
                       LikeButton={<LikeButton isLiked={post.isLiked} likeCount={post.likeCount} onClickLike={handleClickLike(post.id)(mutateLike)} />}
-                    />
-                  </a>
-                </Link>
-              );
-            })}
-          </FeedList>
-        </FeedListWrapper>
+                      />
+                    </a>
+                  </Link>
+                );
+              })}
+            </FeedList>
+          </FeedListWrapper>
+        )}
         <FeedListWrapper>
           <FeedListTitle>SOPT 모임들의 최신 피드</FeedListTitle>
           <FeedList>

diff --git a/src/components/page/meetingDetail/Feed/FeedItem/MeetingInfo.tsx b/src/components/page/meetingDetail/Feed/FeedItem/MeetingInfo.tsx
@@ -47,6 +47,9 @@ const Container = styled('div', {
   '&:hover': {
     border: '1px solid $gray500',
   },
+  '@tablet': {
+    background: '$gray900',
+  },
 });
 
 const MeetingInfoWrapper = styled('div', {

diff --git a/src/components/page/meetingDetail/Feed/FeedPanel.tsx b/src/components/page/meetingDetail/Feed/FeedPanel.tsx
@@ -1,6 +1,8 @@
 import { ampli } from '@/ampli';
+import { useQueryGetMeeting } from '@api/meeting/hooks';
 import { useInfinitePosts, useMutationUpdateLike } from '@api/post/hooks';
 import { useQueryMyProfile } from '@api/user/hooks';
+import LikeButton from '@components/button/LikeButton';
 import FeedCreateModal from '@components/feed/Modal/FeedCreateModal';
 import { POST_MAX_COUNT, TAKE_COUNT } from '@constants/feed';
 import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid';
@@ -14,8 +16,6 @@ import { styled } from 'stitches.config';
 import EmptyView from './EmptyView';
 import FeedItem from './FeedItem';
 import MobileFeedListSkeleton from './Skeleton/MobileFeedListSkeleton';
-import LikeButton from '@components/button/LikeButton';
-import { useQueryGetMeeting } from '@api/meeting/hooks';
 
 interface FeedPanelProps {
   isMember: boolean;
@@ -63,7 +63,7 @@ const FeedPanel = ({ isMember }: FeedPanelProps) => {
   const handleLikeClick = (postId: number) => (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     mutateLike(postId);
-    ampli.clickFeedlistLike({ crew_status: meeting?.approved, location: router.pathname });
+    ampli.clickFeedlistLike({ location: router.pathname });
   };
 
   const renderedPosts = postsData?.pages.map(post => {

diff --git a/src/hooks/useScrollRestoration.ts b/src/hooks/useScrollRestoration.ts
@@ -1,12 +1,16 @@
 import { NextRouter, useRouter } from 'next/router';
 import { useEffect } from 'react';
 
+const blacklist = ['/post'];
+
 export default function useScrollRestoration() {
   const router = useRouter();
 
   useEffect(() => {
     if (!('scrollRestoration' in window.history)) return;
 
+    if (blacklist.includes(router.pathname)) return;
+
     window.history.scrollRestoration = 'manual';
 
     const onRouteChangeStart = () => {