📁 좋아요 기능 미리보기
좋아요 기능 구현 과정을 간단하게 정리해보자면 다음과 같다.
프론트
- 하트 버튼 생성 (트윗 데이터 중 is_like 값에 따라서 다른 이미지 보여주기 ⇒ true일때 빨간 하트 false일때 빈하트)
- addHeart, delete 기능 구현
→ addHeart : saveLike API 통신. 트윗 아이디를 넘겨줘서 해당 트윗 아이디를 포함한 새로운 like 데이터 생성.
→ deleteHeart : saveLike API 통신. 트윗 아이디,유저 아이디를 넘겨줘서 해당 트윗 like 데이터 중 로그인한 유저가 생성한 like 데이터 삭제.
백엔드
- 백엔드 saveLike API 생성
like table 트윗 관련 like 데이터를 생성하거나 삭제하는 saveLike API 생성 (create, destroy 사용함) - getTweet API에서 트윗 데이터를 넘겨줄때 is_like 데이터(기본값=false)를 생성
⇒ like 테이블에 해당 트윗 like 숫자와 현재 로그인한 유저 아이디로 like 데이터가 존재하면 is_like = true값으로 넘겨줌
실제 구현한 코드
addHeart, deleteHeart 기능
const deleteHearts = (prop: number) => {
customAxios
.post("/saveLike/delete", {
tweet_id: prop,
})
.then((res) => {
customAxios
.get("/getTweets/select", {
params: { getCurrentPage },
})
.then((result: any) => {
queryClient.invalidateQueries(["select"])
});
});
};
const addHearts = (tweet_id: number) => {
customAxios
.post("/saveLike", {
tweet_id: tweet_id,
})
.then((res) => {
customAxios
.get("/getTweets/select", {
params: { getCurrentPage },
})
.then((result: any) => {
queryClient.invalidateQueries(["select"]);
});
});
};
하트 버튼 구현
<div className=" flex pr-3">
<img
className="w-4 h-4 "
alt="#"
src={
t.is_like
? "/assets/heart.png"
: "/assets/EmptyHeart.png"
}
id={t.tweet_id}
onClick={() => {
if (t.is_like === true) {
deleteHearts(t.tweet_id);
}
if (t.is_like === false) {
addHearts(t.tweet_id);
}
}}
/>
<div className="font-light text-sm pl-2">
{t.like.length - 1}
</div>
</div>
saveLike.ts
router.post(
"/",
verifyAccessToken,
verifyRefreshToken,
async (req: any, res: Response, next: NextFunction) => {
const currentUser: Users[] = await Users.findOne({
where: {
email: req.email,
},
}).then((r: any) => {
return r.user_id;
});
await Likes.create({
tweet_id: req.body.tweet_id,
user_id: currentUser,
}).then((result) => {
res.status(201).json(result);
});
}
);
router.post(
"/delete",
verifyAccessToken,
verifyRefreshToken,
async (req: any, res: Response, next: NextFunction) => {
const currentUser: Users[] = await Users.findOne({
where: {
email: req.email,
},
}).then((r: any) => {
return r.user_id;
});
await Likes.destroy({
where: {
tweet_id: req.body.tweet_id,
user_id: currentUser,
},
}).then((result) => {
res.status(201).json(result);
});
}
);
module.exports = router;
<더 구현하고 싶은것>
- 댓글 알람 클릭해서 해당 게시물 댓글창으로 이동
- 알람 데이터 숫자 버튼 옆에 보여주기 , 클릭할 경우 -1시키기
출처 및 참고
[Team Project] Instagram Clone Project | 리액트 인스타그램 클론 프로젝트
[JS] 배열 등을 풀어 헤치는 Spread Operator(스프레드 연산자)
[NodeJS] sequelize where in array query문
Node.js - 시퀄라이즈 (Sequelize, SQL 데이터베이스 작업 라이브러리)
'sns 프로젝트' 카테고리의 다른 글
북마크 기능 구현하기 (0) | 2024.01.22 |
---|---|
댓글 알림 리스트 기능 구현하기 (0) | 2024.01.22 |
트위터 리트윗 기능 구현하기 (1) | 2024.01.22 |
트윗 게시물 업로드 기능 (1) | 2024.01.22 |
React-query 데이터 업데이트 (1) | 2024.01.22 |