From 63aa5123adc4b29daf84e88324b24ae5c9221ab7 Mon Sep 17 00:00:00 2001 From: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Date: Sun, 4 Aug 2024 16:04:57 +0900 Subject: [PATCH] =?UTF-8?q?FE-54=F0=9F=94=80=20=EB=B2=84=EA=B7=B8=ED=95=B4?= =?UTF-8?q?=EA=B2=B0,=20main=20=EB=A8=B8=EC=A7=80=20(#191)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * FE-31 상세페이지 UI 제작 (#12) * FE-31💄상세페이지 기본 UI 제작 * FE-31♻️ textarea태그 Textarea컴포넌트로 변경 * FE-31💄 반응형 디자인 추가 --------- Co-authored-by: Woojiseok * FE-43 ✨ 상세페이지 에피그램 조회 (#18) * FE-43✨ 상세페이지 Epigram API연동 * FE-43⚡ ️axios 에러 핸들링 추가 * FE-43🏗️ 상세페이지 Layout 구조개선 * FE-43📝 주석 추가 * FE-43🔥 사용안하는 파일 삭제 * FE-43✏️ 오타 수정 * FE-43 🐛 id없을때 useQuery실행되는 문제 해결 * FE-43♻️ interface->zod 변경 --------- Co-authored-by: 우지석 * FE-43✨ 사용자 ID에 따른 미트볼아이콘 표시 (#22) * FE-43✨ 사용자 ID에 따른 미트볼아이콘 표시 * FE-43✨ 에피그램 상세페이지 더보기 드롭다운 추가 * FE-43💄 MoreOptionMenu 스타일 수정 * FE-31 상세페이지 UI 제작 (#12) * FE-31💄상세페이지 기본 UI 제작 * FE-31♻️ textarea태그 Textarea컴포넌트로 변경 * FE-31💄 반응형 디자인 추가 --------- Co-authored-by: Woojiseok * FE-43 ✨ 상세페이지 에피그램 조회 (#18) * FE-43✨ 상세페이지 Epigram API연동 * FE-43⚡ ️axios 에러 핸들링 추가 * FE-43🏗️ 상세페이지 Layout 구조개선 * FE-43📝 주석 추가 * FE-43🔥 사용안하는 파일 삭제 * FE-43✏️ 오타 수정 * FE-43 🐛 id없을때 useQuery실행되는 문제 해결 * FE-43♻️ interface->zod 변경 --------- Co-authored-by: 우지석 * FE-43✨ 사용자 ID에 따른 미트볼아이콘 표시 (#22) * FE-43✨ 사용자 ID에 따른 미트볼아이콘 표시 * FE-43✨ 에피그램 상세페이지 더보기 드롭다운 추가 * FE-43💄 MoreOptionMenu 스타일 수정 * ✨ 상세페이지 댓글 조회 api연동 (#38) * FE-42💄 EpigramComment안에 CommentCard 추가 * FE-42✨ 상세페이지 댓글 조회 api연동 * FE-42✨ dateUtil함수 추가, 적용 * FE-42✨ 댓글작성자가 본인인지 판별해 수정,삭제 표시 * FE-42🔥 안쓰는 함수 삭제 * FE-42💄 EpigramComment 배경색 수정 * FE-42♻️ CommetCard 구조 개선 * FE-42💄작성된 댓글 없을때 UI 추가 * FE-42🐛 댓글수를 length->totalCount로 변경 * FE-42♻️ useEpigramCommentHook 분리 * FE-42✨ 댓글 목록에 무한스크롤 적용 * FE-42💡 주석 추가 --------- Co-authored-by: 우지석 * FE-76✨ 댓글 작성 api 연동 (#78) * FE-76♻️ 댓글 textarea 컴포넌트 분리 * FE-76💄 switch 컴포넌트 스타일 수정 * FE-76✨ textarea focus out 버튼 추가 * FE-76✨ postComment schema,interface 추가, 수정 * FE-76✨ 댓글 작성 api 연동 * FE-76🐛 import error 해결 * FE-76✨ switch로 댓글 공개,비공개 설정 기능 추가 * FE-76✨ 댓글 작성 시 image를 유저가 등록한 image로 변경 * FE-76🐛 build error 해결 --------- Co-authored-by: 우지석 * FE-45✨ 에피그램 삭제 api 연동 (#80) * FE-45✨ 에피그램 삭제 api 연동 * FE-45💄 에피그램 삭제 모달 추가 * FE-45💄 반응형 디자인 수정 * FE-45♻️ DeleteAlertModal 컴포넌트 분리 * FE-45🐛 build error 해결 --------- Co-authored-by: 우지석 * FE-78✨댓글 수정,삭제 기능 추가 (#91) * FE-78💄 미트볼아이콘 ui수정 * FE-78✨ 댓글 삭제 함수 추가 * FE-78✨댓글 삭제 버튼 기능 추가 * FE-78✨ 댓글 수정 api함수 추가 * FE-78✨ 댓글 수정 기능 추가 * FE-78📝 주석 추가 * FE-78💄 EpigramComment height수정 * FE-78🐛 build error 해결 --------- Co-authored-by: 우지석 * FE-44✨ 에피그램 수정 기능 추가 (#97) * FE-44🚚 상세페이지 페이지 구조 변경 * FE-44✨ 에피그램 수정 api 함수 추가 * FE-44✨ 에피그램 수정 기능 추가 * FE-44♻️ 저자선택관련 함수 useAuthorSelection훅으로 분리 * FE-44💄 EditEpigram,AddEpigram UI수정 * FE-44🐛 출처 유효성검사 버그 수정 * FE-44✨ 작성자 본인이 아닐때 수정페이지 접근 시 리다이렉트 기능 구현 * FE-44🐛 유효성 검사 버그 수정 --------- Co-authored-by: 우지석 * FE-41✨좋아요 기능 추가 (#103) * FE-41♻️ httpClien에t interceoptor 추가 * FE-41✨ 좋아요 api 함수 추가 * FE-41✨ 좋아요 기능 Layout에 적용 * FE-41✨ Url Link버튼 생성 * FE-41💄좋아요,link버튼 스타일 수정 * FE-41🐛 import 에러 해결 * FE-41♻️ 기존header-> Header컴포넌트로 변경 --------- Co-authored-by: 우지석 * FE-54🐛 오타 수정 * build error 해결 * FE-54🐛 build error해결 * Fe-54♻️상세페이지 리팩토링 (#131) * FE-54🚚 상세페이지,수정페이지 페이지 폴더 변경 * FE-54♻️ 상세페이지로 이동하는 url 수정 * FE-54🚚 작성페이지 페이지 폴더 생성 * FE-54♻️상세페이지 개선사항 적용 (#146) * FE-54🚚 상세페이지,수정페이지 페이지 폴더 변경 * FE-54♻️ 상세페이지로 이동하는 url 수정 * FE-54🚚 작성페이지 페이지 폴더 생성 * FE-54💄 Switch컴포넌트 배경색 변경 * FE-54💄 댓글 없을때 스타일 수정 * FE-54🚚 useAddEpigram 이름 변경 * FE-54💄 댓글 공개,비공개 아이콘 추가 * FE-54🐛 build error 해결 * FE-54✨ 댓글 수정 로직 변경 (#163) * FE-54✨ 댓글 수정 로직 변경 * FE-54✨ CommentTextarea Enter key로 폼 제출 함수 추가 * FE-54💄 CommentItem height수정 * FE-54💄댓글 height 조정 --------- Co-authored-by: 우지석 * FE-54♻️ 좋아요 기능 리팩토링, Query Key 분리 (#169) * FE-54🚚 상세페이지,수정페이지 페이지 폴더 변경 * FE-54♻️ 상세페이지로 이동하는 url 수정 * FE-54🚚 작성페이지 페이지 폴더 생성 * FE-54💄 Switch컴포넌트 배경색 변경 * FE-54💄 댓글 없을때 스타일 수정 * FE-54🚚 useAddEpigram 이름 변경 * FE-54💄 댓글 공개,비공개 아이콘 추가 * FE-54🐛 build error 해결 * FE-54♻️ 좋아요기능 Optimistic Update적용 * FE-54💄 좋아요 상태에 따른 이미지 변경 * FE-54💄댓글 수정시 스타일 변경 * FE-54♻️ 댓글조회 query Key 분리 * FE-54🐛 댓글 불러오지못하는 문제 해결 (#186) * FE-54🐛 댓글 불러오지못하는 문제 해결 * FE-54🐛build error 해결 * FE-54💄 url링크버튼 스타일 수정 * FE-54🐛build error 해결 (#193) * FE-54🐛 댓글 불러오지못하는 문제 해결 * FE-54🐛build error 해결 * FE-54💄 url링크버튼 스타일 수정 --------- Co-authored-by: Woojiseok --- src/apis/queries.ts | 10 +++------- src/hooks/useEpigramCommentsQueryHook.ts | 17 ++++++----------- src/hooks/usePatchCommentHook.ts | 11 +++++------ src/hooks/usePostCommentHook.ts | 11 +++++------ src/pageLayout/Epigram/EpigramFigure.tsx | 4 ++-- 5 files changed, 21 insertions(+), 32 deletions(-) diff --git a/src/apis/queries.ts b/src/apis/queries.ts index 817fe12b..425830ec 100644 --- a/src/apis/queries.ts +++ b/src/apis/queries.ts @@ -43,13 +43,9 @@ const queries = createQueryKeyStore({ }), }, epigramComment: { - getComments: (request: CommentRequestType) => ({ - queryKey: ['epigramComments', request], - queryFn: () => getEpigramComments(request), - }), - getCommentList: (request: CommentRequestType) => ({ - queryKey: ['epigramComments', request] as const, - queryFn: ({ pageParam }: { pageParam: number | undefined }) => getEpigramComments({ ...request, cursor: pageParam }), + getComments: (epigramId: number) => ({ + queryKey: ['epigramComments', epigramId], + queryFn: ({ pageParam }: { pageParam?: number }) => getEpigramComments({ id: epigramId, limit: 3, cursor: pageParam }), }), getMyComments: (request: CommentRequestType) => ({ queryKey: ['myEpigramComments', request], diff --git a/src/hooks/useEpigramCommentsQueryHook.ts b/src/hooks/useEpigramCommentsQueryHook.ts index 1a01ea76..f1db908b 100644 --- a/src/hooks/useEpigramCommentsQueryHook.ts +++ b/src/hooks/useEpigramCommentsQueryHook.ts @@ -1,17 +1,12 @@ -// hooks/useEpigramCommentHook.ts - -import { useInfiniteQuery } from '@tanstack/react-query'; -import queries from '@/apis/queries'; +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'; import { CommentResponseType } from '@/schema/comment'; +import queries from '@/apis/queries'; -const useEpigramCommentsQuery = (epigramId: number) => { - const query = queries.epigramComment.getCommentList({ id: epigramId, limit: 3 }); - - return useInfiniteQuery({ - ...query, +const useEpigramCommentsQuery = (epigramId: number) => + useInfiniteQuery>({ + ...queries.epigramComment.getComments(epigramId), initialPageParam: undefined, - getNextPageParam: (lastPage: CommentResponseType) => lastPage.nextCursor ?? undefined, + getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined, }); -}; export default useEpigramCommentsQuery; diff --git a/src/hooks/usePatchCommentHook.ts b/src/hooks/usePatchCommentHook.ts index b215624d..f4e468d5 100644 --- a/src/hooks/usePatchCommentHook.ts +++ b/src/hooks/usePatchCommentHook.ts @@ -2,24 +2,23 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { patchComment } from '@/apis/epigramComment'; import { PatchCommentRequest } from '@/types/epigram.types'; import { toast } from '@/components/ui/use-toast'; +import queries from '@/apis/queries'; const usePatchCommentMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: ({ commentId, ...commentData }: { commentId: number } & PatchCommentRequest) => patchComment(commentId, commentData), - onSuccess: () => { - // 댓글 목록 쿼리 무효화 - queryClient.invalidateQueries({ queryKey: ['epigramComments'] }); - - // 성공 메시지 표시 + onSuccess: (updatedComment) => { + queryClient.invalidateQueries({ + queryKey: queries.epigramComment.getComments(updatedComment.epigramId).queryKey, + }); toast({ title: '댓글 수정 성공', description: '댓글이 성공적으로 수정되었습니다.', }); }, onError: (error) => { - // 에러 메시지 표시 toast({ title: '댓글 수정 실패', description: `댓글 수정 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`, diff --git a/src/hooks/usePostCommentHook.ts b/src/hooks/usePostCommentHook.ts index 952925ea..1a7d3034 100644 --- a/src/hooks/usePostCommentHook.ts +++ b/src/hooks/usePostCommentHook.ts @@ -2,17 +2,17 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { postComment } from '@/apis/epigramComment'; import { PostCommentRequest } from '@/types/epigram.types'; import { toast } from '@/components/ui/use-toast'; +import queries from '@/apis/queries'; const usePostCommentMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: (commentData: PostCommentRequest) => postComment(commentData), - onSuccess: () => { - // 댓글 목록 쿼리 무효화 - queryClient.invalidateQueries({ queryKey: ['epigramComments'] }); - - // 성공 메시지 표시 + onSuccess: (variables) => { + queryClient.invalidateQueries({ + queryKey: queries.epigramComment.getComments(variables.epigramId).queryKey, + }); toast({ className: 'bg-white', title: '댓글 등록 성공', @@ -20,7 +20,6 @@ const usePostCommentMutation = () => { }); }, onError: (error) => { - // 에러 메시지 표시 toast({ className: 'bg-white', title: '댓글 등록 실패', diff --git a/src/pageLayout/Epigram/EpigramFigure.tsx b/src/pageLayout/Epigram/EpigramFigure.tsx index bd7dc5b8..dfef7eea 100644 --- a/src/pageLayout/Epigram/EpigramFigure.tsx +++ b/src/pageLayout/Epigram/EpigramFigure.tsx @@ -43,8 +43,8 @@ function EpigramFigure({ epigram, currentUserId }: EpigramFigureProps) { {epigram.referenceTitle && (