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

안녕하세요 섹션 31 댓글 기능 구현 과제 중 궁금한 점이 있어 질문 남깁니다

댓글 리스트의 수정 아이콘 클릭 시 사진과 같은 화면이 나오도록 했고, 댓글 등록하기 presenter component를 재사용 했습니다

댓글 리스트 presenter 파일입니다

export default function CommentListUI(props) {
  return (
    <S.Wrapper>
      {props.data?.fetchBoardComments.map((item) => (
        <S.CommentListWrapper key={item._id}>
          {props.isEdit && props.commentId === item._id ? (
            <CommentWriteUI></CommentWriteUI>
          ) : (
            <S.Comment_Container>
              <S.profile_icon src="/02/profile_icon.png"></S.profile_icon>
              <S.Content_container>
                <S.Name_Star_container>
                  <S.Text style={{ fontWeight: "600" }}>{item.writer}</S.Text>
                  <S.ReviewStar_container style={{ marginLeft: "16px" }}>
                    <S.StarDiv></S.StarDiv>
                    <S.StarDiv></S.StarDiv>
                    <S.StarDiv></S.StarDiv>
                    <S.StarDiv></S.StarDiv>
                    <S.StarDiv></S.StarDiv>
                  </S.ReviewStar_container>
                </S.Name_Star_container>
                <S.Text style={{ marginTop: "-15px", fontWeight: "500" }}>
                  {item.contents}
                </S.Text>
                <S.Text
                  style={{
                    fontSize: "12px",
                    fontWeight: "400",
                    color: "#BDBDBD",
                  }}
                >
                  {getDate(item.createdAt)}
                </S.Text>
              </S.Content_container>
              <S.Icon_container>
                <S.Icon
                  style={{ backgroundImage: `url("/createComment.png")` }}
                  onClick={() => props.onClickTEST(item._id)}
                ></S.Icon>
                <S.Icon
                  style={{ backgroundImage: `url("/clear.png")` }}
                  onClick={() => props.onClickDelete(item._id)}
                ></S.Icon>
              </S.Icon_container>
            </S.Comment_Container>
          )}
        </S.CommentListWrapper>
      ))}
    </S.Wrapper>
  );
}

삼항연산자를 사용해 나오는 화면을 다르게 했습니다

isEdit 변수는 수정하기 아이콘 클릭 시 true로 바뀌고, 삼항연산자 조건에 isEdit 변수만 사용하니 수정 아이콘을 클릭하지 않은 다른 댓글 리스트가 사라지면서 재사용한 댓글 등록 presenter 파일만 화면에 나와서 조건은 위와 같이 작성했습니다

여기서 문제는 수정 아이콘을 클릭해 나오는 댓글 등록 창은 container 파일에 작성한 함수가 작동하지 않는 것입니다

댓글 리스트 container 파일입니다

export default function CommentList() {
  const { data } = useQuery(FETCH_COMMENTS);

  const [deleteBoardComment] = useMutation(DELETE_COMMENTS);
  const onClickDelete = async (item) => {
    const pw = prompt("비밀번호를 입력해주세요.");

    try {
      await deleteBoardComment({
        variables: {
          pw: pw,
          boardCommentId: item,
        },
        refetchQueries: [{ query: FETCH_COMMENTS }],
      });
      alert("삭제되었습니다.");
    } catch (error) {
      alert(error.message);
    }
  };

  // 수정하기 아이콘 클릭 시 화면 변화
  const [isEdit, setIsEdit] = useState(false);
  const [commentId, setCommentId] = useState();

  const onClickTEST = (item) => {
    setIsEdit(true);
    setCommentId(item);
  };
  // console.log(commentId);

  return (
    <CommentListUI
      data={data}
      onClickDelete={onClickDelete}
      onClickTEST={onClickTEST}
      isEdit={isEdit}
      commentId={commentId}
    ></CommentListUI>
  );
}

댓글 등록 container 파일입니다

  const [updateBoardComment] = useMutation(UPDATE_BOARD_COMMENT);
  const onClickUpdate = () => {
    // updateBoardComment({
    //     variables: {
    //         updateBoardCommentInput: {
    //             contents: contents,
    //             rating: 0
    //         },
    //         password: pw,
    //         boardCommentId:
    //     }
    // })
    console.log("Test");
  };

  return (
    <>
      <CommentWriteUI
        onChangeWriter={onChangeWriter}
        onChangePw={onChangePw}
        onChangeContents={onChangeContents}
        onClickUpdate={onClickUpdate}
      ></CommentWriteUI>
    </>
  );
}

onClickUpdate 함수는 댓글 작성 presenter 파일의 등록하기 버튼에 연결되어 있습니다

상세 페이지 로딩 시 나오는 댓글 등록창은 버튼 클릭 시 콘솔이 제대로 나오는데

댓글 리스트 수정 아이콘을 눌러 나오는 댓글 등록창에서는 버튼을 눌러도 콘솔 자체가 나오지 않습니다

댓글 과제 가이드를 확인해서 어떻게 수정하면 좋을지는 알았지만, 궁금한 점이 해소되지 않네요

궁금한 점은

1. 삼항연산자, map 등 기능의 속성을 제대로 알지 못한 채 사용한 문제인지

2. 코드 자체를 잘못 작성한 것인지

3. 추가로 rating(별점) 데이터 활용법에 대한 힌트를 얻고 싶습니다

rating 값 1 = 별 1개 인가요? rating 숫자 데이터가 별과 어떻게 연결되는지 잘 모르겠습니다

부족한 점이 많아 질문이 너무 길어졌네요 항상 감사합니다