Commit @d1305ad00f4907f93cf5c6600bc190d3444883b9

PsHooN7979 2024-08-14

240814 박세훈 오답 문제 상세 조회 기능 추가

@d1305ad00f4907f93cf5c6600bc190d3444883b9

439262b

d1305ad

client/views/layout/Footer.vue

--- client/views/layout/Footer.vue

+++ client/views/layout/Footer.vue


         <div class="content title-box">
             <p class="title mt25 title-bg">정답 해설</p>
             <div class="flex align-center mb30">
-                <p class="subtitle2 mr20">사과를 영어로하면 apple입니다.</p>
+                <p class="subtitle2 mr20">{{ dataList.prblmCmmt }}</p>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import axios from "axios";
 export default {
     data() {
         return {
-            istrue: true,
+            istrue: false,
+
+            dataList: [],
+
+            prblmId: null,
+
+            stdId: 1,
         };
     },
-    methods: {},
+    methods: {
+        selectDetailPreviewNote() {
+            const vm = this;
+            vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+            axios({
+                url: "problemLog/selectDetailPreviewNote.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    prblmId: vm.prblmId,
+                    stdId: vm.stdId,
+                },
+            })
+                .then(function (res) {
+                    console.log("problemList - response : ", res.data);
+                    vm.dataList = res.data[0];
+                    if (vm.dataList) {
+                        vm.istrue = true;
+                    } else {
+                        vm.istrue = false;
+                    }
+                    console.log(vm.istrue);
+                })
+                .catch(function (error) {
+                    console.log("problemList - error : ", error);
+                });
+        },
+    },
     watch: {},
     computed: {},
     mounted() {
         console.log("Footer mounted");
+        this.selectDetailPreviewNote();
     },
 };
 </script>

439262b

d1305ad

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

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

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


 <template>
-  <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
-    </div>
-    <div class="title-box mb25 flex align-center mt40">
-      <span class="title mr40">1. Hello WORLD</span>
-      <span class="subtitle">my name is dd</span>
-    </div>
-    <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_6')"><img src="../../../../resources/img/left.png" alt=""></div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step3.</p>
-        <div class="flex align-center mb30">
-               <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
-               <button><img src="../../../../resources/img/btn10_s.png" alt="">
-               </button>
-            </div>
-
-        <div class="text-ct">
-          <div class="time-hint">
-          <button class="hint-btn">HINT</button>
-            <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+    <div id="Chapter1_1" class="content-wrap">
+        <div style="margin: 30px 0px 50px">
+            <router-link to="/MyPlan.page">
+                <div class="logo mb25">
+                    <img src="../../../../resources/img/logo2.png" alt="" />
                 </div>
-              </div>
-         </div>
-          
-          <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px;">
-            <p>1. 문제</p>
-            <div class="flex justify-center" style="gap: 60px;">
-              <article >
-                <div class="flex align-center">
-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <p>1</p>
-                  </button>
-                  <img src="../../../../resources/img/img111_56s.png" alt="">
-                </div>
-              </article>
-              <article >
-                <div class="flex align-center">
-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <p>2</p>
-                  </button>
-                  <img src="../../../../resources/img/img112_56s.png" alt="">
-                </div>
-              </article>
-            </div>
-          </div>
-          <div class="pickGroup mt40 flex align-center justify-between" style="gap: 100px;">
-            <p>2. 문제 ㅇㅇㅇ</p>
-            <div class="flex justify-center" style="gap: 60px;">
-              <article >
-                <div class="flex align-center">
-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <p>1</p>
-                  </button>
-                  <img src="../../../../resources/img/img111_56s.png" alt="">
-                </div>
-              </article>
-              <article >
-                <div class="flex align-center">
-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <p>2</p>
-                  </button>
-                  <img src="../../../../resources/img/img112_56s.png" alt="">
-                </div>
-              </article>
-            </div>
-          </div>
+            </router-link>
         </div>
-      </div>
-      <div class="next-btn" @click="goToPage('Chapter3_8')"><img src="../../../../resources/img/right.png" alt=""></div>
+        <div class="title-box mb25 flex align-center mt40">
+            <span class="title mr40">1. Hello WORLD</span>
+            <span class="subtitle">my name is dd</span>
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="goToPage('Chapter3_6')">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step3.</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
+                    <button>
+                        <img
+                            src="../../../../resources/img/btn10_s.png"
+                            alt=""
+                        />
+                    </button>
+                </div>
+
+                <div class="text-ct">
+                    <div class="time-hint">
+                        <button class="hint-btn">HINT</button>
+                        <div class="time-bg mt20">
+                            <div>
+                                <div class="time">
+                                    <p class="second">{{ timer }}</p>
+                                    <p class="text">sec</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        class="pickGroup flex align-center justify-between mt80"
+                        style="gap: 100px"
+                        v-for="(item, index) in problemDetail"
+                        :key="item.id"
+                    >
+                        <p>{{ index + 1 }}. {{ item.prblmDtlExpln }}</p>
+                        <div class="flex justify-center" style="gap: 60px">
+                            <article>
+                                <div class="flex align-center">
+                                    <button>
+                                        <img
+                                            src="../../../../resources/img/img136_71s.png"
+                                            alt=""
+                                        />
+                                        <p>1</p>
+                                    </button>
+                                    <img
+                                        src="../../../../resources/img/img111_56s.png"
+                                        alt=""
+                                    />
+                                </div>
+                            </article>
+                            <article>
+                                <div class="flex align-center">
+                                    <button>
+                                        <img
+                                            src="../../../../resources/img/img136_71s.png"
+                                            alt=""
+                                        />
+                                        <p>2</p>
+                                    </button>
+                                    <img
+                                        src="../../../../resources/img/img112_56s.png"
+                                        alt=""
+                                    />
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="next-btn" @click="goToPage('Chapter3_8')">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
-  data() {
-    return {
-      timer: '00'
-    }
-  },
-  methods: {
-    goToPage(page) {
-      this.$router.push({ name: page });
+    data() {
+        return {
+            timer: "00",
+            prblmId: "",
+            problemDetail: [],
+            dataList: [],
+            prblmExpln: null,
+        };
     },
-    startTimer() {
-      if (this.intervalId) {
-        clearInterval(this.intervalId);
-      }
-      this.timer = 5;
-      this.intervalId = setInterval(() => {
-        if (this.timer > 0) {
-          this.timer--;
-        } else {
-          clearInterval(this.intervalId);
-        }
-      }, 1000);
-    }
-  },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+    methods: {
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
+        },
+        problemSearch() {
+            const vm = this;
+            vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+            axios({
+                url: "problem/problemInfo.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    prblmId: vm.prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log("problem - response : ", res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+                })
+                .catch(function (error) {
+                    console.log("problem - error : ", error);
+                });
+        },
+    },
+    watch: {},
+    computed: {},
+    components: {},
+    mounted() {
+        // this.problemSearch();
+    },
+};
 </script>
 <style scoped>
 .inputbox {
-  font-size: 38px;
-  font-family: 'Pretendard-ExtraBold';
+    font-size: 38px;
+    font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {
-  position: relative;
+    position: relative;
 }
 
 .imgGroup button p,
 .textbox p {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: fit-content;
-  height: fit-content;
-  background: #ffffffb8;
-  border-radius: 5px;
-  padding: 10px;
-  font-size: 48px;
-  font-family: 'ONEMobilePOP';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: fit-content;
+    height: fit-content;
+    background: #ffffffb8;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 48px;
+    font-family: "ONEMobilePOP";
 }
-.pickGroup{padding: 0px 80px;}
+.pickGroup {
+    padding: 0px 80px;
+}
 .pickGroup p {
-  font-size: 34px;
-  font-weight: bold;
+    font-size: 34px;
+    font-weight: bold;
 }
 
 .pickGroup button {
-  position: relative;
-  margin-right: 30px;
+    position: relative;
+    margin-right: 30px;
 }
 
 .pickGroup button p {
-  font-size: 34px;
-  color: #c6c6c6;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+    font-size: 34px;
+    color: #c6c6c6;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
-</style>
+</style>

439262b

d1305ad

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

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

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


 <template>
-  <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
-    </div>
-    <div class="title-box mb25 flex align-center mt40">
-      <span class="title mr40">1. Hello WORLD</span>
-      <span class="subtitle">my name is dd</span>
-    </div>
-    <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_8')"><img src="../../../../resources/img/left.png" alt=""></div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step3.</p>
-        <div class="flex align-center mb30">
-               <p class="subtitle2 mr20">그림을 보고 단어를 입력하세요.</p>
-               <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-               </button> -->
-            </div>
-
-        <div class="mt50 text-ct">
-          <div class="time-hint">
-          <button class="hint-btn">HINT</button>
-            <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+    <div id="Chapter1_1" class="content-wrap">
+        <div style="margin: 30px 0px 50px">
+            <router-link to="/MyPlan.page">
+                <div class="logo mb25">
+                    <img src="../../../../resources/img/logo2.png" alt="" />
                 </div>
-              </div>
-         </div>
-          <div class="imgGroup  mt50">
-            <img src="../../../../resources/img/img115_58s.png" alt="">
-            <div class=" mt50">
-              <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요.">
-
-            </div>
-          </div>
-
+            </router-link>
         </div>
-      </div>
-      <div class="next-btn" @click="goToPage('Chapter3_10')"><img src="../../../../resources/img/right.png" alt="">
-      </div>
+        <div class="title-box mb25 flex align-center mt40">
+            <span class="title mr40">1. Hello WORLD</span>
+            <span class="subtitle">my name is dd</span>
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="goToPage('Chapter3_8')">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step3.</p>
+                <div class="flex align-center mb30">
+                    <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
+                    <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+               </button> -->
+                </div>
+
+                <div class="mt50 text-ct">
+                    <div class="time-hint">
+                        <button class="hint-btn">HINT</button>
+                        <div class="time-bg mt20">
+                            <div>
+                                <div class="time">
+                                    <p class="second">{{ timer }}</p>
+                                    <p class="text">sec</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="imgGroup mt50">
+                        <img
+                            src="../../../../resources/img/img115_58s.png"
+                            alt=""
+                        />
+                        <div class="mt50">
+                            <input
+                                class="yellow-bd"
+                                type="text"
+                                name=""
+                                id=""
+                                placeholder="답을 입력하세요."
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="next-btn" @click="goToPage('Chapter3_10')">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
+import axios from "axios";
 export default {
-  data() {
-    return {
-      timer: '00',
-      showButton1: false,
-      showButton2: false,
-      showButton3: false,
-      showButton4: false,
-    }
-  },
-  methods: {
-    goToPage(page) {
-      this.$router.push({ name: page });
-    },
-    handleDrag(dragNumber) {
-      // Drag 버튼 숨기기
-      // 여기서는 상태 관리를 통해 버튼을 제어합니다.
-      if (dragNumber === 1) {
-        this.showButton1 = false;
-      } else if (dragNumber === 2) {
-        this.showButton2 = false;
-      } else if (dragNumber === 3) {
-        this.showButton3 = false;
-      }
-    },
-    showButton(dropNumber) {
-      // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
-      // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
-      if (dropNumber === 1) {
-        this.showButton1 = true;
-      } else if (dropNumber === 2) {
-        this.showButton2 = true;
-      } else if (dropNumber === 3) {
-        this.showButton3 = true;
-      } else if (dropNumber === 4) {
-        this.showButton4 = true;
-      }
-    },
-    startTimer() {
-      if (this.intervalId) {
-        clearInterval(this.intervalId);
-      }
-      this.timer = 5;
-      this.intervalId = setInterval(() => {
-        if (this.timer > 0) {
-          this.timer--;
-        } else {
-          clearInterval(this.intervalId);
-        }
-      }, 1000);
-    }
-  },
-  watch: {
+    data() {
+        return {
+            timer: "00",
+            showButton1: false,
+            showButton2: false,
+            showButton3: false,
+            showButton4: false,
 
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+            problemDetail: [],
+            dataList: [],
+            prblmExpln: null,
+        };
+    },
+    methods: {
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        handleDrag(dragNumber) {
+            // Drag 버튼 숨기기
+            // 여기서는 상태 관리를 통해 버튼을 제어합니다.
+            if (dragNumber === 1) {
+                this.showButton1 = false;
+            } else if (dragNumber === 2) {
+                this.showButton2 = false;
+            } else if (dragNumber === 3) {
+                this.showButton3 = false;
+            }
+        },
+        showButton(dropNumber) {
+            // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
+            // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
+            if (dropNumber === 1) {
+                this.showButton1 = true;
+            } else if (dropNumber === 2) {
+                this.showButton2 = true;
+            } else if (dropNumber === 3) {
+                this.showButton3 = true;
+            } else if (dropNumber === 4) {
+                this.showButton4 = true;
+            }
+        },
+        startTimer() {
+            if (this.intervalId) {
+                clearInterval(this.intervalId);
+            }
+            this.timer = 5;
+            this.intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    clearInterval(this.intervalId);
+                }
+            }, 1000);
+        },
+        problemSearch() {
+            const vm = this;
+            vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+            axios({
+                url: "problem/problemInfo.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    prblmId: "100",
+                },
+            })
+                .then(function (res) {
+                    console.log("problem - response : ", res.data);
+                    vm.dataList = res.data.problem;
+                    vm.problemDetail = res.data.problemDetail;
+                })
+                .catch(function (error) {
+                    console.log("problem - error : ", error);
+                });
+        },
+    },
+    watch: {},
+    computed: {},
+    components: {},
+    mounted() {
+        // this.problemSearch();
+    },
+};
 </script>
 <style scoped>
-input.yellow-bd{width: 30%;}
+input.yellow-bd {
+    width: 30%;
+}
 .dropGroup button {
-  position: relative;
+    position: relative;
 }
 
 .dropGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
 
 .dragGroup {
-  background-color: #F2F4F8;
-  padding: 30px 50px;
-  width: max-content;
-  border-radius: 20px;
+    background-color: #f2f4f8;
+    padding: 30px 50px;
+    width: max-content;
+    border-radius: 20px;
 }
 
 .dragGroup button p {
-  font-size: 48px;
+    font-size: 48px;
 }
-</style>
+</style>

439262b

d1305ad

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

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

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


     <div id="Chapter1_1" class="content-wrap">
         <div style="margin: 30px 0px 50px">
             <router-link to="/MyPlan.page">
-                <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+                <div class="logo mb25">
+                    <img src="../../../../resources/img/logo2.png" alt="" />
+                </div>
             </router-link>
         </div>
         <div class="title-box mb25 flex align-center mt40">

             <span class="subtitle">my name is dd</span>
         </div>
         <div class="flex justify-between align-center">
-            <div class="pre-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/left.png" alt="">
+            <div class="pre-btn" @click="goToPage('Chapter3_15')">
+                <img src="../../../../resources/img/left.png" alt="" />
             </div>
             <div class="content title-box">
                 <p class="title mt25 title-bg">Quiz Result</p>

                  </button>
                 </div> -->
 
-                <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto;">
-                    <div class="wrap-bg ">
-                        <div class="title-box flex mb10  justify-between">
+                <div
+                    class="text-ct flex justify-center"
+                    style="gap: 150px; margin: 0 auto"
+                >
+                    <div class="wrap-bg">
+                        <div class="title-box flex mb10 justify-between">
                             <p class="title mb20">최종 점수</p>
-                            <button type="button" class="popup-close-btn" @click="closeBtn">
-                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
+                            <button
+                                type="button"
+                                class="popup-close-btn"
+                                @click="closeBtn"
+                            >
+                                <svg-icon
+                                    type="mdi"
+                                    :path="mdiWindowClose"
+                                    class="close-btn"
+                                ></svg-icon>
                             </button>
                         </div>
-                        <div style="width: 100%;" class="flex mt30">
+                        <div style="width: 100%" class="flex mt30">
                             <p class="title5"><em class="yellow">93</em></p>
                             <p class="title4 ml10 mr10">&#47;</p>
                             <p class="title4">100</p>
                         </div>
                     </div>
-                    <div class="bg-gray " style="width: 980px;">
-                        <div class="title-box flex mb10  justify-between">
+                    <div class="bg-gray" style="width: 980px">
+                        <div class="title-box flex mb10 justify-between">
                             <p class="title mb20">오답 문제 리스트</p>
-                            <button type="button" class="popup-close-btn" @click="closeBtn">
-                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
+                            <button
+                                type="button"
+                                class="popup-close-btn"
+                                @click="closeBtn"
+                            >
+                                <svg-icon
+                                    type="mdi"
+                                    :path="mdiWindowClose"
+                                    class="close-btn"
+                                ></svg-icon>
                             </button>
                         </div>
-                        <article class=" mb20 flex-column result-box" style="gap: 20px;">
-                            <div class="flex justify-between wrap">
+                        <article
+                            class="mb20 flex-column result-box"
+                            style="gap: 20px"
+                        >
+                            <div
+                                class="flex justify-between wrap"
+                                v-for="(item, index) in dataList"
+                                :key="item.id"
+                            >
                                 <div class="flex align-center">
-                                    <div><p class="title1 mr20">1.</p></div>
+                                    <div>
+                                        <p class="title1 mr20">
+                                            {{ index + 1 }}
+                                        </p>
+                                    </div>
                                     <div class="text-lf">
-                                        <p class="title1">2교시</p>
+                                        <p class="title1">
+                                            {{ item.prblmExpln }}
+                                        </p>
                                     </div>
                                 </div>
                                 <div>
-                                    <div class="flex align-center " style="gap: 10px;"><button type="button"
-                                            title="정답 확인" class="yellow-btn">
-                                            정답 확인
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="flex justify-between wrap">
-                                <div class="flex align-center">
-                                    <div><p class="title1 mr20">1.</p></div>
-                                    <div class="text-lf">
-                                        <p class="title1">2교시</p>
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex align-center " style="gap: 10px;"><button type="button"
-                                            title="정답 확인" class="yellow-btn">
-                                            정답 확인
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="flex justify-between wrap">
-                                <div class="flex align-center">
-                                    <div><p class="title1 mr20">1.</p></div>
-                                    <div class="text-lf">
-                                        <p class="title1">2교시</p>
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex align-center " style="gap: 10px;"><button type="button"
-                                            title="정답 확인" class="yellow-btn">
-                                            정답 확인
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="flex justify-between wrap">
-                                <div class="flex align-center">
-                                    <div><p class="title1 mr20">1.</p></div>
-                                    <div class="text-lf">
-                                        <p class="title1">2교시</p>
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex align-center " style="gap: 10px;"><button type="button"
-                                            title="정답 확인" class="yellow-btn">
+                                    <div
+                                        class="flex align-center"
+                                        style="gap: 10px"
+                                    >
+                                        <button
+                                            type="button"
+                                            title="정답 확인"
+                                            class="yellow-btn"
+                                            @click="
+                                                [
+                                                    handleProblemDetail(item),
+                                                    goToPage(problemType),
+                                                ]
+                                            "
+                                        >
                                             정답 확인
                                         </button>
                                     </div>

                             </div>
                         </article>
                     </div>
-
                 </div>
             </div>
-            <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt="">
+            <div class="next-btn" @click="goToPage('Chapter3_16')">
+                <img src="../../../../resources/img/right.png" alt="" />
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
     data() {
         return {
-            timer: '00',
+            timer: "00",
             showButton1: false,
             showButton2: false,
             showButton3: false,
             showButton4: false,
-        }
+
+            // 단원 평가 아이디, 추후 세션으로 받게 변경
+            evalId: "EVAL_000000000000003",
+
+            dataList: [],
+
+            prblmId: "",
+
+            problemType: null,
+        };
     },
     methods: {
         goToPage(page) {

                     clearInterval(this.intervalId);
                 }
             }, 1000);
-        }
-    },
-    watch: {
+        },
+        problemList() {
+            const vm = this;
 
-    },
-    computed: {
+            axios({
+                url: "problem/evaluationProblemList.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    evalId: vm.evalId,
+                },
+            })
+                .then(function (res) {
+                    console.log("problemList - response : ", res.data);
+                    vm.dataList = res.data;
+                })
+                .catch(function (error) {
+                    console.log("problemList - error : ", error);
+                });
+        },
 
+        handleProblemDetail(item) {
+            sessionStorage.setItem("prblmId", JSON.stringify(item.prblmId));
+            console.log(item.prblmTypeId);
+            if (item.prblmTypeId === "11") {
+                this.problemType = "Chapter3_9";
+            } else if (item.prblmTypeId === "12") {
+                this.problemType = "Chapter3_4";
+            } else if (item.prblmTypeId === "4") {
+                this.problemType = "Chapter3_3";
+            } else if (item.prblmTypeId === "3") {
+                this.problemType = "Chapter3_7";
+            } else if (item.prblmTypeId === "10") {
+                this.problemType = "Chapter3_2";
+            } else if (item.prblmTypeId === "14") {
+                this.problemType = "Chapter3_12";
+            }
+        },
     },
-    components: {
-    },
+    watch: {},
+    computed: {},
+    components: {},
     mounted() {
-
-    }
-}
+        this.problemList();
+    },
+};
 </script>
 <style scoped>
 .textbox {

 .dragGroup button p {
     font-size: 48px;
 }
-</style>
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,165 +1,198 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6		- </router-link>
7		- </div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3_6')"><img src="../../../../resources/img/left.png" alt=""></div>
14		- <div class="content title-box">
15		- <p class="title mt25 title-bg">step3.</p>
16		- <div class="flex align-center mb30">
17		- <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
18		- <button><img src="../../../../resources/img/btn10_s.png" alt="">
19		- </button>
20		- </div>
21		-
22		- <div class="text-ct">
23		- <div class="time-hint">
24		- <button class="hint-btn">HINT</button>
25		- <div class="time-bg mt20">
26		- <div>
27		- <div class="time">
28		- <p class="second">{{ timer }}</p>
29		- <p class="text">sec</p>
30		- </div>
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
31	7	</div>
32		- </div>
33		- </div>
34		-
35		- <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px;">
36		- <p>1. 문제</p>
37		- <div class="flex justify-center" style="gap: 60px;">
38		- <article >
39		- <div class="flex align-center">
40		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
41		- <p>1</p>
42		- </button>
43		- <img src="../../../../resources/img/img111_56s.png" alt="">
44		- </div>
45		- </article>
46		- <article >
47		- <div class="flex align-center">
48		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
49		- <p>2</p>
50		- </button>
51		- <img src="../../../../resources/img/img112_56s.png" alt="">
52		- </div>
53		- </article>
54		- </div>
55		- </div>
56		- <div class="pickGroup mt40 flex align-center justify-between" style="gap: 100px;">
57		- <p>2. 문제 ㅇㅇㅇ</p>
58		- <div class="flex justify-center" style="gap: 60px;">
59		- <article >
60		- <div class="flex align-center">
61		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
62		- <p>1</p>
63		- </button>
64		- <img src="../../../../resources/img/img111_56s.png" alt="">
65		- </div>
66		- </article>
67		- <article >
68		- <div class="flex align-center">
69		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
70		- <p>2</p>
71		- </button>
72		- <img src="../../../../resources/img/img112_56s.png" alt="">
73		- </div>
74		- </article>
75		- </div>
76		- </div>
	8	+ </router-link>
77	9	</div>
78		- </div>
79		- <div class="next-btn" @click="goToPage('Chapter3_8')"><img src="../../../../resources/img/right.png" alt=""></div>
	10	+ <div class="title-box mb25 flex align-center mt40">
	11	+ <span class="title mr40">1. Hello WORLD</span>
	12	+ <span class="subtitle">my name is dd</span>
	13	+ </div>
	14	+ <div class="flex justify-between align-center">
	15	+ <div class="pre-btn" @click="goToPage('Chapter3_6')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
	17	+ </div>
	18	+ <div class="content title-box">
	19	+ <p class="title mt25 title-bg">step3.</p>
	20	+ <div class="flex align-center mb30">
	21	+ <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
	22	+ <button>
	23	+ <img
	24	+ src="../../../../resources/img/btn10_s.png"
	25	+ alt=""
	26	+ />
	27	+ </button>
	28	+ </div>
	29	+
	30	+ <div class="text-ct">
	31	+ <div class="time-hint">
	32	+ <button class="hint-btn">HINT</button>
	33	+ <div class="time-bg mt20">
	34	+ <div>
	35	+ <div class="time">
	36	+ <p class="second">{{ timer }}</p>
	37	+ <p class="text">sec</p>
	38	+ </div>
	39	+ </div>
	40	+ </div>
	41	+ </div>
	42	+
	43	+ <div
	44	+ class="pickGroup flex align-center justify-between mt80"
	45	+ style="gap: 100px"
	46	+ v-for="(item, index) in problemDetail"
	47	+ :key="item.id"
	48	+ >
	49	+ <p>{{ index + 1 }}. {{ item.prblmDtlExpln }}</p>
	50	+ <div class="flex justify-center" style="gap: 60px">
	51	+ <article>
	52	+ <div class="flex align-center">
	53	+ <button>
	54	+ <img
	55	+ src="../../../../resources/img/img136_71s.png"
	56	+ alt=""
	57	+ />
	58	+ <p>1</p>
	59	+ </button>
	60	+ <img
	61	+ src="../../../../resources/img/img111_56s.png"
	62	+ alt=""
	63	+ />
	64	+ </div>
	65	+ </article>
	66	+ <article>
	67	+ <div class="flex align-center">
	68	+ <button>
	69	+ <img
	70	+ src="../../../../resources/img/img136_71s.png"
	71	+ alt=""
	72	+ />
	73	+ <p>2</p>
	74	+ </button>
	75	+ <img
	76	+ src="../../../../resources/img/img112_56s.png"
	77	+ alt=""
	78	+ />
	79	+ </div>
	80	+ </article>
	81	+ </div>
	82	+ </div>
	83	+ </div>
	84	+ </div>
	85	+ <div class="next-btn" @click="goToPage('Chapter3_8')">
	86	+ <img src="../../../../resources/img/right.png" alt="" />
	87	+ </div>
	88	+ </div>
80	89	</div>
81		- </div>
82	90	</template>
83	91
84	92	<script>
	93	+import axios from "axios";
	94	+
85	95	export default {
86		- data() {
87		- return {
88		- timer: '00'
89		- }
90		- },
91		- methods: {
92		- goToPage(page) {
93		- this.$router.push({ name: page });
	96	+ data() {
	97	+ return {
	98	+ timer: "00",
	99	+ prblmId: "",
	100	+ problemDetail: [],
	101	+ dataList: [],
	102	+ prblmExpln: null,
	103	+ };
94	104	},
95		- startTimer() {
96		- if (this.intervalId) {
97		- clearInterval(this.intervalId);
98		- }
99		- this.timer = 5;
100		- this.intervalId = setInterval(() => {
101		- if (this.timer > 0) {
102		- this.timer--;
103		- } else {
104		- clearInterval(this.intervalId);
105		- }
106		- }, 1000);
107		- }
108		- },
109		- watch: {
110		-
111		- },
112		- computed: {
113		-
114		- },
115		- components: {
116		- },
117		- mounted() {
118		-
119		- }
120		-}
	105	+ methods: {
	106	+ goToPage(page) {
	107	+ this.$router.push({ name: page });
	108	+ },
	109	+ startTimer() {
	110	+ if (this.intervalId) {
	111	+ clearInterval(this.intervalId);
	112	+ }
	113	+ this.timer = 5;
	114	+ this.intervalId = setInterval(() => {
	115	+ if (this.timer > 0) {
	116	+ this.timer--;
	117	+ } else {
	118	+ clearInterval(this.intervalId);
	119	+ }
	120	+ }, 1000);
	121	+ },
	122	+ problemSearch() {
	123	+ const vm = this;
	124	+ vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
	125	+ axios({
	126	+ url: "problem/problemInfo.json",
	127	+ method: "post",
	128	+ headers: {
	129	+ "Content-Type": "application/json; charset=UTF-8",
	130	+ },
	131	+ data: {
	132	+ prblmId: vm.prblmId,
	133	+ },
	134	+ })
	135	+ .then(function (res) {
	136	+ console.log("problem - response : ", res.data);
	137	+ vm.dataList = res.data.problem;
	138	+ vm.problemDetail = res.data.problemDetail;
	139	+ })
	140	+ .catch(function (error) {
	141	+ console.log("problem - error : ", error);
	142	+ });
	143	+ },
	144	+ },
	145	+ watch: {},
	146	+ computed: {},
	147	+ components: {},
	148	+ mounted() {
	149	+ // this.problemSearch();
	150	+ },
	151	+};
121	152	</script>
122	153	<style scoped>
123	154	.inputbox {
124		- font-size: 38px;
125		- font-family: 'Pretendard-ExtraBold';
	155	+ font-size: 38px;
	156	+ font-family: "Pretendard-ExtraBold";
126	157	}
127	158
128	159	.imgGroup button {
129		- position: relative;
	160	+ position: relative;
130	161	}
131	162
132	163	.imgGroup button p,
133	164	.textbox p {
134		- position: absolute;
135		- top: 50%;
136		- left: 50%;
137		- transform: translate(-50%, -50%);
138		- width: fit-content;
139		- height: fit-content;
140		- background: #ffffffb8;
141		- border-radius: 5px;
142		- padding: 10px;
143		- font-size: 48px;
144		- font-family: 'ONEMobilePOP';
	165	+ position: absolute;
	166	+ top: 50%;
	167	+ left: 50%;
	168	+ transform: translate(-50%, -50%);
	169	+ width: fit-content;
	170	+ height: fit-content;
	171	+ background: #ffffffb8;
	172	+ border-radius: 5px;
	173	+ padding: 10px;
	174	+ font-size: 48px;
	175	+ font-family: "ONEMobilePOP";
145	176	}
146		-.pickGroup{padding: 0px 80px;}
	177	+.pickGroup {
	178	+ padding: 0px 80px;
	179	+}
147	180	.pickGroup p {
148		- font-size: 34px;
149		- font-weight: bold;
	181	+ font-size: 34px;
	182	+ font-weight: bold;
150	183	}
151	184
152	185	.pickGroup button {
153		- position: relative;
154		- margin-right: 30px;
	186	+ position: relative;
	187	+ margin-right: 30px;
155	188	}
156	189
157	190	.pickGroup button p {
158		- font-size: 34px;
159		- color: #c6c6c6;
160		- position: absolute;
161		- top: 50%;
162		- left: 50%;
163		- transform: translate(-50%, -50%);
	191	+ font-size: 34px;
	192	+ color: #c6c6c6;
	193	+ position: absolute;
	194	+ top: 50%;
	195	+ left: 50%;
	196	+ transform: translate(-50%, -50%);
164	197	}
165		-</style> (No newline at end of file)
	198	+</style>

...	...	@@ -1,136 +1,172 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6		- </router-link>
7		- </div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3_8')"><img src="../../../../resources/img/left.png" alt=""></div>
14		- <div class="content title-box">
15		- <p class="title mt25 title-bg">step3.</p>
16		- <div class="flex align-center mb30">
17		- <p class="subtitle2 mr20">그림을 보고 단어를 입력하세요.</p>
18		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
19		- </button> -->
20		- </div>
21		-
22		- <div class="mt50 text-ct">
23		- <div class="time-hint">
24		- <button class="hint-btn">HINT</button>
25		- <div class="time-bg mt20">
26		- <div>
27		- <div class="time">
28		- <p class="second">{{ timer }}</p>
29		- <p class="text">sec</p>
30		- </div>
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
31	7	</div>
32		- </div>
33		- </div>
34		- <div class="imgGroup mt50">
35		- <img src="../../../../resources/img/img115_58s.png" alt="">
36		- <div class=" mt50">
37		- <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요.">
38		-
39		- </div>
40		- </div>
41		-
	8	+ </router-link>
42	9	</div>
43		- </div>
44		- <div class="next-btn" @click="goToPage('Chapter3_10')"><img src="../../../../resources/img/right.png" alt="">
45		- </div>
	10	+ <div class="title-box mb25 flex align-center mt40">
	11	+ <span class="title mr40">1. Hello WORLD</span>
	12	+ <span class="subtitle">my name is dd</span>
	13	+ </div>
	14	+ <div class="flex justify-between align-center">
	15	+ <div class="pre-btn" @click="goToPage('Chapter3_8')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
	17	+ </div>
	18	+ <div class="content title-box">
	19	+ <p class="title mt25 title-bg">step3.</p>
	20	+ <div class="flex align-center mb30">
	21	+ <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
	22	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	23	+ </button> -->
	24	+ </div>
	25	+
	26	+ <div class="mt50 text-ct">
	27	+ <div class="time-hint">
	28	+ <button class="hint-btn">HINT</button>
	29	+ <div class="time-bg mt20">
	30	+ <div>
	31	+ <div class="time">
	32	+ <p class="second">{{ timer }}</p>
	33	+ <p class="text">sec</p>
	34	+ </div>
	35	+ </div>
	36	+ </div>
	37	+ </div>
	38	+ <div class="imgGroup mt50">
	39	+ <img
	40	+ src="../../../../resources/img/img115_58s.png"
	41	+ alt=""
	42	+ />
	43	+ <div class="mt50">
	44	+ <input
	45	+ class="yellow-bd"
	46	+ type="text"
	47	+ name=""
	48	+ id=""
	49	+ placeholder="답을 입력하세요."
	50	+ />
	51	+ </div>
	52	+ </div>
	53	+ </div>
	54	+ </div>
	55	+ <div class="next-btn" @click="goToPage('Chapter3_10')">
	56	+ <img src="../../../../resources/img/right.png" alt="" />
	57	+ </div>
	58	+ </div>
46	59	</div>
47		- </div>
48	60	</template>
49	61
50	62	<script>
	63	+import axios from "axios";
51	64	export default {
52		- data() {
53		- return {
54		- timer: '00',
55		- showButton1: false,
56		- showButton2: false,
57		- showButton3: false,
58		- showButton4: false,
59		- }
60		- },
61		- methods: {
62		- goToPage(page) {
63		- this.$router.push({ name: page });
64		- },
65		- handleDrag(dragNumber) {
66		- // Drag 버튼 숨기기
67		- // 여기서는 상태 관리를 통해 버튼을 제어합니다.
68		- if (dragNumber === 1) {
69		- this.showButton1 = false;
70		- } else if (dragNumber === 2) {
71		- this.showButton2 = false;
72		- } else if (dragNumber === 3) {
73		- this.showButton3 = false;
74		- }
75		- },
76		- showButton(dropNumber) {
77		- // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
78		- // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
79		- if (dropNumber === 1) {
80		- this.showButton1 = true;
81		- } else if (dropNumber === 2) {
82		- this.showButton2 = true;
83		- } else if (dropNumber === 3) {
84		- this.showButton3 = true;
85		- } else if (dropNumber === 4) {
86		- this.showButton4 = true;
87		- }
88		- },
89		- startTimer() {
90		- if (this.intervalId) {
91		- clearInterval(this.intervalId);
92		- }
93		- this.timer = 5;
94		- this.intervalId = setInterval(() => {
95		- if (this.timer > 0) {
96		- this.timer--;
97		- } else {
98		- clearInterval(this.intervalId);
99		- }
100		- }, 1000);
101		- }
102		- },
103		- watch: {
	65	+ data() {
	66	+ return {
	67	+ timer: "00",
	68	+ showButton1: false,
	69	+ showButton2: false,
	70	+ showButton3: false,
	71	+ showButton4: false,
104	72
105		- },
106		- computed: {
107		-
108		- },
109		- components: {
110		- },
111		- mounted() {
112		-
113		- }
114		-}
	73	+ problemDetail: [],
	74	+ dataList: [],
	75	+ prblmExpln: null,
	76	+ };
	77	+ },
	78	+ methods: {
	79	+ goToPage(page) {
	80	+ this.$router.push({ name: page });
	81	+ },
	82	+ handleDrag(dragNumber) {
	83	+ // Drag 버튼 숨기기
	84	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	85	+ if (dragNumber === 1) {
	86	+ this.showButton1 = false;
	87	+ } else if (dragNumber === 2) {
	88	+ this.showButton2 = false;
	89	+ } else if (dragNumber === 3) {
	90	+ this.showButton3 = false;
	91	+ }
	92	+ },
	93	+ showButton(dropNumber) {
	94	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	95	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	96	+ if (dropNumber === 1) {
	97	+ this.showButton1 = true;
	98	+ } else if (dropNumber === 2) {
	99	+ this.showButton2 = true;
	100	+ } else if (dropNumber === 3) {
	101	+ this.showButton3 = true;
	102	+ } else if (dropNumber === 4) {
	103	+ this.showButton4 = true;
	104	+ }
	105	+ },
	106	+ startTimer() {
	107	+ if (this.intervalId) {
	108	+ clearInterval(this.intervalId);
	109	+ }
	110	+ this.timer = 5;
	111	+ this.intervalId = setInterval(() => {
	112	+ if (this.timer > 0) {
	113	+ this.timer--;
	114	+ } else {
	115	+ clearInterval(this.intervalId);
	116	+ }
	117	+ }, 1000);
	118	+ },
	119	+ problemSearch() {
	120	+ const vm = this;
	121	+ vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
	122	+ axios({
	123	+ url: "problem/problemInfo.json",
	124	+ method: "post",
	125	+ headers: {
	126	+ "Content-Type": "application/json; charset=UTF-8",
	127	+ },
	128	+ data: {
	129	+ prblmId: "100",
	130	+ },
	131	+ })
	132	+ .then(function (res) {
	133	+ console.log("problem - response : ", res.data);
	134	+ vm.dataList = res.data.problem;
	135	+ vm.problemDetail = res.data.problemDetail;
	136	+ })
	137	+ .catch(function (error) {
	138	+ console.log("problem - error : ", error);
	139	+ });
	140	+ },
	141	+ },
	142	+ watch: {},
	143	+ computed: {},
	144	+ components: {},
	145	+ mounted() {
	146	+ // this.problemSearch();
	147	+ },
	148	+};
115	149	</script>
116	150	<style scoped>
117		-input.yellow-bd{width: 30%;}
	151	+input.yellow-bd {
	152	+ width: 30%;
	153	+}
118	154	.dropGroup button {
119		- position: relative;
	155	+ position: relative;
120	156	}
121	157
122	158	.dropGroup button p {
123		- font-size: 48px;
	159	+ font-size: 48px;
124	160	}
125	161
126	162	.dragGroup {
127		- background-color: #F2F4F8;
128		- padding: 30px 50px;
129		- width: max-content;
130		- border-radius: 20px;
	163	+ background-color: #f2f4f8;
	164	+ padding: 30px 50px;
	165	+ width: max-content;
	166	+ border-radius: 20px;
131	167	}
132	168
133	169	.dragGroup button p {
134		- font-size: 48px;
	170	+ font-size: 48px;
135	171	}
136		-</style> (No newline at end of file)
	172	+</style>

...	...	@@ -2,7 +2,9 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</div>
8	10	<div class="title-box mb25 flex align-center mt40">
...	...	@@ -10,7 +12,8 @@
10	12	<span class="subtitle">my name is dd</span>
11	13	</div>
12	14	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/left.png" alt="">
	15	+ <div class="pre-btn" @click="goToPage('Chapter3_15')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
14	17	</div>
15	18	<div class="content title-box">
16	19	<p class="title mt25 title-bg">Quiz Result</p>
...	...	@@ -20,83 +23,83 @@
20	23	</button>
21	24	</div> -->
22	25
23		- <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto;">
24		- <div class="wrap-bg ">
25		- <div class="title-box flex mb10 justify-between">
	26	+ <div
	27	+ class="text-ct flex justify-center"
	28	+ style="gap: 150px; margin: 0 auto"
	29	+ >
	30	+ <div class="wrap-bg">
	31	+ <div class="title-box flex mb10 justify-between">
26	32	<p class="title mb20">최종 점수</p>
27		- <button type="button" class="popup-close-btn" @click="closeBtn">
28		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	33	+ <button
	34	+ type="button"
	35	+ class="popup-close-btn"
	36	+ @click="closeBtn"
	37	+ >
	38	+ <svg-icon
	39	+ type="mdi"
	40	+ :path="mdiWindowClose"
	41	+ class="close-btn"
	42	+ ></svg-icon>
29	43	</button>
30	44	</div>
31		- <div style="width: 100%;" class="flex mt30">
	45	+ <div style="width: 100%" class="flex mt30">
32	46	<p class="title5"><em class="yellow">93</em></p>
33	47	<p class="title4 ml10 mr10">/</p>
34	48	<p class="title4">100</p>
35	49	</div>
36	50	</div>
37		- <div class="bg-gray " style="width: 980px;">
38		- <div class="title-box flex mb10 justify-between">
	51	+ <div class="bg-gray" style="width: 980px">
	52	+ <div class="title-box flex mb10 justify-between">
39	53	<p class="title mb20">오답 문제 리스트</p>
40		- <button type="button" class="popup-close-btn" @click="closeBtn">
41		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	54	+ <button
	55	+ type="button"
	56	+ class="popup-close-btn"
	57	+ @click="closeBtn"
	58	+ >
	59	+ <svg-icon
	60	+ type="mdi"
	61	+ :path="mdiWindowClose"
	62	+ class="close-btn"
	63	+ ></svg-icon>
42	64	</button>
43	65	</div>
44		- <article class=" mb20 flex-column result-box" style="gap: 20px;">
45		- <div class="flex justify-between wrap">
	66	+ <article
	67	+ class="mb20 flex-column result-box"
	68	+ style="gap: 20px"
	69	+ >
	70	+ <div
	71	+ class="flex justify-between wrap"
	72	+ v-for="(item, index) in dataList"
	73	+ :key="item.id"
	74	+ >
46	75	<div class="flex align-center">
47		- <div><p class="title1 mr20">1.</p></div>
	76	+ <div>
	77	+ <p class="title1 mr20">
	78	+ {{ index + 1 }}
	79	+ </p>
	80	+ </div>
48	81	<div class="text-lf">
49		- <p class="title1">2교시</p>
	82	+ <p class="title1">
	83	+ {{ item.prblmExpln }}
	84	+ </p>
50	85	</div>
51	86	</div>
52	87	<div>
53		- <div class="flex align-center " style="gap: 10px;"><button type="button"
54		- title="정답 확인" class="yellow-btn">
55		- 정답 확인
56		- </button>
57		- </div>
58		- </div>
59		- </div>
60		- <div class="flex justify-between wrap">
61		- <div class="flex align-center">
62		- <div><p class="title1 mr20">1.</p></div>
63		- <div class="text-lf">
64		- <p class="title1">2교시</p>
65		- </div>
66		- </div>
67		- <div>
68		- <div class="flex align-center " style="gap: 10px;"><button type="button"
69		- title="정답 확인" class="yellow-btn">
70		- 정답 확인
71		- </button>
72		- </div>
73		- </div>
74		- </div>
75		- <div class="flex justify-between wrap">
76		- <div class="flex align-center">
77		- <div><p class="title1 mr20">1.</p></div>
78		- <div class="text-lf">
79		- <p class="title1">2교시</p>
80		- </div>
81		- </div>
82		- <div>
83		- <div class="flex align-center " style="gap: 10px;"><button type="button"
84		- title="정답 확인" class="yellow-btn">
85		- 정답 확인
86		- </button>
87		- </div>
88		- </div>
89		- </div>
90		- <div class="flex justify-between wrap">
91		- <div class="flex align-center">
92		- <div><p class="title1 mr20">1.</p></div>
93		- <div class="text-lf">
94		- <p class="title1">2교시</p>
95		- </div>
96		- </div>
97		- <div>
98		- <div class="flex align-center " style="gap: 10px;"><button type="button"
99		- title="정답 확인" class="yellow-btn">
	88	+ <div
	89	+ class="flex align-center"
	90	+ style="gap: 10px"
	91	+ >
	92	+ <button
	93	+ type="button"
	94	+ title="정답 확인"
	95	+ class="yellow-btn"
	96	+ @click="
	97	+ [
	98	+ handleProblemDetail(item),
	99	+ goToPage(problemType),
	100	+ ]
	101	+ "
	102	+ >
100	103	정답 확인
101	104	</button>
102	105	</div>
...	...	@@ -104,25 +107,36 @@
104	107	</div>
105	108	</article>
106	109	</div>
107		-
108	110	</div>
109	111	</div>
110		- <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt="">
	112	+ <div class="next-btn" @click="goToPage('Chapter3_16')">
	113	+ <img src="../../../../resources/img/right.png" alt="" />
111	114	</div>
112	115	</div>
113	116	</div>
114	117	</template>
115	118
116	119	<script>
	120	+import axios from "axios";
	121	+
117	122	export default {
118	123	data() {
119	124	return {
120		- timer: '00',
	125	+ timer: "00",
121	126	showButton1: false,
122	127	showButton2: false,
123	128	showButton3: false,
124	129	showButton4: false,
125		- }
	130	+
	131	+ // 단원 평가 아이디, 추후 세션으로 받게 변경
	132	+ evalId: "EVAL_000000000000003",
	133	+
	134	+ dataList: [],
	135	+
	136	+ prblmId: "",
	137	+
	138	+ problemType: null,
	139	+ };
126	140	},
127	141	methods: {
128	142	goToPage(page) {
...	...	@@ -164,20 +178,54 @@
164	178	clearInterval(this.intervalId);
165	179	}
166	180	}, 1000);
167		- }
168		- },
169		- watch: {
	181	+ },
	182	+ problemList() {
	183	+ const vm = this;
170	184
171		- },
172		- computed: {
	185	+ axios({
	186	+ url: "problem/evaluationProblemList.json",
	187	+ method: "post",
	188	+ headers: {
	189	+ "Content-Type": "application/json; charset=UTF-8",
	190	+ },
	191	+ data: {
	192	+ evalId: vm.evalId,
	193	+ },
	194	+ })
	195	+ .then(function (res) {
	196	+ console.log("problemList - response : ", res.data);
	197	+ vm.dataList = res.data;
	198	+ })
	199	+ .catch(function (error) {
	200	+ console.log("problemList - error : ", error);
	201	+ });
	202	+ },
173	203
	204	+ handleProblemDetail(item) {
	205	+ sessionStorage.setItem("prblmId", JSON.stringify(item.prblmId));
	206	+ console.log(item.prblmTypeId);
	207	+ if (item.prblmTypeId === "11") {
	208	+ this.problemType = "Chapter3_9";
	209	+ } else if (item.prblmTypeId === "12") {
	210	+ this.problemType = "Chapter3_4";
	211	+ } else if (item.prblmTypeId === "4") {
	212	+ this.problemType = "Chapter3_3";
	213	+ } else if (item.prblmTypeId === "3") {
	214	+ this.problemType = "Chapter3_7";
	215	+ } else if (item.prblmTypeId === "10") {
	216	+ this.problemType = "Chapter3_2";
	217	+ } else if (item.prblmTypeId === "14") {
	218	+ this.problemType = "Chapter3_12";
	219	+ }
	220	+ },
174	221	},
175		- components: {
176		- },
	222	+ watch: {},
	223	+ computed: {},
	224	+ components: {},
177	225	mounted() {
178		-
179		- }
180		-}
	226	+ this.problemList();
	227	+ },
	228	+};
181	229	</script>
182	230	<style scoped>
183	231	.textbox {
...	...	@@ -201,4 +249,4 @@
201	249	.dragGroup button p {
202	250	font-size: 48px;
203	251	}
204		-</style> (No newline at end of file)
	252	+</style>

Delete comment