마이로그 상세 보기 페이지 상단에 마이로그 저자의 마이로그 이름이 있습니다.이것을 누르면 회원의 마이로그 로 이동합니다. 이 페이지는 선택한 회원의 마이로그만 보여주는 페이지로 그 회원의 마이로그 홈이라 할 수 있습니다. 회원의 마이로그 목록에서 마이로그를 선택하면 다시 마이로그 상세 보기 페이지로 이동합니다. 회원의 마이로그 보기는 메뉴 항목에는 없습니다. 마이로그 상세 보기에서 저자의 마이로그 이름을 클릭하여 이동할 수 있습니다.
1. MyLogView.vue
마이로그 보기에서 저자의 마이로그 이름을 클릭하면 저자의 id를 파라미터로 가지고 페이지로 이동합니다.
goToUserMylogs(userId) {
this.$router.push({ name: 'UserMyLogsView', params: { userId } });
},
2. UserMyLogsView.vue
회원의 마이로그 목록을 보여주는 UserMyLogsView 페이지에 접속하면 파라미터로 받은 userId로 이미 로드되어 있는 전체 회원 정보에서 userId를 가진 회원의 정보를 찾습니다. 회원의 정보에서 마이로그 이름을 화면에 표시하고, 회원의 id로 마이로그 목록을 가져옵니다.
const userId = this.$route.params.userId;
// 전체 회원 정보는 이미 읽어 두었다.
const users = this.$store.state.auth.users;
this.author = users.find(user => user.id === userId);
this.fetchUserMylogs(this.author.id); // 저자의 마이로그 목록을 가져오기
src/views/MyMyLogsView.vue
<!-- src/views/MyMyLogsView.vue -->
<template>
<v-container>
<v-card-title v-if=author >
<div class="ml-2 my-2"><b>{{ getMylogName }}</b></div>
</v-card-title>
<v-row justify="center">
<v-col cols="12" md="8">
<v-list v-if="userMylogs.length > 0">
<v-list-item v-for="mylog in userMylogs" :key="mylog.id" @click="goToMylogDetail(mylog.id)">
<v-list-item-content>
<v-list-item-title>{{ mylog.title }}</v-list-item-title>
<v-list-item-subtitle>{{ mylog.createdAt.toDate().toLocaleDateString() }}</v-list-item-subtitle>
<v-list-item-subtitle>{{ mylog.content }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
<p v-else>You haven't written any posts yet.</p>
</v-col>
</v-row>
</v-container>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
data() {
return {
author: null, // 저자의 이름을 가져오기 위해
};
},
computed: {
...mapGetters('mylogs',['userMylogs']),
getMylogName() {
return this.author.mylogname;
}
},
methods: {
...mapActions('mylogs', ['fetchUserMylogs']),
goToMylogDetail(mylogId) {
this.$router.push({ name: 'MyLogView', params: { id: mylogId } });
}
},
mounted() {
const userId = this.$route.params.userId;
// 전체 회원 정보는 이미 읽어 두었다.
const users = this.$store.state.auth.users;
this.author = users.find(user => user.id === userId);
this.fetchUserMylogs(this.author.id); // 저자의 마이로그 목록을 가져오기
},
};
</script>
3. src/store/modules/mylogs.js
Copy// src/store/modules/mylogs.js
const state = {
. . .
userMylogs: [], // 본인이 작성한 글 저장
. . .
};
const mutations = {
. . .
setUserMylogs(state, mylogs) {
state.userMylogs = mylogs;
},
. . .
};
const actions = {
. . .
// 현재 사용자가 작성한 게시물 불러오기
async fetchUserMylogs({ commit }, userId) {
if (userId) {
try {
const q = query(collection(db, "mylogs"), where("userId", "==", userId));
const querySnapshot = await getDocs(q);
const mylogs = [];
querySnapshot.forEach((doc) => {
mylogs.push({ id: doc.id, ...doc.data() });
});
commit('setUserMylogs', mylogs); // 상태에 저장
} catch (error) {
console.error("본인 글 가져오기 실패:", error);
commit('setError', error);
}
}
},
. . .
}
const getters = {
. . .
userMylogs: state => state.userMylogs,
. . .
};
'Vue로 PWA 개발' 카테고리의 다른 글
43. mylog FCM (Firebase Cloud Messaging) (0) | 2024.10.29 |
---|---|
42. mylog 독자 (0) | 2024.10.29 |
40. mylog 구독 보기 (0) | 2024.10.28 |
39. mylog 구독 구현 (0) | 2024.10.28 |
38. mylog 구독 취소 (3) | 2024.10.28 |