Entry Footer 구상 🤔

• 

• Entry Footer 에선 카테고리의 다른 글들과 댓글들을 보여줄것이다.

• Comment Input 컴포넌트를 만들어 댓글을 입력한다.

• Entry page에서 가지고 있는 docId 값으로 글에 맞는 댓글들만 불러올것이다.

• 댓글 수정과 답글 기능을 구현할것이다.

Comments Database

익명 작성을 위해 작성자 이름과 비밀번호를 입력받음.
글의 아이디에 맞는 댓글들을 불러오기 위해 docId 를 저장.

• nickname(작성자 이름)
• password(수정/삭제용 비밀번호)
• comment(댓글)
• docId(글 id)
• edited(수정됨 표시 여부)
• avatar(댓글 아바타)

카테고리 다른글

//EntryFooter.tsx
const getNotes = async (category: string) => {
  try {
    const q = query(
      collection(dbService, "notes"),
      where("category", "==", category as string),
      orderBy("createdAt", "desc"),
      limit(3)
    );
    onSnapshot(q, (snapshot) => {
      const notesArr: any = snapshot.docs.map((note) => ({
        id: note.id + "",
        ...note.data(),
      }));
      setNotes(notesArr);
    });
  } catch (error: any) {}
};

• Entry Page에서 가지고있는 카테고리를 인자로 받은 뒤, 해당 카테고리에맞는 글을 3개만 불러온다.
• 카테고리의 다른글을 더 보고싶다면 notes로 인도한뒤, 선택된 카테고리를 바로 보여준다.
• 다른 페이지를 가서도 상태를 유지해야 하기때문에 , 전역상태관리인 Recoil 이용.

const [selectedCategory, setSelectedCategory] =
      useRecoilState<string>(selectedCategoryAtom);
const onOtherNotesClicked = () => {
  setSelectedCategory(category);
  navigation(`/notes/${encodeURIComponent(selectedCategory).toLowerCase()}`);
};

Comment Input 컴포넌트

//CommentInput.tsx
const [nickname, setNickname] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [comment, setComment] = useState<string>("");

Input 으로 닉네임,비밀번호,댓글을 입력받는다.

//CommentInput.tsx
const onAddButtonClicked = async () => {
  if (nickname === "" || password === "" || comment === "") {
    toast({
      title: "빈칸이 있습니다.",
      position: "top",
      status: "error",
      isClosable: true,
    });
    return;
  }
  if (nickname.length > 15) {
    toast({
      title: `닉네임이 너무 깁니다..( ${nickname.length} / 15 )`,
      position: "top",
      status: "error",
      isClosable: true,
    });
    return;
  }
  if (comment.length > 500) {
    toast({
      title: `댓글이 너무 깁니다..( ${comment.length} / 500 )`,
      position: "top",
      status: "error",
      isClosable: true,
    });
    return;
  }
  await addDoc(collection(dbService, "comments"), {
    docId: docId,
    avatar: userIcon.string,
    nickname: nickname,
    password: password,
    comment: comment,
    createdAt: Date.now(),
    edited: false,
  });
  toast({
    title: "댓글작성 완료!",
    position: "top",
    isClosable: true,
  });
};

댓글 작성 버튼을 클릭했을때, db 용량을 위해 닉네임과 댓글 글자수에 제한을 둔다. 조건이 맞으면 addDoc 메소드로 comments 데이터베이스에 추가해준다.

Comments 불러오기

//Comments.tsx
export default function Comments({ docId }: ICommentsProps) {
  const getComments = async (docId: string) => {
    try {
      const q = query(
        collection(dbService, "comments"),
        where("docId", "==", docId),
        orderBy("createdAt", "desc")
      );
      onSnapshot(q, (snapshot) => {
        const commentsArr: any = snapshot.docs.map((comment) => ({
          id: comment.id + "",
          ...comment.data(),
        }));
        setComments(commentsArr);
      });
    } catch (error: any) {}
  };

  useEffect(() => {
    getComments(docId);
  }, [docId]);
  ...
    return (
    <>
      <Center w="full" h={"auto"} flexDir={"column"} gap={4} bgColor={bgColor}>
        {comments?.map((comment) => (
          <Comment
            key={comment.id}
            commentId={comment.id}
            nickname={comment.nickname}
            password={comment.password}
            avatar={comment.avatar}
            comment={comment.comment}
            createdAt={comment.createdAt}
            edited={comment.edited}
          />
        ))}
      </Center>
    </>
  );
}

docId를 props로 받아 docId가 일치하는 댓글들만 불러온뒤 , comment 컴포넌트에 보내준다.

Comment 컴포넌트

//Comment.tsx
interface ICommentProps {
  nickname: string;
  password: string;
  avatar: string;
  comment: string;
  createdAt: number;
  commentId: string;
  edited: boolean;
}

comment props를 설정해준다.
commentId는 답글을 위해 댓글의 Id를 저장해놓는다.

edit,reply,delete 기능을 위해 버튼 3개를 구현한다.

edit/reply

//Comment.tsx
const [isEdit, setIsEdit] = useState(false);
const [isReply, setIsReply] = useState(false);

• edit기능과 reply 기능을 구현한다.
• edit은 Chakra UI의 popover 컴포넌트로 구현했다.
• 버튼을눌러 isEdit이 true가되면 popover를 보여준다.
• reply는 버튼을눌러 isReply가 true가 되면 replyInput 컴포넌트를 보여준다.
• replyInput 컴포넌트는 CommentInput 컴포넌트를 만들어놓았기에 간단히 구현할수있었다.
  

delete

• 삭제는 deleteModal을 만들어서 진행한다.
• 비밀번호가 일치할 경우에만 댓글을 삭제한다.
• isReply props로 답글인지 댓글인지 파악해준뒤, deleteDoc 메소드로 댓글의 id를 받아 삭제한다.

//CommentDeleteModal.tsx
const onDeleteClick = async () => {
  let commentsRef = null;
  if (isReply) {
    commentsRef = doc(dbService, "replyComments", commentId!);
  } else {
    commentsRef = doc(dbService, "comments", commentId!);
  }
  if (password !== checkPassword) {
    toast({
      title: "비밀번호가 틀립니다",
      position: "top",
      isClosable: true,
      status: "error",
    });
  } else {
    await deleteDoc(commentsRef);
    toast({
      title: "삭제 완료!",
      position: "top",
      isClosable: true,
    });
    onClose();
  }
};

Comment Reply 컴포넌트

const getReplyComments = async (commentId: string) => {
  try {
    const q = query(
      collection(dbService, "replyComments"),
      where("commentId", "==", commentId),
      orderBy("createdAt", "asc")
    );
    onSnapshot(q, (snapshot) => {
      const commentsArr: any = snapshot.docs.map((comment) => ({
        id: comment.id + "",
        ...comment.data(),
      }));
      setReplyComments(commentsArr);
    });
  } catch (error: any) {}
};

해당 댓글 id에 맞는 답글들을 불러온다.

완성