+body{ background-color: #eaedf4;}

+    /* height: 100%;  */

+input#file-upload-button{padding: 10px ;} 

+td{padding: 10px ; text-align: center;} 

+

+/* .btn-upload {

+    width: 100px;

+    height: 40px;

+    background: #f0f0f0;

+    border: 1px solid rgb(77,77,77);

+    font-weight: 500;

+    cursor: pointer;

+    display: flex;

+    align-items: center;

+    justify-content: center;

+    &:hover {

+      background: rgb(77,77,77);

+      color: #fff;

+    }

+  }

+  

+  #file {

+    display: none;

+  } */

+  padding: 20px 50px 20px 40px;

+    z-index: 10000;

+.rabbit-start {

+}

+.rabbit-end {

+  position: absolute;

+  bottom: 24px;

+    right: 40px;

+/* .popup-yellow{

+  background-image: url('../img/img139_72s.png');

+  min-width: 439px !important;

+  min-height: 244px !important;

+  background-color: transparent !important;

+  border: 0 !important;

+} */

+.time-hint{

+  position: absolute;

+  top: 50px;

+  right: 50px;

+  text-align: center;

+}

+.hint-btn{

+  background-image: url('../img/btn01.png');

+  width: 110px;

+  height: 45px;

+  padding: 5px 20px;

+    font-size: 28px;

+    font-family: 'ONEMobilePOP';

+}

+  /* height: 100%; */

+select{min-width: 128px; border-radius: 5px; padding: 10px 20px; font-size: 18px; }

+  padding: 10px 30px;

+

+

+  /* 단원 버튼 */

+ .unit-pagination button {

+    font-size: 2rem;

+    font-family: 'Pretendard-Regular';

+    padding: 5px 30px;

+    border: #c6c6c6 3px solid;

+    border-radius: 5px;

+    color: #331600;

+    background-color: #EAEDF4 

+}

+

+ .unit-pagination .selected-btn {

+    background-color:#c6c6c6;

+    /* color: #fff; */

+    font-family: 'Pretendard-ExtraBold';

+}

+      pageSize: 2,

+                <div class="ml25" >

+                    <router-link to="/TextList.page" class="tpt">지문</router-link>

+                    <router-link to="/QuestionList.page" class="tpt">문제</router-link>

+                    <router-link to="/VocaList.page" class="tpt">단어장</router-link>

+                    <router-link to="/ExamList.page" class="tpt">평가</router-link>

+import Chapter3_3_1 from "./main/Chapter/Chapter3_3_1.vue";

+import TextDetail from "./teacher/TextDetail.vue";

+<<<<<<< HEAD

+=======

+import QuestionDetail from "./teacher/QuestionDetail.vue";

+>>>>>>> e47769b90c7ad4f0b34f38bb2a56a8a69a894941

+import VocaInsert from "./teacher/VocaInsert.vue";

+import VocaDetail from "./teacher/VocaDetail.vue";

+import ExamInsert from "./teacher/ExamInsert.vue";

+    { path: '/Chapter3_3_1.page', name: 'Chapter3_3_1', component: Chapter3_3_1 },

+            { path: '/TextDetail.page', name: 'TextDetail', component: TextDetail },

+<<<<<<< HEAD

+=======

+            { path: '/QuestionDetail.page', name: 'QuestionDetail', component: QuestionDetail },

+>>>>>>> e47769b90c7ad4f0b34f38bb2a56a8a69a894941

+            { path: '/VocaInsert.page', name: 'VocaInsert', component: VocaInsert },

+            { path: '/VocaDetail.page', name: 'VocaDetail', component: VocaDetail },

+            { path: '/ExamInsert.page', name: 'ExamInsert', component: ExamInsert },

+            

+            { path: '/TextDetail.page', name: 'TextDetail', component: TextDetail },

+         <button @click="captureAndGoToPhotoDesign">

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

+      <div class="body" ref="body">

+         <div id="container" ref="container">

+            <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"

+               @canplay="onVideoLoaded"></video>

+         </div>

+

+         photoTaken: false,

+         stream: null,

+         videoReady: false,

+         if (this.stream) {

+            let tracks = this.stream.getTracks();

+            tracks.forEach(track => track.stop());

+            this.stream = null;

+         }

+      onVideoLoaded() {

+         this.videoReady = true;

+         this.adjustContainerSize();

+      },

+      adjustContainerSize() {

+         const video = this.$refs.modalVideoElement;

+         const container = this.$refs.container;

+         const body = this.$refs.body;

+         if (video && container) {

+            container.style.width = `${video.videoWidth}px`;

+            container.style.height = `${video.videoHeight}px`;

+            body.style.height = `${video.videoHeight}px`;

+         }

+      },

+      captureAndGoToPhotoDesign() {

+         const video = this.$refs.modalVideoElement;

+         const canvas = document.createElement('canvas');

+         canvas.width = video.videoWidth;

+         canvas.height = video.videoHeight;

+         const ctx = canvas.getContext('2d');

+

+         // 좌우 반전 적용

+         ctx.translate(canvas.width, 0);

+         ctx.scale(-1, 1);

+

+         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

+         const imageDataUrl = canvas.toDataURL('image/png');

+         this.$router.push({ name: 'PhotoDesign', query: { image: imageDataUrl } });

+      }

+   },

+   mounted() {

+      // Clear localStorage when the component is mounted

+      localStorage.removeItem('capturedImage');

+      

+      this.videoReady = false;

+      navigator.mediaDevices.getUserMedia({ video: true })

+         .then(stream => {

+            const modalVideo = this.$refs.modalVideoElement;

+            modalVideo.srcObject = stream;

+            this.stream = stream;

+            modalVideo.addEventListener('loadedmetadata', this.adjustContainerSize);

+         })

+         .catch(error => {

+            console.log("error>>>>>>>>", error);

+         });

+

+

+<style>

+.body {

+   width: 1435px;

+   height: auto;

+   margin: 0 auto;

+}

+

+#container {

+   position: relative;

+   margin: auto;

+   border: 10px #333 solid;

+   display: flex;

+   justify-content: center;

+   align-items: center;

+}

+

+video {

+   width: 100%;

+   height: auto;

+   background-color: #666;

+}

+

+.mirrored {

+   transform: scaleX(-1);

+}

+</style>

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

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

+          <span class="subtitle">my name is dd</span>

+          <div class="pre-btn" @click="goToPage('Chapter2')">

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

+          <div class="content title-box">

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

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

+                  <p class="subtitle2 mr20">오늘 배웠던 단어를 말하고 생성된 예문을 따라 읽어보세요</p>

+                  <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">

+        </button> -->

+              </div>

+              <div>

+                  <img src="http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png" data-num="1" />

+                  <p> {{ word }} </p>

+                  <p> {{ mean }} </p>

+                </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 class="speakText mb25">

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

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

+                                  >

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

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

+                                  >

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

+                              </p>

+                              <p class="read-ai">

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

+                              </p>

+                          </article>

+                      </section>

+                  </div>

+              </div>

+          </div>

+          <div class="next-btn" @click="goToPage('Chapter2_2')">

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

+          </div>

+  </div>

+</template>

+

+<script>

+import axios from 'axios';

+import SvgIcon from '@jamescoyle/vue-icon';

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

+export default {

+  data() {

+          isRecording: false, // 녹음 중 여부

+          mediaRecorder: null,

+          audioChunks: [], // 녹음된 오디오 데이터

+          audioBlob: null, // 오디오 Blob 객체

+          transcription: null, // 서버에서 받아온 텍스트 결과

+          stream: null, // MediaStream 객체

+

+          path: mdiStop,

+

+          /* audioURL : null // 오디오 URL 객체 */

+

+          word : "apple",

+          mean : "사과",

+          imageSrc : "http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png"

+      };

+  },

+  methods: {

+          this.$router.push({ name: page });

+      },

+      // 녹음 시작/중지 토글

+      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 resposne = await axios.post('/api/speechToText.json', formData, {

+                  headers: {

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

+                  },

+              });

+              this.transcription = resposne.data;

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

+          } catch (error) {

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

+          }

+      },

+  },

+  watch: {},

+  computed: {},

+  components: {

+      SvgIcon,

+  },

+  mounted() {},

+};

+</script>

+<style scoped>

+.mic-btn {

+  cursor: pointer;

+}

+.mic-btn.notRecording {

+  background-image: none;

+  cursor: pointer;

+}

+.speakText {

+  background-color: #fff8e9;

+  border: 0;

+}

+.speakText span {

+  font-size: 28px;

+}

+</style>

+         <div class="time-hint">

+          <button class="hint-btn">HINT</button>

+            <div class="time-bg mt20">

+                <div>

+                  <div class="time">

+                    <p class="second">{{ timer }}</p>

+                    <p class="text">sec</p>

+                  </div>

+         </div>

+          <div class="time-hint">

+          <button class="hint-btn">HINT</button>

+            <div class="time-bg mt20">

+                <div>

+                  <div class="time">

+                    <p class="second">{{ timer }}</p>

+                    <p class="text">sec</p>

+                  </div>

+                </div>

+         </div>

+          <div class="time-hint">

+          <button class="hint-btn">HINT</button>

+            <div class="time-bg mt20">

+                <div>

+                  <div class="time">

+                    <p class="second">{{ timer }}</p>

+                    <p class="text">sec</p>

+                  </div>

+                </div>

+         </div>

+          <div class="time-hint">

+          <button class="hint-btn">HINT</button>

+            <div class="time-bg mt20">

+                <div>

+                  <div class="time">

+                    <p class="second">{{ timer }}</p>

+                    <p class="text">sec</p>

+                  </div>

+                </div>

+         </div>

+          <div class="time-hint">

+          <button class="hint-btn">HINT</button>

+            <div class="time-bg mt20">

+                <div>

+                  <div class="time">

+                    <p class="second">{{ timer }}</p>

+                    <p class="text">sec</p>

+                  </div>

+                </div>