36. mylog 찾기 구현

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

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

Copy// 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,  // 검색된 게시물 목록
  …
};