From 0185f74b490a906ac8f1468c1f53f5991530c721 Mon Sep 17 00:00:00 2001 From: sungjihyun Date: Thu, 21 Mar 2024 13:11:35 +0900 Subject: [PATCH 1/5] =?UTF-8?q?:recycle:=20=EB=8C=93=EA=B8=80=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20suspense?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/vote/[slug]/_component/Replies.tsx | 65 +++++++++++----------- src/hooks/vote/useGetVoteReplies.ts | 4 +- 2 files changed, 36 insertions(+), 33 deletions(-) diff --git a/src/app/vote/[slug]/_component/Replies.tsx b/src/app/vote/[slug]/_component/Replies.tsx index a4774d3..942d2bc 100644 --- a/src/app/vote/[slug]/_component/Replies.tsx +++ b/src/app/vote/[slug]/_component/Replies.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useCallback, useRef, useState } from 'react'; +import { Suspense, useCallback, useRef, useState } from 'react'; import { ControlTab } from '@/components/common/controlTab'; import { Spinner } from '@/components/common/spinner'; @@ -23,7 +23,7 @@ type Props = { const Replies = ({ voteId }: Props) => { const { data: user } = useGetUser(); - const { status, data: replies } = useGetVoteReplies({ voteId }); + const { data: replies } = useGetVoteReplies({ voteId }); const { mutateAsync: createVoteReplyAsync } = useCreateVoteReplyMutation(); const { mutate: deleteVoteReply } = useDeleteVoteReplyMutation(); const { mutate: toggleLikeVoteReply } = useLikeVoteReplyMutation(); @@ -55,35 +55,30 @@ const Replies = ({ voteId }: Props) => { - {/* TODO: Suspense or SSR */} - {status === 'pending' ? ( -
- -
- ) : status === 'error' ? ( -
에러
- ) : sortedReplyData.length > 0 ? ( - - ) : ( - - )} + }> + {sortedReplyData.length > 0 ? ( +
    + {sortedReplyData.map((reply) => ( + + toggleLikeVoteReply({ voteId: reply.voteId, commentId: reply.commentId }) + } + onDelete={() => + deleteVoteReply({ + commentId: reply.commentId, + voteId: reply.voteId, + }) + } + isWrittenByCurrentUser={reply.userId === user?.userId} + /> + ))} +
+ ) : ( + + )} + { @@ -95,6 +90,14 @@ const Replies = ({ voteId }: Props) => { ); }; +const ReplyFallback = () => { + return ( +
+ +
+ ); +}; + const NoReplies = () => { return (
diff --git a/src/hooks/vote/useGetVoteReplies.ts b/src/hooks/vote/useGetVoteReplies.ts index ba8c0c8..d851a3c 100644 --- a/src/hooks/vote/useGetVoteReplies.ts +++ b/src/hooks/vote/useGetVoteReplies.ts @@ -1,11 +1,11 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { donworryApi } from '@/api'; import { queryKey } from '@/api/queryKey'; import { GetVoteRepliesRequest } from '@/api/vote/types'; const useGetVoteReplies = ({ voteId }: GetVoteRepliesRequest) => { - return useQuery({ + return useSuspenseQuery({ queryKey: queryKey.vote.reply(voteId), queryFn: () => donworryApi.vote.getVoteReplies({ voteId }), }); From e620203585068efd72d4defc6206f3161049c0d0 Mon Sep 17 00:00:00 2001 From: sungjihyun Date: Thu, 21 Mar 2024 13:22:54 +0900 Subject: [PATCH 2/5] =?UTF-8?q?:recycle:=20=ED=88=AC=ED=91=9C=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=20=EC=A1=B0=ED=9A=8C=20suspense?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/vote/[slug]/_component/VoteDetail.tsx | 63 ++++++++++--------- src/hooks/vote/useGetVoteById.ts | 4 +- 2 files changed, 34 insertions(+), 33 deletions(-) diff --git a/src/app/vote/[slug]/_component/VoteDetail.tsx b/src/app/vote/[slug]/_component/VoteDetail.tsx index 7222ce0..32ebac3 100644 --- a/src/app/vote/[slug]/_component/VoteDetail.tsx +++ b/src/app/vote/[slug]/_component/VoteDetail.tsx @@ -1,6 +1,6 @@ 'use client'; -import { notFound } from 'next/navigation'; +import { Suspense } from 'react'; import { Button } from '@/components/common/button'; import { Icon } from '@/components/common/icon'; @@ -17,43 +17,36 @@ type Props = { }; const VoteDetail = ({ voteId }: Props) => { - const { status, data } = useGetVoteById(voteId); + const { data } = useGetVoteById(voteId); const { mutate: toggleLike } = useLikeVoteMutation(); return (
- {status === 'pending' ? ( -
- -
- ) : status === 'error' ? ( - notFound() - ) : ( - <> - + }> + - - Q. {data.title} - - - {data.content} - + + Q. {data.title} + + + {data.content} + - - + + - - + +
{ ); }; +const VoteDetailFallback = () => { + return ( +
+ +
+ ); +}; + export default VoteDetail; diff --git a/src/hooks/vote/useGetVoteById.ts b/src/hooks/vote/useGetVoteById.ts index 8e78a26..9de71a4 100644 --- a/src/hooks/vote/useGetVoteById.ts +++ b/src/hooks/vote/useGetVoteById.ts @@ -1,10 +1,10 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { donworryApi } from '@/api'; import { queryKey } from '@/api/queryKey'; export const useGetVoteById = (voteId: number) => { - return useQuery({ + return useSuspenseQuery({ queryKey: queryKey.vote.detail(voteId), queryFn: () => donworryApi.vote.getVoteById({ voteId }), }); From c5e1a7a69a8deb924bffc9013f3ed66a9ee530a3 Mon Sep 17 00:00:00 2001 From: sungjihyun Date: Tue, 26 Mar 2024 15:57:20 +0900 Subject: [PATCH 3/5] =?UTF-8?q?:recycle:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20suspense?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/mypage/_components/Fallback.tsx | 11 +++++++++++ src/app/mypage/_components/MyTest.tsx | 16 ++++++++-------- src/app/mypage/_components/MyVote.tsx | 17 +++++++---------- src/app/mypage/_components/index.ts | 1 + src/hooks/test/useGetMyTest.ts | 4 ++-- src/hooks/vote/useGetMyVote.ts | 4 ++-- 6 files changed, 31 insertions(+), 22 deletions(-) create mode 100644 src/app/mypage/_components/Fallback.tsx diff --git a/src/app/mypage/_components/Fallback.tsx b/src/app/mypage/_components/Fallback.tsx new file mode 100644 index 0000000..6e87e95 --- /dev/null +++ b/src/app/mypage/_components/Fallback.tsx @@ -0,0 +1,11 @@ +import { Spinner } from '@/components/common/spinner'; + +const Fallback = () => { + return ( +
+ +
+ ); +}; + +export default Fallback; diff --git a/src/app/mypage/_components/MyTest.tsx b/src/app/mypage/_components/MyTest.tsx index 92997d2..1f6f647 100644 --- a/src/app/mypage/_components/MyTest.tsx +++ b/src/app/mypage/_components/MyTest.tsx @@ -1,26 +1,26 @@ 'use client'; +import { Suspense } from 'react'; + import { ResultCard, ResultCardContainer } from '@/components/features/test/resultCard'; import { EmptyTest } from '@/components/shared'; import { useGetMyTest } from '@/hooks/test'; +import { Fallback as MyTestFallback } from '.'; + const MyTest = () => { - const { data, status } = useGetMyTest(); + const { data } = useGetMyTest(); return ( - <> + }> - {status === 'pending' ? ( - <> - ) : status === 'error' ? ( - <> - ) : data.length > 0 ? ( + {data.length > 0 ? ( data.map((result) => ) ) : ( )} - + ); }; diff --git a/src/app/mypage/_components/MyVote.tsx b/src/app/mypage/_components/MyVote.tsx index e0b71d0..54b50c1 100644 --- a/src/app/mypage/_components/MyVote.tsx +++ b/src/app/mypage/_components/MyVote.tsx @@ -2,7 +2,7 @@ import dayjs from 'dayjs'; import Link from 'next/link'; -import { useRef } from 'react'; +import { Suspense, useRef } from 'react'; import { Button } from '@/components/common/button'; import { Icon } from '@/components/common/icon'; @@ -14,22 +14,19 @@ import { useDeleteVoteMutation, useGetMyVote } from '@/hooks/vote'; import { VoteType } from '@/types/vote'; import { fromNowOf } from '@/utils/dates'; +import { Fallback as MyVoteFallback } from '.'; + type BottomSheetType = 'askDelete' | 'selectOption'; const MyVote = () => { - const { data, status } = useGetMyVote(); + const { data } = useGetMyVote(); const { mutate: onDelete, isPending } = useDeleteVoteMutation(); const { onOpenSheet, openedSheet, onCloseSheet } = useBottomSheetState(); const deleteTarget = useRef(null); - // TODO Suspense or ssr return ( - <> - {status === 'pending' ? ( - <> - ) : status === 'error' ? ( - <> - ) : data.length > 0 ? ( + }> + {data.length > 0 ? (
{data.map((vote) => ( @@ -114,7 +111,7 @@ const MyVote = () => { ) : ( )} - + ); }; diff --git a/src/app/mypage/_components/index.ts b/src/app/mypage/_components/index.ts index f8445ca..4ca0272 100644 --- a/src/app/mypage/_components/index.ts +++ b/src/app/mypage/_components/index.ts @@ -1,3 +1,4 @@ +export { default as Fallback } from './Fallback'; export { default as MyTest } from './MyTest'; export { default as MyVote } from './MyVote'; export { default as Profile } from './Profile'; diff --git a/src/hooks/test/useGetMyTest.ts b/src/hooks/test/useGetMyTest.ts index ca641ff..56dccf7 100644 --- a/src/hooks/test/useGetMyTest.ts +++ b/src/hooks/test/useGetMyTest.ts @@ -1,10 +1,10 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { donworryApi } from '@/api'; import { queryKey } from '@/api/queryKey'; const useGetMyTest = () => { - return useQuery({ + return useSuspenseQuery({ queryKey: queryKey.test.myResult, queryFn: donworryApi.test.getMyTest, }); diff --git a/src/hooks/vote/useGetMyVote.ts b/src/hooks/vote/useGetMyVote.ts index 4f0f2c9..d4b6f65 100644 --- a/src/hooks/vote/useGetMyVote.ts +++ b/src/hooks/vote/useGetMyVote.ts @@ -1,10 +1,10 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { donworryApi } from '@/api'; import { queryKey } from '@/api/queryKey'; const useGetMyVote = () => { - return useQuery({ + return useSuspenseQuery({ queryFn: donworryApi.vote.getMyVotes, queryKey: queryKey.vote.myVotes(), retry: 1, From 7b56cb0a1913df3790714cd2b863ff19499b1ffa Mon Sep 17 00:00:00 2001 From: sungjihyun Date: Wed, 3 Apr 2024 20:52:12 +0900 Subject: [PATCH 4/5] =?UTF-8?q?:recycle:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20async=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20Number?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/vote/[slug]/page.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/vote/[slug]/page.tsx b/src/app/vote/[slug]/page.tsx index ed7ba20..a1de7e5 100644 --- a/src/app/vote/[slug]/page.tsx +++ b/src/app/vote/[slug]/page.tsx @@ -6,14 +6,14 @@ type Props = { params: { slug: string }; }; -const VoteDetailPage = async ({ params }: Props) => { - const voteId = params.slug; +const VoteDetailPage = ({ params }: Props) => { + const voteId = +params.slug; return ( <> - + - + ); }; From 2bda831b8e46f0af8d39ac0966c8ccc91ba841af Mon Sep 17 00:00:00 2001 From: sungjihyun Date: Wed, 3 Apr 2024 20:57:52 +0900 Subject: [PATCH 5/5] =?UTF-8?q?:bug:=20lint=20=EC=97=90=EB=9F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/vote/[slug]/_component/VoteDetail.tsx | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/app/vote/[slug]/_component/VoteDetail.tsx b/src/app/vote/[slug]/_component/VoteDetail.tsx index 32ebac3..30660c5 100644 --- a/src/app/vote/[slug]/_component/VoteDetail.tsx +++ b/src/app/vote/[slug]/_component/VoteDetail.tsx @@ -48,21 +48,20 @@ const VoteDetail = ({ voteId }: Props) => { -
- toggleLike({ voteId })} - /> -
- - )} +
+ toggleLike({ voteId })} + /> +
+
); };