[리스렌즈] 리뷰 조회, 게시판, 댓글 (Swiper, Table, axios) 데이터 연결

 

 

리뷰 목록 페이지는 table 형태로 작성된 모든 리뷰를 사용자가 확인할 수 있게 구현했다.

 

특히,

프로젝트의 목적이라고할 수 있는 리뷰 인증 여부 또한 목록에서 확인이 가능하도록 구현했다.

 

 

처음에는 인증된 리뷰만 사용자가 볼 수 있도록 하려고 했으나,

리뷰 커뮤니티인데 인증이 실시간으로 이루어지지 않아 사용자가 리뷰를 보지 못하게 되는 불편함을 덜고자

모든 리뷰 목록을 보여주되 인증 여부를 추가로 표시하는 것으로 UI를 수정해 개발을 진행했다.

 

---

 

 

리뷰 목록 데이터를 연결하는 과정에서는 관리자 계정과 일반 사용자 계정을 분리해주어야 했기에

if - else 문을 사용해 상황을 나눠주었다.

 

일반 사용자 계정일 시 GET 요청으로 리뷰 목록만을 불러와 상태관리되고 있는 배열에 저장해주고,

관리자 계정일 시 GET 요청의 데이터를 모두 리뷰 배열에 저장해준다.

 

 

• 일반 사용자 (isAdmin === false): /reviews 엔드포인트에서 리뷰 목록을 가져옴.
• 관리자 (isAdmin === true): /admin 엔드포인트에서 관리자가 볼 수 있는 리뷰 목록을 가져옴.

useEffect(() => {

    async function fetchReviews() {

      if(isAdmin === false) {

        try {

          const response = await axios.get(`${BACKHOST}/reviews`);

          setReviews(response.data.data.reviews);

        } catch (err) {

          console.log(err)

        }

      }

      else {

        try {

          const response = await axios.get(`${BACKHOST}/admin`);

          setReviews(response.data.data);

        } catch (err) {

          console.log(err)

        }

      }

    }

    fetchReviews();

  }, [isAdmin]);

 

 

728x90

---

 

 

리뷰 목록에서 제목을 클릭했을 때 상세페이지로 이동할 수 있도록 react-router-dom을 이용해 link를 걸어주었다.

 

 

따라서 해당 리뷰 글 상세페이지로 이동하게되면,

작성된 리뷰를 확인할 수 있으며, 최대 3개의 이미지를 업로드 할 수 있게 구현이 되어있어 사용자가 업로드한 모든 사진을 효과적으로 표시하기 위해 Swiper를 사용해 이미지를 나타냈다.

 

 

이 과정에서 이미지의 크기가 swiper 밖으로 나가고 불규칙한 오류들이 있었지만,
이미지가 차지하는 영역의 크기가 swiper 영역의 크기보다 커서 나타나는 오류라고 판단해 %단위를 사용해 크기를 적절히 조정해 빠르게 문제를 해결할 수 있었다.

 

리뷰 상세 카드

 

 

---

 

 

다음으로 커뮤니티인만큼 리뷰에 대한 댓글을 작성하고, 수정, 삭제할 수 있도록 댓글 창도 구현해주었다.

 

 

댓글을 수정, 삭제할 수 있는 버튼은 toggle로 열렸다 닫혔다 할 수 있도록 구현했었는데,
기본적으로 toggle 기능만 넣다보니 모든 댓글에 대한 toggle이 동시에 열린다는 문제점이 발생하기도 했다.

따라서,
댓글 인덱스 번호를 활용해 각 댓글을 별도로 상태관리해주었고, 로그인이 되어있을때만 toggle이 작동하도록 기능을 추가해 문제를 해결했다.

 

const toggleOptBox = (commentIdx: number) => {

    if (isLoggedIn === true) {

      setIsOptBoxVisible((prevState) =>

        prevState === commentIdx ? null : commentIdx

      );

    } else {

      alert("로그인 후 이용해주세요");

    }

  };

 

 

 

리뷰에 해당하는 댓글 목록은 GET 요청을 통해 데이터를 받아오고 있으며,

댓글 작성은 POST 요청으로 사용자의 입력값을 서버에 전송해 DB에 저장되도록 구현했다.

 

 

댓글 수정은 댓글의 인덱스로 상태를 관리하며, userID로 사용자를 확인해 자신이 작성한 댓글만 PATCH 요청으로 수정이 가능하도록 해주었다.

 

const handleSaveEditedComment = async (com_idx: number) => {

    try {

      await axios.patch(

        `${BACKHOST}${revIndex}/comments/${com_idx}`,

        {

          com_text: editedCommentText,

        }

      );

      setEditingCommentIdx(null);

      showComments();

    } catch (err) {

      console.log(err);

    }

  };

 

 

 

댓글 삭제 또한 DELETE 요청으로 자신이 작성한 댓글을 삭제할 수 있도록 해주었고,

삭제 확인 모달을 표시해 다시 한번 더 사용자가 요청을 확인할 수 있게 구현했다.

 

const handleDeleteComment = async () => {

    if (commentToDelete !== null) {

      try {

        await axios.delete(

          `${BACKHOST}${revIndex}/comments/${commentToDelete}`

        );

        setShowDeleteModal(false);

        showComments();

      } catch (err) {

        console.log(err);

      }

    }

  };

 

 

댓글 작성, 수정, 삭제