Commit @a6b994d054bce56376e70c14654db48751e968d3

박현정 07-24

250724 박현정 피드백 채팅 조회

@a6b994d054bce56376e70c14654db48751e968d3

af13acf

a6b994d

client/resources/api/feedback.js

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

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

...	...	@@ -9,3 +9,8 @@
9	9	export const checkFeedbackProc = (feedbackId, data) => {
10	10	return apiClient.post(`/feedback/${feedbackId}/checkFeedback.json`, data);
11	11	}
	12	+
	13	+// 피드백 채팅 조회 기능
	14	+export const findAllChatMsgsProc = (chatRoomId, data) => {
	15	+ return apiClient.post(`/chat/${chatRoomId}/findAllChatMsgs.json`, data);
	16	+} (파일 끝에 줄바꿈 문자 없음)

af13acf

a6b994d

client/views/pages/subPage/FeedBack.vue

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

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


                     </div>
                     <div class="btn-group" v-if="feedback.status === 'unread'">
                         <button class="btn sm purple" @click="markAsRead(feedback.id)">확인</button>
-                        <button class="btn sm black" @click="replyTo(feedback)">회신</button>
+                        <!-- <button class="btn sm black" @click="replyTo(feedback)">회신</button> -->
+                        <button class="btn sm black" @click="loadFeedbackChatList(feedback.chatRoomId, feedback)">회신</button>
                     </div>
                     <div class="btn-group" v-else>
-                        <button class="btn sm primary" @click="replyTo(feedback)">확인됨</button>
+                        <!-- <button class="btn sm primary" @click="replyTo(feedback)">확인됨</button> -->
+                        <button class="btn sm primary" @click="loadFeedbackChatList(feedback.chatRoomId, feedback)">확인됨</button>
                     </div>
                 </div>
             </div>

                     <h3 class="project-name">{{ selectedFeedback.project }}</h3><span style="font-weight: 700;"> feedback message</span>
                 </div>
                 <ul >
-                    <li v-for="feedback in feedbacDetailkList" :key="feedback.id">
+                    <li v-for="chat in feedbackChatList" :key="chat.id">
                         <div class="layout center space-between">
-                            <strong><img src="../../../resources/img/content/ico_feeduser.svg" alt="" style="vertical-align: middle;"> {{ feedback.name }}</strong> 
+                            <strong><img src="../../../resources/img/content/ico_feeduser.svg" alt="" style="vertical-align: middle;"> {{ chat.user }}</strong> 
                            <div class="right-content">
-                             <p>{{ feedback.content }}</p>
+                             <p>{{ chat.content }}</p>
                            </div>
                         </div>
-                       <p style="text-align: right;">  <span>{{ feedback.date }} </span><span><img src="../../../resources/img/content/ico_clock.svg" alt="" style="vertical-align: middle;"> {{ feedback.time }}</span></p>
+                       <p style="text-align: right;">  <span>{{ chat.date }} </span><span><img src="../../../resources/img/content/ico_clock.svg" alt="" style="vertical-align: middle;"> {{ chat.time }}</span></p>
                     </li>
                 </ul>
                 <div style="position: relative;">

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

             },
             selectedFeedback: null,     // 회신용
             replyingFeedbackId: null,   // 회신 폼 표시용
-            feedbacDetailkList: [
-                {
-                    id: 1,
-                    name: '홍길동',
-                    content: '교육 내용이 이해하기 쉬웠습니다.',
-                    date: '2025-06-24',
-                    time: '14:30',
-                    status: '미확인'
-                },
-                {
-                    id: 2,
-                    name: '김영희',
-                    content: '실습 예제가 더 많았으면 좋겠습니다.',
-                    date: '2025-06-23',
-                    time: '10:15',
-                    status: '확인'
-                },
-                {
-                    id: 3,
-                    name: '박철수',
-                    content: '강사님 설명이 친절해서 좋았습니다.',
-                    date: '2025-06-22',
-                    time: '16:45',
-                    status: '회신완료'
-                },
-                {
-                    id: 4,
-                    name: '이민정',
-                    content: '온라인 자료 접근이 어려웠어요.',
-                    date: '2025-06-21',
-                    time: '09:05',
-                    status: '미확인'
-                },
-                {
-                    id: 5,
-                    name: '최현우',
-                    content: '교육 시간이 너무 짧은 것 같아요.',
-                    date: '2025-06-20',
-                    time: '13:20',
-                    status: '확인'
-                }
+            feedbackChatList: [
+                // {
+                //     id: 1,
+                //     name: '홍길동',
+                //     content: '교육 내용이 이해하기 쉬웠습니다.',
+                //     date: '2025-06-24',
+                //     time: '14:30',
+                //     status: '미확인'
+                // },
+                // {
+                //     id: 2,
+                //     name: '김영희',
+                //     content: '실습 예제가 더 많았으면 좋겠습니다.',
+                //     date: '2025-06-23',
+                //     time: '10:15',
+                //     status: '확인'
+                // },
+                // {
+                //     id: 3,
+                //     name: '박철수',
+                //     content: '강사님 설명이 친절해서 좋았습니다.',
+                //     date: '2025-06-22',
+                //     time: '16:45',
+                //     status: '회신완료'
+                // },
+                // {
+                //     id: 4,
+                //     name: '이민정',
+                //     content: '온라인 자료 접근이 어려웠어요.',
+                //     date: '2025-06-21',
+                //     time: '09:05',
+                //     status: '미확인'
+                // },
+                // {
+                //     id: 5,
+                //     name: '최현우',
+                //     content: '교육 시간이 너무 짧은 것 같아요.',
+                //     date: '2025-06-20',
+                //     time: '13:20',
+                //     status: '확인'
+                // }
                 ],
 
             replyText: '',

                         id: feedback.feedbackId,
                         projectGroupId: feedback.projectGroupId,
                         project: feedback.projectName,
-                        message: `"${feedback.feedbackContent}"`, // 큰따옴표로 감싸기
-                        time: dayjs(feedback.createdAt).fromNow(), //createdAt 시간 계산
+                        message: `"${feedback.feedbackContent}"`,
+                        time: dayjs(feedback.createdAt).fromNow(),
                         user: feedback.memberName + '님',
                         chatRoomId: feedback.chatRoomId,
                         status: feedback.isChecked === 'Y' ? 'read' : 'unread' // 'unread' | 'read' | 'confirmed'

                 .catch(error => {
                     console.error('피드백 확인 실패: ', error);
                 })
-        }
+        },
+        loadFeedbackChatList(chatRoomId, feedback) {
+            const data = {
+                memberId : this.getMemId
+            };
+
+            findAllChatMsgsProc(chatRoomId, data)
+                .then(response => {
+                    const chatList = response.data.result;
+
+                    this.feedbackChatList = chatList.map(chat => ({
+                        id: chat.chatMsgId,
+                        user: chat.senderName,
+                        content: chat.msgContent,
+                        time: dayjs(chat.createdAt).fromNow()
+                    }));
+
+                    this.replyTo(feedback);
+                })
+                .catch(error => {
+                    console.error('채팅 조회 실패: ', error);
+                })
+        },
     },
     watch: {},
     computed: {

Add a comment

Open 0
Closed 0

List

...	...	@@ -28,10 +28,12 @@
28	28	</div>
29	29	<div class="btn-group" v-if="feedback.status === 'unread'">
30	30	<button class="btn sm purple" @click="markAsRead(feedback.id)">확인</button>
31		- <button class="btn sm black" @click="replyTo(feedback)">회신</button>
	31	+ <!-- <button class="btn sm black" @click="replyTo(feedback)">회신</button> -->
	32	+ <button class="btn sm black" @click="loadFeedbackChatList(feedback.chatRoomId, feedback)">회신</button>
32	33	</div>
33	34	<div class="btn-group" v-else>
34		- <button class="btn sm primary" @click="replyTo(feedback)">확인됨</button>
	35	+ <!-- <button class="btn sm primary" @click="replyTo(feedback)">확인됨</button> -->
	36	+ <button class="btn sm primary" @click="loadFeedbackChatList(feedback.chatRoomId, feedback)">확인됨</button>
35	37	</div>
36	38	</div>
37	39	</div>
...	...	@@ -47,14 +49,14 @@
47	49	<h3 class="project-name">{{ selectedFeedback.project }}</h3><span style="font-weight: 700;"> feedback message</span>
48	50	</div>
49	51	<ul >
50		- <li v-for="feedback in feedbacDetailkList" :key="feedback.id">
	52	+ <li v-for="chat in feedbackChatList" :key="chat.id">
51	53	<div class="layout center space-between">
52		- <strong><img src="../../../resources/img/content/ico_feeduser.svg" alt="" style="vertical-align: middle;"> {{ feedback.name }}</strong>
	54	+ <strong><img src="../../../resources/img/content/ico_feeduser.svg" alt="" style="vertical-align: middle;"> {{ chat.user }}</strong>
53	55	<div class="right-content">
54		- <p>{{ feedback.content }}</p>
	56	+ <p>{{ chat.content }}</p>
55	57	</div>
56	58	</div>
57		- <p style="text-align: right;"> <span>{{ feedback.date }} </span><span><img src="../../../resources/img/content/ico_clock.svg" alt="" style="vertical-align: middle;"> {{ feedback.time }}</span></p>
	59	+ <p style="text-align: right;"> <span>{{ chat.date }} </span><span><img src="../../../resources/img/content/ico_clock.svg" alt="" style="vertical-align: middle;"> {{ chat.time }}</span></p>
58	60	</li>
59	61	</ul>
60	62	<div style="position: relative;">
...	...	@@ -73,10 +75,13 @@
73	75
74	76	<script>
75	77	import { mapGetters } from 'vuex';
76		-import { checkFeedbackProc, findAllFeedbacksProc } from '../../../resources/api/feedback';
	78	+import { checkFeedbackProc, findAllChatMsgsProc, findAllFeedbacksProc } from '../../../resources/api/feedback';
77	79	import dayjs from 'dayjs';
78	80	import relativeTime from 'dayjs/plugin/relativeTime';
	81	+import 'dayjs/locale/ko'; // 한국어 locale 불러오기
	82	+
79	83	dayjs.extend(relativeTime);
	84	+dayjs.locale('ko');
80	85
81	86	export default {
82	87	data() {
...	...	@@ -114,47 +119,47 @@
114	119	},
115	120	selectedFeedback: null, // 회신용
116	121	replyingFeedbackId: null, // 회신 폼 표시용
117		- feedbacDetailkList: [
118		- {
119		- id: 1,
120		- name: '홍길동',
121		- content: '교육 내용이 이해하기 쉬웠습니다.',
122		- date: '2025-06-24',
123		- time: '14:30',
124		- status: '미확인'
125		- },
126		- {
127		- id: 2,
128		- name: '김영희',
129		- content: '실습 예제가 더 많았으면 좋겠습니다.',
130		- date: '2025-06-23',
131		- time: '10:15',
132		- status: '확인'
133		- },
134		- {
135		- id: 3,
136		- name: '박철수',
137		- content: '강사님 설명이 친절해서 좋았습니다.',
138		- date: '2025-06-22',
139		- time: '16:45',
140		- status: '회신완료'
141		- },
142		- {
143		- id: 4,
144		- name: '이민정',
145		- content: '온라인 자료 접근이 어려웠어요.',
146		- date: '2025-06-21',
147		- time: '09:05',
148		- status: '미확인'
149		- },
150		- {
151		- id: 5,
152		- name: '최현우',
153		- content: '교육 시간이 너무 짧은 것 같아요.',
154		- date: '2025-06-20',
155		- time: '13:20',
156		- status: '확인'
157		- }
	122	+ feedbackChatList: [
	123	+ // {
	124	+ // id: 1,
	125	+ // name: '홍길동',
	126	+ // content: '교육 내용이 이해하기 쉬웠습니다.',
	127	+ // date: '2025-06-24',
	128	+ // time: '14:30',
	129	+ // status: '미확인'
	130	+ // },
	131	+ // {
	132	+ // id: 2,
	133	+ // name: '김영희',
	134	+ // content: '실습 예제가 더 많았으면 좋겠습니다.',
	135	+ // date: '2025-06-23',
	136	+ // time: '10:15',
	137	+ // status: '확인'
	138	+ // },
	139	+ // {
	140	+ // id: 3,
	141	+ // name: '박철수',
	142	+ // content: '강사님 설명이 친절해서 좋았습니다.',
	143	+ // date: '2025-06-22',
	144	+ // time: '16:45',
	145	+ // status: '회신완료'
	146	+ // },
	147	+ // {
	148	+ // id: 4,
	149	+ // name: '이민정',
	150	+ // content: '온라인 자료 접근이 어려웠어요.',
	151	+ // date: '2025-06-21',
	152	+ // time: '09:05',
	153	+ // status: '미확인'
	154	+ // },
	155	+ // {
	156	+ // id: 5,
	157	+ // name: '최현우',
	158	+ // content: '교육 시간이 너무 짧은 것 같아요.',
	159	+ // date: '2025-06-20',
	160	+ // time: '13:20',
	161	+ // status: '확인'
	162	+ // }
158	163	],
159	164
160	165	replyText: '',
...	...	@@ -202,8 +207,8 @@
202	207	id: feedback.feedbackId,
203	208	projectGroupId: feedback.projectGroupId,
204	209	project: feedback.projectName,
205		- message: `"${feedback.feedbackContent}"`, // 큰따옴표로 감싸기
206		- time: dayjs(feedback.createdAt).fromNow(), //createdAt 시간 계산
	210	+ message: `"${feedback.feedbackContent}"`,
	211	+ time: dayjs(feedback.createdAt).fromNow(),
207	212	user: feedback.memberName + '님',
208	213	chatRoomId: feedback.chatRoomId,
209	214	status: feedback.isChecked === 'Y' ? 'read' : 'unread' // 'unread' \| 'read' \| 'confirmed'
...	...	@@ -223,7 +228,29 @@
223	228	.catch(error => {
224	229	console.error('피드백 확인 실패: ', error);
225	230	})
226		- }
	231	+ },
	232	+ loadFeedbackChatList(chatRoomId, feedback) {
	233	+ const data = {
	234	+ memberId : this.getMemId
	235	+ };
	236	+
	237	+ findAllChatMsgsProc(chatRoomId, data)
	238	+ .then(response => {
	239	+ const chatList = response.data.result;
	240	+
	241	+ this.feedbackChatList = chatList.map(chat => ({
	242	+ id: chat.chatMsgId,
	243	+ user: chat.senderName,
	244	+ content: chat.msgContent,
	245	+ time: dayjs(chat.createdAt).fromNow()
	246	+ }));
	247	+
	248	+ this.replyTo(feedback);
	249	+ })
	250	+ .catch(error => {
	251	+ console.error('채팅 조회 실패: ', error);
	252	+ })
	253	+ },
227	254	},
228	255	watch: {},
229	256	computed: {

Delete comment