From b9b7a58eca76a054e0810d34a30cd63739c80c7e Mon Sep 17 00:00:00 2001 From: kuku Date: Wed, 21 Dec 2022 11:28:00 +0900 Subject: [PATCH] =?UTF-8?q?[Fix]=20=EB=8C=93=EA=B8=80=20=EC=A4=91=EB=B3=B5?= =?UTF-8?q?=20=EC=9E=85=EB=A0=A5=20=EB=B0=A9=EC=A7=80=20=EB=94=94=EB=B0=94?= =?UTF-8?q?=EC=9A=B4=EC=8A=A4=20=EC=A0=9C=EA=B1=B0=20/=20=EB=8C=93?= =?UTF-8?q?=EA=B8=80=20=EC=82=AC=EB=9D=BC=EC=A7=80=EB=8A=94=20=ED=98=84?= =?UTF-8?q?=EC=83=81=20=EC=88=98=EC=A0=95=20/=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=B3=80=EC=88=98=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../postDetail/comment/CommentWrite.jsx | 107 +++++++----------- 1 file changed, 43 insertions(+), 64 deletions(-) diff --git a/front/src/component/postDetail/comment/CommentWrite.jsx b/front/src/component/postDetail/comment/CommentWrite.jsx index 5bd5e7ba..1a45a0a7 100644 --- a/front/src/component/postDetail/comment/CommentWrite.jsx +++ b/front/src/component/postDetail/comment/CommentWrite.jsx @@ -10,7 +10,6 @@ import { import CommentMore from './CommentMore'; import { loginModalActions } from '../../../redux/loginModalSlice'; import useInput from '../../../hooks/useInput'; -import debounce from '../../../util/debounce'; import LoadingSpinner from '../../common/LoadingSpinner'; const WriteWrapper = styled.article` @@ -110,47 +109,47 @@ const LoadingWrapper = styled.div` function CommentWrite() { const [commentList, setCommentList] = useState([]); const [comment, setComment, resetComment] = useInput(''); - const [page, setPage] = useState(1); - const [hasNext, setHasNext] = useState(false); + const [hasNext, setHasNext] = useState(true); const [commentLoading, setCommentLoading] = useState(false); const login = useSelector(state => state.login.isLogin); const dispatch = useDispatch(); const boardId = useParams(); const endPointRef = useRef(null); const [lastData, setLastData] = useState(''); + + // 무한 스크롤 데이터 요청 핸들러 + const commentListGetHandler = useCallback(async (board, last) => { + await postDetailCommentApi(board, last) + .then(res => { + console.log(`In : ${last}`); + const lastContent = res.content[res.content.length - 1]; + + setCommentList(prev => { + return [...prev, ...res.content]; + }); + setHasNext(res.hasNext); + if (res.hasNext) { + setLastData( + `lastCommentId=${lastContent.commentId}&lastCommentCreatedAt=${lastContent.createdAt}`, + ); + } + setCommentLoading(false); + }) + .catch(err => { + console.log(err); + }); + }, []); + // 무한 스크롤 옵저버 const obsHandler = entries => { const target = entries[0]; - + console.log(commentList); if (target.isIntersecting && hasNext) { - setPage(prev => prev + 1); + console.log(`lastData :${lastData}`); + commentListGetHandler(boardId.id, lastData); } }; - // 무한 스크롤 데이터 요청 핸들러 - const commentListGetHandler = useCallback( - board => { - setCommentLoading(true); - postDetailCommentApi(board, lastData) - .then(res => { - const lastContent = res.content[res.content.length - 1]; - setCommentList(prev => { - return [...prev, ...res.content]; - }); - setHasNext(res.hasNext); - if (res.hasNext) { - setLastData( - `lastCommentId=${lastContent.commentId}&lastCommentCreatedAt=${lastContent.createdAt}`, - ); - } - }) - .catch(err => { - console.log(err); - }); - setCommentLoading(false); - }, - [lastData], - ); // 무한 스크롤 useEffect useEffect(() => { const observer = new IntersectionObserver(obsHandler, { @@ -162,14 +161,7 @@ function CommentWrite() { return () => { observer.disconnect(); }; - }, [hasNext]); - - // 페이지 증가에 따른 데이터 요청 - useEffect(() => { - if (page !== 0) { - commentListGetHandler(boardId.id); - } - }, [page]); + }, [hasNext, lastData]); // 댓글 삭제 및 수정 wather핸들러 const deleteModifyWatcherHandler = () => { @@ -177,9 +169,12 @@ function CommentWrite() { .then(res => { const lastContent = res.content[res.content.length - 1]; setCommentList(res.content); - setLastData( - `lastCommentId=${lastContent.commentId}&lastCommentCreatedAt=${lastContent.createdAt}`, - ); + setLastData(() => { + if (lastContent) { + return `lastCommentId=${lastContent.commentId}&lastCommentCreatedAt=${lastContent.createdAt}`; + } + return ''; + }); }) .catch(err => { console.log(err); @@ -196,18 +191,16 @@ function CommentWrite() { }; // 댓글 작성 핸들러 - const commentSendHandler = () => { + const commentSendHandler = e => { + e.preventDefault(); if (modalOpenHandler() && comment !== '') { setCommentLoading(true); + setHasNext(false); postDetailCommentSubmitApi(boardId.id, comment) .then(() => { setHasNext(true); - setPage(0); + setCommentList([]); setLastData(''); - setCommentList(prev => { - console.log(prev); - return []; - }); resetComment(''); toast('댓글 입력 성공!', { @@ -222,16 +215,10 @@ function CommentWrite() { }); }) .catch(err => { - // toast console.log(err); }); - setCommentLoading(false); } }; - // 디바운스 적용 댓글 등록 핸들러 - const debounceSendHandler = debounce(() => { - commentSendHandler(); - }, 200); return ( @@ -243,30 +230,22 @@ function CommentWrite() { > {comment.length}/250 -
+
{ - if (e.code === 'Enter' && !commentLoading) { - debounceSendHandler(); - } - }} /> -
+ {commentLoading ? (