[#767, #768, #769] 운영서버 배포 중 발견된 버그 해결 (#770)

* fix: 이용자가 포트폴리오를 초기화하지 않았으면 이에 맞는 에러 화면을 보여준다.

* feat: 비동기 데이터의 cacheTime 을 설정한다

- 프로필 데이터 4시간으로 설정
- 포트폴리오 데이터 0초로 설정

* fix: 검색 결과로 보이는 게시글들에서 좋아요가 수행되지 않는 문제를 해결

* fix: 앞으로 가기와 슬라이더가 연동되지 않는 문제 해결

* fix: 포트폴리오가 초기화 되지 않은 경우에 대해 잘못된 에러 페이지가 보이는 문제 해결

- 필요 없는 profile 데이터 요청 삭제

frontend/src/components/Feed/Feed.tsx

@@ -83,6 +83,7 @@ const Feed = ({
     const newPosts = [...posts];
     const targetPost = newPosts.find((post) => post.id === postId);
 
+
     if (!targetPost) {
       return;
     }

frontend/src/hooks/common/useStep.ts

@@ -14,7 +14,7 @@ const useStep = ({ steps, stepIndex, setStepIndex }: Parameters) => {
 
   const setStepMoveEventHandler = () => {
     window.onpopstate = () => {
-      if (getLastHash(history.location.pathname) === steps[stepIndex + 1]?.hash) {
+      if (getLastHash(history.location.hash) === steps[stepIndex + 1]?.hash) {
         setStepIndex(stepIndex + 1);
         return;
       }

frontend/src/hooks/service/useFeedMutation.ts

@@ -2,7 +2,6 @@ import { useContext } from "react";
 import { InfiniteData, QueryKey, useQueryClient } from "react-query";
 import { Post } from "../../@types";
 import { UNKNOWN_ERROR_MESSAGE } from "../../constants/messages";
-import { QUERY } from "../../constants/queries";
 import SnackBarContext from "../../contexts/SnackbarContext";
 
 import { useAddPostLikeMutation, useDeletePostLikeMutation, useDeletePostMutation } from "../../services/queries";
@@ -48,28 +47,35 @@ const useFeedMutation = (queryKeyList: QueryKey[]) => {
   };
 
   const addPostLike = async (postId: Post["id"]) => {
-    const infinitePostsData = queryClient.getQueryData<InfiniteData<Post[]>>(QUERY.GET_HOME_FEED_POSTS("all"));
-    const targetPost = getTargetPost(postId, [...(infinitePostsData?.pages ?? [])]);
+    let addingLikePost: Post; 
 
-    if (!targetPost) {
-      return;
-    }
+    infinitePostsDataList.forEach(async (infinitePostsData, index) => {
+      const newPostsPages = [...infinitePostsData.pages];
+      const targetPost = getTargetPost(postId, newPostsPages);
+
+      if (targetPost) {
 
-    const prevLiked = targetPost?.liked;
-    const prevLikesCount = targetPost?.likesCount;
+        targetPost.liked = true;
+        targetPost.likesCount += 1;
+
+        setPostsPages(newPostsPages, queryKeyList[index]);
+        addingLikePost = targetPost;
+      }
+    });
 
-    setPostLike(postId, { liked: true, likesCount: prevLikesCount + 1 });
+    const prevPostLiked = false;
+    const prevPostLikesCount = addingLikePost!.likesCount - 1;
 
     try {
       const { liked, likesCount } = await mutateAddPostLike(postId);
 
-      if (liked === prevLiked || likesCount === prevLikesCount) {
+      if (liked === prevPostLiked || likesCount === prevPostLikesCount) {
         pushSnackbarMessage(UNKNOWN_ERROR_MESSAGE);
-        setPostLike(postId, { liked: prevLiked, likesCount: prevLikesCount });
+        setPostLike(postId, { liked: prevPostLiked, likesCount: prevPostLikesCount });
       }
     } catch (error) {
       pushSnackbarMessage(UNKNOWN_ERROR_MESSAGE);
-      setPostLike(postId, { liked: prevLiked, likesCount: prevLikesCount });
+      setPostLike(postId, { liked: prevPostLiked, likesCount: prevPostLikesCount });
     }
   };
 
@@ -84,28 +90,37 @@ const useFeedMutation = (queryKeyList: QueryKey[]) => {
   };
 
   const deletePostLike = async (postId: Post["id"]) => {
-    const infinitePostsData = queryClient.getQueryData<InfiniteData<Post[]>>(QUERY.GET_HOME_FEED_POSTS("all"));
-    const targetPost = getTargetPost(postId, [...(infinitePostsData?.pages ?? [])]);
+    let deletingPost: Post; 
 
-    if (!targetPost) {
-      return;
-    }
+    infinitePostsDataList.forEach(async (infinitePostsData, index) => {
+      const newPostsPages = [...infinitePostsData.pages];
+      const targetPost = getTargetPost(postId, newPostsPages);
+
+      if (targetPost) {
 
-    const prevLiked = targetPost?.liked;
-    const prevLikesCount = targetPost?.likesCount;
+        targetPost.liked = false;
+        if (targetPost.likesCount > 0) {
+          targetPost.likesCount -= 1;
+        }
+
+        setPostsPages(newPostsPages, queryKeyList[index]);
+        deletingPost = targetPost;
+      }
+    });
 
-    setPostLike(postId, { liked: false, likesCount: prevLikesCount - 1 });
+    const prevPostLiked = true;
+    const prevPostLikesCount = deletingPost!.likesCount + 1;
 
     try {
       const { liked, likesCount } = await mutateDeletePostLike(postId);
 
-      if (liked === prevLiked || likesCount === prevLikesCount) {
+      if (liked === prevPostLiked || likesCount === prevPostLikesCount) {
         pushSnackbarMessage(UNKNOWN_ERROR_MESSAGE);
-        setPostLike(postId, { liked: prevLiked, likesCount: prevLikesCount });
+        setPostLike(postId, { liked: prevPostLiked, likesCount: prevPostLikesCount });
       }
     } catch (error) {
       pushSnackbarMessage(UNKNOWN_ERROR_MESSAGE);
-      setPostLike(postId, { liked: prevLiked, likesCount: prevLikesCount });
+      setPostLike(postId, { liked: prevPostLiked, likesCount: prevPostLikesCount });
     }
   };
 

frontend/src/pages/HomeFeedPage/HomeFeedPage.tsx

@@ -62,9 +62,6 @@ const HomeFeedPage = () => {
     if (browserName === "safari") {
       showAlert("특정 사파리 버전에선 \n 앱의 기능이 제한될 수 있습니다.");
     }
-
-    refetchAll();
-    setTimeout(refetchAll, 300);
   }, []);
 
   if (isLoading || isFirstImagesLoading) {

frontend/src/pages/PortfolioPage/PortfolioPage.tsx

@@ -13,6 +13,7 @@ import { CONTACT_ICON } from "../../constants/portfolio";
 
 import usePortfolio from "../../hooks/service/usePortfolio";
 import useProfile from "../../hooks/service/useProfile";
+import { customError } from "../../utils/error";
 
 import {
   AvatarWrapper,
@@ -30,37 +31,35 @@ import {
 const PortfolioPage = () => {
   const username = new URLSearchParams(location.search).get("username") ?? "";
   const containerRef = useRef<HTMLDivElement>(null);
-  const { data: profile } = useProfile(false, username);
 
   const {
     portfolio: remotePortfolio,
     isLoading: isPortfolioLoading,
     isError,
-    error,
     isFetching,
-  } = usePortfolio(username);
+  } = usePortfolio(username, false);
 
   if (isPortfolioLoading || isFetching) {
     return <PageLoading />;
   }
 
-  if (!remotePortfolio || isError) {
-    if (error?.response?.status === 400) {
-      return (
-        <>
-          <PortfolioHeader username={profile?.name ?? ""} />
-          <PageError errorMessage="아직 포트폴리오가 만들어지지 않았습니다" />
-        </>
-      );
-    }
-
+  if (isError) {
     return <PageError errorMessage="포트폴리오 정보를 불러오는데 실패했습니다" />;
   }
 
+  if (!remotePortfolio) {
+    return (
+      <>
+        <PortfolioHeader username={username} />
+        <PageError errorMessage="아직 포트폴리오가 만들어지지 않았습니다" />
+      </>
+    );
+  }
+
   return (
     <>
       <ScrollActiveHeader containerRef={containerRef}>
-        <PortfolioHeader portfolio={remotePortfolio} username={profile?.name ?? ""} />
+        <PortfolioHeader portfolio={remotePortfolio} username={username} />
       </ScrollActiveHeader>
       <Container ref={containerRef}>
         <FullPage isVerticalCenter={true}>

frontend/src/services/queries/portfolio.ts

@@ -21,6 +21,7 @@ export const usePortfolioQuery = (username: string, isMyPortfolio: boolean) => {
 
   return useQuery<PortfolioData, AxiosError<ErrorResponse>>([QUERY.GET_PORTFOLIO], portfolioQueryFunction, {
     refetchOnWindowFocus: false,
+    cacheTime: 0
   });
 };
 

frontend/src/services/queries/profile.ts

@@ -48,7 +48,7 @@ export const useProfileQuery = (isMyProfile: boolean, username: string | null) =
   return useQuery<ProfileData, AxiosError<ErrorResponse>>(
     [QUERY.GET_PROFILE, { isMyProfile, username }],
     profileQueryFunction,
-    { suspense: true }
+    { suspense: true, cacheTime: 3600 * 4 }
   );
 };