jichoi / lms_front star
이은진 이은진 2024-08-14
240814 이은진 단어장2번
@5dcb25155f9bd7f3639464a2bcb72e5aec67165b
d02c5b5
5dcb251
client/views/pages/main/Chapter/Chapter2.vue
--- client/views/pages/main/Chapter/Chapter2.vue
+++ client/views/pages/main/Chapter/Chapter2.vue
@@ -1,6 +1,6 @@
 
 <template>

   <div id="Chapter1_1" class="content-wrap">

-    <div style="margin: 30px 0px 50px">

+    <div style="margin: 30px 0px 50px; width: 20%">

       <router-link to="/MyPlan.page">

         <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>

       </router-link>
@@ -12,7 +12,7 @@
 
     <div class="flex justify-between align-center">

       <div class="pre-btn" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/left.png" alt=""></div>

       <div class="content title-box">

-        <p class="title mt25 title-bg">단어로 공부하는 영어</p>

+        <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>

         <div class="flex align-center mb30">

           <p class="subtitle2 mr20"></p>

           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
d02c5b5
5dcb251
client/views/pages/main/Chapter/Chapter2_2.vue
--- client/views/pages/main/Chapter/Chapter2_2.vue
+++ client/views/pages/main/Chapter/Chapter2_2.vue
@@ -1,10 +1,10 @@
 
 <template>

    <div id="Chapter2_2" class="content-wrap">

-      <div style="margin: 30px 0px 50px">

-         <router-link to="/MyPlan.page">

-               <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>

-         </router-link>

-      </div>

+      <div style="margin: 30px 0px 50px; width: 20%">

+      <router-link to="/MyPlan.page">

+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>

+      </router-link>

+    </div>

       <div class="title-box mb25 flex align-center mt40">

          <span class="title mr40">1. Hello WORLD</span>

          <span class="subtitle">my name is dd</span>
@@ -13,7 +13,7 @@
 
          <div class="pre-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/left.png" alt="">

          </div>

          <div class="content title-box">

-            <p class="title mt25 title-bg">단어로 공부하는 영어</p>

+            <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>

             <div class="flex align-center mb30">

                <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>

                <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
d02c5b5
5dcb251
client/views/pages/main/Chapter/Chapter2_3.vue
--- client/views/pages/main/Chapter/Chapter2_3.vue
+++ client/views/pages/main/Chapter/Chapter2_3.vue
@@ -1,6 +1,6 @@
 
 <template>

    <div id="Chapter2_2" class="content-wrap">

-      <div style="margin: 30px 0px 50px">

+      <div style="margin: 30px 0px 50px; width: 20%">

          <router-link to="/MyPlan.page">

             <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>

          </router-link>
@@ -13,7 +13,7 @@
 
          <div class="pre-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/left.png" alt=""></div>

          <div class="content title-box">

             <p class="subtitle2 "></p>

-            <p class="title mt25 title-bg">단어로 공부하는 영어</p>

+            <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>

             <div class="flex align-center mb30">

                <p class="subtitle2 mr20">다음을 듣고 따라 말하세요.</p>

                <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
@@ -33,30 +33,23 @@
 
 

                <div class="flex justify-center">

                   <div class="readGroup">

-                      <section>

-                          <div class="imgGroup flex justify-center">

-                              <!-- 녹음 버튼 -->

-                              <div :class="['mic-btn', { notRecording: !isRecording }]" @click="toggleRecording">

-                                  <img src="../../../../resources/img/btn11_s.png" alt="" />

-                              </div>

-                          </div>

-                          <article>

-                              <p class="speakText mb25">

-                                  <span v-if="transcription === null"

-                                      >위의 버튼을 누른 후 오늘 배운 단어를 말해보세요!</span

-                                  >

-                                  <span v-else-if="!transcription || transcription.trim() === ''"

-                                      >다시 말해보세요!</span

-                                  >

-                                  <span v-else>{{ transcription }}</span>

-                              </p>

-                              <p class="read-ai">

-                                  <img style="margin-top: -5px" src="../../../../resources/img/img43_s.png" alt="" />

-                              </p>

-                          </article>

-                      </section>

+                     <section>

+                        <div class="imgGroup flex justify-center">

+                           <!-- 녹음 버튼 -->

+                           <div :class="['mic-btn', { notRecording: !isRecording }]" @click="toggleRecording">

+                              <img src="../../../../resources/img/btn11_s.png" alt="" />

+                           </div>

+                        </div>

+                        <article>

+                           <p class="speakText mb25">

+                              <span v-if="transcription === null">위의 버튼을 누른 후 단어를 말해보세요!</span>

+                              <span v-else-if="transcription === nowWord">다시 말해보세요!</span>

+                              <span v-else>정답입니다! 잘했어요</span>

+                           </p>

+                        </article>

+                     </section>

                   </div>

-              </div>

+               </div>

                <div class="flex justify-center">

                   <div class="btnGroup mt50 flex justify-between">

                      <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
@@ -75,17 +68,17 @@
 
 </template>

 

 <script>

-import axios from 'axios'; 

+import axios from 'axios';

 import { mdiStop } from '@mdi/js';

 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: 'ater melon', boxText: '명', subtitle: '수박' } }

+            { 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: 'ater melon', boxText: '명', subtitle: '수박' } }

          ],

          currentCon: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'c', title: 'loud', boxText: '명', subtitle: '구름' },

          selectedIndex: 0,
@@ -101,6 +94,7 @@
 
          stream: null, // MediaStream 객체

 

          path: mdiStop,

+         nowWord: "cloud",

       };

    },

    methods: {
@@ -127,75 +121,86 @@
 
       },

       // 녹음 시작/중지 토글

       async toggleRecording() {

-          if (this.isRecording) {

-              console.log('녹음 그만!');

-              this.stopRecording(); // 녹음 중이면 중지

-          } else {

-              console.log('녹음 시작!');

-              await this.startRecording(); // 녹음 중이 아니면 녹음 시작

-          }

+         if (this.isRecording) {

+            console.log('녹음 그만!');

+            this.stopRecording(); // 녹음 중이면 중지

+         } else {

+            console.log('녹음 시작!');

+            await this.startRecording(); // 녹음 중이 아니면 녹음 시작

+         }

       },

       // 녹음 시작

       async startRecording() {

-          this.audioChunks = []; // 오디오 초기화

-          this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });

-          this.mediaRecorder = new MediaRecorder(this.stream);

-          this.mediaRecorder.ondataavailable = (event) => {

-              this.audioChunks.push(event.data); // 녹음 데이터 저장

-          };

-          this.mediaRecorder.onstop = () => {

-              this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });

+         this.audioChunks = []; // 오디오 초기화

+         this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });

+         this.mediaRecorder = new MediaRecorder(this.stream);

+         this.mediaRecorder.ondataavailable = (event) => {

+            this.audioChunks.push(event.data); // 녹음 데이터 저장

+         };

+         this.mediaRecorder.onstop = () => {

+            this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });

 

-              /******************************/

-              // this.audioURL = URL.createObjectURL(this.audioBlob); // 오디오 URL 생성

-              // console.log('Audio URL:', this.audioURL);

-              /******************************/

+            /******************************/

+            // this.audioURL = URL.createObjectURL(this.audioBlob); // 오디오 URL 생성

+            // console.log('Audio URL:', this.audioURL);

+            /******************************/

 

-              console.log('Recorded Audio Blob:', this.audioBlob); // 콘솔에 Blob 확인

-              this.sendAudioToServer(); // 서버로 오디오 전송

-          };

-          this.mediaRecorder.start(); // 녹음 시작

-          this.isRecording = true; // 녹음 상태 변경

+            console.log('Recorded Audio Blob:', this.audioBlob); // 콘솔에 Blob 확인

+            this.sendAudioToServer(); // 서버로 오디오 전송

+         };

+         this.mediaRecorder.start(); // 녹음 시작

+         this.isRecording = true; // 녹음 상태 변경

       },

 

       // 녹음 중지

       stopRecording() {

-          this.mediaRecorder.stop(); // 녹음 중단

+         this.mediaRecorder.stop(); // 녹음 중단

 

-          if (this.stream) {

-              this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지

-          }

+         if (this.stream) {

+            this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지

+         }

 

-          this.isRecording = false; // 녹음 상태 변경

+         this.isRecording = false; // 녹음 상태 변경

       },

 

       // 오디오 전송

       async sendAudioToServer() {

-          const formData = new FormData();

-          formData.append('file', this.audioBlob, 'recording.wav');

-          try {

-              const resposne = await axios.post('/api/speechToText.json', formData, {

-                  headers: {

-                      'Content-Type': 'multipart/form-data',

-                  },

-              });

-              this.transcription = resposne.data;

-              console.log(`받은 데이터 : ${this.transcription}`);

-          } catch (error) {

-              console.log('파일 전송 실패 : ', error);

-          }

+         const formData = new FormData();

+         formData.append('file', this.audioBlob, 'recording.wav');

+         try {

+            const resposne = await axios.post('/api/speechToText.json', formData, {

+               headers: {

+                  'Content-Type': 'multipart/form-data',

+               },

+            });

+            this.transcription = resposne.data;

+            console.log(`받은 데이터 : ${this.transcription}`);

+         } catch (error) {

+            console.log('파일 전송 실패 : ', error);

+         }

       },

+   },

+   watch: {

+      currentCon: {

+         handler(newValue) {

+            // Update nowWord when currentCon changes

+            this.nowWord = newValue.titleEm + newValue.title;

+            console.log('지금단어: ',this.nowWord)

+            console.log('녹음결과: ',this.transcription)

+         },

+         deep: true // Watch for deep changes in currentCon

+      }

    },

    beforeDestroy() {

       if (this.intervalId) {

          clearInterval(this.intervalId);

       }

-   }

+   },

 }

 </script>

 

 <style scoped>

-.popTxt img{

+.popTxt img {

    position: absolute;

    top: 0;

    left: 0;
d02c5b5
5dcb251
client/views/pages/main/Chapter/Chapter2_4.vue
--- client/views/pages/main/Chapter/Chapter2_4.vue
+++ client/views/pages/main/Chapter/Chapter2_4.vue
@@ -1,10 +1,10 @@
 
 <template>

    <div id="Chapter2_2" class="content-wrap">

-      <div style="margin: 30px 0px 50px">

-         <router-link to="/MyPlan.page">

-               <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>

-         </router-link>

-      </div>

+      <div style="margin: 30px 0px 50px; width: 20%">

+      <router-link to="/MyPlan.page">

+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>

+      </router-link>

+    </div>

       <div class="title-box mb25 flex align-center mt40">

          <span class="title mr40">1. Hello WORLD</span>

          <span class="subtitle">my name is dd</span>
@@ -13,7 +13,7 @@
 
          <div class="pre-btn" @click="goToPage('Chapter2_9')"><img src="../../../../resources/img/left.png" alt="">

          </div>

          <div class="content title-box">

-            <p class="title mt25 title-bg">step2</p>

+            <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>

           <div class="flex align-center mb30">

           <p class="subtitle2 mr20">다음을 듣고 맞는 단어를 선택하세요.</p>

           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
d02c5b5
5dcb251
client/views/pages/main/Chapter/Chapter2_9.vue
--- client/views/pages/main/Chapter/Chapter2_9.vue
+++ client/views/pages/main/Chapter/Chapter2_9.vue
@@ -12,7 +12,7 @@
 
     <div class="flex justify-between align-center">

       <div class="pre-btn" @click="goToPage('Chapter2_2')"><img src="../../../../resources/img/left.png" alt=""></div>

       <div class="content title-box">

-        <p class="title mt25 title-bg">step2</p>

+        <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>

         <div class="flex align-center mb30">

           <p class="subtitle2 mr20">앗! 잉크가 쏟아졌어! 지우개로 잉크를 지워줘!</p>

         </div>
Add a comment
List