Commit @c575d0206c8b6658b6191da0b127c7631d6f7e7b

홍아랑 2024-08-16

240816 정다정 단어장 학습 종료 버튼 추가

@c575d0206c8b6658b6191da0b127c7631d6f7e7b

2d6a0a3

c575d02

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

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

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


   <div id="Chapter1_1" 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>
+        <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
+      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" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <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">STEP 2 - 단어로 공부하는 영어</p>
         <div class="flex align-center mb30">

           <div class="vocaGroup">
             <div class="flex justify-between mb80">
               <article class="flex align-center">
-                <div class="imgGroup mr30"><img src="../../../../resources/img/img2_1.png" data-num="1" style="width: 200px;
-"></div>
+                <div class="imgGroup mr30">
+                  <img
+                    src="../../../../resources/img/img2_1.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-family')">
+                  <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-family')"
+                    />
                   </button>
-                  <audio id="audio-family" src="client/resources/audio/family.wav" preload="auto"></audio>
+                  <audio
+                    id="audio-family"
+                    src="client/resources/audio/family.wav"
+                    preload="auto"
+                  ></audio>
                   <div>
                     <h3>family</h3>
                     <div class="flex align-center mt10">

                 </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="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
+                    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>
+                  <audio
+                    id="audio-bank"
+                    src="client/resources/audio/bank.wav"
+                    preload="auto"
+                  ></audio>
                   <div>
                     <h3>bank</h3>
                     <div class="flex align-center mt10">

             </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="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
+                    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>
+                  <audio
+                    id="audio-love"
+                    src="client/resources/audio/love.wav"
+                    preload="auto"
+                  ></audio>
                   <div>
                     <h3>love</h3>
                     <div class="flex align-center mt10">

                 </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="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
+                    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>
+                  <audio
+                    id="audio-police"
+                    src="client/resources/audio/police.wav"
+                    preload="auto"
+                  ></audio>
                   <div>
                     <h3>police</h3>
                     <div class="flex align-center mt10">

           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter2_3')">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
   </div>
 </template>

 <script>
 export default {
   data() {
-    return {
-    }
+    return {};
   },
   methods: {
+    complete() {
+      this.$router.push({ name: "Dashboard", query: { value: 2 } });
+    },
     goToPage(page) {
       this.$router.push({ name: page });
-    }, playAudio(audioId) {
+    },
+    playAudio(audioId) {
       const audio = document.getElementById(audioId);
       if (audio) {
         audio.play();

       }
     },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
 .grid-container {

   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
 }
-</style>
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+}
+</style>

2d6a0a3

c575d02

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

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

+++ client/views/pages/main/Chapter/Chapter2_2.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 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"
+      style="justify-content: space-between"
+    >
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
       </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>
+      <button class="completeBtn" @click="complete">학습 종료</button>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="goToPage('Chapter2_3')">
+        <img src="../../../../resources/img/left.png" alt="" />
       </div>
-      <div class="flex justify-between align-center">
-         <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">STEP 2 - 단어로 공부하는 영어</p>
-            <div class="flex align-center mb30" style="justify-content: space-between;margin-right: 9em;">
-               <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
-               <div class="time-bg">
-                  <div>
-                     <div class="time">
-                        <p class="second">{{ timer }}</p>
-                        <p class="text">sec</p>
-                     </div>
-                  </div>
-               </div>
-               <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+      <div class="content title-box">
+        <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
+        <div
+          class="flex align-center mb30"
+          style="justify-content: space-between; margin-right: 9em"
+        >
+          <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
+          <div class="time-bg">
+            <div>
+              <div class="time">
+                <p class="second">{{ timer }}</p>
+                <p class="text">sec</p>
+              </div>
+            </div>
+          </div>
+          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
           </button> -->
-            </div>
+        </div>
 
-
-            <div class="imgGroup">
-               <div class="flex justify-center" style="gap: 90px;">
-                  <button class="popTxt" v-for="(item, index) in items" :key="index">
-                     <div class="listenGroup">
-                        <img :src="item.imgSrc1">
-                        <p class="textbox"><img :src="item.imgSrc"></p>
-                     </div>
-                     <div class="listenGroup" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        <img :src="item.imgSrc2">
-                        <p class="title4 textbox">{{ item.title }}</p>
-                     </div>
-                  </button>
-               </div>
-            </div>
-         </div>
-         <div class="next-btn" @click="goToPage('Chapter2_9')"><img src="../../../../resources/img/right.png" alt="">
-         </div>
+        <div class="imgGroup">
+          <div class="flex justify-center" style="gap: 90px">
+            <button class="popTxt" v-for="(item, index) in items" :key="index">
+              <div class="listenGroup">
+                <img :src="item.imgSrc1" />
+                <p class="textbox"><img :src="item.imgSrc" /></p>
+              </div>
+              <div
+                class="listenGroup"
+                :style="{
+                  display: item.isSecondImageVisible ? 'block' : 'none',
+                }"
+              >
+                <img :src="item.imgSrc2" />
+                <p class="title4 textbox">{{ item.title }}</p>
+              </div>
+            </button>
+          </div>
+        </div>
       </div>
-   </div>
+      <div class="next-btn" @click="goToPage('Chapter2_9')">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
+    </div>
+  </div>
 </template>
-
 
 <script>
 export default {
-   data() {
-      return {
-         items: [
-            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img77_41s.png', isSecondImageVisible: false, title: 'america' },
-            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img47_s.png', isSecondImageVisible: false, title: 'airplane' },
-            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img75_41s.png', isSecondImageVisible: false, title: 'cat' },
-            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img74_41s.png', isSecondImageVisible: false, title: 'mountain' }
-         ],
-         timer: 0,
-         intervalId: null,
-         currentIndex: 0,
-      };
-   },
-   methods: {
-      goToPage(page) {
-         this.$router.push({ name: page });
-      },
-      toggleImage(index) {
-         this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
-      },
-      startTimer() {
-         // 현재 실행 중인 타이머가 있다면 정리
-         if (this.intervalId) {
+  data() {
+    return {
+      items: [
+        {
+          imgSrc1: "client/resources/img/img49_s.png",
+          imgSrc2: "client/resources/img/img50_s.png",
+          imgSrc: "client/resources/img/img77_41s.png",
+          isSecondImageVisible: false,
+          title: "america",
+        },
+        {
+          imgSrc1: "client/resources/img/img49_s.png",
+          imgSrc2: "client/resources/img/img50_s.png",
+          imgSrc: "client/resources/img/img47_s.png",
+          isSecondImageVisible: false,
+          title: "airplane",
+        },
+        {
+          imgSrc1: "client/resources/img/img49_s.png",
+          imgSrc2: "client/resources/img/img50_s.png",
+          imgSrc: "client/resources/img/img75_41s.png",
+          isSecondImageVisible: false,
+          title: "cat",
+        },
+        {
+          imgSrc1: "client/resources/img/img49_s.png",
+          imgSrc2: "client/resources/img/img50_s.png",
+          imgSrc: "client/resources/img/img74_41s.png",
+          isSecondImageVisible: false,
+          title: "mountain",
+        },
+      ],
+      timer: 0,
+      intervalId: null,
+      currentIndex: 0,
+    };
+  },
+  methods: {
+    complete() {
+      this.$router.push({ name: "Dashboard", query: { value: 2 } });
+    },
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    toggleImage(index) {
+      this.items[index].isSecondImageVisible =
+        !this.items[index].isSecondImageVisible;
+    },
+    startTimer() {
+      // 현재 실행 중인 타이머가 있다면 정리
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+
+      // 타이머 및 이미지 토글 상태 초기화
+      this.timer = 0;
+      this.currentIndex = 0; // 현재 타이머 인덱스를 추적
+
+      // 시작 타이머 설정
+      this.runTimer();
+    },
+
+    runTimer() {
+      // 반복 타이머 설정
+      this.intervalId = setInterval(() => {
+        if (this.currentIndex == this.items.length) return;
+        if (this.timer < 3) {
+          this.timer++;
+        } else {
+          // 타이머가 끝났을 때, 다음 타이머 설정
+          this.timer = 0;
+
+          if (this.currentIndex < this.items.length) {
+            // 현재 인덱스에 해당하는 아이템으로 이미지 토글
+            this.toggleImage(this.currentIndex);
+            this.currentIndex++;
+          } else {
+            // 모든 타이머가 완료되었으면 타이머 정리
             clearInterval(this.intervalId);
-         }
-
-         // 타이머 및 이미지 토글 상태 초기화
-         this.timer = 0;
-         this.currentIndex = 0; // 현재 타이머 인덱스를 추적
-
-         // 시작 타이머 설정
-         this.runTimer();
-      },
-
-      runTimer() {
-         // 반복 타이머 설정
-         this.intervalId = setInterval(() => {
-            if (this.currentIndex == this.items.length)
-               return;
-            if (this.timer < 3) {
-               this.timer++;
-            } else {
-               // 타이머가 끝났을 때, 다음 타이머 설정
-               this.timer = 0;
-
-               if (this.currentIndex < this.items.length) {
-                  // 현재 인덱스에 해당하는 아이템으로 이미지 토글
-                  this.toggleImage(this.currentIndex);
-                  this.currentIndex++;
-               } else {
-                  // 모든 타이머가 완료되었으면 타이머 정리
-                  clearInterval(this.intervalId);
-                  this.intervalId = null;
-                  console.log('모든 타이머가 완료되었습니다.');
-               }
-            }
-         }, 1000);
-      },
-   },
-   mounted() {
-      this.startTimer()
-   }
-}
-
+            this.intervalId = null;
+            console.log("모든 타이머가 완료되었습니다.");
+          }
+        }
+      }, 1000);
+    },
+  },
+  mounted() {
+    this.startTimer();
+  },
+};
 </script>
 <style scoped>
 .popTxt {
-   width: 295px;
-   height: 406px;
+  width: 295px;
+  height: 406px;
 }
 
 .popTxt div:last-child img {
-   position: absolute;
-   top: 0;
-   left: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .listenGroup .textbox {
-   top: 50%;
-   left: 50%;
+  top: 50%;
+  left: 50%;
 }
 
 .questionBox {
-   justify-content: space-between;
-   align-items: flex-start;
+  justify-content: space-between;
+  align-items: flex-start;
 }
-</style>
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+}
+</style>

2d6a0a3

c575d02

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 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>
-        <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 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>
+      </router-link>
     </div>
+    <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" @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 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>
 </template>
 
 <script>
-import axios from 'axios';
-import { mdiStop } from '@mdi/js';
+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',
-        };
+      path: mdiStop,
+      nowWord: "cloud",
+    };
+  },
+  methods: {
+    complete() {
+      this.$router.push({ name: "Dashboard", query: { value: 2 } });
     },
-    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);
-                /******************************/
-
-                console.log('Recorded Audio Blob:', this.audioBlob); // 콘솔에 Blob 확인
-                this.sendAudioToServer(); // 서버로 오디오 전송
-            };
-            this.mediaRecorder.start(); // 녹음 시작
-            this.isRecording = true; // 녹음 상태 변경
-        },
-
-        // 녹음 중지
-        stopRecording() {
-            this.mediaRecorder.stop(); // 녹음 중단
-
-            if (this.stream) {
-                this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지
-            }
-
-            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',
-                    },
-                });
-
-                this.transcription = response.data.trim().toLowerCase();
-                this.nowWord = this.nowWord.toLowerCase();
-
-                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);
-            }
-        },
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    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
-        },
+    updateContent(index) {
+      this.selectedIndex = index;
+      this.currentCon = this.items[index].con;
+      this.startTimer();
     },
-    beforeDestroy() {
-        if (this.intervalId) {
-            clearInterval(this.intervalId);
+    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);
+        /******************************/
+
+        console.log("Recorded Audio Blob:", this.audioBlob); // 콘솔에 Blob 확인
+        this.sendAudioToServer(); // 서버로 오디오 전송
+      };
+      this.mediaRecorder.start(); // 녹음 시작
+      this.isRecording = true; // 녹음 상태 변경
+    },
+
+    // 녹음 중지
+    stopRecording() {
+      this.mediaRecorder.stop(); // 녹음 중단
+
+      if (this.stream) {
+        this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지
+      }
+
+      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",
+          },
+        });
+
+        this.transcription = response.data.trim().toLowerCase();
+        this.nowWord = this.nowWord.toLowerCase();
+
+        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);
+    }
+  },
 };
 </script>
 
 <style scoped>
 .popTxt img {
-    position: absolute;
-    top: 0;
-    left: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .box23 {
-    display: flex;
-    align-items: center;
-    gap: 80px;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  gap: 80px;
+  justify-content: center;
 }
 
 .mic-btn {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .mic-btn.notRecording {
-    background-image: none;
-    cursor: pointer;
+  background-image: none;
+  cursor: pointer;
 }
 
 .speakText {
-    background-color: #fff8e9;
-    border: 0;
+  background-color: #fff8e9;
+  border: 0;
 }
 
 .speakText span {
-    font-size: 28px;
+  font-size: 28px;
+}
+
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
 }
 </style>

2d6a0a3

c575d02

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

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

+++ client/views/pages/main/Chapter/Chapter2_4.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 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"
+      style="justify-content: space-between"
+    >
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
       </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>
+      <button class="completeBtn" @click="complete">학습 종료</button>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="goToPage('Chapter2_9')">
+        <img src="../../../../resources/img/left.png" alt="" />
       </div>
-      <div class="flex justify-between align-center">
-         <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">STEP 2 - 단어로 공부하는 영어</p>
-            <div class="flex align-center mb30">
-               <p class="subtitle2 mr20">다음을 듣고 맞는 단어를 선택하세요.</p>
-               <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+      <div class="content title-box">
+        <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">
-
-               <div class="flex justify-center">
-                  <div class="listenGroup  flex" style="gap: 60px;">
-                     <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;">
-                        <div class="textbox">
-                           <div style="height: 80%; line-height: 200px;"> <img :src="item.imgSrc" alt=""></div>
-                           <p class="subtitle3" style="height: 20%;">{{ item.title }}</p>
-                        </div>
-                     </button>
+        <div class="imgGroup">
+          <div class="flex justify-center">
+            <div class="listenGroup flex" style="gap: 60px">
+              <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"
+                />
+                <div class="textbox">
+                  <div style="height: 80%; line-height: 200px">
+                    <img :src="item.imgSrc" alt="" />
                   </div>
-               </div>
-               <div class="listen-btn mt50">
-                  <img src="client/resources/img/btn10_s.png" alt="Listen" @click="playAudio">
-               </div>
-
-               <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>
+                  <p class="subtitle3" style="height: 20%">{{ item.title }}</p>
+                </div>
+              </button>
             </div>
-         </div>
-         <div class="next-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/right.png" alt="">
-         </div>
+          </div>
+          <div class="listen-btn mt50">
+            <img
+              src="client/resources/img/btn10_s.png"
+              alt="Listen"
+              @click="playAudio"
+            />
+          </div>
+
+          <audio
+            id="audio-player"
+            src="client/resources/audio/bank.wav"
+            preload="auto"
+          ></audio>
+        </div>
       </div>
-   </div>
+      <div class="next-btn" @click="goToPage('Chapter2_8')">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
+import SvgIcon from "@jamescoyle/vue-icon";
 export default {
-   data() {
-      return {
-         items: [
-            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img59_36s.png', title: 'apple' },
-            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img2_4.png', title: 'bank' },
-            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img57_36s.png', title: 'car' },
-            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img56_36s.png', title: 'guitar' },
-         ],
-         selectedIndex: 0,
-      };
-   },
-   methods: {
-      goToPage(page) {
-         this.$router.push({ name: page });
-      },
-      updateContent(index) {
-         this.selectedIndex = index;
-         this.currentCon = this.items[index].con;
-         setTimeout(() => {
-            if(index==1){
-               alert("정답입니다!")
-            }else{
-               alert("오답입니다!")
-            }
-         },0)
-        
-      }, playAudio() {
-         const audio = document.getElementById('audio-player');
-         audio.play();
-         console.log("playing")
-      }
-
-
-
-   },
-   components: {
-      SvgIcon
-   },
-}
+  data() {
+    return {
+      items: [
+        {
+          imgSrc1: "client/resources/img/img61_36s.png",
+          imgSrc2: "client/resources/img/img62_36s.png",
+          imgSrc: "client/resources/img/img59_36s.png",
+          title: "apple",
+        },
+        {
+          imgSrc1: "client/resources/img/img61_36s.png",
+          imgSrc2: "client/resources/img/img62_36s.png",
+          imgSrc: "client/resources/img/img2_4.png",
+          title: "bank",
+        },
+        {
+          imgSrc1: "client/resources/img/img61_36s.png",
+          imgSrc2: "client/resources/img/img62_36s.png",
+          imgSrc: "client/resources/img/img57_36s.png",
+          title: "car",
+        },
+        {
+          imgSrc1: "client/resources/img/img61_36s.png",
+          imgSrc2: "client/resources/img/img62_36s.png",
+          imgSrc: "client/resources/img/img56_36s.png",
+          title: "guitar",
+        },
+      ],
+      selectedIndex: 0,
+    };
+  },
+  methods: {
+    complete() {
+      this.$router.push({ name: "Dashboard", query: { value: 2 } });
+    },
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    updateContent(index) {
+      this.selectedIndex = index;
+      this.currentCon = this.items[index].con;
+      setTimeout(() => {
+        if (index == 1) {
+          alert("정답입니다!");
+        } else {
+          alert("오답입니다!");
+        }
+      }, 0);
+    },
+    playAudio() {
+      const audio = document.getElementById("audio-player");
+      audio.play();
+      console.log("playing");
+    },
+  },
+  components: {
+    SvgIcon,
+  },
+};
 </script>
 
 <style scoped>
 .listenGroup {
-   height: 305px;
+  height: 305px;
 }
 
 .listenGroup button {
-   position: relative;
+  position: relative;
 }
 
 .listenGroup .textbox {
-   width: 184px;
-   height: 206px;
-   left: 46%;
-   top: 43%;
+  width: 184px;
+  height: 206px;
+  left: 46%;
+  top: 43%;
 }
 
 .look-text {
-   bottom: 50px;
+  bottom: 50px;
 }
 
 .btnGroup {
-   width: 1060px;
-   height: 340px;
+  width: 1060px;
+  height: 340px;
 }
 
 .popTxt {
-   width: 216px;
+  width: 216px;
 }
 
-.popTxt>img {
-   position: absolute;
-   top: 0;
-   left: 0;
+.popTxt > img {
+  position: absolute;
+  top: 0;
+  left: 0;
 }
-</style>
+
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+}
+</style>

2d6a0a3

c575d02

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

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

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


   <div id="Chapter1_1" 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>
+        <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
+      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" @click="goToPage('Chapter2_2')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter2_2')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
       <div class="content title-box">
-        <div style="display: flex; justify-content: space-between;">
+        <div style="display: flex; justify-content: space-between">
           <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
-          <button id="returnButton" @click="returnPage" style="margin: 4rem;">
-            <img src="../../../../resources/img/btn_return_50x50.png" alt="">
+          <button id="returnButton" @click="returnPage" style="margin: 4rem">
+            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
             <p>되돌리기</p>
           </button>
         </div>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">앗! 잉크가 쏟아졌어! 지우개로 잉크를 지워줘!</p>
+          <p class="subtitle2 mr20">
+            앗! 잉크가 쏟아졌어! 지우개로 잉크를 지워줘!
+          </p>
         </div>
 
         <div class="text-ct">
           <div class="dropGroup flex align-center justify-center">
-            <div style="position: relative;">
-              <img src="../../../../resources/img/img72_41s.png" alt="" style="width: 93%;">
+            <div style="position: relative">
+              <img
+                src="../../../../resources/img/img72_41s.png"
+                alt=""
+                style="width: 93%"
+              />
               <div class="vocaGroup">
                 <div class="flex justify-between mb80">
                   <article class="flex align-center">
                     <div class="imgGroup mr30">
-                      <img src="../../../../resources/img/img74_41s.png" data-num="1" class="ink" />
+                      <img
+                        src="../../../../resources/img/img74_41s.png"
+                        data-num="1"
+                        class="ink"
+                      />
                     </div>
                     <div class="flex align-start">
                       <div>

                   </article>
                   <article class="flex align-center">
                     <div class="imgGroup mr30">
-                      <img src="../../../../resources/img/img75_41s.png" data-num="2" class="ink" />
+                      <img
+                        src="../../../../resources/img/img75_41s.png"
+                        data-num="2"
+                        class="ink"
+                      />
                     </div>
                     <div class="flex align-start">
                       <div>

                 <div class="flex justify-between">
                   <article class="flex align-center">
                     <div class="imgGroup mr30">
-                      <img src="../../../../resources/img/img76_41s.png" data-num="3" class="ink" />
+                      <img
+                        src="../../../../resources/img/img76_41s.png"
+                        data-num="3"
+                        class="ink"
+                      />
                     </div>
                     <div class="flex align-start">
                       <div>

                   </article>
                   <article class="flex align-center">
                     <div class="imgGroup mr30">
-                      <img src="../../../../resources/img/img77_41s.png" data-num="4" class="ink" />
+                      <img
+                        src="../../../../resources/img/img77_41s.png"
+                        data-num="4"
+                        class="ink"
+                      />
                     </div>
                     <div class="flex align-start">
                       <div>

                 </div>
               </div>
               <div class="textbox">
-                <button id="eraser1" class="dropzone" style="left: 141px; top: 44px;">
+                <button
+                  id="eraser1"
+                  class="dropzone"
+                  style="left: 141px; top: 44px"
+                >
                   <img src="../../../../resources/img/img78_41s.png" alt="" />
                 </button>
-                <button id="eraser2" class="dropzone" style="left: 200px; bottom: 46px;">
+                <button
+                  id="eraser2"
+                  class="dropzone"
+                  style="left: 200px; bottom: 46px"
+                >
                   <img src="../../../../resources/img/img79_41s.png" alt="" />
                 </button>
-                <button id="eraser3" class="dropzone" style="right: 237px; top: 114px;">
+                <button
+                  id="eraser3"
+                  class="dropzone"
+                  style="right: 237px; top: 114px"
+                >
                   <img src="../../../../resources/img/img80_41s.png" alt="" />
                 </button>
-                <button id="eraser4" class="dropzone" style="right: 159px; bottom: 5px;">
+                <button
+                  id="eraser4"
+                  class="dropzone"
+                  style="right: 159px; bottom: 5px"
+                >
                   <img src="../../../../resources/img/img81_41s.png" alt="" />
                 </button>
               </div>

           </div>
           <div class="dragGroup">
             <div>
-              <article style="left: 83px; top: 69%;">
-                <button id="eraser" draggable="true" @dragstart="handleDragStart">
+              <article style="left: 83px; top: 69%">
+                <button
+                  id="eraser"
+                  draggable="true"
+                  @dragstart="handleDragStart"
+                >
                   <img src="../../../../resources/img/img73_41s.png" alt="" />
                 </button>
               </article>

           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter2_4')">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
   </div>
 </template>
-
 
 <script>
 export default {

     };
   },
   methods: {
+    complete() {
+      this.$router.push({ name: "Dashboard", query: { value: 2 } });
+    },
     goToPage(page) {
       this.$router.push({ name: page });
     },
     handleDragStart(event) {
       this.draggedElementId = event.target.id; // 드래그한 요소의 ID를 저장
-      event.dataTransfer.setData('text/plain', this.draggedElementId);
+      event.dataTransfer.setData("text/plain", this.draggedElementId);
     },
     handleDragOver(event) {
       event.preventDefault(); // 드롭을 허용

       event.preventDefault();
 
       // 드롭된 영역이 버튼인지 확인
-      const dropZone = event.target.closest('button.dropzone');
+      const dropZone = event.target.closest("button.dropzone");
 
       if (dropZone) {
         // 드롭이 이루어진 영역이 버튼일 때만 처리
-        dropZone.querySelector('img').style.display = 'none'; // 잉크를 숨깁니다
+        dropZone.querySelector("img").style.display = "none"; // 잉크를 숨깁니다
       }
 
       // 드래그한 요소를 원래 위치로 복원
       const draggedElement = document.getElementById(this.draggedElementId);
       if (draggedElement) {
-        draggedElement.style.visibility = 'visible';
-        draggedElement.style.position = '';
-        draggedElement.style.top = '';
-        draggedElement.style.left = '';
+        draggedElement.style.visibility = "visible";
+        draggedElement.style.position = "";
+        draggedElement.style.top = "";
+        draggedElement.style.left = "";
       }
 
       this.draggedElementId = null; // 드래그 상태 초기화

   },
   mounted() {
     // 드래그 가능한 영역에 드래그 오버 및 드롭 이벤트를 추가합니다
-    document.querySelectorAll('.dropzone').forEach(button => {
-      button.addEventListener('dragover', this.handleDragOver);
-      button.addEventListener('drop', this.handleDrop);
+    document.querySelectorAll(".dropzone").forEach((button) => {
+      button.addEventListener("dragover", this.handleDragOver);
+      button.addEventListener("drop", this.handleDrop);
     });
-  }
-}
+  },
+};
 </script>
-
-
 
 <style scoped>
 .vocaGroup {

 .ink {
   cursor: pointer;
 }
-</style>
+
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+}
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,15 +2,25 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</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>
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
	14	+ <div>
	15	+ <span class="title mr40">1. Hello WORLD</span>
	16	+ <span class="subtitle">my name is dd</span>
	17	+ </div>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
11	19	</div>
12	20	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/left.png" alt=""></div>
	21	+ <div class="pre-btn" @click="goToPage('Chapter1_3')">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
	23	+ </div>
14	24	<div class="content title-box">
15	25	<p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
16	26	<div class="flex align-center mb30">
...	...	@@ -21,13 +31,31 @@
21	31	<div class="vocaGroup">
22	32	<div class="flex justify-between mb80">
23	33	<article class="flex align-center">
24		- <div class="imgGroup mr30"><img src="../../../../resources/img/img2_1.png" data-num="1" style="width: 200px;
25		-"></div>
	34	+ <div class="imgGroup mr30">
	35	+ <img
	36	+ src="../../../../resources/img/img2_1.png"
	37	+ data-num="1"
	38	+ style="width: 200px"
	39	+ />
	40	+ </div>
26	41	<div class="flex align-start">
27		- <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
28		- <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-family')">
	42	+ <button
	43	+ class="listen-btn mr30"
	44	+ data-video="1"
	45	+ tabindex="0"
	46	+ aria-label="음성 재생"
	47	+ >
	48	+ <img
	49	+ src="../../../../resources/img/btn10_s.png"
	50	+ data-num="1"
	51	+ @click="playAudio('audio-family')"
	52	+ />
29	53	</button>
30		- <audio id="audio-family" src="client/resources/audio/family.wav" preload="auto"></audio>
	54	+ <audio
	55	+ id="audio-family"
	56	+ src="client/resources/audio/family.wav"
	57	+ preload="auto"
	58	+ ></audio>
31	59	<div>
32	60	<h3>family</h3>
33	61	<div class="flex align-center mt10">
...	...	@@ -38,13 +66,31 @@
38	66	</div>
39	67	</article>
40	68	<article class="flex align-center">
41		- <div class="imgGroup mr30"><img src="../../../../resources/img/img2_4.png" data-num="1" style="width: 200px;
42		-"></div>
	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>
43	76	<div class="flex align-start">
44		- <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
45		- <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-bank')">
	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	+ />
46	88	</button>
47		- <audio id="audio-bank" src="client/resources/audio/bank.wav" preload="auto"></audio>
	89	+ <audio
	90	+ id="audio-bank"
	91	+ src="client/resources/audio/bank.wav"
	92	+ preload="auto"
	93	+ ></audio>
48	94	<div>
49	95	<h3>bank</h3>
50	96	<div class="flex align-center mt10">
...	...	@@ -57,13 +103,31 @@
57	103	</div>
58	104	<div class="flex justify-between">
59	105	<article class="flex align-center">
60		- <div class="imgGroup mr30"><img src="../../../../resources/img/img2_2.png" data-num="1" style="width: 200px;
61		-"></div>
	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>
62	113	<div class="flex align-start">
63		- <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
64		- <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-love')">
	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	+ />
65	125	</button>
66		- <audio id="audio-love" src="client/resources/audio/love.wav" preload="auto"></audio>
	126	+ <audio
	127	+ id="audio-love"
	128	+ src="client/resources/audio/love.wav"
	129	+ preload="auto"
	130	+ ></audio>
67	131	<div>
68	132	<h3>love</h3>
69	133	<div class="flex align-center mt10">
...	...	@@ -74,13 +138,31 @@
74	138	</div>
75	139	</article>
76	140	<article class="flex align-center">
77		- <div class="imgGroup mr30"><img src="../../../../resources/img/img2_3.png" data-num="1" style="width: 200px;
78		-"></div>
	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>
79	148	<div class="flex align-start">
80		- <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
81		- <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-police')">
	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	+ />
82	160	</button>
83		- <audio id="audio-police" src="client/resources/audio/police.wav" preload="auto"></audio>
	161	+ <audio
	162	+ id="audio-police"
	163	+ src="client/resources/audio/police.wav"
	164	+ preload="auto"
	165	+ ></audio>
84	166	<div>
85	167	<h3>police</h3>
86	168	<div class="flex align-center mt10">
...	...	@@ -94,7 +176,9 @@
94	176	</div>
95	177	</div>
96	178	</div>
97		- <div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt=""></div>
	179	+ <div class="next-btn" @click="goToPage('Chapter2_3')">
	180	+ <img src="../../../../resources/img/right.png" alt="" />
	181	+ </div>
98	182	</div>
99	183	</div>
100	184	</template>
...	...	@@ -102,13 +186,16 @@
102	186	<script>
103	187	export default {
104	188	data() {
105		- return {
106		- }
	189	+ return {};
107	190	},
108	191	methods: {
	192	+ complete() {
	193	+ this.$router.push({ name: "Dashboard", query: { value: 2 } });
	194	+ },
109	195	goToPage(page) {
110	196	this.$router.push({ name: page });
111		- }, playAudio(audioId) {
	197	+ },
	198	+ playAudio(audioId) {
112	199	const audio = document.getElementById(audioId);
113	200	if (audio) {
114	201	audio.play();
...	...	@@ -117,18 +204,11 @@
117	204	}
118	205	},
119	206	},
120		- watch: {
121		-
122		- },
123		- computed: {
124		-
125		- },
126		- components: {
127		- },
128		- mounted() {
129		-
130		- }
131		-}
	207	+ watch: {},
	208	+ computed: {},
	209	+ components: {},
	210	+ mounted() {},
	211	+};
132	212	</script>
133	213	<style scoped>
134	214	.grid-container {
...	...	@@ -136,4 +216,12 @@
136	216	grid-template-columns: repeat(2, 1fr);
137	217	gap: 20px;
138	218	}
139		-</style> (No newline at end of file)
	219	+.completeBtn {
	220	+ margin-right: 100px;
	221	+ background-color: #ffba08;
	222	+ padding: 10px 30px;
	223	+ border-radius: 10px;
	224	+ font-size: 28px;
	225	+ font-family: "ONEMobilePOPOTF";
	226	+}
	227	+</style>

...	...	@@ -1,142 +1,192 @@
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>
	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">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
	8	+ </router-link>
	9	+ </div>
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
	14	+ <div>
	15	+ <span class="title mr40">1. Hello WORLD</span>
	16	+ <span class="subtitle">my name is dd</span>
7	17	</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>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
	19	+ </div>
	20	+ <div class="flex justify-between align-center">
	21	+ <div class="pre-btn" @click="goToPage('Chapter2_3')">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
11	23	</div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/left.png" alt="">
14		- </div>
15		- <div class="content title-box">
16		- <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
17		- <div class="flex align-center mb30" style="justify-content: space-between;margin-right: 9em;">
18		- <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
19		- <div class="time-bg">
20		- <div>
21		- <div class="time">
22		- <p class="second">{{ timer }}</p>
23		- <p class="text">sec</p>
24		- </div>
25		- </div>
26		- </div>
27		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	24	+ <div class="content title-box">
	25	+ <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
	26	+ <div
	27	+ class="flex align-center mb30"
	28	+ style="justify-content: space-between; margin-right: 9em"
	29	+ >
	30	+ <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
	31	+ <div class="time-bg">
	32	+ <div>
	33	+ <div class="time">
	34	+ <p class="second">{{ timer }}</p>
	35	+ <p class="text">sec</p>
	36	+ </div>
	37	+ </div>
	38	+ </div>
	39	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
28	40	</button> -->
29		- </div>
	41	+ </div>
30	42
31		-
32		- <div class="imgGroup">
33		- <div class="flex justify-center" style="gap: 90px;">
34		- <button class="popTxt" v-for="(item, index) in items" :key="index">
35		- <div class="listenGroup">
36		- <img :src="item.imgSrc1">
37		- <p class="textbox"><img :src="item.imgSrc"></p>
38		- </div>
39		- <div class="listenGroup" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
40		- <img :src="item.imgSrc2">
41		- <p class="title4 textbox">{{ item.title }}</p>
42		- </div>
43		- </button>
44		- </div>
45		- </div>
46		- </div>
47		- <div class="next-btn" @click="goToPage('Chapter2_9')"><img src="../../../../resources/img/right.png" alt="">
48		- </div>
	43	+ <div class="imgGroup">
	44	+ <div class="flex justify-center" style="gap: 90px">
	45	+ <button class="popTxt" v-for="(item, index) in items" :key="index">
	46	+ <div class="listenGroup">
	47	+ <img :src="item.imgSrc1" />
	48	+ <p class="textbox"><img :src="item.imgSrc" /></p>
	49	+ </div>
	50	+ <div
	51	+ class="listenGroup"
	52	+ :style="{
	53	+ display: item.isSecondImageVisible ? 'block' : 'none',
	54	+ }"
	55	+ >
	56	+ <img :src="item.imgSrc2" />
	57	+ <p class="title4 textbox">{{ item.title }}</p>
	58	+ </div>
	59	+ </button>
	60	+ </div>
	61	+ </div>
49	62	</div>
50		- </div>
	63	+ <div class="next-btn" @click="goToPage('Chapter2_9')">
	64	+ <img src="../../../../resources/img/right.png" alt="" />
	65	+ </div>
	66	+ </div>
	67	+ </div>
51	68	</template>
52		-
53	69
54	70	<script>
55	71	export default {
56		- data() {
57		- return {
58		- items: [
59		- { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img77_41s.png', isSecondImageVisible: false, title: 'america' },
60		- { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img47_s.png', isSecondImageVisible: false, title: 'airplane' },
61		- { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img75_41s.png', isSecondImageVisible: false, title: 'cat' },
62		- { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img74_41s.png', isSecondImageVisible: false, title: 'mountain' }
63		- ],
64		- timer: 0,
65		- intervalId: null,
66		- currentIndex: 0,
67		- };
68		- },
69		- methods: {
70		- goToPage(page) {
71		- this.$router.push({ name: page });
72		- },
73		- toggleImage(index) {
74		- this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
75		- },
76		- startTimer() {
77		- // 현재 실행 중인 타이머가 있다면 정리
78		- if (this.intervalId) {
	72	+ data() {
	73	+ return {
	74	+ items: [
	75	+ {
	76	+ imgSrc1: "client/resources/img/img49_s.png",
	77	+ imgSrc2: "client/resources/img/img50_s.png",
	78	+ imgSrc: "client/resources/img/img77_41s.png",
	79	+ isSecondImageVisible: false,
	80	+ title: "america",
	81	+ },
	82	+ {
	83	+ imgSrc1: "client/resources/img/img49_s.png",
	84	+ imgSrc2: "client/resources/img/img50_s.png",
	85	+ imgSrc: "client/resources/img/img47_s.png",
	86	+ isSecondImageVisible: false,
	87	+ title: "airplane",
	88	+ },
	89	+ {
	90	+ imgSrc1: "client/resources/img/img49_s.png",
	91	+ imgSrc2: "client/resources/img/img50_s.png",
	92	+ imgSrc: "client/resources/img/img75_41s.png",
	93	+ isSecondImageVisible: false,
	94	+ title: "cat",
	95	+ },
	96	+ {
	97	+ imgSrc1: "client/resources/img/img49_s.png",
	98	+ imgSrc2: "client/resources/img/img50_s.png",
	99	+ imgSrc: "client/resources/img/img74_41s.png",
	100	+ isSecondImageVisible: false,
	101	+ title: "mountain",
	102	+ },
	103	+ ],
	104	+ timer: 0,
	105	+ intervalId: null,
	106	+ currentIndex: 0,
	107	+ };
	108	+ },
	109	+ methods: {
	110	+ complete() {
	111	+ this.$router.push({ name: "Dashboard", query: { value: 2 } });
	112	+ },
	113	+ goToPage(page) {
	114	+ this.$router.push({ name: page });
	115	+ },
	116	+ toggleImage(index) {
	117	+ this.items[index].isSecondImageVisible =
	118	+ !this.items[index].isSecondImageVisible;
	119	+ },
	120	+ startTimer() {
	121	+ // 현재 실행 중인 타이머가 있다면 정리
	122	+ if (this.intervalId) {
	123	+ clearInterval(this.intervalId);
	124	+ }
	125	+
	126	+ // 타이머 및 이미지 토글 상태 초기화
	127	+ this.timer = 0;
	128	+ this.currentIndex = 0; // 현재 타이머 인덱스를 추적
	129	+
	130	+ // 시작 타이머 설정
	131	+ this.runTimer();
	132	+ },
	133	+
	134	+ runTimer() {
	135	+ // 반복 타이머 설정
	136	+ this.intervalId = setInterval(() => {
	137	+ if (this.currentIndex == this.items.length) return;
	138	+ if (this.timer < 3) {
	139	+ this.timer++;
	140	+ } else {
	141	+ // 타이머가 끝났을 때, 다음 타이머 설정
	142	+ this.timer = 0;
	143	+
	144	+ if (this.currentIndex < this.items.length) {
	145	+ // 현재 인덱스에 해당하는 아이템으로 이미지 토글
	146	+ this.toggleImage(this.currentIndex);
	147	+ this.currentIndex++;
	148	+ } else {
	149	+ // 모든 타이머가 완료되었으면 타이머 정리
79	150	clearInterval(this.intervalId);
80		- }
81		-
82		- // 타이머 및 이미지 토글 상태 초기화
83		- this.timer = 0;
84		- this.currentIndex = 0; // 현재 타이머 인덱스를 추적
85		-
86		- // 시작 타이머 설정
87		- this.runTimer();
88		- },
89		-
90		- runTimer() {
91		- // 반복 타이머 설정
92		- this.intervalId = setInterval(() => {
93		- if (this.currentIndex == this.items.length)
94		- return;
95		- if (this.timer < 3) {
96		- this.timer++;
97		- } else {
98		- // 타이머가 끝났을 때, 다음 타이머 설정
99		- this.timer = 0;
100		-
101		- if (this.currentIndex < this.items.length) {
102		- // 현재 인덱스에 해당하는 아이템으로 이미지 토글
103		- this.toggleImage(this.currentIndex);
104		- this.currentIndex++;
105		- } else {
106		- // 모든 타이머가 완료되었으면 타이머 정리
107		- clearInterval(this.intervalId);
108		- this.intervalId = null;
109		- console.log('모든 타이머가 완료되었습니다.');
110		- }
111		- }
112		- }, 1000);
113		- },
114		- },
115		- mounted() {
116		- this.startTimer()
117		- }
118		-}
119		-
	151	+ this.intervalId = null;
	152	+ console.log("모든 타이머가 완료되었습니다.");
	153	+ }
	154	+ }
	155	+ }, 1000);
	156	+ },
	157	+ },
	158	+ mounted() {
	159	+ this.startTimer();
	160	+ },
	161	+};
120	162	</script>
121	163	<style scoped>
122	164	.popTxt {
123		- width: 295px;
124		- height: 406px;
	165	+ width: 295px;
	166	+ height: 406px;
125	167	}
126	168
127	169	.popTxt div:last-child img {
128		- position: absolute;
129		- top: 0;
130		- left: 0;
	170	+ position: absolute;
	171	+ top: 0;
	172	+ left: 0;
131	173	}
132	174
133	175	.listenGroup .textbox {
134		- top: 50%;
135		- left: 50%;
	176	+ top: 50%;
	177	+ left: 50%;
136	178	}
137	179
138	180	.questionBox {
139		- justify-content: space-between;
140		- align-items: flex-start;
	181	+ justify-content: space-between;
	182	+ align-items: flex-start;
141	183	}
142		-</style> (No newline at end of file)
	184	+.completeBtn {
	185	+ margin-right: 100px;
	186	+ background-color: #ffba08;
	187	+ padding: 10px 30px;
	188	+ border-radius: 10px;
	189	+ font-size: 28px;
	190	+ font-family: "ONEMobilePOPOTF";
	191	+}
	192	+</style>

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

...	...	@@ -1,129 +1,185 @@
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>
	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">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
	8	+ </router-link>
	9	+ </div>
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
	14	+ <div>
	15	+ <span class="title mr40">1. Hello WORLD</span>
	16	+ <span class="subtitle">my name is dd</span>
7	17	</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>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
	19	+ </div>
	20	+ <div class="flex justify-between align-center">
	21	+ <div class="pre-btn" @click="goToPage('Chapter2_9')">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
11	23	</div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter2_9')"><img src="../../../../resources/img/left.png" alt="">
14		- </div>
15		- <div class="content title-box">
16		- <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
17		- <div class="flex align-center mb30">
18		- <p class="subtitle2 mr20">다음을 듣고 맞는 단어를 선택하세요.</p>
19		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	24	+ <div class="content title-box">
	25	+ <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
	26	+ <div class="flex align-center mb30">
	27	+ <p class="subtitle2 mr20">다음을 듣고 맞는 단어를 선택하세요.</p>
	28	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
20	29	</button> -->
21		- </div>
	30	+ </div>
22	31
23		-
24		- <div class="imgGroup">
25		-
26		- <div class="flex justify-center">
27		- <div class="listenGroup flex" style="gap: 60px;">
28		- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
29		- :class="{ active: selectedIndex === index }">
30		- <img :src="item.imgSrc1">
31		- <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
32		- <div class="textbox">
33		- <div style="height: 80%; line-height: 200px;"> <img :src="item.imgSrc" alt=""></div>
34		- <p class="subtitle3" style="height: 20%;">{{ item.title }}</p>
35		- </div>
36		- </button>
	32	+ <div class="imgGroup">
	33	+ <div class="flex justify-center">
	34	+ <div class="listenGroup flex" style="gap: 60px">
	35	+ <button
	36	+ class="popTxt"
	37	+ v-for="(item, index) in items"
	38	+ :key="index"
	39	+ @click="updateContent(index)"
	40	+ :class="{ active: selectedIndex === index }"
	41	+ >
	42	+ <img :src="item.imgSrc1" />
	43	+ <img
	44	+ :src="item.imgSrc2"
	45	+ v-if="selectedIndex === index"
	46	+ style="display: block"
	47	+ />
	48	+ <div class="textbox">
	49	+ <div style="height: 80%; line-height: 200px">
	50	+ <img :src="item.imgSrc" alt="" />
37	51	</div>
38		- </div>
39		- <div class="listen-btn mt50">
40		- <img src="client/resources/img/btn10_s.png" alt="Listen" @click="playAudio">
41		- </div>
42		-
43		- <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>
	52	+ <p class="subtitle3" style="height: 20%">{{ item.title }}</p>
	53	+ </div>
	54	+ </button>
44	55	</div>
45		- </div>
46		- <div class="next-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/right.png" alt="">
47		- </div>
	56	+ </div>
	57	+ <div class="listen-btn mt50">
	58	+ <img
	59	+ src="client/resources/img/btn10_s.png"
	60	+ alt="Listen"
	61	+ @click="playAudio"
	62	+ />
	63	+ </div>
	64	+
	65	+ <audio
	66	+ id="audio-player"
	67	+ src="client/resources/audio/bank.wav"
	68	+ preload="auto"
	69	+ ></audio>
	70	+ </div>
48	71	</div>
49		- </div>
	72	+ <div class="next-btn" @click="goToPage('Chapter2_8')">
	73	+ <img src="../../../../resources/img/right.png" alt="" />
	74	+ </div>
	75	+ </div>
	76	+ </div>
50	77	</template>
51	78	<script>
52		-import SvgIcon from '@jamescoyle/vue-icon';
	79	+import SvgIcon from "@jamescoyle/vue-icon";
53	80	export default {
54		- data() {
55		- return {
56		- items: [
57		- { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img59_36s.png', title: 'apple' },
58		- { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img2_4.png', title: 'bank' },
59		- { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img57_36s.png', title: 'car' },
60		- { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img56_36s.png', title: 'guitar' },
61		- ],
62		- selectedIndex: 0,
63		- };
64		- },
65		- methods: {
66		- goToPage(page) {
67		- this.$router.push({ name: page });
68		- },
69		- updateContent(index) {
70		- this.selectedIndex = index;
71		- this.currentCon = this.items[index].con;
72		- setTimeout(() => {
73		- if(index==1){
74		- alert("정답입니다!")
75		- }else{
76		- alert("오답입니다!")
77		- }
78		- },0)
79		-
80		- }, playAudio() {
81		- const audio = document.getElementById('audio-player');
82		- audio.play();
83		- console.log("playing")
84		- }
85		-
86		-
87		-
88		- },
89		- components: {
90		- SvgIcon
91		- },
92		-}
	81	+ data() {
	82	+ return {
	83	+ items: [
	84	+ {
	85	+ imgSrc1: "client/resources/img/img61_36s.png",
	86	+ imgSrc2: "client/resources/img/img62_36s.png",
	87	+ imgSrc: "client/resources/img/img59_36s.png",
	88	+ title: "apple",
	89	+ },
	90	+ {
	91	+ imgSrc1: "client/resources/img/img61_36s.png",
	92	+ imgSrc2: "client/resources/img/img62_36s.png",
	93	+ imgSrc: "client/resources/img/img2_4.png",
	94	+ title: "bank",
	95	+ },
	96	+ {
	97	+ imgSrc1: "client/resources/img/img61_36s.png",
	98	+ imgSrc2: "client/resources/img/img62_36s.png",
	99	+ imgSrc: "client/resources/img/img57_36s.png",
	100	+ title: "car",
	101	+ },
	102	+ {
	103	+ imgSrc1: "client/resources/img/img61_36s.png",
	104	+ imgSrc2: "client/resources/img/img62_36s.png",
	105	+ imgSrc: "client/resources/img/img56_36s.png",
	106	+ title: "guitar",
	107	+ },
	108	+ ],
	109	+ selectedIndex: 0,
	110	+ };
	111	+ },
	112	+ methods: {
	113	+ complete() {
	114	+ this.$router.push({ name: "Dashboard", query: { value: 2 } });
	115	+ },
	116	+ goToPage(page) {
	117	+ this.$router.push({ name: page });
	118	+ },
	119	+ updateContent(index) {
	120	+ this.selectedIndex = index;
	121	+ this.currentCon = this.items[index].con;
	122	+ setTimeout(() => {
	123	+ if (index == 1) {
	124	+ alert("정답입니다!");
	125	+ } else {
	126	+ alert("오답입니다!");
	127	+ }
	128	+ }, 0);
	129	+ },
	130	+ playAudio() {
	131	+ const audio = document.getElementById("audio-player");
	132	+ audio.play();
	133	+ console.log("playing");
	134	+ },
	135	+ },
	136	+ components: {
	137	+ SvgIcon,
	138	+ },
	139	+};
93	140	</script>
94	141
95	142	<style scoped>
96	143	.listenGroup {
97		- height: 305px;
	144	+ height: 305px;
98	145	}
99	146
100	147	.listenGroup button {
101		- position: relative;
	148	+ position: relative;
102	149	}
103	150
104	151	.listenGroup .textbox {
105		- width: 184px;
106		- height: 206px;
107		- left: 46%;
108		- top: 43%;
	152	+ width: 184px;
	153	+ height: 206px;
	154	+ left: 46%;
	155	+ top: 43%;
109	156	}
110	157
111	158	.look-text {
112		- bottom: 50px;
	159	+ bottom: 50px;
113	160	}
114	161
115	162	.btnGroup {
116		- width: 1060px;
117		- height: 340px;
	163	+ width: 1060px;
	164	+ height: 340px;
118	165	}
119	166
120	167	.popTxt {
121		- width: 216px;
	168	+ width: 216px;
122	169	}
123	170
124		-.popTxt>img {
125		- position: absolute;
126		- top: 0;
127		- left: 0;
	171	+.popTxt > img {
	172	+ position: absolute;
	173	+ top: 0;
	174	+ left: 0;
128	175	}
129		-</style> (No newline at end of file)
	176	+
	177	+.completeBtn {
	178	+ margin-right: 100px;
	179	+ background-color: #ffba08;
	180	+ padding: 10px 30px;
	181	+ border-radius: 10px;
	182	+ font-size: 28px;
	183	+ font-family: "ONEMobilePOPOTF";
	184	+}
	185	+</style>

...	...	@@ -2,36 +2,56 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</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>
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
	14	+ <div>
	15	+ <span class="title mr40">1. Hello WORLD</span>
	16	+ <span class="subtitle">my name is dd</span>
	17	+ </div>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
11	19	</div>
12	20	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter2_2')"><img src="../../../../resources/img/left.png" alt=""></div>
	21	+ <div class="pre-btn" @click="goToPage('Chapter2_2')">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
	23	+ </div>
14	24	<div class="content title-box">
15		- <div style="display: flex; justify-content: space-between;">
	25	+ <div style="display: flex; justify-content: space-between">
16	26	<p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
17		- <button id="returnButton" @click="returnPage" style="margin: 4rem;">
18		- <img src="../../../../resources/img/btn_return_50x50.png" alt="">
	27	+ <button id="returnButton" @click="returnPage" style="margin: 4rem">
	28	+ <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
19	29	<p>되돌리기</p>
20	30	</button>
21	31	</div>
22	32	<div class="flex align-center mb30">
23		- <p class="subtitle2 mr20">앗! 잉크가 쏟아졌어! 지우개로 잉크를 지워줘!</p>
	33	+ <p class="subtitle2 mr20">
	34	+ 앗! 잉크가 쏟아졌어! 지우개로 잉크를 지워줘!
	35	+ </p>
24	36	</div>
25	37
26	38	<div class="text-ct">
27	39	<div class="dropGroup flex align-center justify-center">
28		- <div style="position: relative;">
29		- <img src="../../../../resources/img/img72_41s.png" alt="" style="width: 93%;">
	40	+ <div style="position: relative">
	41	+ <img
	42	+ src="../../../../resources/img/img72_41s.png"
	43	+ alt=""
	44	+ style="width: 93%"
	45	+ />
30	46	<div class="vocaGroup">
31	47	<div class="flex justify-between mb80">
32	48	<article class="flex align-center">
33	49	<div class="imgGroup mr30">
34		- <img src="../../../../resources/img/img74_41s.png" data-num="1" class="ink" />
	50	+ <img
	51	+ src="../../../../resources/img/img74_41s.png"
	52	+ data-num="1"
	53	+ class="ink"
	54	+ />
35	55	</div>
36	56	<div class="flex align-start">
37	57	<div>
...	...	@@ -44,7 +64,11 @@
44	64	</article>
45	65	<article class="flex align-center">
46	66	<div class="imgGroup mr30">
47		- <img src="../../../../resources/img/img75_41s.png" data-num="2" class="ink" />
	67	+ <img
	68	+ src="../../../../resources/img/img75_41s.png"
	69	+ data-num="2"
	70	+ class="ink"
	71	+ />
48	72	</div>
49	73	<div class="flex align-start">
50	74	<div>
...	...	@@ -59,7 +83,11 @@
59	83	<div class="flex justify-between">
60	84	<article class="flex align-center">
61	85	<div class="imgGroup mr30">
62		- <img src="../../../../resources/img/img76_41s.png" data-num="3" class="ink" />
	86	+ <img
	87	+ src="../../../../resources/img/img76_41s.png"
	88	+ data-num="3"
	89	+ class="ink"
	90	+ />
63	91	</div>
64	92	<div class="flex align-start">
65	93	<div>
...	...	@@ -72,7 +100,11 @@
72	100	</article>
73	101	<article class="flex align-center">
74	102	<div class="imgGroup mr30">
75		- <img src="../../../../resources/img/img77_41s.png" data-num="4" class="ink" />
	103	+ <img
	104	+ src="../../../../resources/img/img77_41s.png"
	105	+ data-num="4"
	106	+ class="ink"
	107	+ />
76	108	</div>
77	109	<div class="flex align-start">
78	110	<div>
...	...	@@ -86,16 +118,32 @@
86	118	</div>
87	119	</div>
88	120	<div class="textbox">
89		- <button id="eraser1" class="dropzone" style="left: 141px; top: 44px;">
	121	+ <button
	122	+ id="eraser1"
	123	+ class="dropzone"
	124	+ style="left: 141px; top: 44px"
	125	+ >
90	126	<img src="../../../../resources/img/img78_41s.png" alt="" />
91	127	</button>
92		- <button id="eraser2" class="dropzone" style="left: 200px; bottom: 46px;">
	128	+ <button
	129	+ id="eraser2"
	130	+ class="dropzone"
	131	+ style="left: 200px; bottom: 46px"
	132	+ >
93	133	<img src="../../../../resources/img/img79_41s.png" alt="" />
94	134	</button>
95		- <button id="eraser3" class="dropzone" style="right: 237px; top: 114px;">
	135	+ <button
	136	+ id="eraser3"
	137	+ class="dropzone"
	138	+ style="right: 237px; top: 114px"
	139	+ >
96	140	<img src="../../../../resources/img/img80_41s.png" alt="" />
97	141	</button>
98		- <button id="eraser4" class="dropzone" style="right: 159px; bottom: 5px;">
	142	+ <button
	143	+ id="eraser4"
	144	+ class="dropzone"
	145	+ style="right: 159px; bottom: 5px"
	146	+ >
99	147	<img src="../../../../resources/img/img81_41s.png" alt="" />
100	148	</button>
101	149	</div>
...	...	@@ -103,8 +151,12 @@
103	151	</div>
104	152	<div class="dragGroup">
105	153	<div>
106		- <article style="left: 83px; top: 69%;">
107		- <button id="eraser" draggable="true" @dragstart="handleDragStart">
	154	+ <article style="left: 83px; top: 69%">
	155	+ <button
	156	+ id="eraser"
	157	+ draggable="true"
	158	+ @dragstart="handleDragStart"
	159	+ >
108	160	<img src="../../../../resources/img/img73_41s.png" alt="" />
109	161	</button>
110	162	</article>
...	...	@@ -112,11 +164,12 @@
112	164	</div>
113	165	</div>
114	166	</div>
115		- <div class="next-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/right.png" alt=""></div>
	167	+ <div class="next-btn" @click="goToPage('Chapter2_4')">
	168	+ <img src="../../../../resources/img/right.png" alt="" />
	169	+ </div>
116	170	</div>
117	171	</div>
118	172	</template>
119		-
120	173
121	174	<script>
122	175	export default {
...	...	@@ -126,12 +179,15 @@
126	179	};
127	180	},
128	181	methods: {
	182	+ complete() {
	183	+ this.$router.push({ name: "Dashboard", query: { value: 2 } });
	184	+ },
129	185	goToPage(page) {
130	186	this.$router.push({ name: page });
131	187	},
132	188	handleDragStart(event) {
133	189	this.draggedElementId = event.target.id; // 드래그한 요소의 ID를 저장
134		- event.dataTransfer.setData('text/plain', this.draggedElementId);
	190	+ event.dataTransfer.setData("text/plain", this.draggedElementId);
135	191	},
136	192	handleDragOver(event) {
137	193	event.preventDefault(); // 드롭을 허용
...	...	@@ -140,20 +196,20 @@
140	196	event.preventDefault();
141	197
142	198	// 드롭된 영역이 버튼인지 확인
143		- const dropZone = event.target.closest('button.dropzone');
	199	+ const dropZone = event.target.closest("button.dropzone");
144	200
145	201	if (dropZone) {
146	202	// 드롭이 이루어진 영역이 버튼일 때만 처리
147		- dropZone.querySelector('img').style.display = 'none'; // 잉크를 숨깁니다
	203	+ dropZone.querySelector("img").style.display = "none"; // 잉크를 숨깁니다
148	204	}
149	205
150	206	// 드래그한 요소를 원래 위치로 복원
151	207	const draggedElement = document.getElementById(this.draggedElementId);
152	208	if (draggedElement) {
153		- draggedElement.style.visibility = 'visible';
154		- draggedElement.style.position = '';
155		- draggedElement.style.top = '';
156		- draggedElement.style.left = '';
	209	+ draggedElement.style.visibility = "visible";
	210	+ draggedElement.style.position = "";
	211	+ draggedElement.style.top = "";
	212	+ draggedElement.style.left = "";
157	213	}
158	214
159	215	this.draggedElementId = null; // 드래그 상태 초기화
...	...	@@ -164,15 +220,13 @@
164	220	},
165	221	mounted() {
166	222	// 드래그 가능한 영역에 드래그 오버 및 드롭 이벤트를 추가합니다
167		- document.querySelectorAll('.dropzone').forEach(button => {
168		- button.addEventListener('dragover', this.handleDragOver);
169		- button.addEventListener('drop', this.handleDrop);
	223	+ document.querySelectorAll(".dropzone").forEach((button) => {
	224	+ button.addEventListener("dragover", this.handleDragOver);
	225	+ button.addEventListener("drop", this.handleDrop);
170	226	});
171		- }
172		-}
	227	+ },
	228	+};
173	229	</script>
174		-
175		-
176	230
177	231	<style scoped>
178	232	.vocaGroup {
...	...	@@ -185,4 +239,13 @@
185	239	.ink {
186	240	cursor: pointer;
187	241	}
188		-</style> (No newline at end of file)
	242	+
	243	+.completeBtn {
	244	+ margin-right: 100px;
	245	+ background-color: #ffba08;
	246	+ padding: 10px 30px;
	247	+ border-radius: 10px;
	248	+ font-size: 28px;
	249	+ font-family: "ONEMobilePOPOTF";
	250	+}
	251	+</style>

Delete comment