jichoi / lms_front star
구자현 구자현 2024-08-14
Merge branch 'master' of http://210.180.118.83/jichoi/lms_front
@200c8844e22408fa280ffd733e27cd9e5da3723e
8b1fdf8
200c884
client/views/layout/Side.vue
--- client/views/layout/Side.vue
+++ client/views/layout/Side.vue
@@ -25,7 +25,7 @@
 
         <div class="ask mb30">
 
             <p class="title1 mb15">선생님께 질문 있어요~</p>
 
 
-            <div class="memo mb15"><textarea name="" id="" placeholder="궁금한 것을 적어보세요."></textarea></div>
 
+            <div class="memo mb15"><textarea name="" id="" placeholder="궁금한 것을 적어보세요." v-model="studentInfo.studentQuestion"></textarea></div>
 
             <div class="flex justify-end"><button>질문하기</button></div>
 
         </div>
 
         <!-- <div class="btn-wrap flex justify-between">
8b1fdf8
200c884
client/views/pages/main/Chapter/Chapter1_2.vue
--- client/views/pages/main/Chapter/Chapter1_2.vue
+++ client/views/pages/main/Chapter/Chapter1_2.vue
@@ -21,7 +21,7 @@
 
                 <article class="flex align-start mb10">

                   <div class="icon mr40">

                     <img src="../../../../resources/img/img37_s.png" alt="">

-                    <p class="name">발화좌</p>

+                    <p class="name">발화자</p>

                   </div>

                   <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>

                 </article>
@@ -29,13 +29,13 @@
 
                   <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>

                   <div class="icon ">

                     <img src="../../../../resources/img/img37_s.png" alt="">

-                    <p class="name">발화좌</p>

+                    <p class="name">발화자</p>

                   </div>

                 </article>

                 <article class="flex align-start mb10">

                   <div class="icon mr40">

                     <img src="../../../../resources/img/img37_s.png" alt="">

-                    <p class="name">발화좌</p>

+                    <p class="name">발화자</p>

                   </div>

                   <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>

                 </article>
@@ -43,7 +43,7 @@
 
                   <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>

                   <div class="icon ">

                     <img src="../../../../resources/img/img37_s.png" alt="">

-                    <p class="name">발화좌</p>

+                    <p class="name">발화자</p>

                   </div>

                 </article>

               </div>
8b1fdf8
200c884
client/views/pages/main/Chapter/Chapter2_10.vue
--- client/views/pages/main/Chapter/Chapter2_10.vue
+++ client/views/pages/main/Chapter/Chapter2_10.vue
@@ -15,54 +15,53 @@
 
         <p class="title mt25 title-bg">step2</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="flex align-center justify-center" style="gap: 113px;">

           <div class="imgGroup">

             <div class="flex" style="gap: 60px;">

               <button><img src="../../../../resources/img/img82_42s.png" alt="">

-                <p>1</p>

+                <p>Tell me</p>

               </button>

               <button><img src="../../../../resources/img/img159_42s.png" alt=""></button>

               <button><img src="../../../../resources/img/img83_42s.png" alt="">

-                <p>1</p>

+                <p>Why</p>

               </button>

             </div>

-

           </div>

           <div class="pickGroup">

             <div>

-              <article  class="flex justify-center mb50" style="gap: 60px;">

+              <article class="flex justify-center mb50" style="gap: 60px;">

                 <img src="../../../../resources/img/img84_42s.png" alt="">

                 <div class="flex">

-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">

-                    <p>1</p>

+                  <button @click="handleClick('You are so upset.', 1)">

+                    <img src="../../../../resources/img/img136_71s.png" alt="">

+                    <p :class="{ active: selectedButton === 1 }">1</p>

                   </button>

-                  <p>a</p>

+                  <p>You are so upset.</p>

                 </div>

               </article>

-              <article  class="flex justify-center mb50" style="gap: 60px;">

+              <article class="flex justify-center mb50" style="gap: 60px;">

                 <img src="../../../../resources/img/img85_42s.png" alt="">

                 <div class="flex">

-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">

-                    <p>2</p>

+                  <button @click="handleClick('You is so upset.', 2)">

+                    <img src="../../../../resources/img/img136_71s.png" alt="">

+                    <p :class="{ active: selectedButton === 2 }">2</p>

                   </button>

-                  <p>a</p>

+                  <p>You is so upset.</p>

                 </div>

               </article>

-              <article  class="flex justify-center" style="gap: 60px;">

+              <article class="flex justify-center" style="gap: 60px;">

                 <img src="../../../../resources/img/img86_42s.png" alt="">

                 <div class="flex">

-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">

-                    <p>3</p>

+                  <button @click="handleClick('You am so upset.', 3)">

+                    <img src="../../../../resources/img/img136_71s.png" alt="">

+                    <p :class="{ active: selectedButton === 3 }">3</p>

                   </button>

-                  <p>a</p>

+                  <p>You am so upset.</p>

                 </div>

               </article>

             </div>

-

           </div>

         </div>

       </div>
@@ -75,26 +74,26 @@
 
 export default {

   data() {

     return {

-    }

+      selectedButton: null, // 선택된 버튼을 추적하기 위한 데이터

+    };

   },

   methods: {

     goToPage(page) {

       this.$router.push({ name: page });

+    },

+    handleClick(text, buttonNumber) {

+      this.selectedButton = buttonNumber; // 선택된 버튼 번호를 저장

+

+      if (text === 'You are so upset.') {

+        alert('정답입니다!');

+      } else {

+        alert('오답입니다!');

+      }

     }

-  },

-  watch: {

-

-  },

-  computed: {

-

-  },

-  components: {

-  },

-  mounted() {

-

   }

 }

 </script>

+

 <style scoped>

 .imgGroup{width: fit-content;}

 .imgGroup button {
@@ -112,7 +111,7 @@
 
   background: #ffffffb8;

   border-radius: 5px;

   padding: 10px;

-  font-size: 48px;

+  font-size: 23px;

   font-family: 'ONEMobilePOP';

 }
@@ -129,8 +128,18 @@
 
   left: 50%;

   transform: translate(-50%, -50%);

 }

-.pickGroup article img{object-fit: contain; width: -webkit-fill-available;}

-.pickGroup article >div >p {

-  font-size: 64px;

+

+.pickGroup article img {

+  object-fit: contain;

+  width: -webkit-fill-available;

 }

-</style>
(No newline at end of file) 
+

+.pickGroup article >div >p {

+  font-size: 25px;

+  white-space: nowrap; /* 텍스트가 줄 바꿈 없이 한 줄로 표시되도록 설정 */

+}

+

+.pickGroup button p.active {

+  color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */

+}

+</style>
8b1fdf8
200c884
client/views/pages/main/Chapter/Chapter2_13.vue
--- client/views/pages/main/Chapter/Chapter2_13.vue
+++ client/views/pages/main/Chapter/Chapter2_13.vue
@@ -70,9 +70,9 @@
 
               </div>

                 </div>

                 <!-- 오답일 경우 아래의 이미지가 보여야함 -->

-                <div class="flex justify-center wrong-anwser" style="gap: 20px;">

+                <!-- <div class="flex justify-center wrong-anwser" style="gap: 20px;">

                   <img src="../../../../resources/img/img165_46s.png" alt="">

-                </div>

+                </div> -->

   

               </div>

             </div>
8b1fdf8
200c884
client/views/pages/main/Chapter/Chapter2_4.vue
--- client/views/pages/main/Chapter/Chapter2_4.vue
+++ client/views/pages/main/Chapter/Chapter2_4.vue
@@ -53,9 +53,9 @@
 
       return {

          items: [

             { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img59_36s.png', title: 'apple' },

-            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img58_36s.png', title: 'a'},

-            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img57_36s.png', title: 'a' },

-            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img56_36s.png', title: 'a' },

+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img58_36s.png', title: 'cloud'},

+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img57_36s.png', title: 'car' },

+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img56_36s.png', title: 'guitar' },

          ],

          selectedIndex: 0,

          timer: "00",
8b1fdf8
200c884
client/views/pages/main/Chapter/Chapter2_8.vue
--- client/views/pages/main/Chapter/Chapter2_8.vue
+++ client/views/pages/main/Chapter/Chapter2_8.vue
@@ -1,78 +1,154 @@
 
 <template>

-    <div id="Chapter1_1" class="content-wrap">

-      <div style="margin: 30px 0px 50px">

-        <router-link to="/MyPlan.page">

-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>

-        </router-link>

-      </div>

-      <div class="title-box mb25 flex align-center mt40">

-        <span class="title mr40">1. Hello WORLD</span>

-        <span class="subtitle">my name is dd</span>

-      </div>

-      <div class="flex justify-between align-center">

-        <div class="pre-btn" @click="goToPage('Chapter2_9')"><img src="../../../../resources/img/left.png" alt=""></div>

-        <div class="content title-box">

-          <p class="title mt25 title-bg">step2</p>

-          <div class="flex align-center mb30">

-          <p class="subtitle2 mr20">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p>

-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">

-          </button> -->

-        </div>

-  

-          <div class="text-ct">

-          <div class="dropGroup flex align-center justify-center mt30">

-            <div style="position: relative;" >

-              <img src="../../../../resources/img/img28_s.png" alt="">

-              <button style="    left: 30px;

-    top: 167px;"><img src="../../../../resources/img/img29_s_01.png" alt=""><p>a</p></button>

-              <button style="     right: 409px;

-    top: 133px;"><img src="../../../../resources/img/img30_s_01.png" alt=""><p>a</p></button>

-              <button style=" right: 46px;

-    top: 128px;"><img src="../../../../resources/img/img31_s_01.png" alt=""><p>a</p></button>

-               

-            </div>

-          </div>

-          <div class="dragGroup ">

-            <div class="flex justify-center" style="gap: 20px;">

-              <article style="  right: 0;

-    top: 36%;  "><button><img src="../../../../resources/img/img29_s.png" alt=""><p>a</p></button></article>

-            <article style="  left: 0;

-    top: 36%;   "><button><img src="../../../../resources/img/img30_s.png" alt=""><p>a</p></button></article>

-            <article style="left: 50%;

-    top: 10%;"><button><img src="../../../../resources/img/img31_s.png" alt=""><p>a</p></button></article>

-            </div>

-            

-          </div>

-        </div>

-        </div>

-        <div class="next-btn" @click="goToPage('Chapter2_12')"><img src="../../../../resources/img/right.png" alt=""></div>

-      </div>

+  <div id="Chapter1_1" class="content-wrap">

+    <div style="margin: 30px 0px 50px">

+      <router-link to="/MyPlan.page">

+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>

+      </router-link>

     </div>

-  </template>

+    <div class="title-box mb25 flex align-center mt40">

+      <span class="title mr40">1. Hello WORLD</span>

+      <span class="subtitle">my name is dd</span>

+    </div>

+    <div class="flex justify-between align-center">

+      <div class="pre-btn" @click="goToPage('Chapter2_9')"><img src="../../../../resources/img/left.png" alt=""></div>

+      <div class="content title-box">

+        <p class="title mt25 title-bg">step2</p>

+        <div class="flex align-center mb30">

+          <p class="subtitle2 mr20">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p>

+        </div>

+

+        <div class="text-ct">

+          <div class="dropGroup flex align-center justify-center mt30">

+            <div style="position: relative;">

+              <img src="../../../../resources/img/img28_s.png" alt="">

+              <button class="dropzone" data-answer="This" style="left: 30px; top: 167px;">

+                <img src="../../../../resources/img/img29_s_01.png" alt="">

+                <p style="font-size: 35px;">?</p>

+              </button>

+              <button class="dropzone" data-answer="is" style="right: 409px; top: 133px;">

+                <img src="../../../../resources/img/img30_s_01.png" alt="">

+                <p style="font-size: 35px;">?</p>

+              </button>

+              <button class="dropzone" data-answer="a pen" style="right: 46px; top: 128px;">

+                <img src="../../../../resources/img/img31_s_01.png" alt="">

+                <p style="font-size: 35px;">?</p>

+              </button>

+            </div>

+          </div>

+          <div class="dragGroup flex justify-center" style="gap: 20px;">

+            <article style="right: 0; top: 36%;">

+              <button class="draggable" data-text="This" draggable="true">

+                <img src="../../../../resources/img/img29_s.png" alt="">

+                <p style="font-size: 35px;">This</p>

+              </button>

+            </article>

+            <article style="left: 0; top: 36%;">

+              <button class="draggable" data-text="is" draggable="true">

+                <img src="../../../../resources/img/img30_s.png" alt="">

+                <p style="font-size: 35px;">is</p>

+              </button>

+            </article>

+            <article style="left: 50%; top: 10%;">

+              <button class="draggable" data-text="a pen" draggable="true">

+                <img src="../../../../resources/img/img31_s.png" alt="">

+                <p style="font-size: 35px;">a pen</p>

+              </button>

+            </article>

+          </div>

+        </div>

+      </div>

+      <div class="next-btn" @click="goToPage('Chapter2_12')"><img src="../../../../resources/img/right.png" alt=""></div>

+    </div>

+  </div>

+</template>

+

   

-  <script>

-  export default {

-    data() {

-      return {

+<script>

+export default {

+  data() {

+    return {

+      draggedElement: null, // 현재 드래그 중인 요소

+    };

+  },

+  methods: {

+    goToPage(page) {

+      this.$router.push({ name: page });

+    },

+    handleDragStart(event) {

+      this.draggedElement = event.target; // 드래그한 요소 저장

+      event.dataTransfer.setData('text/plain', event.target.dataset.text);

+      event.target.style.cursor = 'grabbing'; // 드래그 중 커서 변경

+    },

+    handleDragEnd(event) {

+      event.target.style.cursor = 'grab'; // 드래그 종료 후 커서 변경

+    },

+    handleDragOver(event) {

+      event.preventDefault(); // 드롭 허용

+    },

+    handleDrop(event) {

+      event.preventDefault();

+      const dropZone = event.target.closest('button.dropzone');

+      const draggedText = this.draggedElement ? this.draggedElement.dataset.text : '';

+

+      if (dropZone) {

+        const expectedText = dropZone.dataset.answer;

+        if (draggedText === expectedText) {

+          // 드래그된 텍스트가 정답인 경우

+          const rect = dropZone.getBoundingClientRect();

+          // 버튼의 이미지 및 텍스트를 드롭존에 맞게 설정

+          dropZone.querySelector('p').textContent = draggedText;

+          dropZone.querySelector('img').style.display = 'none'; // 기존 이미지 숨기기

+

+          // 드래그된 버튼의 이미지와 텍스트를 드롭존에 복사

+          const draggedImage = this.draggedElement.querySelector('img').cloneNode();

+          const draggedTextElement = this.draggedElement.querySelector('p').cloneNode();

+

+          // 드롭존에 이미지 및 텍스트를 추가

+          dropZone.appendChild(draggedImage);

+          dropZone.appendChild(draggedTextElement);

+

+          // 드래그한 요소 숨기기

+          this.draggedElement.style.display = 'none';

+        } else {

+          // 정답이 아닌 경우

+          alert('오답입니다!'); // 오답 경고 메시지

+        }

       }

-    },

-    methods: {

-      goToPage(page) {

-        this.$router.push({ name: page });

-      }

-    },

-    watch: {

-  

-    },

-    computed: {

-  

-    },

-    components: {

-    },

-    mounted() {

-      

+

+      this.draggedElement = null; // 드래그 상태 초기화

     }

+  },

+  mounted() {

+    // 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가

+    document.querySelectorAll('.draggable').forEach(button => {

+      button.addEventListener('dragstart', this.handleDragStart);

+      button.addEventListener('dragend', this.handleDragEnd);

+    });

+

+    // 드롭 가능한 영역에 드래그 오버 및 드롭 이벤트 추가

+    document.querySelectorAll('.dropzone').forEach(zone => {

+      zone.addEventListener('dragover', this.handleDragOver);

+      zone.addEventListener('drop', this.handleDrop);

+    });

   }

-  </script>

-  <style scoped>

+}

+</script>

+

+

+

+<style scoped>

+.draggable {

+  cursor: grab;

+}

+

+.draggable:active {

+  cursor: grabbing;

+}

+

+

+

+.dropzone img {

+  display: block; /* 이미지가 항상 보이도록 설정 */

+}

+

 </style>
(No newline at end of file)
8b1fdf8
200c884
client/views/pages/main/Chapter/Chapter2_9.vue
--- client/views/pages/main/Chapter/Chapter2_9.vue
+++ client/views/pages/main/Chapter/Chapter2_9.vue
@@ -1,5 +1,10 @@
 
 <template>

   <div id="Chapter1_1" class="content-wrap">

+    <div style="margin: 30px 0px 50px">

+      <router-link to="/MyPlan.page">

+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>

+      </router-link>

+    </div>

     <div class="title-box mb25 flex align-center mt40">

       <span class="title mr40">1. Hello WORLD</span>

       <span class="subtitle">my name is dd</span>
@@ -24,9 +29,9 @@
 
                     </div>

                     <div class="flex align-start">

                       <div>

-                        <h3>sidewalk</h3>

+                        <h3>mountain</h3>

                         <div class="flex align-center mt10">

-                          <span class="title1">보도</span>

+                          <span class="title1">산</span>

                         </div>

                       </div>

                     </div>
@@ -37,9 +42,9 @@
 
                     </div>

                     <div class="flex align-start">

                       <div>

-                        <h3>sidewalk</h3>

+                        <h3>cat</h3>

                         <div class="flex align-center mt10">

-                          <span class="title1">보도</span>

+                          <span class="title1">고양이</span>

                         </div>

                       </div>

                     </div>
@@ -52,9 +57,9 @@
 
                     </div>

                     <div class="flex align-start">

                       <div>

-                        <h3>sidewalk</h3>

+                        <h3>watermelon</h3>

                         <div class="flex align-center mt10">

-                          <span class="title1">보도</span>

+                          <span class="title1">수박</span>

                         </div>

                       </div>

                     </div>
@@ -65,7 +70,7 @@
 
                     </div>

                     <div class="flex align-start">

                       <div>

-                        <h3>sidewalk</h3>

+                        <h3>america</h3>

                         <div class="flex align-center mt10">

                           <span class="title1">보도</span>

                         </div>
8b1fdf8
200c884
client/views/pages/main/Dashboard.vue
--- client/views/pages/main/Dashboard.vue
+++ client/views/pages/main/Dashboard.vue
@@ -8,6 +8,20 @@
 
                 <p class="title">{{ roadmapData[0].unit_nm }}</p>
 
                 <p class="subtitle">{{ roadmapData[0].book_nm }}</p>
 
             </div>
 
+            <!--
 
+                    <div class="race-box">
 
+                        <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
 
+                        <div class="rcon flex justify-between mb5">
 
+                            <div class="race-btn" v-for="roadmap in roadmapData" :key="roadmap.learning_id" @click="goToPage('Chapter7')">
 
+                                <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2">
 
+                                    <img :src="item.imgSrc1">
 
+                                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
 
+                                </button>
 
+                                <p>{{getNonNullColumn(roadmap)}}</p>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                -->
 
             <div class="race-box">
 
                 <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
 
                 <div class="rcon flex justify-end mb5">
@@ -123,8 +137,160 @@
 
                             </div>
 
                         </div>
 
                     </article>
 
+                    <!-- 팝업 -->
 
+                    <article class="popup-wrap" v-show="searchOpen">
 
+                        <div class="popup-box ">
 
+                            <div class="flex mb10  justify-between">
 
+                                <p class="popup-title">알림</p>
 
+                                <button type="button" class="popup-close-btn" @click="closeBtn2">
 
+                                    <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
 
+                                </button>
 
+                            </div>
 
+                        </div>
 
+                    </article>
 
                 </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"></video>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="flex justify-center mt20">
 
+                        <button type="button" class="new-btn" v-if="!photoTaken" @click="capturePhoto"
 
+                            :disabled="!videoReady">
 
+                            사진 촬영
 
+                        </button>
 
+                    </div>
 
+                </div>
 
+            </article>
 
+
 
+            <!-- 사진 모달 -->
 
+            <article v-show="showPhotoModal" class="popup-wrap">
 
+                <div class="popup-box" style="top: 500px; left: auto">
 
+                    <div class="flex mb10 justify-between">
 
+                        <p class="popup-title">사진 꾸미기</p>
 
+                        <button type="button" class="popup-close-btn" @click="closePhotoModal">
 
+                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
 
+                        </button>
 
+                    </div>
 
+                    <div class="flex justify-between align-center" style="gap: 40px;">
 
+                        <div class="content" style="padding: 30px; min-width: 401px; min-height: 710px;">
 
+                            <div class="tool">
 
+                                <div class="flex justify-center mb20" style="gap: 20px;">
 
+                                    <button class="popTxt" style="width: 101px;" v-for="(item, index) in items_photo"
 
+                                        :key="index" @click="updateContent(index)"
 
+                                        :class="{ active: selectedIndex === index }">
 
+                                        <img :src="item.imgSrc1" style="display: block;">
 
+                                        <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
 
+                                    </button>
 
+                                </div>
 
+                            </div>
 
+
 
+                            <div class="stickers" v-show="!stickersVisible">
 
+                                <div class="toolbar">
 
+                                    <label for="brushSize" style="font-size: 9px;">펜 굵기</label>
 
+                                    <input type="color" v-model="color" />
 
+                                    <input type="range" id="brushSize" min="1" max="10" v-model="brushSize"
 
+                                        @input="updateBrushSize" style="width: 100px; margin-left: 5px;" />
 
+                                    <button class="new-btn" style="font-size: 9px;" @click="setTool('draw')">펜</button>
 
+                                    <button class="new-btn" style="font-size: 9px;"
 
+                                        @click="setTool('eraser')">지우개</button>
 
+                                    <button class="new-btn" style="font-size: 9px;" @click="clearAll">전체
 
+                                        지우개</button>
 
+                                </div>
 
+                            </div>
 
+
 
+                            <div class="stickers" v-show="stickersVisible">
 
+                                <button><img src="../../../resources/img/img146_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img147_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img148_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img149_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img150_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img151_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img152_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img153_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img154_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img155_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img156_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img157_75s.png" alt=""></button>
 
+                                <button><img src="../../../resources/img/img158_75s.png" alt=""></button>
 
+                            </div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="content" style="height: 549px; 
+                                    position: relative;
 
+                                    width: 973px; 
+                                    display: flex; 
+                                    justify-content: center; 
+                                    align-items: center;">
 
+                                <canvas ref="canvas" style="position: absolute;"></canvas>
 
+                            </div>
 
+                            <div class="btn-wrap flex justify-center mt40" style="gap: 40px;">
 
+                                <button class="login-btn" @click="openCameraModal">
 
+                                    <img src="../../../resources/img/btn07_s.png" alt="">
 
+                                    <p>재촬영</p>
 
+                                </button>
 
+
 
+                                <button class="login-btn" type="submit" @click="goToPage('PhotoEdit')">
 
+                                    <img src="../../../resources/img/btn07_s.png" alt="">
 
+                                    <p>완성</p>
 
+                                </button>
 
+                            </div>
 
+                        </div>
 
+                        <div class="content" style="padding: 30px; min-width: 401px; min-height: 710px;">
 
+                            <div class="mb20">
 
+                                <p class="popup-title" style="font-size: 32px">랜덤 단어</p>
 
+                            </div>
 
+                            <div class="flex-column" style="gap: 10px;">
 
+                                <button class="login-btn"><img src="../../../resources/img/img141_75s.png" alt="">
 
+                                    <p class="title">a</p>
 
+                                </button>
 
+                                <button class="login-btn"><img src="../../../resources/img/img152_75s_01.png" alt="">
 
+                                    <p class="title">a</p>
 
+                                </button>
 
+                                <button class="login-btn"><img src="../../../resources/img/img144_75s.png" alt="">
 
+                                    <p class="title" style="color: #fff;">a</p>
 
+                                </button>
 
+                                <button class="login-btn"><img src="../../../resources/img/img145_75s.png" alt="">
 
+                                    <p class="title mt20" style="color: #fff;">a</p>
 
+                                </button>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </article>
 
         </div>
 
     </div>
 
 </template>
@@ -146,6 +312,16 @@
 
                     isSecondImageVisible: false
 
                 },
 
             ],
 
+            items_photo: [
 
+                {
 
+                    imgSrc1: 'client/resources/img/btn20_75s_normal.png',   //펜 선택되지 않음
 
+                    imgSrc2: 'client/resources/img/btn20_75s_click.png' //펜 선택됨
 
+                },
 
+                {
 
+                    imgSrc1: 'client/resources/img/btn21_75s_normal.png',   //스티커 선택되지 않음
 
+                    imgSrc2: 'client/resources/img/btn21_75s_click.png'     //스티커 선택됨
 
+                },
 
+            ],
 
             mdiMagnify: mdiMagnify,
 
             mdiWindowClose: mdiWindowClose,
 
             mdiHeart: mdiHeart,
@@ -162,6 +338,24 @@
 
             canvasHeight: 0,
 
             selectedIndex: 0,   //툴 선택 여부 인덱스
 
             stickersVisible: false, // 스티커 표시 여부 
+
 
+            //사진 꾸미기 관련 변수
 
+            drawHistory: [],    //도형 기록
 
+            tempLines: [],  //펜 기록
 
+            stickers: [],   //스티커 파일 기록
 
+            draggingStickerIndex: null, //스티커 드래그
 
+            activeStickerIndex: null,  // 현재 활성화된 스티커의 인덱스
 
+            nextLineId: 0,  //획 아이디
 
+            tool: 'draw',   //툴 결정
 
+            color: '#000000',   //펜 기본 색상
 
+            isDrawing: false,   //그리는 중인지 판단하는 변수
 
+            brushSize: 5,  // 초기 펜 굵기
 
+            startX: 0,
 
+            startY: 0,
 
+            canvasRect: {
 
+                topLeft: { x: 0, y: 0 },
 
+                bottomRight: { x: 0, y: 0 }
 
+            },
 
 
 
             roadViewTF: false,
@@ -241,6 +435,7 @@
 
                 console.error("Error updating schedule:", error);
 
             });
 
         },
 
+
 
         fetchRoadmapData() {
 
             axios({
 
                 url: "/unitLearning/find.json",
@@ -261,8 +456,75 @@
 
                 console.error("Error fetching roadmap data:", error);
 
             });
 
         },
 
+        toggleImage(index) {
 
+            this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
 
+        },
 
+        toggleImageAndShowPopup(index, dataNum) {
 
+            this.toggleImage(index);
 
+            if (dataNum === '11') {
 
+                this.searchOpen2 = true;
 
+            }
 
+        },
 
+        ShowPopup() {
 
+            this.searchOpen2 = true;  // 촬영 여부 묻는 모달창 열기
 
+        },
 
+        updateContent(index) {
 
+            this.selectedIndex = index;
 
+
 
+            // 선택된 버튼이 스티커 버튼(인덱스 1)인지 확인
 
+            if (index === 1) {
 
+                this.stickersVisible = true;  // 스티커 툴 보이기
 
+            } else {
 
+                this.stickersVisible = false; // 스티커 툴 숨기기
 
+            }
 
+        },
 
         goToPage(page) {
 
             this.$router.push({ name: page });
 
+        },
 
+        openCameraModal() {
 
+            this.closeModal();
 
+            this.closePhotoModal();
 
+
 
+            this.drawHistory = [];
 
+            this.stickers = [];
 
+            this.tempLines = [];
 
+            this.videoReady = false; // 비디오 준비 상태 초기화
 
+
 
+            this.showCameraModal = true;
 
+            navigator.mediaDevices.getUserMedia({ video: true })
 
+                .then(stream => {
 
+                    const modalVideo = this.$refs.modalVideoElement;
 
+                    modalVideo.srcObject = stream;
 
+                    this.stream = stream;
 
+                    modalVideo.addEventListener('loadedmetadata', this.adjustContainerSize);
 
+                })
 
+                .catch(error => {
 
+                    console.log("error>>>>>>>>", error);
 
+                });
 
+        },
 
+        closeModal() {  //웹캠 및 모든 팝업 닫기
 
+            // this.showModal = false;
 
+            this.searchOpen = false;
 
+            this.searchOpen2 = false;
 
+            this.showCameraModal = false;
 
+            this.photoTaken = false;
 
+            this.photo = null;
 
+            this.showPhotoModal = false;
 
+
 
+            //스트림 종료
 
+            if (this.stream) {
 
+                let tracks = this.stream.getTracks();
 
+                tracks.forEach(track => track.stop());
 
+                this.stream = null;
 
+            }
 
+        },
 
+        closePhotoModal() { //사진꾸미기 팝업 닫기
 
+            this.showPhotoModal = false;
 
+            this.closeModal();
 
+        },
 
+        onVideoLoaded() {
 
+            this.videoReady = true;
 
+            this.adjustContainerSize();
 
         },
 
         adjustContainerSize() {
 
             const video = this.$refs.modalVideoElement;
@@ -283,6 +545,296 @@
 
         closeBtn() {
 
             this.searchOpen = false;
 
         },
 
+        capturePhoto() {
 
+            // 사진 촬영 기능 구현
 
+            console.log("cam on");
 
+
 
+            if (!this.videoReady) return; // 비디오가 준비되지 않았으면 사진을 찍지 않음
 
+
 
+            const video = this.$refs.modalVideoElement;
 
+            const canvas = document.createElement('canvas');
 
+
 
+            canvas.width = video.videoWidth;
 
+            canvas.height = video.videoHeight;
 
+            this.canvasWidth = video.videoWidth;
 
+            this.canvasHeight = video.videoHeight;
 
+            const context = canvas.getContext('2d');
 
+            context.translate(canvas.width, 0);
 
+            context.scale(-1, 1);
 
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
+            this.photo = canvas.toDataURL('image/png');
 
+            this.photoTaken = true;
 
+            this.showPhotoModal = true;
 
+            console.log("PhotoModal open");
 
+            this.$nextTick(() => {
 
+                console.log("canvas setup");
 
+                // console.log("Photo data>>>>", this.photo);
 
+                this.setupCanvas();
 
+            });
 
+
 
+        },
 
+        setupCanvas() {
 
+            const canvas = this.$refs.canvas;
 
+            // const container = this.$refs.container;
 
+            if (!canvas) {
 
+                console.error("Canvas reference not found");
 
+                resolve();
 
+                return;
 
+            }
 
+            const context = canvas.getContext('2d');
 
+            if (!context) {
 
+                console.error("Canvas context not found");
 
+                return;
 
+            }
 
+            const image = new Image();
 
+            image.src = this.photo;
 
+            // console.log("Photo data>>>>", image.src);
 
+            image.onload = () => {
 
+                console.log("Image loaded successfully");
 
+                // this.canvasWidth = image.width;
 
+                // this.canvasHeight = image.height;
 
+                //이미지 크기가 캔버스와 안맞으면 이미지 불러오는데에 에러 남
 
+                // container.style.width = this.canvasWidth;
 
+                // container.style.height = this.canvasHeight;
 
+
 
+                canvas.width = this.canvasWidth;
 
+                canvas.height = this.canvasHeight;
 
+
 
+                const rect = canvas.getBoundingClientRect();
 
+                // 좌측 상단 좌표
 
+                const topLeft = {
 
+                    x: rect.left,
 
+                    y: rect.top
 
+                };
 
+
 
+                // 우측 하단 좌표
 
+                const bottomRight = {
 
+                    x: rect.right,
 
+                    y: rect.bottom
 
+                };
 
+
 
+                // 캔버스 크기 초기화
 
+                this.updateCanvasRect();
 
+
 
+                // 윈도우 리사이즈 이벤트 리스너 추가
 
+                window.addEventListener('resize', this.updateCanvasRect);
 
+
 
+                // 클릭 이벤트 핸들러 추가
 
+                this.$refs.canvas.addEventListener('click', this.handleCanvasClick);
 
+
 
+
 
+                // canvas.width = canvas.clientWidth;
 
+                // canvas.height = canvas.clientHeight;
 
+                // this.canvasWidth = canvas.clientWidth;
 
+                // this.canvasHeight = canvas.clientHeight;
 
+
 
+                context.clearRect(0, 0, canvas.width, canvas.height);  // 이전 이미지 있으면 초기화
 
+                context.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight);
 
+                this.addCanvasEventListeners(); //추가해야함
 
+            };
 
+            image.onerror = (error) => {
 
+                console.error("Error loading image: ", error);
 
+            };
 
+        },
 
+
 
+        addCanvasEventListeners() {
 
+            const canvas = this.$refs.canvas;
 
+            canvas.addEventListener('mousedown', this.onMouseDown);
 
+            canvas.addEventListener('mouseup', this.onMouseUp);
 
+            canvas.addEventListener('mousemove', this.onMouseMove);
 
+            canvas.addEventListener('click', this.onCanvasClick);
 
+        },
 
+        setTool(tool) {
 
+            this.tool = tool;
 
+        },
 
+        updateBrushSize() {
 
+            // 펜 굵기 변경 로직
 
+            if (this.tool === 'draw') {
 
+                this.setBrushSize(this.brushSize);
 
+            }
 
+        },
 
+        setBrushSize(size) {
 
+            this.brushSize = size;
 
+            const context = this.$refs.canvas.getContext('2d');
 
+            context.lineWidth = size;
 
+        },
 
+        // 캔버스 크기 갱신 함수
 
+        updateCanvasRect() {
 
+            const rect = this.$refs.canvas.getBoundingClientRect();
 
+            this.canvasRect = {
 
+                topLeft: { x: rect.left, y: rect.top },
 
+                bottomRight: { x: rect.right, y: rect.bottom }
 
+            };
 
+            console.log(">>>>>>>>>2222", rect.left);
 
+        },
 
+        getCanvasPosition(event) {
 
+
 
+            const rect = this.canvasRect;
 
+            console.log(">>>>>>>>>", this.canvasRect);
 
+            this.updateCanvasRect();
 
+
 
+            // 윈도우 리사이즈 이벤트 리스너 추가
 
+            window.addEventListener('resize', this.updateCanvasRect);
 
+
 
+            // 클릭 이벤트 핸들러 추가
 
+            this.$refs.canvas.addEventListener('click', this.handleCanvasClick);
 
+
 
+            // // 좌측 상단 좌표
 
+            // const topLeft = {
 
+            //     x: rect.left,
 
+            //     y: rect.top
 
+            // };
 
+
 
+            // // 우측 하단 좌표
 
+            // const bottomRight = {
 
+            //     x: rect.right,
 
+            //     y: rect.bottom
 
+            // };
 
+
 
+            // console.log(this.scrollLeft)
 
+
 
+            const x = event.clientX - rect.topLeft.x
 
+            const y = event.clientY - rect.topLeft.y
 
+
 
+
 
+            console.log(`클릭한 좌표: x=${event.clientX}, y=${event.clientY}`);
 
+            console.log(`계산베이스 좌표: x=${rect.topLeft.x}, y=${rect.topLeft.y}`);
 
+            console.log(`계산베이스 좌표: x=${rect.topLeft.x}, y=${rect.topLeft.y}`);
 
+            console.log(`계산된 좌표: x=${x}, y=${y}`);
 
+            return {
 
+                x, y
 
+            };
 
+        },
 
+        onMouseDown(event) {
 
+
 
+            // 캔버스 크기 초기화
 
+            this.updateCanvasRect();
 
+
 
+            // 윈도우 리사이즈 이벤트 리스너 추가
 
+            window.addEventListener('resize', this.updateCanvasRect);
 
+
 
+            // 클릭 이벤트 핸들러 추가
 
+            this.$refs.canvas.addEventListener('click', this.handleCanvasClick);
 
+
 
+            const { x, y } = this.getCanvasPosition(event);
 
+            this.startX = x;
 
+            this.startY = y;
 
+            const context = this.$refs.canvas.getContext('2d');
 
+            context.strokeStyle = this.color;
 
+            context.lineWidth = this.brushSize;  // 브러시 크기 설정
 
+            if (this.tool === 'draw') {
 
+                context.beginPath();
 
+                context.moveTo(this.startX, this.startY);
 
+                this.nextLineId++;
 
+            }
 
+            this.isDrawing = true;
 
+        },
 
+        onMouseUp(event) {
 
+            if (!this.isDrawing) return;
 
+            const { x, y } = this.getCanvasPosition(event);
 
+            const context = this.$refs.canvas.getContext('2d');
 
+            context.strokeStyle = this.color;
 
+            context.lineWidth = this.brushSize;  // 브러시 크기 설정
 
+            if (this.tool === 'rectangle') {
 
+                context.strokeRect(this.startX, this.startY, x - this.startX, y - this.startY);
 
+                this.drawHistory.push({ type: 'rectangle', startX: this.startX, startY: this.startY, endX: x, endY: y, color: this.color });
 
+            } else if (this.tool === 'circle') {
 
+                context.beginPath();
 
+                const radius = Math.sqrt(Math.pow((x - this.startX), 2) + Math.pow((y - this.startY), 2));
 
+                context.arc(this.startX, this.startY, radius, 0, 2 * Math.PI);
 
+                context.stroke();
 
+                this.drawHistory.push({ type: 'circle', startX: this.startX, startY: this.startY, radius, color: this.color });
 
+            } else if (this.tool === 'draw') {
 
+                context.lineTo(x, y);
 
+                context.stroke();
 
+                this.tempLines.push({ id: this.nextLineId, startX: this.startX, startY: this.startY, endX: x, endY: y, color: this.color });
 
+            }
 
+            this.isDrawing = false;
 
+        },
 
+        onMouseMove(event) {
 
+            if (!this.isDrawing || this.tool !== 'draw') return;
 
+            const { x, y } = this.getCanvasPosition(event);
 
+            const context = this.$refs.canvas.getContext('2d');
 
+            context.strokeStyle = this.color;
 
+            context.lineWidth = this.brushSize;  // 브러시 크기 설정
 
+            context.lineTo(x, y);
 
+            context.stroke();
 
+            this.tempLines.push({ id: this.nextLineId, startX: this.startX, startY: this.startY, endX: x, endY: y, color: this.color });
 
+            this.startX = x;
 
+            this.startY = y;
 
+        },
 
+        onCanvasClick(event) {
 
+            if (this.tool === 'eraser') {
 
+                const { x, y } = this.getCanvasPosition(event);
 
+                this.eraseDrawing(x, y);
 
+            }
 
+        },
 
+        eraseDrawing(x, y) {
 
+            const eraserRadius = 10;
 
+            this.drawHistory = this.drawHistory.filter(item => {
 
+                if (item.type === 'rectangle') {
 
+                    return !(x >= item.startX && x <= item.endX && y >= item.startY && y <= item.endY);
 
+                } else if (item.type === 'circle') {
 
+                    const distance = Math.sqrt(Math.pow((x - item.startX), 2) + Math.pow((y - item.startY), 2));
 
+                    return !(distance <= item.radius);
 
+                }
 
+            });
 
+            const linesToDelete = this.tempLines.filter(line => {
 
+                const distanceToLine = this.distanceToLineSegment(line.startX, line.startY, line.endX, line.endY, x, y);
 
+                return distanceToLine <= 10;
 
+            }).map(line => line.id);
 
+            this.tempLines = this.tempLines.filter(line => !linesToDelete.includes(line.id));
 
+            this.redraw();
 
+        },
 
+        distanceToLineSegment(x1, y1, x2, y2, px, py) {
 
+            const lengthSquared = Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2);
 
+            if (lengthSquared === 0) return Math.sqrt(Math.pow(px - x1, 2) + Math.pow(py - y1, 2));
 
+            const t = Math.max(0, Math.min(1, ((px - x1) * (x2 - x1) + (py - y1) * (y2 - y1)) / lengthSquared));
 
+            const projX = x1 + t * (x2 - x1);
 
+            const projY = y1 + t * (y2 - y1);
 
+            return Math.sqrt(Math.pow(px - projX, 2) + Math.pow(py - projY, 2));
 
+        },
 
+        clearAll() {
 
+            this.drawHistory = [];
 
+            this.stickers = [];
 
+            this.tempLines = [];
 
+            this.redraw();
 
+        },
 
+        redraw() {
 
+            const canvas = this.$refs.canvas;
 
+            const context = canvas.getContext('2d');
 
+            const image = new Image();
 
+            image.src = this.photo;
 
+            image.onload = () => {
 
+                context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
 
+                context.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight);
 
+                this.drawHistory.forEach(item => {
 
+                    context.strokeStyle = item.color;
 
+                    if (item.type === 'draw') {
 
+                        context.beginPath();
 
+                        context.moveTo(item.startX, item.startY);
 
+                        context.lineTo(item.endX, item.endY);
 
+                        context.stroke();
 
+                    } else if (item.type === 'rectangle') {
 
+                        context.strokeRect(item.startX, item.startY, item.endX - item.startX, item.endY - item.startY);
 
+                    } else if (item.type === 'circle') {
 
+                        context.beginPath();
 
+                        context.arc(item.startX, item.startY, item.radius, 0, 2 * Math.PI);
 
+                        context.stroke();
 
+                    }
 
+                });
 
+                this.tempLines.forEach(line => {
 
+                    context.strokeStyle = line.color;
 
+                    context.beginPath();
 
+                    context.moveTo(line.startX, line.startY);
 
+                    context.lineTo(line.endX, line.endY);
 
+                    context.stroke();
 
+                });
 
+                this.stickers.forEach((sticker, index) => {
 
+                    context.drawImage(sticker.img, sticker.x, sticker.y, sticker.width, sticker.height);
 
+                });
 
+            };
 
+        },
 
         getNonNullColumn(item) {
 
             if (item.prblm_id !== null) return '문제';
 
             if (item.wd_book_id !== null) return '단어장';
8b1fdf8
200c884
client/views/pages/main/MyPlan2.vue
--- client/views/pages/main/MyPlan2.vue
+++ client/views/pages/main/MyPlan2.vue
@@ -24,11 +24,11 @@
 
                             <td><input type="checkbox" class="ui-checkbox mr10" v-model="book.isSelected"></td>
 
                             <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
 
                             <td class="text-lf">
 
-                                <p class="title1">{{ book.book_nm }}</p>
 
-                                <p class="title2">grade 3</p>
 
+                                <p class="title1">{{ book.bookName }}</p>
 
+                                <p class="title2">{{ book.unitName }}</p>
 
                             </td>
 
                             <td> <button type="button" title="확인" class="new-btn"
 
-                                    @click="buttonSearch(book.book_nm, book.book_id)">
 
+                                    @click="buttonSearch(book.bookName, book.bookId, book.unitId)">
 
                                     시간입력
 
                                 </button></td>
 
                         </tr>
@@ -54,7 +54,7 @@
 
                                         <p class="title1">{{ book.scheduleTime }}</p>
 
                                     </div>
 
                                     <div class="title-box  mb10"> <span class="title">{{ book.bookNm }}</span></div>
 
-                                    <p class="title2">wirte a</p>
 
+                                    <p class="title2">{{ book.unitNm }}</p>
 
                                 </div>
 
                                 <div class=""> <img src="../../../resources/img/img214_19s.png" alt=""></div>
 
                             </div>
@@ -159,9 +159,10 @@
 
         closeModal() {
 
             this.showModal = false;
 
         },
 
-        buttonSearch(book_nm, book_id) {
 
+        buttonSearch(book_nm, book_id, unit_id) {
 
             this.nowID = book_id
 
             this.nowName = book_nm
 
+            this.nowunitID = unit_id
 
             this.searchOpen = true;
 
         },
 
         closeBtn() {
@@ -173,14 +174,15 @@
 
                 alert('교재를 선택해 주세요.');
 
             } else {
 
                 if (this.checkedItems.length === 1) {
 
-                    if (this.unitList.find(item => item === this.checkedItems[0])) {
 
+                    if (this.unitList.find(item => item === this.checkedItems[0].value)) {
 
                         alert('이미 지정된 시간입니다.');
 
                     } else {
 
                         this.addToNewDataArray(this.checkedItems[0]);
 
                         this.searchOpen = false;
 
                         this.nowID = ""
 
+                        this.nowunitID = ""
 
                         this.nowName = ""
 
-                        this.unitList.push(this.checkedItems[0])
 
+                        this.unitList.push(this.checkedItems[0].value)
 
                         this.checkedItems = []
 
                     }
 
                 } else if (this.checkedItems.length > 1) {
@@ -199,17 +201,18 @@
 
                 scheduleTime: selectedTime.time,
 
                 scheduleUnit: selectedTime.value,
 
                 bookId: this.nowID,
 
+                unitId: this.nowunitID,
 
                 stdId: "2"
 
             };
 
             this.newDataArray.push(newEntry);
 
         },
 
         async insertSchedule() {
 
-
 
             this.newDataArray = this.DataArray.map(item => ({
 
                 scheduleUnit: item.scheduleUnit,
 
                 bookId: item.bookId,
 
+                unitId: item.unitId,
 
                 stdId: item.stdId
 
-            }));
 
+            })); 
             try {
 
                 for (let data of this.newDataArray) {
 
                     await axios.post('/schedule/insertSchedule.json', data);
@@ -225,26 +228,7 @@
 
                 return a.scheduleUnit - b.scheduleUnit;
 
             });
 
 
-            this.DataArray = sortedArray;
 
-        },
 
-        fetchBooks() {
 
-            axios({
 
-                url: "/book/findAll.json",
 
-                method: "post",
 
-                headers: {
 
-                    "Content-Type": "application/json; charset=UTF-8",
 
-                },
 
-            })
 
-                .then(response => {
 
-                    this.books = response.data.map(book => ({
 
-                        ...book,
 
-                        isSelected: false
 
-                    }));
 
-                })
 
-                .catch(error => {
 
-                    console.error("fetchBooks - error: ", error);
 
-                    alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
 
-                });
 
+            this.DataArray = sortedArray; 
         },
 
         searchBook() {
 
             this.books = ""
@@ -263,6 +247,38 @@
 
                     console.error("fetchUnits - error:", error);
 
                     alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
 
                 });
 
+        },
 
+        fetchUnits() {
 
+            axios.post("unit/findAll.json", {
 
+                headers: {
 
+                    "Content-Type": "application/json; charset=UTF-8",
 
+                }
 
+            })
 
+                .then(response => {
 
+                    this.books = response.data.map(book => ({
 
+                        ...book,
 
+                        isSelected: false
 
+                    }));
 
+                    this.searchUnit()
 
+                })
 
+                .catch(error => {
 
+                    console.error("fetchBooks - error: ", error);
 
+                    alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
 
+                });
 
+        }, searchUnit() {
 
+            axios.post("schedule/selectSchedule.json", {stdId:"2"}, {
 
+                headers: {
 
+                    "Content-Type": "application/json; charset=UTF-8",
 
+                }
 
+            })
 
+                .then(response => { 
+                    const units = response.data.map(item => item.schdl_unit); 
+                    this.unitList.push(...units); 
+                })
 
+                .catch(error => {
 
+                    console.error("searchUnit - error: ", error);
 
+                    alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
 
+                });
 
         }
 
     },
 
     watch: {
@@ -276,7 +292,7 @@
 
     },
 
     mounted() {
 
         console.log('Main2 mounted');
 
-        this.fetchBooks();
 
+        this.fetchUnits();
 
     }
 
 }
 
 </script>
8b1fdf8
200c884
client/views/pages/main/PreviewNote.vue
--- client/views/pages/main/PreviewNote.vue
+++ client/views/pages/main/PreviewNote.vue
@@ -6,20 +6,14 @@
 
                     <p class="title">단원</p>

                     <div class="row-bd"></div>

                     <div>

-                        <p class="title mr40 mb10">1. Hello WORLD</p>

+                        <p class="title mr40 mb10">{{ unitData.unit_nm }}</p>

                         <p class="subtitle">my name is dd</p>

                     </div>

                 </div>

-                <!-- <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">

-                            바로가기

-                        </button> -->

             </div>

         </div>

         <div class="title-box flex justify-between mb20 mt30">

             <p class="title">오답노트</p>

-            <!-- <select name="" id="">

-                <option value="">A반</option>

-            </select> -->

         </div>

         <div class="wrap" style="border-radius: 0;">
@@ -30,27 +24,17 @@
 
                         <col style="width: 70%;">

                         <col style="width: 15%;">

                     </colgroup>

-                    <tr>

-

+                    <tr v-for="note in wrongAnswerNotes" :key="note.prblmLogId">

                         <td><img src="../../../resources/img/img214_19s.png" alt=""></td>

                         <td class="text-lf">

-                            <p class="title1">중간평가</p>

-                            <p class="title2">wirte a</p>

+                            <p class="title1">{{ note.evalType }}</p>

+                            <p class="title2">{{ note.prblmExpln }}</p>

                         </td>

-                        <td> <button type="button" title="" class="new-btn" @click="buttonSearch">

+                        <td>

+                            <button type="button" title="" class="new-btn" @click="viewDetail(note.prblmId)">

                                 View Detail

-                            </button></td>

-                    </tr>

-                    <tr>

-

-                        <td><img src="../../../resources/img/img214_19s.png" alt=""></td>

-                        <td class="text-lf">

-                            <p class="title1">중간평가</p>

-                            <p class="title2">wirte a</p>

+                            </button>

                         </td>

-                        <td> <button type="button" title="" class="new-btn" @click="buttonSearch">

-                                View Detail

-                            </button></td>

                     </tr>

                 </table>

                 <div class="flex justify-end">
@@ -64,57 +48,55 @@
 
 </template>

 

 <script>

+import axios from 'axios';

+

 export default {

     data() {

         return {

-            timer: '00',

-            showButton1: false,

-            showButton2: false,

-            showButton3: false,

-            showButton4: false,

+            currentStdId: "1", // 임시 학생 아이디

+            currentUnitId: "1", // 임시 유닛 아이디

+            wrongAnswerNotes: [], // 오답 노트 목록 데이터

+            unitData: {},

         }

     },

     methods: {

-        goToPage(page) {

-            this.$router.push({ name: page });

+

+        // 오답노트 상세 보기 버튼 클릭

+        viewDetail(prblmId) {

+            // 상세 보기 페이지로 이동하는 로직을 추가 할 예정

+            console.log('링크될 문제 ID:', prblmId);

         },

-        handleDrag(dragNumber) {

-            // Drag 버튼 숨기기

-            // 여기서는 상태 관리를 통해 버튼을 제어합니다.

-            if (dragNumber === 1) {

-                this.showButton1 = false;

-            } else if (dragNumber === 2) {

-                this.showButton2 = false;

-            } else if (dragNumber === 3) {

-                this.showButton3 = false;

-            }

-        },

-        showButton(dropNumber) {

-            // Drop 영역의 이미지 클릭 이벤트 핸들러 설정

-            // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.

-            if (dropNumber === 1) {

-                this.showButton1 = true;

-            } else if (dropNumber === 2) {

-                this.showButton2 = true;

-            } else if (dropNumber === 3) {

-                this.showButton3 = true;

-            } else if (dropNumber === 4) {

-                this.showButton4 = true;

-            }

-        },

-        startTimer() {

-            if (this.intervalId) {

-                clearInterval(this.intervalId);

-            }

-            this.timer = 5;

-            this.intervalId = setInterval(() => {

-                if (this.timer > 0) {

-                    this.timer--;

-                } else {

-                    clearInterval(this.intervalId);

+

+        fetchUnitDetail() {

+            axios.post('/unit/unitDetail.json', {

+                unitId: this.currentUnitId

+            })

+            .then(response => {

+                console.log(response.data[0]);

+                if (response.data.length > 0) {

+                    this.unitData = response.data[0];

                 }

-            }, 1000);

+            })

+            .catch(error => {

+                console.error('단원 정보를 불러오는 중 오류 발생:', error);

+            })

+        },

+

+        // 오답노트 목록을 가져오는 API 호출

+        fetchWrongAnswerNotes() {

+            axios.post('/problemLog/getPreviewNoteList.json', {

+                stdId: this.currentStdId,

+                unitId: this.currentUnitId

+            })

+            .then(response => {

+                console.log(response.data);

+                this.wrongAnswerNotes = response.data;

+            })

+            .catch(error => {

+                console.error('오답노트를 불러오는 중 오류 발생:', error);

+            });

         }

+

     },

     watch: {
@@ -125,7 +107,9 @@
 
     components: {

     },

     mounted() {

-

+        console.log('PreviewNote mounted');

+        this.fetchUnitDetail();

+        this.fetchWrongAnswerNotes();

     }

 }

 </script>
Add a comment
List