Commit @24501d2e9bd638a079b1664560fcedb06e412b89

woals 2024-08-12

240812 권민수 단어장 등록 페이지 지문 목록 불러오기, 단어장 등록 경로 설정 세팅

@24501d2e9bd638a079b1664560fcedb06e412b89

ef8c6da

24501d2

client/views/pages/teacher/VocaDetail.vue

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

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


 <template>
     <div class="title-box flex justify-between mb40">
-        <p class="title">단어장 등록</p>
+        <p class="title">단어장 수정</p>
     </div>
     <div class="board-wrap">
         <div class="flex align-center mb20">

         </div>
     </div>
     <div class="flex justify-between mt50">
-        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')">
+        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('VocaList')">
             목록
         </button>
         <div class="flex">

ef8c6da

24501d2

client/views/pages/teacher/VocaInsert.vue

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

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


     <div class="title-box flex justify-between mb40">
         <p class="title">단어장 등록</p>
     </div>
+    <div class="title2 gray flex mb40">{{ titleMessage }}</div>
     <div class="board-wrap">
         <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 v-model="selectedTextId" class="mr10 data-wrap">
+                <option v-for="text in texts" :key="text.textId" :value="text.textId">
+                    {{ text.textTtl }}
+                </option>
+            </select>
+        </div>
+        <div class="flex align-center mb20">
+            <label for="" class="title2">단어장 타입</label>
+            <select v-model="selectedWdBookTypeId" class="mr10 data-wrap">
+                <option value="1">단어장 (일반)</option>
+                <option value="2">단어장 (스피킹)</option>
+                <option value="3">단어장 (숏폼)</option>
+                <option value="4">단어장 (카드 뒤집기)</option>
+                <option value="5">단어장 (카드 맞추기)</option>
             </select>
         </div>
         <div class="flex align-center">

                 <div class="flex align-center" style="gap: 10px;">
                     <input type="text" class="data-wrap" placeholder="영어">
                     <input type="text" class="data-wrap" placeholder="한글">
-                    <button type="button" @click="addThesis">
+                    <button type="button" @click="addWord">
                         <img src="../../../resources/img/btn39_120t_normal.png" alt="">
 
                     </button>
                 </div>
-                <div class="flex align-center " style="gap: 10px;" v-for="(thesis, index) in thesised" :key="thesis.id">
-                    <input type="text" class="data-wrap" placeholder="영어">
-                    <input type="text" class="data-wrap" placeholder="한글">
-                    <button type="button" @click="removeThesis(thesis.id)">
-                        <img src="../../../resources/img/btn38_120t_normal.png" alt="">
-                    </button>
 
-                </div>
+                <!-- 여기에 단어장에 소속될 단어들 태그 형태 리스트 표시할 예정 -->
+
             </div>
 
         </div>
     </div>
     <div class="flex justify-between mt50">
-        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')">
+        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('VocaList')">
             목록
         </button>
         <div class="flex">

 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiPlusCircleOutline, mdiWindowClose } from '@mdi/js';
-
+import axios from "axios";
 
 export default {
     data() {
         return {
-            thesised: [],
-            mdiPlusCircleOutline: mdiPlusCircleOutline,
-            mdiMagnify: mdiMagnify,
-            mdiWindowClose: mdiWindowClose,
+            selectedBookId: null, // 추가될 단어장의 소속 책
+            selectedUnitId: null, // 추가될 단어장의 소속 단원
+            bookName: '', // 책 이름
+            unitName: '', // 단원 이름
+            titleMessage: '', // 등록 경로 메시지
+            texts: [], // 지문 목록
+            selectedTextId: null, // 선택된 지문 ID
+            selectedWdBookTypeId: '1', // 선택된 단어장 타입 ID
+            newWord: { eng: '', kor: '' }, // 입력된 새 단어
+            words: [] // 단어 목록
         }
     },
     methods: {
-        // 논문실적 버튼 추가
-        addThesis() {
-            // 고유 ID로 현재 시간의 타임스탬프를 사용
-            const uniqueId = Date.now();
-            this.thesised.push({
-                id: uniqueId, // 고유 ID 추가
 
+        // 책과 단원 이름을 가져오는 메서드
+        fetchBookAndUnitNames() {
+            // 책 이름 가져오기
+            axios.post('/book/findAll.json')
+                .then(response => {
+                    const book = response.data.find(book => book.book_id === this.selectedBookId);
+                    if (book) {
+                        this.bookName = book.book_nm;
+                        this.updateTitleMessage(); // 책 이름을 가져온 후에 제목 업데이트
+                    }
+                })
+                .catch(error => {
+                    console.error("책 이름 가져오기 실패: ", error);
+                });
+
+            // 단원 이름 가져오기
+            axios.post('/unit/unitList.json', { bookId: this.selectedBookId })
+                .then(response => {
+                    const unit = response.data.find(unit => unit.unitId === this.selectedUnitId);
+                    if (unit) {
+                        this.unitName = unit.unitName;
+                        this.updateTitleMessage(); // 단원 이름을 가져온 후에 제목 업데이트
+                    }
+                })
+                .catch(error => {
+                    console.error("단원 이름 가져오기 실패: ", error);
+                });
+        },
+
+        // 등록 경로 메시지를 업데이트하는 메서드
+        updateTitleMessage() {
+            this.titleMessage = `[${this.bookName}]책 > [${this.unitName}]단원`;
+        },
+
+        // 지문 목록을 가져오는 메서드
+        fetchTexts() {
+            axios.post('/text/selectTextList.json', {
+                page: 1,
+                pageSize: 100
+            })
+            .then(response => {
+                this.texts = response.data.texts;
+            })
+            .catch(error => {
+                console.error("지문 목록 가져오기 실패: ", error);
             });
         },
-        removeThesis(thesisId) {
-            // ID를 기준으로 교육 정보 객체를 찾아서 삭제
-            const index = this.thesised.findIndex(thesis => thesis.id === thesisId);
-            if (index !== -1) {
-                this.thesised.splice(index, 1);
-            }
-        },
-        // 
+
         goToPage(page) {
             this.$router.push({ name: page });
         },
+
     },
     watch: {
+
+        // 데이터 변경 시 등록 경로 메시지 업데이트
+        selectedBookId() {
+            this.fetchBookAndUnitNames();
+        },
+
+        selectedUnitId() {
+            this.fetchBookAndUnitNames();
+        }
 
     },
     computed: {

         SvgIcon
     },
     mounted() {
-        console.log('Main2 mounted');
+        // 쿼리 전달 받기
+        this.selectedBookId = this.$route.query.selectedBookId || null;
+        this.selectedUnitId = this.$route.query.selectedUnitId || null;
+        console.log('VocaInsert mounted');
+        this.fetchTexts();
+        this.fetchBookAndUnitNames();
     }
 }
 </script>

ef8c6da

24501d2

client/views/pages/teacher/VocaList.vue

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

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


 
         // 페이지 이동 메서드
         goToViewPage(page) {
-            this.$router.push({ name: page });
+            this.$router.push({
+                name: page,
+                query: {
+                    selectedBookId: this.selectedBookId,
+                    selectedUnitId: this.selectedUnitId
+                }
+             });
         },
 
         // 검색 메서드 추가

Add a comment

Open 0
Closed 0

List

...	...	@@ -210,7 +210,13 @@
210	210
211	211	// 페이지 이동 메서드
212	212	goToViewPage(page) {
213		- this.$router.push({ name: page });
	213	+ this.$router.push({
	214	+ name: page,
	215	+ query: {
	216	+ selectedBookId: this.selectedBookId,
	217	+ selectedUnitId: this.selectedUnitId
	218	+ }
	219	+ });
214	220	},
215	221
216	222	// 검색 메서드 추가

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3		- <p class="title">단어장 등록</p>
	3	+ <p class="title">단어장 수정</p>
4	4	</div>
5	5	<div class="board-wrap">
6	6	<div class="flex align-center mb20">
...	...	@@ -36,7 +36,7 @@
36	36	</div>
37	37	</div>
38	38	<div class="flex justify-between mt50">
39		- <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')">
	39	+ <button type="button" title="글쓰기" class="new-btn" @click="goToPage('VocaList')">
40	40	목록
41	41	</button>
42	42	<div class="flex">

...	...	@@ -2,14 +2,24 @@
2	2	<div class="title-box flex justify-between mb40">
3	3	<p class="title">단어장 등록</p>
4	4	</div>
	5	+ <div class="title2 gray flex mb40">{{ titleMessage }}</div>
5	6	<div class="board-wrap">
6	7	<div class="flex align-center mb20">
7	8	<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>
	9	+ <select v-model="selectedTextId" class="mr10 data-wrap">
	10	+ <option v-for="text in texts" :key="text.textId" :value="text.textId">
	11	+ {{ text.textTtl }}
	12	+ </option>
	13	+ </select>
	14	+ </div>
	15	+ <div class="flex align-center mb20">
	16	+ <label for="" class="title2">단어장 타입</label>
	17	+ <select v-model="selectedWdBookTypeId" class="mr10 data-wrap">
	18	+ <option value="1">단어장 (일반)</option>
	19	+ <option value="2">단어장 (스피킹)</option>
	20	+ <option value="3">단어장 (숏폼)</option>
	21	+ <option value="4">단어장 (카드 뒤집기)</option>
	22	+ <option value="5">단어장 (카드 맞추기)</option>
13	23	</select>
14	24	</div>
15	25	<div class="flex align-center">
...	...	@@ -18,25 +28,20 @@
18	28	<div class="flex align-center" style="gap: 10px;">
19	29	<input type="text" class="data-wrap" placeholder="영어">
20	30	<input type="text" class="data-wrap" placeholder="한글">
21		- <button type="button" @click="addThesis">
	31	+ <button type="button" @click="addWord">
22	32	<img src="../../../resources/img/btn39_120t_normal.png" alt="">
23	33
24	34	</button>
25	35	</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	36
33		- </div>
	37	+ <!-- 여기에 단어장에 소속될 단어들 태그 형태 리스트 표시할 예정 -->
	38	+
34	39	</div>
35	40
36	41	</div>
37	42	</div>
38	43	<div class="flex justify-between mt50">
39		- <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')">
	44	+ <button type="button" title="글쓰기" class="new-btn" @click="goToPage('VocaList')">
40	45	목록
41	46	</button>
42	47	<div class="flex">
...	...	@@ -52,41 +57,88 @@
52	57
53	58	<script>
54	59	import SvgIcon from '@jamescoyle/vue-icon';
55		-import { mdiMagnify, mdiPlusCircleOutline, mdiWindowClose } from '@mdi/js';
56		-
	60	+import axios from "axios";
57	61
58	62	export default {
59	63	data() {
60	64	return {
61		- thesised: [],
62		- mdiPlusCircleOutline: mdiPlusCircleOutline,
63		- mdiMagnify: mdiMagnify,
64		- mdiWindowClose: mdiWindowClose,
	65	+ selectedBookId: null, // 추가될 단어장의 소속 책
	66	+ selectedUnitId: null, // 추가될 단어장의 소속 단원
	67	+ bookName: '', // 책 이름
	68	+ unitName: '', // 단원 이름
	69	+ titleMessage: '', // 등록 경로 메시지
	70	+ texts: [], // 지문 목록
	71	+ selectedTextId: null, // 선택된 지문 ID
	72	+ selectedWdBookTypeId: '1', // 선택된 단어장 타입 ID
	73	+ newWord: { eng: '', kor: '' }, // 입력된 새 단어
	74	+ words: [] // 단어 목록
65	75	}
66	76	},
67	77	methods: {
68		- // 논문실적 버튼 추가
69		- addThesis() {
70		- // 고유 ID로 현재 시간의 타임스탬프를 사용
71		- const uniqueId = Date.now();
72		- this.thesised.push({
73		- id: uniqueId, // 고유 ID 추가
74	78
	79	+ // 책과 단원 이름을 가져오는 메서드
	80	+ fetchBookAndUnitNames() {
	81	+ // 책 이름 가져오기
	82	+ axios.post('/book/findAll.json')
	83	+ .then(response => {
	84	+ const book = response.data.find(book => book.book_id === this.selectedBookId);
	85	+ if (book) {
	86	+ this.bookName = book.book_nm;
	87	+ this.updateTitleMessage(); // 책 이름을 가져온 후에 제목 업데이트
	88	+ }
	89	+ })
	90	+ .catch(error => {
	91	+ console.error("책 이름 가져오기 실패: ", error);
	92	+ });
	93	+
	94	+ // 단원 이름 가져오기
	95	+ axios.post('/unit/unitList.json', { bookId: this.selectedBookId })
	96	+ .then(response => {
	97	+ const unit = response.data.find(unit => unit.unitId === this.selectedUnitId);
	98	+ if (unit) {
	99	+ this.unitName = unit.unitName;
	100	+ this.updateTitleMessage(); // 단원 이름을 가져온 후에 제목 업데이트
	101	+ }
	102	+ })
	103	+ .catch(error => {
	104	+ console.error("단원 이름 가져오기 실패: ", error);
	105	+ });
	106	+ },
	107	+
	108	+ // 등록 경로 메시지를 업데이트하는 메서드
	109	+ updateTitleMessage() {
	110	+ this.titleMessage = `[${this.bookName}]책 > [${this.unitName}]단원`;
	111	+ },
	112	+
	113	+ // 지문 목록을 가져오는 메서드
	114	+ fetchTexts() {
	115	+ axios.post('/text/selectTextList.json', {
	116	+ page: 1,
	117	+ pageSize: 100
	118	+ })
	119	+ .then(response => {
	120	+ this.texts = response.data.texts;
	121	+ })
	122	+ .catch(error => {
	123	+ console.error("지문 목록 가져오기 실패: ", error);
75	124	});
76	125	},
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		- //
	126	+
85	127	goToPage(page) {
86	128	this.$router.push({ name: page });
87	129	},
	130	+
88	131	},
89	132	watch: {
	133	+
	134	+ // 데이터 변경 시 등록 경로 메시지 업데이트
	135	+ selectedBookId() {
	136	+ this.fetchBookAndUnitNames();
	137	+ },
	138	+
	139	+ selectedUnitId() {
	140	+ this.fetchBookAndUnitNames();
	141	+ }
90	142
91	143	},
92	144	computed: {
...	...	@@ -96,7 +148,12 @@
96	148	SvgIcon
97	149	},
98	150	mounted() {
99		- console.log('Main2 mounted');
	151	+ // 쿼리 전달 받기
	152	+ this.selectedBookId = this.$route.query.selectedBookId \|\| null;
	153	+ this.selectedUnitId = this.$route.query.selectedUnitId \|\| null;
	154	+ console.log('VocaInsert mounted');
	155	+ this.fetchTexts();
	156	+ this.fetchBookAndUnitNames();
100	157	}
101	158	}
102	159	</script> (No newline at end of file)

Delete comment