[Vue3 + vite + tailwindCSS] tweet 입력 및 firebase 저장

트윗을 작성하고 firebase에 저장되는 것을 구현할거임

 

 

현재 

Home 페이지의 트윗 컴포넌트에 currentUser정보를 전달해서 

현재 접속중이 유저의 트윗들이 표시되게 prop로 보내줄거임

 

  <!-- 트윗 -->

      <Tweet v-for="tweet in 5" :key="tweet" :currentUser="currentUser" />

 

 

트윗 컴포넌트에는

props 로 ['currenUser']를 받아서 

<script>

export default {

  props: ["currentUser"],

};

</script>

 

프로필사진과 이름을 현재 접속중인 유저의 정보로 표시할거임

    <img

      :src="currentUser.profile_image_url"

      class="w-10 h-10 rounded-full hover:opacity-80 cursor-pointer"

    />

    <div class="ml-3 placeholder:flex-1 flex flex-col">

      <div class="text-sm space-x-1">

        <span class="font-bold">{{ currentUser.username }}</span>

        <span>.</span>

        <span class="text-gray-500 text-xs">{{ currentUser.username }}</span>

        <span class="text-gray-500 text-xs">7분</span>

      </div>

 

아래와 같이 반영되는 것을 확인할 수 있다.

다시 Home 페이지로 돌아와서 

 

 

 

 

export default {

  components: { Trends, Tweet },

  setup() {

    const tweetBody = ref("");

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

    const onAddTweet = async () => {

      try {

        //tweet 저장하기

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

        await setDoc(newTweetRef, {

          id: newTweetRef.id,

          tweet_body: tweetBody.value,

          uid: currentUser.value.uid,

          created_at: Date.now(),

          num_comments: 0,

          num_retweets: 0,

          num_likes: 0,

        });

        tweetBody.value = "";

      } catch (e) {

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

      }

    };

    return { currentUser, tweetBody, onAddTweet };

  },

};

 

1. textarea와 변수 tweetBody를 연결하여 

textarea의 상태 변화에 따라 tweetBody에 저장되도록 한다. 

          <textarea

            v-model="tweetBody"

            placeholder="무슨 일이 일어나고 있나요?"

            class="w-full text-lg font-bold focus:outline-none mb-3 resize-none"

          ></textarea>

 

 

2, 트윗 버튼을 클릭하면 <onAddTweet>함수를 실행시켜 트윗을 db에 저장할건데 

만약에 tweetBody가 공백이라면 onAddTweet 함수가 실행되지 않도록 

v-if와 v-else 를 사용하여 버튼 두개를 만들었다. 

            <button

              v-if="!tweetBody.length"

              class="bg-light text-sm font-bold text-white px-4 py-1 rounded-full"

            >

              트윗

            </button>

            <button

              v-else

              @click="onAddTweet"

              class="bg-primary hover:bg-dark text-sm font-bold text-white px-4 py-1 rounded-full"

            >

              트윗

            </button>

 

 

정상적으로 저장되면 tweetBody의 내용은 공백으로 저장하게 만들어줬다. 

 

이제 테스트 해보면 됨

 

 

아래와 같이 firestore에서 확인해보면

 

tweets라는 컬렉션이 만들어지고 문서가 추가된것을 확인할 수 있다. 

그리고 uid에는 현재 접속중인 유저의  uid와 동일해야한다는 점도 확인해야함