Commit @52630aa76337fc6d2120fcddbaa209f2283300b6

PsHooN7979 2024-08-23

240823 박세훈 Chapter3 문제 페이지들 수정

@52630aa76337fc6d2120fcddbaa209f2283300b6

f54e18c

52630aa

client/views/pages/AppStore.js

--- client/views/pages/AppStore.js

+++ client/views/pages/AppStore.js


 
 // Local storage에 상태를 저장하는 함수
 function saveStateToLocalStorage(state) {
-  localStorage.setItem("vuexState", JSON.stringify(state));
+    localStorage.setItem("vuexState", JSON.stringify(state));
 }
 
 // Local storage에서 상태를 불러오는 함수
 function loadStateFromLocalStorage() {
-  const savedState = localStorage.getItem("vuexState");
-  if (savedState) {
-    return JSON.parse(savedState);
-  }
-  return {
-    token: null,
-    userId: null,
-    authcd: null,
-    stdId: null,
-    schdlId: null,
-    bookId: null,
-    unitId: null,
-    unitNm: null,
-    LearningId: null,
+    const savedState = localStorage.getItem("vuexState");
+    if (savedState) {
+        return JSON.parse(savedState);
+    }
+    return {
+        token: null,
+        userId: null,
+        authcd: null,
+        stdId: null,
+        schdlId: null,
+        bookId: null,
+        unitId: null,
+        unitNm: null,
+        LearningId: null,
 
-    // 문제
-    currentLearningIds: [],
-    prblmTypeId: null,
-    currentLabel: null,
-    currentProblemIndex: 0,
-    allProblems: [],
+        // 문제
+        currentLearningIds: [],
+        prblmTypeId: null,
+        currentLabel: null,
+        currentProblemIndex: 0,
+        allProblems: [],
+        allAnswers: [],
 
-    // 단어장
-    textId: null,
-    wdBookIdList: [],
-    currentWdBkIndex: 0,
+        // 단어장
+        textId: null,
+        wdBookIdList: [],
+        currentWdBkIndex: 0,
 
-    // 순서
-    seqNum: null,
-  };
+        // 순서
+        seqNum: null,
+    };
 }
 
 export default createStore({
-  state: loadStateFromLocalStorage(),
-  getters: {
-    getUserInfo(state) {
-      return {
-        userId: state.userId,
-        userNm: state.userNm,
-        authcd: state.authcd,
-      };
-    },
-    getStdId(state) {
-      return state.stdId;
-    },
-    getSchdlId(state) {
-      return state.schdlId;
-    },
-    getBookId(state) {
-      return state.bookId;
-    },
-    getUnitId(state) {
-      return state.unitId;
-    },
-    getLearningId(state) {
-      return state.learningId;
-    },
-    getTextId(state) {
-      return state.textId;
-    },
+    state: loadStateFromLocalStorage(),
+    getters: {
+        getUserInfo(state) {
+            return {
+                userId: state.userId,
+                userNm: state.userNm,
+                authcd: state.authcd,
+            };
+        },
+        getStdId(state) {
+            return state.stdId;
+        },
+        getSchdlId(state) {
+            return state.schdlId;
+        },
+        getBookId(state) {
+            return state.bookId;
+        },
+        getUnitId(state) {
+            return state.unitId;
+        },
+        getLearningId(state) {
+            return state.learningId;
+        },
+        getTextId(state) {
+            return state.textId;
+        },
 
-    // 문제
-    currentLearningId(state) {
-      return state.currentLearningIds[state.currentProblemIndex];
-    },
-    currentLabel: (state) => state.currentLabel,
-    currentProblemIndex: (state) => state.currentProblemIndex,
-    seqNum: (state) => state.seqNum,
-    prblmTypeId: (state) => state.prblmTypeId,
-    getAllProblems(state) {
-      return state.allProblems;
-    },
+        // 문제
+        currentLearningId(state) {
+            return state.currentLearningIds[state.currentProblemIndex];
+        },
+        currentLabel: (state) => state.currentLabel,
+        currentProblemIndex: (state) => state.currentProblemIndex,
+        seqNum: (state) => state.seqNum,
+        prblmTypeId: (state) => state.prblmTypeId,
+        getAllProblems(state) {
+            return state.allProblems;
+        },
+        getAllAnswers: state => state.allAnswers,
 
-    // 단어장
-    getWdBookIdList(state) {
-      return state.wdBookIdList;
+        // 단어장
+        getWdBookIdList(state) {
+            return state.wdBookIdList;
+        },
+        getCurrentWdBkIndex: (state) => state.currentWdBkIndex,
     },
-    getCurrentWdBkIndex: (state) => state.currentWdBkIndex,
-  },
-  mutations: {
-    setToken(state, token) {
-      state.token = token;
-    },
-    clearToken(state) {
-      state.token = null;
-      state.userId = null;
-      state.userNm = null;
-      state.authcd = null;
-      state.stdId = null;
-      state.schdlId = null;
-      state.bookId = null;
-      state.unitId = null;
-      state.learningId = null;
-      saveStateToLocalStorage(state);
-    },
-    setUser(state, userId) {
-      state.userId = userId;
-      saveStateToLocalStorage(state);
-    },
-    setUserNm(state, userNm) {
-      state.userNm = userNm;
-      saveStateToLocalStorage(state);
-    },
-    setAuthcd(state, authcd) {
-      state.authcd = authcd;
-      saveStateToLocalStorage(state);
-    },
-    setStdId(state, stdId) {
-      state.stdId = stdId;
-      saveStateToLocalStorage(state);
-    },
-    setSchdlId(state, schdlId) {
-      state.schdlId = schdlId;
-      saveStateToLocalStorage(state);
-    },
-    setBookId(state, bookId) {
-      state.bookId = bookId;
-      saveStateToLocalStorage(state);
-    },
-    setUnitId(state, unitId) {
-      state.unitId = unitId;
-      saveStateToLocalStorage(state);
-    },
-    setLearningId(state, learningId) {
-      state.learningId = learningId;
-      saveStateToLocalStorage(state);
-    },
-    setTextId(state, textId) {
-      state.textId = textId;
-      saveStateToLocalStorage(state);
-    },
+    mutations: {
+        setToken(state, token) {
+            state.token = token;
+        },
+        clearToken(state) {
+            state.token = null;
+            state.userId = null;
+            state.userNm = null;
+            state.authcd = null;
+            state.stdId = null;
+            state.schdlId = null;
+            state.bookId = null;
+            state.unitId = null;
+            state.learningId = null;
+            saveStateToLocalStorage(state);
+        },
+        setUser(state, userId) {
+            state.userId = userId;
+            saveStateToLocalStorage(state);
+        },
+        setUserNm(state, userNm) {
+            state.userNm = userNm;
+            saveStateToLocalStorage(state);
+        },
+        setAuthcd(state, authcd) {
+            state.authcd = authcd;
+            saveStateToLocalStorage(state);
+        },
+        setStdId(state, stdId) {
+            state.stdId = stdId;
+            saveStateToLocalStorage(state);
+        },
+        setSchdlId(state, schdlId) {
+            state.schdlId = schdlId;
+            saveStateToLocalStorage(state);
+        },
+        setBookId(state, bookId) {
+            state.bookId = bookId;
+            saveStateToLocalStorage(state);
+        },
+        setUnitId(state, unitId) {
+            state.unitId = unitId;
+            saveStateToLocalStorage(state);
+        },
+        setLearningId(state, learningId) {
+            state.learningId = learningId;
+            saveStateToLocalStorage(state);
+        },
+        setTextId(state, textId) {
+            state.textId = textId;
+            saveStateToLocalStorage(state);
+        },
 
-    // 순서
-    // setSeqNum(state, seqNum) {
-    //   state.seqNum = seqNum;
-    //   saveStateToLocalStorage(state);
-    // },
+        // 순서
+        // setSeqNum(state, seqNum) {
+        //   state.seqNum = seqNum;
+        //   saveStateToLocalStorage(state);
+        // },
 
-    // 문제
-    setLearningData(state, payload) {
-      state.currentLearningIds = payload.learning_id; // Array of IDs
-      state.currentLabel = payload.label;
-      state.currentProblemIndex = 0; // Reset to the first problem
-      state.prblmTypeId = payload.prblmTypeId;
-      // 순서
-      state.seqNum = payload.seqNum;
-      saveStateToLocalStorage(state);
-    },
-    incrementProblemIndex(state) {
-      if (state.currentProblemIndex < state.currentLearningIds.length - 1) {
-        state.currentProblemIndex++;
-        saveStateToLocalStorage(state);
-      }
-    },
-    decrementProblemIndex(state) {
-      if (state.currentProblemIndex > 0) {
-        state.currentProblemIndex--;
-        saveStateToLocalStorage(state);
-      }
-    },
-    saveOrUpdateProblem(state, problemData) {
-      const existingProblemIndex = state.allProblems.findIndex(
-        (problem) => problem.prblmNumber === problemData.prblmNumber
-      );
+        // 문제
+        setLearningData(state, payload) {
+            state.currentLearningIds = payload.learning_id; // Array of IDs
+            state.currentLabel = payload.label;
+            state.currentProblemIndex = 0; // Reset to the first problem
+            state.prblmTypeId = payload.prblmTypeId;
+            // 순서
+            state.seqNum = payload.seqNum;
+            saveStateToLocalStorage(state);
+        },
+        incrementProblemIndex(state) {
+            if (state.currentProblemIndex < state.currentLearningIds.length - 1) {
+                state.currentProblemIndex++;
+                saveStateToLocalStorage(state);
+            }
+        },
+        decrementProblemIndex(state) {
+            if (state.currentProblemIndex > 0) {
+                state.currentProblemIndex--;
+                saveStateToLocalStorage(state);
+            }
+        },
+        saveOrUpdateProblem(state, problemData) {
+            const existingProblemIndex = state.allProblems.findIndex(
+                (problem) => problem.prblmNumber === problemData.prblmNumber
+            );
 
-      if (existingProblemIndex !== -1) {
-        // 문제 데이터 업데이트
-        state.allProblems[existingProblemIndex] = problemData;
-      } else {
-        // 새로운 문제 추가
-        state.allProblems.push(problemData);
-      }
-    },
+            if (existingProblemIndex !== -1) {
+                // 문제 데이터 업데이트
+                state.allProblems[existingProblemIndex] = problemData;
+            } else {
+                // 새로운 문제 추가
+                state.allProblems.push(problemData);
+            }
+        },
+        addOrUpdateProblemAttempt(state, answerData) {
+            if (!state.allAnswers) {
+                state.allAnswers = [];
+            }
 
-    // 단어장
-    setWdBookIdList(state, wdBookIdList) {
-      state.wdBookIdList = wdBookIdList;
-      saveStateToLocalStorage(state);
-    },
-    setCurrentWdBkIndex(state, currentWdBkIndex) {
-      state.currentWdBkIndex = currentWdBkIndex;
-      saveStateToLocalStorage(state);
-    },
-  },
-  actions: {
-    login({ commit }, token) {
-      commit("setToken", token);
-      localStorage.setItem("token", token);
-    },
-    logout({ commit }) {
-      commit("clearToken");
-      localStorage.removeItem("token");
-    },
-    updateStdId({ commit }, payload) {
-      return new Promise((resolve) => {
-        commit("setStdId", payload);
-        resolve();
-      });
-    },
-    updateSchdlId({ commit }, payload) {
-      return new Promise((resolve) => {
-        commit("setSchdlId", payload);
-        resolve();
-      });
-    },
-    updateBookId({ commit }, payload) {
-      return new Promise((resolve) => {
-        commit("setBookId", payload);
-        resolve();
-      });
-    },
-    updateUnitId({ commit }, payload) {
-      return new Promise((resolve) => {
-        commit("setUnitId", payload);
-        resolve();
-      });
-    },
-    updateLearningId({ commit }, learningId) {
-      commit("setLearningId", learningId);
-    },
-    updateLearningData({ commit }, payload) {
-      commit("setLearningData", payload);
-    },
-    updateTextId({ commit }, textId) {
-      commit("setTextId", textId);
-    },
+            const existingEntryIndex = state.allAnswers.findIndex(
+                answer => answer.prblmId === answerData.prblmId
+            );
 
-    // 문제
-    goToNextProblem({ commit }) {
-      commit("incrementProblemIndex");
-    },
-    goToPreviousProblem({ commit }) {
-      commit("decrementProblemIndex");
-    },
-    saveProblemData({ commit }, problemData) {
-      commit("saveOrUpdateProblem", problemData);
-    },
+            if (existingEntryIndex !== -1) {
+                // 정답 데이터 업데이트
+                state.allAnswers[existingEntryIndex] = answerData;
+            } else {
+                // 새로운 정답 추가
+                state.allAnswers.push(answerData);
+            }
+        },
 
-    // 단어장
-    updateWdBookIdList({ commit }, wdBookIdList) {
-      commit("setWdBookIdList", wdBookIdList);
+        // 단어장
+        setWdBookIdList(state, wdBookIdList) {
+            state.wdBookIdList = wdBookIdList;
+            saveStateToLocalStorage(state);
+        },
+        setCurrentWdBkIndex(state, currentWdBkIndex) {
+            state.currentWdBkIndex = currentWdBkIndex;
+            saveStateToLocalStorage(state);
+        },
     },
-    updateCurrentWdBkIndex({ commit }, currentWdBkIndex) {
-      commit("setCurrentWdBkIndex", currentWdBkIndex);
-    },
+    actions: {
+        login({ commit }, token) {
+            commit("setToken", token);
+            localStorage.setItem("token", token);
+        },
+        logout({ commit }) {
+            commit("clearToken");
+            localStorage.removeItem("token");
+        },
+        updateStdId({ commit }, payload) {
+            return new Promise((resolve) => {
+                commit("setStdId", payload);
+                resolve();
+            });
+        },
+        updateSchdlId({ commit }, payload) {
+            return new Promise((resolve) => {
+                commit("setSchdlId", payload);
+                resolve();
+            });
+        },
+        updateBookId({ commit }, payload) {
+            return new Promise((resolve) => {
+                commit("setBookId", payload);
+                resolve();
+            });
+        },
+        updateUnitId({ commit }, payload) {
+            return new Promise((resolve) => {
+                commit("setUnitId", payload);
+                resolve();
+            });
+        },
+        updateLearningId({ commit }, learningId) {
+            commit("setLearningId", learningId);
+        },
+        updateLearningData({ commit }, payload) {
+            commit("setLearningData", payload);
+        },
+        updateTextId({ commit }, textId) {
+            commit("setTextId", textId);
+        },
 
-    // 순서
-    // updateSeqNum({ commit }) {
-    //   commit("setSeqNum", seqNum);
-    // },
-  },
+        // 문제
+        goToNextProblem({ commit }) {
+            commit("incrementProblemIndex");
+        },
+        goToPreviousProblem({ commit }) {
+            commit("decrementProblemIndex");
+        },
+        saveProblemData({ commit }, problemData) {
+            commit("saveOrUpdateProblem", problemData);
+        },
+        saveProblemAttempt({ commit }, answerData) {
+            commit('addOrUpdateProblemAttempt', answerData);
+        },
+
+        // 단어장
+        updateWdBookIdList({ commit }, wdBookIdList) {
+            commit("setWdBookIdList", wdBookIdList);
+        },
+        updateCurrentWdBkIndex({ commit }, currentWdBkIndex) {
+            commit("setCurrentWdBkIndex", currentWdBkIndex);
+        },
+
+        // 순서
+        // updateSeqNum({ commit }) {
+        //   commit("setSeqNum", seqNum);
+        // },
+    },
 });

f54e18c

52630aa

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

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

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


 <template>
-    <div id="Chapter1_1" class="content-wrap">
-        <div style="margin: 30px 0px 50px; width: 20%">
-            <router-link to="/MyPlan.page">
-                <div class="logo mb25">
-                    <img src="../../../../resources/img/logo2.png" alt="" />
-                </div>
-            </router-link>
+  <div id="Chapter1_1" class="content-wrap">
+    <div style="margin: 30px 0px 50px; width: 20%">
+      <router-link to="/MyPlan.page">
+        <div class="logo mb25">
+          <img src="../../../../resources/img/logo2.png" alt="" />
         </div>
-        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
-            <div>
-                <span class="title mr40">1. Hello WORLD</span>
-                <span class="subtitle">my name is dd</span>
-            </div>
-            <button class="completeBtn" @click="complete">학습 종료</button>
-        </div>
-        <div class="flex justify-between align-center">
-            <div class="pre-btn" @click="previousProblem()">
-                <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" style="justify-content: space-between">
-                    <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
-                </div>
-
-                <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px">
-                    <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">
-                        <div class="flex" style="gap: 60px">
-                            <img src="../../../../resources/img/img106_48s.png" alt="" />
-                        </div>
-                    </div>
-                    <div class="pickGroup">
-                        <article class="flex justify-center mb50" style="gap: 60px"
-                            v-for="(item, index) in problemDetail" :key="index">
-                            <div class="flex" @click="handleClick(item.prblmDtlExpln)">
-                                <button>
-                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                    <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
-                                </button>
-                                <p>{{ item.prblmDtlExpln }}</p>
-                            </div>
-                        </article>
-                    </div>
-                </div>
-                <button class="submit-button" @click="handleSubmit()"
-                    v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-            </div>
-            <div class="next-btn" @click="nextProblem()">
-                <img src="../../../../resources/img/right.png" alt="" />
-            </div>
-        </div>
+      </router-link>
     </div>
+    <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
+      </div>
+      <button class="completeBtn" @click="complete">학습 종료</button>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="previousProblem()">
+        <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+      </div>
+      <div class="content title-box">
+        ,,,
+        <p class="title mt25 title-bg">step3.</p>
+        <div class="flex align-center mb30" style="justify-content: space-between">
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+        </div>
+
+        <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px">
+          <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">
+            <div class="flex" style="gap: 60px">
+              <img src="../../../../resources/img/img106_48s.png" alt="" />
+            </div>
+          </div>
+          <div class="pickGroup">
+            <article class="flex justify-center mb50" style="gap: 60px" v-for="(item, index) in problemDetail"
+              :key="index">
+              <div class="flex" @click="handleClick(item.prblmDtlExpln)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
+                </button>
+                <p>{{ item.prblmDtlExpln }}</p>
+              </div>
+            </article>
+          </div>
+        </div>
+        <button class="submit-button" @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
+      </div>
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 
 import axios from "axios";
 export default {
-    data() {
-        return {
-            timer: "00",
-            selectedButton: null, // 선택한 버튼
-            prblm_id: [],
-            unit_id: null,
-            dataList: [],
-            problemDetail: [],
-            currentIndex: null,
-            learningIdsLength: null,
-        };
+  data() {
+    return {
+      timer: "00",
+      selectedButton: null, // 선택한 버튼
+      prblm_id: [],
+      unit_id: null,
+      dataList: [],
+      problemDetail: [],
+      currentIndex: null,
+      learningIdsLength: null,
+    };
+  },
+  methods: {
+    complete() {
+      const { unit_id, book_id } = this.$route.query;
+      this.$router.push({ name: 'Dashboard', query: { value: 8, unit_id, book_id } });
     },
-    methods: {
-        complete() {
-            const { unit_id, book_id } = this.$route.query;
-            this.$router.push({ name: 'Dashboard', query: { value: 8, unit_id, book_id } });
-        },
-        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);
-        },
-        handleClick(answer) {
-            console.log(answer)
-            this.selectedButton = answer;
-        },
-        // 제출하기 버튼
-        handleSubmit() {
-            console.log("선택된 번호 : ", this.selectedButton);
-        },
-        getProblem() {
-            const vm = this;
-            const prblmId = this.currentLearningId.prblm_id;
-            axios({
-                url: "problem/problemInfo.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    prblmId: 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);
-                });
-        },
-        nextProblem() {
-            const problemData = {
-                prblmImfo: this.currentLearningId,
-                prblmNumber: this.currentProblemIndex,
-                prblmAns: this.selectedButton
-            }
-            this.$store.dispatch('saveProblemData', problemData);
-            console.log(this.$store.getters.getAllProblems)
-            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-                this.$store.dispatch('goToNextProblem');
-                this.handleProblemDetail(this.currentLearningId);
-                this.goToPage(this.problemType);
-            } else {
-                // 마지막 문제면 이동
-                this.goToPage("Chapter4")
-            }
-        },
-        previousProblem() {
-            if (this.currentProblemIndex > 0) {
-                this.$store.dispatch('goToPreviousProblem');
-                this.handleProblemDetail(this.currentLearningId);
-                this.goToPage(this.problemType);
-            }
-        },
-
-        handleProblemDetail(item) {
-            if (item.prblm_type_id === "prblm_type_001") {
-                this.problemType = "Chapter3";
-            } else if (item.prblm_type_id === "prblm_type_002") {
-                this.problemType = "Chapter3_1";
-            } else if (item.prblm_type_id === "prblm_type_003") {
-                this.problemType = "Chapter3_2";
-            } else if (item.prblm_type_id === "prblm_type_004") {
-                this.problemType = "Chapter3_3";
-            } else if (item.prblm_type_id === "prblm_type_005") {
-                this.problemType = "Chapter3_3_1";
-            } else if (item.prblm_type_id === "prblm_type_006") {
-                this.problemType = "Chapter3_4";
-            } else if (item.prblm_type_id === "prblm_type_007") {
-                this.problemType = "Chapter3_5";
-            } else if (item.prblm_type_id === "prblm_type_008") {
-                this.problemType = "Chapter3_6";
-            } else if (item.prblm_type_id === "prblm_type_009") {
-                this.problemType = "Chapter3_7";
-            } else if (item.prblm_type_id === "prblm_type_010") {
-                this.problemType = "Chapter3_8";
-            } else if (item.prblm_type_id === "prblm_type_011") {
-                this.problemType = "Chapter3_9";
-            } else if (item.prblm_type_id === "prblm_type_012") {
-                this.problemType = "Chapter3_10";
-            } else if (item.prblm_type_id === "prblm_type_013") {
-                this.problemType = "Chapter3_11";
-            } else if (item.prblm_type_id === "prblm_type_014") {
-                this.problemType = "Chapter3_12";
-            } else if (item.prblm_type_id === "prblm_type_015") {
-                this.problemType = "Chapter3_13";
-            } else if (item.prblm_type_id === "prblm_type_016") {
-                this.problemType = "Chapter3_14";
-            } else if (item.prblm_type_id === "prblm_type_017") {
-                this.problemType = "Chapter3_15";
-            } else if (item.prblm_type_id === "prblm_type_018") {
-                this.problemType = "Chapter2_8";
-            } else if (item.prblm_type_id === "prblm_type_019") {
-                this.problemType = "Chapter2_7";
-            } else if (item.prblm_type_id === "prblm_type_020") {
-                this.problemType = "Chapter2_5";
-            } else if (item.prblm_type_id === "prblm_type_021") {
-                this.problemType = "Chapter2_6";
-            } else if (item.prblm_type_id === "prblm_type_022") {
-                this.problemType = "Chapter2_10";
-            } else if (item.prblm_type_id === "prblm_type_023") {
-                this.problemType = "Chapter2_11";
-            } else if (item.prblm_type_id === "prblm_type_024") {
-                this.problemType = "Chapter2_13";
-            }
-        },
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    watch: {},
-    computed: {
-        currentLearningId() {
-            return this.$store.getters.currentLearningId;
-        },
-        currentLabel() {
-            return this.$store.getters.currentLabel;
-        },
-        currentProblemIndex() {
-            return this.$store.getters.currentProblemIndex;
-        },
-        isPreviousButtonDisabled() {
-            return this.currentProblemIndex === 0;
-        },
-        getAllProblems() {
-            return this.$store.getters.getAllProblems;
-        },
-        getStdId() {
-            return this.$store.getters.getStdId;
+    startTimer() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
         }
+      }, 1000);
     },
-    created() {
-        console.log('Current Learning ID:', this.currentLearningId);
-        console.log('Current Label:', this.currentLabel);
-        console.log('Current Problem Index:', this.currentProblemIndex);
+    handleClick(answer) {
+      console.log(answer)
+      this.selectedButton = answer;
+    },
+    // 제출하기 버튼
+    handleSubmit() {
+      const problemData = {
+        prblmInfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
+      this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
+      console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
 
-        // Fetch or process the current problem based on `currentLearningId`
+      axios({
+        url: "problemLog/insertProblemLog.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: this.$store.getters.getAllAnswers,
+      }).then(function (res) {
+        console.log("problem - response : ", res.data);
+      })
+        .catch(function (error) {
+          console.log("problem - error : ", error);
+        });
+
     },
-    components: {},
-    mounted() {
-        this.getProblem()
+    getProblem() {
+      const vm = this;
+      const prblmId = this.currentLearningId.prblm_id;
+      axios({
+        url: "problem/problemInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          prblmId: 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);
+        });
     },
+    nextProblem() {
+      const problemData = {
+        prblmInfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
+      this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
+      console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
+      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
+        this.$store.dispatch('goToNextProblem');
+        this.handleProblemDetail(this.currentLearningId);
+        this.goToPage(this.problemType);
+      }
+    },
+    previousProblem() {
+      if (this.currentProblemIndex > 0) {
+        this.$store.dispatch('goToPreviousProblem');
+        this.handleProblemDetail(this.currentLearningId);
+        this.goToPage(this.problemType);
+      }
+    },
+
+    handleProblemDetail(item) {
+      if (item.prblm_type_id === "prblm_type_001") {
+        this.problemType = "Chapter3";
+      } else if (item.prblm_type_id === "prblm_type_002") {
+        this.problemType = "Chapter3_1";
+      } else if (item.prblm_type_id === "prblm_type_003") {
+        this.problemType = "Chapter3_2";
+      } else if (item.prblm_type_id === "prblm_type_004") {
+        this.problemType = "Chapter3_3";
+      } else if (item.prblm_type_id === "prblm_type_005") {
+        this.problemType = "Chapter3_3_1";
+      } else if (item.prblm_type_id === "prblm_type_006") {
+        this.problemType = "Chapter3_4";
+      } else if (item.prblm_type_id === "prblm_type_007") {
+        this.problemType = "Chapter3_5";
+      } else if (item.prblm_type_id === "prblm_type_008") {
+        this.problemType = "Chapter3_6";
+      } else if (item.prblm_type_id === "prblm_type_009") {
+        this.problemType = "Chapter3_7";
+      } else if (item.prblm_type_id === "prblm_type_010") {
+        this.problemType = "Chapter3_8";
+      } else if (item.prblm_type_id === "prblm_type_011") {
+        this.problemType = "Chapter3_9";
+      } else if (item.prblm_type_id === "prblm_type_012") {
+        this.problemType = "Chapter3_10";
+      } else if (item.prblm_type_id === "prblm_type_013") {
+        this.problemType = "Chapter3_11";
+      } else if (item.prblm_type_id === "prblm_type_014") {
+        this.problemType = "Chapter3_12";
+      } else if (item.prblm_type_id === "prblm_type_015") {
+        this.problemType = "Chapter3_13";
+      } else if (item.prblm_type_id === "prblm_type_016") {
+        this.problemType = "Chapter3_14";
+      } else if (item.prblm_type_id === "prblm_type_017") {
+        this.problemType = "Chapter3_15";
+      } else if (item.prblm_type_id === "prblm_type_018") {
+        this.problemType = "Chapter2_8";
+      } else if (item.prblm_type_id === "prblm_type_019") {
+        this.problemType = "Chapter2_7";
+      } else if (item.prblm_type_id === "prblm_type_020") {
+        this.problemType = "Chapter2_5";
+      } else if (item.prblm_type_id === "prblm_type_021") {
+        this.problemType = "Chapter2_6";
+      } else if (item.prblm_type_id === "prblm_type_022") {
+        this.problemType = "Chapter2_10";
+      } else if (item.prblm_type_id === "prblm_type_023") {
+        this.problemType = "Chapter2_11";
+      } else if (item.prblm_type_id === "prblm_type_024") {
+        this.problemType = "Chapter2_13";
+      }
+    },
+  },
+  watch: {},
+  computed: {
+    currentLearningId() {
+      return this.$store.getters.currentLearningId;
+    },
+    currentLabel() {
+      return this.$store.getters.currentLabel;
+    },
+    currentProblemIndex() {
+      return this.$store.getters.currentProblemIndex;
+    },
+    isPreviousButtonDisabled() {
+      return this.currentProblemIndex === 0;
+    },
+    getAllProblems() {
+      return this.$store.getters.getAllProblems;
+    },
+    getStdId() {
+      return this.$store.getters.getStdId;
+    }
+  },
+  created() {
+    console.log('Current Learning ID:', this.currentLearningId);
+    console.log('Current Label:', this.currentLabel);
+    console.log('Current Problem Index:', this.currentProblemIndex);
+
+    // Fetch or process the current problem based on `currentLearningId`
+  },
+  components: {},
+  mounted() {
+    this.getProblem()
+  },
 };
 </script>
 <style scoped>
 .imgGroup {
-    width: fit-content;
+  width: fit-content;
 }
 
 .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 {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
 .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%);
 }
 
 .pickGroup article img {
-    object-fit: contain;
-    width: -webkit-fill-available;
+  object-fit: contain;
+  width: -webkit-fill-available;
 }
 
 .pickGroup article>div>p {
-    font-size: 64px;
+  font-size: 64px;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
 }
 
 .pickGroup button p.active {
-    color: #000;
-    /* 선택된 버튼의 숫자 색을 더 진하게 */
+  color: #000;
+  /* 선택된 버튼의 숫자 색을 더 진하게 */
 }
 
 .completeBtn {
-    margin-right: 100px;
-    background-color: #ffba08;
-    padding: 10px 30px;
-    border-radius: 10px;
-    font-size: 28px;
-    font-family: "ONEMobilePOPOTF";
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
 }
 
 .submit-button {
-    position: absolute;
-    background-color: #ffba08;
-    padding: 10px 30px;
-    border-radius: 10px;
-    font-size: 28px;
-    font-family: "ONEMobilePOPOTF";
-    right: 5rem;
-    bottom: 3rem;
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
 }
 </style>

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div>
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

     },
     // 제출하기 버튼
     handleSubmit() {
-      console.log("선택된 번호 : ", this.selectedButton);
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
 
 

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   transform: translate(-50%, -50%);
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .submit-button {
   position: absolute;
   background-color: #ffba08;

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div>
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

       console.log("playing");
     },
     handleSubmit() {
-      console.log("정답 : ", this.answer);
-      this.answer = null;
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     getProblem() {
       const vm = this;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   font-size: 48px;
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .submit-button {
   position: absolute;
   background-color: #ffba08;

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" />
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>

       }, 1000);
     },
     handleSubmit() {
-      let answer = this.answer1 + this.text + this.answer2;
-      console.log("정답 : ", answer);
-      this.answer1 = null;
-      this.answer2 = null;
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     getProblem() {
       const vm = this;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   font-size: 48px;
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .submit-button {
   position: absolute;
   background-color: #ffba08;

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" />
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>

       }
     },
     handleSubmit() {
-      // 정답을 체크하거나 제출 시 로직 처리
-      let answer = this.userAnswer.join(" ");
-      console.log("정답 : ", answer);
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     getProblem() {
       const vm = this;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   font-family: "ONEMobilePOPOTF";
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .submit-button {
   position: absolute;
   background-color: #ffba08;

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" />
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>

       };
     },
     handleSubmit() {
-      // 매칭된 결과를 확인하거나 제출 시 로직 처리
-      console.log("Matched pairs: ", this.pairs);
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     updateSVGSize() {
       const container = document.querySelector(".position-relative");

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   pointer-events: none;
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .blue-c {
   width: 20px;
   height: 20px;

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" />
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>

         <button class="submit-button" @click="handleSubmit()"
           v-if="currentIndex === learningIdsLength - 1">제출하기</button>
       </div>
-      <div class="next-btn" @click="nextProblem(answer)"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem(answer)"><img src="../../../../resources/img/right.png" alt=""
+          :class="{ active: currentIndex === learningIdsLength - 1 }" />
       </div>
     </div>
   </div>

       problemDetail: [],
       currentIndex: null,
       learningIdsLength: null,
+      stdId: null,
     };
   },
   methods: {

         }
       }, 1000);
     },
+    handleSubmit() {
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
+    },
+
     getProblem() {
       const vm = this;
       const prblmId = this.currentLearningId.prblm_id;

     },
     nextProblem(answer) {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: answer
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: answer,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

     currentProblemIndex() {
       return this.$store.getters.currentProblemIndex;
     },
+    getAllAnswers() {
+      return this.$store.getters.getAllAnswers;
+    },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
     }

   font-size: 48px;
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .submit-button {
   position: absolute;
   background-color: #ffba08;

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" />
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>

         }
       }, 1000);
     },
+
+    handleSubmit() {
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
+    },
     getProblem() {
       const vm = this;
       const prblmId = this.currentLearningId.prblm_id;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   font-size: 48px;
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .submit-button {
   position: absolute;
   background-color: #ffba08;

f54e18c

52630aa

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

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

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


     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="previousProblem()">
-        <img src="../../../../resources/img/left.png" alt="" />
+        <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>

     },
     // 제출하기 버튼
     handleSubmit() {
-      console.log("선택된 번호 : ", this.selectedButton);
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     getProblem() {
       const vm = this;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   transform: translate(-50%, -50%);
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .pickGroup button p.active {
   color: #000;
   /* 선택된 버튼의 숫자 색을 더 진하게 */

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div>
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

         <button class="submit-button" @click="handleSubmit()"
           v-if="currentIndex === learningIdsLength - 1">제출하기</button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt=""
+          :class="{ active: currentIndex === learningIdsLength - 1 }" />
       </div>
     </div>
   </div>

     },
     // 제출하기 버튼
     handleSubmit() {
-      console.log("선택된 번호 : ", this.selectedButton);
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage("Chapter4")
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     getProblem() {
       const vm = this;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 
+
     // Fetch or process the current problem based on `currentLearningId`
   },
   components: {},

   transform: translate(-50%, -50%);
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.next-btn img.active {
+  visibility: hidden;
+}
+
 .pickGroup button p.active {
   color: #000;
   /* 선택된 버튼의 숫자 색을 더 진하게 */

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div>
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

     },
     // 제출하기 버튼
     handleSubmit() {
-      console.log("선택된 번호 : ", this.selectedButton);
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     getProblem() {
       const vm = this;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   transform: translate(-50%, -50%);
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .pickGroup button p.active {
   color: #000;
   /* 선택된 버튼의 숫자 색을 더 진하게 */

f54e18c

52630aa

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

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

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


     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="previousProblem()">
-        <img src="../../../../resources/img/left.png" alt="" />
+        <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>

       this.selectedButton = number;
     },
     handleSubmit() {
-      console.log("정답 : ", this.answer);
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     getProblem() {
       const vm = this;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   transform: translate(-50%, -50%);
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .pickGroup button p.active {
   color: #000000;
 }

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div>
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

     },
     // 제출하기 버튼
     handleSubmit() {
-      console.log("선택된 번호 : ", this.selectedButton);
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     getProblem() {
       const vm = this;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   transform: translate(-50%, -50%);
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .pickGroup button p.active {
   color: #000000;
 }

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div>
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

       this.selectedButton = number;
     },
     handleSubmit() {
-      console.log("정답 : ", this.selectedIndex + 1);
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     playAudio() {
       const audio = document.getElementById("audio-player");

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   transform: translate(-50%, -50%);
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .pickGroup button p.active {
   color: #000000;
 }

f54e18c

52630aa

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

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

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


     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="previousProblem()">
-        <img src="../../../../resources/img/left.png" alt="" />
+        <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>

       console.log(this.selectedButton);
     },
     handleSubmit() {
-      console.log("정답 : ", this.selectedButton);
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     getProblem() {
       const vm = this;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   transform: translate(-50%, -50%);
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .pickGroup button p.active {
   color: #000000;
 }

f54e18c

52630aa

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div>
+      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
+          :class="{ active: currentIndex === 0 }" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

       }, 1000);
     },
     handleSubmit() {
-      console.log("정답 : ", this.answer);
-      this.answer = null;
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     getProblem() {
       const vm = this;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   gap: 20px;
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .submit-button {
   position: absolute;
   background-color: #ffba08;

f54e18c

52630aa

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

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

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


     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="previousProblem()">
-        <img src="../../../../resources/img/left.png" alt="" />
+        <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>

         }
       }, 1000);
     },
-    submitAnswer() {
-      console.log(this.answer);
+    handleSubmit() {
+
+      const userConfirmed = window.confirm("제출 하시겠습니까?");
+      if (userConfirmed) {
+
+        const problemData = {
+          prblmInfo: this.currentLearningId,
+          prblmNumber: this.currentProblemIndex,
+          prblmAns: this.selectedButton
+        };
+
+        const answerData = {
+          prblmId: this.currentLearningId.prblm_id,
+          prblmAns: this.selectedButton,
+          stdId: this.$store.getters.getStdId,
+          prblmLogAnsCnt: 1
+        };
+
+        this.$store.dispatch('saveProblemData', problemData);
+        this.$store.dispatch('saveProblemAttempt', answerData);
+
+        console.log(this.$store.getters.getAllProblems);
+        console.log(this.$store.getters.getAllAnswers);
+
+
+        axios({
+          url: "problemLog/insertProblemLog.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: this.$store.getters.getAllAnswers,
+        })
+          .then(function (res) {
+            console.log("problem - response : ", res.data);
+            this.goToPage('Chapter4')
+          })
+          .catch(function (error) {
+            console.log("problem - error : ", error);
+          });
+      } else {
+        console.log("Submission canceled by the user.");
+      }
     },
     getProblem() {
       const vm = this;

     },
     nextProblem() {
       const problemData = {
-        prblmImfo: this.currentLearningId,
+        prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
         prblmAns: this.selectedButton
       }
+      const answerData = {
+        prblmId: this.currentLearningId.prblm_id,
+        prblmAns: this.selectedButton,
+        stdId: this.$store.getters.getStdId,
+        prblmLogAnsCnt: 1
+      }
       this.$store.dispatch('saveProblemData', problemData);
+      this.$store.dispatch('saveProblemAttempt', answerData);
       console.log(this.$store.getters.getAllProblems)
+      console.log(this.$store.getters.getAllAnswers)
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
-      } else {
-        // 마지막 문제면 이동
-        this.goToPage("Chapter4")
       }
     },
     previousProblem() {

   font-size: 48px;
 }
 
+.pre-btn img.active {
+  visibility: hidden;
+}
+
+.pre-btn img.active {
+  visibility: hidden;
+}
+
 .submit-button {
   position: absolute;
   background-color: #ffba08;

Add a comment

Open 0
Closed 0

List

...	...	@@ -10,7 +10,8 @@
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div>
	13	+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
	14	+ :class="{ active: currentIndex === 0 }" /></div>
14	15	<div class="content title-box">
15	16	<p class="title mt25 title-bg">step3.</p>
16	17	<div class="flex align-center mb30">
...	...	@@ -94,7 +95,48 @@
94	95	},
95	96	// 제출하기 버튼
96	97	handleSubmit() {
97		- console.log("선택된 번호 : ", this.selectedButton);
	98	+
	99	+ const userConfirmed = window.confirm("제출 하시겠습니까?");
	100	+ if (userConfirmed) {
	101	+
	102	+ const problemData = {
	103	+ prblmInfo: this.currentLearningId,
	104	+ prblmNumber: this.currentProblemIndex,
	105	+ prblmAns: this.selectedButton
	106	+ };
	107	+
	108	+ const answerData = {
	109	+ prblmId: this.currentLearningId.prblm_id,
	110	+ prblmAns: this.selectedButton,
	111	+ stdId: this.$store.getters.getStdId,
	112	+ prblmLogAnsCnt: 1
	113	+ };
	114	+
	115	+ this.$store.dispatch('saveProblemData', problemData);
	116	+ this.$store.dispatch('saveProblemAttempt', answerData);
	117	+
	118	+ console.log(this.$store.getters.getAllProblems);
	119	+ console.log(this.$store.getters.getAllAnswers);
	120	+
	121	+
	122	+ axios({
	123	+ url: "problemLog/insertProblemLog.json",
	124	+ method: "post",
	125	+ headers: {
	126	+ "Content-Type": "application/json; charset=UTF-8",
	127	+ },
	128	+ data: this.$store.getters.getAllAnswers,
	129	+ })
	130	+ .then(function (res) {
	131	+ console.log("problem - response : ", res.data);
	132	+ this.goToPage('Chapter4')
	133	+ })
	134	+ .catch(function (error) {
	135	+ console.log("problem - error : ", error);
	136	+ });
	137	+ } else {
	138	+ console.log("Submission canceled by the user.");
	139	+ }
98	140	},
99	141
100	142
...	...	@@ -122,19 +164,24 @@
122	164	},
123	165	nextProblem() {
124	166	const problemData = {
125		- prblmImfo: this.currentLearningId,
	167	+ prblmInfo: this.currentLearningId,
126	168	prblmNumber: this.currentProblemIndex,
127	169	prblmAns: this.selectedButton
128	170	}
	171	+ const answerData = {
	172	+ prblmId: this.currentLearningId.prblm_id,
	173	+ prblmAns: this.selectedButton,
	174	+ stdId: this.$store.getters.getStdId,
	175	+ prblmLogAnsCnt: 1
	176	+ }
129	177	this.$store.dispatch('saveProblemData', problemData);
	178	+ this.$store.dispatch('saveProblemAttempt', answerData);
130	179	console.log(this.$store.getters.getAllProblems)
	180	+ console.log(this.$store.getters.getAllAnswers)
131	181	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
132	182	this.$store.dispatch('goToNextProblem');
133	183	this.handleProblemDetail(this.currentLearningId);
134	184	this.goToPage(this.problemType);
135		- } else {
136		- // 마지막 문제면 이동
137		- this.goToPage("Chapter4")
138	185	}
139	186	},
140	187	previousProblem() {
...	...	@@ -264,6 +311,14 @@
264	311	transform: translate(-50%, -50%);
265	312	}
266	313
	314	+.pre-btn img.active {
	315	+ visibility: hidden;
	316	+}
	317	+
	318	+.pre-btn img.active {
	319	+ visibility: hidden;
	320	+}
	321	+
267	322	.submit-button {
268	323	position: absolute;
269	324	background-color: #ffba08;

...	...	@@ -10,7 +10,8 @@
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div>
	13	+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
	14	+ :class="{ active: currentIndex === 0 }" /></div>
14	15	<div class="content title-box">
15	16	<p class="title mt25 title-bg">step3.</p>
16	17	<div class="flex align-center mb30">
...	...	@@ -87,8 +88,48 @@
87	88	console.log("playing");
88	89	},
89	90	handleSubmit() {
90		- console.log("정답 : ", this.answer);
91		- this.answer = null;
	91	+
	92	+ const userConfirmed = window.confirm("제출 하시겠습니까?");
	93	+ if (userConfirmed) {
	94	+
	95	+ const problemData = {
	96	+ prblmInfo: this.currentLearningId,
	97	+ prblmNumber: this.currentProblemIndex,
	98	+ prblmAns: this.selectedButton
	99	+ };
	100	+
	101	+ const answerData = {
	102	+ prblmId: this.currentLearningId.prblm_id,
	103	+ prblmAns: this.selectedButton,
	104	+ stdId: this.$store.getters.getStdId,
	105	+ prblmLogAnsCnt: 1
	106	+ };
	107	+
	108	+ this.$store.dispatch('saveProblemData', problemData);
	109	+ this.$store.dispatch('saveProblemAttempt', answerData);
	110	+
	111	+ console.log(this.$store.getters.getAllProblems);
	112	+ console.log(this.$store.getters.getAllAnswers);
	113	+
	114	+
	115	+ axios({
	116	+ url: "problemLog/insertProblemLog.json",
	117	+ method: "post",
	118	+ headers: {
	119	+ "Content-Type": "application/json; charset=UTF-8",
	120	+ },
	121	+ data: this.$store.getters.getAllAnswers,
	122	+ })
	123	+ .then(function (res) {
	124	+ console.log("problem - response : ", res.data);
	125	+ this.goToPage('Chapter4')
	126	+ })
	127	+ .catch(function (error) {
	128	+ console.log("problem - error : ", error);
	129	+ });
	130	+ } else {
	131	+ console.log("Submission canceled by the user.");
	132	+ }
92	133	},
93	134	getProblem() {
94	135	const vm = this;
...	...	@@ -114,19 +155,24 @@
114	155	},
115	156	nextProblem() {
116	157	const problemData = {
117		- prblmImfo: this.currentLearningId,
	158	+ prblmInfo: this.currentLearningId,
118	159	prblmNumber: this.currentProblemIndex,
119	160	prblmAns: this.selectedButton
120	161	}
	162	+ const answerData = {
	163	+ prblmId: this.currentLearningId.prblm_id,
	164	+ prblmAns: this.selectedButton,
	165	+ stdId: this.$store.getters.getStdId,
	166	+ prblmLogAnsCnt: 1
	167	+ }
121	168	this.$store.dispatch('saveProblemData', problemData);
	169	+ this.$store.dispatch('saveProblemAttempt', answerData);
122	170	console.log(this.$store.getters.getAllProblems)
	171	+ console.log(this.$store.getters.getAllAnswers)
123	172	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
124	173	this.$store.dispatch('goToNextProblem');
125	174	this.handleProblemDetail(this.currentLearningId);
126	175	this.goToPage(this.problemType);
127		- } else {
128		- // 마지막 문제면 이동
129		- this.goToPage("Chapter4")
130	176	}
131	177	},
132	178	previousProblem() {
...	...	@@ -243,6 +289,14 @@
243	289	font-size: 48px;
244	290	}
245	291
	292	+.pre-btn img.active {
	293	+ visibility: hidden;
	294	+}
	295	+
	296	+.pre-btn img.active {
	297	+ visibility: hidden;
	298	+}
	299	+
246	300	.submit-button {
247	301	position: absolute;
248	302	background-color: #ffba08;

...	...	@@ -10,7 +10,8 @@
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" />
	13	+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
	14	+ :class="{ active: currentIndex === 0 }" />
14	15	</div>
15	16	<div class="content title-box">
16	17	<p class="title mt25 title-bg">step3.</p>
...	...	@@ -84,10 +85,48 @@
84	85	}, 1000);
85	86	},
86	87	handleSubmit() {
87		- let answer = this.answer1 + this.text + this.answer2;
88		- console.log("정답 : ", answer);
89		- this.answer1 = null;
90		- this.answer2 = null;
	88	+
	89	+ const userConfirmed = window.confirm("제출 하시겠습니까?");
	90	+ if (userConfirmed) {
	91	+
	92	+ const problemData = {
	93	+ prblmInfo: this.currentLearningId,
	94	+ prblmNumber: this.currentProblemIndex,
	95	+ prblmAns: this.selectedButton
	96	+ };
	97	+
	98	+ const answerData = {
	99	+ prblmId: this.currentLearningId.prblm_id,
	100	+ prblmAns: this.selectedButton,
	101	+ stdId: this.$store.getters.getStdId,
	102	+ prblmLogAnsCnt: 1
	103	+ };
	104	+
	105	+ this.$store.dispatch('saveProblemData', problemData);
	106	+ this.$store.dispatch('saveProblemAttempt', answerData);
	107	+
	108	+ console.log(this.$store.getters.getAllProblems);
	109	+ console.log(this.$store.getters.getAllAnswers);
	110	+
	111	+
	112	+ axios({
	113	+ url: "problemLog/insertProblemLog.json",
	114	+ method: "post",
	115	+ headers: {
	116	+ "Content-Type": "application/json; charset=UTF-8",
	117	+ },
	118	+ data: this.$store.getters.getAllAnswers,
	119	+ })
	120	+ .then(function (res) {
	121	+ console.log("problem - response : ", res.data);
	122	+ this.goToPage('Chapter4')
	123	+ })
	124	+ .catch(function (error) {
	125	+ console.log("problem - error : ", error);
	126	+ });
	127	+ } else {
	128	+ console.log("Submission canceled by the user.");
	129	+ }
91	130	},
92	131	getProblem() {
93	132	const vm = this;
...	...	@@ -113,19 +152,24 @@
113	152	},
114	153	nextProblem() {
115	154	const problemData = {
116		- prblmImfo: this.currentLearningId,
	155	+ prblmInfo: this.currentLearningId,
117	156	prblmNumber: this.currentProblemIndex,
118	157	prblmAns: this.selectedButton
119	158	}
	159	+ const answerData = {
	160	+ prblmId: this.currentLearningId.prblm_id,
	161	+ prblmAns: this.selectedButton,
	162	+ stdId: this.$store.getters.getStdId,
	163	+ prblmLogAnsCnt: 1
	164	+ }
120	165	this.$store.dispatch('saveProblemData', problemData);
	166	+ this.$store.dispatch('saveProblemAttempt', answerData);
121	167	console.log(this.$store.getters.getAllProblems)
	168	+ console.log(this.$store.getters.getAllAnswers)
122	169	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
123	170	this.$store.dispatch('goToNextProblem');
124	171	this.handleProblemDetail(this.currentLearningId);
125	172	this.goToPage(this.problemType);
126		- } else {
127		- // 마지막 문제면 이동
128		- this.goToPage("Chapter4")
129	173	}
130	174	},
131	175	previousProblem() {
...	...	@@ -242,6 +286,14 @@
242	286	font-size: 48px;
243	287	}
244	288
	289	+.pre-btn img.active {
	290	+ visibility: hidden;
	291	+}
	292	+
	293	+.pre-btn img.active {
	294	+ visibility: hidden;
	295	+}
	296	+
245	297	.submit-button {
246	298	position: absolute;
247	299	background-color: #ffba08;

...	...	@@ -10,7 +10,8 @@
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" />
	13	+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
	14	+ :class="{ active: currentIndex === 0 }" />
14	15	</div>
15	16	<div class="content title-box">
16	17	<p class="title mt25 title-bg">step3</p>
...	...	@@ -119,9 +120,48 @@
119	120	}
120	121	},
121	122	handleSubmit() {
122		- // 정답을 체크하거나 제출 시 로직 처리
123		- let answer = this.userAnswer.join(" ");
124		- console.log("정답 : ", answer);
	123	+
	124	+ const userConfirmed = window.confirm("제출 하시겠습니까?");
	125	+ if (userConfirmed) {
	126	+
	127	+ const problemData = {
	128	+ prblmInfo: this.currentLearningId,
	129	+ prblmNumber: this.currentProblemIndex,
	130	+ prblmAns: this.selectedButton
	131	+ };
	132	+
	133	+ const answerData = {
	134	+ prblmId: this.currentLearningId.prblm_id,
	135	+ prblmAns: this.selectedButton,
	136	+ stdId: this.$store.getters.getStdId,
	137	+ prblmLogAnsCnt: 1
	138	+ };
	139	+
	140	+ this.$store.dispatch('saveProblemData', problemData);
	141	+ this.$store.dispatch('saveProblemAttempt', answerData);
	142	+
	143	+ console.log(this.$store.getters.getAllProblems);
	144	+ console.log(this.$store.getters.getAllAnswers);
	145	+
	146	+
	147	+ axios({
	148	+ url: "problemLog/insertProblemLog.json",
	149	+ method: "post",
	150	+ headers: {
	151	+ "Content-Type": "application/json; charset=UTF-8",
	152	+ },
	153	+ data: this.$store.getters.getAllAnswers,
	154	+ })
	155	+ .then(function (res) {
	156	+ console.log("problem - response : ", res.data);
	157	+ this.goToPage('Chapter4')
	158	+ })
	159	+ .catch(function (error) {
	160	+ console.log("problem - error : ", error);
	161	+ });
	162	+ } else {
	163	+ console.log("Submission canceled by the user.");
	164	+ }
125	165	},
126	166	getProblem() {
127	167	const vm = this;
...	...	@@ -147,19 +187,24 @@
147	187	},
148	188	nextProblem() {
149	189	const problemData = {
150		- prblmImfo: this.currentLearningId,
	190	+ prblmInfo: this.currentLearningId,
151	191	prblmNumber: this.currentProblemIndex,
152	192	prblmAns: this.selectedButton
153	193	}
	194	+ const answerData = {
	195	+ prblmId: this.currentLearningId.prblm_id,
	196	+ prblmAns: this.selectedButton,
	197	+ stdId: this.$store.getters.getStdId,
	198	+ prblmLogAnsCnt: 1
	199	+ }
154	200	this.$store.dispatch('saveProblemData', problemData);
	201	+ this.$store.dispatch('saveProblemAttempt', answerData);
155	202	console.log(this.$store.getters.getAllProblems)
	203	+ console.log(this.$store.getters.getAllAnswers)
156	204	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
157	205	this.$store.dispatch('goToNextProblem');
158	206	this.handleProblemDetail(this.currentLearningId);
159	207	this.goToPage(this.problemType);
160		- } else {
161		- // 마지막 문제면 이동
162		- this.goToPage("Chapter4")
163	208	}
164	209	},
165	210	previousProblem() {
...	...	@@ -303,6 +348,14 @@
303	348	font-family: "ONEMobilePOPOTF";
304	349	}
305	350
	351	+.pre-btn img.active {
	352	+ visibility: hidden;
	353	+}
	354	+
	355	+.pre-btn img.active {
	356	+ visibility: hidden;
	357	+}
	358	+
306	359	.submit-button {
307	360	position: absolute;
308	361	background-color: #ffba08;

...	...	@@ -10,7 +10,8 @@
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" />
	13	+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
	14	+ :class="{ active: currentIndex === 0 }" />
14	15	</div>
15	16	<div class="content title-box">
16	17	<p class="title mt25 title-bg">step3</p>
...	...	@@ -149,8 +150,48 @@
149	150	};
150	151	},
151	152	handleSubmit() {
152		- // 매칭된 결과를 확인하거나 제출 시 로직 처리
153		- console.log("Matched pairs: ", this.pairs);
	153	+
	154	+ const userConfirmed = window.confirm("제출 하시겠습니까?");
	155	+ if (userConfirmed) {
	156	+
	157	+ const problemData = {
	158	+ prblmInfo: this.currentLearningId,
	159	+ prblmNumber: this.currentProblemIndex,
	160	+ prblmAns: this.selectedButton
	161	+ };
	162	+
	163	+ const answerData = {
	164	+ prblmId: this.currentLearningId.prblm_id,
	165	+ prblmAns: this.selectedButton,
	166	+ stdId: this.$store.getters.getStdId,
	167	+ prblmLogAnsCnt: 1
	168	+ };
	169	+
	170	+ this.$store.dispatch('saveProblemData', problemData);
	171	+ this.$store.dispatch('saveProblemAttempt', answerData);
	172	+
	173	+ console.log(this.$store.getters.getAllProblems);
	174	+ console.log(this.$store.getters.getAllAnswers);
	175	+
	176	+
	177	+ axios({
	178	+ url: "problemLog/insertProblemLog.json",
	179	+ method: "post",
	180	+ headers: {
	181	+ "Content-Type": "application/json; charset=UTF-8",
	182	+ },
	183	+ data: this.$store.getters.getAllAnswers,
	184	+ })
	185	+ .then(function (res) {
	186	+ console.log("problem - response : ", res.data);
	187	+ this.goToPage('Chapter4')
	188	+ })
	189	+ .catch(function (error) {
	190	+ console.log("problem - error : ", error);
	191	+ });
	192	+ } else {
	193	+ console.log("Submission canceled by the user.");
	194	+ }
154	195	},
155	196	updateSVGSize() {
156	197	const container = document.querySelector(".position-relative");
...	...	@@ -183,19 +224,24 @@
183	224	},
184	225	nextProblem() {
185	226	const problemData = {
186		- prblmImfo: this.currentLearningId,
	227	+ prblmInfo: this.currentLearningId,
187	228	prblmNumber: this.currentProblemIndex,
188	229	prblmAns: this.selectedButton
189	230	}
	231	+ const answerData = {
	232	+ prblmId: this.currentLearningId.prblm_id,
	233	+ prblmAns: this.selectedButton,
	234	+ stdId: this.$store.getters.getStdId,
	235	+ prblmLogAnsCnt: 1
	236	+ }
190	237	this.$store.dispatch('saveProblemData', problemData);
	238	+ this.$store.dispatch('saveProblemAttempt', answerData);
191	239	console.log(this.$store.getters.getAllProblems)
	240	+ console.log(this.$store.getters.getAllAnswers)
192	241	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
193	242	this.$store.dispatch('goToNextProblem');
194	243	this.handleProblemDetail(this.currentLearningId);
195	244	this.goToPage(this.problemType);
196		- } else {
197		- // 마지막 문제면 이동
198		- this.goToPage("Chapter4")
199	245	}
200	246	},
201	247	previousProblem() {
...	...	@@ -345,6 +391,14 @@
345	391	pointer-events: none;
346	392	}
347	393
	394	+.pre-btn img.active {
	395	+ visibility: hidden;
	396	+}
	397	+
	398	+.pre-btn img.active {
	399	+ visibility: hidden;
	400	+}
	401	+
348	402	.blue-c {
349	403	width: 20px;
350	404	height: 20px;

...	...	@@ -2,260 +2,282 @@
2	2
3	3	// Local storage에 상태를 저장하는 함수
4	4	function saveStateToLocalStorage(state) {
5		- localStorage.setItem("vuexState", JSON.stringify(state));
	5	+ localStorage.setItem("vuexState", JSON.stringify(state));
6	6	}
7	7
8	8	// Local storage에서 상태를 불러오는 함수
9	9	function loadStateFromLocalStorage() {
10		- const savedState = localStorage.getItem("vuexState");
11		- if (savedState) {
12		- return JSON.parse(savedState);
13		- }
14		- return {
15		- token: null,
16		- userId: null,
17		- authcd: null,
18		- stdId: null,
19		- schdlId: null,
20		- bookId: null,
21		- unitId: null,
22		- unitNm: null,
23		- LearningId: null,
	10	+ const savedState = localStorage.getItem("vuexState");
	11	+ if (savedState) {
	12	+ return JSON.parse(savedState);
	13	+ }
	14	+ return {
	15	+ token: null,
	16	+ userId: null,
	17	+ authcd: null,
	18	+ stdId: null,
	19	+ schdlId: null,
	20	+ bookId: null,
	21	+ unitId: null,
	22	+ unitNm: null,
	23	+ LearningId: null,
24	24
25		- // 문제
26		- currentLearningIds: [],
27		- prblmTypeId: null,
28		- currentLabel: null,
29		- currentProblemIndex: 0,
30		- allProblems: [],
	25	+ // 문제
	26	+ currentLearningIds: [],
	27	+ prblmTypeId: null,
	28	+ currentLabel: null,
	29	+ currentProblemIndex: 0,
	30	+ allProblems: [],
	31	+ allAnswers: [],
31	32
32		- // 단어장
33		- textId: null,
34		- wdBookIdList: [],
35		- currentWdBkIndex: 0,
	33	+ // 단어장
	34	+ textId: null,
	35	+ wdBookIdList: [],
	36	+ currentWdBkIndex: 0,
36	37
37		- // 순서
38		- seqNum: null,
39		- };
	38	+ // 순서
	39	+ seqNum: null,
	40	+ };
40	41	}
41	42
42	43	export default createStore({
43		- state: loadStateFromLocalStorage(),
44		- getters: {
45		- getUserInfo(state) {
46		- return {
47		- userId: state.userId,
48		- userNm: state.userNm,
49		- authcd: state.authcd,
50		- };
51		- },
52		- getStdId(state) {
53		- return state.stdId;
54		- },
55		- getSchdlId(state) {
56		- return state.schdlId;
57		- },
58		- getBookId(state) {
59		- return state.bookId;
60		- },
61		- getUnitId(state) {
62		- return state.unitId;
63		- },
64		- getLearningId(state) {
65		- return state.learningId;
66		- },
67		- getTextId(state) {
68		- return state.textId;
69		- },
	44	+ state: loadStateFromLocalStorage(),
	45	+ getters: {
	46	+ getUserInfo(state) {
	47	+ return {
	48	+ userId: state.userId,
	49	+ userNm: state.userNm,
	50	+ authcd: state.authcd,
	51	+ };
	52	+ },
	53	+ getStdId(state) {
	54	+ return state.stdId;
	55	+ },
	56	+ getSchdlId(state) {
	57	+ return state.schdlId;
	58	+ },
	59	+ getBookId(state) {
	60	+ return state.bookId;
	61	+ },
	62	+ getUnitId(state) {
	63	+ return state.unitId;
	64	+ },
	65	+ getLearningId(state) {
	66	+ return state.learningId;
	67	+ },
	68	+ getTextId(state) {
	69	+ return state.textId;
	70	+ },
70	71
71		- // 문제
72		- currentLearningId(state) {
73		- return state.currentLearningIds[state.currentProblemIndex];
74		- },
75		- currentLabel: (state) => state.currentLabel,
76		- currentProblemIndex: (state) => state.currentProblemIndex,
77		- seqNum: (state) => state.seqNum,
78		- prblmTypeId: (state) => state.prblmTypeId,
79		- getAllProblems(state) {
80		- return state.allProblems;
81		- },
	72	+ // 문제
	73	+ currentLearningId(state) {
	74	+ return state.currentLearningIds[state.currentProblemIndex];
	75	+ },
	76	+ currentLabel: (state) => state.currentLabel,
	77	+ currentProblemIndex: (state) => state.currentProblemIndex,
	78	+ seqNum: (state) => state.seqNum,
	79	+ prblmTypeId: (state) => state.prblmTypeId,
	80	+ getAllProblems(state) {
	81	+ return state.allProblems;
	82	+ },
	83	+ getAllAnswers: state => state.allAnswers,
82	84
83		- // 단어장
84		- getWdBookIdList(state) {
85		- return state.wdBookIdList;
	85	+ // 단어장
	86	+ getWdBookIdList(state) {
	87	+ return state.wdBookIdList;
	88	+ },
	89	+ getCurrentWdBkIndex: (state) => state.currentWdBkIndex,
86	90	},
87		- getCurrentWdBkIndex: (state) => state.currentWdBkIndex,
88		- },
89		- mutations: {
90		- setToken(state, token) {
91		- state.token = token;
92		- },
93		- clearToken(state) {
94		- state.token = null;
95		- state.userId = null;
96		- state.userNm = null;
97		- state.authcd = null;
98		- state.stdId = null;
99		- state.schdlId = null;
100		- state.bookId = null;
101		- state.unitId = null;
102		- state.learningId = null;
103		- saveStateToLocalStorage(state);
104		- },
105		- setUser(state, userId) {
106		- state.userId = userId;
107		- saveStateToLocalStorage(state);
108		- },
109		- setUserNm(state, userNm) {
110		- state.userNm = userNm;
111		- saveStateToLocalStorage(state);
112		- },
113		- setAuthcd(state, authcd) {
114		- state.authcd = authcd;
115		- saveStateToLocalStorage(state);
116		- },
117		- setStdId(state, stdId) {
118		- state.stdId = stdId;
119		- saveStateToLocalStorage(state);
120		- },
121		- setSchdlId(state, schdlId) {
122		- state.schdlId = schdlId;
123		- saveStateToLocalStorage(state);
124		- },
125		- setBookId(state, bookId) {
126		- state.bookId = bookId;
127		- saveStateToLocalStorage(state);
128		- },
129		- setUnitId(state, unitId) {
130		- state.unitId = unitId;
131		- saveStateToLocalStorage(state);
132		- },
133		- setLearningId(state, learningId) {
134		- state.learningId = learningId;
135		- saveStateToLocalStorage(state);
136		- },
137		- setTextId(state, textId) {
138		- state.textId = textId;
139		- saveStateToLocalStorage(state);
140		- },
	91	+ mutations: {
	92	+ setToken(state, token) {
	93	+ state.token = token;
	94	+ },
	95	+ clearToken(state) {
	96	+ state.token = null;
	97	+ state.userId = null;
	98	+ state.userNm = null;
	99	+ state.authcd = null;
	100	+ state.stdId = null;
	101	+ state.schdlId = null;
	102	+ state.bookId = null;
	103	+ state.unitId = null;
	104	+ state.learningId = null;
	105	+ saveStateToLocalStorage(state);
	106	+ },
	107	+ setUser(state, userId) {
	108	+ state.userId = userId;
	109	+ saveStateToLocalStorage(state);
	110	+ },
	111	+ setUserNm(state, userNm) {
	112	+ state.userNm = userNm;
	113	+ saveStateToLocalStorage(state);
	114	+ },
	115	+ setAuthcd(state, authcd) {
	116	+ state.authcd = authcd;
	117	+ saveStateToLocalStorage(state);
	118	+ },
	119	+ setStdId(state, stdId) {
	120	+ state.stdId = stdId;
	121	+ saveStateToLocalStorage(state);
	122	+ },
	123	+ setSchdlId(state, schdlId) {
	124	+ state.schdlId = schdlId;
	125	+ saveStateToLocalStorage(state);
	126	+ },
	127	+ setBookId(state, bookId) {
	128	+ state.bookId = bookId;
	129	+ saveStateToLocalStorage(state);
	130	+ },
	131	+ setUnitId(state, unitId) {
	132	+ state.unitId = unitId;
	133	+ saveStateToLocalStorage(state);
	134	+ },
	135	+ setLearningId(state, learningId) {
	136	+ state.learningId = learningId;
	137	+ saveStateToLocalStorage(state);
	138	+ },
	139	+ setTextId(state, textId) {
	140	+ state.textId = textId;
	141	+ saveStateToLocalStorage(state);
	142	+ },
141	143
142		- // 순서
143		- // setSeqNum(state, seqNum) {
144		- // state.seqNum = seqNum;
145		- // saveStateToLocalStorage(state);
146		- // },
	144	+ // 순서
	145	+ // setSeqNum(state, seqNum) {
	146	+ // state.seqNum = seqNum;
	147	+ // saveStateToLocalStorage(state);
	148	+ // },
147	149
148		- // 문제
149		- setLearningData(state, payload) {
150		- state.currentLearningIds = payload.learning_id; // Array of IDs
151		- state.currentLabel = payload.label;
152		- state.currentProblemIndex = 0; // Reset to the first problem
153		- state.prblmTypeId = payload.prblmTypeId;
154		- // 순서
155		- state.seqNum = payload.seqNum;
156		- saveStateToLocalStorage(state);
157		- },
158		- incrementProblemIndex(state) {
159		- if (state.currentProblemIndex < state.currentLearningIds.length - 1) {
160		- state.currentProblemIndex++;
161		- saveStateToLocalStorage(state);
162		- }
163		- },
164		- decrementProblemIndex(state) {
165		- if (state.currentProblemIndex > 0) {
166		- state.currentProblemIndex--;
167		- saveStateToLocalStorage(state);
168		- }
169		- },
170		- saveOrUpdateProblem(state, problemData) {
171		- const existingProblemIndex = state.allProblems.findIndex(
172		- (problem) => problem.prblmNumber === problemData.prblmNumber
173		- );
	150	+ // 문제
	151	+ setLearningData(state, payload) {
	152	+ state.currentLearningIds = payload.learning_id; // Array of IDs
	153	+ state.currentLabel = payload.label;
	154	+ state.currentProblemIndex = 0; // Reset to the first problem
	155	+ state.prblmTypeId = payload.prblmTypeId;
	156	+ // 순서
	157	+ state.seqNum = payload.seqNum;
	158	+ saveStateToLocalStorage(state);
	159	+ },
	160	+ incrementProblemIndex(state) {
	161	+ if (state.currentProblemIndex < state.currentLearningIds.length - 1) {
	162	+ state.currentProblemIndex++;
	163	+ saveStateToLocalStorage(state);
	164	+ }
	165	+ },
	166	+ decrementProblemIndex(state) {
	167	+ if (state.currentProblemIndex > 0) {
	168	+ state.currentProblemIndex--;
	169	+ saveStateToLocalStorage(state);
	170	+ }
	171	+ },
	172	+ saveOrUpdateProblem(state, problemData) {
	173	+ const existingProblemIndex = state.allProblems.findIndex(
	174	+ (problem) => problem.prblmNumber === problemData.prblmNumber
	175	+ );
174	176
175		- if (existingProblemIndex !== -1) {
176		- // 문제 데이터 업데이트
177		- state.allProblems[existingProblemIndex] = problemData;
178		- } else {
179		- // 새로운 문제 추가
180		- state.allProblems.push(problemData);
181		- }
182		- },
	177	+ if (existingProblemIndex !== -1) {
	178	+ // 문제 데이터 업데이트
	179	+ state.allProblems[existingProblemIndex] = problemData;
	180	+ } else {
	181	+ // 새로운 문제 추가
	182	+ state.allProblems.push(problemData);
	183	+ }
	184	+ },
	185	+ addOrUpdateProblemAttempt(state, answerData) {
	186	+ if (!state.allAnswers) {
	187	+ state.allAnswers = [];
	188	+ }
183	189
184		- // 단어장
185		- setWdBookIdList(state, wdBookIdList) {
186		- state.wdBookIdList = wdBookIdList;
187		- saveStateToLocalStorage(state);
188		- },
189		- setCurrentWdBkIndex(state, currentWdBkIndex) {
190		- state.currentWdBkIndex = currentWdBkIndex;
191		- saveStateToLocalStorage(state);
192		- },
193		- },
194		- actions: {
195		- login({ commit }, token) {
196		- commit("setToken", token);
197		- localStorage.setItem("token", token);
198		- },
199		- logout({ commit }) {
200		- commit("clearToken");
201		- localStorage.removeItem("token");
202		- },
203		- updateStdId({ commit }, payload) {
204		- return new Promise((resolve) => {
205		- commit("setStdId", payload);
206		- resolve();
207		- });
208		- },
209		- updateSchdlId({ commit }, payload) {
210		- return new Promise((resolve) => {
211		- commit("setSchdlId", payload);
212		- resolve();
213		- });
214		- },
215		- updateBookId({ commit }, payload) {
216		- return new Promise((resolve) => {
217		- commit("setBookId", payload);
218		- resolve();
219		- });
220		- },
221		- updateUnitId({ commit }, payload) {
222		- return new Promise((resolve) => {
223		- commit("setUnitId", payload);
224		- resolve();
225		- });
226		- },
227		- updateLearningId({ commit }, learningId) {
228		- commit("setLearningId", learningId);
229		- },
230		- updateLearningData({ commit }, payload) {
231		- commit("setLearningData", payload);
232		- },
233		- updateTextId({ commit }, textId) {
234		- commit("setTextId", textId);
235		- },
	190	+ const existingEntryIndex = state.allAnswers.findIndex(
	191	+ answer => answer.prblmId === answerData.prblmId
	192	+ );
236	193
237		- // 문제
238		- goToNextProblem({ commit }) {
239		- commit("incrementProblemIndex");
240		- },
241		- goToPreviousProblem({ commit }) {
242		- commit("decrementProblemIndex");
243		- },
244		- saveProblemData({ commit }, problemData) {
245		- commit("saveOrUpdateProblem", problemData);
246		- },
	194	+ if (existingEntryIndex !== -1) {
	195	+ // 정답 데이터 업데이트
	196	+ state.allAnswers[existingEntryIndex] = answerData;
	197	+ } else {
	198	+ // 새로운 정답 추가
	199	+ state.allAnswers.push(answerData);
	200	+ }
	201	+ },
247	202
248		- // 단어장
249		- updateWdBookIdList({ commit }, wdBookIdList) {
250		- commit("setWdBookIdList", wdBookIdList);
	203	+ // 단어장
	204	+ setWdBookIdList(state, wdBookIdList) {
	205	+ state.wdBookIdList = wdBookIdList;
	206	+ saveStateToLocalStorage(state);
	207	+ },
	208	+ setCurrentWdBkIndex(state, currentWdBkIndex) {
	209	+ state.currentWdBkIndex = currentWdBkIndex;
	210	+ saveStateToLocalStorage(state);
	211	+ },
251	212	},
252		- updateCurrentWdBkIndex({ commit }, currentWdBkIndex) {
253		- commit("setCurrentWdBkIndex", currentWdBkIndex);
254		- },
	213	+ actions: {
	214	+ login({ commit }, token) {
	215	+ commit("setToken", token);
	216	+ localStorage.setItem("token", token);
	217	+ },
	218	+ logout({ commit }) {
	219	+ commit("clearToken");
	220	+ localStorage.removeItem("token");
	221	+ },
	222	+ updateStdId({ commit }, payload) {
	223	+ return new Promise((resolve) => {
	224	+ commit("setStdId", payload);
	225	+ resolve();
	226	+ });
	227	+ },
	228	+ updateSchdlId({ commit }, payload) {
	229	+ return new Promise((resolve) => {
	230	+ commit("setSchdlId", payload);
	231	+ resolve();
	232	+ });
	233	+ },
	234	+ updateBookId({ commit }, payload) {
	235	+ return new Promise((resolve) => {
	236	+ commit("setBookId", payload);
	237	+ resolve();
	238	+ });
	239	+ },
	240	+ updateUnitId({ commit }, payload) {
	241	+ return new Promise((resolve) => {
	242	+ commit("setUnitId", payload);
	243	+ resolve();
	244	+ });
	245	+ },
	246	+ updateLearningId({ commit }, learningId) {
	247	+ commit("setLearningId", learningId);
	248	+ },
	249	+ updateLearningData({ commit }, payload) {
	250	+ commit("setLearningData", payload);
	251	+ },
	252	+ updateTextId({ commit }, textId) {
	253	+ commit("setTextId", textId);
	254	+ },
255	255
256		- // 순서
257		- // updateSeqNum({ commit }) {
258		- // commit("setSeqNum", seqNum);
259		- // },
260		- },
	256	+ // 문제
	257	+ goToNextProblem({ commit }) {
	258	+ commit("incrementProblemIndex");
	259	+ },
	260	+ goToPreviousProblem({ commit }) {
	261	+ commit("decrementProblemIndex");
	262	+ },
	263	+ saveProblemData({ commit }, problemData) {
	264	+ commit("saveOrUpdateProblem", problemData);
	265	+ },
	266	+ saveProblemAttempt({ commit }, answerData) {
	267	+ commit('addOrUpdateProblemAttempt', answerData);
	268	+ },
	269	+
	270	+ // 단어장
	271	+ updateWdBookIdList({ commit }, wdBookIdList) {
	272	+ commit("setWdBookIdList", wdBookIdList);
	273	+ },
	274	+ updateCurrentWdBkIndex({ commit }, currentWdBkIndex) {
	275	+ commit("setCurrentWdBkIndex", currentWdBkIndex);
	276	+ },
	277	+
	278	+ // 순서
	279	+ // updateSeqNum({ commit }) {
	280	+ // commit("setSeqNum", seqNum);
	281	+ // },
	282	+ },
261	283	});

...	...	@@ -1,323 +1,365 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25">
6		- <img src="../../../../resources/img/logo2.png" alt="" />
7		- </div>
8		- </router-link>
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
9	7	</div>
10		- <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
11		- <div>
12		- <span class="title mr40">1. Hello WORLD</span>
13		- <span class="subtitle">my name is dd</span>
14		- </div>
15		- <button class="completeBtn" @click="complete">학습 종료</button>
16		- </div>
17		- <div class="flex justify-between align-center">
18		- <div class="pre-btn" @click="previousProblem()">
19		- <img src="../../../../resources/img/left.png" alt="" />
20		- </div>
21		- <div class="content title-box">
22		- ,,,
23		- <p class="title mt25 title-bg">step3.</p>
24		- <div class="flex align-center mb30" style="justify-content: space-between">
25		- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
26		- </div>
27		-
28		- <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px">
29		- <div class="time-hint">
30		- <button class="hint-btn">HINT</button>
31		- <div class="time-bg mt20">
32		- <div>
33		- <div class="time">
34		- <p class="second">{{ timer }}</p>
35		- <p class="text">sec</p>
36		- </div>
37		- </div>
38		- </div>
39		- </div>
40		- <div class="imgGroup">
41		- <div class="flex" style="gap: 60px">
42		- <img src="../../../../resources/img/img106_48s.png" alt="" />
43		- </div>
44		- </div>
45		- <div class="pickGroup">
46		- <article class="flex justify-center mb50" style="gap: 60px"
47		- v-for="(item, index) in problemDetail" :key="index">
48		- <div class="flex" @click="handleClick(item.prblmDtlExpln)">
49		- <button>
50		- <img src="../../../../resources/img/img136_71s.png" alt="" />
51		- <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
52		- </button>
53		- <p>{{ item.prblmDtlExpln }}</p>
54		- </div>
55		- </article>
56		- </div>
57		- </div>
58		- <button class="submit-button" @click="handleSubmit()"
59		- v-if="currentIndex === learningIdsLength - 1">제출하기</button>
60		- </div>
61		- <div class="next-btn" @click="nextProblem()">
62		- <img src="../../../../resources/img/right.png" alt="" />
63		- </div>
64		- </div>
	8	+ </router-link>
65	9	</div>
	10	+ <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
	11	+ <div>
	12	+ <span class="title mr40">1. Hello WORLD</span>
	13	+ <span class="subtitle">my name is dd</span>
	14	+ </div>
	15	+ <button class="completeBtn" @click="complete">학습 종료</button>
	16	+ </div>
	17	+ <div class="flex justify-between align-center">
	18	+ <div class="pre-btn" @click="previousProblem()">
	19	+ <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
	20	+ </div>
	21	+ <div class="content title-box">
	22	+ ,,,
	23	+ <p class="title mt25 title-bg">step3.</p>
	24	+ <div class="flex align-center mb30" style="justify-content: space-between">
	25	+ <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
	26	+ </div>
	27	+
	28	+ <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px">
	29	+ <div class="time-hint">
	30	+ <button class="hint-btn">HINT</button>
	31	+ <div class="time-bg mt20">
	32	+ <div>
	33	+ <div class="time">
	34	+ <p class="second">{{ timer }}</p>
	35	+ <p class="text">sec</p>
	36	+ </div>
	37	+ </div>
	38	+ </div>
	39	+ </div>
	40	+ <div class="imgGroup">
	41	+ <div class="flex" style="gap: 60px">
	42	+ <img src="../../../../resources/img/img106_48s.png" alt="" />
	43	+ </div>
	44	+ </div>
	45	+ <div class="pickGroup">
	46	+ <article class="flex justify-center mb50" style="gap: 60px" v-for="(item, index) in problemDetail"
	47	+ :key="index">
	48	+ <div class="flex" @click="handleClick(item.prblmDtlExpln)">
	49	+ <button>
	50	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	51	+ <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
	52	+ </button>
	53	+ <p>{{ item.prblmDtlExpln }}</p>
	54	+ </div>
	55	+ </article>
	56	+ </div>
	57	+ </div>
	58	+ <button class="submit-button" @click="handleSubmit()"
	59	+ v-if="currentIndex === learningIdsLength - 1">제출하기</button>
	60	+ </div>
	61	+ <div class="next-btn" @click="nextProblem()">
	62	+ <img src="../../../../resources/img/right.png" alt="" />
	63	+ </div>
	64	+ </div>
	65	+ </div>
66	66	</template>
67	67
68	68	<script>
69	69
70	70	import axios from "axios";
71	71	export default {
72		- data() {
73		- return {
74		- timer: "00",
75		- selectedButton: null, // 선택한 버튼
76		- prblm_id: [],
77		- unit_id: null,
78		- dataList: [],
79		- problemDetail: [],
80		- currentIndex: null,
81		- learningIdsLength: null,
82		- };
	72	+ data() {
	73	+ return {
	74	+ timer: "00",
	75	+ selectedButton: null, // 선택한 버튼
	76	+ prblm_id: [],
	77	+ unit_id: null,
	78	+ dataList: [],
	79	+ problemDetail: [],
	80	+ currentIndex: null,
	81	+ learningIdsLength: null,
	82	+ };
	83	+ },
	84	+ methods: {
	85	+ complete() {
	86	+ const { unit_id, book_id } = this.$route.query;
	87	+ this.$router.push({ name: 'Dashboard', query: { value: 8, unit_id, book_id } });
83	88	},
84		- methods: {
85		- complete() {
86		- const { unit_id, book_id } = this.$route.query;
87		- this.$router.push({ name: 'Dashboard', query: { value: 8, unit_id, book_id } });
88		- },
89		- goToPage(page) {
90		- this.$router.push({ name: page });
91		- },
92		- startTimer() {
93		- if (this.intervalId) {
94		- clearInterval(this.intervalId);
95		- }
96		- this.timer = 5;
97		- this.intervalId = setInterval(() => {
98		- if (this.timer > 0) {
99		- this.timer--;
100		- } else {
101		- clearInterval(this.intervalId);
102		- }
103		- }, 1000);
104		- },
105		- handleClick(answer) {
106		- console.log(answer)
107		- this.selectedButton = answer;
108		- },
109		- // 제출하기 버튼
110		- handleSubmit() {
111		- console.log("선택된 번호 : ", this.selectedButton);
112		- },
113		- getProblem() {
114		- const vm = this;
115		- const prblmId = this.currentLearningId.prblm_id;
116		- axios({
117		- url: "problem/problemInfo.json",
118		- method: "post",
119		- headers: {
120		- "Content-Type": "application/json; charset=UTF-8",
121		- },
122		- data: {
123		- prblmId: prblmId,
124		- },
125		- })
126		- .then(function (res) {
127		- console.log("problem - response : ", res.data);
128		- vm.dataList = res.data.problem;
129		- vm.problemDetail = res.data.problemDetail;
130		- })
131		- .catch(function (error) {
132		- console.log("problem - error : ", error);
133		- });
134		- },
135		- nextProblem() {
136		- const problemData = {
137		- prblmImfo: this.currentLearningId,
138		- prblmNumber: this.currentProblemIndex,
139		- prblmAns: this.selectedButton
140		- }
141		- this.$store.dispatch('saveProblemData', problemData);
142		- console.log(this.$store.getters.getAllProblems)
143		- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
144		- this.$store.dispatch('goToNextProblem');
145		- this.handleProblemDetail(this.currentLearningId);
146		- this.goToPage(this.problemType);
147		- } else {
148		- // 마지막 문제면 이동
149		- this.goToPage("Chapter4")
150		- }
151		- },
152		- previousProblem() {
153		- if (this.currentProblemIndex > 0) {
154		- this.$store.dispatch('goToPreviousProblem');
155		- this.handleProblemDetail(this.currentLearningId);
156		- this.goToPage(this.problemType);
157		- }
158		- },
159		-
160		- handleProblemDetail(item) {
161		- if (item.prblm_type_id === "prblm_type_001") {
162		- this.problemType = "Chapter3";
163		- } else if (item.prblm_type_id === "prblm_type_002") {
164		- this.problemType = "Chapter3_1";
165		- } else if (item.prblm_type_id === "prblm_type_003") {
166		- this.problemType = "Chapter3_2";
167		- } else if (item.prblm_type_id === "prblm_type_004") {
168		- this.problemType = "Chapter3_3";
169		- } else if (item.prblm_type_id === "prblm_type_005") {
170		- this.problemType = "Chapter3_3_1";
171		- } else if (item.prblm_type_id === "prblm_type_006") {
172		- this.problemType = "Chapter3_4";
173		- } else if (item.prblm_type_id === "prblm_type_007") {
174		- this.problemType = "Chapter3_5";
175		- } else if (item.prblm_type_id === "prblm_type_008") {
176		- this.problemType = "Chapter3_6";
177		- } else if (item.prblm_type_id === "prblm_type_009") {
178		- this.problemType = "Chapter3_7";
179		- } else if (item.prblm_type_id === "prblm_type_010") {
180		- this.problemType = "Chapter3_8";
181		- } else if (item.prblm_type_id === "prblm_type_011") {
182		- this.problemType = "Chapter3_9";
183		- } else if (item.prblm_type_id === "prblm_type_012") {
184		- this.problemType = "Chapter3_10";
185		- } else if (item.prblm_type_id === "prblm_type_013") {
186		- this.problemType = "Chapter3_11";
187		- } else if (item.prblm_type_id === "prblm_type_014") {
188		- this.problemType = "Chapter3_12";
189		- } else if (item.prblm_type_id === "prblm_type_015") {
190		- this.problemType = "Chapter3_13";
191		- } else if (item.prblm_type_id === "prblm_type_016") {
192		- this.problemType = "Chapter3_14";
193		- } else if (item.prblm_type_id === "prblm_type_017") {
194		- this.problemType = "Chapter3_15";
195		- } else if (item.prblm_type_id === "prblm_type_018") {
196		- this.problemType = "Chapter2_8";
197		- } else if (item.prblm_type_id === "prblm_type_019") {
198		- this.problemType = "Chapter2_7";
199		- } else if (item.prblm_type_id === "prblm_type_020") {
200		- this.problemType = "Chapter2_5";
201		- } else if (item.prblm_type_id === "prblm_type_021") {
202		- this.problemType = "Chapter2_6";
203		- } else if (item.prblm_type_id === "prblm_type_022") {
204		- this.problemType = "Chapter2_10";
205		- } else if (item.prblm_type_id === "prblm_type_023") {
206		- this.problemType = "Chapter2_11";
207		- } else if (item.prblm_type_id === "prblm_type_024") {
208		- this.problemType = "Chapter2_13";
209		- }
210		- },
	89	+ goToPage(page) {
	90	+ this.$router.push({ name: page });
211	91	},
212		- watch: {},
213		- computed: {
214		- currentLearningId() {
215		- return this.$store.getters.currentLearningId;
216		- },
217		- currentLabel() {
218		- return this.$store.getters.currentLabel;
219		- },
220		- currentProblemIndex() {
221		- return this.$store.getters.currentProblemIndex;
222		- },
223		- isPreviousButtonDisabled() {
224		- return this.currentProblemIndex === 0;
225		- },
226		- getAllProblems() {
227		- return this.$store.getters.getAllProblems;
228		- },
229		- getStdId() {
230		- return this.$store.getters.getStdId;
	92	+ startTimer() {
	93	+ if (this.intervalId) {
	94	+ clearInterval(this.intervalId);
	95	+ }
	96	+ this.timer = 5;
	97	+ this.intervalId = setInterval(() => {
	98	+ if (this.timer > 0) {
	99	+ this.timer--;
	100	+ } else {
	101	+ clearInterval(this.intervalId);
231	102	}
	103	+ }, 1000);
232	104	},
233		- created() {
234		- console.log('Current Learning ID:', this.currentLearningId);
235		- console.log('Current Label:', this.currentLabel);
236		- console.log('Current Problem Index:', this.currentProblemIndex);
	105	+ handleClick(answer) {
	106	+ console.log(answer)
	107	+ this.selectedButton = answer;
	108	+ },
	109	+ // 제출하기 버튼
	110	+ handleSubmit() {
	111	+ const problemData = {
	112	+ prblmInfo: this.currentLearningId,
	113	+ prblmNumber: this.currentProblemIndex,
	114	+ prblmAns: this.selectedButton
	115	+ }
	116	+ const answerData = {
	117	+ prblmId: this.currentLearningId.prblm_id,
	118	+ prblmAns: this.selectedButton,
	119	+ stdId: this.$store.getters.getStdId,
	120	+ prblmLogAnsCnt: 1
	121	+ }
	122	+ this.$store.dispatch('saveProblemData', problemData);
	123	+ this.$store.dispatch('saveProblemAttempt', answerData);
	124	+ console.log(this.$store.getters.getAllProblems)
	125	+ console.log(this.$store.getters.getAllAnswers)
237	126
238		- // Fetch or process the current problem based on `currentLearningId`
	127	+ axios({
	128	+ url: "problemLog/insertProblemLog.json",
	129	+ method: "post",
	130	+ headers: {
	131	+ "Content-Type": "application/json; charset=UTF-8",
	132	+ },
	133	+ data: this.$store.getters.getAllAnswers,
	134	+ }).then(function (res) {
	135	+ console.log("problem - response : ", res.data);
	136	+ })
	137	+ .catch(function (error) {
	138	+ console.log("problem - error : ", error);
	139	+ });
	140	+
239	141	},
240		- components: {},
241		- mounted() {
242		- this.getProblem()
	142	+ getProblem() {
	143	+ const vm = this;
	144	+ const prblmId = this.currentLearningId.prblm_id;
	145	+ axios({
	146	+ url: "problem/problemInfo.json",
	147	+ method: "post",
	148	+ headers: {
	149	+ "Content-Type": "application/json; charset=UTF-8",
	150	+ },
	151	+ data: {
	152	+ prblmId: prblmId,
	153	+ },
	154	+ })
	155	+ .then(function (res) {
	156	+ console.log("problem - response : ", res.data);
	157	+ vm.dataList = res.data.problem;
	158	+ vm.problemDetail = res.data.problemDetail;
	159	+ })
	160	+ .catch(function (error) {
	161	+ console.log("problem - error : ", error);
	162	+ });
243	163	},
	164	+ nextProblem() {
	165	+ const problemData = {
	166	+ prblmInfo: this.currentLearningId,
	167	+ prblmNumber: this.currentProblemIndex,
	168	+ prblmAns: this.selectedButton
	169	+ }
	170	+ const answerData = {
	171	+ prblmId: this.currentLearningId.prblm_id,
	172	+ prblmAns: this.selectedButton,
	173	+ stdId: this.$store.getters.getStdId,
	174	+ prblmLogAnsCnt: 1
	175	+ }
	176	+ this.$store.dispatch('saveProblemData', problemData);
	177	+ this.$store.dispatch('saveProblemAttempt', answerData);
	178	+ console.log(this.$store.getters.getAllProblems)
	179	+ console.log(this.$store.getters.getAllAnswers)
	180	+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
	181	+ this.$store.dispatch('goToNextProblem');
	182	+ this.handleProblemDetail(this.currentLearningId);
	183	+ this.goToPage(this.problemType);
	184	+ }
	185	+ },
	186	+ previousProblem() {
	187	+ if (this.currentProblemIndex > 0) {
	188	+ this.$store.dispatch('goToPreviousProblem');
	189	+ this.handleProblemDetail(this.currentLearningId);
	190	+ this.goToPage(this.problemType);
	191	+ }
	192	+ },
	193	+
	194	+ handleProblemDetail(item) {
	195	+ if (item.prblm_type_id === "prblm_type_001") {
	196	+ this.problemType = "Chapter3";
	197	+ } else if (item.prblm_type_id === "prblm_type_002") {
	198	+ this.problemType = "Chapter3_1";
	199	+ } else if (item.prblm_type_id === "prblm_type_003") {
	200	+ this.problemType = "Chapter3_2";
	201	+ } else if (item.prblm_type_id === "prblm_type_004") {
	202	+ this.problemType = "Chapter3_3";
	203	+ } else if (item.prblm_type_id === "prblm_type_005") {
	204	+ this.problemType = "Chapter3_3_1";
	205	+ } else if (item.prblm_type_id === "prblm_type_006") {
	206	+ this.problemType = "Chapter3_4";
	207	+ } else if (item.prblm_type_id === "prblm_type_007") {
	208	+ this.problemType = "Chapter3_5";
	209	+ } else if (item.prblm_type_id === "prblm_type_008") {
	210	+ this.problemType = "Chapter3_6";
	211	+ } else if (item.prblm_type_id === "prblm_type_009") {
	212	+ this.problemType = "Chapter3_7";
	213	+ } else if (item.prblm_type_id === "prblm_type_010") {
	214	+ this.problemType = "Chapter3_8";
	215	+ } else if (item.prblm_type_id === "prblm_type_011") {
	216	+ this.problemType = "Chapter3_9";
	217	+ } else if (item.prblm_type_id === "prblm_type_012") {
	218	+ this.problemType = "Chapter3_10";
	219	+ } else if (item.prblm_type_id === "prblm_type_013") {
	220	+ this.problemType = "Chapter3_11";
	221	+ } else if (item.prblm_type_id === "prblm_type_014") {
	222	+ this.problemType = "Chapter3_12";
	223	+ } else if (item.prblm_type_id === "prblm_type_015") {
	224	+ this.problemType = "Chapter3_13";
	225	+ } else if (item.prblm_type_id === "prblm_type_016") {
	226	+ this.problemType = "Chapter3_14";
	227	+ } else if (item.prblm_type_id === "prblm_type_017") {
	228	+ this.problemType = "Chapter3_15";
	229	+ } else if (item.prblm_type_id === "prblm_type_018") {
	230	+ this.problemType = "Chapter2_8";
	231	+ } else if (item.prblm_type_id === "prblm_type_019") {
	232	+ this.problemType = "Chapter2_7";
	233	+ } else if (item.prblm_type_id === "prblm_type_020") {
	234	+ this.problemType = "Chapter2_5";
	235	+ } else if (item.prblm_type_id === "prblm_type_021") {
	236	+ this.problemType = "Chapter2_6";
	237	+ } else if (item.prblm_type_id === "prblm_type_022") {
	238	+ this.problemType = "Chapter2_10";
	239	+ } else if (item.prblm_type_id === "prblm_type_023") {
	240	+ this.problemType = "Chapter2_11";
	241	+ } else if (item.prblm_type_id === "prblm_type_024") {
	242	+ this.problemType = "Chapter2_13";
	243	+ }
	244	+ },
	245	+ },
	246	+ watch: {},
	247	+ computed: {
	248	+ currentLearningId() {
	249	+ return this.$store.getters.currentLearningId;
	250	+ },
	251	+ currentLabel() {
	252	+ return this.$store.getters.currentLabel;
	253	+ },
	254	+ currentProblemIndex() {
	255	+ return this.$store.getters.currentProblemIndex;
	256	+ },
	257	+ isPreviousButtonDisabled() {
	258	+ return this.currentProblemIndex === 0;
	259	+ },
	260	+ getAllProblems() {
	261	+ return this.$store.getters.getAllProblems;
	262	+ },
	263	+ getStdId() {
	264	+ return this.$store.getters.getStdId;
	265	+ }
	266	+ },
	267	+ created() {
	268	+ console.log('Current Learning ID:', this.currentLearningId);
	269	+ console.log('Current Label:', this.currentLabel);
	270	+ console.log('Current Problem Index:', this.currentProblemIndex);
	271	+
	272	+ // Fetch or process the current problem based on `currentLearningId`
	273	+ },
	274	+ components: {},
	275	+ mounted() {
	276	+ this.getProblem()
	277	+ },
244	278	};
245	279	</script>
246	280	<style scoped>
247	281	.imgGroup {
248		- width: fit-content;
	282	+ width: fit-content;
249	283	}
250	284
251	285	.imgGroup button {
252		- position: relative;
	286	+ position: relative;
253	287	}
254	288
255	289	.imgGroup button p,
256	290	.textbox p {
257		- position: absolute;
258		- top: 50%;
259		- left: 50%;
260		- transform: translate(-50%, -50%);
261		- width: fit-content;
262		- height: fit-content;
263		- background: #ffffffb8;
264		- border-radius: 5px;
265		- padding: 10px;
266		- font-size: 48px;
267		- font-family: "ONEMobilePOP";
	291	+ position: absolute;
	292	+ top: 50%;
	293	+ left: 50%;
	294	+ transform: translate(-50%, -50%);
	295	+ width: fit-content;
	296	+ height: fit-content;
	297	+ background: #ffffffb8;
	298	+ border-radius: 5px;
	299	+ padding: 10px;
	300	+ font-size: 48px;
	301	+ font-family: "ONEMobilePOP";
268	302	}
269	303
270	304	.pickGroup {
271		- display: flex;
272		- flex-direction: column;
273		- align-items: flex-start;
	305	+ display: flex;
	306	+ flex-direction: column;
	307	+ align-items: flex-start;
274	308	}
275	309
276	310	.pickGroup button {
277		- position: relative;
278		- margin-right: 30px;
	311	+ position: relative;
	312	+ margin-right: 30px;
279	313	}
280	314
281	315	.pickGroup button p {
282		- font-size: 34px;
283		- color: #c6c6c6;
284		- position: absolute;
285		- top: 50%;
286		- left: 50%;
287		- transform: translate(-50%, -50%);
	316	+ font-size: 34px;
	317	+ color: #c6c6c6;
	318	+ position: absolute;
	319	+ top: 50%;
	320	+ left: 50%;
	321	+ transform: translate(-50%, -50%);
288	322	}
289	323
290	324	.pickGroup article img {
291		- object-fit: contain;
292		- width: -webkit-fill-available;
	325	+ object-fit: contain;
	326	+ width: -webkit-fill-available;
293	327	}
294	328
295	329	.pickGroup article>div>p {
296		- font-size: 64px;
	330	+ font-size: 64px;
	331	+}
	332	+
	333	+.pre-btn img.active {
	334	+ visibility: hidden;
	335	+}
	336	+
	337	+.pre-btn img.active {
	338	+ visibility: hidden;
297	339	}
298	340
299	341	.pickGroup button p.active {
300		- color: #000;
301		- /* 선택된 버튼의 숫자 색을 더 진하게 */
	342	+ color: #000;
	343	+ /* 선택된 버튼의 숫자 색을 더 진하게 */
302	344	}
303	345
304	346	.completeBtn {
305		- margin-right: 100px;
306		- background-color: #ffba08;
307		- padding: 10px 30px;
308		- border-radius: 10px;
309		- font-size: 28px;
310		- font-family: "ONEMobilePOPOTF";
	347	+ margin-right: 100px;
	348	+ background-color: #ffba08;
	349	+ padding: 10px 30px;
	350	+ border-radius: 10px;
	351	+ font-size: 28px;
	352	+ font-family: "ONEMobilePOPOTF";
311	353	}
312	354
313	355	.submit-button {
314		- position: absolute;
315		- background-color: #ffba08;
316		- padding: 10px 30px;
317		- border-radius: 10px;
318		- font-size: 28px;
319		- font-family: "ONEMobilePOPOTF";
320		- right: 5rem;
321		- bottom: 3rem;
	356	+ position: absolute;
	357	+ background-color: #ffba08;
	358	+ padding: 10px 30px;
	359	+ border-radius: 10px;
	360	+ font-size: 28px;
	361	+ font-family: "ONEMobilePOPOTF";
	362	+ right: 5rem;
	363	+ bottom: 3rem;
322	364	}
323	365	</style>

...	...	@@ -11,7 +11,7 @@
11	11	</div>
12	12	<div class="flex justify-between align-center">
13	13	<div class="pre-btn" @click="previousProblem()">
14		- <img src="../../../../resources/img/left.png" alt="" />
	14	+ <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
15	15	</div>
16	16	<div class="content title-box">
17	17	<p class="title mt25 title-bg">step3.</p>
...	...	@@ -103,7 +103,48 @@
103	103	},
104	104	// 제출하기 버튼
105	105	handleSubmit() {
106		- console.log("선택된 번호 : ", this.selectedButton);
	106	+
	107	+ const userConfirmed = window.confirm("제출 하시겠습니까?");
	108	+ if (userConfirmed) {
	109	+
	110	+ const problemData = {
	111	+ prblmInfo: this.currentLearningId,
	112	+ prblmNumber: this.currentProblemIndex,
	113	+ prblmAns: this.selectedButton
	114	+ };
	115	+
	116	+ const answerData = {
	117	+ prblmId: this.currentLearningId.prblm_id,
	118	+ prblmAns: this.selectedButton,
	119	+ stdId: this.$store.getters.getStdId,
	120	+ prblmLogAnsCnt: 1
	121	+ };
	122	+
	123	+ this.$store.dispatch('saveProblemData', problemData);
	124	+ this.$store.dispatch('saveProblemAttempt', answerData);
	125	+
	126	+ console.log(this.$store.getters.getAllProblems);
	127	+ console.log(this.$store.getters.getAllAnswers);
	128	+
	129	+
	130	+ axios({
	131	+ url: "problemLog/insertProblemLog.json",
	132	+ method: "post",
	133	+ headers: {
	134	+ "Content-Type": "application/json; charset=UTF-8",
	135	+ },
	136	+ data: this.$store.getters.getAllAnswers,
	137	+ })
	138	+ .then(function (res) {
	139	+ console.log("problem - response : ", res.data);
	140	+ this.goToPage('Chapter4')
	141	+ })
	142	+ .catch(function (error) {
	143	+ console.log("problem - error : ", error);
	144	+ });
	145	+ } else {
	146	+ console.log("Submission canceled by the user.");
	147	+ }
107	148	},
108	149	getProblem() {
109	150	const vm = this;
...	...	@@ -129,19 +170,24 @@
129	170	},
130	171	nextProblem() {
131	172	const problemData = {
132		- prblmImfo: this.currentLearningId,
	173	+ prblmInfo: this.currentLearningId,
133	174	prblmNumber: this.currentProblemIndex,
134	175	prblmAns: this.selectedButton
135	176	}
	177	+ const answerData = {
	178	+ prblmId: this.currentLearningId.prblm_id,
	179	+ prblmAns: this.selectedButton,
	180	+ stdId: this.$store.getters.getStdId,
	181	+ prblmLogAnsCnt: 1
	182	+ }
136	183	this.$store.dispatch('saveProblemData', problemData);
	184	+ this.$store.dispatch('saveProblemAttempt', answerData);
137	185	console.log(this.$store.getters.getAllProblems)
	186	+ console.log(this.$store.getters.getAllAnswers)
138	187	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
139	188	this.$store.dispatch('goToNextProblem');
140	189	this.handleProblemDetail(this.currentLearningId);
141	190	this.goToPage(this.problemType);
142		- } else {
143		- // 마지막 문제면 이동
144		- this.goToPage("Chapter4")
145	191	}
146	192	},
147	193	previousProblem() {
...	...	@@ -278,6 +324,14 @@
278	324	transform: translate(-50%, -50%);
279	325	}
280	326
	327	+.pre-btn img.active {
	328	+ visibility: hidden;
	329	+}
	330	+
	331	+.pre-btn img.active {
	332	+ visibility: hidden;
	333	+}
	334	+
281	335	.pickGroup button p.active {
282	336	color: #000;
283	337	/* 선택된 버튼의 숫자 색을 더 진하게 */

...	...	@@ -13,7 +13,7 @@
13	13	</div>
14	14	<div class="flex justify-between align-center">
15	15	<div class="pre-btn" @click="previousProblem()">
16		- <img src="../../../../resources/img/left.png" alt="" />
	16	+ <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
17	17	</div>
18	18	<div class="content title-box">
19	19	<p class="title mt25 title-bg">step3.</p>
...	...	@@ -107,7 +107,48 @@
107	107	this.selectedButton = number;
108	108	},
109	109	handleSubmit() {
110		- console.log("정답 : ", this.answer);
	110	+
	111	+ const userConfirmed = window.confirm("제출 하시겠습니까?");
	112	+ if (userConfirmed) {
	113	+
	114	+ const problemData = {
	115	+ prblmInfo: this.currentLearningId,
	116	+ prblmNumber: this.currentProblemIndex,
	117	+ prblmAns: this.selectedButton
	118	+ };
	119	+
	120	+ const answerData = {
	121	+ prblmId: this.currentLearningId.prblm_id,
	122	+ prblmAns: this.selectedButton,
	123	+ stdId: this.$store.getters.getStdId,
	124	+ prblmLogAnsCnt: 1
	125	+ };
	126	+
	127	+ this.$store.dispatch('saveProblemData', problemData);
	128	+ this.$store.dispatch('saveProblemAttempt', answerData);
	129	+
	130	+ console.log(this.$store.getters.getAllProblems);
	131	+ console.log(this.$store.getters.getAllAnswers);
	132	+
	133	+
	134	+ axios({
	135	+ url: "problemLog/insertProblemLog.json",
	136	+ method: "post",
	137	+ headers: {
	138	+ "Content-Type": "application/json; charset=UTF-8",
	139	+ },
	140	+ data: this.$store.getters.getAllAnswers,
	141	+ })
	142	+ .then(function (res) {
	143	+ console.log("problem - response : ", res.data);
	144	+ this.goToPage('Chapter4')
	145	+ })
	146	+ .catch(function (error) {
	147	+ console.log("problem - error : ", error);
	148	+ });
	149	+ } else {
	150	+ console.log("Submission canceled by the user.");
	151	+ }
111	152	},
112	153	getProblem() {
113	154	const vm = this;
...	...	@@ -133,19 +174,24 @@
133	174	},
134	175	nextProblem() {
135	176	const problemData = {
136		- prblmImfo: this.currentLearningId,
	177	+ prblmInfo: this.currentLearningId,
137	178	prblmNumber: this.currentProblemIndex,
138	179	prblmAns: this.selectedButton
139	180	}
	181	+ const answerData = {
	182	+ prblmId: this.currentLearningId.prblm_id,
	183	+ prblmAns: this.selectedButton,
	184	+ stdId: this.$store.getters.getStdId,
	185	+ prblmLogAnsCnt: 1
	186	+ }
140	187	this.$store.dispatch('saveProblemData', problemData);
	188	+ this.$store.dispatch('saveProblemAttempt', answerData);
141	189	console.log(this.$store.getters.getAllProblems)
	190	+ console.log(this.$store.getters.getAllAnswers)
142	191	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
143	192	this.$store.dispatch('goToNextProblem');
144	193	this.handleProblemDetail(this.currentLearningId);
145	194	this.goToPage(this.problemType);
146		- } else {
147		- // 마지막 문제면 이동
148		- this.goToPage("Chapter4")
149	195	}
150	196	},
151	197	previousProblem() {
...	...	@@ -282,6 +328,14 @@
282	328	transform: translate(-50%, -50%);
283	329	}
284	330
	331	+.pre-btn img.active {
	332	+ visibility: hidden;
	333	+}
	334	+
	335	+.pre-btn img.active {
	336	+ visibility: hidden;
	337	+}
	338	+
285	339	.pickGroup button p.active {
286	340	color: #000000;
287	341	}

Delete comment