트위터 리트윗 기능 구현하기
📁 리트윗 기능 미리보기
리트윗 기능 구현 과정을 간단하게 정리해보자면 다음과 같다.
프론트
- 리트윗 버튼 생성
- retweet, quote tweet 기능 함수 생성
| retweet : saveTweet API로 리트윗 대상 트윗 아이디 추가해서 보내기.(리트윗 게시물 아이디로 나중에 대상 리트윗 데이터 가져옴) quote tweet : 클릭시 모달창 오픈, 클릭된 트윗 게시물 아이디 인덱스를 기준으로 addTweet 컴포넌트로 데이터 넘겨줌. |
- 리트윗 창 openRetweet 기능 생성(클릭시 state값 변경)
백엔드
트윗 데이터를 저장하는 saveTweet API 에서 리트윗 게시물 아이디를 저장할 수 있는 reply_tweet_id 추가함
실제 구현한 코드
openRetweet 기능
➡️ 백엔드에서 데이터를 가져올때 retweet_opened=false인 값으로 가져옴.
➡️ 리트윗 버튼을 클릭하면 데이터 인덱스값을 기준으로 retweet_opened 값에 접근해서 현재값과 반대되는 값으로 바꿔줌. (예시. false인 경우 true로 변경하여 버튼이 오픈되게 변경해줌)
const openRetweet = ({ tweet_id, open, index }: any) => {
data[index].retweet_opened = open === false ? true : false;
setGetData([...data]);
};
retweet, quoteRetweet 기능
- retweet
1. 리트윗 게시물 아이디, 내용은 빈값, 유저 데이터, 태그를 retweet으로 saveTweet API보내기
2. “select”키로 저장된 react query state값을 초기화 시켜줘서 업데이트된 데이터로 다시 들고오게 함.
- quoteRetweet
1. 클릭하면 새로운 tweet을 저장하는 모달창 오픈됨.
2. 리트윗되는 게시물을 인덱스를 기준으로 addTweet(tweet 생성 컴포넌트)에 prop값으로 보내줌.
3. openRetweet을 실행시켜서 retweet 버튼 창을 닫음.
const retweet = (tweet_id: number) => {
customAxios
.post("/saveTweets", {
reply_tweet_id: tweet_id,
content: "",
user_id: id,
tag: ["retweet"],
})
.then((res) => {
customAxios
.get("/getTweets/select", {
params: { getCurrentPage },
})
.then((result: any) => {
queryClient.invalidateQueries(["select"]);
});
});
};
const quoteRetweet = ({ t, i }: any) => {
setModalIsOpen(true);
setNowData(data[i]);
openRetweet({
tweet_id: t.tweet_id,
open: t.retweet_opened,
index: i,
});
};
리트윗 버튼
retweet_opened 값에 따라 버튼 보여주기 유무가 변경됨.
true일경우 retweet, quote retweet 버튼을 보여주면서 클릭시 각 기능이 실행됨.
<div className=" ">
<img
className="w-6 h-4 pl-2"
alt="#"
src={"/assets/retweet.png"}
onClick={(e: any) => {
openRetweet({
tweet_id: t.tweet_id,
open: t.retweet_opened,
index: i,
});
}}
/>
<div key={t.write_date}>
{t.retweet_opened ? (
<div className="ml-2 flex flex-col border-2 rounded border-stone-200">
<button
className="p-2 hover:bg-slate-100 rounded "
onClick={() => {
retweet(t.tweet_id);
}}
>
Retweet
</button>
<button
className="p-2 hover:bg-slate-100 rounded"
onClick={() => {
quoteRetweet({ t: t, i: i });
}}
>
Quote Tweet
</button>
</div>
) : (
modalIsOpen && (
<Modal
className=" commentModal"
isOpen={modalIsOpen}
ariaHideApp={false}
>
<div className="list">
<button
onClick={() => setModalIsOpen(false)}
className=" text-end"
>
X
</button>
<AddTweet
nowData={[nowData]}
profile={prop.userProfile}
/>
</div>
</Modal>
)
)}
</div>
</div>
saveTweet API 사용
saveTweet API코드에 reply_retweet_id 데이터를 추가해서 데이터베이스에 저장
await Tweets.create({
user_id: result.user_id,
email: req.email,
content: req.body.content,
tag: req.body.tag,
write_date: sequelize.development.literal(`now()`),
reply_tweet_id: req.body.reply_tweet_id,
참고 사이트
React 기초) useState 배열 상태 값 변경하는 방법(spread 문법)