jichoi / lms_front star
구자현 구자현 2024-08-22
Merge branch 'master' of http://210.180.118.83/jichoi/lms_front
@671d5a6cbb4a163fba2a7bcb6806d667a45ad1a5
client/views/pages/AppStore.js
--- client/views/pages/AppStore.js
+++ client/views/pages/AppStore.js
@@ -14,6 +14,7 @@
         prblmTypeId: null,
         currentLabel: null,
         currentProblemIndex: 0,
+        textId: null,
     },
     getters: {
         isLoggedIn(state) {
@@ -40,12 +41,15 @@
         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,
+        currentLabel: (state) => state.currentLabel,
+        currentProblemIndex: (state) => state.currentProblemIndex,
+        prblmTypeId: (state) => state.prblmTypeId,
     },
     mutations: {
         setToken(state, token) {
@@ -82,6 +86,9 @@
         setLearningId(state, learningId) {
             state.learningId = learningId;
         },
+        setTextId(state, textId) {
+            state.textId = textId;
+        },
         setLearningData(state, payload) {
             state.currentLearningIds = payload.learning_id; // Array of IDs
             state.currentLabel = payload.label;
@@ -97,7 +104,7 @@
             if (state.currentProblemIndex > 0) {
                 state.currentProblemIndex--;
             }
-        }
+        },
     },
     actions: {
         login({ commit }, token) {
@@ -136,13 +143,16 @@
             commit("setLearningId", learningId);
         },
         updateLearningData({ commit }, payload) {
-            commit('setLearningData', payload);
+            commit("setLearningData", payload);
+        },
+        updateTextId({ commit }, textId) {
+            commit("setTextId", textId);
         },
         goToNextProblem({ commit }) {
-            commit('incrementProblemIndex');
+            commit("incrementProblemIndex");
         },
         goToPreviousProblem({ commit }) {
-            commit('decrementProblemIndex');
-        }
+            commit("decrementProblemIndex");
+        },
     },
 });
client/views/pages/main/Chapter/Chapter1_2.vue
--- client/views/pages/main/Chapter/Chapter1_2.vue
+++ client/views/pages/main/Chapter/Chapter1_2.vue
@@ -51,7 +51,6 @@
 export default {
     data() {
         return {
-            text_id: "TEXT_000000000000050",
             text_data: null, // 받아온 지문 정보
             speakerA_name: null,
             speakerB_name: null,
@@ -76,7 +75,7 @@
                     "Content-Type": "application/json; charset=UTF-8",
                 },
                 data: {
-                    textId: this.text_id,
+                    textId: this.textId,
                 },
             })
                 .then((response) => {
@@ -118,6 +117,10 @@
     },
     watch: {},
     computed: {
+        textId() {
+            //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
+            return this.$store.getters.getTextId;
+        },
         combinedLines() {
             const maxLength = Math.max(this.speakerA.length, this.speakerB.length);
             const lines = [];
client/views/pages/main/Chapter/Chapter1_3.vue
--- client/views/pages/main/Chapter/Chapter1_3.vue
+++ client/views/pages/main/Chapter/Chapter1_3.vue
@@ -35,7 +35,6 @@
 export default {
     data() {
         return {
-            text_id: "TEXT_000000000000049",
             text_data: null,
             img_src: null,
         };
@@ -57,7 +56,7 @@
                     "Content-Type": "application/json; charset=UTF-8",
                 },
                 data: {
-                    textId: this.text_id,
+                    textId: this.textId,
                 },
             })
                 .then((response) => {
@@ -75,7 +74,12 @@
         },
     },
     watch: {},
-    computed: {},
+    computed: {
+        textId() {
+            //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
+            return this.$store.getters.getTextId;
+        },
+    },
     components: {
         TextToImage: TextToImage,
     },
client/views/pages/main/Dashboard.vue
--- client/views/pages/main/Dashboard.vue
+++ client/views/pages/main/Dashboard.vue
@@ -5,165 +5,110 @@
     <div v-else class="main">
         <div class="race-wrap">
             <div class="title-box">
-                <p class="title" style="margin-top: 7rem;">{{ titleUnitName }}</p>
+                <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="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="[goToPage('Chapter1'), storeLearningId(labeledItems[0].learning_id)]">
-
-                        <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' }">
+                    <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' }">
+                        <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' }">
+                        <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' }">
+                    <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="[goToPage('Chapter2_8'), storeLearningId(labeledItems[4].learning_id)]">
-                        <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' }">
+                    <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' }">
+                        <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' }">
+                        <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' }">
+                        <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="[goToPage('Chapter2_8'), storeLearningId(labeledItems[8].learning_id)]">
-                        <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' }">
+                    <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' }">
+                    <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' }">
+                    <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 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>
@@ -171,8 +116,7 @@
             <!-- 팝업 -->
             <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">
+                    <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>
 
@@ -181,15 +125,13 @@
                         <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요</p>
                     </div>
                     <div class="flex justify-center">
-                        <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal">
-                            사진 촬영
-                        </button>
+                        <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="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">
@@ -197,14 +139,11 @@
                         </button>
                     </div>
                     <div class="box">
-                        <div style="width: 100%;">
+                        <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>
+                                <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>
@@ -215,51 +154,60 @@
             </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;">
+        <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 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">
+                <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 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">
+                        <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>
+                            <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"
+                        <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"
+                                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>
+                                style="color: #ffba08; cursor: pointer"
+                            ></svg-icon>
+                            <p>
+                                <em class="yellow">{{ selectedImage.heart }}</em>
+                            </p>
                         </div>
                     </div>
                 </div>
@@ -269,13 +217,13 @@
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
-import { mdiHeartOutline } from '@mdi/js';
-import axios from 'axios';
-import { call } from 'file-loader';
-import { name } from 'file-loader';
-import { mapGetters } from 'vuex';
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify, mdiHeart, mdiWindowClose } from "@mdi/js";
+import { mdiHeartOutline } from "@mdi/js";
+import axios from "axios";
+import { call } from "file-loader";
+import { name } from "file-loader";
+import { mapGetters } from "vuex";
 import { mapActions } from "vuex";
 
 export default {
@@ -283,11 +231,11 @@
         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
+                    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,
@@ -295,13 +243,12 @@
             mdiHeart: mdiHeart,
             mdiHeartOutline: mdiHeartOutline,
             showModal: false,
-            searchOpen: false,  // 사진 상세보기 모달창
+            searchOpen: false, // 사진 상세보기 모달창
             searchOpen2: false, // 단원 마친 후, 사진 촬영 여부 선택 모달창
-            showCameraModal: false, // 카메라 모달창 
+            showCameraModal: false, // 카메라 모달창
             photoTaken: false,
-            photo: null,    //캡쳐 사진 
+            photo: null, //캡쳐 사진
             stream: null,
-
 
             roadmapData: [],
             labeledItems: [],
@@ -315,7 +262,7 @@
 
             schedules: [],
             nowSchedule: "",
-            state: '',
+            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,
@@ -329,12 +276,12 @@
 
             selectedImage: [
                 {
-                    image: '',
-                    unit: '',
-                    date: '',
-                    name: '',
-                    heart: '',
-                    fileMngId: '',
+                    image: "",
+                    unit: "",
+                    date: "",
+                    name: "",
+                    heart: "",
+                    fileMngId: "",
                 },
             ],
 
@@ -343,24 +290,25 @@
             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
+            else var calHeart = heart - 1;
 
             // 하트 수를 증가시키기 위한 API 요청
-            axios.post('/photo/likeUpdate.json', {
-                "likeData": calHeart,
-                "fileMngId": fileMngId
-            })
-                .then(response => {
+            axios
+                .post("/photo/likeUpdate.json", {
+                    likeData: calHeart,
+                    fileMngId: fileMngId,
+                })
+                .then((response) => {
                     this.selectedImage.heart = calHeart;
                 })
-                .catch(error => {
+                .catch((error) => {
                     console.error("Error updating heart:", error);
                 });
         },
@@ -379,11 +327,11 @@
             this.fetchRoadmapData(unit_id, book_id);
             this.fetchRabbit();
 
-            this.unit_id = unit_id
-            this.book_id = book_id
+            this.unit_id = unit_id;
+            this.book_id = book_id;
 
-            if (this.$route.query.reCapture == 'true') {
-                this.openCameraModal()
+            if (this.$route.query.reCapture == "true") {
+                this.openCameraModal();
             }
         },
 
@@ -407,36 +355,36 @@
                 },
                 data: {
                     unitId: unit_id,
-                    sclsId: "1"
-                }
+                    sclsId: "1",
+                },
             })
-                .then(response => {
+                .then((response) => {
                     this.file = response.data;
 
-                    const findFilePromises = this.file.map(f =>
-                        this.findFile(f.file_mng_id)
-                    );
+                    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://localhost: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);
+                .then((fileResults) => {
+                    this.images = this.file
+                        .map((file, index) => {
+                            const result = fileResults[index];
+                            if (result) {
+                                return {
+                                    url: "http://localhost: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 => {
+                .catch((error) => {
                     console.error("Error fetching images:", error);
                 });
         },
@@ -459,33 +407,30 @@
             }
         },
         goToPageImg(page) {
-            const canvas = document.querySelector('canvas');
-            const dataURL = canvas.toDataURL('image/png');
+            const canvas = document.querySelector("canvas");
+            const dataURL = canvas.toDataURL("image/png");
 
             this.$router.push({ name: page, query: { image: encodeURIComponent(dataURL) } });
         },
 
         fetchRabbit() {
             for (var i = 0; i < 12; i++) {
-                this.rabbitPos[i] = false
+                this.rabbitPos[i] = false;
             }
 
             if (this.$route.query.value) {
-                this.rabbitPos[parseInt(this.$route.query.value, 10) + 1] = true
+                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
+                    this.rabbitCompl[i + 1] = true;
                 }
 
-                if (this.$route.query.value === '11') {
+                if (this.$route.query.value === "11") {
                     this.rabbitEnd = true;
                     setTimeout(() => {
                         this.searchOpen2 = true;
                     }, 1000);
                 }
-
-            }
-            else
-                this.rabbitPos[0] = true
+            } else this.rabbitPos[0] = true;
         },
         fetchSchedule(unit_id, book_id) {
             axios({
@@ -496,28 +441,29 @@
                 },
                 data: {
                     stdId: "2",
-                }
-            }).then(response => {
-                this.schedules = response.data;
+                },
+            })
+                .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';
+                    if (this.schedules.length == 0) {
+                        this.state = "notRegistered";
                     } 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';
+                        const allFinished = this.schedules.every((schedule) => schedule.finish === "T");
+                        if (allFinished) {
+                            this.state = "finish";
                         } else {
-                            this.state = 'notRegistered';
+                            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 => {
+                })
+                .catch((error) => {
                     console.error("Error fetching roadmap data:", error);
                 });
         },
@@ -530,24 +476,24 @@
                 },
                 data: {
                     scheduleId: this.nowSchedule.schdl_id,
-                    finish: "T"
-                }
+                    finish: "T",
+                },
             })
-                .then(response => {
-                    const nextSchedule = this.schedules.find(schedule => schedule.schdl_id > this.nowSchedule.schdl_id);
+                .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 } });
+                        this.$router.push({ name: "Dashboard", query: { unit_id: nextSchedule.unit_id, book_id: nextSchedule.book_id } });
                     } else {
                         alert("모든 학습을 완료했습니다!");
-                        this.state = 'finish';
+                        this.state = "finish";
                     }
                 })
-                .catch(error => {
+                .catch((error) => {
                     console.error("Error updating schedule:", error);
                 });
         },
@@ -560,21 +506,21 @@
                 },
                 data: {
                     unit_id: unit_id,
-                    book_id: book_id
-                }
+                    book_id: book_id,
+                },
             })
-                .then(response => {
+                .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.titleUnitName = this.roadmapData[0].unit_nm;
+                        this.titleBookName = this.roadmapData[0].book_nm;
                         this.labeledItems = this.processedRoadmap;
                     } else {
-                        this.state = "noProblem"
+                        this.state = "noProblem";
                     }
                 })
-                .catch(error => {
-                    this.state = "noProblem"
+                .catch((error) => {
+                    this.state = "noProblem";
                     console.error("Error fetching roadmap data:", error);
                 });
         },
@@ -582,7 +528,7 @@
             this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
         },
         ShowPopup() {
-            this.searchOpen2 = true;  // 촬영 여부 묻는 모달창 열기
+            this.searchOpen2 = true; // 촬영 여부 묻는 모달창 열기
         },
         goToPage(page) {
             // const { unit_id, book_id } = this.$route.query;
@@ -590,71 +536,103 @@
             this.$router.push({ name: page });
         },
         storeLearningId(labeledItems) {
-            this.$store.dispatch('updateLearningData', labeledItems);
-            this.$store.dispatch('updateLearningId', labeledItems.learning_id) // 단어장에 사용중..
+            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('단어장')) {
+            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;
+            axios
+                .post("/wordContent/selectWordContent.json", {
+                    wordContentId: item,
+                })
+                .then((response) => {
+                    this.wordContentList = response.data;
 
-                // 단어장 ID 리스트에서 첫 번째 단어장 ID를 사용
-                const wdBookId = this.wordContentList[0].wd_book_id;
+                    // 단어장 ID 리스트에서 첫 번째 단어장 ID를 사용
+                    const wdBookId = this.wordContentList[0].wd_book_id;
 
-                // 단어장 정보 가져오기
-                return axios.post("/wordbook/find.json", {
-                    wdBookId: wdBookId,
-                });
-            })
-            .then((response) => {
-                const wordbookData = response.data;
-                console.log("wordbookData: ", wordbookData); // 응답 데이터 확인
+                    // 단어장 정보 가져오기
+                    return axios.post("/wordbook/find.json", {
+                        wdBookId: wdBookId,
+                    });
+                })
+                .then((response) => {
+                    const wordbookData = response.data;
+                    console.log("wordbookData: ", wordbookData); // 응답 데이터 확인
 
-                // 단어장 타입에 따라 페이지 설정
-                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;
+                    // 단어장 타입에 따라 페이지 설정
+                    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;
                     }
-                } else {
-                    console.error("wdBookTypeId가 없습니다.");
-                    this.wordBookType = null;
-                }
 
-                console.log("현재 단어장 타입: ", this.wordBookType);
-                this.goToPage(this.wordBookType);
+                    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,
+                },
             })
-            .catch((error) => {
-                console.error("단어장 정보를 불러오는 중 오류 발생:", error);
-                this.wordBookType = null;
-            });
+                .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") {
@@ -711,21 +689,20 @@
             this.closeModal();
 
             this.showCameraModal = true;
-            navigator.mediaDevices.getUserMedia({ video: true })
-                .then(stream => {
+            navigator.mediaDevices
+                .getUserMedia({ video: true })
+                .then((stream) => {
                     const modalVideo = this.$refs.modalVideoElement;
                     modalVideo.srcObject = stream;
                     this.stream = stream;
                 })
-                .catch(error => {
+                .catch((error) => {
                     console.log("error>>>>>>>>", error);
                     alert("웹캠이 필요한 기능입니다!");
                     this.closeModal(); // 모달창을 닫음
                 });
         },
         closeModal() {
-
-
             this.searchOpen = false;
             this.searchOpen2 = false;
             this.showCameraModal = false;
@@ -735,7 +712,7 @@
             //스트림 종료
             if (this.stream) {
                 let tracks = this.stream.getTracks();
-                tracks.forEach(track => track.stop());
+                tracks.forEach((track) => track.stop());
                 this.stream = null;
             }
         },
@@ -743,14 +720,15 @@
         onVideoLoaded() {
             const video = this.$refs.modalVideoElement;
             const canvas = this.$refs.canvas;
-            const ctx = canvas.getContext('2d');
+            const ctx = canvas.getContext("2d");
 
             canvas.width = video.videoWidth;
             canvas.height = video.videoHeight;
-        }, takePhoto() {
+        },
+        takePhoto() {
             const video = this.$refs.modalVideoElement;
             const canvas = this.$refs.canvas;
-            const ctx = canvas.getContext('2d');
+            const ctx = canvas.getContext("2d");
 
             ctx.save(); // 현재 상태 저장
 
@@ -761,7 +739,7 @@
             ctx.restore();
 
             const overlayImg = new Image();
-            overlayImg.src = 'client/resources/img/camera-rabbit.png';
+            overlayImg.src = "client/resources/img/camera-rabbit.png";
             overlayImg.onload = () => {
                 const overlayWidth = canvas.width * 0.4;
                 const overlayHeight = (overlayImg.height / overlayImg.width) * overlayWidth;
@@ -772,8 +750,8 @@
                 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 } });
+                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 } });
             };
         },
 
@@ -788,7 +766,7 @@
         SvgIcon,
     },
     mounted() {
-        console.log('main mounted');
+        console.log("main mounted");
         this.checkAndFetchData();
         // const { book_id, unit_id } = this.$route.query;
     },
@@ -798,10 +776,10 @@
         },
         getUnitId(newUnitId) {
             this.checkAndFetchData();
-        }
+        },
     },
     computed: {
-        ...mapGetters(['getBookId', 'getUnitId']),
+        ...mapGetters(["getBookId", "getUnitId"]),
 
         processedRoadmap() {
             let problemCounter = 0;
@@ -809,7 +787,7 @@
             let textCounter = 0;
             let evalCounter = 0;
 
-            return this.roadmapData.map(item => {
+            return this.roadmapData.map((item) => {
                 if (item.wd_cnt_id !== null) {
                     wordCounter++;
                     return { label: `단어장${wordCounter}`, learning_id: item.wd_cnt_id };
@@ -818,20 +796,20 @@
                     return { label: `지문${textCounter}`, learning_id: item.text_id };
                 } else if (item.eval_id !== null) {
                     evalCounter++;
-                    return { label: evalCounter === 1 ? '중간평가' : '최종평가', learning_id: item.eval_id };
+                    return { label: evalCounter === 1 ? "중간평가" : "최종평가", learning_id: item.eval_id };
                 } else {
                     problemCounter++;
                     return { label: `문제${problemCounter}`, learning_id: item.prblm_id };
                 }
             });
-        }
+        },
     },
     beforeDestroy() {
         // 컴포넌트가 파괴되기 전에 리스너 제거
-        window.removeEventListener('resize', this.updateCanvasRect);
-        this.$refs.canvas.removeEventListener('click', this.handleCanvasClick);
-    }
-}
+        window.removeEventListener("resize", this.updateCanvasRect);
+        this.$refs.canvas.removeEventListener("click", this.handleCanvasClick);
+    },
+};
 </script>
 
 <style scoped>
@@ -862,7 +840,7 @@
 }
 
 .new-btn:disabled {
-    background-color: #FFF3D7;
+    background-color: #fff3d7;
     cursor: not-allowed;
 }
 
@@ -935,7 +913,6 @@
     width: 20rem;
 }
 
-
 .camera-rabbit {
     position: absolute;
     right: 0;
@@ -946,4 +923,4 @@
 .race-btn p {
     width: auto;
 }
-</style>
(파일 끝에 줄바꿈 문자 없음)
+</style>
Add a comment
List