Commit @93ffce81c0899b7d3ce2ebe231599bbdb32400a7

woals 2024-08-13

240813 권민수 오답 노트 목록 조회 기능 구현

@93ffce81c0899b7d3ce2ebe231599bbdb32400a7

7bb79b7

93ffce8

client/views/layout/Side.vue

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

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


         <div class="ask mb30">
             <p class="title1 mb15">선생님께 질문 있어요~</p>
 
-            <div class="memo mb15"><textarea name="" id="" placeholder="궁금한 것을 적어보세요."></textarea></div>
+            <div class="memo mb15"><textarea name="" id="" placeholder="궁금한 것을 적어보세요." v-model="studentInfo.studentQuestion"></textarea></div>
             <div class="flex justify-end"><button>질문하기</button></div>
         </div>
         <!-- <div class="btn-wrap flex justify-between">

7bb79b7

93ffce8

client/views/pages/main/PreviewNote.vue

--- client/views/pages/main/PreviewNote.vue

+++ client/views/pages/main/PreviewNote.vue


                     <p class="title">단원</p>
                     <div class="row-bd"></div>
                     <div>
-                        <p class="title mr40 mb10">1. Hello WORLD</p>
+                        <p class="title mr40 mb10">{{ unitData.unit_nm }}</p>
                         <p class="subtitle">my name is dd</p>
                     </div>
                 </div>
-                <!-- <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">
-                            바로가기
-                        </button> -->
             </div>
         </div>
         <div class="title-box flex justify-between mb20 mt30">
             <p class="title">오답노트</p>
-            <!-- <select name="" id="">
-                <option value="">A반</option>
-            </select> -->
         </div>
         <div class="wrap" style="border-radius: 0;">
 

                         <col style="width: 70%;">
                         <col style="width: 15%;">
                     </colgroup>
-                    <tr>
-
+                    <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">중간평가</p>
-                            <p class="title2">wirte a</p>
+                            <p class="title1">{{ note.evalType }}</p>
+                            <p class="title2">{{ note.prblmExpln }}</p>
                         </td>
-                        <td> <button type="button" title="" class="new-btn" @click="buttonSearch">
+                        <td>
+                            <button type="button" title="" class="new-btn" @click="viewDetail(note.prblmId)">
                                 View Detail
-                            </button></td>
-                    </tr>
-                    <tr>
-
-                        <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
-                        <td class="text-lf">
-                            <p class="title1">중간평가</p>
-                            <p class="title2">wirte a</p>
+                            </button>
                         </td>
-                        <td> <button type="button" title="" class="new-btn" @click="buttonSearch">
-                                View Detail
-                            </button></td>
                     </tr>
                 </table>
                 <div class="flex justify-end">

 </template>
 
 <script>
+import axios from 'axios';
+
 export default {
     data() {
         return {
-            timer: '00',
-            showButton1: false,
-            showButton2: false,
-            showButton3: false,
-            showButton4: false,
+            currentStdId: "1", // 임시 학생 아이디
+            currentUnitId: "1", // 임시 유닛 아이디
+            wrongAnswerNotes: [], // 오답 노트 목록 데이터
+            unitData: {},
         }
     },
     methods: {
-        goToPage(page) {
-            this.$router.push({ name: page });
+
+        // 오답노트 상세 보기 버튼 클릭
+        viewDetail(prblmId) {
+            // 상세 보기 페이지로 이동하는 로직을 추가 할 예정
+            console.log('링크될 문제 ID:', prblmId);
         },
-        handleDrag(dragNumber) {
-            // Drag 버튼 숨기기
-            // 여기서는 상태 관리를 통해 버튼을 제어합니다.
-            if (dragNumber === 1) {
-                this.showButton1 = false;
-            } else if (dragNumber === 2) {
-                this.showButton2 = false;
-            } else if (dragNumber === 3) {
-                this.showButton3 = false;
-            }
-        },
-        showButton(dropNumber) {
-            // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
-            // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
-            if (dropNumber === 1) {
-                this.showButton1 = true;
-            } else if (dropNumber === 2) {
-                this.showButton2 = true;
-            } else if (dropNumber === 3) {
-                this.showButton3 = true;
-            } else if (dropNumber === 4) {
-                this.showButton4 = true;
-            }
-        },
-        startTimer() {
-            if (this.intervalId) {
-                clearInterval(this.intervalId);
-            }
-            this.timer = 5;
-            this.intervalId = setInterval(() => {
-                if (this.timer > 0) {
-                    this.timer--;
-                } else {
-                    clearInterval(this.intervalId);
+
+        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];
                 }
-            }, 1000);
+            })
+            .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);
+            });
         }
+
     },
     watch: {
 

     components: {
     },
     mounted() {
-
+        console.log('PreviewNote mounted');
+        this.fetchUnitDetail();
+        this.fetchWrongAnswerNotes();
     }
 }
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -25,7 +25,7 @@
25	25	<div class="ask mb30">
26	26	<p class="title1 mb15">선생님께 질문 있어요~</p>
27	27
28		- <div class="memo mb15"><textarea name="" id="" placeholder="궁금한 것을 적어보세요."></textarea></div>
	28	+ <div class="memo mb15"><textarea name="" id="" placeholder="궁금한 것을 적어보세요." v-model="studentInfo.studentQuestion"></textarea></div>
29	29	<div class="flex justify-end"><button>질문하기</button></div>
30	30	</div>
31	31	<!-- <div class="btn-wrap flex justify-between">

...	...	@@ -6,20 +6,14 @@
6	6	<p class="title">단원</p>
7	7	<div class="row-bd"></div>
8	8	<div>
9		- <p class="title mr40 mb10">1. Hello WORLD</p>
	9	+ <p class="title mr40 mb10">{{ unitData.unit_nm }}</p>
10	10	<p class="subtitle">my name is dd</p>
11	11	</div>
12	12	</div>
13		- <!-- <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">
14		- 바로가기
15		- </button> -->
16	13	</div>
17	14	</div>
18	15	<div class="title-box flex justify-between mb20 mt30">
19	16	<p class="title">오답노트</p>
20		- <!-- <select name="" id="">
21		- <option value="">A반</option>
22		- </select> -->
23	17	</div>
24	18	<div class="wrap" style="border-radius: 0;">
25	19
...	...	@@ -30,27 +24,17 @@
30	24	<col style="width: 70%;">
31	25	<col style="width: 15%;">
32	26	</colgroup>
33		- <tr>
34		-
	27	+ <tr v-for="note in wrongAnswerNotes" :key="note.prblmLogId">
35	28	<td><img src="../../../resources/img/img214_19s.png" alt=""></td>
36	29	<td class="text-lf">
37		- <p class="title1">중간평가</p>
38		- <p class="title2">wirte a</p>
	30	+ <p class="title1">{{ note.evalType }}</p>
	31	+ <p class="title2">{{ note.prblmExpln }}</p>
39	32	</td>
40		- <td> <button type="button" title="" class="new-btn" @click="buttonSearch">
	33	+ <td>
	34	+ <button type="button" title="" class="new-btn" @click="viewDetail(note.prblmId)">
41	35	View Detail
42		- </button></td>
43		- </tr>
44		- <tr>
45		-
46		- <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
47		- <td class="text-lf">
48		- <p class="title1">중간평가</p>
49		- <p class="title2">wirte a</p>
	36	+ </button>
50	37	</td>
51		- <td> <button type="button" title="" class="new-btn" @click="buttonSearch">
52		- View Detail
53		- </button></td>
54	38	</tr>
55	39	</table>
56	40	<div class="flex justify-end">
...	...	@@ -64,57 +48,55 @@
64	48	</template>
65	49
66	50	<script>
	51	+import axios from 'axios';
	52	+
67	53	export default {
68	54	data() {
69	55	return {
70		- timer: '00',
71		- showButton1: false,
72		- showButton2: false,
73		- showButton3: false,
74		- showButton4: false,
	56	+ currentStdId: "1", // 임시 학생 아이디
	57	+ currentUnitId: "1", // 임시 유닛 아이디
	58	+ wrongAnswerNotes: [], // 오답 노트 목록 데이터
	59	+ unitData: {},
75	60	}
76	61	},
77	62	methods: {
78		- goToPage(page) {
79		- this.$router.push({ name: page });
	63	+
	64	+ // 오답노트 상세 보기 버튼 클릭
	65	+ viewDetail(prblmId) {
	66	+ // 상세 보기 페이지로 이동하는 로직을 추가 할 예정
	67	+ console.log('링크될 문제 ID:', prblmId);
80	68	},
81		- handleDrag(dragNumber) {
82		- // Drag 버튼 숨기기
83		- // 여기서는 상태 관리를 통해 버튼을 제어합니다.
84		- if (dragNumber === 1) {
85		- this.showButton1 = false;
86		- } else if (dragNumber === 2) {
87		- this.showButton2 = false;
88		- } else if (dragNumber === 3) {
89		- this.showButton3 = false;
90		- }
91		- },
92		- showButton(dropNumber) {
93		- // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
94		- // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
95		- if (dropNumber === 1) {
96		- this.showButton1 = true;
97		- } else if (dropNumber === 2) {
98		- this.showButton2 = true;
99		- } else if (dropNumber === 3) {
100		- this.showButton3 = true;
101		- } else if (dropNumber === 4) {
102		- this.showButton4 = true;
103		- }
104		- },
105		- startTimer() {
106		- if (this.intervalId) {
107		- clearInterval(this.intervalId);
108		- }
109		- this.timer = 5;
110		- this.intervalId = setInterval(() => {
111		- if (this.timer > 0) {
112		- this.timer--;
113		- } else {
114		- clearInterval(this.intervalId);
	69	+
	70	+ fetchUnitDetail() {
	71	+ axios.post('/unit/unitDetail.json', {
	72	+ unitId: this.currentUnitId
	73	+ })
	74	+ .then(response => {
	75	+ console.log(response.data[0]);
	76	+ if (response.data.length > 0) {
	77	+ this.unitData = response.data[0];
115	78	}
116		- }, 1000);
	79	+ })
	80	+ .catch(error => {
	81	+ console.error('단원 정보를 불러오는 중 오류 발생:', error);
	82	+ })
	83	+ },
	84	+
	85	+ // 오답노트 목록을 가져오는 API 호출
	86	+ fetchWrongAnswerNotes() {
	87	+ axios.post('/problemLog/getPreviewNoteList.json', {
	88	+ stdId: this.currentStdId,
	89	+ unitId: this.currentUnitId
	90	+ })
	91	+ .then(response => {
	92	+ console.log(response.data);
	93	+ this.wrongAnswerNotes = response.data;
	94	+ })
	95	+ .catch(error => {
	96	+ console.error('오답노트를 불러오는 중 오류 발생:', error);
	97	+ });
117	98	}
	99	+
118	100	},
119	101	watch: {
120	102
...	...	@@ -125,7 +107,9 @@
125	107	components: {
126	108	},
127	109	mounted() {
128		-
	110	+ console.log('PreviewNote mounted');
	111	+ this.fetchUnitDetail();
	112	+ this.fetchWrongAnswerNotes();
129	113	}
130	114	}
131	115	</script>

Delete comment