From f70fc732d53d6d779c01cc2789b8468b3c88d483 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9A=B0=EC=84=B1?= <sitpo96@naver.com>
Date: Tue, 13 Feb 2024 06:00:53 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20Feat=20#133:=20CommentInput=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=99=80=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20api=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change-Id: Ic25955a9a2bff87b573efd5e7f168cda73825209
---
 .../BucketDetail/Comment/CommentInput.tsx     | 32 +++++++++++++++++--
 .../BucketDetail/Comment/CommentList.tsx      |  3 +-
 frontend/src/pages/Bucket/BucketDetail/api.ts | 17 ++++++++--
 .../src/pages/Bucket/BucketDetail/index.tsx   |  4 ++-
 4 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx b/frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx
index a2f40c96..2fed6fb5 100644
--- a/frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx
+++ b/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>
diff --git a/frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx b/frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx
index cf8a654e..966e85ad 100644
--- a/frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx
+++ b/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이 보이도록 설정
diff --git a/frontend/src/pages/Bucket/BucketDetail/api.ts b/frontend/src/pages/Bucket/BucketDetail/api.ts
index 43139f22..e7191afd 100644
--- a/frontend/src/pages/Bucket/BucketDetail/api.ts
+++ b/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'
diff --git a/frontend/src/pages/Bucket/BucketDetail/index.tsx b/frontend/src/pages/Bucket/BucketDetail/index.tsx
index e1108959..63df6c88 100644
--- a/frontend/src/pages/Bucket/BucketDetail/index.tsx
+++ b/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} />
+			)}
 		</>
 	)
 }