jichoi / lms_front star
박민혁 박민혁 2024-08-23
Merge branch 'master' of http://210.180.118.83/jichoi/lms_front
@fc9bea7951e525e6c3710d855c999bc5d0a9910a
client/views/pages/main/Chapter/Chapter2_2.vue
--- client/views/pages/main/Chapter/Chapter2_2.vue
+++ client/views/pages/main/Chapter/Chapter2_2.vue
@@ -18,7 +18,7 @@
       <button class="completeBtn" @click="complete">학습 종료</button>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_3')">
+      <div class="pre-btn" @click="goToPrevPage">
         <img src="../../../../resources/img/left.png" alt="" />
       </div>
       <div class="content title-box">
@@ -60,7 +60,7 @@
           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_9')">
+      <div class="next-btn" @click="goToNextPage">
         <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
@@ -68,6 +68,8 @@
 </template>
 
 <script>
+import axios from 'axios';
+
 export default {
   data() {
     return {
@@ -104,15 +106,108 @@
       timer: 0,
       intervalId: null,
       currentIndex: 0,
-      wdBookId: "",
-      currentWdBkIndex: 0,
+      wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
+      wdBookId: "", // 현재 단어장 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() {
       console.log("현재 단어장 콘텐츠 인덱스: ", this.$store.getters.getCurrentWdBkIndex);
       this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex;
       console.log("현재 단어장 콘텐츠 인덱스에 대한 단어장 id: ", this.$store.getters.getWdBookIdList[this.currentWdBkIndex]);
+    },
+
+    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() {
@@ -165,7 +260,7 @@
     },
   },
   mounted() {
-    this.fetchWordList();
+    this.pageSetting();
     this.startTimer();
   },
 };
client/views/pages/main/Chapter/Chapter2_3.vue
--- client/views/pages/main/Chapter/Chapter2_3.vue
+++ client/views/pages/main/Chapter/Chapter2_3.vue
@@ -29,7 +29,7 @@
 
                 <div class="imgGroup box23">
                     <div class="con">
-                        <img :src="currentCon.imgSrc" alt="" />
+                        <img :src="currentCon.imgSrc" alt="" style="height: 150px;"/>
                         <p class="title3">
                             <em class="yellow">{{ currentCon.titleEm }}</em
                             >{{ currentCon.title }}
@@ -223,7 +223,7 @@
 
                     // fileResponse.data.list에서 fileRpath 값을 추출하여 imgSrc에 설정
                     const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
-                    const imgSrc = fileRpath ? `http://http://165.229.169.113:8081/${fileRpath}` : '';
+                    const imgSrc = fileRpath ? `http://165.229.169.113:9080/${fileRpath}` : '';
 
                     return {
                         imgSrc1: `client/resources/img/img53_${6 + index}_35s.png`,
client/views/pages/main/Chapter/Chapter2_4.vue
--- client/views/pages/main/Chapter/Chapter2_4.vue
+++ client/views/pages/main/Chapter/Chapter2_4.vue
@@ -18,7 +18,7 @@
       <button class="completeBtn" @click="complete">학습 종료</button>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_9')">
+      <div class="pre-btn" @click="goToPrevPage">
         <img src="../../../../resources/img/left.png" alt="" />
       </div>
       <div class="content title-box">
@@ -69,7 +69,7 @@
           ></audio>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_8')">
+      <div class="next-btn" @click="goToNextPage">
         <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
@@ -77,6 +77,8 @@
 </template>
 <script>
 import SvgIcon from "@jamescoyle/vue-icon";
+import axios from "axios";
+
 export default {
   data() {
     return {
@@ -107,9 +109,109 @@
         },
       ],
       selectedIndex: 0,
+
+      wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
+      wdBookId: "", // 현재 단어장 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() {
+
+    },
+
+    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 } });
@@ -137,6 +239,9 @@
   components: {
     SvgIcon,
   },
+  mounted() {
+    this.pageSetting();
+  },
 };
 </script>
 
client/views/pages/main/Chapter/Chapter2_9.vue
--- client/views/pages/main/Chapter/Chapter2_9.vue
+++ client/views/pages/main/Chapter/Chapter2_9.vue
@@ -18,7 +18,7 @@
       <button class="completeBtn" @click="complete">학습 종료</button>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_2')">
+      <div class="pre-btn" @click="goToPrevPage">
         <img src="../../../../resources/img/left.png" alt="" />
       </div>
       <div class="content title-box">
@@ -164,7 +164,7 @@
           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_4')">
+      <div class="next-btn" @click="goToNextPage">
         <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
@@ -172,13 +172,115 @@
 </template>
 
 <script>
+import axios from 'axios';
+
 export default {
   data() {
     return {
       draggedElementId: null, // 드래그한 요소의 ID를 저장
+
+      wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
+      wdBookId: "", // 현재 단어장 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() {
+
+    },
+
+    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 } });
@@ -220,6 +322,7 @@
     },
   },
   mounted() {
+    this.pageSetting();
     // 드래그 가능한 영역에 드래그 오버 및 드롭 이벤트를 추가합니다
     document.querySelectorAll(".dropzone").forEach((button) => {
       button.addEventListener("dragover", this.handleDragOver);
Add a comment
List