[Vue3 + vite + tailwindCSS] 트윗 모달과 함수 연결

 

현재 트윗 버튼을 클릭하면 추가가 안된다. 

 

그래서 트윗 버튼과 트윗 함수를 연결할거임

 

 

홈페이지에서 새로운 트윗을 추가하는거랑 코드가 동일하다

 

하지만 만약에 트윗 추가 코드가 수정되면 

 

트윗 모달과 홈페이지 코드를 각각 수정을 해줘야하는 번거로움이 있기 때문에 

 

이 코드를 분리해서 import하여 사용하는 방법으로 

 

코드 수정을 최소화 하도록 한다. 

 

 

src 폴더 내에 utils 폴더를 만들어서 

 

 

addTweet.js파일을 만들었다. 

 

addTweet 에는 

 

Home에서 사용했던 addTweet함수를 그대로 복사하여 붙여넣기함

 

그리고 코드를 조금 수정한다. 

 

1. export default를 붙여 다른 곳에서도 사용이 가능하도록 만들어주고

2. 트윗 내용, 현재 사용중인 유저 정보를 받아서 사용해야한다

그리고 Promise를 사용해서 성공 또는 실패의 경우에 어떻게 리턴해줄지 정함

 

import { doc, setDoc, collection } from "firebase/firestore";

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

export default (tweetBody, currentUser) => {

  return new Promise(async (resolve, reject) => {

    try {

      //tweet 저장하기

      const newTweetRef = doc(collection(db, "tweets"));

      await setDoc(newTweetRef, {

        id: newTweetRef.id,

        tweet_body: tweetBody,

        uid: currentUser.uid,

        created_at: Date.now(),

        num_comments: 0,

        num_retweets: 0,

        num_likes: 0,

      });

      resolve(true);

    } catch (e) {

      reject(e);

    }

  });

};

 

 

 

Home 에서는 addTweet을 import하고 아래와 같이 추가할 트윗 내용과 현재 유저 정보를 넘겨준다. 

import addTweet from "../utils/addTweet";

    const onAddTweet = async () => {

      try {

        addTweet(tweetBody.value, currentUser.value);

        tweetBody.value = "";

      } catch (e) {

        console.log("트윗 에러 메시지", e);

      }

    };

 

 

그러면 

 

트윗 모달에는?

 

Home과 다른것은 동일하지만 다른점이 있다. 

트윗을 추가하면 모달창이 닫혀야 한다는 것임

그래서 

emit을 사용하여 상위 컴포넌트의 close-modal을 실행시켜줘야한다. 

<script>

import { ref, computed } from "vue";

import addTweet from "../utils/addTweet";

import store from "../store";

export default {

  setup(props, { emit }) {

    const tweetBody = ref("");

    const currentUser = computed(() => store.state.user);

    //트윗 추가 함수 -> utils의 addTweet함수

    const onAddTweet = async () => {

      try {

        addTweet(tweetBody.value, currentUser.value);

        tweetBody.value = "";

        emit("close-modal"); //상위 컴포넌트에 close-modal실행

      } catch (e) {

        console.log("트윗 에러 메시지", e);

      }

    };

    return {

      tweetBody,

      onAddTweet,

      currentUser,

    };

  },

};

</script>

 

 

이렇게 테스트를 할 경우 실제로 추가되는지 테스트한다.