Commit @1533a48b2a83a7b7982e9072a858fa214a2c1bb2

정다정 2024-10-21

241021 정다정 단원명, 책명 페이지에 반영

@1533a48b2a83a7b7982e9072a858fa214a2c1bb2

7732467

1533a48

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

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

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


 <template>
-  <div id="Chapter1" class="content-wrap">
-    <div style="margin: 30px 0px 50px; width: 20%">
-      <router-link to="/MyPlan.page">
-        <div class="logo mb25">
-          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+    <div id="Chapter1" class="content-wrap">
+        <div style="margin: 30px 0px 50px; width: 20%">
+            <router-link to="/MyPlan.page">
+                <div class="logo mb25">
+                    <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </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">
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step1. Hello WORLD</p>
-        <div class="videoCon">
-          <div ref="youtubePlayer" class="youtube-player"></div>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
         </div>
-      </div>
-      <div class="next-btn" @click="goToPage('Chapter1_2')">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step1. Hello WORLD</p>
+                <div class="videoCon">
+                    <div ref="youtubePlayer" class="youtube-player"></div>
+                </div>
+            </div>
+            <div class="next-btn" @click="goToPage('Chapter1_2')">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
+        <TextToImage />
     </div>
-    <TextToImage />
-  </div>
 </template>
 
 <script>
-import TextToImage from "../../../component/TextToImage.vue";
-
+import TextToImage from '../../../component/TextToImage.vue';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  components: {
-    TextToImage,
-  },
-  methods: {
-    complete() {
-      const { unit_id, book_id } = this.$route.query;
-      this.$router.push({
-        name: "Dashboard",
-        query: { value: 1, unit_id, book_id },
-      });
+    components: {
+        TextToImage,
     },
-    goToPage(page) {
-      this.$router.push({ name: page });
-    },
-    loadYouTubeAPI() {
-      return new Promise((resolve, reject) => {
-        if (window.YT && window.YT.Player) {
-          resolve(); // API가 이미 로드된 경우
-        } else {
-          const script = document.createElement("script");
-          script.src = "https://www.youtube.com/iframe_api";
-          script.onload = () => {
-            // 스크립트가 로드되면, `YT` 객체가 준비될 때까지 기다립니다.
-            const checkYTReady = setInterval(() => {
-              if (window.YT && window.YT.Player) {
-                clearInterval(checkYTReady);
-                resolve();
-              }
-            }, 100); // 100ms마다 `YT` 객체가 준비되었는지 확인
-          };
-          script.onerror = () =>
-            reject(new Error("Failed to load the YouTube API script"));
-          document.body.appendChild(script);
-        }
-      });
-    },
-    initializePlayer() {
-      if (!window.YT || !window.YT.Player) {
-        console.error("YouTube Player is not available");
-        return;
-      }
-      new window.YT.Player(this.$refs.youtubePlayer, {
-        height: "550",
-        width: "950",
-        videoId: "VloEiK4Ihj8", // 비디오 ID
-        events: {
-          onReady: this.onPlayerReady,
+    methods: {
+        complete() {
+            const { unit_id, book_id } = this.$route.query;
+            this.$router.push({
+                name: 'Dashboard',
+                query: { value: 1, unit_id, book_id },
+            });
         },
-      });
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        loadYouTubeAPI() {
+            return new Promise((resolve, reject) => {
+                if (window.YT && window.YT.Player) {
+                    resolve(); // API가 이미 로드된 경우
+                } else {
+                    const script = document.createElement('script');
+                    script.src = 'https://www.youtube.com/iframe_api';
+                    script.onload = () => {
+                        // 스크립트가 로드되면, `YT` 객체가 준비될 때까지 기다립니다.
+                        const checkYTReady = setInterval(() => {
+                            if (window.YT && window.YT.Player) {
+                                clearInterval(checkYTReady);
+                                resolve();
+                            }
+                        }, 100); // 100ms마다 `YT` 객체가 준비되었는지 확인
+                    };
+                    script.onerror = () => reject(new Error('Failed to load the YouTube API script'));
+                    document.body.appendChild(script);
+                }
+            });
+        },
+        initializePlayer() {
+            if (!window.YT || !window.YT.Player) {
+                console.error('YouTube Player is not available');
+                return;
+            }
+            new window.YT.Player(this.$refs.youtubePlayer, {
+                height: '550',
+                width: '950',
+                videoId: 'VloEiK4Ihj8', // 비디오 ID
+                events: {
+                    onReady: this.onPlayerReady,
+                },
+            });
+        },
+        onPlayerReady(event) {
+            event.target.playVideo(); // 비디오가 준비되면 자동 재생
+        },
     },
-    onPlayerReady(event) {
-      event.target.playVideo(); // 비디오가 준비되면 자동 재생
+    mounted() {
+        this.loadYouTubeAPI()
+            .then(() => {
+                this.initializePlayer();
+            })
+            .catch((error) => {
+                console.error('Error loading YouTube API:', error);
+            });
     },
-  },
-  mounted() {
-    this.loadYouTubeAPI()
-      .then(() => {
-        this.initializePlayer();
-      })
-      .catch((error) => {
-        console.error("Error loading YouTube API:", error);
-      });
-  },
+    components: {
+        BookInfo: BookInfo,
+    },
 };
 </script>
 
 <style scoped>
 .youtube-player {
-  width: 950px;
-  /* 플레이어의 가로 크기 */
-  height: 550px;
-  /* 플레이어의 세로 크기 */
+    width: 950px;
+    /* 플레이어의 가로 크기 */
+    height: 550px;
+    /* 플레이어의 세로 크기 */
 }
 
 .completeBtn {
-  margin-right: 100px;
-  background-color: #ffba08;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 28px;
-  font-family: "ONEMobilePOPOTF";
+    margin-right: 100px;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
 }
 </style>

7732467

1533a48

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

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

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


             </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>
+            <BookInfo />
             <div class="flex">
                 <TextToImage />
                 <button class="completeBtn" @click="complete">학습 종료</button>

 
 <script>
 import TextToImage from '../../../component/TextToImage.vue';
+import BookInfo from '../../../component/BookInfo.vue';
 import axios from 'axios';
 export default {
     data() {

     },
     components: {
         TextToImage: TextToImage,
+        BookInfo: BookInfo,
     },
     mounted() {
         this.fetchText();

7732467

1533a48

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

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

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


             </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>
+            <BookInfo />
             <div class="flex">
                 <TextToImage />
                 <button class="completeBtn" @click="complete">학습 종료</button>

 
 <script>
 import TextToImage from '../../../component/TextToImage.vue';
+import BookInfo from '../../../component/BookInfo.vue';
 import axios from 'axios';
 export default {
     data() {

     },
     components: {
         TextToImage: TextToImage,
+        BookInfo: BookInfo,
     },
     mounted() {
         this.fetchText();

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter2.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/new_img/logo_v2.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('Chapter1_3')"> @click="goToPrevPage" -->
-      <div
-        class="pre-btn"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="goToPrevPage"
-      >
-        <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>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="vocaGroup">
-            <div
-              v-for="word in wordList"
-              :key="word.wdId"
-              class="flex justify-between mb80 word-item"
-            >
-              <article class="flex align-center">
-                <div class="imgGroup mr30">
-                  <img
-                    :src="word.fileRpath"
-                    data-num="1"
-                    style="width: 200px"
-                  />
+    <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/new_img/logo_v2.png" alt="" />
                 </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>
-                  <audio
-                    id="audio-family"
-                    src="client/resources/audio/family.wav"
-                    preload="auto"
-                  ></audio>
-                  <div>
-                    <h3>{{ word.wdNm }}</h3>
-                    <div class="flex align-center mt10">
-                      <p class="yellow-box">명</p>
-                      <span class="title1">{{ word.wdMnng }}</span>
-                    </div>
-                  </div>
-                </div>
-              </article>
+            </router-link>
+        </div>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
+        </div>
+        <div class="flex justify-between align-center">
+            <!-- <div class="pre-btn" @click="goToPage('Chapter1_3')"> @click="goToPrevPage" -->
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="goToPrevPage">
+                <img src="../../../../resources/img/left.png" alt="" />
             </div>
-          </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>
+                </div>
+
+                <div class="flex justify-center">
+                    <div class="vocaGroup">
+                        <div v-for="word in wordList" :key="word.wdId" class="flex justify-between mb80 word-item">
+                            <article class="flex align-center">
+                                <div class="imgGroup mr30">
+                                    <img :src="word.fileRpath" 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>
+                                    <audio
+                                        id="audio-family"
+                                        src="client/resources/audio/family.wav"
+                                        preload="auto"
+                                    ></audio>
+                                    <div>
+                                        <h3>{{ word.wdNm }}</h3>
+                                        <div class="flex align-center mt10">
+                                            <p class="yellow-box">명</p>
+                                            <span class="title1">{{ word.wdMnng }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="next-btn" @click="goToNextPage">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
         </div>
-      </div>
-      <div class="next-btn" @click="goToNextPage">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
-
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      wdBookId: "",
-      wordList: [],
+    data() {
+        return {
+            wdBookId: '',
+            wordList: [],
 
-      wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
-      currentWdBkIndex: 0, // 현재 단어장 인덱스
-      wdBookTypeIdState: "", // 이동할 페이지 타입 id
-      wordBookType: "", // 이동할 페이지
+            wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
+            currentWdBkIndex: 0, // 현재 단어장 인덱스
+            wdBookTypeIdState: '', // 이동할 페이지 타입 id
+            wordBookType: '', // 이동할 페이지
 
-      hiddenState: false,
-      seq: this.$store.getters.seqNum,
-    };
-  },
-  methods: {
-    pageSetting() {
-      this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
-      this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
-      this.wdBookId =
-        this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
-
-      if (this.currentWdBkIndex - 1 < 0) {
-        this.hiddenState = true;
-      }
-      this.fetchWordList();
+            hiddenState: false,
+            seq: this.$store.getters.seqNum,
+        };
     },
+    methods: {
+        pageSetting() {
+            this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
+            this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
+            this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
 
-    async fetchWordList() {
-      try {
-        const response = await axios.post("/word/getWordsByBookId.json", {
-          wdBookId: this.wdBookId,
-        });
+            if (this.currentWdBkIndex - 1 < 0) {
+                this.hiddenState = true;
+            }
+            this.fetchWordList();
+        },
 
-        const wordList = response.data;
+        async fetchWordList() {
+            try {
+                const response = await axios.post('/word/getWordsByBookId.json', {
+                    wdBookId: this.wdBookId,
+                });
 
-        // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리
-        const requests = wordList.map(async (word) => {
-          const fileResponse = await axios.post("/file/find.json", {
-            file_mng_id: word.fileMngId,
-          });
+                const wordList = response.data;
 
-          const fileRpath =
-            fileResponse.data.list.length > 0
-              ? fileResponse.data.list[0].fileRpath
-              : null;
-          console.log("각 단어의 fileRpath: ", fileRpath);
+                // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리
+                const requests = wordList.map(async (word) => {
+                    const fileResponse = await axios.post('/file/find.json', {
+                        file_mng_id: word.fileMngId,
+                    });
 
-          word.fileRpath = "http://165.229.169.113:9080/" + fileRpath; // fileRpath 값을 해당 객체에 추가
-        });
+                    const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
+                    console.log('각 단어의 fileRpath: ', fileRpath);
 
-        // 모든 요청이 완료될 때까지 대기
-        await Promise.all(requests);
+                    word.fileRpath = 'http://165.229.169.113:9080/' + fileRpath; // fileRpath 값을 해당 객체에 추가
+                });
 
-        // 최종적으로 wordList를 설정
-        this.wordList = wordList;
-        console.log("단어 리스트 -> ", this.wordList);
-      } catch (error) {
-        console.error("단어 목록을 불러오는 중 오류 발생:", error);
-      }
+                // 모든 요청이 완료될 때까지 대기
+                await Promise.all(requests);
+
+                // 최종적으로 wordList를 설정
+                this.wordList = wordList;
+                console.log('단어 리스트 -> ', this.wordList);
+            } catch (error) {
+                console.error('단어 목록을 불러오는 중 오류 발생:', error);
+            }
+        },
+
+        async goToPrevPage() {
+            if (this.currentWdBkIndex - 1 < 0) {
+                alert('단어장 첫번째 페이지 입니다');
+            } else {
+                this.currentWdBkIndex--;
+                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+
+                try {
+                    const response = await axios.post('/wordbook/find.json', {
+                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+                    });
+                    this.wdBookTypeIdState = response.data.wdBookTypeId;
+                    console.log('이전 단어장 타입 id: ', this.wdBookTypeIdState);
+
+                    switch (this.wdBookTypeIdState) {
+                        case '1':
+                            this.wordBookType = 'Chapter2';
+                            break;
+                        case '2':
+                            this.wordBookType = 'Chapter2_3';
+                            break;
+                        case '3':
+                            this.wordBookType = 'Chapter2_2';
+                            break;
+                        case '4':
+                            this.wordBookType = 'Chapter2_9';
+                            break;
+                        case '5':
+                            this.wordBookType = 'Chapter2_4';
+                            break;
+                        default:
+                            this.wordBookType = null;
+                    }
+
+                    this.goToPage(this.wordBookType);
+                } catch (error) {
+                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
+                }
+            }
+        },
+
+        async goToNextPage() {
+            if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
+                alert('단어장 마지막 페이지 입니다');
+                this.complete();
+            } else {
+                this.currentWdBkIndex++;
+                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+
+                try {
+                    const response = await axios.post('/wordbook/find.json', {
+                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+                    });
+                    this.wdBookTypeIdState = response.data.wdBookTypeId;
+                    console.log('다음 단어장 타입 id: ', this.wdBookTypeIdState);
+
+                    switch (this.wdBookTypeIdState) {
+                        case '1':
+                            this.wordBookType = 'Chapter2';
+                            break;
+                        case '2':
+                            this.wordBookType = 'Chapter2_3';
+                            break;
+                        case '3':
+                            this.wordBookType = 'Chapter2_2';
+                            break;
+                        case '4':
+                            this.wordBookType = 'Chapter2_9';
+                            break;
+                        case '5':
+                            this.wordBookType = 'Chapter2_4';
+                            break;
+                        default:
+                            this.wordBookType = null;
+                    }
+
+                    this.goToPage(this.wordBookType);
+                } catch (error) {
+                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
+                }
+            }
+        },
+
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+
+        playAudio(audioId) {
+            const audio = document.getElementById(audioId);
+            if (audio) {
+                audio.play();
+            } else {
+                console.error(`Audio element with ID ${audioId} not found.`);
+            }
+        },
+
+        complete() {
+            const { unit_id, book_id } = this.$route.query;
+            this.$router.push({
+                name: 'Dashboard',
+                query: { value: this.seq, unit_id, book_id },
+            });
+        },
     },
-
-    async goToPrevPage() {
-      if (this.currentWdBkIndex - 1 < 0) {
-        alert("단어장 첫번째 페이지 입니다");
-      } else {
-        this.currentWdBkIndex--;
-        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
-
-        try {
-          const response = await axios.post("/wordbook/find.json", {
-            wdBookId:
-              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
-          });
-          this.wdBookTypeIdState = response.data.wdBookTypeId;
-          console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
-
-          switch (this.wdBookTypeIdState) {
-            case "1":
-              this.wordBookType = "Chapter2";
-              break;
-            case "2":
-              this.wordBookType = "Chapter2_3";
-              break;
-            case "3":
-              this.wordBookType = "Chapter2_2";
-              break;
-            case "4":
-              this.wordBookType = "Chapter2_9";
-              break;
-            case "5":
-              this.wordBookType = "Chapter2_4";
-              break;
-            default:
-              this.wordBookType = null;
-          }
-
-          this.goToPage(this.wordBookType);
-        } catch (error) {
-          console.error("단어장 정보 불러오는 중 오류 발생:", error);
-        }
-      }
+    mounted() {
+        console.log('챕터2 단어장 마운트 완료');
+        this.pageSetting();
     },
-
-    async goToNextPage() {
-      if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
-        alert("단어장 마지막 페이지 입니다");
-        this.complete();
-      } else {
-        this.currentWdBkIndex++;
-        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
-
-        try {
-          const response = await axios.post("/wordbook/find.json", {
-            wdBookId:
-              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
-          });
-          this.wdBookTypeIdState = response.data.wdBookTypeId;
-          console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
-
-          switch (this.wdBookTypeIdState) {
-            case "1":
-              this.wordBookType = "Chapter2";
-              break;
-            case "2":
-              this.wordBookType = "Chapter2_3";
-              break;
-            case "3":
-              this.wordBookType = "Chapter2_2";
-              break;
-            case "4":
-              this.wordBookType = "Chapter2_9";
-              break;
-            case "5":
-              this.wordBookType = "Chapter2_4";
-              break;
-            default:
-              this.wordBookType = null;
-          }
-
-          this.goToPage(this.wordBookType);
-        } catch (error) {
-          console.error("단어장 정보 불러오는 중 오류 발생:", error);
-        }
-      }
+    components: {
+        BookInfo: BookInfo,
     },
-
-    goToPage(page) {
-      this.$router.push({ name: page });
-    },
-
-    playAudio(audioId) {
-      const audio = document.getElementById(audioId);
-      if (audio) {
-        audio.play();
-      } else {
-        console.error(`Audio element with ID ${audioId} not found.`);
-      }
-    },
-
-    complete() {
-      const { unit_id, book_id } = this.$route.query;
-      this.$router.push({
-        name: "Dashboard",
-        query: { value: this.seq, unit_id, book_id },
-      });
-    },
-  },
-  mounted() {
-    console.log("챕터2 단어장 마운트 완료");
-    this.pageSetting();
-  },
 };
 </script>
 
 <style scoped>
 .vocaGroup {
-  display: flex;
-  flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .word-item {
-  width: 49%;
+    width: 49%;
 }
 
 .grid-container {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
 }
 .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>

7732467

1533a48

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

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

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


 <template>
-  <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-      <router-link to="/MyPlan.page">
-        <div class="logo mb25">
-          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
-        </div>
-      </router-link>
-    </div>
-    <div class="title-box mb25 flex align-center mt40">
-      <span class="title mr40">1. Hello WORLD</span>
-      <span class="subtitle">my name is dd</span>
-    </div>
-    <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_2')">
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <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 id="Chapter1_1" class="content-wrap">
+        <div style="margin: 30px 0px 50px">
+            <router-link to="/MyPlan.page">
+                <div class="logo mb25">
+                    <img src="../../../../resources/img/new_img/logo_v2.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>
+            </router-link>
         </div>
-      </div>
-      <div class="next-btn" @click="goToPage('Chapter2_4')">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
+        <div class="title-box mb25 flex align-center mt40">
+            <BookInfo />
+        </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="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_4')">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
-import SvgIcon from "@jamescoyle/vue-icon";
-import { mdiStop } from "@mdi/js";
+import axios from 'axios';
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiStop } from '@mdi/js';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      isRecording: false, // 녹음 중 여부
-      mediaRecorder: null,
-      audioChunks: [], // 녹음된 오디오 데이터
-      audioBlob: null, // 오디오 Blob 객체
-      transcription: null, // 서버에서 받아온 텍스트 결과
-      stream: null, // MediaStream 객체
+    data() {
+        return {
+            isRecording: false, // 녹음 중 여부
+            mediaRecorder: null,
+            audioChunks: [], // 녹음된 오디오 데이터
+            audioBlob: null, // 오디오 Blob 객체
+            transcription: null, // 서버에서 받아온 텍스트 결과
+            stream: null, // MediaStream 객체
 
-      path: mdiStop,
+            path: mdiStop,
 
-      /* audioURL : null // 오디오 URL 객체 */
+            /* audioURL : null // 오디오 URL 객체 */
 
-      word: "apple",
-      mean: "사과",
-      imageSrc:
-        "http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png",
-    };
-  },
-  methods: {
-    goToPage(page) {
-      this.$router.push({ name: page });
+            word: 'apple',
+            mean: '사과',
+            imageSrc: 'http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png',
+        };
     },
-    // 녹음 시작/중지 토글
-    async toggleRecording() {
-      if (this.isRecording) {
-        console.log("녹음 그만!");
-        this.stopRecording(); // 녹음 중이면 중지
-      } else {
-        console.log("녹음 시작!");
-        await this.startRecording(); // 녹음 중이 아니면 녹음 시작
-      }
+    methods: {
+        goToPage(page) {
+            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);
+            }
+        },
     },
-
-    // 녹음 시작
-    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; // 녹음 상태 변경
+    watch: {},
+    computed: {},
+    components: {
+        SvgIcon,
+        BookInfo: BookInfo,
     },
-
-    // 녹음 중지
-    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() {},
+    mounted() {},
 };
 </script>
 <style scoped>
 .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;
 }
 </style>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter2_10.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/new_img/logo_v2.png" alt="" />
+    <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/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </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"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="previousProblem()"
-      >
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <div class="content title-box">
-        <div style="display: flex; justify-content: space-between">
-          <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
-          <button id="returnButton" @click="returnPage" style="margin: 4rem">
-            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
-            <p>되돌리기</p>
-          </button>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
         </div>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">
-            방문이 자물쇠로 잠겨져 있네? 세 개 중에 맞는 열쇠 하나를 찾아줘!
-          </p>
-        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <div class="content title-box">
+                <div style="display: flex; justify-content: space-between">
+                    <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
+                    <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>
+                </div>
 
-        <div class="flex align-center justify-center" style="gap: 113px">
-          <div class="imgGroup">
-            <div class="flex" style="gap: 60px">
-              <button>
-                <img src="../../../../resources/img/img82_42s.png" alt="" />
-                <p>{{ beforeQuestion }}</p>
-              </button>
-              <button>
-                <img src="../../../../resources/img/img159_42s.png" alt="" />
-              </button>
-              <button>
-                <img src="../../../../resources/img/img83_42s.png" alt="" />
-                <p>{{ afterQuestion }}</p>
-              </button>
-            </div>
-          </div>
-          <div class="pickGroup">
-            <div class="pickImg">
-              <img src="../../../../resources/img/img84_42s.png" alt="" />
-              <img src="../../../../resources/img/img85_42s.png" alt="" />
-              <img src="../../../../resources/img/img86_42s.png" alt="" />
-            </div>
-            <div class="pickChoice">
-              <article class="flex justify-center mb50" style="gap: 60px">
-                <div class="flex" style="align-items: center">
-                  <button @click="handleClick(1)">
-                    <img
-                      src="../../../../resources/img/img136_71s.png"
-                      alt=""
-                    />
-                    <p :class="{ active: selectedButton === 1 }">1</p>
-                  </button>
-                  <p>{{ choice[0] }}</p>
+                <div class="flex align-center justify-center" style="gap: 113px">
+                    <div class="imgGroup">
+                        <div class="flex" style="gap: 60px">
+                            <button>
+                                <img src="../../../../resources/img/img82_42s.png" alt="" />
+                                <p>{{ beforeQuestion }}</p>
+                            </button>
+                            <button>
+                                <img src="../../../../resources/img/img159_42s.png" alt="" />
+                            </button>
+                            <button>
+                                <img src="../../../../resources/img/img83_42s.png" alt="" />
+                                <p>{{ afterQuestion }}</p>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="pickGroup">
+                        <div class="pickImg">
+                            <img src="../../../../resources/img/img84_42s.png" alt="" />
+                            <img src="../../../../resources/img/img85_42s.png" alt="" />
+                            <img src="../../../../resources/img/img86_42s.png" alt="" />
+                        </div>
+                        <div class="pickChoice">
+                            <article class="flex justify-center mb50" style="gap: 60px">
+                                <div class="flex" style="align-items: center">
+                                    <button @click="handleClick(1)">
+                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                        <p :class="{ active: selectedButton === 1 }">1</p>
+                                    </button>
+                                    <p>{{ choice[0] }}</p>
+                                </div>
+                            </article>
+                            <article class="flex justify-center mb50" style="gap: 60px">
+                                <div class="flex" style="align-items: center">
+                                    <button @click="handleClick(2)">
+                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                        <p :class="{ active: selectedButton === 2 }">2</p>
+                                    </button>
+                                    <p>{{ choice[1] }}</p>
+                                </div>
+                            </article>
+                            <article class="flex justify-center" style="gap: 60px">
+                                <div class="flex" style="align-items: center">
+                                    <button @click="handleClick(3)">
+                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                        <p :class="{ active: selectedButton === 3 }">3</p>
+                                    </button>
+                                    <p>{{ choice[2] }}</p>
+                                </div>
+                            </article>
+                        </div>
+                    </div>
                 </div>
-              </article>
-              <article class="flex justify-center mb50" style="gap: 60px">
-                <div class="flex" style="align-items: center">
-                  <button @click="handleClick(2)">
-                    <img
-                      src="../../../../resources/img/img136_71s.png"
-                      alt=""
-                    />
-                    <p :class="{ active: selectedButton === 2 }">2</p>
-                  </button>
-                  <p>{{ choice[1] }}</p>
+                <div style="text-align: right">
+                    <button class="answerButton" @click="confirmAnswer">정답 확인</button>
                 </div>
-              </article>
-              <article class="flex justify-center" style="gap: 60px">
-                <div class="flex" style="align-items: center">
-                  <button @click="handleClick(3)">
-                    <img
-                      src="../../../../resources/img/img136_71s.png"
-                      alt=""
-                    />
-                    <p :class="{ active: selectedButton === 3 }">3</p>
-                  </button>
-                  <p>{{ choice[2] }}</p>
-                </div>
-              </article>
             </div>
-          </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
         </div>
-        <div style="text-align: right">
-          <button class="answerButton" @click="confirmAnswer">정답 확인</button>
-        </div>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
-
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      selectedButton: null, // 선택된 버튼을 추적하기 위한 데이터
+    data() {
+        return {
+            selectedButton: null, // 선택된 버튼을 추적하기 위한 데이터
 
-      example: "",
-      beforeQuestion: "",
-      afterQuestion: "",
-      choice: [],
-      answer: "",
+            example: '',
+            beforeQuestion: '',
+            afterQuestion: '',
+            choice: [],
+            answer: '',
 
-      prblm_id: [],
-      problemData: [],
-      // problemArr: [],
-      answerArr: [],
+            prblm_id: [],
+            problemData: [],
+            // problemArr: [],
+            answerArr: [],
 
-      seq: this.$store.getters.seqNum,
+            seq: this.$store.getters.seqNum,
 
-      hiddenState: false,
-    };
-  },
-  methods: {
-    complete() {
-      // 로컬 스토리지에서 currentDashboard 값을 가져옴
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
+            hiddenState: false,
+        };
+    },
+    methods: {
+        complete() {
+            // 로컬 스토리지에서 currentDashboard 값을 가져옴
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
 
-        const { unit_id, book_id } = this.$route.query;
-        if (currentDashboard === "Learning") {
-          // Learning 모드일 때 Dashboard로 이동
-          this.$router.push({
-            name: "Dashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
-        } else if (currentDashboard === "AI") {
-          // AI 모드일 때 AIDashboard로 이동
-          this.$router.push({
-            name: "AIDashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
+                const { unit_id, book_id } = this.$route.query;
+                if (currentDashboard === 'Learning') {
+                    // Learning 모드일 때 Dashboard로 이동
+                    this.$router.push({
+                        name: 'Dashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                } else if (currentDashboard === 'AI') {
+                    // AI 모드일 때 AIDashboard로 이동
+                    this.$router.push({
+                        name: 'AIDashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                }
+            } else {
+                console.error('currentDashboard 값이 없습니다.');
+            }
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+
+        handleClick(buttonNumber) {
+            this.selectedButton = buttonNumber; // 선택된 버튼 번호 저장
+        },
+
+        confirmAnswer() {
+            if (this.selectedButton === null) {
+                alert('정답을 선택해주세요.');
+                return;
+            }
+            if (this.selectedButton === this.answer) {
+                alert('정답입니다!');
+                this.nextProblem();
+            } else {
+                alert('오답입니다!');
+            }
+            this.selectedButton = null;
+        },
+
+        returnPage() {
+            window.location.reload();
+        },
+        nextProblem() {
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            } else {
+                // 마지막 문제면 이동
+                // this.goToPage("Chapter4");
+                alert('문제 학습 완료');
+                this.complete();
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+
+        // fetchProblemData() {
+        //   axios({
+        //     url: "/problem/problemInfo.json",
+        //     method: "post",
+        //     headers: {
+        //       "Content-Type": "application/json; charset=UTF-8",
+        //     },
+        //     data: {
+        //       prblmId: this.prblm_id.prblm_id,
+        //     },
+        //   })
+        //     .then((response) => {
+        //       this.problemData = response.data;
+        //       console.log("problemData", this.problemData);
+
+        //       this.sortingProblem();
+        //     })
+        //     .catch((error) => {
+        //       this.state = "noProblem";
+        //       console.error("Error fetching problemData:", error);
+        //     });
+        // },
+
+        fetchProblemData() {
+            // 로컬 스토리지에서 currentDashboard를 확인
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
+
+                if (currentDashboard === 'AI') {
+                    // AI 모드일 경우 로컬 스토리지에서 currentLearningId를 가져와 사용
+                    const currentLearningId = parsedState.currentLearningIds;
+                    console.log('AI 모드에서 currentLearningId 사용:', currentLearningId);
+
+                    // currentLearningId로 문제 데이터 가져오기
+                    axios({
+                        url: '/problem/problemInfo.json',
+                        method: 'post',
+                        headers: {
+                            'Content-Type': 'application/json; charset=UTF-8',
+                        },
+                        data: {
+                            prblmId: currentLearningId, // 로컬스토리지에서 가져온 currentLearningId 사용
+                        },
+                    })
+                        .then((response) => {
+                            this.problemData = response.data;
+                            console.log('AI 모드 problemData', this.problemData);
+                            this.sortingProblem();
+                        })
+                        .catch((error) => {
+                            this.state = 'noProblem';
+                            console.error('Error fetching AI problemData:', error);
+                        });
+                } else {
+                    // Learning 모드일 경우 기존 로직 사용
+                    console.log('Learning 모드에서 prblm_id 사용:', this.prblm_id);
+
+                    axios({
+                        url: '/problem/problemInfo.json',
+                        method: 'post',
+                        headers: {
+                            'Content-Type': 'application/json; charset=UTF-8',
+                        },
+                        data: {
+                            prblmId: this.prblm_id.prblm_id, // 기존 방식 사용
+                        },
+                    })
+                        .then((response) => {
+                            this.problemData = response.data;
+                            console.log('Learning 모드 problemData', this.problemData);
+                            this.sortingProblem();
+                        })
+                        .catch((error) => {
+                            this.state = 'noProblem';
+                            console.error('Error fetching problemData:', error);
+                        });
+                }
+            } else {
+                console.error('vuexState가 로컬스토리지에 없습니다.');
+            }
+        },
+
+        sortingProblem() {
+            this.example = this.problemData.problem.prblmExpln;
+            const parts = this.example.split('/');
+            if (parts.length === 3) {
+                this.beforeQuestion = parts[0];
+                this.afterQuestion = parts[1];
+            }
+
+            for (let i = 0; i < this.problemData.problemDetail.length; i++) {
+                // this.answerArr[i].prblmDtlExpln =
+                //   this.problemData.problemDetail[i].prblmDtlExpln;
+                // this.answerArr[i].prblmYn = this.problemData.problemDetail[i].prblmYn;
+                this.answerArr[i] = this.problemData.problemDetail[i];
+                this.choice[i] = this.problemData.problemDetail[i].prblmDtlExpln;
+            }
+            console.log('answerArr', this.answerArr);
+
+            for (let i = 0; i < this.answerArr.length; i++) {
+                if (this.answerArr[i].prblmYn == 'Y') {
+                    this.answer = i + 1;
+                    break;
+                }
+            }
+        },
+    },
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        this.prblm_id = this.currentLearningId;
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    mounted() {
+        this.fetchProblemData();
+        if (this.currentProblemIndex == 0) {
+            this.hiddenState = true;
         }
-      } else {
-        console.error("currentDashboard 값이 없습니다.");
-      }
     },
-    goToPage(page) {
-      this.$router.push({ name: page });
+    components: {
+        BookInfo: BookInfo,
     },
-
-    handleClick(buttonNumber) {
-      this.selectedButton = buttonNumber; // 선택된 버튼 번호 저장
-    },
-
-    confirmAnswer() {
-      if (this.selectedButton === null) {
-        alert("정답을 선택해주세요.");
-        return;
-      }
-      if (this.selectedButton === this.answer) {
-        alert("정답입니다!");
-        this.nextProblem();
-      } else {
-        alert("오답입니다!");
-      }
-      this.selectedButton = null;
-    },
-
-    returnPage() {
-      window.location.reload();
-    },
-    nextProblem() {
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        // this.goToPage("Chapter4");
-        alert("문제 학습 완료");
-        this.complete();
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-
-    // fetchProblemData() {
-    //   axios({
-    //     url: "/problem/problemInfo.json",
-    //     method: "post",
-    //     headers: {
-    //       "Content-Type": "application/json; charset=UTF-8",
-    //     },
-    //     data: {
-    //       prblmId: this.prblm_id.prblm_id,
-    //     },
-    //   })
-    //     .then((response) => {
-    //       this.problemData = response.data;
-    //       console.log("problemData", this.problemData);
-
-    //       this.sortingProblem();
-    //     })
-    //     .catch((error) => {
-    //       this.state = "noProblem";
-    //       console.error("Error fetching problemData:", error);
-    //     });
-    // },
-
-    fetchProblemData() {
-      // 로컬 스토리지에서 currentDashboard를 확인
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
-
-        if (currentDashboard === "AI") {
-          // AI 모드일 경우 로컬 스토리지에서 currentLearningId를 가져와 사용
-          const currentLearningId = parsedState.currentLearningIds;
-          console.log("AI 모드에서 currentLearningId 사용:", currentLearningId);
-
-          // currentLearningId로 문제 데이터 가져오기
-          axios({
-            url: "/problem/problemInfo.json",
-            method: "post",
-            headers: {
-              "Content-Type": "application/json; charset=UTF-8",
-            },
-            data: {
-              prblmId: currentLearningId, // 로컬스토리지에서 가져온 currentLearningId 사용
-            },
-          })
-            .then((response) => {
-              this.problemData = response.data;
-              console.log("AI 모드 problemData", this.problemData);
-              this.sortingProblem();
-            })
-            .catch((error) => {
-              this.state = "noProblem";
-              console.error("Error fetching AI problemData:", error);
-            });
-
-        } else {
-          // Learning 모드일 경우 기존 로직 사용
-          console.log("Learning 모드에서 prblm_id 사용:", this.prblm_id);
-
-          axios({
-            url: "/problem/problemInfo.json",
-            method: "post",
-            headers: {
-              "Content-Type": "application/json; charset=UTF-8",
-            },
-            data: {
-              prblmId: this.prblm_id.prblm_id, // 기존 방식 사용
-            },
-          })
-            .then((response) => {
-              this.problemData = response.data;
-              console.log("Learning 모드 problemData", this.problemData);
-              this.sortingProblem();
-            })
-            .catch((error) => {
-              this.state = "noProblem";
-              console.error("Error fetching problemData:", error);
-            });
-        }
-      } else {
-        console.error("vuexState가 로컬스토리지에 없습니다.");
-      }
-    },
-
-    sortingProblem() {
-      this.example = this.problemData.problem.prblmExpln;
-      const parts = this.example.split("/");
-      if (parts.length === 3) {
-        this.beforeQuestion = parts[0];
-        this.afterQuestion = parts[1];
-      }
-
-      for (let i = 0; i < this.problemData.problemDetail.length; i++) {
-        // this.answerArr[i].prblmDtlExpln =
-        //   this.problemData.problemDetail[i].prblmDtlExpln;
-        // this.answerArr[i].prblmYn = this.problemData.problemDetail[i].prblmYn;
-        this.answerArr[i] = this.problemData.problemDetail[i];
-        this.choice[i] = this.problemData.problemDetail[i].prblmDtlExpln;
-      }
-      console.log("answerArr", this.answerArr);
-
-      for (let i = 0; i < this.answerArr.length; i++) {
-        if (this.answerArr[i].prblmYn == "Y") {
-          this.answer = i + 1;
-          break;
-        }
-      }
-    },
-  },
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    this.prblm_id = this.currentLearningId;
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  mounted() {
-    this.fetchProblemData();
-    if (this.currentProblemIndex == 0) {
-      this.hiddenState = true;
-    }
-  },
 };
 </script>
 
 <style scoped>
 .imgGroup {
-  width: fit-content;
+    width: fit-content;
 }
 
 .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: 23px;
-  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: 23px;
+    font-family: 'ONEMobilePOP';
 }
 
 .pickGroup {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 40px;
 }
 
 .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%);
 }
 
 .pickGroup article img {
-  object-fit: contain;
-  width: -webkit-fill-available;
+    object-fit: contain;
+    width: -webkit-fill-available;
 }
 
 .pickGroup article > div > p {
-  font-size: 25px;
-  white-space: nowrap;
-  /* 텍스트가 줄 바꿈 없이 한 줄로 표시되도록 설정 */
+    font-size: 25px;
+    white-space: nowrap;
+    /* 텍스트가 줄 바꿈 없이 한 줄로 표시되도록 설정 */
 }
 
 .pickGroup button p.active {
-  color: #000;
-  /* 선택된 버튼의 숫자 색을 더 진하게 */
+    color: #000;
+    /* 선택된 버튼의 숫자 색을 더 진하게 */
 }
 
 .pickImg {
-  display: flex;
-  flex-direction: column;
-  gap: 70px;
+    display: flex;
+    flex-direction: column;
+    gap: 70px;
 }
 
 .pickChoice {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 }
 
 .answerButton {
-  background-color: #ffc107;
-  border-radius: 30px;
-  padding: 20px 50px;
-  margin: 40px;
-  font-family: "ONEMobileOTF-Regular";
-  font-weight: bold;
-  font-size: 24px;
+    background-color: #ffc107;
+    border-radius: 30px;
+    padding: 20px 50px;
+    margin: 40px;
+    font-family: 'ONEMobileOTF-Regular';
+    font-weight: bold;
+    font-size: 24px;
 }
 
 .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>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter2_11.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/new_img/logo_v2.png" alt="" />
+    <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/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </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"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="previousProblem()"
-      >
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <div class="content title-box">
-        <div style="display: flex; justify-content: space-between">
-          <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
-          <button id="returnButton" @click="returnPage" style="margin: 4rem">
-            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
-            <p>되돌리기</p>
-          </button>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
         </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <div class="content title-box">
+                <div style="display: flex; justify-content: space-between">
+                    <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
+                    <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>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+                <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="text-ct">
-          <div class="imgGroup flex align-start justify-center mt30">
-            <img src="../../../../resources/img/img87_43s.png" alt="" />
-            <div class="inputGroup">
-              <p>{{ beforeQuestion }}</p>
-              <p>__________</p>
-              <p>{{ afterQuestion }}</p>
+                <div class="text-ct">
+                    <div class="imgGroup flex align-start justify-center mt30">
+                        <img src="../../../../resources/img/img87_43s.png" alt="" />
+                        <div class="inputGroup">
+                            <p>{{ beforeQuestion }}</p>
+                            <p>__________</p>
+                            <p>{{ afterQuestion }}</p>
+                        </div>
+                    </div>
+                    <div class="pickGroup">
+                        <article class="flex justify-center" style="gap: 60px; bottom: 159px; left: 242px">
+                            <div class="flex">
+                                <button @click="handleClick(1)">
+                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                    <p :class="{ active: selectedButton === 1 }">1</p>
+                                </button>
+                                <p>{{ choice[0] }}</p>
+                            </div>
+                        </article>
+                        <article class="flex justify-center" style="gap: 60px; bottom: 159px; right: 559px">
+                            <div class="flex">
+                                <button @click="handleClick(2)">
+                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                    <p :class="{ active: selectedButton === 2 }">2</p>
+                                </button>
+                                <p>{{ choice[1] }}</p>
+                            </div>
+                        </article>
+                        <div class="answerBox">
+                            <button class="answerButton" @click="confirmAnswer">정답 확인</button>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-          <div class="pickGroup">
-            <article
-              class="flex justify-center"
-              style="gap: 60px; bottom: 159px; left: 242px"
-            >
-              <div class="flex">
-                <button @click="handleClick(1)">
-                  <img src="../../../../resources/img/img136_71s.png" alt="" />
-                  <p :class="{ active: selectedButton === 1 }">1</p>
-                </button>
-                <p>{{ choice[0] }}</p>
-              </div>
-            </article>
-            <article
-              class="flex justify-center"
-              style="gap: 60px; bottom: 159px; right: 559px"
-            >
-              <div class="flex">
-                <button @click="handleClick(2)">
-                  <img src="../../../../resources/img/img136_71s.png" alt="" />
-                  <p :class="{ active: selectedButton === 2 }">2</p>
-                </button>
-                <p>{{ choice[1] }}</p>
-              </div>
-            </article>
-            <div class="answerBox">
-              <button class="answerButton" @click="confirmAnswer">
-                정답 확인
-              </button>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
             </div>
-          </div>
         </div>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      selectedButton: null,
+    data() {
+        return {
+            selectedButton: null,
 
-      beforeQuestion: "",
-      afterQuestion: "",
+            beforeQuestion: '',
+            afterQuestion: '',
 
-      choice: [],
-      answer: 1,
+            choice: [],
+            answer: 1,
 
-      prblm_id: [],
-      unit_id: null,
-      dataList: [],
+            prblm_id: [],
+            unit_id: null,
+            dataList: [],
 
-      seq: this.$store.getters.seqNum,
-      hiddenState: false,
-    };
-  },
-  methods: {
-    complete() {
-      // 로컬 스토리지에서 currentDashboard 값을 가져옴
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
-
-        const { unit_id, book_id } = this.$route.query;
-        if (currentDashboard === "Learning") {
-          // Learning 모드일 때 Dashboard로 이동
-          this.$router.push({
-            name: "Dashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
-        } else if (currentDashboard === "AI") {
-          // AI 모드일 때 AIDashboard로 이동
-          this.$router.push({
-            name: "AIDashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
-        }
-      } else {
-        console.error("currentDashboard 값이 없습니다.");
-      }
+            seq: this.$store.getters.seqNum,
+            hiddenState: false,
+        };
     },
-    goToPage(page) {
-      this.$router.push({ name: page });
-    },
+    methods: {
+        complete() {
+            // 로컬 스토리지에서 currentDashboard 값을 가져옴
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
 
-    handleClick(buttonNumber) {
-      this.selectedButton = buttonNumber; // 선택된 버튼 번호 저장
-    },
-
-    confirmAnswer() {
-      if (this.selectedButton === null) {
-        alert("정답을 선택해주세요.");
-        return;
-      }
-      if (this.selectedButton === this.answer) {
-        alert("정답입니다!");
-        this.nextProblem();
-      } else {
-        alert("오답입니다!");
-      }
-      this.selectedButton = null;
-    },
-
-    returnPage() {
-      window.location.reload();
-    },
-    splitExample() {
-      const parts = this.example.split("/?/");
-      if (parts.length === 2) {
-        this.beforeQuestion = parts[0];
-        this.afterQuestion = parts[1];
-      }
-    },
-    // getProblem() {
-    //   const vm = this;
-    //   const prblmId = this.prblm_id.prblm_id;
-    //   // const prblmId = "PROBLEM_000000000000076";
-
-    //   axios({
-    //     url: "problem/problemInfo.json",
-    //     method: "post",
-    //     headers: {
-    //       "Content-Type": "application/json; charset=UTF-8",
-    //     },
-    //     data: {
-    //       prblmId: prblmId,
-    //     },
-    //   })
-    //     .then(function (res) {
-    //       console.log("problem - response : ", res.data);
-    //       vm.dataList = res.data.problem;
-    //       vm.problemDetail = res.data.problemDetail;
-    //       vm.example = vm.dataList.prblmExpln;
-    //       vm.problemDetail.forEach((detail, index) => {
-    //         vm.choice.push(detail.prblmDtlExpln);
-    //         if (detail.prblmYn === "Y") {
-    //           vm.answer = index + 1;
-    //         }
-    //       });
-
-    //       console.log(vm.example);
-    //       console.log(vm.choice);
-    //       console.log(vm.answer);
-    //       vm.splitExample();
-    //     })
-    //     .catch(function (error) {
-    //       console.log("problem - error : ", error);
-    //     });
-    // },
-
-    getProblem() {
-      const vm = this;
-      let prblmId = null;
-
-      // 로컬 스토리지에서 currentDashboard를 확인
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
-
-        if (currentDashboard === "AI") {
-          // AI 모드일 때 로컬스토리지에서 currentLearningIds를 사용
-          prblmId = parsedState.currentLearningIds; // currentLearningIds를 사용
-          console.log("AI 모드에서 currentLearningIds 사용:", prblmId);
-        } else {
-          // Learning 모드일 때 기존 방식 사용
-          prblmId = this.prblm_id.prblm_id; // 기존 방식
-          console.log("Learning 모드에서 currentLearningId 사용:", prblmId);
-        }
-      }
-
-      axios({
-        url: "problem/problemInfo.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
-        },
-        data: {
-          prblmId: prblmId,
-        },
-      })
-        .then(function (res) {
-          console.log("problem - response : ", res.data);
-          vm.dataList = res.data.problem;
-          vm.problemDetail = res.data.problemDetail;
-          vm.example = vm.dataList.prblmExpln;
-          vm.problemDetail.forEach((detail, index) => {
-            vm.choice.push(detail.prblmDtlExpln);
-            if (detail.prblmYn === "Y") {
-              vm.answer = index + 1;
+                const { unit_id, book_id } = this.$route.query;
+                if (currentDashboard === 'Learning') {
+                    // Learning 모드일 때 Dashboard로 이동
+                    this.$router.push({
+                        name: 'Dashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                } else if (currentDashboard === 'AI') {
+                    // AI 모드일 때 AIDashboard로 이동
+                    this.$router.push({
+                        name: 'AIDashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                }
+            } else {
+                console.error('currentDashboard 값이 없습니다.');
             }
-          });
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
 
-          console.log(vm.example);
-          console.log(vm.choice);
-          console.log(vm.answer);
-          vm.splitExample();
-        })
-        .catch(function (error) {
-          console.log("problem - error : ", error);
-        });
-    },
+        handleClick(buttonNumber) {
+            this.selectedButton = buttonNumber; // 선택된 버튼 번호 저장
+        },
 
-    nextProblem() {
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        // this.goToPage("Chapter4");
-        alert("문제 학습 완료");
-        this.complete();
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
+        confirmAnswer() {
+            if (this.selectedButton === null) {
+                alert('정답을 선택해주세요.');
+                return;
+            }
+            if (this.selectedButton === this.answer) {
+                alert('정답입니다!');
+                this.nextProblem();
+            } else {
+                alert('오답입니다!');
+            }
+            this.selectedButton = null;
+        },
 
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-  },
-  watch: {},
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    this.prblm_id = this.currentLearningId;
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
+        returnPage() {
+            window.location.reload();
+        },
+        splitExample() {
+            const parts = this.example.split('/?/');
+            if (parts.length === 2) {
+                this.beforeQuestion = parts[0];
+                this.afterQuestion = parts[1];
+            }
+        },
+        // getProblem() {
+        //   const vm = this;
+        //   const prblmId = this.prblm_id.prblm_id;
+        //   // const prblmId = "PROBLEM_000000000000076";
 
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  mounted() {
-    this.getProblem();
+        //   axios({
+        //     url: "problem/problemInfo.json",
+        //     method: "post",
+        //     headers: {
+        //       "Content-Type": "application/json; charset=UTF-8",
+        //     },
+        //     data: {
+        //       prblmId: prblmId,
+        //     },
+        //   })
+        //     .then(function (res) {
+        //       console.log("problem - response : ", res.data);
+        //       vm.dataList = res.data.problem;
+        //       vm.problemDetail = res.data.problemDetail;
+        //       vm.example = vm.dataList.prblmExpln;
+        //       vm.problemDetail.forEach((detail, index) => {
+        //         vm.choice.push(detail.prblmDtlExpln);
+        //         if (detail.prblmYn === "Y") {
+        //           vm.answer = index + 1;
+        //         }
+        //       });
 
-    if (this.currentProblemIndex == 0) {
-      this.hiddenState = true;
-    }
-  },
+        //       console.log(vm.example);
+        //       console.log(vm.choice);
+        //       console.log(vm.answer);
+        //       vm.splitExample();
+        //     })
+        //     .catch(function (error) {
+        //       console.log("problem - error : ", error);
+        //     });
+        // },
+
+        getProblem() {
+            const vm = this;
+            let prblmId = null;
+
+            // 로컬 스토리지에서 currentDashboard를 확인
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
+
+                if (currentDashboard === 'AI') {
+                    // AI 모드일 때 로컬스토리지에서 currentLearningIds를 사용
+                    prblmId = parsedState.currentLearningIds; // currentLearningIds를 사용
+                    console.log('AI 모드에서 currentLearningIds 사용:', prblmId);
+                } else {
+                    // Learning 모드일 때 기존 방식 사용
+                    prblmId = this.prblm_id.prblm_id; // 기존 방식
+                    console.log('Learning 모드에서 currentLearningId 사용:', prblmId);
+                }
+            }
+
+            axios({
+                url: 'problem/problemInfo.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    prblmId: prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log('problem - response : ', res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+                    vm.example = vm.dataList.prblmExpln;
+                    vm.problemDetail.forEach((detail, index) => {
+                        vm.choice.push(detail.prblmDtlExpln);
+                        if (detail.prblmYn === 'Y') {
+                            vm.answer = index + 1;
+                        }
+                    });
+
+                    console.log(vm.example);
+                    console.log(vm.choice);
+                    console.log(vm.answer);
+                    vm.splitExample();
+                })
+                .catch(function (error) {
+                    console.log('problem - error : ', error);
+                });
+        },
+
+        nextProblem() {
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            } else {
+                // 마지막 문제면 이동
+                // this.goToPage("Chapter4");
+                alert('문제 학습 완료');
+                this.complete();
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    watch: {},
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        this.prblm_id = this.currentLearningId;
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    mounted() {
+        this.getProblem();
+
+        if (this.currentProblemIndex == 0) {
+            this.hiddenState = true;
+        }
+    },
+    components: {
+        BookInfo: BookInfo,
+    },
 };
 </script>
 <style scoped>
 .imgGroup {
-  margin-left: 183px;
-  width: auto;
+    margin-left: 183px;
+    width: auto;
 }
 
 .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%);
 }
 
 .pickGroup article {
-  position: absolute;
+    position: absolute;
 }
 
 .pickGroup article img {
-  object-fit: contain;
-  width: -webkit-fill-available;
+    object-fit: contain;
+    width: -webkit-fill-available;
 }
 
 .pickGroup article > div > p {
-  font-size: 64px;
+    font-size: 64px;
 }
 
 .pickGroup button p.active {
-  color: #000;
-  /* 선택된 버튼의 숫자 색을 더 진하게 */
+    color: #000;
+    /* 선택된 버튼의 숫자 색을 더 진하게 */
 }
 
 .inputGroup {
-  display: flex;
-  align-items: center;
-  gap: 30px;
+    display: flex;
+    align-items: center;
+    gap: 30px;
 }
 
 .inputGroup p {
-  font-size: 28px;
+    font-size: 28px;
 }
 
 .answerBox {
-  margin-top: -87px;
-  margin-right: 10px;
-  text-align: right;
+    margin-top: -87px;
+    margin-right: 10px;
+    text-align: right;
 }
 
 .answerButton {
-  background-color: #ffc107;
-  border-radius: 30px;
-  padding: 20px 50px;
-  margin: 40px;
-  font-family: "ONEMobileOTF-Regular";
-  font-weight: bold;
-  font-size: 24px;
+    background-color: #ffc107;
+    border-radius: 30px;
+    padding: 20px 50px;
+    margin: 40px;
+    font-family: 'ONEMobileOTF-Regular';
+    font-weight: bold;
+    font-size: 24px;
 }
 
 .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>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter2_12.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/new_img/logo_v2.png" alt="" />
+    <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/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </div>
-      </router-link>
-    </div>
-    <div class="title-box mb25 flex align-center mt40">
-      <span class="title mr40">1. Hello WORLD</span>
-      <span class="subtitle">my name is dd</span>
-    </div>
-    <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_8')">
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <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="">
+        <div class="title-box mb25 flex align-center mt40">
+            <BookInfo />
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="goToPage('Chapter2_8')">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <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>
 
-        <div class="text-ct">
-          <div
-            class="pickGroup flex align-center justify-center mt50"
-            style="gap: 100px"
-          >
-            <div>
-              <div class="mb20">
-                <button>
-                  <img src="../../../../resources/img/img100_45s.png" alt="" />
-                  <p>1</p>
-                </button>
-                <button>
-                  <img src="../../../../resources/img/img101_45s.png" alt="" />
-                  <p>1</p>
-                </button>
-                <button>
-                  <img src="../../../../resources/img/img102_45s.png" alt="" />
-                  <p>1</p>
-                </button>
-                <button>
-                  <img src="../../../../resources/img/img103_45s.png" alt="" />
-                  <p>1</p>
-                </button>
-              </div>
-              <div>
-                <button>
-                  <img src="../../../../resources/img/img100_45s.png" alt="" />
-                  <p>1</p>
-                </button>
-                <button>
-                  <img src="../../../../resources/img/img101_45s.png" alt="" />
-                  <p>1</p>
-                </button>
-                <button>
-                  <img src="../../../../resources/img/img102_45s.png" alt="" />
-                  <p>1</p>
-                </button>
-                <button>
-                  <img src="../../../../resources/img/img103_45s.png" alt="" />
-                  <p>1</p>
-                </button>
-              </div>
-            </div>
-            <div class="dropGroup" style="gap: 20px">
-              <img src="../../../../resources/img/img160_43s.png" alt="" />
-              <div class="dropimg">
-                <img
-                  style="top: 21px"
-                  src="../../../../resources/img/img161_44s.png"
-                  alt=""
-                />
-                <img
-                  style="top: 119px"
-                  src="../../../../resources/img/img162_43s.png"
-                  alt=""
-                />
-                <img
-                  style="top: 215px"
-                  src="../../../../resources/img/img163_43s.png"
-                  alt=""
-                />
-                <img
-                  style="bottom: 36px"
-                  src="../../../../resources/img/img164_43s.png"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
+                <div class="text-ct">
+                    <div class="pickGroup flex align-center justify-center mt50" style="gap: 100px">
+                        <div>
+                            <div class="mb20">
+                                <button>
+                                    <img src="../../../../resources/img/img100_45s.png" alt="" />
+                                    <p>1</p>
+                                </button>
+                                <button>
+                                    <img src="../../../../resources/img/img101_45s.png" alt="" />
+                                    <p>1</p>
+                                </button>
+                                <button>
+                                    <img src="../../../../resources/img/img102_45s.png" alt="" />
+                                    <p>1</p>
+                                </button>
+                                <button>
+                                    <img src="../../../../resources/img/img103_45s.png" alt="" />
+                                    <p>1</p>
+                                </button>
+                            </div>
+                            <div>
+                                <button>
+                                    <img src="../../../../resources/img/img100_45s.png" alt="" />
+                                    <p>1</p>
+                                </button>
+                                <button>
+                                    <img src="../../../../resources/img/img101_45s.png" alt="" />
+                                    <p>1</p>
+                                </button>
+                                <button>
+                                    <img src="../../../../resources/img/img102_45s.png" alt="" />
+                                    <p>1</p>
+                                </button>
+                                <button>
+                                    <img src="../../../../resources/img/img103_45s.png" alt="" />
+                                    <p>1</p>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="dropGroup" style="gap: 20px">
+                            <img src="../../../../resources/img/img160_43s.png" alt="" />
+                            <div class="dropimg">
+                                <img style="top: 21px" src="../../../../resources/img/img161_44s.png" alt="" />
+                                <img style="top: 119px" src="../../../../resources/img/img162_43s.png" alt="" />
+                                <img style="top: 215px" src="../../../../resources/img/img163_43s.png" alt="" />
+                                <img style="bottom: 36px" src="../../../../resources/img/img164_43s.png" alt="" />
+                            </div>
+                        </div>
+                    </div>
 
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
-              </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>
+            <div class="next-btn" @click="goToPage('Chapter2_7')">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
         </div>
-      </div>
-      <div class="next-btn" @click="goToPage('Chapter2_7')">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
+import BookInfo from '../../../component/BookInfo.vue';
 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);
+    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);
+        },
     },
-  },
-  watch: {},
-  computed: {},
-  components: {},
-  mounted() {},
+    watch: {},
+    computed: {},
+    components: {
+        BookInfo: BookInfo,
+    },
+    mounted() {},
 };
 </script>
 <style scoped>
 .dropGroup {
-  position: relative;
+    position: relative;
 }
 .dropimg img {
-  position: absolute;
-  left: 27px;
+    position: absolute;
+    left: 27px;
 }
 .pickGroup button {
-  position: relative;
-  margin: 10px 40px;
+    position: relative;
+    margin: 10px 40px;
 }
 
 .pickGroup button p {
-  font-size: 34px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+    font-size: 34px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 </style>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter2_13.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/new_img/logo_v2.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"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="previousProblem()"
-      >
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <div class="content title-box">
-        <div style="display: flex; justify-content: space-between">
-          <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
-          <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 questionBox">
-          <p class="subtitle2 mr20">문제를 맞춰 폭탄을 제거해줘!</p>
-          <div style="height: 130px">
-            <div>
-              <div>
-                <p class="second"></p>
-                <p class="text"></p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="text-ct">
-          <div class="imgGroup flex align-center justify-center">
-            <div class="flex" style="gap: 20px; position: relative">
-              <img
-                src="../../../../resources/img/img105_46s.png"
-                alt=""
-                style="width: 90%"
-              />
-
-              <div class="textbox">
-                <p class="little-title">{{ problem }}</p>
-                <div class="pickGroup">
-                  <article class="flex mb10" style="gap: 60px">
-                    <div class="flex align-center" @click="handleClick(1)">
-                      <button>
-                        <img
-                          src="../../../../resources/img/img136_71s.png"
-                          alt=""
-                        />
-                        <p :class="{ active: selectedButton === 1 }">1</p>
-                      </button>
-                      <p class="red">{{ choice[0] }}</p>
-                    </div>
-                  </article>
-                  <article class="flex mb10" style="gap: 60px">
-                    <div class="flex align-center" @click="handleClick(2)">
-                      <button>
-                        <img
-                          src="../../../../resources/img/img136_71s.png"
-                          alt=""
-                        />
-                        <p :class="{ active: selectedButton === 2 }">2</p>
-                      </button>
-                      <p class="orange">{{ choice[1] }}</p>
-                    </div>
-                  </article>
-                  <article class="flex mb10" style="gap: 60px">
-                    <div class="flex align-center" @click="handleClick(3)">
-                      <button>
-                        <img
-                          src="../../../../resources/img/img136_71s.png"
-                          alt=""
-                        />
-                        <p :class="{ active: selectedButton === 3 }">3</p>
-                      </button>
-                      <p class="blue">{{ choice[2] }}</p>
-                    </div>
-                  </article>
-                  <article class="flex" style="gap: 60px">
-                    <div class="flex align-center" @click="handleClick(4)">
-                      <button>
-                        <img
-                          src="../../../../resources/img/img136_71s.png"
-                          alt=""
-                        />
-                        <p :class="{ active: selectedButton === 4 }">4</p>
-                      </button>
-                      <p class="green">{{ choice[3] }}</p>
-                    </div>
-                  </article>
+    <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/new_img/logo_v2.png" alt="" />
                 </div>
-              </div>
-              <!-- 오답일 경우 아래의 이미지가 보여야함 -->
-              <div
-                v-if="correct"
-                class="flex justify-center wrong-anwser"
-                style="gap: 20px"
-              >
-                <img src="../../../../resources/img/img165_46s.png" alt="" />
-              </div>
+            </router-link>
+        </div>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" />
             </div>
-          </div>
+            <div class="content title-box">
+                <div style="display: flex; justify-content: space-between">
+                    <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
+                    <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 questionBox">
+                    <p class="subtitle2 mr20">문제를 맞춰 폭탄을 제거해줘!</p>
+                    <div style="height: 130px">
+                        <div>
+                            <div>
+                                <p class="second"></p>
+                                <p class="text"></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="text-ct">
+                    <div class="imgGroup flex align-center justify-center">
+                        <div class="flex" style="gap: 20px; position: relative">
+                            <img src="../../../../resources/img/img105_46s.png" alt="" style="width: 90%" />
+
+                            <div class="textbox">
+                                <p class="little-title">{{ problem }}</p>
+                                <div class="pickGroup">
+                                    <article class="flex mb10" style="gap: 60px">
+                                        <div class="flex align-center" @click="handleClick(1)">
+                                            <button>
+                                                <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                                <p :class="{ active: selectedButton === 1 }">1</p>
+                                            </button>
+                                            <p class="red">{{ choice[0] }}</p>
+                                        </div>
+                                    </article>
+                                    <article class="flex mb10" style="gap: 60px">
+                                        <div class="flex align-center" @click="handleClick(2)">
+                                            <button>
+                                                <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                                <p :class="{ active: selectedButton === 2 }">2</p>
+                                            </button>
+                                            <p class="orange">{{ choice[1] }}</p>
+                                        </div>
+                                    </article>
+                                    <article class="flex mb10" style="gap: 60px">
+                                        <div class="flex align-center" @click="handleClick(3)">
+                                            <button>
+                                                <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                                <p :class="{ active: selectedButton === 3 }">3</p>
+                                            </button>
+                                            <p class="blue">{{ choice[2] }}</p>
+                                        </div>
+                                    </article>
+                                    <article class="flex" style="gap: 60px">
+                                        <div class="flex align-center" @click="handleClick(4)">
+                                            <button>
+                                                <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                                <p :class="{ active: selectedButton === 4 }">4</p>
+                                            </button>
+                                            <p class="green">{{ choice[3] }}</p>
+                                        </div>
+                                    </article>
+                                </div>
+                            </div>
+                            <!-- 오답일 경우 아래의 이미지가 보여야함 -->
+                            <div v-if="correct" class="flex justify-center wrong-anwser" style="gap: 20px">
+                                <img src="../../../../resources/img/img165_46s.png" alt="" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="answerBox">
+                    <button class="answerButton" @click="confirmAnswer">정답 확인</button>
+                </div>
+            </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
         </div>
-        <div class="answerBox">
-          <button class="answerButton" @click="confirmAnswer">정답 확인</button>
-        </div>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
-
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      timer: "00",
-      problem: "",
+    data() {
+        return {
+            timer: '00',
+            problem: '',
 
-      choice: [],
-      answer: "",
+            choice: [],
+            answer: '',
 
-      selectedButton: null,
-      correct: false,
+            selectedButton: null,
+            correct: false,
 
-      prblm_id: [],
-      problemData: [],
-      // problemArr: [],
-      answerArr: [],
+            prblm_id: [],
+            problemData: [],
+            // problemArr: [],
+            answerArr: [],
 
-      seq: this.$store.getters.seqNum,
-      hiddenState: false,
-    };
-  },
-  methods: {
-    complete() {
-      // 로컬 스토리지에서 currentDashboard 값을 가져옴
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
+            seq: this.$store.getters.seqNum,
+            hiddenState: false,
+        };
+    },
+    methods: {
+        complete() {
+            // 로컬 스토리지에서 currentDashboard 값을 가져옴
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
 
-        const { unit_id, book_id } = this.$route.query;
-        if (currentDashboard === "Learning") {
-          // Learning 모드일 때 Dashboard로 이동
-          this.$router.push({
-            name: "Dashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
-        } else if (currentDashboard === "AI") {
-          // AI 모드일 때 AIDashboard로 이동
-          this.$router.push({
-            name: "AIDashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
+                const { unit_id, book_id } = this.$route.query;
+                if (currentDashboard === 'Learning') {
+                    // Learning 모드일 때 Dashboard로 이동
+                    this.$router.push({
+                        name: 'Dashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                } else if (currentDashboard === 'AI') {
+                    // AI 모드일 때 AIDashboard로 이동
+                    this.$router.push({
+                        name: 'AIDashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                }
+            } else {
+                console.error('currentDashboard 값이 없습니다.');
+            }
+        },
+        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);
+        },
+        handleClick(buttonNumber) {
+            this.selectedButton = buttonNumber; // 선택된 버튼 번호 저장
+        },
+
+        confirmAnswer() {
+            if (this.selectedButton === null) {
+                alert('정답을 선택해주세요.');
+                return;
+            }
+            if (this.selectedButton === this.answer) {
+                alert('정답입니다!');
+                this.nextProblem();
+            } else {
+                this.correct = true;
+            }
+            this.selectedButton = null;
+        },
+        returnPage() {
+            window.location.reload();
+        },
+        nextProblem() {
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            } else {
+                // 마지막 문제면 이동
+                // this.goToPage("Chapter4");
+                alert('문제 학습 완료');
+                this.complete();
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+
+        // fetchProblemData() {
+        //   axios({
+        //     url: "/problem/problemInfo.json",
+        //     method: "post",
+        //     headers: {
+        //       "Content-Type": "application/json; charset=UTF-8",
+        //     },
+        //     data: {
+        //       prblmId: this.prblm_id.prblm_id,
+        //     },
+        //   })
+        //     .then((response) => {
+        //       this.problemData = response.data;
+        //       console.log("problemData", this.problemData);
+
+        //       this.sortingProblem();
+        //     })
+        //     .catch((error) => {
+        //       this.state = "noProblem";
+        //       console.error("Error fetching problemData:", error);
+        //     });
+        // },
+
+        fetchProblemData() {
+            // 로컬 스토리지에서 currentDashboard를 확인
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
+
+                if (currentDashboard === 'AI') {
+                    // AI 모드일 경우 로컬 스토리지에서 currentLearningId를 가져와 사용
+                    const currentLearningId = parsedState.currentLearningIds;
+                    console.log('AI 모드에서 currentLearningId 사용:', currentLearningId);
+
+                    // currentLearningId로 문제 데이터 가져오기
+                    axios({
+                        url: '/problem/problemInfo.json',
+                        method: 'post',
+                        headers: {
+                            'Content-Type': 'application/json; charset=UTF-8',
+                        },
+                        data: {
+                            prblmId: currentLearningId, // 로컬스토리지에서 가져온 currentLearningId 사용
+                        },
+                    })
+                        .then((response) => {
+                            this.problemData = response.data;
+                            console.log('AI 모드 problemData', this.problemData);
+                            this.sortingProblem();
+                        })
+                        .catch((error) => {
+                            this.state = 'noProblem';
+                            console.error('Error fetching AI problemData:', error);
+                        });
+                } else {
+                    // Learning 모드일 경우 기존 로직 사용
+                    console.log('Learning 모드에서 prblm_id 사용:', this.prblm_id);
+
+                    axios({
+                        url: '/problem/problemInfo.json',
+                        method: 'post',
+                        headers: {
+                            'Content-Type': 'application/json; charset=UTF-8',
+                        },
+                        data: {
+                            prblmId: this.prblm_id.prblm_id, // 기존 방식 사용
+                        },
+                    })
+                        .then((response) => {
+                            this.problemData = response.data;
+                            console.log('Learning 모드 problemData', this.problemData);
+                            this.sortingProblem();
+                        })
+                        .catch((error) => {
+                            this.state = 'noProblem';
+                            console.error('Error fetching problemData:', error);
+                        });
+                }
+            } else {
+                console.error('vuexState가 로컬스토리지에 없습니다.');
+            }
+        },
+
+        sortingProblem() {
+            this.problem = this.problemData.problem.prblmExpln;
+
+            for (let i = 0; i < this.problemData.problemDetail.length; i++) {
+                // this.answerArr[i].prblmDtlExpln =
+                //   this.problemData.problemDetail[i].prblmDtlExpln;
+                // this.answerArr[i].prblmYn = this.problemData.problemDetail[i].prblmYn;
+                this.answerArr[i] = this.problemData.problemDetail[i];
+                this.choice[i] = this.problemData.problemDetail[i].prblmDtlExpln;
+            }
+            console.log('answerArr', this.answerArr);
+
+            for (let i = 0; i < this.answerArr.length; i++) {
+                if (this.answerArr[i].prblmYn == 'Y') {
+                    this.answer = i + 1;
+                    break;
+                }
+            }
+        },
+    },
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        this.prblm_id = this.currentLearningId;
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    mounted() {
+        this.fetchProblemData();
+        if (this.currentProblemIndex == 0) {
+            this.hiddenState = true;
         }
-      } else {
-        console.error("currentDashboard 값이 없습니다.");
-      }
     },
-    goToPage(page) {
-      this.$router.push({ name: page });
+    components: {
+        BookInfo: BookInfo,
     },
-    startTimer() {
-      if (this.intervalId) {
-        clearInterval(this.intervalId);
-      }
-      this.timer = 5;
-      this.intervalId = setInterval(() => {
-        if (this.timer > 0) {
-          this.timer--;
-        } else {
-          clearInterval(this.intervalId);
-        }
-      }, 1000);
-    },
-    handleClick(buttonNumber) {
-      this.selectedButton = buttonNumber; // 선택된 버튼 번호 저장
-    },
-
-    confirmAnswer() {
-      if (this.selectedButton === null) {
-        alert("정답을 선택해주세요.");
-        return;
-      }
-      if (this.selectedButton === this.answer) {
-        alert("정답입니다!");
-        this.nextProblem();
-      } else {
-        this.correct = true;
-      }
-      this.selectedButton = null;
-    },
-    returnPage() {
-      window.location.reload();
-    },
-    nextProblem() {
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        // this.goToPage("Chapter4");
-        alert("문제 학습 완료");
-        this.complete();
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-
-    // fetchProblemData() {
-    //   axios({
-    //     url: "/problem/problemInfo.json",
-    //     method: "post",
-    //     headers: {
-    //       "Content-Type": "application/json; charset=UTF-8",
-    //     },
-    //     data: {
-    //       prblmId: this.prblm_id.prblm_id,
-    //     },
-    //   })
-    //     .then((response) => {
-    //       this.problemData = response.data;
-    //       console.log("problemData", this.problemData);
-
-    //       this.sortingProblem();
-    //     })
-    //     .catch((error) => {
-    //       this.state = "noProblem";
-    //       console.error("Error fetching problemData:", error);
-    //     });
-    // },
-
-    fetchProblemData() {
-      // 로컬 스토리지에서 currentDashboard를 확인
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
-
-        if (currentDashboard === "AI") {
-          // AI 모드일 경우 로컬 스토리지에서 currentLearningId를 가져와 사용
-          const currentLearningId = parsedState.currentLearningIds;
-          console.log("AI 모드에서 currentLearningId 사용:", currentLearningId);
-
-          // currentLearningId로 문제 데이터 가져오기
-          axios({
-            url: "/problem/problemInfo.json",
-            method: "post",
-            headers: {
-              "Content-Type": "application/json; charset=UTF-8",
-            },
-            data: {
-              prblmId: currentLearningId, // 로컬스토리지에서 가져온 currentLearningId 사용
-            },
-          })
-            .then((response) => {
-              this.problemData = response.data;
-              console.log("AI 모드 problemData", this.problemData);
-              this.sortingProblem();
-            })
-            .catch((error) => {
-              this.state = "noProblem";
-              console.error("Error fetching AI problemData:", error);
-            });
-
-        } else {
-          // Learning 모드일 경우 기존 로직 사용
-          console.log("Learning 모드에서 prblm_id 사용:", this.prblm_id);
-
-          axios({
-            url: "/problem/problemInfo.json",
-            method: "post",
-            headers: {
-              "Content-Type": "application/json; charset=UTF-8",
-            },
-            data: {
-              prblmId: this.prblm_id.prblm_id, // 기존 방식 사용
-            },
-          })
-            .then((response) => {
-              this.problemData = response.data;
-              console.log("Learning 모드 problemData", this.problemData);
-              this.sortingProblem();
-            })
-            .catch((error) => {
-              this.state = "noProblem";
-              console.error("Error fetching problemData:", error);
-            });
-        }
-      } else {
-        console.error("vuexState가 로컬스토리지에 없습니다.");
-      }
-    },
-
-    sortingProblem() {
-      this.problem = this.problemData.problem.prblmExpln;
-
-      for (let i = 0; i < this.problemData.problemDetail.length; i++) {
-        // this.answerArr[i].prblmDtlExpln =
-        //   this.problemData.problemDetail[i].prblmDtlExpln;
-        // this.answerArr[i].prblmYn = this.problemData.problemDetail[i].prblmYn;
-        this.answerArr[i] = this.problemData.problemDetail[i];
-        this.choice[i] = this.problemData.problemDetail[i].prblmDtlExpln;
-      }
-      console.log("answerArr", this.answerArr);
-
-      for (let i = 0; i < this.answerArr.length; i++) {
-        if (this.answerArr[i].prblmYn == "Y") {
-          this.answer = i + 1;
-          break;
-        }
-      }
-    },
-  },
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    this.prblm_id = this.currentLearningId;
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  mounted() {
-    this.fetchProblemData();
-    if (this.currentProblemIndex == 0) {
-      this.hiddenState = true;
-    }
-  },
 };
 </script>
 <style scoped>
 .wrong-anwser {
-  position: absolute;
-  top: 51%;
-  left: 45%;
-  transform: translate(-50%, -50%);
+    position: absolute;
+    top: 51%;
+    left: 45%;
+    transform: translate(-50%, -50%);
 }
 
 .textbox {
-  position: absolute;
-  top: 140px;
-  left: 45px;
+    position: absolute;
+    top: 140px;
+    left: 45px;
 }
 
 .time-bg {
-  margin-right: 40px;
-  top: 136px;
-  right: 124px;
+    margin-right: 40px;
+    top: 136px;
+    right: 124px;
 }
 
 .pickGroup {
-  margin: 40px 0 0 180px;
+    margin: 40px 0 0 180px;
 }
 
 .pickGroup button {
-  position: relative;
-  margin-right: 30px;
+    position: relative;
+    margin-right: 30px;
 }
 
 .pickGroup button img {
-  width: 33px;
-  height: 33px;
+    width: 33px;
+    height: 33px;
 }
 
 .pickGroup button p {
-  font-size: 20px;
-  color: #c6c6c6;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+    font-size: 20px;
+    color: #c6c6c6;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .pickGroup article {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .pickGroup article > div > p {
-  font-size: 24px;
+    font-size: 24px;
 }
 
 .pickGroup button p.active {
-  color: #000;
-  /* 선택된 버튼의 숫자 색을 더 진하게 */
+    color: #000;
+    /* 선택된 버튼의 숫자 색을 더 진하게 */
 }
 
 .little-title {
-  text-align: start;
-  font-size: 24px;
-  font-weight: bold;
+    text-align: start;
+    font-size: 24px;
+    font-weight: bold;
 }
 
 .questionBox {
-  justify-content: space-between;
-  align-items: flex-start;
+    justify-content: space-between;
+    align-items: flex-start;
 }
 
 .imgGroup {
-  position: absolute;
-  top: 150px;
-  left: 30%;
-  width: fit-content;
+    position: absolute;
+    top: 150px;
+    left: 30%;
+    width: fit-content;
 }
 
 .answerBox {
-  margin-top: 295px;
-  text-align: right;
+    margin-top: 295px;
+    text-align: right;
 }
 
 .answerButton {
-  background-color: #ffc107;
-  border-radius: 30px;
-  padding: 20px 50px;
-  margin: 40px;
-  font-family: "ONEMobileOTF-Regular";
-  font-weight: bold;
-  font-size: 24px;
+    background-color: #ffc107;
+    border-radius: 30px;
+    padding: 20px 50px;
+    margin: 40px;
+    font-family: 'ONEMobileOTF-Regular';
+    font-weight: bold;
+    font-size: 24px;
 }
 
 .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>

7732467

1533a48

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/new_img/logo_v2.png" alt="" />
+    <div id="Chapter2_2" class="content-wrap">
+        <div style="margin: 30px 0px 50px; width: 20%">
+            <router-link to="/MyPlan.page">
+                <div class="logo mb25">
+                    <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </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"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="goToPrevPage"
-      >
-        >
-        <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">
-            3초마다 뒤집어지는 카드의 단어를 외어보세요!
-          </p>
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
-              </div>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="goToPrevPage">
+                >
+                <img src="../../../../resources/img/left.png" alt="" />
             </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">3초마다 뒤집어지는 카드의 단어를 외어보세요!</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" style="height: 150px" />
-                </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 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" style="height: 150px" />
+                                </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="goToNextPage">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
         </div>
-      </div>
-      <div class="next-btn" @click="goToNextPage">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
-
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      items: [],
-      timer: 0,
-      intervalId: null,
-      currentIndex: 0,
-      wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
-      wdBookId: "", // 현재 단어장 id
-      currentWdBkIndex: 0, // 현재 단어장 인덱스
-      wdBookTypeIdState: "", // 이동할 페이지 타입 id
-      wordBookType: "", // 이동할 페이지
+    data() {
+        return {
+            items: [],
+            timer: 0,
+            intervalId: null,
+            currentIndex: 0,
+            wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
+            wdBookId: '', // 현재 단어장 id
+            currentWdBkIndex: 0, // 현재 단어장 인덱스
+            wdBookTypeIdState: '', // 이동할 페이지 타입 id
+            wordBookType: '', // 이동할 페이지
 
-      seq: this.$store.getters.seqNum,
-      hiddenState: false,
-    };
-  },
-  methods: {
-    pageSetting() {
-      this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
-      this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
-      this.wdBookId =
-        this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
-      console.log(this.wdBookId);
-
-      if (this.currentWdBkIndex - 1 < 0) {
-        this.hiddenState = true;
-      }
-
-      this.fetchWordList();
+            seq: this.$store.getters.seqNum,
+            hiddenState: false,
+        };
     },
+    methods: {
+        pageSetting() {
+            this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
+            this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
+            this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
+            console.log(this.wdBookId);
 
-    async fetchWordList() {
-      try {
-        const response = await axios.post("/word/getWordsByBookId.json", {
-          wdBookId: this.wdBookId,
-        });
+            if (this.currentWdBkIndex - 1 < 0) {
+                this.hiddenState = true;
+            }
 
-        const wordList = response.data;
+            this.fetchWordList();
+        },
 
-        // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리
-        const requests = wordList.map(async (word) => {
-          const fileResponse = await axios.post("/file/find.json", {
-            file_mng_id: word.fileMngId,
-          });
+        async fetchWordList() {
+            try {
+                const response = await axios.post('/word/getWordsByBookId.json', {
+                    wdBookId: this.wdBookId,
+                });
 
-          const fileRpath =
-            fileResponse.data.list.length > 0
-              ? fileResponse.data.list[0].fileRpath
-              : null;
-          console.log("각 단어의 fileRpath: ", fileRpath);
+                const wordList = response.data;
 
-          // items 배열에 새로운 항목 추가
-          this.items.push({
-            imgSrc1: "client/resources/img/img49_s.png",
-            imgSrc2: "client/resources/img/img50_s.png",
-            imgSrc: "http://165.229.169.113:9080/" + fileRpath, // 받아온 fileRpath로 이미지 설정
-            isSecondImageVisible: false,
-            title: word.wdNm,
-          });
-        });
+                // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리
+                const requests = wordList.map(async (word) => {
+                    const fileResponse = await axios.post('/file/find.json', {
+                        file_mng_id: word.fileMngId,
+                    });
 
-        // 모든 요청이 완료될 때까지 대기
-        await Promise.all(requests);
-      } catch (error) {
-        console.error("단어 목록을 불러오는 중 오류 발생:", error);
-      }
+                    const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
+                    console.log('각 단어의 fileRpath: ', fileRpath);
+
+                    // items 배열에 새로운 항목 추가
+                    this.items.push({
+                        imgSrc1: 'client/resources/img/img49_s.png',
+                        imgSrc2: 'client/resources/img/img50_s.png',
+                        imgSrc: 'http://165.229.169.113:9080/' + fileRpath, // 받아온 fileRpath로 이미지 설정
+                        isSecondImageVisible: false,
+                        title: word.wdNm,
+                    });
+                });
+
+                // 모든 요청이 완료될 때까지 대기
+                await Promise.all(requests);
+            } catch (error) {
+                console.error('단어 목록을 불러오는 중 오류 발생:', error);
+            }
+        },
+
+        async goToPrevPage() {
+            if (this.currentWdBkIndex - 1 < 0) {
+                alert('단어장 첫번째 페이지 입니다');
+            } else {
+                this.currentWdBkIndex--;
+                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+
+                try {
+                    const response = await axios.post('/wordbook/find.json', {
+                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+                    });
+                    this.wdBookTypeIdState = response.data.wdBookTypeId;
+                    console.log('이전 단어장 타입 id: ', this.wdBookTypeIdState);
+
+                    switch (this.wdBookTypeIdState) {
+                        case '1':
+                            this.wordBookType = 'Chapter2';
+                            break;
+                        case '2':
+                            this.wordBookType = 'Chapter2_3';
+                            break;
+                        case '3':
+                            this.wordBookType = 'Chapter2_2';
+                            break;
+                        case '4':
+                            this.wordBookType = 'Chapter2_9';
+                            break;
+                        case '5':
+                            this.wordBookType = 'Chapter2_4';
+                            break;
+                        default:
+                            this.wordBookType = null;
+                    }
+
+                    this.goToPage(this.wordBookType);
+                } catch (error) {
+                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
+                }
+            }
+        },
+
+        async goToNextPage() {
+            if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
+                alert('단어 학습 완료!');
+                this.complete();
+            } else {
+                this.currentWdBkIndex++;
+                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+
+                try {
+                    const response = await axios.post('/wordbook/find.json', {
+                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+                    });
+                    this.wdBookTypeIdState = response.data.wdBookTypeId;
+                    console.log('다음 단어장 타입 id: ', this.wdBookTypeIdState);
+
+                    switch (this.wdBookTypeIdState) {
+                        case '1':
+                            this.wordBookType = 'Chapter2';
+                            break;
+                        case '2':
+                            this.wordBookType = 'Chapter2_3';
+                            break;
+                        case '3':
+                            this.wordBookType = 'Chapter2_2';
+                            break;
+                        case '4':
+                            this.wordBookType = 'Chapter2_9';
+                            break;
+                        case '5':
+                            this.wordBookType = 'Chapter2_4';
+                            break;
+                        default:
+                            this.wordBookType = null;
+                    }
+
+                    this.goToPage(this.wordBookType);
+                } catch (error) {
+                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
+                }
+            }
+        },
+
+        complete() {
+            const { unit_id, book_id } = this.$route.query;
+            this.$router.push({
+                name: 'Dashboard',
+                query: { value: this.seq, unit_id, book_id },
+            });
+        },
+
+        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.intervalId = null;
+                        console.log('모든 타이머가 완료되었습니다.');
+                    }
+                }
+            }, 1000);
+        },
     },
-
-    async goToPrevPage() {
-      if (this.currentWdBkIndex - 1 < 0) {
-        alert("단어장 첫번째 페이지 입니다");
-      } else {
-        this.currentWdBkIndex--;
-        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
-
-        try {
-          const response = await axios.post("/wordbook/find.json", {
-            wdBookId:
-              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
-          });
-          this.wdBookTypeIdState = response.data.wdBookTypeId;
-          console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
-
-          switch (this.wdBookTypeIdState) {
-            case "1":
-              this.wordBookType = "Chapter2";
-              break;
-            case "2":
-              this.wordBookType = "Chapter2_3";
-              break;
-            case "3":
-              this.wordBookType = "Chapter2_2";
-              break;
-            case "4":
-              this.wordBookType = "Chapter2_9";
-              break;
-            case "5":
-              this.wordBookType = "Chapter2_4";
-              break;
-            default:
-              this.wordBookType = null;
-          }
-
-          this.goToPage(this.wordBookType);
-        } catch (error) {
-          console.error("단어장 정보 불러오는 중 오류 발생:", error);
-        }
-      }
+    mounted() {
+        this.pageSetting();
+        this.startTimer();
     },
-
-    async goToNextPage() {
-      if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
-        alert("단어 학습 완료!");
-        this.complete();
-      } else {
-        this.currentWdBkIndex++;
-        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
-
-        try {
-          const response = await axios.post("/wordbook/find.json", {
-            wdBookId:
-              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
-          });
-          this.wdBookTypeIdState = response.data.wdBookTypeId;
-          console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
-
-          switch (this.wdBookTypeIdState) {
-            case "1":
-              this.wordBookType = "Chapter2";
-              break;
-            case "2":
-              this.wordBookType = "Chapter2_3";
-              break;
-            case "3":
-              this.wordBookType = "Chapter2_2";
-              break;
-            case "4":
-              this.wordBookType = "Chapter2_9";
-              break;
-            case "5":
-              this.wordBookType = "Chapter2_4";
-              break;
-            default:
-              this.wordBookType = null;
-          }
-
-          this.goToPage(this.wordBookType);
-        } catch (error) {
-          console.error("단어장 정보 불러오는 중 오류 발생:", error);
-        }
-      }
+    components: {
+        BookInfo: BookInfo,
     },
-
-    complete() {
-      const { unit_id, book_id } = this.$route.query;
-      this.$router.push({
-        name: "Dashboard",
-        query: { value: this.seq, unit_id, book_id },
-      });
-    },
-
-    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.intervalId = null;
-            console.log("모든 타이머가 완료되었습니다.");
-          }
-        }
-      }, 1000);
-    },
-  },
-  mounted() {
-    this.pageSetting();
-    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;
 }
 .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>

7732467

1533a48

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/new_img/logo_v2.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"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="goToPrevPage"
-      >
-        <!-- @click="goToPrevPage" -->
-        <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="" style="height: 150px" />
-            <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/new_img/logo_v2.png" alt="" />
                 </div>
-                <article>
-                  <p ref="speakText" class="speakText mb25">
-                    위의 버튼을 누른 후 단어를 말해보세요!
-                  </p>
-                </article>
-              </section>
-            </div>
-          </div>
+            </router-link>
         </div>
-      </div>
-      <div class="next-btn" @click="goToNextPage">
-        <!-- @click="goToNextPage" -->
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="goToPrevPage">
+                <!-- @click="goToPrevPage" -->
+                <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="" style="height: 150px" />
+                        <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="goToNextPage">
+                <!-- @click="goToNextPage" -->
+                <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 BookInfo from '../../../component/BookInfo.vue';
+import { mdiStop } from '@mdi/js';
 export default {
-  data() {
-    return {
-      items: [],
-      currentCon: {
-        imgSrc: "",
-        titleEm: "",
-        title: "",
-        boxText: "명",
-        subtitle: "",
-      },
-      selectedIndex: 0,
-      timer: "00",
-      intervalId: null,
-
-      isRecording: false, // 녹음 중 여부
-      mediaRecorder: null,
-      audioChunks: [], // 녹음된 오디오 데이터
-      audioBlob: null, // 오디오 Blob 객체
-      stream: null, // MediaStream 객체
-
-      path: mdiStop,
-      nowWord: "cloud",
-
-      wdBookId: "WORD_BOOK_000000000000043",
-      wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
-      currentWdBkIndex: 0, // 현재 단어장 인덱스
-      wdBookTypeIdState: "", // 이동할 페이지 타입 id
-      wordBookType: "", // 이동할 페이지
-
-      seq: this.$store.getters.seqNum,
-      hiddenState: false,
-    };
-  },
-  methods: {
-    pageSetting() {
-      this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
-      this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
-      this.wdBookId =
-        this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
-
-      if (this.currentWdBkIndex - 1 < 0) {
-        this.hiddenState = true;
-      }
-      this.fetchWordList();
-    },
-
-    async goToPrevPage() {
-      if (this.currentWdBkIndex - 1 < 0) {
-        alert("단어장 첫번째 페이지 입니다");
-      } else {
-        this.currentWdBkIndex--;
-        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
-
-        try {
-          const response = await axios.post("/wordbook/find.json", {
-            wdBookId:
-              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
-          });
-          this.wdBookTypeIdState = response.data.wdBookTypeId;
-          console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
-
-          switch (this.wdBookTypeIdState) {
-            case "1":
-              this.wordBookType = "Chapter2";
-              break;
-            case "2":
-              this.wordBookType = "Chapter2_3";
-              break;
-            case "3":
-              this.wordBookType = "Chapter2_2";
-              break;
-            case "4":
-              this.wordBookType = "Chapter2_9";
-              break;
-            case "5":
-              this.wordBookType = "Chapter2_4";
-              break;
-            default:
-              this.wordBookType = null;
-          }
-
-          this.goToPage(this.wordBookType);
-        } catch (error) {
-          console.error("단어장 정보 불러오는 중 오류 발생:", error);
-        }
-      }
-    },
-
-    async goToNextPage() {
-      if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
-        alert("단어장 학습 완료!");
-        this.complete();
-      } else {
-        this.currentWdBkIndex++;
-        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
-
-        try {
-          const response = await axios.post("/wordbook/find.json", {
-            wdBookId:
-              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
-          });
-          this.wdBookTypeIdState = response.data.wdBookTypeId;
-          console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
-
-          switch (this.wdBookTypeIdState) {
-            case "1":
-              this.wordBookType = "Chapter2";
-              break;
-            case "2":
-              this.wordBookType = "Chapter2_3";
-              break;
-            case "3":
-              this.wordBookType = "Chapter2_2";
-              break;
-            case "4":
-              this.wordBookType = "Chapter2_9";
-              break;
-            case "5":
-              this.wordBookType = "Chapter2_4";
-              break;
-            default:
-              this.wordBookType = null;
-          }
-
-          this.goToPage(this.wordBookType);
-        } catch (error) {
-          console.error("단어장 정보 불러오는 중 오류 발생:", error);
-        }
-      }
-    },
-
-    complete() {
-      const { unit_id, book_id } = this.$route.query;
-      this.$router.push({
-        name: "Dashboard",
-        query: { value: this.seq, unit_id, book_id },
-      });
-    },
-
-    goToPage(page) {
-      this.$router.push({ name: page });
-    },
-
-    updateContent(index) {
-      this.selectedIndex = index;
-      this.currentCon = this.items[index].con;
-      console.log(this.currentCon.imgSrc);
-      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);
-      }
-    },
-
-    // 단어 리스트를 서버에서 받아와 items에 적용하는 메서드
-    async fetchWordList() {
-      try {
-        const response = await axios.post("/word/getWordsByBookId.json", {
-          wdBookId: this.wdBookId,
-        });
-
-        this.wordList = response.data;
-
-        const requests = this.wordList.map(async (word, index) => {
-          // fileRpath를 받아오기 위한 요청
-          const fileResponse = await axios.post("/file/find.json", {
-            file_mng_id: word.fileMngId,
-          });
-
-          // fileResponse.data.list에서 fileRpath 값을 추출하여 imgSrc에 설정
-          const fileRpath =
-            fileResponse.data.list.length > 0
-              ? fileResponse.data.list[0].fileRpath
-              : null;
-          const imgSrc = fileRpath
-            ? `http://165.229.169.113:9080/${fileRpath}`
-            : "";
-
-          return {
-            imgSrc1: `client/resources/img/img53_${6 + index}_35s.png`,
-            imgSrc2: `client/resources/img/img53_${1 + index}_35s.png`,
-            con: {
-              imgSrc, // fileRpath를 imgSrc에 설정
-              titleEm: word.wdNm.charAt(0), // 단어의 첫 글자
-              title: word.wdNm.slice(1), // 단어의 나머지 부분
-              boxText: "명",
-              subtitle: word.wdMnng, // 단어의 의미
+    data() {
+        return {
+            items: [],
+            currentCon: {
+                imgSrc: '',
+                titleEm: '',
+                title: '',
+                boxText: '명',
+                subtitle: '',
             },
-          };
-        });
+            selectedIndex: 0,
+            timer: '00',
+            intervalId: null,
 
-        // 모든 요청이 완료될 때까지 대기
-        this.items = await Promise.all(requests);
+            isRecording: false, // 녹음 중 여부
+            mediaRecorder: null,
+            audioChunks: [], // 녹음된 오디오 데이터
+            audioBlob: null, // 오디오 Blob 객체
+            stream: null, // MediaStream 객체
 
-        // items 리스트의 첫 번째 항목을 currentCon에 설정
-        if (this.items.length > 0) {
-          this.currentCon = this.items[0].con;
-          this.nowWord = this.currentCon.titleEm + this.currentCon.title;
+            path: mdiStop,
+            nowWord: 'cloud',
+
+            wdBookId: 'WORD_BOOK_000000000000043',
+            wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
+            currentWdBkIndex: 0, // 현재 단어장 인덱스
+            wdBookTypeIdState: '', // 이동할 페이지 타입 id
+            wordBookType: '', // 이동할 페이지
+
+            seq: this.$store.getters.seqNum,
+            hiddenState: false,
+        };
+    },
+    methods: {
+        pageSetting() {
+            this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
+            this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
+            this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
+
+            if (this.currentWdBkIndex - 1 < 0) {
+                this.hiddenState = true;
+            }
+            this.fetchWordList();
+        },
+
+        async goToPrevPage() {
+            if (this.currentWdBkIndex - 1 < 0) {
+                alert('단어장 첫번째 페이지 입니다');
+            } else {
+                this.currentWdBkIndex--;
+                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+
+                try {
+                    const response = await axios.post('/wordbook/find.json', {
+                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+                    });
+                    this.wdBookTypeIdState = response.data.wdBookTypeId;
+                    console.log('이전 단어장 타입 id: ', this.wdBookTypeIdState);
+
+                    switch (this.wdBookTypeIdState) {
+                        case '1':
+                            this.wordBookType = 'Chapter2';
+                            break;
+                        case '2':
+                            this.wordBookType = 'Chapter2_3';
+                            break;
+                        case '3':
+                            this.wordBookType = 'Chapter2_2';
+                            break;
+                        case '4':
+                            this.wordBookType = 'Chapter2_9';
+                            break;
+                        case '5':
+                            this.wordBookType = 'Chapter2_4';
+                            break;
+                        default:
+                            this.wordBookType = null;
+                    }
+
+                    this.goToPage(this.wordBookType);
+                } catch (error) {
+                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
+                }
+            }
+        },
+
+        async goToNextPage() {
+            if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
+                alert('단어장 학습 완료!');
+                this.complete();
+            } else {
+                this.currentWdBkIndex++;
+                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+
+                try {
+                    const response = await axios.post('/wordbook/find.json', {
+                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+                    });
+                    this.wdBookTypeIdState = response.data.wdBookTypeId;
+                    console.log('다음 단어장 타입 id: ', this.wdBookTypeIdState);
+
+                    switch (this.wdBookTypeIdState) {
+                        case '1':
+                            this.wordBookType = 'Chapter2';
+                            break;
+                        case '2':
+                            this.wordBookType = 'Chapter2_3';
+                            break;
+                        case '3':
+                            this.wordBookType = 'Chapter2_2';
+                            break;
+                        case '4':
+                            this.wordBookType = 'Chapter2_9';
+                            break;
+                        case '5':
+                            this.wordBookType = 'Chapter2_4';
+                            break;
+                        default:
+                            this.wordBookType = null;
+                    }
+
+                    this.goToPage(this.wordBookType);
+                } catch (error) {
+                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
+                }
+            }
+        },
+
+        complete() {
+            const { unit_id, book_id } = this.$route.query;
+            this.$router.push({
+                name: 'Dashboard',
+                query: { value: this.seq, unit_id, book_id },
+            });
+        },
+
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+
+        updateContent(index) {
+            this.selectedIndex = index;
+            this.currentCon = this.items[index].con;
+            console.log(this.currentCon.imgSrc);
+            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);
+            }
+        },
+
+        // 단어 리스트를 서버에서 받아와 items에 적용하는 메서드
+        async fetchWordList() {
+            try {
+                const response = await axios.post('/word/getWordsByBookId.json', {
+                    wdBookId: this.wdBookId,
+                });
+
+                this.wordList = response.data;
+
+                const requests = this.wordList.map(async (word, index) => {
+                    // fileRpath를 받아오기 위한 요청
+                    const fileResponse = await axios.post('/file/find.json', {
+                        file_mng_id: word.fileMngId,
+                    });
+
+                    // fileResponse.data.list에서 fileRpath 값을 추출하여 imgSrc에 설정
+                    const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
+                    const imgSrc = fileRpath ? `http://165.229.169.113:9080/${fileRpath}` : '';
+
+                    return {
+                        imgSrc1: `client/resources/img/img53_${6 + index}_35s.png`,
+                        imgSrc2: `client/resources/img/img53_${1 + index}_35s.png`,
+                        con: {
+                            imgSrc, // fileRpath를 imgSrc에 설정
+                            titleEm: word.wdNm.charAt(0), // 단어의 첫 글자
+                            title: word.wdNm.slice(1), // 단어의 나머지 부분
+                            boxText: '명',
+                            subtitle: word.wdMnng, // 단어의 의미
+                        },
+                    };
+                });
+
+                // 모든 요청이 완료될 때까지 대기
+                this.items = await Promise.all(requests);
+
+                // items 리스트의 첫 번째 항목을 currentCon에 설정
+                if (this.items.length > 0) {
+                    this.currentCon = this.items[0].con;
+                    this.nowWord = this.currentCon.titleEm + this.currentCon.title;
+                }
+            } catch (error) {
+                console.error('단어 목록을 불러오는 중 오류 발생:', 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
+        },
+    },
+    mounted() {
+        this.pageSetting();
+    },
+    beforeDestroy() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
         }
-      } catch (error) {
-        console.error("단어 목록을 불러오는 중 오류 발생:", 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
+    components: {
+        BookInfo: BookInfo,
     },
-  },
-  mounted() {
-    this.pageSetting();
-  },
-  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>

7732467

1533a48

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/new_img/logo_v2.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"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="goToPrevPage"
-      >
-        <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="">
-          </button> -->
-        </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="" style="width: 120px" />
-                  </div>
-                  <p class="subtitle3" style="height: 20%">{{ item.title }}</p>
+    <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/new_img/logo_v2.png" alt="" />
                 </div>
-              </button>
-            </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>
+            </router-link>
         </div>
-      </div>
-      <div class="next-btn" @click="goToNextPage">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="goToPrevPage">
+                <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="">
+          </button> -->
+                </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="" style="width: 120px" />
+                                    </div>
+                                    <p class="subtitle3" style="height: 20%">{{ item.title }}</p>
+                                </div>
+                            </button>
+                        </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 class="next-btn" @click="goToNextPage">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 <script>
-import SvgIcon from "@jamescoyle/vue-icon";
-import axios from "axios";
-
+import SvgIcon from '@jamescoyle/vue-icon';
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      items: [],
-      selectedIndex: 0,
+    data() {
+        return {
+            items: [],
+            selectedIndex: 0,
 
-      wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
-      wdBookId: "", // 현재 단어장 id
-      currentWdBkIndex: 0, // 현재 단어장 인덱스
-      wdBookTypeIdState: "", // 이동할 페이지 타입 id
-      wordBookType: "", // 이동할 페이지
+            wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
+            wdBookId: '', // 현재 단어장 id
+            currentWdBkIndex: 0, // 현재 단어장 인덱스
+            wdBookTypeIdState: '', // 이동할 페이지 타입 id
+            wordBookType: '', // 이동할 페이지
 
-      seq: this.$store.getters.seqNum,
+            seq: this.$store.getters.seqNum,
 
-      hiddenState: false,
-    };
-  },
-  methods: {
-    pageSetting() {
-      this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
-      this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
-      this.wdBookId =
-        this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
-
-      if (this.currentWdBkIndex - 1 < 0) {
-        this.hiddenState = true;
-      }
-
-      this.fetchWordList();
+            hiddenState: false,
+        };
     },
+    methods: {
+        pageSetting() {
+            this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
+            this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
+            this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
 
-    async fetchWordList() {
-      try {
-        const response = await axios.post("/word/getWordsByBookId.json", {
-          wdBookId: this.wdBookId,
-        });
+            if (this.currentWdBkIndex - 1 < 0) {
+                this.hiddenState = true;
+            }
 
-        const wordList = response.data;
+            this.fetchWordList();
+        },
 
-        // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리
-        const requests = wordList.map(async (word) => {
-          const fileResponse = await axios.post("/file/find.json", {
-            file_mng_id: word.fileMngId,
-          });
+        async fetchWordList() {
+            try {
+                const response = await axios.post('/word/getWordsByBookId.json', {
+                    wdBookId: this.wdBookId,
+                });
 
-          const fileRpath =
-            fileResponse.data.list.length > 0
-              ? fileResponse.data.list[0].fileRpath
-              : null;
-          console.log("각 단어의 fileRpath: ", fileRpath);
+                const wordList = response.data;
 
-          // items 배열에 새로운 항목 추가
-          this.items.push({
-            imgSrc1: "client/resources/img/img61_36s.png",
-            imgSrc2: "client/resources/img/img62_36s.png",
-            imgSrc: "http://165.229.169.113:9080/" + fileRpath, // 받아온 fileRpath로 이미지 설정
-            title: word.wdNm,
-          });
-        });
+                // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리
+                const requests = wordList.map(async (word) => {
+                    const fileResponse = await axios.post('/file/find.json', {
+                        file_mng_id: word.fileMngId,
+                    });
 
-        // 모든 요청이 완료될 때까지 대기
-        await Promise.all(requests);
-      } catch (error) {
-        console.error("단어 목록을 불러오는 중 오류 발생:", error);
-      }
+                    const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
+                    console.log('각 단어의 fileRpath: ', fileRpath);
+
+                    // items 배열에 새로운 항목 추가
+                    this.items.push({
+                        imgSrc1: 'client/resources/img/img61_36s.png',
+                        imgSrc2: 'client/resources/img/img62_36s.png',
+                        imgSrc: 'http://165.229.169.113:9080/' + fileRpath, // 받아온 fileRpath로 이미지 설정
+                        title: word.wdNm,
+                    });
+                });
+
+                // 모든 요청이 완료될 때까지 대기
+                await Promise.all(requests);
+            } catch (error) {
+                console.error('단어 목록을 불러오는 중 오류 발생:', error);
+            }
+        },
+
+        async goToPrevPage() {
+            if (this.currentWdBkIndex - 1 < 0) {
+                alert('단어장 첫번째 페이지 입니다');
+            } else {
+                this.currentWdBkIndex--;
+                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+
+                try {
+                    const response = await axios.post('/wordbook/find.json', {
+                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+                    });
+                    this.wdBookTypeIdState = response.data.wdBookTypeId;
+                    console.log('이전 단어장 타입 id: ', this.wdBookTypeIdState);
+
+                    switch (this.wdBookTypeIdState) {
+                        case '1':
+                            this.wordBookType = 'Chapter2';
+                            break;
+                        case '2':
+                            this.wordBookType = 'Chapter2_3';
+                            break;
+                        case '3':
+                            this.wordBookType = 'Chapter2_2';
+                            break;
+                        case '4':
+                            this.wordBookType = 'Chapter2_9';
+                            break;
+                        case '5':
+                            this.wordBookType = 'Chapter2_4';
+                            break;
+                        default:
+                            this.wordBookType = null;
+                    }
+
+                    this.goToPage(this.wordBookType);
+                } catch (error) {
+                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
+                }
+            }
+        },
+
+        async goToNextPage() {
+            if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
+                alert('단어 학습 완료!');
+                this.complete();
+            } else {
+                this.currentWdBkIndex++;
+                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+
+                try {
+                    const response = await axios.post('/wordbook/find.json', {
+                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+                    });
+                    this.wdBookTypeIdState = response.data.wdBookTypeId;
+                    console.log('다음 단어장 타입 id: ', this.wdBookTypeIdState);
+
+                    switch (this.wdBookTypeIdState) {
+                        case '1':
+                            this.wordBookType = 'Chapter2';
+                            break;
+                        case '2':
+                            this.wordBookType = 'Chapter2_3';
+                            break;
+                        case '3':
+                            this.wordBookType = 'Chapter2_2';
+                            break;
+                        case '4':
+                            this.wordBookType = 'Chapter2_9';
+                            break;
+                        case '5':
+                            this.wordBookType = 'Chapter2_4';
+                            break;
+                        default:
+                            this.wordBookType = null;
+                    }
+
+                    this.goToPage(this.wordBookType);
+                } catch (error) {
+                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
+                }
+            }
+        },
+
+        complete() {
+            const { unit_id, book_id } = this.$route.query;
+            this.$router.push({
+                name: 'Dashboard',
+                query: { value: this.seq, unit_id, book_id },
+            });
+        },
+
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        updateContent(index) {
+            this.selectedIndex = index;
+            this.currentCon = this.items[index].con;
+            setTimeout(() => {
+                if (index == 1) {
+                    alert('정답입니다!');
+                    this.goToNextPage();
+                } else {
+                    alert('오답입니다! 다시 한번 단어를 듣고 정답을 맞춰보세요!');
+                    this.playAudio();
+                }
+            }, 0);
+        },
+        playAudio() {
+            const audio = document.getElementById('audio-player');
+            audio.play();
+            console.log('playing');
+        },
     },
-
-    async goToPrevPage() {
-      if (this.currentWdBkIndex - 1 < 0) {
-        alert("단어장 첫번째 페이지 입니다");
-      } else {
-        this.currentWdBkIndex--;
-        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
-
-        try {
-          const response = await axios.post("/wordbook/find.json", {
-            wdBookId:
-              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
-          });
-          this.wdBookTypeIdState = response.data.wdBookTypeId;
-          console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
-
-          switch (this.wdBookTypeIdState) {
-            case "1":
-              this.wordBookType = "Chapter2";
-              break;
-            case "2":
-              this.wordBookType = "Chapter2_3";
-              break;
-            case "3":
-              this.wordBookType = "Chapter2_2";
-              break;
-            case "4":
-              this.wordBookType = "Chapter2_9";
-              break;
-            case "5":
-              this.wordBookType = "Chapter2_4";
-              break;
-            default:
-              this.wordBookType = null;
-          }
-
-          this.goToPage(this.wordBookType);
-        } catch (error) {
-          console.error("단어장 정보 불러오는 중 오류 발생:", error);
-        }
-      }
+    components: {
+        SvgIcon,
+        BookInfo: BookInfo,
     },
-
-    async goToNextPage() {
-      if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
-        alert("단어 학습 완료!");
-        this.complete();
-      } else {
-        this.currentWdBkIndex++;
-        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
-
-        try {
-          const response = await axios.post("/wordbook/find.json", {
-            wdBookId:
-              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
-          });
-          this.wdBookTypeIdState = response.data.wdBookTypeId;
-          console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
-
-          switch (this.wdBookTypeIdState) {
-            case "1":
-              this.wordBookType = "Chapter2";
-              break;
-            case "2":
-              this.wordBookType = "Chapter2_3";
-              break;
-            case "3":
-              this.wordBookType = "Chapter2_2";
-              break;
-            case "4":
-              this.wordBookType = "Chapter2_9";
-              break;
-            case "5":
-              this.wordBookType = "Chapter2_4";
-              break;
-            default:
-              this.wordBookType = null;
-          }
-
-          this.goToPage(this.wordBookType);
-        } catch (error) {
-          console.error("단어장 정보 불러오는 중 오류 발생:", error);
-        }
-      }
+    mounted() {
+        this.pageSetting();
     },
-
-    complete() {
-      const { unit_id, book_id } = this.$route.query;
-      this.$router.push({
-        name: "Dashboard",
-        query: { value: this.seq, unit_id, book_id },
-      });
-    },
-
-    goToPage(page) {
-      this.$router.push({ name: page });
-    },
-    updateContent(index) {
-      this.selectedIndex = index;
-      this.currentCon = this.items[index].con;
-      setTimeout(() => {
-        if (index == 1) {
-          alert("정답입니다!");
-          this.goToNextPage();
-        } else {
-          alert("오답입니다! 다시 한번 단어를 듣고 정답을 맞춰보세요!");
-          this.playAudio();
-        }
-      }, 0);
-    },
-    playAudio() {
-      const audio = document.getElementById("audio-player");
-      audio.play();
-      console.log("playing");
-    },
-  },
-  components: {
-    SvgIcon,
-  },
-  mounted() {
-    this.pageSetting();
-  },
 };
 </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;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .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>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter2_5.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/new_img/logo_v2.png" alt="" />
+    <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/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </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"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="previousProblem()"
-      >
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <div class="content title-box">
-        <div style="display: flex; justify-content: space-between">
-          <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
-          <button id="returnButton" @click="returnPage" style="margin: 4rem">
-            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
-            <p>되돌리기</p>
-          </button>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
         </div>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">그림을 보고 문장을 완성시켜줘!</p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <div class="content title-box">
+                <div style="display: flex; justify-content: space-between">
+                    <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
+                    <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>
+                    <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
               </button> -->
-        </div>
+                </div>
 
-        <div class="text-ct">
-          <!-- <p class="title1 mb40" style="color: #464749;">The sun rises in the east and sets in the west. It is very hot during summer.</p>
+                <div class="text-ct">
+                    <!-- <p class="title1 mb40" style="color: #464749;">The sun rises in the east and sets in the west. It is very hot during summer.</p>
               <img src="../../../../resources/img/img65_37s.png" alt=""> -->
 
-          <img
-            class="exampleImg"
-            :src="imgUrl"
-            reloadable="true"
-            alt="example img"
-          />
+                    <img class="exampleImg" :src="imgUrl" reloadable="true" alt="example img" />
 
-          <!-- 정답 칸 -->
-          <div class="dropGroup flex align-center justify-center mt30">
-            <span class="mr30">{{ beforeQuestion }}</span>
+                    <!-- 정답 칸 -->
+                    <div class="dropGroup flex align-center justify-center mt30">
+                        <span class="mr30">{{ beforeQuestion }}</span>
 
-            <!-- 드롭 가능한 영역 -->
-            <div class="dropContainer" id="targetContainer">
-              <div
-                v-for="(slot, index) in answerLength"
-                :key="index"
-                class="dropSlot"
-                @dragover.prevent
-                @drop="onDrop($event, index)"
-              >
-                <div
-                  class="dropSlot-inner"
-                  draggable="true"
-                  @dragstart="onDragStart($event, userAnswer[index], index)"
-                >
-                  <img
-                    src="../../../../resources/img/img64_37s.png"
-                    alt="answer slot"
-                  />
-                  <div v-if="userAnswer[index]" class="dropped-char">
-                    {{ userAnswer[index].toUpperCase() }}
-                  </div>
+                        <!-- 드롭 가능한 영역 -->
+                        <div class="dropContainer" id="targetContainer">
+                            <div
+                                v-for="(slot, index) in answerLength"
+                                :key="index"
+                                class="dropSlot"
+                                @dragover.prevent
+                                @drop="onDrop($event, index)"
+                            >
+                                <div
+                                    class="dropSlot-inner"
+                                    draggable="true"
+                                    @dragstart="onDragStart($event, userAnswer[index], index)"
+                                >
+                                    <img src="../../../../resources/img/img64_37s.png" alt="answer slot" />
+                                    <div v-if="userAnswer[index]" class="dropped-char">
+                                        {{ userAnswer[index].toUpperCase() }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <span class="mr30">{{ afterQuestion }}</span>
+                    </div>
+
+                    <!-- 드래그 가능한 버튼 -->
+                    <div class="dragGroup mt40" id="sourceContainer">
+                        <button
+                            v-for="(char, index) in choiceCharacters"
+                            :key="index"
+                            draggable="true"
+                            @dragstart="onDragStart($event, char)"
+                        >
+                            <img src="../../../../resources/img/img63_37s_2.png" alt="drag letter" />
+                            <p>{{ char.toUpperCase() }}</p>
+                        </button>
+                    </div>
                 </div>
-              </div>
             </div>
-
-            <span class="mr30">{{ afterQuestion }}</span>
-          </div>
-
-          <!-- 드래그 가능한 버튼 -->
-          <div class="dragGroup mt40" id="sourceContainer">
-            <button
-              v-for="(char, index) in choiceCharacters"
-              :key="index"
-              draggable="true"
-              @dragstart="onDragStart($event, char)"
-            >
-              <img
-                src="../../../../resources/img/img63_37s_2.png"
-                alt="drag letter"
-              />
-              <p>{{ char.toUpperCase() }}</p>
-            </button>
-          </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
         </div>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      imgSrc: "client/resources/img/jumpingRabbit.gif",
-      example: "",
-      beforeQuestion: "",
-      afterQuestion: "",
-      choice: "",
-      answer: "",
-      answerLength: 0, // 초기화 시 0으로 설정
+    data() {
+        return {
+            imgSrc: 'client/resources/img/jumpingRabbit.gif',
+            example: '',
+            beforeQuestion: '',
+            afterQuestion: '',
+            choice: '',
+            answer: '',
+            answerLength: 0, // 초기화 시 0으로 설정
 
-      userAnswer: [], // 초기화 시 빈 배열로 설정
-      draggedChar: null, // 드래그한 문자를 임시로 저장
+            userAnswer: [], // 초기화 시 빈 배열로 설정
+            draggedChar: null, // 드래그한 문자를 임시로 저장
 
-      prblm_id: [],
-      unit_id: null,
-      dataList: [],
+            prblm_id: [],
+            unit_id: null,
+            dataList: [],
 
-      seq: this.$store.getters.seqNum,
-      hiddenState: false,
+            seq: this.$store.getters.seqNum,
+            hiddenState: false,
 
-      imgUrl: null,
-    };
-  },
-  computed: {},
-  methods: {
-    complete() {
-      // 로컬 스토리지에서 currentDashboard 값을 가져옴
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
-
-        const { unit_id, book_id } = this.$route.query;
-        if (currentDashboard === "Learning") {
-          // Learning 모드일 때 Dashboard로 이동
-          this.$router.push({
-            name: "Dashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
-        } else if (currentDashboard === "AI") {
-          // AI 모드일 때 AIDashboard로 이동
-          this.$router.push({
-            name: "AIDashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
-        }
-      } else {
-        console.error("currentDashboard 값이 없습니다.");
-      }
+            imgUrl: null,
+        };
     },
-    goToPage(page) {
-      this.$router.push({ name: page });
-    },
-    splitExample() {
-      const parts = this.example.split("/?/");
-      if (parts.length === 2) {
-        this.beforeQuestion = parts[0];
-        this.afterQuestion = parts[1];
-      }
-    },
-    // 드래그 시작 시 호출
-    onDragStart(event, char) {
-      this.draggedChar = char;
-    },
-    // 드롭 시 호출
-    onDrop(event, index) {
-      if (this.userAnswer[index] === "") {
-        this.userAnswer.splice(index, 1, this.draggedChar);
-        const charIndex = this.choiceCharacters.indexOf(this.draggedChar);
-        console.log(charIndex);
-        if (charIndex > -1) {
-          this.choiceCharacters.splice(charIndex, 1); // 드래그한 문자를 choice에서 제거
-        }
-        this.draggedChar = null;
-        this.checkAnswer(); // 드롭 후 정답을 확인
-      }
-    },
-    checkAnswer() {
-      // userAnswer 배열이 모두 채워졌는지 확인
-      if (!this.userAnswer.includes("")) {
-        setTimeout(() => {
-          if (this.userAnswer.join("") === this.answer) {
-            alert("정답입니다!");
-            this.nextProblem();
-          } else {
-            alert("오답입니다!");
-          }
-        }, 0);
-      }
-    },
-    initializeUserAnswer() {
-      this.answerLength = this.answer.length; // answer의 길이를 answerLength에 설정
-      this.userAnswer = Array(this.answerLength).fill(""); // answerLength만큼 빈 배열 생성
-    },
-    returnPage() {
-      window.location.reload();
-    },
-    // async getProblem() {
-    //   const prblmId = this.currentLearningId.prblm_id;
+    computed: {},
+    methods: {
+        complete() {
+            // 로컬 스토리지에서 currentDashboard 값을 가져옴
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
 
-    //   try {
-    //     const res = await axios.post(
-    //       "problem/problemInfo.json",
-    //       {
-    //         prblmId: prblmId,
-    //       },
-    //       {
-    //         headers: {
-    //           "Content-Type": "application/json; charset=UTF-8",
-    //         },
-    //       }
-    //     );
-
-    //     console.log("problem - response : ", res.data);
-    //     this.dataList = res.data.problem;
-    //     this.problemDetail = res.data.problemDetail[0];
-    //     this.example = this.dataList.prblmExpln;
-    //     this.answer = this.problemDetail.prblmDtlExpln;
-    //     this.choice = this.answer ? this.shuffleString(this.answer) : "";
-    //     this.splitExample();
-    //     this.initializeUserAnswer();
-    //     this.choiceCharacters = this.choice.split("");
-
-    //     const fileInfo = await this.findFile(this.dataList.fileMngId);
-    //     if (fileInfo) {
-    //       this.imgUrl = "http://165.229.169.113:9080/" + fileInfo.fileRpath;
-    //       console.log(this.imgUrl);
-    //     } else {
-    //       console.warn("No file found for the given fileMngId.");
-    //     }
-    //   } catch (error) {
-    //     console.log("problem - error : ", error);
-    //   }
-    // },
-
-    async getProblem() {
-      // 로컬 스토리지에서 currentDashboard를 확인
-      const savedState = localStorage.getItem("vuexState");
-      let prblmId = null;
-
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
-
-        if (currentDashboard === "AI") {
-          // AI 모드일 경우 로컬 스토리지에서 currentLearningIds를 사용
-          prblmId = parsedState.currentLearningIds; // 로컬스토리지에서 가져온 currentLearningIds 사용
-          console.log("AI 모드에서 currentLearningIds 사용:", prblmId);
-        } else {
-          // Learning 모드일 경우 기존 방식 사용
-          prblmId = this.currentLearningId.prblm_id;
-          console.log("Learning 모드에서 currentLearningId 사용:", prblmId);
-        }
-      }
-
-      try {
-        const res = await axios.post(
-          "problem/problemInfo.json",
-          {
-            prblmId: prblmId, // AI 모드 또는 Learning 모드에 따라 결정된 prblmId 사용
-          },
-          {
-            headers: {
-              "Content-Type": "application/json; charset=UTF-8",
+                const { unit_id, book_id } = this.$route.query;
+                if (currentDashboard === 'Learning') {
+                    // Learning 모드일 때 Dashboard로 이동
+                    this.$router.push({
+                        name: 'Dashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                } else if (currentDashboard === 'AI') {
+                    // AI 모드일 때 AIDashboard로 이동
+                    this.$router.push({
+                        name: 'AIDashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                }
+            } else {
+                console.error('currentDashboard 값이 없습니다.');
             }
-          }
-        );
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        splitExample() {
+            const parts = this.example.split('/?/');
+            if (parts.length === 2) {
+                this.beforeQuestion = parts[0];
+                this.afterQuestion = parts[1];
+            }
+        },
+        // 드래그 시작 시 호출
+        onDragStart(event, char) {
+            this.draggedChar = char;
+        },
+        // 드롭 시 호출
+        onDrop(event, index) {
+            if (this.userAnswer[index] === '') {
+                this.userAnswer.splice(index, 1, this.draggedChar);
+                const charIndex = this.choiceCharacters.indexOf(this.draggedChar);
+                console.log(charIndex);
+                if (charIndex > -1) {
+                    this.choiceCharacters.splice(charIndex, 1); // 드래그한 문자를 choice에서 제거
+                }
+                this.draggedChar = null;
+                this.checkAnswer(); // 드롭 후 정답을 확인
+            }
+        },
+        checkAnswer() {
+            // userAnswer 배열이 모두 채워졌는지 확인
+            if (!this.userAnswer.includes('')) {
+                setTimeout(() => {
+                    if (this.userAnswer.join('') === this.answer) {
+                        alert('정답입니다!');
+                        this.nextProblem();
+                    } else {
+                        alert('오답입니다!');
+                    }
+                }, 0);
+            }
+        },
+        initializeUserAnswer() {
+            this.answerLength = this.answer.length; // answer의 길이를 answerLength에 설정
+            this.userAnswer = Array(this.answerLength).fill(''); // answerLength만큼 빈 배열 생성
+        },
+        returnPage() {
+            window.location.reload();
+        },
+        // async getProblem() {
+        //   const prblmId = this.currentLearningId.prblm_id;
 
-        console.log("problem - response : ", res.data);
-        this.dataList = res.data.problem;
-        this.problemDetail = res.data.problemDetail[0];
-        this.example = this.dataList.prblmExpln;
-        this.answer = this.problemDetail.prblmDtlExpln;
-        this.choice = this.answer ? this.shuffleString(this.answer) : "";
-        this.splitExample();
-        this.initializeUserAnswer();
-        this.choiceCharacters = this.choice.split("");
+        //   try {
+        //     const res = await axios.post(
+        //       "problem/problemInfo.json",
+        //       {
+        //         prblmId: prblmId,
+        //       },
+        //       {
+        //         headers: {
+        //           "Content-Type": "application/json; charset=UTF-8",
+        //         },
+        //       }
+        //     );
 
-        const fileInfo = await this.findFile(this.dataList.fileMngId);
-        if (fileInfo) {
-          this.imgUrl = "http://165.229.169.113:9080/" + fileInfo.fileRpath;
-          console.log(this.imgUrl);
-        } else {
-          console.warn("No file found for the given fileMngId.");
+        //     console.log("problem - response : ", res.data);
+        //     this.dataList = res.data.problem;
+        //     this.problemDetail = res.data.problemDetail[0];
+        //     this.example = this.dataList.prblmExpln;
+        //     this.answer = this.problemDetail.prblmDtlExpln;
+        //     this.choice = this.answer ? this.shuffleString(this.answer) : "";
+        //     this.splitExample();
+        //     this.initializeUserAnswer();
+        //     this.choiceCharacters = this.choice.split("");
+
+        //     const fileInfo = await this.findFile(this.dataList.fileMngId);
+        //     if (fileInfo) {
+        //       this.imgUrl = "http://165.229.169.113:9080/" + fileInfo.fileRpath;
+        //       console.log(this.imgUrl);
+        //     } else {
+        //       console.warn("No file found for the given fileMngId.");
+        //     }
+        //   } catch (error) {
+        //     console.log("problem - error : ", error);
+        //   }
+        // },
+
+        async getProblem() {
+            // 로컬 스토리지에서 currentDashboard를 확인
+            const savedState = localStorage.getItem('vuexState');
+            let prblmId = null;
+
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
+
+                if (currentDashboard === 'AI') {
+                    // AI 모드일 경우 로컬 스토리지에서 currentLearningIds를 사용
+                    prblmId = parsedState.currentLearningIds; // 로컬스토리지에서 가져온 currentLearningIds 사용
+                    console.log('AI 모드에서 currentLearningIds 사용:', prblmId);
+                } else {
+                    // Learning 모드일 경우 기존 방식 사용
+                    prblmId = this.currentLearningId.prblm_id;
+                    console.log('Learning 모드에서 currentLearningId 사용:', prblmId);
+                }
+            }
+
+            try {
+                const res = await axios.post(
+                    'problem/problemInfo.json',
+                    {
+                        prblmId: prblmId, // AI 모드 또는 Learning 모드에 따라 결정된 prblmId 사용
+                    },
+                    {
+                        headers: {
+                            'Content-Type': 'application/json; charset=UTF-8',
+                        },
+                    }
+                );
+
+                console.log('problem - response : ', res.data);
+                this.dataList = res.data.problem;
+                this.problemDetail = res.data.problemDetail[0];
+                this.example = this.dataList.prblmExpln;
+                this.answer = this.problemDetail.prblmDtlExpln;
+                this.choice = this.answer ? this.shuffleString(this.answer) : '';
+                this.splitExample();
+                this.initializeUserAnswer();
+                this.choiceCharacters = this.choice.split('');
+
+                const fileInfo = await this.findFile(this.dataList.fileMngId);
+                if (fileInfo) {
+                    this.imgUrl = 'http://165.229.169.113:9080/' + fileInfo.fileRpath;
+                    console.log(this.imgUrl);
+                } else {
+                    console.warn('No file found for the given fileMngId.');
+                }
+            } catch (error) {
+                console.log('problem - error : ', error);
+            }
+        },
+
+        shuffleString(string) {
+            const array = string.split('');
+            for (let i = array.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [array[i], array[j]] = [array[j], array[i]];
+            }
+            return array.join('');
+        },
+        async findFile(file_mng_id) {
+            try {
+                const res = await axios.post(
+                    '/file/find.json',
+                    {
+                        file_mng_id: file_mng_id,
+                    },
+                    {
+                        headers: {
+                            'Content-Type': 'application/json; charset=UTF-8',
+                        },
+                    }
+                );
+                return res.data.list[0];
+            } catch (error) {
+                console.log('result - error : ', error);
+                return null;
+            }
+        },
+        nextProblem() {
+            const problemData = {
+                prblmImfo: this.currentLearningId,
+                prblmNumber: this.currentProblemIndex,
+                prblmAns: this.selectedButton,
+            };
+            this.$store.dispatch('saveProblemData', problemData);
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            } else {
+                // 마지막 문제면 이동
+                // this.goToPage("Chapter4");
+                alert('문제 학습 완료');
+                this.complete();
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    mounted() {
+        this.getProblem();
+
+        if (this.currentProblemIndex == 0) {
+            this.hiddenState = true;
         }
-      } catch (error) {
-        console.log("problem - error : ", error);
-      }
     },
-
-    shuffleString(string) {
-      const array = string.split("");
-      for (let i = array.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [array[i], array[j]] = [array[j], array[i]];
-      }
-      return array.join("");
+    components: {
+        BookInfo: BookInfo,
     },
-    async findFile(file_mng_id) {
-      try {
-        const res = await axios.post(
-          "/file/find.json",
-          {
-            file_mng_id: file_mng_id,
-          },
-          {
-            headers: {
-              "Content-Type": "application/json; charset=UTF-8",
-            },
-          }
-        );
-        return res.data.list[0];
-      } catch (error) {
-        console.log("result - error : ", error);
-        return null;
-      }
-    },
-    nextProblem() {
-      const problemData = {
-        prblmImfo: this.currentLearningId,
-        prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton,
-      };
-      this.$store.dispatch("saveProblemData", problemData);
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        // this.goToPage("Chapter4");
-        alert("문제 학습 완료");
-        this.complete();
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-  },
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  mounted() {
-    this.getProblem();
-
-    if (this.currentProblemIndex == 0) {
-      this.hiddenState = true;
-    }
-  },
 };
 </script>
 <style scoped>
 .dropContainer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
 }
 
 .dropGroup button {
-  position: relative;
+    position: relative;
 }
 
 .dropGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .dragGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .dropGroup span {
-  margin: 0px 10px;
+    margin: 0px 10px;
 }
 
 .dropSlot {
-  position: relative;
-  width: 64px;
-  height: 64px;
+    position: relative;
+    width: 64px;
+    height: 64px;
 }
 
 .dropSlot-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
+    position: relative;
+    width: 100%;
+    height: 100%;
 }
 
 .dropped-char {
-  font-family: "ONEMobilePOPOTF";
-  position: absolute;
-  top: 55%;
-  left: 55%;
-  transform: translate(-50%, -50%);
-  font-size: 48px;
-  font-weight: bold;
-  color: black;
-  pointer-events: none;
+    font-family: 'ONEMobilePOPOTF';
+    position: absolute;
+    top: 55%;
+    left: 55%;
+    transform: translate(-50%, -50%);
+    font-size: 48px;
+    font-weight: bold;
+    color: black;
+    pointer-events: none;
 }
 
 .dragGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .exampleImg {
-  width: 15%;
+    width: 15%;
 }
 
 #sourceContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
 }
 
 .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>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter2_6.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/new_img/logo_v2.png" alt="" />
+    <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/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </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"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="previousProblem()"
-      >
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <div class="content title-box">
-        <div style="display: flex; justify-content: space-between">
-          <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
-          <button id="returnButton" @click="returnPage" style="margin: 4rem">
-            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
-            <p>되돌리기</p>
-          </button>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
         </div>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">
-            앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!
-          </p>
-        </div>
-        <div class="text-ct">
-          <div class="dropGroup">
-            <div class="flex justify-center">
-              <div
-                class="popTxt"
-                id="drop1"
-                @dragover.prevent
-                @drop="handleDrop(1)"
-              >
-                <img src="../../../../resources/img/img66_38s_1.png" alt="" />
-                <button v-if="showButton1">
-                  <img
-                    src="../../../../resources/img/img66_38s_1_color.png"
-                    alt=""
-                  />
-                  <p>{{ answerArr[0] }}</p>
-                </button>
-              </div>
-              <div
-                class="popTxt"
-                id="drop2"
-                @dragover.prevent
-                @drop="handleDrop(2)"
-              >
-                <img src="../../../../resources/img/img66_38s_2.png" alt="" />
-                <button v-if="showButton2">
-                  <img
-                    src="../../../../resources/img/img66_38s_2_color.png"
-                    alt=""
-                  />
-                  <p>{{ answerArr[1] }}</p>
-                </button>
-              </div>
-              <div
-                class="popTxt"
-                id="drop3"
-                @dragover.prevent
-                @drop="handleDrop(3)"
-              >
-                <img src="../../../../resources/img/img66_38s_3.png" alt="" />
-                <button v-if="showButton3">
-                  <img
-                    src="../../../../resources/img/img66_38s_3_color.png"
-                    alt=""
-                  />
-                  <p>{{ answerArr[2] }}</p>
-                </button>
-              </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" />
             </div>
-          </div>
-          <div class="dragGroup">
-            <article
-              style="right: 0; top: 36%"
-              @dragstart="handleDragStart(1)"
-              v-show="!dragHidden1"
-            >
-              <button id="drag1" draggable="true">
-                <img src="../../../../resources/img/img67_38s.png" alt="" />
-                <p>{{ answerArr[0] }}</p>
-              </button>
-            </article>
-            <article
-              style="left: 0; top: 36%"
-              @dragstart="handleDragStart(2)"
-              v-show="!dragHidden2"
-            >
-              <button id="drag2" draggable="true">
-                <img src="../../../../resources/img/img68_38s.png" alt="" />
-                <p>{{ answerArr[1] }}</p>
-              </button>
-            </article>
-            <article
-              style="left: 50%; top: 10%"
-              @dragstart="handleDragStart(3)"
-              v-show="!dragHidden3"
-            >
-              <button id="drag3" draggable="true">
-                <img src="../../../../resources/img/img69_38s.png" alt="" />
-                <p>{{ answerArr[2] }}</p>
-              </button>
-            </article>
-          </div>
+            <div class="content title-box">
+                <div style="display: flex; justify-content: space-between">
+                    <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
+                    <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>
+                </div>
+                <div class="text-ct">
+                    <div class="dropGroup">
+                        <div class="flex justify-center">
+                            <div class="popTxt" id="drop1" @dragover.prevent @drop="handleDrop(1)">
+                                <img src="../../../../resources/img/img66_38s_1.png" alt="" />
+                                <button v-if="showButton1">
+                                    <img src="../../../../resources/img/img66_38s_1_color.png" alt="" />
+                                    <p>{{ answerArr[0] }}</p>
+                                </button>
+                            </div>
+                            <div class="popTxt" id="drop2" @dragover.prevent @drop="handleDrop(2)">
+                                <img src="../../../../resources/img/img66_38s_2.png" alt="" />
+                                <button v-if="showButton2">
+                                    <img src="../../../../resources/img/img66_38s_2_color.png" alt="" />
+                                    <p>{{ answerArr[1] }}</p>
+                                </button>
+                            </div>
+                            <div class="popTxt" id="drop3" @dragover.prevent @drop="handleDrop(3)">
+                                <img src="../../../../resources/img/img66_38s_3.png" alt="" />
+                                <button v-if="showButton3">
+                                    <img src="../../../../resources/img/img66_38s_3_color.png" alt="" />
+                                    <p>{{ answerArr[2] }}</p>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="dragGroup">
+                        <article style="right: 0; top: 36%" @dragstart="handleDragStart(1)" v-show="!dragHidden1">
+                            <button id="drag1" draggable="true">
+                                <img src="../../../../resources/img/img67_38s.png" alt="" />
+                                <p>{{ answerArr[0] }}</p>
+                            </button>
+                        </article>
+                        <article style="left: 0; top: 36%" @dragstart="handleDragStart(2)" v-show="!dragHidden2">
+                            <button id="drag2" draggable="true">
+                                <img src="../../../../resources/img/img68_38s.png" alt="" />
+                                <p>{{ answerArr[1] }}</p>
+                            </button>
+                        </article>
+                        <article style="left: 50%; top: 10%" @dragstart="handleDragStart(3)" v-show="!dragHidden3">
+                            <button id="drag3" draggable="true">
+                                <img src="../../../../resources/img/img69_38s.png" alt="" />
+                                <p>{{ answerArr[2] }}</p>
+                            </button>
+                        </article>
+                    </div>
+                </div>
+            </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
         </div>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
-
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      showButton1: false,
-      showButton2: false,
-      showButton3: false,
-      dragHidden1: false,
-      dragHidden2: false,
-      dragHidden3: false,
-      currentDrag: null, // 드래그 중인 퍼즐의 번호를 저장합니다.
-      prblm_id: [],
-      problemData: [],
-      answerArr: [],
-      correctNum: 0,
+    data() {
+        return {
+            showButton1: false,
+            showButton2: false,
+            showButton3: false,
+            dragHidden1: false,
+            dragHidden2: false,
+            dragHidden3: false,
+            currentDrag: null, // 드래그 중인 퍼즐의 번호를 저장합니다.
+            prblm_id: [],
+            problemData: [],
+            answerArr: [],
+            correctNum: 0,
 
-      seq: this.$store.getters.seqNum,
-      hiddenState: false,
-    };
-  },
-  methods: {
-    complete() {
-      // 로컬 스토리지에서 currentDashboard 값을 가져옴
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
+            seq: this.$store.getters.seqNum,
+            hiddenState: false,
+        };
+    },
+    methods: {
+        complete() {
+            // 로컬 스토리지에서 currentDashboard 값을 가져옴
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
 
-        const { unit_id, book_id } = this.$route.query;
-        if (currentDashboard === "Learning") {
-          // Learning 모드일 때 Dashboard로 이동
-          this.$router.push({
-            name: "Dashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
-        } else if (currentDashboard === "AI") {
-          // AI 모드일 때 AIDashboard로 이동
-          this.$router.push({
-            name: "AIDashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
+                const { unit_id, book_id } = this.$route.query;
+                if (currentDashboard === 'Learning') {
+                    // Learning 모드일 때 Dashboard로 이동
+                    this.$router.push({
+                        name: 'Dashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                } else if (currentDashboard === 'AI') {
+                    // AI 모드일 때 AIDashboard로 이동
+                    this.$router.push({
+                        name: 'AIDashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                }
+            } else {
+                console.error('currentDashboard 값이 없습니다.');
+            }
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        returnPage() {
+            // 페이지 새로 고침
+            window.location.reload();
+        },
+        handleDragStart(dragNumber) {
+            // 현재 드래그 중인 퍼즐의 번호를 저장
+            this.currentDrag = dragNumber;
+        },
+        handleDrop(dropNumber) {
+            // 드래그한 퍼즐의 번호와 드롭할 영역의 번호가 일치하는지 확인
+            if (this.currentDrag === dropNumber) {
+                this.showButton(dropNumber); // 버튼을 보여주고
+                this.hideDragButton(dropNumber); // 드래그한 퍼즐은 숨김
+                this.correctNum++;
+            } else {
+                // 오답일 경우 알림 표시
+                alert('오답입니다! 다시 시도해보세요.');
+            }
+
+            if (this.correctNum === 3) {
+                setTimeout(() => {
+                    alert('정답입니다!');
+                    this.nextProblem();
+                }, 100);
+            }
+
+            // 드래그 후 상태 초기화
+            this.currentDrag = null;
+        },
+        hideDragButton(dragNumber) {
+            if (dragNumber === 1) {
+                this.dragHidden1 = true;
+            } else if (dragNumber === 2) {
+                this.dragHidden2 = true;
+            } else if (dragNumber === 3) {
+                this.dragHidden3 = true;
+            }
+        },
+        showButton(dropNumber) {
+            if (dropNumber === 1) {
+                this.showButton1 = true;
+            } else if (dropNumber === 2) {
+                this.showButton2 = true;
+            } else if (dropNumber === 3) {
+                this.showButton3 = true;
+            }
+        },
+        fetchProblemData() {
+            axios({
+                url: '/problem/problemInfo.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    prblmId: this.prblm_id.prblm_id,
+                },
+            })
+                .then((response) => {
+                    this.problemData = response.data;
+                    console.log('problemData', this.problemData);
+                    this.sortingProblem();
+                })
+                .catch((error) => {
+                    this.state = 'noProblem';
+                    console.error('Error fetching problemData:', error);
+                });
+        },
+        sortingProblem() {
+            let prblmExpln = this.problemData.problem.prblmExpln;
+            let prblmArr = prblmExpln.split('/');
+            this.answerArr = prblmArr;
+
+            // for (let i = prblmArr.length - 1; i > 0; i--) {
+            //   const j = Math.floor(Math.random() * (i + 1));
+            //   [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
+            // }
+
+            // this.prblmArr = prblmArr;
+            // console.log(prblmArr);
+        },
+        nextProblem() {
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            } else {
+                // 마지막 문제면 이동
+                // this.goToPage("Chapter4");
+                alert('문제 학습 완료');
+                this.complete();
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        this.prblm_id = this.currentLearningId;
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    mounted() {
+        this.fetchProblemData();
+        if (this.currentProblemIndex == 0) {
+            this.hiddenState = true;
         }
-      } else {
-        console.error("currentDashboard 값이 없습니다.");
-      }
     },
-    goToPage(page) {
-      this.$router.push({ name: page });
+    components: {
+        BookInfo: BookInfo,
     },
-    returnPage() {
-      // 페이지 새로 고침
-      window.location.reload();
-    },
-    handleDragStart(dragNumber) {
-      // 현재 드래그 중인 퍼즐의 번호를 저장
-      this.currentDrag = dragNumber;
-    },
-    handleDrop(dropNumber) {
-      // 드래그한 퍼즐의 번호와 드롭할 영역의 번호가 일치하는지 확인
-      if (this.currentDrag === dropNumber) {
-        this.showButton(dropNumber); // 버튼을 보여주고
-        this.hideDragButton(dropNumber); // 드래그한 퍼즐은 숨김
-        this.correctNum++;
-      } else {
-        // 오답일 경우 알림 표시
-        alert("오답입니다! 다시 시도해보세요.");
-      }
-
-      if (this.correctNum === 3) {
-        setTimeout(() => {
-          alert("정답입니다!");
-          this.nextProblem();
-        }, 100);
-      }
-
-      // 드래그 후 상태 초기화
-      this.currentDrag = null;
-    },
-    hideDragButton(dragNumber) {
-      if (dragNumber === 1) {
-        this.dragHidden1 = true;
-      } else if (dragNumber === 2) {
-        this.dragHidden2 = true;
-      } else if (dragNumber === 3) {
-        this.dragHidden3 = true;
-      }
-    },
-    showButton(dropNumber) {
-      if (dropNumber === 1) {
-        this.showButton1 = true;
-      } else if (dropNumber === 2) {
-        this.showButton2 = true;
-      } else if (dropNumber === 3) {
-        this.showButton3 = true;
-      }
-    },
-    fetchProblemData() {
-      axios({
-        url: "/problem/problemInfo.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
-        },
-        data: {
-          prblmId: this.prblm_id.prblm_id,
-        },
-      })
-        .then((response) => {
-          this.problemData = response.data;
-          console.log("problemData", this.problemData);
-          this.sortingProblem();
-        })
-        .catch((error) => {
-          this.state = "noProblem";
-          console.error("Error fetching problemData:", error);
-        });
-    },
-    sortingProblem() {
-      let prblmExpln = this.problemData.problem.prblmExpln;
-      let prblmArr = prblmExpln.split("/");
-      this.answerArr = prblmArr;
-
-      // for (let i = prblmArr.length - 1; i > 0; i--) {
-      //   const j = Math.floor(Math.random() * (i + 1));
-      //   [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
-      // }
-
-      // this.prblmArr = prblmArr;
-      // console.log(prblmArr);
-    },
-    nextProblem() {
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        // this.goToPage("Chapter4");
-        alert("문제 학습 완료");
-        this.complete();
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-  },
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    this.prblm_id = this.currentLearningId;
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  mounted() {
-    this.fetchProblemData();
-    if (this.currentProblemIndex == 0) {
-      this.hiddenState = true;
-    }
-  },
 };
 </script>
 
 <style scoped>
 .dropGroup button {
-  left: 0;
+    left: 0;
 }
 
 .dragGroup button p {
-  color: #fff;
-  font-size: 35px;
+    color: #fff;
+    font-size: 35px;
 }
 
 .dropGroup button p {
-  font-size: 48px;
-  color: #fff;
+    font-size: 48px;
+    color: #fff;
 }
 
 .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>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter2_7.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/new_img/logo_v2.png" alt="" />
+    <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/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </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"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="previousProblem()"
-      >
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <div class="content title-box">
-        <div style="display: flex; justify-content: space-between">
-          <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
-          <button id="returnButton" @click="returnPage" style="margin: 4rem">
-            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
-            <p>되돌리기</p>
-          </button>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
         </div>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">
-            앗! 다리가 무너져서 건널 수가 없어! 다리 조각을 옮겨줘!
-          </p>
-        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <div class="content title-box">
+                <div style="display: flex; justify-content: space-between">
+                    <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
+                    <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>
+                </div>
 
-        <div class="text-ct flex justify-center" style="gap: 80px">
-          <div class="dropGroup flex align-center justify-center">
-            <div class="flex" style="gap: 20px; position: relative">
-              <img src="../../../../resources/img/img70_39s.png" alt="" />
-              <div class="textbox">
-                <p
-                  v-if="problemArr.length > 0"
-                  style="left: -180px; bottom: -200px"
-                >
-                  {{ problemArr[0] }}
-                </p>
-                <p
-                  v-if="problemArr.length > 1"
-                  id="bridgeTarget"
-                  style="left: -105px; bottom: -150px"
-                  @dragover.prevent
-                  @drop="handleDrop"
-                >
-                  {{ problemArr[1] }}
-                </p>
-                <p
-                  v-if="problemArr.length > 2"
-                  style="left: -30px; bottom: -65px"
-                >
-                  {{ problemArr[2] }}
-                </p>
-              </div>
+                <div class="text-ct flex justify-center" style="gap: 80px">
+                    <div class="dropGroup flex align-center justify-center">
+                        <div class="flex" style="gap: 20px; position: relative">
+                            <img src="../../../../resources/img/img70_39s.png" alt="" />
+                            <div class="textbox">
+                                <p v-if="problemArr.length > 0" style="left: -180px; bottom: -200px">
+                                    {{ problemArr[0] }}
+                                </p>
+                                <p
+                                    v-if="problemArr.length > 1"
+                                    id="bridgeTarget"
+                                    style="left: -105px; bottom: -150px"
+                                    @dragover.prevent
+                                    @drop="handleDrop"
+                                >
+                                    {{ problemArr[1] }}
+                                </p>
+                                <p v-if="problemArr.length > 2" style="left: -30px; bottom: -65px">
+                                    {{ problemArr[2] }}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="dragGroup mt40">
+                        <div>
+                            <button
+                                v-if="answerArr.length > 0 && answerArr[0].prblmDtlExpln"
+                                :id="answerArr[0].prblmDtlExpln"
+                                draggable="true"
+                                @dragstart="handleDragStart"
+                            >
+                                <img src="../../../../resources/img/img71_39s.png" alt="" />
+                                <p>{{ answerArr[0].prblmDtlExpln }}</p>
+                            </button>
+                            <button
+                                v-if="answerArr.length > 1 && answerArr[1].prblmDtlExpln"
+                                :id="answerArr[1].prblmDtlExpln"
+                                draggable="true"
+                                @dragstart="handleDragStart"
+                            >
+                                <img src="../../../../resources/img/img71_39s.png" alt="" />
+                                <p>{{ answerArr[1].prblmDtlExpln }}</p>
+                            </button>
+                            <button
+                                v-if="answerArr.length > 2 && answerArr[2].prblmDtlExpln"
+                                :id="answerArr[2].prblmDtlExpln"
+                                draggable="true"
+                                @dragstart="handleDragStart"
+                            >
+                                <img src="../../../../resources/img/img71_39s.png" alt="" />
+                                <p>{{ answerArr[2].prblmDtlExpln }}</p>
+                            </button>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-          <div class="dragGroup mt40">
-            <div>
-              <button
-                v-if="answerArr.length > 0 && answerArr[0].prblmDtlExpln"
-                :id="answerArr[0].prblmDtlExpln"
-                draggable="true"
-                @dragstart="handleDragStart"
-              >
-                <img src="../../../../resources/img/img71_39s.png" alt="" />
-                <p>{{ answerArr[0].prblmDtlExpln }}</p>
-              </button>
-              <button
-                v-if="answerArr.length > 1 && answerArr[1].prblmDtlExpln"
-                :id="answerArr[1].prblmDtlExpln"
-                draggable="true"
-                @dragstart="handleDragStart"
-              >
-                <img src="../../../../resources/img/img71_39s.png" alt="" />
-                <p>{{ answerArr[1].prblmDtlExpln }}</p>
-              </button>
-              <button
-                v-if="answerArr.length > 2 && answerArr[2].prblmDtlExpln"
-                :id="answerArr[2].prblmDtlExpln"
-                draggable="true"
-                @dragstart="handleDragStart"
-              >
-                <img src="../../../../resources/img/img71_39s.png" alt="" />
-                <p>{{ answerArr[2].prblmDtlExpln }}</p>
-              </button>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
             </div>
-          </div>
         </div>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
-
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      draggedElementId: null, // 드래그한 요소의 ID를 저장
-      correctAnswer: "", // 정답 설정
-      prblm_id: [],
-      problemData: [],
-      problemArr: [],
-      answerArr: [],
-      seq: this.$store.getters.seqNum,
-      hiddenState: false,
-      isAIMode: false, // AI 모드 여부를 확인할 변수
-    };
-  },
-  methods: {
-    complete() {
-      // 로컬 스토리지에서 currentDashboard 값을 가져옴
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
+    data() {
+        return {
+            draggedElementId: null, // 드래그한 요소의 ID를 저장
+            correctAnswer: '', // 정답 설정
+            prblm_id: [],
+            problemData: [],
+            problemArr: [],
+            answerArr: [],
+            seq: this.$store.getters.seqNum,
+            hiddenState: false,
+            isAIMode: false, // AI 모드 여부를 확인할 변수
+        };
+    },
+    methods: {
+        complete() {
+            // 로컬 스토리지에서 currentDashboard 값을 가져옴
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
 
-        const { unit_id, book_id } = this.$route.query;
-        if (currentDashboard === "Learning") {
-          // Learning 모드일 때 Dashboard로 이동
-          this.$router.push({
-            name: "Dashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
-        } else if (currentDashboard === "AI") {
-          // AI 모드일 때 AIDashboard로 이동
-          this.$router.push({
-            name: "AIDashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
+                const { unit_id, book_id } = this.$route.query;
+                if (currentDashboard === 'Learning') {
+                    // Learning 모드일 때 Dashboard로 이동
+                    this.$router.push({
+                        name: 'Dashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                } else if (currentDashboard === 'AI') {
+                    // AI 모드일 때 AIDashboard로 이동
+                    this.$router.push({
+                        name: 'AIDashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                }
+            } else {
+                console.error('currentDashboard 값이 없습니다.');
+            }
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        returnPage() {
+            // 페이지 새로 고침
+            window.location.reload();
+        },
+        handleDragStart(event) {
+            // 드래그한 요소의 ID를 저장
+            this.draggedElementId = event.target.id;
+        },
+        handleDrop(event) {
+            const dropZone = event.target;
+            const draggedElement = document.getElementById(this.draggedElementId);
+
+            if (draggedElement) {
+                // 새로운 버튼을 드롭 영역에 추가
+                const cloneElement = draggedElement.cloneNode(true);
+                cloneElement.style.position = 'absolute';
+                cloneElement.style.top = '-70px';
+                cloneElement.style.left = '-50px';
+                dropZone.innerHTML = ''; // 기존 ? 텍스트 제거
+                dropZone.appendChild(cloneElement);
+
+                // DOM 업데이트 후 알림을 비동기적으로 처리
+                setTimeout(() => {
+                    if (this.draggedElementId === this.correctAnswer) {
+                        alert('정답입니다!');
+                        this.nextProblem();
+                    } else {
+                        alert('오답입니다!');
+                        draggedElement.style.visibility = 'visible'; // 다시 보이게 하기
+                        dropZone.innerHTML = '?'; // 드롭된 영역 초기화
+                    }
+
+                    // 드래그 상태 초기화
+                    this.draggedElementId = null;
+                }, 0);
+            }
+        },
+
+        // fetchProblemData() {
+        //   axios({
+        //     url: "/problem/problemInfo.json",
+        //     method: "post",
+        //     headers: {
+        //       "Content-Type": "application/json; charset=UTF-8",
+        //     },
+        //     data: {
+        //       prblmId: this.prblm_id.prblm_id,
+        //     },
+        //   })
+        //     .then((response) => {
+        //       this.problemData = response.data;
+        //       console.log("problemData", this.problemData);
+        //       this.sortingProblem();
+        //     })
+        //     .catch((error) => {
+        //       this.state = "noProblem";
+        //       console.error("Error fetching problemData:", error);
+        //     });
+        // },
+
+        fetchProblemData() {
+            // 로컬 스토리지에서 currentDashboard를 확인
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
+
+                if (currentDashboard === 'AI') {
+                    // AI 모드일 경우 로컬 스토리지에서 currentLearningId를 가져와 사용
+                    const currentLearningId = parsedState.currentLearningIds;
+                    console.log('AI 모드에서 currentLearningId 사용:', currentLearningId);
+
+                    // currentLearningId로 문제 데이터 가져오기
+                    axios({
+                        url: '/problem/problemInfo.json',
+                        method: 'post',
+                        headers: {
+                            'Content-Type': 'application/json; charset=UTF-8',
+                        },
+                        data: {
+                            prblmId: currentLearningId, // 로컬스토리지에서 가져온 currentLearningId 사용
+                        },
+                    })
+                        .then((response) => {
+                            this.problemData = response.data;
+                            console.log('AI 모드 problemData', this.problemData);
+                            this.sortingProblem();
+                        })
+                        .catch((error) => {
+                            this.state = 'noProblem';
+                            console.error('Error fetching AI problemData:', error);
+                        });
+                } else {
+                    // Learning 모드일 경우 기존 로직 사용
+                    console.log('Learning 모드에서 prblm_id 사용:', this.prblm_id);
+
+                    axios({
+                        url: '/problem/problemInfo.json',
+                        method: 'post',
+                        headers: {
+                            'Content-Type': 'application/json; charset=UTF-8',
+                        },
+                        data: {
+                            prblmId: this.prblm_id.prblm_id, // 기존 방식 사용
+                        },
+                    })
+                        .then((response) => {
+                            this.problemData = response.data;
+                            console.log('Learning 모드 problemData', this.problemData);
+                            this.sortingProblem();
+                        })
+                        .catch((error) => {
+                            this.state = 'noProblem';
+                            console.error('Error fetching problemData:', error);
+                        });
+                }
+            } else {
+                console.error('vuexState가 로컬스토리지에 없습니다.');
+            }
+        },
+
+        sortingProblem() {
+            let prblmExpln = this.problemData.problem.prblmExpln;
+            let prblmArr = prblmExpln.split('/');
+            this.problemArr = prblmArr;
+
+            for (let i = 0; i < this.problemData.problemDetail.length; i++) {
+                // this.answerArr[i].prblmDtlExpln =
+                //   this.problemData.problemDetail[i].prblmDtlExpln;
+                // this.answerArr[i].prblmYn = this.problemData.problemDetail[i].prblmYn;
+                this.answerArr[i] = this.problemData.problemDetail[i];
+            }
+            console.log('answerArr', this.answerArr);
+
+            for (let i = 0; i < this.answerArr.length; i++) {
+                if (this.answerArr[i].prblmYn == 'Y') {
+                    this.correctAnswer = this.answerArr[i].prblmDtlExpln;
+                    break;
+                }
+            }
+
+            // for (let i = prblmArr.length - 1; i > 0; i--) {
+            //   const j = Math.floor(Math.random() * (i + 1));
+            //   [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
+            // }
+
+            // this.prblmArr = prblmArr;
+            // console.log(prblmArr);
+        },
+
+        nextProblem() {
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            } else {
+                // 마지막 문제면 이동
+                // this.goToPage("Chapter4");
+                alert('문제 학습 완료');
+                this.complete();
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        hideNavigationButtons() {
+            // pre-btn과 next-btn을 숨김
+            const preBtn = document.querySelector('.pre-btn');
+            const nextBtn = document.querySelector('.next-btn');
+            if (preBtn) preBtn.style.display = 'none';
+            if (nextBtn) nextBtn.style.display = 'none';
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        this.prblm_id = this.currentLearningId;
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    mounted() {
+        this.fetchProblemData();
+
+        // 로컬 스토리지에서 currentDashboard 값을 확인
+        const savedState = localStorage.getItem('vuexState');
+        if (savedState) {
+            const parsedState = JSON.parse(savedState);
+            const currentDashboard = parsedState.currentDashboard;
+
+            // AI 모드일 경우 pre-btn과 next-btn 숨기기
+            if (currentDashboard === 'AI') {
+                this.isAIMode = true;
+                this.hideNavigationButtons();
+            }
         }
-      } else {
-        console.error("currentDashboard 값이 없습니다.");
-      }
-    },
-    goToPage(page) {
-      this.$router.push({ name: page });
-    },
-    returnPage() {
-      // 페이지 새로 고침
-      window.location.reload();
-    },
-    handleDragStart(event) {
-      // 드래그한 요소의 ID를 저장
-      this.draggedElementId = event.target.id;
-    },
-    handleDrop(event) {
-      const dropZone = event.target;
-      const draggedElement = document.getElementById(this.draggedElementId);
 
-      if (draggedElement) {
-        // 새로운 버튼을 드롭 영역에 추가
-        const cloneElement = draggedElement.cloneNode(true);
-        cloneElement.style.position = "absolute";
-        cloneElement.style.top = "-70px";
-        cloneElement.style.left = "-50px";
-        dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
-        dropZone.appendChild(cloneElement);
-
-        // DOM 업데이트 후 알림을 비동기적으로 처리
-        setTimeout(() => {
-          if (this.draggedElementId === this.correctAnswer) {
-            alert("정답입니다!");
-            this.nextProblem();
-          } else {
-            alert("오답입니다!");
-            draggedElement.style.visibility = "visible"; // 다시 보이게 하기
-            dropZone.innerHTML = "?"; // 드롭된 영역 초기화
-          }
-
-          // 드래그 상태 초기화
-          this.draggedElementId = null;
-        }, 0);
-      }
-    },
-
-    // fetchProblemData() {
-    //   axios({
-    //     url: "/problem/problemInfo.json",
-    //     method: "post",
-    //     headers: {
-    //       "Content-Type": "application/json; charset=UTF-8",
-    //     },
-    //     data: {
-    //       prblmId: this.prblm_id.prblm_id,
-    //     },
-    //   })
-    //     .then((response) => {
-    //       this.problemData = response.data;
-    //       console.log("problemData", this.problemData);
-    //       this.sortingProblem();
-    //     })
-    //     .catch((error) => {
-    //       this.state = "noProblem";
-    //       console.error("Error fetching problemData:", error);
-    //     });
-    // },
-
-    fetchProblemData() {
-      // 로컬 스토리지에서 currentDashboard를 확인
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
-
-        if (currentDashboard === "AI") {
-          // AI 모드일 경우 로컬 스토리지에서 currentLearningId를 가져와 사용
-          const currentLearningId = parsedState.currentLearningIds;
-          console.log("AI 모드에서 currentLearningId 사용:", currentLearningId);
-
-          // currentLearningId로 문제 데이터 가져오기
-          axios({
-            url: "/problem/problemInfo.json",
-            method: "post",
-            headers: {
-              "Content-Type": "application/json; charset=UTF-8",
-            },
-            data: {
-              prblmId: currentLearningId, // 로컬스토리지에서 가져온 currentLearningId 사용
-            },
-          })
-            .then((response) => {
-              this.problemData = response.data;
-              console.log("AI 모드 problemData", this.problemData);
-              this.sortingProblem();
-            })
-            .catch((error) => {
-              this.state = "noProblem";
-              console.error("Error fetching AI problemData:", error);
-            });
-
-        } else {
-          // Learning 모드일 경우 기존 로직 사용
-          console.log("Learning 모드에서 prblm_id 사용:", this.prblm_id);
-
-          axios({
-            url: "/problem/problemInfo.json",
-            method: "post",
-            headers: {
-              "Content-Type": "application/json; charset=UTF-8",
-            },
-            data: {
-              prblmId: this.prblm_id.prblm_id, // 기존 방식 사용
-            },
-          })
-            .then((response) => {
-              this.problemData = response.data;
-              console.log("Learning 모드 problemData", this.problemData);
-              this.sortingProblem();
-            })
-            .catch((error) => {
-              this.state = "noProblem";
-              console.error("Error fetching problemData:", error);
-            });
+        if (this.currentProblemIndex == 0) {
+            this.hiddenState = true;
         }
-      } else {
-        console.error("vuexState가 로컬스토리지에 없습니다.");
-      }
     },
-
-    sortingProblem() {
-      let prblmExpln = this.problemData.problem.prblmExpln;
-      let prblmArr = prblmExpln.split("/");
-      this.problemArr = prblmArr;
-
-      for (let i = 0; i < this.problemData.problemDetail.length; i++) {
-        // this.answerArr[i].prblmDtlExpln =
-        //   this.problemData.problemDetail[i].prblmDtlExpln;
-        // this.answerArr[i].prblmYn = this.problemData.problemDetail[i].prblmYn;
-        this.answerArr[i] = this.problemData.problemDetail[i];
-      }
-      console.log("answerArr", this.answerArr);
-
-      for (let i = 0; i < this.answerArr.length; i++) {
-        if (this.answerArr[i].prblmYn == "Y") {
-          this.correctAnswer = this.answerArr[i].prblmDtlExpln;
-          break;
-        }
-      }
-
-      // for (let i = prblmArr.length - 1; i > 0; i--) {
-      //   const j = Math.floor(Math.random() * (i + 1));
-      //   [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
-      // }
-
-      // this.prblmArr = prblmArr;
-      // console.log(prblmArr);
+    components: {
+        BookInfo: BookInfo,
     },
-
-    nextProblem() {
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        // this.goToPage("Chapter4");
-        alert("문제 학습 완료");
-        this.complete();
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-
-    hideNavigationButtons() {
-      // pre-btn과 next-btn을 숨김
-      const preBtn = document.querySelector('.pre-btn');
-      const nextBtn = document.querySelector('.next-btn');
-      if (preBtn) preBtn.style.display = 'none';
-      if (nextBtn) nextBtn.style.display = 'none';
-    },
-
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-    
-  },
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    this.prblm_id = this.currentLearningId;
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  mounted() {
-    this.fetchProblemData();
-    
-    // 로컬 스토리지에서 currentDashboard 값을 확인
-    const savedState = localStorage.getItem("vuexState");
-    if (savedState) {
-      const parsedState = JSON.parse(savedState);
-      const currentDashboard = parsedState.currentDashboard;
-
-      // AI 모드일 경우 pre-btn과 next-btn 숨기기
-      if (currentDashboard === "AI") {
-        this.isAIMode = true;
-        this.hideNavigationButtons();
-      }
-    }
-
-    if (this.currentProblemIndex == 0) {
-      this.hiddenState = true;
-    }
-  },
 };
 </script>
 
 <style scoped>
 .textbox p {
-  position: absolute;
+    position: absolute;
 }
 
 .dragGroup button {
-  display: block;
+    display: block;
 }
 
 .dragGroup button p,
 .textbox p {
-  width: fit-content;
-  height: fit-content;
-  background: #ffffffb8;
-  border-radius: 5px;
-  padding: 10px;
-  font-size: 30px;
-  font-family: "ONEMobilePOP";
+    width: fit-content;
+    height: fit-content;
+    background: #ffffffb8;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 30px;
+    font-family: 'ONEMobilePOP';
 }
 
 .dragGroup button {
-  cursor: grab;
+    cursor: grab;
 }
 
-.dragGroup button[draggable="true"]:active {
-  cursor: grabbing;
+.dragGroup button[draggable='true']:active {
+    cursor: grabbing;
 }
 
 .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>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter2_8.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/new_img/logo_v2.png" alt="" />
+    <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/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </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"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="previousProblem()"
-      >
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <div class="content title-box">
-        <div style="display: flex; justify-content: space-between">
-          <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
-          <button id="returnButton" @click="returnPage" style="margin: 4rem">
-            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
-            <p>되돌리기</p>
-          </button>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
         </div>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">
-            앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!
-          </p>
-        </div>
-
-        <div class="text-ct">
-          <div class="dropGroup flex align-center justify-center mt30">
-            <div style="position: relative">
-              <img src="../../../../resources/img/img28_s.png" alt="" />
-              <button
-                class="dropzone"
-                :data-answer="answerArr[0]"
-                style="left: 30px; top: 167px"
-              >
-                <img src="../../../../resources/img/img29_s_01.png" alt="" />
-                <p style="font-size: 35px">?</p>
-              </button>
-              <button
-                class="dropzone"
-                :data-answer="answerArr[1]"
-                style="right: 409px; top: 133px"
-              >
-                <img src="../../../../resources/img/img30_s_01.png" alt="" />
-                <p style="font-size: 35px">?</p>
-              </button>
-              <button
-                class="dropzone"
-                :data-answer="answerArr[2]"
-                style="right: 46px; top: 128px"
-              >
-                <img src="../../../../resources/img/img31_s_01.png" alt="" />
-                <p style="font-size: 35px">?</p>
-              </button>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" />
             </div>
-          </div>
-          <div class="dragGroup flex justify-center" style="gap: 20px">
-            <article style="right: 0; top: 36%">
-              <button
-                class="draggable"
-                :data-text="answerArr[0]"
-                draggable="true"
-              >
-                <img src="../../../../resources/img/img29_s.png" alt="" />
-                <p style="font-size: 35px">{{ answerArr[0] }}</p>
-              </button>
-            </article>
-            <article style="left: 0; top: 36%">
-              <button
-                class="draggable"
-                :data-text="answerArr[1]"
-                draggable="true"
-              >
-                <img src="../../../../resources/img/img30_s.png" alt="" />
-                <p style="font-size: 35px">{{ answerArr[1] }}</p>
-              </button>
-            </article>
-            <article style="left: 50%; top: 10%">
-              <button
-                class="draggable"
-                :data-text="answerArr[2]"
-                draggable="true"
-              >
-                <img src="../../../../resources/img/img31_s.png" alt="" />
-                <p style="font-size: 35px">{{ answerArr[2] }}</p>
-              </button>
-            </article>
-          </div>
+            <div class="content title-box">
+                <div style="display: flex; justify-content: space-between">
+                    <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
+                    <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>
+                </div>
+
+                <div class="text-ct">
+                    <div class="dropGroup flex align-center justify-center mt30">
+                        <div style="position: relative">
+                            <img src="../../../../resources/img/img28_s.png" alt="" />
+                            <button class="dropzone" :data-answer="answerArr[0]" style="left: 30px; top: 167px">
+                                <img src="../../../../resources/img/img29_s_01.png" alt="" />
+                                <p style="font-size: 35px">?</p>
+                            </button>
+                            <button class="dropzone" :data-answer="answerArr[1]" style="right: 409px; top: 133px">
+                                <img src="../../../../resources/img/img30_s_01.png" alt="" />
+                                <p style="font-size: 35px">?</p>
+                            </button>
+                            <button class="dropzone" :data-answer="answerArr[2]" style="right: 46px; top: 128px">
+                                <img src="../../../../resources/img/img31_s_01.png" alt="" />
+                                <p style="font-size: 35px">?</p>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="dragGroup flex justify-center" style="gap: 20px">
+                        <article style="right: 0; top: 36%">
+                            <button class="draggable" :data-text="answerArr[0]" draggable="true">
+                                <img src="../../../../resources/img/img29_s.png" alt="" />
+                                <p style="font-size: 35px">{{ answerArr[0] }}</p>
+                            </button>
+                        </article>
+                        <article style="left: 0; top: 36%">
+                            <button class="draggable" :data-text="answerArr[1]" draggable="true">
+                                <img src="../../../../resources/img/img30_s.png" alt="" />
+                                <p style="font-size: 35px">{{ answerArr[1] }}</p>
+                            </button>
+                        </article>
+                        <article style="left: 50%; top: 10%">
+                            <button class="draggable" :data-text="answerArr[2]" draggable="true">
+                                <img src="../../../../resources/img/img31_s.png" alt="" />
+                                <p style="font-size: 35px">{{ answerArr[2] }}</p>
+                            </button>
+                        </article>
+                    </div>
+                </div>
+            </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
         </div>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
-
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      draggedElement: null, // 현재 드래그 중인 요소
-      prblm_id: [],
-      problemData: [],
-      answerArr: [],
+    data() {
+        return {
+            draggedElement: null, // 현재 드래그 중인 요소
+            prblm_id: [],
+            problemData: [],
+            answerArr: [],
 
-      // prblmArr: [],
-      seq: this.$store.getters.seqNum,
-      hiddenState: false,
-      correctNum: 0,
-    };
-  },
-  methods: {
-    complete() {
-      // 로컬 스토리지에서 currentDashboard 값을 가져옴
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
+            // prblmArr: [],
+            seq: this.$store.getters.seqNum,
+            hiddenState: false,
+            correctNum: 0,
+        };
+    },
+    methods: {
+        complete() {
+            // 로컬 스토리지에서 currentDashboard 값을 가져옴
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
 
-        const { unit_id, book_id } = this.$route.query;
-        if (currentDashboard === "Learning") {
-          // Learning 모드일 때 Dashboard로 이동
-          this.$router.push({
-            name: "Dashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
-        } else if (currentDashboard === "AI") {
-          // AI 모드일 때 AIDashboard로 이동
-          this.$router.push({
-            name: "AIDashboard",
-            query: { value: this.seq, unit_id, book_id },
-          });
+                const { unit_id, book_id } = this.$route.query;
+                if (currentDashboard === 'Learning') {
+                    // Learning 모드일 때 Dashboard로 이동
+                    this.$router.push({
+                        name: 'Dashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                } else if (currentDashboard === 'AI') {
+                    // AI 모드일 때 AIDashboard로 이동
+                    this.$router.push({
+                        name: 'AIDashboard',
+                        query: { value: this.seq, unit_id, book_id },
+                    });
+                }
+            } else {
+                console.error('currentDashboard 값이 없습니다.');
+            }
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        returnPage() {
+            window.location.reload();
+        },
+        handleDragStart(event) {
+            this.draggedElement = event.target.closest('.draggable'); // 드래그한 요소 저장
+            event.dataTransfer.setData('text/plain', event.target.dataset.text);
+            event.target.style.cursor = 'grabbing'; // 드래그 중 커서 변경
+        },
+        handleDragEnd(event) {
+            event.target.style.cursor = 'grab'; // 드래그 종료 후 커서 변경
+        },
+        handleDragOver(event) {
+            event.preventDefault(); // 드롭 허용
+        },
+        handleDrop(event) {
+            event.preventDefault();
+            const dropZone = event.target.closest('button.dropzone');
+            const draggedText = this.draggedElement ? this.draggedElement.dataset.text : '';
+
+            if (dropZone) {
+                const expectedText = dropZone.dataset.answer;
+                if (draggedText === expectedText) {
+                    // 드래그된 텍스트가 정답인 경우
+                    const rect = dropZone.getBoundingClientRect();
+                    // 버튼의 이미지 및 텍스트를 드롭존에 맞게 설정
+                    dropZone.querySelector('p').textContent = draggedText;
+                    dropZone.querySelector('img').style.display = 'none'; // 기존 이미지 숨기기
+
+                    // 드래그된 버튼의 이미지와 텍스트를 드롭존에 복사
+                    const draggedImage = this.draggedElement.querySelector('img').cloneNode();
+                    const draggedTextElement = this.draggedElement.querySelector('p').cloneNode();
+
+                    // 드롭존에 이미지 및 텍스트를 추가
+                    dropZone.appendChild(draggedImage);
+                    dropZone.appendChild(draggedTextElement);
+
+                    // 드래그한 요소 숨기기
+                    this.draggedElement.style.display = 'none';
+                    this.correctNum++;
+                } else {
+                    // 정답이 아닌 경우
+                    alert('오답입니다! 다시 시도해보세요.'); // 오답 경고 메시지
+                }
+            }
+
+            if (this.correctNum === 3) {
+                setTimeout(() => {
+                    alert('정답입니다!');
+                    this.nextProblem();
+                }, 100);
+            }
+
+            this.draggedElement = null; // 드래그 상태 초기화
+        },
+        storeProblemId() {
+            this.prblm_id = this.$store.getters.currentLearningId;
+            console.log('prblm_id', this.prblm_id);
+            this.problemData = this.prblm_id;
+            // this.fetchProblemData();
+        },
+        nextProblem() {
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            } else {
+                // 마지막 문제면 이동
+                // this.goToPage("Chapter4");
+                alert('문제 학습 완료');
+                this.complete();
+                // this.goToPage("Dashboard");
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+
+        // fetchProblemData() {
+        //   axios({
+        //     url: "/problem/problemInfo.json",
+        //     method: "post",
+        //     headers: {
+        //       "Content-Type": "application/json; charset=UTF-8",
+        //     },
+        //     data: {
+        //       prblmId: this.prblm_id.prblm_id,
+        //     },
+        //   })
+        //     .then((response) => {
+        //       this.problemData = response.data;
+        //       console.log("problemData", this.problemData);
+        //       this.sortingProblem();
+        //     })
+        //     .catch((error) => {
+        //       this.state = "noProblem";
+        //       console.error("Error fetching problemData:", error);
+        //     });
+        // },
+
+        fetchProblemData() {
+            // 로컬 스토리지에서 currentDashboard를 확인
+            const savedState = localStorage.getItem('vuexState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                const currentDashboard = parsedState.currentDashboard;
+
+                if (currentDashboard === 'AI') {
+                    // AI 모드일 경우 로컬 스토리지에서 currentLearningId를 가져와 사용
+                    const currentLearningId = parsedState.currentLearningIds;
+                    console.log('AI 모드에서 currentLearningId 사용:', currentLearningId);
+
+                    // currentLearningId로 문제 데이터 가져오기
+                    axios({
+                        url: '/problem/problemInfo.json',
+                        method: 'post',
+                        headers: {
+                            'Content-Type': 'application/json; charset=UTF-8',
+                        },
+                        data: {
+                            prblmId: currentLearningId, // 로컬스토리지에서 가져온 currentLearningId 사용
+                        },
+                    })
+                        .then((response) => {
+                            this.problemData = response.data;
+                            console.log('AI 모드 problemData', this.problemData);
+                            this.sortingProblem();
+                        })
+                        .catch((error) => {
+                            this.state = 'noProblem';
+                            console.error('Error fetching AI problemData:', error);
+                        });
+                } else {
+                    // Learning 모드일 경우 기존 로직 사용
+                    console.log('Learning 모드에서 prblm_id 사용:', this.prblm_id);
+
+                    axios({
+                        url: '/problem/problemInfo.json',
+                        method: 'post',
+                        headers: {
+                            'Content-Type': 'application/json; charset=UTF-8',
+                        },
+                        data: {
+                            prblmId: this.prblm_id.prblm_id, // 기존 방식 사용
+                        },
+                    })
+                        .then((response) => {
+                            this.problemData = response.data;
+                            console.log('Learning 모드 problemData', this.problemData);
+                            this.sortingProblem();
+                        })
+                        .catch((error) => {
+                            this.state = 'noProblem';
+                            console.error('Error fetching problemData:', error);
+                        });
+                }
+            } else {
+                console.error('vuexState가 로컬스토리지에 없습니다.');
+            }
+        },
+
+        sortingProblem() {
+            let prblmExpln = this.problemData.problem.prblmExpln;
+            let prblmArr = prblmExpln.split('/');
+            this.answerArr = prblmArr;
+
+            // for (let i = prblmArr.length - 1; i > 0; i--) {
+            //   const j = Math.floor(Math.random() * (i + 1));
+            //   [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
+            // }
+
+            // this.prblmArr = prblmArr;
+            // console.log(prblmArr);
+        },
+    },
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        this.prblm_id = this.currentLearningId;
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    mounted() {
+        this.fetchProblemData();
+        // this.storeProblemId();
+        // this.storeLearningId();
+        if (this.currentProblemIndex == 0) {
+            this.hiddenState = true;
         }
-      } else {
-        console.error("currentDashboard 값이 없습니다.");
-      }
+
+        this.$route.query;
+        // 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가
+        document.querySelectorAll('.draggable').forEach((button) => {
+            button.addEventListener('dragstart', this.handleDragStart);
+            button.addEventListener('dragend', this.handleDragEnd);
+        });
+
+        // 드롭 가능한 영역에 드래그 오버 및 드롭 이벤트 추가
+        document.querySelectorAll('.dropzone').forEach((zone) => {
+            zone.addEventListener('dragover', this.handleDragOver);
+            zone.addEventListener('drop', this.handleDrop);
+        });
     },
-    goToPage(page) {
-      this.$router.push({ name: page });
+    components: {
+        BookInfo: BookInfo,
     },
-    returnPage() {
-      window.location.reload();
-    },
-    handleDragStart(event) {
-      this.draggedElement = event.target.closest(".draggable"); // 드래그한 요소 저장
-      event.dataTransfer.setData("text/plain", event.target.dataset.text);
-      event.target.style.cursor = "grabbing"; // 드래그 중 커서 변경
-    },
-    handleDragEnd(event) {
-      event.target.style.cursor = "grab"; // 드래그 종료 후 커서 변경
-    },
-    handleDragOver(event) {
-      event.preventDefault(); // 드롭 허용
-    },
-    handleDrop(event) {
-      event.preventDefault();
-      const dropZone = event.target.closest("button.dropzone");
-      const draggedText = this.draggedElement
-        ? this.draggedElement.dataset.text
-        : "";
-
-      if (dropZone) {
-        const expectedText = dropZone.dataset.answer;
-        if (draggedText === expectedText) {
-          // 드래그된 텍스트가 정답인 경우
-          const rect = dropZone.getBoundingClientRect();
-          // 버튼의 이미지 및 텍스트를 드롭존에 맞게 설정
-          dropZone.querySelector("p").textContent = draggedText;
-          dropZone.querySelector("img").style.display = "none"; // 기존 이미지 숨기기
-
-          // 드래그된 버튼의 이미지와 텍스트를 드롭존에 복사
-          const draggedImage = this.draggedElement
-            .querySelector("img")
-            .cloneNode();
-          const draggedTextElement = this.draggedElement
-            .querySelector("p")
-            .cloneNode();
-
-          // 드롭존에 이미지 및 텍스트를 추가
-          dropZone.appendChild(draggedImage);
-          dropZone.appendChild(draggedTextElement);
-
-          // 드래그한 요소 숨기기
-          this.draggedElement.style.display = "none";
-          this.correctNum++;
-        } else {
-          // 정답이 아닌 경우
-          alert("오답입니다! 다시 시도해보세요."); // 오답 경고 메시지
-        }
-      }
-
-      if (this.correctNum === 3) {
-        setTimeout(() => {
-          alert("정답입니다!");
-          this.nextProblem();
-        }, 100);
-      }
-
-      this.draggedElement = null; // 드래그 상태 초기화
-    },
-    storeProblemId() {
-      this.prblm_id = this.$store.getters.currentLearningId;
-      console.log("prblm_id", this.prblm_id);
-      this.problemData = this.prblm_id;
-      // this.fetchProblemData();
-    },
-    nextProblem() {
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        // this.goToPage("Chapter4");
-        alert("문제 학습 완료");
-        this.complete();
-        // this.goToPage("Dashboard");
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-
-    // fetchProblemData() {
-    //   axios({
-    //     url: "/problem/problemInfo.json",
-    //     method: "post",
-    //     headers: {
-    //       "Content-Type": "application/json; charset=UTF-8",
-    //     },
-    //     data: {
-    //       prblmId: this.prblm_id.prblm_id,
-    //     },
-    //   })
-    //     .then((response) => {
-    //       this.problemData = response.data;
-    //       console.log("problemData", this.problemData);
-    //       this.sortingProblem();
-    //     })
-    //     .catch((error) => {
-    //       this.state = "noProblem";
-    //       console.error("Error fetching problemData:", error);
-    //     });
-    // },
-
-    fetchProblemData() {
-      // 로컬 스토리지에서 currentDashboard를 확인
-      const savedState = localStorage.getItem("vuexState");
-      if (savedState) {
-        const parsedState = JSON.parse(savedState);
-        const currentDashboard = parsedState.currentDashboard;
-
-        if (currentDashboard === "AI") {
-          // AI 모드일 경우 로컬 스토리지에서 currentLearningId를 가져와 사용
-          const currentLearningId = parsedState.currentLearningIds;
-          console.log("AI 모드에서 currentLearningId 사용:", currentLearningId);
-
-          // currentLearningId로 문제 데이터 가져오기
-          axios({
-            url: "/problem/problemInfo.json",
-            method: "post",
-            headers: {
-              "Content-Type": "application/json; charset=UTF-8",
-            },
-            data: {
-              prblmId: currentLearningId, // 로컬스토리지에서 가져온 currentLearningId 사용
-            },
-          })
-            .then((response) => {
-              this.problemData = response.data;
-              console.log("AI 모드 problemData", this.problemData);
-              this.sortingProblem();
-            })
-            .catch((error) => {
-              this.state = "noProblem";
-              console.error("Error fetching AI problemData:", error);
-            });
-
-        } else {
-          // Learning 모드일 경우 기존 로직 사용
-          console.log("Learning 모드에서 prblm_id 사용:", this.prblm_id);
-
-          axios({
-            url: "/problem/problemInfo.json",
-            method: "post",
-            headers: {
-              "Content-Type": "application/json; charset=UTF-8",
-            },
-            data: {
-              prblmId: this.prblm_id.prblm_id, // 기존 방식 사용
-            },
-          })
-            .then((response) => {
-              this.problemData = response.data;
-              console.log("Learning 모드 problemData", this.problemData);
-              this.sortingProblem();
-            })
-            .catch((error) => {
-              this.state = "noProblem";
-              console.error("Error fetching problemData:", error);
-            });
-        }
-      } else {
-        console.error("vuexState가 로컬스토리지에 없습니다.");
-      }
-    },
-
-    sortingProblem() {
-      let prblmExpln = this.problemData.problem.prblmExpln;
-      let prblmArr = prblmExpln.split("/");
-      this.answerArr = prblmArr;
-
-      // for (let i = prblmArr.length - 1; i > 0; i--) {
-      //   const j = Math.floor(Math.random() * (i + 1));
-      //   [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
-      // }
-
-      // this.prblmArr = prblmArr;
-      // console.log(prblmArr);
-    },
-  },
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    this.prblm_id = this.currentLearningId;
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  mounted() {
-    this.fetchProblemData();
-    // this.storeProblemId();
-    // this.storeLearningId();
-    if (this.currentProblemIndex == 0) {
-      this.hiddenState = true;
-    }
-
-    this.$route.query;
-    // 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가
-    document.querySelectorAll(".draggable").forEach((button) => {
-      button.addEventListener("dragstart", this.handleDragStart);
-      button.addEventListener("dragend", this.handleDragEnd);
-    });
-
-    // 드롭 가능한 영역에 드래그 오버 및 드롭 이벤트 추가
-    document.querySelectorAll(".dropzone").forEach((zone) => {
-      zone.addEventListener("dragover", this.handleDragOver);
-      zone.addEventListener("drop", this.handleDrop);
-    });
-  },
 };
 </script>
 
 <style scoped>
 .draggable {
-  cursor: grab;
+    cursor: grab;
 }
 
 .draggable:active {
-  cursor: grabbing;
+    cursor: grabbing;
 }
 
 .dropzone img {
-  display: block;
-  /* 이미지가 항상 보이도록 설정 */
+    display: block;
+    /* 이미지가 항상 보이도록 설정 */
 }
 
 .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>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter2_9.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/new_img/logo_v2.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"
-        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
-        @click="goToPrevPage"
-      >
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <div class="content title-box">
-        <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 4rem 0 2rem"
-          >
-            <img
-              src="../../../../resources/img/new_img/content_ink/return_v2.png"
-              alt=""
-            />
-            <p>되돌리기</p>
-          </button>
-        </div>
-        <div class="flex align-center mb30">
-          <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/new_img/content_ink/background.png"
-                alt=""
-                style="width: 138rem; height: 49rem"
-              />
-              <div class="vocaGroup">
-                <div
-                  v-for="word in wordList"
-                  :key="word.wdId"
-                  class="flex justify-between mb80 word-item"
-                >
-                  <article class="flex align-center">
-                    <div class="imgGroup mr30">
-                      <img
-                        :src="word.fileRpath"
-                        data-num="1"
-                        class="ink"
-                        style="width: 150px"
-                      />
-                    </div>
-                    <div class="flex align-start">
-                      <div>
-                        <h3>{{ word.wdNm }}</h3>
-                        <div class="flex align-center mt10">
-                          <span class="title1">{{ word.wdMnng }}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </article>
+    <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/new_img/logo_v2.png" alt="" />
                 </div>
-              </div>
-              <div class="textbox">
-                <button
-                  id="eraser1"
-                  class="dropzone"
-                  style="left: 97px; top: 125px; position: fixed"
-                >
-                  <img
-                    src="../../../../resources/img/new_img/content_ink/ink_1.png"
-                    alt=""
-                    style="position: relative; z-index: 1"
-                  />
-                  <img
-                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
-                    alt=""
-                    style="
-                      position: absolute;
-                      z-index: 2;
-                      height: 56px;
-                      right: 69px;
-                    "
-                  />
-                </button>
-                <button
-                  id="eraser2"
-                  class="dropzone"
-                  style="left: 87px; bottom: 38px; position: fixed"
-                >
-                  <img
-                    src="../../../../resources/img/new_img/content_ink/ink_2.png"
-                    alt=""
-                    style="position: relative; z-index: 1"
-                  />
-                  <img
-                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
-                    alt=""
-                    style="
-                      position: absolute;
-                      z-index: 2;
-                      height: 56px;
-                      right: 139px;
-                    "
-                  />
-                </button>
-                <button
-                  id="eraser3"
-                  class="dropzone"
-                  style="right: 207px; top: 133px; position: fixed"
-                >
-                  <img
-                    src="../../../../resources/img/new_img/content_ink/ink_3.png"
-                    alt=""
-                    style="position: relative; z-index: 1"
-                  />
-                  <img
-                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
-                    alt=""
-                    style="
-                      position: absolute;
-                      z-index: 2;
-                      height: 56px;
-                      right: 109px;
-                    "
-                  />
-                </button>
-                <button
-                  id="eraser4"
-                  class="dropzone"
-                  style="right: 206px; bottom: 51px; position: fixed"
-                >
-                  <img
-                    src="../../../../resources/img/new_img/content_ink/ink_4.png"
-                    alt=""
-                    style="position: relative; z-index: 1"
-                  />
-                  <img
-                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
-                    alt=""
-                    style="
-                      position: absolute;
-                      z-index: 2;
-                      height: 56px;
-                      right: 115px;
-                    "
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-          <div class="dragGroup">
-            <div>
-              <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>
+            </router-link>
         </div>
-      </div>
-      <div class="next-btn" @click="goToNextPage">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="goToPrevPage">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <div class="content title-box">
+                <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 4rem 0 2rem">
+                        <img src="../../../../resources/img/new_img/content_ink/return_v2.png" alt="" />
+                        <p>되돌리기</p>
+                    </button>
+                </div>
+                <div class="flex align-center mb30">
+                    <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/new_img/content_ink/background.png"
+                                alt=""
+                                style="width: 138rem; height: 49rem"
+                            />
+                            <div class="vocaGroup">
+                                <div
+                                    v-for="word in wordList"
+                                    :key="word.wdId"
+                                    class="flex justify-between mb80 word-item"
+                                >
+                                    <article class="flex align-center">
+                                        <div class="imgGroup mr30">
+                                            <img :src="word.fileRpath" data-num="1" class="ink" style="width: 150px" />
+                                        </div>
+                                        <div class="flex align-start">
+                                            <div>
+                                                <h3>{{ word.wdNm }}</h3>
+                                                <div class="flex align-center mt10">
+                                                    <span class="title1">{{ word.wdMnng }}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </article>
+                                </div>
+                            </div>
+                            <div class="textbox">
+                                <button id="eraser1" class="dropzone" style="left: 97px; top: 125px; position: fixed">
+                                    <img
+                                        src="../../../../resources/img/new_img/content_ink/ink_1.png"
+                                        alt=""
+                                        style="position: relative; z-index: 1"
+                                    />
+                                    <img
+                                        src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                                        alt=""
+                                        style="position: absolute; z-index: 2; height: 56px; right: 69px"
+                                    />
+                                </button>
+                                <button id="eraser2" class="dropzone" style="left: 87px; bottom: 38px; position: fixed">
+                                    <img
+                                        src="../../../../resources/img/new_img/content_ink/ink_2.png"
+                                        alt=""
+                                        style="position: relative; z-index: 1"
+                                    />
+                                    <img
+                                        src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                                        alt=""
+                                        style="position: absolute; z-index: 2; height: 56px; right: 139px"
+                                    />
+                                </button>
+                                <button id="eraser3" class="dropzone" style="right: 207px; top: 133px; position: fixed">
+                                    <img
+                                        src="../../../../resources/img/new_img/content_ink/ink_3.png"
+                                        alt=""
+                                        style="position: relative; z-index: 1"
+                                    />
+                                    <img
+                                        src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                                        alt=""
+                                        style="position: absolute; z-index: 2; height: 56px; right: 109px"
+                                    />
+                                </button>
+                                <button
+                                    id="eraser4"
+                                    class="dropzone"
+                                    style="right: 206px; bottom: 51px; position: fixed"
+                                >
+                                    <img
+                                        src="../../../../resources/img/new_img/content_ink/ink_4.png"
+                                        alt=""
+                                        style="position: relative; z-index: 1"
+                                    />
+                                    <img
+                                        src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                                        alt=""
+                                        style="position: absolute; z-index: 2; height: 56px; right: 115px"
+                                    />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="dragGroup">
+                        <div>
+                            <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>
+            <div class="next-btn" @click="goToNextPage">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
-
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      draggedElementId: null, // 드래그한 요소의 ID를 저장
-      wordList: [],
+    data() {
+        return {
+            draggedElementId: null, // 드래그한 요소의 ID를 저장
+            wordList: [],
 
-      wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
-      wdBookId: "", // 현재 단어장 id
-      currentWdBkIndex: 0, // 현재 단어장 인덱스
-      wdBookTypeIdState: "", // 이동할 페이지 타입 id
-      wordBookType: "", // 이동할 페이지
+            wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
+            wdBookId: '', // 현재 단어장 id
+            currentWdBkIndex: 0, // 현재 단어장 인덱스
+            wdBookTypeIdState: '', // 이동할 페이지 타입 id
+            wordBookType: '', // 이동할 페이지
 
-      seq: this.$store.getters.seqNum,
+            seq: this.$store.getters.seqNum,
 
-      hiddenState: false,
-    };
-  },
-  methods: {
-    pageSetting() {
-      this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
-      this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
-      this.wdBookId =
-        this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
-
-      if (this.currentWdBkIndex - 1 < 0) {
-        this.hiddenState = true;
-      }
-
-      this.fetchWordList();
+            hiddenState: false,
+        };
     },
+    methods: {
+        pageSetting() {
+            this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
+            this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
+            this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
 
-    async fetchWordList() {
-      try {
-        const response = await axios.post("/word/getWordsByBookId.json", {
-          wdBookId: this.wdBookId,
+            if (this.currentWdBkIndex - 1 < 0) {
+                this.hiddenState = true;
+            }
+
+            this.fetchWordList();
+        },
+
+        async fetchWordList() {
+            try {
+                const response = await axios.post('/word/getWordsByBookId.json', {
+                    wdBookId: this.wdBookId,
+                });
+
+                const wordList = response.data;
+
+                // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리
+                const requests = wordList.map(async (word) => {
+                    const fileResponse = await axios.post('/file/find.json', {
+                        file_mng_id: word.fileMngId,
+                    });
+
+                    const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
+                    console.log('각 단어의 fileRpath: ', fileRpath);
+
+                    word.fileRpath = 'http://165.229.169.113:9080/' + fileRpath; // fileRpath 값을 해당 객체에 추가
+                });
+
+                // 모든 요청이 완료될 때까지 대기
+                await Promise.all(requests);
+
+                // 최종적으로 wordList를 설정
+                this.wordList = wordList;
+                console.log('단어 리스트 -> ', this.wordList);
+            } catch (error) {
+                console.error('단어 목록을 불러오는 중 오류 발생:', error);
+            }
+        },
+
+        async goToPrevPage() {
+            if (this.currentWdBkIndex - 1 < 0) {
+                alert('단어장 첫번째 페이지 입니다');
+            } else {
+                this.currentWdBkIndex--;
+                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+
+                try {
+                    const response = await axios.post('/wordbook/find.json', {
+                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+                    });
+                    this.wdBookTypeIdState = response.data.wdBookTypeId;
+                    console.log('이전 단어장 타입 id: ', this.wdBookTypeIdState);
+
+                    switch (this.wdBookTypeIdState) {
+                        case '1':
+                            this.wordBookType = 'Chapter2';
+                            break;
+                        case '2':
+                            this.wordBookType = 'Chapter2_3';
+                            break;
+                        case '3':
+                            this.wordBookType = 'Chapter2_2';
+                            break;
+                        case '4':
+                            this.wordBookType = 'Chapter2_9';
+                            break;
+                        case '5':
+                            this.wordBookType = 'Chapter2_4';
+                            break;
+                        default:
+                            this.wordBookType = null;
+                    }
+
+                    this.goToPage(this.wordBookType);
+                } catch (error) {
+                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
+                }
+            }
+        },
+
+        async goToNextPage() {
+            if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
+                alert('단어장 마지막 페이지 입니다');
+                this.complete();
+            } else {
+                this.currentWdBkIndex++;
+                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+
+                try {
+                    const response = await axios.post('/wordbook/find.json', {
+                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+                    });
+                    this.wdBookTypeIdState = response.data.wdBookTypeId;
+                    console.log('다음 단어장 타입 id: ', this.wdBookTypeIdState);
+
+                    switch (this.wdBookTypeIdState) {
+                        case '1':
+                            this.wordBookType = 'Chapter2';
+                            break;
+                        case '2':
+                            this.wordBookType = 'Chapter2_3';
+                            break;
+                        case '3':
+                            this.wordBookType = 'Chapter2_2';
+                            break;
+                        case '4':
+                            this.wordBookType = 'Chapter2_9';
+                            break;
+                        case '5':
+                            this.wordBookType = 'Chapter2_4';
+                            break;
+                        default:
+                            this.wordBookType = null;
+                    }
+
+                    this.goToPage(this.wordBookType);
+                } catch (error) {
+                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
+                }
+            }
+        },
+
+        complete() {
+            const { unit_id, book_id } = this.$route.query;
+            this.$router.push({
+                name: 'Dashboard',
+                query: { value: this.seq, unit_id, book_id },
+            });
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        handleDragStart(event) {
+            this.draggedElementId = event.target.id; // 드래그한 요소의 ID를 저장
+            event.dataTransfer.setData('text/plain', this.draggedElementId);
+        },
+        handleDragOver(event) {
+            event.preventDefault(); // 드롭을 허용
+        },
+        handleDrop(event) {
+            event.preventDefault();
+
+            // 드롭된 영역이 버튼인지 확인
+            const dropZone = event.target.closest('button.dropzone');
+
+            if (dropZone) {
+                // 잉크 이미지를 숨깁니다
+                const inkImage = dropZone.querySelector('img:first-child');
+                if (inkImage) {
+                    inkImage.style.display = 'none';
+                }
+
+                // 클릭포인트 이미지를 숨깁니다
+                const clickPointImage = dropZone.querySelector('img:nth-child(2)');
+                if (clickPointImage) {
+                    clickPointImage.style.display = 'none';
+                }
+            }
+
+            // 드래그한 요소를 원래 위치로 복원
+            const draggedElement = document.getElementById(this.draggedElementId);
+            if (draggedElement) {
+                draggedElement.style.visibility = 'visible';
+                draggedElement.style.position = '';
+                draggedElement.style.top = '';
+                draggedElement.style.left = '';
+            }
+
+            this.draggedElementId = null; // 드래그 상태 초기화
+        },
+        returnPage() {
+            window.location.reload();
+        },
+    },
+    mounted() {
+        this.pageSetting();
+        // 드래그 가능한 영역에 드래그 오버 및 드롭 이벤트를 추가합니다
+        document.querySelectorAll('.dropzone').forEach((button) => {
+            button.addEventListener('dragover', this.handleDragOver);
+            button.addEventListener('drop', this.handleDrop);
         });
-
-        const wordList = response.data;
-
-        // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리
-        const requests = wordList.map(async (word) => {
-          const fileResponse = await axios.post("/file/find.json", {
-            file_mng_id: word.fileMngId,
-          });
-
-          const fileRpath =
-            fileResponse.data.list.length > 0
-              ? fileResponse.data.list[0].fileRpath
-              : null;
-          console.log("각 단어의 fileRpath: ", fileRpath);
-
-          word.fileRpath = "http://165.229.169.113:9080/" + fileRpath; // fileRpath 값을 해당 객체에 추가
-        });
-
-        // 모든 요청이 완료될 때까지 대기
-        await Promise.all(requests);
-
-        // 최종적으로 wordList를 설정
-        this.wordList = wordList;
-        console.log("단어 리스트 -> ", this.wordList);
-      } catch (error) {
-        console.error("단어 목록을 불러오는 중 오류 발생:", error);
-      }
     },
-
-    async goToPrevPage() {
-      if (this.currentWdBkIndex - 1 < 0) {
-        alert("단어장 첫번째 페이지 입니다");
-      } else {
-        this.currentWdBkIndex--;
-        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
-
-        try {
-          const response = await axios.post("/wordbook/find.json", {
-            wdBookId:
-              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
-          });
-          this.wdBookTypeIdState = response.data.wdBookTypeId;
-          console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
-
-          switch (this.wdBookTypeIdState) {
-            case "1":
-              this.wordBookType = "Chapter2";
-              break;
-            case "2":
-              this.wordBookType = "Chapter2_3";
-              break;
-            case "3":
-              this.wordBookType = "Chapter2_2";
-              break;
-            case "4":
-              this.wordBookType = "Chapter2_9";
-              break;
-            case "5":
-              this.wordBookType = "Chapter2_4";
-              break;
-            default:
-              this.wordBookType = null;
-          }
-
-          this.goToPage(this.wordBookType);
-        } catch (error) {
-          console.error("단어장 정보 불러오는 중 오류 발생:", error);
-        }
-      }
+    components: {
+        BookInfo: BookInfo,
     },
-
-    async goToNextPage() {
-      if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
-        alert("단어장 마지막 페이지 입니다");
-        this.complete();
-      } else {
-        this.currentWdBkIndex++;
-        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
-
-        try {
-          const response = await axios.post("/wordbook/find.json", {
-            wdBookId:
-              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
-          });
-          this.wdBookTypeIdState = response.data.wdBookTypeId;
-          console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
-
-          switch (this.wdBookTypeIdState) {
-            case "1":
-              this.wordBookType = "Chapter2";
-              break;
-            case "2":
-              this.wordBookType = "Chapter2_3";
-              break;
-            case "3":
-              this.wordBookType = "Chapter2_2";
-              break;
-            case "4":
-              this.wordBookType = "Chapter2_9";
-              break;
-            case "5":
-              this.wordBookType = "Chapter2_4";
-              break;
-            default:
-              this.wordBookType = null;
-          }
-
-          this.goToPage(this.wordBookType);
-        } catch (error) {
-          console.error("단어장 정보 불러오는 중 오류 발생:", error);
-        }
-      }
-    },
-
-    complete() {
-      const { unit_id, book_id } = this.$route.query;
-      this.$router.push({
-        name: "Dashboard",
-        query: { value: this.seq, unit_id, book_id },
-      });
-    },
-    goToPage(page) {
-      this.$router.push({ name: page });
-    },
-    handleDragStart(event) {
-      this.draggedElementId = event.target.id; // 드래그한 요소의 ID를 저장
-      event.dataTransfer.setData("text/plain", this.draggedElementId);
-    },
-    handleDragOver(event) {
-      event.preventDefault(); // 드롭을 허용
-    },
-    handleDrop(event) {
-      event.preventDefault();
-
-      // 드롭된 영역이 버튼인지 확인
-      const dropZone = event.target.closest("button.dropzone");
-
-      if (dropZone) {
-        // 잉크 이미지를 숨깁니다
-        const inkImage = dropZone.querySelector("img:first-child");
-        if (inkImage) {
-          inkImage.style.display = "none";
-        }
-
-        // 클릭포인트 이미지를 숨깁니다
-        const clickPointImage = dropZone.querySelector("img:nth-child(2)");
-        if (clickPointImage) {
-          clickPointImage.style.display = "none";
-        }
-      }
-
-      // 드래그한 요소를 원래 위치로 복원
-      const draggedElement = document.getElementById(this.draggedElementId);
-      if (draggedElement) {
-        draggedElement.style.visibility = "visible";
-        draggedElement.style.position = "";
-        draggedElement.style.top = "";
-        draggedElement.style.left = "";
-      }
-
-      this.draggedElementId = null; // 드래그 상태 초기화
-    },
-    returnPage() {
-      window.location.reload();
-    },
-  },
-  mounted() {
-    this.pageSetting();
-    // 드래그 가능한 영역에 드래그 오버 및 드롭 이벤트를 추가합니다
-    document.querySelectorAll(".dropzone").forEach((button) => {
-      button.addEventListener("dragover", this.handleDragOver);
-      button.addEventListener("drop", this.handleDrop);
-    });
-  },
 };
 </script>
 
 <style scoped>
 .vocaGroup {
-  width: 79%;
-  position: absolute;
-  top: 90px;
-  left: 120px;
-  display: flex;
-  flex-wrap: wrap;
+    width: 79%;
+    position: absolute;
+    top: 90px;
+    left: 120px;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .word-item {
-  width: 49%;
+    width: 49%;
 }
 
 .ink {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .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>

7732467

1533a48

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/new_img/logo_v2.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="previousProblem()">
-        <img
-          src="../../../../resources/img/left.png"
-          alt=""
-          :class="{ active: currentIndex === 0 }"
-        />
-      </div>
-      <div class="content title-box">
-        ,,,
-        <p class="title mt25 title-bg">step3.</p>
-        <div
-          class="flex align-center mb30"
-          style="justify-content: space-between"
-        >
-          <p class="subtitle2 mr20">
-            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
-          </p>
-        </div>
-
-        <div
-          class="flex align-center justify-center"
-          style="margin-top: 9rem; gap: 113px"
-        >
-          <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 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/new_img/logo_v2.png" alt="" />
                 </div>
-              </div>
-            </div>
-          </div>
-          <div class="imgGroup">
-            <div class="flex" style="gap: 60px">
-              <img src="../../../../resources/img/img106_48s.png" alt="" />
-            </div>
-          </div>
-          <div class="pickGroup">
-            <article
-              class="flex justify-center mb50"
-              style="gap: 60px"
-              v-for="(item, index) in problemDetail"
-              :key="index"
-            >
-              <div class="flex" @click="handleClick(item.prblmDtlExpln)">
-                <button>
-                  <img src="../../../../resources/img/img136_71s.png" alt="" />
-                  <p :class="{ active: selectedButton === item.prblmDtlExpln }">
-                    {{ index + 1 }}
-                  </p>
-                </button>
-                <p>{{ item.prblmDtlExpln }}</p>
-              </div>
-            </article>
-          </div>
+            </router-link>
         </div>
-        <button
-          class="submit-button"
-          @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1"
-        >
-          제출하기
-        </button>
-        <button class="submit-button" @click="nextProblem()" v-else>
-          다음 문제로
-        </button>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <BookInfo />
+            <button class="completeBtn" @click="complete">학습 종료</button>
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+            </div>
+            <div class="content title-box">
+                ,,,
+                <p class="title mt25 title-bg">step3.</p>
+                <div class="flex align-center mb30" style="justify-content: space-between">
+                    <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+                </div>
+
+                <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px">
+                    <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">
+                        <div class="flex" style="gap: 60px">
+                            <img src="../../../../resources/img/img106_48s.png" alt="" />
+                        </div>
+                    </div>
+                    <div class="pickGroup">
+                        <article
+                            class="flex justify-center mb50"
+                            style="gap: 60px"
+                            v-for="(item, index) in problemDetail"
+                            :key="index"
+                        >
+                            <div class="flex" @click="handleClick(item.prblmDtlExpln)">
+                                <button>
+                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                    <p :class="{ active: selectedButton === item.prblmDtlExpln }">
+                                        {{ index + 1 }}
+                                    </p>
+                                </button>
+                                <p>{{ item.prblmDtlExpln }}</p>
+                            </div>
+                        </article>
+                    </div>
+                </div>
+                <button class="submit-button" @click="handleSubmit()" v-if="currentIndex === learningIdsLength - 1">
+                    제출하기
+                </button>
+                <button class="submit-button" @click="nextProblem()" v-else>다음 문제로</button>
+            </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      timer: "00",
-      selectedButton: null, // 선택한 버튼
-      prblm_id: [],
-      unit_id: null,
-      dataList: [],
-      problemDetail: [],
-      currentIndex: null,
-      learningIdsLength: null,
-    };
-  },
-  methods: {
-    complete() {
-      const { unit_id, book_id } = this.$route.query;
-      this.$router.push({
-        name: "Dashboard",
-        query: { value: 8, unit_id, book_id },
-      });
+    data() {
+        return {
+            timer: '00',
+            selectedButton: null, // 선택한 버튼
+            prblm_id: [],
+            unit_id: null,
+            dataList: [],
+            problemDetail: [],
+            currentIndex: null,
+            learningIdsLength: null,
+        };
     },
-    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);
-    },
-    handleClick(answer) {
-      console.log(answer);
-      this.selectedButton = answer;
-    },
-    // 제출하기 버튼
-    handleSubmit() {
-      const problemData = {
-        prblmInfo: this.currentLearningId,
-        prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton,
-      };
-      const answerData = {
-        prblmId: this.currentLearningId.prblm_id,
-        prblmAns: this.selectedButton,
-        stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1,
-      };
-      this.$store.dispatch("saveProblemData", problemData);
-      this.$store.dispatch("saveProblemAttempt", answerData);
-      console.log(this.$store.getters.getAllProblems);
-      console.log(this.$store.getters.getAllAnswers);
-
-      axios({
-        url: "problemLog/insertProblemLog.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
+    methods: {
+        complete() {
+            const { unit_id, book_id } = this.$route.query;
+            this.$router.push({
+                name: 'Dashboard',
+                query: { value: 8, unit_id, book_id },
+            });
         },
-        data: this.$store.getters.getAllAnswers,
-      })
-        .then(function (res) {
-          console.log("problem - response : ", res.data);
-        })
-        .catch(function (error) {
-          console.log("problem - error : ", error);
-        });
-    },
-    getProblem() {
-      const vm = this;
-      const prblmId = this.currentLearningId.prblm_id;
-      axios({
-        url: "problem/problemInfo.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
+        goToPage(page) {
+            this.$router.push({ name: page });
         },
-        data: {
-          prblmId: prblmId,
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
         },
-      })
-        .then(function (res) {
-          console.log("problem - response : ", res.data);
-          vm.dataList = res.data.problem;
-          vm.problemDetail = res.data.problemDetail;
-        })
-        .catch(function (error) {
-          console.log("problem - error : ", error);
-        });
-    },
-    nextProblem() {
-      const problemData = {
-        prblmInfo: this.currentLearningId,
-        prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton,
-      };
-      const answerData = {
-        prblmId: this.currentLearningId.prblm_id,
-        prblmAns: this.selectedButton,
-        stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1,
-      };
-      this.$store.dispatch("saveProblemData", problemData);
-      this.$store.dispatch("saveProblemAttempt", answerData);
-      console.log(this.$store.getters.getAllProblems);
-      console.log(this.$store.getters.getAllAnswers);
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
+        handleClick(answer) {
+            console.log(answer);
+            this.selectedButton = answer;
+        },
+        // 제출하기 버튼
+        handleSubmit() {
+            const problemData = {
+                prblmInfo: this.currentLearningId,
+                prblmNumber: this.currentProblemIndex,
+                prblmAns: this.selectedButton,
+            };
+            const answerData = {
+                prblmId: this.currentLearningId.prblm_id,
+                prblmAns: this.selectedButton,
+                stdId: this.$store.getters.getStdId,
+                prblmLogAnsCnt: 1,
+            };
+            this.$store.dispatch('saveProblemData', problemData);
+            this.$store.dispatch('saveProblemAttempt', answerData);
+            console.log(this.$store.getters.getAllProblems);
+            console.log(this.$store.getters.getAllAnswers);
 
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-  },
-  watch: {},
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-    getAllProblems() {
-      return this.$store.getters.getAllProblems;
-    },
-    getStdId() {
-      return this.$store.getters.getStdId;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
+            axios({
+                url: 'problemLog/insertProblemLog.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: this.$store.getters.getAllAnswers,
+            })
+                .then(function (res) {
+                    console.log('problem - response : ', res.data);
+                })
+                .catch(function (error) {
+                    console.log('problem - error : ', error);
+                });
+        },
+        getProblem() {
+            const vm = this;
+            const prblmId = this.currentLearningId.prblm_id;
+            axios({
+                url: 'problem/problemInfo.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    prblmId: prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log('problem - response : ', res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+                })
+                .catch(function (error) {
+                    console.log('problem - error : ', error);
+                });
+        },
+        nextProblem() {
+            const problemData = {
+                prblmInfo: this.currentLearningId,
+                prblmNumber: this.currentProblemIndex,
+                prblmAns: this.selectedButton,
+            };
+            const answerData = {
+                prblmId: this.currentLearningId.prblm_id,
+                prblmAns: this.selectedButton,
+                stdId: this.$store.getters.getStdId,
+                prblmLogAnsCnt: 1,
+            };
+            this.$store.dispatch('saveProblemData', problemData);
+            this.$store.dispatch('saveProblemAttempt', answerData);
+            console.log(this.$store.getters.getAllProblems);
+            console.log(this.$store.getters.getAllAnswers);
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
 
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  components: {},
-  mounted() {
-    this.getProblem();
-  },
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    watch: {},
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+        getAllProblems() {
+            return this.$store.getters.getAllProblems;
+        },
+        getStdId() {
+            return this.$store.getters.getStdId;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    components: {
+        BookInfo: BookInfo,
+    },
+    mounted() {
+        this.getProblem();
+    },
 };
 </script>
 <style scoped>
 .imgGroup {
-  width: fit-content;
+    width: fit-content;
 }
 
 .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 {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 }
 
 .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%);
 }
 
 .pickGroup article img {
-  object-fit: contain;
-  width: -webkit-fill-available;
+    object-fit: contain;
+    width: -webkit-fill-available;
 }
 
 .pickGroup article > div > p {
-  font-size: 64px;
+    font-size: 64px;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .pickGroup button p.active {
-  color: #000;
-  /* 선택된 버튼의 숫자 색을 더 진하게 */
+    color: #000;
+    /* 선택된 버튼의 숫자 색을 더 진하게 */
 }
 
 .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';
 }
 
 .submit-button {
-  position: absolute;
-  background-color: #ffba08;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 28px;
-  font-family: "ONEMobilePOPOTF";
-  right: 5rem;
-  bottom: 3rem;
+    position: absolute;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
+    right: 5rem;
+    bottom: 3rem;
 }
 </style>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter3_1.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/new_img/logo_v2.png" alt="" />
+    <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/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </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="previousProblem()">
-        <img
-          src="../../../../resources/img/left.png"
-          alt=""
-          :class="{ active: currentIndex === 0 }"
-        />
-      </div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step3.</p>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">
-            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
-          </p>
-          <button>
-            <img src="../../../../resources/img/btn10_s.png" alt="" />
-          </button>
+        <div class="title-box mb25 flex align-center mt40">
+            <BookInfo />
         </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step3.</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+                    <button>
+                        <img src="../../../../resources/img/btn10_s.png" alt="" />
+                    </button>
+                </div>
 
-        <div class="flex align-center justify-center" style="gap: 113px">
-          <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 class="flex align-center justify-center" style="gap: 113px">
+                    <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="pickGroup">
+                        <div class="flex" style="gap: 250px">
+                            <article class="text-ct" @click="handleClick('A')">
+                                <div class="mb30">
+                                    <img src="../../../../resources/img/img107_50s.png" alt="" />
+                                </div>
+                                <button class="popTxt">
+                                    <img :src="selectedButton === 'A' ? selectedbuttonImg : buttonImg" alt="" />
+                                </button>
+                            </article>
+                            <article class="text-ct" @click="handleClick('B')">
+                                <div class="mb30">
+                                    <img src="../../../../resources/img/img108_50s.png" alt="" />
+                                </div>
+                                <button class="popTxt">
+                                    <img :src="selectedButton === 'B' ? selectedbuttonImg : buttonImg" alt="" />
+                                </button>
+                            </article>
+                        </div>
+                    </div>
                 </div>
-              </div>
-            </div>
-          </div>
-          <div class="pickGroup">
-            <div class="flex" style="gap: 250px">
-              <article class="text-ct" @click="handleClick('A')">
-                <div class="mb30">
-                  <img src="../../../../resources/img/img107_50s.png" alt="" />
-                </div>
-                <button class="popTxt">
-                  <img
-                    :src="
-                      selectedButton === 'A' ? selectedbuttonImg : buttonImg
-                    "
-                    alt=""
-                  />
+                <button class="submit-button" @click="handleSubmit()" v-if="currentIndex === learningIdsLength - 1">
+                    제출하기
                 </button>
-              </article>
-              <article class="text-ct" @click="handleClick('B')">
-                <div class="mb30">
-                  <img src="../../../../resources/img/img108_50s.png" alt="" />
-                </div>
-                <button class="popTxt">
-                  <img
-                    :src="
-                      selectedButton === 'B' ? selectedbuttonImg : buttonImg
-                    "
-                    alt=""
-                  />
-                </button>
-              </article>
+                <button class="submit-button" @click="nextProblem()" v-else>다음 문제로</button>
             </div>
-          </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
         </div>
-        <button
-          class="submit-button"
-          @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1"
-        >
-          제출하기
-        </button>
-        <button class="submit-button" @click="nextProblem()" v-else>
-          다음 문제로
-        </button>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      timer: "00",
-      selectedButton: null,
-      buttonImg: "client/resources/img/img136_71s.png",
-      selectedbuttonImg: "client/resources/img/img137_71s.png",
-      dataList: [],
-      problemDetail: [],
-      currentIndex: null,
-      learningIdsLength: null,
-    };
-  },
-  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);
-    },
-    handleClick(number) {
-      this.selectedButton = number;
-    },
-    // 제출하기 버튼
-    handleSubmit() {
-      const userConfirmed = window.confirm("제출 하시겠습니까?");
-      if (userConfirmed) {
-        const problemData = {
-          prblmInfo: this.currentLearningId,
-          prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton,
+    data() {
+        return {
+            timer: '00',
+            selectedButton: null,
+            buttonImg: 'client/resources/img/img136_71s.png',
+            selectedbuttonImg: 'client/resources/img/img137_71s.png',
+            dataList: [],
+            problemDetail: [],
+            currentIndex: null,
+            learningIdsLength: null,
         };
-
-        const answerData = {
-          prblmId: this.currentLearningId.prblm_id,
-          prblmAns: this.selectedButton,
-          stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1,
-        };
-
-        this.$store.dispatch("saveProblemData", problemData);
-        this.$store.dispatch("saveProblemAttempt", answerData);
-
-        console.log(this.$store.getters.getAllProblems);
-        console.log(this.$store.getters.getAllAnswers);
-
-        axios({
-          url: "problemLog/insertProblemLog.json",
-          method: "post",
-          headers: {
-            "Content-Type": "application/json; charset=UTF-8",
-          },
-          data: this.$store.getters.getAllAnswers,
-        })
-          .then((res) => {
-            console.log("problem - response : ", res.data);
-            this.goToPage("Chapter4");
-          })
-          .catch(function (error) {
-            console.log("problem - error : ", error);
-          });
-      } else {
-        console.log("Submission canceled by the user.");
-      }
     },
-
-    getProblem() {
-      const vm = this;
-      const prblmId = this.currentLearningId.prblm_id;
-      axios({
-        url: "problem/problemInfo.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
+    methods: {
+        goToPage(page) {
+            this.$router.push({ name: page });
         },
-        data: {
-          prblmId: prblmId,
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
         },
-      })
-        .then(function (res) {
-          console.log("problem - response : ", res.data);
-          vm.dataList = res.data.problem;
-          vm.problemDetail = res.data.problemDetail;
-        })
-        .catch(function (error) {
-          console.log("problem - error : ", error);
-        });
-    },
-    nextProblem() {
-      const problemData = {
-        prblmInfo: this.currentLearningId,
-        prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton,
-      };
-      const answerData = {
-        prblmId: this.currentLearningId.prblm_id,
-        prblmAns: this.selectedButton,
-        stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1,
-      };
-      this.$store.dispatch("saveProblemData", problemData);
-      this.$store.dispatch("saveProblemAttempt", answerData);
-      console.log(this.$store.getters.getAllProblems);
-      console.log(this.$store.getters.getAllAnswers);
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
+        handleClick(number) {
+            this.selectedButton = number;
+        },
+        // 제출하기 버튼
+        handleSubmit() {
+            const userConfirmed = window.confirm('제출 하시겠습니까?');
+            if (userConfirmed) {
+                const problemData = {
+                    prblmInfo: this.currentLearningId,
+                    prblmNumber: this.currentProblemIndex,
+                    prblmAns: this.selectedButton,
+                };
 
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-  },
-  watch: {},
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-    this.currentIndex = this.currentProblemIndex;
-    this.learningIdsLength = this.$store.state.currentLearningIds.length;
+                const answerData = {
+                    prblmId: this.currentLearningId.prblm_id,
+                    prblmAns: this.selectedButton,
+                    stdId: this.$store.getters.getStdId,
+                    prblmLogAnsCnt: 1,
+                };
 
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  components: {},
-  mounted() {
-    this.getProblem();
-  },
+                this.$store.dispatch('saveProblemData', problemData);
+                this.$store.dispatch('saveProblemAttempt', answerData);
+
+                console.log(this.$store.getters.getAllProblems);
+                console.log(this.$store.getters.getAllAnswers);
+
+                axios({
+                    url: 'problemLog/insertProblemLog.json',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': 'application/json; charset=UTF-8',
+                    },
+                    data: this.$store.getters.getAllAnswers,
+                })
+                    .then((res) => {
+                        console.log('problem - response : ', res.data);
+                        this.goToPage('Chapter4');
+                    })
+                    .catch(function (error) {
+                        console.log('problem - error : ', error);
+                    });
+            } else {
+                console.log('Submission canceled by the user.');
+            }
+        },
+
+        getProblem() {
+            const vm = this;
+            const prblmId = this.currentLearningId.prblm_id;
+            axios({
+                url: 'problem/problemInfo.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    prblmId: prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log('problem - response : ', res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+                })
+                .catch(function (error) {
+                    console.log('problem - error : ', error);
+                });
+        },
+        nextProblem() {
+            const problemData = {
+                prblmInfo: this.currentLearningId,
+                prblmNumber: this.currentProblemIndex,
+                prblmAns: this.selectedButton,
+            };
+            const answerData = {
+                prblmId: this.currentLearningId.prblm_id,
+                prblmAns: this.selectedButton,
+                stdId: this.$store.getters.getStdId,
+                prblmLogAnsCnt: 1,
+            };
+            this.$store.dispatch('saveProblemData', problemData);
+            this.$store.dispatch('saveProblemAttempt', answerData);
+            console.log(this.$store.getters.getAllProblems);
+            console.log(this.$store.getters.getAllAnswers);
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    watch: {},
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+        this.currentIndex = this.currentProblemIndex;
+        this.learningIdsLength = this.$store.state.currentLearningIds.length;
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    components: {
+        BookInfo: BookInfo,
+    },
+    mounted() {
+        this.getProblem();
+    },
 };
 </script>
 <style scoped>
 .imgGroup {
-  width: fit-content;
+    width: fit-content;
 }
 
 .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 button {
-  position: relative;
+    position: relative;
 }
 
 .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%);
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .submit-button {
-  position: absolute;
-  background-color: #ffba08;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 28px;
-  font-family: "ONEMobilePOPOTF";
-  right: 5rem;
-  bottom: 3rem;
+    position: absolute;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
+    right: 5rem;
+    bottom: 3rem;
 }
 </style>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter3_10.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/new_img/logo_v2.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="previousProblem()">
-        <img
-          src="../../../../resources/img/left.png"
-          alt=""
-          :class="{ active: currentIndex === 0 }"
-        />
-      </div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step3.</p>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">
-            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
-          </p>
-          <button @click="playAudio">
-            <img src="../../../../resources/img/btn10_s.png" alt="" />
-            <audio
-              id="audio-player"
-              src="client/resources/audio/bank.wav"
-              preload="auto"
-            ></audio>
-          </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 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/new_img/logo_v2.png" alt="" />
                 </div>
-              </div>
-            </div>
-          </div>
-          <div class="imgGroup mt20">
-            <img src="../../../../resources/img/img116_59s.png" alt="" />
-            <p class="title1 mt10" style="width: auto">
-              <strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.
-            </p>
-            <div class="mt20">
-              <input
-                class="yellow-bd"
-                v-model="answer"
-                type="text"
-                placeholder="답을 입력하세요."
-              />
-            </div>
-          </div>
+            </router-link>
         </div>
-        <button
-          class="submit-button"
-          @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1"
-        >
-          제출하기
-        </button>
-        <button class="submit-button" @click="nextProblem()" v-else>
-          다음 문제로
-        </button>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
+        <div class="title-box mb25 flex align-center mt40">
+            <BookInfo />
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step3.</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+                    <button @click="playAudio">
+                        <img src="../../../../resources/img/btn10_s.png" alt="" />
+                        <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>
+                    </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 mt20">
+                        <img src="../../../../resources/img/img116_59s.png" alt="" />
+                        <p class="title1 mt10" style="width: auto">
+                            <strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.
+                        </p>
+                        <div class="mt20">
+                            <input class="yellow-bd" v-model="answer" type="text" placeholder="답을 입력하세요." />
+                        </div>
+                    </div>
+                </div>
+                <button class="submit-button" @click="handleSubmit()" v-if="currentIndex === learningIdsLength - 1">
+                    제출하기
+                </button>
+                <button class="submit-button" @click="nextProblem()" v-else>다음 문제로</button>
+            </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
-
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      timer: "00",
-      answer: null,
-      dataList: [],
-      problemDetail: [],
-      currentIndex: null,
-      learningIdsLength: null,
-    };
-  },
-  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);
-    },
-    playAudio() {
-      const audio = document.getElementById("audio-player");
-      audio.play();
-      console.log("playing");
-    },
-    handleSubmit() {
-      const userConfirmed = window.confirm("제출 하시겠습니까?");
-      if (userConfirmed) {
-        const problemData = {
-          prblmInfo: this.currentLearningId,
-          prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton,
+    data() {
+        return {
+            timer: '00',
+            answer: null,
+            dataList: [],
+            problemDetail: [],
+            currentIndex: null,
+            learningIdsLength: null,
         };
-
-        const answerData = {
-          prblmId: this.currentLearningId.prblm_id,
-          prblmAns: this.selectedButton,
-          stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1,
-        };
-
-        this.$store.dispatch("saveProblemData", problemData);
-        this.$store.dispatch("saveProblemAttempt", answerData);
-
-        console.log(this.$store.getters.getAllProblems);
-        console.log(this.$store.getters.getAllAnswers);
-
-        axios({
-          url: "problemLog/insertProblemLog.json",
-          method: "post",
-          headers: {
-            "Content-Type": "application/json; charset=UTF-8",
-          },
-          data: this.$store.getters.getAllAnswers,
-        })
-          .then(function (res) {
-            console.log("problem - response : ", res.data);
-            this.goToPage("Chapter4");
-          })
-          .catch(function (error) {
-            console.log("problem - error : ", error);
-          });
-      } else {
-        console.log("Submission canceled by the user.");
-      }
     },
-    getProblem() {
-      const vm = this;
-      const prblmId = this.currentLearningId.prblm_id;
-      axios({
-        url: "problem/problemInfo.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
+    methods: {
+        goToPage(page) {
+            this.$router.push({ name: page });
         },
-        data: {
-          prblmId: prblmId,
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
         },
-      })
-        .then(function (res) {
-          console.log("problem - response : ", res.data);
-          vm.dataList = res.data.problem;
-          vm.problemDetail = res.data.problemDetail;
-        })
-        .catch(function (error) {
-          console.log("problem - error : ", error);
-        });
-    },
-    nextProblem() {
-      const problemData = {
-        prblmInfo: this.currentLearningId,
-        prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton,
-      };
-      const answerData = {
-        prblmId: this.currentLearningId.prblm_id,
-        prblmAns: this.selectedButton,
-        stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1,
-      };
-      this.$store.dispatch("saveProblemData", problemData);
-      this.$store.dispatch("saveProblemAttempt", answerData);
-      console.log(this.$store.getters.getAllProblems);
-      console.log(this.$store.getters.getAllAnswers);
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
+        playAudio() {
+            const audio = document.getElementById('audio-player');
+            audio.play();
+            console.log('playing');
+        },
+        handleSubmit() {
+            const userConfirmed = window.confirm('제출 하시겠습니까?');
+            if (userConfirmed) {
+                const problemData = {
+                    prblmInfo: this.currentLearningId,
+                    prblmNumber: this.currentProblemIndex,
+                    prblmAns: this.selectedButton,
+                };
 
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-  },
-  watch: {},
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-    this.currentIndex = this.currentProblemIndex;
-    this.learningIdsLength = this.$store.state.currentLearningIds.length;
+                const answerData = {
+                    prblmId: this.currentLearningId.prblm_id,
+                    prblmAns: this.selectedButton,
+                    stdId: this.$store.getters.getStdId,
+                    prblmLogAnsCnt: 1,
+                };
 
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  components: {},
-  mounted() {
-    this.getProblem();
-  },
+                this.$store.dispatch('saveProblemData', problemData);
+                this.$store.dispatch('saveProblemAttempt', answerData);
+
+                console.log(this.$store.getters.getAllProblems);
+                console.log(this.$store.getters.getAllAnswers);
+
+                axios({
+                    url: 'problemLog/insertProblemLog.json',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': 'application/json; charset=UTF-8',
+                    },
+                    data: this.$store.getters.getAllAnswers,
+                })
+                    .then(function (res) {
+                        console.log('problem - response : ', res.data);
+                        this.goToPage('Chapter4');
+                    })
+                    .catch(function (error) {
+                        console.log('problem - error : ', error);
+                    });
+            } else {
+                console.log('Submission canceled by the user.');
+            }
+        },
+        getProblem() {
+            const vm = this;
+            const prblmId = this.currentLearningId.prblm_id;
+            axios({
+                url: 'problem/problemInfo.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    prblmId: prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log('problem - response : ', res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+                })
+                .catch(function (error) {
+                    console.log('problem - error : ', error);
+                });
+        },
+        nextProblem() {
+            const problemData = {
+                prblmInfo: this.currentLearningId,
+                prblmNumber: this.currentProblemIndex,
+                prblmAns: this.selectedButton,
+            };
+            const answerData = {
+                prblmId: this.currentLearningId.prblm_id,
+                prblmAns: this.selectedButton,
+                stdId: this.$store.getters.getStdId,
+                prblmLogAnsCnt: 1,
+            };
+            this.$store.dispatch('saveProblemData', problemData);
+            this.$store.dispatch('saveProblemAttempt', answerData);
+            console.log(this.$store.getters.getAllProblems);
+            console.log(this.$store.getters.getAllAnswers);
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    watch: {},
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+        this.currentIndex = this.currentProblemIndex;
+        this.learningIdsLength = this.$store.state.currentLearningIds.length;
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    components: {
+        BookInfo: BookInfo,
+    },
+    mounted() {
+        this.getProblem();
+    },
 };
 </script>
 <style scoped>
 input.yellow-bd {
-  width: 30%;
+    width: 30%;
 }
 
 .dropGroup button {
-  position: relative;
+    position: relative;
 }
 
 .dropGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .dragGroup {
-  background-color: #f2f4f8;
-  padding: 30px 50px;
-  width: max-content;
-  border-radius: 20px;
+    background-color: #f2f4f8;
+    padding: 30px 50px;
+    width: max-content;
+    border-radius: 20px;
 }
 
 .dragGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .submit-button {
-  position: absolute;
-  background-color: #ffba08;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 28px;
-  font-family: "ONEMobilePOPOTF";
-  right: 5rem;
-  bottom: 3rem;
+    position: absolute;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
+    right: 5rem;
+    bottom: 3rem;
 }
 </style>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter3_11.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/new_img/logo_v2.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="previousProblem()">
-        <img
-          src="../../../../resources/img/left.png"
-          alt=""
-          :class="{ active: currentIndex === 0 }"
-        />
-      </div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step3.</p>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">
-            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
-          </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 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/new_img/logo_v2.png" alt="" />
                 </div>
-              </div>
-            </div>
-          </div>
-          <div class="imgGroup mt20">
-            <img src="../../../../resources/img/img115_58s.png" alt="" />
-            <!-- <p class="title1 mt10"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p> -->
-            <div class="mt50 flex justify-center" style="gap: 50px">
-              <input class="yellow-bd" type="text" v-model="answer1" />
-              <p class="title3">e</p>
-              <input class="yellow-bd" type="text" v-model="answer2" />
-            </div>
-          </div>
+            </router-link>
         </div>
-        <button
-          class="submit-button"
-          @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1"
-        >
-          제출하기
-        </button>
-        <button class="submit-button" @click="nextProblem()" v-else>
-          다음 문제로
-        </button>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
+        <div class="title-box mb25 flex align-center mt40">
+            <BookInfo />
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step3.</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</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 mt20">
+                        <img src="../../../../resources/img/img115_58s.png" alt="" />
+                        <!-- <p class="title1 mt10"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p> -->
+                        <div class="mt50 flex justify-center" style="gap: 50px">
+                            <input class="yellow-bd" type="text" v-model="answer1" />
+                            <p class="title3">e</p>
+                            <input class="yellow-bd" type="text" v-model="answer2" />
+                        </div>
+                    </div>
+                </div>
+                <button class="submit-button" @click="handleSubmit()" v-if="currentIndex === learningIdsLength - 1">
+                    제출하기
+                </button>
+                <button class="submit-button" @click="nextProblem()" v-else>다음 문제로</button>
+            </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      timer: "00",
-      answer1: null,
-      answer2: null,
-      text: "e",
-      dataList: [],
-      problemDetail: [],
-      currentIndex: null,
-      learningIdsLength: null,
-    };
-  },
-  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);
-    },
-    handleSubmit() {
-      const userConfirmed = window.confirm("제출 하시겠습니까?");
-      if (userConfirmed) {
-        const problemData = {
-          prblmInfo: this.currentLearningId,
-          prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton,
+    data() {
+        return {
+            timer: '00',
+            answer1: null,
+            answer2: null,
+            text: 'e',
+            dataList: [],
+            problemDetail: [],
+            currentIndex: null,
+            learningIdsLength: null,
         };
-
-        const answerData = {
-          prblmId: this.currentLearningId.prblm_id,
-          prblmAns: this.selectedButton,
-          stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1,
-        };
-
-        this.$store.dispatch("saveProblemData", problemData);
-        this.$store.dispatch("saveProblemAttempt", answerData);
-
-        console.log(this.$store.getters.getAllProblems);
-        console.log(this.$store.getters.getAllAnswers);
-
-        axios({
-          url: "problemLog/insertProblemLog.json",
-          method: "post",
-          headers: {
-            "Content-Type": "application/json; charset=UTF-8",
-          },
-          data: this.$store.getters.getAllAnswers,
-        })
-          .then(function (res) {
-            console.log("problem - response : ", res.data);
-            this.goToPage("Chapter4");
-          })
-          .catch(function (error) {
-            console.log("problem - error : ", error);
-          });
-      } else {
-        console.log("Submission canceled by the user.");
-      }
     },
-    getProblem() {
-      const vm = this;
-      const prblmId = this.currentLearningId.prblm_id;
-      axios({
-        url: "problem/problemInfo.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
+    methods: {
+        goToPage(page) {
+            this.$router.push({ name: page });
         },
-        data: {
-          prblmId: prblmId,
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
         },
-      })
-        .then(function (res) {
-          console.log("problem - response : ", res.data);
-          vm.dataList = res.data.problem;
-          vm.problemDetail = res.data.problemDetail;
-        })
-        .catch(function (error) {
-          console.log("problem - error : ", error);
-        });
-    },
-    nextProblem() {
-      const problemData = {
-        prblmInfo: this.currentLearningId,
-        prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton,
-      };
-      const answerData = {
-        prblmId: this.currentLearningId.prblm_id,
-        prblmAns: this.selectedButton,
-        stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1,
-      };
-      this.$store.dispatch("saveProblemData", problemData);
-      this.$store.dispatch("saveProblemAttempt", answerData);
-      console.log(this.$store.getters.getAllProblems);
-      console.log(this.$store.getters.getAllAnswers);
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
+        handleSubmit() {
+            const userConfirmed = window.confirm('제출 하시겠습니까?');
+            if (userConfirmed) {
+                const problemData = {
+                    prblmInfo: this.currentLearningId,
+                    prblmNumber: this.currentProblemIndex,
+                    prblmAns: this.selectedButton,
+                };
 
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-  },
-  watch: {},
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-    this.currentIndex = this.currentProblemIndex;
-    this.learningIdsLength = this.$store.state.currentLearningIds.length;
+                const answerData = {
+                    prblmId: this.currentLearningId.prblm_id,
+                    prblmAns: this.selectedButton,
+                    stdId: this.$store.getters.getStdId,
+                    prblmLogAnsCnt: 1,
+                };
 
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  components: {},
-  mounted() {
-    this.getProblem();
-  },
+                this.$store.dispatch('saveProblemData', problemData);
+                this.$store.dispatch('saveProblemAttempt', answerData);
+
+                console.log(this.$store.getters.getAllProblems);
+                console.log(this.$store.getters.getAllAnswers);
+
+                axios({
+                    url: 'problemLog/insertProblemLog.json',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': 'application/json; charset=UTF-8',
+                    },
+                    data: this.$store.getters.getAllAnswers,
+                })
+                    .then(function (res) {
+                        console.log('problem - response : ', res.data);
+                        this.goToPage('Chapter4');
+                    })
+                    .catch(function (error) {
+                        console.log('problem - error : ', error);
+                    });
+            } else {
+                console.log('Submission canceled by the user.');
+            }
+        },
+        getProblem() {
+            const vm = this;
+            const prblmId = this.currentLearningId.prblm_id;
+            axios({
+                url: 'problem/problemInfo.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    prblmId: prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log('problem - response : ', res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+                })
+                .catch(function (error) {
+                    console.log('problem - error : ', error);
+                });
+        },
+        nextProblem() {
+            const problemData = {
+                prblmInfo: this.currentLearningId,
+                prblmNumber: this.currentProblemIndex,
+                prblmAns: this.selectedButton,
+            };
+            const answerData = {
+                prblmId: this.currentLearningId.prblm_id,
+                prblmAns: this.selectedButton,
+                stdId: this.$store.getters.getStdId,
+                prblmLogAnsCnt: 1,
+            };
+            this.$store.dispatch('saveProblemData', problemData);
+            this.$store.dispatch('saveProblemAttempt', answerData);
+            console.log(this.$store.getters.getAllProblems);
+            console.log(this.$store.getters.getAllAnswers);
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    watch: {},
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+        this.currentIndex = this.currentProblemIndex;
+        this.learningIdsLength = this.$store.state.currentLearningIds.length;
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    components: {
+        BookInfo: BookInfo,
+    },
+    mounted() {
+        this.getProblem();
+    },
 };
 </script>
 <style scoped>
 input.yellow-bd {
-  width: 76px;
+    width: 76px;
 }
 
 .dropGroup button {
-  position: relative;
+    position: relative;
 }
 
 .dropGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .dragGroup {
-  background-color: #f2f4f8;
-  padding: 30px 50px;
-  width: max-content;
-  border-radius: 20px;
+    background-color: #f2f4f8;
+    padding: 30px 50px;
+    width: max-content;
+    border-radius: 20px;
 }
 
 .dragGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .submit-button {
-  position: absolute;
-  background-color: #ffba08;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 28px;
-  font-family: "ONEMobilePOPOTF";
-  right: 5rem;
-  bottom: 3rem;
+    position: absolute;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
+    right: 5rem;
+    bottom: 3rem;
 }
 </style>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter3_12.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/new_img/logo_v2.png" alt="" />
+    <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/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </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="previousProblem()">
-        <img
-          src="../../../../resources/img/left.png"
-          alt=""
-          :class="{ active: currentIndex === 0 }"
-        />
-      </div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step3</p>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">
-            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
-          </p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+        <div class="title-box mb25 flex align-center mt40">
+            <BookInfo />
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step3</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+                    <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
-        </div>
+                </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 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="dragGroup mt40">
+                        <div class="flex justify-center" style="gap: 20px">
+                            <div class="dropContainer" id="sourceContainer">
+                                <button
+                                    v-for="(word, index) in question"
+                                    :key="index"
+                                    draggable="true"
+                                    @dragstart="onDragStart($event, word, index)"
+                                >
+                                    <p>{{ word }}</p>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="dropContainer flex align-center justify-center mt30" id="targetContainer">
+                        <div
+                            class="dropSlot"
+                            v-for="(slot, index) in questionLength"
+                            :key="index"
+                            @dragover.prevent
+                            @drop="onDrop($event, index)"
+                        >
+                            <div
+                                class="dropSlot-inner"
+                                draggable="true"
+                                @dragstart="onDragStart($event, userAnswer[index], index)"
+                            >
+                                <div class="dropSlot-inner">
+                                    <div v-if="userAnswer[index]" class="dropped-char">
+                                        {{ userAnswer[index] }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
-            </div>
-          </div>
-          <div class="dragGroup mt40">
-            <div class="flex justify-center" style="gap: 20px">
-              <div class="dropContainer" id="sourceContainer">
-                <button
-                  v-for="(word, index) in question"
-                  :key="index"
-                  draggable="true"
-                  @dragstart="onDragStart($event, word, index)"
-                >
-                  <p>{{ word }}</p>
+                <button class="submit-button" @click="handleSubmit()" v-if="currentIndex === learningIdsLength - 1">
+                    제출하기
                 </button>
-              </div>
+                <button class="submit-button" @click="nextProblem()" v-else>다음 문제로</button>
             </div>
-          </div>
-          <div
-            class="dropContainer flex align-center justify-center mt30"
-            id="targetContainer"
-          >
-            <div
-              class="dropSlot"
-              v-for="(slot, index) in questionLength"
-              :key="index"
-              @dragover.prevent
-              @drop="onDrop($event, index)"
-            >
-              <div
-                class="dropSlot-inner"
-                draggable="true"
-                @dragstart="onDragStart($event, userAnswer[index], index)"
-              >
-                <div class="dropSlot-inner">
-                  <div v-if="userAnswer[index]" class="dropped-char">
-                    {{ userAnswer[index] }}
-                  </div>
-                </div>
-              </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
             </div>
-          </div>
         </div>
-        <button
-          class="submit-button"
-          @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1"
-        >
-          제출하기
-        </button>
-        <button class="submit-button" @click="nextProblem()" v-else>
-          다음 문제로
-        </button>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      timer: "00",
-      question: [`don't`, "banana", "i", "like"],
-      questionLength: null,
-      answer: null,
+    data() {
+        return {
+            timer: '00',
+            question: [`don't`, 'banana', 'i', 'like'],
+            questionLength: null,
+            answer: null,
 
-      userAnswer: [], // 초기화 시 빈 배열로 설정
-      draggedChar: null, // 드래그한 문자를 임시로 저장
-      draggedCharIndex: null, // 드래그한 문자의 인덱스 저장
-      dataList: [],
-      problemDetail: [],
-      currentIndex: null,
-      learningIdsLength: null,
-    };
-  },
-  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);
-    },
-    initializeAnswer() {
-      this.questionLength = this.question.length;
-      this.userAnswer = new Array(this.questionLength).fill(null); // userAnswer 배열을 question 길이만큼 초기화
-    },
-    // 드래그 시작 시 호출
-    onDragStart(event, char, index) {
-      this.draggedChar = char;
-      this.draggedCharIndex = index;
-    },
-    // 드롭 시 호출
-    onDrop(event, index) {
-      if (!this.userAnswer[index]) {
-        // 해당 슬롯이 비어있는 경우에만 드롭
-        this.userAnswer.splice(index, 1, this.draggedChar); // userAnswer에 드래그한 문자 추가
-        this.draggedChar = null;
-        this.draggedCharIndex = null;
-      }
-    },
-    handleSubmit() {
-      const userConfirmed = window.confirm("제출 하시겠습니까?");
-      if (userConfirmed) {
-        const problemData = {
-          prblmInfo: this.currentLearningId,
-          prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton,
+            userAnswer: [], // 초기화 시 빈 배열로 설정
+            draggedChar: null, // 드래그한 문자를 임시로 저장
+            draggedCharIndex: null, // 드래그한 문자의 인덱스 저장
+            dataList: [],
+            problemDetail: [],
+            currentIndex: null,
+            learningIdsLength: null,
         };
-
-        const answerData = {
-          prblmId: this.currentLearningId.prblm_id,
-          prblmAns: this.selectedButton,
-          stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1,
-        };
-
-        this.$store.dispatch("saveProblemData", problemData);
-        this.$store.dispatch("saveProblemAttempt", answerData);
-
-        console.log(this.$store.getters.getAllProblems);
-        console.log(this.$store.getters.getAllAnswers);
-
-        axios({
-          url: "problemLog/insertProblemLog.json",
-          method: "post",
-          headers: {
-            "Content-Type": "application/json; charset=UTF-8",
-          },
-          data: this.$store.getters.getAllAnswers,
-        })
-          .then(function (res) {
-            console.log("problem - response : ", res.data);
-            this.goToPage("Chapter4");
-          })
-          .catch(function (error) {
-            console.log("problem - error : ", error);
-          });
-      } else {
-        console.log("Submission canceled by the user.");
-      }
     },
-    getProblem() {
-      const vm = this;
-      const prblmId = this.currentLearningId.prblm_id;
-      axios({
-        url: "problem/problemInfo.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
+    methods: {
+        goToPage(page) {
+            this.$router.push({ name: page });
         },
-        data: {
-          prblmId: prblmId,
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
         },
-      })
-        .then(function (res) {
-          console.log("problem - response : ", res.data);
-          vm.dataList = res.data.problem;
-          vm.problemDetail = res.data.problemDetail;
-        })
-        .catch(function (error) {
-          console.log("problem - error : ", error);
-        });
-    },
-    nextProblem() {
-      const problemData = {
-        prblmInfo: this.currentLearningId,
-        prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton,
-      };
-      const answerData = {
-        prblmId: this.currentLearningId.prblm_id,
-        prblmAns: this.selectedButton,
-        stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1,
-      };
-      this.$store.dispatch("saveProblemData", problemData);
-      this.$store.dispatch("saveProblemAttempt", answerData);
-      console.log(this.$store.getters.getAllProblems);
-      console.log(this.$store.getters.getAllAnswers);
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
+        initializeAnswer() {
+            this.questionLength = this.question.length;
+            this.userAnswer = new Array(this.questionLength).fill(null); // userAnswer 배열을 question 길이만큼 초기화
+        },
+        // 드래그 시작 시 호출
+        onDragStart(event, char, index) {
+            this.draggedChar = char;
+            this.draggedCharIndex = index;
+        },
+        // 드롭 시 호출
+        onDrop(event, index) {
+            if (!this.userAnswer[index]) {
+                // 해당 슬롯이 비어있는 경우에만 드롭
+                this.userAnswer.splice(index, 1, this.draggedChar); // userAnswer에 드래그한 문자 추가
+                this.draggedChar = null;
+                this.draggedCharIndex = null;
+            }
+        },
+        handleSubmit() {
+            const userConfirmed = window.confirm('제출 하시겠습니까?');
+            if (userConfirmed) {
+                const problemData = {
+                    prblmInfo: this.currentLearningId,
+                    prblmNumber: this.currentProblemIndex,
+                    prblmAns: this.selectedButton,
+                };
 
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-  },
-  watch: {},
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-    this.currentIndex = this.currentProblemIndex;
-    this.learningIdsLength = this.$store.state.currentLearningIds.length;
+                const answerData = {
+                    prblmId: this.currentLearningId.prblm_id,
+                    prblmAns: this.selectedButton,
+                    stdId: this.$store.getters.getStdId,
+                    prblmLogAnsCnt: 1,
+                };
 
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  components: {},
-  mounted() {
-    this.getProblem();
-    this.initializeAnswer();
-  },
+                this.$store.dispatch('saveProblemData', problemData);
+                this.$store.dispatch('saveProblemAttempt', answerData);
+
+                console.log(this.$store.getters.getAllProblems);
+                console.log(this.$store.getters.getAllAnswers);
+
+                axios({
+                    url: 'problemLog/insertProblemLog.json',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': 'application/json; charset=UTF-8',
+                    },
+                    data: this.$store.getters.getAllAnswers,
+                })
+                    .then(function (res) {
+                        console.log('problem - response : ', res.data);
+                        this.goToPage('Chapter4');
+                    })
+                    .catch(function (error) {
+                        console.log('problem - error : ', error);
+                    });
+            } else {
+                console.log('Submission canceled by the user.');
+            }
+        },
+        getProblem() {
+            const vm = this;
+            const prblmId = this.currentLearningId.prblm_id;
+            axios({
+                url: 'problem/problemInfo.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    prblmId: prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log('problem - response : ', res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+                })
+                .catch(function (error) {
+                    console.log('problem - error : ', error);
+                });
+        },
+        nextProblem() {
+            const problemData = {
+                prblmInfo: this.currentLearningId,
+                prblmNumber: this.currentProblemIndex,
+                prblmAns: this.selectedButton,
+            };
+            const answerData = {
+                prblmId: this.currentLearningId.prblm_id,
+                prblmAns: this.selectedButton,
+                stdId: this.$store.getters.getStdId,
+                prblmLogAnsCnt: 1,
+            };
+            this.$store.dispatch('saveProblemData', problemData);
+            this.$store.dispatch('saveProblemAttempt', answerData);
+            console.log(this.$store.getters.getAllProblems);
+            console.log(this.$store.getters.getAllAnswers);
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    watch: {},
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+        this.currentIndex = this.currentProblemIndex;
+        this.learningIdsLength = this.$store.state.currentLearningIds.length;
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    components: {
+        BookInfo: BookInfo,
+    },
+    mounted() {
+        this.getProblem();
+        this.initializeAnswer();
+    },
 };
 </script>
 <style scoped>
 .textbox {
-  height: 60px;
+    height: 60px;
 }
 
 .textbox p {
-  font-size: 28px;
-  font-weight: bold;
-  line-height: 65px;
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 65px;
 }
 
 .dropGroup button {
-  position: relative;
+    position: relative;
 }
 
 .dropGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .dragGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 #sourceContainer {
-  margin-top: 100px;
-  display: flex;
-  flex-direction: row;
-  gap: 230px;
+    margin-top: 100px;
+    display: flex;
+    flex-direction: row;
+    gap: 230px;
 }
 
 #targetContainer {
-  margin-top: 15rem;
-  height: 100px;
-  display: flex;
-  flex-direction: row;
-  gap: 80px;
+    margin-top: 15rem;
+    height: 100px;
+    display: flex;
+    flex-direction: row;
+    gap: 80px;
 }
 
 #targetContainer .dropSlot {
-  width: 250px;
-  height: 70px;
-  padding: 10px;
-  border-bottom: 8px solid #ffba08;
+    width: 250px;
+    height: 70px;
+    padding: 10px;
+    border-bottom: 8px solid #ffba08;
 }
 
 #targetContainer .dropSlot .dropped-char {
-  font-size: 48px;
-  font-family: "ONEMobilePOPOTF";
+    font-size: 48px;
+    font-family: 'ONEMobilePOPOTF';
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .submit-button {
-  position: absolute;
-  background-color: #ffba08;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 28px;
-  font-family: "ONEMobilePOPOTF";
-  right: 5rem;
-  bottom: 3rem;
+    position: absolute;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
+    right: 5rem;
+    bottom: 3rem;
 }
 </style>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter3_13.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/new_img/logo_v2.png" alt="" />
+    <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/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </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="previousProblem()">
-        <img
-          src="../../../../resources/img/left.png"
-          alt=""
-          :class="{ active: currentIndex === 0 }"
-        />
-      </div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step3</p>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">
-            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
-          </p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+        <div class="title-box mb25 flex align-center mt40">
+            <BookInfo />
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step3</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</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="flex justify-center">
-            <div class="flex justify-between align-center" style="width: 50%">
-              <!-- SVG Container for Drawing Lines -->
-              <svg
-                class="line-container"
-                xmlns="http://www.w3.org/2000/svg"
-                :style="{ width: svgWidth, height: svgHeight }"
-              >
-                <line
-                  v-for="(pair, index) in pairs"
-                  :key="'line-' + index"
-                  :x1="pair.leftPos.x"
-                  :y1="pair.leftPos.y"
-                  :x2="pair.rightPos.x"
-                  :y2="pair.rightPos.y"
-                  stroke="blue"
-                  stroke-width="2"
-                />
-              </svg>
 
-              <div class="pickGroup left">
-                <div>
-                  <article
-                    class="flex align-center justify-between mb20"
-                    style="gap: 60px"
-                    v-for="(image, index) in images"
-                    :key="'left-' + index"
-                  >
-                    <img :src="image.src" :alt="image.alt" />
-                    <div>
-                      <button
-                        class="blue-c"
-                        @click="selectLeft(index, $event)"
-                      ></button>
+                <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>
-                  </article>
-                </div>
-              </div>
+                    <div class="flex justify-center">
+                        <div class="flex justify-between align-center" style="width: 50%">
+                            <!-- SVG Container for Drawing Lines -->
+                            <svg
+                                class="line-container"
+                                xmlns="http://www.w3.org/2000/svg"
+                                :style="{ width: svgWidth, height: svgHeight }"
+                            >
+                                <line
+                                    v-for="(pair, index) in pairs"
+                                    :key="'line-' + index"
+                                    :x1="pair.leftPos.x"
+                                    :y1="pair.leftPos.y"
+                                    :x2="pair.rightPos.x"
+                                    :y2="pair.rightPos.y"
+                                    stroke="blue"
+                                    stroke-width="2"
+                                />
+                            </svg>
 
-              <div class="pickGroup right">
-                <article
-                  v-for="(word, index) in problemDetail"
-                  :key="index"
-                  class="flex align-center justify-start mb20"
-                  style="gap: 30px"
-                >
-                  <button
-                    class="blue-c"
-                    @click="selectRight(index, $event)"
-                  ></button>
-                  <p class="word">{{ word.prblmDtlExpln }}</p>
-                </article>
-              </div>
+                            <div class="pickGroup left">
+                                <div>
+                                    <article
+                                        class="flex align-center justify-between mb20"
+                                        style="gap: 60px"
+                                        v-for="(image, index) in images"
+                                        :key="'left-' + index"
+                                    >
+                                        <img :src="image.src" :alt="image.alt" />
+                                        <div>
+                                            <button class="blue-c" @click="selectLeft(index, $event)"></button>
+                                        </div>
+                                    </article>
+                                </div>
+                            </div>
+
+                            <div class="pickGroup right">
+                                <article
+                                    v-for="(word, index) in problemDetail"
+                                    :key="index"
+                                    class="flex align-center justify-start mb20"
+                                    style="gap: 30px"
+                                >
+                                    <button class="blue-c" @click="selectRight(index, $event)"></button>
+                                    <p class="word">{{ word.prblmDtlExpln }}</p>
+                                </article>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <button class="submit-button" @click="handleSubmit()" v-if="currentIndex === learningIdsLength - 1">
+                    제출하기
+                </button>
+                <button class="submit-button" @click="nextProblem()" v-else>다음 문제로</button>
             </div>
-          </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
         </div>
-        <button
-          class="submit-button"
-          @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1"
-        >
-          제출하기
-        </button>
-        <button class="submit-button" @click="nextProblem()" v-else>
-          다음 문제로
-        </button>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      timer: "00",
-      question: ["Australia", "Brazil", "China"],
-      images: [
-        { src: "client/resources/img/img121_62s.png", alt: "Australia" },
-        { src: "client/resources/img/img122_62s.png", alt: "Brazil" },
-        { src: "client/resources/img/img123_62s.png", alt: "China" },
-      ],
+    data() {
+        return {
+            timer: '00',
+            question: ['Australia', 'Brazil', 'China'],
+            images: [
+                { src: 'client/resources/img/img121_62s.png', alt: 'Australia' },
+                { src: 'client/resources/img/img122_62s.png', alt: 'Brazil' },
+                { src: 'client/resources/img/img123_62s.png', alt: 'China' },
+            ],
 
-      selectedLeft: null, // 왼쪽에서 선택된 인덱스 저장
-      selectedRight: null, // 오른쪽에서 선택된 인덱스 저장
-      pairs: [], // 매칭된 쌍을 저장
-      svgWidth: "100%", // SVG의 너비
-      svgHeight: "100%", // SVG의 높이
-      dataList: [],
-      problemDetail: [],
-      currentIndex: null,
-      learningIdsLength: null,
-    };
-  },
-  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);
-    },
-
-    selectLeft(index, event) {
-      this.selectedLeft = { index, element: event.target };
-      this.checkMatch(); // 매칭을 시도
-    },
-    selectRight(index, event) {
-      this.selectedRight = { index, element: event.target };
-      this.checkMatch(); // 매칭을 시도
-    },
-    checkMatch() {
-      if (this.selectedLeft !== null && this.selectedRight !== null) {
-        // 매칭 성공 시 좌표를 계산하여 저장
-        const leftPos = this.getElementPosition(this.selectedLeft.element);
-        const rightPos = this.getElementPosition(this.selectedRight.element);
-
-        this.pairs.push({
-          left: this.selectedLeft.index,
-          right: this.selectedRight.index,
-          leftPos,
-          rightPos,
-        });
-
-        // 매칭이 된 후 선택 해제
-        this.selectedLeft = null;
-        this.selectedRight = null;
-      }
-    },
-    getElementPosition(element) {
-      const rect = element.getBoundingClientRect();
-      return {
-        x: rect.left + rect.width / 2,
-        y: rect.top + rect.height / 2,
-      };
-    },
-    handleSubmit() {
-      const userConfirmed = window.confirm("제출 하시겠습니까?");
-      if (userConfirmed) {
-        const problemData = {
-          prblmInfo: this.currentLearningId,
-          prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton,
+            selectedLeft: null, // 왼쪽에서 선택된 인덱스 저장
+            selectedRight: null, // 오른쪽에서 선택된 인덱스 저장
+            pairs: [], // 매칭된 쌍을 저장
+            svgWidth: '100%', // SVG의 너비
+            svgHeight: '100%', // SVG의 높이
+            dataList: [],
+            problemDetail: [],
+            currentIndex: null,
+            learningIdsLength: null,
         };
-
-        const answerData = {
-          prblmId: this.currentLearningId.prblm_id,
-          prblmAns: this.selectedButton,
-          stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1,
-        };
-
-        this.$store.dispatch("saveProblemData", problemData);
-        this.$store.dispatch("saveProblemAttempt", answerData);
-
-        console.log(this.$store.getters.getAllProblems);
-        console.log(this.$store.getters.getAllAnswers);
-
-        axios({
-          url: "problemLog/insertProblemLog.json",
-          method: "post",
-          headers: {
-            "Content-Type": "application/json; charset=UTF-8",
-          },
-          data: this.$store.getters.getAllAnswers,
-        })
-          .then(function (res) {
-            console.log("problem - response : ", res.data);
-            this.goToPage("Chapter4");
-          })
-          .catch(function (error) {
-            console.log("problem - error : ", error);
-          });
-      } else {
-        console.log("Submission canceled by the user.");
-      }
     },
-    updateSVGSize() {
-      const container = document.querySelector(".position-relative");
-      if (container) {
-        this.svgWidth = `${container.clientWidth}px`;
-        this.svgHeight = `${container.clientHeight}px`;
-      }
-    },
-    getProblem() {
-      const vm = this;
-      const prblmId = this.currentLearningId.prblm_id;
-      axios({
-        url: "problem/problemInfo.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
+    methods: {
+        goToPage(page) {
+            this.$router.push({ name: page });
         },
-        data: {
-          prblmId: prblmId,
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
         },
-      })
-        .then(function (res) {
-          console.log("problem - response : ", res.data);
-          vm.dataList = res.data.problem;
-          vm.problemDetail = res.data.problemDetail;
-        })
-        .catch(function (error) {
-          console.log("problem - error : ", error);
-        });
-    },
-    nextProblem() {
-      const problemData = {
-        prblmInfo: this.currentLearningId,
-        prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton,
-      };
-      const answerData = {
-        prblmId: this.currentLearningId.prblm_id,
-        prblmAns: this.selectedButton,
-        stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1,
-      };
-      this.$store.dispatch("saveProblemData", problemData);
-      this.$store.dispatch("saveProblemAttempt", answerData);
-      console.log(this.$store.getters.getAllProblems);
-      console.log(this.$store.getters.getAllAnswers);
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
 
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-  },
-  watch: {},
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-    this.currentIndex = this.currentProblemIndex;
-    this.learningIdsLength = this.$store.state.currentLearningIds.length;
+        selectLeft(index, event) {
+            this.selectedLeft = { index, element: event.target };
+            this.checkMatch(); // 매칭을 시도
+        },
+        selectRight(index, event) {
+            this.selectedRight = { index, element: event.target };
+            this.checkMatch(); // 매칭을 시도
+        },
+        checkMatch() {
+            if (this.selectedLeft !== null && this.selectedRight !== null) {
+                // 매칭 성공 시 좌표를 계산하여 저장
+                const leftPos = this.getElementPosition(this.selectedLeft.element);
+                const rightPos = this.getElementPosition(this.selectedRight.element);
 
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  components: {},
-  mounted() {
-    this.getProblem();
-    this.updateSVGSize();
-    window.addEventListener("resize", this.updateSVGSize);
-  },
-  beforeDestroy() {
-    window.removeEventListener("resize", this.updateSVGSize);
-  },
+                this.pairs.push({
+                    left: this.selectedLeft.index,
+                    right: this.selectedRight.index,
+                    leftPos,
+                    rightPos,
+                });
+
+                // 매칭이 된 후 선택 해제
+                this.selectedLeft = null;
+                this.selectedRight = null;
+            }
+        },
+        getElementPosition(element) {
+            const rect = element.getBoundingClientRect();
+            return {
+                x: rect.left + rect.width / 2,
+                y: rect.top + rect.height / 2,
+            };
+        },
+        handleSubmit() {
+            const userConfirmed = window.confirm('제출 하시겠습니까?');
+            if (userConfirmed) {
+                const problemData = {
+                    prblmInfo: this.currentLearningId,
+                    prblmNumber: this.currentProblemIndex,
+                    prblmAns: this.selectedButton,
+                };
+
+                const answerData = {
+                    prblmId: this.currentLearningId.prblm_id,
+                    prblmAns: this.selectedButton,
+                    stdId: this.$store.getters.getStdId,
+                    prblmLogAnsCnt: 1,
+                };
+
+                this.$store.dispatch('saveProblemData', problemData);
+                this.$store.dispatch('saveProblemAttempt', answerData);
+
+                console.log(this.$store.getters.getAllProblems);
+                console.log(this.$store.getters.getAllAnswers);
+
+                axios({
+                    url: 'problemLog/insertProblemLog.json',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': 'application/json; charset=UTF-8',
+                    },
+                    data: this.$store.getters.getAllAnswers,
+                })
+                    .then(function (res) {
+                        console.log('problem - response : ', res.data);
+                        this.goToPage('Chapter4');
+                    })
+                    .catch(function (error) {
+                        console.log('problem - error : ', error);
+                    });
+            } else {
+                console.log('Submission canceled by the user.');
+            }
+        },
+        updateSVGSize() {
+            const container = document.querySelector('.position-relative');
+            if (container) {
+                this.svgWidth = `${container.clientWidth}px`;
+                this.svgHeight = `${container.clientHeight}px`;
+            }
+        },
+        getProblem() {
+            const vm = this;
+            const prblmId = this.currentLearningId.prblm_id;
+            axios({
+                url: 'problem/problemInfo.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    prblmId: prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log('problem - response : ', res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+                })
+                .catch(function (error) {
+                    console.log('problem - error : ', error);
+                });
+        },
+        nextProblem() {
+            const problemData = {
+                prblmInfo: this.currentLearningId,
+                prblmNumber: this.currentProblemIndex,
+                prblmAns: this.selectedButton,
+            };
+            const answerData = {
+                prblmId: this.currentLearningId.prblm_id,
+                prblmAns: this.selectedButton,
+                stdId: this.$store.getters.getStdId,
+                prblmLogAnsCnt: 1,
+            };
+            this.$store.dispatch('saveProblemData', problemData);
+            this.$store.dispatch('saveProblemAttempt', answerData);
+            console.log(this.$store.getters.getAllProblems);
+            console.log(this.$store.getters.getAllAnswers);
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    watch: {},
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+        this.currentIndex = this.currentProblemIndex;
+        this.learningIdsLength = this.$store.state.currentLearningIds.length;
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    components: {
+        BookInfo: BookInfo,
+    },
+    mounted() {
+        this.getProblem();
+        this.updateSVGSize();
+        window.addEventListener('resize', this.updateSVGSize);
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.updateSVGSize);
+    },
 };
 </script>
 <style scoped>
 .textbox {
-  height: 60px;
+    height: 60px;
 }
 
 .textbox p {
-  font-size: 28px;
-  font-weight: bold;
-  line-height: 65px;
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 65px;
 }
 
 .dropGroup button {
-  position: relative;
+    position: relative;
 }
 
 .pickGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 60px;
+    display: flex;
+    flex-direction: column;
+    gap: 60px;
 }
 
 .pickGroup .word {
-  font-size: 48px;
-  font-family: "ONEMobilePOPOTF";
+    font-size: 48px;
+    font-family: 'ONEMobilePOPOTF';
 }
 
 .dragGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .submit-button {
-  position: absolute;
-  background-color: #ffba08;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 28px;
-  font-family: "ONEMobilePOPOTF";
-  right: 5rem;
-  bottom: 3rem;
+    position: absolute;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
+    right: 5rem;
+    bottom: 3rem;
 }
 
 .position-relative {
-  position: relative;
+    position: relative;
 }
 
 .line-container {
-  position: absolute;
-  bottom: 215px;
-  right: 125px;
-  pointer-events: none;
+    position: absolute;
+    bottom: 215px;
+    right: 125px;
+    pointer-events: none;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .blue-c {
-  width: 20px;
-  height: 20px;
-  background-color: blue;
-  border-radius: 50%;
-  border: none;
-  cursor: pointer;
+    width: 20px;
+    height: 20px;
+    background-color: blue;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
 }
 </style>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter3_14.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/new_img/logo_v2.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="previousProblem()">
-        <img
-          src="../../../../resources/img/left.png"
-          alt=""
-          :class="{ active: currentIndex === 0 }"
-        />
-      </div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step3</p>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">
-            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
-          </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 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/new_img/logo_v2.png" alt="" />
                 </div>
-              </div>
-            </div>
-          </div>
-          <div class="imgGroup">
-            <img src="../../../../resources/img/img124_63s.png" alt="" />
-          </div>
-
-          <div class="dropGroup flex align-center justify-center mt30">
-            <div class="mt50">
-              <input
-                class="yellow-bd"
-                v-model="answer"
-                type="text"
-                placeholder="답을 입력하세요."
-                style="width: 50rem"
-              />
-            </div>
-          </div>
+            </router-link>
         </div>
-        <button
-          class="submit-button"
-          @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1"
-        >
-          제출하기
-        </button>
-        <button class="submit-button" @click="nextProblem()" v-else>
-          다음 문제로
-        </button>
-      </div>
-      <div class="next-btn" @click="nextProblem(answer)">
-        <img
-          src="../../../../resources/img/right.png"
-          alt=""
-          :class="{ active: currentIndex === learningIdsLength - 1 }"
-        />
-      </div>
+        <div class="title-box mb25 flex align-center mt40">
+            <BookInfo />
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step3</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</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/img124_63s.png" alt="" />
+                    </div>
+
+                    <div class="dropGroup flex align-center justify-center mt30">
+                        <div class="mt50">
+                            <input
+                                class="yellow-bd"
+                                v-model="answer"
+                                type="text"
+                                placeholder="답을 입력하세요."
+                                style="width: 50rem"
+                            />
+                        </div>
+                    </div>
+                </div>
+                <button class="submit-button" @click="handleSubmit()" v-if="currentIndex === learningIdsLength - 1">
+                    제출하기
+                </button>
+                <button class="submit-button" @click="nextProblem()" v-else>다음 문제로</button>
+            </div>
+            <div class="next-btn" @click="nextProblem(answer)">
+                <img
+                    src="../../../../resources/img/right.png"
+                    alt=""
+                    :class="{ active: currentIndex === learningIdsLength - 1 }"
+                />
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      timer: "00",
-      answer: null,
-      dataList: [],
-      problemDetail: [],
-      currentIndex: null,
-      learningIdsLength: null,
-      stdId: null,
-    };
-  },
-  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);
-    },
-    handleSubmit() {
-      const userConfirmed = window.confirm("제출 하시겠습니까?");
-      if (userConfirmed) {
-        const problemData = {
-          prblmInfo: this.currentLearningId,
-          prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton,
+    data() {
+        return {
+            timer: '00',
+            answer: null,
+            dataList: [],
+            problemDetail: [],
+            currentIndex: null,
+            learningIdsLength: null,
+            stdId: null,
         };
-
-        const answerData = {
-          prblmId: this.currentLearningId.prblm_id,
-          prblmAns: this.selectedButton,
-          stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1,
-        };
-
-        this.$store.dispatch("saveProblemData", problemData);
-        this.$store.dispatch("saveProblemAttempt", answerData);
-
-        console.log(this.$store.getters.getAllProblems);
-        console.log(this.$store.getters.getAllAnswers);
-
-        axios({
-          url: "problemLog/insertProblemLog.json",
-          method: "post",
-          headers: {
-            "Content-Type": "application/json; charset=UTF-8",
-          },
-          data: this.$store.getters.getAllAnswers,
-        })
-          .then(function (res) {
-            console.log("problem - response : ", res.data);
-            this.goToPage("Chapter4");
-          })
-          .catch(function (error) {
-            console.log("problem - error : ", error);
-          });
-      } else {
-        console.log("Submission canceled by the user.");
-      }
     },
-
-    getProblem() {
-      const vm = this;
-      const prblmId = this.currentLearningId.prblm_id;
-      axios({
-        url: "problem/problemInfo.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
+    methods: {
+        goToPage(page) {
+            this.$router.push({ name: page });
         },
-        data: {
-          prblmId: prblmId,
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
         },
-      })
-        .then(function (res) {
-          console.log("problem - response : ", res.data);
-          vm.dataList = res.data.problem;
-          vm.problemDetail = res.data.problemDetail;
-        })
-        .catch(function (error) {
-          console.log("problem - error : ", error);
-        });
-    },
-    nextProblem(answer) {
-      const problemData = {
-        prblmInfo: this.currentLearningId,
-        prblmNumber: this.currentProblemIndex,
-        prblmAns: answer,
-      };
-      const answerData = {
-        prblmId: this.currentLearningId.prblm_id,
-        prblmAns: answer,
-        stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1,
-      };
-      this.$store.dispatch("saveProblemData", problemData);
-      this.$store.dispatch("saveProblemAttempt", answerData);
-      console.log(this.$store.getters.getAllProblems);
-      console.log(this.$store.getters.getAllAnswers);
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
+        handleSubmit() {
+            const userConfirmed = window.confirm('제출 하시겠습니까?');
+            if (userConfirmed) {
+                const problemData = {
+                    prblmInfo: this.currentLearningId,
+                    prblmNumber: this.currentProblemIndex,
+                    prblmAns: this.selectedButton,
+                };
 
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-  },
-  watch: {},
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    getAllAnswers() {
-      return this.$store.getters.getAllAnswers;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-    this.currentIndex = this.currentProblemIndex;
-    this.learningIdsLength = this.$store.state.currentLearningIds.length;
+                const answerData = {
+                    prblmId: this.currentLearningId.prblm_id,
+                    prblmAns: this.selectedButton,
+                    stdId: this.$store.getters.getStdId,
+                    prblmLogAnsCnt: 1,
+                };
 
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  components: {},
-  mounted() {
-    this.getProblem();
-  },
+                this.$store.dispatch('saveProblemData', problemData);
+                this.$store.dispatch('saveProblemAttempt', answerData);
+
+                console.log(this.$store.getters.getAllProblems);
+                console.log(this.$store.getters.getAllAnswers);
+
+                axios({
+                    url: 'problemLog/insertProblemLog.json',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': 'application/json; charset=UTF-8',
+                    },
+                    data: this.$store.getters.getAllAnswers,
+                })
+                    .then(function (res) {
+                        console.log('problem - response : ', res.data);
+                        this.goToPage('Chapter4');
+                    })
+                    .catch(function (error) {
+                        console.log('problem - error : ', error);
+                    });
+            } else {
+                console.log('Submission canceled by the user.');
+            }
+        },
+
+        getProblem() {
+            const vm = this;
+            const prblmId = this.currentLearningId.prblm_id;
+            axios({
+                url: 'problem/problemInfo.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    prblmId: prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log('problem - response : ', res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+                })
+                .catch(function (error) {
+                    console.log('problem - error : ', error);
+                });
+        },
+        nextProblem(answer) {
+            const problemData = {
+                prblmInfo: this.currentLearningId,
+                prblmNumber: this.currentProblemIndex,
+                prblmAns: answer,
+            };
+            const answerData = {
+                prblmId: this.currentLearningId.prblm_id,
+                prblmAns: answer,
+                stdId: this.$store.getters.getStdId,
+                prblmLogAnsCnt: 1,
+            };
+            this.$store.dispatch('saveProblemData', problemData);
+            this.$store.dispatch('saveProblemAttempt', answerData);
+            console.log(this.$store.getters.getAllProblems);
+            console.log(this.$store.getters.getAllAnswers);
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    watch: {},
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        getAllAnswers() {
+            return this.$store.getters.getAllAnswers;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+        this.currentIndex = this.currentProblemIndex;
+        this.learningIdsLength = this.$store.state.currentLearningIds.length;
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    components: {
+        BookInfo: BookInfo,
+    },
+    mounted() {
+        this.getProblem();
+    },
 };
 </script>
 <style scoped>
 .textbox {
-  height: 60px;
+    height: 60px;
 }
 
 .textbox p {
-  font-size: 28px;
-  font-weight: bold;
-  line-height: 65px;
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 65px;
 }
 
 .dropGroup button {
-  position: relative;
+    position: relative;
 }
 
 .dropGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .dragGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .submit-button {
-  position: absolute;
-  background-color: #ffba08;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 28px;
-  font-family: "ONEMobilePOPOTF";
-  right: 5rem;
-  bottom: 3rem;
+    position: absolute;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
+    right: 5rem;
+    bottom: 3rem;
 }
 </style>

7732467

1533a48

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

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

+++ client/views/pages/main/Chapter/Chapter3_15.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/new_img/logo_v2.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="previousProblem()">
-        <img
-          src="../../../../resources/img/left.png"
-          alt=""
-          :class="{ active: currentIndex === 0 }"
-        />
-      </div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step3</p>
-        <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">
-            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
-          </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 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/new_img/logo_v2.png" alt="" />
                 </div>
-              </div>
-            </div>
-          </div>
-          <div class="imgGroup">
-            <img src="../../../../resources/img/img125_64s.png" alt="" />
-          </div>
-
-          <div class="dropGroup flex align-center justify-center mt70">
-            <img src="../../../../resources/img/btn18_64s_normal.png" alt="" />
-          </div>
+            </router-link>
         </div>
+        <div class="title-box mb25 flex align-center mt40">
+            <BookInfo />
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="previousProblem()">
+                <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step3</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+                    <button>
+                        <img src="../../../../resources/img/btn10_s.png" alt="" />
+                    </button>
+                </div>
 
-        <button
-          class="submit-button"
-          @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1"
-        >
-          제출하기
-        </button>
-        <button class="submit-button" @click="nextProblem()" v-else>
-          다음 문제로
-        </button>
-      </div>
-      <div class="next-btn" @click="nextProblem()">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </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/img125_64s.png" alt="" />
+                    </div>
+
+                    <div class="dropGroup flex align-center justify-center mt70">
+                        <img src="../../../../resources/img/btn18_64s_normal.png" alt="" />
+                    </div>
+                </div>
+
+                <button class="submit-button" @click="handleSubmit()" v-if="currentIndex === learningIdsLength - 1">
+                    제출하기
+                </button>
+                <button class="submit-button" @click="nextProblem()" v-else>다음 문제로</button>
+            </div>
+            <div class="next-btn" @click="nextProblem()">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios';
+import BookInfo from '../../../component/BookInfo.vue';
 export default {
-  data() {
-    return {
-      timer: "00",
-      dataList: [],
-      problemDetail: [],
-      currentIndex: null,
-      learningIdsLength: null,
-    };
-  },
-  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);
-    },
-
-    handleSubmit() {
-      const userConfirmed = window.confirm("제출 하시겠습니까?");
-      if (userConfirmed) {
-        const problemData = {
-          prblmInfo: this.currentLearningId,
-          prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton,
+    data() {
+        return {
+            timer: '00',
+            dataList: [],
+            problemDetail: [],
+            currentIndex: null,
+            learningIdsLength: null,
         };
-
-        const answerData = {
-          prblmId: this.currentLearningId.prblm_id,
-          prblmAns: this.selectedButton,
-          stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1,
-        };
-
-        this.$store.dispatch("saveProblemData", problemData);
-        this.$store.dispatch("saveProblemAttempt", answerData);
-
-        console.log(this.$store.getters.getAllProblems);
-        console.log(this.$store.getters.getAllAnswers);
-
-        axios({
-          url: "problemLog/insertProblemLog.json",
-          method: "post",
-          headers: {
-            "Content-Type": "application/json; charset=UTF-8",
-          },
-          data: this.$store.getters.getAllAnswers,
-        })
-          .then(function (res) {
-            console.log("problem - response : ", res.data);
-            this.goToPage("Chapter4");
-          })
-          .catch(function (error) {
-            console.log("problem - error : ", error);
-          });
-      } else {
-        console.log("Submission canceled by the user.");
-      }
     },
-    getProblem() {
-      const vm = this;
-      const prblmId = this.currentLearningId.prblm_id;
-      axios({
-        url: "problem/problemInfo.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
+    methods: {
+        goToPage(page) {
+            this.$router.push({ name: page });
         },
-        data: {
-          prblmId: prblmId,
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
         },
-      })
-        .then(function (res) {
-          console.log("problem - response : ", res.data);
-          vm.dataList = res.data.problem;
-          vm.problemDetail = res.data.problemDetail;
-        })
-        .catch(function (error) {
-          console.log("problem - error : ", error);
-        });
-    },
-    nextProblem() {
-      const problemData = {
-        prblmInfo: this.currentLearningId,
-        prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton,
-      };
-      const answerData = {
-        prblmId: this.currentLearningId.prblm_id,
-        prblmAns: this.selectedButton,
-        stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1,
-      };
-      this.$store.dispatch("saveProblemData", problemData);
-      this.$store.dispatch("saveProblemAttempt", answerData);
-      console.log(this.$store.getters.getAllProblems);
-      console.log(this.$store.getters.getAllAnswers);
-      if (
-        this.currentProblemIndex <
-        this.$store.state.currentLearningIds.length - 1
-      ) {
-        this.$store.dispatch("goToNextProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
-    previousProblem() {
-      if (this.currentProblemIndex > 0) {
-        this.$store.dispatch("goToPreviousProblem");
-        this.handleProblemDetail(this.currentLearningId);
-        this.goToPage(this.problemType);
-      }
-    },
 
-    handleProblemDetail(item) {
-      if (item.prblm_type_id === "prblm_type_001") {
-        this.problemType = "Chapter3";
-      } else if (item.prblm_type_id === "prblm_type_002") {
-        this.problemType = "Chapter3_1";
-      } else if (item.prblm_type_id === "prblm_type_003") {
-        this.problemType = "Chapter3_2";
-      } else if (item.prblm_type_id === "prblm_type_004") {
-        this.problemType = "Chapter3_3";
-      } else if (item.prblm_type_id === "prblm_type_005") {
-        this.problemType = "Chapter3_3_1";
-      } else if (item.prblm_type_id === "prblm_type_006") {
-        this.problemType = "Chapter3_4";
-      } else if (item.prblm_type_id === "prblm_type_007") {
-        this.problemType = "Chapter3_5";
-      } else if (item.prblm_type_id === "prblm_type_008") {
-        this.problemType = "Chapter3_6";
-      } else if (item.prblm_type_id === "prblm_type_009") {
-        this.problemType = "Chapter3_7";
-      } else if (item.prblm_type_id === "prblm_type_010") {
-        this.problemType = "Chapter3_8";
-      } else if (item.prblm_type_id === "prblm_type_011") {
-        this.problemType = "Chapter3_9";
-      } else if (item.prblm_type_id === "prblm_type_012") {
-        this.problemType = "Chapter3_10";
-      } else if (item.prblm_type_id === "prblm_type_013") {
-        this.problemType = "Chapter3_11";
-      } else if (item.prblm_type_id === "prblm_type_014") {
-        this.problemType = "Chapter3_12";
-      } else if (item.prblm_type_id === "prblm_type_015") {
-        this.problemType = "Chapter3_13";
-      } else if (item.prblm_type_id === "prblm_type_016") {
-        this.problemType = "Chapter3_14";
-      } else if (item.prblm_type_id === "prblm_type_017") {
-        this.problemType = "Chapter3_15";
-      } else if (item.prblm_type_id === "prblm_type_018") {
-        this.problemType = "Chapter2_8";
-      } else if (item.prblm_type_id === "prblm_type_019") {
-        this.problemType = "Chapter2_7";
-      } else if (item.prblm_type_id === "prblm_type_020") {
-        this.problemType = "Chapter2_5";
-      } else if (item.prblm_type_id === "prblm_type_021") {
-        this.problemType = "Chapter2_6";
-      } else if (item.prblm_type_id === "prblm_type_022") {
-        this.problemType = "Chapter2_10";
-      } else if (item.prblm_type_id === "prblm_type_023") {
-        this.problemType = "Chapter2_11";
-      } else if (item.prblm_type_id === "prblm_type_024") {
-        this.problemType = "Chapter2_13";
-      }
-    },
-  },
-  watch: {},
-  computed: {
-    currentLearningId() {
-      return this.$store.getters.currentLearningId;
-    },
-    currentLabel() {
-      return this.$store.getters.currentLabel;
-    },
-    currentProblemIndex() {
-      return this.$store.getters.currentProblemIndex;
-    },
-    isPreviousButtonDisabled() {
-      return this.currentProblemIndex === 0;
-    },
-  },
-  created() {
-    console.log("Current Learning ID:", this.currentLearningId);
-    console.log("Current Label:", this.currentLabel);
-    console.log("Current Problem Index:", this.currentProblemIndex);
-    this.currentIndex = this.currentProblemIndex;
-    this.learningIdsLength = this.$store.state.currentLearningIds.length;
+        handleSubmit() {
+            const userConfirmed = window.confirm('제출 하시겠습니까?');
+            if (userConfirmed) {
+                const problemData = {
+                    prblmInfo: this.currentLearningId,
+                    prblmNumber: this.currentProblemIndex,
+                    prblmAns: this.selectedButton,
+                };
 
-    // Fetch or process the current problem based on `currentLearningId`
-  },
-  components: {},
-  mounted() {
-    this.getProblem();
-  },
+                const answerData = {
+                    prblmId: this.currentLearningId.prblm_id,
+                    prblmAns: this.selectedButton,
+                    stdId: this.$store.getters.getStdId,
+                    prblmLogAnsCnt: 1,
+                };
+
+                this.$store.dispatch('saveProblemData', problemData);
+                this.$store.dispatch('saveProblemAttempt', answerData);
+
+                console.log(this.$store.getters.getAllProblems);
+                console.log(this.$store.getters.getAllAnswers);
+
+                axios({
+                    url: 'problemLog/insertProblemLog.json',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': 'application/json; charset=UTF-8',
+                    },
+                    data: this.$store.getters.getAllAnswers,
+                })
+                    .then(function (res) {
+                        console.log('problem - response : ', res.data);
+                        this.goToPage('Chapter4');
+                    })
+                    .catch(function (error) {
+                        console.log('problem - error : ', error);
+                    });
+            } else {
+                console.log('Submission canceled by the user.');
+            }
+        },
+        getProblem() {
+            const vm = this;
+            const prblmId = this.currentLearningId.prblm_id;
+            axios({
+                url: 'problem/problemInfo.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    prblmId: prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log('problem - response : ', res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+                })
+                .catch(function (error) {
+                    console.log('problem - error : ', error);
+                });
+        },
+        nextProblem() {
+            const problemData = {
+                prblmInfo: this.currentLearningId,
+                prblmNumber: this.currentProblemIndex,
+                prblmAns: this.selectedButton,
+            };
+            const answerData = {
+                prblmId: this.currentLearningId.prblm_id,
+                prblmAns: this.selectedButton,
+                stdId: this.$store.getters.getStdId,
+                prblmLogAnsCnt: 1,
+            };
+            this.$store.dispatch('saveProblemData', problemData);
+            this.$store.dispatch('saveProblemAttempt', answerData);
+            console.log(this.$store.getters.getAllProblems);
+            console.log(this.$store.getters.getAllAnswers);
+            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+                this.$store.dispatch('goToNextProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+        previousProblem() {
+            if (this.currentProblemIndex > 0) {
+                this.$store.dispatch('goToPreviousProblem');
+                this.handleProblemDetail(this.currentLearningId);
+                this.goToPage(this.problemType);
+            }
+        },
+
+        handleProblemDetail(item) {
+            if (item.prblm_type_id === 'prblm_type_001') {
+                this.problemType = 'Chapter3';
+            } else if (item.prblm_type_id === 'prblm_type_002') {
+                this.problemType = 'Chapter3_1';
+            } else if (item.prblm_type_id === 'prblm_type_003') {
+                this.problemType = 'Chapter3_2';
+            } else if (item.prblm_type_id === 'prblm_type_004') {
+                this.problemType = 'Chapter3_3';
+            } else if (item.prblm_type_id === 'prblm_type_005') {
+                this.problemType = 'Chapter3_3_1';
+            } else if (item.prblm_type_id === 'prblm_type_006') {
+                this.problemType = 'Chapter3_4';
+            } else if (item.prblm_type_id === 'prblm_type_007') {
+                this.problemType = 'Chapter3_5';
+            } else if (item.prblm_type_id === 'prblm_type_008') {
+                this.problemType = 'Chapter3_6';
+            } else if (item.prblm_type_id === 'prblm_type_009') {
+                this.problemType = 'Chapter3_7';
+            } else if (item.prblm_type_id === 'prblm_type_010') {
+                this.problemType = 'Chapter3_8';
+            } else if (item.prblm_type_id === 'prblm_type_011') {
+                this.problemType = 'Chapter3_9';
+            } else if (item.prblm_type_id === 'prblm_type_012') {
+                this.problemType = 'Chapter3_10';
+            } else if (item.prblm_type_id === 'prblm_type_013') {
+                this.problemType = 'Chapter3_11';
+            } else if (item.prblm_type_id === 'prblm_type_014') {
+                this.problemType = 'Chapter3_12';
+            } else if (item.prblm_type_id === 'prblm_type_015') {
+                this.problemType = 'Chapter3_13';
+            } else if (item.prblm_type_id === 'prblm_type_016') {
+                this.problemType = 'Chapter3_14';
+            } else if (item.prblm_type_id === 'prblm_type_017') {
+                this.problemType = 'Chapter3_15';
+            } else if (item.prblm_type_id === 'prblm_type_018') {
+                this.problemType = 'Chapter2_8';
+            } else if (item.prblm_type_id === 'prblm_type_019') {
+                this.problemType = 'Chapter2_7';
+            } else if (item.prblm_type_id === 'prblm_type_020') {
+                this.problemType = 'Chapter2_5';
+            } else if (item.prblm_type_id === 'prblm_type_021') {
+                this.problemType = 'Chapter2_6';
+            } else if (item.prblm_type_id === 'prblm_type_022') {
+                this.problemType = 'Chapter2_10';
+            } else if (item.prblm_type_id === 'prblm_type_023') {
+                this.problemType = 'Chapter2_11';
+            } else if (item.prblm_type_id === 'prblm_type_024') {
+                this.problemType = 'Chapter2_13';
+            }
+        },
+    },
+    watch: {},
+    computed: {
+        currentLearningId() {
+            return this.$store.getters.currentLearningId;
+        },
+        currentLabel() {
+            return this.$store.getters.currentLabel;
+        },
+        currentProblemIndex() {
+            return this.$store.getters.currentProblemIndex;
+        },
+        isPreviousButtonDisabled() {
+            return this.currentProblemIndex === 0;
+        },
+    },
+    created() {
+        console.log('Current Learning ID:', this.currentLearningId);
+        console.log('Current Label:', this.currentLabel);
+        console.log('Current Problem Index:', this.currentProblemIndex);
+        this.currentIndex = this.currentProblemIndex;
+        this.learningIdsLength = this.$store.state.currentLearningIds.length;
+
+        // Fetch or process the current problem based on `currentLearningId`
+    },
+    components: {
+        BookInfo: BookInfo,
+    },
+    mounted() {
+        this.getProblem();
+    },
 };
 </script>
 <style scoped>
 .textbox {
-  height: 60px;
+    height: 60px;
 }
 
 .textbox p {
-  font-size: 28px;
-  font-weight: bold;
-  line-height: 65px;
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 65px;
 }
 
 .dropGroup button {
-  position: relative;
+    position: relative;
 }
 
 .dropGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .dragGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .pre-btn img.active {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .submit-button {
-  position: absolute;
-  background-color: #ffba08;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 28px;
-  font-family: "ONEMobilePOPOTF";
-  right: 5rem;
-  bottom: 3rem;
+    position: absolute;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
+    right: 5rem;
+    bottom: 3rem;
 }
 </style>

7732467

1533a48

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

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

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