Commit @af13acf77da05e4ce270ce25cddddf2453ee130a

박현정 07-23

250723 박현정 피드백 목록 조회 및 확인 기능 추가

@af13acf77da05e4ce270ce25cddddf2453ee130a

af13acf

client/resources/api/feedback.js (added)

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

...	...	@@ -0,0 +1,11 @@
	1	+import apiClient from "./index";
	2	+
	3	+// 피드백 목록 조회 기능
	4	+export const findAllFeedbacksProc = (data) => {
	5	+ return apiClient.post('/feedback/findAllFeedbacks.json', data);
	6	+}
	7	+
	8	+// 피드백 확인 기능
	9	+export const checkFeedbackProc = (feedbackId, data) => {
	10	+ return apiClient.post(`/feedback/${feedbackId}/checkFeedback.json`, data);
	11	+}

bf3b6e1

af13acf

client/views/pages/subPage/FeedBack.vue

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

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


                         <button class="btn sm black" @click="replyTo(feedback)">회신</button>
                     </div>
                     <div class="btn-group" v-else>
-                        <button class="btn sm primary" @click="markAsRead(feedback.id)">확인됨</button>
+                        <button class="btn sm primary" @click="replyTo(feedback)">확인됨</button>
                     </div>
                 </div>
             </div>

 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+import { checkFeedbackProc, findAllFeedbacksProc } from '../../../resources/api/feedback';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
 
 export default {
     data() {
         return {
             feedbackList: [
-                {
-                    id: 1,
-                    project: '프로젝트 C',
-                    message: '“크기를 두 배 증가시켜 주세요..”',
-                    time: '5분 전',
-                    user: '김철수님',
-                    status: 'unread' // 'unread' | 'read' | 'confirmed'
-                },
-                {
-                    id: 2,
-                    project: '프로젝트 B',
-                    message: '“플라스틱 재질을 다음과 같이..”',
-                    time: '30분 전',
-                    user: '이영희님',
-                    status: 'unread'
-                },
-                {
-                    id: 3,
-                    project: '프로젝트 B',
-                    message: '“좀 더 밝은 색으로 바꿔주세요..”',
-                    time: '어제',
-                    user: '김철수님',
-                    status: 'confirmed'
-                }
+                // {
+                //     id: 1,
+                //     project: '프로젝트 C',
+                //     message: '“크기를 두 배 증가시켜 주세요..”',
+                //     time: '5분 전',
+                //     user: '김철수님',
+                //     status: 'unread' // 'unread' | 'read' | 'confirmed'
+                // },
+                // {
+                //     id: 2,
+                //     project: '프로젝트 B',
+                //     message: '“플라스틱 재질을 다음과 같이..”',
+                //     time: '30분 전',
+                //     user: '이영희님',
+                //     status: 'unread'
+                // },
+                // {
+                //     id: 3,
+                //     project: '프로젝트 B',
+                //     message: '“좀 더 밝은 색으로 바꿔주세요..”',
+                //     time: '어제',
+                //     user: '김철수님',
+                //     status: 'confirmed'
+                // }
             ],
             feedbackSummary: {
                 total: 3,

         };
     },
     methods: {
-        async markAsRead(id) {
-            // 서버에 상태값 전달
-            try {
-            await axios.post(`/api/feedback/${id}/mark-read`);
-            const item = this.feedbackList.find(f => f.id === id);
-            if (item) item.status = 'read';
-            } catch (err) {
-            console.error('확인 처리 실패:', err);
-            }
-        },
+        // async markAsRead(id) {
+        //     // 서버에 상태값 전달
+        //     try {
+        //     await axios.post(`/api/feedback/${id}/checkFeedback.json`);
+        //     const item = this.feedbackList.find(f => f.id === id);
+        //     if (item) item.status = 'read';
+        //     } catch (err) {
+        //     console.error('확인 처리 실패:', err);
+        //     }
+        // },
         async submitReply() {
             if (!this.replyText.trim()) return;
             try {

             this.selectedFeedback = feedback;
             this.replyingFeedbackId = feedback.id;
         },
+        loadFeedbacks() {
+            findAllFeedbacksProc({
+                memberId: this.getMemId
+            })
+                .then(response => {
+                    const feedbackList = response.data.result;
+
+                    this.feedbackList = feedbackList.map(feedback => ({
+                        id: feedback.feedbackId,
+                        projectGroupId: feedback.projectGroupId,
+                        project: feedback.projectName,
+                        message: `"${feedback.feedbackContent}"`, // 큰따옴표로 감싸기
+                        time: dayjs(feedback.createdAt).fromNow(), //createdAt 시간 계산
+                        user: feedback.memberName + '님',
+                        chatRoomId: feedback.chatRoomId,
+                        status: feedback.isChecked === 'Y' ? 'read' : 'unread' // 'unread' | 'read' | 'confirmed'
+                    }));
+                })
+                .catch(error => {console.error('피드백 목록 조회 실패: ', error);})
+        },
+        markAsRead(feedbackId) {
+            const data = {
+                memberId : this.getMemId
+            };
+            checkFeedbackProc(feedbackId, data)
+                .then(response => {
+                    this.loadFeedbacks();
+                    console.log('피드백 확인 완료');
+                })
+                .catch(error => {
+                    console.error('피드백 확인 실패: ', error);
+                })
+        }
     },
     watch: {},
-    computed: {},
+    computed: {
+    ...mapGetters([
+      'getMemId',
+      'getMemNm',
+      'getMemLoginId'
+    ])
+    },
     components: {},
     created() {},
-    mounted() {},
+    mounted() {
+        this.loadFeedbacks();
+    },
     beforeUnmount() {},
 };
 

bf3b6e1

af13acf

package-lock.json

--- package-lock.json

+++ package-lock.json


         "axios": "^1.10.0",
         "babel-loader": "8.2.5",
         "css-loader": "6.7.1",
+        "dayjs": "^1.11.13",
         "express": "4.18.1",
         "express-http-proxy": "^2.1.1",
         "file-loader": "6.2.0",

       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",

bf3b6e1

af13acf

package.json

--- package.json

+++ package.json

...	...	@@ -5,6 +5,7 @@
5	5	"axios": "^1.10.0",
6	6	"babel-loader": "8.2.5",
7	7	"css-loader": "6.7.1",
	8	+ "dayjs": "^1.11.13",
8	9	"express": "4.18.1",
9	10	"express-http-proxy": "^2.1.1",
10	11	"file-loader": "6.2.0",

Add a comment

Open 0
Closed 0

List

...	...	@@ -31,7 +31,7 @@
31	31	<button class="btn sm black" @click="replyTo(feedback)">회신</button>
32	32	</div>
33	33	<div class="btn-group" v-else>
34		- <button class="btn sm primary" @click="markAsRead(feedback.id)">확인됨</button>
	34	+ <button class="btn sm primary" @click="replyTo(feedback)">확인됨</button>
35	35	</div>
36	36	</div>
37	37	</div>
...	...	@@ -72,35 +72,40 @@
72	72	</template>
73	73
74	74	<script>
	75	+import { mapGetters } from 'vuex';
	76	+import { checkFeedbackProc, findAllFeedbacksProc } from '../../../resources/api/feedback';
	77	+import dayjs from 'dayjs';
	78	+import relativeTime from 'dayjs/plugin/relativeTime';
	79	+dayjs.extend(relativeTime);
75	80
76	81	export default {
77	82	data() {
78	83	return {
79	84	feedbackList: [
80		- {
81		- id: 1,
82		- project: '프로젝트 C',
83		- message: '“크기를 두 배 증가시켜 주세요..”',
84		- time: '5분 전',
85		- user: '김철수님',
86		- status: 'unread' // 'unread' \| 'read' \| 'confirmed'
87		- },
88		- {
89		- id: 2,
90		- project: '프로젝트 B',
91		- message: '“플라스틱 재질을 다음과 같이..”',
92		- time: '30분 전',
93		- user: '이영희님',
94		- status: 'unread'
95		- },
96		- {
97		- id: 3,
98		- project: '프로젝트 B',
99		- message: '“좀 더 밝은 색으로 바꿔주세요..”',
100		- time: '어제',
101		- user: '김철수님',
102		- status: 'confirmed'
103		- }
	85	+ // {
	86	+ // id: 1,
	87	+ // project: '프로젝트 C',
	88	+ // message: '“크기를 두 배 증가시켜 주세요..”',
	89	+ // time: '5분 전',
	90	+ // user: '김철수님',
	91	+ // status: 'unread' // 'unread' \| 'read' \| 'confirmed'
	92	+ // },
	93	+ // {
	94	+ // id: 2,
	95	+ // project: '프로젝트 B',
	96	+ // message: '“플라스틱 재질을 다음과 같이..”',
	97	+ // time: '30분 전',
	98	+ // user: '이영희님',
	99	+ // status: 'unread'
	100	+ // },
	101	+ // {
	102	+ // id: 3,
	103	+ // project: '프로젝트 B',
	104	+ // message: '“좀 더 밝은 색으로 바꿔주세요..”',
	105	+ // time: '어제',
	106	+ // user: '김철수님',
	107	+ // status: 'confirmed'
	108	+ // }
104	109	],
105	110	feedbackSummary: {
106	111	total: 3,
...	...	@@ -157,16 +162,16 @@
157	162	};
158	163	},
159	164	methods: {
160		- async markAsRead(id) {
161		- // 서버에 상태값 전달
162		- try {
163		- await axios.post(`/api/feedback/${id}/mark-read`);
164		- const item = this.feedbackList.find(f => f.id === id);
165		- if (item) item.status = 'read';
166		- } catch (err) {
167		- console.error('확인 처리 실패:', err);
168		- }
169		- },
	165	+ // async markAsRead(id) {
	166	+ // // 서버에 상태값 전달
	167	+ // try {
	168	+ // await axios.post(`/api/feedback/${id}/checkFeedback.json`);
	169	+ // const item = this.feedbackList.find(f => f.id === id);
	170	+ // if (item) item.status = 'read';
	171	+ // } catch (err) {
	172	+ // console.error('확인 처리 실패:', err);
	173	+ // }
	174	+ // },
170	175	async submitReply() {
171	176	if (!this.replyText.trim()) return;
172	177	try {
...	...	@@ -186,12 +191,53 @@
186	191	this.selectedFeedback = feedback;
187	192	this.replyingFeedbackId = feedback.id;
188	193	},
	194	+ loadFeedbacks() {
	195	+ findAllFeedbacksProc({
	196	+ memberId: this.getMemId
	197	+ })
	198	+ .then(response => {
	199	+ const feedbackList = response.data.result;
	200	+
	201	+ this.feedbackList = feedbackList.map(feedback => ({
	202	+ id: feedback.feedbackId,
	203	+ projectGroupId: feedback.projectGroupId,
	204	+ project: feedback.projectName,
	205	+ message: `"${feedback.feedbackContent}"`, // 큰따옴표로 감싸기
	206	+ time: dayjs(feedback.createdAt).fromNow(), //createdAt 시간 계산
	207	+ user: feedback.memberName + '님',
	208	+ chatRoomId: feedback.chatRoomId,
	209	+ status: feedback.isChecked === 'Y' ? 'read' : 'unread' // 'unread' \| 'read' \| 'confirmed'
	210	+ }));
	211	+ })
	212	+ .catch(error => {console.error('피드백 목록 조회 실패: ', error);})
	213	+ },
	214	+ markAsRead(feedbackId) {
	215	+ const data = {
	216	+ memberId : this.getMemId
	217	+ };
	218	+ checkFeedbackProc(feedbackId, data)
	219	+ .then(response => {
	220	+ this.loadFeedbacks();
	221	+ console.log('피드백 확인 완료');
	222	+ })
	223	+ .catch(error => {
	224	+ console.error('피드백 확인 실패: ', error);
	225	+ })
	226	+ }
189	227	},
190	228	watch: {},
191		- computed: {},
	229	+ computed: {
	230	+ ...mapGetters([
	231	+ 'getMemId',
	232	+ 'getMemNm',
	233	+ 'getMemLoginId'
	234	+ ])
	235	+ },
192	236	components: {},
193	237	created() {},
194		- mounted() {},
	238	+ mounted() {
	239	+ this.loadFeedbacks();
	240	+ },
195	241	beforeUnmount() {},
196	242	};
197	243

...	...	@@ -10,6 +10,7 @@
10	10	"axios": "^1.10.0",
11	11	"babel-loader": "8.2.5",
12	12	"css-loader": "6.7.1",
	13	+ "dayjs": "^1.11.13",
13	14	"express": "4.18.1",
14	15	"express-http-proxy": "^2.1.1",
15	16	"file-loader": "6.2.0",
...	...	@@ -1697,6 +1698,12 @@
1697	1698	"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
1698	1699	"license": "MIT"
1699	1700	},
	1701	+ "node_modules/dayjs": {
	1702	+ "version": "1.11.13",
	1703	+ "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
	1704	+ "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
	1705	+ "license": "MIT"
	1706	+ },
1700	1707	"node_modules/debug": {
1701	1708	"version": "4.4.0",
1702	1709	"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",

Delete comment