FE-54🔀 버그해결, main 머지 (#191)

* FE-31 상세페이지 UI 제작 (#12) * FE-31💄상세페이지 기본 UI 제작 * FE-31♻️ textarea태그 Textarea컴포넌트로 변경 * FE-31💄 반응형 디자인 추가 --------- Co-authored-by: Woojiseok <[email protected]> * 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: 우지석 <[email protected]> * 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 <[email protected]> * 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: 우지석 <[email protected]> * 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: 우지석 <[email protected]> * 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: 우지석 <[email protected]> * FE-45✨ 에피그램 삭제 api 연동 (#80) * FE-45✨ 에피그램 삭제 api 연동 * FE-45💄 에피그램 삭제 모달 추가 * FE-45💄 반응형 디자인 수정 * FE-45♻️ DeleteAlertModal 컴포넌트 분리 * FE-45🐛 build error 해결 --------- Co-authored-by: 우지석 <[email protected]> * 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: 우지석 <[email protected]> * 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: 우지석 <[email protected]> * 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: 우지석 <[email protected]> * 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: 우지석 <[email protected]> * 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 <[email protected]>
epigram5-9 · Aug 4, 2024 · 63aa512 · 63aa512
1 parent b3968fa
commit 63aa512
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 32 deletions.
diff --git 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
@@ -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<CommentResponseType, Error, InfiniteData<CommentResponseType>>({
+    ...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
@@ -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
@@ -2,25 +2,24 @@ 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: '댓글 등록 성공',
         description: '댓글이 성공적으로 등록되었습니다.',
       });
     },
     onError: (error) => {
-      // 에러 메시지 표시
       toast({
         className: 'bg-white',
         title: '댓글 등록 실패',

diff --git a/src/pageLayout/Epigram/EpigramFigure.tsx b/src/pageLayout/Epigram/EpigramFigure.tsx
@@ -43,8 +43,8 @@ function EpigramFigure({ epigram, currentUserId }: EpigramFigureProps) {
           {epigram.referenceTitle && (
             <Button type='button'>
               <Link href={`${epigram.referenceUrl}`} target='_blank'>
-                <div className='p-4 w-32 lg:w-44 h-9 lg:h-11 flex items-center justify-center rounded-full bg-line-100'>
-                  <p className='text-gray-300 text-sm lg:text-xl truncate ...'>{epigram.referenceTitle}</p>
+                <div className='p-2 lg:p-4 w-32 lg:w-44 h-9 lg:h-11 flex items-center justify-around rounded-full bg-line-100'>
+                  <p className='w-full text-gray-300 text-sm lg:text-xl truncate ...'>{epigram.referenceTitle}</p>
                   <Image src='/placeLink.svg' alt='링크 이미지' width={20} height={20} className='lg:w-9 lg:h-9' />
                 </div>
               </Link>