Commit @05ead99ebc35093a931f4057de8963baf243bd80

이은진 2024-08-08

Merge branch 'master' of http://210.180.118.83/jichoi/lms_front

@05ead99ebc35093a931f4057de8963baf243bd80

39dfde4

05ead99

client/resources/css/reset.css

--- client/resources/css/reset.css

+++ client/resources/css/reset.css


     
 }
 html,
-body{height: 100%;  background-color: #eaedf4;}
+body{ background-color: #eaedf4;}
 body{position:relative;text-align: left; overflow-x: hidden; width: 1920px;}
 ::-webkit-scrollbar {width: 10px; height: 10px;}
 ::-webkit-scrollbar-track {border-radius: 5px;background-color: #EAEDF4;}
 ::-webkit-scrollbar-thumb {	border-radius: 5px; background-color: #FFBA08;}
 #root, #app{
-    height: 100%; 
+    /* height: 100%;  */
    }
 input, select, span,p, label {
     font-size: 16px;
 }
 input::placeholder{color: #8C8E92;}
 input[type="text"]{ padding:10px 20px; width: 100%; }
-
+input#file-upload-button{padding: 10px ;} 
   
 button{
     border: none;

 border: 0;}
 thead{background-color: #eaedf4;}
 tbody tr{border-bottom: #eaedf4 1px solid; cursor: pointer;}
-td{padding: 10px ; text-align: center;} 
+td{padding: 10px ; text-align: center;} 
+
+/* .btn-upload {
+    width: 100px;
+    height: 40px;
+    background: #f0f0f0;
+    border: 1px solid rgb(77,77,77);
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:hover {
+      background: rgb(77,77,77);
+      color: #fff;
+    }
+  }
+  
+  #file {
+    display: none;
+  } */

39dfde4

05ead99

client/resources/css/style.css

--- client/resources/css/style.css

+++ client/resources/css/style.css


   background-image: url('../img/img199_12p.png');
   width: 367px;
   height: 182px;
-  padding: 20px 60px 20px 50px;
+  padding: 20px 50px 20px 40px;
   color: #fff;
 }
 .mypage .textbook{font-family: 'ONEMobilePOPOTF';}

 .side_t{
   background-color: #fff;
   width: 360px;
-  height: 100%;
+  /* height: 100%; */
   padding: 25px 40px;
 }
 

     to { opacity:1; transform:translate3d(0, 0, 0); }
 }
 
-select{min-width: 128px; border-radius: 5px; padding: 10px 20px; font-size: 18px;}
+select{min-width: 128px; border-radius: 5px; padding: 10px 20px; font-size: 18px; }
 select option{font-size: 20px; font-weight: bold;}
 
 

     font-family: 'Pretendard-Bold';
 }
 .new-btn{
-  padding: 5px 20px;
+  padding: 10px 30px;
   font-size: 20px;
     font-family: 'Pretendard-Bold';
     border-radius: 5px;

     min-height: 20rem;
   }
   .dropbox p{line-height: 20rem;}
+
+
+  /* 단원 버튼 */
+ .unit-pagination button {
+    font-size: 3rem;
+    font-family: 'Pretendard-Regular';
+    padding: 5px 30px;
+    border: #FFD56B 3px solid;
+    border-radius: 10px;
+    color: #331600;
+    background-color: #FFF3D7 
+}
+
+ .unit-pagination .selected-btn {
+    background-color: #FFBA08;
+    color: #fff;
+    font-family: 'Pretendard-Bold';
+}
 /* ------------------------선생님 --------------------- */

39dfde4

05ead99

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


 
       // 페이징 정보
       page: 1,
-      pageSize: 3,
+      pageSize: 2,
       totalpages: null,
 
       // 사용자 정보

39dfde4

05ead99

client/views/layout/Side_t.vue

--- client/views/layout/Side_t.vue

+++ client/views/layout/Side_t.vue


                 <details>
                     <summary>교재 관리</summary>
                     <router-link to="/textbook.page" class="tpt">홈</router-link>
-                    <router-link to="/Board.page" class="tpt">게시판</router-link>
-                    <router-link to="/Board.page" class="tpt">학생목록</router-link>
-                    <router-link to="/Board.page" class="tpt">교재</router-link>
+                    <router-link to="/TextList.page" class="tpt">지문</router-link>
+                    <router-link to="/QuestionList.page" class="tpt">문제</router-link>
+                    <router-link to="/VocaList.page" class="tpt">단어장</router-link>
+                    <router-link to="/ExamList.page" class="tpt">평가</router-link>
                 </details>
             </div>
         </div>

39dfde4

05ead99

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import TextDetail from "./teacher/TextDetail.vue";
 import QuestionList from "./teacher/QuestionList.vue";
 import QuestionInsert from "./teacher/QuestionInsert.vue";
+import QuestionDetail from "./teacher/QuestionDetail.vue";
 import VocaList from "./teacher/VocaList.vue";
+import VocaInsert from "./teacher/VocaInsert.vue";
+import VocaDetail from "./teacher/VocaDetail.vue";
 import ExamList from "./teacher/ExamList.vue";
 import ExamDetail from "./teacher/ExamDetail.vue";
+import ExamInsert from "./teacher/ExamInsert.vue";
 import RoadMap from "./teacher/RoadMap.vue";
 
 const routes = [

             { path: '/C_TextBookDetail.page', name: 'C_TextBookDetail', component: C_TextBookDetail },
             { path: '/TextList.page', name: 'TextList', component: TextList },
             { path: '/TextInsert.page', name: 'TextInsert', component: TextInsert },
+            { path: '/TextDetail.page', name: 'TextDetail', component: TextDetail },
             { path: '/QuestionList.page', name: 'QuestionList', component: QuestionList },
             { path: '/QuestionInsert.page', name: 'QuestionInsert', component: QuestionInsert },
+            { path: '/QuestionDetail.page', name: 'QuestionDetail', component: QuestionDetail },
             { path: '/VocaList.page', name: 'VocaList', component: VocaList },
+            { path: '/VocaInsert.page', name: 'VocaInsert', component: VocaInsert },
+            { path: '/VocaDetail.page', name: 'VocaDetail', component: VocaDetail },
             { path: '/ExamList.page', name: 'ExamList', component: ExamList },
             { path: '/ExamDetail.page', name: 'ExamDetail', component: ExamDetail },
+            { path: '/ExamInsert.page', name: 'ExamInsert', component: ExamInsert },
             { path: '/C_TextList.page', name: 'C_TextList', component: C_TextList },
             { path: '/C_TextInsert.page', name: 'C_TextInsert', component: C_TextInsert },
             { path: '/C_QuestionList.page', name: 'C_QuestionList', component: C_QuestionList },

39dfde4

05ead99

client/views/pages/teacher/Board.vue

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

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


           :class="{ 'selected-row': selectedRow == item.dataList }"
           @click="[goToPage('noticeDetail'), selectBoardList(item)]"
         >
-          <td>{{ totalBoard - index }}</td>
+          <td>{{ createNo(index) }}</td>
           <td>{{ item.bbsTtl }}</td>
           <td>{{ item.bbsCls }}</td>
           <td>{{ userNm }}</td>

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

 
       // 게시글 정보
       dataList: [],
-      totalBoard: null,
+      totalPosts: 0,
       selectedRow: "",
 
       // 페이징
-      page: 1,
-      pageSize: 8,
-      totalPages: null,
+      currentPage: 0,
+      itemsPerPage: 8,
 
       // 반 아이디 (추후 세션에서 받는걸로 수정)
       sclsId: "1",

         headers: {
           "Content-Type": "application/json; charset=UTF-8",
         },
-        data: { page: vm.page, pageSize: vm.pageSize, sclsId: vm.sclsId },
+        data: {
+          page: vm.currentPage + 1,
+          pageSize: vm.itemsPerPage,
+          sclsId: vm.sclsId,
+        },
       })
         .then(function (res) {
           console.log("dataList - response : ", res.data);
-          console.log(res.data.result[0].boardClass[0].board);
 
           vm.dataList = res.data.result[0].boardClass[0].board;
           vm.userNm = res.data.result[0].userNm;
           vm.userId = res.data.result[0].userId;
-          vm.totalBoard = res.data.totalBoard;
-          vm.totalPages = Math.ceil(vm.totalBoard / vm.pageSize);
+          vm.totalPosts = res.data.totalBoard;
         })
         .catch(function (error) {
           console.log("result - error : ", error);
-          alert("비상 비상!");
         });
     },
 

       let searchPayload = {
         keyword: vm.searchKeyword,
         option: vm.selectedSearchOption,
-        page: vm.page,
-        pageSize: vm.pageSize,
+        page: vm.currentPage,
+        pageSize: vm.itemsPerPage,
         sclsId: vm.sclsId,
       };
       axios({

           vm.dataList = res.data.result[0].boardClass[0].board;
           vm.userNm = res.data.result[0].userNm;
           vm.userId = res.data.result[0].userId;
-          vm.totalBoard = res.data.totalBoard;
+          vm.totalPosts = res.data.totalBoard;
         })
         .catch(function (error) {
           console.log("dataSearch - error : ", error);

         });
     },
 
-    previousPage() {
-      if (this.page > 1) {
-        this.page -= 1;
-        this.boardList();
-      }
+    createNo(index) {
+      return this.totalPosts - (this.currentPage * this.itemsPerPage + index);
     },
 
-    nextPage() {
-      if (this.page < this.totalPages) {
-        this.page += 1;
-        this.boardList();
+    goToPagination(page) {
+      if (page < 0 || page >= this.totalPages) {
+        return;
       }
+      this.currentPage = page;
+      this.boardList();
     },
   },
   watch: {},
-  computed: {},
+  computed: {
+    totalPages() {
+      return Math.ceil(this.totalPosts / this.itemsPerPage);
+    },
+    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,
   },

39dfde4

05ead99

client/views/pages/teacher/C_TextBookDetail.vue

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

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


 <template>
     <div class="title-box flex justify-between mb40">
-        <p class="title">A반</p>
+        <p class="title">A교재</p>
         <select name="" id="">
-            <option value="">A 교재</option>
+            <option value="">A 반</option>
         </select>
     </div>
     <div class="board-wrap">
         <label for="" class="title2">단원</label>
-        <div class="table-pagination flex mt10">
+        <div class="unit-pagination flex mt10" style="gap: 10px;">
             <button class="selected-btn">1</button>
             <button>2</button>
             <button>3</button>

05ead99

client/views/pages/teacher/ExamInsert.vue (added)

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

...	...	@@ -0,0 +1,131 @@
	1	+<template>
	2	+ <div class="title-box flex justify-between mb40">
	3	+ <p class="title">평가 등록</p>
	4	+ </div>
	5	+ <!-- <label for="" class="title1">문제 리스트</label>
	6	+ <table class="mt20 mb100">
	7	+ <colgroup>
	8	+ <col style="width: 10%;">
	9	+ <col style="width: 70%;">
	10	+ <col style="width: 20%;">
	11	+ </colgroup>
	12	+ <thead>
	13	+ <td>No.</td>
	14	+ <td>문제</td>
	15	+ <td>보기</td>
	16	+ </thead>
	17	+ <tbody>
	18	+ <tr>
	19	+ <td>1</td>
	20	+ <td>1</td>
	21	+ <td><button type="button" title="수정" class="new-btn">
	22	+ 수정
	23	+ </button></td>
	24	+ </tr>
	25	+ </tbody>
	26	+ </table> -->
	27	+ <label for="" class="title1">상세 내용</label>
	28	+ <div class="board-wrap mt20">
	29	+ <div class="flex align-center mb20">
	30	+ <label for="" class="title2">단원</label>
	31	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	32	+ <option value="bbsTtl">제목</option>
	33	+ <option value="bbsCnt">내용</option>
	34	+ <option value="userNm">작성자</option>
	35	+ <option value="bbsCls">카테고리</option>
	36	+ </select>
	37	+ </div>
	38	+ <div class="flex align-center mb20">
	39	+ <label for="" class="title2">평가 유형</label>
	40	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	41	+ <option value="bbsTtl">제목</option>
	42	+ <option value="bbsCnt">내용</option>
	43	+ <option value="userNm">작성자</option>
	44	+ <option value="bbsCls">카테고리</option>
	45	+ </select>
	46	+ </div>
	47	+
	48	+ <hr>
	49	+ <div class="flex align-center mb20">
	50	+ <label for="" class="title2">문제 1</label>
	51	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	52	+ <option value="bbsTtl">제목</option>
	53	+ <option value="bbsCnt">내용</option>
	54	+ <option value="userNm">작성자</option>
	55	+ <option value="bbsCls">카테고리</option>
	56	+ </select>
	57	+ </div>
	58	+ <div class="flex align-center mb20">
	59	+ <label for="" class="title2">문제 2</label>
	60	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	61	+ <option value="bbsTtl">제목</option>
	62	+ <option value="bbsCnt">내용</option>
	63	+ <option value="userNm">작성자</option>
	64	+ <option value="bbsCls">카테고리</option>
	65	+ </select>
	66	+ </div>
	67	+ <div class="flex align-center mb20">
	68	+ <label for="" class="title2">문제 3</label>
	69	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	70	+ <option value="bbsTtl">제목</option>
	71	+ <option value="bbsCnt">내용</option>
	72	+ <option value="userNm">작성자</option>
	73	+ <option value="bbsCls">카테고리</option>
	74	+ </select>
	75	+ </div>
	76	+ <div class="flex align-center mb20">
	77	+ <label for="" class="title2">문제 4</label>
	78	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	79	+ <option value="bbsTtl">제목</option>
	80	+ <option value="bbsCnt">내용</option>
	81	+ <option value="userNm">작성자</option>
	82	+ <option value="bbsCls">카테고리</option>
	83	+ </select>
	84	+ </div>
	85	+
	86	+ </div>
	87	+ <div class="flex justify-between mt50">
	88	+ <button type="button" title="글쓰기" class="new-btn" @click="goToPage('C_ExamList')">
	89	+ 목록
	90	+ </button>
	91	+ <div class="flex">
	92	+ <button type="button" title="글쓰기" class="new-btn mr10">
	93	+ 취소
	94	+ </button>
	95	+ <button type="button" title="글쓰기" class="new-btn">
	96	+ 등록
	97	+ </button>
	98	+ </div>
	99	+ </div>
	100	+</template>
	101	+
	102	+<script>
	103	+import SvgIcon from '@jamescoyle/vue-icon';
	104	+import { mdiMagnify } from '@mdi/js';
	105	+
	106	+
	107	+export default {
	108	+ data() {
	109	+ return {
	110	+ mdiMagnify: mdiMagnify,
	111	+ }
	112	+ },
	113	+ methods: {
	114	+ goToPage(page) {
	115	+ this.$router.push({ name: page });
	116	+ },
	117	+ },
	118	+ watch: {
	119	+
	120	+ },
	121	+ computed: {
	122	+
	123	+ },
	124	+ components: {
	125	+ SvgIcon
	126	+ },
	127	+ mounted() {
	128	+ console.log('Main2 mounted');
	129	+ }
	130	+}
	131	+</script>(No newline at end of file)

39dfde4

05ead99

client/views/pages/teacher/ExamList.vue

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

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


                     <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button>
                 </article>
                 <div class="flex justify-end ">
-                <button type="button" title="등록" class="new-btn" @click="goToPage('ExamDetail')">
+                <button type="button" title="등록" class="new-btn" @click="goToPage('ExamInsert')">
                     등록
                 </button>
         </div>

39dfde4

05ead99

client/views/pages/teacher/Home.vue

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

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


         }
     },
     methods: {
+       
         goToPage(page, sclsId) {
             //console.log(`sclsId : ${sclsId}`); // 쿼리 확인
             this.$router.push({ name: page , query : {sclsId : sclsId}});

39dfde4

05ead99

client/views/pages/teacher/Main_t.vue

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

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


 <template>
     <div class="flex justify-between" style="height: 100%;">
        <Side_t></Side_t>
-       <div style="padding: 15px 60px 90px 60px; ">
+       <div style="padding: 15px 60px 120px 0px ">
         <Header></Header>
           <div class="main-wrap">
               <router-view />

05ead99

client/views/pages/teacher/QuestionDetail.vue (added)

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

...	...	@@ -0,0 +1,232 @@
	1	+<template>
	2	+ <div class="title-box flex justify-between mb40">
	3	+ <p class="title">문제 등록</p>
	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>
	34	+ </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>
	106	+ <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">
	121	+ </div>
	122	+ <div class="flex align-center mb20">
	123	+ <label for="" class="title2">답1</label>
	124	+ <input type="text" class="data-wrap">
	125	+ </div>
	126	+ <div class="flex align-center mb20 mr40">
	127	+ <label for="" class="title2">문제2</label>
	128	+ <input type="text" class="data-wrap">
	129	+ </div>
	130	+ <div class="flex align-center mb20">
	131	+ <label for="" class="title2">답2</label>
	132	+ <input type="text" class="data-wrap">
	133	+ </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 ">
	139	+ <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	+ <input type="text" class="data-wrap">
	145	+ </div>
	146	+ <div class="flex align-center mb20">
	147	+ <label for="" class="title2">답4</label>
	148	+ <input type="text" class="data-wrap">
	149	+ </div>
	150	+ </div>
	151	+ <div class="flex align-center mb20">
	152	+ <label for="" class="title2">해설</label>
	153	+ <textarea name="" id="" class="data-wrap"></textarea>
	154	+ </div>
	155	+ </div>
	156	+ <div v-else-if="selectedTab === 'tab4'">
	157	+ <div class="flex align-center mb20 mr40" >
	158	+ <label for="" class="title2">문제1</label>
	159	+ <input type="text" class="data-wrap">
	160	+ <input type="checkbox" class="ui-checkbox ml30">
	161	+ </div>
	162	+ <div class="flex align-center mb20 mr40">
	163	+ <label for="" class="title2">문제2</label>
	164	+ <input type="text" class="data-wrap">
	165	+ <input type="checkbox" class="ui-checkbox ml30">
	166	+ </div>
	167	+ <div class="flex align-center mb20 mr40">
	168	+ <label for="" class="title2">문제3</label>
	169	+ <input type="text" class="data-wrap">
	170	+ <input type="checkbox" class="ui-checkbox ml30">
	171	+ </div>
	172	+ <div class="flex align-center mb20 mr40">
	173	+ <label for="" class="title2">문제4</label>
	174	+ <input type="text" class="data-wrap">
	175	+ <input type="checkbox" class="ui-checkbox ml30">
	176	+ </div>
	177	+ <div class="flex align-center mb20">
	178	+ <label for="" class="title2">해설</label>
	179	+ <textarea name="" id="" class="data-wrap"></textarea>
	180	+ </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	+ 삭제
	191	+ </button>
	192	+ <button type="button" title="글쓰기" class="new-btn">
	193	+ 수정
	194	+ </button>
	195	+ </div>
	196	+ </div>
	197	+</template>
	198	+
	199	+<script>
	200	+import SvgIcon from '@jamescoyle/vue-icon';
	201	+import { mdiMagnify } from '@mdi/js';
	202	+
	203	+
	204	+export default {
	205	+ data() {
	206	+ return {
	207	+ mdiMagnify: mdiMagnify,
	208	+ selectedTab: 'tab1',
	209	+ }
	210	+ },
	211	+ methods: {
	212	+ goToPage(page) {
	213	+ this.$router.push({ name: page });
	214	+ },
	215	+ },
	216	+ watch: {
	217	+
	218	+ },
	219	+ computed: {
	220	+
	221	+ },
	222	+ components: {
	223	+ SvgIcon
	224	+ },
	225	+ mounted() {
	226	+ console.log('Main2 mounted');
	227	+ }
	228	+}
	229	+</script>
	230	+<style scoped>
	231	+.ui-checkbox{width: 30px; height: 30px;}
	232	+</style>(No newline at end of file)

39dfde4

05ead99

client/views/pages/teacher/QuestionInsert.vue

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

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


         <p class="title">문제 등록</p>
     </div>
     <div class="board-wrap">
-        <div class="flex align-center mb20">
-            <label for="" class="title2">제목</label>
-            <input type="text" class="data-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="flex align-center">
+       <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>
+            <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>
-        <hr>
+        <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>
-        <div class="flex align-center mb20">
-            <label for="" class="title2">답</label>
-            <input type="text" class="data-wrap">
-        </div>
-        <div>
-            <label for="" class="title2">오답 학생</label>
-            <div class="table-wrap mt20">
-                <table>
-                    <thead>
-                        <td>No.</td>
-                        <td>이름</td>
-                        <td>학년</td>
-                        <td>반</td>
-                        <td>오답</td>
-                    </thead>
-                    <tbody>
-                        <tr @click="goToPage('noticeDetail')">
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                        </tr>
-                    </tbody>
-                </table>
-                <!-- <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
-                    <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button>
-                    <button class="selected-btn">1</button>
-                    <button>2</button>
-                    <button>3</button>
-                    <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button>
-                </article> -->
+        <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>
+                    <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">
+                </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">
+                </div>
+                <div class="flex align-center mb20 mr40">
+                    <label for="" class="title2">문제2</label>
+                    <input type="text" class="data-wrap">
+                    <input type="checkbox" class="ui-checkbox ml30">
+                </div>
+                <div class="flex align-center mb20 mr40">
+                    <label for="" class="title2">문제3</label>
+                    <input type="text" class="data-wrap">
+                    <input type="checkbox" class="ui-checkbox ml30">
+                </div>
+                <div class="flex align-center mb20 mr40">
+                    <label for="" class="title2">문제4</label>
+                    <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>
+       </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">
-                수정
+                취소
             </button>
             <button type="button" title="글쓰기" class="new-btn">
-                삭제
+                등록
             </button>
         </div>
     </div>

     data() {
         return {
             mdiMagnify: mdiMagnify,
+            selectedTab: 'tab1',
         }
     },
     methods: {

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

39dfde4

05ead99

client/views/pages/teacher/QuestionList.vue

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

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

...	...	@@ -19,13 +19,13 @@
19	19	<thead>
20	20	<td>No.</td>
21	21	<td>제목</td>
22		- <td>문제</td>
23		- <td>작성자</td>
24		- <td>오답률</td>
	22	+ <td>내용</td>
	23	+ <td>유형</td>
	24	+ <td>지문</td>
25	25	<td>등록일</td>
26	26	</thead>
27	27	<tbody>
28		- <tr @click="goToPage('QuestionInsert')">
	28	+ <tr @click="goToPage('QuestionDetail')">
29	29	<td></td>
30	30	<td></td>
31	31	<td></td>

39dfde4

05ead99

client/views/pages/teacher/TextBookDetail.vue

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

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


     <div class="title-box flex justify-between mb40">
         <p class="title">A교재</p>
         <select name="" id="">
-            <option value="">A 교재</option>
+            <option value="">1단원</option>
         </select>
     </div>
     <div class="board-wrap">
-        <label for="" class="title2">단원</label>
-        <div class="table-pagination flex mt10">
-            <button class="selected-btn">1</button>
-            <button>2</button>
-            <button>3</button>
-        </div>
-        <hr>
         <div class="mb20 ">
             <div class="flex justify-between mb30 align-center">
                 <label for="" class="title1">지문</label>

39dfde4

05ead99

client/views/pages/teacher/TextList.vue

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

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


 <template>
-    <div class="title-box flex justify-between mb40">
+    <div class="title-box flex justify-between mb40 myplan">
         <p class="title">지문</p>
         <select name="" id="">
-            <option value="">1단원</option>
+            <option value="">A 교재</option>
         </select>
     </div>
+        <label for="" class="title2">단원</label>
+        <div class="unit-pagination flex mt10" style="gap: 10px;">
+            <button class="selected-btn">1</button>
+            <button>2</button>
+            <button>3</button>
+        </div>
     <div class="search-wrap flex justify-end mb20">
         <select name="" id="" class="mr10 data-wrap" style="width: 15rem;" v-model="option">
             <option value="" disabled>검색유형</option>

05ead99

client/views/pages/teacher/VocaDetail.vue (added)

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

...	...	@@ -0,0 +1,102 @@
	1	+<template>
	2	+ <div class="title-box flex justify-between mb40">
	3	+ <p class="title">단어장 등록</p>
	4	+ </div>
	5	+ <div class="board-wrap">
	6	+ <div class="flex align-center mb20">
	7	+ <label for="" class="title2">지문</label>
	8	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	9	+ <option value="bbsTtl">제목</option>
	10	+ <option value="bbsCnt">내용</option>
	11	+ <option value="userNm">작성자</option>
	12	+ <option value="bbsCls">카테고리</option>
	13	+ </select>
	14	+ </div>
	15	+ <div class="flex align-center">
	16	+ <label for="" class="title2">단어 목록</label>
	17	+ <div class="flex-column" style="gap: 10px;">
	18	+ <div class="flex align-center" style="gap: 10px;">
	19	+ <input type="text" class="data-wrap" placeholder="영어">
	20	+ <input type="text" class="data-wrap" placeholder="한글">
	21	+ <button type="button" @click="addThesis">
	22	+ <img src="../../../resources/img/btn39_120t_normal.png" alt="">
	23	+
	24	+ </button>
	25	+ </div>
	26	+ <div class="flex align-center " style="gap: 10px;" v-for="(thesis, index) in thesised" :key="thesis.id">
	27	+ <input type="text" class="data-wrap" placeholder="영어">
	28	+ <input type="text" class="data-wrap" placeholder="한글">
	29	+ <button type="button" @click="removeThesis(thesis.id)">
	30	+ <img src="../../../resources/img/btn38_120t_normal.png" alt="">
	31	+ </button>
	32	+
	33	+ </div>
	34	+ </div>
	35	+
	36	+ </div>
	37	+ </div>
	38	+ <div class="flex justify-between mt50">
	39	+ <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')">
	40	+ 목록
	41	+ </button>
	42	+ <div class="flex">
	43	+ <button type="button" title="글쓰기" class="new-btn mr10">
	44	+ 취소
	45	+ </button>
	46	+ <button type="button" title="글쓰기" class="new-btn">
	47	+ 수정
	48	+ </button>
	49	+ </div>
	50	+ </div>
	51	+</template>
	52	+
	53	+<script>
	54	+import SvgIcon from '@jamescoyle/vue-icon';
	55	+import { mdiMagnify, mdiPlusCircleOutline, mdiWindowClose } from '@mdi/js';
	56	+
	57	+
	58	+export default {
	59	+ data() {
	60	+ return {
	61	+ thesised: [],
	62	+ mdiPlusCircleOutline: mdiPlusCircleOutline,
	63	+ mdiMagnify: mdiMagnify,
	64	+ mdiWindowClose: mdiWindowClose,
	65	+ }
	66	+ },
	67	+ methods: {
	68	+ // 논문실적 버튼 추가
	69	+ addThesis() {
	70	+ // 고유 ID로 현재 시간의 타임스탬프를 사용
	71	+ const uniqueId = Date.now();
	72	+ this.thesised.push({
	73	+ id: uniqueId, // 고유 ID 추가
	74	+
	75	+ });
	76	+ },
	77	+ removeThesis(thesisId) {
	78	+ // ID를 기준으로 교육 정보 객체를 찾아서 삭제
	79	+ const index = this.thesised.findIndex(thesis => thesis.id === thesisId);
	80	+ if (index !== -1) {
	81	+ this.thesised.splice(index, 1);
	82	+ }
	83	+ },
	84	+ //
	85	+ goToPage(page) {
	86	+ this.$router.push({ name: page });
	87	+ },
	88	+ },
	89	+ watch: {
	90	+
	91	+ },
	92	+ computed: {
	93	+
	94	+ },
	95	+ components: {
	96	+ SvgIcon
	97	+ },
	98	+ mounted() {
	99	+ console.log('Main2 mounted');
	100	+ }
	101	+}
	102	+</script>(No newline at end of file)

05ead99

client/views/pages/teacher/VocaInsert.vue (added)

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

...	...	@@ -0,0 +1,102 @@
	1	+<template>
	2	+ <div class="title-box flex justify-between mb40">
	3	+ <p class="title">단어장 등록</p>
	4	+ </div>
	5	+ <div class="board-wrap">
	6	+ <div class="flex align-center mb20">
	7	+ <label for="" class="title2">지문</label>
	8	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	9	+ <option value="bbsTtl">제목</option>
	10	+ <option value="bbsCnt">내용</option>
	11	+ <option value="userNm">작성자</option>
	12	+ <option value="bbsCls">카테고리</option>
	13	+ </select>
	14	+ </div>
	15	+ <div class="flex align-center">
	16	+ <label for="" class="title2">단어 목록</label>
	17	+ <div class="flex-column" style="gap: 10px;">
	18	+ <div class="flex align-center" style="gap: 10px;">
	19	+ <input type="text" class="data-wrap" placeholder="영어">
	20	+ <input type="text" class="data-wrap" placeholder="한글">
	21	+ <button type="button" @click="addThesis">
	22	+ <img src="../../../resources/img/btn39_120t_normal.png" alt="">
	23	+
	24	+ </button>
	25	+ </div>
	26	+ <div class="flex align-center " style="gap: 10px;" v-for="(thesis, index) in thesised" :key="thesis.id">
	27	+ <input type="text" class="data-wrap" placeholder="영어">
	28	+ <input type="text" class="data-wrap" placeholder="한글">
	29	+ <button type="button" @click="removeThesis(thesis.id)">
	30	+ <img src="../../../resources/img/btn38_120t_normal.png" alt="">
	31	+ </button>
	32	+
	33	+ </div>
	34	+ </div>
	35	+
	36	+ </div>
	37	+ </div>
	38	+ <div class="flex justify-between mt50">
	39	+ <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')">
	40	+ 목록
	41	+ </button>
	42	+ <div class="flex">
	43	+ <button type="button" title="글쓰기" class="new-btn mr10">
	44	+ 취소
	45	+ </button>
	46	+ <button type="button" title="글쓰기" class="new-btn">
	47	+ 등록
	48	+ </button>
	49	+ </div>
	50	+ </div>
	51	+</template>
	52	+
	53	+<script>
	54	+import SvgIcon from '@jamescoyle/vue-icon';
	55	+import { mdiMagnify, mdiPlusCircleOutline, mdiWindowClose } from '@mdi/js';
	56	+
	57	+
	58	+export default {
	59	+ data() {
	60	+ return {
	61	+ thesised: [],
	62	+ mdiPlusCircleOutline: mdiPlusCircleOutline,
	63	+ mdiMagnify: mdiMagnify,
	64	+ mdiWindowClose: mdiWindowClose,
	65	+ }
	66	+ },
	67	+ methods: {
	68	+ // 논문실적 버튼 추가
	69	+ addThesis() {
	70	+ // 고유 ID로 현재 시간의 타임스탬프를 사용
	71	+ const uniqueId = Date.now();
	72	+ this.thesised.push({
	73	+ id: uniqueId, // 고유 ID 추가
	74	+
	75	+ });
	76	+ },
	77	+ removeThesis(thesisId) {
	78	+ // ID를 기준으로 교육 정보 객체를 찾아서 삭제
	79	+ const index = this.thesised.findIndex(thesis => thesis.id === thesisId);
	80	+ if (index !== -1) {
	81	+ this.thesised.splice(index, 1);
	82	+ }
	83	+ },
	84	+ //
	85	+ goToPage(page) {
	86	+ this.$router.push({ name: page });
	87	+ },
	88	+ },
	89	+ watch: {
	90	+
	91	+ },
	92	+ computed: {
	93	+
	94	+ },
	95	+ components: {
	96	+ SvgIcon
	97	+ },
	98	+ mounted() {
	99	+ console.log('Main2 mounted');
	100	+ }
	101	+}
	102	+</script>(No newline at end of file)

39dfde4

05ead99

client/views/pages/teacher/VocaList.vue

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

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


                 <td>등록일</td>
             </thead>
             <tbody>
-                <tr v-for="(wordBook, index) in dataList" :key="wordBook.wdBookId" @click="goToViewPage('noticeDetail')">
+                <tr v-for="(wordBook, index) in dataList" :key="wordBook.wdBookId" @click="goToViewPage('VocaDetail')">
                     <td>{{ createNo(index) }}</td>
                     <td>{{ wordBook.textTtl }}</td>
                     <td>{{ wordBook.wordsPreview }}</td>

             </button>
         </article>
         <div class="flex justify-end ">
-            <button type="button" title="등록" class="new-btn" @click="goToPage('noticeInsert')">
+            <button type="button" title="등록" class="new-btn" @click="goToPage('VocaInsert')">
                 등록
             </button>
         </div>

39dfde4

05ead99

client/views/pages/teacher/noticeDetail.vue

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

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


 <template>
-    <div class="title-box flex justify-between mb40">
-        <p class="title">공지 등록</p>
+  <div class="title-box flex justify-between mb40">
+    <p class="title">{{ dataList.bbsCls }}</p>
+  </div>
+  <div class="board-wrap">
+    <div class="flex align-center">
+      <label for="" class="title2">{{ dataList.bbsTtl }}</label>
     </div>
-        <div class="board-wrap">
-            <div class="flex align-center">
-                <label for="" class="title2">제목</label>
-                <input type="text" class="data-wrap">
-            </div>
-            <hr>
-            <textarea name="" id=""></textarea>
-            <hr>
-            <div class="flex align-center">
-                <label for="" class="title2">첨부파일</label>
-                <input type="file" ref="fileInput" @change="handleFileUpload" />
-            </div>
-            <hr>
-            <div class="flex justify-between">
-                <button type="button" class="flex align-center">
-                            <svg-icon type="mdi" :path="mdilChevronLeft" ></svg-icon>
-                   <p> 이전글</p>
-                        </button>
-                <button type="button" class="flex align-center"><p>다음글</p>
-                            <svg-icon type="mdi" :path="mdilChevronRight" ></svg-icon>
-
-                        </button>
-
-
-            </div>
-        </div>
-        <div class="flex justify-between mt50">
-                <button type="button" title="글쓰기" class="new-btn"  @click="goToPage('Board')">
-                    목록
-                </button>
-               <div class="flex">
-                    <button type="button" title="글쓰기" class="new-btn mr10"  >
-                        수정
-                    </button>
-                    <button type="button" title="글쓰기" class="new-btn"  >
-                        삭제
-                    </button>
-               </div>
-        </div>
+    <hr />
+    <textarea readonly name="" id="">{{ dataList.bbsCnt }}</textarea>
+    <hr />
+    <div class="flex align-center">
+      <label for="" class="title2">첨부파일</label>
+      <label for="" class="title2" v-if="file">{{ file.fileNm }}</label>
+    </div>
+    <hr />
+    <div class="flex justify-between">
+      <button type="button" class="flex align-center" @click="prevBoard()">
+        <svg-icon type="mdi" :path="mdilChevronLeft"></svg-icon>
+        <p>이전글</p>
+      </button>
+      <button type="button" class="flex align-center" @click="nextBoard()">
+        <p>다음글</p>
+        <svg-icon type="mdi" :path="mdilChevronRight"></svg-icon>
+      </button>
+    </div>
+  </div>
+  <div class="flex justify-between mt50">
+    <button
+      type="button"
+      title="글쓰기"
+      class="new-btn"
+      @click="goToPage('Board')"
+    >
+      목록
+    </button>
+    <div class="flex">
+      <button type="button" title="글쓰기" class="new-btn mr10">수정</button>
+      <button
+        type="button"
+        title="글쓰기"
+        class="new-btn"
+        @click="[deleteBoard(), goToPage('Board')]"
+      >
+        삭제
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify } from '@mdi/js';
-import { mdilChevronRight,mdilChevronLeft } from '@mdi/light-js';
-
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify } from "@mdi/js";
+import { mdilChevronRight, mdilChevronLeft } from "@mdi/light-js";
+import axios from "axios";
 
 export default {
-    data () {
-        return {
-            mdiMagnify: mdiMagnify,
-            mdilChevronRight: mdilChevronRight ,
-            mdilChevronLeft:mdilChevronLeft,
-        }
-    },
-    methods: {
-        goToPage(page) {
-         this.$router.push({ name: page });
-      },
-    },
-    watch: {
+  data() {
+    return {
+      mdiMagnify: mdiMagnify,
+      mdilChevronRight: mdilChevronRight,
+      mdilChevronLeft: mdilChevronLeft,
 
+      dataList: null,
+      sclsId: "",
+
+      title: "",
+      content: "",
+      category: "",
+      file: "",
+      user: "",
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    computed: {
-       
+    created() {
+      const vm = this;
+      const seletedBoardList = JSON.parse(
+        sessionStorage.getItem("selectedBoardList")
+      );
+
+      if (seletedBoardList) {
+        vm.dataList = seletedBoardList;
+      }
+      console.log(vm.dataList);
     },
-    components:{
-        SvgIcon
+
+    findFile() {
+      const vm = this;
+      axios({
+        url: "/file/find.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          file_mng_id: vm.dataList.fileMngId,
+        },
+      })
+        .then(function (res) {
+          console.log("fileInfo - response : ", res.data.list[0]);
+          vm.file = res.data.list[0];
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+        });
     },
-    mounted() {
-        console.log('Main2 mounted');
-    }
-}
-</script>
+
+    prevBoard() {
+      const vm = this;
+      axios({
+        url: "/board/prevBoard.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          sclsId: vm.dataList.sclsId,
+          bbsId: vm.dataList.bbsId,
+        },
+      })
+        .then(function (res) {
+          console.log("dataList - response : ", res.data);
+          vm.dataList = res.data[0].boardClass[0].board[0];
+          sessionStorage.setItem(
+            "selectedBoardList",
+            JSON.stringify(vm.dataList)
+          );
+          vm.findFile();
+          console.log(vm.dataList);
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+          alert("첫번째 글 입니다.");
+        });
+    },
+
+    nextBoard() {
+      const vm = this;
+      axios({
+        url: "/board/nextBoard.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          sclsId: vm.dataList.sclsId,
+          bbsId: vm.dataList.bbsId,
+        },
+      })
+        .then(function (res) {
+          console.log("dataList - response : ", res.data);
+          vm.dataList = res.data[0].boardClass[0].board[0];
+          sessionStorage.setItem(
+            "selectedBoardList",
+            JSON.stringify(vm.dataList)
+          );
+          vm.findFile();
+          console.log(vm.dataList);
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+          alert("가장 최신 글 입니다.");
+        });
+    },
+    deleteBoard() {
+      const vm = this;
+      axios({
+        url: "/board/delete.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          bbsId: vm.dataList.bbsId,
+        },
+      })
+        .then(function (res) {
+          console.log("delete - response : ", res.data);
+          alert("삭제 되었습니다.");
+        })
+        .catch(function (error) {
+          console.log("rssult - error : ", error);
+        });
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {
+    SvgIcon,
+  },
+  mounted() {
+    console.log("Main2 mounted");
+    this.created();
+    this.findFile();
+  },
+};
+</script>

39dfde4

05ead99

client/views/pages/teacher/textbook.vue

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

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


 <template>
     <div class="title-box flex justify-between mb40">
-        <p class="title">교재 관리</p>
-        <!-- <select name="" id="">
+        <p class="title">교재</p>
+        <select name="" id="">
             <option value="">A반</option>
-        </select> -->
-        </div>
-        <div class="content-t">
-            <div  class=" flex " style="gap: 50px;">
-                <div class="textbook">
-                    <div class="box " style="gap: 10px;" @click="goToPage('TextBookDetail')">
-                    </div>
-                    <div class="text ">
-                        <p class="title1" style="color: #fff;">A 교재</p>
-                        <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
-                            <button>수정</button><p>&#124;</p>
-                            <button @click="showConfirm('delete')">삭제</button>
-                        </div>
-                    </div>
+        </select>
+    </div>
+    <div class="content-t">
+        <div class="flex" style="gap: 2.5%;" :style="{flexWrap: 'wrap'}">
+            <div class="textbook" v-for="textbookItem in textbookList" :key="textbookItem.book_id" style="width: 22.5%; margin-bottom: 30px;">
+                <div class="box" style="gap: 10px;" @click="goToPage('TextBookDetail', textbookItem.book_id)">
                 </div>
-                
-                <div class="textbook-add">
-                        <button  @click="buttonSearch"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button>
-        
+                <div class="text">
+                    <p class="title1" style="color: #fff;">{{ textbookItem.book_nm }}</p>
+                    <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
+                        <button @click="editBook(textbookItem)">수정</button>
+                        <p>&#124;</p>
+                        <button @click="deleteBook(textbookItem.book_id)">삭제</button>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div v-show="searchOpen" class="popup-wrap">
-                <div class="popup-box ">
+
+            <div class="textbook-add" style="width: 22.5%; margin-bottom: 30px;">
+                <button @click="buttonSearch">
+                    <img src="../../../resources/img/btn32_98t_normal.png" alt="">
+                </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" placeholder="">
-                        <!-- <button type="button" title="교재 검색">
+                        <input type="text" class="data-wrap" v-model="newBookName" placeholder="교재 이름을 입력하세요">
+                        <button type="button" title="교재 검색" @click="insertBook">
                             <img src="../../../resources/img/look_t.png" alt="">
-                        </button> -->
+                        </button>
                     </div>
-                    <div class="flex justify-center ">
-                        <button type="button" title="글쓰기" class="new-btn mr10">
+                    <div class="flex justify-center">
+                        <button type="button" title="취소" class="new-btn mr10" @click="closeBtn">
                             취소
                         </button>
-                        <button type="button" title="글쓰기" class="new-btn">
-                            생성
+                        <button type="button" title="생성" class="new-btn" @click="editMode ? updateBook() : insertBook()">
+                            {{ editMode ? '수정' : '생성' }}
                         </button>
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 </template>
+
+
 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiWindowClose } from '@mdi/js';
+import { mdiWindowClose } from '@mdi/js';
+import axios from 'axios';
 
 export default {
-    data () {
+    data() {
         return {
             mdiWindowClose: mdiWindowClose,
             showModal: false,
             searchOpen: false,
+            textbookList: [],
+            newBookName: '',
+            editMode: false,
+            editBookId: null,
         }
     },
     methods: {
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        closeModal() {
-            this.showModal = false;
+        goToPage(page, book_Id) {
+            this.$router.push({ name: page, query: { book_Id }});
         },
         buttonSearch() {
             this.searchOpen = true;
         },
         closeBtn() {
             this.searchOpen = false;
-
+            this.editMode = false;
+            this.editBookId = null;
+            this.newBookName = '';
         },
-        showConfirm(type) {
-            let message = '';
-            if (type === 'delete') {
-                message = '삭제하시겠습니까?';
-            } else if (type === 'reset') {
-                message = '초기화하시겠습니까?';
-            } else if (type === 'save') {
-                message = '등록하시겠습니까?';
-            }
-
-            if (confirm(message)) {
-                this.goBack();
-            }
+        editBook(book) {
+            this.newBookName = book.book_nm;
+            this.editMode = true;
+            this.editBookId = book.book_id;
+            this.searchOpen = true;
         },
-
-    },
-    watch: {
-
+        bookList() {
+            axios({
+                url: "/book/findAll.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                }
+            })
+            .then(response => {
+                this.textbookList = response.data;
+                })
+            .catch(error => {
+                console.error('Error fetching books:', error);
+            });
+        },
+        insertBook() {
+            const newBook = {
+                book_nm: this.newBookName
+            };
+            axios.post('/book/insert.json', newBook)
+                .then(response => {
+                    this.bookList();
+                    this.closeBtn();
+                })
+                .catch(error => {
+                    console.error('Error creating book:', error);
+                });
+        },
+        updateBook() {
+            const updatedBook = {
+                book_id: this.editBookId,
+                book_nm: this.newBookName
+            };
+            axios({
+                url: "/book/update.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: updatedBook,
+            })
+            .then(response => {
+                this.bookList();
+                this.closeBtn();
+            })
+            .catch(error => {
+                 console.error('Error updating book:', error);
+            });
+        },
+        deleteBook(book_Id) {
+            if (confirm('삭제하시겠습니까?')) {
+                axios({
+                    url: "/book/delete.json",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json; charset=UTF-8",
+                    },
+                    data: {
+                        book_id: book_Id
+                    },
+                })
+                .then(response => {
+                    this.bookList();
+                })
+                .catch(error => {
+                    console.error('Error deleting book:', error);
+                });
+            }
+        }
     },
     computed: {
 

     },
     mounted() {
         console.log('Main2 mounted');
+        this.bookList();
     }
 }
 </script>
-<style scoped>
-.textbook{width: 300px;}
+
+<style>
+.content-t {
+    flex-wrap: wrap; 
+    height: 90%;
+    overflow-y: scroll;
+}
+.flex {
+    display: flex;
+    flex-wrap: wrap;
+}
+.textbook, .textbook-add {
+    margin-bottom: 30px;
+}
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -277,7 +277,7 @@
277	277	background-image: url('../img/img199_12p.png');
278	278	width: 367px;
279	279	height: 182px;
280		- padding: 20px 60px 20px 50px;
	280	+ padding: 20px 50px 20px 40px;
281	281	color: #fff;
282	282	}
283	283	.mypage .textbook{font-family: 'ONEMobilePOPOTF';}
...	...	@@ -830,7 +830,7 @@
830	830	.side_t{
831	831	background-color: #fff;
832	832	width: 360px;
833		- height: 100%;
	833	+ /* height: 100%; */
834	834	padding: 25px 40px;
835	835	}
836	836
...	...	@@ -849,7 +849,7 @@
849	849	to { opacity:1; transform:translate3d(0, 0, 0); }
850	850	}
851	851
852		-select{min-width: 128px; border-radius: 5px; padding: 10px 20px; font-size: 18px;}
	852	+select{min-width: 128px; border-radius: 5px; padding: 10px 20px; font-size: 18px; }
853	853	select option{font-size: 20px; font-weight: bold;}
854	854
855	855
...	...	@@ -917,7 +917,7 @@
917	917	font-family: 'Pretendard-Bold';
918	918	}
919	919	.new-btn{
920		- padding: 5px 20px;
	920	+ padding: 10px 30px;
921	921	font-size: 20px;
922	922	font-family: 'Pretendard-Bold';
923	923	border-radius: 5px;
...	...	@@ -1046,4 +1046,22 @@
1046	1046	min-height: 20rem;
1047	1047	}
1048	1048	.dropbox p{line-height: 20rem;}
	1049	+
	1050	+
	1051	+ /* 단원 버튼 */
	1052	+ .unit-pagination button {
	1053	+ font-size: 3rem;
	1054	+ font-family: 'Pretendard-Regular';
	1055	+ padding: 5px 30px;
	1056	+ border: #FFD56B 3px solid;
	1057	+ border-radius: 10px;
	1058	+ color: #331600;
	1059	+ background-color: #FFF3D7
	1060	+}
	1061	+
	1062	+ .unit-pagination .selected-btn {
	1063	+ background-color: #FFBA08;
	1064	+ color: #fff;
	1065	+ font-family: 'Pretendard-Bold';
	1066	+}
1049	1067	/* ------------------------선생님 --------------------- */ (No newline at end of file)

...	...	@@ -80,20 +80,20 @@
80	80
81	81	}
82	82	html,
83		-body{height: 100%; background-color: #eaedf4;}
	83	+body{ background-color: #eaedf4;}
84	84	body{position:relative;text-align: left; overflow-x: hidden; width: 1920px;}
85	85	::-webkit-scrollbar {width: 10px; height: 10px;}
86	86	::-webkit-scrollbar-track {border-radius: 5px;background-color: #EAEDF4;}
87	87	::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #FFBA08;}
88	88	#root, #app{
89		- height: 100%;
	89	+ /* height: 100%; */
90	90	}
91	91	input, select, span,p, label {
92	92	font-size: 16px;
93	93	}
94	94	input::placeholder{color: #8C8E92;}
95	95	input[type="text"]{ padding:10px 20px; width: 100%; }
96		-
	96	+input#file-upload-button{padding: 10px ;}
97	97
98	98	button{
99	99	border: none;
...	...	@@ -112,4 +112,24 @@
112	112	border: 0;}
113	113	thead{background-color: #eaedf4;}
114	114	tbody tr{border-bottom: #eaedf4 1px solid; cursor: pointer;}
115		-td{padding: 10px ; text-align: center;} (No newline at end of file)
	115	+td{padding: 10px ; text-align: center;}
	116	+
	117	+/* .btn-upload {
	118	+ width: 100px;
	119	+ height: 40px;
	120	+ background: #f0f0f0;
	121	+ border: 1px solid rgb(77,77,77);
	122	+ font-weight: 500;
	123	+ cursor: pointer;
	124	+ display: flex;
	125	+ align-items: center;
	126	+ justify-content: center;
	127	+ &:hover {
	128	+ background: rgb(77,77,77);
	129	+ color: #fff;
	130	+ }
	131	+ }
	132	+
	133	+ #file {
	134	+ display: none;
	135	+ } */ (No newline at end of file)

...	...	@@ -33,9 +33,10 @@
33	33	<details>
34	34	<summary>교재 관리</summary>
35	35	<router-link to="/textbook.page" class="tpt">홈</router-link>
36		- <router-link to="/Board.page" class="tpt">게시판</router-link>
37		- <router-link to="/Board.page" class="tpt">학생목록</router-link>
38		- <router-link to="/Board.page" class="tpt">교재</router-link>
	36	+ <router-link to="/TextList.page" class="tpt">지문</router-link>
	37	+ <router-link to="/QuestionList.page" class="tpt">문제</router-link>
	38	+ <router-link to="/VocaList.page" class="tpt">단어장</router-link>
	39	+ <router-link to="/ExamList.page" class="tpt">평가</router-link>
39	40	</details>
40	41	</div>
41	42	</div>

...	...	@@ -84,9 +84,13 @@
84	84	import TextDetail from "./teacher/TextDetail.vue";
85	85	import QuestionList from "./teacher/QuestionList.vue";
86	86	import QuestionInsert from "./teacher/QuestionInsert.vue";
	87	+import QuestionDetail from "./teacher/QuestionDetail.vue";
87	88	import VocaList from "./teacher/VocaList.vue";
	89	+import VocaInsert from "./teacher/VocaInsert.vue";
	90	+import VocaDetail from "./teacher/VocaDetail.vue";
88	91	import ExamList from "./teacher/ExamList.vue";
89	92	import ExamDetail from "./teacher/ExamDetail.vue";
	93	+import ExamInsert from "./teacher/ExamInsert.vue";
90	94	import RoadMap from "./teacher/RoadMap.vue";
91	95
92	96	const routes = [
...	...	@@ -185,11 +189,16 @@
185	189	{ path: '/C_TextBookDetail.page', name: 'C_TextBookDetail', component: C_TextBookDetail },
186	190	{ path: '/TextList.page', name: 'TextList', component: TextList },
187	191	{ path: '/TextInsert.page', name: 'TextInsert', component: TextInsert },
	192	+ { path: '/TextDetail.page', name: 'TextDetail', component: TextDetail },
188	193	{ path: '/QuestionList.page', name: 'QuestionList', component: QuestionList },
189	194	{ path: '/QuestionInsert.page', name: 'QuestionInsert', component: QuestionInsert },
	195	+ { path: '/QuestionDetail.page', name: 'QuestionDetail', component: QuestionDetail },
190	196	{ path: '/VocaList.page', name: 'VocaList', component: VocaList },
	197	+ { path: '/VocaInsert.page', name: 'VocaInsert', component: VocaInsert },
	198	+ { path: '/VocaDetail.page', name: 'VocaDetail', component: VocaDetail },
191	199	{ path: '/ExamList.page', name: 'ExamList', component: ExamList },
192	200	{ path: '/ExamDetail.page', name: 'ExamDetail', component: ExamDetail },
	201	+ { path: '/ExamInsert.page', name: 'ExamInsert', component: ExamInsert },
193	202	{ path: '/C_TextList.page', name: 'C_TextList', component: C_TextList },
194	203	{ path: '/C_TextInsert.page', name: 'C_TextInsert', component: C_TextInsert },
195	204	{ path: '/C_QuestionList.page', name: 'C_QuestionList', component: C_QuestionList },

...	...	@@ -38,7 +38,7 @@
38	38	:class="{ 'selected-row': selectedRow == item.dataList }"
39	39	@click="[goToPage('noticeDetail'), selectBoardList(item)]"
40	40	>
41		- <td>{{ totalBoard - index }}</td>
	41	+ <td>{{ createNo(index) }}</td>
42	42	<td>{{ item.bbsTtl }}</td>
43	43	<td>{{ item.bbsCls }}</td>
44	44	<td>{{ userNm }}</td>
...	...	@@ -50,22 +50,19 @@
50	50	class="table-pagination flex justify-center align-center mb20 mt30"
51	51	style="gap: 10px"
52	52	>
53		- <button>
54		- <img
55		- src="../../../resources/img/btn27_90t_normal.png"
56		- alt=""
57		- @click="previousPage"
58		- :disabled="page === 1"
59		- />
	53	+ <button @click="goToPagination(currentPage - 1)">
	54	+ <img src="../../../resources/img/btn27_90t_normal.png" alt="" />
60	55	</button>
61		- <button class="selected-btn">{{ page }}</button>
62		- <button>
63		- <img
64		- src="../../../resources/img/btn28_90t_normal.png"
65		- alt=""
66		- @click="nextPage"
67		- :disabled="page === totalPages"
68		- />
	56	+ <button
	57	+ v-for="page in paginationButtons"
	58	+ :key="page"
	59	+ @click="goToPagination(page - 1)"
	60	+ :class="{ 'selected-btn': currentPage === page - 1 }"
	61	+ >
	62	+ {{ page }}
	63	+ </button>
	64	+ <button @click="goToPagination(currentPage + 1)">
	65	+ <img src="../../../resources/img/btn28_90t_normal.png" alt="" />
69	66	</button>
70	67	</article>
71	68	<div class="flex justify-end">
...	...	@@ -93,13 +90,12 @@
93	90
94	91	// 게시글 정보
95	92	dataList: [],
96		- totalBoard: null,
	93	+ totalPosts: 0,
97	94	selectedRow: "",
98	95
99	96	// 페이징
100		- page: 1,
101		- pageSize: 8,
102		- totalPages: null,
	97	+ currentPage: 0,
	98	+ itemsPerPage: 8,
103	99
104	100	// 반 아이디 (추후 세션에서 받는걸로 수정)
105	101	sclsId: "1",
...	...	@@ -137,21 +133,22 @@
137	133	headers: {
138	134	"Content-Type": "application/json; charset=UTF-8",
139	135	},
140		- data: { page: vm.page, pageSize: vm.pageSize, sclsId: vm.sclsId },
	136	+ data: {
	137	+ page: vm.currentPage + 1,
	138	+ pageSize: vm.itemsPerPage,
	139	+ sclsId: vm.sclsId,
	140	+ },
141	141	})
142	142	.then(function (res) {
143	143	console.log("dataList - response : ", res.data);
144		- console.log(res.data.result[0].boardClass[0].board);
145	144
146	145	vm.dataList = res.data.result[0].boardClass[0].board;
147	146	vm.userNm = res.data.result[0].userNm;
148	147	vm.userId = res.data.result[0].userId;
149		- vm.totalBoard = res.data.totalBoard;
150		- vm.totalPages = Math.ceil(vm.totalBoard / vm.pageSize);
	148	+ vm.totalPosts = res.data.totalBoard;
151	149	})
152	150	.catch(function (error) {
153	151	console.log("result - error : ", error);
154		- alert("비상 비상!");
155	152	});
156	153	},
157	154
...	...	@@ -171,8 +168,8 @@
171	168	let searchPayload = {
172	169	keyword: vm.searchKeyword,
173	170	option: vm.selectedSearchOption,
174		- page: vm.page,
175		- pageSize: vm.pageSize,
	171	+ page: vm.currentPage,
	172	+ pageSize: vm.itemsPerPage,
176	173	sclsId: vm.sclsId,
177	174	};
178	175	axios({
...	...	@@ -188,7 +185,7 @@
188	185	vm.dataList = res.data.result[0].boardClass[0].board;
189	186	vm.userNm = res.data.result[0].userNm;
190	187	vm.userId = res.data.result[0].userId;
191		- vm.totalBoard = res.data.totalBoard;
	188	+ vm.totalPosts = res.data.totalBoard;
192	189	})
193	190	.catch(function (error) {
194	191	console.log("dataSearch - error : ", error);
...	...	@@ -196,22 +193,37 @@
196	193	});
197	194	},
198	195
199		- previousPage() {
200		- if (this.page > 1) {
201		- this.page -= 1;
202		- this.boardList();
203		- }
	196	+ createNo(index) {
	197	+ return this.totalPosts - (this.currentPage * this.itemsPerPage + index);
204	198	},
205	199
206		- nextPage() {
207		- if (this.page < this.totalPages) {
208		- this.page += 1;
209		- this.boardList();
	200	+ goToPagination(page) {
	201	+ if (page < 0 \|\| page >= this.totalPages) {
	202	+ return;
210	203	}
	204	+ this.currentPage = page;
	205	+ this.boardList();
211	206	},
212	207	},
213	208	watch: {},
214		- computed: {},
	209	+ computed: {
	210	+ totalPages() {
	211	+ return Math.ceil(this.totalPosts / this.itemsPerPage);
	212	+ },
	213	+ paginationButtons() {
	214	+ let start = Math.max(0, this.currentPage - 2);
	215	+ let end = Math.min(start + 5, this.totalPages);
	216	+
	217	+ if (end - start < 5) {
	218	+ start = Math.max(0, end - 5);
	219	+ }
	220	+
	221	+ return Array.from({ length: end - start }, (_, i) => start + i + 1);
	222	+ },
	223	+ startIndex() {
	224	+ return this.currentPage * this.itemsPerPage;
	225	+ },
	226	+ },
215	227	components: {
216	228	SvgIcon,
217	229	},

...	...	@@ -1,13 +1,13 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3		- <p class="title">A반</p>
	3	+ <p class="title">A교재</p>
4	4	<select name="" id="">
5		- <option value="">A 교재</option>
	5	+ <option value="">A 반</option>
6	6	</select>
7	7	</div>
8	8	<div class="board-wrap">
9	9	<label for="" class="title2">단원</label>
10		- <div class="table-pagination flex mt10">
	10	+ <div class="unit-pagination flex mt10" style="gap: 10px;">
11	11	<button class="selected-btn">1</button>
12	12	<button>2</button>
13	13	<button>3</button>

...	...	@@ -78,7 +78,7 @@
78	78	<button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button>
79	79	</article>
80	80	<div class="flex justify-end ">
81		- <button type="button" title="등록" class="new-btn" @click="goToPage('ExamDetail')">
	81	+ <button type="button" title="등록" class="new-btn" @click="goToPage('ExamInsert')">
82	82	등록
83	83	</button>
84	84	</div>

...	...	@@ -75,6 +75,7 @@
75	75	}
76	76	},
77	77	methods: {
	78	+
78	79	goToPage(page, sclsId) {
79	80	//console.log(`sclsId : ${sclsId}`); // 쿼리 확인
80	81	this.$router.push({ name: page , query : {sclsId : sclsId}});

...	...	@@ -1,7 +1,7 @@
1	1	<template>
2	2	<div class="flex justify-between" style="height: 100%;">
3	3	<Side_t></Side_t>
4		- <div style="padding: 15px 60px 90px 60px; ">
	4	+ <div style="padding: 15px 60px 120px 0px ">
5	5	<Header></Header>
6	6	<div class="main-wrap">
7	7	<router-view />

...	...	@@ -3,54 +3,183 @@
3	3	<p class="title">문제 등록</p>
4	4	</div>
5	5	<div class="board-wrap">
6		- <div class="flex align-center mb20">
7		- <label for="" class="title2">제목</label>
8		- <input type="text" class="data-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>
9	23	</div>
10	24	<hr>
11		- <div class="flex align-center">
	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>
	34	+ </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">
12	69	<label for="" class="title2">내용</label>
13	70	<textarea name="" id="" class="data-wrap"></textarea>
14	71	</div>
15		- <hr>
	72	+ <div class="flex align-center mb20">
	73	+ <label for="" class="title2">힌트</label>
	74	+ <input type="text" class="data-wrap">
	75	+ </div>
16	76	<div class="flex align-center mb20">
17	77	<label for="" class="title2">첨부파일</label>
18	78	<input type="file" ref="fileInput" @change="handleFileUpload" />
19	79	</div>
20		- <div class="flex align-center mb20">
21		- <label for="" class="title2">답</label>
22		- <input type="text" class="data-wrap">
23		- </div>
24		- <div>
25		- <label for="" class="title2">오답 학생</label>
26		- <div class="table-wrap mt20">
27		- <table>
28		- <thead>
29		- <td>No.</td>
30		- <td>이름</td>
31		- <td>학년</td>
32		- <td>반</td>
33		- <td>오답</td>
34		- </thead>
35		- <tbody>
36		- <tr @click="goToPage('noticeDetail')">
37		- <td></td>
38		- <td></td>
39		- <td></td>
40		- <td></td>
41		- <td></td>
42		- </tr>
43		- </tbody>
44		- </table>
45		- <!-- <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
46		- <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button>
47		- <button class="selected-btn">1</button>
48		- <button>2</button>
49		- <button>3</button>
50		- <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button>
51		- </article> -->
	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>
52	101	</div>
53	102	</div>
	103	+ <div v-else-if="selectedTab === 'tab2'">
	104	+ <div class="flex align-center mb20">
	105	+ <label for="" class="title2">답</label>
	106	+ <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">
	121	+ </div>
	122	+ <div class="flex align-center mb20">
	123	+ <label for="" class="title2">답1</label>
	124	+ <input type="text" class="data-wrap">
	125	+ </div>
	126	+ <div class="flex align-center mb20 mr40">
	127	+ <label for="" class="title2">문제2</label>
	128	+ <input type="text" class="data-wrap">
	129	+ </div>
	130	+ <div class="flex align-center mb20">
	131	+ <label for="" class="title2">답2</label>
	132	+ <input type="text" class="data-wrap">
	133	+ </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 ">
	139	+ <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	+ <input type="text" class="data-wrap">
	145	+ </div>
	146	+ <div class="flex align-center mb20">
	147	+ <label for="" class="title2">답4</label>
	148	+ <input type="text" class="data-wrap">
	149	+ </div>
	150	+ </div>
	151	+ <div class="flex align-center mb20">
	152	+ <label for="" class="title2">해설</label>
	153	+ <textarea name="" id="" class="data-wrap"></textarea>
	154	+ </div>
	155	+ </div>
	156	+ <div v-else-if="selectedTab === 'tab4'">
	157	+ <div class="flex align-center mb20 mr40" >
	158	+ <label for="" class="title2">문제1</label>
	159	+ <input type="text" class="data-wrap">
	160	+ <input type="checkbox" class="ui-checkbox ml30">
	161	+ </div>
	162	+ <div class="flex align-center mb20 mr40">
	163	+ <label for="" class="title2">문제2</label>
	164	+ <input type="text" class="data-wrap">
	165	+ <input type="checkbox" class="ui-checkbox ml30">
	166	+ </div>
	167	+ <div class="flex align-center mb20 mr40">
	168	+ <label for="" class="title2">문제3</label>
	169	+ <input type="text" class="data-wrap">
	170	+ <input type="checkbox" class="ui-checkbox ml30">
	171	+ </div>
	172	+ <div class="flex align-center mb20 mr40">
	173	+ <label for="" class="title2">문제4</label>
	174	+ <input type="text" class="data-wrap">
	175	+ <input type="checkbox" class="ui-checkbox ml30">
	176	+ </div>
	177	+ <div class="flex align-center mb20">
	178	+ <label for="" class="title2">해설</label>
	179	+ <textarea name="" id="" class="data-wrap"></textarea>
	180	+ </div>
	181	+ </div>
	182	+
54	183	</div>
55	184	<div class="flex justify-between mt50">
56	185	<button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')">
...	...	@@ -58,10 +187,10 @@
58	187	</button>
59	188	<div class="flex">
60	189	<button type="button" title="글쓰기" class="new-btn mr10">
61		- 수정
	190	+ 취소
62	191	</button>
63	192	<button type="button" title="글쓰기" class="new-btn">
64		- 삭제
	193	+ 등록
65	194	</button>
66	195	</div>
67	196	</div>
...	...	@@ -76,6 +205,7 @@
76	205	data() {
77	206	return {
78	207	mdiMagnify: mdiMagnify,
	208	+ selectedTab: 'tab1',
79	209	}
80	210	},
81	211	methods: {
...	...	@@ -96,4 +226,7 @@
96	226	console.log('Main2 mounted');
97	227	}
98	228	}
99		-</script> (No newline at end of file)
	229	+</script>
	230	+<style scoped>
	231	+.ui-checkbox{width: 30px; height: 30px;}
	232	+</style> (No newline at end of file)

...	...	@@ -2,17 +2,10 @@
2	2	<div class="title-box flex justify-between mb40">
3	3	<p class="title">A교재</p>
4	4	<select name="" id="">
5		- <option value="">A 교재</option>
	5	+ <option value="">1단원</option>
6	6	</select>
7	7	</div>
8	8	<div class="board-wrap">
9		- <label for="" class="title2">단원</label>
10		- <div class="table-pagination flex mt10">
11		- <button class="selected-btn">1</button>
12		- <button>2</button>
13		- <button>3</button>
14		- </div>
15		- <hr>
16	9	<div class="mb20 ">
17	10	<div class="flex justify-between mb30 align-center">
18	11	<label for="" class="title1">지문</label>

...	...	@@ -1,10 +1,16 @@
1	1	<template>
2		- <div class="title-box flex justify-between mb40">
	2	+ <div class="title-box flex justify-between mb40 myplan">
3	3	<p class="title">지문</p>
4	4	<select name="" id="">
5		- <option value="">1단원</option>
	5	+ <option value="">A 교재</option>
6	6	</select>
7	7	</div>
	8	+ <label for="" class="title2">단원</label>
	9	+ <div class="unit-pagination flex mt10" style="gap: 10px;">
	10	+ <button class="selected-btn">1</button>
	11	+ <button>2</button>
	12	+ <button>3</button>
	13	+ </div>
8	14	<div class="search-wrap flex justify-end mb20">
9	15	<select name="" id="" class="mr10 data-wrap" style="width: 15rem;" v-model="option">
10	16	<option value="" disabled>검색유형</option>

...	...	@@ -28,7 +28,7 @@
28	28	<td>등록일</td>
29	29	</thead>
30	30	<tbody>
31		- <tr v-for="(wordBook, index) in dataList" :key="wordBook.wdBookId" @click="goToViewPage('noticeDetail')">
	31	+ <tr v-for="(wordBook, index) in dataList" :key="wordBook.wdBookId" @click="goToViewPage('VocaDetail')">
32	32	<td>{{ createNo(index) }}</td>
33	33	<td>{{ wordBook.textTtl }}</td>
34	34	<td>{{ wordBook.wordsPreview }}</td>
...	...	@@ -49,7 +49,7 @@
49	49	</button>
50	50	</article>
51	51	<div class="flex justify-end ">
52		- <button type="button" title="등록" class="new-btn" @click="goToPage('noticeInsert')">
	52	+ <button type="button" title="등록" class="new-btn" @click="goToPage('VocaInsert')">
53	53	등록
54	54	</button>
55	55	</div>

...	...	@@ -1,78 +1,200 @@
1	1	<template>
2		- <div class="title-box flex justify-between mb40">
3		- <p class="title">공지 등록</p>
	2	+ <div class="title-box flex justify-between mb40">
	3	+ <p class="title">{{ dataList.bbsCls }}</p>
	4	+ </div>
	5	+ <div class="board-wrap">
	6	+ <div class="flex align-center">
	7	+ <label for="" class="title2">{{ dataList.bbsTtl }}</label>
4	8	</div>
5		- <div class="board-wrap">
6		- <div class="flex align-center">
7		- <label for="" class="title2">제목</label>
8		- <input type="text" class="data-wrap">
9		- </div>
10		- <hr>
11		- <textarea name="" id=""></textarea>
12		- <hr>
13		- <div class="flex align-center">
14		- <label for="" class="title2">첨부파일</label>
15		- <input type="file" ref="fileInput" @change="handleFileUpload" />
16		- </div>
17		- <hr>
18		- <div class="flex justify-between">
19		- <button type="button" class="flex align-center">
20		- <svg-icon type="mdi" :path="mdilChevronLeft" ></svg-icon>
21		- <p> 이전글</p>
22		- </button>
23		- <button type="button" class="flex align-center"><p>다음글</p>
24		- <svg-icon type="mdi" :path="mdilChevronRight" ></svg-icon>
25		-
26		- </button>
27		-
28		-
29		- </div>
30		- </div>
31		- <div class="flex justify-between mt50">
32		- <button type="button" title="글쓰기" class="new-btn" @click="goToPage('Board')">
33		- 목록
34		- </button>
35		- <div class="flex">
36		- <button type="button" title="글쓰기" class="new-btn mr10" >
37		- 수정
38		- </button>
39		- <button type="button" title="글쓰기" class="new-btn" >
40		- 삭제
41		- </button>
42		- </div>
43		- </div>
	9	+ <hr />
	10	+ <textarea readonly name="" id="">{{ dataList.bbsCnt }}</textarea>
	11	+ <hr />
	12	+ <div class="flex align-center">
	13	+ <label for="" class="title2">첨부파일</label>
	14	+ <label for="" class="title2" v-if="file">{{ file.fileNm }}</label>
	15	+ </div>
	16	+ <hr />
	17	+ <div class="flex justify-between">
	18	+ <button type="button" class="flex align-center" @click="prevBoard()">
	19	+ <svg-icon type="mdi" :path="mdilChevronLeft"></svg-icon>
	20	+ <p>이전글</p>
	21	+ </button>
	22	+ <button type="button" class="flex align-center" @click="nextBoard()">
	23	+ <p>다음글</p>
	24	+ <svg-icon type="mdi" :path="mdilChevronRight"></svg-icon>
	25	+ </button>
	26	+ </div>
	27	+ </div>
	28	+ <div class="flex justify-between mt50">
	29	+ <button
	30	+ type="button"
	31	+ title="글쓰기"
	32	+ class="new-btn"
	33	+ @click="goToPage('Board')"
	34	+ >
	35	+ 목록
	36	+ </button>
	37	+ <div class="flex">
	38	+ <button type="button" title="글쓰기" class="new-btn mr10">수정</button>
	39	+ <button
	40	+ type="button"
	41	+ title="글쓰기"
	42	+ class="new-btn"
	43	+ @click="[deleteBoard(), goToPage('Board')]"
	44	+ >
	45	+ 삭제
	46	+ </button>
	47	+ </div>
	48	+ </div>
44	49	</template>
45	50
46	51	<script>
47		-import SvgIcon from '@jamescoyle/vue-icon';
48		-import { mdiMagnify } from '@mdi/js';
49		-import { mdilChevronRight,mdilChevronLeft } from '@mdi/light-js';
50		-
	52	+import SvgIcon from "@jamescoyle/vue-icon";
	53	+import { mdiMagnify } from "@mdi/js";
	54	+import { mdilChevronRight, mdilChevronLeft } from "@mdi/light-js";
	55	+import axios from "axios";
51	56
52	57	export default {
53		- data () {
54		- return {
55		- mdiMagnify: mdiMagnify,
56		- mdilChevronRight: mdilChevronRight ,
57		- mdilChevronLeft:mdilChevronLeft,
58		- }
59		- },
60		- methods: {
61		- goToPage(page) {
62		- this.$router.push({ name: page });
63		- },
64		- },
65		- watch: {
	58	+ data() {
	59	+ return {
	60	+ mdiMagnify: mdiMagnify,
	61	+ mdilChevronRight: mdilChevronRight,
	62	+ mdilChevronLeft: mdilChevronLeft,
66	63
	64	+ dataList: null,
	65	+ sclsId: "",
	66	+
	67	+ title: "",
	68	+ content: "",
	69	+ category: "",
	70	+ file: "",
	71	+ user: "",
	72	+ };
	73	+ },
	74	+ methods: {
	75	+ goToPage(page) {
	76	+ this.$router.push({ name: page });
67	77	},
68		- computed: {
69		-
	78	+ created() {
	79	+ const vm = this;
	80	+ const seletedBoardList = JSON.parse(
	81	+ sessionStorage.getItem("selectedBoardList")
	82	+ );
	83	+
	84	+ if (seletedBoardList) {
	85	+ vm.dataList = seletedBoardList;
	86	+ }
	87	+ console.log(vm.dataList);
70	88	},
71		- components:{
72		- SvgIcon
	89	+
	90	+ findFile() {
	91	+ const vm = this;
	92	+ axios({
	93	+ url: "/file/find.json",
	94	+ method: "post",
	95	+ headers: {
	96	+ "Content-Type": "application/json; charset=UTF-8",
	97	+ },
	98	+ data: {
	99	+ file_mng_id: vm.dataList.fileMngId,
	100	+ },
	101	+ })
	102	+ .then(function (res) {
	103	+ console.log("fileInfo - response : ", res.data.list[0]);
	104	+ vm.file = res.data.list[0];
	105	+ })
	106	+ .catch(function (error) {
	107	+ console.log("result - error : ", error);
	108	+ });
73	109	},
74		- mounted() {
75		- console.log('Main2 mounted');
76		- }
77		-}
78		-</script> (No newline at end of file)
	110	+
	111	+ prevBoard() {
	112	+ const vm = this;
	113	+ axios({
	114	+ url: "/board/prevBoard.json",
	115	+ method: "post",
	116	+ headers: {
	117	+ "Content-Type": "application/json; charset=UTF-8",
	118	+ },
	119	+ data: {
	120	+ sclsId: vm.dataList.sclsId,
	121	+ bbsId: vm.dataList.bbsId,
	122	+ },
	123	+ })
	124	+ .then(function (res) {
	125	+ console.log("dataList - response : ", res.data);
	126	+ vm.dataList = res.data[0].boardClass[0].board[0];
	127	+ sessionStorage.setItem(
	128	+ "selectedBoardList",
	129	+ JSON.stringify(vm.dataList)
	130	+ );
	131	+ vm.findFile();
	132	+ console.log(vm.dataList);
	133	+ })
	134	+ .catch(function (error) {
	135	+ console.log("result - error : ", error);
	136	+ alert("첫번째 글 입니다.");
	137	+ });
	138	+ },
	139	+
	140	+ nextBoard() {
	141	+ const vm = this;
	142	+ axios({
	143	+ url: "/board/nextBoard.json",
	144	+ method: "post",
	145	+ headers: {
	146	+ "Content-Type": "application/json; charset=UTF-8",
	147	+ },
	148	+ data: {
	149	+ sclsId: vm.dataList.sclsId,
	150	+ bbsId: vm.dataList.bbsId,
	151	+ },
	152	+ })
	153	+ .then(function (res) {
	154	+ console.log("dataList - response : ", res.data);
	155	+ vm.dataList = res.data[0].boardClass[0].board[0];
	156	+ sessionStorage.setItem(
	157	+ "selectedBoardList",
	158	+ JSON.stringify(vm.dataList)
	159	+ );
	160	+ vm.findFile();
	161	+ console.log(vm.dataList);
	162	+ })
	163	+ .catch(function (error) {
	164	+ console.log("result - error : ", error);
	165	+ alert("가장 최신 글 입니다.");
	166	+ });
	167	+ },
	168	+ deleteBoard() {
	169	+ const vm = this;
	170	+ axios({
	171	+ url: "/board/delete.json",
	172	+ method: "post",
	173	+ headers: {
	174	+ "Content-Type": "application/json; charset=UTF-8",
	175	+ },
	176	+ data: {
	177	+ bbsId: vm.dataList.bbsId,
	178	+ },
	179	+ })
	180	+ .then(function (res) {
	181	+ console.log("delete - response : ", res.data);
	182	+ alert("삭제 되었습니다.");
	183	+ })
	184	+ .catch(function (error) {
	185	+ console.log("rssult - error : ", error);
	186	+ });
	187	+ },
	188	+ },
	189	+ watch: {},
	190	+ computed: {},
	191	+ components: {
	192	+ SvgIcon,
	193	+ },
	194	+ mounted() {
	195	+ console.log("Main2 mounted");
	196	+ this.created();
	197	+ this.findFile();
	198	+ },
	199	+};
	200	+</script>

...	...	@@ -1,101 +1,166 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3		- <p class="title">교재 관리</p>
4		- <!-- <select name="" id="">
	3	+ <p class="title">교재</p>
	4	+ <select name="" id="">
5	5	<option value="">A반</option>
6		- </select> -->
7		- </div>
8		- <div class="content-t">
9		- <div class=" flex " style="gap: 50px;">
10		- <div class="textbook">
11		- <div class="box " style="gap: 10px;" @click="goToPage('TextBookDetail')">
12		- </div>
13		- <div class="text ">
14		- <p class="title1" style="color: #fff;">A 교재</p>
15		- <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
16		- <button>수정</button><p>\|</p>
17		- <button @click="showConfirm('delete')">삭제</button>
18		- </div>
19		- </div>
	6	+ </select>
	7	+ </div>
	8	+ <div class="content-t">
	9	+ <div class="flex" style="gap: 2.5%;" :style="{flexWrap: 'wrap'}">
	10	+ <div class="textbook" v-for="textbookItem in textbookList" :key="textbookItem.book_id" style="width: 22.5%; margin-bottom: 30px;">
	11	+ <div class="box" style="gap: 10px;" @click="goToPage('TextBookDetail', textbookItem.book_id)">
20	12	</div>
21		-
22		- <div class="textbook-add">
23		- <button @click="buttonSearch"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button>
24		-
	13	+ <div class="text">
	14	+ <p class="title1" style="color: #fff;">{{ textbookItem.book_nm }}</p>
	15	+ <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
	16	+ <button @click="editBook(textbookItem)">수정</button>
	17	+ <p>\|</p>
	18	+ <button @click="deleteBook(textbookItem.book_id)">삭제</button>
	19	+ </div>
25	20	</div>
26	21	</div>
27		- </div>
28		- <div v-show="searchOpen" class="popup-wrap">
29		- <div class="popup-box ">
	22	+
	23	+ <div class="textbook-add" style="width: 22.5%; margin-bottom: 30px;">
	24	+ <button @click="buttonSearch">
	25	+ <img src="../../../resources/img/btn32_98t_normal.png" alt="">
	26	+ </button>
	27	+ </div>
	28	+
	29	+ <div v-show="searchOpen" class="popup-wrap">
	30	+ <div class="popup-box">
30	31	<div class="flex justify-between mb30">
31	32	<p class="popup-title">교재 이름</p>
32	33	<button type="button" class="popup-close-btn" @click="closeBtn">
33	34	<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
34		-
35	35	</button>
36	36	</div>
37	37	<div class="search-wrap mb30">
38		- <input type="text" class="data-wrap" placeholder="">
39		- <!-- <button type="button" title="교재 검색">
	38	+ <input type="text" class="data-wrap" v-model="newBookName" placeholder="교재 이름을 입력하세요">
	39	+ <button type="button" title="교재 검색" @click="insertBook">
40	40	<img src="../../../resources/img/look_t.png" alt="">
41		- </button> -->
	41	+ </button>
42	42	</div>
43		- <div class="flex justify-center ">
44		- <button type="button" title="글쓰기" class="new-btn mr10">
	43	+ <div class="flex justify-center">
	44	+ <button type="button" title="취소" class="new-btn mr10" @click="closeBtn">
45	45	취소
46	46	</button>
47		- <button type="button" title="글쓰기" class="new-btn">
48		- 생성
	47	+ <button type="button" title="생성" class="new-btn" @click="editMode ? updateBook() : insertBook()">
	48	+ {{ editMode ? '수정' : '생성' }}
49	49	</button>
50	50	</div>
51	51	</div>
52	52	</div>
	53	+ </div>
	54	+ </div>
53	55	</template>
	56	+
	57	+
54	58
55	59	<script>
56	60	import SvgIcon from '@jamescoyle/vue-icon';
57		-import { mdiMagnify, mdiWindowClose } from '@mdi/js';
	61	+import { mdiWindowClose } from '@mdi/js';
	62	+import axios from 'axios';
58	63
59	64	export default {
60		- data () {
	65	+ data() {
61	66	return {
62	67	mdiWindowClose: mdiWindowClose,
63	68	showModal: false,
64	69	searchOpen: false,
	70	+ textbookList: [],
	71	+ newBookName: '',
	72	+ editMode: false,
	73	+ editBookId: null,
65	74	}
66	75	},
67	76	methods: {
68		- goToPage(page) {
69		- this.$router.push({ name: page });
70		- },
71		- closeModal() {
72		- this.showModal = false;
	77	+ goToPage(page, book_Id) {
	78	+ this.$router.push({ name: page, query: { book_Id }});
73	79	},
74	80	buttonSearch() {
75	81	this.searchOpen = true;
76	82	},
77	83	closeBtn() {
78	84	this.searchOpen = false;
79		-
	85	+ this.editMode = false;
	86	+ this.editBookId = null;
	87	+ this.newBookName = '';
80	88	},
81		- showConfirm(type) {
82		- let message = '';
83		- if (type === 'delete') {
84		- message = '삭제하시겠습니까?';
85		- } else if (type === 'reset') {
86		- message = '초기화하시겠습니까?';
87		- } else if (type === 'save') {
88		- message = '등록하시겠습니까?';
89		- }
90		-
91		- if (confirm(message)) {
92		- this.goBack();
93		- }
	89	+ editBook(book) {
	90	+ this.newBookName = book.book_nm;
	91	+ this.editMode = true;
	92	+ this.editBookId = book.book_id;
	93	+ this.searchOpen = true;
94	94	},
95		-
96		- },
97		- watch: {
98		-
	95	+ bookList() {
	96	+ axios({
	97	+ url: "/book/findAll.json",
	98	+ method: "post",
	99	+ headers: {
	100	+ "Content-Type": "application/json; charset=UTF-8",
	101	+ }
	102	+ })
	103	+ .then(response => {
	104	+ this.textbookList = response.data;
	105	+ })
	106	+ .catch(error => {
	107	+ console.error('Error fetching books:', error);
	108	+ });
	109	+ },
	110	+ insertBook() {
	111	+ const newBook = {
	112	+ book_nm: this.newBookName
	113	+ };
	114	+ axios.post('/book/insert.json', newBook)
	115	+ .then(response => {
	116	+ this.bookList();
	117	+ this.closeBtn();
	118	+ })
	119	+ .catch(error => {
	120	+ console.error('Error creating book:', error);
	121	+ });
	122	+ },
	123	+ updateBook() {
	124	+ const updatedBook = {
	125	+ book_id: this.editBookId,
	126	+ book_nm: this.newBookName
	127	+ };
	128	+ axios({
	129	+ url: "/book/update.json",
	130	+ method: "post",
	131	+ headers: {
	132	+ "Content-Type": "application/json; charset=UTF-8",
	133	+ },
	134	+ data: updatedBook,
	135	+ })
	136	+ .then(response => {
	137	+ this.bookList();
	138	+ this.closeBtn();
	139	+ })
	140	+ .catch(error => {
	141	+ console.error('Error updating book:', error);
	142	+ });
	143	+ },
	144	+ deleteBook(book_Id) {
	145	+ if (confirm('삭제하시겠습니까?')) {
	146	+ axios({
	147	+ url: "/book/delete.json",
	148	+ method: "post",
	149	+ headers: {
	150	+ "Content-Type": "application/json; charset=UTF-8",
	151	+ },
	152	+ data: {
	153	+ book_id: book_Id
	154	+ },
	155	+ })
	156	+ .then(response => {
	157	+ this.bookList();
	158	+ })
	159	+ .catch(error => {
	160	+ console.error('Error deleting book:', error);
	161	+ });
	162	+ }
	163	+ }
99	164	},
100	165	computed: {
101	166
...	...	@@ -105,9 +170,22 @@
105	170	},
106	171	mounted() {
107	172	console.log('Main2 mounted');
	173	+ this.bookList();
108	174	}
109	175	}
110	176	</script>
111		-<style scoped>
112		-.textbook{width: 300px;}
	177	+
	178	+<style>
	179	+.content-t {
	180	+ flex-wrap: wrap;
	181	+ height: 90%;
	182	+ overflow-y: scroll;
	183	+}
	184	+.flex {
	185	+ display: flex;
	186	+ flex-wrap: wrap;
	187	+}
	188	+.textbook, .textbook-add {
	189	+ margin-bottom: 30px;
	190	+}
113	191	</style> (No newline at end of file)

Delete comment