diff --git a/frontend/src/components/Feed/Feed.tsx b/frontend/src/components/Feed/Feed.tsx index af6e925e1..2971a8e77 100644 --- a/frontend/src/components/Feed/Feed.tsx +++ b/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; } diff --git a/frontend/src/hooks/common/useStep.ts b/frontend/src/hooks/common/useStep.ts index c516ba423..f294e5bd9 100644 --- a/frontend/src/hooks/common/useStep.ts +++ b/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; } diff --git a/frontend/src/hooks/service/useFeedMutation.ts b/frontend/src/hooks/service/useFeedMutation.ts index aabfc14cf..aeebf6742 100644 --- a/frontend/src/hooks/service/useFeedMutation.ts +++ b/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>(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>(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 }); } }; diff --git a/frontend/src/pages/HomeFeedPage/HomeFeedPage.tsx b/frontend/src/pages/HomeFeedPage/HomeFeedPage.tsx index 433e7c3bd..d36683b51 100644 --- a/frontend/src/pages/HomeFeedPage/HomeFeedPage.tsx +++ b/frontend/src/pages/HomeFeedPage/HomeFeedPage.tsx @@ -62,9 +62,6 @@ const HomeFeedPage = () => { if (browserName === "safari") { showAlert("특정 사파리 버전에선 \n 앱의 기능이 제한될 수 있습니다."); } - - refetchAll(); - setTimeout(refetchAll, 300); }, []); if (isLoading || isFirstImagesLoading) { diff --git a/frontend/src/pages/PortfolioPage/PortfolioPage.tsx b/frontend/src/pages/PortfolioPage/PortfolioPage.tsx index 51142f879..d8925413f 100644 --- a/frontend/src/pages/PortfolioPage/PortfolioPage.tsx +++ b/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(null); - const { data: profile } = useProfile(false, username); const { portfolio: remotePortfolio, isLoading: isPortfolioLoading, isError, - error, isFetching, - } = usePortfolio(username); + } = usePortfolio(username, false); if (isPortfolioLoading || isFetching) { return ; } - if (!remotePortfolio || isError) { - if (error?.response?.status === 400) { - return ( - <> - - - - ); - } - + if (isError) { return ; } + if (!remotePortfolio) { + return ( + <> + + + + ); + } + return ( <> - + diff --git a/frontend/src/services/queries/portfolio.ts b/frontend/src/services/queries/portfolio.ts index 116b3a230..e16a4df40 100644 --- a/frontend/src/services/queries/portfolio.ts +++ b/frontend/src/services/queries/portfolio.ts @@ -21,6 +21,7 @@ export const usePortfolioQuery = (username: string, isMyPortfolio: boolean) => { return useQuery>([QUERY.GET_PORTFOLIO], portfolioQueryFunction, { refetchOnWindowFocus: false, + cacheTime: 0 }); }; diff --git a/frontend/src/services/queries/profile.ts b/frontend/src/services/queries/profile.ts index 2cbaa66b6..e50d5b476 100644 --- a/frontend/src/services/queries/profile.ts +++ b/frontend/src/services/queries/profile.ts @@ -48,7 +48,7 @@ export const useProfileQuery = (isMyProfile: boolean, username: string | null) = return useQuery>( [QUERY.GET_PROFILE, { isMyProfile, username }], profileQueryFunction, - { suspense: true } + { suspense: true, cacheTime: 3600 * 4 } ); };