Commit @d2efb693ae92b977605131263f69d8f86ffc7f7f

박현정 7 days ago

250804 박현정 피드백 요약 기능 추가

@d2efb693ae92b977605131263f69d8f86ffc7f7f

fd6a532

d2efb69

client/resources/api/feedback.js

--- client/resources/api/feedback.js

+++ client/resources/api/feedback.js

...	...	@@ -13,4 +13,14 @@
13	13	// 피드백 채팅 조회 기능
14	14	export const findAllChatMsgsProc = (chatRoomId, data) => {
15	15	return apiClient.post(`/chat/${chatRoomId}/findAllChatMsgs.json`, data);
16		-} (파일 끝에 줄바꿈 문자 없음)
	16	+}
	17	+
	18	+// 미확인 피드백 개수 조회 기능
	19	+export const findUncheckedFeedbacks = (data) => {
	20	+ return apiClient.post('/feedback/findUncheckedFeedbacks.json', data);
	21	+}
	22	+
	23	+// 피드백 요약 조회 기능
	24	+export const findFeedbackSummary = (data) => {
	25	+ return apiClient.post('/feedback/findFeedbackSummary.json', data);
	26	+}

fd6a532

d2efb69

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


                     <p>최신 디지털 자산</p>
                 </div>
                 <ul class="layout center gap30">
-                    <li v-for="item in assets" :key="item.id" class="box-item">
+                    <li v-for="project in projects" :key="project.id" class="box-item" @click="goToModelingUpdate(project)">
                         <div class="layout center space-between mb10">
-                            <div class="box-title" >{{ item.name }}</div>
-                            <div class="date" >{{ item.date }}</div>
+                            <div class="box-title" >{{ project.name }}</div>
+                            <div class="date" >{{ project.date }}</div>
                         </div>
-                        <img :src="item.img" alt="자산 이미지" >
+                        <img :src="project.img" alt="자산 이미지" >
                     </li>
                 </ul>
             </div>

                             <p>피드백 알림</p>
                         </div>
                         <ul class="box-item">
-                            <li class="alram-item" v-for="item in alarms" :key="item.id">
+                            <li class="alram-item" v-for="project in alarms" :key="project.groupId" @click="goToFeedback">
                                 <div  class="layout center gap10">
                                     <img src="../../../resources/img/content/ico_alram.svg" alt="">
-                                    <p><span>프로젝트{{ item.project }}</span>에 피드백 <span>{{ item.count }}건</span>이 입력되었습니다.</p>
+                                    <p><span>{{ project.name }}</span>에 피드백 <span>{{ project.count }}건</span>이 입력되었습니다.</p>
                                 </div>
                             </li>
                         </ul>

 import 'dayjs/locale/ko'; // 한국어 locale 불러오기
 import { findAllLogsProc } from '../../../resources/api/main';
 import { findAllProjectsProc } from '../../../resources/api/asset';
+import { findUncheckedFeedbacks } from '../../../resources/api/feedback';
 
 export default {
     data() {
         return {
-             assets: [
+             projects: [
                 // { id: 1, name: '디지털 자산 A', date: '2024-06-01', img: require('../../../resources/img/content/sample1.png') },
                 // { id: 2, name: '디지털 자산 B', date: '2024-06-10', img: require('../../../resources/img/content/sample2.png') },
                 // { id: 3, name: '디지털 자산 C', date: '2024-06-15', img: require('../../../resources/img/content/sample3.png') }
             ],
             alarms: [
-                { id: 1, project: 'A', count: 2 },
-                { id: 2, project: 'B', count: 1 },
-                { id: 3, project: 'C', count: 5 },
-                { id: 4, project: 'D', count: 3 },
-                { id: 5, project: 'F', count: 7 }
+                // { id: 1, project: 'A', count: 2 },
+                // { id: 2, project: 'B', count: 1 },
+                // { id: 3, project: 'C', count: 5 },
+                // { id: 4, project: 'D', count: 3 },
+                // { id: 5, project: 'F', count: 7 }
             ],
             activityLogs: [
                 // { id: 1, project: '프로젝트A', time: '어제 14:30' },

             .then(response => {
               const projectList = response.data.result.projects;
 
-              this.assets = projectList.map(project => ({
+              this.projects = projectList.map(project => ({
                 id: project.projectId,
                 groupId: project.projectGroupId,
                 isMain: project.isMain,

         },
         goToModelingCreate() {
           this.$router.push('/modeling.page');
+        },
+        goToModelingUpdate(project) {
+          this.$router.push({ name: 'Modeling', query: {projectId: project.id}});
+        },
+        goToFeedback() {
+          this.$router.push('/feedback.page');
+        },
+        loadFeedbackAlarms() {
+            findUncheckedFeedbacks({
+                memberId: this.getMemId
+            })
+            .then(response => {
+                const alarms = response.data.result;
+
+                this.alarms = alarms.map(alarm => ({
+                    groupId: alarm.projectGroupId,
+                    name: alarm.projectName,
+                    count: alarm.unCheckedFeedbackCnt
+                }));
+            })
+            .catch(error => {console.error('미확인 피드백 조회 실패: ', error);})
         },
     },
     watch: {},

         console.log("사용자 아이디: " + this.getMemId + " 사용자 이름: " + this.getMemNm + " 사용자 로그인 아이디: " + this.getMemLoginId);
         this.loadLogs();
         this.loadMainProjects();
+        this.loadFeedbackAlarms();
     },
     beforeUnmount() {},
 };

fd6a532

d2efb69

client/views/pages/subPage/FeedBack.vue

--- client/views/pages/subPage/FeedBack.vue

+++ client/views/pages/subPage/FeedBack.vue


 
 <script>
 import { mapGetters } from 'vuex';
-import { checkFeedbackProc, findAllChatMsgsProc, findAllFeedbacksProc } from '../../../resources/api/feedback';
+import { checkFeedbackProc, findAllChatMsgsProc, findAllFeedbacksProc, findFeedbackSummary } from '../../../resources/api/feedback';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import 'dayjs/locale/ko'; // 한국어 locale 불러오기

                 // }
             ],
             feedbackSummary: {
-                total: 3,
-                unread: 2,
-                read: 1
+                // total: 3,
+                // unread: 2,
+                // read: 1
             },
             selectedFeedback: null,     // 회신용
             replyingFeedbackId: null,   // 회신 폼 표시용

             checkFeedbackProc(feedbackId, data)
                 .then(response => {
                     this.loadFeedbacks();
-                    console.log('피드백 확인 완료');
+                    this.loadFeedbackSummary();
                 })
                 .catch(error => {
                     console.error('피드백 확인 실패: ', error);

 
             client.activate();
         },
+        loadFeedbackSummary(){
+            findFeedbackSummary({
+                memberId: this.getMemId
+            })
+            .then(response => {
+                const summary = response.data.result;
+
+                this.feedbackSummary.total = summary.totalCount;
+                this.feedbackSummary.unread = summary.uncheckedCount;
+                this.feedbackSummary.read = summary.checkedCount;
+            })
+            .catch(error => {console.error('피드백 요약 조회 실패: ', error);})
+        },
     },
     watch: {},
     computed: {

     created() {},
     mounted() {
         this.loadFeedbacks();
+        this.loadFeedbackSummary();
     },
     beforeUnmount() {},
 };

fd6a532

d2efb69

client/views/pages/subPage/Modeling.vue

--- client/views/pages/subPage/Modeling.vue

+++ client/views/pages/subPage/Modeling.vue


     mounted() {
         const projectId = this.$route.query.projectId;
         if(projectId) {
+            console.log("모델링 페이지 - 프로젝트 아이디: " + projectId);
             this.loadProjectData(projectId);
         }
     },

Add a comment

Open 0
Closed 0

List

...	...	@@ -75,7 +75,7 @@
75	75
76	76	<script>
77	77	import { mapGetters } from 'vuex';
78		-import { checkFeedbackProc, findAllChatMsgsProc, findAllFeedbacksProc } from '../../../resources/api/feedback';
	78	+import { checkFeedbackProc, findAllChatMsgsProc, findAllFeedbacksProc, findFeedbackSummary } from '../../../resources/api/feedback';
79	79	import dayjs from 'dayjs';
80	80	import relativeTime from 'dayjs/plugin/relativeTime';
81	81	import 'dayjs/locale/ko'; // 한국어 locale 불러오기
...	...	@@ -115,9 +115,9 @@
115	115	// }
116	116	],
117	117	feedbackSummary: {
118		- total: 3,
119		- unread: 2,
120		- read: 1
	118	+ // total: 3,
	119	+ // unread: 2,
	120	+ // read: 1
121	121	},
122	122	selectedFeedback: null, // 회신용
123	123	replyingFeedbackId: null, // 회신 폼 표시용
...	...	@@ -241,7 +241,7 @@
241	241	checkFeedbackProc(feedbackId, data)
242	242	.then(response => {
243	243	this.loadFeedbacks();
244		- console.log('피드백 확인 완료');
	244	+ this.loadFeedbackSummary();
245	245	})
246	246	.catch(error => {
247	247	console.error('피드백 확인 실패: ', error);
...	...	@@ -296,6 +296,19 @@
296	296
297	297	client.activate();
298	298	},
	299	+ loadFeedbackSummary(){
	300	+ findFeedbackSummary({
	301	+ memberId: this.getMemId
	302	+ })
	303	+ .then(response => {
	304	+ const summary = response.data.result;
	305	+
	306	+ this.feedbackSummary.total = summary.totalCount;
	307	+ this.feedbackSummary.unread = summary.uncheckedCount;
	308	+ this.feedbackSummary.read = summary.checkedCount;
	309	+ })
	310	+ .catch(error => {console.error('피드백 요약 조회 실패: ', error);})
	311	+ },
299	312	},
300	313	watch: {},
301	314	computed: {
...	...	@@ -309,6 +322,7 @@
309	322	created() {},
310	323	mounted() {
311	324	this.loadFeedbacks();
	325	+ this.loadFeedbackSummary();
312	326	},
313	327	beforeUnmount() {},
314	328	};

...	...	@@ -550,6 +550,7 @@
550	550	mounted() {
551	551	const projectId = this.$route.query.projectId;
552	552	if(projectId) {
	553	+ console.log("모델링 페이지 - 프로젝트 아이디: " + projectId);
553	554	this.loadProjectData(projectId);
554	555	}
555	556	},

...	...	@@ -15,12 +15,12 @@
15	15	<p>최신 디지털 자산</p>
16	16	</div>
17	17	<ul class="layout center gap30">
18		- <li v-for="item in assets" :key="item.id" class="box-item">
	18	+ <li v-for="project in projects" :key="project.id" class="box-item" @click="goToModelingUpdate(project)">
19	19	<div class="layout center space-between mb10">
20		- <div class="box-title" >{{ item.name }}</div>
21		- <div class="date" >{{ item.date }}</div>
	20	+ <div class="box-title" >{{ project.name }}</div>
	21	+ <div class="date" >{{ project.date }}</div>
22	22	</div>
23		- <img :src="item.img" alt="자산 이미지" >
	23	+ <img :src="project.img" alt="자산 이미지" >
24	24	</li>
25	25	</ul>
26	26	</div>
...	...	@@ -30,10 +30,10 @@
30	30	<p>피드백 알림</p>
31	31	</div>
32	32	<ul class="box-item">
33		- <li class="alram-item" v-for="item in alarms" :key="item.id">
	33	+ <li class="alram-item" v-for="project in alarms" :key="project.groupId" @click="goToFeedback">
34	34	<div class="layout center gap10">
35	35	<img src="../../../resources/img/content/ico_alram.svg" alt="">
36		- <p><span>프로젝트{{ item.project }}</span>에 피드백 <span>{{ item.count }}건</span>이 입력되었습니다.</p>
	36	+ <p><span>{{ project.name }}</span>에 피드백 <span>{{ project.count }}건</span>이 입력되었습니다.</p>
37	37	</div>
38	38	</li>
39	39	</ul>
...	...	@@ -63,21 +63,22 @@
63	63	import 'dayjs/locale/ko'; // 한국어 locale 불러오기
64	64	import { findAllLogsProc } from '../../../resources/api/main';
65	65	import { findAllProjectsProc } from '../../../resources/api/asset';
	66	+import { findUncheckedFeedbacks } from '../../../resources/api/feedback';
66	67
67	68	export default {
68	69	data() {
69	70	return {
70		- assets: [
	71	+ projects: [
71	72	// { id: 1, name: '디지털 자산 A', date: '2024-06-01', img: require('../../../resources/img/content/sample1.png') },
72	73	// { id: 2, name: '디지털 자산 B', date: '2024-06-10', img: require('../../../resources/img/content/sample2.png') },
73	74	// { id: 3, name: '디지털 자산 C', date: '2024-06-15', img: require('../../../resources/img/content/sample3.png') }
74	75	],
75	76	alarms: [
76		- { id: 1, project: 'A', count: 2 },
77		- { id: 2, project: 'B', count: 1 },
78		- { id: 3, project: 'C', count: 5 },
79		- { id: 4, project: 'D', count: 3 },
80		- { id: 5, project: 'F', count: 7 }
	77	+ // { id: 1, project: 'A', count: 2 },
	78	+ // { id: 2, project: 'B', count: 1 },
	79	+ // { id: 3, project: 'C', count: 5 },
	80	+ // { id: 4, project: 'D', count: 3 },
	81	+ // { id: 5, project: 'F', count: 7 }
81	82	],
82	83	activityLogs: [
83	84	// { id: 1, project: '프로젝트A', time: '어제 14:30' },
...	...	@@ -116,7 +117,7 @@
116	117	.then(response => {
117	118	const projectList = response.data.result.projects;
118	119
119		- this.assets = projectList.map(project => ({
	120	+ this.projects = projectList.map(project => ({
120	121	id: project.projectId,
121	122	groupId: project.projectGroupId,
122	123	isMain: project.isMain,
...	...	@@ -130,6 +131,27 @@
130	131	},
131	132	goToModelingCreate() {
132	133	this.$router.push('/modeling.page');
	134	+ },
	135	+ goToModelingUpdate(project) {
	136	+ this.$router.push({ name: 'Modeling', query: {projectId: project.id}});
	137	+ },
	138	+ goToFeedback() {
	139	+ this.$router.push('/feedback.page');
	140	+ },
	141	+ loadFeedbackAlarms() {
	142	+ findUncheckedFeedbacks({
	143	+ memberId: this.getMemId
	144	+ })
	145	+ .then(response => {
	146	+ const alarms = response.data.result;
	147	+
	148	+ this.alarms = alarms.map(alarm => ({
	149	+ groupId: alarm.projectGroupId,
	150	+ name: alarm.projectName,
	151	+ count: alarm.unCheckedFeedbackCnt
	152	+ }));
	153	+ })
	154	+ .catch(error => {console.error('미확인 피드백 조회 실패: ', error);})
133	155	},
134	156	},
135	157	watch: {},
...	...	@@ -146,6 +168,7 @@
146	168	console.log("사용자 아이디: " + this.getMemId + " 사용자 이름: " + this.getMemNm + " 사용자 로그인 아이디: " + this.getMemLoginId);
147	169	this.loadLogs();
148	170	this.loadMainProjects();
	171	+ this.loadFeedbackAlarms();
149	172	},
150	173	beforeUnmount() {},
151	174	};

Delete comment