File name
Commit message
Commit date
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="main myplan">
<div class="yellow-box mt30">
<div class="title-box flex justify-between align-center">
<div class="flex justify-between align-center" style="gap: 20px;">
<p class="title">단원</p>
<div class="row-bd"></div>
<div>
<p class="title mr40 mb10">{{ unitData.unit_nm || '(단원 이름 데이터 없음)' }}</p>
<p class="subtitle">my name is dd</p>
</div>
</div>
</div>
</div>
<div class="title-box flex justify-between mb20 mt30">
<p class="title">오답노트</p>
</div>
<div class="wrap" style="border-radius: 0;">
<div class="table-wrap">
<span class="flex align-center title2 gray mb20">
이 단원에서 틀린 문제가 총 <p class="title1 black"> {{ wrongAnswerNotes.length }} </p> 개 있습니다!
</span>
<table>
<colgroup>
<col style="width: 10%;">
<col style="width: 70%;">
<col style="width: 15%;">
</colgroup>
<tr v-for="note in wrongAnswerNotes" :key="note.prblmLogId">
<td><img src="../../../resources/img/img214_19s.png" alt=""></td>
<td class="text-lf">
<p class="title1">{{ note.evalType || '(평가 유형 데이터 없음)' }}</p>
<p class="title2">{{ note.prblmExpln || '(기본 문제 설명 데이터 없음)' }}</p>
</td>
<td>
<button type="button" title="" class="new-btn" @click="viewDetail(note)">
View Detail
</button>
</td>
</tr>
</table>
<!-- <div class="flex justify-end">
<button type="button" title="선택하기" class="yellow-btn mt30">
선택하기
</button>
</div> -->
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
currentStdId: "1", // 임시 학생 아이디
currentUnitId: "1", // 임시 유닛 아이디
wrongAnswerNotes: [], // 오답 노트 목록 데이터
unitData: {}, // 단원 정보 데이터
problemType: null, // 링크될 문제 유형 페이지 이름
}
},
methods: {
pageSetting() {
this.currentStdId = this.$store.getters.getUserInfo.userId;
this.fetchWrongAnswerNotes();
},
// 오답노트 상세 보기 버튼 클릭
viewDetail(prblm) {
console.log('링크될 문제 ID와 문제 타입 ID:', prblm.prblmId, prblm.prblmTypeId);
this.handleProblemDetail(prblm);
this.goToPage(this.problemType);
},
// 단원 정보를 불러오는 API 호출
fetchUnitDetail() {
axios.post('/unit/unitDetail.json', {
unitId: this.currentUnitId
})
.then(response => {
console.log(response.data[0]);
if (response.data.length > 0) {
this.unitData = response.data[0];
}
})
.catch(error => {
console.error('단원 정보를 불러오는 중 오류 발생:', error);
})
},
// 오답노트 목록을 가져오는 API 호출
fetchWrongAnswerNotes() {
axios.post('/problemLog/getPreviewNoteList.json', {
stdId: this.currentStdId,
unitId: this.currentUnitId
})
.then(response => {
console.log(response.data);
this.wrongAnswerNotes = response.data;
})
.catch(error => {
console.error('오답노트를 불러오는 중 오류 발생:', error);
});
},
// 문제 유형에 따른 라우팅 메서드
handleProblemDetail(item) {
// 세션 저장소에 문제 ID 저장
sessionStorage.setItem("prblmId", JSON.stringify(item.prblmId));
if (item.prblmTypeId === "11") {
this.problemType = "Chapter3_9";
} else if (item.prblmTypeId === "12") {
this.problemType = "Chapter3_4";
} else if (item.prblmTypeId === "4") {
this.problemType = "Chapter3_3";
} else if (item.prblmTypeId === "3") {
this.problemType = "Chapter3_7";
} else if (item.prblmTypeId === "10") {
this.problemType = "Chapter3_2";
} else if (item.prblmTypeId === "14") {
this.problemType = "Chapter3_12";
} else {
this.problemType = "Chapter3";
}
},
goToPage(page) {
this.$router.push({ name: page });
}
},
watch: {
},
computed: {
},
components: {
},
mounted() {
console.log('PreviewNote mounted');
this.pageSetting();
this.fetchUnitDetail();
}
}
</script>
<style scoped>
.textbox {
height: 60px;
}
.textbox p {
font-size: 28px;
font-weight: bold;
line-height: 65px;
}
.dropGroup button {
position: relative;
}
.dropGroup button p {
font-size: 48px;
}
.dragGroup button p {
font-size: 48px;
}
</style>