Commit @60ed4b869b6fa347cafa32c6391bd25c0eda0db3

정다정 10-11

241011 정다정 학습히스토리 api 연결

@60ed4b869b6fa347cafa32c6391bd25c0eda0db3

0920494

60ed4b8

client/views/layout/Side.vue

--- client/views/layout/Side.vue

+++ client/views/layout/Side.vue


 <template>
-  <div class="side">
-    <div class="profile mb30">
-      <div class="flex align-center" style="gap: 18px">
-        <img
-          src="../../resources/img/img16_s.png"
-          alt=""
-          style="border-radius: 100%; width: 10rem"
-        />
-        <div class="mt25">
-          <div>
-            <p class="name mb10">{{ studentInfo.studentName }}</p>
-            <p class="mb5">
-              <span
-                ><img
-                  src="../../resources/img/new_img/icon/school_icon.png"
-                  alt=""
-              /></span>
-              {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
-              {{ studentInfo.className }}
-            </p>
-          </div>
-          <!-- <progress-bar :progress="progress"></progress-bar> -->
+    <div class="side">
+        <div class="profile mb30">
+            <div class="flex align-center" style="gap: 18px">
+                <img src="../../resources/img/img16_s.png" alt="" style="border-radius: 100%; width: 10rem" />
+                <div class="mt25">
+                    <div>
+                        <p class="name mb10">{{ studentInfo.studentName }}</p>
+                        <p class="mb5">
+                            <span><img src="../../resources/img/new_img/icon/school_icon.png" alt="" /></span>
+                            {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
+                            {{ studentInfo.className }}
+                        </p>
+                    </div>
+                    <!-- <progress-bar :progress="progress"></progress-bar> -->
+                </div>
+            </div>
+            <div class="problem-box mt25">
+                <p style="font-weight: bold">
+                    지금까지 푼 총 문제 수 :
+                    <span style="color: #9528b7; font-size: 16px; font-weight: bold"
+                        >{{ studentInfo.totalProblemsSolved }}개</span
+                    >
+                </p>
+            </div>
         </div>
-      </div>
-      <div class="problem-box mt25">
-        <p style="font-weight: bold">
-          지금까지 푼 총 문제 수 :
-          <span style="color: #9528b7; font-size: 16px; font-weight: bold"
-            >{{ studentInfo.totalProblemsSolved }}개</span
-          >
-        </p>
-      </div>
-    </div>
-    <hr style="margin: 25px 20px" />
-    <div class="history-box">
-      <p class="title2 mb20">최근 학습 히스토리</p>
-      <ul class="flex-column" style="gap: 10px">
-        <!-- 더미 데이터 -->
+        <hr style="margin: 25px 20px" />
+        <div class="history-box">
+            <p class="title2 mb20">최근 학습 히스토리</p>
+            <ul class="flex-column" style="gap: 10px">
+                <!-- 더미 데이터
         <li>· 에듀캐롯 3학년 1학기</li>
         <li>· 에듀캐롯 3학년 2학기</li>
-        <!-- 여기까지 -->
-        <li
-          v-for="historyItem in studentInfo.history"
-          :key="historyItem.unitId"
-        >
-          · [{{ historyItem.bookName }}] {{ historyItem.unitName }}
-        </li>
-      </ul>
-    </div>
-    <!-- <div class="ask 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">

                 <button @click="updateQuestion">질문하기</button>
             </div>
         </div> -->
-    <div class="mt25">
-      <div class="button-box flex">
-        <button @click="handleClickEvent" style="width: 100%">
-          <img
-            class="look-btn"
-            src="../../resources/img/new_img/plan/wrong_note_btn.png"
-            alt=""
-            style="width: 100%"
-          />
-        </button>
-      </div>
-      <div class="button-box flex">
-        <button @click="goPopupOpen" style="width: 100%">
-          <img
-            src="../../resources/img/new_img/plan/question_btn.png"
-            alt=""
-            style="width: 100%"
-          />
-        </button>
-      </div>
+        <div class="mt25">
+            <div class="button-box flex">
+                <button @click="handleClickEvent" style="width: 100%">
+                    <img
+                        class="look-btn"
+                        src="../../resources/img/new_img/plan/wrong_note_btn.png"
+                        alt=""
+                        style="width: 100%"
+                    />
+                </button>
+            </div>
+            <div class="button-box flex">
+                <button @click="goPopupOpen" style="width: 100%">
+                    <img src="../../resources/img/new_img/plan/question_btn.png" alt="" style="width: 100%" />
+                </button>
+            </div>
+        </div>
     </div>
-  </div>
-  <!-- 질문하기 팝업 -->
-  <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
-    <div class="question-popup">
-      <div class="flex justify-between align-center">
-        <p class="question-text mt20">선생님께 질문하기</p>
-        <img
-          class="look-btn"
-          @click="goPopupClose"
-          src="../../resources/img/btn25_93t_normal.png"
-          alt=""
-        />
-      </div>
-      <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">
-        선생님! 질문있어요!!
-      </p>
-      <div class="memo mt25">
-        <p class="title1 memo-text">내용</p>
-        <textarea
-          name=""
-          id=""
-          placeholder="궁금한 것을 적어보세요."
-          v-model="question"
-        ></textarea>
-      </div>
-      <div class="questionBtn-box flex justify-end" style="gap: 15px">
-        <button
-          style="border-color: #eaedf4; color: #8c8c8c"
-          @click="goPopupClose"
-        >
-          취소하기
-        </button>
-        <button
-          @click="updateQuestion"
-          style="border-color: #6327b9; color: white; background-color: #6327b9"
-        >
-          질문하기
-        </button>
-      </div>
+    <!-- 질문하기 팝업 -->
+    <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
+        <div class="question-popup">
+            <div class="flex justify-between align-center">
+                <p class="question-text mt20">선생님께 질문하기</p>
+                <img class="look-btn" @click="goPopupClose" src="../../resources/img/btn25_93t_normal.png" alt="" />
+            </div>
+            <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">선생님! 질문있어요!!</p>
+            <div class="memo mt25">
+                <p class="title1 memo-text">내용</p>
+                <textarea name="" id="" placeholder="궁금한 것을 적어보세요." v-model="question"></textarea>
+            </div>
+            <div class="questionBtn-box flex justify-end" style="gap: 15px">
+                <button style="border-color: #eaedf4; color: #8c8c8c" @click="goPopupClose">취소하기</button>
+                <button @click="updateQuestion" style="border-color: #6327b9; color: white; background-color: #6327b9">
+                    질문하기
+                </button>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import ProgressBar from "../component/ProgressBar.vue";
-import axios from "axios";
+import ProgressBar from '../component/ProgressBar.vue';
+import axios from 'axios';
 
 export default {
-  data() {
-    return {
-      progress: 20,
-      studentInfo: {
-        studentName: "",
-        institutionName: "",
-        grade: "",
-        className: "",
-        studentQuestion: "",
-        history: [],
-      },
-      userId: "1", // userId 임시 설정
+    data() {
+        return {
+            progress: 20,
+            studentInfo: {
+                studentName: '',
+                institutionName: '',
+                grade: '',
+                className: '',
+                studentQuestion: '',
+                history: [],
+            },
+            userId: '1', // userId 임시 설정
 
-      popupOpen: false,
-      question: null,
-    };
-  },
-  methods: {
-    pageSetting() {
-      this.userId = this.$store.getters.getUserInfo.userId;
-      console.log("유저 아이디: ", this.userId);
-      this.fetchStudentInfo();
+            popupOpen: false,
+            question: null,
+        };
     },
+    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);
-        });
-    },
+        // 학생 정보를 가져오는 메서드
+        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() {
-      if (this.question === null) {
-        alert("질문을 입력해주세요");
-        return;
-      }
-      axios
-        .post("/studentInfo/updateQuestion.json", {
-          userId: this.userId,
-          // userId: 'USID_000000000000002',
-          studentQuestion: this.question,
-        })
-        .then((response) => {
-          console.log("질문이 성공적으로 업데이트되었습니다.");
-          alert("질문이 성공적으로 업데이트되었습니다.");
-        })
-        .catch((error) => {
-          console.error("질문 업데이트 실패:", error);
-          alert("질문 업데이트에 실패했습니다.");
-        });
-      this.question = null;
-    },
+        // 질문 업데이트 메서드
+        updateQuestion() {
+            if (this.question === null) {
+                alert('질문을 입력해주세요');
+                return;
+            }
+            axios
+                .post('/studentInfo/updateQuestion.json', {
+                    userId: this.userId,
+                    // userId: 'USID_000000000000002',
+                    studentQuestion: this.question,
+                })
+                .then((response) => {
+                    console.log('질문이 성공적으로 업데이트되었습니다.');
+                    alert('질문이 성공적으로 업데이트되었습니다.');
+                })
+                .catch((error) => {
+                    console.error('질문 업데이트 실패:', error);
+                    alert('질문 업데이트에 실패했습니다.');
+                });
+            this.question = null;
+        },
 
-    handleClick() {
-      this.toggleText();
-      this.goToPage("PreviewNote");
-    },
+        handleClick() {
+            this.toggleText();
+            this.goToPage('PreviewNote');
+        },
 
-    handleClick() {
-      this.toggleTextAndNavigate();
-    },
+        handleClick() {
+            this.toggleTextAndNavigate();
+        },
 
-    toggleTextAndNavigate() {
-      if (this.buttonText === "오답노트") {
-        this.buttonText = "학습 코스";
-        this.goToPage("PreviewNote");
-        // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
-      } else {
-        this.buttonText = "오답노트";
-        this.goToPage("Dashboard");
-        // 버튼 텍스트가 '오답노트'일 때 이동할 경로
-      }
-    },
+        toggleTextAndNavigate() {
+            if (this.buttonText === '오답노트') {
+                this.buttonText = '학습 코스';
+                this.goToPage('PreviewNote');
+                // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
+            } else {
+                this.buttonText = '오답노트';
+                this.goToPage('Dashboard');
+                // 버튼 텍스트가 '오답노트'일 때 이동할 경로
+            }
+        },
 
-    handleClickEvent() {
-      this.goToPage("PreviewNote");
-    },
+        handleClickEvent() {
+            this.goToPage('PreviewNote');
+        },
 
-    goToPage(page) {
-      this.$router.push({ name: page });
-    },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
 
-    goPopupOpen() {
-      this.popupOpen = true;
+        goPopupOpen() {
+            this.popupOpen = true;
+        },
+        goPopupClose() {
+            this.popupOpen = false;
+            this.question = null;
+        },
     },
-    goPopupClose() {
-      this.popupOpen = false;
-      this.question = null;
+    watch: {},
+    computed: {},
+    components: {
+        ProgressBar,
     },
-  },
-  watch: {},
-  computed: {},
-  components: {
-    ProgressBar,
-  },
-  mounted() {
-    console.log("Side mounted");
-    this.pageSetting();
-  },
+    mounted() {
+        console.log('Side mounted');
+        this.pageSetting();
+    },
 };
 </script>
 <style scoped>
 .login-btn img {
-  width: 430px;
-  height: 85px;
+    width: 430px;
+    height: 85px;
 }
 
 .problem-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid #6327b9;
-  background-color: #f0eaf8;
-  border-radius: 8px;
-  padding: 10px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid #6327b9;
+    background-color: #f0eaf8;
+    border-radius: 8px;
+    padding: 10px 10px;
 }
 
 .history-box {
-  background-color: white;
-  padding: 30px 20px;
-  border: 1px solid #c6c6c6;
-  border-radius: 10px;
-  margin: 25px 20px 0px;
+    background-color: white;
+    padding: 30px 20px;
+    border: 1px solid #c6c6c6;
+    border-radius: 10px;
+    margin: 25px 20px 0px;
 }
 
 .history-box li {
-  background-color: #eaedf4;
-  border-radius: 10px;
-  font-size: 18px;
-  list-style-type: none;
-  padding: 10px;
+    background-color: #eaedf4;
+    border-radius: 10px;
+    font-size: 18px;
+    list-style-type: none;
+    padding: 10px;
 }
 
 .button-box {
-  margin: 10px 20px;
+    margin: 10px 20px;
 }
 
 .question-popup {
-  background-color: white;
-  border-radius: 10px;
-  padding: 30px 40px;
-  position: absolute;
-  top: 15%;
-  left: 25%;
-  width: 100rem;
+    background-color: white;
+    border-radius: 10px;
+    padding: 30px 40px;
+    position: absolute;
+    top: 15%;
+    left: 25%;
+    width: 100rem;
 }
 
 .question-text {
-  font-family: "ONEMobilePOPOTF";
-  font-size: 32px;
-  color: #6327b9;
+    font-family: 'ONEMobilePOPOTF';
+    font-size: 32px;
+    color: #6327b9;
 }
 
 .memo-text {
-  font-family: "ONEMobilePOPOTF";
-  color: #6327b9;
+    font-family: 'ONEMobilePOPOTF';
+    color: #6327b9;
 }
 
 .memo textarea {
-  border: 2px solid #cac0e3;
-  border-radius: 10px;
-  width: 100%;
-  padding: 20px;
-  height: 30rem;
-  margin: 20px 0px 40px;
+    border: 2px solid #cac0e3;
+    border-radius: 10px;
+    width: 100%;
+    padding: 20px;
+    height: 30rem;
+    margin: 20px 0px 40px;
 }
 
 .questionBtn-box button {
-  font-size: 18px;
-  padding: 8px 30px;
-  border: 2px solid;
-  border-radius: 8px;
-  font-weight: bold;
-  font-family: "ONEMobileOTF-Regular";
+    font-size: 18px;
+    padding: 8px 30px;
+    border: 2px solid;
+    border-radius: 8px;
+    font-weight: bold;
+    font-family: 'ONEMobileOTF-Regular';
 }
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,54 +1,43 @@
1	1	<template>
2		- <div class="side">
3		- <div class="profile mb30">
4		- <div class="flex align-center" style="gap: 18px">
5		- <img
6		- src="../../resources/img/img16_s.png"
7		- alt=""
8		- style="border-radius: 100%; width: 10rem"
9		- />
10		- <div class="mt25">
11		- <div>
12		- <p class="name mb10">{{ studentInfo.studentName }}</p>
13		- <p class="mb5">
14		- <span
15		- ><img
16		- src="../../resources/img/new_img/icon/school_icon.png"
17		- alt=""
18		- /></span>
19		- {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
20		- {{ studentInfo.className }}
21		- </p>
22		- </div>
23		- <!-- <progress-bar :progress="progress"></progress-bar> -->
	2	+ <div class="side">
	3	+ <div class="profile mb30">
	4	+ <div class="flex align-center" style="gap: 18px">
	5	+ <img src="../../resources/img/img16_s.png" alt="" style="border-radius: 100%; width: 10rem" />
	6	+ <div class="mt25">
	7	+ <div>
	8	+ <p class="name mb10">{{ studentInfo.studentName }}</p>
	9	+ <p class="mb5">
	10	+ <span><img src="../../resources/img/new_img/icon/school_icon.png" alt="" /></span>
	11	+ {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
	12	+ {{ studentInfo.className }}
	13	+ </p>
	14	+ </div>
	15	+ <!-- <progress-bar :progress="progress"></progress-bar> -->
	16	+ </div>
	17	+ </div>
	18	+ <div class="problem-box mt25">
	19	+ <p style="font-weight: bold">
	20	+ 지금까지 푼 총 문제 수 :
	21	+ <span style="color: #9528b7; font-size: 16px; font-weight: bold"
	22	+ >{{ studentInfo.totalProblemsSolved }}개</span
	23	+ >
	24	+ </p>
	25	+ </div>
24	26	</div>
25		- </div>
26		- <div class="problem-box mt25">
27		- <p style="font-weight: bold">
28		- 지금까지 푼 총 문제 수 :
29		- <span style="color: #9528b7; font-size: 16px; font-weight: bold"
30		- >{{ studentInfo.totalProblemsSolved }}개</span
31		- >
32		- </p>
33		- </div>
34		- </div>
35		- <hr style="margin: 25px 20px" />
36		- <div class="history-box">
37		- <p class="title2 mb20">최근 학습 히스토리</p>
38		- <ul class="flex-column" style="gap: 10px">
39		- <!-- 더미 데이터 -->
	27	+ <hr style="margin: 25px 20px" />
	28	+ <div class="history-box">
	29	+ <p class="title2 mb20">최근 학습 히스토리</p>
	30	+ <ul class="flex-column" style="gap: 10px">
	31	+ <!-- 더미 데이터
40	32	<li>· 에듀캐롯 3학년 1학기</li>
41	33	<li>· 에듀캐롯 3학년 2학기</li>
42		- <!-- 여기까지 -->
43		- <li
44		- v-for="historyItem in studentInfo.history"
45		- :key="historyItem.unitId"
46		- >
47		- · [{{ historyItem.bookName }}] {{ historyItem.unitName }}
48		- </li>
49		- </ul>
50		- </div>
51		- <!-- <div class="ask mb30">
	34	+ -->
	35	+ <li v-for="historyItem in studentInfo.history" :key="historyItem.unitId">
	36	+ · [{{ historyItem.bookName }}] {{ historyItem.unitName }}
	37	+ </li>
	38	+ </ul>
	39	+ </div>
	40	+ <!-- <div class="ask mb30">
52	41	<p class="title1 mb15">선생님께 질문 있어요~</p>
53	42
54	43	<div class="memo mb15">
...	...	@@ -63,255 +52,231 @@
63	52	<button @click="updateQuestion">질문하기</button>
64	53	</div>
65	54	</div> -->
66		- <div class="mt25">
67		- <div class="button-box flex">
68		- <button @click="handleClickEvent" style="width: 100%">
69		- <img
70		- class="look-btn"
71		- src="../../resources/img/new_img/plan/wrong_note_btn.png"
72		- alt=""
73		- style="width: 100%"
74		- />
75		- </button>
76		- </div>
77		- <div class="button-box flex">
78		- <button @click="goPopupOpen" style="width: 100%">
79		- <img
80		- src="../../resources/img/new_img/plan/question_btn.png"
81		- alt=""
82		- style="width: 100%"
83		- />
84		- </button>
85		- </div>
	55	+ <div class="mt25">
	56	+ <div class="button-box flex">
	57	+ <button @click="handleClickEvent" style="width: 100%">
	58	+ <img
	59	+ class="look-btn"
	60	+ src="../../resources/img/new_img/plan/wrong_note_btn.png"
	61	+ alt=""
	62	+ style="width: 100%"
	63	+ />
	64	+ </button>
	65	+ </div>
	66	+ <div class="button-box flex">
	67	+ <button @click="goPopupOpen" style="width: 100%">
	68	+ <img src="../../resources/img/new_img/plan/question_btn.png" alt="" style="width: 100%" />
	69	+ </button>
	70	+ </div>
	71	+ </div>
86	72	</div>
87		- </div>
88		- <!-- 질문하기 팝업 -->
89		- <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
90		- <div class="question-popup">
91		- <div class="flex justify-between align-center">
92		- <p class="question-text mt20">선생님께 질문하기</p>
93		- <img
94		- class="look-btn"
95		- @click="goPopupClose"
96		- src="../../resources/img/btn25_93t_normal.png"
97		- alt=""
98		- />
99		- </div>
100		- <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">
101		- 선생님! 질문있어요!!
102		- </p>
103		- <div class="memo mt25">
104		- <p class="title1 memo-text">내용</p>
105		- <textarea
106		- name=""
107		- id=""
108		- placeholder="궁금한 것을 적어보세요."
109		- v-model="question"
110		- ></textarea>
111		- </div>
112		- <div class="questionBtn-box flex justify-end" style="gap: 15px">
113		- <button
114		- style="border-color: #eaedf4; color: #8c8c8c"
115		- @click="goPopupClose"
116		- >
117		- 취소하기
118		- </button>
119		- <button
120		- @click="updateQuestion"
121		- style="border-color: #6327b9; color: white; background-color: #6327b9"
122		- >
123		- 질문하기
124		- </button>
125		- </div>
	73	+ <!-- 질문하기 팝업 -->
	74	+ <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
	75	+ <div class="question-popup">
	76	+ <div class="flex justify-between align-center">
	77	+ <p class="question-text mt20">선생님께 질문하기</p>
	78	+ <img class="look-btn" @click="goPopupClose" src="../../resources/img/btn25_93t_normal.png" alt="" />
	79	+ </div>
	80	+ <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">선생님! 질문있어요!!</p>
	81	+ <div class="memo mt25">
	82	+ <p class="title1 memo-text">내용</p>
	83	+ <textarea name="" id="" placeholder="궁금한 것을 적어보세요." v-model="question"></textarea>
	84	+ </div>
	85	+ <div class="questionBtn-box flex justify-end" style="gap: 15px">
	86	+ <button style="border-color: #eaedf4; color: #8c8c8c" @click="goPopupClose">취소하기</button>
	87	+ <button @click="updateQuestion" style="border-color: #6327b9; color: white; background-color: #6327b9">
	88	+ 질문하기
	89	+ </button>
	90	+ </div>
	91	+ </div>
126	92	</div>
127		- </div>
128	93	</template>
129	94
130	95	<script>
131		-import ProgressBar from "../component/ProgressBar.vue";
132		-import axios from "axios";
	96	+import ProgressBar from '../component/ProgressBar.vue';
	97	+import axios from 'axios';
133	98
134	99	export default {
135		- data() {
136		- return {
137		- progress: 20,
138		- studentInfo: {
139		- studentName: "",
140		- institutionName: "",
141		- grade: "",
142		- className: "",
143		- studentQuestion: "",
144		- history: [],
145		- },
146		- userId: "1", // userId 임시 설정
	100	+ data() {
	101	+ return {
	102	+ progress: 20,
	103	+ studentInfo: {
	104	+ studentName: '',
	105	+ institutionName: '',
	106	+ grade: '',
	107	+ className: '',
	108	+ studentQuestion: '',
	109	+ history: [],
	110	+ },
	111	+ userId: '1', // userId 임시 설정
147	112
148		- popupOpen: false,
149		- question: null,
150		- };
151		- },
152		- methods: {
153		- pageSetting() {
154		- this.userId = this.$store.getters.getUserInfo.userId;
155		- console.log("유저 아이디: ", this.userId);
156		- this.fetchStudentInfo();
	113	+ popupOpen: false,
	114	+ question: null,
	115	+ };
157	116	},
	117	+ methods: {
	118	+ pageSetting() {
	119	+ this.userId = this.$store.getters.getUserInfo.userId;
	120	+ console.log('유저 아이디: ', this.userId);
	121	+ this.fetchStudentInfo();
	122	+ },
158	123
159		- // 학생 정보를 가져오는 메서드
160		- fetchStudentInfo() {
161		- axios
162		- .post("/studentInfo/getInfo.json", { userId: this.userId })
163		- .then((response) => {
164		- console.log("학생 정보 조회 : ", response.data);
165		- this.studentInfo = response.data;
166		- })
167		- .catch((error) => {
168		- console.error("학생 정보 가져오기 실패:", error);
169		- });
170		- },
	124	+ // 학생 정보를 가져오는 메서드
	125	+ fetchStudentInfo() {
	126	+ axios
	127	+ .post('/studentInfo/getInfo.json', { userId: this.userId })
	128	+ .then((response) => {
	129	+ console.log('학생 정보 조회 : ', response.data);
	130	+ this.studentInfo = response.data;
	131	+ })
	132	+ .catch((error) => {
	133	+ console.error('학생 정보 가져오기 실패:', error);
	134	+ });
	135	+ },
171	136
172		- // 질문 업데이트 메서드
173		- updateQuestion() {
174		- if (this.question === null) {
175		- alert("질문을 입력해주세요");
176		- return;
177		- }
178		- axios
179		- .post("/studentInfo/updateQuestion.json", {
180		- userId: this.userId,
181		- // userId: 'USID_000000000000002',
182		- studentQuestion: this.question,
183		- })
184		- .then((response) => {
185		- console.log("질문이 성공적으로 업데이트되었습니다.");
186		- alert("질문이 성공적으로 업데이트되었습니다.");
187		- })
188		- .catch((error) => {
189		- console.error("질문 업데이트 실패:", error);
190		- alert("질문 업데이트에 실패했습니다.");
191		- });
192		- this.question = null;
193		- },
	137	+ // 질문 업데이트 메서드
	138	+ updateQuestion() {
	139	+ if (this.question === null) {
	140	+ alert('질문을 입력해주세요');
	141	+ return;
	142	+ }
	143	+ axios
	144	+ .post('/studentInfo/updateQuestion.json', {
	145	+ userId: this.userId,
	146	+ // userId: 'USID_000000000000002',
	147	+ studentQuestion: this.question,
	148	+ })
	149	+ .then((response) => {
	150	+ console.log('질문이 성공적으로 업데이트되었습니다.');
	151	+ alert('질문이 성공적으로 업데이트되었습니다.');
	152	+ })
	153	+ .catch((error) => {
	154	+ console.error('질문 업데이트 실패:', error);
	155	+ alert('질문 업데이트에 실패했습니다.');
	156	+ });
	157	+ this.question = null;
	158	+ },
194	159
195		- handleClick() {
196		- this.toggleText();
197		- this.goToPage("PreviewNote");
198		- },
	160	+ handleClick() {
	161	+ this.toggleText();
	162	+ this.goToPage('PreviewNote');
	163	+ },
199	164
200		- handleClick() {
201		- this.toggleTextAndNavigate();
202		- },
	165	+ handleClick() {
	166	+ this.toggleTextAndNavigate();
	167	+ },
203	168
204		- toggleTextAndNavigate() {
205		- if (this.buttonText === "오답노트") {
206		- this.buttonText = "학습 코스";
207		- this.goToPage("PreviewNote");
208		- // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
209		- } else {
210		- this.buttonText = "오답노트";
211		- this.goToPage("Dashboard");
212		- // 버튼 텍스트가 '오답노트'일 때 이동할 경로
213		- }
214		- },
	169	+ toggleTextAndNavigate() {
	170	+ if (this.buttonText === '오답노트') {
	171	+ this.buttonText = '학습 코스';
	172	+ this.goToPage('PreviewNote');
	173	+ // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
	174	+ } else {
	175	+ this.buttonText = '오답노트';
	176	+ this.goToPage('Dashboard');
	177	+ // 버튼 텍스트가 '오답노트'일 때 이동할 경로
	178	+ }
	179	+ },
215	180
216		- handleClickEvent() {
217		- this.goToPage("PreviewNote");
218		- },
	181	+ handleClickEvent() {
	182	+ this.goToPage('PreviewNote');
	183	+ },
219	184
220		- goToPage(page) {
221		- this.$router.push({ name: page });
222		- },
	185	+ goToPage(page) {
	186	+ this.$router.push({ name: page });
	187	+ },
223	188
224		- goPopupOpen() {
225		- this.popupOpen = true;
	189	+ goPopupOpen() {
	190	+ this.popupOpen = true;
	191	+ },
	192	+ goPopupClose() {
	193	+ this.popupOpen = false;
	194	+ this.question = null;
	195	+ },
226	196	},
227		- goPopupClose() {
228		- this.popupOpen = false;
229		- this.question = null;
	197	+ watch: {},
	198	+ computed: {},
	199	+ components: {
	200	+ ProgressBar,
230	201	},
231		- },
232		- watch: {},
233		- computed: {},
234		- components: {
235		- ProgressBar,
236		- },
237		- mounted() {
238		- console.log("Side mounted");
239		- this.pageSetting();
240		- },
	202	+ mounted() {
	203	+ console.log('Side mounted');
	204	+ this.pageSetting();
	205	+ },
241	206	};
242	207	</script>
243	208	<style scoped>
244	209	.login-btn img {
245		- width: 430px;
246		- height: 85px;
	210	+ width: 430px;
	211	+ height: 85px;
247	212	}
248	213
249	214	.problem-box {
250		- display: flex;
251		- align-items: center;
252		- justify-content: center;
253		- border: 2px solid #6327b9;
254		- background-color: #f0eaf8;
255		- border-radius: 8px;
256		- padding: 10px 10px;
	215	+ display: flex;
	216	+ align-items: center;
	217	+ justify-content: center;
	218	+ border: 2px solid #6327b9;
	219	+ background-color: #f0eaf8;
	220	+ border-radius: 8px;
	221	+ padding: 10px 10px;
257	222	}
258	223
259	224	.history-box {
260		- background-color: white;
261		- padding: 30px 20px;
262		- border: 1px solid #c6c6c6;
263		- border-radius: 10px;
264		- margin: 25px 20px 0px;
	225	+ background-color: white;
	226	+ padding: 30px 20px;
	227	+ border: 1px solid #c6c6c6;
	228	+ border-radius: 10px;
	229	+ margin: 25px 20px 0px;
265	230	}
266	231
267	232	.history-box li {
268		- background-color: #eaedf4;
269		- border-radius: 10px;
270		- font-size: 18px;
271		- list-style-type: none;
272		- padding: 10px;
	233	+ background-color: #eaedf4;
	234	+ border-radius: 10px;
	235	+ font-size: 18px;
	236	+ list-style-type: none;
	237	+ padding: 10px;
273	238	}
274	239
275	240	.button-box {
276		- margin: 10px 20px;
	241	+ margin: 10px 20px;
277	242	}
278	243
279	244	.question-popup {
280		- background-color: white;
281		- border-radius: 10px;
282		- padding: 30px 40px;
283		- position: absolute;
284		- top: 15%;
285		- left: 25%;
286		- width: 100rem;
	245	+ background-color: white;
	246	+ border-radius: 10px;
	247	+ padding: 30px 40px;
	248	+ position: absolute;
	249	+ top: 15%;
	250	+ left: 25%;
	251	+ width: 100rem;
287	252	}
288	253
289	254	.question-text {
290		- font-family: "ONEMobilePOPOTF";
291		- font-size: 32px;
292		- color: #6327b9;
	255	+ font-family: 'ONEMobilePOPOTF';
	256	+ font-size: 32px;
	257	+ color: #6327b9;
293	258	}
294	259
295	260	.memo-text {
296		- font-family: "ONEMobilePOPOTF";
297		- color: #6327b9;
	261	+ font-family: 'ONEMobilePOPOTF';
	262	+ color: #6327b9;
298	263	}
299	264
300	265	.memo textarea {
301		- border: 2px solid #cac0e3;
302		- border-radius: 10px;
303		- width: 100%;
304		- padding: 20px;
305		- height: 30rem;
306		- margin: 20px 0px 40px;
	266	+ border: 2px solid #cac0e3;
	267	+ border-radius: 10px;
	268	+ width: 100%;
	269	+ padding: 20px;
	270	+ height: 30rem;
	271	+ margin: 20px 0px 40px;
307	272	}
308	273
309	274	.questionBtn-box button {
310		- font-size: 18px;
311		- padding: 8px 30px;
312		- border: 2px solid;
313		- border-radius: 8px;
314		- font-weight: bold;
315		- font-family: "ONEMobileOTF-Regular";
	275	+ font-size: 18px;
	276	+ padding: 8px 30px;
	277	+ border: 2px solid;
	278	+ border-radius: 8px;
	279	+ font-weight: bold;
	280	+ font-family: 'ONEMobileOTF-Regular';
316	281	}
317	282	</style>

Delete comment