Commit @c4aecb181d17cbc5a295ae76294c50ca08938587

dajenog 2024-08-16

240816 이은진,정다정 페이징 네비게이션 수정

@c4aecb181d17cbc5a295ae76294c50ca08938587

00e5dbc

c4aecb1

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

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

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


 <template>
-  <div id="Chapter2_2" class="content-wrap">
-    <div style="margin: 30px 0px 50px; width: 20%">
-      <router-link to="/MyPlan.page">
-        <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
-        </div>
-      </router-link>
-    </div>
-    <div
-      class="title-box mb25 flex align-center mt40"
-      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 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>
-                <article>
-                  <p ref="speakText" class="speakText mb25">
-                    위의 버튼을 누른 후 단어를 말해보세요!
-                  </p>
-                </article>
-              </section>
-            </div>
-          </div>
+            </router-link>
         </div>
-      </div>
-      <div class="next-btn" @click="goToPage('Chapter2_2')">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </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>
-  </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: 'atermelon',
+                        boxText: '명',
+                        subtitle: '수박',
+                    },
+                },
+            ],
+            currentCon: {
+                imgSrc: 'client/resources/img/img54_s.png',
+                titleEm: 'c',
+                title: 'loud',
+                boxText: '명',
+                subtitle: '구름',
+            },
+            selectedIndex: 0,
+            timer: '00',
+            intervalId: null,
 
-      isRecording: false, // 녹음 중 여부
-      mediaRecorder: null,
-      audioChunks: [], // 녹음된 오디오 데이터
-      audioBlob: null, // 오디오 Blob 객체
-      stream: null, // MediaStream 객체
+            isRecording: false, // 녹음 중 여부
+            mediaRecorder: null,
+            audioChunks: [], // 녹음된 오디오 데이터
+            audioBlob: null, // 오디오 Blob 객체
+            stream: null, // MediaStream 객체
 
-      path: mdiStop,
-      nowWord: "cloud",
-    };
-  },
-  methods: {
-    complete() {
-      this.$router.push({ name: "Dashboard", query: { value: 2 } });
+            path: mdiStop,
+            nowWord: 'cloud',
+        };
     },
-    goToPage(page) {
-      this.$router.push({ name: page });
+    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;
+            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);
+            }
+        },
     },
-    updateContent(index) {
-      this.selectedIndex = index;
-      this.currentCon = this.items[index].con;
-      this.startTimer();
+    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
+        },
     },
-    startTimer() {
-      if (this.intervalId) {
-        clearInterval(this.intervalId);
-      }
-      this.timer = 5;
-      this.intervalId = setInterval(() => {
-        if (this.timer > 0) {
-          this.timer--;
-        } else {
-          clearInterval(this.intervalId);
+    beforeDestroy() {
+        if (this.intervalId) {
+            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";
+    margin-right: 100px;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
 }
 </style>

00e5dbc

c4aecb1

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

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

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


 <template>
     <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>
-      </router-link>
-    </div>
-      <div class="title-box mb25 flex align-center mt40">
-        <span class="title mr40">1. Hello WORLD</span>
-        <span class="subtitle">my name is dd</span>
-      </div>
-      <div class="flex justify-between align-center">
-        <div class="pre-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/left.png" alt=""></div>
-        <div class="content title-box">
-          <p class="title mt25 title-bg">step3.</p>
-          <div class="flex align-center mb30">
-               <p class="subtitle2 mr20">알맞은 것을 고르세요.</p>
+        <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="mt80 flex align-center justify-center" style="gap: 113px;">
-            <div class="imgGroup">
-              <div class="flex" style="gap: 60px;">
-              <img src="../../../../resources/img/img106_48s.png" alt="">
-              </div>
-              <div class="time-bg">
-                  <div>
-                    <div class="time">
-                      <p class="second">{{ timer }}</p>
-                      <p class="text">sec</p>
+            <button class="completeBtn" @click="complete">학습 종료</button>
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="goToPage('Chapter2_13')">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step3.</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">알맞은 것을 고르세요.</p>
+                </div>
+
+                <div class="mt80 flex align-center justify-center" style="gap: 113px">
+                    <div class="imgGroup">
+                        <div class="flex" style="gap: 60px">
+                            <img src="../../../../resources/img/img106_48s.png" alt="" />
+                        </div>
+                        <div class="time-bg">
+                            <div>
+                                <div class="time">
+                                    <p class="second">{{ timer }}</p>
+                                    <p class="text">sec</p>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                  </div>
+                    <div class="pickGroup">
+                        <div>
+                            <article class="flex justify-center mb50" style="gap: 60px">
+                                <div class="flex">
+                                    <button>
+                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                        <p>1</p>
+                                    </button>
+                                    <p>a</p>
+                                </div>
+                            </article>
+                            <article class="flex justify-center mb50" style="gap: 60px">
+                                <div class="flex">
+                                    <button>
+                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                        <p>2</p>
+                                    </button>
+                                    <p>a</p>
+                                </div>
+                            </article>
+                            <article class="flex justify-center" style="gap: 60px">
+                                <div class="flex">
+                                    <button>
+                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                        <p>3</p>
+                                    </button>
+                                    <p>a</p>
+                                </div>
+                            </article>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="pickGroup">
-              <div>
-                <article  class="flex justify-center mb50" style="gap: 60px;">
-                  <div class="flex">
-                    <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                      <p>1</p>
-                    </button>
-                    <p>a</p>
-                  </div>
-                </article>
-                <article  class="flex justify-center mb50" style="gap: 60px;">
-                  <div class="flex">
-                    <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                      <p>2</p>
-                    </button>
-                    <p>a</p>
-                  </div>
-                </article>
-                <article  class="flex justify-center" style="gap: 60px;">
-                  <div class="flex">
-                    <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                      <p>3</p>
-                    </button>
-                    <p>a</p>
-                  </div>
-                </article>
-              </div>
-  
+            <div class="next-btn" @click="goToPage('Chapter3_1')">
+                <img src="../../../../resources/img/right.png" alt="" />
             </div>
-          </div>
         </div>
-        <div class="next-btn" @click="goToPage('Chapter3_1')"><img src="../../../../resources/img/right.png" alt=""></div>
-      </div>
     </div>
-  </template>
-  
-  <script>
-  export default {
+</template>
+
+<script>
+export default {
     data() {
-      return {
-        timer:'00'
-      }
+        return {
+            timer: '00',
+        };
     },
     methods: {
-      goToPage(page) {
-        this.$router.push({ name: page });
-      },
-      startTimer() {
-      if (this.intervalId) {
-        clearInterval(this.intervalId);
-      }
-      this.timer = 5;
-      this.intervalId = setInterval(() => {
-        if (this.timer > 0) {
-          this.timer--;
-        } else {
-          clearInterval(this.intervalId);
-        }
-      }, 1000);
-    }
+        complete() {
+            this.$router.push({ name: 'Dashboard', query: { value: 8 } });
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
+        },
     },
-    watch: {
-  
-    },
-    computed: {
-  
-    },
-    components: {
-    },
-    mounted() {
-  
-    }
-  }
-  </script>
-  <style scoped>
-  .imgGroup{width: fit-content;}
-  .imgGroup button {
+    watch: {},
+    computed: {},
+    components: {},
+    mounted() {},
+};
+</script>
+<style scoped>
+.imgGroup {
+    width: fit-content;
+}
+.imgGroup button {
     position: relative;
-  }
-  
-  .imgGroup button p,
-  .textbox p {
+}
+
+.imgGroup button p,
+.textbox p {
     position: absolute;
     top: 50%;
     left: 50%;

     padding: 10px;
     font-size: 48px;
     font-family: 'ONEMobilePOP';
-  }
-  
-  .pickGroup button {
+}
+
+.pickGroup button {
     position: relative;
     margin-right: 30px;
-  }
-  
-  .pickGroup button p {
+}
+
+.pickGroup button p {
     font-size: 34px;
     color: #c6c6c6;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-  }
-  .pickGroup article img{object-fit: contain; width: -webkit-fill-available;}
-  .pickGroup article >div >p {
+}
+.pickGroup article img {
+    object-fit: contain;
+    width: -webkit-fill-available;
+}
+.pickGroup article > div > p {
     font-size: 64px;
-  }
-  </style>
+}
+.completeBtn {
+    margin-right: 100px;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
+}
+</style>

00e5dbc

c4aecb1

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

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

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


 <template>
-  <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>
-      </router-link>
-    </div>
-    <div class="title-box mb25 flex align-center mt40">
-      <span class="title mr40">1. Hello WORLD</span>
-      <span class="subtitle">my name is dd</span>
-    </div>
-    <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_1')"><img src="../../../../resources/img/left.png" alt=""></div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step3.</p>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">1. see the picture</p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button> -->
+    <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>
+            </router-link>
         </div>
-
-        <div class="text-ct">
-          <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>
-          <div class="imgGroup ">
-            <img src="../../../../resources/img/img109_51s.png" alt="">  
-          </div>
-          <div class=" flex align-center justify-center">
-            <div class="inputbox mt30">
-              go
+        <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('Chapter3_1')">
+                <img src="../../../../resources/img/left.png" alt="" />
             </div>
-          </div>
-          <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px;">
-            <p>i</p>
-            <article style="gap: 60px; bottom: 159px;
-    left: 242px;">
-              <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                <p>1</p>
-              </button>
-            </article>
-            <p>to</p>
-            <article style="gap: 60px; bottom: 159px;
-    right: 559px;">
-              <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                <p>2</p>
-              </button>
-            </article>
-            <p>bed</p>
-          </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step3.</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">1. see the picture</p>
+                    <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+          </button> -->
+                </div>
+
+                <div class="text-ct">
+                    <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>
+                    <div class="imgGroup">
+                        <img src="../../../../resources/img/img109_51s.png" alt="" />
+                    </div>
+                    <div class="flex align-center justify-center">
+                        <div class="inputbox mt30">go</div>
+                    </div>
+                    <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
+                        <p>i</p>
+                        <article style="gap: 60px; bottom: 159px; left: 242px">
+                            <button>
+                                <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                <p>1</p>
+                            </button>
+                        </article>
+                        <p>to</p>
+                        <article style="gap: 60px; bottom: 159px; right: 559px">
+                            <button>
+                                <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                <p>2</p>
+                            </button>
+                        </article>
+                        <p>bed</p>
+                    </div>
+                </div>
+            </div>
+            <div class="next-btn" @click="complete()"><img src="../../../../resources/img/right.png" alt="" /></div>
         </div>
-      </div>
-      <div class="next-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      timer: '00'
-    }
-  },
-  methods: {
-    goToPage(page) {
-      this.$router.push({ name: page });
+    data() {
+        return {
+            timer: '00',
+        };
     },
-    startTimer() {
-      if (this.intervalId) {
-        clearInterval(this.intervalId);
-      }
-      this.timer = 5;
-      this.intervalId = setInterval(() => {
-        if (this.timer > 0) {
-          this.timer--;
-        } else {
-          clearInterval(this.intervalId);
-        }
-      }, 1000);
-    }
-  },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+    methods: {
+        complete() {
+            this.$router.push({ name: 'Dashboard', query: { value: 8 } });
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
+        },
+    },
+    watch: {},
+    computed: {},
+    components: {},
+    mounted() {},
+};
 </script>
 <style scoped>
 .inputbox {
-  font-size: 38px;
-  font-family: 'Pretendard-ExtraBold';
+    font-size: 38px;
+    font-family: 'Pretendard-ExtraBold';
 }
 
 .imgGroup button {
-  position: relative;
+    position: relative;
 }
 
 .imgGroup button p,
 .textbox p {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: fit-content;
-  height: fit-content;
-  background: #ffffffb8;
-  border-radius: 5px;
-  padding: 10px;
-  font-size: 48px;
-  font-family: 'ONEMobilePOP';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: fit-content;
+    height: fit-content;
+    background: #ffffffb8;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 48px;
+    font-family: 'ONEMobilePOP';
 }
 
 .pickGroup p {
-  font-size: 34px;
-  font-weight: bold;
+    font-size: 34px;
+    font-weight: bold;
 }
 
 .pickGroup button {
-  position: relative;
-  margin-right: 30px;
+    position: relative;
+    margin-right: 30px;
 }
 
 .pickGroup button p {
-  font-size: 34px;
-  color: #c6c6c6;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+    font-size: 34px;
+    color: #c6c6c6;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
-</style>
+</style>

Add a comment

Open 0
Closed 0

List

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

...	...	@@ -1,118 +1,125 @@
1	1	<template>
2	2	<div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6		- </router-link>
7		- </div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/left.png" alt=""></div>
14		- <div class="content title-box">
15		- <p class="title mt25 title-bg">step3.</p>
16		- <div class="flex align-center mb30">
17		- <p class="subtitle2 mr20">알맞은 것을 고르세요.</p>
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
	6	+ </router-link>
	7	+ </div>
	8	+ <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
	9	+ <div>
	10	+ <span class="title mr40">1. Hello WORLD</span>
	11	+ <span class="subtitle">my name is dd</span>
18	12	</div>
19		-
20		- <div class="mt80 flex align-center justify-center" style="gap: 113px;">
21		- <div class="imgGroup">
22		- <div class="flex" style="gap: 60px;">
23		- <img src="../../../../resources/img/img106_48s.png" alt="">
24		- </div>
25		- <div class="time-bg">
26		- <div>
27		- <div class="time">
28		- <p class="second">{{ timer }}</p>
29		- <p class="text">sec</p>
	13	+ <button class="completeBtn" @click="complete">학습 종료</button>
	14	+ </div>
	15	+ <div class="flex justify-between align-center">
	16	+ <div class="pre-btn" @click="goToPage('Chapter2_13')">
	17	+ <img src="../../../../resources/img/left.png" alt="" />
	18	+ </div>
	19	+ <div class="content title-box">
	20	+ <p class="title mt25 title-bg">step3.</p>
	21	+ <div class="flex align-center mb30">
	22	+ <p class="subtitle2 mr20">알맞은 것을 고르세요.</p>
	23	+ </div>
	24	+
	25	+ <div class="mt80 flex align-center justify-center" style="gap: 113px">
	26	+ <div class="imgGroup">
	27	+ <div class="flex" style="gap: 60px">
	28	+ <img src="../../../../resources/img/img106_48s.png" alt="" />
	29	+ </div>
	30	+ <div class="time-bg">
	31	+ <div>
	32	+ <div class="time">
	33	+ <p class="second">{{ timer }}</p>
	34	+ <p class="text">sec</p>
	35	+ </div>
	36	+ </div>
	37	+ </div>
30	38	</div>
31		- </div>
	39	+ <div class="pickGroup">
	40	+ <div>
	41	+ <article class="flex justify-center mb50" style="gap: 60px">
	42	+ <div class="flex">
	43	+ <button>
	44	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	45	+ <p>1</p>
	46	+ </button>
	47	+ <p>a</p>
	48	+ </div>
	49	+ </article>
	50	+ <article class="flex justify-center mb50" style="gap: 60px">
	51	+ <div class="flex">
	52	+ <button>
	53	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	54	+ <p>2</p>
	55	+ </button>
	56	+ <p>a</p>
	57	+ </div>
	58	+ </article>
	59	+ <article class="flex justify-center" style="gap: 60px">
	60	+ <div class="flex">
	61	+ <button>
	62	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	63	+ <p>3</p>
	64	+ </button>
	65	+ <p>a</p>
	66	+ </div>
	67	+ </article>
	68	+ </div>
	69	+ </div>
32	70	</div>
33	71	</div>
34		- <div class="pickGroup">
35		- <div>
36		- <article class="flex justify-center mb50" style="gap: 60px;">
37		- <div class="flex">
38		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
39		- <p>1</p>
40		- </button>
41		- <p>a</p>
42		- </div>
43		- </article>
44		- <article class="flex justify-center mb50" style="gap: 60px;">
45		- <div class="flex">
46		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
47		- <p>2</p>
48		- </button>
49		- <p>a</p>
50		- </div>
51		- </article>
52		- <article class="flex justify-center" style="gap: 60px;">
53		- <div class="flex">
54		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
55		- <p>3</p>
56		- </button>
57		- <p>a</p>
58		- </div>
59		- </article>
60		- </div>
61		-
	72	+ <div class="next-btn" @click="goToPage('Chapter3_1')">
	73	+ <img src="../../../../resources/img/right.png" alt="" />
62	74	</div>
63		- </div>
64	75	</div>
65		- <div class="next-btn" @click="goToPage('Chapter3_1')"><img src="../../../../resources/img/right.png" alt=""></div>
66		- </div>
67	76	</div>
68		- </template>
69		-
70		- <script>
71		- export default {
	77	+</template>
	78	+
	79	+<script>
	80	+export default {
72	81	data() {
73		- return {
74		- timer:'00'
75		- }
	82	+ return {
	83	+ timer: '00',
	84	+ };
76	85	},
77	86	methods: {
78		- goToPage(page) {
79		- this.$router.push({ name: page });
80		- },
81		- startTimer() {
82		- if (this.intervalId) {
83		- clearInterval(this.intervalId);
84		- }
85		- this.timer = 5;
86		- this.intervalId = setInterval(() => {
87		- if (this.timer > 0) {
88		- this.timer--;
89		- } else {
90		- clearInterval(this.intervalId);
91		- }
92		- }, 1000);
93		- }
	87	+ complete() {
	88	+ this.$router.push({ name: 'Dashboard', query: { value: 8 } });
	89	+ },
	90	+ goToPage(page) {
	91	+ this.$router.push({ name: page });
	92	+ },
	93	+ startTimer() {
	94	+ if (this.intervalId) {
	95	+ clearInterval(this.intervalId);
	96	+ }
	97	+ this.timer = 5;
	98	+ this.intervalId = setInterval(() => {
	99	+ if (this.timer > 0) {
	100	+ this.timer--;
	101	+ } else {
	102	+ clearInterval(this.intervalId);
	103	+ }
	104	+ }, 1000);
	105	+ },
94	106	},
95		- watch: {
96		-
97		- },
98		- computed: {
99		-
100		- },
101		- components: {
102		- },
103		- mounted() {
104		-
105		- }
106		- }
107		- </script>
108		- <style scoped>
109		- .imgGroup{width: fit-content;}
110		- .imgGroup button {
	107	+ watch: {},
	108	+ computed: {},
	109	+ components: {},
	110	+ mounted() {},
	111	+};
	112	+</script>
	113	+<style scoped>
	114	+.imgGroup {
	115	+ width: fit-content;
	116	+}
	117	+.imgGroup button {
111	118	position: relative;
112		- }
113		-
114		- .imgGroup button p,
115		- .textbox p {
	119	+}
	120	+
	121	+.imgGroup button p,
	122	+.textbox p {
116	123	position: absolute;
117	124	top: 50%;
118	125	left: 50%;
...	...	@@ -124,23 +131,34 @@
124	131	padding: 10px;
125	132	font-size: 48px;
126	133	font-family: 'ONEMobilePOP';
127		- }
128		-
129		- .pickGroup button {
	134	+}
	135	+
	136	+.pickGroup button {
130	137	position: relative;
131	138	margin-right: 30px;
132		- }
133		-
134		- .pickGroup button p {
	139	+}
	140	+
	141	+.pickGroup button p {
135	142	font-size: 34px;
136	143	color: #c6c6c6;
137	144	position: absolute;
138	145	top: 50%;
139	146	left: 50%;
140	147	transform: translate(-50%, -50%);
141		- }
142		- .pickGroup article img{object-fit: contain; width: -webkit-fill-available;}
143		- .pickGroup article >div >p {
	148	+}
	149	+.pickGroup article img {
	150	+ object-fit: contain;
	151	+ width: -webkit-fill-available;
	152	+}
	153	+.pickGroup article > div > p {
144	154	font-size: 64px;
145		- }
146		- </style> (No newline at end of file)
	155	+}
	156	+.completeBtn {
	157	+ margin-right: 100px;
	158	+ background-color: #ffba08;
	159	+ padding: 10px 30px;
	160	+ border-radius: 10px;
	161	+ font-size: 28px;
	162	+ font-family: 'ONEMobilePOPOTF';
	163	+}
	164	+</style>

...	...	@@ -1,147 +1,143 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6		- </router-link>
7		- </div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3_1')"><img src="../../../../resources/img/left.png" alt=""></div>
14		- <div class="content title-box">
15		- <p class="title mt25 title-bg">step3.</p>
16		- <div class="flex align-center mb30">
17		- <p class="subtitle2 mr20">1. see the picture</p>
18		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
19		- </button> -->
	2	+ <div id="Chapter1_1" 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>
20	7	</div>
21		-
22		- <div class="text-ct">
23		- <div class="time-hint">
24		- <button class="hint-btn">HINT</button>
25		- <div class="time-bg mt20">
26		- <div>
27		- <div class="time">
28		- <p class="second">{{ timer }}</p>
29		- <p class="text">sec</p>
30		- </div>
31		- </div>
32		- </div>
33		- </div>
34		- <div class="imgGroup ">
35		- <img src="../../../../resources/img/img109_51s.png" alt="">
36		- </div>
37		- <div class=" flex align-center justify-center">
38		- <div class="inputbox mt30">
39		- go
	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('Chapter3_1')">
	14	+ <img src="../../../../resources/img/left.png" alt="" />
40	15	</div>
41		- </div>
42		- <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px;">
43		- <p>i</p>
44		- <article style="gap: 60px; bottom: 159px;
45		- left: 242px;">
46		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
47		- <p>1</p>
48		- </button>
49		- </article>
50		- <p>to</p>
51		- <article style="gap: 60px; bottom: 159px;
52		- right: 559px;">
53		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
54		- <p>2</p>
55		- </button>
56		- </article>
57		- <p>bed</p>
58		- </div>
	16	+ <div class="content title-box">
	17	+ <p class="title mt25 title-bg">step3.</p>
	18	+ <div class="flex align-center mb30">
	19	+ <p class="subtitle2 mr20">1. see the picture</p>
	20	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	21	+ </button> -->
	22	+ </div>
	23	+
	24	+ <div class="text-ct">
	25	+ <div class="time-hint">
	26	+ <button class="hint-btn">HINT</button>
	27	+ <div class="time-bg mt20">
	28	+ <div>
	29	+ <div class="time">
	30	+ <p class="second">{{ timer }}</p>
	31	+ <p class="text">sec</p>
	32	+ </div>
	33	+ </div>
	34	+ </div>
	35	+ </div>
	36	+ <div class="imgGroup">
	37	+ <img src="../../../../resources/img/img109_51s.png" alt="" />
	38	+ </div>
	39	+ <div class="flex align-center justify-center">
	40	+ <div class="inputbox mt30">go</div>
	41	+ </div>
	42	+ <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
	43	+ <p>i</p>
	44	+ <article style="gap: 60px; bottom: 159px; left: 242px">
	45	+ <button>
	46	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	47	+ <p>1</p>
	48	+ </button>
	49	+ </article>
	50	+ <p>to</p>
	51	+ <article style="gap: 60px; bottom: 159px; right: 559px">
	52	+ <button>
	53	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	54	+ <p>2</p>
	55	+ </button>
	56	+ </article>
	57	+ <p>bed</p>
	58	+ </div>
	59	+ </div>
	60	+ </div>
	61	+ <div class="next-btn" @click="complete()"><img src="../../../../resources/img/right.png" alt="" /></div>
59	62	</div>
60		- </div>
61		- <div class="next-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/right.png" alt=""></div>
62	63	</div>
63		- </div>
64	64	</template>
65	65
66	66	<script>
67	67	export default {
68		- data() {
69		- return {
70		- timer: '00'
71		- }
72		- },
73		- methods: {
74		- goToPage(page) {
75		- this.$router.push({ name: page });
	68	+ data() {
	69	+ return {
	70	+ timer: '00',
	71	+ };
76	72	},
77		- startTimer() {
78		- if (this.intervalId) {
79		- clearInterval(this.intervalId);
80		- }
81		- this.timer = 5;
82		- this.intervalId = setInterval(() => {
83		- if (this.timer > 0) {
84		- this.timer--;
85		- } else {
86		- clearInterval(this.intervalId);
87		- }
88		- }, 1000);
89		- }
90		- },
91		- watch: {
92		-
93		- },
94		- computed: {
95		-
96		- },
97		- components: {
98		- },
99		- mounted() {
100		-
101		- }
102		-}
	73	+ methods: {
	74	+ complete() {
	75	+ this.$router.push({ name: 'Dashboard', query: { value: 8 } });
	76	+ },
	77	+ goToPage(page) {
	78	+ this.$router.push({ name: page });
	79	+ },
	80	+ startTimer() {
	81	+ if (this.intervalId) {
	82	+ clearInterval(this.intervalId);
	83	+ }
	84	+ this.timer = 5;
	85	+ this.intervalId = setInterval(() => {
	86	+ if (this.timer > 0) {
	87	+ this.timer--;
	88	+ } else {
	89	+ clearInterval(this.intervalId);
	90	+ }
	91	+ }, 1000);
	92	+ },
	93	+ },
	94	+ watch: {},
	95	+ computed: {},
	96	+ components: {},
	97	+ mounted() {},
	98	+};
103	99	</script>
104	100	<style scoped>
105	101	.inputbox {
106		- font-size: 38px;
107		- font-family: 'Pretendard-ExtraBold';
	102	+ font-size: 38px;
	103	+ font-family: 'Pretendard-ExtraBold';
108	104	}
109	105
110	106	.imgGroup button {
111		- position: relative;
	107	+ position: relative;
112	108	}
113	109
114	110	.imgGroup button p,
115	111	.textbox p {
116		- position: absolute;
117		- top: 50%;
118		- left: 50%;
119		- transform: translate(-50%, -50%);
120		- width: fit-content;
121		- height: fit-content;
122		- background: #ffffffb8;
123		- border-radius: 5px;
124		- padding: 10px;
125		- font-size: 48px;
126		- font-family: 'ONEMobilePOP';
	112	+ position: absolute;
	113	+ top: 50%;
	114	+ left: 50%;
	115	+ transform: translate(-50%, -50%);
	116	+ width: fit-content;
	117	+ height: fit-content;
	118	+ background: #ffffffb8;
	119	+ border-radius: 5px;
	120	+ padding: 10px;
	121	+ font-size: 48px;
	122	+ font-family: 'ONEMobilePOP';
127	123	}
128	124
129	125	.pickGroup p {
130		- font-size: 34px;
131		- font-weight: bold;
	126	+ font-size: 34px;
	127	+ font-weight: bold;
132	128	}
133	129
134	130	.pickGroup button {
135		- position: relative;
136		- margin-right: 30px;
	131	+ position: relative;
	132	+ margin-right: 30px;
137	133	}
138	134
139	135	.pickGroup button p {
140		- font-size: 34px;
141		- color: #c6c6c6;
142		- position: absolute;
143		- top: 50%;
144		- left: 50%;
145		- transform: translate(-50%, -50%);
	136	+ font-size: 34px;
	137	+ color: #c6c6c6;
	138	+ position: absolute;
	139	+ top: 50%;
	140	+ left: 50%;
	141	+ transform: translate(-50%, -50%);
146	142	}
147		-</style> (No newline at end of file)
	143	+</style>

Delete comment