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="side">
<router-link to="/MyPlan.page">
<div class="logo mb25">
<img src="../../resources/img/logo2.png" alt="" />
</div>
</router-link>
<div class="profile mb30">
<div class="flex align-start">
<img src="../../resources/img/img16_s.png" alt="" />
<div class="ml25">
<p class="name mb10">{{ studentInfo.studentName }}</p>
<p class="mb5">
{{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
{{ studentInfo.className }}
</p>
<!-- <progress-bar :progress="progress"></progress-bar> -->
<span>지금까지 푼 총 문제 수:</span>
<span class="brown ml10">{{ studentInfo.totalProblemsSolved }} 개</span>
</div>
</div>
<hr />
<p class="title2 mb25">최근 학습 히스토리</p>
<ul class="flex justify-between ml30 mb30">
<li
v-for="historyItem in studentInfo.history"
:key="historyItem.unitId"
>
[{{ historyItem.bookName }}] {{ historyItem.unitName }}
</li>
</ul>
</div>
<div class="ask mb30">
<p class="title1 mb15">선생님께 질문 있어요~</p>
<div class="memo mb15">
<textarea
name=""
id=""
placeholder="궁금한 것을 적어보세요."
v-model="studentInfo.studentQuestion"
></textarea>
</div>
<div class="flex justify-end">
<button @click="updateQuestion">질문하기</button>
</div>
</div>
<div class="btn-wrap flex justify-between">
<button class="login-btn" @click="handleClickEvent">
<img src="../../resources/img/btn07_s.png" alt="" />
<p>{{ buttonText }}</p>
</button>
<!-- <button class="login-btn" type="submit">
<img src="../../resources/img/btn07_s.png" alt="" />
<p>오늘 할 다른 공부</p>
</button> -->
</div>
</div>
</template>
<script>
import ProgressBar from "../component/ProgressBar.vue";
import axios from "axios";
export default {
data() {
return {
buttonText: "오답노트",
progress: 20,
studentInfo: {
studentName: "",
institutionName: "",
grade: "",
className: "",
studentQuestion: "",
history: [],
},
userId: "1", // userId 임시 설정
};
},
methods: {
pageSetting() {
this.userId = this.$store.getters.getUserInfo.userId;
console.log("유저 아이디: ", this.userId);
this.fetchStudentInfo();
},
// 학생 정보를 가져오는 메서드
fetchStudentInfo() {
axios
.post("/studentInfo/getInfo.json", { userId: this.userId })
.then((response) => {
console.log(response.data);
this.studentInfo = response.data;
})
.catch((error) => {
console.error("학생 정보 가져오기 실패:", error);
});
},
// 질문 업데이트 메서드
updateQuestion() {
axios
.post("/studentInfo/updateQuestion.json", {
userId: this.userId,
studentQuestion: this.studentInfo.studentQuestion,
})
.then((response) => {
console.log("질문이 성공적으로 업데이트되었습니다.");
alert("질문이 성공적으로 업데이트되었습니다.");
})
.catch((error) => {
console.error("질문 업데이트 실패:", error);
alert("질문 업데이트에 실패했습니다.");
});
},
handleClick() {
this.toggleText();
this.goToPage("PreviewNote");
},
handleClick() {
this.toggleTextAndNavigate();
},
toggleTextAndNavigate() {
if (this.buttonText === "오답노트") {
this.buttonText = "학습 코스";
this.goToPage("PreviewNote");
// 버튼 텍스트가 '학습 코스'일 때 이동할 경로
} else {
this.buttonText = "오답노트";
this.goToPage("Dashboard");
// 버튼 텍스트가 '오답노트'일 때 이동할 경로
}
},
handleClickEvent() {
this.goToPage("PreviewNote");
},
goToPage(page) {
this.$router.push({ name: page });
},
},
watch: {},
computed: {},
components: {
ProgressBar,
},
mounted() {
console.log("Side mounted");
this.pageSetting();
},
};
</script>
<style scoped>
.login-btn img {
width: 430px;
height: 85px;
}
</style>