Commit @1dd9d7e2a9ab411bd3340032880e549652d8dd47

woals 2024-08-23

240823 권민수 단어장 나머지 페이지도 세팅 준비

@1dd9d7e2a9ab411bd3340032880e549652d8dd47

9cd90a2

1dd9d7e

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();
   },
 };

9cd90a2

1dd9d7e

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() {

Add a comment

Open 0
Closed 0

List

...	...	@@ -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	};

...	...	@@ -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() {

Delete comment