23.12.10 (파이어 스토어 댓글 추가기능)

지난 번에 댓글 추가기능을 구현했는데 이번에는 각 게시글 마다 고유 id값을 부여해서

해당 게시글별 댓글을 보이게 해봤다

---

 

일단 각 게시글 고유 값을 받기위해 코멘트 박스에 id값을 props받는다

console.log(storeId);
  console.log(firedata);
  const fetchData = async () => {
    try {
      const querySnapshot = await getDocs(collection(db, 'comments'));
      const firebaseData = querySnapshot.docs
        .filter((doc) => doc.data().storeId === storeId) //이부분에서 id값이 일치하는것만 출력
        .map((doc) => {
          const data = doc.data();
          return {
            id: storeId,
            nickname: data.nickname,
            bookShopName: data.bookShopName,
            createdAt: data.createdAt,
            updatedAt: data.updatedAt,
            content: data.content,
            userId: data.userId
          };
        });

      setFireData(firebaseData);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

 

필터를 이용해 storeId 가 일치하는 문서만 필터링 한후 map을 이용해 화면에 출력해준다

아래 코드를 사용해 추가 버튼을 누르면 파이어 스토어에 storeId와 함께 입력되는걸 볼수있다

const addComment = async () => {
  try {
    // 현재 로그인한 사용자를 가져옵니다.
    const user = auth.currentUser;

    // 사용자가 로그인하지 않은 경우 함수를 종료합니다.
    if (!user) {
      return;
    }

    // 새로운 댓글 데이터를 생성합니다.
    const newData = {
      storeId: storeId, // 댓글이 속한 상점의 ID
      userId: user.uid, // 댓글 작성자의 사용자 ID
      nickname: user.displayName, // 댓글 작성자의 닉네임
      content: commentContent // 댓글 내용
    };

    // 'comments' 컬렉션에 새로운 댓글 데이터를 추가합니다.
    await addDoc(collection(db, 'comments'), newData);

    // 새로운 댓글이 추가된 후, 최신 데이터로 업데이트된 댓글 목록을 가져옵니다.
    fetchData();
  } catch (error) {
    // 댓글 추가 중에 오류가 발생한 경우 에러를 콘솔에 출력합니다.
    console.error('댓글을 추가하는 중 오류 발생: ', error);
  }
};

 

이제 댓글 삭제를 구현 해야하는 데 댓글 삭제할때 filter를 이용할 예정이기에 또 댓글마다 고유한 값이 필요하

이건 uuid를 이용해서 고유한 값을 주었다

yarn add uuid

 

import { v4 as uuidv4 } from 'uuid';

 

 const addComment = async () => {
    try {
      const user = auth.currentUser;
      if (!user) {
        return;
      }
      const commentId = uuidv4();
  //여기다 uuid 생성을 해준다 
      const newData = {
        commentId: commentId,  //댓글 입력하면 여기에 uuid(고유값 생성)
        storeId: storeId,
        userId: user.uid,
        nickname: user.displayName,
        content: commentContent
      };

      // const docRef = await addDoc(collection(db, 'comments'), newData);
      await addDoc(collection(db, 'comments'), newData);
      fetchData();
      
    } catch (error) {
      console.error('댓글을 추가하는 중 오류 발생: ', error);
    }
  };

 

이제 uuid 값을 필터링 하는 형식으로 댓글 삭제 기능을 구현해보자

---

하지만 갑자기 오류 발생

 

댓글 삭제하는 과정에 타입오류 라고합니다...흠...

인덱스 부분을 읽을수가없다는데 아무리 검색해봐도 감도 안잡히는중...

결국 해결 못해서 내일 팀원들이랑 같이 찿아봐야겠습니다...

 

대표사진 삭제

사진 설명을 입력하세요.

간단한 닉네임 연동까지 완료했습니다. 나머지는 내일 마무리 하면서 해봐야겠군요..