File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="w_100 h_100 layout sterech gap30">
<div class="left-zone" style="background-color: #d5dce7;">
<div class="layout center space-between">
<img src="../../../resources/img/content/feedback.svg" alt="">
<div>
<p class="feedback-title">Feedback</p>
<select name="sort" id="sort" class="form-select sm" style="border: none;min-width: 140px;">
<option value="">최근순</option>
<option value="">최근순</option>
</select>
</div>
</div>
<div class="feedback-list">
<div v-for="feedback in feedbackList" :key="feedback.id" class="feedback-item" :class="{ unread: feedback.status === 'unread' }">
<div class="feedback-card">
<h4>
<img src="../../../resources/img/content/ico_confirmed.svg" alt="" v-if="feedback.status === 'confirmed'" style="vertical-align: middle;">
<img src="../../../resources/img/content/ico_unconfirmed.svg" alt="" v-else style="vertical-align: middle;">
<span>{{ feedback.project }}</span>
</h4>
<div class="feedback-message">
<p>{{ feedback.message }}</p>
</div>
<div class="meta">
<span><img src="../../../resources/img/content/ico_clock.svg" alt="" style="vertical-align: middle;"> {{ feedback.time }}</span> | <span><img src="../../../resources/img/content/ico_feeduser.svg" alt="" style="vertical-align: middle;"> {{ feedback.user }}</span>
</div>
</div>
<div class="btn-group">
<button class="btn sm" @click="markAsRead(feedback.id)" v-if="feedback.status === 'unread'">확인</button>
<button class="btn sm" @click="replyTo(feedback)">회신</button>
</div>
</div>
</div>
</div>
<div class="right-zone feedback-detail-zone">
<div class="summary">
<p><span>일주일 간 총 피드백 수 </span> <strong>{{ feedbackSummary.total }}건</strong></p>|
<p><span class="unread">미확인</span> <strong>{{ feedbackSummary.unread }}건</strong></p> |
<p><span class="read">확인</span> <strong>{{ feedbackSummary.read }}건</strong></p>
</div>
<div class="feedback-detail" v-if="selectedFeedback">
<h3>{{ selectedFeedback.project }}</h3>
<p class="origin">{{ selectedFeedback.message }}</p>
<input type="text" class="form-controls sm" v-model="replyText" placeholder="피드백 회신 내용을 작성하세요."></input>
<button @click="submitReply">회신 보내기</button>
</div>
</div>
</div>
</template>
<script>
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'
}
],
feedbackSummary: {
total: 3,
unread: 2,
read: 1
},
selectedFeedback: null, // 회신용
replyingFeedbackId: null, // 회신 폼 표시용
replyText: '',
};
},
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 submitReply() {
if (!this.replyText.trim()) return;
try {
await axios.post(`/api/feedback/${this.replyingFeedbackId}/reply`, {
reply: this.replyText
});
alert('회신이 전송되었습니다.');
this.replyText = '';
this.selectedFeedback = null;
this.replyingFeedbackId = null;
} catch (err) {
console.error('회신 실패:', err);
}
},
replyTo(feedback) {
this.selectedFeedback = feedback;
this.replyingFeedbackId = feedback.id;
},
},
watch: {},
computed: {},
components: {},
created() {},
mounted() {},
beforeUnmount() {},
};
</script>