From 735a7c12fdc73c1f4f742a5d52f1c6e531a091e7 Mon Sep 17 00:00:00 2001 From: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Date: Fri, 2 Aug 2024 20:04:56 +0900 Subject: [PATCH] =?UTF-8?q?FE-54=E2=9C=A8=20=EB=8C=93=EA=B8=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD=20(#163)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * FE-54✨ 댓글 수정 로직 변경 * FE-54✨ CommentTextarea Enter key로 폼 제출 함수 추가 * FE-54💄 CommentItem height수정 * FE-54💄댓글 height 조정 --------- Co-authored-by: 우지석 --- .../epigram/Comment/CommentItem.tsx | 23 ++++++++++++------- .../epigram/Comment/CommentList.tsx | 16 +++++++++---- .../epigram/Comment/CommentTextarea.tsx | 18 +++++++++------ src/pageLayout/Epigram/EpigramComment.tsx | 20 +++++----------- 4 files changed, 43 insertions(+), 34 deletions(-) diff --git a/src/components/epigram/Comment/CommentItem.tsx b/src/components/epigram/Comment/CommentItem.tsx index a2e16c67..3b1b4501 100644 --- a/src/components/epigram/Comment/CommentItem.tsx +++ b/src/components/epigram/Comment/CommentItem.tsx @@ -1,29 +1,36 @@ import React, { useState } from 'react'; import Image from 'next/image'; import { CommentType } from '@/schema/comment'; -import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles'; +import { textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles'; import getCustomRelativeTime from '@/lib/dateUtils'; import useDeleteCommentMutation from '@/hooks/useDeleteCommentHook'; import { useToast } from '@/components/ui/use-toast'; import { Button } from '@/components/ui/button'; import DeleteAlertModal from '../DeleteAlertModal'; +import CommentTextarea from './CommentTextarea'; interface CommentItemProps { comment: CommentType; status?: 'view' | 'edit'; - onEditComment: (id: number, content: string, isPrivate: boolean) => void; + onEditComment: (id: number) => void; + isEditing: boolean; + epigramId: number; } -function CommentItem({ comment, status, onEditComment }: CommentItemProps) { +function CommentItem({ comment, status, onEditComment, isEditing, epigramId }: CommentItemProps) { const deleteCommentMutation = useDeleteCommentMutation(); const { toast } = useToast(); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const handleEditClick = () => { - onEditComment(comment.id, comment.content, comment.isPrivate); + onEditComment(comment.id); }; - // NOTE: 댓글 삭제 + // NOTE: 수정 중일 때(isEditing===true) CommentTextarea를 수정모드로 렌더링 + if (isEditing) { + return onEditComment(0)} />; + } + const handleDeleteComment = async () => { try { await deleteCommentMutation.mutateAsync(comment.id); @@ -42,9 +49,9 @@ function CommentItem({ comment, status, onEditComment }: CommentItemProps) { return (
-
+
프로필 이미지 @@ -79,7 +86,7 @@ function CommentItem({ comment, status, onEditComment }: CommentItemProps) { )}
{comment.content}
diff --git a/src/components/epigram/Comment/CommentList.tsx b/src/components/epigram/Comment/CommentList.tsx index f1cccdc9..d1a33e15 100644 --- a/src/components/epigram/Comment/CommentList.tsx +++ b/src/components/epigram/Comment/CommentList.tsx @@ -5,16 +5,16 @@ import NoComment from './NoComment'; import CommentItem from './CommentItem'; interface CommentListProps extends Omit { - onEditComment: (id: number, content: string, isPrivate: boolean) => void; + onEditComment: (id: number) => void; + editingCommentId: number | null; } -function CommentList({ epigramId, currentUserId, onEditComment }: CommentListProps) { +function CommentList({ epigramId, currentUserId, onEditComment, editingCommentId }: CommentListProps) { const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } = useEpigramCommentsQuery(epigramId); const observerRef = useRef(null); const lastCommentRef = useRef(null); - // NOTE: Observer 콜백: 마지막 요소가 화면에 보이면 다음 페이지(댓글 최대3개를 묶어 1페이지 취급) 로드 const handleObserver = useCallback( (entries: IntersectionObserverEntry[]) => { const [target] = entries; @@ -39,7 +39,6 @@ function CommentList({ epigramId, currentUserId, onEditComment }: CommentListPro } return () => { - // NOTE: effect가 실행되기전에 호출해서 메모리 누수를 방지해줌 if (observerRef.current) { observerRef.current.disconnect(); } @@ -58,7 +57,14 @@ function CommentList({ epigramId, currentUserId, onEditComment }: CommentListPro {allComments.length > 0 ? ( <> {allComments.map((comment) => ( - + ))}
{isFetchingNextPage &&
더 많은 댓글을 불러오는 중...
}
diff --git a/src/components/epigram/Comment/CommentTextarea.tsx b/src/components/epigram/Comment/CommentTextarea.tsx index 707ee760..3e2e6a68 100644 --- a/src/components/epigram/Comment/CommentTextarea.tsx +++ b/src/components/epigram/Comment/CommentTextarea.tsx @@ -7,13 +7,13 @@ import { Textarea } from '@/components/ui/textarea'; import { zodResolver } from '@hookform/resolvers/zod'; import { useForm } from 'react-hook-form'; import Image from 'next/image'; -import { CommentFormSchema, CommentFormValues } from '@/schema/comment'; +import { CommentFormSchema, CommentFormValues, CommentType } from '@/schema/comment'; import usePostCommentMutation from '@/hooks/usePostCommentHook'; import usePatchCommentMutation from '@/hooks/usePatchCommentHook'; interface CommentTextareaProps { epigramId: number; - editingComment: { id: number; content: string; isPrivate: boolean } | null; + editingComment?: CommentType; onEditComplete: () => void; } @@ -29,9 +29,8 @@ function CommentTextarea({ epigramId, editingComment, onEditComplete }: CommentT }, }); - // NOTE: 수정중인지 새댓글작성중인지의 상태가 변활때 폼 초기화 useEffect(() => { - if (editingComment !== null) { + if (editingComment) { form.reset({ content: editingComment.content, isPrivate: editingComment.isPrivate, @@ -46,7 +45,6 @@ function CommentTextarea({ epigramId, editingComment, onEditComplete }: CommentT const onSubmit = (values: CommentFormValues) => { if (editingComment) { - // NOTE: 댓글 수정 시 patchCommentMutation.mutate( { commentId: editingComment.id, ...values }, { @@ -57,7 +55,6 @@ function CommentTextarea({ epigramId, editingComment, onEditComplete }: CommentT }, ); } else { - // NOTE: 새 댓글 작성 시 const commentData = { epigramId, ...values, @@ -70,7 +67,13 @@ function CommentTextarea({ epigramId, editingComment, onEditComplete }: CommentT } }; - // NOTE: 수정 취소 + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter' && !event.shiftKey) { + event.preventDefault(); + form.handleSubmit(onSubmit)(); + } + }; + const handleCancel = () => { form.reset(); onEditComplete(); @@ -91,6 +94,7 @@ function CommentTextarea({ epigramId, editingComment, onEditComplete }: CommentT editingComment ? 'border-black' : 'border-line-200' }`} placeholder='100자 이내로 입력해 주세요.' + onKeyDown={handleKeyDown} {...field} /> {editingComment && ( diff --git a/src/pageLayout/Epigram/EpigramComment.tsx b/src/pageLayout/Epigram/EpigramComment.tsx index bb3def99..335d4295 100644 --- a/src/pageLayout/Epigram/EpigramComment.tsx +++ b/src/pageLayout/Epigram/EpigramComment.tsx @@ -6,20 +6,11 @@ import { EpigramCommentProps } from '@/types/epigram.types'; import Image from 'next/image'; function EpigramComment({ epigramId, currentUserId, userImage }: EpigramCommentProps) { - // NOTE: 현재 수정 중인 댓글 상태, null이면 댓글 수정이 아닌 새 댓글 작성 취급 - const [editingComment, setEditingComment] = useState<{ id: number; content: string; isPrivate: boolean } | null>(null); - - const handleEditComment = (id: number, content: string, isPrivate: boolean) => { - setEditingComment({ id, content, isPrivate }); - }; - - const handleEditComplete = () => { - setEditingComment(null); - }; + // NOTE: 수정상태를 수정중인 댓글의 ID로 변경 + const [editingCommentId, setEditingCommentId] = useState(null); return ( - // NOTE: 댓글부분 height 수정 -
+

댓글 작성

@@ -31,10 +22,11 @@ function EpigramComment({ epigramId, currentUserId, userImage }: EpigramCommentP 기본 프로필 사진 )}
- + {/* NOTE: editingCommentId을 null로 바꿈으로써 수정중인 상태가 아니라는걸 알림 */} + setEditingCommentId(null)} />
- +
);