Commit @f61c7548dbb944e77ddb292ff9ff3ee83d387a35

woals 2024-08-22

240822 권민수 단어장 Chapter2_3 이미지 파일 경로 설정

@f61c7548dbb944e77ddb292ff9ff3ee83d387a35

d451f76

f61c754

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

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

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


               <article class="flex align-center">
                 <div class="imgGroup mr30">
                   <img
-                    :src="'http://localhost:9080/' + word.fileApath"
+                    :src= word.fileApath
                     data-num="1"
                     style="width: 200px"
                   />

     return {
       wdBookId: "WORD_BOOK_000000000000042",
       wordList: [],
-      // wordContentList: [],
-      // wdContentId: "",
+      wordContentList: [],
+      wdContentId: "",
     };
   },
   methods: {
+    checkAndNavigate() {
+        this.wdContentId = this.$store.getters.getLearningId; // 2. wdContentId를 가져옴
+        console.log("learning_id: ", this.wdContentId);
+
+        axios.post("/wordContent/selectWordContent.json", {
+          wordContentId: this.wdContentId,
+        })
+        .then((response) => {
+          // console.log(response.data);
+          this.wordContentList = response.data;
+          console.log(this.wordContentList[0].wd_book_id); // 3. 단어장 콘텐츠의 첫번째 단어장 id를 표시
+
+        })
+        .catch((error) => {
+          console.error("단어 컨텐츠 목록을 불러오는 중 오류 발생:", error);
+        })
+    },
 
     async fetchWordList() {
       try {

           const fileApath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileApath : null;
           console.log("각 단어의 fileApath: ", fileApath);
 
-          word.fileApath = fileApath; // fileApath 값을 해당 객체에 추가
+          word.fileApath = "http://localhost:9080/" + fileApath; // fileApath 값을 해당 객체에 추가
         });
 
         // 모든 요청이 완료될 때까지 대기

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

d451f76

f61c754

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

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

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


         updateContent(index) {
             this.selectedIndex = index;
             this.currentCon = this.items[index].con;
+            console.log(this.currentCon.imgSrc);
             this.startTimer();
         },
         startTimer() {

 
                 this.wordList = response.data;
 
-                this.items = this.wordList.map((word, index) => {
-                    const imgSrc1 = `client/resources/img/img53_${6 + index}_35s.png`;
-                    const imgSrc2 = `client/resources/img/img53_${1 + index}_35s.png`;
+                const requests = this.wordList.map(async (word, index) => {
+                    // fileApath를 받아오기 위한 요청
+                    const fileResponse = await axios.post('/file/find.json', {
+                        file_mng_id: word.fileMngId,
+                    });
+
+                    // fileResponse.data.list에서 fileApath 값을 추출하여 imgSrc에 설정
+                    const fileApath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileApath : null;
+                    const imgSrc = fileApath ? `http://localhost:9080/${fileApath}` : '';
+
                     return {
-                        imgSrc1,
-                        imgSrc2,
+                        imgSrc1: `client/resources/img/img53_${6 + index}_35s.png`,
+                        imgSrc2: `client/resources/img/img53_${1 + index}_35s.png`,
                         con: {
-                            imgSrc: 'client/resources/img/img54_s.png', // 일단은 구름 사진으로 고정
+                            imgSrc, // fileApath를 imgSrc에 설정
                             titleEm: word.wdNm.charAt(0), // 단어의 첫 글자
                             title: word.wdNm.slice(1), // 단어의 나머지 부분
                             boxText: '명',

                     };
                 });
 
+                // 모든 요청이 완료될 때까지 대기
+                this.items = await Promise.all(requests);
+
                 // items 리스트의 첫 번째 항목을 currentCon에 설정
                 if (this.items.length > 0) {
                     this.currentCon = this.items[0].con;

d451f76

f61c754

client/views/pages/main/Dashboard.vue

--- client/views/pages/main/Dashboard.vue

+++ client/views/pages/main/Dashboard.vue


                         </button>
                         <p>{{ labeledItems[0].label }}</p>
                     </div>
-                    <div class="race-btn" @click="[goToPage('Chapter2'), storeLearningId(labeledItems[1].learning_id)]">
+                    <div class="race-btn" @click="[goToPage('Chapter2'), storeLearningId(labeledItems[1])]">
                         <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
                                 :style="{ display: rabbitPos[2] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"

         },
         storeLearningId(labeledItems) {
             this.$store.dispatch('updateLearningData', labeledItems)
+            console.log("레이블된 아이템이라매: ", labeledItems);
             if (labeledItems.label.startsWith('문제')) {
                 this.handleProblemDetail(this.$store.getters.currentLearningId)
                 this.goToPage(this.problemType)

Add a comment

Open 0
Closed 0

List

...	...	@@ -38,7 +38,7 @@
38	38	<article class="flex align-center">
39	39	<div class="imgGroup mr30">
40	40	<img
41		- :src="'http://localhost:9080/' + word.fileApath"
	41	+ :src= word.fileApath
42	42	data-num="1"
43	43	style="width: 200px"
44	44	/>
...	...	@@ -90,11 +90,28 @@
90	90	return {
91	91	wdBookId: "WORD_BOOK_000000000000042",
92	92	wordList: [],
93		- // wordContentList: [],
94		- // wdContentId: "",
	93	+ wordContentList: [],
	94	+ wdContentId: "",
95	95	};
96	96	},
97	97	methods: {
	98	+ checkAndNavigate() {
	99	+ this.wdContentId = this.$store.getters.getLearningId; // 2. wdContentId를 가져옴
	100	+ console.log("learning_id: ", this.wdContentId);
	101	+
	102	+ axios.post("/wordContent/selectWordContent.json", {
	103	+ wordContentId: this.wdContentId,
	104	+ })
	105	+ .then((response) => {
	106	+ // console.log(response.data);
	107	+ this.wordContentList = response.data;
	108	+ console.log(this.wordContentList[0].wd_book_id); // 3. 단어장 콘텐츠의 첫번째 단어장 id를 표시
	109	+
	110	+ })
	111	+ .catch((error) => {
	112	+ console.error("단어 컨텐츠 목록을 불러오는 중 오류 발생:", error);
	113	+ })
	114	+ },
98	115
99	116	async fetchWordList() {
100	117	try {
...	...	@@ -113,7 +130,7 @@
113	130	const fileApath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileApath : null;
114	131	console.log("각 단어의 fileApath: ", fileApath);
115	132
116		- word.fileApath = fileApath; // fileApath 값을 해당 객체에 추가
	133	+ word.fileApath = "http://localhost:9080/" + fileApath; // fileApath 값을 해당 객체에 추가
117	134	});
118	135
119	136	// 모든 요청이 완료될 때까지 대기
...	...	@@ -143,6 +160,7 @@
143	160	},
144	161	mounted() {
145	162	console.log("챕터2 단어장 마운트 완료");
	163	+ // this.storeWdBookId(); // 1. 마운트 시 호출
146	164	this.fetchWordList();
147	165	},
148	166	};

...	...	@@ -119,6 +119,7 @@
119	119	updateContent(index) {
120	120	this.selectedIndex = index;
121	121	this.currentCon = this.items[index].con;
	122	+ console.log(this.currentCon.imgSrc);
122	123	this.startTimer();
123	124	},
124	125	startTimer() {
...	...	@@ -214,14 +215,21 @@
214	215
215	216	this.wordList = response.data;
216	217
217		- this.items = this.wordList.map((word, index) => {
218		- const imgSrc1 = `client/resources/img/img53_${6 + index}_35s.png`;
219		- const imgSrc2 = `client/resources/img/img53_${1 + index}_35s.png`;
	218	+ const requests = this.wordList.map(async (word, index) => {
	219	+ // fileApath를 받아오기 위한 요청
	220	+ const fileResponse = await axios.post('/file/find.json', {
	221	+ file_mng_id: word.fileMngId,
	222	+ });
	223	+
	224	+ // fileResponse.data.list에서 fileApath 값을 추출하여 imgSrc에 설정
	225	+ const fileApath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileApath : null;
	226	+ const imgSrc = fileApath ? `http://localhost:9080/${fileApath}` : '';
	227	+
220	228	return {
221		- imgSrc1,
222		- imgSrc2,
	229	+ imgSrc1: `client/resources/img/img53_${6 + index}_35s.png`,
	230	+ imgSrc2: `client/resources/img/img53_${1 + index}_35s.png`,
223	231	con: {
224		- imgSrc: 'client/resources/img/img54_s.png', // 일단은 구름 사진으로 고정
	232	+ imgSrc, // fileApath를 imgSrc에 설정
225	233	titleEm: word.wdNm.charAt(0), // 단어의 첫 글자
226	234	title: word.wdNm.slice(1), // 단어의 나머지 부분
227	235	boxText: '명',
...	...	@@ -230,6 +238,9 @@
230	238	};
231	239	});
232	240
	241	+ // 모든 요청이 완료될 때까지 대기
	242	+ this.items = await Promise.all(requests);
	243	+
233	244	// items 리스트의 첫 번째 항목을 currentCon에 설정
234	245	if (this.items.length > 0) {
235	246	this.currentCon = this.items[0].con;

...	...	@@ -27,7 +27,7 @@
27	27	</button>
28	28	<p>{{ labeledItems[0].label }}</p>
29	29	</div>
30		- <div class="race-btn" @click="[goToPage('Chapter2'), storeLearningId(labeledItems[1].learning_id)]">
	30	+ <div class="race-btn" @click="[goToPage('Chapter2'), storeLearningId(labeledItems[1])]">
31	31	<div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
32	32	:style="{ display: rabbitPos[2] ? 'block' : 'none' }"></div>
33	33	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
...	...	@@ -589,6 +589,7 @@
589	589	},
590	590	storeLearningId(labeledItems) {
591	591	this.$store.dispatch('updateLearningData', labeledItems)
	592	+ console.log("레이블된 아이템이라매: ", labeledItems);
592	593	if (labeledItems.label.startsWith('문제')) {
593	594	this.handleProblemDetail(this.$store.getters.currentLearningId)
594	595	this.goToPage(this.problemType)

Delete comment