Commit @01bbbd0a5ccfc84cd18ea4ae218a671433d13cf7

박민혁 08-19

240819 박민혁 선생님 화면 수정

@01bbbd0a5ccfc84cd18ea4ae218a671433d13cf7

c4aecb1

01bbbd0

client/views/Login.vue

--- client/views/Login.vue

+++ client/views/Login.vue


                     else if (roles.includes("TEACHER")) {
                      vm.goToPage('Board');
                     } 
+                    // 부모님은 Main으로 접근할 수 없음
+                    else if (roles.includes("PARENT")) {
+                     vm.goToPage('Main_p');
+                    } 
                 } 
             }).catch(error => {
                 console.error(error);

c4aecb1

01bbbd0

client/views/pages/teacher/QuestionDetail.vue

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

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


     <div class="title-box flex justify-between mb40">
         <p class="title">문제 조회</p>
     </div>
-    <div class="board-wrap">
-        <div class="tab-box" >
-            <label class="mr20 title1">
-               <input type="radio" v-model="selectedTab" value="tab1" />
-               문제 유형 (일반형)
-            </label>
-            <label class="mr20 title1">
-               <input type="radio" v-model="selectedTab" value="tab2" />
-               문제 유형 (O,X형)
-            </label>
-            <label class="mr20 title1">
-               <input type="radio" v-model="selectedTab" value="tab3" />
-               문제 유형 (연결형)
-            </label>
-            <label class="mr20 title1">
-               <input type="radio" v-model="selectedTab" value="tab4" />
-               문제 유형 (다중 정답형)
-            </label>
-        </div>
-        <hr>
-       <div class="gd-col2 " >
-            <div class="flex align-center mb20">
-                <label for="" class="title2">카테고리</label>
-                <select v-model="selectedSearchOption" class="mr10 data-wrap">
-                    <option value="bbsTtl">제목</option>
-                    <option value="bbsCnt">내용</option>
-                    <option value="userNm">작성자</option>
-                    <option value="bbsCls">카테고리</option>
-                </select>
+    <div class="content-t">
+        <div class="board-wrap">
+            <div class="tab-box">
+                <label class="mr20 title1">
+                    <input type="radio" v-model="selectedTab" value="tab1" />
+                    문제 유형 (일반형)
+                </label>
+                <label class="mr20 title1">
+                    <input type="radio" v-model="selectedTab" value="tab2" />
+                    문제 유형 (O,X형)
+                </label>
+                <label class="mr20 title1">
+                    <input type="radio" v-model="selectedTab" value="tab3" />
+                    문제 유형 (연결형)
+                </label>
+                <label class="mr20 title1">
+                    <input type="radio" v-model="selectedTab" value="tab4" />
+                    문제 유형 (다중 정답형)
+                </label>
             </div>
-            <div class="flex align-center mb20">
-                <label for="" class="title2">문제 유형</label>
-                <select v-model="selectedSearchOption" class="mr10 data-wrap">
-                    <option value="bbsTtl">제목</option>
-                    <option value="bbsCnt">내용</option>
-                    <option value="userNm">작성자</option>
-                    <option value="bbsCls">카테고리</option>
-                </select>
-            </div>
-            <div class="flex align-center">
-                <label for="" class="title2">지문</label>
-                <select v-model="selectedSearchOption" class="mr10 data-wrap">
-                    <option value="bbsTtl">제목</option>
-                    <option value="bbsCnt">내용</option>
-                    <option value="userNm">작성자</option>
-                    <option value="bbsCls">카테고리</option>
-                </select>
-            </div>
-            <div class="flex align-center">
-                <label for="" class="title2">문제 지표</label>
-                <select v-model="selectedSearchOption" class="mr10 data-wrap">
-                    <option value="bbsTtl">제목</option>
-                    <option value="bbsCnt">내용</option>
-                    <option value="userNm">작성자</option>
-                    <option value="bbsCls">카테고리</option>
-                </select>
-            </div>
-       </div>
-        <div class="flex align-center mb20 mt40">
-            <label for="" class="title2">문제 배점</label>
-            <input type="text" class="data-wrap">
-        </div>
-
-        <div class="flex align-center mb20">
-            <label for="" class="title2">내용</label>
-            <textarea name="" id="" class="data-wrap"></textarea>
-        </div>
-        <div class="flex align-center mb20">
-            <label for="" class="title2">힌트</label>
-            <input type="text" class="data-wrap">
-        </div>
-        <div class="flex align-center mb20">
-            <label for="" class="title2">첨부파일</label>
-            <input type="file" ref="fileInput" @change="handleFileUpload" />
-        </div>
-        <hr>
-        <div v-if="selectedTab === 'tab1'">
-            <div class="flex align-center mb20">
-                <label for="" class="title2">답1</label>
-                <input type="text" class="data-wrap">
-            </div>
-            <div class="flex align-center mb20">
-                <label for="" class="title2">답2</label>
-                <input type="text" class="data-wrap">
-            </div>
-            <div class="flex align-center mb20">
-                <label for="" class="title2">답3</label>
-                <input type="text" class="data-wrap">
-            </div>
-            <div class="flex align-center mb20">
-                <label for="" class="title2">답4</label>
-                <input type="text" class="data-wrap">
-            </div>
-            <div class="flex align-center mb20">
-                <label for="" class="title2">해설</label>
-                <textarea name="" id="" class="data-wrap"></textarea>
-            </div>
-        </div>
-       <div v-else-if="selectedTab === 'tab2'">
-            <div class="flex align-center mb20">
-                <label for="" class="title2">답</label>
+            <hr>
+            <div class="gd-col2 ">
+                <div class="flex align-center mb20">
+                    <label for="" class="title2">카테고리</label>
                     <select v-model="selectedSearchOption" class="mr10 data-wrap">
-                            <option value="bbsTtl">O</option>
-                            <option value="bbsCnt">X</option>
-                        </select>
-            </div>
-            <div class="flex align-center mb20">
-                <label for="" class="title2">해설</label>
-                <textarea name="" id="" class="data-wrap"></textarea>
-            </div>
-       </div>
-       <div v-else-if="selectedTab === 'tab3'">
-            <div class="gd-col2 " >
-                <div class="flex align-center mb20 mr40" >
-                    <label for="" class="title2">문제1</label>
-                    <input type="text" class="data-wrap">
+                        <option value="bbsTtl">제목</option>
+                        <option value="bbsCnt">내용</option>
+                        <option value="userNm">작성자</option>
+                        <option value="bbsCls">카테고리</option>
+                    </select>
                 </div>
                 <div class="flex align-center mb20">
-                    <label for="" class="title2">답1</label>
-                    <input type="text" class="data-wrap">
+                    <label for="" class="title2">문제 유형</label>
+                    <select v-model="selectedSearchOption" class="mr10 data-wrap">
+                        <option value="bbsTtl">제목</option>
+                        <option value="bbsCnt">내용</option>
+                        <option value="userNm">작성자</option>
+                        <option value="bbsCls">카테고리</option>
+                    </select>
                 </div>
-                <div class="flex align-center mb20 mr40">
-                    <label for="" class="title2">문제2</label>
+                <div class="flex align-center">
+                    <label for="" class="title2">지문</label>
+                    <select v-model="selectedSearchOption" class="mr10 data-wrap">
+                        <option value="bbsTtl">제목</option>
+                        <option value="bbsCnt">내용</option>
+                        <option value="userNm">작성자</option>
+                        <option value="bbsCls">카테고리</option>
+                    </select>
+                </div>
+                <div class="flex align-center">
+                    <label for="" class="title2">문제 지표</label>
+                    <select v-model="selectedSearchOption" class="mr10 data-wrap">
+                        <option value="bbsTtl">제목</option>
+                        <option value="bbsCnt">내용</option>
+                        <option value="userNm">작성자</option>
+                        <option value="bbsCls">카테고리</option>
+                    </select>
+                </div>
+            </div>
+            <div class="flex align-center mb20 mt40">
+                <label for="" class="title2">문제 배점</label>
+                <input type="text" class="data-wrap">
+            </div>
+
+            <div class="flex align-center mb20">
+                <label for="" class="title2">내용</label>
+                <textarea name="" id="" class="data-wrap"></textarea>
+            </div>
+            <div class="flex align-center mb20">
+                <label for="" class="title2">힌트</label>
+                <input type="text" class="data-wrap">
+            </div>
+            <div class="flex align-center mb20">
+                <label for="" class="title2">첨부파일</label>
+                <input type="file" ref="fileInput" @change="handleFileUpload" />
+            </div>
+            <hr>
+            <div v-if="selectedTab === 'tab1'">
+                <div class="flex align-center mb20">
+                    <label for="" class="title2">답1</label>
                     <input type="text" class="data-wrap">
                 </div>
                 <div class="flex align-center mb20">
                     <label for="" class="title2">답2</label>
                     <input type="text" class="data-wrap">
                 </div>
-                <div class="flex align-center mb20 mr40">
-                    <label for="" class="title2">문제3</label>
-                    <input type="text" class="data-wrap">
-                </div>
-                <div class="flex align-center mb20 ">
+                <div class="flex align-center mb20">
                     <label for="" class="title2">답3</label>
-                    <input type="text" class="data-wrap">
-                </div>
-                <div class="flex align-center mb20 mr40">
-                    <label for="" class="title2">문제4</label>
                     <input type="text" class="data-wrap">
                 </div>
                 <div class="flex align-center mb20">
                     <label for="" class="title2">답4</label>
                     <input type="text" class="data-wrap">
                 </div>
+                <div class="flex align-center mb20">
+                    <label for="" class="title2">해설</label>
+                    <textarea name="" id="" class="data-wrap"></textarea>
+                </div>
             </div>
-            <div class="flex align-center mb20">
-                <label for="" class="title2">해설</label>
-                <textarea name="" id="" class="data-wrap"></textarea>
+            <div v-else-if="selectedTab === 'tab2'">
+                <div class="flex align-center mb20">
+                    <label for="" class="title2">답</label>
+                    <select v-model="selectedSearchOption" class="mr10 data-wrap">
+                        <option value="bbsTtl">O</option>
+                        <option value="bbsCnt">X</option>
+                    </select>
+                </div>
+                <div class="flex align-center mb20">
+                    <label for="" class="title2">해설</label>
+                    <textarea name="" id="" class="data-wrap"></textarea>
+                </div>
             </div>
-       </div>
-       <div v-else-if="selectedTab === 'tab4'">
-                <div class="flex align-center mb20 mr40" >
+            <div v-else-if="selectedTab === 'tab3'">
+                <div class="gd-col2 ">
+                    <div class="flex align-center mb20 mr40">
+                        <label for="" class="title2">문제1</label>
+                        <input type="text" class="data-wrap">
+                    </div>
+                    <div class="flex align-center mb20">
+                        <label for="" class="title2">답1</label>
+                        <input type="text" class="data-wrap">
+                    </div>
+                    <div class="flex align-center mb20 mr40">
+                        <label for="" class="title2">문제2</label>
+                        <input type="text" class="data-wrap">
+                    </div>
+                    <div class="flex align-center mb20">
+                        <label for="" class="title2">답2</label>
+                        <input type="text" class="data-wrap">
+                    </div>
+                    <div class="flex align-center mb20 mr40">
+                        <label for="" class="title2">문제3</label>
+                        <input type="text" class="data-wrap">
+                    </div>
+                    <div class="flex align-center mb20 ">
+                        <label for="" class="title2">답3</label>
+                        <input type="text" class="data-wrap">
+                    </div>
+                    <div class="flex align-center mb20 mr40">
+                        <label for="" class="title2">문제4</label>
+                        <input type="text" class="data-wrap">
+                    </div>
+                    <div class="flex align-center mb20">
+                        <label for="" class="title2">답4</label>
+                        <input type="text" class="data-wrap">
+                    </div>
+                </div>
+                <div class="flex align-center mb20">
+                    <label for="" class="title2">해설</label>
+                    <textarea name="" id="" class="data-wrap"></textarea>
+                </div>
+            </div>
+            <div v-else-if="selectedTab === 'tab4'">
+                <div class="flex align-center mb20 mr40">
                     <label for="" class="title2">문제1</label>
                     <input type="text" class="data-wrap">
                     <input type="checkbox" class="ui-checkbox ml30">

                     <input type="text" class="data-wrap">
                     <input type="checkbox" class="ui-checkbox ml30">
                 </div>
-            <div class="flex align-center mb20">
-                <label for="" class="title2">해설</label>
-                <textarea name="" id="" class="data-wrap"></textarea>
+                <div class="flex align-center mb20">
+                    <label for="" class="title2">해설</label>
+                    <textarea name="" id="" class="data-wrap"></textarea>
+                </div>
             </div>
-       </div>
-       
-    </div>
-    <div class="flex justify-between mt50">
-        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')">
-            목록
-        </button>
-        <div class="flex">
-            <button type="button" title="글쓰기" class="new-btn mr10">
-                삭제
+
+        </div>
+        <div class="flex justify-between mt50">
+            <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')">
+                목록
             </button>
-            <button type="button" title="글쓰기" class="new-btn">
-                수정
-            </button>
+            <div class="flex">
+                <button type="button" title="글쓰기" class="new-btn mr10">
+                    삭제
+                </button>
+                <button type="button" title="글쓰기" class="new-btn">
+                    수정
+                </button>
+            </div>
         </div>
     </div>
 </template>

         return {
             mdiMagnify: mdiMagnify,
             selectedTab: 'tab1',
+            prblm: {},
+            dataList: [],
+            problemDetail: [],
         }
     },
     methods: {
         goToPage(page) {
             this.$router.push({ name: page });
         },
+        problemSearch() {
+            const vm = this;
+            vm.prblm = JSON.parse(sessionStorage.getItem("selectQuestionList"));
+            axios({
+                url: "problem/problemInfo.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    prblmId: vm.prblm.prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log("problem - response : ", res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+
+                })
+                .catch(function (error) {
+                    console.log("problem - error : ", error);
+                });
+        },
+
     },
     watch: {
 

         SvgIcon
     },
     mounted() {
-        console.log('Main2 mounted');
+        this.problemSearch();
     }
 }
 </script>
 <style scoped>
-.ui-checkbox{width: 30px; height: 30px;}
+.ui-checkbox {
+    width: 30px;
+    height: 30px;
+}
 </style>

c4aecb1

01bbbd0

client/views/pages/teacher/QuestionList.vue

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

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


 <template>
     <div class="title-box flex justify-between mb40">
         <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>
+    <div class="content-t">
+
     <label for="" class="title2">단원</label>
-        <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
-            <button @click="selectUnit('UNIT_000000000000001')" :class="{ 'selected-btn': selectedUnitId === 'UNIT_000000000000001' }">1</button>
-            <button @click="selectUnit('UNIT_000000000000002')" :class="{ 'selected-btn': selectedUnitId === 'UNIT_000000000000002' }">2</button>
-            <button @click="selectUnit('UNIT_000000000000003')" :class="{ 'selected-btn': selectedUnitId === 'UNIT_000000000000003' }">3</button>
-        </div>
+    <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
+        <button 
+            v-for="(unit, index) in units" 
+            :key="index" 
+            :class="{ 'selected-btn': selectedUnitId === 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" v-model="searchOption">
             <option value="">전체</option>

                 <tr v-for="(problem, index) in problems" :key="problem.prblmId" @click="[goToPage('QuestionDetail', selectQuestionList(problem))]">
                     <td>{{ (currentPage - 1) * 10 + index + 1 }}</td>
                     <td>{{ problem.prblmExpln }}</td>
-                    <td>{{ problem.prblmTypeId }}</td>
+                    <td>{{ problem.prblmTypeNm }}</td>
                     <td>{{ problem.prblmScr }}</td>
                     <td>{{ problem.userId }}</td>
                     <td>{{ problem.regDt}}</td>

         </table>
         <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
             <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
-                <img src="../../../resources/img/btn27_90t_normal.png" alt="">
+                <img src="../../../resources/img/btn27_90t_normal.png" alt="Previous">
             </button>
-            <button :class="{ 'selected-btn': currentPage === 1 }" @click="changePage(1)">1</button>
-            <button :class="{ 'selected-btn': currentPage === 2 }" @click="changePage(2)">2</button>
-            <button :class="{ 'selected-btn': currentPage === 3 }" @click="changePage(3)">3</button>
+            <button v-for="page in paginationButtons" :key="page" @click="changePage(page)" :class="{ 'selected-btn': currentPage === page }">
+                {{ page }}
+            </button>
             <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
-                <img src="../../../resources/img/btn28_90t_normal.png" alt="">
+                <img src="../../../resources/img/btn28_90t_normal.png" alt="Next">
             </button>
         </article>
         <div class="flex justify-end ">

                 등록
             </button>
         </div>
+    </div>
     </div>
 </template>
 

         return {
             mdiMagnify: mdiMagnify,
             problems: [],
+            units: [], 
+            books: [],
             currentPage: 1,
-            totalPages: 3,
+            pageSize: 10,
+            totalPosts: 0,
             searchOption: '',
             searchKeyword: '',
-            selectedUnitId: 'UNIT_000000000000001'
+            selectedUnitId: '',
+            selectedBook: "", 
         }
     },
     methods: {

             sessionStorage.setItem("selectQuestionList", JSON.stringify(item));
         },
         selectUnit(unitId) {
-        this.selectedUnitId = unitId; // 선택된 단원 ID 설정
-        this.fetchProblems(1); // 첫 페이지로 문제 목록 새로 고침
+            this.selectedUnitId = unitId; // 선택된 단원 ID 설정
+            this.fetchProblems(1); // 첫 페이지로 문제 목록 새로 고침
         },
         async fetchProblems(page = 1) {
             try {

                     pageSize: 10,
                     startIndex: (page - 1) * 10
                 });
-                this.problems = response.data;
+                this.problems = response.data.problems;
+                this.totalPosts = response.data.totalProblem;
+
                 this.currentPage = page;
             } catch (error) {
                 console.error('문제 목록을 불러오는 중 오류가 발생했습니다.', error);

         },
         searchProblems() {
             this.fetchProblems(1);
-        }
+        },
+        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("교재 목록을 불러오는 중 오류가 발생했습니다.");
+                });
+        },
+        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("단원 목록을 불러오는 중 오류가 발생했습니다.");
+                });
+        },
+
     },
     watch: {
     },
     computed: {
+        totalPages() {
+            return Math.ceil(this.totalPosts / this.pageSize);
+        },
+        paginationButtons() {
+            let start = Math.max(0, this.currentPage - 2);
+            let end = Math.min(start + 5, this.totalPages);
+
+            if (end - start < 5) {
+                start = Math.max(0, end - 5);
+            }
+
+            return Array.from({ length: end - start }, (_, i) => start + i + 1);
+        },
+
+        startIndex() {
+            return this.currentPage * this.itemsPerPage;
+        }
+
     },
     components: {
         SvgIcon
     },
     mounted() {
-        console.log('Main2 mounted');
+        this.selectedUnitId = this.$route.query.unit_id || '';
+        this.selectedBook = this.$route.query.book_id || '';
+        this.fetchBooks();
         this.fetchProblems();
+        this.fetchUnits();
     }
 }
 </script>

c4aecb1

01bbbd0

client/views/pages/teacher/TextBookDetail.vue

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

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


 <template>
     <div class="title-box flex justify-between mb40">
-    <p class="title">{{ bookDetails ? bookDetails.book_nm : 'Loading...' }}</p>
-  </div>
-    <label for="" class="title1">단원</label>
+        <p class="title">{{ bookDetails ? bookDetails.book_nm : 'Loading...' }}</p>
+    </div>
+    <div class="content-t">
+
+        <label for="" class="title1">단원</label>
         <div class="unit-pagination flex mt10" style="gap: 10px;">
-            <button class="selected-btn">1</button>
-            <button>2</button>
-            <button>3</button>
-            <button ><svg-icon type="mdi" :path="mdiPlus" style=" padding-top: 6px; width: 30px; height: 30px;"></svg-icon></button>
+            <button v-for="unit in units" :key="unit.unitId" @click="selectUnit(unit.unitId)"
+                :class="{ 'selected-btn': selectedUnitId === unit.unitId }">
+                {{ unit.unitName }}
+            </button>
+            <button><svg-icon type="mdi" :path="mdiPlus" @click="buttonSearch"
+                    style=" padding-top: 6px; width: 30px; height: 30px;"></svg-icon></button>
         </div>
-    <div class="board-wrap mt30">
-        <div class="mb20 ">
-            <div class="flex justify-between mb30 align-center">
-                <label for="" class="title1">지문</label>
-                <div class="look-btn flex align-center" @click="goToPage('TextList')">
-                    <p>자세히 보기 </p>
-                    <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
+        <div class="board-wrap mt30">
+            <div class="mb20 ">
+                <div class="flex justify-between mb30 align-center">
+                    <label for="" class="title1">지문</label>
+                    <div class="look-btn flex align-center" @click="goToPage('TextList')">
+                        <p>자세히 보기 </p>
+                        <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
+                    </div>
+                </div>
+                <div class="table-wrap">
+                    <table>
+                        <thead>
+                            <td>No.</td>
+                            <td>제목</td>
+                            <td>내용</td>
+                            <td>작성자</td>
+                            <td>등록일</td>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(post, index) in posts" :key="index" class="post">
+                                <td>{{ index }}</td>
+                                <td>{{ post.textTtl.slice(0, 20) }}{{ post.textTtl.length > 20 ? '...' : '' }}</td>
+                                <td>{{ post.textCnt.slice(0, 20) }}{{ post.textCnt.length > 20 ? '...' : '' }}</td>
+                                <td>{{ post.userId }}</td>
+                                <td>{{ post.regDt }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
-            <div class="table-wrap">
-                <table>
-                    <thead>
-                        <td>No.</td>
-                        <td>제목</td>
-                        <td>내용</td>
-                        <td>작성자</td>
-                        <td>등록일</td>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        <hr>
-        <div class="mb20" >
-            <div class="flex justify-between mb30 align-center">
-                <label for="" class="title1">문제</label>
-                <div class="look-btn flex align-center" @click="goToPage('QuestionList')">
-                    <p>자세히 보기 </p>
-                    <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
+            <hr>
+            <div class="mb20">
+                <div class="flex justify-between mb30 align-center">
+                    <label for="" class="title1">문제</label>
+                    <div class="look-btn flex align-center" @click="goToPage('QuestionList')">
+                        <p>자세히 보기 </p>
+                        <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
+                    </div>
+                </div>
+                <div class="table-wrap">
+                    <table>
+                        <thead>
+                            <td>No.</td>
+                            <td>문제</td>
+                            <td>유형</td>
+                            <td>점수</td>
+                            <td>작성자</td>
+                            <td>등록일</td>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(quiz, index) in quizs" :key="index" class="post">
+                                <td>{{ index }}</td>
+                                <td>{{ quiz.prblmExpln.slice(0, 20) }}{{ quiz.prblmExpln.length > 20 ? '...' : '' }}
+                                </td>
+                                <td>{{ quiz.prblmTypeNm }}</td>
+                                <td>{{ quiz.prblmScr }}</td>
+                                <td>{{ quiz.userId }}</td>
+                                <td>{{ quiz.regDt }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
-            <div class="table-wrap">
-                <table>
-                    <thead>
-                        <td>No.</td>
-                        <td>제목</td>
-                        <td>내용</td>
-                        <td>작성자</td>
-                        <td>등록일</td>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        <hr>
-        <div class="mb20" >
-            <div class="flex justify-between mb30 align-center">
-                <label for="" class="title1">단어</label>
-                <div class="look-btn flex align-center" @click="goToPage('VocaList')">
-                    <p>자세히 보기 </p>
-                    <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
+            <hr>
+            <div class="mb20">
+                <div class="flex justify-between mb30 align-center">
+                    <label for="" class="title1">단어</label>
+                    <div class="look-btn flex align-center" @click="goToPage('VocaList')">
+                        <p>자세히 보기 </p>
+                        <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
+                    </div>
+                </div>
+                <div class="table-wrap">
+                    <table>
+                        <thead>
+                            <td>No.</td>
+                            <td>지문</td>
+                            <td>단어 목록</td>
+                            <td>작성자</td>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(wordBook, index) in dataList" :key="wordBook.wdBookId">
+                                <td>{{ index }}</td>
+                                <td>{{ wordBook.textTtl }}</td>
+                                <td>{{ wordBook.wordsPreview }}</td>
+                                <td>{{ wordBook.userNm }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
-            <div class="table-wrap">
-                <table>
-                    <thead>
-                        <td>No.</td>
-                        <td>단어</td>
-                        <td>뜻</td>
-                        <td>작성자</td>
-                        <td>등록일</td>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        <hr>
-        <div class="mb20" >
-            <div class="flex justify-between mb30 align-center">
-                <label for="" class="title1">중간 평가</label>
-                <div class="look-btn flex align-center" @click="goToPage('ExamList')">
-                    <p>자세히 보기 </p>
-                    <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
+            <hr>
+            <div class="mb20">
+                <div class="flex justify-between mb30 align-center">
+                    <label for="" class="title1">중간 평가</label>
+                    <div class="look-btn flex align-center" @click="goToPage('ExamList')">
+                        <p>자세히 보기 </p>
+                        <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
+                    </div>
+                </div>
+                <div class="table-wrap">
+                    <table>
+                        <thead>
+                            <td>No.</td>
+                            <td>제목</td>
+                            <td>내용</td>
+                            <td>작성자</td>
+                            <td>등록일</td>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
-            <div class="table-wrap">
-                <table>
-                    <thead>
-                        <td>No.</td>
-                        <td>제목</td>
-                        <td>내용</td>
-                        <td>작성자</td>
-                        <td>등록일</td>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        <hr>
-        <div >
-            <div class="flex justify-between mb30 align-center">
-                <label for="" class="title1">최종 평가</label>
-                <div class="look-btn flex align-center" @click="goToPage('ExamList')">
-                    <p>자세히 보기 </p>
-                    <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
+            <hr>
+            <div>
+                <div class="flex justify-between mb30 align-center">
+                    <label for="" class="title1">최종 평가</label>
+                    <div class="look-btn flex align-center" @click="goToPage('ExamList')">
+                        <p>자세히 보기 </p>
+                        <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
+                    </div>
+                </div>
+                <div class="table-wrap">
+                    <table>
+                        <thead>
+                            <td>No.</td>
+                            <td>제목</td>
+                            <td>내용</td>
+                            <td>작성자</td>
+                            <td>등록일</td>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
-            <div class="table-wrap">
-                <table>
-                    <thead>
-                        <td>No.</td>
-                        <td>제목</td>
-                        <td>내용</td>
-                        <td>작성자</td>
-                        <td>등록일</td>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        </div>
+        <div class="flex justify-end mt30" style="gap: 10px;">
+            <button type="button" title="" class="new-btn" @click="goToPage('RoadMap')">
+                로드맵
+            </button>
+            <button type="button" title="" class="new-btn" @click="showConfirm('delete')">
+                삭제
+            </button>
         </div>
     </div>
-    <!-- <div class="flex justify-end mt30" style="gap: 10px;">
-        <button type="button" title="" class="new-btn" @click="goToPage('RoadMap')">
-            로드맵
-        </button>
-        <button type="button" title="" class="new-btn" @click="showConfirm('delete')">
-            삭제
-        </button>
-    </div> -->
+
+    <div v-show="searchOpen" class="popup-wrap">
+          <div class="popup-box">
+            <div class="flex justify-between mb30">
+              <p class="popup-title">단원 이름</p>
+              <button type="button" class="popup-close-btn" @click="closeBtn">
+                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
+              </button>
+            </div>
+            <div class="search-wrap mb30">
+              <input type="text" class="data-wrap" v-model="newUnitName" placeholder="단원 이름을 입력하세요">
+            </div>
+            <div class="flex justify-center">
+              <button type="button" title="취소" class="new-btn mr10" @click="closeBtn">
+                취소
+              </button>
+              <button type="button" title="생성" class="new-btn" @click="insertUnit()">
+                생성
+              </button>
+            </div>
+          </div>
+        </div>
+
 </template>
 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiPlus } from '@mdi/js';
+import { mdiMagnify, mdiPlus, mdiWindowClose } from '@mdi/js';
 import { mdilArrowRight } from '@mdi/light-js';
+
 import ProgressBar from '../../component/ProgressBar.vue';
 import axios from 'axios';
 

             mdiPlus: mdiPlus,
             mdiMagnify: mdiMagnify,
             mdilArrowRight: mdilArrowRight,
-            selectedBookId: this.$route.query.book_Id,
+            mdiWindowClose: mdiWindowClose,
+
+            selectedBookId: this.$route.query.book_id,
             bookDetails: null,
+            units: [],
+            posts: [],
+            quizs: [],
+            dataList: [],
+            totalPosts: [],
+            selectedUnitId: null, // 선택된 단원 ID 저장 변수
+            selectedUnitName: '', // 선택된 단원의 이름 저장 변수
+
+            searchOpen: false,
+            newUnitName: '',
+
         };
     },
     methods: {
+        // 페이지 이동
         goToPage(page) {
-            this.$router.push({ name: page });
+            this.$router.push({ name: page, query: { unit_id: this.selectedUnitId, book_id: this.$route.query.book_id } });
         },
+        // 단원 팝업
+        buttonSearch() {
+            this.searchOpen = true;
+        },
+        closeBtn() {
+            this.searchOpen = false;
+            this.newUnitName = '';
+        },
+
+        // 단원 추가 생성
+        insertUnit() {
+            if(this.newUnitName === ''){
+                alert("이름을 입력해주세요!");
+                return;
+            }
+
+            axios({
+                url: "/unit/insertUnit.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    bookId: this.$route.query.book_id,
+                    unitName: this.newUnitName,
+                }
+            })
+                .then(response => {
+                    this.findUnit();
+                    this.closeBtn();
+                })
+                .catch(error => {
+                    console.error('Error creating book:', error);
+                });
+        },
+
+
         fetchBookDetails() {
             axios({
                 url: "/book/find.json",

                     book_id: this.$route.query.book_id
                 }
             })
-            .then(response => {
-                console.log('Book details:', response.data);
-                this.bookDetails = response.data;
+                .then(response => {
+                    console.log('Book details:', response.data);
+                    this.bookDetails = response.data;
+                })
+                .catch(error => {
+                    console.error('Error fetching book details:', error);
+                });
+        },
+
+        // 책 아이디에 맞춘 단원 가져오기
+        findUnit() {
+            axios({
+                url: "/unit/unitList.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    bookId: this.$route.query.book_id
+                }
             })
-            .catch(error => {
-                console.error('Error fetching book details:', error);
-            });
-        }
+                .then(response => {
+                    console.log('Book details:', response.data);
+                    this.units = response.data;
+                    this.selectedUnitId = this.units[0].unitId;
+                    this.findText();
+                    this.findProblem();
+                    this.findWord();
+
+                })
+                .catch(error => {
+                    console.error('Error selectUnit details:', error);
+                });
+        },
+
+        // 단원을 선택했을 때 호출되는 메서드
+        selectUnit(unitId) {
+            this.selectedUnitId = unitId;
+            const selectedUnit = this.units.find(unit => unit.unitId === unitId);
+            this.selectedUnitName = selectedUnit ? selectedUnit.unitName : '';
+            this.findText();
+            this.findProblem();
+            this.findWord();
+        },
+
+        // 지문 정보 5개 정도 가져오기
+        findText() {
+            axios({
+                url: "/text/textSearch.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    "pageSize": 5,
+                    "startIndex": 0,
+                    "unitId": this.selectedUnitId
+                },
+            })
+                .then(response => {
+                    this.posts = response.data.list;
+                })
+                .catch(error => {
+                    console.error("fetchData - error: ", error);
+                    alert("검색 중 오류가 발생했습니다.");
+                });
+        },
+
+        // 문제 정보 5개 정도 가져오기
+        findProblem() {
+            axios({
+                url: "/problem/problemList.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    "pageSize": 5,
+                    "startIndex": 0,
+                    "unitId": this.selectedUnitId
+                },
+            })
+                .then(response => {
+
+                    this.quizs = response.data.problems;
+                })
+                .catch(error => {
+                    console.error("fetchData - error: ", error);
+                    alert("검색 중 오류가 발생했습니다.");
+                });
+        },
+
+        // 단어장 단어 5개 정도 조회
+        findWord() {
+            const vm = this;
+            axios({
+                url: "/wordbook/findByUnitId.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    "unitId": vm.selectedUnitId,
+                    "page": 1,
+                    "pageSize": 5
+                },
+            })
+                .then(function (response) {
+                    const wordBooks = response.data.wordBooks;
+                    vm.totalPosts = response.data.totalWordBooks;
+
+                    // 지문 제목 및 단어 목록 가져오기
+                    const fetchDataPromises = wordBooks.map(wordBook => {
+                        const textTitlePromise = axios.post("/text/selectOneText.json", {
+                            textId: wordBook.textId
+                        }).then(textResponse => {
+                            wordBook.textTtl = textResponse.data[0].text_ttl;
+                        }).catch(error => {
+                            console.error(`${wordBook.textId}으로 지문 제목 가져오기 실패: `, error);
+                            wordBook.textTtl = '제목값없음'; // 오류 시 기본값 설정
+                        });
+
+                        const wordsPromise = axios.post("/word/getWordsByBookId.json", {
+                            wdBookId: wordBook.wdBookId
+                        }).then(wordsResponse => {
+                            const words = wordsResponse.data.map(word => word.wdNm);
+                            wordBook.wordsPreview = vm.generateWordsPreview(words);
+                        }).catch(error => {
+                            console.error(`${wordBook.wdBookId}으로 단어 목록 가져오기 실패: `, error);
+                            wordBook.wordsPreview = '단어값없음'; // 오류 시 기본값 설정
+                        });
+
+                        return Promise.all([textTitlePromise, wordsPromise]);
+                    });
+
+                    // 모든 데이터 가져오기 작업이 완료되면 dataList에 데이터 설정
+                    Promise.all(fetchDataPromises).then(() => {
+                        vm.dataList = wordBooks;
+                    });
+                })
+                .catch(function (error) {
+                    console.log("dataList - error: ", error);
+                    alert("단어장 목록 조회에 오류가 발생했습니다.");
+                });
+        },
+        // 단어 목록 생략 String 생성 메서드
+        generateWordsPreview(words) {
+            const maxLength = 20; // 최대 표시 길이 설정
+            const wordString = words.join(', ');
+
+            if (wordString.length > maxLength) {
+                return wordString.substring(0, maxLength) + '...';
+            } else {
+                return wordString;
+            }
+        },
+
     },
     mounted() {
         console.log('Mounted with book_id:', this.$route.query.book_id);
         this.fetchBookDetails();
+        this.findUnit();
     },
     components: {
         SvgIcon,

c4aecb1

01bbbd0

client/views/pages/teacher/TextDetail.vue

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

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


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

             <textarea v-if="isEditing" v-model="post.textCnt" class="data-wrap"></textarea>
             <p v-else class="data-wrap">{{ post.textCnt }}</p>
         </div>
+        <hr>
+        <div class="flex align-center">
+            <label for="" class="title2">첨부파일</label>
+            <label for="" class="title2" v-if="file">{{ file.fileNm }}</label>
+        </div>
+
     </div>
     <div class="flex justify-between mt50">
         <button type="button" title="목록으로" class="new-btn" @click="goToPage('TextList')">

                 textTypeId: "",
                 bookId: "",
                 unitId: "",
-                bookName: "",  
-                unitName: ""
+                bookName: "",
+                unitName: "",
+                fileMngId: "",
             },
-            books: [],  
-            units: [], 
+            books: [],
+            units: [],
+            file: {},
             isEditing: false
         };
     },

                         this.post.unitId = response.data[0].unit_id;
                         this.post.bookName = response.data[0].book_name;
                         this.post.unitName = response.data[0].unit_name;
+                        this.post.fileMngId = response.data[0].file_mng_id;
+                        this.findFile();
                     } else {
                         this.error = "Failed to fetch post details.";
                     }

                     this.error = "Failed to fetch post details.";
                 });
         },
+
+        findFile() {
+            const vm = this;
+            axios({
+                url: "/file/find.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    file_mng_id: vm.post.fileMngId,
+                },
+            })
+                .then(function (res) {
+                    console.log("fileInfo - response : ", res.data.list[0]);
+                    vm.file = res.data.list[0];
+                    sessionStorage.setItem("file", JSON.stringify(vm.file));
+                })
+                .catch(function (error) {
+                    console.log("result - error : ", error);
+                });
+        },
+
         dataInsert() {
             this.newPost = {
                 textId: this.post.textId,

             } else {
                 this.isEditing = true;
                 this.fetchBooks();
+                this.fetchUnits();
             }
         },
         deletePost() {

                 }
             })
                 .then(response => {
-                    this.books = response.data;  
+                    this.books = response.data;
                 })
                 .catch(error => {
                     console.error("fetchBooks - error:", error);

                 });
         },
         fetchUnits() {
-            if (!this.post.bookId) return;  
+            if (!this.post.bookId) return;
 
             axios.post("/unit/unitList.json", { bookId: this.post.bookId }, {
                 headers: {

                 }
             })
                 .then(response => {
-                    this.units = response.data;  
+                    this.units = response.data;
                 })
                 .catch(error => {
                     console.error("fetchUnits - error:", error);

 };
 </script>
 
-<style scoped> 
-</style>
+<style scoped></style>

c4aecb1

01bbbd0

client/views/pages/teacher/TextInsert.vue

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

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

...	...	@@ -1,4 +1,3 @@
1		-
2	1	<template>
3	2	<div class="title-box flex justify-between mb40">
4	3	<p class="title">지문 등록</p>
...	...	@@ -41,6 +40,12 @@
41	40	<label for="" class="title2">스크립트</label>
42	41	<textarea name="" id="" class="data-wrap" v-model="newData.textCnt"></textarea>
43	42	</div>
	43	+ <hr>
	44	+ <div class="flex align-center ">
	45	+ <label for="file" class="title2">첨부파일</label>
	46	+ <input type="file" ref="fileInput" @change="handleFileUpload" multiple />
	47	+ </div>
	48	+
44	49	</div>
45	50	<div class="flex justify-between mt50">
46	51	<button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')">
...	...	@@ -58,6 +63,7 @@
58	63	import axios from "axios";
59	64	import SvgIcon from '@jamescoyle/vue-icon';
60	65	import { mdiMagnify } from '@mdi/js';
	66	+import store from '../AppStore';
61	67
62	68
63	69	export default {
...	...	@@ -76,20 +82,28 @@
76	82	textCnt: "",
77	83	textUrl: "",
78	84	textTypeId: "",
79		- //fileMngId:"",
80		- // userId:"".
	85	+ fileMngId: "",
	86	+ userId: "",
81	87	bookId: "",
82	88	unitId: ""
83	89	},
84		- books: [],
85		- units: [],
	90	+ books: [],
	91	+ units: [],
	92	+
	93	+ file: "",
	94	+ selectedFiles: [],
86	95	}
87	96	},
88	97	methods: {
89	98	goToPage(page) {
90	99	this.$router.push({ name: page });
91		- }, fetchPostDetail() {
92		- const textId = this.$route.query.textId
	100	+ },
	101	+ handleFileUpload(e) {
	102	+ this.selectedFiles = e.target.files;
	103	+ },
	104	+
	105	+ fetchPostDetail() {
	106	+ const textId = this.$route.query.textId;
93	107	axios({
94	108	url: `/text/selectOneText.json`,
95	109	method: "post",
...	...	@@ -112,8 +126,31 @@
112	126	console.error("Error fetching post detail:", error);
113	127	this.error = "Failed to fetch post details.";
114	128	});
115		- }, dataInsert() {
	129	+ },
	130	+ async dataInsert() {
116	131	const vm = this;
	132	+
	133	+ if (this.selectedFiles && this.selectedFiles.length > 0) {
	134	+ // 파일 업로드
	135	+ const formData = new FormData();
	136	+ for (let i = 0; i < this.selectedFiles.length; i++) {
	137	+ formData.append("files", this.selectedFiles[i]);
	138	+ }
	139	+
	140	+ const fileUploadResponse = await axios.post(
	141	+ "/file/upload.json",
	142	+ formData,
	143	+ {
	144	+ headers: {
	145	+ "Content-Type": "multipart/form-data",
	146	+ },
	147	+ }
	148	+ );
	149	+
	150	+ // 업로드 후 파일 매니지 아이디 호출
	151	+ vm.newData.fileMngId = fileUploadResponse.data.fileMngId;
	152	+ }
	153	+
117	154	axios({
118	155	url: "/text/insertText.json",
119	156	method: "post",
...	...	@@ -174,7 +211,7 @@
174	211	})
175	212	.then(response => {
176	213	console.log(response.data)
177		- this.books = response.data;
	214	+ this.books = response.data;
178	215	})
179	216	.catch(error => {
180	217	console.error("fetchBooks - error: ", error);
...	...	@@ -182,7 +219,7 @@
182	219	});
183	220	},
184	221	fetchUnits() {
185		- if (!this.newData.bookId) return;
	222	+ if (!this.newData.bookId) return;
186	223
187	224	axios({
188	225	url: "/unit/unitList.json",
...	...	@@ -196,7 +233,7 @@
196	233	})
197	234	.then(response => {
198	235	console.log(response.data)
199		- this.units = response.data;
	236	+ this.units = response.data;
200	237	})
201	238	.catch(error => {
202	239	console.error("fetchUnits - error: ", error);
...	...	@@ -215,7 +252,16 @@
215	252	},
216	253	mounted() {
217	254	this.fetchPostDetail();
218		- this.fetchBooks();
	255	+
	256	+ this.newData.bookId = this.$route.query.book_id;
	257	+ this.newData.unitId = this.$route.query.unit_id;
	258	+
	259	+ this.newData.userId = store.getters.getUserInfo.userId;
	260	+
	261	+ this.fetchBooks();
	262	+ this.fetchUnits();
	263	+
	264	+
219	265	console.log('Main2 mounted');
220	266	}
221	267	}

c4aecb1

01bbbd0

client/views/pages/teacher/TextList.vue

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

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


     <div class="title-box flex justify-between mb40 myplan">
         <p class="title">지문</p>
         <select name="" id="" v-model="selectedBook" @change="fetchUnits">
-            <option value="" disabled>교재를 선택하세요</option>
+            <option value="" disabled selected>교재를 선택하세요</option>
             <option v-for="book in books" :key="book.book_id" :value="book.book_id">
                 {{ book.book_nm }}
             </option>
         </select>
     </div>
+    <div class="content-t">
+
     <label for="" class="title2">단원</label>
     <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
         <button 

             </button>
         </div>
     </div>
+</div>
 </template>
 
 <script>

     },
     methods: {
         goToPage(page, textId) {
-            this.$router.push({ name: page, query: { textId } });
+            this.$router.push({ name: page, query: { textId, unit_id: this.selectedUnit, book_id: this.selectedBook  } });
         },
         showConfirm(type) {
             let message = '';

         SvgIcon
     },
     mounted() {
+        this.selectedUnit = this.$route.query.unit_id || '';
+        this.selectedBook = this.$route.query.book_id || '';
         this.fetchBooks(); // Fetch books when the component is mounted
         this.fetchData(); // Fetch data for the default view
+        this.fetchUnits();
     }
 };
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -212,6 +212,10 @@
212	212	else if (roles.includes("TEACHER")) {
213	213	vm.goToPage('Board');
214	214	}
	215	+ // 부모님은 Main으로 접근할 수 없음
	216	+ else if (roles.includes("PARENT")) {
	217	+ vm.goToPage('Main_p');
	218	+ }
215	219	}
216	220	}).catch(error => {
217	221	console.error(error);

...	...	@@ -2,159 +2,160 @@
2	2	<div class="title-box flex justify-between mb40">
3	3	<p class="title">문제 조회</p>
4	4	</div>
5		- <div class="board-wrap">
6		- <div class="tab-box" >
7		- <label class="mr20 title1">
8		- <input type="radio" v-model="selectedTab" value="tab1" />
9		- 문제 유형 (일반형)
10		- </label>
11		- <label class="mr20 title1">
12		- <input type="radio" v-model="selectedTab" value="tab2" />
13		- 문제 유형 (O,X형)
14		- </label>
15		- <label class="mr20 title1">
16		- <input type="radio" v-model="selectedTab" value="tab3" />
17		- 문제 유형 (연결형)
18		- </label>
19		- <label class="mr20 title1">
20		- <input type="radio" v-model="selectedTab" value="tab4" />
21		- 문제 유형 (다중 정답형)
22		- </label>
23		- </div>
24		- <hr>
25		- <div class="gd-col2 " >
26		- <div class="flex align-center mb20">
27		- <label for="" class="title2">카테고리</label>
28		- <select v-model="selectedSearchOption" class="mr10 data-wrap">
29		- <option value="bbsTtl">제목</option>
30		- <option value="bbsCnt">내용</option>
31		- <option value="userNm">작성자</option>
32		- <option value="bbsCls">카테고리</option>
33		- </select>
	5	+ <div class="content-t">
	6	+ <div class="board-wrap">
	7	+ <div class="tab-box">
	8	+ <label class="mr20 title1">
	9	+ <input type="radio" v-model="selectedTab" value="tab1" />
	10	+ 문제 유형 (일반형)
	11	+ </label>
	12	+ <label class="mr20 title1">
	13	+ <input type="radio" v-model="selectedTab" value="tab2" />
	14	+ 문제 유형 (O,X형)
	15	+ </label>
	16	+ <label class="mr20 title1">
	17	+ <input type="radio" v-model="selectedTab" value="tab3" />
	18	+ 문제 유형 (연결형)
	19	+ </label>
	20	+ <label class="mr20 title1">
	21	+ <input type="radio" v-model="selectedTab" value="tab4" />
	22	+ 문제 유형 (다중 정답형)
	23	+ </label>
34	24	</div>
35		- <div class="flex align-center mb20">
36		- <label for="" class="title2">문제 유형</label>
37		- <select v-model="selectedSearchOption" class="mr10 data-wrap">
38		- <option value="bbsTtl">제목</option>
39		- <option value="bbsCnt">내용</option>
40		- <option value="userNm">작성자</option>
41		- <option value="bbsCls">카테고리</option>
42		- </select>
43		- </div>
44		- <div class="flex align-center">
45		- <label for="" class="title2">지문</label>
46		- <select v-model="selectedSearchOption" class="mr10 data-wrap">
47		- <option value="bbsTtl">제목</option>
48		- <option value="bbsCnt">내용</option>
49		- <option value="userNm">작성자</option>
50		- <option value="bbsCls">카테고리</option>
51		- </select>
52		- </div>
53		- <div class="flex align-center">
54		- <label for="" class="title2">문제 지표</label>
55		- <select v-model="selectedSearchOption" class="mr10 data-wrap">
56		- <option value="bbsTtl">제목</option>
57		- <option value="bbsCnt">내용</option>
58		- <option value="userNm">작성자</option>
59		- <option value="bbsCls">카테고리</option>
60		- </select>
61		- </div>
62		- </div>
63		- <div class="flex align-center mb20 mt40">
64		- <label for="" class="title2">문제 배점</label>
65		- <input type="text" class="data-wrap">
66		- </div>
67		-
68		- <div class="flex align-center mb20">
69		- <label for="" class="title2">내용</label>
70		- <textarea name="" id="" class="data-wrap"></textarea>
71		- </div>
72		- <div class="flex align-center mb20">
73		- <label for="" class="title2">힌트</label>
74		- <input type="text" class="data-wrap">
75		- </div>
76		- <div class="flex align-center mb20">
77		- <label for="" class="title2">첨부파일</label>
78		- <input type="file" ref="fileInput" @change="handleFileUpload" />
79		- </div>
80		- <hr>
81		- <div v-if="selectedTab === 'tab1'">
82		- <div class="flex align-center mb20">
83		- <label for="" class="title2">답1</label>
84		- <input type="text" class="data-wrap">
85		- </div>
86		- <div class="flex align-center mb20">
87		- <label for="" class="title2">답2</label>
88		- <input type="text" class="data-wrap">
89		- </div>
90		- <div class="flex align-center mb20">
91		- <label for="" class="title2">답3</label>
92		- <input type="text" class="data-wrap">
93		- </div>
94		- <div class="flex align-center mb20">
95		- <label for="" class="title2">답4</label>
96		- <input type="text" class="data-wrap">
97		- </div>
98		- <div class="flex align-center mb20">
99		- <label for="" class="title2">해설</label>
100		- <textarea name="" id="" class="data-wrap"></textarea>
101		- </div>
102		- </div>
103		- <div v-else-if="selectedTab === 'tab2'">
104		- <div class="flex align-center mb20">
105		- <label for="" class="title2">답</label>
	25	+ <hr>
	26	+ <div class="gd-col2 ">
	27	+ <div class="flex align-center mb20">
	28	+ <label for="" class="title2">카테고리</label>
106	29	<select v-model="selectedSearchOption" class="mr10 data-wrap">
107		- <option value="bbsTtl">O</option>
108		- <option value="bbsCnt">X</option>
109		- </select>
110		- </div>
111		- <div class="flex align-center mb20">
112		- <label for="" class="title2">해설</label>
113		- <textarea name="" id="" class="data-wrap"></textarea>
114		- </div>
115		- </div>
116		- <div v-else-if="selectedTab === 'tab3'">
117		- <div class="gd-col2 " >
118		- <div class="flex align-center mb20 mr40" >
119		- <label for="" class="title2">문제1</label>
120		- <input type="text" class="data-wrap">
	30	+ <option value="bbsTtl">제목</option>
	31	+ <option value="bbsCnt">내용</option>
	32	+ <option value="userNm">작성자</option>
	33	+ <option value="bbsCls">카테고리</option>
	34	+ </select>
121	35	</div>
122	36	<div class="flex align-center mb20">
123		- <label for="" class="title2">답1</label>
124		- <input type="text" class="data-wrap">
	37	+ <label for="" class="title2">문제 유형</label>
	38	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	39	+ <option value="bbsTtl">제목</option>
	40	+ <option value="bbsCnt">내용</option>
	41	+ <option value="userNm">작성자</option>
	42	+ <option value="bbsCls">카테고리</option>
	43	+ </select>
125	44	</div>
126		- <div class="flex align-center mb20 mr40">
127		- <label for="" class="title2">문제2</label>
	45	+ <div class="flex align-center">
	46	+ <label for="" class="title2">지문</label>
	47	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	48	+ <option value="bbsTtl">제목</option>
	49	+ <option value="bbsCnt">내용</option>
	50	+ <option value="userNm">작성자</option>
	51	+ <option value="bbsCls">카테고리</option>
	52	+ </select>
	53	+ </div>
	54	+ <div class="flex align-center">
	55	+ <label for="" class="title2">문제 지표</label>
	56	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	57	+ <option value="bbsTtl">제목</option>
	58	+ <option value="bbsCnt">내용</option>
	59	+ <option value="userNm">작성자</option>
	60	+ <option value="bbsCls">카테고리</option>
	61	+ </select>
	62	+ </div>
	63	+ </div>
	64	+ <div class="flex align-center mb20 mt40">
	65	+ <label for="" class="title2">문제 배점</label>
	66	+ <input type="text" class="data-wrap">
	67	+ </div>
	68	+
	69	+ <div class="flex align-center mb20">
	70	+ <label for="" class="title2">내용</label>
	71	+ <textarea name="" id="" class="data-wrap"></textarea>
	72	+ </div>
	73	+ <div class="flex align-center mb20">
	74	+ <label for="" class="title2">힌트</label>
	75	+ <input type="text" class="data-wrap">
	76	+ </div>
	77	+ <div class="flex align-center mb20">
	78	+ <label for="" class="title2">첨부파일</label>
	79	+ <input type="file" ref="fileInput" @change="handleFileUpload" />
	80	+ </div>
	81	+ <hr>
	82	+ <div v-if="selectedTab === 'tab1'">
	83	+ <div class="flex align-center mb20">
	84	+ <label for="" class="title2">답1</label>
128	85	<input type="text" class="data-wrap">
129	86	</div>
130	87	<div class="flex align-center mb20">
131	88	<label for="" class="title2">답2</label>
132	89	<input type="text" class="data-wrap">
133	90	</div>
134		- <div class="flex align-center mb20 mr40">
135		- <label for="" class="title2">문제3</label>
136		- <input type="text" class="data-wrap">
137		- </div>
138		- <div class="flex align-center mb20 ">
	91	+ <div class="flex align-center mb20">
139	92	<label for="" class="title2">답3</label>
140		- <input type="text" class="data-wrap">
141		- </div>
142		- <div class="flex align-center mb20 mr40">
143		- <label for="" class="title2">문제4</label>
144	93	<input type="text" class="data-wrap">
145	94	</div>
146	95	<div class="flex align-center mb20">
147	96	<label for="" class="title2">답4</label>
148	97	<input type="text" class="data-wrap">
149	98	</div>
	99	+ <div class="flex align-center mb20">
	100	+ <label for="" class="title2">해설</label>
	101	+ <textarea name="" id="" class="data-wrap"></textarea>
	102	+ </div>
150	103	</div>
151		- <div class="flex align-center mb20">
152		- <label for="" class="title2">해설</label>
153		- <textarea name="" id="" class="data-wrap"></textarea>
	104	+ <div v-else-if="selectedTab === 'tab2'">
	105	+ <div class="flex align-center mb20">
	106	+ <label for="" class="title2">답</label>
	107	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	108	+ <option value="bbsTtl">O</option>
	109	+ <option value="bbsCnt">X</option>
	110	+ </select>
	111	+ </div>
	112	+ <div class="flex align-center mb20">
	113	+ <label for="" class="title2">해설</label>
	114	+ <textarea name="" id="" class="data-wrap"></textarea>
	115	+ </div>
154	116	</div>
155		- </div>
156		- <div v-else-if="selectedTab === 'tab4'">
157		- <div class="flex align-center mb20 mr40" >
	117	+ <div v-else-if="selectedTab === 'tab3'">
	118	+ <div class="gd-col2 ">
	119	+ <div class="flex align-center mb20 mr40">
	120	+ <label for="" class="title2">문제1</label>
	121	+ <input type="text" class="data-wrap">
	122	+ </div>
	123	+ <div class="flex align-center mb20">
	124	+ <label for="" class="title2">답1</label>
	125	+ <input type="text" class="data-wrap">
	126	+ </div>
	127	+ <div class="flex align-center mb20 mr40">
	128	+ <label for="" class="title2">문제2</label>
	129	+ <input type="text" class="data-wrap">
	130	+ </div>
	131	+ <div class="flex align-center mb20">
	132	+ <label for="" class="title2">답2</label>
	133	+ <input type="text" class="data-wrap">
	134	+ </div>
	135	+ <div class="flex align-center mb20 mr40">
	136	+ <label for="" class="title2">문제3</label>
	137	+ <input type="text" class="data-wrap">
	138	+ </div>
	139	+ <div class="flex align-center mb20 ">
	140	+ <label for="" class="title2">답3</label>
	141	+ <input type="text" class="data-wrap">
	142	+ </div>
	143	+ <div class="flex align-center mb20 mr40">
	144	+ <label for="" class="title2">문제4</label>
	145	+ <input type="text" class="data-wrap">
	146	+ </div>
	147	+ <div class="flex align-center mb20">
	148	+ <label for="" class="title2">답4</label>
	149	+ <input type="text" class="data-wrap">
	150	+ </div>
	151	+ </div>
	152	+ <div class="flex align-center mb20">
	153	+ <label for="" class="title2">해설</label>
	154	+ <textarea name="" id="" class="data-wrap"></textarea>
	155	+ </div>
	156	+ </div>
	157	+ <div v-else-if="selectedTab === 'tab4'">
	158	+ <div class="flex align-center mb20 mr40">
158	159	<label for="" class="title2">문제1</label>
159	160	<input type="text" class="data-wrap">
160	161	<input type="checkbox" class="ui-checkbox ml30">
...	...	@@ -174,24 +175,25 @@
174	175	<input type="text" class="data-wrap">
175	176	<input type="checkbox" class="ui-checkbox ml30">
176	177	</div>
177		- <div class="flex align-center mb20">
178		- <label for="" class="title2">해설</label>
179		- <textarea name="" id="" class="data-wrap"></textarea>
	178	+ <div class="flex align-center mb20">
	179	+ <label for="" class="title2">해설</label>
	180	+ <textarea name="" id="" class="data-wrap"></textarea>
	181	+ </div>
180	182	</div>
181		- </div>
182		-
183		- </div>
184		- <div class="flex justify-between mt50">
185		- <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')">
186		- 목록
187		- </button>
188		- <div class="flex">
189		- <button type="button" title="글쓰기" class="new-btn mr10">
190		- 삭제
	183	+
	184	+ </div>
	185	+ <div class="flex justify-between mt50">
	186	+ <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')">
	187	+ 목록
191	188	</button>
192		- <button type="button" title="글쓰기" class="new-btn">
193		- 수정
194		- </button>
	189	+ <div class="flex">
	190	+ <button type="button" title="글쓰기" class="new-btn mr10">
	191	+ 삭제
	192	+ </button>
	193	+ <button type="button" title="글쓰기" class="new-btn">
	194	+ 수정
	195	+ </button>
	196	+ </div>
195	197	</div>
196	198	</div>
197	199	</template>
...	...	@@ -206,12 +208,39 @@
206	208	return {
207	209	mdiMagnify: mdiMagnify,
208	210	selectedTab: 'tab1',
	211	+ prblm: {},
	212	+ dataList: [],
	213	+ problemDetail: [],
209	214	}
210	215	},
211	216	methods: {
212	217	goToPage(page) {
213	218	this.$router.push({ name: page });
214	219	},
	220	+ problemSearch() {
	221	+ const vm = this;
	222	+ vm.prblm = JSON.parse(sessionStorage.getItem("selectQuestionList"));
	223	+ axios({
	224	+ url: "problem/problemInfo.json",
	225	+ method: "post",
	226	+ headers: {
	227	+ "Content-Type": "application/json; charset=UTF-8",
	228	+ },
	229	+ data: {
	230	+ prblmId: vm.prblm.prblmId,
	231	+ },
	232	+ })
	233	+ .then(function (res) {
	234	+ console.log("problem - response : ", res.data);
	235	+ vm.dataList = res.data.problem;
	236	+ vm.problemDetail = res.data.problemDetail;
	237	+
	238	+ })
	239	+ .catch(function (error) {
	240	+ console.log("problem - error : ", error);
	241	+ });
	242	+ },
	243	+
215	244	},
216	245	watch: {
217	246
...	...	@@ -223,10 +252,13 @@
223	252	SvgIcon
224	253	},
225	254	mounted() {
226		- console.log('Main2 mounted');
	255	+ this.problemSearch();
227	256	}
228	257	}
229	258	</script>
230	259	<style scoped>
231		-.ui-checkbox{width: 30px; height: 30px;}
	260	+.ui-checkbox {
	261	+ width: 30px;
	262	+ height: 30px;
	263	+}
232	264	</style>

...	...	@@ -1,16 +1,25 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
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>
	11	+ <div class="content-t">
	12	+
8	13	<label for="" class="title2">단원</label>
9		- <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
10		- <button @click="selectUnit('UNIT_000000000000001')" :class="{ 'selected-btn': selectedUnitId === 'UNIT_000000000000001' }">1</button>
11		- <button @click="selectUnit('UNIT_000000000000002')" :class="{ 'selected-btn': selectedUnitId === 'UNIT_000000000000002' }">2</button>
12		- <button @click="selectUnit('UNIT_000000000000003')" :class="{ 'selected-btn': selectedUnitId === 'UNIT_000000000000003' }">3</button>
13		- </div>
	14	+ <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
	15	+ <button
	16	+ v-for="(unit, index) in units"
	17	+ :key="index"
	18	+ :class="{ 'selected-btn': selectedUnitId === unit.unitId }"
	19	+ @click="selectUnit(unit.unitId)">
	20	+ {{ unit.unitName }}
	21	+ </button>
	22	+ </div>
14	23	<div class="search-wrap flex justify-end mb20">
15	24	<select name="" id="" class="mr10 data-wrap" v-model="searchOption">
16	25	<option value="">전체</option>
...	...	@@ -39,7 +48,7 @@
39	48	<tr v-for="(problem, index) in problems" :key="problem.prblmId" @click="[goToPage('QuestionDetail', selectQuestionList(problem))]">
40	49	<td>{{ (currentPage - 1) * 10 + index + 1 }}</td>
41	50	<td>{{ problem.prblmExpln }}</td>
42		- <td>{{ problem.prblmTypeId }}</td>
	51	+ <td>{{ problem.prblmTypeNm }}</td>
43	52	<td>{{ problem.prblmScr }}</td>
44	53	<td>{{ problem.userId }}</td>
45	54	<td>{{ problem.regDt}}</td>
...	...	@@ -48,13 +57,13 @@
48	57	</table>
49	58	<article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
50	59	<button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
51		- <img src="../../../resources/img/btn27_90t_normal.png" alt="">
	60	+ <img src="../../../resources/img/btn27_90t_normal.png" alt="Previous">
52	61	</button>
53		- <button :class="{ 'selected-btn': currentPage === 1 }" @click="changePage(1)">1</button>
54		- <button :class="{ 'selected-btn': currentPage === 2 }" @click="changePage(2)">2</button>
55		- <button :class="{ 'selected-btn': currentPage === 3 }" @click="changePage(3)">3</button>
	62	+ <button v-for="page in paginationButtons" :key="page" @click="changePage(page)" :class="{ 'selected-btn': currentPage === page }">
	63	+ {{ page }}
	64	+ </button>
56	65	<button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
57		- <img src="../../../resources/img/btn28_90t_normal.png" alt="">
	66	+ <img src="../../../resources/img/btn28_90t_normal.png" alt="Next">
58	67	</button>
59	68	</article>
60	69	<div class="flex justify-end ">
...	...	@@ -62,6 +71,7 @@
62	71	등록
63	72	</button>
64	73	</div>
	74	+ </div>
65	75	</div>
66	76	</template>
67	77
...	...	@@ -75,11 +85,15 @@
75	85	return {
76	86	mdiMagnify: mdiMagnify,
77	87	problems: [],
	88	+ units: [],
	89	+ books: [],
78	90	currentPage: 1,
79		- totalPages: 3,
	91	+ pageSize: 10,
	92	+ totalPosts: 0,
80	93	searchOption: '',
81	94	searchKeyword: '',
82		- selectedUnitId: 'UNIT_000000000000001'
	95	+ selectedUnitId: '',
	96	+ selectedBook: "",
83	97	}
84	98	},
85	99	methods: {
...	...	@@ -104,8 +118,8 @@
104	118	sessionStorage.setItem("selectQuestionList", JSON.stringify(item));
105	119	},
106	120	selectUnit(unitId) {
107		- this.selectedUnitId = unitId; // 선택된 단원 ID 설정
108		- this.fetchProblems(1); // 첫 페이지로 문제 목록 새로 고침
	121	+ this.selectedUnitId = unitId; // 선택된 단원 ID 설정
	122	+ this.fetchProblems(1); // 첫 페이지로 문제 목록 새로 고침
109	123	},
110	124	async fetchProblems(page = 1) {
111	125	try {
...	...	@@ -116,7 +130,9 @@
116	130	pageSize: 10,
117	131	startIndex: (page - 1) * 10
118	132	});
119		- this.problems = response.data;
	133	+ this.problems = response.data.problems;
	134	+ this.totalPosts = response.data.totalProblem;
	135	+
120	136	this.currentPage = page;
121	137	} catch (error) {
122	138	console.error('문제 목록을 불러오는 중 오류가 발생했습니다.', error);
...	...	@@ -129,18 +145,79 @@
129	145	},
130	146	searchProblems() {
131	147	this.fetchProblems(1);
132		- }
	148	+ },
	149	+ fetchBooks() {
	150	+ axios({
	151	+ url: "/book/findAll.json",
	152	+ method: "post",
	153	+ headers: {
	154	+ "Content-Type": "application/json; charset=UTF-8",
	155	+ },
	156	+ })
	157	+ .then(response => {
	158	+ console.log(response.data)
	159	+ this.books = response.data;
	160	+ })
	161	+ .catch(error => {
	162	+ console.error("fetchBooks - error: ", error);
	163	+ alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
	164	+ });
	165	+ },
	166	+ fetchUnits() {
	167	+ if (!this.selectedBook) return;
	168	+
	169	+ axios({
	170	+ url: "/unit/unitList.json",
	171	+ method: "post",
	172	+ headers: {
	173	+ "Content-Type": "application/json; charset=UTF-8",
	174	+ },
	175	+ data: {
	176	+ "bookId": this.selectedBook
	177	+ },
	178	+ })
	179	+ .then(response => {
	180	+ console.log(response.data)
	181	+ this.units = response.data;
	182	+ })
	183	+ .catch(error => {
	184	+ console.error("fetchUnits - error: ", error);
	185	+ alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
	186	+ });
	187	+ },
	188	+
133	189	},
134	190	watch: {
135	191	},
136	192	computed: {
	193	+ totalPages() {
	194	+ return Math.ceil(this.totalPosts / this.pageSize);
	195	+ },
	196	+ paginationButtons() {
	197	+ let start = Math.max(0, this.currentPage - 2);
	198	+ let end = Math.min(start + 5, this.totalPages);
	199	+
	200	+ if (end - start < 5) {
	201	+ start = Math.max(0, end - 5);
	202	+ }
	203	+
	204	+ return Array.from({ length: end - start }, (_, i) => start + i + 1);
	205	+ },
	206	+
	207	+ startIndex() {
	208	+ return this.currentPage * this.itemsPerPage;
	209	+ }
	210	+
137	211	},
138	212	components: {
139	213	SvgIcon
140	214	},
141	215	mounted() {
142		- console.log('Main2 mounted');
	216	+ this.selectedUnitId = this.$route.query.unit_id \|\| '';
	217	+ this.selectedBook = this.$route.query.book_id \|\| '';
	218	+ this.fetchBooks();
143	219	this.fetchProblems();
	220	+ this.fetchUnits();
144	221	}
145	222	}
146	223	</script>

...	...	@@ -1,179 +1,209 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3		- <p class="title">{{ bookDetails ? bookDetails.book_nm : 'Loading...' }}</p>
4		- </div>
5		- <label for="" class="title1">단원</label>
	3	+ <p class="title">{{ bookDetails ? bookDetails.book_nm : 'Loading...' }}</p>
	4	+ </div>
	5	+ <div class="content-t">
	6	+
	7	+ <label for="" class="title1">단원</label>
6	8	<div class="unit-pagination flex mt10" style="gap: 10px;">
7		- <button class="selected-btn">1</button>
8		- <button>2</button>
9		- <button>3</button>
10		- <button ><svg-icon type="mdi" :path="mdiPlus" style=" padding-top: 6px; width: 30px; height: 30px;"></svg-icon></button>
	9	+ <button v-for="unit in units" :key="unit.unitId" @click="selectUnit(unit.unitId)"
	10	+ :class="{ 'selected-btn': selectedUnitId === unit.unitId }">
	11	+ {{ unit.unitName }}
	12	+ </button>
	13	+ <button><svg-icon type="mdi" :path="mdiPlus" @click="buttonSearch"
	14	+ style=" padding-top: 6px; width: 30px; height: 30px;"></svg-icon></button>
11	15	</div>
12		- <div class="board-wrap mt30">
13		- <div class="mb20 ">
14		- <div class="flex justify-between mb30 align-center">
15		- <label for="" class="title1">지문</label>
16		- <div class="look-btn flex align-center" @click="goToPage('TextList')">
17		- <p>자세히 보기 </p>
18		- <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
	16	+ <div class="board-wrap mt30">
	17	+ <div class="mb20 ">
	18	+ <div class="flex justify-between mb30 align-center">
	19	+ <label for="" class="title1">지문</label>
	20	+ <div class="look-btn flex align-center" @click="goToPage('TextList')">
	21	+ <p>자세히 보기 </p>
	22	+ <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
	23	+ </div>
	24	+ </div>
	25	+ <div class="table-wrap">
	26	+ <table>
	27	+ <thead>
	28	+ <td>No.</td>
	29	+ <td>제목</td>
	30	+ <td>내용</td>
	31	+ <td>작성자</td>
	32	+ <td>등록일</td>
	33	+ </thead>
	34	+ <tbody>
	35	+ <tr v-for="(post, index) in posts" :key="index" class="post">
	36	+ <td>{{ index }}</td>
	37	+ <td>{{ post.textTtl.slice(0, 20) }}{{ post.textTtl.length > 20 ? '...' : '' }}</td>
	38	+ <td>{{ post.textCnt.slice(0, 20) }}{{ post.textCnt.length > 20 ? '...' : '' }}</td>
	39	+ <td>{{ post.userId }}</td>
	40	+ <td>{{ post.regDt }}</td>
	41	+ </tr>
	42	+ </tbody>
	43	+ </table>
19	44	</div>
20	45	</div>
21		- <div class="table-wrap">
22		- <table>
23		- <thead>
24		- <td>No.</td>
25		- <td>제목</td>
26		- <td>내용</td>
27		- <td>작성자</td>
28		- <td>등록일</td>
29		- </thead>
30		- <tbody>
31		- <tr>
32		- <td></td>
33		- <td></td>
34		- <td></td>
35		- <td></td>
36		- <td></td>
37		- </tr>
38		- </tbody>
39		- </table>
40		- </div>
41		- </div>
42		- <hr>
43		- <div class="mb20" >
44		- <div class="flex justify-between mb30 align-center">
45		- <label for="" class="title1">문제</label>
46		- <div class="look-btn flex align-center" @click="goToPage('QuestionList')">
47		- <p>자세히 보기 </p>
48		- <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
	46	+ <hr>
	47	+ <div class="mb20">
	48	+ <div class="flex justify-between mb30 align-center">
	49	+ <label for="" class="title1">문제</label>
	50	+ <div class="look-btn flex align-center" @click="goToPage('QuestionList')">
	51	+ <p>자세히 보기 </p>
	52	+ <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
	53	+ </div>
	54	+ </div>
	55	+ <div class="table-wrap">
	56	+ <table>
	57	+ <thead>
	58	+ <td>No.</td>
	59	+ <td>문제</td>
	60	+ <td>유형</td>
	61	+ <td>점수</td>
	62	+ <td>작성자</td>
	63	+ <td>등록일</td>
	64	+ </thead>
	65	+ <tbody>
	66	+ <tr v-for="(quiz, index) in quizs" :key="index" class="post">
	67	+ <td>{{ index }}</td>
	68	+ <td>{{ quiz.prblmExpln.slice(0, 20) }}{{ quiz.prblmExpln.length > 20 ? '...' : '' }}
	69	+ </td>
	70	+ <td>{{ quiz.prblmTypeNm }}</td>
	71	+ <td>{{ quiz.prblmScr }}</td>
	72	+ <td>{{ quiz.userId }}</td>
	73	+ <td>{{ quiz.regDt }}</td>
	74	+ </tr>
	75	+ </tbody>
	76	+ </table>
49	77	</div>
50	78	</div>
51		- <div class="table-wrap">
52		- <table>
53		- <thead>
54		- <td>No.</td>
55		- <td>제목</td>
56		- <td>내용</td>
57		- <td>작성자</td>
58		- <td>등록일</td>
59		- </thead>
60		- <tbody>
61		- <tr>
62		- <td></td>
63		- <td></td>
64		- <td></td>
65		- <td></td>
66		- <td></td>
67		- </tr>
68		- </tbody>
69		- </table>
70		- </div>
71		- </div>
72		- <hr>
73		- <div class="mb20" >
74		- <div class="flex justify-between mb30 align-center">
75		- <label for="" class="title1">단어</label>
76		- <div class="look-btn flex align-center" @click="goToPage('VocaList')">
77		- <p>자세히 보기 </p>
78		- <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
	79	+ <hr>
	80	+ <div class="mb20">
	81	+ <div class="flex justify-between mb30 align-center">
	82	+ <label for="" class="title1">단어</label>
	83	+ <div class="look-btn flex align-center" @click="goToPage('VocaList')">
	84	+ <p>자세히 보기 </p>
	85	+ <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
	86	+ </div>
	87	+ </div>
	88	+ <div class="table-wrap">
	89	+ <table>
	90	+ <thead>
	91	+ <td>No.</td>
	92	+ <td>지문</td>
	93	+ <td>단어 목록</td>
	94	+ <td>작성자</td>
	95	+ </thead>
	96	+ <tbody>
	97	+ <tr v-for="(wordBook, index) in dataList" :key="wordBook.wdBookId">
	98	+ <td>{{ index }}</td>
	99	+ <td>{{ wordBook.textTtl }}</td>
	100	+ <td>{{ wordBook.wordsPreview }}</td>
	101	+ <td>{{ wordBook.userNm }}</td>
	102	+ </tr>
	103	+ </tbody>
	104	+ </table>
79	105	</div>
80	106	</div>
81		- <div class="table-wrap">
82		- <table>
83		- <thead>
84		- <td>No.</td>
85		- <td>단어</td>
86		- <td>뜻</td>
87		- <td>작성자</td>
88		- <td>등록일</td>
89		- </thead>
90		- <tbody>
91		- <tr>
92		- <td></td>
93		- <td></td>
94		- <td></td>
95		- <td></td>
96		- <td></td>
97		- </tr>
98		- </tbody>
99		- </table>
100		- </div>
101		- </div>
102		- <hr>
103		- <div class="mb20" >
104		- <div class="flex justify-between mb30 align-center">
105		- <label for="" class="title1">중간 평가</label>
106		- <div class="look-btn flex align-center" @click="goToPage('ExamList')">
107		- <p>자세히 보기 </p>
108		- <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
	107	+ <hr>
	108	+ <div class="mb20">
	109	+ <div class="flex justify-between mb30 align-center">
	110	+ <label for="" class="title1">중간 평가</label>
	111	+ <div class="look-btn flex align-center" @click="goToPage('ExamList')">
	112	+ <p>자세히 보기 </p>
	113	+ <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
	114	+ </div>
	115	+ </div>
	116	+ <div class="table-wrap">
	117	+ <table>
	118	+ <thead>
	119	+ <td>No.</td>
	120	+ <td>제목</td>
	121	+ <td>내용</td>
	122	+ <td>작성자</td>
	123	+ <td>등록일</td>
	124	+ </thead>
	125	+ <tbody>
	126	+ <tr>
	127	+ <td></td>
	128	+ <td></td>
	129	+ <td></td>
	130	+ <td></td>
	131	+ <td></td>
	132	+ </tr>
	133	+ </tbody>
	134	+ </table>
109	135	</div>
110	136	</div>
111		- <div class="table-wrap">
112		- <table>
113		- <thead>
114		- <td>No.</td>
115		- <td>제목</td>
116		- <td>내용</td>
117		- <td>작성자</td>
118		- <td>등록일</td>
119		- </thead>
120		- <tbody>
121		- <tr>
122		- <td></td>
123		- <td></td>
124		- <td></td>
125		- <td></td>
126		- <td></td>
127		- </tr>
128		- </tbody>
129		- </table>
130		- </div>
131		- </div>
132		- <hr>
133		- <div >
134		- <div class="flex justify-between mb30 align-center">
135		- <label for="" class="title1">최종 평가</label>
136		- <div class="look-btn flex align-center" @click="goToPage('ExamList')">
137		- <p>자세히 보기 </p>
138		- <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
	137	+ <hr>
	138	+ <div>
	139	+ <div class="flex justify-between mb30 align-center">
	140	+ <label for="" class="title1">최종 평가</label>
	141	+ <div class="look-btn flex align-center" @click="goToPage('ExamList')">
	142	+ <p>자세히 보기 </p>
	143	+ <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
	144	+ </div>
	145	+ </div>
	146	+ <div class="table-wrap">
	147	+ <table>
	148	+ <thead>
	149	+ <td>No.</td>
	150	+ <td>제목</td>
	151	+ <td>내용</td>
	152	+ <td>작성자</td>
	153	+ <td>등록일</td>
	154	+ </thead>
	155	+ <tbody>
	156	+ <tr>
	157	+ <td></td>
	158	+ <td></td>
	159	+ <td></td>
	160	+ <td></td>
	161	+ <td></td>
	162	+ </tr>
	163	+ </tbody>
	164	+ </table>
139	165	</div>
140	166	</div>
141		- <div class="table-wrap">
142		- <table>
143		- <thead>
144		- <td>No.</td>
145		- <td>제목</td>
146		- <td>내용</td>
147		- <td>작성자</td>
148		- <td>등록일</td>
149		- </thead>
150		- <tbody>
151		- <tr>
152		- <td></td>
153		- <td></td>
154		- <td></td>
155		- <td></td>
156		- <td></td>
157		- </tr>
158		- </tbody>
159		- </table>
160		- </div>
	167	+ </div>
	168	+ <div class="flex justify-end mt30" style="gap: 10px;">
	169	+ <button type="button" title="" class="new-btn" @click="goToPage('RoadMap')">
	170	+ 로드맵
	171	+ </button>
	172	+ <button type="button" title="" class="new-btn" @click="showConfirm('delete')">
	173	+ 삭제
	174	+ </button>
161	175	</div>
162	176	</div>
163		- <!-- <div class="flex justify-end mt30" style="gap: 10px;">
164		- <button type="button" title="" class="new-btn" @click="goToPage('RoadMap')">
165		- 로드맵
166		- </button>
167		- <button type="button" title="" class="new-btn" @click="showConfirm('delete')">
168		- 삭제
169		- </button>
170		- </div> -->
	177	+
	178	+ <div v-show="searchOpen" class="popup-wrap">
	179	+ <div class="popup-box">
	180	+ <div class="flex justify-between mb30">
	181	+ <p class="popup-title">단원 이름</p>
	182	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	183	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	184	+ </button>
	185	+ </div>
	186	+ <div class="search-wrap mb30">
	187	+ <input type="text" class="data-wrap" v-model="newUnitName" placeholder="단원 이름을 입력하세요">
	188	+ </div>
	189	+ <div class="flex justify-center">
	190	+ <button type="button" title="취소" class="new-btn mr10" @click="closeBtn">
	191	+ 취소
	192	+ </button>
	193	+ <button type="button" title="생성" class="new-btn" @click="insertUnit()">
	194	+ 생성
	195	+ </button>
	196	+ </div>
	197	+ </div>
	198	+ </div>
	199	+
171	200	</template>
172	201
173	202	<script>
174	203	import SvgIcon from '@jamescoyle/vue-icon';
175		-import { mdiMagnify, mdiPlus } from '@mdi/js';
	204	+import { mdiMagnify, mdiPlus, mdiWindowClose } from '@mdi/js';
176	205	import { mdilArrowRight } from '@mdi/light-js';
	206	+
177	207	import ProgressBar from '../../component/ProgressBar.vue';
178	208	import axios from 'axios';
179	209
...	...	@@ -183,14 +213,65 @@
183	213	mdiPlus: mdiPlus,
184	214	mdiMagnify: mdiMagnify,
185	215	mdilArrowRight: mdilArrowRight,
186		- selectedBookId: this.$route.query.book_Id,
	216	+ mdiWindowClose: mdiWindowClose,
	217	+
	218	+ selectedBookId: this.$route.query.book_id,
187	219	bookDetails: null,
	220	+ units: [],
	221	+ posts: [],
	222	+ quizs: [],
	223	+ dataList: [],
	224	+ totalPosts: [],
	225	+ selectedUnitId: null, // 선택된 단원 ID 저장 변수
	226	+ selectedUnitName: '', // 선택된 단원의 이름 저장 변수
	227	+
	228	+ searchOpen: false,
	229	+ newUnitName: '',
	230	+
188	231	};
189	232	},
190	233	methods: {
	234	+ // 페이지 이동
191	235	goToPage(page) {
192		- this.$router.push({ name: page });
	236	+ this.$router.push({ name: page, query: { unit_id: this.selectedUnitId, book_id: this.$route.query.book_id } });
193	237	},
	238	+ // 단원 팝업
	239	+ buttonSearch() {
	240	+ this.searchOpen = true;
	241	+ },
	242	+ closeBtn() {
	243	+ this.searchOpen = false;
	244	+ this.newUnitName = '';
	245	+ },
	246	+
	247	+ // 단원 추가 생성
	248	+ insertUnit() {
	249	+ if(this.newUnitName === ''){
	250	+ alert("이름을 입력해주세요!");
	251	+ return;
	252	+ }
	253	+
	254	+ axios({
	255	+ url: "/unit/insertUnit.json",
	256	+ method: "post",
	257	+ headers: {
	258	+ "Content-Type": "application/json; charset=UTF-8",
	259	+ },
	260	+ data: {
	261	+ bookId: this.$route.query.book_id,
	262	+ unitName: this.newUnitName,
	263	+ }
	264	+ })
	265	+ .then(response => {
	266	+ this.findUnit();
	267	+ this.closeBtn();
	268	+ })
	269	+ .catch(error => {
	270	+ console.error('Error creating book:', error);
	271	+ });
	272	+ },
	273	+
	274	+
194	275	fetchBookDetails() {
195	276	axios({
196	277	url: "/book/find.json",
...	...	@@ -202,18 +283,168 @@
202	283	book_id: this.$route.query.book_id
203	284	}
204	285	})
205		- .then(response => {
206		- console.log('Book details:', response.data);
207		- this.bookDetails = response.data;
	286	+ .then(response => {
	287	+ console.log('Book details:', response.data);
	288	+ this.bookDetails = response.data;
	289	+ })
	290	+ .catch(error => {
	291	+ console.error('Error fetching book details:', error);
	292	+ });
	293	+ },
	294	+
	295	+ // 책 아이디에 맞춘 단원 가져오기
	296	+ findUnit() {
	297	+ axios({
	298	+ url: "/unit/unitList.json",
	299	+ method: "post",
	300	+ headers: {
	301	+ "Content-Type": "application/json; charset=UTF-8",
	302	+ },
	303	+ data: {
	304	+ bookId: this.$route.query.book_id
	305	+ }
208	306	})
209		- .catch(error => {
210		- console.error('Error fetching book details:', error);
211		- });
212		- }
	307	+ .then(response => {
	308	+ console.log('Book details:', response.data);
	309	+ this.units = response.data;
	310	+ this.selectedUnitId = this.units[0].unitId;
	311	+ this.findText();
	312	+ this.findProblem();
	313	+ this.findWord();
	314	+
	315	+ })
	316	+ .catch(error => {
	317	+ console.error('Error selectUnit details:', error);
	318	+ });
	319	+ },
	320	+
	321	+ // 단원을 선택했을 때 호출되는 메서드
	322	+ selectUnit(unitId) {
	323	+ this.selectedUnitId = unitId;
	324	+ const selectedUnit = this.units.find(unit => unit.unitId === unitId);
	325	+ this.selectedUnitName = selectedUnit ? selectedUnit.unitName : '';
	326	+ this.findText();
	327	+ this.findProblem();
	328	+ this.findWord();
	329	+ },
	330	+
	331	+ // 지문 정보 5개 정도 가져오기
	332	+ findText() {
	333	+ axios({
	334	+ url: "/text/textSearch.json",
	335	+ method: "post",
	336	+ headers: {
	337	+ "Content-Type": "application/json; charset=UTF-8",
	338	+ },
	339	+ data: {
	340	+ "pageSize": 5,
	341	+ "startIndex": 0,
	342	+ "unitId": this.selectedUnitId
	343	+ },
	344	+ })
	345	+ .then(response => {
	346	+ this.posts = response.data.list;
	347	+ })
	348	+ .catch(error => {
	349	+ console.error("fetchData - error: ", error);
	350	+ alert("검색 중 오류가 발생했습니다.");
	351	+ });
	352	+ },
	353	+
	354	+ // 문제 정보 5개 정도 가져오기
	355	+ findProblem() {
	356	+ axios({
	357	+ url: "/problem/problemList.json",
	358	+ method: "post",
	359	+ headers: {
	360	+ "Content-Type": "application/json; charset=UTF-8",
	361	+ },
	362	+ data: {
	363	+ "pageSize": 5,
	364	+ "startIndex": 0,
	365	+ "unitId": this.selectedUnitId
	366	+ },
	367	+ })
	368	+ .then(response => {
	369	+
	370	+ this.quizs = response.data.problems;
	371	+ })
	372	+ .catch(error => {
	373	+ console.error("fetchData - error: ", error);
	374	+ alert("검색 중 오류가 발생했습니다.");
	375	+ });
	376	+ },
	377	+
	378	+ // 단어장 단어 5개 정도 조회
	379	+ findWord() {
	380	+ const vm = this;
	381	+ axios({
	382	+ url: "/wordbook/findByUnitId.json",
	383	+ method: "post",
	384	+ headers: {
	385	+ "Content-Type": "application/json; charset=UTF-8",
	386	+ },
	387	+ data: {
	388	+ "unitId": vm.selectedUnitId,
	389	+ "page": 1,
	390	+ "pageSize": 5
	391	+ },
	392	+ })
	393	+ .then(function (response) {
	394	+ const wordBooks = response.data.wordBooks;
	395	+ vm.totalPosts = response.data.totalWordBooks;
	396	+
	397	+ // 지문 제목 및 단어 목록 가져오기
	398	+ const fetchDataPromises = wordBooks.map(wordBook => {
	399	+ const textTitlePromise = axios.post("/text/selectOneText.json", {
	400	+ textId: wordBook.textId
	401	+ }).then(textResponse => {
	402	+ wordBook.textTtl = textResponse.data[0].text_ttl;
	403	+ }).catch(error => {
	404	+ console.error(`${wordBook.textId}으로 지문 제목 가져오기 실패: `, error);
	405	+ wordBook.textTtl = '제목값없음'; // 오류 시 기본값 설정
	406	+ });
	407	+
	408	+ const wordsPromise = axios.post("/word/getWordsByBookId.json", {
	409	+ wdBookId: wordBook.wdBookId
	410	+ }).then(wordsResponse => {
	411	+ const words = wordsResponse.data.map(word => word.wdNm);
	412	+ wordBook.wordsPreview = vm.generateWordsPreview(words);
	413	+ }).catch(error => {
	414	+ console.error(`${wordBook.wdBookId}으로 단어 목록 가져오기 실패: `, error);
	415	+ wordBook.wordsPreview = '단어값없음'; // 오류 시 기본값 설정
	416	+ });
	417	+
	418	+ return Promise.all([textTitlePromise, wordsPromise]);
	419	+ });
	420	+
	421	+ // 모든 데이터 가져오기 작업이 완료되면 dataList에 데이터 설정
	422	+ Promise.all(fetchDataPromises).then(() => {
	423	+ vm.dataList = wordBooks;
	424	+ });
	425	+ })
	426	+ .catch(function (error) {
	427	+ console.log("dataList - error: ", error);
	428	+ alert("단어장 목록 조회에 오류가 발생했습니다.");
	429	+ });
	430	+ },
	431	+ // 단어 목록 생략 String 생성 메서드
	432	+ generateWordsPreview(words) {
	433	+ const maxLength = 20; // 최대 표시 길이 설정
	434	+ const wordString = words.join(', ');
	435	+
	436	+ if (wordString.length > maxLength) {
	437	+ return wordString.substring(0, maxLength) + '...';
	438	+ } else {
	439	+ return wordString;
	440	+ }
	441	+ },
	442	+
213	443	},
214	444	mounted() {
215	445	console.log('Mounted with book_id:', this.$route.query.book_id);
216	446	this.fetchBookDetails();
	447	+ this.findUnit();
217	448	},
218	449	components: {
219	450	SvgIcon,

...	...	@@ -33,13 +33,13 @@
33	33	<label v-else for="" class="title2 flex align-center ml20" style="display: flex; width: 20rem;">교재:
34	34	<p class="title2">{{ post.bookName }}</p>
35	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"
	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	43	style="display: flex; width: 20rem; text-align: right;">단원:
44	44	<p class="title2">{{ post.unitName }}</p>
45	45	</label>
...	...	@@ -50,6 +50,12 @@
50	50	<textarea v-if="isEditing" v-model="post.textCnt" class="data-wrap"></textarea>
51	51	<p v-else class="data-wrap">{{ post.textCnt }}</p>
52	52	</div>
	53	+ <hr>
	54	+ <div class="flex align-center">
	55	+ <label for="" class="title2">첨부파일</label>
	56	+ <label for="" class="title2" v-if="file">{{ file.fileNm }}</label>
	57	+ </div>
	58	+
53	59	</div>
54	60	<div class="flex justify-between mt50">
55	61	<button type="button" title="목록으로" class="new-btn" @click="goToPage('TextList')">
...	...	@@ -83,11 +89,13 @@
83	89	textTypeId: "",
84	90	bookId: "",
85	91	unitId: "",
86		- bookName: "",
87		- unitName: ""
	92	+ bookName: "",
	93	+ unitName: "",
	94	+ fileMngId: "",
88	95	},
89		- books: [],
90		- units: [],
	96	+ books: [],
	97	+ units: [],
	98	+ file: {},
91	99	isEditing: false
92	100	};
93	101	},
...	...	@@ -126,6 +134,8 @@
126	134	this.post.unitId = response.data[0].unit_id;
127	135	this.post.bookName = response.data[0].book_name;
128	136	this.post.unitName = response.data[0].unit_name;
	137	+ this.post.fileMngId = response.data[0].file_mng_id;
	138	+ this.findFile();
129	139	} else {
130	140	this.error = "Failed to fetch post details.";
131	141	}
...	...	@@ -135,6 +145,29 @@
135	145	this.error = "Failed to fetch post details.";
136	146	});
137	147	},
	148	+
	149	+ findFile() {
	150	+ const vm = this;
	151	+ axios({
	152	+ url: "/file/find.json",
	153	+ method: "post",
	154	+ headers: {
	155	+ "Content-Type": "application/json; charset=UTF-8",
	156	+ },
	157	+ data: {
	158	+ file_mng_id: vm.post.fileMngId,
	159	+ },
	160	+ })
	161	+ .then(function (res) {
	162	+ console.log("fileInfo - response : ", res.data.list[0]);
	163	+ vm.file = res.data.list[0];
	164	+ sessionStorage.setItem("file", JSON.stringify(vm.file));
	165	+ })
	166	+ .catch(function (error) {
	167	+ console.log("result - error : ", error);
	168	+ });
	169	+ },
	170	+
138	171	dataInsert() {
139	172	this.newPost = {
140	173	textId: this.post.textId,
...	...	@@ -168,6 +201,7 @@
168	201	} else {
169	202	this.isEditing = true;
170	203	this.fetchBooks();
	204	+ this.fetchUnits();
171	205	}
172	206	},
173	207	deletePost() {
...	...	@@ -192,7 +226,7 @@
192	226	}
193	227	})
194	228	.then(response => {
195		- this.books = response.data;
	229	+ this.books = response.data;
196	230	})
197	231	.catch(error => {
198	232	console.error("fetchBooks - error:", error);
...	...	@@ -200,7 +234,7 @@
200	234	});
201	235	},
202	236	fetchUnits() {
203		- if (!this.post.bookId) return;
	237	+ if (!this.post.bookId) return;
204	238
205	239	axios.post("/unit/unitList.json", { bookId: this.post.bookId }, {
206	240	headers: {
...	...	@@ -208,7 +242,7 @@
208	242	}
209	243	})
210	244	.then(response => {
211		- this.units = response.data;
	245	+ this.units = response.data;
212	246	})
213	247	.catch(error => {
214	248	console.error("fetchUnits - error:", error);
...	...	@@ -225,5 +259,4 @@
225	259	};
226	260	</script>
227	261
228		-<style scoped>
229		-</style>
	262	+<style scoped></style>

...	...	@@ -2,12 +2,14 @@
2	2	<div class="title-box flex justify-between mb40 myplan">
3	3	<p class="title">지문</p>
4	4	<select name="" id="" v-model="selectedBook" @change="fetchUnits">
5		- <option value="" disabled>교재를 선택하세요</option>
	5	+ <option value="" disabled selected>교재를 선택하세요</option>
6	6	<option v-for="book in books" :key="book.book_id" :value="book.book_id">
7	7	{{ book.book_nm }}
8	8	</option>
9	9	</select>
10	10	</div>
	11	+ <div class="content-t">
	12	+
11	13	<label for="" class="title2">단원</label>
12	14	<div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
13	15	<button
...	...	@@ -68,6 +70,7 @@
68	70	</button>
69	71	</div>
70	72	</div>
	73	+</div>
71	74	</template>
72	75
73	76	<script>
...	...	@@ -101,7 +104,7 @@
101	104	},
102	105	methods: {
103	106	goToPage(page, textId) {
104		- this.$router.push({ name: page, query: { textId } });
	107	+ this.$router.push({ name: page, query: { textId, unit_id: this.selectedUnit, book_id: this.selectedBook } });
105	108	},
106	109	showConfirm(type) {
107	110	let message = '';
...	...	@@ -219,8 +222,11 @@
219	222	SvgIcon
220	223	},
221	224	mounted() {
	225	+ this.selectedUnit = this.$route.query.unit_id \|\| '';
	226	+ this.selectedBook = this.$route.query.book_id \|\| '';
222	227	this.fetchBooks(); // Fetch books when the component is mounted
223	228	this.fetchData(); // Fetch data for the default view
	229	+ this.fetchUnits();
224	230	}
225	231	};
226	232	</script>

Delete comment