Commit @2d6a0a362948cbd2b925ba996a68e0f3cf1d2983

이은진 2024-08-16

240816 이은진, 정다정 토끼 이동 수정중

@2d6a0a362948cbd2b925ba996a68e0f3cf1d2983

ca8f82b

2d6a0a3

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

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

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


         </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>
+    <div class="title-box mb25 flex align-center mt40" style="
+    justify-content: space-between;
+">
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
+      </div>
+      <button class="completeBtn" @click="complete"> 학습 종료 </button>
     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn">

     TextToImage,
   },
   methods: {
+    complete() {
+      this.$router.push({ name: 'Dashboard', query: { value: 1 } });
+    },
     goToPage(page) {
       this.$router.push({ name: page });
     },

 
 <style scoped>
 .youtube-player {
-  width: 950px; /* 플레이어의 가로 크기 */
-  height: 550px; /* 플레이어의 세로 크기 */
+  width: 950px;
+  /* 플레이어의 가로 크기 */
+  height: 550px;
+  /* 플레이어의 세로 크기 */
+}
+
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: 'ONEMobilePOPOTF';
 }
 </style>

ca8f82b

2d6a0a3

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

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

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


 <template>
-   <div id="Chapter2_2" class="content-wrap">
-       <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>
-       </div>
-       <div class="flex justify-between align-center">
-           <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">STEP 2 - 단어로 공부하는 영어</p>
-               <div class="flex align-center mb30">
-                   <p class="subtitle2 mr20">다음을 듣고 따라 말하세요.</p>
-                   <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+    <div id="Chapter2_2" class="content-wrap">
+        <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>
+        </div>
+        <div class="flex justify-between align-center">
+            <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">STEP 2 - 단어로 공부하는 영어</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">다음을 듣고 따라 말하세요.</p>
+                    <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
          </button> -->
-               </div>
+                </div>
 
-               <div class="imgGroup box23">
-                   <div class="con">
-                       <img :src="currentCon.imgSrc" alt="" />
-                       <p class="title3">
-                           <em class="yellow">{{ currentCon.titleEm }}</em
-                           >{{ currentCon.title }}
-                       </p>
-                       <div class="flex align-center justify-center mt10">
-                           <p class="yellow-box-big">{{ currentCon.boxText }}</p>
-                           <span class="subtitle3">{{ currentCon.subtitle }}</span>
-                       </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)"
-                               :class="{ active: selectedIndex === index }"
-                           >
-                               <img :src="item.imgSrc1" />
-                               <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block" />
-                           </button>
-                       </div>
-                   </div>
-                   </div>
+                <div class="imgGroup box23">
+                    <div class="con">
+                        <img :src="currentCon.imgSrc" alt="" />
+                        <p class="title3">
+                            <em class="yellow">{{ currentCon.titleEm }}</em>{{ currentCon.title }}
+                        </p>
+                        <div class="flex align-center justify-center mt10">
+                            <p class="yellow-box-big">{{ currentCon.boxText }}</p>
+                            <span class="subtitle3">{{ currentCon.subtitle }}</span>
+                        </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)" :class="{ active: selectedIndex === index }">
+                                    <img :src="item.imgSrc1" />
+                                    <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block" />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
 
-                   <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 ref="speakText" class="speakText mb25">위의 버튼을 누른 후 단어를 말해보세요!</p>
-                               </article>
-                           </section>
-                       </div>
-                   </div>
-                   
-               </div>
-           </div>
-           <div class="next-btn" @click="goToPage('Chapter2_2')">
-               <img src="../../../../resources/img/right.png" alt="" />
-           </div>
-       </div>
-   </div>
+                    <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 ref="speakText" class="speakText mb25">위의 버튼을 누른 후 단어를 말해보세요!</p>
+                                </article>
+                            </section>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="next-btn" @click="goToPage('Chapter2_2')">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
 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: '수박',
-                   },
-               },
-           ],
-           currentCon: {
-               imgSrc: 'client/resources/img/img54_s.png',
-               titleEm: 'c',
-               title: 'loud',
-               boxText: '명',
-               subtitle: '구름',
-           },
-           selectedIndex: 0,
-           timer: '00',
-           intervalId: null,
+    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: '수박',
+                    },
+                },
+            ],
+            currentCon: {
+                imgSrc: 'client/resources/img/img54_s.png',
+                titleEm: 'c',
+                title: 'loud',
+                boxText: '명',
+                subtitle: '구름',
+            },
+            selectedIndex: 0,
+            timer: '00',
+            intervalId: null,
 
-           isRecording: false, // 녹음 중 여부
-           mediaRecorder: null,
-           audioChunks: [], // 녹음된 오디오 데이터
-           audioBlob: null, // 오디오 Blob 객체
-           stream: null, // MediaStream 객체
+            isRecording: false, // 녹음 중 여부
+            mediaRecorder: null,
+            audioChunks: [], // 녹음된 오디오 데이터
+            audioBlob: null, // 오디오 Blob 객체
+            stream: null, // MediaStream 객체
 
-           path: mdiStop,
-           nowWord: 'cloud',
-       };
-   },
-   methods: {
-       goToPage(page) {
-           this.$router.push({ name: page });
-       },
-       updateContent(index) {
-           this.selectedIndex = index;
-           this.currentCon = this.items[index].con;
-           this.startTimer();
-       },
-       startTimer() {
-           if (this.intervalId) {
-               clearInterval(this.intervalId);
-           }
-           this.timer = 5;
-           this.intervalId = setInterval(() => {
-               if (this.timer > 0) {
-                   this.timer--;
-               } else {
-                   clearInterval(this.intervalId);
-               }
-           }, 1000);
-       },
-       // 녹음 시작/중지 토글
-       async toggleRecording() {
-           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' });
+            path: mdiStop,
+            nowWord: 'cloud',
+        };
+    },
+    methods: {
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        updateContent(index) {
+            this.selectedIndex = index;
+            this.currentCon = this.items[index].con;
+            this.startTimer();
+        },
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
+        },
+        // 녹음 시작/중지 토글
+        async toggleRecording() {
+            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.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(); // 녹음 중단
+        // 녹음 중지
+        stopRecording() {
+            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 response = await axios.post('/api/speechToText.json', formData, {
-                   headers: {
-                       'Content-Type': 'multipart/form-data',
-                   },
-               });
+        // 오디오 전송
+        async sendAudioToServer() {
+            const formData = new FormData();
+            formData.append('file', this.audioBlob, 'recording.wav');
+            try {
+                const response = await axios.post('/api/speechToText.json', formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                });
 
-               this.transcription = response.data.trim().toLowerCase();
-               this.nowWord = this.nowWord.toLowerCase();
+                this.transcription = response.data.trim().toLowerCase();
+                this.nowWord = this.nowWord.toLowerCase();
 
-               console.log('지금 단어: ', this.nowWord);
-               console.log('녹음 결과: ', this.transcription);
+                console.log('지금 단어: ', this.nowWord);
+                console.log('녹음 결과: ', this.transcription);
 
-               if (this.transcription === this.nowWord) {
-                   this.$refs.speakText.innerText = '정답입니다! 잘했어요';
-               } else {
-                   this.$refs.speakText.innerText = '다시 말해보세요!';
-               }
-           } catch (error) {
-               console.log('파일 전송 실패: ', error);
-           }
-       },
-   },
-   watch: {
-       transcription: null, // 서버에서 받아온 텍스트 결과
-       currentCon: {
-           handler(newValue) {
-               // Update nowWord when currentCon changes
-               this.nowWord = newValue.titleEm + newValue.title;
-           },
-           deep: true, // Watch for deep changes in currentCon
-       },
-   },
-   beforeDestroy() {
-       if (this.intervalId) {
-           clearInterval(this.intervalId);
-       }
-   },
+                if (this.transcription === this.nowWord) {
+                    this.$refs.speakText.innerText = '정답입니다! 잘했어요';
+                } else {
+                    this.$refs.speakText.innerText = '다시 말해보세요!';
+                }
+            } catch (error) {
+                console.log('파일 전송 실패: ', error);
+            }
+        },
+    },
+    watch: {
+        transcription: null, // 서버에서 받아온 텍스트 결과
+        currentCon: {
+            handler(newValue) {
+                // Update nowWord when currentCon changes
+                this.nowWord = newValue.titleEm + newValue.title;
+            },
+            deep: true, // Watch for deep changes in currentCon
+        },
+    },
+    beforeDestroy() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+        }
+    },
 };
 </script>
 
 <style scoped>
 .popTxt img {
-   position: absolute;
-   top: 0;
-   left: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
-.box23{
-   display: flex;
+
+.box23 {
+    display: flex;
     align-items: center;
     gap: 80px;
     justify-content: center;
 }
+
+.mic-btn {
+    cursor: pointer;
+}
+
+.mic-btn.notRecording {
+    background-image: none;
+    cursor: pointer;
+}
+
+.speakText {
+    background-color: #fff8e9;
+    border: 0;
+}
+
+.speakText span {
+    font-size: 28px;
+}
 </style>

ca8f82b

2d6a0a3

client/views/pages/main/Dashboard.vue

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

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


                 <p class="subtitle">{{ roadmapData[0].book_nm }}</p>
             </div>
             <div class="race-box">
-                <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
+
+
+                <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""
+                        :style="{ display: rabbitPos[0] ? 'block' : 'none' }"></div>
                 <div class="rcon flex justify-end mb5">
                     <div class="race-btn" @click="goToPage('Chapter1')">
+
+                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
+                                :style="{ display: rabbitPos[1] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="1">
-                            <img :src="item.imgSrc1">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[1] ? 'block' : 'none' }">
+                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[1] ? 'block' : 'none' }">
                         </button>
                         <p>지문1</p>
                     </div>
                     <div class="race-btn" @click="goToPage('Chapter2')">
+                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
+                                :style="{ display: rabbitPos[2] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="2">
-                            <img :src="item.imgSrc1">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[2] ? 'block' : 'none' }">
+                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[2] ? 'block' : 'none' }">
                         </button>
                         <p>단어장</p>
                     </div>

                     <div class="race-btn" @click="goToPage('Chapter7')">
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="7">
-                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc1"
+                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
                             <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                         </button>
                         <p>문제1</p>

                     <div class="race-btn" @click="goToPage('Chapter6')">
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="6">
-                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc1"
+                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
                             <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                         </button>
                         <p>단어장</p>

                     <div class="race-btn" @click="goToPage('Chapter5')">
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="5">
-                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc1"
+                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
                             <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                         </button>
                         <p>지문2</p>

                     <div class="race-btn" @click="goToPage('Chapter4')">
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="4">
-                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc1"
+                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
                             <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                         </button>
                         <p>문제2</p>

                     <div class="race-btn" @click="goToPage('Chapter3')">
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="3">
-                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc1"
+                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
                             <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                         </button>
                         <p>문제1</p>

                     <div class="race-btn" @click="goToPage('Chapter8')">
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="8">
-                            <img :src="item.imgSrc3">
+                            <img :src="item.imgSrc3"
+                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
                             <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                         </button>
                         <p class="long">중간 평가</p>

                     <div class="race-btn" @click="goToPage('Chapter9')">
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="9">
-                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc1"
+                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
                             <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                         </button>
                         <p>지문3</p>

                     <div class="race-btn" @click="goToPage('Chapter10')">
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="10">
-                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc1"
+                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
                             <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                         </button>
                         <p>단어장</p>

                     <div class="race-btn">
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="11">
-                            <img :src="item.imgSrc3">
+                            <img :src="item.imgSrc3"
+                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
                             <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                         </button>
                         <p class="long">최종 평가</p>

 
             schedules: [],
             nowSchedule: "",
-            state: ''
+            state: '',
+            rabbitPos: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+            rabbitCompl: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         }
     },
     methods: {
         //은진
+        fetchRabbit() {
+            for (var i = 0; i < 12; i++) {
+                this.rabbitPos[i] = false
+            }
+            if (this.$route.query.value) {
+                this.rabbitPos[this.$route.query.value] = true
+                this.rabbitCompl[this.$route.query.value] = true
+            }
+            else
+                this.rabbitPos[0] = true
+        },
         fetchSchedule() {
             axios({
                 url: "/schedule/selectSchedule.json",

     mounted() {
         console.log('main mounted');
         this.fetchSchedule();
+        this.fetchRabbit();
     },
     computed() {
 

 .rabbit-end {
     cursor: pointer;
 }
+
+.rabbit-running {
+    position: absolute;
+    bottom: 40px;
+    right: 110px;
+    z-index: 10000;
+    transform: scaleX(-1);
+}
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -9,21 +9,29 @@
9	9	<p class="subtitle">{{ roadmapData[0].book_nm }}</p>
10	10	</div>
11	11	<div class="race-box">
12		- <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
	12	+
	13	+
	14	+ <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""
	15	+ :style="{ display: rabbitPos[0] ? 'block' : 'none' }"></div>
13	16	<div class="rcon flex justify-end mb5">
14	17	<div class="race-btn" @click="goToPage('Chapter1')">
	18	+
	19	+ <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
	20	+ :style="{ display: rabbitPos[1] ? 'block' : 'none' }"></div>
15	21	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
16	22	data-num="1">
17		- <img :src="item.imgSrc1">
18		- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	23	+ <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[1] ? 'block' : 'none' }">
	24	+ <img :src="item.imgSrc2" :style="{ display: rabbitCompl[1] ? 'block' : 'none' }">
19	25	</button>
20	26	<p>지문1</p>
21	27	</div>
22	28	<div class="race-btn" @click="goToPage('Chapter2')">
	29	+ <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
	30	+ :style="{ display: rabbitPos[2] ? 'block' : 'none' }"></div>
23	31	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
24	32	data-num="2">
25		- <img :src="item.imgSrc1">
26		- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	33	+ <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[2] ? 'block' : 'none' }">
	34	+ <img :src="item.imgSrc2" :style="{ display: rabbitCompl[2] ? 'block' : 'none' }">
27	35	</button>
28	36	<p>단어장</p>
29	37	</div>
...	...	@@ -32,7 +40,8 @@
32	40	<div class="race-btn" @click="goToPage('Chapter7')">
33	41	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
34	42	data-num="7">
35		- <img :src="item.imgSrc1">
	43	+ <img :src="item.imgSrc1"
	44	+ :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
36	45	<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
37	46	</button>
38	47	<p>문제1</p>
...	...	@@ -40,7 +49,8 @@
40	49	<div class="race-btn" @click="goToPage('Chapter6')">
41	50	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
42	51	data-num="6">
43		- <img :src="item.imgSrc1">
	52	+ <img :src="item.imgSrc1"
	53	+ :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
44	54	<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
45	55	</button>
46	56	<p>단어장</p>
...	...	@@ -48,7 +58,8 @@
48	58	<div class="race-btn" @click="goToPage('Chapter5')">
49	59	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
50	60	data-num="5">
51		- <img :src="item.imgSrc1">
	61	+ <img :src="item.imgSrc1"
	62	+ :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
52	63	<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
53	64	</button>
54	65	<p>지문2</p>
...	...	@@ -56,7 +67,8 @@
56	67	<div class="race-btn" @click="goToPage('Chapter4')">
57	68	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
58	69	data-num="4">
59		- <img :src="item.imgSrc1">
	70	+ <img :src="item.imgSrc1"
	71	+ :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
60	72	<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
61	73	</button>
62	74	<p>문제2</p>
...	...	@@ -64,7 +76,8 @@
64	76	<div class="race-btn" @click="goToPage('Chapter3')">
65	77	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
66	78	data-num="3">
67		- <img :src="item.imgSrc1">
	79	+ <img :src="item.imgSrc1"
	80	+ :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
68	81	<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
69	82	</button>
70	83	<p>문제1</p>
...	...	@@ -74,7 +87,8 @@
74	87	<div class="race-btn" @click="goToPage('Chapter8')">
75	88	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
76	89	data-num="8">
77		- <img :src="item.imgSrc3">
	90	+ <img :src="item.imgSrc3"
	91	+ :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
78	92	<img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
79	93	</button>
80	94	<p class="long">중간 평가</p>
...	...	@@ -82,7 +96,8 @@
82	96	<div class="race-btn" @click="goToPage('Chapter9')">
83	97	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
84	98	data-num="9">
85		- <img :src="item.imgSrc1">
	99	+ <img :src="item.imgSrc1"
	100	+ :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
86	101	<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
87	102	</button>
88	103	<p>지문3</p>
...	...	@@ -90,7 +105,8 @@
90	105	<div class="race-btn" @click="goToPage('Chapter10')">
91	106	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
92	107	data-num="10">
93		- <img :src="item.imgSrc1">
	108	+ <img :src="item.imgSrc1"
	109	+ :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
94	110	<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
95	111	</button>
96	112	<p>단어장</p>
...	...	@@ -99,7 +115,8 @@
99	115	<div class="race-btn">
100	116	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
101	117	data-num="11">
102		- <img :src="item.imgSrc3">
	118	+ <img :src="item.imgSrc3"
	119	+ :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
103	120	<img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
104	121	</button>
105	122	<p class="long">최종 평가</p>
...	...	@@ -346,11 +363,24 @@
346	363
347	364	schedules: [],
348	365	nowSchedule: "",
349		- state: ''
	366	+ state: '',
	367	+ rabbitPos: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	368	+ rabbitCompl: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
350	369	}
351	370	},
352	371	methods: {
353	372	//은진
	373	+ fetchRabbit() {
	374	+ for (var i = 0; i < 12; i++) {
	375	+ this.rabbitPos[i] = false
	376	+ }
	377	+ if (this.$route.query.value) {
	378	+ this.rabbitPos[this.$route.query.value] = true
	379	+ this.rabbitCompl[this.$route.query.value] = true
	380	+ }
	381	+ else
	382	+ this.rabbitPos[0] = true
	383	+ },
354	384	fetchSchedule() {
355	385	axios({
356	386	url: "/schedule/selectSchedule.json",
...	...	@@ -845,6 +875,7 @@
845	875	mounted() {
846	876	console.log('main mounted');
847	877	this.fetchSchedule();
	878	+ this.fetchRabbit();
848	879	},
849	880	computed() {
850	881
...	...	@@ -936,4 +967,12 @@
936	967	.rabbit-end {
937	968	cursor: pointer;
938	969	}
	970	+
	971	+.rabbit-running {
	972	+ position: absolute;
	973	+ bottom: 40px;
	974	+ right: 110px;
	975	+ z-index: 10000;
	976	+ transform: scaleX(-1);
	977	+}
939	978	</style> (No newline at end of file)

...	...	@@ -7,9 +7,14 @@
7	7	</div>
8	8	</router-link>
9	9	</div>
10		- <div class="title-box mb25 flex align-center mt40">
11		- <span class="title mr40">1. Hello WORLD</span>
12		- <span class="subtitle">my name is dd</span>
	10	+ <div class="title-box mb25 flex align-center mt40" style="
	11	+ justify-content: space-between;
	12	+">
	13	+ <div>
	14	+ <span class="title mr40">1. Hello WORLD</span>
	15	+ <span class="subtitle">my name is dd</span>
	16	+ </div>
	17	+ <button class="completeBtn" @click="complete"> 학습 종료 </button>
13	18	</div>
14	19	<div class="flex justify-between align-center">
15	20	<div class="pre-btn">
...	...	@@ -37,6 +42,9 @@
37	42	TextToImage,
38	43	},
39	44	methods: {
	45	+ complete() {
	46	+ this.$router.push({ name: 'Dashboard', query: { value: 1 } });
	47	+ },
40	48	goToPage(page) {
41	49	this.$router.push({ name: page });
42	50	},
...	...	@@ -94,7 +102,18 @@
94	102
95	103	<style scoped>
96	104	.youtube-player {
97		- width: 950px; /* 플레이어의 가로 크기 */
98		- height: 550px; /* 플레이어의 세로 크기 */
	105	+ width: 950px;
	106	+ /* 플레이어의 가로 크기 */
	107	+ height: 550px;
	108	+ /* 플레이어의 세로 크기 */
	109	+}
	110	+
	111	+.completeBtn {
	112	+ margin-right: 100px;
	113	+ background-color: #ffba08;
	114	+ padding: 10px 30px;
	115	+ border-radius: 10px;
	116	+ font-size: 28px;
	117	+ font-family: 'ONEMobilePOPOTF';
99	118	}
100	119	</style>

...	...	@@ -1,284 +1,297 @@
1	1	<template>
2		- <div id="Chapter2_2" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6		- </router-link>
7		- </div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter2')">
14		- <img src="../../../../resources/img/left.png" alt="" />
15		- </div>
16		- <div class="content title-box">
17		- <p class="subtitle2"></p>
18		- <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
19		- <div class="flex align-center mb30">
20		- <p class="subtitle2 mr20">다음을 듣고 따라 말하세요.</p>
21		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	2	+ <div id="Chapter2_2" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
	6	+ </router-link>
	7	+ </div>
	8	+ <div class="title-box mb25 flex align-center mt40">
	9	+ <span class="title mr40">1. Hello WORLD</span>
	10	+ <span class="subtitle">my name is dd</span>
	11	+ </div>
	12	+ <div class="flex justify-between align-center">
	13	+ <div class="pre-btn" @click="goToPage('Chapter2')">
	14	+ <img src="../../../../resources/img/left.png" alt="" />
	15	+ </div>
	16	+ <div class="content title-box">
	17	+ <p class="subtitle2"></p>
	18	+ <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
	19	+ <div class="flex align-center mb30">
	20	+ <p class="subtitle2 mr20">다음을 듣고 따라 말하세요.</p>
	21	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
22	22	</button> -->
23		- </div>
	23	+ </div>
24	24
25		- <div class="imgGroup box23">
26		- <div class="con">
27		- <img :src="currentCon.imgSrc" alt="" />
28		- <p class="title3">
29		- <em class="yellow">{{ currentCon.titleEm }}</em
30		- >{{ currentCon.title }}
31		- </p>
32		- <div class="flex align-center justify-center mt10">
33		- <p class="yellow-box-big">{{ currentCon.boxText }}</p>
34		- <span class="subtitle3">{{ currentCon.subtitle }}</span>
35		- </div>
36		- <div class="flex justify-center">
37		- <div class="btnGroup mt50 flex justify-between">
38		- <button
39		- class="popTxt"
40		- v-for="(item, index) in items"
41		- :key="index"
42		- @click="updateContent(index)"
43		- :class="{ active: selectedIndex === index }"
44		- >
45		- <img :src="item.imgSrc1" />
46		- <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block" />
47		- </button>
48		- </div>
49		- </div>
50		- </div>
	25	+ <div class="imgGroup box23">
	26	+ <div class="con">
	27	+ <img :src="currentCon.imgSrc" alt="" />
	28	+ <p class="title3">
	29	+ <em class="yellow">{{ currentCon.titleEm }}</em>{{ currentCon.title }}
	30	+ </p>
	31	+ <div class="flex align-center justify-center mt10">
	32	+ <p class="yellow-box-big">{{ currentCon.boxText }}</p>
	33	+ <span class="subtitle3">{{ currentCon.subtitle }}</span>
	34	+ </div>
	35	+ <div class="flex justify-center">
	36	+ <div class="btnGroup mt50 flex justify-between">
	37	+ <button class="popTxt" v-for="(item, index) in items" :key="index"
	38	+ @click="updateContent(index)" :class="{ active: selectedIndex === index }">
	39	+ <img :src="item.imgSrc1" />
	40	+ <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block" />
	41	+ </button>
	42	+ </div>
	43	+ </div>
	44	+ </div>
51	45
52		- <div class="flex justify-center">
53		- <div class="readGroup">
54		- <section>
55		- <div class="imgGroup flex justify-center">
56		- <!-- 녹음 버튼 -->
57		- <div :class="['mic-btn', { notRecording: !isRecording }]" @click="toggleRecording">
58		- <img src="../../../../resources/img/btn11_s.png" alt="" />
59		- </div>
60		- </div>
61		- <article>
62		- <p ref="speakText" class="speakText mb25">위의 버튼을 누른 후 단어를 말해보세요!</p>
63		- </article>
64		- </section>
65		- </div>
66		- </div>
67		-
68		- </div>
69		- </div>
70		- <div class="next-btn" @click="goToPage('Chapter2_2')">
71		- <img src="../../../../resources/img/right.png" alt="" />
72		- </div>
73		- </div>
74		- </div>
	46	+ <div class="flex justify-center">
	47	+ <div class="readGroup">
	48	+ <section>
	49	+ <div class="imgGroup flex justify-center">
	50	+ <!-- 녹음 버튼 -->
	51	+ <div :class="['mic-btn', { notRecording: !isRecording }]" @click="toggleRecording">
	52	+ <img src="../../../../resources/img/btn11_s.png" alt="" />
	53	+ </div>
	54	+ </div>
	55	+ <article>
	56	+ <p ref="speakText" class="speakText mb25">위의 버튼을 누른 후 단어를 말해보세요!</p>
	57	+ </article>
	58	+ </section>
	59	+ </div>
	60	+ </div>
	61	+
	62	+ </div>
	63	+ </div>
	64	+ <div class="next-btn" @click="goToPage('Chapter2_2')">
	65	+ <img src="../../../../resources/img/right.png" alt="" />
	66	+ </div>
	67	+ </div>
	68	+ </div>
75	69	</template>
76	70
77	71	<script>
78	72	import axios from 'axios';
79	73	import { mdiStop } from '@mdi/js';
80	74	export default {
81		- data() {
82		- return {
83		- items: [
84		- {
85		- imgSrc1: 'client/resources/img/img53_6_35s.png',
86		- imgSrc2: 'client/resources/img/img53_1_35s.png',
87		- con: {
88		- imgSrc: 'client/resources/img/img54_s.png',
89		- titleEm: 'c',
90		- title: 'loud',
91		- boxText: '명',
92		- subtitle: '구름',
93		- },
94		- },
95		- {
96		- imgSrc1: 'client/resources/img/img53_7_35s.png',
97		- imgSrc2: 'client/resources/img/img53_2_35s.png',
98		- con: {
99		- imgSrc: 'client/resources/img/img40_s.png',
100		- titleEm: 'a',
101		- title: 'pple',
102		- boxText: '명',
103		- subtitle: '사과',
104		- },
105		- },
106		- {
107		- imgSrc1: 'client/resources/img/img53_8_35s.png',
108		- imgSrc2: 'client/resources/img/img53_3_35s.png',
109		- con: {
110		- imgSrc: 'client/resources/img/31img40_s.png',
111		- titleEm: 'l',
112		- title: 'og',
113		- boxText: '명',
114		- subtitle: '통나무',
115		- },
116		- },
117		- {
118		- imgSrc1: 'client/resources/img/img53_9_35s.png',
119		- imgSrc2: 'client/resources/img/img53_4_35s.png',
120		- con: {
121		- imgSrc: 'client/resources/img/img41_s.png',
122		- titleEm: 'g',
123		- title: 'uitar',
124		- boxText: '명',
125		- subtitle: '기타',
126		- },
127		- },
128		- {
129		- imgSrc1: 'client/resources/img/img53_10_35s.png',
130		- imgSrc2: 'client/resources/img/img53_5_35s.png',
131		- con: {
132		- imgSrc: 'client/resources/img/img76_41s.png',
133		- titleEm: 'w',
134		- title: 'ater melon',
135		- boxText: '명',
136		- subtitle: '수박',
137		- },
138		- },
139		- ],
140		- currentCon: {
141		- imgSrc: 'client/resources/img/img54_s.png',
142		- titleEm: 'c',
143		- title: 'loud',
144		- boxText: '명',
145		- subtitle: '구름',
146		- },
147		- selectedIndex: 0,
148		- timer: '00',
149		- intervalId: null,
	75	+ data() {
	76	+ return {
	77	+ items: [
	78	+ {
	79	+ imgSrc1: 'client/resources/img/img53_6_35s.png',
	80	+ imgSrc2: 'client/resources/img/img53_1_35s.png',
	81	+ con: {
	82	+ imgSrc: 'client/resources/img/img54_s.png',
	83	+ titleEm: 'c',
	84	+ title: 'loud',
	85	+ boxText: '명',
	86	+ subtitle: '구름',
	87	+ },
	88	+ },
	89	+ {
	90	+ imgSrc1: 'client/resources/img/img53_7_35s.png',
	91	+ imgSrc2: 'client/resources/img/img53_2_35s.png',
	92	+ con: {
	93	+ imgSrc: 'client/resources/img/img40_s.png',
	94	+ titleEm: 'a',
	95	+ title: 'pple',
	96	+ boxText: '명',
	97	+ subtitle: '사과',
	98	+ },
	99	+ },
	100	+ {
	101	+ imgSrc1: 'client/resources/img/img53_8_35s.png',
	102	+ imgSrc2: 'client/resources/img/img53_3_35s.png',
	103	+ con: {
	104	+ imgSrc: 'client/resources/img/31img40_s.png',
	105	+ titleEm: 'l',
	106	+ title: 'og',
	107	+ boxText: '명',
	108	+ subtitle: '통나무',
	109	+ },
	110	+ },
	111	+ {
	112	+ imgSrc1: 'client/resources/img/img53_9_35s.png',
	113	+ imgSrc2: 'client/resources/img/img53_4_35s.png',
	114	+ con: {
	115	+ imgSrc: 'client/resources/img/img41_s.png',
	116	+ titleEm: 'g',
	117	+ title: 'uitar',
	118	+ boxText: '명',
	119	+ subtitle: '기타',
	120	+ },
	121	+ },
	122	+ {
	123	+ imgSrc1: 'client/resources/img/img53_10_35s.png',
	124	+ imgSrc2: 'client/resources/img/img53_5_35s.png',
	125	+ con: {
	126	+ imgSrc: 'client/resources/img/img76_41s.png',
	127	+ titleEm: 'w',
	128	+ title: 'ater melon',
	129	+ boxText: '명',
	130	+ subtitle: '수박',
	131	+ },
	132	+ },
	133	+ ],
	134	+ currentCon: {
	135	+ imgSrc: 'client/resources/img/img54_s.png',
	136	+ titleEm: 'c',
	137	+ title: 'loud',
	138	+ boxText: '명',
	139	+ subtitle: '구름',
	140	+ },
	141	+ selectedIndex: 0,
	142	+ timer: '00',
	143	+ intervalId: null,
150	144
151		- isRecording: false, // 녹음 중 여부
152		- mediaRecorder: null,
153		- audioChunks: [], // 녹음된 오디오 데이터
154		- audioBlob: null, // 오디오 Blob 객체
155		- stream: null, // MediaStream 객체
	145	+ isRecording: false, // 녹음 중 여부
	146	+ mediaRecorder: null,
	147	+ audioChunks: [], // 녹음된 오디오 데이터
	148	+ audioBlob: null, // 오디오 Blob 객체
	149	+ stream: null, // MediaStream 객체
156	150
157		- path: mdiStop,
158		- nowWord: 'cloud',
159		- };
160		- },
161		- methods: {
162		- goToPage(page) {
163		- this.$router.push({ name: page });
164		- },
165		- updateContent(index) {
166		- this.selectedIndex = index;
167		- this.currentCon = this.items[index].con;
168		- this.startTimer();
169		- },
170		- startTimer() {
171		- if (this.intervalId) {
172		- clearInterval(this.intervalId);
173		- }
174		- this.timer = 5;
175		- this.intervalId = setInterval(() => {
176		- if (this.timer > 0) {
177		- this.timer--;
178		- } else {
179		- clearInterval(this.intervalId);
180		- }
181		- }, 1000);
182		- },
183		- // 녹음 시작/중지 토글
184		- async toggleRecording() {
185		- if (this.isRecording) {
186		- console.log('녹음 그만!');
187		- this.stopRecording(); // 녹음 중이면 중지
188		- } else {
189		- console.log('녹음 시작!');
190		- await this.startRecording(); // 녹음 중이 아니면 녹음 시작
191		- }
192		- },
193		- // 녹음 시작
194		- async startRecording() {
195		- this.audioChunks = []; // 오디오 초기화
196		- this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
197		- this.mediaRecorder = new MediaRecorder(this.stream);
198		- this.mediaRecorder.ondataavailable = (event) => {
199		- this.audioChunks.push(event.data); // 녹음 데이터 저장
200		- };
201		- this.mediaRecorder.onstop = () => {
202		- this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
	151	+ path: mdiStop,
	152	+ nowWord: 'cloud',
	153	+ };
	154	+ },
	155	+ methods: {
	156	+ goToPage(page) {
	157	+ this.$router.push({ name: page });
	158	+ },
	159	+ updateContent(index) {
	160	+ this.selectedIndex = index;
	161	+ this.currentCon = this.items[index].con;
	162	+ this.startTimer();
	163	+ },
	164	+ startTimer() {
	165	+ if (this.intervalId) {
	166	+ clearInterval(this.intervalId);
	167	+ }
	168	+ this.timer = 5;
	169	+ this.intervalId = setInterval(() => {
	170	+ if (this.timer > 0) {
	171	+ this.timer--;
	172	+ } else {
	173	+ clearInterval(this.intervalId);
	174	+ }
	175	+ }, 1000);
	176	+ },
	177	+ // 녹음 시작/중지 토글
	178	+ async toggleRecording() {
	179	+ if (this.isRecording) {
	180	+ console.log('녹음 그만!');
	181	+ this.stopRecording(); // 녹음 중이면 중지
	182	+ } else {
	183	+ console.log('녹음 시작!');
	184	+ await this.startRecording(); // 녹음 중이 아니면 녹음 시작
	185	+ }
	186	+ },
	187	+ // 녹음 시작
	188	+ async startRecording() {
	189	+ this.audioChunks = []; // 오디오 초기화
	190	+ this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
	191	+ this.mediaRecorder = new MediaRecorder(this.stream);
	192	+ this.mediaRecorder.ondataavailable = (event) => {
	193	+ this.audioChunks.push(event.data); // 녹음 데이터 저장
	194	+ };
	195	+ this.mediaRecorder.onstop = () => {
	196	+ this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
203	197
204		- /******************************/
205		- // this.audioURL = URL.createObjectURL(this.audioBlob); // 오디오 URL 생성
206		- // console.log('Audio URL:', this.audioURL);
207		- /******************************/
	198	+ /******************************/
	199	+ // this.audioURL = URL.createObjectURL(this.audioBlob); // 오디오 URL 생성
	200	+ // console.log('Audio URL:', this.audioURL);
	201	+ /******************************/
208	202
209		- console.log('Recorded Audio Blob:', this.audioBlob); // 콘솔에 Blob 확인
210		- this.sendAudioToServer(); // 서버로 오디오 전송
211		- };
212		- this.mediaRecorder.start(); // 녹음 시작
213		- this.isRecording = true; // 녹음 상태 변경
214		- },
	203	+ console.log('Recorded Audio Blob:', this.audioBlob); // 콘솔에 Blob 확인
	204	+ this.sendAudioToServer(); // 서버로 오디오 전송
	205	+ };
	206	+ this.mediaRecorder.start(); // 녹음 시작
	207	+ this.isRecording = true; // 녹음 상태 변경
	208	+ },
215	209
216		- // 녹음 중지
217		- stopRecording() {
218		- this.mediaRecorder.stop(); // 녹음 중단
	210	+ // 녹음 중지
	211	+ stopRecording() {
	212	+ this.mediaRecorder.stop(); // 녹음 중단
219	213
220		- if (this.stream) {
221		- this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지
222		- }
	214	+ if (this.stream) {
	215	+ this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지
	216	+ }
223	217
224		- this.isRecording = false; // 녹음 상태 변경
225		- },
	218	+ this.isRecording = false; // 녹음 상태 변경
	219	+ },
226	220
227		- // 오디오 전송
228		- async sendAudioToServer() {
229		- const formData = new FormData();
230		- formData.append('file', this.audioBlob, 'recording.wav');
231		- try {
232		- const response = await axios.post('/api/speechToText.json', formData, {
233		- headers: {
234		- 'Content-Type': 'multipart/form-data',
235		- },
236		- });
	221	+ // 오디오 전송
	222	+ async sendAudioToServer() {
	223	+ const formData = new FormData();
	224	+ formData.append('file', this.audioBlob, 'recording.wav');
	225	+ try {
	226	+ const response = await axios.post('/api/speechToText.json', formData, {
	227	+ headers: {
	228	+ 'Content-Type': 'multipart/form-data',
	229	+ },
	230	+ });
237	231
238		- this.transcription = response.data.trim().toLowerCase();
239		- this.nowWord = this.nowWord.toLowerCase();
	232	+ this.transcription = response.data.trim().toLowerCase();
	233	+ this.nowWord = this.nowWord.toLowerCase();
240	234
241		- console.log('지금 단어: ', this.nowWord);
242		- console.log('녹음 결과: ', this.transcription);
	235	+ console.log('지금 단어: ', this.nowWord);
	236	+ console.log('녹음 결과: ', this.transcription);
243	237
244		- if (this.transcription === this.nowWord) {
245		- this.$refs.speakText.innerText = '정답입니다! 잘했어요';
246		- } else {
247		- this.$refs.speakText.innerText = '다시 말해보세요!';
248		- }
249		- } catch (error) {
250		- console.log('파일 전송 실패: ', error);
251		- }
252		- },
253		- },
254		- watch: {
255		- transcription: null, // 서버에서 받아온 텍스트 결과
256		- currentCon: {
257		- handler(newValue) {
258		- // Update nowWord when currentCon changes
259		- this.nowWord = newValue.titleEm + newValue.title;
260		- },
261		- deep: true, // Watch for deep changes in currentCon
262		- },
263		- },
264		- beforeDestroy() {
265		- if (this.intervalId) {
266		- clearInterval(this.intervalId);
267		- }
268		- },
	238	+ if (this.transcription === this.nowWord) {
	239	+ this.$refs.speakText.innerText = '정답입니다! 잘했어요';
	240	+ } else {
	241	+ this.$refs.speakText.innerText = '다시 말해보세요!';
	242	+ }
	243	+ } catch (error) {
	244	+ console.log('파일 전송 실패: ', error);
	245	+ }
	246	+ },
	247	+ },
	248	+ watch: {
	249	+ transcription: null, // 서버에서 받아온 텍스트 결과
	250	+ currentCon: {
	251	+ handler(newValue) {
	252	+ // Update nowWord when currentCon changes
	253	+ this.nowWord = newValue.titleEm + newValue.title;
	254	+ },
	255	+ deep: true, // Watch for deep changes in currentCon
	256	+ },
	257	+ },
	258	+ beforeDestroy() {
	259	+ if (this.intervalId) {
	260	+ clearInterval(this.intervalId);
	261	+ }
	262	+ },
269	263	};
270	264	</script>
271	265
272	266	<style scoped>
273	267	.popTxt img {
274		- position: absolute;
275		- top: 0;
276		- left: 0;
	268	+ position: absolute;
	269	+ top: 0;
	270	+ left: 0;
277	271	}
278		-.box23{
279		- display: flex;
	272	+
	273	+.box23 {
	274	+ display: flex;
280	275	align-items: center;
281	276	gap: 80px;
282	277	justify-content: center;
283	278	}
	279	+
	280	+.mic-btn {
	281	+ cursor: pointer;
	282	+}
	283	+
	284	+.mic-btn.notRecording {
	285	+ background-image: none;
	286	+ cursor: pointer;
	287	+}
	288	+
	289	+.speakText {
	290	+ background-color: #fff8e9;
	291	+ border: 0;
	292	+}
	293	+
	294	+.speakText span {
	295	+ font-size: 28px;
	296	+}
284	297	</style>

Delete comment