인프런 커뮤니티 질문&답변

안녕하세요. 현재 댓글 수정, 삭제 구현중에 있습니다.

강의 과정에는 없지만 추가적으로 궁금한 부분이 있어 질문 드립니다.

댓글을 삭제하는 경우, 바로 반영되어 댓글이 삭제되기는 하나

애니메이션을 적용시켜 천천히 사라지며 삭제되는 코드를 짜고싶습니다.

현재 TransitionGroup, CSSTransition, keyframes 컴포넌트를 사용해

애니메이션은 적용이 되고 있으나, 삭제시 삭제되는 해상 댓글에만 적용하기는 너무 어렵네요

생각하기로는, 해당 댓글의 id 값을 스타일시트로 받아와서 스타일시트에서 해당 _id의 댓글만 애니메이션을 적용하면 될 것 같은데 생각대로 되지 않는 것 같습니다.

어떻게 하면 좋을지 힌트라도 얻을 수 있을까요?

import { getDateTime } from '../../../../commons/libraries/utils';
import * as S from './BoardCommentDetail.styles';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { useEffect } from 'react';

export default function BoardCommentDetailUI(props) {
  useEffect(() => {
    // 댓글이 변경될 때 추가적인 정리 또는 부작용을 수행할 수 있습니다.
  }, [props.data?.fetchBoardComments]);

  return (
    <div>
      <TransitionGroup>
        {props.data?.fetchBoardComments.map((el) => (
          <CSSTransition>
            <S.CommentWrapper>
              <S.Comment>
                <S.ProfileImg>
                  <img src={`/img/profileIcon.svg`} width={48} height={48} />
                </S.ProfileImg>
                <S.CommentContentsArea>
                  <S.CommentContentsWriter>
                    <S.ContentsWriter>{el.writer}</S.ContentsWriter>
                    <S.ContentsRate value={el.rating} disabled />
                  </S.CommentContentsWriter>
                  <S.CommentContents>{el.contents}</S.CommentContents>
                  <S.CommentDate>{getDateTime(el.createdAt)}</S.CommentDate>
                </S.CommentContentsArea>
                <S.WriterIconWrapper>
                  <img src={`/img/mode-24px.svg`} />
                </S.WriterIconWrapper>
                <S.WriterIconWrapper
                  id={el._id}
                  onClick={() => props.onClickDeleteComment(el._id)}
                >
                  <img src={`/img/clear-24px.svg`} />
                </S.WriterIconWrapper>
              </S.Comment>
            </S.CommentWrapper>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
}

import { useMutation, useQuery } from '@apollo/client';
import {
  FETCH_BOARD_COMMENTS,
  DELETE_BOARD_COMMENT,
} from './BoardCommentDetail.queries';
import { useRouter } from 'next/router';
import BoardCommentDetailUI from './BoardCommentDetail.presenter';
import { useState } from 'react';

export default function BoardCommentDetail() {
  const router = useRouter();
  const [commentIdToDelete, setCommentIdToDelete] = useState(null);

  const { data, refetch } = useQuery(FETCH_BOARD_COMMENTS, {
    variables: { boardId: router.query.boardId },
  });

  const [deleteBoardComment] = useMutation(DELETE_BOARD_COMMENT);

  const onClickDeleteComment = async (commentId) => {
    setCommentIdToDelete(commentId);

    const isConfirmed = window.confirm('댓글을 삭제하시겠습니까?');

    if (isConfirmed) {
      try {
        const passwordConfirmation = prompt('비밀번호를 입력하세요');

        await deleteBoardComment({
          variables: {
            boardCommentId: commentId,
            password: passwordConfirmation,
          },
        });
        alert('댓글이 삭제되었습니다.');
        refetch();
      } catch (error) {
        console.error('댓글 삭제 중 오류 발생', error);
      }
    }
  };

  return (
    <BoardCommentDetailUI
      data={data}
      onClickDeleteComment={onClickDeleteComment}
    />
  );
}