[FE] Feat #133: 댓글 정보 삭제 api 등록

Change-Id: I7ab1e96b3c96ee6655050ed6d91d507d8729a139

frontend/src/hooks/useInfiniteCommentList.ts

@@ -23,7 +23,14 @@ const useInfiniteCommentList = (id: string) => {
 		return result
 	}, [data])
 
-	return { commentListData, isLoading, isError, hasNextPage, fetchNextPage, isFetchingNextPage }
+	return {
+		commentListData,
+		isLoading,
+		isError,
+		hasNextPage,
+		fetchNextPage,
+		isFetchingNextPage,
+	}
 }
 
 export default useInfiniteCommentList

frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx

@@ -31,14 +31,16 @@ const CommentInput = ({ bucketId, setIsInputFocused }: ICommentInput) => {
 		const commentRes = await postBucketComment(bucketId, commentText)
 		if (commentRes === 'success') {
 			setCommentText('')
-			queryClient.refetchQueries({ queryKey: ['commentList', bucketId] })
+			console.log('refetching!')
+			queryClient.refetchQueries({ queryKey: ['comments', bucketId] })
 		}
 	}
 	const handleSubmitComment = async () => {
 		const commentRes = await postBucketComment(bucketId, commentText)
 		if (commentRes === 'success') {
 			setCommentText('')
-			queryClient.refetchQueries({ queryKey: ['commentList', bucketId] })
+			console.log('refetching!')
+			queryClient.refetchQueries({ queryKey: ['comments', bucketId] })
 		}
 	}
 

frontend/src/pages/Bucket/BucketDetail/Comment/CommentItem.tsx

@@ -75,7 +75,7 @@ const CommentItem = ({ commentInfo, type, setSelectedId }: ICommentItemProps) =>
 				</div>
 			)}
 			<LikeButton commentId={commentInfo.id} likeStatus={commentInfo.numberOfLikes > 0} />
-			<ShowMoreButton />
+			<ShowMoreButton commentId={commentInfo.id} />
 		</div>
 	)
 }

frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx

@@ -25,7 +25,7 @@ const CommentList = ({ isInputFocused, setIsInputShown, id }: ICommentListProps)
 		if (lastElementInView && hasNextPage) {
 			fetchNextPage()
 		}
-	}, [lastElementInView, hasNextPage, commentListData])
+	}, [lastElementInView, hasNextPage, commentListData, fetchNextPage])
 
 	useEffect(() => {
 		// 타겟이 보일 때 -> 항상 input이 보이도록 설정

frontend/src/pages/Bucket/BucketDetail/Comment/ShowMoreButton.tsx

@@ -1,16 +1,30 @@
 import { Menu, Transition } from '@headlessui/react'
 import { AiOutlineMore } from 'react-icons/ai'
 import { useDetailPageTypeStore } from '../../../../store/detailStore'
+import { deleteBucketComment } from '../api'
+import { useQueryClient } from '@tanstack/react-query'
+import { useParams } from 'react-router'
 
-const ShowMoreButton = () => {
+interface IShowMoreButtonProps {
+	commentId: number
+}
+
+const ShowMoreButton = ({ commentId }: IShowMoreButtonProps) => {
 	const { setPageType } = useDetailPageTypeStore()
+	const queryClient = useQueryClient()
+	const { bucketId } = useParams()
 
 	const handleClickModifyButton = () => {
 		setPageType('editComment')
 	}
-	const handleClickDeleteButton = () => {
-		// Todo : 삭제 요청 Api 적용
+
+	const handleClickDeleteButton = async () => {
+		const deleteRes = await deleteBucketComment(commentId)
+		if (deleteRes === 'success') {
+			queryClient.refetchQueries({ queryKey: ['comments', bucketId] })
+		}
 	}
+
 	return (
 		<div>
 			<Menu as="div" className="absolute top-0 right-0">

frontend/src/pages/Bucket/BucketDetail/api.ts

@@ -92,6 +92,16 @@ export const postBucketComment = async (
 	const commentRes = await instance.post<IPostCommentRes>(`comment/bucket/${id}`, { context })
 	return commentRes.data.result === 'ok' ? 'success' : 'fail'
 }
+// - Delete Request
+interface IDeleteCommentRes {
+	result: string
+	message: string
+}
+export const deleteBucketComment = async (id: number): Promise<'success' | 'fail'> => {
+	const commentRes = await instance.delete<IDeleteCommentRes>(`comment/bucket/${id}`)
+	return commentRes.data.result === 'ok' ? 'success' : 'fail'
+}
+
 // :: LikeButton
 interface IPostLikeRes {
 	result: string