Commit @34b5a9920c13ea42c5f2d11f8f3747721c963eba

이은진 2024-08-09

240809 이은진 교사 지문 수정

@34b5a9920c13ea42c5f2d11f8f3747721c963eba

48ccb40

34b5a99

client/views/pages/teacher/TextDetail.vue

--- client/views/pages/teacher/TextDetail.vue

+++ client/views/pages/teacher/TextDetail.vue


 <template>
     <div class="title-box flex justify-between mb40">
-        <p class="title">지문 등록</p>
+        <p class="title">지문 상세 보기</p>
     </div>
     <div class="board-wrap">
         <div class="flex align-center mb20">
             <label for="" class="title2">제목</label>
-            <input v-if="isEditing" type="text" v-model="post.textTtl" class="data-wrap">
-            <p v-else class="data-wrap">{{ post.textTtl }}</p>
+            <input v-if="isEditing" type="text" v-model="post.textTtl" class=" data-wrap">
+            <p class="data-wrap" v-else>{{ post.textTtl }}</p>
         </div>
         <div class="flex align-center mb20">
             <label for="" class="title2">URL</label>
             <input v-if="isEditing" type="text" v-model="post.textUrl" class="data-wrap">
             <p v-else class="data-wrap">{{ post.textUrl }}</p>
         </div>
-        <div class="flex align-center mb20">
+        <div class="flex align-center mb20" style="display: flex; flex-direction: row;">
             <label class="title2">형식</label>
             <label class="title2">
                 <input type="radio" v-model="post.textTypeId" value="1" class="data-wrap" :disabled="!isEditing"> 일반

             </label>
             <label class="title2">
                 <input type="radio" v-model="post.textTypeId" value="3" class="data-wrap" :disabled="!isEditing"> 책 리스닝
+            </label>
+            <select v-if="isEditing" id="" v-model="post.bookId" @change="fetchUnits" class="ml20">
+                <option value="" disabled>교재를 선택하세요</option>
+                <option v-for="book in books" :key="book.book_id" :value="book.book_id">
+                    {{ book.book_nm }}
+                </option>
+            </select>
+            <label v-else for="" class="title2 flex align-center ml20" style="display: flex; width: 20rem;">교재:&nbsp;
+                <p class="title2">{{ post.bookName }}</p>
+            </label>
+                <select v-if="isEditing" name="" id="" v-model="post.unitId" class="ml20">
+                    <option value="" disabled>단원을 선택하세요</option>
+                    <option v-for="unit in units" :key="unit.unitId" :value="unit.unitId">
+                        {{ unit.unitName }}
+                    </option>
+                </select>
+            <label v-else  for="" class="title2 flex align-center ml20"
+                style="display: flex; width: 20rem; text-align: right;">단원:&nbsp;
+                <p class="title2">{{ post.unitName }}</p>
             </label>
         </div>
         <hr>

     data() {
         return {
             mdiMagnify: mdiMagnify,
-            post: {"textId": "",
-                "textTtl": "",
-                "textCnt": "",
-                "textUrl": "",
-                "textTypeId": ""}, 
-            isEditing: false // Add this property to toggle edit mode
+            post: {
+                textId: "",
+                textTtl: "",
+                textCnt: "",
+                textUrl: "",
+                textTypeId: "",
+                bookId: "",
+                unitId: "",
+                bookName: "",  
+                unitName: ""
+            },
+            books: [],  
+            units: [], 
+            isEditing: false
         };
     },
     computed: {
         textId() {
             return this.$route.query.textId;
+        },
+        selectedBookName() {
+            const book = this.books.find(book => book.book_id === this.post.bookId);
+            return book ? book.book_nm : '';
+        },
+        selectedUnitName() {
+            const unit = this.units.find(unit => unit.unit_id === this.post.unitId);
+            return unit ? unit.unit_nm : '';
         }
     },
     methods: {

                         this.post.textTtl = response.data[0].text_ttl;
                         this.post.textCnt = response.data[0].text_cnt;
                         this.post.textUrl = response.data[0].text_url;
-                        this.post.textTypeId = response.data[0].text_type_id; 
+                        this.post.textTypeId = response.data[0].text_type_id;
+                        this.post.bookId = response.data[0].book_id;
+                        this.post.unitId = response.data[0].unit_id;
+                        this.post.bookName = response.data[0].book_name;
+                        this.post.unitName = response.data[0].unit_name;
                     } else {
                         this.error = "Failed to fetch post details.";
                     }

                     this.error = "Failed to fetch post details.";
                 });
         },
-        dataInsert() { 
-            axios.post("/text/textUpdate.json", this.post, {
+        dataInsert() {
+            this.newPost = {
+                textId: this.post.textId,
+                textTtl: this.post.textTtl,
+                textCnt: this.post.textCnt,
+                textUrl: this.post.textUrl,
+                textTypeId: this.post.textTypeId,
+                bookId: this.post.bookId,
+                unitId: this.post.unitId
+            };
+            console.log(this.newPost)
+
+            axios.post("/text/textUpdate.json", this.newPost, {
                 headers: {
                     "Content-Type": "application/json; charset=UTF-8",
                 }

                     this.fetchPostDetail();
                 })
                 .catch(error => {
-                    console.log("dataInsert - error : ", error.response.data);
+                    console.log("dataInsert - error:", error.response.data);
                     alert("게시글 등록에 오류가 발생했습니다.");
                 });
         },
         toggleEdit() {
-            if (this.isEditing) { 
+            if (this.isEditing) {
                 this.dataInsert();
                 this.isEditing = false;
             } else {
-                // Enter edit mode
                 this.isEditing = true;
+                this.fetchBooks();
             }
         },
         deletePost() {

                     console.error("Error deleting post:", error);
                     alert("게시글 삭제에 오류가 발생했습니다.");
                 });
+        },
+        fetchBooks() {
+            axios.post("/book/findAll.json", {}, {
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                }
+            })
+                .then(response => {
+                    this.books = response.data;  
+                })
+                .catch(error => {
+                    console.error("fetchBooks - error:", error);
+                    alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
+                });
+        },
+        fetchUnits() {
+            if (!this.post.bookId) return;  
+
+            axios.post("/unit/unitList.json", { bookId: this.post.bookId }, {
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                }
+            })
+                .then(response => {
+                    this.units = response.data;  
+                })
+                .catch(error => {
+                    console.error("fetchUnits - error:", error);
+                    alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
+                });
         }
     },
     mounted() {
         this.fetchPostDetail();
-        console.log('Main2 mounted');
     },
     components: {
         SvgIcon

 };
 </script>
 
-<style scoped>
-/* Add any necessary styles here */
+<style scoped> 
 </style>

48ccb40

34b5a99

client/views/pages/teacher/TextInsert.vue

--- client/views/pages/teacher/TextInsert.vue

+++ client/views/pages/teacher/TextInsert.vue

...	...	@@ -1,4 +1,4 @@
1		-<!-- userid, bookid, unitid 추가해야함. filemng는? 모르겟음 -->
	1	+
2	2	<template>
3	3	<div class="title-box flex justify-between mb40">
4	4	<p class="title">지문 등록</p>
...	...	@@ -23,6 +23,18 @@
23	23	<label class="title2">
24	24	<input type="radio" v-model="newData.textTypeId" value="3" class="data-wrap"> 책 리스닝
25	25	</label>
	26	+ <select name="" id="" v-model="newData.bookId" @change="fetchUnits" class="ml20">
	27	+ <option value="" disabled>교재를 선택하세요</option>
	28	+ <option v-for="book in books" :key="book.book_id" :value="book.book_id">
	29	+ {{ book.book_nm }}
	30	+ </option>
	31	+ </select>
	32	+ <select name="" id="" v-model="newData.unitId" class="ml20">
	33	+ <option value="" disabled>단원을 선택하세요</option>
	34	+ <option v-for="unit in units" :key="unit.unitId" :value="unit.unitId">
	35	+ {{ unit.unitName }}
	36	+ </option>
	37	+ </select>
26	38	</div>
27	39	<hr>
28	40	<div class="flex align-center">
...	...	@@ -49,11 +61,11 @@
49	61
50	62
51	63	export default {
52		- computed: {
53		- textId() {
54		- return this.$route.query.textId;
55		- }
56		- },
	64	+ computed: {
	65	+ textId() {
	66	+ return this.$route.query.textId;
	67	+ }
	68	+ },
57	69	data() {
58	70	return {
59	71	mdiMagnify: mdiMagnify,
...	...	@@ -63,22 +75,28 @@
63	75	textTtl: "",
64	76	textCnt: "",
65	77	textUrl: "",
66		- textTypeId: ""
	78	+ textTypeId: "",
	79	+ //fileMngId:"",
	80	+ // userId:"".
	81	+ bookId: "",
	82	+ unitId: ""
67	83	},
	84	+ books: [],
	85	+ units: [],
68	86	}
69	87	},
70	88	methods: {
71	89	goToPage(page) {
72	90	this.$router.push({ name: page });
73	91	}, fetchPostDetail() {
74		- const textId=this.$route.query.textId
	92	+ const textId = this.$route.query.textId
75	93	axios({
76	94	url: `/text/selectOneText.json`,
77	95	method: "post",
78	96	headers: {
79	97	"Content-Type": "application/json; charset=UTF-8",
80	98	},
81		- data: { "textId": textId }
	99	+ data: { "textId": textId }
82	100	})
83	101	.then(response => {
84	102	if (response.data && response.data[0]) {
...	...	@@ -119,13 +137,72 @@
119	137	return;
120	138	}
121	139
	140	+ if (!this.newData.textUrl) {
	141	+ alert("url을 입력해 주세요.");
	142	+ return;
	143	+ }
	144	+
	145	+ if (!this.newData.textTypeId) {
	146	+ alert("지문 형식을 입력해 주세요.");
	147	+ return;
	148	+ }
	149	+
	150	+ if (!this.newData.bookId) {
	151	+ alert("교재를 선택해 주세요.");
	152	+ return;
	153	+ }
	154	+
	155	+ if (!this.newData.unitId) {
	156	+ alert("단원을 선택해 주세요.");
	157	+ return;
	158	+ }
	159	+
122	160	if (!this.newData.textCnt) {
123	161	alert("내용을 입력해 주세요.");
124	162	return;
125	163	}
126	164
127	165	this.dataInsert();
128		- }
	166	+ },
	167	+ fetchBooks() {
	168	+ axios({
	169	+ url: "/book/findAll.json",
	170	+ method: "post",
	171	+ headers: {
	172	+ "Content-Type": "application/json; charset=UTF-8",
	173	+ },
	174	+ })
	175	+ .then(response => {
	176	+ console.log(response.data)
	177	+ this.books = response.data;
	178	+ })
	179	+ .catch(error => {
	180	+ console.error("fetchBooks - error: ", error);
	181	+ alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
	182	+ });
	183	+ },
	184	+ fetchUnits() {
	185	+ if (!this.newData.bookId) return;
	186	+
	187	+ axios({
	188	+ url: "/unit/unitList.json",
	189	+ method: "post",
	190	+ headers: {
	191	+ "Content-Type": "application/json; charset=UTF-8",
	192	+ },
	193	+ data: {
	194	+ "bookId": this.newData.bookId
	195	+ },
	196	+ })
	197	+ .then(response => {
	198	+ console.log(response.data)
	199	+ this.units = response.data;
	200	+ })
	201	+ .catch(error => {
	202	+ console.error("fetchUnits - error: ", error);
	203	+ alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
	204	+ });
	205	+ },
129	206	},
130	207	watch: {
131	208
...	...	@@ -138,6 +215,7 @@
138	215	},
139	216	mounted() {
140	217	this.fetchPostDetail();
	218	+ this.fetchBooks();
141	219	console.log('Main2 mounted');
142	220	}
143	221	}

48ccb40

34b5a99

client/views/pages/teacher/TextList.vue

--- client/views/pages/teacher/TextList.vue

+++ client/views/pages/teacher/TextList.vue


 <template>
     <div class="title-box flex justify-between mb40 myplan">
         <p class="title">지문</p>
-        <select name="" id="">
-            <option value="">A 교재</option>
+        <select name="" id="" v-model="selectedBook" @change="fetchUnits">
+            <option value="" disabled>교재를 선택하세요</option>
+            <option v-for="book in books" :key="book.book_id" :value="book.book_id">
+                {{ book.book_nm }}
+            </option>
         </select>
     </div>
-        <label for="" class="title2">단원</label>
-        <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
-            <button class="selected-btn">1</button>
-            <button>2</button>
-            <button>3</button>
-        </div>
+    <label for="" class="title2">단원</label>
+    <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
+        <button 
+            v-for="(unit, index) in units" 
+            :key="index" 
+            :class="{ 'selected-btn': selectedUnit === unit.unitId }"
+            @click="selectUnit(unit.unitId)">
+            {{ unit.unitName }}
+        </button>
+    </div>
     <div class="search-wrap flex justify-end mb20">
         <select name="" id="" class="mr10 data-wrap" style="width: 15rem;" v-model="option">
             <option value="" disabled>검색유형</option>

             totalPosts: 0,
             option: "",
             keyword: "",
+            books: [], 
+            selectedBook: "", 
             optionList: [
                 { text: "번호", value: "textId" },
                 { text: "제목", value: "textTtl" },

                 { text: "작성자", value: "userId" },
                 { text: "등록일", value: "regDt" },
             ],
+            units: [], 
+            selectedUnit: null, 
             searching: false,
-
         };
     },
     methods: {

                 this.goBack();
             }
         },
+        selectUnit(unitId) {
+            this.selectedUnit = unitId;
+            this.fetchData();  
+        },
         search() {
             if (!this.option) {
                 alert("검색유형을 선택해 주세요")
             } else {
-                this.currentPage = 1; // Reset to first page on new search
+                this.currentPage = 1; 
                 this.searching = true;
-                this.fetchData(); // Call the method to fetch search results}
-            }},
-            fetchData() {
-                const idx = (this.currentPage - 1) * this.pageSize;
-                axios({
-                    url: "/text/textSearch.json",
-                    method: "post",
-                    headers: {
-                        "Content-Type": "application/json; charset=UTF-8",
-                    },
-                    data: {
-                        "option": this.option,
-                        "keyword": this.keyword,
-                        "pageSize": this.pageSize,
-                        "startIndex": idx
-                    },
-                })
-                    .then(response => {
-                        this.posts = response.data.list;
-                        if (!this.searching || this.keyword == "") {
-                            this.totalPosts = response.data.totalText;
-                        }
-                        else if (this.searching)
-                            this.totalPosts = response.data.resultCount;
-                        this.posts.forEach(post => {
-                            let regDt = post.regDt;
-                            let date = new Date(regDt);
-                            post.regDt = date.toISOString().split('T')[0];
-                        });
-                    })
-                    .catch(error => {
-                        console.error("fetchData - error: ", error);
-                        alert("검색 중 오류가 발생했습니다.");
+                this.fetchData();  
+            }
+        },
+        fetchData() {
+            const idx = (this.currentPage - 1) * this.pageSize;
+            axios({
+                url: "/text/textSearch.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    "option": this.option,
+                    "keyword": this.keyword,
+                    "pageSize": this.pageSize,
+                    "startIndex": idx,
+                    "unitId": this.selectedUnit  
+                },
+            })
+                .then(response => {
+                    this.posts = response.data.list;
+                    if (!this.searching || this.keyword === "") {
+                        this.totalPosts = response.data.totalText;
+                    } else if (this.searching) {
+                        this.totalPosts = response.data.resultCount;
+                    }
+                    this.posts.forEach(post => {
+                        let regDt = post.regDt;
+                        let date = new Date(regDt);
+                        post.regDt = date.toISOString().split('T')[0];
                     });
-            },
-            changePage(page) {
-                if (page > 0 && page <= this.totalPages) {
-                    this.currentPage = page;
-                    this.fetchData();
-                }
+                })
+                .catch(error => {
+                    console.error("fetchData - error: ", error);
+                    alert("검색 중 오류가 발생했습니다.");
+                });
+        },
+        changePage(page) {
+            if (page > 0 && page <= this.totalPages) {
+                this.currentPage = page;
+                this.fetchData();
             }
         },
-        computed: {
-            totalPages() {
-                return Math.ceil(this.totalPosts / this.pageSize);
-            }
+        fetchBooks() {
+            axios({
+                url: "/book/findAll.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+            })
+                .then(response => {
+                    console.log(response.data)
+                    this.books = response.data;  
+                })
+                .catch(error => {
+                    console.error("fetchBooks - error: ", error);
+                    alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
+                });
         },
-        components: {
-            SvgIcon
+        fetchUnits() {
+            if (!this.selectedBook) return; 
+
+            axios({
+                url: "/unit/unitList.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    "bookId": this.selectedBook
+                },
+            })
+                .then(response => {
+                    console.log(response.data)
+                    this.units = response.data; 
+                })
+                .catch(error => {
+                    console.error("fetchUnits - error: ", error);
+                    alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
+                });
         },
-        mounted() {
-            this.fetchData();
+    },
+    computed: {
+        totalPages() {
+            return Math.ceil(this.totalPosts / this.pageSize);
         }
-    };
+    },
+    components: {
+        SvgIcon
+    },
+    mounted() {
+        this.fetchBooks(); // Fetch books when the component is mounted
+        this.fetchData(); // Fetch data for the default view
+    }
+};
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,19 +1,19 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3		- <p class="title">지문 등록</p>
	3	+ <p class="title">지문 상세 보기</p>
4	4	</div>
5	5	<div class="board-wrap">
6	6	<div class="flex align-center mb20">
7	7	<label for="" class="title2">제목</label>
8		- <input v-if="isEditing" type="text" v-model="post.textTtl" class="data-wrap">
9		- <p v-else class="data-wrap">{{ post.textTtl }}</p>
	8	+ <input v-if="isEditing" type="text" v-model="post.textTtl" class=" data-wrap">
	9	+ <p class="data-wrap" v-else>{{ post.textTtl }}</p>
10	10	</div>
11	11	<div class="flex align-center mb20">
12	12	<label for="" class="title2">URL</label>
13	13	<input v-if="isEditing" type="text" v-model="post.textUrl" class="data-wrap">
14	14	<p v-else class="data-wrap">{{ post.textUrl }}</p>
15	15	</div>
16		- <div class="flex align-center mb20">
	16	+ <div class="flex align-center mb20" style="display: flex; flex-direction: row;">
17	17	<label class="title2">형식</label>
18	18	<label class="title2">
19	19	<input type="radio" v-model="post.textTypeId" value="1" class="data-wrap" :disabled="!isEditing"> 일반
...	...	@@ -23,6 +23,25 @@
23	23	</label>
24	24	<label class="title2">
25	25	<input type="radio" v-model="post.textTypeId" value="3" class="data-wrap" :disabled="!isEditing"> 책 리스닝
	26	+ </label>
	27	+ <select v-if="isEditing" id="" v-model="post.bookId" @change="fetchUnits" class="ml20">
	28	+ <option value="" disabled>교재를 선택하세요</option>
	29	+ <option v-for="book in books" :key="book.book_id" :value="book.book_id">
	30	+ {{ book.book_nm }}
	31	+ </option>
	32	+ </select>
	33	+ <label v-else for="" class="title2 flex align-center ml20" style="display: flex; width: 20rem;">교재:
	34	+ <p class="title2">{{ post.bookName }}</p>
	35	+ </label>
	36	+ <select v-if="isEditing" name="" id="" v-model="post.unitId" class="ml20">
	37	+ <option value="" disabled>단원을 선택하세요</option>
	38	+ <option v-for="unit in units" :key="unit.unitId" :value="unit.unitId">
	39	+ {{ unit.unitName }}
	40	+ </option>
	41	+ </select>
	42	+ <label v-else for="" class="title2 flex align-center ml20"
	43	+ style="display: flex; width: 20rem; text-align: right;">단원:
	44	+ <p class="title2">{{ post.unitName }}</p>
26	45	</label>
27	46	</div>
28	47	<hr>
...	...	@@ -56,17 +75,33 @@
56	75	data() {
57	76	return {
58	77	mdiMagnify: mdiMagnify,
59		- post: {"textId": "",
60		- "textTtl": "",
61		- "textCnt": "",
62		- "textUrl": "",
63		- "textTypeId": ""},
64		- isEditing: false // Add this property to toggle edit mode
	78	+ post: {
	79	+ textId: "",
	80	+ textTtl: "",
	81	+ textCnt: "",
	82	+ textUrl: "",
	83	+ textTypeId: "",
	84	+ bookId: "",
	85	+ unitId: "",
	86	+ bookName: "",
	87	+ unitName: ""
	88	+ },
	89	+ books: [],
	90	+ units: [],
	91	+ isEditing: false
65	92	};
66	93	},
67	94	computed: {
68	95	textId() {
69	96	return this.$route.query.textId;
	97	+ },
	98	+ selectedBookName() {
	99	+ const book = this.books.find(book => book.book_id === this.post.bookId);
	100	+ return book ? book.book_nm : '';
	101	+ },
	102	+ selectedUnitName() {
	103	+ const unit = this.units.find(unit => unit.unit_id === this.post.unitId);
	104	+ return unit ? unit.unit_nm : '';
70	105	}
71	106	},
72	107	methods: {
...	...	@@ -86,7 +121,11 @@
86	121	this.post.textTtl = response.data[0].text_ttl;
87	122	this.post.textCnt = response.data[0].text_cnt;
88	123	this.post.textUrl = response.data[0].text_url;
89		- this.post.textTypeId = response.data[0].text_type_id;
	124	+ this.post.textTypeId = response.data[0].text_type_id;
	125	+ this.post.bookId = response.data[0].book_id;
	126	+ this.post.unitId = response.data[0].unit_id;
	127	+ this.post.bookName = response.data[0].book_name;
	128	+ this.post.unitName = response.data[0].unit_name;
90	129	} else {
91	130	this.error = "Failed to fetch post details.";
92	131	}
...	...	@@ -96,8 +135,19 @@
96	135	this.error = "Failed to fetch post details.";
97	136	});
98	137	},
99		- dataInsert() {
100		- axios.post("/text/textUpdate.json", this.post, {
	138	+ dataInsert() {
	139	+ this.newPost = {
	140	+ textId: this.post.textId,
	141	+ textTtl: this.post.textTtl,
	142	+ textCnt: this.post.textCnt,
	143	+ textUrl: this.post.textUrl,
	144	+ textTypeId: this.post.textTypeId,
	145	+ bookId: this.post.bookId,
	146	+ unitId: this.post.unitId
	147	+ };
	148	+ console.log(this.newPost)
	149	+
	150	+ axios.post("/text/textUpdate.json", this.newPost, {
101	151	headers: {
102	152	"Content-Type": "application/json; charset=UTF-8",
103	153	}
...	...	@@ -107,17 +157,17 @@
107	157	this.fetchPostDetail();
108	158	})
109	159	.catch(error => {
110		- console.log("dataInsert - error : ", error.response.data);
	160	+ console.log("dataInsert - error:", error.response.data);
111	161	alert("게시글 등록에 오류가 발생했습니다.");
112	162	});
113	163	},
114	164	toggleEdit() {
115		- if (this.isEditing) {
	165	+ if (this.isEditing) {
116	166	this.dataInsert();
117	167	this.isEditing = false;
118	168	} else {
119		- // Enter edit mode
120	169	this.isEditing = true;
	170	+ this.fetchBooks();
121	171	}
122	172	},
123	173	deletePost() {
...	...	@@ -134,11 +184,40 @@
134	184	console.error("Error deleting post:", error);
135	185	alert("게시글 삭제에 오류가 발생했습니다.");
136	186	});
	187	+ },
	188	+ fetchBooks() {
	189	+ axios.post("/book/findAll.json", {}, {
	190	+ headers: {
	191	+ "Content-Type": "application/json; charset=UTF-8",
	192	+ }
	193	+ })
	194	+ .then(response => {
	195	+ this.books = response.data;
	196	+ })
	197	+ .catch(error => {
	198	+ console.error("fetchBooks - error:", error);
	199	+ alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
	200	+ });
	201	+ },
	202	+ fetchUnits() {
	203	+ if (!this.post.bookId) return;
	204	+
	205	+ axios.post("/unit/unitList.json", { bookId: this.post.bookId }, {
	206	+ headers: {
	207	+ "Content-Type": "application/json; charset=UTF-8",
	208	+ }
	209	+ })
	210	+ .then(response => {
	211	+ this.units = response.data;
	212	+ })
	213	+ .catch(error => {
	214	+ console.error("fetchUnits - error:", error);
	215	+ alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
	216	+ });
137	217	}
138	218	},
139	219	mounted() {
140	220	this.fetchPostDetail();
141		- console.log('Main2 mounted');
142	221	},
143	222	components: {
144	223	SvgIcon
...	...	@@ -146,6 +225,5 @@
146	225	};
147	226	</script>
148	227
149		-<style scoped>
150		-/* Add any necessary styles here */
	228	+<style scoped>
151	229	</style>

...	...	@@ -1,16 +1,23 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40 myplan">
3	3	<p class="title">지문</p>
4		- <select name="" id="">
5		- <option value="">A 교재</option>
	4	+ <select name="" id="" v-model="selectedBook" @change="fetchUnits">
	5	+ <option value="" disabled>교재를 선택하세요</option>
	6	+ <option v-for="book in books" :key="book.book_id" :value="book.book_id">
	7	+ {{ book.book_nm }}
	8	+ </option>
6	9	</select>
7	10	</div>
8		- <label for="" class="title2">단원</label>
9		- <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
10		- <button class="selected-btn">1</button>
11		- <button>2</button>
12		- <button>3</button>
13		- </div>
	11	+ <label for="" class="title2">단원</label>
	12	+ <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
	13	+ <button
	14	+ v-for="(unit, index) in units"
	15	+ :key="index"
	16	+ :class="{ 'selected-btn': selectedUnit === unit.unitId }"
	17	+ @click="selectUnit(unit.unitId)">
	18	+ {{ unit.unitName }}
	19	+ </button>
	20	+ </div>
14	21	<div class="search-wrap flex justify-end mb20">
15	22	<select name="" id="" class="mr10 data-wrap" style="width: 15rem;" v-model="option">
16	23	<option value="" disabled>검색유형</option>
...	...	@@ -78,6 +85,8 @@
78	85	totalPosts: 0,
79	86	option: "",
80	87	keyword: "",
	88	+ books: [],
	89	+ selectedBook: "",
81	90	optionList: [
82	91	{ text: "번호", value: "textId" },
83	92	{ text: "제목", value: "textTtl" },
...	...	@@ -85,8 +94,9 @@
85	94	{ text: "작성자", value: "userId" },
86	95	{ text: "등록일", value: "regDt" },
87	96	],
	97	+ units: [],
	98	+ selectedUnit: null,
88	99	searching: false,
89		-
90	100	};
91	101	},
92	102	methods: {
...	...	@@ -107,64 +117,110 @@
107	117	this.goBack();
108	118	}
109	119	},
	120	+ selectUnit(unitId) {
	121	+ this.selectedUnit = unitId;
	122	+ this.fetchData();
	123	+ },
110	124	search() {
111	125	if (!this.option) {
112	126	alert("검색유형을 선택해 주세요")
113	127	} else {
114		- this.currentPage = 1; // Reset to first page on new search
	128	+ this.currentPage = 1;
115	129	this.searching = true;
116		- this.fetchData(); // Call the method to fetch search results}
117		- }},
118		- fetchData() {
119		- const idx = (this.currentPage - 1) * this.pageSize;
120		- axios({
121		- url: "/text/textSearch.json",
122		- method: "post",
123		- headers: {
124		- "Content-Type": "application/json; charset=UTF-8",
125		- },
126		- data: {
127		- "option": this.option,
128		- "keyword": this.keyword,
129		- "pageSize": this.pageSize,
130		- "startIndex": idx
131		- },
132		- })
133		- .then(response => {
134		- this.posts = response.data.list;
135		- if (!this.searching \|\| this.keyword == "") {
136		- this.totalPosts = response.data.totalText;
137		- }
138		- else if (this.searching)
139		- this.totalPosts = response.data.resultCount;
140		- this.posts.forEach(post => {
141		- let regDt = post.regDt;
142		- let date = new Date(regDt);
143		- post.regDt = date.toISOString().split('T')[0];
144		- });
145		- })
146		- .catch(error => {
147		- console.error("fetchData - error: ", error);
148		- alert("검색 중 오류가 발생했습니다.");
	130	+ this.fetchData();
	131	+ }
	132	+ },
	133	+ fetchData() {
	134	+ const idx = (this.currentPage - 1) * this.pageSize;
	135	+ axios({
	136	+ url: "/text/textSearch.json",
	137	+ method: "post",
	138	+ headers: {
	139	+ "Content-Type": "application/json; charset=UTF-8",
	140	+ },
	141	+ data: {
	142	+ "option": this.option,
	143	+ "keyword": this.keyword,
	144	+ "pageSize": this.pageSize,
	145	+ "startIndex": idx,
	146	+ "unitId": this.selectedUnit
	147	+ },
	148	+ })
	149	+ .then(response => {
	150	+ this.posts = response.data.list;
	151	+ if (!this.searching \|\| this.keyword === "") {
	152	+ this.totalPosts = response.data.totalText;
	153	+ } else if (this.searching) {
	154	+ this.totalPosts = response.data.resultCount;
	155	+ }
	156	+ this.posts.forEach(post => {
	157	+ let regDt = post.regDt;
	158	+ let date = new Date(regDt);
	159	+ post.regDt = date.toISOString().split('T')[0];
149	160	});
150		- },
151		- changePage(page) {
152		- if (page > 0 && page <= this.totalPages) {
153		- this.currentPage = page;
154		- this.fetchData();
155		- }
	161	+ })
	162	+ .catch(error => {
	163	+ console.error("fetchData - error: ", error);
	164	+ alert("검색 중 오류가 발생했습니다.");
	165	+ });
	166	+ },
	167	+ changePage(page) {
	168	+ if (page > 0 && page <= this.totalPages) {
	169	+ this.currentPage = page;
	170	+ this.fetchData();
156	171	}
157	172	},
158		- computed: {
159		- totalPages() {
160		- return Math.ceil(this.totalPosts / this.pageSize);
161		- }
	173	+ fetchBooks() {
	174	+ axios({
	175	+ url: "/book/findAll.json",
	176	+ method: "post",
	177	+ headers: {
	178	+ "Content-Type": "application/json; charset=UTF-8",
	179	+ },
	180	+ })
	181	+ .then(response => {
	182	+ console.log(response.data)
	183	+ this.books = response.data;
	184	+ })
	185	+ .catch(error => {
	186	+ console.error("fetchBooks - error: ", error);
	187	+ alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
	188	+ });
162	189	},
163		- components: {
164		- SvgIcon
	190	+ fetchUnits() {
	191	+ if (!this.selectedBook) return;
	192	+
	193	+ axios({
	194	+ url: "/unit/unitList.json",
	195	+ method: "post",
	196	+ headers: {
	197	+ "Content-Type": "application/json; charset=UTF-8",
	198	+ },
	199	+ data: {
	200	+ "bookId": this.selectedBook
	201	+ },
	202	+ })
	203	+ .then(response => {
	204	+ console.log(response.data)
	205	+ this.units = response.data;
	206	+ })
	207	+ .catch(error => {
	208	+ console.error("fetchUnits - error: ", error);
	209	+ alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
	210	+ });
165	211	},
166		- mounted() {
167		- this.fetchData();
	212	+ },
	213	+ computed: {
	214	+ totalPages() {
	215	+ return Math.ceil(this.totalPosts / this.pageSize);
168	216	}
169		- };
	217	+ },
	218	+ components: {
	219	+ SvgIcon
	220	+ },
	221	+ mounted() {
	222	+ this.fetchBooks(); // Fetch books when the component is mounted
	223	+ this.fetchData(); // Fetch data for the default view
	224	+ }
	225	+};
170	226	</script>

Delete comment