+

+    <div class="main">

+        <div class="myplan">

+            <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>

+            <div class="yellow-box mt30">

+                <div class="title-box flex justify-between align-center">

+                    <div>

+                        <p class="title">오늘 공부를 계획해봅시다.</p>

+                        <p class="title1 mt20"> 스스로 학습 일정을 바꿔볼까요?</p>

+                    </div>

+                    <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">

+                        바로가기

+                    </button>

+            </div>

+            <div class="wrap mt30">

+                <p class="title1 mb20"> AI 맞춤형 학습 코스는 어떨까요?</p>

+                <div class="imgGroup flex justify-between">

+                    <div class="text-lf">

+                        <img src="../../../resources/img/img215_22s.png" alt="">

+                        <p class="title2 mt10">추천 학습 단원</p>

+                    </div>

+                    <div class="text-lf">

+                        <img src="../../../resources/img/img215_22s.png" alt="">

+                        <p class="title2 mt10">추천 학습 단원</p>

+                    </div>

+                    <div class="text-lf">

+                        <img src="../../../resources/img/img215_22s.png" alt="">

+                        <p class="title2 mt10">추천 학습 단원</p>

+                    </div>

+                </div>

+                <p class="title">오늘 공부를 계획해봅시다.</p>

+            </div>

+                    <input class="data-wrap" type="text" placeholder="검색하세요." v-model="keyword">

+                    <button type="button" title="위원회 검색" @click="searchBook">

+                        <tr v-for="(book, index) in books" :key="index">

+                            <td><input type="checkbox" class="ui-checkbox mr10" v-model="book.isSelected"></td>

+                                <p class="title1">{{ book.book_nm }}</p>

+                                <p class="title2">grade 3</p>

+                            <td> <button type="button" title="확인" class="new-btn"

+                                    @click="buttonSearch(book.book_nm, book.book_id)">

+                        <button type="button" title="선택하기" class="yellow-btn mt30" @click="checkSchedule">

+

+                <div class="flex-column" style="gap: 20px;" v-for="(book, index) in DataArray" :key="index">

+                        <div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }" style="width: 100%;">

+                                <div>

+                                        <p class="title2"><em class="gray-bd">{{ book.scheduleUnit }}교시</em></p>

+                                        <p class="title1">{{ book.scheduleTime }}</p>

+                                    <div class="title-box  mb10"> <span class="title">{{ book.bookNm }}</span></div>

+                                </div>

+                                <div class=""> <img src="../../../resources/img/img214_19s.png" alt=""></div>

+                    <button type="button" title="저장하기" class="yellow-btn mt30" @click="insertSchedule">

+                        저장하기

+                    </button>

+            </div>

+                    <article class="mb20 flex-column" style="gap: 20px;">

+                        <div v-for="(item, index) in timeList" :key="item.value" class="flex justify-between bg-gray">

+                            <div class="flex items-center">

+                                <div>

+                                    <input type="checkbox" class="ui-checkbox mr20" v-model="checkedItems"

+                                        :value="item" />

+                                </div>

+                                <div class="text-lg">

+                                    <p class="title1">{{ item.label }}</p>

+                            <div class="flex align-center" style="gap: 10px;">

+                                <img src="../../../resources/img/img215_20s.png" alt="" />

+                                <p class="title1">{{ item.time }}</p>

+                        <button type="button" title="선택" class="new-btn" @click="timePick">

+import axios from "axios";

+            books: [],

+            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" },

+            ],

+            checkedItems: [],

+            newDataArray: [],

+            DataArray: [],

+            nowName: "",

+            nowID: "",

+            keyword: "",

+            unitList: []

+            this.isClicked = !this.isClicked;

+        },

+        buttonSearch(book_nm, book_id) {

+            this.nowID = book_id

+            this.nowName = book_nm

+        timePick() {

+            const selectedBooks = this.books.filter(book => book.isSelected);

+            if (selectedBooks.length <= 0) {

+                alert('교재를 선택해 주세요.');

+            } else {

+                if (this.checkedItems.length === 1) {

+                    if (this.unitList.find(item => item === this.checkedItems[0])) {

+                        alert('이미 지정된 시간입니다.');

+                    } else {

+                        this.addToNewDataArray(this.checkedItems[0]);

+                        this.searchOpen = false;

+                        this.nowID = ""

+                        this.nowName = ""

+                        this.unitList.push(this.checkedItems[0])

+                        this.checkedItems = []

+                    }

+                } else if (this.checkedItems.length > 1) {

+                    alert('시간은 하나만 선택할 수 있습니다.');

+                } else if (this.checkedItems.length <= 0) {

+                    alert('시간을 선택해 주세요.');

+                }

+            }

+        },

+        addToNewDataArray(selectedTime) {

+            if (!this.newDataArray) {

+                this.newDataArray = [];

+            }

+            const newEntry = {

+                bookNm: this.nowName,

+                scheduleTime: selectedTime.time,

+                scheduleUnit: selectedTime.value,

+                bookId: this.nowID,

+                stdId: "2"

+            };

+            this.newDataArray.push(newEntry);

+        },

+        async insertSchedule() {

+            this.newDataArray = this.DataArray.map(item => ({

+                scheduleUnit: item.scheduleUnit,

+                bookId: item.bookId,

+                stdId: item.stdId

+            }));

+            try {

+                for (let data of this.newDataArray) {

+                    await axios.post('/schedule/insertSchedule.json', data);

+                }

+                alert('학습 일정이 등록됐어요!');

+                this.goToPage('MyPlan')

+            } catch (error) {

+                console.error('데이터 제출 중 오류 발생:', error);

+                alert('데이터 제출 중 오류가 발생했습니다.');

+            }

+        }, checkSchedule() {

+            const sortedArray = this.newDataArray.slice().sort((a, b) => {

+                return a.scheduleUnit - b.scheduleUnit;

+            });

+

+            this.DataArray = sortedArray;

+        },

+        fetchBooks() {

+            axios({

+                url: "/book/findAll.json",

+                method: "post",

+                headers: {

+                    "Content-Type": "application/json; charset=UTF-8",

+                },

+            })

+                .then(response => {

+                    this.books = response.data.map(book => ({

+                        ...book,

+                        isSelected: false

+                    }));

+                })

+                .catch(error => {

+                    console.error("fetchBooks - error: ", error);

+                    alert("교재 목록을 불러오는 중 오류가 발생했습니다.");

+                });

+        },

+        searchBook() {

+            this.books = ""

+            axios.post("/book/search.json", { book_nm: this.keyword }, {

+                headers: {

+                    "Content-Type": "application/json; charset=UTF-8",

+                }

+            })

+                .then(response => {

+                    this.books = response.data.list.map(book => ({

+                        ...book,

+                        isSelected: false

+                    }));

+                })

+                .catch(error => {

+                    console.error("fetchUnits - error:", error);

+                    alert("단원 목록을 불러오는 중 오류가 발생했습니다.");

+                });

+        }

+        // Watchers for reactivity (if needed)

+        // Computed properties (if needed)

+        this.fetchBooks();

+