Commit @73128689acece6e0aeb4455ec8a448a32fb8879c

이은진 2024-08-13

240813 이은진 대시보드-학습일정계획

@73128689acece6e0aeb4455ec8a448a32fb8879c

9ac0ec6

7312868

client/views/pages/main/MyPlan.vue

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

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


             <div class="title-box flex justify-between mb40">
                 <p class="title">오늘 공부할 내용을 확인해봅시다.</p>
             </div>
-            <div class="wrap" style="border-radius: 0; min-height: 197px;">
-                <p class="title1"> 오늘 학습할 내용이 없습니다.</p>
+            <div class="wrap" style="border-radius: 0; min-height: 197px;"> 
+                <p class="title1" v-if="!schedules || schedules.length === 0"> 오늘 학습할 내용이 없습니다.</p>
+ 
+                <div class="flex-column" style="gap: 20px;" v-else v-for="(schedule, index) in schedules" :key="index">
+                    <div class="flex justify-between align-center" style="gap: 70px;">
+                        <div><img src="../../../resources/img/img217_22s.png" alt=""></div>
+                        <div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }" style="width: 100%;">
+                            <div class="text-lf flex justify-between align-center">
+                                <div>
+                                    <p class="title2">grade 3</p>
+                                    <div class="flex align-center mb10" style="gap: 10px;">
+                                        <p class="title2"><em class="gray-bd">{{ schedule.schdl_unit }}교시</em></p>
+                                        <p class="title1">{{ schedule.schedule_time }}</p> 
+                                    </div>
+                                    <div class="title-box mb10">
+                                        <span class="title">{{schedule.unit_nm}}</span> 
+                                    </div>
+                                    <p class="title2">{{ schedule.book_nm }}</p>
+                                    <!-- <p class="title2">wirte a</p> -->
+                                </div>
+                                <div><img src="../../../resources/img/img214_19s.png" alt=""></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
+
             <div class="yellow-box mt30">
                 <div class="title-box flex justify-between align-center">
                     <div>

 </template>
 
 <script>
+import axios from "axios";
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiMagnify, mdiWindowClose } from '@mdi/js';
 

             mdiWindowClose: mdiWindowClose,
             showModal: false,
             searchOpen: false,
+            schedules: [],
+            stdId: "2",
+            timeList: [
+                { label: "1교시", time: "08:00 ~ 09:00", value: "1" },
+                { label: "2교시", time: "09:00 ~ 10:00", value: "2" },
+                { label: "3교시", time: "10:00 ~ 11:00", value: "3" },
+                { label: "4교시", time: "11:00 ~ 12:00", value: "4" },
+                { label: "5교시", time: "13:00 ~ 14:00", value: "5" },
+                { label: "6교시", time: "14:00 ~ 15:00", value: "6" },
+            ],
         }
     },
     methods: {

         closeBtn() {
             this.searchOpen = false;
 
-        },
-
+        }, fetchSchedules() {
+            axios.post("/schedule/selectSchedule.json", { stdId: this.stdId }, {
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                }
+            })
+                .then(response => {
+                    this.schedules = response.data.map(schedule => { 
+                        const matchingTime = this.timeList.find(time => time.value === schedule.schdl_unit);
+                        return {
+                            ...schedule,
+                            schedule_time: matchingTime ? matchingTime.time : "시간 정보 없음"
+                        };
+                    });
+                    console.log(this.schedules);
+                })
+                .catch(error => {
+                    console.error("fetchUnits - error:", error);
+                    alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
+                });
+        }
     },
     watch: {
 

     },
     mounted() {
         console.log('Main2 mounted');
+        this.fetchSchedules();
     }
 }
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -5,9 +5,33 @@
5	5	<div class="title-box flex justify-between mb40">
6	6	<p class="title">오늘 공부할 내용을 확인해봅시다.</p>
7	7	</div>
8		- <div class="wrap" style="border-radius: 0; min-height: 197px;">
9		- <p class="title1"> 오늘 학습할 내용이 없습니다.</p>
	8	+ <div class="wrap" style="border-radius: 0; min-height: 197px;">
	9	+ <p class="title1" v-if="!schedules \|\| schedules.length === 0"> 오늘 학습할 내용이 없습니다.</p>
	10	+
	11	+ <div class="flex-column" style="gap: 20px;" v-else v-for="(schedule, index) in schedules" :key="index">
	12	+ <div class="flex justify-between align-center" style="gap: 70px;">
	13	+ <div><img src="../../../resources/img/img217_22s.png" alt=""></div>
	14	+ <div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }" style="width: 100%;">
	15	+ <div class="text-lf flex justify-between align-center">
	16	+ <div>
	17	+ <p class="title2">grade 3</p>
	18	+ <div class="flex align-center mb10" style="gap: 10px;">
	19	+ <p class="title2"><em class="gray-bd">{{ schedule.schdl_unit }}교시</em></p>
	20	+ <p class="title1">{{ schedule.schedule_time }}</p>
	21	+ </div>
	22	+ <div class="title-box mb10">
	23	+ <span class="title">{{schedule.unit_nm}}</span>
	24	+ </div>
	25	+ <p class="title2">{{ schedule.book_nm }}</p>
	26	+ <!-- <p class="title2">wirte a</p> -->
	27	+ </div>
	28	+ <div><img src="../../../resources/img/img214_19s.png" alt=""></div>
	29	+ </div>
	30	+ </div>
	31	+ </div>
	32	+ </div>
10	33	</div>
	34	+
11	35	<div class="yellow-box mt30">
12	36	<div class="title-box flex justify-between align-center">
13	37	<div>
...	...	@@ -42,6 +66,7 @@
42	66	</template>
43	67
44	68	<script>
	69	+import axios from "axios";
45	70	import SvgIcon from '@jamescoyle/vue-icon';
46	71	import { mdiMagnify, mdiWindowClose } from '@mdi/js';
47	72
...	...	@@ -53,6 +78,16 @@
53	78	mdiWindowClose: mdiWindowClose,
54	79	showModal: false,
55	80	searchOpen: false,
	81	+ schedules: [],
	82	+ stdId: "2",
	83	+ timeList: [
	84	+ { label: "1교시", time: "08:00 ~ 09:00", value: "1" },
	85	+ { label: "2교시", time: "09:00 ~ 10:00", value: "2" },
	86	+ { label: "3교시", time: "10:00 ~ 11:00", value: "3" },
	87	+ { label: "4교시", time: "11:00 ~ 12:00", value: "4" },
	88	+ { label: "5교시", time: "13:00 ~ 14:00", value: "5" },
	89	+ { label: "6교시", time: "14:00 ~ 15:00", value: "6" },
	90	+ ],
56	91	}
57	92	},
58	93	methods: {
...	...	@@ -82,8 +117,27 @@
82	117	closeBtn() {
83	118	this.searchOpen = false;
84	119
85		- },
86		-
	120	+ }, fetchSchedules() {
	121	+ axios.post("/schedule/selectSchedule.json", { stdId: this.stdId }, {
	122	+ headers: {
	123	+ "Content-Type": "application/json; charset=UTF-8",
	124	+ }
	125	+ })
	126	+ .then(response => {
	127	+ this.schedules = response.data.map(schedule => {
	128	+ const matchingTime = this.timeList.find(time => time.value === schedule.schdl_unit);
	129	+ return {
	130	+ ...schedule,
	131	+ schedule_time: matchingTime ? matchingTime.time : "시간 정보 없음"
	132	+ };
	133	+ });
	134	+ console.log(this.schedules);
	135	+ })
	136	+ .catch(error => {
	137	+ console.error("fetchUnits - error:", error);
	138	+ alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
	139	+ });
	140	+ }
87	141	},
88	142	watch: {
89	143
...	...	@@ -96,6 +150,7 @@
96	150	},
97	151	mounted() {
98	152	console.log('Main2 mounted');
	153	+ this.fetchSchedules();
99	154	}
100	155	}
101	156	</script> (No newline at end of file)

Delete comment