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
2024-11-19
<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>