Commit @718614bb3a97e5a007014d547edb4ed68498eee3

woals 2024-08-22

240822 권민수 단어장 Chapter2, 2_3 페이지 데이터 적용

@718614bb3a97e5a007014d547edb4ed68498eee3

18340e0

718614b

client/views/pages/main/Chapter/Chapter2.vue

--- client/views/pages/main/Chapter/Chapter2.vue

+++ client/views/pages/main/Chapter/Chapter2.vue


         </div>
 
         <div class="flex justify-center">
-          <div class="vocaGroup">
-            <div class="flex justify-between mb80">
+          <div class="vocaGroup" style="display: flex; flex-wrap: wrap;">
+            <div
+              v-for="(word) in wordList"
+              :key="word.wdId"
+              class="flex justify-between mb80"
+              style="width: 49%;"
+            >
               <article class="flex align-center">
                 <div class="imgGroup mr30">
                   <img

                     preload="auto"
                   ></audio>
                   <div>
-                    <h3>family</h3>
+                    <h3>{{ word.wdNm }}</h3>
                     <div class="flex align-center mt10">
                       <p class="yellow-box">명</p>
-                      <span class="title1">가족</span>
-                    </div>
-                  </div>
-                </div>
-              </article>
-              <article class="flex align-center">
-                <div class="imgGroup mr30">
-                  <img
-                    src="../../../../resources/img/img2_4.png"
-                    data-num="1"
-                    style="width: 200px"
-                  />
-                </div>
-                <div class="flex align-start">
-                  <button
-                    class="listen-btn mr30"
-                    data-video="1"
-                    tabindex="0"
-                    aria-label="음성 재생"
-                  >
-                    <img
-                      src="../../../../resources/img/btn10_s.png"
-                      data-num="1"
-                      @click="playAudio('audio-bank')"
-                    />
-                  </button>
-                  <audio
-                    id="audio-bank"
-                    src="client/resources/audio/bank.wav"
-                    preload="auto"
-                  ></audio>
-                  <div>
-                    <h3>bank</h3>
-                    <div class="flex align-center mt10">
-                      <p class="yellow-box">명</p>
-                      <span class="title1">은행</span>
+                      <span class="title1">{{ word.wdMnng }}</span>
                     </div>
                   </div>
                 </div>
               </article>
             </div>
-            <div class="flex justify-between">
-              <article class="flex align-center">
-                <div class="imgGroup mr30">
-                  <img
-                    src="../../../../resources/img/img2_2.png"
-                    data-num="1"
-                    style="width: 200px"
-                  />
-                </div>
-                <div class="flex align-start">
-                  <button
-                    class="listen-btn mr30"
-                    data-video="1"
-                    tabindex="0"
-                    aria-label="음성 재생"
-                  >
-                    <img
-                      src="../../../../resources/img/btn10_s.png"
-                      data-num="1"
-                      @click="playAudio('audio-love')"
-                    />
-                  </button>
-                  <audio
-                    id="audio-love"
-                    src="client/resources/audio/love.wav"
-                    preload="auto"
-                  ></audio>
-                  <div>
-                    <h3>love</h3>
-                    <div class="flex align-center mt10">
-                      <p class="yellow-box">명</p>
-                      <span class="title1">사랑</span>
-                    </div>
-                  </div>
-                </div>
-              </article>
-              <article class="flex align-center">
-                <div class="imgGroup mr30">
-                  <img
-                    src="../../../../resources/img/img2_3.png"
-                    data-num="1"
-                    style="width: 200px"
-                  />
-                </div>
-                <div class="flex align-start">
-                  <button
-                    class="listen-btn mr30"
-                    data-video="1"
-                    tabindex="0"
-                    aria-label="음성 재생"
-                  >
-                    <img
-                      src="../../../../resources/img/btn10_s.png"
-                      data-num="1"
-                      @click="playAudio('audio-police')"
-                    />
-                  </button>
-                  <audio
-                    id="audio-police"
-                    src="client/resources/audio/police.wav"
-                    preload="auto"
-                  ></audio>
-                  <div>
-                    <h3>police</h3>
-                    <div class="flex align-center mt10">
-                      <p class="yellow-box">명</p>
-                      <span class="title1">경찰</span>
-                    </div>
-                  </div>
-                </div>
-              </article>
-            </div>
+
           </div>
         </div>
       </div>

 </template>
 
 <script>
+import axios from 'axios';
+
 export default {
   data() {
-    return {};
+    return {
+      wdBookId: "WORD_BOOK_000000000000042",
+      wordList: [],
+    };
   },
   methods: {
-    complete() {
-        const { unit_id, book_id } = this.$route.query;
-        this.$router.push({ name: 'Dashboard', query: { value: 2, unit_id, book_id } });
+    fetchWordList() {
+      axios.post("/word/getWordsByBookId.json", {
+        wdBookId: this.wdBookId,
+      })
+      .then((response) => {
+        console.log(response.data);
+        this.wordList = response.data;
+      })
+      .catch((error) => {
+        console.error("단어 목록을 불러오는 중 오류 발생:", error);
+      })
     },
+
     goToPage(page) {
       this.$router.push({ name: page });
     },
+
     playAudio(audioId) {
       const audio = document.getElementById(audioId);
       if (audio) {

         console.error(`Audio element with ID ${audioId} not found.`);
       }
     },
+
   },
-  watch: {},
-  computed: {},
-  components: {},
-  mounted() {},
+  mounted() {
+    console.log("챕터2 단어장 마운트 완료");
+    this.fetchWordList();
+  },
 };
+
 </script>
+
 <style scoped>
 .grid-container {
   display: grid;

18340e0

718614b

client/views/pages/main/Chapter/Chapter2_3.vue

--- client/views/pages/main/Chapter/Chapter2_3.vue

+++ client/views/pages/main/Chapter/Chapter2_3.vue


 export default {
     data() {
         return {
-            items: [
-                {
-                    imgSrc1: 'client/resources/img/img53_6_35s.png',
-                    imgSrc2: 'client/resources/img/img53_1_35s.png',
-                    con: {
-                        imgSrc: 'client/resources/img/img54_s.png',
-                        titleEm: 'c',
-                        title: 'loud',
-                        boxText: '명',
-                        subtitle: '구름',
-                    },
-                },
-                {
-                    imgSrc1: 'client/resources/img/img53_7_35s.png',
-                    imgSrc2: 'client/resources/img/img53_2_35s.png',
-                    con: {
-                        imgSrc: 'client/resources/img/img40_s.png',
-                        titleEm: 'a',
-                        title: 'pple',
-                        boxText: '명',
-                        subtitle: '사과',
-                    },
-                },
-                {
-                    imgSrc1: 'client/resources/img/img53_8_35s.png',
-                    imgSrc2: 'client/resources/img/img53_3_35s.png',
-                    con: {
-                        imgSrc: 'client/resources/img/31img40_s.png',
-                        titleEm: 'l',
-                        title: 'og',
-                        boxText: '명',
-                        subtitle: '통나무',
-                    },
-                },
-                {
-                    imgSrc1: 'client/resources/img/img53_9_35s.png',
-                    imgSrc2: 'client/resources/img/img53_4_35s.png',
-                    con: {
-                        imgSrc: 'client/resources/img/img41_s.png',
-                        titleEm: 'g',
-                        title: 'uitar',
-                        boxText: '명',
-                        subtitle: '기타',
-                    },
-                },
-                {
-                    imgSrc1: 'client/resources/img/img53_10_35s.png',
-                    imgSrc2: 'client/resources/img/img53_5_35s.png',
-                    con: {
-                        imgSrc: 'client/resources/img/img76_41s.png',
-                        titleEm: 'w',
-                        title: 'atermelon',
-                        boxText: '명',
-                        subtitle: '수박',
-                    },
-                },
-            ],
+            items: [],
             currentCon: {
-                imgSrc: 'client/resources/img/img54_s.png',
-                titleEm: 'c',
-                title: 'loud',
+                imgSrc: '',
+                titleEm: '',
+                title: '',
                 boxText: '명',
-                subtitle: '구름',
+                subtitle: '',
             },
             selectedIndex: 0,
             timer: '00',

 
             path: mdiStop,
             nowWord: 'cloud',
+
+            wdBookId: "WORD_BOOK_000000000000043",
         };
     },
     methods: {

                 console.log('파일 전송 실패: ', error);
             }
         },
+
+        // 단어 리스트를 서버에서 받아와 items에 적용하는 메서드
+        async fetchWordList() {
+            try {
+                const response = await axios.post('/word/getWordsByBookId.json', {
+                    wdBookId: this.wdBookId,
+                });
+
+                this.wordList = response.data;
+
+                this.items = this.wordList.map((word, index) => {
+                    const imgSrc1 = `client/resources/img/img53_${6 + index}_35s.png`;
+                    const imgSrc2 = `client/resources/img/img53_${1 + index}_35s.png`;
+                    return {
+                        imgSrc1,
+                        imgSrc2,
+                        con: {
+                            imgSrc: 'client/resources/img/img54_s.png', // 일단은 구름 사진으로 고정
+                            titleEm: word.wdNm.charAt(0), // 단어의 첫 글자
+                            title: word.wdNm.slice(1), // 단어의 나머지 부분
+                            boxText: '명',
+                            subtitle: word.wdMnng, // 단어의 의미
+                        },
+                    };
+                });
+
+                // items 리스트의 첫 번째 항목을 currentCon에 설정
+                if (this.items.length > 0) {
+                    this.currentCon = this.items[0].con;
+                    this.nowWord = this.currentCon.titleEm + this.currentCon.title;
+                }
+
+            } catch (error) {
+                console.error('단어 목록을 불러오는 중 오류 발생:', error);
+            }
+        },
+
     },
     watch: {
         transcription: null, // 서버에서 받아온 텍스트 결과

             deep: true, // Watch for deep changes in currentCon
         },
     },
+    mounted() {
+        this.fetchWordList();
+    },
     beforeDestroy() {
         if (this.intervalId) {
             clearInterval(this.intervalId);

Add a comment

Open 0
Closed 0

List

...	...	@@ -84,69 +84,13 @@
84	84	export default {
85	85	data() {
86	86	return {
87		- items: [
88		- {
89		- imgSrc1: 'client/resources/img/img53_6_35s.png',
90		- imgSrc2: 'client/resources/img/img53_1_35s.png',
91		- con: {
92		- imgSrc: 'client/resources/img/img54_s.png',
93		- titleEm: 'c',
94		- title: 'loud',
95		- boxText: '명',
96		- subtitle: '구름',
97		- },
98		- },
99		- {
100		- imgSrc1: 'client/resources/img/img53_7_35s.png',
101		- imgSrc2: 'client/resources/img/img53_2_35s.png',
102		- con: {
103		- imgSrc: 'client/resources/img/img40_s.png',
104		- titleEm: 'a',
105		- title: 'pple',
106		- boxText: '명',
107		- subtitle: '사과',
108		- },
109		- },
110		- {
111		- imgSrc1: 'client/resources/img/img53_8_35s.png',
112		- imgSrc2: 'client/resources/img/img53_3_35s.png',
113		- con: {
114		- imgSrc: 'client/resources/img/31img40_s.png',
115		- titleEm: 'l',
116		- title: 'og',
117		- boxText: '명',
118		- subtitle: '통나무',
119		- },
120		- },
121		- {
122		- imgSrc1: 'client/resources/img/img53_9_35s.png',
123		- imgSrc2: 'client/resources/img/img53_4_35s.png',
124		- con: {
125		- imgSrc: 'client/resources/img/img41_s.png',
126		- titleEm: 'g',
127		- title: 'uitar',
128		- boxText: '명',
129		- subtitle: '기타',
130		- },
131		- },
132		- {
133		- imgSrc1: 'client/resources/img/img53_10_35s.png',
134		- imgSrc2: 'client/resources/img/img53_5_35s.png',
135		- con: {
136		- imgSrc: 'client/resources/img/img76_41s.png',
137		- titleEm: 'w',
138		- title: 'atermelon',
139		- boxText: '명',
140		- subtitle: '수박',
141		- },
142		- },
143		- ],
	87	+ items: [],
144	88	currentCon: {
145		- imgSrc: 'client/resources/img/img54_s.png',
146		- titleEm: 'c',
147		- title: 'loud',
	89	+ imgSrc: '',
	90	+ titleEm: '',
	91	+ title: '',
148	92	boxText: '명',
149		- subtitle: '구름',
	93	+ subtitle: '',
150	94	},
151	95	selectedIndex: 0,
152	96	timer: '00',
...	...	@@ -160,6 +104,8 @@
160	104
161	105	path: mdiStop,
162	106	nowWord: 'cloud',
	107	+
	108	+ wdBookId: "WORD_BOOK_000000000000043",
163	109	};
164	110	},
165	111	methods: {
...	...	@@ -258,6 +204,43 @@
258	204	console.log('파일 전송 실패: ', error);
259	205	}
260	206	},
	207	+
	208	+ // 단어 리스트를 서버에서 받아와 items에 적용하는 메서드
	209	+ async fetchWordList() {
	210	+ try {
	211	+ const response = await axios.post('/word/getWordsByBookId.json', {
	212	+ wdBookId: this.wdBookId,
	213	+ });
	214	+
	215	+ this.wordList = response.data;
	216	+
	217	+ this.items = this.wordList.map((word, index) => {
	218	+ const imgSrc1 = `client/resources/img/img53_${6 + index}_35s.png`;
	219	+ const imgSrc2 = `client/resources/img/img53_${1 + index}_35s.png`;
	220	+ return {
	221	+ imgSrc1,
	222	+ imgSrc2,
	223	+ con: {
	224	+ imgSrc: 'client/resources/img/img54_s.png', // 일단은 구름 사진으로 고정
	225	+ titleEm: word.wdNm.charAt(0), // 단어의 첫 글자
	226	+ title: word.wdNm.slice(1), // 단어의 나머지 부분
	227	+ boxText: '명',
	228	+ subtitle: word.wdMnng, // 단어의 의미
	229	+ },
	230	+ };
	231	+ });
	232	+
	233	+ // items 리스트의 첫 번째 항목을 currentCon에 설정
	234	+ if (this.items.length > 0) {
	235	+ this.currentCon = this.items[0].con;
	236	+ this.nowWord = this.currentCon.titleEm + this.currentCon.title;
	237	+ }
	238	+
	239	+ } catch (error) {
	240	+ console.error('단어 목록을 불러오는 중 오류 발생:', error);
	241	+ }
	242	+ },
	243	+
261	244	},
262	245	watch: {
263	246	transcription: null, // 서버에서 받아온 텍스트 결과
...	...	@@ -269,6 +252,9 @@
269	252	deep: true, // Watch for deep changes in currentCon
270	253	},
271	254	},
	255	+ mounted() {
	256	+ this.fetchWordList();
	257	+ },
272	258	beforeDestroy() {
273	259	if (this.intervalId) {
274	260	clearInterval(this.intervalId);

...	...	@@ -28,8 +28,13 @@
28	28	</div>
29	29
30	30	<div class="flex justify-center">
31		- <div class="vocaGroup">
32		- <div class="flex justify-between mb80">
	31	+ <div class="vocaGroup" style="display: flex; flex-wrap: wrap;">
	32	+ <div
	33	+ v-for="(word) in wordList"
	34	+ :key="word.wdId"
	35	+ class="flex justify-between mb80"
	36	+ style="width: 49%;"
	37	+ >
33	38	<article class="flex align-center">
34	39	<div class="imgGroup mr30">
35	40	<img
...	...	@@ -57,122 +62,16 @@
57	62	preload="auto"
58	63	></audio>
59	64	<div>
60		- <h3>family</h3>
	65	+ <h3>{{ word.wdNm }}</h3>
61	66	<div class="flex align-center mt10">
62	67	<p class="yellow-box">명</p>
63		- <span class="title1">가족</span>
64		- </div>
65		- </div>
66		- </div>
67		- </article>
68		- <article class="flex align-center">
69		- <div class="imgGroup mr30">
70		- <img
71		- src="../../../../resources/img/img2_4.png"
72		- data-num="1"
73		- style="width: 200px"
74		- />
75		- </div>
76		- <div class="flex align-start">
77		- <button
78		- class="listen-btn mr30"
79		- data-video="1"
80		- tabindex="0"
81		- aria-label="음성 재생"
82		- >
83		- <img
84		- src="../../../../resources/img/btn10_s.png"
85		- data-num="1"
86		- @click="playAudio('audio-bank')"
87		- />
88		- </button>
89		- <audio
90		- id="audio-bank"
91		- src="client/resources/audio/bank.wav"
92		- preload="auto"
93		- ></audio>
94		- <div>
95		- <h3>bank</h3>
96		- <div class="flex align-center mt10">
97		- <p class="yellow-box">명</p>
98		- <span class="title1">은행</span>
	68	+ <span class="title1">{{ word.wdMnng }}</span>
99	69	</div>
100	70	</div>
101	71	</div>
102	72	</article>
103	73	</div>
104		- <div class="flex justify-between">
105		- <article class="flex align-center">
106		- <div class="imgGroup mr30">
107		- <img
108		- src="../../../../resources/img/img2_2.png"
109		- data-num="1"
110		- style="width: 200px"
111		- />
112		- </div>
113		- <div class="flex align-start">
114		- <button
115		- class="listen-btn mr30"
116		- data-video="1"
117		- tabindex="0"
118		- aria-label="음성 재생"
119		- >
120		- <img
121		- src="../../../../resources/img/btn10_s.png"
122		- data-num="1"
123		- @click="playAudio('audio-love')"
124		- />
125		- </button>
126		- <audio
127		- id="audio-love"
128		- src="client/resources/audio/love.wav"
129		- preload="auto"
130		- ></audio>
131		- <div>
132		- <h3>love</h3>
133		- <div class="flex align-center mt10">
134		- <p class="yellow-box">명</p>
135		- <span class="title1">사랑</span>
136		- </div>
137		- </div>
138		- </div>
139		- </article>
140		- <article class="flex align-center">
141		- <div class="imgGroup mr30">
142		- <img
143		- src="../../../../resources/img/img2_3.png"
144		- data-num="1"
145		- style="width: 200px"
146		- />
147		- </div>
148		- <div class="flex align-start">
149		- <button
150		- class="listen-btn mr30"
151		- data-video="1"
152		- tabindex="0"
153		- aria-label="음성 재생"
154		- >
155		- <img
156		- src="../../../../resources/img/btn10_s.png"
157		- data-num="1"
158		- @click="playAudio('audio-police')"
159		- />
160		- </button>
161		- <audio
162		- id="audio-police"
163		- src="client/resources/audio/police.wav"
164		- preload="auto"
165		- ></audio>
166		- <div>
167		- <h3>police</h3>
168		- <div class="flex align-center mt10">
169		- <p class="yellow-box">명</p>
170		- <span class="title1">경찰</span>
171		- </div>
172		- </div>
173		- </div>
174		- </article>
175		- </div>
	74	+
176	75	</div>
177	76	</div>
178	77	</div>
...	...	@@ -184,18 +83,33 @@
184	83	</template>
185	84
186	85	<script>
	86	+import axios from 'axios';
	87	+
187	88	export default {
188	89	data() {
189		- return {};
	90	+ return {
	91	+ wdBookId: "WORD_BOOK_000000000000042",
	92	+ wordList: [],
	93	+ };
190	94	},
191	95	methods: {
192		- complete() {
193		- const { unit_id, book_id } = this.$route.query;
194		- this.$router.push({ name: 'Dashboard', query: { value: 2, unit_id, book_id } });
	96	+ fetchWordList() {
	97	+ axios.post("/word/getWordsByBookId.json", {
	98	+ wdBookId: this.wdBookId,
	99	+ })
	100	+ .then((response) => {
	101	+ console.log(response.data);
	102	+ this.wordList = response.data;
	103	+ })
	104	+ .catch((error) => {
	105	+ console.error("단어 목록을 불러오는 중 오류 발생:", error);
	106	+ })
195	107	},
	108	+
196	109	goToPage(page) {
197	110	this.$router.push({ name: page });
198	111	},
	112	+
199	113	playAudio(audioId) {
200	114	const audio = document.getElementById(audioId);
201	115	if (audio) {
...	...	@@ -204,13 +118,16 @@
204	118	console.error(`Audio element with ID ${audioId} not found.`);
205	119	}
206	120	},
	121	+
207	122	},
208		- watch: {},
209		- computed: {},
210		- components: {},
211		- mounted() {},
	123	+ mounted() {
	124	+ console.log("챕터2 단어장 마운트 완료");
	125	+ this.fetchWordList();
	126	+ },
212	127	};
	128	+
213	129	</script>
	130	+
214	131	<style scoped>
215	132	.grid-container {
216	133	display: grid;

Delete comment