Commit @c9545c3ceb8cdbc40e0f9384c066356e02617c61

guntaek 11-19

20241119 김건택 aiDashboard, photoBook_p, board, classDetail, studentList 수정

@c9545c3ceb8cdbc40e0f9384c066356e02617c61

a7d2ea2

c9545c3

client/views/pages/main/AIDashboard.vue

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

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


             >
               <div class="image-container">
                 <img
-                  src="../../../resources/img/new_img/ai_board/racebtn_7.png"
+                  src="../../../resources/img/new_img/ai_board/racebtn_3.png"
                   alt="Race Button"
                   class="base-img"
                 />

             >
               <div class="image-container">
                 <img
-                  src="../../../resources/img/new_img/ai_board/racebtn_3.png"
+                  src="../../../resources/img/new_img/ai_board/racebtn_7.png"
                   alt="Race Button"
                   class="base-img"
                 />

a7d2ea2

c9545c3

client/views/pages/parents/PhotoBook_p.vue

--- client/views/pages/parents/PhotoBook_p.vue

+++ client/views/pages/parents/PhotoBook_p.vue

...	...	@@ -1,9 +1,419 @@
1		-<template lang="">
2		- <div>
3		- <p>포토북</p>
	1	+<template>
	2	+ <Header_t></Header_t>
	3	+ <div class="main-wrap">
	4	+ <div class="title-box flex justify-between mb20">
	5	+ <p class="title">우리 아이 사진첩</p>
	6	+ </div>
	7	+ <div class="myphoto mb30">
	8	+ <div>
	9	+ <div class="title-box flex justify-end mb40">
	10	+ <p class="class-p">반</p>
	11	+ <select @change="handleClassChange">
	12	+ <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId">
	13	+ {{ classItem.sclsNm }}
	14	+ </option>
	15	+ </select>
	16	+ </div>
	17	+ <div class="btnGroup" style="display: flex; flex-direction: column">
	18	+ <button
	19	+ v-for="n in totalPages"
	20	+ :key="n"
	21	+ @click="changePage(n)"
	22	+ type="button"
	23	+ title="페이지 버튼"
	24	+ class="tab-btn"
	25	+ >
	26	+ <img v-if="currentPage !== n" src="../../../resources/img/new_img/photobook/page.png" alt="" />
	27	+ <img v-else src="../../../resources/img/new_img/photobook/page_click.png" alt="" />
	28	+ <p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
	29	+ </button>
	30	+ </div>
	31	+ <div v-if="selectedTab === 'tab1'" class="tab-box">
	32	+ <div class="flex justify-between" style="margin-right: -82px; margin-left: -47px">
	33	+ <!-- 왼쪽에 4개의 사진 -->
	34	+ <div class="left-side">
	35	+ <div
	36	+ v-for="(photo, index) in (photoList?.result \|\| []).slice(0, 4)"
	37	+ :key="index"
	38	+ class="photo"
	39	+ :style="{ transform: getRotation(index) }"
	40	+ @click="buttonSearch(photo)"
	41	+ >
	42	+ <div class="class">
	43	+ <div class="box">
	44	+ <div class="photo-container">
	45	+ <img :src="fetchImage(photo.fileRpath)" alt="" style="width: 150px" />
	46	+ </div>
	47	+ </div>
	48	+ <div class="photo-text mt20 ml30">
	49	+ <div class="member ml30">{{ photo.likeData }}</div>
	50	+ <div class="title2-photo">{{ photo.unitName }}</div>
	51	+ </div>
	52	+ </div>
	53	+ </div>
	54	+ </div>
	55	+
	56	+ <!-- 오른쪽에 4개의 사진 -->
	57	+ <div class="right-side">
	58	+ <div
	59	+ v-for="(photo, index) in (photoList?.result \|\| []).slice(4, 8)"
	60	+ :key="index + 4"
	61	+ class="photo"
	62	+ :style="{ transform: getRotation(index + 4) }"
	63	+ style="width: fit-content"
	64	+ @click="buttonSearch(photo)"
	65	+ >
	66	+ <div class="class" style="width: 24rem; height: 21rem">
	67	+ <div class="box">
	68	+ <div class="photo-container">
	69	+ <img :src="fetchImage(photo.fileRpath)" alt="" style="width: 150px" />
	70	+ </div>
	71	+ </div>
	72	+ <div class="photo-text mt20 ml30">
	73	+ <div class="member ml30">{{ photo.likeData }}</div>
	74	+ <div class="title2-photo">{{ photo.unitName }}</div>
	75	+ </div>
	76	+ </div>
	77	+ </div>
	78	+ </div>
	79	+ </div>
	80	+ </div>
	81	+ <div class="popup-wrap" v-show="searchOpen">
	82	+ <div class="popup-box">
	83	+ <div class="flex mb10 justify-between">
	84	+ <p class="popup-title">알림</p>
	85	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	86	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	87	+ </button>
	88	+ </div>
	89	+
	90	+ <div class="photo-modal flex justify-between mt20" v-if="photoData.length > 0">
	91	+ <div class="box">
	92	+ <div>
	93	+ <img
	94	+ :src="fetchImage(photoData[0].fileRpath)"
	95	+ alt=""
	96	+ style="width: 640px; height: 480px"
	97	+ />
	98	+ </div>
	99	+ </div>
	100	+ <div class="photo-title-container">
	101	+ <div class="title1">
	102	+ {{ photoData[0].unitName }}을 마친 <em class="yellow">{{ photoData[0].stdName }}</em
	103	+ >친구
	104	+ </div>
	105	+ <p class="title2 date">{{ photoData[0].photoDate }}</p>
	106	+ </div>
	107	+ </div>
	108	+
	109	+ <div class="text flex justify-between mt20" v-else>
	110	+ <span class="title1">데이터를 불러올 수 없습니다.</span>
	111	+ </div>
	112	+ </div>
	113	+ </div>
	114	+ </div>
	115	+ </div>
4	116	</div>
5	117	</template>
	118	+
6	119	<script>
7		-export default {};
	120	+import SvgIcon from '@jamescoyle/vue-icon';
	121	+import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
	122	+import { mdilArrowRight } from '@mdi/light-js';
	123	+import ProgressBar from '../../component/ProgressBar.vue';
	124	+import axios from 'axios';
	125	+import Header_t from '../../layout/Header_t.vue';
	126	+
	127	+export default {
	128	+ data() {
	129	+ return {
	130	+ classList: [],
	131	+ photoList: [],
	132	+
	133	+ photoData: [],
	134	+
	135	+ currentPage: 1,
	136	+ pageSize: 8,
	137	+ totalPages: 1,
	138	+
	139	+ mdiWindowClose: mdiWindowClose,
	140	+ selectedTab: 'tab1',
	141	+ mdiMagnify: mdiMagnify,
	142	+ mdilArrowRight: mdilArrowRight,
	143	+ timer: '00:00',
	144	+ progress: 20,
	145	+ showModal: false,
	146	+ searchOpen: false,
	147	+ searchOpen2: false,
	148	+ selectedSclsId: null,
	149	+ };
	150	+ },
	151	+ methods: {
	152	+ stdClassesSelectList: function () {
	153	+ const vm = this;
	154	+ axios({
	155	+ url: '/classes/selectClass.json',
	156	+ method: 'post',
	157	+ headers: {
	158	+ 'Content-Type': 'application/json; charset=UTF-8',
	159	+ },
	160	+ data: {
	161	+ userId: '1',
	162	+ },
	163	+ })
	164	+ .then(function (response) {
	165	+ console.log('classList - response : ', response.data);
	166	+ vm.classList = response.data.data;
	167	+ vm.currentPage = 1;
	168	+ vm.selectedSclsId = vm.classList[0].sclsId;
	169	+ vm.stdPhotoSelectList();
	170	+ })
	171	+ .catch(function (error) {
	172	+ console.log('classList - error : ', error);
	173	+ alert('학생 반 조회에 오류가 발생했습니다.');
	174	+ });
	175	+ },
	176	+
	177	+ handleClassChange(event) {
	178	+ this.selectedSclsId = event.target.value; // 선택된 sclsId 가져오기
	179	+ this.currentPage = 1; // 페이지 초기화
	180	+ this.stdPhotoSelectList(); // 함수 호출
	181	+ },
	182	+ stdPhotoSelectList: function (scsId) {
	183	+ const vm = this;
	184	+ axios({
	185	+ url: '/photo/stdPhotoList.json',
	186	+ method: 'post',
	187	+ headers: {
	188	+ 'Content-Type': 'application/json; charset=UTF-8',
	189	+ },
	190	+ data: {
	191	+ stdId: '1',
	192	+ sclsId: vm.selectedSclsId, // 여기에 sclsId 들어가야 함
	193	+ page: vm.currentPage,
	194	+ pageSize: vm.pageSize,
	195	+ },
	196	+ })
	197	+ .then(function (response) {
	198	+ console.log('photoList - response : ', response.data);
	199	+ vm.photoList = response.data;
	200	+ vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
	201	+ })
	202	+ .catch(function (error) {
	203	+ console.log('photoList - error : ', error);
	204	+ alert('반별 내 사진 조회에 오류가 발생했습니다.');
	205	+ });
	206	+ },
	207	+ getRotation(index) {
	208	+ const rotations = [2, -1, 1, -2, 1, -1];
	209	+ return `rotate(${rotations[index]}deg)`;
	210	+ },
	211	+
	212	+ changePage(pageNumber) {
	213	+ this.currentPage = pageNumber;
	214	+ this.stdPhotoSelectList(this.selectedClassId);
	215	+ },
	216	+
	217	+ closeModal() {
	218	+ this.showModal = false;
	219	+ },
	220	+ buttonSearch(photo) {
	221	+ if (!photo) return;
	222	+
	223	+ const vm = this;
	224	+ this.searchOpen = true;
	225	+ axios({
	226	+ url: '/photo/photoDetail.json',
	227	+ method: 'post',
	228	+ headers: {
	229	+ 'Content-Type': 'application/json; charset=UTF-8',
	230	+ },
	231	+ data: {
	232	+ photoId: photo.photoId,
	233	+ },
	234	+ })
	235	+ .then(function (response) {
	236	+ console.log('photoData - response : ', response.data);
	237	+ vm.photoData = response.data;
	238	+ })
	239	+ .catch(function (error) {
	240	+ console.log('photoData - error : ', error);
	241	+ alert('사진 조회에 오류가 발생했습니다.');
	242	+ });
	243	+ },
	244	+
	245	+ closeBtn() {
	246	+ this.searchOpen = false;
	247	+ },
	248	+ goToPage(page) {
	249	+ this.$router.push({ name: page });
	250	+ },
	251	+ increaseProgress() {
	252	+ if (this.progress < 100) {
	253	+ this.progress += 10;
	254	+ }
	255	+ },
	256	+ showConfirm(type) {
	257	+ let message = '';
	258	+ if (type === 'cancel') {
	259	+ message = '삭제하시겠습니까?';
	260	+ } else if (type === 'reset') {
	261	+ message = '초기화하시겠습니까?';
	262	+ } else if (type === 'save') {
	263	+ message = '등록하시겠습니까?';
	264	+ }
	265	+
	266	+ if (confirm(message)) {
	267	+ this.goBack();
	268	+ }
	269	+ },
	270	+
	271	+ // 사진 경로 불러오기
	272	+ imageSearch(photo) {
	273	+ if (!photo) return;
	274	+
	275	+ const vm = this;
	276	+ this.searchOpen = true;
	277	+ axios({
	278	+ url: '/photo/photoDetail.json',
	279	+ method: 'post',
	280	+ headers: {
	281	+ 'Content-Type': 'application/json; charset=UTF-8',
	282	+ },
	283	+ data: {
	284	+ photoId: photo.photoId,
	285	+ },
	286	+ })
	287	+ .then(function (response) {
	288	+ console.log('photoData - response : ', response.data);
	289	+ vm.photoData = response.data;
	290	+ })
	291	+ .catch(function (error) {
	292	+ console.log('photoData - error : ', error);
	293	+ alert('사진 조회에 오류가 발생했습니다.');
	294	+ });
	295	+ },
	296	+ fetchImage(fileRpath) {
	297	+ return 'http://165.229.169.113:9080/' + fileRpath;
	298	+ },
	299	+ },
	300	+ watch: {},
	301	+ computed: {
	302	+ currentPhotos() {
	303	+ // 현재 페이지에 해당하는 사진들만 반환
	304	+ const start = (this.currentPage - 1) * this.pageSize;
	305	+ const end = start + this.pageSize;
	306	+ return this.photoList.result.slice(start, end);
	307	+ },
	308	+ },
	309	+ components: {
	310	+ Header_t: Header_t,
	311	+ SvgIcon,
	312	+ ProgressBar,
	313	+ },
	314	+ mounted() {
	315	+ console.log('Main2 mounted');
	316	+ this.stdClassesSelectList();
	317	+ },
	318	+};
8	319	</script>
9		-<style lang=""></style>
	320	+
	321	+<style scoped>
	322	+.btnGroup button {
	323	+ cursor: pointer;
	324	+ z-index: 100000;
	325	+}
	326	+
	327	+.popup-wrap {
	328	+ z-index: 10000000;
	329	+}
	330	+
	331	+.popup-box {
	332	+ top: 500px;
	333	+ width: 950px;
	334	+ height: 650px;
	335	+ left: 55rem;
	336	+}
	337	+
	338	+.class {
	339	+ width: 260px;
	340	+ height: 200px;
	341	+ background-repeat: no-repeat;
	342	+}
	343	+
	344	+.photo-container {
	345	+ text-align: center;
	346	+}
	347	+
	348	+.photo-container img {
	349	+ width: 150px;
	350	+ height: 110px;
	351	+ height: 105px;
	352	+ position: relative;
	353	+ top: 23px;
	354	+}
	355	+
	356	+.photo-text {
	357	+ display: flex;
	358	+ flex-direction: column;
	359	+ gap: 5px;
	360	+}
	361	+
	362	+.photo-modal {
	363	+ flex-direction: column;
	364	+}
	365	+
	366	+.photo-modal .box {
	367	+ text-align: center;
	368	+}
	369	+
	370	+.photo-title-container {
	371	+ display: flex;
	372	+ justify-content: space-between;
	373	+ margin-top: 20px;
	374	+}
	375	+
	376	+select {
	377	+ border-radius: 16px;
	378	+ position: absolute;
	379	+ top: 42px;
	380	+ right: 33px;
	381	+}
	382	+
	383	+.class-p {
	384	+ font-size: 23px;
	385	+ position: absolute;
	386	+ top: 52px;
	387	+ right: 218px;
	388	+}
	389	+
	390	+.left-side,
	391	+.right-side {
	392	+ width: 48%; /* 좌우로 나눔 */
	393	+ display: flex;
	394	+ flex-wrap: wrap;
	395	+ align-content: flex-start;
	396	+}
	397	+
	398	+.title2-photo {
	399	+ font-size: 15px;
	400	+ font-weight: bold;
	401	+ font-family: 'ONEMobileOTF-Regular';
	402	+ max-width: 175px;
	403	+ white-space: nowrap;
	404	+ overflow: hidden;
	405	+ text-overflow: ellipsis;
	406	+}
	407	+
	408	+.main-wrap {
	409	+ width: 134rem; /* 기존 크기 유지 */
	410	+ height: 70rem; /* 기존 크기 유지 */
	411	+ background-color: #ffffffa6;
	412	+ border-radius: 10px;
	413	+ position: absolute;
	414	+ right: calc(50% - 67rem); /* 너비의 절반을 뺀 값으로 중앙 배치 */
	415	+ top: calc(50% - 35rem); /* 높이의 절반을 뺀 값으로 중앙 배치 */
	416	+ z-index: 1;
	417	+}
	418	+
	419	+</style>

a7d2ea2

c9545c3

client/views/pages/teacher/Board.vue

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

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


                     "Content-Type": "application/json; charset=UTF-8",
                 },
                 data: {
-                    userId: vm.userId,
+                    userId: "2",
                 },
             })
                 .then(function (res) {

a7d2ea2

c9545c3

client/views/pages/teacher/ClassDetail.vue

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

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


             <td>반</td>
           </thead>
           <tbody>
-            <tr>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-            </tr>
+            <!-- StudentDetail로 갈때 stdId? userId? -->
+            <tr v-for="(student, index) in studentDataList" :key="index" class="student"
+                    @click="goToPage('StudentDetail')">
+                    <td>{{ index + 1 }}</td>
+                    <td>{{ student.grd_no }}</td>
+                    <td>{{ student.scls_nm }}</td>
+                    <td>{{ student.user_nm }}</td>
+                </tr>
           </tbody>
         </table>
       </div>

           <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
         </div>
       </div>
-      <div class="flex" style="gap: 50px">
-        <div class="textbook">
+      <div class="flex" style="flex-direction: column; gap: 50px">
+        <div class="textbook" style="width: 180px">
           <div class="box" style="gap: 10px"></div>
           <div class="text">
             <p class="title1" style="color: #fff">A 교재</p>

       selectedRow: "",
       bbsTm: "",
 
+      // 학생 정보
+      studentDataList: [],
+      totalStudents: 0,
+
       // 페이징
-      currentPage: 0,
+      currentPage: 1,
       itemsPerPage: 5,
 
       // 반 아이디

           "Content-Type": "application/json; charset=UTF-8",
         },
         data: {
-          page: vm.currentPage + 1,
+          page: vm.currentPage,
           pageSize: vm.itemsPerPage,
           sclsId: vm.selectedClassId,
         },

           console.log("result - error : ", error);
         });
     },
+
+    fetchStudents() {
+            const idx = (this.currentPage - 1) * this.itemsPerPage;
+            axios({
+                url: "/userclass/find.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    "keyword": this.keyword,
+                    "pageSize": this.itemsPerPage,
+                    "startIndex": idx,
+                    "sclsId": this.selectedClassId
+                },
+            })
+                .then(response => {
+                    console.log("keywordkeywordkeywordkeyword",this.keyword);
+                    console.log("<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>",response.data.students);
+                    this.studentDataList = response.data.students;
+                    this.totalStudents = response.data.totalStudent;
+                })
+                .catch(error => {
+                    console.error("fetchStudents - error: ", error);
+                    alert("조회 중 오류가 발생했습니다.");
+                });
+        },
+
     setClassId() {
       sessionStorage.setItem("sclsId", JSON.stringify(this.selectedClassId));
       sessionStorage.removeItem("selectedBoardList");
       sessionStorage.removeItem("file");
       this.boardList();
+      this.fetchStudents();
     },
 
     // 게시글 정보 세션에 저장

   },
 };
 </script>
+<style scoped>
+.textbook .box {
+   height: 70px;
+}
+</style>

a7d2ea2

c9545c3

client/views/pages/teacher/StudentList.vue

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

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


             <select name="" id="" class="mr10 data-wrap">
                 <option value="">전체</option>
             </select>
-            <input type="text" placeholder="검색하세요.">
-            <button type="button" title="위원회 검색">
+            <input type="text" placeholder="검색하세요." v-model="keyword">
+            <button type="button" title="위원회 검색" @click="search">
                 <img src="../../../resources/img/look_t.png" alt="">
             </button>
         </div>

             selectedClass: "",
 
             students: [],
+            keyword: "",
 
             currentPage: 1,
             pageSize: 10,

                     "Content-Type": "application/json; charset=UTF-8",
                 },
                 data: {
+                    "keyword": this.keyword,
                     "pageSize": this.pageSize,
                     "startIndex": idx,
                     "sclsId": this.selectedClass
                 },
             })
                 .then(response => {
-                    console.log("<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>",response.data.students);
+                    console.log("keywordkeywordkeywordkeyword",this.keyword);
+                    console.log("<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>",response.data.students);
                     this.students = response.data.students;
                     this.totalStudents = response.data.totalStudent;
                 })

                     console.error("fetchStudents - error: ", error);
                     alert("조회 중 오류가 발생했습니다.");
                 });
+        },
+
+        search() {
+            this.currentPage = 1; 
+            this.fetchStudents();  
+            
         },
 
         changePage(page) {

     },
     computed: {
         totalPages() {
-            console.log("totalPages@@@@@@@@@@@@@@@@@@@@@@@")
             return Math.ceil(this.totalStudents / this.pageSize);
         }
     },

Add a comment

Open 0
Closed 0

List

...	...	@@ -155,7 +155,7 @@
155	155	>
156	156	<div class="image-container">
157	157	<img
158		- src="../../../resources/img/new_img/ai_board/racebtn_7.png"
	158	+ src="../../../resources/img/new_img/ai_board/racebtn_3.png"
159	159	alt="Race Button"
160	160	class="base-img"
161	161	/>
...	...	@@ -327,7 +327,7 @@
327	327	>
328	328	<div class="image-container">
329	329	<img
330		- src="../../../resources/img/new_img/ai_board/racebtn_3.png"
	330	+ src="../../../resources/img/new_img/ai_board/racebtn_7.png"
331	331	alt="Race Button"
332	332	class="base-img"
333	333	/>

...	...	@@ -229,7 +229,7 @@
229	229	"Content-Type": "application/json; charset=UTF-8",
230	230	},
231	231	data: {
232		- userId: vm.userId,
	232	+ userId: "2",
233	233	},
234	234	})
235	235	.then(function (res) {

...	...	@@ -54,12 +54,14 @@
54	54	<td>반</td>
55	55	</thead>
56	56	<tbody>
57		- <tr>
58		- <td></td>
59		- <td></td>
60		- <td></td>
61		- <td></td>
62		- </tr>
	57	+ <!-- StudentDetail로 갈때 stdId? userId? -->
	58	+ <tr v-for="(student, index) in studentDataList" :key="index" class="student"
	59	+ @click="goToPage('StudentDetail')">
	60	+ <td>{{ index + 1 }}</td>
	61	+ <td>{{ student.grd_no }}</td>
	62	+ <td>{{ student.scls_nm }}</td>
	63	+ <td>{{ student.user_nm }}</td>
	64	+ </tr>
63	65	</tbody>
64	66	</table>
65	67	</div>
...	...	@@ -72,8 +74,8 @@
72	74	<svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
73	75	</div>
74	76	</div>
75		- <div class="flex" style="gap: 50px">
76		- <div class="textbook">
	77	+ <div class="flex" style="flex-direction: column; gap: 50px">
	78	+ <div class="textbook" style="width: 180px">
77	79	<div class="box" style="gap: 10px"></div>
78	80	<div class="text">
79	81	<p class="title1" style="color: #fff">A 교재</p>
...	...	@@ -130,8 +132,12 @@
130	132	selectedRow: "",
131	133	bbsTm: "",
132	134
	135	+ // 학생 정보
	136	+ studentDataList: [],
	137	+ totalStudents: 0,
	138	+
133	139	// 페이징
134		- currentPage: 0,
	140	+ currentPage: 1,
135	141	itemsPerPage: 5,
136	142
137	143	// 반 아이디
...	...	@@ -172,7 +178,7 @@
172	178	"Content-Type": "application/json; charset=UTF-8",
173	179	},
174	180	data: {
175		- page: vm.currentPage + 1,
	181	+ page: vm.currentPage,
176	182	pageSize: vm.itemsPerPage,
177	183	sclsId: vm.selectedClassId,
178	184	},
...	...	@@ -191,11 +197,40 @@
191	197	console.log("result - error : ", error);
192	198	});
193	199	},
	200	+
	201	+ fetchStudents() {
	202	+ const idx = (this.currentPage - 1) * this.itemsPerPage;
	203	+ axios({
	204	+ url: "/userclass/find.json",
	205	+ method: "post",
	206	+ headers: {
	207	+ "Content-Type": "application/json; charset=UTF-8",
	208	+ },
	209	+ data: {
	210	+ "keyword": this.keyword,
	211	+ "pageSize": this.itemsPerPage,
	212	+ "startIndex": idx,
	213	+ "sclsId": this.selectedClassId
	214	+ },
	215	+ })
	216	+ .then(response => {
	217	+ console.log("keywordkeywordkeywordkeyword",this.keyword);
	218	+ console.log("<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>",response.data.students);
	219	+ this.studentDataList = response.data.students;
	220	+ this.totalStudents = response.data.totalStudent;
	221	+ })
	222	+ .catch(error => {
	223	+ console.error("fetchStudents - error: ", error);
	224	+ alert("조회 중 오류가 발생했습니다.");
	225	+ });
	226	+ },
	227	+
194	228	setClassId() {
195	229	sessionStorage.setItem("sclsId", JSON.stringify(this.selectedClassId));
196	230	sessionStorage.removeItem("selectedBoardList");
197	231	sessionStorage.removeItem("file");
198	232	this.boardList();
	233	+ this.fetchStudents();
199	234	},
200	235
201	236	// 게시글 정보 세션에 저장
...	...	@@ -216,3 +251,8 @@
216	251	},
217	252	};
218	253	</script>
	254	+<style scoped>
	255	+.textbook .box {
	256	+ height: 70px;
	257	+}
	258	+</style>

...	...	@@ -13,8 +13,8 @@
13	13	<select name="" id="" class="mr10 data-wrap">
14	14	<option value="">전체</option>
15	15	</select>
16		- <input type="text" placeholder="검색하세요.">
17		- <button type="button" title="위원회 검색">
	16	+ <input type="text" placeholder="검색하세요." v-model="keyword">
	17	+ <button type="button" title="위원회 검색" @click="search">
18	18	<img src="../../../resources/img/look_t.png" alt="">
19	19	</button>
20	20	</div>
...	...	@@ -134,6 +134,7 @@
134	134	selectedClass: "",
135	135
136	136	students: [],
	137	+ keyword: "",
137	138
138	139	currentPage: 1,
139	140	pageSize: 10,
...	...	@@ -175,13 +176,15 @@
175	176	"Content-Type": "application/json; charset=UTF-8",
176	177	},
177	178	data: {
	179	+ "keyword": this.keyword,
178	180	"pageSize": this.pageSize,
179	181	"startIndex": idx,
180	182	"sclsId": this.selectedClass
181	183	},
182	184	})
183	185	.then(response => {
184		- console.log("<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>",response.data.students);
	186	+ console.log("keywordkeywordkeywordkeyword",this.keyword);
	187	+ console.log("<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>",response.data.students);
185	188	this.students = response.data.students;
186	189	this.totalStudents = response.data.totalStudent;
187	190	})
...	...	@@ -189,6 +192,12 @@
189	192	console.error("fetchStudents - error: ", error);
190	193	alert("조회 중 오류가 발생했습니다.");
191	194	});
	195	+ },
	196	+
	197	+ search() {
	198	+ this.currentPage = 1;
	199	+ this.fetchStudents();
	200	+
192	201	},
193	202
194	203	changePage(page) {
...	...	@@ -232,7 +241,6 @@
232	241	},
233	242	computed: {
234	243	totalPages() {
235		- console.log("totalPages@@@@@@@@@@@@@@@@@@@@@@@")
236	244	return Math.ceil(this.totalStudents / this.pageSize);
237	245	}
238	246	},

Delete comment