Vue PWA myLog - 찾기 구현

Vue로 PWA 개발 - 그랜파 개발자

36. 마이로그 찾기 구현

검색어를 입력하면 제목 또는 내용에 검색어를 포함하는 마이로그 전체를 찾아서 카드뷰로 보여줍니다. 마이로그 보기 버튼을 클릭하면 마이로그 상세보기 페이지로 이동합니다.

1. 마이로그 찾기

2. src/views/SearchMyLogsView.vue

<!-- src/views/SearchMyLogsView.vue -->
<template>
  <v-container>
    <v-row>
      <v-col cols="12" sm="8">
        <v-text-field v-model="searchTerm" label="Search for mylogs" @input="doSearchPosts" ></v-text-field>
      </v-col>
    </v-row>

    <v-row>
      <v-col v-for="mylog in filteredMylogs" :key="mylog.id" cols="12" sm="6" md="4">
        <v-card>
          <v-card-title>{{ mylog.title }}</v-card-title>
          <v-card-text>{{ mylog.content }}</v-card-text>
          <v-card-actions>
            <v-btn @click="goToMylog(mylog.id)">마이로그 보기</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

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

export default {
  data() {
    return {
      searchTerm: ""     // 사용자가 입력한 검색어
    };
  },
  computed: {
    ...mapGetters('mylogs',['filteredMylogs']), 
  },
  methods: {
    ...mapActions('mylogs', ['searchMylogs']),
    // Firestore에서 게시물 검색
    async doSearchPosts() {
        if (this.searchTerm) {
        // title 또는 content에 검색어가 포함된 게시물 검색
        await this.searchMylogs(this.searchTerm);
      }
    },

    // 게시물 세부 정보 페이지로 이동
    goToMylog(mylogId) {
      this.$router.push({ name: "MyLogView", params: { id: mylogId } });
    },
  }
};
</script>

3. src/store/modules/mylogs.js

// src/store/modules/mylogs.js

const mutations = {
  …..
  setFilteredMylogs(state, filteredMylogs) {
    state.filteredMylogs = filteredMylogs;
  },
};

const actions = {
  ….
   // Firestore에서 게시물 검색
    async searchMylogs({ commit, getters }, searchTerm ) {

    const mylogsCollection = collection(db, "mylogs");
    // title 또는 content에 검색어가 포함된 게시물 검색
    const searchTermLower = searchTerm.toLowerCase();

    let filteredMylogs = [];
    // 검색된 결과 필터링
    filteredMylogs = getters.mylogs.filter((mylog) => {     
      return (
        mylog.title.toLowerCase().includes(searchTermLower) ||
        mylog.content.toLowerCase().includes(searchTermLower)
      );
    });
    commit('setFilteredMylogs', filteredMylogs); // 검색 결과를 상태에 저장    
  },
}

const getters = {
   …
  filteredMylogs: state => state.filteredMylogs,  // 검색된 게시물 목록
  …
};