Commit @44fac4ed3cf91ee213afd321d4cb17f4077d55eb

박민혁 2024-08-23

Merge branch 'master' of http://210.180.118.83/jichoi/lms_front

@44fac4ed3cf91ee213afd321d4cb17f4077d55eb

3f206aa

44fac4e

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

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

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


       <button class="completeBtn" @click="complete">학습 종료</button>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter1_3')">
+    
+      <div class="pre-btn" @click="goToPage('Chapter1_3')"> <!-- @click="goToPrevPage" -->
         <img src="../../../../resources/img/left.png" alt="" />
       </div>
       <div class="content title-box">

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

     return {
       wdBookId: "WORD_BOOK_000000000000042",
       wordList: [],
-      wordContentList: [],
-      wdContentId: "",
+
+      wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
+      currentWdBkIndex: 0, // 현재 단어장 인덱스
+      wdBookTypeIdState: "", // 이동할 페이지 타입 id
+      wordBookType: "", // 이동할 페이지
     };
   },
   methods: {
+    pageSetting() {
+      this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
+      this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
+      this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
+
+      // this.fetchWordList();
+    },
+
     async fetchWordList() {
       try {
         const response = await axios.post("/word/getWordsByBookId.json", {

       }
     },
 
+    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("단어장 마지막 페이지 입니다");
+      } 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 });
     },

   },
   mounted() {
     console.log("챕터2 단어장 마운트 완료");
+    // this.pageSetting();
     this.fetchWordList();
   },
 };

3f206aa

44fac4e

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

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

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


             <button class="popTxt" v-for="(item, index) in items" :key="index">
               <div class="listenGroup">
                 <img :src="item.imgSrc1" />
-                <p class="textbox"><img :src="item.imgSrc" /></p>
+                <p class="textbox"><img :src="item.imgSrc" style="height: 150px;"/></p>
               </div>
               <div
                 class="listenGroup"

 export default {
   data() {
     return {
-      items: [
-        {
-          imgSrc1: "client/resources/img/img49_s.png",
-          imgSrc2: "client/resources/img/img50_s.png",
-          imgSrc: "client/resources/img/img77_41s.png",
-          isSecondImageVisible: false,
-          title: "america",
-        },
-        {
-          imgSrc1: "client/resources/img/img49_s.png",
-          imgSrc2: "client/resources/img/img50_s.png",
-          imgSrc: "client/resources/img/img47_s.png",
-          isSecondImageVisible: false,
-          title: "airplane",
-        },
-        {
-          imgSrc1: "client/resources/img/img49_s.png",
-          imgSrc2: "client/resources/img/img50_s.png",
-          imgSrc: "client/resources/img/img75_41s.png",
-          isSecondImageVisible: false,
-          title: "cat",
-        },
-        {
-          imgSrc1: "client/resources/img/img49_s.png",
-          imgSrc2: "client/resources/img/img50_s.png",
-          imgSrc: "client/resources/img/img74_41s.png",
-          isSecondImageVisible: false,
-          title: "mountain",
-        },
-      ],
+      // items: [
+      //   {
+      //     imgSrc1: "client/resources/img/img49_s.png",
+      //     imgSrc2: "client/resources/img/img50_s.png",
+      //     imgSrc: "client/resources/img/img77_41s.png",
+      //     isSecondImageVisible: false,
+      //     title: "america",
+      //   },
+      //   {
+      //     imgSrc1: "client/resources/img/img49_s.png",
+      //     imgSrc2: "client/resources/img/img50_s.png",
+      //     imgSrc: "client/resources/img/img47_s.png",
+      //     isSecondImageVisible: false,
+      //     title: "airplane",
+      //   },
+      //   {
+      //     imgSrc1: "client/resources/img/img49_s.png",
+      //     imgSrc2: "client/resources/img/img50_s.png",
+      //     imgSrc: "client/resources/img/img75_41s.png",
+      //     isSecondImageVisible: false,
+      //     title: "cat",
+      //   },
+      //   {
+      //     imgSrc1: "client/resources/img/img49_s.png",
+      //     imgSrc2: "client/resources/img/img50_s.png",
+      //     imgSrc: "client/resources/img/img74_41s.png",
+      //     isSecondImageVisible: false,
+      //     title: "mountain",
+      //   },
+      // ],
+      items: [],
       timer: 0,
       intervalId: null,
       currentIndex: 0,

       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);
 
-      // this.fetchWordList();
+      this.fetchWordList();
     },
 
     async fetchWordList() {
-      console.log("현재 단어장 콘텐츠 인덱스: ", this.$store.getters.getCurrentWdBkIndex);
-      this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex;
-      console.log("현재 단어장 콘텐츠 인덱스에 대한 단어장 id: ", this.$store.getters.getWdBookIdList[this.currentWdBkIndex]);
+      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);
+
+          // 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() {

3f206aa

44fac4e

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

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

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


             <button class="completeBtn" @click="complete">학습 종료</button>
         </div>
         <div class="flex justify-between align-center">
-            <div class="pre-btn" @click="goToPage('Chapter2')">
+            <div class="pre-btn" @click="goToPage('Chapter2')"> <!-- @click="goToPrevPage" -->
                 <img src="../../../../resources/img/left.png" alt="" />
             </div>
             <div class="content title-box">

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

             nowWord: 'cloud',
 
             wdBookId: "WORD_BOOK_000000000000043",
+            wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
+            currentWdBkIndex: 0, // 현재 단어장 인덱스
+            wdBookTypeIdState: "", // 이동할 페이지 타입 id
+            wordBookType: "", // 이동할 페이지
         };
     },
     methods: {
+        pageSetting() {
+            this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
+            this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
+            this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
+
+            // 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("단어장 마지막 페이지 입니다");
+            } 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: 2, unit_id, book_id } });

         },
     },
     mounted() {
+        // this.pageSetting();
         this.fetchWordList();
     },
     beforeDestroy() {

3f206aa

44fac4e

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

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

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


                                 <p>{{ item.prblmDtlExpln }}</p>
                             </div>
                         </article>
-                        <!-- <article class="flex justify-center mb50" style="gap: 60px">
-                            <div class="flex" @click="handleClick(2)">
-                                <button>
-                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                    <p :class="{ active: selectedButton === 2 }">2</p>
-                                </button>
-                                <p>violin</p>
-                            </div>
-                        </article>
-                        <article class="flex justify-center" style="gap: 60px">
-                            <div class="flex" @click="handleClick(3)">
-                                <button>
-                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                    <p :class="{ active: selectedButton === 3 }">3</p>
-                                </button>
-                                <p>piano</p>
-                            </div>
-                        </article> -->
                     </div>
                 </div>
                 <button class="submit-button" @click="handleSubmit()">제출하기</button>

         },
         handleClick(answer) {
             console.log(answer)
-            this.$store.dispatch('updatePrblmAns', answer);
             this.selectedButton = answer;
-
         },
         // 제출하기 버튼
         handleSubmit() {

                 prblmAns: this.selectedButton
             }
             this.$store.dispatch('saveProblemData', problemData);
+            console.log(this.$store.getters.getAllProblems)
             if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
                 this.$store.dispatch('goToNextProblem');
                 this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


           </div>
           <div class="pickGroup">
             <div class="flex" style="gap: 250px">
-              <article class="text-ct" @click="handleClick(1)">
+              <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 === 1 ? selectedbuttonImg : buttonImg" alt="" />
+                  <img :src="selectedButton === 'A' ? selectedbuttonImg : buttonImg" alt="" />
                 </button>
               </article>
-              <article class="text-ct" @click="handleClick(2)">
+              <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 === 2 ? selectedbuttonImg : buttonImg" alt="" />
+                  <img :src="selectedButton === 'B' ? selectedbuttonImg : buttonImg" alt="" />
                 </button>
               </article>
             </div>

         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


               </div>
 
               <div class="pickGroup right">
-                <article v-for="(word, index) in question" :key="index" class="flex align-center justify-start mb20"
-                  style="gap: 30px">
+                <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 }}</p>
+                  <p class="word">{{ word.prblmDtlExpln }}</p>
                 </article>
               </div>
             </div>

         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


         </div>
         <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem(answer)"><img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
   </div>

         }
       }, 1000);
     },
-    handleSubmit() {
-      console.log("정답 : ", this.answer);
-    },
     getProblem() {
       const vm = this;
       const prblmId = this.currentLearningId.prblm_id;

           console.log("problem - error : ", error);
         });
     },
-    nextProblem() {
+    nextProblem(answer) {
       const problemData = {
         prblmImfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
+        prblmAns: answer
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


           </div>
           <div class="pickGroup mt60 flex align-center justify-center"
             style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
-            <article v-for="(detail, index) in problemDetail" :key="index"
+            <article v-for="(item, index) in problemDetail" :key="index"
               style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
-              <div class="flex align-center" @click="handleClick(item)">
+              <div class="flex align-center" @click="handleClick(item.prblmDtlExpln)">
                 <button>
                   <img src="../../../../resources/img/img136_71s.png" alt="" />
-                  <p :class="{ active: selectedButton === item }">{{ index + 1 }}</p>
+                  <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
                 </button>
-                <p>{{ detail.prblmDtlExpln }}</p>
+                <p>{{ item.prblmDtlExpln }}</p>
               </div>
             </article>
           </div>

         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


             <article v-for="(item, index) in problemDetail" :key="index"
               style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
               <div class="flex align-center">
-                <button @click="submitAnswer(item)">
+                <button @click="handleClick(item.prblmDtlExpln)">
                   <img src="../../../../resources/img/img136_71s.png" alt="" />
                   <p :class="{
-                    active: answer === item.prblmDtlExpln,
+                    active: selectedButton === item.prblmDtlExpln,
                   }">
                     {{ index + 1 }}
                   </p>

                 <p>{{ item.prblmDtlExpln }}</p>
               </div>
             </article>
-            <!-- <article style="gap: 60px; bottom: 159px; right: 559px">
-                            <div class="flex align-center">
-                                <button>
-                                    <img
-                                        src="../../../../resources/img/img136_71s.png"
-                                        alt=""
-                                    />
-                                    <p>2</p>
-                                </button>
-                                <p>b</p>
-                            </div>
-                        </article>
-                        <article style="gap: 60px; bottom: 159px; right: 559px">
-                            <div class="flex align-center">
-                                <button>
-                                    <img
-                                        src="../../../../resources/img/img136_71s.png"
-                                        alt=""
-                                    />
-                                    <p>3</p>
-                                </button>
-                                <p>c</p>
-                            </div>
-                        </article> -->
           </div>
         </div>
         <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="
-        nextProblem()
-        ">
+      <div class="next-btn" @click="nextProblem()">
         <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>

       dataList: [],
       prblmExpln: null,
       accessTime: null,
-      answer: null,
+      selectedButton: null,
     };
   },
   methods: {

       const audio = document.getElementById("audio-player");
       audio.play();
       console.log("playing");
+    },
+    handleClick(number) {
+      this.selectedButton = number;
     },
     handleSubmit() {
       console.log("정답 : ", this.answer);

         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


           <img src="../../../../resources/img/img114_57s.png" alt="" />
         </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 class="pickGroup flex align-center justify-center"
+          style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
+          <div class="pickGroup flex align-center justify-center"
+            style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
+            <article v-for="(item, index) in problemDetail" :key="index"
+              style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
+              <div class="flex align-center">
+                <button @click="handleClick(item.prblmDtlExpln)">
+                  <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()">제출하기</button>

       intervalId: null,
       dataList: [],
       problemDetail: [],
+      selectedButton: null,
     };
   },
   beforeDestroy() {

           clearInterval(this.intervalId);
         }
       }, 1000);
+    },
+    handleClick(number) {
+      this.selectedButton = number;
     },
     handleSubmit() {
       console.log("정답 : ", this.selectedIndex + 1);

         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

   left: 0;
 }
 
+.pickGroup p {
+  font-size: 34px;
+  font-weight: bold;
+}
+
+.pickGroup button {
+  position: relative;
+  margin-right: 30px;
+}
+
+.pickGroup button p {
+  font-size: 34px;
+  color: #c6c6c6;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.pickGroup button p.active {
+  color: #000000;
+}
+
 .submit-button {
   position: absolute;
   background-color: #ffba08;

3f206aa

44fac4e

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

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

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


                 <div class="flex align-center">
                   <button @click="handleCheck('O')" name="O">
                     <img src="../../../../resources/img/img136_71s.png" alt="" />
-                    <p :class="{ active: answer === 'O' }">1</p>
+                    <p :class="{ active: selectedButton === 'O' }">1</p>
                   </button>
                   <img src="../../../../resources/img/img111_56s.png" alt="" />
                 </div>

                 <div class="flex align-center">
                   <button @click="handleCheck('X')" name="X">
                     <img src="../../../../resources/img/img136_71s.png" alt="" />
-                    <p :class="{ active: answer === 'X' }">2</p>
+                    <p :class="{ active: selectedButton === 'X' }">2</p>
                   </button>
                   <img src="../../../../resources/img/img112_56s.png" alt="" />
                 </div>

         </div>
         <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="
-        nextProblem()
-        ">
+      <div class="next-btn" @click="nextProblem()">
         <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>

       dataList: [],
       prblmExpln: null,
       accessTime: null,
-      answer: null,
+      selectedButton: null,
       prblmLogAnsCnt: 0,
     };
   },

     },
 
     handleCheck(value) {
-      this.answer = value;
-      console.log(this.answer);
+      this.selectedButton = value;
+      console.log(this.selectedButton);
     },
     handleSubmit() {
-      console.log("정답 : ", this.answer);
+      console.log("정답 : ", this.selectedButton);
     },
     getProblem() {
       const vm = this;

         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

3f206aa

44fac4e

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

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

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


         prblmAns: this.selectedButton
       }
       this.$store.dispatch('saveProblemData', problemData);
+      console.log(this.$store.getters.getAllProblems)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

Add a comment

Open 0
Closed 0

List

...	...	@@ -116,6 +116,7 @@
116	116	prblmAns: this.selectedButton
117	117	}
118	118	this.$store.dispatch('saveProblemData', problemData);
	119	+ console.log(this.$store.getters.getAllProblems)
119	120	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
120	121	this.$store.dispatch('goToNextProblem');
121	122	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -115,6 +115,7 @@
115	115	prblmAns: this.selectedButton
116	116	}
117	117	this.$store.dispatch('saveProblemData', problemData);
	118	+ console.log(this.$store.getters.getAllProblems)
118	119	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
119	120	this.$store.dispatch('goToNextProblem');
120	121	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -149,6 +149,7 @@
149	149	prblmAns: this.selectedButton
150	150	}
151	151	this.$store.dispatch('saveProblemData', problemData);
	152	+ console.log(this.$store.getters.getAllProblems)
152	153	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
153	154	this.$store.dispatch('goToNextProblem');
154	155	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -54,10 +54,10 @@
54	54	</div>
55	55
56	56	<div class="pickGroup right">
57		- <article v-for="(word, index) in question" :key="index" class="flex align-center justify-start mb20"
58		- style="gap: 30px">
	57	+ <article v-for="(word, index) in problemDetail" :key="index"
	58	+ class="flex align-center justify-start mb20" style="gap: 30px">
59	59	<button class="blue-c" @click="selectRight(index, $event)"></button>
60		- <p class="word">{{ word }}</p>
	60	+ <p class="word">{{ word.prblmDtlExpln }}</p>
61	61	</article>
62	62	</div>
63	63	</div>
...	...	@@ -185,6 +185,7 @@
185	185	prblmAns: this.selectedButton
186	186	}
187	187	this.$store.dispatch('saveProblemData', problemData);
	188	+ console.log(this.$store.getters.getAllProblems)
188	189	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
189	190	this.$store.dispatch('goToNextProblem');
190	191	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -101,6 +101,7 @@
101	101	prblmAns: this.selectedButton
102	102	}
103	103	this.$store.dispatch('saveProblemData', problemData);
	104	+ console.log(this.$store.getters.getAllProblems)
104	105	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
105	106	this.$store.dispatch('goToNextProblem');
106	107	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -18,7 +18,8 @@
18	18	<button class="completeBtn" @click="complete">학습 종료</button>
19	19	</div>
20	20	<div class="flex justify-between align-center">
21		- <div class="pre-btn" @click="goToPage('Chapter1_3')">
	21	+
	22	+ <div class="pre-btn" @click="goToPage('Chapter1_3')"> <!-- @click="goToPrevPage" -->
22	23	<img src="../../../../resources/img/left.png" alt="" />
23	24	</div>
24	25	<div class="content title-box">
...	...	@@ -75,7 +76,7 @@
75	76	</div>
76	77	</div>
77	78	</div>
78		- <div class="next-btn" @click="goToPage('Chapter2_3')">
	79	+ <div class="next-btn" @click="goToPage('Chapter2_3')"> <!-- @click="goToNextPage" -->
79	80	<img src="../../../../resources/img/right.png" alt="" />
80	81	</div>
81	82	</div>
...	...	@@ -90,11 +91,22 @@
90	91	return {
91	92	wdBookId: "WORD_BOOK_000000000000042",
92	93	wordList: [],
93		- wordContentList: [],
94		- wdContentId: "",
	94	+
	95	+ wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
	96	+ currentWdBkIndex: 0, // 현재 단어장 인덱스
	97	+ wdBookTypeIdState: "", // 이동할 페이지 타입 id
	98	+ wordBookType: "", // 이동할 페이지
95	99	};
96	100	},
97	101	methods: {
	102	+ pageSetting() {
	103	+ this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
	104	+ this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
	105	+ this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
	106	+
	107	+ // this.fetchWordList();
	108	+ },
	109	+
98	110	async fetchWordList() {
99	111	try {
100	112	const response = await axios.post("/word/getWordsByBookId.json", {
...	...	@@ -126,6 +138,88 @@
126	138	}
127	139	},
128	140
	141	+ async goToPrevPage() {
	142	+ if (this.currentWdBkIndex - 1 < 0) {
	143	+ alert("단어장 첫번째 페이지 입니다");
	144	+ } else {
	145	+ this.currentWdBkIndex--;
	146	+ this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
	147	+
	148	+ try {
	149	+ const response = await axios.post("/wordbook/find.json", {
	150	+ wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
	151	+ });
	152	+ this.wdBookTypeIdState = response.data.wdBookTypeId;
	153	+ console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
	154	+
	155	+ switch (this.wdBookTypeIdState) {
	156	+ case "1":
	157	+ this.wordBookType = "Chapter2";
	158	+ break;
	159	+ case "2":
	160	+ this.wordBookType = "Chapter2_3";
	161	+ break;
	162	+ case "3":
	163	+ this.wordBookType = "Chapter2_2";
	164	+ break;
	165	+ case "4":
	166	+ this.wordBookType = "Chapter2_9";
	167	+ break;
	168	+ case "5":
	169	+ this.wordBookType = "Chapter2_4";
	170	+ break;
	171	+ default:
	172	+ this.wordBookType = null;
	173	+ }
	174	+
	175	+ this.goToPage(this.wordBookType);
	176	+ } catch (error) {
	177	+ console.error('단어장 정보 불러오는 중 오류 발생:', error);
	178	+ }
	179	+ }
	180	+ },
	181	+
	182	+ async goToNextPage() {
	183	+ if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
	184	+ alert("단어장 마지막 페이지 입니다");
	185	+ } else {
	186	+ this.currentWdBkIndex++;
	187	+ this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
	188	+
	189	+ try {
	190	+ const response = await axios.post("/wordbook/find.json", {
	191	+ wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
	192	+ });
	193	+ this.wdBookTypeIdState = response.data.wdBookTypeId;
	194	+ console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
	195	+
	196	+ switch (this.wdBookTypeIdState) {
	197	+ case "1":
	198	+ this.wordBookType = "Chapter2";
	199	+ break;
	200	+ case "2":
	201	+ this.wordBookType = "Chapter2_3";
	202	+ break;
	203	+ case "3":
	204	+ this.wordBookType = "Chapter2_2";
	205	+ break;
	206	+ case "4":
	207	+ this.wordBookType = "Chapter2_9";
	208	+ break;
	209	+ case "5":
	210	+ this.wordBookType = "Chapter2_4";
	211	+ break;
	212	+ default:
	213	+ this.wordBookType = null;
	214	+ }
	215	+
	216	+ this.goToPage(this.wordBookType);
	217	+ } catch (error) {
	218	+ console.error('단어장 정보 불러오는 중 오류 발생:', error);
	219	+ }
	220	+ }
	221	+ },
	222	+
129	223	goToPage(page) {
130	224	this.$router.push({ name: page });
131	225	},
...	...	@@ -142,6 +236,7 @@
142	236	},
143	237	mounted() {
144	238	console.log("챕터2 단어장 마운트 완료");
	239	+ // this.pageSetting();
145	240	this.fetchWordList();
146	241	},
147	242	};

...	...	@@ -45,7 +45,7 @@
45	45	<button class="popTxt" v-for="(item, index) in items" :key="index">
46	46	<div class="listenGroup">
47	47	<img :src="item.imgSrc1" />
48		- <p class="textbox"><img :src="item.imgSrc" /></p>
	48	+ <p class="textbox"><img :src="item.imgSrc" style="height: 150px;"/></p>
49	49	</div>
50	50	<div
51	51	class="listenGroup"
...	...	@@ -73,36 +73,37 @@
73	73	export default {
74	74	data() {
75	75	return {
76		- items: [
77		- {
78		- imgSrc1: "client/resources/img/img49_s.png",
79		- imgSrc2: "client/resources/img/img50_s.png",
80		- imgSrc: "client/resources/img/img77_41s.png",
81		- isSecondImageVisible: false,
82		- title: "america",
83		- },
84		- {
85		- imgSrc1: "client/resources/img/img49_s.png",
86		- imgSrc2: "client/resources/img/img50_s.png",
87		- imgSrc: "client/resources/img/img47_s.png",
88		- isSecondImageVisible: false,
89		- title: "airplane",
90		- },
91		- {
92		- imgSrc1: "client/resources/img/img49_s.png",
93		- imgSrc2: "client/resources/img/img50_s.png",
94		- imgSrc: "client/resources/img/img75_41s.png",
95		- isSecondImageVisible: false,
96		- title: "cat",
97		- },
98		- {
99		- imgSrc1: "client/resources/img/img49_s.png",
100		- imgSrc2: "client/resources/img/img50_s.png",
101		- imgSrc: "client/resources/img/img74_41s.png",
102		- isSecondImageVisible: false,
103		- title: "mountain",
104		- },
105		- ],
	76	+ // items: [
	77	+ // {
	78	+ // imgSrc1: "client/resources/img/img49_s.png",
	79	+ // imgSrc2: "client/resources/img/img50_s.png",
	80	+ // imgSrc: "client/resources/img/img77_41s.png",
	81	+ // isSecondImageVisible: false,
	82	+ // title: "america",
	83	+ // },
	84	+ // {
	85	+ // imgSrc1: "client/resources/img/img49_s.png",
	86	+ // imgSrc2: "client/resources/img/img50_s.png",
	87	+ // imgSrc: "client/resources/img/img47_s.png",
	88	+ // isSecondImageVisible: false,
	89	+ // title: "airplane",
	90	+ // },
	91	+ // {
	92	+ // imgSrc1: "client/resources/img/img49_s.png",
	93	+ // imgSrc2: "client/resources/img/img50_s.png",
	94	+ // imgSrc: "client/resources/img/img75_41s.png",
	95	+ // isSecondImageVisible: false,
	96	+ // title: "cat",
	97	+ // },
	98	+ // {
	99	+ // imgSrc1: "client/resources/img/img49_s.png",
	100	+ // imgSrc2: "client/resources/img/img50_s.png",
	101	+ // imgSrc: "client/resources/img/img74_41s.png",
	102	+ // isSecondImageVisible: false,
	103	+ // title: "mountain",
	104	+ // },
	105	+ // ],
	106	+ items: [],
106	107	timer: 0,
107	108	intervalId: null,
108	109	currentIndex: 0,
...	...	@@ -118,14 +119,44 @@
118	119	this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
119	120	this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
120	121	this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
	122	+ console.log(this.wdBookId);
121	123
122		- // this.fetchWordList();
	124	+ this.fetchWordList();
123	125	},
124	126
125	127	async fetchWordList() {
126		- console.log("현재 단어장 콘텐츠 인덱스: ", this.$store.getters.getCurrentWdBkIndex);
127		- this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex;
128		- console.log("현재 단어장 콘텐츠 인덱스에 대한 단어장 id: ", this.$store.getters.getWdBookIdList[this.currentWdBkIndex]);
	128	+ try {
	129	+ const response = await axios.post('/word/getWordsByBookId.json', {
	130	+ wdBookId: this.wdBookId,
	131	+ });
	132	+
	133	+ const wordList = response.data;
	134	+
	135	+ // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리
	136	+ const requests = wordList.map(async (word) => {
	137	+ const fileResponse = await axios.post("/file/find.json", {
	138	+ file_mng_id: word.fileMngId,
	139	+ });
	140	+
	141	+ const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
	142	+ console.log("각 단어의 fileRpath: ", fileRpath);
	143	+
	144	+ // items 배열에 새로운 항목 추가
	145	+ this.items.push({
	146	+ imgSrc1: "client/resources/img/img49_s.png",
	147	+ imgSrc2: "client/resources/img/img50_s.png",
	148	+ imgSrc: "http://165.229.169.113:9080/" + fileRpath, // 받아온 fileRpath로 이미지 설정
	149	+ isSecondImageVisible: false,
	150	+ title: word.wdNm,
	151	+ });
	152	+ });
	153	+
	154	+ // 모든 요청이 완료될 때까지 대기
	155	+ await Promise.all(requests);
	156	+
	157	+ } catch (error) {
	158	+ console.error('단어 목록을 불러오는 중 오류 발생:', error);
	159	+ }
129	160	},
130	161
131	162	async goToPrevPage() {

...	...	@@ -15,7 +15,7 @@
15	15	<button class="completeBtn" @click="complete">학습 종료</button>
16	16	</div>
17	17	<div class="flex justify-between align-center">
18		- <div class="pre-btn" @click="goToPage('Chapter2')">
	18	+ <div class="pre-btn" @click="goToPage('Chapter2')"> <!-- @click="goToPrevPage" -->
19	19	<img src="../../../../resources/img/left.png" alt="" />
20	20	</div>
21	21	<div class="content title-box">
...	...	@@ -71,7 +71,7 @@
71	71	</div>
72	72	</div>
73	73	</div>
74		- <div class="next-btn" @click="goToPage('Chapter2_2')">
	74	+ <div class="next-btn" @click="goToPage('Chapter2_2')"> <!-- @click="goToNextPage" -->
75	75	<img src="../../../../resources/img/right.png" alt="" />
76	76	</div>
77	77	</div>
...	...	@@ -106,9 +106,103 @@
106	106	nowWord: 'cloud',
107	107
108	108	wdBookId: "WORD_BOOK_000000000000043",
	109	+ wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
	110	+ currentWdBkIndex: 0, // 현재 단어장 인덱스
	111	+ wdBookTypeIdState: "", // 이동할 페이지 타입 id
	112	+ wordBookType: "", // 이동할 페이지
109	113	};
110	114	},
111	115	methods: {
	116	+ pageSetting() {
	117	+ this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
	118	+ this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
	119	+ this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
	120	+
	121	+ // this.fetchWordList();
	122	+ },
	123	+
	124	+ async goToPrevPage() {
	125	+ if (this.currentWdBkIndex - 1 < 0) {
	126	+ alert("단어장 첫번째 페이지 입니다");
	127	+ } else {
	128	+ this.currentWdBkIndex--;
	129	+ this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
	130	+
	131	+ try {
	132	+ const response = await axios.post("/wordbook/find.json", {
	133	+ wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
	134	+ });
	135	+ this.wdBookTypeIdState = response.data.wdBookTypeId;
	136	+ console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
	137	+
	138	+ switch (this.wdBookTypeIdState) {
	139	+ case "1":
	140	+ this.wordBookType = "Chapter2";
	141	+ break;
	142	+ case "2":
	143	+ this.wordBookType = "Chapter2_3";
	144	+ break;
	145	+ case "3":
	146	+ this.wordBookType = "Chapter2_2";
	147	+ break;
	148	+ case "4":
	149	+ this.wordBookType = "Chapter2_9";
	150	+ break;
	151	+ case "5":
	152	+ this.wordBookType = "Chapter2_4";
	153	+ break;
	154	+ default:
	155	+ this.wordBookType = null;
	156	+ }
	157	+
	158	+ this.goToPage(this.wordBookType);
	159	+ } catch (error) {
	160	+ console.error('단어장 정보 불러오는 중 오류 발생:', error);
	161	+ }
	162	+ }
	163	+ },
	164	+
	165	+ async goToNextPage() {
	166	+ if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
	167	+ alert("단어장 마지막 페이지 입니다");
	168	+ } else {
	169	+ this.currentWdBkIndex++;
	170	+ this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
	171	+
	172	+ try {
	173	+ const response = await axios.post("/wordbook/find.json", {
	174	+ wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
	175	+ });
	176	+ this.wdBookTypeIdState = response.data.wdBookTypeId;
	177	+ console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
	178	+
	179	+ switch (this.wdBookTypeIdState) {
	180	+ case "1":
	181	+ this.wordBookType = "Chapter2";
	182	+ break;
	183	+ case "2":
	184	+ this.wordBookType = "Chapter2_3";
	185	+ break;
	186	+ case "3":
	187	+ this.wordBookType = "Chapter2_2";
	188	+ break;
	189	+ case "4":
	190	+ this.wordBookType = "Chapter2_9";
	191	+ break;
	192	+ case "5":
	193	+ this.wordBookType = "Chapter2_4";
	194	+ break;
	195	+ default:
	196	+ this.wordBookType = null;
	197	+ }
	198	+
	199	+ this.goToPage(this.wordBookType);
	200	+ } catch (error) {
	201	+ console.error('단어장 정보 불러오는 중 오류 발생:', error);
	202	+ }
	203	+ }
	204	+ },
	205	+
112	206	complete() {
113	207	const { unit_id, book_id } = this.$route.query;
114	208	this.$router.push({ name: 'Dashboard', query: { value: 2, unit_id, book_id } });
...	...	@@ -264,6 +358,7 @@
264	358	},
265	359	},
266	360	mounted() {
	361	+ // this.pageSetting();
267	362	this.fetchWordList();
268	363	},
269	364	beforeDestroy() {

...	...	@@ -53,24 +53,6 @@
53	53	<p>{{ item.prblmDtlExpln }}</p>
54	54	</div>
55	55	</article>
56		- <!-- <article class="flex justify-center mb50" style="gap: 60px">
57		- <div class="flex" @click="handleClick(2)">
58		- <button>
59		- <img src="../../../../resources/img/img136_71s.png" alt="" />
60		- <p :class="{ active: selectedButton === 2 }">2</p>
61		- </button>
62		- <p>violin</p>
63		- </div>
64		- </article>
65		- <article class="flex justify-center" style="gap: 60px">
66		- <div class="flex" @click="handleClick(3)">
67		- <button>
68		- <img src="../../../../resources/img/img136_71s.png" alt="" />
69		- <p :class="{ active: selectedButton === 3 }">3</p>
70		- </button>
71		- <p>piano</p>
72		- </div>
73		- </article> -->
74	56	</div>
75	57	</div>
76	58	<button class="submit-button" @click="handleSubmit()">제출하기</button>
...	...	@@ -119,9 +101,7 @@
119	101	},
120	102	handleClick(answer) {
121	103	console.log(answer)
122		- this.$store.dispatch('updatePrblmAns', answer);
123	104	this.selectedButton = answer;
124		-
125	105	},
126	106	// 제출하기 버튼
127	107	handleSubmit() {
...	...	@@ -156,6 +136,7 @@
156	136	prblmAns: this.selectedButton
157	137	}
158	138	this.$store.dispatch('saveProblemData', problemData);
	139	+ console.log(this.$store.getters.getAllProblems)
159	140	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
160	141	this.$store.dispatch('goToNextProblem');
161	142	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -32,16 +32,16 @@
32	32	</div>
33	33	<div class="pickGroup">
34	34	<div class="flex" style="gap: 250px">
35		- <article class="text-ct" @click="handleClick(1)">
	35	+ <article class="text-ct" @click="handleClick('A')">
36	36	<div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt="" /></div>
37	37	<button class="popTxt">
38		- <img :src="selectedButton === 1 ? selectedbuttonImg : buttonImg" alt="" />
	38	+ <img :src="selectedButton === 'A' ? selectedbuttonImg : buttonImg" alt="" />
39	39	</button>
40	40	</article>
41		- <article class="text-ct" @click="handleClick(2)">
	41	+ <article class="text-ct" @click="handleClick('B')">
42	42	<div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt="" /></div>
43	43	<button class="popTxt">
44		- <img :src="selectedButton === 2 ? selectedbuttonImg : buttonImg" alt="" />
	44	+ <img :src="selectedButton === 'B' ? selectedbuttonImg : buttonImg" alt="" />
45	45	</button>
46	46	</article>
47	47	</div>
...	...	@@ -124,6 +124,7 @@
124	124	prblmAns: this.selectedButton
125	125	}
126	126	this.$store.dispatch('saveProblemData', problemData);
	127	+ console.log(this.$store.getters.getAllProblems)
127	128	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
128	129	this.$store.dispatch('goToNextProblem');
129	130	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -42,7 +42,7 @@
42	42	</div>
43	43	<button class="submit-button" @click="handleSubmit()">제출하기</button>
44	44	</div>
45		- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
	45	+ <div class="next-btn" @click="nextProblem(answer)"><img src="../../../../resources/img/right.png" alt="" />
46	46	</div>
47	47	</div>
48	48	</div>
...	...	@@ -76,9 +76,6 @@
76	76	}
77	77	}, 1000);
78	78	},
79		- handleSubmit() {
80		- console.log("정답 : ", this.answer);
81		- },
82	79	getProblem() {
83	80	const vm = this;
84	81	const prblmId = this.currentLearningId.prblm_id;
...	...	@@ -101,13 +98,14 @@
101	98	console.log("problem - error : ", error);
102	99	});
103	100	},
104		- nextProblem() {
	101	+ nextProblem(answer) {
105	102	const problemData = {
106	103	prblmImfo: this.currentLearningId,
107	104	prblmNumber: this.currentProblemIndex,
108		- prblmAns: this.selectedButton
	105	+ prblmAns: answer
109	106	}
110	107	this.$store.dispatch('saveProblemData', problemData);
	108	+ console.log(this.$store.getters.getAllProblems)
111	109	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
112	110	this.$store.dispatch('goToNextProblem');
113	111	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -131,6 +131,7 @@
131	131	prblmAns: this.selectedButton
132	132	}
133	133	this.$store.dispatch('saveProblemData', problemData);
	134	+ console.log(this.$store.getters.getAllProblems)
134	135	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
135	136	this.$store.dispatch('goToNextProblem');
136	137	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -31,14 +31,14 @@
31	31	</div>
32	32	<div class="pickGroup mt60 flex align-center justify-center"
33	33	style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
34		- <article v-for="(detail, index) in problemDetail" :key="index"
	34	+ <article v-for="(item, index) in problemDetail" :key="index"
35	35	style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
36		- <div class="flex align-center" @click="handleClick(item)">
	36	+ <div class="flex align-center" @click="handleClick(item.prblmDtlExpln)">
37	37	<button>
38	38	<img src="../../../../resources/img/img136_71s.png" alt="" />
39		- <p :class="{ active: selectedButton === item }">{{ index + 1 }}</p>
	39	+ <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
40	40	</button>
41		- <p>{{ detail.prblmDtlExpln }}</p>
	41	+ <p>{{ item.prblmDtlExpln }}</p>
42	42	</div>
43	43	</article>
44	44	</div>
...	...	@@ -120,6 +120,7 @@
120	120	prblmAns: this.selectedButton
121	121	}
122	122	this.$store.dispatch('saveProblemData', problemData);
	123	+ console.log(this.$store.getters.getAllProblems)
123	124	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
124	125	this.$store.dispatch('goToNextProblem');
125	126	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -137,6 +137,7 @@
137	137	prblmAns: this.selectedButton
138	138	}
139	139	this.$store.dispatch('saveProblemData', problemData);
	140	+ console.log(this.$store.getters.getAllProblems)
140	141	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
141	142	this.$store.dispatch('goToNextProblem');
142	143	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -42,10 +42,10 @@
42	42	<article v-for="(item, index) in problemDetail" :key="index"
43	43	style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
44	44	<div class="flex align-center">
45		- <button @click="submitAnswer(item)">
	45	+ <button @click="handleClick(item.prblmDtlExpln)">
46	46	<img src="../../../../resources/img/img136_71s.png" alt="" />
47	47	<p :class="{
48		- active: answer === item.prblmDtlExpln,
	48	+ active: selectedButton === item.prblmDtlExpln,
49	49	}">
50	50	{{ index + 1 }}
51	51	</p>
...	...	@@ -53,37 +53,11 @@
53	53	<p>{{ item.prblmDtlExpln }}</p>
54	54	</div>
55	55	</article>
56		- <!-- <article style="gap: 60px; bottom: 159px; right: 559px">
57		- <div class="flex align-center">
58		- <button>
59		- <img
60		- src="../../../../resources/img/img136_71s.png"
61		- alt=""
62		- />
63		- <p>2</p>
64		- </button>
65		- <p>b</p>
66		- </div>
67		- </article>
68		- <article style="gap: 60px; bottom: 159px; right: 559px">
69		- <div class="flex align-center">
70		- <button>
71		- <img
72		- src="../../../../resources/img/img136_71s.png"
73		- alt=""
74		- />
75		- <p>3</p>
76		- </button>
77		- <p>c</p>
78		- </div>
79		- </article> -->
80	56	</div>
81	57	</div>
82	58	<button class="submit-button" @click="handleSubmit()">제출하기</button>
83	59	</div>
84		- <div class="next-btn" @click="
85		- nextProblem()
86		- ">
	60	+ <div class="next-btn" @click="nextProblem()">
87	61	<img src="../../../../resources/img/right.png" alt="" />
88	62	</div>
89	63	</div>
...	...	@@ -101,7 +75,7 @@
101	75	dataList: [],
102	76	prblmExpln: null,
103	77	accessTime: null,
104		- answer: null,
	78	+ selectedButton: null,
105	79	};
106	80	},
107	81	methods: {
...	...	@@ -125,6 +99,9 @@
125	99	const audio = document.getElementById("audio-player");
126	100	audio.play();
127	101	console.log("playing");
	102	+ },
	103	+ handleClick(number) {
	104	+ this.selectedButton = number;
128	105	},
129	106	handleSubmit() {
130	107	console.log("정답 : ", this.answer);
...	...	@@ -158,6 +135,7 @@
158	135	prblmAns: this.selectedButton
159	136	}
160	137	this.$store.dispatch('saveProblemData', problemData);
	138	+ console.log(this.$store.getters.getAllProblems)
161	139	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
162	140	this.$store.dispatch('goToNextProblem');
163	141	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -136,6 +136,7 @@
136	136	prblmAns: this.selectedButton
137	137	}
138	138	this.$store.dispatch('saveProblemData', problemData);
	139	+ console.log(this.$store.getters.getAllProblems)
139	140	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
140	141	this.$store.dispatch('goToNextProblem');
141	142	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -34,13 +34,24 @@
34	34	<img src="../../../../resources/img/img114_57s.png" alt="" />
35	35	</div> -->
36	36
37		- <div class="flex justify-center">
38		- <div class="btnGroup mt50 flex justify-between">
39		- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
40		- :class="{ active: selectedIndex === index }">
41		- <img :src="item.imgSrc1" />
42		- <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block" />
43		- </button>
	37	+ <div class="pickGroup flex align-center justify-center"
	38	+ style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
	39	+ <div class="pickGroup flex align-center justify-center"
	40	+ style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
	41	+ <article v-for="(item, index) in problemDetail" :key="index"
	42	+ style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
	43	+ <div class="flex align-center">
	44	+ <button @click="handleClick(item.prblmDtlExpln)">
	45	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	46	+ <p :class="{
	47	+ active: selectedButton === item.prblmDtlExpln,
	48	+ }">
	49	+ {{ index + 1 }}
	50	+ </p>
	51	+ </button>
	52	+ <p>{{ item.prblmDtlExpln }}</p>
	53	+ </div>
	54	+ </article>
44	55	</div>
45	56	</div>
46	57	<button class="submit-button" @click="handleSubmit()">제출하기</button>
...	...	@@ -69,6 +80,7 @@
69	80	intervalId: null,
70	81	dataList: [],
71	82	problemDetail: [],
	83	+ selectedButton: null,
72	84	};
73	85	},
74	86	beforeDestroy() {
...	...	@@ -96,6 +108,9 @@
96	108	clearInterval(this.intervalId);
97	109	}
98	110	}, 1000);
	111	+ },
	112	+ handleClick(number) {
	113	+ this.selectedButton = number;
99	114	},
100	115	handleSubmit() {
101	116	console.log("정답 : ", this.selectedIndex + 1);
...	...	@@ -134,6 +149,7 @@
134	149	prblmAns: this.selectedButton
135	150	}
136	151	this.$store.dispatch('saveProblemData', problemData);
	152	+ console.log(this.$store.getters.getAllProblems)
137	153	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
138	154	this.$store.dispatch('goToNextProblem');
139	155	this.handleProblemDetail(this.currentLearningId);
...	...	@@ -239,6 +255,29 @@
239	255	left: 0;
240	256	}
241	257
	258	+.pickGroup p {
	259	+ font-size: 34px;
	260	+ font-weight: bold;
	261	+}
	262	+
	263	+.pickGroup button {
	264	+ position: relative;
	265	+ margin-right: 30px;
	266	+}
	267	+
	268	+.pickGroup button p {
	269	+ font-size: 34px;
	270	+ color: #c6c6c6;
	271	+ position: absolute;
	272	+ top: 50%;
	273	+ left: 50%;
	274	+ transform: translate(-50%, -50%);
	275	+}
	276	+
	277	+.pickGroup button p.active {
	278	+ color: #000000;
	279	+}
	280	+
242	281	.submit-button {
243	282	position: absolute;
244	283	background-color: #ffba08;

...	...	@@ -44,7 +44,7 @@
44	44	<div class="flex align-center">
45	45	<button @click="handleCheck('O')" name="O">
46	46	<img src="../../../../resources/img/img136_71s.png" alt="" />
47		- <p :class="{ active: answer === 'O' }">1</p>
	47	+ <p :class="{ active: selectedButton === 'O' }">1</p>
48	48	</button>
49	49	<img src="../../../../resources/img/img111_56s.png" alt="" />
50	50	</div>
...	...	@@ -53,7 +53,7 @@
53	53	<div class="flex align-center">
54	54	<button @click="handleCheck('X')" name="X">
55	55	<img src="../../../../resources/img/img136_71s.png" alt="" />
56		- <p :class="{ active: answer === 'X' }">2</p>
	56	+ <p :class="{ active: selectedButton === 'X' }">2</p>
57	57	</button>
58	58	<img src="../../../../resources/img/img112_56s.png" alt="" />
59	59	</div>
...	...	@@ -63,9 +63,7 @@
63	63	</div>
64	64	<button class="submit-button" @click="handleSubmit()">제출하기</button>
65	65	</div>
66		- <div class="next-btn" @click="
67		- nextProblem()
68		- ">
	66	+ <div class="next-btn" @click="nextProblem()">
69	67	<img src="../../../../resources/img/right.png" alt="" />
70	68	</div>
71	69	</div>
...	...	@@ -84,7 +82,7 @@
84	82	dataList: [],
85	83	prblmExpln: null,
86	84	accessTime: null,
87		- answer: null,
	85	+ selectedButton: null,
88	86	prblmLogAnsCnt: 0,
89	87	};
90	88	},
...	...	@@ -107,11 +105,11 @@
107	105	},
108	106
109	107	handleCheck(value) {
110		- this.answer = value;
111		- console.log(this.answer);
	108	+ this.selectedButton = value;
	109	+ console.log(this.selectedButton);
112	110	},
113	111	handleSubmit() {
114		- console.log("정답 : ", this.answer);
	112	+ console.log("정답 : ", this.selectedButton);
115	113	},
116	114	getProblem() {
117	115	const vm = this;
...	...	@@ -142,6 +140,7 @@
142	140	prblmAns: this.selectedButton
143	141	}
144	142	this.$store.dispatch('saveProblemData', problemData);
	143	+ console.log(this.$store.getters.getAllProblems)
145	144	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
146	145	this.$store.dispatch('goToNextProblem');
147	146	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -146,6 +146,7 @@
146	146	prblmAns: this.selectedButton
147	147	}
148	148	this.$store.dispatch('saveProblemData', problemData);
	149	+ console.log(this.$store.getters.getAllProblems)
149	150	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
150	151	this.$store.dispatch('goToNextProblem');
151	152	this.handleProblemDetail(this.currentLearningId);

Delete comment