[FE] Feat #133: CommentInput 컴포넌트와 댓글 추가 api 연결

Change-Id: Ic25955a9a2bff87b573efd5e7f168cda73825209

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

@@ -1,14 +1,18 @@
-import { ChangeEvent, useRef } from 'react'
+import { ChangeEvent, KeyboardEvent, useRef } from 'react'
 import { useCommentStore } from '../../../../store/detailStore'
+import { postBucketComment } from '../api'
+import { useQueryClient } from '@tanstack/react-query'
 
 interface ICommentInput {
+	bucketId: string
 	setIsInputFocused: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 // Todo: Pwa 환경에서 해당 컴포넌트가 언마운트 될때 키보드가 내려가는지 확인 필요
-const CommentInput = ({ setIsInputFocused }: ICommentInput) => {
+const CommentInput = ({ bucketId, setIsInputFocused }: ICommentInput) => {
 	const { commentText, setCommentText } = useCommentStore()
 	const inputRef = useRef<HTMLInputElement>(null)
+	const queryClient = useQueryClient() // QueryClient 인스턴스 사용
 
 	const handleCommentChange = (event: ChangeEvent<HTMLInputElement>) => {
 		const text = event.currentTarget.value
@@ -20,6 +24,23 @@ const CommentInput = ({ setIsInputFocused }: ICommentInput) => {
 	const handleBlurInput = () => {
 		setIsInputFocused(false)
 	}
+	const handlePressEnter = async (event: KeyboardEvent<HTMLInputElement>) => {
+		if (event.key !== 'Enter') {
+			return
+		}
+		const commentRes = await postBucketComment(bucketId, commentText)
+		if (commentRes === 'success') {
+			setCommentText('')
+			queryClient.refetchQueries({ queryKey: ['commentList', bucketId] })
+		}
+	}
+	const handleSubmitComment = async () => {
+		const commentRes = await postBucketComment(bucketId, commentText)
+		if (commentRes === 'success') {
+			setCommentText('')
+			queryClient.refetchQueries({ queryKey: ['commentList', bucketId] })
+		}
+	}
 
 	return (
 		<div className="comment-input fixed bottom-0 flex w-full px-6 py-3 bg-white border-t-[1px] border-gray">
@@ -33,8 +54,13 @@ const CommentInput = ({ setIsInputFocused }: ICommentInput) => {
 				onFocus={handleFocusInput}
 				onBlur={handleBlurInput}
 				className="px-3 grow focus:outline-none"
+				onKeyDown={handlePressEnter}
 			/>
-			<button type="button" className={`${commentText ? 'text-point1' : 'text-gray'}`}>
+			<button
+				type="button"
+				onClick={handleSubmitComment}
+				className={`${commentText ? 'text-point1' : 'text-gray'}`}
+			>
 				등록
 			</button>
 		</div>

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

@@ -11,7 +11,6 @@ interface ICommentListProps {
 	id: string
 }
 
-// Todo : Api 데이터 타입 지정 후 as 삭제 예정
 const CommentList = ({ isInputFocused, setIsInputShown, id }: ICommentListProps) => {
 	const { commentText } = useCommentStore()
 	const { pageType } = useDetailPageTypeStore()
@@ -26,7 +25,7 @@ const CommentList = ({ isInputFocused, setIsInputShown, id }: ICommentListProps)
 		if (lastElementInView && hasNextPage) {
 			fetchNextPage()
 		}
-	}, [lastElementInView, hasNextPage])
+	}, [lastElementInView, hasNextPage, commentListData])
 
 	useEffect(() => {
 		// 타겟이 보일 때 -> 항상 input이 보이도록 설정

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

@@ -76,15 +76,28 @@ export const getBucketCommentList = async ({
 	const commentRes = await instance.get<IGetCommentRes>(
 		`comment/bucket/${id}?page=${pageParam}&size=${fetchSize}`
 	)
-	// console.log(commentRes.data.bucketCommentList.commentList)
+
+	console.log('comment list 받아오기!!')
 	return commentRes.data.bucketCommentList.commentList
 }
-
+// - Post Request
+interface IPostCommentRes {
+	result: string
+	message: string
+}
+export const postBucketComment = async (
+	id: string,
+	context: string
+): Promise<'success' | 'fail'> => {
+	const commentRes = await instance.post<IPostCommentRes>(`comment/bucket/${id}`, { context })
+	return commentRes.data.result === 'ok' ? 'success' : 'fail'
+}
 // :: LikeButton
 interface IPostLikeRes {
 	result: string
 	message: string
 }
+// Todo : postBucketLikeStatus 이름 변경 필요, LikeRes 소문자로 변경하기
 export const postLikeStatus = async (commentId: number): Promise<'success' | 'fail'> => {
 	const LikeRes = await instance.put<IPostLikeRes>(`comment/bucket/like/${commentId}`)
 	return LikeRes.data.result === 'ok' ? 'success' : 'fail'

frontend/src/pages/Bucket/BucketDetail/index.tsx

@@ -113,7 +113,9 @@ const BucketDetail = () => {
 					</>
 				)}
 			</WithHeaderLayout>
-			{isInputShown && <CommentInput setIsInputFocused={setIsInputFocused} />}
+			{isInputShown && bucketId && (
+				<CommentInput bucketId={bucketId} setIsInputFocused={setIsInputFocused} />
+			)}
 		</>
 	)
 }