Commit @c233db491a023fae12546ef0a593ce1cb565622d

홍아랑 2024-08-23

240823 홍아랑 정다정 지문,단어장,미니게임문제들 시퀀스 넘버 추가

@c233db491a023fae12546ef0a593ce1cb565622d

a6f905d

c233db4

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: [],
 
-        // 단어장
-        textId: null,
-        wdBookIdList: [],
-        currentWdBkIndex: 0,
-    };
+    // 단어장
+    textId: null,
+    wdBookIdList: [],
+    currentWdBkIndex: 0,
+
+    // 순서
+    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;
-        },
-
-        // 문제
-        currentLearningId(state) {
-            return state.currentLearningIds[state.currentProblemIndex];
-        },
-        currentLabel: (state) => state.currentLabel,
-        currentProblemIndex: (state) => state.currentProblemIndex,
-        prblmTypeId: (state) => state.prblmTypeId,
-        getAllProblems(state) {
-            return state.allProblems;
-        },
-
-        // 단어장
-        getWdBookIdList(state) {
-            return state.wdBookIdList;
-        },
-        getCurrentWdBkIndex: (state) => state.currentWdBkIndex,
+  state: loadStateFromLocalStorage(),
+  getters: {
+    getUserInfo(state) {
+      return {
+        userId: state.userId,
+        userNm: state.userNm,
+        authcd: state.authcd,
+      };
     },
-    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);
-        },
-
-        // 문제
-        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;
-            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);
-            }
-        },
-
-        // 단어장
-        setWdBookIdList(state, wdBookIdList) {
-            state.wdBookIdList = wdBookIdList;
-            saveStateToLocalStorage(state);
-        },
-        setCurrentWdBkIndex(state, currentWdBkIndex) {
-            state.currentWdBkIndex = currentWdBkIndex;
-            saveStateToLocalStorage(state);
-        }
+    getStdId(state) {
+      return state.stdId;
     },
-    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);
-        },
-
-        // 문제
-        goToNextProblem({ commit }) {
-            commit("incrementProblemIndex");
-        },
-        goToPreviousProblem({ commit }) {
-            commit("decrementProblemIndex");
-        },
-        saveProblemData({ commit }, problemData) {
-            commit('saveOrUpdateProblem', problemData);
-        },
-
-        // 단어장
-        updateWdBookIdList({ commit }, wdBookIdList) {
-            commit('setWdBookIdList', wdBookIdList);
-        },
-        updateCurrentWdBkIndex({ commit }, currentWdBkIndex) {
-            commit('setCurrentWdBkIndex', currentWdBkIndex);
-        }
+    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;
+    },
+
+    // 단어장
+    getWdBookIdList(state) {
+      return state.wdBookIdList;
+    },
+    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);
+    },
+
+    // 순서
+    // 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
+      );
+
+      if (existingProblemIndex !== -1) {
+        // 문제 데이터 업데이트
+        state.allProblems[existingProblemIndex] = problemData;
+      } else {
+        // 새로운 문제 추가
+        state.allProblems.push(problemData);
+      }
+    },
+
+    // 단어장
+    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);
+    },
+
+    // 문제
+    goToNextProblem({ commit }) {
+      commit("incrementProblemIndex");
+    },
+    goToPreviousProblem({ commit }) {
+      commit("decrementProblemIndex");
+    },
+    saveProblemData({ commit }, problemData) {
+      commit("saveOrUpdateProblem", problemData);
+    },
+
+    // 단어장
+    updateWdBookIdList({ commit }, wdBookIdList) {
+      commit("setWdBookIdList", wdBookIdList);
+    },
+    updateCurrentWdBkIndex({ commit }, currentWdBkIndex) {
+      commit("setCurrentWdBkIndex", currentWdBkIndex);
+    },
+
+    // 순서
+    // updateSeqNum({ commit }) {
+    //   commit("setSeqNum", seqNum);
+    // },
+  },
 });

a6f905d

c233db4

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

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

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


 <template>
-    <div id="Chapter1_2" 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_2" 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="goToPage('Chapter1_1')"><img src="../../../../resources/img/left.png" alt="" /></div>
-            <div class="content title-box">
-                <p class="title mt25 title-bg">step1. Hello WORLD</p>
-                <div class="flex justify-center">
-                    <div class="readGroup">
-                        <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
-                        <div>
-                            <div class="textbox">
-                                <article v-for="(line, index) in combinedLines" :key="index" :class="['flex', 'align-start', 'mb10', { 'justify-end': index % 2 !== 0 }]">
-                                    <div v-if="index % 2 === 0" class="icon mr40">
-                                        <img src="../../../../resources/img/img37_s.png" alt="" />
-                                        <p class="name">{{ speakerA_name }}</p>
-                                    </div>
-                                    <p v-if="index % 2 === 0" class="read">{{ line }}</p>
-
-                                    <p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
-                                    <div v-if="index % 2 !== 0" class="icon">
-                                        <img src="../../../../resources/img/img37_s.png" alt="" />
-                                        <p class="name">{{ speakerB_name }}</p>
-                                    </div>
-                                </article>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="next-btn" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/right.png" alt="" /></div>
-        </div>
-        <TextToImage />
+      </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="goToPage('Chapter1_1')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step1. Hello WORLD</p>
+        <div class="flex justify-center">
+          <div class="readGroup">
+            <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
+            <div>
+              <div class="textbox">
+                <article
+                  v-for="(line, index) in combinedLines"
+                  :key="index"
+                  :class="[
+                    'flex',
+                    'align-start',
+                    'mb10',
+                    { 'justify-end': index % 2 !== 0 },
+                  ]"
+                >
+                  <div v-if="index % 2 === 0" class="icon mr40">
+                    <img src="../../../../resources/img/img37_s.png" alt="" />
+                    <p class="name">{{ speakerA_name }}</p>
+                  </div>
+                  <p v-if="index % 2 === 0" class="read">{{ line }}</p>
+
+                  <p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
+                  <div v-if="index % 2 !== 0" class="icon">
+                    <img src="../../../../resources/img/img37_s.png" alt="" />
+                    <p class="name">{{ speakerB_name }}</p>
+                  </div>
+                </article>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="next-btn" @click="goToNextPage">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
+    </div>
+    <TextToImage />
+  </div>
 </template>
 
 <script>
 import TextToImage from "../../../component/TextToImage.vue";
 import axios from "axios";
 export default {
-    data() {
-        return {
-            text_data: null, // 받아온 지문 정보
-            speakerA_name: null,
-            speakerB_name: null,
-            speakerA: [],
-            speakerB: [],
-        };
-    },
-    methods: {
-        complete() {
-            const { unit_id, book_id } = this.$route.query;
-            this.$router.push({ name: "Dashboard", query: { value: 1, unit_id, book_id } });
-        },
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        // 대화 지문 API
-        async fetchText() {
-            axios({
-                url: "/text/selectOneText.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    textId: this.textId,
-                },
-            })
-                .then((response) => {
-                    this.text_data = response.data[0].text_cnt;
-                    this.splitConversation();
-                })
-                .catch((err) => {
-                    console.log("지문 에러 : ", err);
-                });
-        },
-        // 대화 지문 split
-        splitConversation() {
-            const lines = this.text_data.split("/");
-            const speakers = {};
+  data() {
+    return {
+      text_data: null, // 받아온 지문 정보
+      speakerA_name: null,
+      speakerB_name: null,
+      speakerA: [],
+      speakerB: [],
 
-            lines.forEach((line) => {
-                const [speaker, message] = line.trim().split(":");
-
-                if (!speakers.speakerA_name && !speakers.speakerB_name) {
-                    // 첫 번째 발화자를 speakerA_name으로 설정
-                    speakers.speakerA_name = speaker.trim();
-                    this.speakerA.push(message.trim());
-                } else if (speakers.speakerA_name && !speakers.speakerB_name && speakers.speakerA_name !== speaker.trim()) {
-                    // 두 번째 발화자를 speakerB_name으로 설정
-                    speakers.speakerB_name = speaker.trim();
-                    this.speakerB.push(message.trim());
-                } else if (speaker.trim() === speakers.speakerA_name) {
-                    // speakerA_name에 내용 추가
-                    this.speakerA.push(message.trim());
-                } else if (speaker.trim() === speakers.speakerB_name) {
-                    // speakerB_name에 내용 추가
-                    this.speakerB.push(message.trim());
-                }
-            });
-
-            this.speakerA_name = speakers.speakerA_name;
-            this.speakerB_name = speakers.speakerB_name;
+      seq: this.$store.getters.seqNum,
+    };
+  },
+  methods: {
+    complete() {
+      const { unit_id, book_id } = this.$route.query;
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: this.seq, unit_id, book_id },
+      });
+    },
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    goToNextPage() {
+      alert("지문 학습 완료");
+      this.complete();
+    },
+    // 대화 지문 API
+    async fetchText() {
+      axios({
+        url: "/text/selectOneText.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-    },
-    watch: {},
-    computed: {
-        textId() {
-            //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
-            return this.$store.getters.getTextId;
+        data: {
+          textId: this.textId,
         },
-        combinedLines() {
-            const maxLength = Math.max(this.speakerA.length, this.speakerB.length);
-            const lines = [];
+      })
+        .then((response) => {
+          this.text_data = response.data[0].text_cnt;
+          this.splitConversation();
+        })
+        .catch((err) => {
+          console.log("지문 에러 : ", err);
+        });
+    },
+    // 대화 지문 split
+    splitConversation() {
+      const lines = this.text_data.split("/");
+      const speakers = {};
 
-            for (let i = 0; i < maxLength; i++) {
-                if (i < this.speakerA.length) {
-                    lines.push(this.speakerA[i]);
-                }
-                if (i < this.speakerB.length) {
-                    lines.push(this.speakerB[i]);
-                }
-            }
-            return lines;
-        },
+      lines.forEach((line) => {
+        const [speaker, message] = line.trim().split(":");
+
+        if (!speakers.speakerA_name && !speakers.speakerB_name) {
+          // 첫 번째 발화자를 speakerA_name으로 설정
+          speakers.speakerA_name = speaker.trim();
+          this.speakerA.push(message.trim());
+        } else if (
+          speakers.speakerA_name &&
+          !speakers.speakerB_name &&
+          speakers.speakerA_name !== speaker.trim()
+        ) {
+          // 두 번째 발화자를 speakerB_name으로 설정
+          speakers.speakerB_name = speaker.trim();
+          this.speakerB.push(message.trim());
+        } else if (speaker.trim() === speakers.speakerA_name) {
+          // speakerA_name에 내용 추가
+          this.speakerA.push(message.trim());
+        } else if (speaker.trim() === speakers.speakerB_name) {
+          // speakerB_name에 내용 추가
+          this.speakerB.push(message.trim());
+        }
+      });
+
+      this.speakerA_name = speakers.speakerA_name;
+      this.speakerB_name = speakers.speakerB_name;
     },
-    components: {
-        TextToImage: TextToImage,
+  },
+  watch: {},
+  computed: {
+    textId() {
+      //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
+      return this.$store.getters.getTextId;
     },
-    mounted() {
-        this.fetchText();
+    combinedLines() {
+      const maxLength = Math.max(this.speakerA.length, this.speakerB.length);
+      const lines = [];
+
+      for (let i = 0; i < maxLength; i++) {
+        if (i < this.speakerA.length) {
+          lines.push(this.speakerA[i]);
+        }
+        if (i < this.speakerB.length) {
+          lines.push(this.speakerB[i]);
+        }
+      }
+      return lines;
     },
+  },
+  components: {
+    TextToImage: TextToImage,
+  },
+  mounted() {
+    this.fetchText();
+  },
 };
 </script>
 
 <style>
 .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";
 }
 </style>

a6f905d

c233db4

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

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

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


 <template>
-    <div id="Chapter1" 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" 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="goToPage('Chapter1_2')"><img src="../../../../resources/img/left.png" alt="" /></div>
-            <div class="content title-box">
-                <div class="listenGroup">
-                    <p class="title mt25 title-bg">step1. Hello WORLD</p>
-                    <!--
+      </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="goToPage('Chapter1_2')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
+      <div class="content title-box">
+        <div class="listenGroup">
+          <p class="title mt25 title-bg">step1. Hello WORLD</p>
+          <!--
                     <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1" />
                     -->
-                    <img class="bg" :src="img_src" />
-                </div>
-            </div>
-            <div class="next-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/right.png" alt="" /></div>
+          <img class="bg" :src="img_src" />
         </div>
-        <TextToImage />
+      </div>
+      <div class="next-btn" @click="goToNextPage">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
+    <TextToImage />
+  </div>
 </template>
 
 <script>
 import TextToImage from "../../../component/TextToImage.vue";
 import axios from "axios";
 export default {
-    data() {
-        return {
-            text_data: null,
-            img_src: null,
-        };
+  data() {
+    return {
+      text_data: null,
+      img_src: null,
+      seq: this.$store.getters.seqNum,
+    };
+  },
+  methods: {
+    complete() {
+      const { unit_id, book_id } = this.$route.query;
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: this.seq, unit_id, book_id },
+      });
     },
-    methods: {
-        complete() {
-            const { unit_id, book_id } = this.$route.query;
-            this.$router.push({ name: "Dashboard", query: { value: 1, unit_id, book_id } });
-        },
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        // 지문 API
-        async fetchText() {
-            axios({
-                url: "/text/selectOneText.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    textId: this.textId,
-                },
-            })
-                .then((response) => {
-                    this.text_data = response.data[0];
-                    console.log("지문 데이터 : ", this.text_data);
-                    this.img_src = this.fetchImage(this.text_data.file_rpath);
-                })
-                .catch((err) => {
-                    console.log("지문 에러 : ", err);
-                });
-        },
-        // 이미지 불러오기
-        fetchImage(fileRpath) {
-            return "http://165.229.169.113:9080/" + fileRpath;
-        },
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    watch: {},
-    computed: {
-        textId() {
-            //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
-            return this.$store.getters.getTextId;
+    goToNextPage() {
+      alert("지문 학습 완료");
+      this.complete();
+    },
+    // 지문 API
+    async fetchText() {
+      axios({
+        url: "/text/selectOneText.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
+        data: {
+          textId: this.textId,
+        },
+      })
+        .then((response) => {
+          this.text_data = response.data[0];
+          console.log("지문 데이터 : ", this.text_data);
+          this.img_src = this.fetchImage(this.text_data.file_rpath);
+        })
+        .catch((err) => {
+          console.log("지문 에러 : ", err);
+        });
     },
-    components: {
-        TextToImage: TextToImage,
+    // 이미지 불러오기
+    fetchImage(fileRpath) {
+      return "http://165.229.169.113:9080/" + fileRpath;
     },
-    mounted() {
-        this.fetchText();
+  },
+  watch: {},
+  computed: {
+    textId() {
+      //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
+      return this.$store.getters.getTextId;
     },
+  },
+  components: {
+    TextToImage: TextToImage,
+  },
+  mounted() {
+    this.fetchText();
+  },
 };
 </script>
 <style scoped>
 .listenGroup .textbox {
-    width: 900px;
+  width: 900px;
 }
 
 .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";
 }
 </style>

a6f905d

c233db4

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

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

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


       problemData: [],
       // problemArr: [],
       answerArr: [],
+
+      seq: this.$store.getters.seqNum,
     };
   },
   methods: {

       const { unit_id, book_id } = this.$route.query;
       this.$router.push({
         name: "Dashboard",
-        query: { value: 3, unit_id, book_id },
+        query: { value: this.seq, unit_id, book_id },
       });
     },
     goToPage(page) {

         this.goToPage(this.problemType);
       } else {
         // 마지막 문제면 이동
-        this.goToPage("Chapter4");
+        // this.goToPage("Chapter4");
+        alert("문제 학습 완료");
+        this.complete();
       }
     },
     previousProblem() {

a6f905d

c233db4

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

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

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


       prblm_id: [],
       unit_id: null,
       dataList: [],
+
+      seq: this.$store.getters.seqNum,
     };
   },
   methods: {

       const { unit_id, book_id } = this.$route.query;
       this.$router.push({
         name: "Dashboard",
-        query: { value: 3, unit_id, book_id },
+        query: { value: this.seq, unit_id, book_id },
       });
     },
     goToPage(page) {

         this.goToPage(this.problemType);
       } else {
         // 마지막 문제면 이동
-        this.goToPage("Chapter4");
+        // this.goToPage("Chapter4");
+        alert("문제 학습 완료");
+        this.complete();
       }
     },
     previousProblem() {

a6f905d

c233db4

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

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

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


       problemData: [],
       // problemArr: [],
       answerArr: [],
+
+      seq: this.$store.getters.seqNum,
     };
   },
   methods: {

       const { unit_id, book_id } = this.$route.query;
       this.$router.push({
         name: "Dashboard",
-        query: { value: 3, unit_id, book_id },
+        query: { value: this.seq, unit_id, book_id },
       });
     },
     goToPage(page) {

         this.goToPage(this.problemType);
       } else {
         // 마지막 문제면 이동
-        this.goToPage("Chapter4");
+        // this.goToPage("Chapter4");
+        alert("문제 학습 완료");
+        this.complete();
       }
     },
     previousProblem() {

a6f905d

c233db4

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

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

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


             <button class="popTxt" v-for="(item, index) in items" :key="index">
               <div class="listenGroup">
                 <img :src="item.imgSrc1" />
-                <p class="textbox"><img :src="item.imgSrc" style="height: 150px;"/></p>
+                <p class="textbox">
+                  <img :src="item.imgSrc" style="height: 150px" />
+                </p>
               </div>
               <div
                 class="listenGroup"

 </template>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
 
 export default {
   data() {

       currentWdBkIndex: 0, // 현재 단어장 인덱스
       wdBookTypeIdState: "", // 이동할 페이지 타입 id
       wordBookType: "", // 이동할 페이지
+
+      seq: this.$store.getters.seqNum,
     };
   },
   methods: {
     pageSetting() {
       this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
       this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
-      this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
+      this.wdBookId =
+        this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
       console.log(this.wdBookId);
 
       this.fetchWordList();

 
     async fetchWordList() {
       try {
-        const response = await axios.post('/word/getWordsByBookId.json', {
+        const response = await axios.post("/word/getWordsByBookId.json", {
           wdBookId: this.wdBookId,
         });
 

             file_mng_id: word.fileMngId,
           });
 
-          const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
+          const fileRpath =
+            fileResponse.data.list.length > 0
+              ? fileResponse.data.list[0].fileRpath
+              : null;
           console.log("각 단어의 fileRpath: ", fileRpath);
 
           // items 배열에 새로운 항목 추가

             imgSrc1: "client/resources/img/img49_s.png",
             imgSrc2: "client/resources/img/img50_s.png",
             imgSrc: "http://165.229.169.113:9080/" + fileRpath, // 받아온 fileRpath로 이미지 설정
-            isSecondImageVisible: false, 
+            isSecondImageVisible: false,
             title: word.wdNm,
           });
         });
 
         // 모든 요청이 완료될 때까지 대기
         await Promise.all(requests);
-
       } catch (error) {
-        console.error('단어 목록을 불러오는 중 오류 발생:', error);
+        console.error("단어 목록을 불러오는 중 오류 발생:", error);
       }
     },
 

         alert("단어장 첫번째 페이지 입니다");
       } else {
         this.currentWdBkIndex--;
-        this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
 
         try {
           const response = await axios.post("/wordbook/find.json", {
-            wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
+            wdBookId:
+              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
           });
           this.wdBookTypeIdState = response.data.wdBookTypeId;
           console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
 
           switch (this.wdBookTypeIdState) {
             case "1":
-                this.wordBookType = "Chapter2";
-                break;
+              this.wordBookType = "Chapter2";
+              break;
             case "2":
-                this.wordBookType = "Chapter2_3";
-                break;
+              this.wordBookType = "Chapter2_3";
+              break;
             case "3":
-                this.wordBookType = "Chapter2_2";
-                break;
+              this.wordBookType = "Chapter2_2";
+              break;
             case "4":
-                this.wordBookType = "Chapter2_9";
-                break;
+              this.wordBookType = "Chapter2_9";
+              break;
             case "5":
-                this.wordBookType = "Chapter2_4";
-                break;
+              this.wordBookType = "Chapter2_4";
+              break;
             default:
-                this.wordBookType = null;
+              this.wordBookType = null;
           }
-          
-          this.goToPage(this.wordBookType); 
+
+          this.goToPage(this.wordBookType);
         } catch (error) {
-          console.error('단어장 정보 불러오는 중 오류 발생:', error);
+          console.error("단어장 정보 불러오는 중 오류 발생:", error);
         }
       }
     },

     async goToNextPage() {
       if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
         alert("단어장 마지막 페이지 입니다");
+        this.complete();
       } else {
         this.currentWdBkIndex++;
-        this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
 
         try {
           const response = await axios.post("/wordbook/find.json", {
-            wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
+            wdBookId:
+              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
           });
           this.wdBookTypeIdState = response.data.wdBookTypeId;
           console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
 
           switch (this.wdBookTypeIdState) {
             case "1":
-                this.wordBookType = "Chapter2";
-                break;
+              this.wordBookType = "Chapter2";
+              break;
             case "2":
-                this.wordBookType = "Chapter2_3";
-                break;
+              this.wordBookType = "Chapter2_3";
+              break;
             case "3":
-                this.wordBookType = "Chapter2_2";
-                break;
+              this.wordBookType = "Chapter2_2";
+              break;
             case "4":
-                this.wordBookType = "Chapter2_9";
-                break;
+              this.wordBookType = "Chapter2_9";
+              break;
             case "5":
-                this.wordBookType = "Chapter2_4";
-                break;
+              this.wordBookType = "Chapter2_4";
+              break;
             default:
-                this.wordBookType = null;
+              this.wordBookType = null;
           }
-          
-          this.goToPage(this.wordBookType); 
+
+          this.goToPage(this.wordBookType);
         } catch (error) {
-          console.error('단어장 정보 불러오는 중 오류 발생:', error);
+          console.error("단어장 정보 불러오는 중 오류 발생:", error);
         }
       }
     },
 
     complete() {
       const { unit_id, book_id } = this.$route.query;
-      this.$router.push({ name: 'Dashboard', query: { value: 2, unit_id, book_id } });
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: this.seq, unit_id, book_id },
+      });
     },
+
     goToPage(page) {
       this.$router.push({ name: page });
     },

a6f905d

c233db4

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

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

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


 <template>
-    <div id="Chapter2_2" 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="Chapter2_2" 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="goToPage('Chapter2')"> <!-- @click="goToPrevPage" -->
-                <img src="../../../../resources/img/left.png" alt="" />
-            </div>
-            <div class="content title-box">
-                <p class="subtitle2"></p>
-                <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
-                <div class="flex align-center mb30">
-                    <p class="subtitle2 mr20">다음을 듣고 따라 말하세요.</p>
-                    <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-         </button> -->
-                </div>
-
-                <div class="imgGroup box23">
-                    <div class="con">
-                        <img :src="currentCon.imgSrc" alt="" style="height: 150px;"/>
-                        <p class="title3">
-                            <em class="yellow">{{ currentCon.titleEm }}</em
-                            >{{ currentCon.title }}
-                        </p>
-                        <div class="flex align-center justify-center mt10">
-                            <p class="yellow-box-big">{{ currentCon.boxText }}</p>
-                            <span class="subtitle3">{{ currentCon.subtitle }}</span>
-                        </div>
-                        <div class="flex justify-center">
-                            <div class="btnGroup mt50 flex justify-between">
-                                <button
-                                    class="popTxt"
-                                    v-for="(item, index) in items"
-                                    :key="index"
-                                    @click="updateContent(index)"
-                                    :class="{ active: selectedIndex === index }"
-                                >
-                                    <img :src="item.imgSrc1" />
-                                    <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block" />
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="flex justify-center">
-                        <div class="readGroup">
-                            <section>
-                                <div class="imgGroup flex justify-center">
-                                    <!-- 녹음 버튼 -->
-                                    <div :class="['mic-btn', { notRecording: !isRecording }]" @click="toggleRecording">
-                                        <img src="../../../../resources/img/btn11_s.png" alt="" />
-                                    </div>
-                                </div>
-                                <article>
-                                    <p ref="speakText" class="speakText mb25">위의 버튼을 누른 후 단어를 말해보세요!</p>
-                                </article>
-                            </section>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="next-btn" @click="goToPage('Chapter2_2')"> <!-- @click="goToNextPage" -->
-                <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="goToPage('Chapter2')">
+        <!-- @click="goToPrevPage" -->
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
+      <div class="content title-box">
+        <p class="subtitle2"></p>
+        <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">다음을 듣고 따라 말하세요.</p>
+          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+         </button> -->
+        </div>
+
+        <div class="imgGroup box23">
+          <div class="con">
+            <img :src="currentCon.imgSrc" alt="" style="height: 150px" />
+            <p class="title3">
+              <em class="yellow">{{ currentCon.titleEm }}</em
+              >{{ currentCon.title }}
+            </p>
+            <div class="flex align-center justify-center mt10">
+              <p class="yellow-box-big">{{ currentCon.boxText }}</p>
+              <span class="subtitle3">{{ currentCon.subtitle }}</span>
+            </div>
+            <div class="flex justify-center">
+              <div class="btnGroup mt50 flex justify-between">
+                <button
+                  class="popTxt"
+                  v-for="(item, index) in items"
+                  :key="index"
+                  @click="updateContent(index)"
+                  :class="{ active: selectedIndex === index }"
+                >
+                  <img :src="item.imgSrc1" />
+                  <img
+                    :src="item.imgSrc2"
+                    v-if="selectedIndex === index"
+                    style="display: block"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-center">
+            <div class="readGroup">
+              <section>
+                <div class="imgGroup flex justify-center">
+                  <!-- 녹음 버튼 -->
+                  <div
+                    :class="['mic-btn', { notRecording: !isRecording }]"
+                    @click="toggleRecording"
+                  >
+                    <img src="../../../../resources/img/btn11_s.png" alt="" />
+                  </div>
+                </div>
+                <article>
+                  <p ref="speakText" class="speakText mb25">
+                    위의 버튼을 누른 후 단어를 말해보세요!
+                  </p>
+                </article>
+              </section>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="next-btn" @click="goToNextPage">
+        <!-- @click="goToNextPage" -->
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import axios from 'axios';
-import { mdiStop } from '@mdi/js';
+import axios from "axios";
+import { mdiStop } from "@mdi/js";
 export default {
-    data() {
-        return {
-            items: [],
-            currentCon: {
-                imgSrc: '',
-                titleEm: '',
-                title: '',
-                boxText: '명',
-                subtitle: '',
-            },
-            selectedIndex: 0,
-            timer: '00',
-            intervalId: null,
+  data() {
+    return {
+      items: [],
+      currentCon: {
+        imgSrc: "",
+        titleEm: "",
+        title: "",
+        boxText: "명",
+        subtitle: "",
+      },
+      selectedIndex: 0,
+      timer: "00",
+      intervalId: null,
 
-            isRecording: false, // 녹음 중 여부
-            mediaRecorder: null,
-            audioChunks: [], // 녹음된 오디오 데이터
-            audioBlob: null, // 오디오 Blob 객체
-            stream: null, // MediaStream 객체
+      isRecording: false, // 녹음 중 여부
+      mediaRecorder: null,
+      audioChunks: [], // 녹음된 오디오 데이터
+      audioBlob: null, // 오디오 Blob 객체
+      stream: null, // MediaStream 객체
 
-            path: mdiStop,
-            nowWord: 'cloud',
+      path: mdiStop,
+      nowWord: "cloud",
 
-            wdBookId: "WORD_BOOK_000000000000043",
-            wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
-            currentWdBkIndex: 0, // 현재 단어장 인덱스
-            wdBookTypeIdState: "", // 이동할 페이지 타입 id
-            wordBookType: "", // 이동할 페이지
-        };
+      wdBookId: "WORD_BOOK_000000000000043",
+      wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트
+      currentWdBkIndex: 0, // 현재 단어장 인덱스
+      wdBookTypeIdState: "", // 이동할 페이지 타입 id
+      wordBookType: "", // 이동할 페이지
+
+      seq: this.$store.getters.seqNum,
+    };
+  },
+  methods: {
+    pageSetting() {
+      this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
+      this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
+      this.wdBookId =
+        this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
+
+      // this.fetchWordList();
     },
-    methods: {
-        pageSetting() {
-            this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
-            this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
-            this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
 
-            // this.fetchWordList();
-        },
+    async goToPrevPage() {
+      if (this.currentWdBkIndex - 1 < 0) {
+        alert("단어장 첫번째 페이지 입니다");
+      } else {
+        this.currentWdBkIndex--;
+        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
 
-        async goToPrevPage() {
-            if (this.currentWdBkIndex - 1 < 0) {
-                alert("단어장 첫번째 페이지 입니다");
-            } else {
-                this.currentWdBkIndex--;
-                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+        try {
+          const response = await axios.post("/wordbook/find.json", {
+            wdBookId:
+              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+          });
+          this.wdBookTypeIdState = response.data.wdBookTypeId;
+          console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
 
-                try {
-                    const response = await axios.post("/wordbook/find.json", {
-                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
-                    });
-                    this.wdBookTypeIdState = response.data.wdBookTypeId;
-                    console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
+          switch (this.wdBookTypeIdState) {
+            case "1":
+              this.wordBookType = "Chapter2";
+              break;
+            case "2":
+              this.wordBookType = "Chapter2_3";
+              break;
+            case "3":
+              this.wordBookType = "Chapter2_2";
+              break;
+            case "4":
+              this.wordBookType = "Chapter2_9";
+              break;
+            case "5":
+              this.wordBookType = "Chapter2_4";
+              break;
+            default:
+              this.wordBookType = null;
+          }
 
-                    switch (this.wdBookTypeIdState) {
-                        case "1":
-                            this.wordBookType = "Chapter2";
-                            break;
-                        case "2":
-                            this.wordBookType = "Chapter2_3";
-                            break;
-                        case "3":
-                            this.wordBookType = "Chapter2_2";
-                            break;
-                        case "4":
-                            this.wordBookType = "Chapter2_9";
-                            break;
-                        case "5":
-                            this.wordBookType = "Chapter2_4";
-                            break;
-                        default:
-                            this.wordBookType = null;
-                    }
-                    
-                    this.goToPage(this.wordBookType); 
-                } catch (error) {
-                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
-                }
-            }
-        },
-
-        async goToNextPage() {
-            if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
-                alert("단어장 마지막 페이지 입니다");
-            } else {
-                this.currentWdBkIndex++;
-                this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
-
-                try {
-                    const response = await axios.post("/wordbook/find.json", {
-                        wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
-                    });
-                    this.wdBookTypeIdState = response.data.wdBookTypeId;
-                    console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
-
-                    switch (this.wdBookTypeIdState) {
-                        case "1":
-                            this.wordBookType = "Chapter2";
-                            break;
-                        case "2":
-                            this.wordBookType = "Chapter2_3";
-                            break;
-                        case "3":
-                            this.wordBookType = "Chapter2_2";
-                            break;
-                        case "4":
-                            this.wordBookType = "Chapter2_9";
-                            break;
-                        case "5":
-                            this.wordBookType = "Chapter2_4";
-                            break;
-                        default:
-                            this.wordBookType = null;
-                    }
-                    
-                    this.goToPage(this.wordBookType); 
-                } catch (error) {
-                    console.error('단어장 정보 불러오는 중 오류 발생:', error);
-                }
-            }
-        },
-
-        complete() {
-            const { unit_id, book_id } = this.$route.query;
-            this.$router.push({ name: 'Dashboard', query: { value: 2, unit_id, book_id } });
-        },
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        updateContent(index) {
-            this.selectedIndex = index;
-            this.currentCon = this.items[index].con;
-            console.log(this.currentCon.imgSrc);
-            this.startTimer();
-        },
-        startTimer() {
-            if (this.intervalId) {
-                clearInterval(this.intervalId);
-            }
-            this.timer = 5;
-            this.intervalId = setInterval(() => {
-                if (this.timer > 0) {
-                    this.timer--;
-                } else {
-                    clearInterval(this.intervalId);
-                }
-            }, 1000);
-        },
-        // 녹음 시작/중지 토글
-        async toggleRecording() {
-            if (this.isRecording) {
-                console.log('녹음 그만!');
-                this.stopRecording(); // 녹음 중이면 중지
-            } else {
-                console.log('녹음 시작!');
-                await this.startRecording(); // 녹음 중이 아니면 녹음 시작
-            }
-        },
-        // 녹음 시작
-        async startRecording() {
-            this.audioChunks = []; // 오디오 초기화
-            this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            this.mediaRecorder = new MediaRecorder(this.stream);
-            this.mediaRecorder.ondataavailable = (event) => {
-                this.audioChunks.push(event.data); // 녹음 데이터 저장
-            };
-            this.mediaRecorder.onstop = () => {
-                this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
-
-                /******************************/
-                // this.audioURL = URL.createObjectURL(this.audioBlob); // 오디오 URL 생성
-                // console.log('Audio URL:', this.audioURL);
-                /******************************/
-
-                console.log('Recorded Audio Blob:', this.audioBlob); // 콘솔에 Blob 확인
-                this.sendAudioToServer(); // 서버로 오디오 전송
-            };
-            this.mediaRecorder.start(); // 녹음 시작
-            this.isRecording = true; // 녹음 상태 변경
-        },
-
-        // 녹음 중지
-        stopRecording() {
-            this.mediaRecorder.stop(); // 녹음 중단
-
-            if (this.stream) {
-                this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지
-            }
-
-            this.isRecording = false; // 녹음 상태 변경
-        },
-
-        // 오디오 전송
-        async sendAudioToServer() {
-            const formData = new FormData();
-            formData.append('file', this.audioBlob, 'recording.wav');
-            try {
-                const response = await axios.post('/api/speechToText.json', formData, {
-                    headers: {
-                        'Content-Type': 'multipart/form-data',
-                    },
-                });
-
-                this.transcription = response.data.trim().toLowerCase();
-                this.nowWord = this.nowWord.toLowerCase();
-
-                console.log('지금 단어: ', this.nowWord);
-                console.log('녹음 결과: ', this.transcription);
-
-                if (this.transcription === this.nowWord) {
-                    this.$refs.speakText.innerText = '정답입니다! 잘했어요';
-                } else {
-                    this.$refs.speakText.innerText = '다시 말해보세요!';
-                }
-            } catch (error) {
-                console.log('파일 전송 실패: ', error);
-            }
-        },
-
-        // 단어 리스트를 서버에서 받아와 items에 적용하는 메서드
-        async fetchWordList() {
-            try {
-                const response = await axios.post('/word/getWordsByBookId.json', {
-                    wdBookId: this.wdBookId,
-                });
-
-                this.wordList = response.data;
-
-                const requests = this.wordList.map(async (word, index) => {
-                    // fileRpath를 받아오기 위한 요청
-                    const fileResponse = await axios.post('/file/find.json', {
-                        file_mng_id: word.fileMngId,
-                    });
-
-                    // fileResponse.data.list에서 fileRpath 값을 추출하여 imgSrc에 설정
-                    const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
-                    const imgSrc = fileRpath ? `http://165.229.169.113:9080/${fileRpath}` : '';
-
-                    return {
-                        imgSrc1: `client/resources/img/img53_${6 + index}_35s.png`,
-                        imgSrc2: `client/resources/img/img53_${1 + index}_35s.png`,
-                        con: {
-                            imgSrc, // fileRpath를 imgSrc에 설정
-                            titleEm: word.wdNm.charAt(0), // 단어의 첫 글자
-                            title: word.wdNm.slice(1), // 단어의 나머지 부분
-                            boxText: '명',
-                            subtitle: word.wdMnng, // 단어의 의미
-                        },
-                    };
-                });
-
-                // 모든 요청이 완료될 때까지 대기
-                this.items = await Promise.all(requests);
-
-                // items 리스트의 첫 번째 항목을 currentCon에 설정
-                if (this.items.length > 0) {
-                    this.currentCon = this.items[0].con;
-                    this.nowWord = this.currentCon.titleEm + this.currentCon.title;
-                }
-
-            } catch (error) {
-                console.error('단어 목록을 불러오는 중 오류 발생:', error);
-            }
-        },
-
-    },
-    watch: {
-        transcription: null, // 서버에서 받아온 텍스트 결과
-        currentCon: {
-            handler(newValue) {
-                // Update nowWord when currentCon changes
-                this.nowWord = newValue.titleEm + newValue.title;
-            },
-            deep: true, // Watch for deep changes in currentCon
-        },
-    },
-    mounted() {
-        // this.pageSetting();
-        this.fetchWordList();
-    },
-    beforeDestroy() {
-        if (this.intervalId) {
-            clearInterval(this.intervalId);
+          this.goToPage(this.wordBookType);
+        } catch (error) {
+          console.error("단어장 정보 불러오는 중 오류 발생:", error);
         }
+      }
     },
+
+    async goToNextPage() {
+      if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
+        alert("단어장 마지막 페이지 입니다");
+      } else {
+        this.currentWdBkIndex++;
+        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
+
+        try {
+          const response = await axios.post("/wordbook/find.json", {
+            wdBookId:
+              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
+          });
+          this.wdBookTypeIdState = response.data.wdBookTypeId;
+          console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
+
+          switch (this.wdBookTypeIdState) {
+            case "1":
+              this.wordBookType = "Chapter2";
+              break;
+            case "2":
+              this.wordBookType = "Chapter2_3";
+              break;
+            case "3":
+              this.wordBookType = "Chapter2_2";
+              break;
+            case "4":
+              this.wordBookType = "Chapter2_9";
+              break;
+            case "5":
+              this.wordBookType = "Chapter2_4";
+              break;
+            default:
+              this.wordBookType = null;
+          }
+
+          this.goToPage(this.wordBookType);
+        } catch (error) {
+          console.error("단어장 정보 불러오는 중 오류 발생:", error);
+        }
+      }
+    },
+
+    complete() {
+      const { unit_id, book_id } = this.$route.query;
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: this.seq, unit_id, book_id },
+      });
+    },
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    updateContent(index) {
+      this.selectedIndex = index;
+      this.currentCon = this.items[index].con;
+      console.log(this.currentCon.imgSrc);
+      this.startTimer();
+    },
+    startTimer() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    },
+    // 녹음 시작/중지 토글
+    async toggleRecording() {
+      if (this.isRecording) {
+        console.log("녹음 그만!");
+        this.stopRecording(); // 녹음 중이면 중지
+      } else {
+        console.log("녹음 시작!");
+        await this.startRecording(); // 녹음 중이 아니면 녹음 시작
+      }
+    },
+    // 녹음 시작
+    async startRecording() {
+      this.audioChunks = []; // 오디오 초기화
+      this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      this.mediaRecorder = new MediaRecorder(this.stream);
+      this.mediaRecorder.ondataavailable = (event) => {
+        this.audioChunks.push(event.data); // 녹음 데이터 저장
+      };
+      this.mediaRecorder.onstop = () => {
+        this.audioBlob = new Blob(this.audioChunks, { type: "audio/wav" });
+
+        /******************************/
+        // this.audioURL = URL.createObjectURL(this.audioBlob); // 오디오 URL 생성
+        // console.log('Audio URL:', this.audioURL);
+        /******************************/
+
+        console.log("Recorded Audio Blob:", this.audioBlob); // 콘솔에 Blob 확인
+        this.sendAudioToServer(); // 서버로 오디오 전송
+      };
+      this.mediaRecorder.start(); // 녹음 시작
+      this.isRecording = true; // 녹음 상태 변경
+    },
+
+    // 녹음 중지
+    stopRecording() {
+      this.mediaRecorder.stop(); // 녹음 중단
+
+      if (this.stream) {
+        this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지
+      }
+
+      this.isRecording = false; // 녹음 상태 변경
+    },
+
+    // 오디오 전송
+    async sendAudioToServer() {
+      const formData = new FormData();
+      formData.append("file", this.audioBlob, "recording.wav");
+      try {
+        const response = await axios.post("/api/speechToText.json", formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        });
+
+        this.transcription = response.data.trim().toLowerCase();
+        this.nowWord = this.nowWord.toLowerCase();
+
+        console.log("지금 단어: ", this.nowWord);
+        console.log("녹음 결과: ", this.transcription);
+
+        if (this.transcription === this.nowWord) {
+          this.$refs.speakText.innerText = "정답입니다! 잘했어요";
+        } else {
+          this.$refs.speakText.innerText = "다시 말해보세요!";
+        }
+      } catch (error) {
+        console.log("파일 전송 실패: ", error);
+      }
+    },
+
+    // 단어 리스트를 서버에서 받아와 items에 적용하는 메서드
+    async fetchWordList() {
+      try {
+        const response = await axios.post("/word/getWordsByBookId.json", {
+          wdBookId: this.wdBookId,
+        });
+
+        this.wordList = response.data;
+
+        const requests = this.wordList.map(async (word, index) => {
+          // fileRpath를 받아오기 위한 요청
+          const fileResponse = await axios.post("/file/find.json", {
+            file_mng_id: word.fileMngId,
+          });
+
+          // fileResponse.data.list에서 fileRpath 값을 추출하여 imgSrc에 설정
+          const fileRpath =
+            fileResponse.data.list.length > 0
+              ? fileResponse.data.list[0].fileRpath
+              : null;
+          const imgSrc = fileRpath
+            ? `http://165.229.169.113:9080/${fileRpath}`
+            : "";
+
+          return {
+            imgSrc1: `client/resources/img/img53_${6 + index}_35s.png`,
+            imgSrc2: `client/resources/img/img53_${1 + index}_35s.png`,
+            con: {
+              imgSrc, // fileRpath를 imgSrc에 설정
+              titleEm: word.wdNm.charAt(0), // 단어의 첫 글자
+              title: word.wdNm.slice(1), // 단어의 나머지 부분
+              boxText: "명",
+              subtitle: word.wdMnng, // 단어의 의미
+            },
+          };
+        });
+
+        // 모든 요청이 완료될 때까지 대기
+        this.items = await Promise.all(requests);
+
+        // items 리스트의 첫 번째 항목을 currentCon에 설정
+        if (this.items.length > 0) {
+          this.currentCon = this.items[0].con;
+          this.nowWord = this.currentCon.titleEm + this.currentCon.title;
+        }
+      } catch (error) {
+        console.error("단어 목록을 불러오는 중 오류 발생:", error);
+      }
+    },
+  },
+  watch: {
+    transcription: null, // 서버에서 받아온 텍스트 결과
+    currentCon: {
+      handler(newValue) {
+        // Update nowWord when currentCon changes
+        this.nowWord = newValue.titleEm + newValue.title;
+      },
+      deep: true, // Watch for deep changes in currentCon
+    },
+  },
+  mounted() {
+    // this.pageSetting();
+    this.fetchWordList();
+  },
+  beforeDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  },
 };
 </script>
 
 <style scoped>
 .popTxt img {
-    position: absolute;
-    top: 0;
-    left: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .box23 {
-    display: flex;
-    align-items: center;
-    gap: 80px;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  gap: 80px;
+  justify-content: center;
 }
 
 .mic-btn {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .mic-btn.notRecording {
-    background-image: none;
-    cursor: pointer;
+  background-image: none;
+  cursor: pointer;
 }
 
 .speakText {
-    background-color: #fff8e9;
-    border: 0;
+  background-color: #fff8e9;
+  border: 0;
 }
 
 .speakText span {
-    font-size: 28px;
+  font-size: 28px;
 }
 
 .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";
 }
 </style>

a6f905d

c233db4

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

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

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


                 />
                 <div class="textbox">
                   <div style="height: 80%; line-height: 200px">
-                    <img :src="item.imgSrc" alt="" style="width: 120px;" />
+                    <img :src="item.imgSrc" alt="" style="width: 120px" />
                   </div>
                   <p class="subtitle3" style="height: 20%">{{ item.title }}</p>
                 </div>

       currentWdBkIndex: 0, // 현재 단어장 인덱스
       wdBookTypeIdState: "", // 이동할 페이지 타입 id
       wordBookType: "", // 이동할 페이지
+
+      seq: this.$store.getters.seqNum,
     };
   },
   methods: {
     pageSetting() {
       this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
       this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
-      this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
+      this.wdBookId =
+        this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
 
       this.fetchWordList();
     },
-    
+
     async fetchWordList() {
       try {
-        const response = await axios.post('/word/getWordsByBookId.json', {
+        const response = await axios.post("/word/getWordsByBookId.json", {
           wdBookId: this.wdBookId,
         });
 

             file_mng_id: word.fileMngId,
           });
 
-          const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
+          const fileRpath =
+            fileResponse.data.list.length > 0
+              ? fileResponse.data.list[0].fileRpath
+              : null;
           console.log("각 단어의 fileRpath: ", fileRpath);
 
           // items 배열에 새로운 항목 추가

 
         // 모든 요청이 완료될 때까지 대기
         await Promise.all(requests);
-
       } catch (error) {
-        console.error('단어 목록을 불러오는 중 오류 발생:', error);
+        console.error("단어 목록을 불러오는 중 오류 발생:", error);
       }
     },
 

         alert("단어장 첫번째 페이지 입니다");
       } else {
         this.currentWdBkIndex--;
-        this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
 
         try {
           const response = await axios.post("/wordbook/find.json", {
-            wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
+            wdBookId:
+              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
           });
           this.wdBookTypeIdState = response.data.wdBookTypeId;
           console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
 
           switch (this.wdBookTypeIdState) {
             case "1":
-                this.wordBookType = "Chapter2";
-                break;
+              this.wordBookType = "Chapter2";
+              break;
             case "2":
-                this.wordBookType = "Chapter2_3";
-                break;
+              this.wordBookType = "Chapter2_3";
+              break;
             case "3":
-                this.wordBookType = "Chapter2_2";
-                break;
+              this.wordBookType = "Chapter2_2";
+              break;
             case "4":
-                this.wordBookType = "Chapter2_9";
-                break;
+              this.wordBookType = "Chapter2_9";
+              break;
             case "5":
-                this.wordBookType = "Chapter2_4";
-                break;
+              this.wordBookType = "Chapter2_4";
+              break;
             default:
-                this.wordBookType = null;
+              this.wordBookType = null;
           }
-          
-          this.goToPage(this.wordBookType); 
+
+          this.goToPage(this.wordBookType);
         } catch (error) {
-          console.error('단어장 정보 불러오는 중 오류 발생:', error);
+          console.error("단어장 정보 불러오는 중 오류 발생:", error);
         }
       }
     },

     async goToNextPage() {
       if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
         alert("단어장 마지막 페이지 입니다");
+        this.complete();
       } else {
         this.currentWdBkIndex++;
-        this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
 
         try {
           const response = await axios.post("/wordbook/find.json", {
-            wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
+            wdBookId:
+              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
           });
           this.wdBookTypeIdState = response.data.wdBookTypeId;
           console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
 
           switch (this.wdBookTypeIdState) {
             case "1":
-                this.wordBookType = "Chapter2";
-                break;
+              this.wordBookType = "Chapter2";
+              break;
             case "2":
-                this.wordBookType = "Chapter2_3";
-                break;
+              this.wordBookType = "Chapter2_3";
+              break;
             case "3":
-                this.wordBookType = "Chapter2_2";
-                break;
+              this.wordBookType = "Chapter2_2";
+              break;
             case "4":
-                this.wordBookType = "Chapter2_9";
-                break;
+              this.wordBookType = "Chapter2_9";
+              break;
             case "5":
-                this.wordBookType = "Chapter2_4";
-                break;
+              this.wordBookType = "Chapter2_4";
+              break;
             default:
-                this.wordBookType = null;
+              this.wordBookType = null;
           }
-          
-          this.goToPage(this.wordBookType); 
+
+          this.goToPage(this.wordBookType);
         } catch (error) {
-          console.error('단어장 정보 불러오는 중 오류 발생:', error);
+          console.error("단어장 정보 불러오는 중 오류 발생:", error);
         }
       }
     },
 
     complete() {
       const { unit_id, book_id } = this.$route.query;
-      this.$router.push({ name: 'Dashboard', query: { value: 2, unit_id, book_id } });
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: this.seq, unit_id, book_id },
+      });
     },
+
     goToPage(page) {
       this.$router.push({ name: page });
     },

a6f905d

c233db4

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

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

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


         </div>
       </router-link>
     </div>
-    <div class="title-box mb25 flex align-center mt40" style="
-    justify-content: space-between;
-">
+    <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>
+      <button class="completeBtn" @click="complete">학습 종료</button>
     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="previousProblem()">

           <!-- <p class="title1 mb40" style="color: #464749;">The sun rises in the east and sets in the west. It is very hot during summer.</p>
               <img src="../../../../resources/img/img65_37s.png" alt=""> -->
 
-          <img class="exampleImg" :src="imgUrl" reloadable="true" alt="example img" />
+          <img
+            class="exampleImg"
+            :src="imgUrl"
+            reloadable="true"
+            alt="example img"
+          />
 
           <!-- 정답 칸 -->
           <div class="dropGroup flex align-center justify-center mt30">

 
             <!-- 드롭 가능한 영역 -->
             <div class="dropContainer" id="targetContainer">
-              <div v-for="(slot, index) in answerLength" :key="index" class="dropSlot" @dragover.prevent
-                @drop="onDrop($event, index)">
-                <div class="dropSlot-inner" draggable="true" @dragstart="onDragStart($event, userAnswer[index], index)">
-                  <img src="../../../../resources/img/img64_37s.png" alt="answer slot" />
+              <div
+                v-for="(slot, index) in answerLength"
+                :key="index"
+                class="dropSlot"
+                @dragover.prevent
+                @drop="onDrop($event, index)"
+              >
+                <div
+                  class="dropSlot-inner"
+                  draggable="true"
+                  @dragstart="onDragStart($event, userAnswer[index], index)"
+                >
+                  <img
+                    src="../../../../resources/img/img64_37s.png"
+                    alt="answer slot"
+                  />
                   <div v-if="userAnswer[index]" class="dropped-char">
                     {{ userAnswer[index].toUpperCase() }}
                   </div>

 
           <!-- 드래그 가능한 버튼 -->
           <div class="dragGroup mt40" id="sourceContainer">
-            <button v-for="(char, index) in choiceCharacters" :key="index" draggable="true"
-              @dragstart="onDragStart($event, char)">
-              <img src="../../../../resources/img/img63_37s_2.png" alt="drag letter" />
+            <button
+              v-for="(char, index) in choiceCharacters"
+              :key="index"
+              draggable="true"
+              @dragstart="onDragStart($event, char)"
+            >
+              <img
+                src="../../../../resources/img/img63_37s_2.png"
+                alt="drag letter"
+              />
               <p>{{ char.toUpperCase() }}</p>
             </button>
           </div>

       prblm_id: [],
       unit_id: null,
       dataList: [],
+
+      seq: this.$store.getters.seqNum,
     };
   },
-  computed: {
-  },
+  computed: {},
   methods: {
     complete() {
       const { unit_id, book_id } = this.$route.query;
-      this.$router.push({ name: 'Dashboard', query: { value: 3, unit_id, book_id } });
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: this.seq, unit_id, book_id },
+      });
     },
     goToPage(page) {
       this.$router.push({ name: page });

       if (this.userAnswer[index] === "") {
         this.userAnswer.splice(index, 1, this.draggedChar);
         const charIndex = this.choiceCharacters.indexOf(this.draggedChar);
-        console.log(charIndex)
+        console.log(charIndex);
         if (charIndex > -1) {
           this.choiceCharacters.splice(charIndex, 1); // 드래그한 문자를 choice에서 제거
         }

       const prblmId = this.currentLearningId.prblm_id;
 
       try {
-        const res = await axios.post("problem/problemInfo.json", {
-          prblmId: prblmId,
-        }, {
-          headers: {
-            "Content-Type": "application/json; charset=UTF-8",
+        const res = await axios.post(
+          "problem/problemInfo.json",
+          {
+            prblmId: prblmId,
           },
-        });
+          {
+            headers: {
+              "Content-Type": "application/json; charset=UTF-8",
+            },
+          }
+        );
 
         console.log("problem - response : ", res.data);
         this.dataList = res.data.problem;
         this.problemDetail = res.data.problemDetail[0];
         this.example = this.dataList.prblmExpln;
         this.answer = this.problemDetail.prblmDtlExpln;
-        this.choice = this.answer ? this.shuffleString(this.answer) : '';
+        this.choice = this.answer ? this.shuffleString(this.answer) : "";
         this.splitExample();
         this.initializeUserAnswer();
         this.choiceCharacters = this.choice.split("");

       }
     },
     shuffleString(string) {
-      const array = string.split('');
+      const array = string.split("");
       for (let i = array.length - 1; i > 0; i--) {
         const j = Math.floor(Math.random() * (i + 1));
         [array[i], array[j]] = [array[j], array[i]];
       }
-      return array.join('');
+      return array.join("");
     },
     async findFile(file_mng_id) {
       try {
-        const res = await axios.post("/file/find.json", {
-          file_mng_id: file_mng_id,
-        }, {
-          headers: {
-            "Content-Type": "application/json; charset=UTF-8",
+        const res = await axios.post(
+          "/file/find.json",
+          {
+            file_mng_id: file_mng_id,
           },
-        });
+          {
+            headers: {
+              "Content-Type": "application/json; charset=UTF-8",
+            },
+          }
+        );
         return res.data.list[0];
       } catch (error) {
         console.log("result - error : ", error);

       const problemData = {
         prblmImfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmAns: this.selectedButton,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      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")
+        // this.goToPage("Chapter4");
+        alert("문제 학습 완료");
+        this.complete();
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    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`
   },
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

   padding: 10px 30px;
   border-radius: 10px;
   font-size: 28px;
-  font-family: 'ONEMobilePOPOTF';
+  font-family: "ONEMobilePOPOTF";
 }
 </style>

a6f905d

c233db4

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

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

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


       prblm_id: [],
       problemData: [],
       answerArr: [],
+
+      seq: this.$store.getters.seqNum,
     };
   },
   methods: {

       const { unit_id, book_id } = this.$route.query;
       this.$router.push({
         name: "Dashboard",
-        query: { value: 3, unit_id, book_id },
+        query: { value: this.seq, unit_id, book_id },
       });
     },
     goToPage(page) {

         this.goToPage(this.problemType);
       } else {
         // 마지막 문제면 이동
-        this.goToPage("Chapter4");
+        // this.goToPage("Chapter4");
+        alert("문제 학습 완료");
+        this.complete();
       }
     },
     previousProblem() {

a6f905d

c233db4

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

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

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


       problemData: [],
       problemArr: [],
       answerArr: [],
+
+      seq: this.$store.getters.seqNum,
     };
   },
   methods: {

       const { unit_id, book_id } = this.$route.query;
       this.$router.push({
         name: "Dashboard",
-        query: { value: 4, unit_id, book_id },
+        query: { value: this.seq, unit_id, book_id },
       });
     },
     goToPage(page) {

         this.goToPage(this.problemType);
       } else {
         // 마지막 문제면 이동
-        this.goToPage("Chapter4");
+        // this.goToPage("Chapter4");
+        alert("문제 학습 완료");
+        this.complete();
       }
     },
     previousProblem() {

a6f905d

c233db4

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

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

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


       answerArr: [],
 
       // prblmArr: [],
+      seq: this.$store.getters.seqNum,
     };
   },
   methods: {

       const { unit_id, book_id } = this.$route.query;
       this.$router.push({
         name: "Dashboard",
-        query: { value: 11, unit_id, book_id },
+        query: { value: this.seq, unit_id, book_id },
       });
     },
     goToPage(page) {

         this.goToPage(this.problemType);
       } else {
         // 마지막 문제면 이동
-        this.goToPage("Chapter4");
+        // this.goToPage("Chapter4");
+        alert("문제 학습 완료");
+        this.complete();
+        // this.goToPage("Dashboard");
       }
     },
     previousProblem() {

a6f905d

c233db4

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

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

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


               />
               <div class="vocaGroup">
                 <div
-                  v-for="(word) in wordList"
+                  v-for="word in wordList"
                   :key="word.wdId"
                   class="flex justify-between mb80 word-item"
                 >
                   <article class="flex align-center">
                     <div class="imgGroup mr30">
                       <img
-                        :src= word.fileRpath
+                        :src="word.fileRpath"
                         data-num="1"
                         class="ink"
                         style="width: 150px"

 </template>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
 
 export default {
   data() {

       currentWdBkIndex: 0, // 현재 단어장 인덱스
       wdBookTypeIdState: "", // 이동할 페이지 타입 id
       wordBookType: "", // 이동할 페이지
+
+      seq: this.$store.getters.seqNum,
     };
   },
   methods: {
     pageSetting() {
       this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
       this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
-      this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
+      this.wdBookId =
+        this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
 
       this.fetchWordList();
     },
-    
+
     async fetchWordList() {
       try {
         const response = await axios.post("/word/getWordsByBookId.json", {

             file_mng_id: word.fileMngId,
           });
 
-          const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
+          const fileRpath =
+            fileResponse.data.list.length > 0
+              ? fileResponse.data.list[0].fileRpath
+              : null;
           console.log("각 단어의 fileRpath: ", fileRpath);
 
           word.fileRpath = "http://165.229.169.113:9080/" + fileRpath; // fileRpath 값을 해당 객체에 추가

       }
     },
 
-
     async goToPrevPage() {
       if (this.currentWdBkIndex - 1 < 0) {
         alert("단어장 첫번째 페이지 입니다");
       } else {
         this.currentWdBkIndex--;
-        this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
 
         try {
           const response = await axios.post("/wordbook/find.json", {
-            wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
+            wdBookId:
+              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
           });
           this.wdBookTypeIdState = response.data.wdBookTypeId;
           console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
 
           switch (this.wdBookTypeIdState) {
             case "1":
-                this.wordBookType = "Chapter2";
-                break;
+              this.wordBookType = "Chapter2";
+              break;
             case "2":
-                this.wordBookType = "Chapter2_3";
-                break;
+              this.wordBookType = "Chapter2_3";
+              break;
             case "3":
-                this.wordBookType = "Chapter2_2";
-                break;
+              this.wordBookType = "Chapter2_2";
+              break;
             case "4":
-                this.wordBookType = "Chapter2_9";
-                break;
+              this.wordBookType = "Chapter2_9";
+              break;
             case "5":
-                this.wordBookType = "Chapter2_4";
-                break;
+              this.wordBookType = "Chapter2_4";
+              break;
             default:
-                this.wordBookType = null;
+              this.wordBookType = null;
           }
-          
-          this.goToPage(this.wordBookType); 
+
+          this.goToPage(this.wordBookType);
         } catch (error) {
-          console.error('단어장 정보 불러오는 중 오류 발생:', error);
+          console.error("단어장 정보 불러오는 중 오류 발생:", error);
         }
       }
     },

     async goToNextPage() {
       if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
         alert("단어장 마지막 페이지 입니다");
+        this.complete();
       } else {
         this.currentWdBkIndex++;
-        this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
+        this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
 
         try {
           const response = await axios.post("/wordbook/find.json", {
-            wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
+            wdBookId:
+              this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
           });
           this.wdBookTypeIdState = response.data.wdBookTypeId;
           console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
 
           switch (this.wdBookTypeIdState) {
             case "1":
-                this.wordBookType = "Chapter2";
-                break;
+              this.wordBookType = "Chapter2";
+              break;
             case "2":
-                this.wordBookType = "Chapter2_3";
-                break;
+              this.wordBookType = "Chapter2_3";
+              break;
             case "3":
-                this.wordBookType = "Chapter2_2";
-                break;
+              this.wordBookType = "Chapter2_2";
+              break;
             case "4":
-                this.wordBookType = "Chapter2_9";
-                break;
+              this.wordBookType = "Chapter2_9";
+              break;
             case "5":
-                this.wordBookType = "Chapter2_4";
-                break;
+              this.wordBookType = "Chapter2_4";
+              break;
             default:
-                this.wordBookType = null;
+              this.wordBookType = null;
           }
-          
-          this.goToPage(this.wordBookType); 
+
+          this.goToPage(this.wordBookType);
         } catch (error) {
-          console.error('단어장 정보 불러오는 중 오류 발생:', error);
+          console.error("단어장 정보 불러오는 중 오류 발생:", error);
         }
       }
     },
 
     complete() {
       const { unit_id, book_id } = this.$route.query;
-      this.$router.push({ name: 'Dashboard', query: { value: 2, unit_id, book_id } });
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: this.seq, unit_id, book_id },
+      });
     },
     goToPage(page) {
       this.$router.push({ name: page });

a6f905d

c233db4

client/views/pages/main/Dashboard.vue

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

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


 <template>
-    <p class="title1" v-if="state === 'finish'">오늘 공부를 다했어요! 너무 고생했어요!</p>
-    <p class="title1" v-else-if="state === 'notRegistered'">지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를 등록해볼까요?</p>
-    <p class="title1" v-else-if="state === 'noProblem'">교재에 등록된 문제가 없습니다.</p>
-    <div v-else class="main">
-        <div class="race-wrap">
-            <div class="title-box">
-                <p class="title" style="margin-top: 7rem">{{ titleUnitName }}</p>
-                <p class="subtitle">{{ titleBookName }}</p>
-            </div>
-            <div class="race-box">
-                <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[0] ? 'block' : 'none' }" /></div>
-                <div class="rcon flex justify-end mb5">
-                    <div class="race-btn" @click="[storeLearningId(labeledItems[0])]">
-                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[1] ? 'block' : 'none' }" /></div>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">
-                            <img :src="labeledItems[0].label.length >= 4 ? item.imgSrc3 : item.imgSrc1" :style="{ display: !rabbitCompl[1] ? 'block' : 'none' }" />
-                            <img :src="labeledItems[0].label.length >= 4 ? item.imgSrc4 : item.imgSrc2" :style="{ display: rabbitCompl[1] ? 'block' : 'none' }" />
-                        </button>
-                        <p>{{ labeledItems[0].label }}</p>
-                    </div>
-                    <div class="race-btn" @click="[storeLearningId(labeledItems[1])]">
-                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[2] ? 'block' : 'none' }" /></div>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2">
-                            <img :src="labeledItems[1].label.length >= 4 ? item.imgSrc3 : item.imgSrc1" :style="{ display: !rabbitCompl[2] ? 'block' : 'none' }" />
-                            <img :src="labeledItems[1].label.length >= 4 ? item.imgSrc4 : item.imgSrc2" :style="{ display: rabbitCompl[2] ? 'block' : 'none' }" />
-                        </button>
-                        <p>{{ labeledItems[1].label }}</p>
-                    </div>
-                </div>
-                <div class="lcon flex justify-between mb5">
-                    <div class="race-btn" @click="[storeLearningId(labeledItems[6])]">
-                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[7] ? 'block' : 'none' }" /></div>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="7">
-                            <img :src="labeledItems[6].label.length >= 4 ? item.imgSrc3 : item.imgSrc1" :style="{ display: !rabbitCompl[7] ? 'block' : 'none' }" />
-                            <img :src="labeledItems[6].label.length >= 4 ? item.imgSrc4 : item.imgSrc2" :style="{ display: rabbitCompl[7] ? 'block' : 'none' }" />
-                        </button>
-                        <p>{{ labeledItems[6].label }}</p>
-                    </div>
-                    <div class="race-btn" @click="[goToPage('Chapter2_8'), storeLearningId(labeledItems[5].learning_id)]">
-                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[6] ? 'block' : 'none' }" /></div>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="6">
-                            <img :src="labeledItems[5].label.length >= 4 ? item.imgSrc3 : item.imgSrc1" :style="{ display: !rabbitCompl[6] ? 'block' : 'none' }" />
-                            <img :src="labeledItems[5].label.length >= 4 ? item.imgSrc4 : item.imgSrc2" :style="{ display: rabbitCompl[6] ? 'block' : 'none' }" />
-                        </button>
-                        <p>{{ labeledItems[5].label }}</p>
-                    </div>
-                    <div class="race-btn" @click="[storeLearningId(labeledItems[4])]">
-                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[5] ? 'block' : 'none' }" /></div>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="5">
-                            <img :src="labeledItems[4].label.length >= 4 ? item.imgSrc3 : item.imgSrc1" :style="{ display: !rabbitCompl[5] ? 'block' : 'none' }" />
-                            <img :src="labeledItems[4].label.length >= 4 ? item.imgSrc4 : item.imgSrc2" :style="{ display: rabbitCompl[5] ? 'block' : 'none' }" />
-                        </button>
-                        <p>{{ labeledItems[4].label }}</p>
-                    </div>
-                    <div class="race-btn" @click="[storeLearningId(labeledItems[3])]">
-                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[4] ? 'block' : 'none' }" /></div>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="4">
-                            <img :src="labeledItems[3].label.length >= 4 ? item.imgSrc3 : item.imgSrc1" :style="{ display: !rabbitCompl[4] ? 'block' : 'none' }" />
-                            <img :src="labeledItems[3].label.length >= 4 ? item.imgSrc4 : item.imgSrc2" :style="{ display: rabbitCompl[4] ? 'block' : 'none' }" />
-                        </button>
-                        <p>{{ labeledItems[3].label }}</p>
-                    </div>
-                    <div class="race-btn" @click="[storeLearningId(labeledItems[2])]">
-                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[3] ? 'block' : 'none' }" /></div>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="3">
-                            <img :src="labeledItems[2].label.length >= 4 ? item.imgSrc3 : item.imgSrc1" :style="{ display: !rabbitCompl[3] ? 'block' : 'none' }" />
-                            <img :src="labeledItems[2].label.length >= 4 ? item.imgSrc4 : item.imgSrc2" :style="{ display: rabbitCompl[3] ? 'block' : 'none' }" />
-                        </button>
-                        <p>{{ labeledItems[2].label }}</p>
-                    </div>
-                </div>
-                <div class="rcon flex">
-                    <div class="race-btn" @click="[goToPage('Chapter8'), storeLearningId(labeledItems[7].learning_id)]">
-                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[8] ? 'block' : 'none' }" /></div>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="8">
-                            <img :src="labeledItems[7].label.length >= 4 ? item.imgSrc3 : item.imgSrc1" :style="{ display: !rabbitCompl[8] ? 'block' : 'none' }" />
-                            <img :src="labeledItems[7].label.length >= 4 ? item.imgSrc4 : item.imgSrc2" :style="{ display: rabbitCompl[8] ? 'block' : 'none' }" />
-                        </button>
-                        <p class="long">{{ labeledItems[7].label }}</p>
-                    </div>
-                    <div class="race-btn" @click="[storeLearningId(labeledItems[8])]">
-                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[9] ? 'block' : 'none' }" /></div>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="9">
-                            <img :src="labeledItems[8].label.length >= 4 ? item.imgSrc3 : item.imgSrc1" :style="{ display: !rabbitCompl[9] ? 'block' : 'none' }" />
-                            <img :src="labeledItems[8].label.length >= 4 ? item.imgSrc4 : item.imgSrc2" :style="{ display: rabbitCompl[9] ? 'block' : 'none' }" />
-                        </button>
-                        <p>{{ labeledItems[8].label }}</p>
-                    </div>
-                    <div class="race-btn" @click="[goToPage('Chapter10'), storeLearningId(labeledItems[9].learning_id)]">
-                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[10] ? 'block' : 'none' }" /></div>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="10">
-                            <img :src="labeledItems[9].label.length >= 4 ? item.imgSrc3 : item.imgSrc1" :style="{ display: !rabbitCompl[10] ? 'block' : 'none' }" />
-                            <img :src="labeledItems[9].label.length >= 4 ? item.imgSrc4 : item.imgSrc2" :style="{ display: rabbitCompl[10] ? 'block' : 'none' }" />
-                        </button>
-                        <p>{{ labeledItems[9].label }}</p>
-                    </div>
-
-                    <div class="race-btn" @click="[goToPage('Chapter2_8'), storeLearningId(labeledItems[10].learning_id)]">
-                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[11] ? 'block' : 'none' }" /></div>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImageAndShowPopup(index, '11')" data-num="11">
-                            <img :src="labeledItems[10].label.length >= 4 ? item.imgSrc3 : item.imgSrc1" :style="{ display: !rabbitCompl[11] ? 'block' : 'none' }" />
-                            <img :src="labeledItems[10].label.length >= 4 ? item.imgSrc4 : item.imgSrc2" :style="{ display: rabbitCompl[11] ? 'block' : 'none' }" />
-                        </button>
-                        <p class="long">{{ labeledItems[10].label }}</p>
-                    </div>
-                </div>
-                <div class="race-btn">
-                    <div class="rabbit-running" style="display: flex">
-                        <img class="rabbit-end" src="../../../resources/img/img138_72s.png" alt="" :style="{ display: rabbitEnd ? 'block' : 'none' }" />
-                        <img class="fireworks-end" src="../../../resources/img/fireworks.gif" alt="" :style="{ display: rabbitEnd ? 'block' : 'none' }" />
-                    </div>
-                </div>
-            </div>
-
-            <!-- 팝업 -->
-            <div v-show="searchOpen2" class="popup-wrap">
-                <div class="popup-box">
-                    <button type="button" class="popup-close-btn" style="position: absolute; top: 10px; right: 10px" @click="closeModal">
-                        <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-                    </button>
-
-                    <div class="mb30 text-ct">
-                        <p class="title1 mb20">1단원이 끝났습니다!</p>
-                        <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요</p>
-                    </div>
-                    <div class="flex justify-center">
-                        <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal">사진 촬영</button>
-                    </div>
-                </div>
-            </div>
-            <!-- 카메라 모달 -->
-            <article v-show="showCameraModal" class="popup-wrap">
-                <div class="popup-box" style="top: 500px; left: 500px">
-                    <div class="flex mb10 justify-between">
-                        <p class="popup-title">사진 촬영</p>
-                        <button type="button" class="popup-close-btn" @click="closeModal">
-                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-                        </button>
-                    </div>
-                    <div class="box">
-                        <div style="width: 100%">
-                            <div id="container" ref="container">
-                                <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored" @canplay="onVideoLoaded" style="position: absolute; height: 100%"></video>
-                                <img src="../../../resources/img/camera-rabbit.png" class="camera-rabbit" style="position: absolute" />
-                                <canvas ref="canvas" style="pointer-events: none"></canvas>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex justify-center mt20">
-                        <button class="new-btn" @click="takePhoto">사진 찍기</button>
-                    </div>
-                </div>
-            </article>
+  <p class="title1" v-if="state === 'finish'">
+    오늘 공부를 다했어요! 너무 고생했어요!
+  </p>
+  <p class="title1" v-else-if="state === 'notRegistered'">
+    지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를 등록해볼까요?
+  </p>
+  <p class="title1" v-else-if="state === 'noProblem'">
+    교재에 등록된 문제가 없습니다.
+  </p>
+  <div v-else class="main">
+    <div class="race-wrap">
+      <div class="title-box">
+        <p class="title" style="margin-top: 7rem">{{ titleUnitName }}</p>
+        <p class="subtitle">{{ titleBookName }}</p>
+      </div>
+      <div class="race-box">
+        <div class="rabbit-start">
+          <img
+            src="../../../resources/img/img09_s.png"
+            alt=""
+            :style="{ display: rabbitPos[0] ? 'block' : 'none' }"
+          />
         </div>
-
-        <div class="complete-wrap myphoto">
-            <button class="login-btn mt10" type="submit" style="width: 100%" @click="finishSchedule">
-                <img src="../../../resources/img/btn07_s.png" alt="" style="width: 100%; height: 100px" />
-                <p>학습 종료하기</p>
+        <div class="rcon flex justify-end mb5">
+          <div class="race-btn" @click="[storeLearningId(labeledItems[0])]">
+            <div class="rabbit-running">
+              <img
+                src="../../../resources/img/img09_s.png"
+                alt=""
+                :style="{ display: rabbitPos[1] ? 'block' : 'none' }"
+              />
+            </div>
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="1"
+            >
+              <img
+                :src="
+                  labeledItems[0].label.length >= 4
+                    ? item.imgSrc3
+                    : item.imgSrc1
+                "
+                :style="{ display: !rabbitCompl[1] ? 'block' : 'none' }"
+              />
+              <img
+                :src="
+                  labeledItems[0].label.length >= 4
+                    ? item.imgSrc4
+                    : item.imgSrc2
+                "
+                :style="{ display: rabbitCompl[1] ? 'block' : 'none' }"
+              />
             </button>
-            <h2 class="mb40 mt10">이 단원을 끝낸 친구들</h2>
-
-            <article class="flex-column">
-                <div class="flex-row">
-                    <div class="flex" style="gap: 5px; flex-wrap: wrap">
-                        <div v-for="(image, index) in images" :key="image.fileId" @click="buttonSearch(image)" class="photo" style="margin-bottom: 5px">
-                            <img :src="image.url" :alt="image.fileNm" reloadable="true" style="height: 100%" />
-                        </div>
-                    </div>
-                </div>
-            </article>
-            <article class="popup-wrap" v-show="searchOpen">
-                <div class="popup-box" style="top: 50%">
-                    <div class="flex mb10 justify-between">
-                        <button type="button" class="popup-close-btn" @click="closeModal">
-                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-                        </button>
-                    </div>
-                    <div class="box">
-                        <div style="width: 910px; height: 680px">
-                            <img :src="selectedImage.image" alt="Image" @error="onImageError" reloadable="true" />
-                        </div>
-                    </div>
-                    <div class="flex justify-between mt20">
-                        <div class="text flex">
-                            <p class="title2 date ml30">{{ selectedImage.date }}</p>
-                            <span class="title1 ml30"
-                                >{{ selectedImage.unit }}을 마친 <em class="yellow">{{ selectedImage.name }}</em
-                                >친구</span
-                            >
-                        </div>
-                        <div class="title2 flex align-center" style="gap: 10px">
-                            <svg-icon
-                                v-if="!isHeartFilled"
-                                type="mdi"
-                                :path="mdiHeartOutline"
-                                @click="toggleHeart(selectedImage.heart, selectedImage.fileMngId)"
-                                style="color: #ffba08; cursor: pointer"
-                            ></svg-icon>
-                            <svg-icon
-                                v-if="isHeartFilled"
-                                type="mdi"
-                                :path="mdiHeart"
-                                @click="toggleHeart(selectedImage.heart, selectedImage.fileMngId)"
-                                style="color: #ffba08; cursor: pointer"
-                            ></svg-icon>
-                            <p>
-                                <em class="yellow">{{ selectedImage.heart }}</em>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </article>
+            <p>{{ labeledItems[0].label }}</p>
+          </div>
+          <div class="race-btn" @click="[storeLearningId(labeledItems[1])]">
+            <div class="rabbit-running">
+              <img
+                src="../../../resources/img/img09_s.png"
+                alt=""
+                :style="{ display: rabbitPos[2] ? 'block' : 'none' }"
+              />
+            </div>
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="2"
+            >
+              <img
+                :src="
+                  labeledItems[1].label.length >= 4
+                    ? item.imgSrc3
+                    : item.imgSrc1
+                "
+                :style="{ display: !rabbitCompl[2] ? 'block' : 'none' }"
+              />
+              <img
+                :src="
+                  labeledItems[1].label.length >= 4
+                    ? item.imgSrc4
+                    : item.imgSrc2
+                "
+                :style="{ display: rabbitCompl[2] ? 'block' : 'none' }"
+              />
+            </button>
+            <p>{{ labeledItems[1].label }}</p>
+          </div>
         </div>
+        <div class="lcon flex justify-between mb5">
+          <div class="race-btn" @click="[storeLearningId(labeledItems[6])]">
+            <div class="rabbit-running">
+              <img
+                src="../../../resources/img/img09_s.png"
+                alt=""
+                :style="{ display: rabbitPos[7] ? 'block' : 'none' }"
+              />
+            </div>
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="7"
+            >
+              <img
+                :src="
+                  labeledItems[6].label.length >= 4
+                    ? item.imgSrc3
+                    : item.imgSrc1
+                "
+                :style="{ display: !rabbitCompl[7] ? 'block' : 'none' }"
+              />
+              <img
+                :src="
+                  labeledItems[6].label.length >= 4
+                    ? item.imgSrc4
+                    : item.imgSrc2
+                "
+                :style="{ display: rabbitCompl[7] ? 'block' : 'none' }"
+              />
+            </button>
+            <p>{{ labeledItems[6].label }}</p>
+          </div>
+          <div
+            class="race-btn"
+            @click="
+              [
+                goToPage('Chapter2_8'),
+                storeLearningId(labeledItems[5].learning_id),
+              ]
+            "
+          >
+            <div class="rabbit-running">
+              <img
+                src="../../../resources/img/img09_s.png"
+                alt=""
+                :style="{ display: rabbitPos[6] ? 'block' : 'none' }"
+              />
+            </div>
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="6"
+            >
+              <img
+                :src="
+                  labeledItems[5].label.length >= 4
+                    ? item.imgSrc3
+                    : item.imgSrc1
+                "
+                :style="{ display: !rabbitCompl[6] ? 'block' : 'none' }"
+              />
+              <img
+                :src="
+                  labeledItems[5].label.length >= 4
+                    ? item.imgSrc4
+                    : item.imgSrc2
+                "
+                :style="{ display: rabbitCompl[6] ? 'block' : 'none' }"
+              />
+            </button>
+            <p>{{ labeledItems[5].label }}</p>
+          </div>
+          <div class="race-btn" @click="[storeLearningId(labeledItems[4])]">
+            <div class="rabbit-running">
+              <img
+                src="../../../resources/img/img09_s.png"
+                alt=""
+                :style="{ display: rabbitPos[5] ? 'block' : 'none' }"
+              />
+            </div>
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="5"
+            >
+              <img
+                :src="
+                  labeledItems[4].label.length >= 4
+                    ? item.imgSrc3
+                    : item.imgSrc1
+                "
+                :style="{ display: !rabbitCompl[5] ? 'block' : 'none' }"
+              />
+              <img
+                :src="
+                  labeledItems[4].label.length >= 4
+                    ? item.imgSrc4
+                    : item.imgSrc2
+                "
+                :style="{ display: rabbitCompl[5] ? 'block' : 'none' }"
+              />
+            </button>
+            <p>{{ labeledItems[4].label }}</p>
+          </div>
+          <div class="race-btn" @click="[storeLearningId(labeledItems[3])]">
+            <div class="rabbit-running">
+              <img
+                src="../../../resources/img/img09_s.png"
+                alt=""
+                :style="{ display: rabbitPos[4] ? 'block' : 'none' }"
+              />
+            </div>
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="4"
+            >
+              <img
+                :src="
+                  labeledItems[3].label.length >= 4
+                    ? item.imgSrc3
+                    : item.imgSrc1
+                "
+                :style="{ display: !rabbitCompl[4] ? 'block' : 'none' }"
+              />
+              <img
+                :src="
+                  labeledItems[3].label.length >= 4
+                    ? item.imgSrc4
+                    : item.imgSrc2
+                "
+                :style="{ display: rabbitCompl[4] ? 'block' : 'none' }"
+              />
+            </button>
+            <p>{{ labeledItems[3].label }}</p>
+          </div>
+          <div class="race-btn" @click="[storeLearningId(labeledItems[2])]">
+            <div class="rabbit-running">
+              <img
+                src="../../../resources/img/img09_s.png"
+                alt=""
+                :style="{ display: rabbitPos[3] ? 'block' : 'none' }"
+              />
+            </div>
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="3"
+            >
+              <img
+                :src="
+                  labeledItems[2].label.length >= 4
+                    ? item.imgSrc3
+                    : item.imgSrc1
+                "
+                :style="{ display: !rabbitCompl[3] ? 'block' : 'none' }"
+              />
+              <img
+                :src="
+                  labeledItems[2].label.length >= 4
+                    ? item.imgSrc4
+                    : item.imgSrc2
+                "
+                :style="{ display: rabbitCompl[3] ? 'block' : 'none' }"
+              />
+            </button>
+            <p>{{ labeledItems[2].label }}</p>
+          </div>
+        </div>
+        <div class="rcon flex">
+          <div
+            class="race-btn"
+            @click="
+              [
+                goToPage('Chapter8'),
+                storeLearningId(labeledItems[7].learning_id),
+              ]
+            "
+          >
+            <div class="rabbit-running">
+              <img
+                src="../../../resources/img/img09_s.png"
+                alt=""
+                :style="{ display: rabbitPos[8] ? 'block' : 'none' }"
+              />
+            </div>
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="8"
+            >
+              <img
+                :src="
+                  labeledItems[7].label.length >= 4
+                    ? item.imgSrc3
+                    : item.imgSrc1
+                "
+                :style="{ display: !rabbitCompl[8] ? 'block' : 'none' }"
+              />
+              <img
+                :src="
+                  labeledItems[7].label.length >= 4
+                    ? item.imgSrc4
+                    : item.imgSrc2
+                "
+                :style="{ display: rabbitCompl[8] ? 'block' : 'none' }"
+              />
+            </button>
+            <p class="long">{{ labeledItems[7].label }}</p>
+          </div>
+          <div class="race-btn" @click="[storeLearningId(labeledItems[8])]">
+            <div class="rabbit-running">
+              <img
+                src="../../../resources/img/img09_s.png"
+                alt=""
+                :style="{ display: rabbitPos[9] ? 'block' : 'none' }"
+              />
+            </div>
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="9"
+            >
+              <img
+                :src="
+                  labeledItems[8].label.length >= 4
+                    ? item.imgSrc3
+                    : item.imgSrc1
+                "
+                :style="{ display: !rabbitCompl[9] ? 'block' : 'none' }"
+              />
+              <img
+                :src="
+                  labeledItems[8].label.length >= 4
+                    ? item.imgSrc4
+                    : item.imgSrc2
+                "
+                :style="{ display: rabbitCompl[9] ? 'block' : 'none' }"
+              />
+            </button>
+            <p>{{ labeledItems[8].label }}</p>
+          </div>
+          <div
+            class="race-btn"
+            @click="
+              [
+                goToPage('Chapter10'),
+                storeLearningId(labeledItems[9].learning_id),
+              ]
+            "
+          >
+            <div class="rabbit-running">
+              <img
+                src="../../../resources/img/img09_s.png"
+                alt=""
+                :style="{ display: rabbitPos[10] ? 'block' : 'none' }"
+              />
+            </div>
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="10"
+            >
+              <img
+                :src="
+                  labeledItems[9].label.length >= 4
+                    ? item.imgSrc3
+                    : item.imgSrc1
+                "
+                :style="{ display: !rabbitCompl[10] ? 'block' : 'none' }"
+              />
+              <img
+                :src="
+                  labeledItems[9].label.length >= 4
+                    ? item.imgSrc4
+                    : item.imgSrc2
+                "
+                :style="{ display: rabbitCompl[10] ? 'block' : 'none' }"
+              />
+            </button>
+            <p>{{ labeledItems[9].label }}</p>
+          </div>
+
+          <div
+            class="race-btn"
+            @click="
+              [
+                goToPage('Chapter2_8'),
+                storeLearningId(labeledItems[10].learning_id),
+              ]
+            "
+          >
+            <div class="rabbit-running">
+              <img
+                src="../../../resources/img/img09_s.png"
+                alt=""
+                :style="{ display: rabbitPos[11] ? 'block' : 'none' }"
+              />
+            </div>
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImageAndShowPopup(index, '11')"
+              data-num="11"
+            >
+              <img
+                :src="
+                  labeledItems[10].label.length >= 4
+                    ? item.imgSrc3
+                    : item.imgSrc1
+                "
+                :style="{ display: !rabbitCompl[11] ? 'block' : 'none' }"
+              />
+              <img
+                :src="
+                  labeledItems[10].label.length >= 4
+                    ? item.imgSrc4
+                    : item.imgSrc2
+                "
+                :style="{ display: rabbitCompl[11] ? 'block' : 'none' }"
+              />
+            </button>
+            <p class="long">{{ labeledItems[10].label }}</p>
+          </div>
+        </div>
+        <div class="race-btn">
+          <div class="rabbit-running" style="display: flex">
+            <img
+              class="rabbit-end"
+              src="../../../resources/img/img138_72s.png"
+              alt=""
+              :style="{ display: rabbitEnd ? 'block' : 'none' }"
+            />
+            <img
+              class="fireworks-end"
+              src="../../../resources/img/fireworks.gif"
+              alt=""
+              :style="{ display: rabbitEnd ? 'block' : 'none' }"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 팝업 -->
+      <div v-show="searchOpen2" class="popup-wrap">
+        <div class="popup-box">
+          <button
+            type="button"
+            class="popup-close-btn"
+            style="position: absolute; top: 10px; right: 10px"
+            @click="closeModal"
+          >
+            <svg-icon
+              type="mdi"
+              :path="mdiWindowClose"
+              class="close-btn"
+            ></svg-icon>
+          </button>
+
+          <div class="mb30 text-ct">
+            <p class="title1 mb20">1단원이 끝났습니다!</p>
+            <p class="title1">
+              <em class="yellow">기념사진</em>을 촬영하러 가요
+            </p>
+          </div>
+          <div class="flex justify-center">
+            <button
+              type="button"
+              title="사진촬영"
+              class="new-btn"
+              @click="openCameraModal"
+            >
+              사진 촬영
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- 카메라 모달 -->
+      <article v-show="showCameraModal" class="popup-wrap">
+        <div class="popup-box" style="top: 500px; left: 500px">
+          <div class="flex mb10 justify-between">
+            <p class="popup-title">사진 촬영</p>
+            <button type="button" class="popup-close-btn" @click="closeModal">
+              <svg-icon
+                type="mdi"
+                :path="mdiWindowClose"
+                class="close-btn"
+              ></svg-icon>
+            </button>
+          </div>
+          <div class="box">
+            <div style="width: 100%">
+              <div id="container" ref="container">
+                <video
+                  v-if="!photoTaken"
+                  autoplay="true"
+                  ref="modalVideoElement"
+                  class="mirrored"
+                  @canplay="onVideoLoaded"
+                  style="position: absolute; height: 100%"
+                ></video>
+                <img
+                  src="../../../resources/img/camera-rabbit.png"
+                  class="camera-rabbit"
+                  style="position: absolute"
+                />
+                <canvas ref="canvas" style="pointer-events: none"></canvas>
+              </div>
+            </div>
+          </div>
+          <div class="flex justify-center mt20">
+            <button class="new-btn" @click="takePhoto">사진 찍기</button>
+          </div>
+        </div>
+      </article>
     </div>
+
+    <div class="complete-wrap myphoto">
+      <button
+        class="login-btn mt10"
+        type="submit"
+        style="width: 100%"
+        @click="finishSchedule"
+      >
+        <img
+          src="../../../resources/img/btn07_s.png"
+          alt=""
+          style="width: 100%; height: 100px"
+        />
+        <p>학습 종료하기</p>
+      </button>
+      <h2 class="mb40 mt10">이 단원을 끝낸 친구들</h2>
+
+      <article class="flex-column">
+        <div class="flex-row">
+          <div class="flex" style="gap: 5px; flex-wrap: wrap">
+            <div
+              v-for="(image, index) in images"
+              :key="image.fileId"
+              @click="buttonSearch(image)"
+              class="photo"
+              style="margin-bottom: 5px"
+            >
+              <img
+                :src="image.url"
+                :alt="image.fileNm"
+                reloadable="true"
+                style="height: 100%"
+              />
+            </div>
+          </div>
+        </div>
+      </article>
+      <article class="popup-wrap" v-show="searchOpen">
+        <div class="popup-box" style="top: 50%">
+          <div class="flex mb10 justify-between">
+            <button type="button" class="popup-close-btn" @click="closeModal">
+              <svg-icon
+                type="mdi"
+                :path="mdiWindowClose"
+                class="close-btn"
+              ></svg-icon>
+            </button>
+          </div>
+          <div class="box">
+            <div style="width: 910px; height: 680px">
+              <img
+                :src="selectedImage.image"
+                alt="Image"
+                @error="onImageError"
+                reloadable="true"
+              />
+            </div>
+          </div>
+          <div class="flex justify-between mt20">
+            <div class="text flex">
+              <p class="title2 date ml30">{{ selectedImage.date }}</p>
+              <span class="title1 ml30"
+                >{{ selectedImage.unit }}을 마친
+                <em class="yellow">{{ selectedImage.name }}</em
+                >친구</span
+              >
+            </div>
+            <div class="title2 flex align-center" style="gap: 10px">
+              <svg-icon
+                v-if="!isHeartFilled"
+                type="mdi"
+                :path="mdiHeartOutline"
+                @click="
+                  toggleHeart(selectedImage.heart, selectedImage.fileMngId)
+                "
+                style="color: #ffba08; cursor: pointer"
+              ></svg-icon>
+              <svg-icon
+                v-if="isHeartFilled"
+                type="mdi"
+                :path="mdiHeart"
+                @click="
+                  toggleHeart(selectedImage.heart, selectedImage.fileMngId)
+                "
+                style="color: #ffba08; cursor: pointer"
+              ></svg-icon>
+              <p>
+                <em class="yellow">{{ selectedImage.heart }}</em>
+              </p>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
 </template>
 
 <script>

 import { mapActions } from "vuex";
 
 export default {
-    data() {
-        return {
-            items: [
-                {
-                    imgSrc1: "client/resources/img/img11_1_s.png",
-                    imgSrc2: "client/resources/img/img12_1_s.png",
-                    imgSrc3: "client/resources/img/img11_2_s.png",
-                    imgSrc4: "client/resources/img/img12_2_s.png",
-                    isSecondImageVisible: false,
-                },
-            ],
-            mdiMagnify: mdiMagnify,
-            mdiWindowClose: mdiWindowClose,
-            mdiHeart: mdiHeart,
-            mdiHeartOutline: mdiHeartOutline,
-            showModal: false,
-            searchOpen: false, // 사진 상세보기 모달창
-            searchOpen2: false, // 단원 마친 후, 사진 촬영 여부 선택 모달창
-            showCameraModal: false, // 카메라 모달창
-            photoTaken: false,
-            photo: null, //캡쳐 사진
-            stream: null,
+  data() {
+    return {
+      items: [
+        {
+          imgSrc1: "client/resources/img/img11_1_s.png",
+          imgSrc2: "client/resources/img/img12_1_s.png",
+          imgSrc3: "client/resources/img/img11_2_s.png",
+          imgSrc4: "client/resources/img/img12_2_s.png",
+          isSecondImageVisible: false,
+        },
+      ],
+      mdiMagnify: mdiMagnify,
+      mdiWindowClose: mdiWindowClose,
+      mdiHeart: mdiHeart,
+      mdiHeartOutline: mdiHeartOutline,
+      showModal: false,
+      searchOpen: false, // 사진 상세보기 모달창
+      searchOpen2: false, // 단원 마친 후, 사진 촬영 여부 선택 모달창
+      showCameraModal: false, // 카메라 모달창
+      photoTaken: false,
+      photo: null, //캡쳐 사진
+      stream: null,
 
-            roadmapData: [],
-            labeledItems: [],
+      roadmapData: [],
+      labeledItems: [],
 
-            problemCounter: 0,
-            wordCounter: 0,
-            textCounter: 0,
-            evalCounter: 0,
-            book_id: null,
-            unit_id: null,
+      problemCounter: 0,
+      wordCounter: 0,
+      textCounter: 0,
+      evalCounter: 0,
+      book_id: null,
+      unit_id: null,
 
-            schedules: [],
-            nowSchedule: "",
-            state: "",
-            rabbitPos: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-            rabbitCompl: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-            rabbitEnd: false,
+      schedules: [],
+      nowSchedule: "",
+      state: "",
+      rabbitPos: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      rabbitCompl: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      rabbitEnd: false,
 
-            titleUnitName: "",
-            titleBookName: "",
+      titleUnitName: "",
+      titleBookName: "",
 
-            images: [],
+      images: [],
 
-            selectedImage: [
-                {
-                    image: "",
-                    unit: "",
-                    date: "",
-                    name: "",
-                    heart: "",
-                    fileMngId: "",
-                },
-            ],
+      selectedImage: [
+        {
+          image: "",
+          unit: "",
+          date: "",
+          name: "",
+          heart: "",
+          fileMngId: "",
+        },
+      ],
 
-            isHeartFilled: false, // 하트가 채워졌는지 여부
+      isHeartFilled: false, // 하트가 채워졌는지 여부
 
-            problemType: null,
-            wordBookType: null,
-            wordContentList: [],
-        };
+      problemType: null,
+      wordBookType: null,
+      wordContentList: [],
+    };
+  },
+  methods: {
+    toggleHeart(heart, fileMngId) {
+      this.isHeartFilled = !this.isHeartFilled; // 하트 상태 토글
+
+      if (this.isHeartFilled) var calHeart = heart + 1;
+      else var calHeart = heart - 1;
+
+      // 하트 수를 증가시키기 위한 API 요청
+      axios
+        .post("/photo/likeUpdate.json", {
+          likeData: calHeart,
+          fileMngId: fileMngId,
+        })
+        .then((response) => {
+          this.selectedImage.heart = calHeart;
+        })
+        .catch((error) => {
+          console.error("Error updating heart:", error);
+        });
     },
-    methods: {
-        toggleHeart(heart, fileMngId) {
-            this.isHeartFilled = !this.isHeartFilled; // 하트 상태 토글
+    checkAndFetchData() {
+      console.log("받은 Book ID:", this.getBookId);
+      console.log("받은 Unit ID:", this.getUnitId);
+      const book_id = this.getBookId;
+      const unit_id = this.getUnitId;
 
-            if (this.isHeartFilled) var calHeart = heart + 1;
-            else var calHeart = heart - 1;
+      if (!book_id || !unit_id) {
+        console.error("book_id 또는 unit_id가 설정되지 않았습니다.");
+        return;
+      }
+      this.fetchImage(unit_id);
+      this.fetchSchedule(unit_id, book_id);
+      this.fetchRoadmapData(unit_id, book_id);
+      this.fetchRabbit();
 
-            // 하트 수를 증가시키기 위한 API 요청
-            axios
-                .post("/photo/likeUpdate.json", {
-                    likeData: calHeart,
-                    fileMngId: fileMngId,
-                })
-                .then((response) => {
-                    this.selectedImage.heart = calHeart;
-                })
-                .catch((error) => {
-                    console.error("Error updating heart:", error);
-                });
+      this.unit_id = unit_id;
+      this.book_id = book_id;
+
+      if (this.$route.query.reCapture == "true") {
+        this.openCameraModal();
+      }
+
+      this.searchStdId();
+    },
+
+    //은진
+    buttonSearch(image) {
+      this.isHeartFilled = false;
+      this.selectedImage.name = image.stdId;
+      this.selectedImage.image = image.url;
+      this.selectedImage.unit = this.titleUnitName;
+      this.selectedImage.date = image.fileRegDate.split(" ")[0];
+      this.selectedImage.heart = image.likeData;
+      this.selectedImage.fileMngId = image.fileMngId;
+      this.searchOpen = true;
+    },
+    fetchImage(unit_id) {
+      axios({
+        url: "/photo/photoUnitList.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        checkAndFetchData() {
-            console.log("받은 Book ID:", this.getBookId);
-            console.log("받은 Unit ID:", this.getUnitId);
-            const book_id = this.getBookId;
-            const unit_id = this.getUnitId;
-
-            if (!book_id || !unit_id) {
-                console.error("book_id 또는 unit_id가 설정되지 않았습니다.");
-                return;
-            }
-            this.fetchImage(unit_id);
-            this.fetchSchedule(unit_id, book_id);
-            this.fetchRoadmapData(unit_id, book_id);
-            this.fetchRabbit();
-
-            this.unit_id = unit_id;
-            this.book_id = book_id;
-
-            if (this.$route.query.reCapture == "true") {
-                this.openCameraModal();
-            }
-
-            this.searchStdId();
+        data: {
+          unitId: unit_id,
+          sclsId: "1",
         },
+      })
+        .then((response) => {
+          this.file = response.data;
 
-        //은진
-        buttonSearch(image) {
-            this.isHeartFilled = false;
-            this.selectedImage.name = image.stdId;
-            this.selectedImage.image = image.url;
-            this.selectedImage.unit = this.titleUnitName;
-            this.selectedImage.date = image.fileRegDate.split(" ")[0];
-            this.selectedImage.heart = image.likeData;
-            this.selectedImage.fileMngId = image.fileMngId;
-            this.searchOpen = true;
-        },
-        fetchImage(unit_id) {
-            axios({
-                url: "/photo/photoUnitList.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    unitId: unit_id,
-                    sclsId: "1",
-                },
+          const findFilePromises = this.file.map((f) =>
+            this.findFile(f.file_mng_id)
+          );
+
+          return Promise.all(findFilePromises);
+        })
+        .then((fileResults) => {
+          this.images = this.file
+            .map((file, index) => {
+              const result = fileResults[index];
+              if (result) {
+                return {
+                  url: "http://165.229.169.113:9080/" + `${result.fileRpath}`,
+                  fileId: result.fileId,
+                  fileNm: result.fileNm,
+                  fileRegDate: result.regDt,
+                  likeData: file.like_data,
+                  stdId: file.user_nm,
+                  fileMngId: result.fileMngId,
+                };
+              }
+              return null;
             })
-                .then((response) => {
-                    this.file = response.data;
+            .filter((image) => image !== null);
+        })
+        .catch((error) => {
+          console.error("Error fetching images:", error);
+        });
+    },
+    async findFile(file_mng_id) {
+      try {
+        const res = await axios({
+          url: "/file/find.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: {
+            file_mng_id: file_mng_id,
+          },
+        });
+        return res.data.list[0];
+      } catch (error) {
+        console.log("result - error : ", error);
+        return null;
+      }
+    },
+    goToPageImg(page) {
+      const canvas = document.querySelector("canvas");
+      const dataURL = canvas.toDataURL("image/png");
 
-                    const findFilePromises = this.file.map((f) => this.findFile(f.file_mng_id));
+      this.$router.push({
+        name: page,
+        query: { image: encodeURIComponent(dataURL) },
+      });
+    },
 
-                    return Promise.all(findFilePromises);
-                })
-                .then((fileResults) => {
-                    this.images = this.file
-                        .map((file, index) => {
-                            const result = fileResults[index];
-                            if (result) {
-                                return {
-                                    url: "http://165.229.169.113:9080/" + `${result.fileRpath}`,
-                                    fileId: result.fileId,
-                                    fileNm: result.fileNm,
-                                    fileRegDate: result.regDt,
-                                    likeData: file.like_data,
-                                    stdId: file.user_nm,
-                                    fileMngId: result.fileMngId,
-                                };
-                            }
-                            return null;
-                        })
-                        .filter((image) => image !== null);
-                })
-                .catch((error) => {
-                    console.error("Error fetching images:", error);
-                });
-        },
-        async findFile(file_mng_id) {
-            try {
-                const res = await axios({
-                    url: "/file/find.json",
-                    method: "post",
-                    headers: {
-                        "Content-Type": "application/json; charset=UTF-8",
-                    },
-                    data: {
-                        file_mng_id: file_mng_id,
-                    },
-                });
-                return res.data.list[0];
-            } catch (error) {
-                console.log("result - error : ", error);
-                return null;
-            }
-        },
-        goToPageImg(page) {
-            const canvas = document.querySelector("canvas");
-            const dataURL = canvas.toDataURL("image/png");
+    fetchRabbit() {
+      for (var i = 0; i < 12; i++) {
+        this.rabbitPos[i] = false;
+      }
 
-            this.$router.push({ name: page, query: { image: encodeURIComponent(dataURL) } });
-        },
+      if (this.$route.query.value) {
+        this.rabbitPos[parseInt(this.$route.query.value, 10) + 1] = true;
+        for (var i = 0; i < this.$route.query.value; i++) {
+          this.rabbitCompl[i + 1] = true;
+        }
 
-        fetchRabbit() {
-            for (var i = 0; i < 12; i++) {
-                this.rabbitPos[i] = false;
-            }
-
-            if (this.$route.query.value) {
-                this.rabbitPos[parseInt(this.$route.query.value, 10) + 1] = true;
-                for (var i = 0; i < this.$route.query.value; i++) {
-                    this.rabbitCompl[i + 1] = true;
-                }
-
-                if (this.$route.query.value === "11") {
-                    this.rabbitEnd = true;
-                    setTimeout(() => {
-                        this.searchOpen2 = true;
-                    }, 1000);
-                }
-            } else this.rabbitPos[0] = true;
-        },
-        fetchSchedule(unit_id, book_id) {
-            axios({
-                url: "/schedule/selectSchedule.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    stdId: "2",
-                },
-            })
-                .then((response) => {
-                    this.schedules = response.data;
-
-                    if (this.schedules.length == 0) {
-                        this.state = "notRegistered";
-                    } else {
-                        const allFinished = this.schedules.every((schedule) => schedule.finish === "T");
-                        if (allFinished) {
-                            this.state = "finish";
-                        } else {
-                            this.nowSchedule = this.schedules.find((schedule) => schedule.finish === null || schedule.finish === "F");
-                            if (this.nowSchedule) {
-                                this.fetchRoadmapData(unit_id, book_id);
-                                this.state = "studying";
-                            } else {
-                                this.state = "notRegistered";
-                            }
-                        }
-                    }
-                })
-                .catch((error) => {
-                    console.error("Error fetching roadmap data:", error);
-                });
-        },
-        finishSchedule() {
-            axios({
-                url: "/schedule/scheduleUpdate.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    scheduleId: this.nowSchedule.schdl_id,
-                    finish: "T",
-                },
-            })
-                .then((response) => {
-                    const nextSchedule = this.schedules.find((schedule) => schedule.schdl_id > this.nowSchedule.schdl_id);
-                    alert("학습을 완료했습니다!");
-
-                    if (nextSchedule) {
-                        this.nowSchedule = nextSchedule;
-                        this.fetchSchedule(nextSchedule.unit_id, nextSchedule.book_id);
-                        this.fetchRoadmapData(nextSchedule.unit_id, nextSchedule.book_id);
-                        this.$router.push({ name: "Dashboard", query: { unit_id: nextSchedule.unit_id, book_id: nextSchedule.book_id } });
-                    } else {
-                        alert("모든 학습을 완료했습니다!");
-                        this.state = "finish";
-                    }
-                })
-                .catch((error) => {
-                    console.error("Error updating schedule:", error);
-                });
-        },
-        fetchRoadmapData(unit_id, book_id) {
-            axios({
-                url: "/unitLearning/find.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    unit_id: unit_id,
-                    book_id: book_id,
-                },
-            })
-                .then((response) => {
-                    if (response.data.length != 0) {
-                        this.roadmapData = response.data;
-                        this.titleUnitName = this.roadmapData[0].unit_nm;
-                        this.titleBookName = this.roadmapData[0].book_nm;
-                        this.labeledItems = this.processedRoadmap;
-                    } else {
-                        this.state = "noProblem";
-                    }
-                })
-                .catch((error) => {
-                    this.state = "noProblem";
-                    console.error("Error fetching roadmap data:", error);
-                });
-        },
-        toggleImage(index) {
-            this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
-        },
-        ShowPopup() {
-            this.searchOpen2 = true; // 촬영 여부 묻는 모달창 열기
-        },
-        goToPage(page) {
-            // const { unit_id, book_id } = this.$route.query;
-            // this.$router.push({ name: page, query: { unit_id, book_id } });
-            this.$router.push({ name: page });
-        },
-        storeLearningId(labeledItems) {
-            this.$store.dispatch("updateLearningData", labeledItems);
-            this.$store.dispatch("updateLearningId", labeledItems.learning_id); // 단어장에 사용중..
-            console.log("레이블된 아이템: ", labeledItems);
-            if (labeledItems.label.startsWith("문제")) {
-                this.handleProblemDetail(this.$store.getters.currentLearningId);
-                this.goToPage(this.problemType);
-            } else if (labeledItems.label.startsWith("단어장")) {
-                this.handleWordBookContent(this.$store.getters.getLearningId);
-            }
-
-            if (labeledItems.label.startsWith("지문")) {
-                //console.log("지문 아이디 : ", labeledItems.learning_id);
-                this.$store.dispatch("updateTextId", labeledItems.learning_id);
-                this.fetchTextType(labeledItems.learning_id);
-            }
-        },
-        handleWordBookContent(item) {
-            console.log("처리할 단어장 콘텐츠 id: ", item);
-
-            // 단어장 ID 가져오기
-            axios
-                .post("/wordContent/selectWordContent.json", {
-                    wordContentId: item,
-                })
-                .then((response) => {
-                    this.wordContentList = response.data;
-
-                this.$store.dispatch('updateWdBookIdList', this.wordContentList.map(content => content.wd_book_id));
-                this.$store.dispatch('updateCurrentWdBkIndex', 0);
-                console.log("저장한 단어장 id 리스트: ", this.$store.getters.getWdBookIdList);
-
-                // 단어장 ID 리스트에서 첫 번째 단어장 ID를 사용
-                const wdBookId = this.wordContentList[0].wd_book_id;
-
-                    // 단어장 정보 가져오기
-                    return axios.post("/wordbook/find.json", {
-                        wdBookId: wdBookId,
-                    });
-                })
-                .then((response) => {
-                    const wordbookData = response.data;
-
-                    // 단어장 타입에 따라 페이지 설정
-                    if (wordbookData && wordbookData.wdBookTypeId) {
-                        switch (wordbookData.wdBookTypeId) {
-                            case "1":
-                                this.wordBookType = "Chapter2";
-                                break;
-                            case "2":
-                                this.wordBookType = "Chapter2_3";
-                                break;
-                            case "3":
-                                this.wordBookType = "Chapter2_2";
-                                break;
-                            case "4":
-                                this.wordBookType = "Chapter2_9";
-                                break;
-                            case "5":
-                                this.wordBookType = "Chapter2_4";
-                                break;
-                            default:
-                                this.wordBookType = null;
-                        }
-                    } else {
-                        console.error("wdBookTypeId가 없습니다.");
-                        this.wordBookType = null;
-                    }
-
-                    console.log("현재 단어장 타입: ", this.wordBookType);
-                    this.goToPage(this.wordBookType);
-                })
-                .catch((error) => {
-                    console.error("단어장 정보를 불러오는 중 오류 발생:", error);
-                    this.wordBookType = null;
-                });
-        },
-        // 지문 type 불러오기
-        fetchTextType(text_id) {
-            axios({
-                url: "/text/selectOneText.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    textId: text_id,
-                },
-            })
-                .then((response) => {
-                    const text_type_id = response.data[0].text_type_id;
-                    // console.log("지문 유형 아이디 : ", text_type_id);
-                    if (text_type_id === "2") {
-                        this.goToPage("Chapter1_2");
-                    } else if (text_type_id === "3") {
-                        this.goToPage("Chapter1_3");
-                    }
-                })
-                .catch((err) => {
-                    console.log("지문 에러 : ", err);
-                });
-        },
-        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";
-            }
-        },
-        openCameraModal() {
-            this.closeModal();
-
-            this.showCameraModal = true;
-            navigator.mediaDevices
-                .getUserMedia({ video: true })
-                .then((stream) => {
-                    const modalVideo = this.$refs.modalVideoElement;
-                    modalVideo.srcObject = stream;
-                    this.stream = stream;
-                })
-                .catch((error) => {
-                    console.log("error>>>>>>>>", error);
-                    alert("웹캠이 필요한 기능입니다!");
-                    this.closeModal(); // 모달창을 닫음
-                });
-        },
-        closeModal() {
-            this.searchOpen = false;
-            this.searchOpen2 = false;
-            this.showCameraModal = false;
-            this.photoTaken = false;
-            this.photo = null;
-
-            //스트림 종료
-            if (this.stream) {
-                let tracks = this.stream.getTracks();
-                tracks.forEach((track) => track.stop());
-                this.stream = null;
-            }
-        },
-
-        onVideoLoaded() {
-            const video = this.$refs.modalVideoElement;
-            const canvas = this.$refs.canvas;
-            const ctx = canvas.getContext("2d");
-
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
-        },
-        takePhoto() {
-            const video = this.$refs.modalVideoElement;
-            const canvas = this.$refs.canvas;
-            const ctx = canvas.getContext("2d");
-
-            ctx.save(); // 현재 상태 저장
-
-            // 캔버스 좌우 반전
-            ctx.scale(-1, 1);
-            ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);
-
-            ctx.restore();
-
-            const overlayImg = new Image();
-            overlayImg.src = "client/resources/img/camera-rabbit.png";
-            overlayImg.onload = () => {
-                const overlayWidth = canvas.width * 0.4;
-                const overlayHeight = (overlayImg.height / overlayImg.width) * overlayWidth;
-                const overlayX = canvas.width - overlayWidth;
-                const overlayY = canvas.height - overlayHeight;
-
-                // 오버레이 이미지 그리기
-                ctx.drawImage(overlayImg, overlayX, overlayY, overlayWidth, overlayHeight);
-
-                // 사진 저장 함수 호출
-                const dataURL = canvas.toDataURL("image/png");
-                this.$router.push({ name: "PhotoEdit", query: { image: encodeURIComponent(dataURL), unit_id: this.unit_id, book_id: this.book_id } });
-            };
-        },
-
-        buttonSearch2() {
+        if (this.$route.query.value === "11") {
+          this.rabbitEnd = true;
+          setTimeout(() => {
             this.searchOpen2 = true;
-        },
-        closeBtn() {
-            this.searchOpen = false;
-        },
-
-        // 유저 아이디를 unit 아이디를 통해 가져오기
-        searchStdId() {
-            const userInfo = this.$store.getters.getUserInfo;
-            axios({
-                url: "/userclass/searchStdId.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    userId: userInfo.userId,
-                    unitId: this.unit_id,
-                },
-            })
-                .then((response) => {
-                    this.$store.commit('setStdId', response.data);
-                })
-                .catch((err) => {
-                    console.log("지문 에러 : ", err);
-                });
-        },
-
+          }, 1000);
+        }
+      } else this.rabbitPos[0] = true;
     },
-    components: {
-        SvgIcon,
-    },
-    mounted() {
-        console.log("main mounted");
-        this.checkAndFetchData();
-        // const { book_id, unit_id } = this.$route.query;
-    },
-    watch: {
-        getBookId(newBookId) {
-            this.checkAndFetchData();
+    fetchSchedule(unit_id, book_id) {
+      axios({
+        url: "/schedule/selectSchedule.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        getUnitId(newUnitId) {
-            this.checkAndFetchData();
+        data: {
+          stdId: "2",
         },
+      })
+        .then((response) => {
+          this.schedules = response.data;
+
+          if (this.schedules.length == 0) {
+            this.state = "notRegistered";
+          } else {
+            const allFinished = this.schedules.every(
+              (schedule) => schedule.finish === "T"
+            );
+            if (allFinished) {
+              this.state = "finish";
+            } else {
+              this.nowSchedule = this.schedules.find(
+                (schedule) =>
+                  schedule.finish === null || schedule.finish === "F"
+              );
+              if (this.nowSchedule) {
+                this.fetchRoadmapData(unit_id, book_id);
+                this.state = "studying";
+              } else {
+                this.state = "notRegistered";
+              }
+            }
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching roadmap data:", error);
+        });
     },
-    computed: {
-        ...mapGetters(["getBookId", "getUnitId"]),
+    finishSchedule() {
+      axios({
+        url: "/schedule/scheduleUpdate.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          scheduleId: this.nowSchedule.schdl_id,
+          finish: "T",
+        },
+      })
+        .then((response) => {
+          const nextSchedule = this.schedules.find(
+            (schedule) => schedule.schdl_id > this.nowSchedule.schdl_id
+          );
+          alert("학습을 완료했습니다!");
 
-        processedRoadmap() {
-            let problemCounter = 0;
-            let wordCounter = 0;
-            let textCounter = 0;
-            let evalCounter = 0;
-
-            return this.roadmapData.map((item) => {
-                if (item.wd_cnt_id !== null) {
-                    wordCounter++;
-                    return { label: `단어장${wordCounter}`, learning_id: item.wd_cnt_id };
-                } else if (item.text_id !== null) {
-                    textCounter++;
-                    return { label: `지문${textCounter}`, learning_id: item.text_id };
-                } else if (item.eval_id !== null) {
-                    evalCounter++;
-                    return { label: evalCounter === 1 ? "중간평가" : "최종평가", learning_id: item.eval_id };
-                } else {
-                    problemCounter++;
-                    return { label: `문제${problemCounter}`, learning_id: item.prblm_id };
-                }
+          if (nextSchedule) {
+            this.nowSchedule = nextSchedule;
+            this.fetchSchedule(nextSchedule.unit_id, nextSchedule.book_id);
+            this.fetchRoadmapData(nextSchedule.unit_id, nextSchedule.book_id);
+            this.$router.push({
+              name: "Dashboard",
+              query: {
+                unit_id: nextSchedule.unit_id,
+                book_id: nextSchedule.book_id,
+              },
             });
+          } else {
+            alert("모든 학습을 완료했습니다!");
+            this.state = "finish";
+          }
+        })
+        .catch((error) => {
+          console.error("Error updating schedule:", error);
+        });
+    },
+    fetchRoadmapData(unit_id, book_id) {
+      axios({
+        url: "/unitLearning/find.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
+        data: {
+          unit_id: unit_id,
+          book_id: book_id,
+        },
+      })
+        .then((response) => {
+          if (response.data.length != 0) {
+            this.roadmapData = response.data;
+            this.titleUnitName = this.roadmapData[0].unit_nm;
+            this.titleBookName = this.roadmapData[0].book_nm;
+            this.labeledItems = this.processedRoadmap;
+          } else {
+            this.state = "noProblem";
+          }
+        })
+        .catch((error) => {
+          this.state = "noProblem";
+          console.error("Error fetching roadmap data:", error);
+        });
     },
-    beforeDestroy() {
-        // 컴포넌트가 파괴되기 전에 리스너 제거
-        window.removeEventListener("resize", this.updateCanvasRect);
-        this.$refs.canvas.removeEventListener("click", this.handleCanvasClick);
+    toggleImage(index) {
+      this.items[index].isSecondImageVisible =
+        !this.items[index].isSecondImageVisible;
     },
+    ShowPopup() {
+      this.searchOpen2 = true; // 촬영 여부 묻는 모달창 열기
+    },
+    goToPage(page) {
+      // const { unit_id, book_id } = this.$route.query;
+      // this.$router.push({ name: page, query: { unit_id, book_id } });
+      this.$router.push({ name: page });
+    },
+    storeLearningId(labeledItems) {
+      this.$store.dispatch("updateLearningData", labeledItems);
+      this.$store.dispatch("updateLearningId", labeledItems.learning_id); // 단어장에 사용중..
+
+      console.log("레이블된 아이템: ", labeledItems);
+      if (labeledItems.label.startsWith("문제")) {
+        this.handleProblemDetail(this.$store.getters.currentLearningId);
+        this.goToPage(this.problemType);
+      } else if (labeledItems.label.startsWith("단어장")) {
+        this.handleWordBookContent(this.$store.getters.getLearningId);
+      }
+
+      if (labeledItems.label.startsWith("지문")) {
+        //console.log("지문 아이디 : ", labeledItems.learning_id);
+        this.$store.dispatch("updateTextId", labeledItems.learning_id);
+        this.fetchTextType(labeledItems.learning_id);
+      }
+    },
+    handleWordBookContent(item) {
+      console.log("처리할 단어장 콘텐츠 id: ", item);
+
+      // 단어장 ID 가져오기
+      axios
+        .post("/wordContent/selectWordContent.json", {
+          wordContentId: item,
+        })
+        .then((response) => {
+          this.wordContentList = response.data;
+
+          this.$store.dispatch(
+            "updateWdBookIdList",
+            this.wordContentList.map((content) => content.wd_book_id)
+          );
+          this.$store.dispatch("updateCurrentWdBkIndex", 0);
+          console.log(
+            "저장한 단어장 id 리스트: ",
+            this.$store.getters.getWdBookIdList
+          );
+
+          // 단어장 ID 리스트에서 첫 번째 단어장 ID를 사용
+          const wdBookId = this.wordContentList[0].wd_book_id;
+
+          // 단어장 정보 가져오기
+          return axios.post("/wordbook/find.json", {
+            wdBookId: wdBookId,
+          });
+        })
+        .then((response) => {
+          const wordbookData = response.data;
+
+          // 단어장 타입에 따라 페이지 설정
+          if (wordbookData && wordbookData.wdBookTypeId) {
+            switch (wordbookData.wdBookTypeId) {
+              case "1":
+                this.wordBookType = "Chapter2";
+                break;
+              case "2":
+                this.wordBookType = "Chapter2_3";
+                break;
+              case "3":
+                this.wordBookType = "Chapter2_2";
+                break;
+              case "4":
+                this.wordBookType = "Chapter2_9";
+                break;
+              case "5":
+                this.wordBookType = "Chapter2_4";
+                break;
+              default:
+                this.wordBookType = null;
+            }
+          } else {
+            console.error("wdBookTypeId가 없습니다.");
+            this.wordBookType = null;
+          }
+
+          console.log("현재 단어장 타입: ", this.wordBookType);
+          this.goToPage(this.wordBookType);
+        })
+        .catch((error) => {
+          console.error("단어장 정보를 불러오는 중 오류 발생:", error);
+          this.wordBookType = null;
+        });
+    },
+    // 지문 type 불러오기
+    fetchTextType(text_id) {
+      axios({
+        url: "/text/selectOneText.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          textId: text_id,
+        },
+      })
+        .then((response) => {
+          const text_type_id = response.data[0].text_type_id;
+          // console.log("지문 유형 아이디 : ", text_type_id);
+          if (text_type_id === "2") {
+            this.goToPage("Chapter1_2");
+          } else if (text_type_id === "3") {
+            this.goToPage("Chapter1_3");
+          }
+        })
+        .catch((err) => {
+          console.log("지문 에러 : ", err);
+        });
+    },
+    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";
+      }
+    },
+    openCameraModal() {
+      this.closeModal();
+
+      this.showCameraModal = true;
+      navigator.mediaDevices
+        .getUserMedia({ video: true })
+        .then((stream) => {
+          const modalVideo = this.$refs.modalVideoElement;
+          modalVideo.srcObject = stream;
+          this.stream = stream;
+        })
+        .catch((error) => {
+          console.log("error>>>>>>>>", error);
+          alert("웹캠이 필요한 기능입니다!");
+          this.closeModal(); // 모달창을 닫음
+        });
+    },
+    closeModal() {
+      this.searchOpen = false;
+      this.searchOpen2 = false;
+      this.showCameraModal = false;
+      this.photoTaken = false;
+      this.photo = null;
+
+      //스트림 종료
+      if (this.stream) {
+        let tracks = this.stream.getTracks();
+        tracks.forEach((track) => track.stop());
+        this.stream = null;
+      }
+    },
+
+    onVideoLoaded() {
+      const video = this.$refs.modalVideoElement;
+      const canvas = this.$refs.canvas;
+      const ctx = canvas.getContext("2d");
+
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+    },
+    takePhoto() {
+      const video = this.$refs.modalVideoElement;
+      const canvas = this.$refs.canvas;
+      const ctx = canvas.getContext("2d");
+
+      ctx.save(); // 현재 상태 저장
+
+      // 캔버스 좌우 반전
+      ctx.scale(-1, 1);
+      ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);
+
+      ctx.restore();
+
+      const overlayImg = new Image();
+      overlayImg.src = "client/resources/img/camera-rabbit.png";
+      overlayImg.onload = () => {
+        const overlayWidth = canvas.width * 0.4;
+        const overlayHeight =
+          (overlayImg.height / overlayImg.width) * overlayWidth;
+        const overlayX = canvas.width - overlayWidth;
+        const overlayY = canvas.height - overlayHeight;
+
+        // 오버레이 이미지 그리기
+        ctx.drawImage(
+          overlayImg,
+          overlayX,
+          overlayY,
+          overlayWidth,
+          overlayHeight
+        );
+
+        // 사진 저장 함수 호출
+        const dataURL = canvas.toDataURL("image/png");
+        this.$router.push({
+          name: "PhotoEdit",
+          query: {
+            image: encodeURIComponent(dataURL),
+            unit_id: this.unit_id,
+            book_id: this.book_id,
+          },
+        });
+      };
+    },
+
+    buttonSearch2() {
+      this.searchOpen2 = true;
+    },
+    closeBtn() {
+      this.searchOpen = false;
+    },
+
+    // 유저 아이디를 unit 아이디를 통해 가져오기
+    searchStdId() {
+      const userInfo = this.$store.getters.getUserInfo;
+      axios({
+        url: "/userclass/searchStdId.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          userId: userInfo.userId,
+          unitId: this.unit_id,
+        },
+      })
+        .then((response) => {
+          this.$store.commit("setStdId", response.data);
+        })
+        .catch((err) => {
+          console.log("지문 에러 : ", err);
+        });
+    },
+  },
+  components: {
+    SvgIcon,
+  },
+  mounted() {
+    console.log("main mounted");
+    this.checkAndFetchData();
+    // const { book_id, unit_id } = this.$route.query;
+  },
+  watch: {
+    getBookId(newBookId) {
+      this.checkAndFetchData();
+    },
+    getUnitId(newUnitId) {
+      this.checkAndFetchData();
+    },
+  },
+  computed: {
+    ...mapGetters(["getBookId", "getUnitId"]),
+
+    processedRoadmap() {
+      let problemCounter = 0;
+      let wordCounter = 0;
+      let textCounter = 0;
+      let evalCounter = 0;
+
+      return this.roadmapData.map((item) => {
+        if (item.wd_cnt_id !== null) {
+          wordCounter++;
+          return {
+            label: `단어장${wordCounter}`,
+            learning_id: item.wd_cnt_id,
+            seqNum: item.seq,
+          };
+        } else if (item.text_id !== null) {
+          textCounter++;
+          return {
+            label: `지문${textCounter}`,
+            learning_id: item.text_id,
+            seqNum: item.seq,
+          };
+        } else if (item.eval_id !== null) {
+          evalCounter++;
+          return {
+            label: evalCounter === 1 ? "중간평가" : "최종평가",
+            learning_id: item.eval_id,
+            seqNum: item.seq,
+          };
+        } else {
+          problemCounter++;
+          return {
+            label: `문제${problemCounter}`,
+            learning_id: item.prblm_id,
+            seqNum: item.seq,
+          };
+        }
+      });
+    },
+  },
+  beforeDestroy() {
+    // 컴포넌트가 파괴되기 전에 리스너 제거
+    window.removeEventListener("resize", this.updateCanvasRect);
+    this.$refs.canvas.removeEventListener("click", this.handleCanvasClick);
+  },
 };
 </script>
 
 <style scoped>
 .body {
-    width: 1435px;
-    height: auto;
-    margin: 0 auto;
+  width: 1435px;
+  height: auto;
+  margin: 0 auto;
 }
 
 #container {
-    position: relative;
-    margin: auto;
-    border: 10px #333 solid;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 100;
+  position: relative;
+  margin: auto;
+  border: 10px #333 solid;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
 }
 
 video {
-    width: 100%;
-    height: auto;
-    background-color: #666;
+  width: 100%;
+  height: auto;
+  background-color: #666;
 }
 
 .mirrored {
-    transform: scaleX(-1);
+  transform: scaleX(-1);
 }
 
 .new-btn:disabled {
-    background-color: #fff3d7;
-    cursor: not-allowed;
+  background-color: #fff3d7;
+  cursor: not-allowed;
 }
 
 .sticker {
-    position: absolute;
-    cursor: move;
+  position: absolute;
+  cursor: move;
 }
 
 .sticker-handle {
-    width: 15px;
-    height: 15px;
-    background: rgba(255, 255, 255, 0.521);
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    cursor: nwse-resize;
-    font-size: 13px;
-    font-weight: bolder;
-    color: rgb(63, 63, 63);
+  width: 15px;
+  height: 15px;
+  background: rgba(255, 255, 255, 0.521);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  font-size: 13px;
+  font-weight: bolder;
+  color: rgb(63, 63, 63);
 }
 
 .sticker-delete {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: rgba(255, 0, 0, 0.425);
-    color: white;
-    padding: 5px;
-    cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: rgba(255, 0, 0, 0.425);
+  color: white;
+  padding: 5px;
+  cursor: pointer;
 }
 
 .toolbar {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
 }
 
 .toolbar button {
-    margin: 5px;
-    padding: 5px 10px;
-    cursor: pointer;
+  margin: 5px;
+  padding: 5px 10px;
+  cursor: pointer;
 }
 
 .toolbar input {
-    margin: 5px;
+  margin: 5px;
 }
 
 .rabbit-end {
-    cursor: pointer;
-    display: block;
-    position: absolute;
-    bottom: 0px;
-    left: -15px;
-    z-index: 10000;
+  cursor: pointer;
+  display: block;
+  position: absolute;
+  bottom: 0px;
+  left: -15px;
+  z-index: 10000;
 }
 
 .rabbit-running {
-    position: absolute;
-    bottom: 40px;
-    right: 110px;
-    z-index: 10000;
-    transform: scaleX(-1);
-    transition: all 0.5s ease-in-out;
+  position: absolute;
+  bottom: 40px;
+  right: 110px;
+  z-index: 10000;
+  transform: scaleX(-1);
+  transition: all 0.5s ease-in-out;
 }
 
 .fireworks-end {
-    position: absolute;
-    bottom: 70px;
-    left: -40px;
-    width: 20rem;
+  position: absolute;
+  bottom: 70px;
+  left: -40px;
+  width: 20rem;
 }
 
 .camera-rabbit {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    width: 40%;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 40%;
 }
 
 .race-btn p {
-    width: auto;
+  width: auto;
 }
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -126,6 +126,8 @@
126	126	problemData: [],
127	127	// problemArr: [],
128	128	answerArr: [],
	129	+
	130	+ seq: this.$store.getters.seqNum,
129	131	};
130	132	},
131	133	methods: {
...	...	@@ -133,7 +135,7 @@
133	135	const { unit_id, book_id } = this.$route.query;
134	136	this.$router.push({
135	137	name: "Dashboard",
136		- query: { value: 3, unit_id, book_id },
	138	+ query: { value: this.seq, unit_id, book_id },
137	139	});
138	140	},
139	141	goToPage(page) {
...	...	@@ -170,7 +172,9 @@
170	172	this.goToPage(this.problemType);
171	173	} else {
172	174	// 마지막 문제면 이동
173		- this.goToPage("Chapter4");
	175	+ // this.goToPage("Chapter4");
	176	+ alert("문제 학습 완료");
	177	+ this.complete();
174	178	}
175	179	},
176	180	previousProblem() {

...	...	@@ -103,6 +103,8 @@
103	103	prblm_id: [],
104	104	unit_id: null,
105	105	dataList: [],
	106	+
	107	+ seq: this.$store.getters.seqNum,
106	108	};
107	109	},
108	110	methods: {
...	...	@@ -110,7 +112,7 @@
110	112	const { unit_id, book_id } = this.$route.query;
111	113	this.$router.push({
112	114	name: "Dashboard",
113		- query: { value: 3, unit_id, book_id },
	115	+ query: { value: this.seq, unit_id, book_id },
114	116	});
115	117	},
116	118	goToPage(page) {
...	...	@@ -190,7 +192,9 @@
190	192	this.goToPage(this.problemType);
191	193	} else {
192	194	// 마지막 문제면 이동
193		- this.goToPage("Chapter4");
	195	+ // this.goToPage("Chapter4");
	196	+ alert("문제 학습 완료");
	197	+ this.complete();
194	198	}
195	199	},
196	200	previousProblem() {

...	...	@@ -145,6 +145,8 @@
145	145	problemData: [],
146	146	// problemArr: [],
147	147	answerArr: [],
	148	+
	149	+ seq: this.$store.getters.seqNum,
148	150	};
149	151	},
150	152	methods: {
...	...	@@ -152,7 +154,7 @@
152	154	const { unit_id, book_id } = this.$route.query;
153	155	this.$router.push({
154	156	name: "Dashboard",
155		- query: { value: 3, unit_id, book_id },
	157	+ query: { value: this.seq, unit_id, book_id },
156	158	});
157	159	},
158	160	goToPage(page) {
...	...	@@ -200,7 +202,9 @@
200	202	this.goToPage(this.problemType);
201	203	} else {
202	204	// 마지막 문제면 이동
203		- this.goToPage("Chapter4");
	205	+ // this.goToPage("Chapter4");
	206	+ alert("문제 학습 완료");
	207	+ this.complete();
204	208	}
205	209	},
206	210	previousProblem() {

...	...	@@ -47,7 +47,7 @@
47	47	/>
48	48	<div class="textbox">
49	49	<div style="height: 80%; line-height: 200px">
50		- <img :src="item.imgSrc" alt="" style="width: 120px;" />
	50	+ <img :src="item.imgSrc" alt="" style="width: 120px" />
51	51	</div>
52	52	<p class="subtitle3" style="height: 20%">{{ item.title }}</p>
53	53	</div>
...	...	@@ -90,20 +90,23 @@
90	90	currentWdBkIndex: 0, // 현재 단어장 인덱스
91	91	wdBookTypeIdState: "", // 이동할 페이지 타입 id
92	92	wordBookType: "", // 이동할 페이지
	93	+
	94	+ seq: this.$store.getters.seqNum,
93	95	};
94	96	},
95	97	methods: {
96	98	pageSetting() {
97	99	this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
98	100	this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
99		- this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
	101	+ this.wdBookId =
	102	+ this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
100	103
101	104	this.fetchWordList();
102	105	},
103		-
	106	+
104	107	async fetchWordList() {
105	108	try {
106		- const response = await axios.post('/word/getWordsByBookId.json', {
	109	+ const response = await axios.post("/word/getWordsByBookId.json", {
107	110	wdBookId: this.wdBookId,
108	111	});
109	112
...	...	@@ -115,7 +118,10 @@
115	118	file_mng_id: word.fileMngId,
116	119	});
117	120
118		- const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
	121	+ const fileRpath =
	122	+ fileResponse.data.list.length > 0
	123	+ ? fileResponse.data.list[0].fileRpath
	124	+ : null;
119	125	console.log("각 단어의 fileRpath: ", fileRpath);
120	126
121	127	// items 배열에 새로운 항목 추가
...	...	@@ -129,9 +135,8 @@
129	135
130	136	// 모든 요청이 완료될 때까지 대기
131	137	await Promise.all(requests);
132		-
133	138	} catch (error) {
134		- console.error('단어 목록을 불러오는 중 오류 발생:', error);
	139	+ console.error("단어 목록을 불러오는 중 오류 발생:", error);
135	140	}
136	141	},
137	142
...	...	@@ -140,38 +145,39 @@
140	145	alert("단어장 첫번째 페이지 입니다");
141	146	} else {
142	147	this.currentWdBkIndex--;
143		- this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
	148	+ this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
144	149
145	150	try {
146	151	const response = await axios.post("/wordbook/find.json", {
147		- wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
	152	+ wdBookId:
	153	+ this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
148	154	});
149	155	this.wdBookTypeIdState = response.data.wdBookTypeId;
150	156	console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
151	157
152	158	switch (this.wdBookTypeIdState) {
153	159	case "1":
154		- this.wordBookType = "Chapter2";
155		- break;
	160	+ this.wordBookType = "Chapter2";
	161	+ break;
156	162	case "2":
157		- this.wordBookType = "Chapter2_3";
158		- break;
	163	+ this.wordBookType = "Chapter2_3";
	164	+ break;
159	165	case "3":
160		- this.wordBookType = "Chapter2_2";
161		- break;
	166	+ this.wordBookType = "Chapter2_2";
	167	+ break;
162	168	case "4":
163		- this.wordBookType = "Chapter2_9";
164		- break;
	169	+ this.wordBookType = "Chapter2_9";
	170	+ break;
165	171	case "5":
166		- this.wordBookType = "Chapter2_4";
167		- break;
	172	+ this.wordBookType = "Chapter2_4";
	173	+ break;
168	174	default:
169		- this.wordBookType = null;
	175	+ this.wordBookType = null;
170	176	}
171		-
172		- this.goToPage(this.wordBookType);
	177	+
	178	+ this.goToPage(this.wordBookType);
173	179	} catch (error) {
174		- console.error('단어장 정보 불러오는 중 오류 발생:', error);
	180	+ console.error("단어장 정보 불러오는 중 오류 발생:", error);
175	181	}
176	182	}
177	183	},
...	...	@@ -179,48 +185,54 @@
179	185	async goToNextPage() {
180	186	if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
181	187	alert("단어장 마지막 페이지 입니다");
	188	+ this.complete();
182	189	} else {
183	190	this.currentWdBkIndex++;
184		- this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
	191	+ this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
185	192
186	193	try {
187	194	const response = await axios.post("/wordbook/find.json", {
188		- wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
	195	+ wdBookId:
	196	+ this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
189	197	});
190	198	this.wdBookTypeIdState = response.data.wdBookTypeId;
191	199	console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
192	200
193	201	switch (this.wdBookTypeIdState) {
194	202	case "1":
195		- this.wordBookType = "Chapter2";
196		- break;
	203	+ this.wordBookType = "Chapter2";
	204	+ break;
197	205	case "2":
198		- this.wordBookType = "Chapter2_3";
199		- break;
	206	+ this.wordBookType = "Chapter2_3";
	207	+ break;
200	208	case "3":
201		- this.wordBookType = "Chapter2_2";
202		- break;
	209	+ this.wordBookType = "Chapter2_2";
	210	+ break;
203	211	case "4":
204		- this.wordBookType = "Chapter2_9";
205		- break;
	212	+ this.wordBookType = "Chapter2_9";
	213	+ break;
206	214	case "5":
207		- this.wordBookType = "Chapter2_4";
208		- break;
	215	+ this.wordBookType = "Chapter2_4";
	216	+ break;
209	217	default:
210		- this.wordBookType = null;
	218	+ this.wordBookType = null;
211	219	}
212		-
213		- this.goToPage(this.wordBookType);
	220	+
	221	+ this.goToPage(this.wordBookType);
214	222	} catch (error) {
215		- console.error('단어장 정보 불러오는 중 오류 발생:', error);
	223	+ console.error("단어장 정보 불러오는 중 오류 발생:", error);
216	224	}
217	225	}
218	226	},
219	227
220	228	complete() {
221	229	const { unit_id, book_id } = this.$route.query;
222		- this.$router.push({ name: 'Dashboard', query: { value: 2, unit_id, book_id } });
	230	+ this.$router.push({
	231	+ name: "Dashboard",
	232	+ query: { value: this.seq, unit_id, book_id },
	233	+ });
223	234	},
	235	+
224	236	goToPage(page) {
225	237	this.$router.push({ name: page });
226	238	},

...	...	@@ -141,6 +141,8 @@
141	141	prblm_id: [],
142	142	problemData: [],
143	143	answerArr: [],
	144	+
	145	+ seq: this.$store.getters.seqNum,
144	146	};
145	147	},
146	148	methods: {
...	...	@@ -148,7 +150,7 @@
148	150	const { unit_id, book_id } = this.$route.query;
149	151	this.$router.push({
150	152	name: "Dashboard",
151		- query: { value: 3, unit_id, book_id },
	153	+ query: { value: this.seq, unit_id, book_id },
152	154	});
153	155	},
154	156	goToPage(page) {
...	...	@@ -236,7 +238,9 @@
236	238	this.goToPage(this.problemType);
237	239	} else {
238	240	// 마지막 문제면 이동
239		- this.goToPage("Chapter4");
	241	+ // this.goToPage("Chapter4");
	242	+ alert("문제 학습 완료");
	243	+ this.complete();
240	244	}
241	245	},
242	246	previousProblem() {

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

...	...	@@ -1,157 +1,188 @@
1	1	<template>
2		- <div id="Chapter1_2" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6		- </router-link>
	2	+ <div id="Chapter1_2" 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	7	</div>
8		- <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
9		- <div>
10		- <span class="title mr40">1. Hello WORLD</span>
11		- <span class="subtitle">my name is dd</span>
12		- </div>
13		- <button class="completeBtn" @click="complete">학습 종료</button>
14		- </div>
15		- <div class="flex justify-between align-center">
16		- <div class="pre-btn" @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/left.png" alt="" /></div>
17		- <div class="content title-box">
18		- <p class="title mt25 title-bg">step1. Hello WORLD</p>
19		- <div class="flex justify-center">
20		- <div class="readGroup">
21		- <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
22		- <div>
23		- <div class="textbox">
24		- <article v-for="(line, index) in combinedLines" :key="index" :class="['flex', 'align-start', 'mb10', { 'justify-end': index % 2 !== 0 }]">
25		- <div v-if="index % 2 === 0" class="icon mr40">
26		- <img src="../../../../resources/img/img37_s.png" alt="" />
27		- <p class="name">{{ speakerA_name }}</p>
28		- </div>
29		- <p v-if="index % 2 === 0" class="read">{{ line }}</p>
30		-
31		- <p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
32		- <div v-if="index % 2 !== 0" class="icon">
33		- <img src="../../../../resources/img/img37_s.png" alt="" />
34		- <p class="name">{{ speakerB_name }}</p>
35		- </div>
36		- </article>
37		- </div>
38		- </div>
39		- </div>
40		- </div>
41		- </div>
42		- <div class="next-btn" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/right.png" alt="" /></div>
43		- </div>
44		- <TextToImage />
	8	+ </router-link>
45	9	</div>
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
	14	+ <div>
	15	+ <span class="title mr40">1. Hello WORLD</span>
	16	+ <span class="subtitle">my name is dd</span>
	17	+ </div>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
	19	+ </div>
	20	+ <div class="flex justify-between align-center">
	21	+ <div class="pre-btn" @click="goToPage('Chapter1_1')">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
	23	+ </div>
	24	+ <div class="content title-box">
	25	+ <p class="title mt25 title-bg">step1. Hello WORLD</p>
	26	+ <div class="flex justify-center">
	27	+ <div class="readGroup">
	28	+ <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
	29	+ <div>
	30	+ <div class="textbox">
	31	+ <article
	32	+ v-for="(line, index) in combinedLines"
	33	+ :key="index"
	34	+ :class="[
	35	+ 'flex',
	36	+ 'align-start',
	37	+ 'mb10',
	38	+ { 'justify-end': index % 2 !== 0 },
	39	+ ]"
	40	+ >
	41	+ <div v-if="index % 2 === 0" class="icon mr40">
	42	+ <img src="../../../../resources/img/img37_s.png" alt="" />
	43	+ <p class="name">{{ speakerA_name }}</p>
	44	+ </div>
	45	+ <p v-if="index % 2 === 0" class="read">{{ line }}</p>
	46	+
	47	+ <p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
	48	+ <div v-if="index % 2 !== 0" class="icon">
	49	+ <img src="../../../../resources/img/img37_s.png" alt="" />
	50	+ <p class="name">{{ speakerB_name }}</p>
	51	+ </div>
	52	+ </article>
	53	+ </div>
	54	+ </div>
	55	+ </div>
	56	+ </div>
	57	+ </div>
	58	+ <div class="next-btn" @click="goToNextPage">
	59	+ <img src="../../../../resources/img/right.png" alt="" />
	60	+ </div>
	61	+ </div>
	62	+ <TextToImage />
	63	+ </div>
46	64	</template>
47	65
48	66	<script>
49	67	import TextToImage from "../../../component/TextToImage.vue";
50	68	import axios from "axios";
51	69	export default {
52		- data() {
53		- return {
54		- text_data: null, // 받아온 지문 정보
55		- speakerA_name: null,
56		- speakerB_name: null,
57		- speakerA: [],
58		- speakerB: [],
59		- };
60		- },
61		- methods: {
62		- complete() {
63		- const { unit_id, book_id } = this.$route.query;
64		- this.$router.push({ name: "Dashboard", query: { value: 1, unit_id, book_id } });
65		- },
66		- goToPage(page) {
67		- this.$router.push({ name: page });
68		- },
69		- // 대화 지문 API
70		- async fetchText() {
71		- axios({
72		- url: "/text/selectOneText.json",
73		- method: "post",
74		- headers: {
75		- "Content-Type": "application/json; charset=UTF-8",
76		- },
77		- data: {
78		- textId: this.textId,
79		- },
80		- })
81		- .then((response) => {
82		- this.text_data = response.data[0].text_cnt;
83		- this.splitConversation();
84		- })
85		- .catch((err) => {
86		- console.log("지문 에러 : ", err);
87		- });
88		- },
89		- // 대화 지문 split
90		- splitConversation() {
91		- const lines = this.text_data.split("/");
92		- const speakers = {};
	70	+ data() {
	71	+ return {
	72	+ text_data: null, // 받아온 지문 정보
	73	+ speakerA_name: null,
	74	+ speakerB_name: null,
	75	+ speakerA: [],
	76	+ speakerB: [],
93	77
94		- lines.forEach((line) => {
95		- const [speaker, message] = line.trim().split(":");
96		-
97		- if (!speakers.speakerA_name && !speakers.speakerB_name) {
98		- // 첫 번째 발화자를 speakerA_name으로 설정
99		- speakers.speakerA_name = speaker.trim();
100		- this.speakerA.push(message.trim());
101		- } else if (speakers.speakerA_name && !speakers.speakerB_name && speakers.speakerA_name !== speaker.trim()) {
102		- // 두 번째 발화자를 speakerB_name으로 설정
103		- speakers.speakerB_name = speaker.trim();
104		- this.speakerB.push(message.trim());
105		- } else if (speaker.trim() === speakers.speakerA_name) {
106		- // speakerA_name에 내용 추가
107		- this.speakerA.push(message.trim());
108		- } else if (speaker.trim() === speakers.speakerB_name) {
109		- // speakerB_name에 내용 추가
110		- this.speakerB.push(message.trim());
111		- }
112		- });
113		-
114		- this.speakerA_name = speakers.speakerA_name;
115		- this.speakerB_name = speakers.speakerB_name;
	78	+ seq: this.$store.getters.seqNum,
	79	+ };
	80	+ },
	81	+ methods: {
	82	+ complete() {
	83	+ const { unit_id, book_id } = this.$route.query;
	84	+ this.$router.push({
	85	+ name: "Dashboard",
	86	+ query: { value: this.seq, unit_id, book_id },
	87	+ });
	88	+ },
	89	+ goToPage(page) {
	90	+ this.$router.push({ name: page });
	91	+ },
	92	+ goToNextPage() {
	93	+ alert("지문 학습 완료");
	94	+ this.complete();
	95	+ },
	96	+ // 대화 지문 API
	97	+ async fetchText() {
	98	+ axios({
	99	+ url: "/text/selectOneText.json",
	100	+ method: "post",
	101	+ headers: {
	102	+ "Content-Type": "application/json; charset=UTF-8",
116	103	},
117		- },
118		- watch: {},
119		- computed: {
120		- textId() {
121		- //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
122		- return this.$store.getters.getTextId;
	104	+ data: {
	105	+ textId: this.textId,
123	106	},
124		- combinedLines() {
125		- const maxLength = Math.max(this.speakerA.length, this.speakerB.length);
126		- const lines = [];
	107	+ })
	108	+ .then((response) => {
	109	+ this.text_data = response.data[0].text_cnt;
	110	+ this.splitConversation();
	111	+ })
	112	+ .catch((err) => {
	113	+ console.log("지문 에러 : ", err);
	114	+ });
	115	+ },
	116	+ // 대화 지문 split
	117	+ splitConversation() {
	118	+ const lines = this.text_data.split("/");
	119	+ const speakers = {};
127	120
128		- for (let i = 0; i < maxLength; i++) {
129		- if (i < this.speakerA.length) {
130		- lines.push(this.speakerA[i]);
131		- }
132		- if (i < this.speakerB.length) {
133		- lines.push(this.speakerB[i]);
134		- }
135		- }
136		- return lines;
137		- },
	121	+ lines.forEach((line) => {
	122	+ const [speaker, message] = line.trim().split(":");
	123	+
	124	+ if (!speakers.speakerA_name && !speakers.speakerB_name) {
	125	+ // 첫 번째 발화자를 speakerA_name으로 설정
	126	+ speakers.speakerA_name = speaker.trim();
	127	+ this.speakerA.push(message.trim());
	128	+ } else if (
	129	+ speakers.speakerA_name &&
	130	+ !speakers.speakerB_name &&
	131	+ speakers.speakerA_name !== speaker.trim()
	132	+ ) {
	133	+ // 두 번째 발화자를 speakerB_name으로 설정
	134	+ speakers.speakerB_name = speaker.trim();
	135	+ this.speakerB.push(message.trim());
	136	+ } else if (speaker.trim() === speakers.speakerA_name) {
	137	+ // speakerA_name에 내용 추가
	138	+ this.speakerA.push(message.trim());
	139	+ } else if (speaker.trim() === speakers.speakerB_name) {
	140	+ // speakerB_name에 내용 추가
	141	+ this.speakerB.push(message.trim());
	142	+ }
	143	+ });
	144	+
	145	+ this.speakerA_name = speakers.speakerA_name;
	146	+ this.speakerB_name = speakers.speakerB_name;
138	147	},
139		- components: {
140		- TextToImage: TextToImage,
	148	+ },
	149	+ watch: {},
	150	+ computed: {
	151	+ textId() {
	152	+ //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
	153	+ return this.$store.getters.getTextId;
141	154	},
142		- mounted() {
143		- this.fetchText();
	155	+ combinedLines() {
	156	+ const maxLength = Math.max(this.speakerA.length, this.speakerB.length);
	157	+ const lines = [];
	158	+
	159	+ for (let i = 0; i < maxLength; i++) {
	160	+ if (i < this.speakerA.length) {
	161	+ lines.push(this.speakerA[i]);
	162	+ }
	163	+ if (i < this.speakerB.length) {
	164	+ lines.push(this.speakerB[i]);
	165	+ }
	166	+ }
	167	+ return lines;
144	168	},
	169	+ },
	170	+ components: {
	171	+ TextToImage: TextToImage,
	172	+ },
	173	+ mounted() {
	174	+ this.fetchText();
	175	+ },
145	176	};
146	177	</script>
147	178
148	179	<style>
149	180	.completeBtn {
150		- margin-right: 100px;
151		- background-color: #ffba08;
152		- padding: 10px 30px;
153		- border-radius: 10px;
154		- font-size: 28px;
155		- font-family: "ONEMobilePOPOTF";
	181	+ margin-right: 100px;
	182	+ background-color: #ffba08;
	183	+ padding: 10px 30px;
	184	+ border-radius: 10px;
	185	+ font-size: 28px;
	186	+ font-family: "ONEMobilePOPOTF";
156	187	}
157	188	</style>

...	...	@@ -1,104 +1,121 @@
1	1	<template>
2		- <div id="Chapter1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6		- </router-link>
	2	+ <div id="Chapter1" 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	7	</div>
8		- <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
9		- <div>
10		- <span class="title mr40">1. Hello WORLD</span>
11		- <span class="subtitle">my name is dd</span>
12		- </div>
13		- <button class="completeBtn" @click="complete">학습 종료</button>
14		- </div>
15		- <div class="flex justify-between align-center">
16		- <div class="pre-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/left.png" alt="" /></div>
17		- <div class="content title-box">
18		- <div class="listenGroup">
19		- <p class="title mt25 title-bg">step1. Hello WORLD</p>
20		- <!--
	8	+ </router-link>
	9	+ </div>
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
	14	+ <div>
	15	+ <span class="title mr40">1. Hello WORLD</span>
	16	+ <span class="subtitle">my name is dd</span>
	17	+ </div>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
	19	+ </div>
	20	+ <div class="flex justify-between align-center">
	21	+ <div class="pre-btn" @click="goToPage('Chapter1_2')">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
	23	+ </div>
	24	+ <div class="content title-box">
	25	+ <div class="listenGroup">
	26	+ <p class="title mt25 title-bg">step1. Hello WORLD</p>
	27	+ <!--
21	28	<img class="bg" src="../../../../resources/img/img39_s.png" data-num="1" />
22	29	-->
23		- <img class="bg" :src="img_src" />
24		- </div>
25		- </div>
26		- <div class="next-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/right.png" alt="" /></div>
	30	+ <img class="bg" :src="img_src" />
27	31	</div>
28		- <TextToImage />
	32	+ </div>
	33	+ <div class="next-btn" @click="goToNextPage">
	34	+ <img src="../../../../resources/img/right.png" alt="" />
	35	+ </div>
29	36	</div>
	37	+ <TextToImage />
	38	+ </div>
30	39	</template>
31	40
32	41	<script>
33	42	import TextToImage from "../../../component/TextToImage.vue";
34	43	import axios from "axios";
35	44	export default {
36		- data() {
37		- return {
38		- text_data: null,
39		- img_src: null,
40		- };
	45	+ data() {
	46	+ return {
	47	+ text_data: null,
	48	+ img_src: null,
	49	+ seq: this.$store.getters.seqNum,
	50	+ };
	51	+ },
	52	+ methods: {
	53	+ complete() {
	54	+ const { unit_id, book_id } = this.$route.query;
	55	+ this.$router.push({
	56	+ name: "Dashboard",
	57	+ query: { value: this.seq, unit_id, book_id },
	58	+ });
41	59	},
42		- methods: {
43		- complete() {
44		- const { unit_id, book_id } = this.$route.query;
45		- this.$router.push({ name: "Dashboard", query: { value: 1, unit_id, book_id } });
46		- },
47		- goToPage(page) {
48		- this.$router.push({ name: page });
49		- },
50		- // 지문 API
51		- async fetchText() {
52		- axios({
53		- url: "/text/selectOneText.json",
54		- method: "post",
55		- headers: {
56		- "Content-Type": "application/json; charset=UTF-8",
57		- },
58		- data: {
59		- textId: this.textId,
60		- },
61		- })
62		- .then((response) => {
63		- this.text_data = response.data[0];
64		- console.log("지문 데이터 : ", this.text_data);
65		- this.img_src = this.fetchImage(this.text_data.file_rpath);
66		- })
67		- .catch((err) => {
68		- console.log("지문 에러 : ", err);
69		- });
70		- },
71		- // 이미지 불러오기
72		- fetchImage(fileRpath) {
73		- return "http://165.229.169.113:9080/" + fileRpath;
74		- },
	60	+ goToPage(page) {
	61	+ this.$router.push({ name: page });
75	62	},
76		- watch: {},
77		- computed: {
78		- textId() {
79		- //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
80		- return this.$store.getters.getTextId;
	63	+ goToNextPage() {
	64	+ alert("지문 학습 완료");
	65	+ this.complete();
	66	+ },
	67	+ // 지문 API
	68	+ async fetchText() {
	69	+ axios({
	70	+ url: "/text/selectOneText.json",
	71	+ method: "post",
	72	+ headers: {
	73	+ "Content-Type": "application/json; charset=UTF-8",
81	74	},
	75	+ data: {
	76	+ textId: this.textId,
	77	+ },
	78	+ })
	79	+ .then((response) => {
	80	+ this.text_data = response.data[0];
	81	+ console.log("지문 데이터 : ", this.text_data);
	82	+ this.img_src = this.fetchImage(this.text_data.file_rpath);
	83	+ })
	84	+ .catch((err) => {
	85	+ console.log("지문 에러 : ", err);
	86	+ });
82	87	},
83		- components: {
84		- TextToImage: TextToImage,
	88	+ // 이미지 불러오기
	89	+ fetchImage(fileRpath) {
	90	+ return "http://165.229.169.113:9080/" + fileRpath;
85	91	},
86		- mounted() {
87		- this.fetchText();
	92	+ },
	93	+ watch: {},
	94	+ computed: {
	95	+ textId() {
	96	+ //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
	97	+ return this.$store.getters.getTextId;
88	98	},
	99	+ },
	100	+ components: {
	101	+ TextToImage: TextToImage,
	102	+ },
	103	+ mounted() {
	104	+ this.fetchText();
	105	+ },
89	106	};
90	107	</script>
91	108	<style scoped>
92	109	.listenGroup .textbox {
93		- width: 900px;
	110	+ width: 900px;
94	111	}
95	112
96	113	.completeBtn {
97		- margin-right: 100px;
98		- background-color: #ffba08;
99		- padding: 10px 30px;
100		- border-radius: 10px;
101		- font-size: 28px;
102		- font-family: "ONEMobilePOPOTF";
	114	+ margin-right: 100px;
	115	+ background-color: #ffba08;
	116	+ padding: 10px 30px;
	117	+ border-radius: 10px;
	118	+ font-size: 28px;
	119	+ font-family: "ONEMobilePOPOTF";
103	120	}
104	121	</style>

...	...	@@ -45,7 +45,9 @@
45	45	<button class="popTxt" v-for="(item, index) in items" :key="index">
46	46	<div class="listenGroup">
47	47	<img :src="item.imgSrc1" />
48		- <p class="textbox"><img :src="item.imgSrc" style="height: 150px;"/></p>
	48	+ <p class="textbox">
	49	+ <img :src="item.imgSrc" style="height: 150px" />
	50	+ </p>
49	51	</div>
50	52	<div
51	53	class="listenGroup"
...	...	@@ -68,7 +70,7 @@
68	70	</template>
69	71
70	72	<script>
71		-import axios from 'axios';
	73	+import axios from "axios";
72	74
73	75	export default {
74	76	data() {
...	...	@@ -82,13 +84,16 @@
82	84	currentWdBkIndex: 0, // 현재 단어장 인덱스
83	85	wdBookTypeIdState: "", // 이동할 페이지 타입 id
84	86	wordBookType: "", // 이동할 페이지
	87	+
	88	+ seq: this.$store.getters.seqNum,
85	89	};
86	90	},
87	91	methods: {
88	92	pageSetting() {
89	93	this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
90	94	this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
91		- this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
	95	+ this.wdBookId =
	96	+ this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
92	97	console.log(this.wdBookId);
93	98
94	99	this.fetchWordList();
...	...	@@ -96,7 +101,7 @@
96	101
97	102	async fetchWordList() {
98	103	try {
99		- const response = await axios.post('/word/getWordsByBookId.json', {
	104	+ const response = await axios.post("/word/getWordsByBookId.json", {
100	105	wdBookId: this.wdBookId,
101	106	});
102	107
...	...	@@ -108,7 +113,10 @@
108	113	file_mng_id: word.fileMngId,
109	114	});
110	115
111		- const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
	116	+ const fileRpath =
	117	+ fileResponse.data.list.length > 0
	118	+ ? fileResponse.data.list[0].fileRpath
	119	+ : null;
112	120	console.log("각 단어의 fileRpath: ", fileRpath);
113	121
114	122	// items 배열에 새로운 항목 추가
...	...	@@ -116,16 +124,15 @@
116	124	imgSrc1: "client/resources/img/img49_s.png",
117	125	imgSrc2: "client/resources/img/img50_s.png",
118	126	imgSrc: "http://165.229.169.113:9080/" + fileRpath, // 받아온 fileRpath로 이미지 설정
119		- isSecondImageVisible: false,
	127	+ isSecondImageVisible: false,
120	128	title: word.wdNm,
121	129	});
122	130	});
123	131
124	132	// 모든 요청이 완료될 때까지 대기
125	133	await Promise.all(requests);
126		-
127	134	} catch (error) {
128		- console.error('단어 목록을 불러오는 중 오류 발생:', error);
	135	+ console.error("단어 목록을 불러오는 중 오류 발생:", error);
129	136	}
130	137	},
131	138
...	...	@@ -134,38 +141,39 @@
134	141	alert("단어장 첫번째 페이지 입니다");
135	142	} else {
136	143	this.currentWdBkIndex--;
137		- this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
	144	+ this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
138	145
139	146	try {
140	147	const response = await axios.post("/wordbook/find.json", {
141		- wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
	148	+ wdBookId:
	149	+ this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
142	150	});
143	151	this.wdBookTypeIdState = response.data.wdBookTypeId;
144	152	console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
145	153
146	154	switch (this.wdBookTypeIdState) {
147	155	case "1":
148		- this.wordBookType = "Chapter2";
149		- break;
	156	+ this.wordBookType = "Chapter2";
	157	+ break;
150	158	case "2":
151		- this.wordBookType = "Chapter2_3";
152		- break;
	159	+ this.wordBookType = "Chapter2_3";
	160	+ break;
153	161	case "3":
154		- this.wordBookType = "Chapter2_2";
155		- break;
	162	+ this.wordBookType = "Chapter2_2";
	163	+ break;
156	164	case "4":
157		- this.wordBookType = "Chapter2_9";
158		- break;
	165	+ this.wordBookType = "Chapter2_9";
	166	+ break;
159	167	case "5":
160		- this.wordBookType = "Chapter2_4";
161		- break;
	168	+ this.wordBookType = "Chapter2_4";
	169	+ break;
162	170	default:
163		- this.wordBookType = null;
	171	+ this.wordBookType = null;
164	172	}
165		-
166		- this.goToPage(this.wordBookType);
	173	+
	174	+ this.goToPage(this.wordBookType);
167	175	} catch (error) {
168		- console.error('단어장 정보 불러오는 중 오류 발생:', error);
	176	+ console.error("단어장 정보 불러오는 중 오류 발생:", error);
169	177	}
170	178	}
171	179	},
...	...	@@ -173,48 +181,54 @@
173	181	async goToNextPage() {
174	182	if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
175	183	alert("단어장 마지막 페이지 입니다");
	184	+ this.complete();
176	185	} else {
177	186	this.currentWdBkIndex++;
178		- this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
	187	+ this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
179	188
180	189	try {
181	190	const response = await axios.post("/wordbook/find.json", {
182		- wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
	191	+ wdBookId:
	192	+ this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
183	193	});
184	194	this.wdBookTypeIdState = response.data.wdBookTypeId;
185	195	console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
186	196
187	197	switch (this.wdBookTypeIdState) {
188	198	case "1":
189		- this.wordBookType = "Chapter2";
190		- break;
	199	+ this.wordBookType = "Chapter2";
	200	+ break;
191	201	case "2":
192		- this.wordBookType = "Chapter2_3";
193		- break;
	202	+ this.wordBookType = "Chapter2_3";
	203	+ break;
194	204	case "3":
195		- this.wordBookType = "Chapter2_2";
196		- break;
	205	+ this.wordBookType = "Chapter2_2";
	206	+ break;
197	207	case "4":
198		- this.wordBookType = "Chapter2_9";
199		- break;
	208	+ this.wordBookType = "Chapter2_9";
	209	+ break;
200	210	case "5":
201		- this.wordBookType = "Chapter2_4";
202		- break;
	211	+ this.wordBookType = "Chapter2_4";
	212	+ break;
203	213	default:
204		- this.wordBookType = null;
	214	+ this.wordBookType = null;
205	215	}
206		-
207		- this.goToPage(this.wordBookType);
	216	+
	217	+ this.goToPage(this.wordBookType);
208	218	} catch (error) {
209		- console.error('단어장 정보 불러오는 중 오류 발생:', error);
	219	+ console.error("단어장 정보 불러오는 중 오류 발생:", error);
210	220	}
211	221	}
212	222	},
213	223
214	224	complete() {
215	225	const { unit_id, book_id } = this.$route.query;
216		- this.$router.push({ name: 'Dashboard', query: { value: 2, unit_id, book_id } });
	226	+ this.$router.push({
	227	+ name: "Dashboard",
	228	+ query: { value: this.seq, unit_id, book_id },
	229	+ });
217	230	},
	231	+
218	232	goToPage(page) {
219	233	this.$router.push({ name: page });
220	234	},

...	...	@@ -7,14 +7,15 @@
7	7	</div>
8	8	</router-link>
9	9	</div>
10		- <div class="title-box mb25 flex align-center mt40" style="
11		- justify-content: space-between;
12		-">
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
13	14	<div>
14	15	<span class="title mr40">1. Hello WORLD</span>
15	16	<span class="subtitle">my name is dd</span>
16	17	</div>
17		- <button class="completeBtn" @click="complete"> 학습 종료 </button>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
18	19	</div>
19	20	<div class="flex justify-between align-center">
20	21	<div class="pre-btn" @click="previousProblem()">
...	...	@@ -38,7 +39,12 @@
38	39	<!-- <p class="title1 mb40" style="color: #464749;">The sun rises in the east and sets in the west. It is very hot during summer.</p>
39	40	<img src="../../../../resources/img/img65_37s.png" alt=""> -->
40	41
41		- <img class="exampleImg" :src="imgUrl" reloadable="true" alt="example img" />
	42	+ <img
	43	+ class="exampleImg"
	44	+ :src="imgUrl"
	45	+ reloadable="true"
	46	+ alt="example img"
	47	+ />
42	48
43	49	<!-- 정답 칸 -->
44	50	<div class="dropGroup flex align-center justify-center mt30">
...	...	@@ -46,10 +52,22 @@
46	52
47	53	<!-- 드롭 가능한 영역 -->
48	54	<div class="dropContainer" id="targetContainer">
49		- <div v-for="(slot, index) in answerLength" :key="index" class="dropSlot" @dragover.prevent
50		- @drop="onDrop($event, index)">
51		- <div class="dropSlot-inner" draggable="true" @dragstart="onDragStart($event, userAnswer[index], index)">
52		- <img src="../../../../resources/img/img64_37s.png" alt="answer slot" />
	55	+ <div
	56	+ v-for="(slot, index) in answerLength"
	57	+ :key="index"
	58	+ class="dropSlot"
	59	+ @dragover.prevent
	60	+ @drop="onDrop($event, index)"
	61	+ >
	62	+ <div
	63	+ class="dropSlot-inner"
	64	+ draggable="true"
	65	+ @dragstart="onDragStart($event, userAnswer[index], index)"
	66	+ >
	67	+ <img
	68	+ src="../../../../resources/img/img64_37s.png"
	69	+ alt="answer slot"
	70	+ />
53	71	<div v-if="userAnswer[index]" class="dropped-char">
54	72	{{ userAnswer[index].toUpperCase() }}
55	73	</div>
...	...	@@ -62,9 +80,16 @@
62	80
63	81	<!-- 드래그 가능한 버튼 -->
64	82	<div class="dragGroup mt40" id="sourceContainer">
65		- <button v-for="(char, index) in choiceCharacters" :key="index" draggable="true"
66		- @dragstart="onDragStart($event, char)">
67		- <img src="../../../../resources/img/img63_37s_2.png" alt="drag letter" />
	83	+ <button
	84	+ v-for="(char, index) in choiceCharacters"
	85	+ :key="index"
	86	+ draggable="true"
	87	+ @dragstart="onDragStart($event, char)"
	88	+ >
	89	+ <img
	90	+ src="../../../../resources/img/img63_37s_2.png"
	91	+ alt="drag letter"
	92	+ />
68	93	<p>{{ char.toUpperCase() }}</p>
69	94	</button>
70	95	</div>
...	...	@@ -96,14 +121,18 @@
96	121	prblm_id: [],
97	122	unit_id: null,
98	123	dataList: [],
	124	+
	125	+ seq: this.$store.getters.seqNum,
99	126	};
100	127	},
101		- computed: {
102		- },
	128	+ computed: {},
103	129	methods: {
104	130	complete() {
105	131	const { unit_id, book_id } = this.$route.query;
106		- this.$router.push({ name: 'Dashboard', query: { value: 3, unit_id, book_id } });
	132	+ this.$router.push({
	133	+ name: "Dashboard",
	134	+ query: { value: this.seq, unit_id, book_id },
	135	+ });
107	136	},
108	137	goToPage(page) {
109	138	this.$router.push({ name: page });
...	...	@@ -124,7 +153,7 @@
124	153	if (this.userAnswer[index] === "") {
125	154	this.userAnswer.splice(index, 1, this.draggedChar);
126	155	const charIndex = this.choiceCharacters.indexOf(this.draggedChar);
127		- console.log(charIndex)
	156	+ console.log(charIndex);
128	157	if (charIndex > -1) {
129	158	this.choiceCharacters.splice(charIndex, 1); // 드래그한 문자를 choice에서 제거
130	159	}
...	...	@@ -155,20 +184,24 @@
155	184	const prblmId = this.currentLearningId.prblm_id;
156	185
157	186	try {
158		- const res = await axios.post("problem/problemInfo.json", {
159		- prblmId: prblmId,
160		- }, {
161		- headers: {
162		- "Content-Type": "application/json; charset=UTF-8",
	187	+ const res = await axios.post(
	188	+ "problem/problemInfo.json",
	189	+ {
	190	+ prblmId: prblmId,
163	191	},
164		- });
	192	+ {
	193	+ headers: {
	194	+ "Content-Type": "application/json; charset=UTF-8",
	195	+ },
	196	+ }
	197	+ );
165	198
166	199	console.log("problem - response : ", res.data);
167	200	this.dataList = res.data.problem;
168	201	this.problemDetail = res.data.problemDetail[0];
169	202	this.example = this.dataList.prblmExpln;
170	203	this.answer = this.problemDetail.prblmDtlExpln;
171		- this.choice = this.answer ? this.shuffleString(this.answer) : '';
	204	+ this.choice = this.answer ? this.shuffleString(this.answer) : "";
172	205	this.splitExample();
173	206	this.initializeUserAnswer();
174	207	this.choiceCharacters = this.choice.split("");
...	...	@@ -185,22 +218,26 @@
185	218	}
186	219	},
187	220	shuffleString(string) {
188		- const array = string.split('');
	221	+ const array = string.split("");
189	222	for (let i = array.length - 1; i > 0; i--) {
190	223	const j = Math.floor(Math.random() * (i + 1));
191	224	[array[i], array[j]] = [array[j], array[i]];
192	225	}
193		- return array.join('');
	226	+ return array.join("");
194	227	},
195	228	async findFile(file_mng_id) {
196	229	try {
197		- const res = await axios.post("/file/find.json", {
198		- file_mng_id: file_mng_id,
199		- }, {
200		- headers: {
201		- "Content-Type": "application/json; charset=UTF-8",
	230	+ const res = await axios.post(
	231	+ "/file/find.json",
	232	+ {
	233	+ file_mng_id: file_mng_id,
202	234	},
203		- });
	235	+ {
	236	+ headers: {
	237	+ "Content-Type": "application/json; charset=UTF-8",
	238	+ },
	239	+ }
	240	+ );
204	241	return res.data.list[0];
205	242	} catch (error) {
206	243	console.log("result - error : ", error);
...	...	@@ -211,21 +248,26 @@
211	248	const problemData = {
212	249	prblmImfo: this.currentLearningId,
213	250	prblmNumber: this.currentProblemIndex,
214		- prblmAns: this.selectedButton
215		- }
216		- this.$store.dispatch('saveProblemData', problemData);
217		- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
218		- this.$store.dispatch('goToNextProblem');
	251	+ prblmAns: this.selectedButton,
	252	+ };
	253	+ this.$store.dispatch("saveProblemData", problemData);
	254	+ if (
	255	+ this.currentProblemIndex <
	256	+ this.$store.state.currentLearningIds.length - 1
	257	+ ) {
	258	+ this.$store.dispatch("goToNextProblem");
219	259	this.handleProblemDetail(this.currentLearningId);
220	260	this.goToPage(this.problemType);
221	261	} else {
222	262	// 마지막 문제면 이동
223		- this.goToPage("Chapter4")
	263	+ // this.goToPage("Chapter4");
	264	+ alert("문제 학습 완료");
	265	+ this.complete();
224	266	}
225	267	},
226	268	previousProblem() {
227	269	if (this.currentProblemIndex > 0) {
228		- this.$store.dispatch('goToPreviousProblem');
	270	+ this.$store.dispatch("goToPreviousProblem");
229	271	this.handleProblemDetail(this.currentLearningId);
230	272	this.goToPage(this.problemType);
231	273	}
...	...	@@ -295,17 +337,17 @@
295	337	},
296	338	isPreviousButtonDisabled() {
297	339	return this.currentProblemIndex === 0;
298		- }
	340	+ },
299	341	},
300	342	created() {
301		- console.log('Current Learning ID:', this.currentLearningId);
302		- console.log('Current Label:', this.currentLabel);
303		- console.log('Current Problem Index:', this.currentProblemIndex);
	343	+ console.log("Current Learning ID:", this.currentLearningId);
	344	+ console.log("Current Label:", this.currentLabel);
	345	+ console.log("Current Problem Index:", this.currentProblemIndex);
304	346
305	347	// Fetch or process the current problem based on `currentLearningId`
306	348	},
307	349	mounted() {
308		- this.getProblem()
	350	+ this.getProblem();
309	351	},
310	352	};
311	353	</script>
...	...	@@ -379,6 +421,6 @@
379	421	padding: 10px 30px;
380	422	border-radius: 10px;
381	423	font-size: 28px;
382		- font-family: 'ONEMobilePOPOTF';
	424	+ font-family: "ONEMobilePOPOTF";
383	425	}
384	426	</style>

...	...	@@ -116,6 +116,8 @@
116	116	problemData: [],
117	117	problemArr: [],
118	118	answerArr: [],
	119	+
	120	+ seq: this.$store.getters.seqNum,
119	121	};
120	122	},
121	123	methods: {
...	...	@@ -123,7 +125,7 @@
123	125	const { unit_id, book_id } = this.$route.query;
124	126	this.$router.push({
125	127	name: "Dashboard",
126		- query: { value: 4, unit_id, book_id },
	128	+ query: { value: this.seq, unit_id, book_id },
127	129	});
128	130	},
129	131	goToPage(page) {
...	...	@@ -228,7 +230,9 @@
228	230	this.goToPage(this.problemType);
229	231	} else {
230	232	// 마지막 문제면 이동
231		- this.goToPage("Chapter4");
	233	+ // this.goToPage("Chapter4");
	234	+ alert("문제 학습 완료");
	235	+ this.complete();
232	236	}
233	237	},
234	238	previousProblem() {

...	...	@@ -118,6 +118,7 @@
118	118	answerArr: [],
119	119
120	120	// prblmArr: [],
	121	+ seq: this.$store.getters.seqNum,
121	122	};
122	123	},
123	124	methods: {
...	...	@@ -125,7 +126,7 @@
125	126	const { unit_id, book_id } = this.$route.query;
126	127	this.$router.push({
127	128	name: "Dashboard",
128		- query: { value: 11, unit_id, book_id },
	129	+ query: { value: this.seq, unit_id, book_id },
129	130	});
130	131	},
131	132	goToPage(page) {
...	...	@@ -199,7 +200,10 @@
199	200	this.goToPage(this.problemType);
200	201	} else {
201	202	// 마지막 문제면 이동
202		- this.goToPage("Chapter4");
	203	+ // this.goToPage("Chapter4");
	204	+ alert("문제 학습 완료");
	205	+ this.complete();
	206	+ // this.goToPage("Dashboard");
203	207	}
204	208	},
205	209	previousProblem() {

...	...	@@ -45,14 +45,14 @@
45	45	/>
46	46	<div class="vocaGroup">
47	47	<div
48		- v-for="(word) in wordList"
	48	+ v-for="word in wordList"
49	49	:key="word.wdId"
50	50	class="flex justify-between mb80 word-item"
51	51	>
52	52	<article class="flex align-center">
53	53	<div class="imgGroup mr30">
54	54	<img
55		- :src= word.fileRpath
	55	+ :src="word.fileRpath"
56	56	data-num="1"
57	57	class="ink"
58	58	style="width: 150px"
...	...	@@ -124,7 +124,7 @@
124	124	</template>
125	125
126	126	<script>
127		-import axios from 'axios';
	127	+import axios from "axios";
128	128
129	129	export default {
130	130	data() {
...	...	@@ -137,17 +137,20 @@
137	137	currentWdBkIndex: 0, // 현재 단어장 인덱스
138	138	wdBookTypeIdState: "", // 이동할 페이지 타입 id
139	139	wordBookType: "", // 이동할 페이지
	140	+
	141	+ seq: this.$store.getters.seqNum,
140	142	};
141	143	},
142	144	methods: {
143	145	pageSetting() {
144	146	this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
145	147	this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
146		- this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
	148	+ this.wdBookId =
	149	+ this.$store.getters.getWdBookIdList[this.currentWdBkIndex]; // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
147	150
148	151	this.fetchWordList();
149	152	},
150		-
	153	+
151	154	async fetchWordList() {
152	155	try {
153	156	const response = await axios.post("/word/getWordsByBookId.json", {
...	...	@@ -162,7 +165,10 @@
162	165	file_mng_id: word.fileMngId,
163	166	});
164	167
165		- const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
	168	+ const fileRpath =
	169	+ fileResponse.data.list.length > 0
	170	+ ? fileResponse.data.list[0].fileRpath
	171	+ : null;
166	172	console.log("각 단어의 fileRpath: ", fileRpath);
167	173
168	174	word.fileRpath = "http://165.229.169.113:9080/" + fileRpath; // fileRpath 값을 해당 객체에 추가
...	...	@@ -179,44 +185,44 @@
179	185	}
180	186	},
181	187
182		-
183	188	async goToPrevPage() {
184	189	if (this.currentWdBkIndex - 1 < 0) {
185	190	alert("단어장 첫번째 페이지 입니다");
186	191	} else {
187	192	this.currentWdBkIndex--;
188		- this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
	193	+ this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
189	194
190	195	try {
191	196	const response = await axios.post("/wordbook/find.json", {
192		- wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
	197	+ wdBookId:
	198	+ this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
193	199	});
194	200	this.wdBookTypeIdState = response.data.wdBookTypeId;
195	201	console.log("이전 단어장 타입 id: ", this.wdBookTypeIdState);
196	202
197	203	switch (this.wdBookTypeIdState) {
198	204	case "1":
199		- this.wordBookType = "Chapter2";
200		- break;
	205	+ this.wordBookType = "Chapter2";
	206	+ break;
201	207	case "2":
202		- this.wordBookType = "Chapter2_3";
203		- break;
	208	+ this.wordBookType = "Chapter2_3";
	209	+ break;
204	210	case "3":
205		- this.wordBookType = "Chapter2_2";
206		- break;
	211	+ this.wordBookType = "Chapter2_2";
	212	+ break;
207	213	case "4":
208		- this.wordBookType = "Chapter2_9";
209		- break;
	214	+ this.wordBookType = "Chapter2_9";
	215	+ break;
210	216	case "5":
211		- this.wordBookType = "Chapter2_4";
212		- break;
	217	+ this.wordBookType = "Chapter2_4";
	218	+ break;
213	219	default:
214		- this.wordBookType = null;
	220	+ this.wordBookType = null;
215	221	}
216		-
217		- this.goToPage(this.wordBookType);
	222	+
	223	+ this.goToPage(this.wordBookType);
218	224	} catch (error) {
219		- console.error('단어장 정보 불러오는 중 오류 발생:', error);
	225	+ console.error("단어장 정보 불러오는 중 오류 발생:", error);
220	226	}
221	227	}
222	228	},
...	...	@@ -224,47 +230,52 @@
224	230	async goToNextPage() {
225	231	if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
226	232	alert("단어장 마지막 페이지 입니다");
	233	+ this.complete();
227	234	} else {
228	235	this.currentWdBkIndex++;
229		- this.$store.dispatch('updateCurrentWdBkIndex', this.currentWdBkIndex);
	236	+ this.$store.dispatch("updateCurrentWdBkIndex", this.currentWdBkIndex);
230	237
231	238	try {
232	239	const response = await axios.post("/wordbook/find.json", {
233		- wdBookId: this.$store.getters.getWdBookIdList[this.currentWdBkIndex]
	240	+ wdBookId:
	241	+ this.$store.getters.getWdBookIdList[this.currentWdBkIndex],
234	242	});
235	243	this.wdBookTypeIdState = response.data.wdBookTypeId;
236	244	console.log("다음 단어장 타입 id: ", this.wdBookTypeIdState);
237	245
238	246	switch (this.wdBookTypeIdState) {
239	247	case "1":
240		- this.wordBookType = "Chapter2";
241		- break;
	248	+ this.wordBookType = "Chapter2";
	249	+ break;
242	250	case "2":
243		- this.wordBookType = "Chapter2_3";
244		- break;
	251	+ this.wordBookType = "Chapter2_3";
	252	+ break;
245	253	case "3":
246		- this.wordBookType = "Chapter2_2";
247		- break;
	254	+ this.wordBookType = "Chapter2_2";
	255	+ break;
248	256	case "4":
249		- this.wordBookType = "Chapter2_9";
250		- break;
	257	+ this.wordBookType = "Chapter2_9";
	258	+ break;
251	259	case "5":
252		- this.wordBookType = "Chapter2_4";
253		- break;
	260	+ this.wordBookType = "Chapter2_4";
	261	+ break;
254	262	default:
255		- this.wordBookType = null;
	263	+ this.wordBookType = null;
256	264	}
257		-
258		- this.goToPage(this.wordBookType);
	265	+
	266	+ this.goToPage(this.wordBookType);
259	267	} catch (error) {
260		- console.error('단어장 정보 불러오는 중 오류 발생:', error);
	268	+ console.error("단어장 정보 불러오는 중 오류 발생:", error);
261	269	}
262	270	}
263	271	},
264	272
265	273	complete() {
266	274	const { unit_id, book_id } = this.$route.query;
267		- this.$router.push({ name: 'Dashboard', query: { value: 2, unit_id, book_id } });
	275	+ this.$router.push({
	276	+ name: "Dashboard",
	277	+ query: { value: this.seq, unit_id, book_id },
	278	+ });
268	279	},
269	280	goToPage(page) {
270	281	this.$router.push({ name: page });

Delete comment