22. mylog 쓰기

마이로그 로그 쓰기로 마이로그를 쓰면, 앱은 마이로그를 forestore에 저장한 후 홈페이지로 이동합니다. 사용자가 입력하는 것은 제목과 내용이지만, 홈페이지 마이로그 리스트에는 글쓴시간, 글쓴이 이름 등의 정보들이 보입니다. 이들 정보는 마이로그를 저장할 때 웹앱이 자동으로 추가합니다. 앞으로 조회수 등의 정보도 추가될 것입니다.

src/views/WriteMyLogView.vue

<!-- src/views/WriteMyLogView.vue -->
<template>
  <v-container>
    <v-row justify="center">
      <v-col cols="12" md="8">
        <v-card>
          <v-card-title>
            <span class="text-h5">마이로그 - 내 일상의 기록</span>
          </v-card-title>

          <v-card-text>
            <v-form @submit.prevent="submitMylog">
              <v-text-field v-model="title" label="Title" required></v-text-field>
              <v-textarea v-model="content" label="Content" rows="10" required></v-textarea>
              <v-btn type="submit" color="primary">저장</v-btn>
            </v-form>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
  data() {
    return {
      title: "",
      content: "",
    };
  },
  methods: {
    ...mapActions('mylogs', ['saveMylog', 'setError']),
    async submitMylog() {
      if (!this.title || !this.content) {
        alert("Please fill in both fields.");
        return;
      }

      const user = this.$store.state.auth.user;
      if(user) {
        try {
          const mylog = await this.saveMylog({
            title: this.title,        // 사용자가 입력한 마이로그 제목
            content: this.content,    // 사용자가 입력한 마이로그 내용   
            userId: user.id,          // 로그인한 사용자의 id
            userName: user.username,      // 로그인한 사용자의 이름
            createdAt: new Date()     // 저장하는 현재 시간
          })        
        } catch (error) {
          //console.error('Error adding user:', error);
          this.setError(error.message);       
        }
      }
    },
  },
};
</script>

<style scoped>
.text-h5 {
  font-weight: bold;
}
</style>

saveMylog

async saveMylog({ commit, dispatch }, { title, content, userId, userName, createdAt }) {
  try {
    // 작성한 마이로그를 firestore에 저장한다.
    const mylog = await addDoc(collection(db, "mylogs"), {
      title: title,
      content: content,
      userId: userId,
      userName: userName,
      createdAt: createdAt
    });

    dispatch('fetchMylogs');  // 새 마이로그을 저장한 후 전체 마이로그를 새로 읽는다.
    commit("setError", null);

    router.push("/");   // home으로      

  } catch (error) {
    commit("setError", error.message);
  }
},

fetchMylogs

Copy// 마이로그 전체를 firestore에서 가져온다.
async fetchMylogs({ commit }) {
  commit('setLoading', true);

  try {
    const mylogs = []; 
    const mylogsRef = query(collection(db, "mylogs"), orderBy("createdAt", "desc"));
    const querySnapshot = await getDocs(mylogsRef);
    querySnapshot.forEach((doc) => { 
      mylogs.push({ id: doc.id, ...doc.data() });
    });
    commit('setMylogs', mylogs);
  } catch (error) {
    commit('setError', error);
  } finally {
    commit('setLoading', false);
  }
},