[Vue3 + vite + tailwindCSS] 리트윗 기능 추가

 

이번에는 리트윗 버튼을 클릭하면 

 

리트윗 db생성과 동시에 리트윗 숫자도 늘려줘야함 

 

utils에 handleRetweet이라는 함수를 따로 만들어서 관리함

 

import {

  doc,

  setDoc,

  collection,

  updateDoc,

  increment,

  deleteDoc,

  query,

  where,

  getDocs,

} from "firebase/firestore";

import { db } from "../firebase";

import store from "../store";

export default async (tweet) => {

  try {

      //리트윗 하지 않은 상황

      //retweet 저장하기

      const newRetweetRef = doc(collection(db, "retweets"));

      await setDoc(newRetweetRef, {

        id: newRetweetRef.id,

        from_tweet_id: tweet.id,

        uid: store.state.user.uid,

        created_at: Date.now(),

      });

      const updateTweetRef = doc(db, "tweets", tweet.id);

      //tweet에서 comment 수 증가

      await updateDoc(updateTweetRef, {

        num_retweets: increment(1),

      });

    }

  } catch (e) {

    console.log("object retweet error:", e);

  }

};

 

setDoc을 활용해서 retweets라는 컬렉션을 만들어서 필요한 정보들을

넣는다. 

이 데이터들은 tweet이라는 인자로 넘겨 받을거라서 거기서 빼서 쓰면됨

 

그리고 updateDoc으로 tweet컬렉션의 retweet 횟수를 1 추가해주면됨

 

 

그리고 중요한거는

 

현재 로그인 중인 유저가 리트윗을 누르면 숫자만 올라가는 것이 아니라 

이미 추가되어있는 리트윗의 경우 폰트 색상이 다르고, 

한번 더 클릭하게되면 리트윗에서 삭제되는 기능이 필요함

 

 

 

그래서 

 

 

 

 

home에서 사용하는 getUserInfo 함수를 

유저 정보뿐 아니라 tweet 전체 정보를 가져오는 함수로 수정하기 위해서 

 

utils 폴더에서 함수로 따로 만들어서 관리한다. 

import {

  collection,

  doc,

  getDoc,

  getDocs,

  query,

  where,

} from "firebase/firestore";

import { db } from "../firebase";

export default async (tweet, currentUser) => {

  //user Info

  const docRef = doc(db, "users", tweet.uid);

  const docSnap = await getDoc(docRef); // users에서 user.uid로 검색한 결과 가져옴

  // tweet.profile_image_url = docSnap.data().profile_image_url;

  // tweet.email = docSnap.data().email;

  // tweet.username = docSnap.data().username;

  tweet = { ...tweet, ...docSnap.data() };

  // Adding retweet Info

  const retweetRef = collection(db, "retweets");

  const q = query(

    retweetRef,

    where("from_tweet_id", "==", tweet.id),

    where("uid", "==", currentUser.uid)

  );

  const snapshot = await getDocs(q);

  if (snapshot.empty) {

    tweet.isRetweeted = false;

  } else {

    tweet.isRetweeted = true;

  }

  return tweet;

};

 

트윗을 가져올 때 트윗 아이디와 현재 로그인 중인 유저 아이디를 확인하여 

그 유저가 해당 게시글을 리트윗 했으면

tweet 에 isRetweeted라는 데이터로 boolean으로 리턴한다.

 

 

 

handlleRetweet에서 

이미 추가된 리트윗을 isRetweeted로 파악하여 

추가되어있으면 삭제, tweet컬렉션에서 숫자 감소 처리를 해주면됨

 

import {

  doc,

  setDoc,

  collection,

  updateDoc,

  increment,

  deleteDoc,

  query,

  where,

  getDocs,

} from "firebase/firestore";

import { db } from "../firebase";

import store from "../store";

export default async (tweet) => {

  try {

    //이미 리트윗된 상태인지 확인하기

    //리트윗 삭제 트윗 게시물에 리트윗 숫자 줄이기

    if (tweet.isRetweeted) {

      const q = query(

        collection(db, "retweets"),

        where("from_tweet_id", "==", tweet.id),

        where("uid", "==", store.state.user.uid)

      );

      const snapshot = await getDocs(q);

      if (!snapshot.empty) {

        const retweetDoc = snapshot.docs[0]; // 첫 번째 문서 가져오기

        await deleteDoc(retweetDoc.ref);

        const updateTweetRef = doc(db, "tweets", tweet.id);

        //retweet에서 retweet 수 증가

        await updateDoc(updateTweetRef, {

          num_retweets: increment(-1),

        });

      }

    } else {

      //리트윗 하지 않은 상황

      //retweet 저장하기

      const newRetweetRef = doc(collection(db, "retweets"));

      await setDoc(newRetweetRef, {

        id: newRetweetRef.id,

        from_tweet_id: tweet.id,

        uid: store.state.user.uid,

        created_at: Date.now(),

      });

      const updateTweetRef = doc(db, "tweets", tweet.id);

      //tweet에서 comment 수 증가

      await updateDoc(updateTweetRef, {

        num_retweets: increment(1),

      });

    }

  } catch (e) {

    console.log("object retweet error:", e);

  }

};

 

 

 

리트윗 여부 

 

그리고 Tweet에서 

 

handleRetweet 함수를 import해서 

버튼을 클릭하면 해당 함수가 실행되게 하고 

만약에 이미 트윗이 되어있으면 폰트색상을 달리한다.

        <!-- 리트윗 버튼  -->

        <div

          @click="handleRetweet(tweet)"

          :class="`${tweet.isRetweeted ? 'text-green-500' : 'text-gray-500'}`"

        >