댓글 알림 리스트 기능 구현하기

댓글 알람리스트 React-modal

react-modal을 사용해서 상대적으로 쉽게 모달창을 구현함.

⇒ 댓글알림창 버튼을 클릭하면 getComments API이 실행되어서 현재 로그인한 유저의 최신 댓글 데이터를 가져옴

⇒ 가져온 데이터를 commentList state로 관리. set함수로 데이터 업데이트 시킴.

 

commentList.tsx

export default function CommentsList() {
  const [commentList, setCommentList] = useState<Comment[]>([]);
  const [modalIsOpen, setModalIsOpen] = useState(false);
  useEffect(() => {
    axios.get("http://localhost:1234/getComments/newComments").then((res) => {
      setCommentList(res.data.newComments);
    });
  }, []);

  return (
    <div>
      <span className="messageBtn relative inline-block ml-8 ">
        <svg
          onClick={() => {
            setModalIsOpen(true);
          }}
          className="w-6 h-6 text-gray-700 fill-current"
          viewBox="0 0 20 20"
        >
          <path
            d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z"
            clip-rule="evenodd"
            fill-rule="evenodd"
          ></path>
        </svg>
        <span className="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-blue-300 rounded-full">
          1
        </span>
        <Modal className=" commentModal" isOpen={modalIsOpen}>
          <div className="list">
            <button onClick={() => setModalIsOpen(false)} className=" text-end">
              X
            </button>
            {commentList.map((c: any) => {
              return (
                <div className="subList">
                  <div className="profile">
                  	// user profile data 가져와서 변경해야함
                    <img
                      className=" profileImg"
                      src="{user profile 이미지 url}"
                      alt=""
                    />
                  </div>
                  <div className="listContent" key={c.id}>
                    <div>
                      {c.email}님이 회원님의 게시물에 댓글을 남겼습니다. "
                      {c.comment}"
                    </div>
                    <div>{c.write_date}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Modal>
      </span>
    </div>
  );
}

 

 

getComments.ts

router.post(
  "/",
  verifyRefreshToken,
  async (req: any, res: Response, next: NextFunction) => {
    const openComments: Comments[] = await Comments.findAll({
      where: { tweet_id: req.body.tweet_id },
    });

    const newComments: Comments[] = await Comments.findAll({
      where: {
        write_date: {
          [Op.gte]: sequelize.development.literal("now() - INTERVAL 24 HOUR"),
        },
      },
    });

    res.status(200).json({ data: openComments, is_opened: true, newComments });
  }
);

 

 

write_date가 지난 24시간 이내인 레코드를 조회하는 쿼리

write_date: {
          [Op.gte]: sequelize.development.literal("now() - INTERVAL 24 HOUR"),
        },

 

[Op.gte]: Op.gte는 "greater than or equal to"을 의미하는 Sequelize 연산자. 이 조건은 write_date 필드의 값이 이 연산자 뒤에 오는 값보다 크거나 같아야 한다는 것을 나타낸다.

 

sequelize.development.literal("now() - INTERVAL 24 HOUR"): 현재 시간에서 24시간을 뺀 시간 계산하여 write_date 필드의 값이 최근 24시간 이내인 레코드를 찾는 데 사용

 

Where문이란?

: where 조건문에는 and, or, between and, in, like 등 많은 조건 필터가 붙음

⇒ in 내부에 포함되는 모든 항목을 골라냄

예) Where, in (’a’,’b’,’c’….’d’);

 

특정 조건으로 원하는 데이터를 보고자 할때 사용하면 된다.