Commit @65ab45c3d88fbe803fd46be6d4fa3924d80fbc96

구자현 08-12

240812 반 교재 CRUD(이후 수정 필요)

@65ab45c3d88fbe803fd46be6d4fa3924d80fbc96

9c51750

65ab45c

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


     color: #999999;
 }
 
+.black {
+    color: #000000;
+}
+
 .cursor {
     cursor: pointer;
 }

9c51750

65ab45c

client/resources/css/reset.css

--- client/resources/css/reset.css

+++ client/resources/css/reset.css


     box-sizing: border-box;
 }
 
-
+html, body, #root, #app{height: 100%;}
 html,
 body,
 #root {

9c51750

65ab45c

client/resources/css/style.css

--- client/resources/css/style.css

+++ client/resources/css/style.css


   width: max-content; 
     position: absolute;
     right: 45px;
-    z-index: -1;
+    z-index: 10000;
 }
 .myphoto .class{border-radius: 0px; padding: 10px;}
 .myphoto .class .box {

9c51750

65ab45c

client/views/pages/main/Camera.vue

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

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


             <svg-icon type="mdi" :path="mdilChevronLeft" style="width: 50px; height: 50px;"></svg-icon>
             <p class="title"> 이전글</p>
          </button>
-         <button @click="goToPage('PhotoDesign')" ><img src="../../../resources/img/btn19_74s_normal.png" alt="">
+         <button @click="captureAndGoToPhotoDesign">
+            <img src="../../../resources/img/btn19_74s_normal.png" alt="">
          </button>
       </div>
-      <div class="body ">
-<img src="../../../resources/img/img140_747s.png" alt="">
+      <div class="body" ref="body">
+         <div id="container" ref="container">
+            <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
+               @canplay="onVideoLoaded"></video>
+         </div>
       </div>
    </div>
 </template>
+
 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiMagnify, mdiWindowClose } from '@mdi/js';
 import { mdilChevronRight, mdilChevronLeft } from '@mdi/light-js';
-
 import axios from "axios";
 
 export default {

          mdilChevronLeft: mdilChevronLeft,
          showModal: false,
          searchOpen: false,
+         photoTaken: false,
+         stream: null,
+         videoReady: false,
       }
    },
    methods: {
-      
       goToPage(page) {
          this.$router.push({ name: page });
       },
       closeModal() {
          this.showModal = false;
+         if (this.stream) {
+            let tracks = this.stream.getTracks();
+            tracks.forEach(track => track.stop());
+            this.stream = null;
+         }
       },
       buttonSearch() {
          this.searchOpen = true;
       },
       closeBtn() {
          this.searchOpen = false;
-
       },
+      onVideoLoaded() {
+         this.videoReady = true;
+         this.adjustContainerSize();
+      },
+      adjustContainerSize() {
+         const video = this.$refs.modalVideoElement;
+         const container = this.$refs.container;
+         const body = this.$refs.body;
+         if (video && container) {
+            container.style.width = `${video.videoWidth}px`;
+            container.style.height = `${video.videoHeight}px`;
+            body.style.height = `${video.videoHeight}px`;
+         }
+      },
+      captureAndGoToPhotoDesign() {
+         const video = this.$refs.modalVideoElement;
+         const canvas = document.createElement('canvas');
+         canvas.width = video.videoWidth;
+         canvas.height = video.videoHeight;
+         const ctx = canvas.getContext('2d');
+
+         // 좌우 반전 적용
+         ctx.translate(canvas.width, 0);
+         ctx.scale(-1, 1);
+
+         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+         const imageDataUrl = canvas.toDataURL('image/png');
+         this.$router.push({ name: 'PhotoDesign', query: { image: imageDataUrl } });
+      }
+   },
+   mounted() {
+      // Clear localStorage when the component is mounted
+      localStorage.removeItem('capturedImage');
+      
+      this.videoReady = false;
+      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);
+         });
    },
    components: {
       SvgIcon
    },
 }
 </script>
+
+
+<style>
+.body {
+   width: 1435px;
+   height: auto;
+   margin: 0 auto;
+}
+
+#container {
+   position: relative;
+   margin: auto;
+   border: 10px #333 solid;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+
+video {
+   width: 100%;
+   height: auto;
+   background-color: #666;
+}
+
+.mirrored {
+   transform: scaleX(-1);
+}
+</style>

9c51750

65ab45c

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

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

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


 <template>
-    <div id="Chapter1_1" class="content-wrap">
+  <div id="Chapter1_1" class="content-wrap">
       <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>
+          <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')"><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="flex justify-center ">
-          <div class="readGroup">
-             <section >
-                 <div class="imgGroup flex justify-center">
-                    <div class="mic-btn">
-                       <img src="../../../../resources/img/btn11_s.png" alt="">
-                    </div>
-    
-                 </div>
-                <article >
-                  <input type="text" class="speak mb25" placeholder="오늘 배운 단어를 말해보세요!">
-                  <p class="read-ai"><img style="margin-top: -5px;" src="../../../../resources/img/img43_s.png" alt=""></p>
-                </article>
-                
-              </section>
-  
+          <div class="pre-btn" @click="goToPage('Chapter2')">
+              <img src="../../../../resources/img/left.png" alt="" />
           </div>
-        </div>
-        </div>
-        <div class="next-btn" @click="goToPage('Chapter2_2')"><img src="../../../../resources/img/right.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>
+                  <img src="http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png" data-num="1" />
+                  <p> {{ word }} </p>
+                  <p> {{ mean }} </p>
+                </div>
+              <div class="flex justify-center">
+                  <div class="readGroup">
+                      <section>
+                          <div class="imgGroup flex justify-center">
+                              <!-- 녹음 버튼 -->
+                              <div :class="['mic-btn', { notRecording: !isRecording }]" @click="toggleRecording">
+                                  <img src="../../../../resources/img/btn11_s.png" alt="" />
+                              </div>
+                          </div>
+                          <article>
+                              <p class="speakText mb25">
+                                  <span v-if="transcription === null"
+                                      >위의 버튼을 누른 후 오늘 배운 단어를 말해보세요!</span
+                                  >
+                                  <span v-else-if="!transcription || transcription.trim() === ''"
+                                      >다시 말해보세요!</span
+                                  >
+                                  <span v-else>{{ transcription }}</span>
+                              </p>
+                              <p class="read-ai">
+                                  <img style="margin-top: -5px" src="../../../../resources/img/img43_s.png" alt="" />
+                              </p>
+                          </article>
+                      </section>
+                  </div>
+              </div>
+          </div>
+          <div class="next-btn" @click="goToPage('Chapter2_2')">
+              <img src="../../../../resources/img/right.png" alt="" />
+          </div>
       </div>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    data() {
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiStop } from '@mdi/js';
+export default {
+  data() {
       return {
-      }
-    },
-    methods: {
+          isRecording: false, // 녹음 중 여부
+          mediaRecorder: null,
+          audioChunks: [], // 녹음된 오디오 데이터
+          audioBlob: null, // 오디오 Blob 객체
+          transcription: null, // 서버에서 받아온 텍스트 결과
+          stream: null, // MediaStream 객체
+
+          path: mdiStop,
+
+          /* audioURL : null // 오디오 URL 객체 */
+
+          word : "apple",
+          mean : "사과",
+          imageSrc : "http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png"
+      };
+  },
+  methods: {
       goToPage(page) {
-        this.$router.push({ name: page });
-      }
-    },
-    watch: {
-  
-    },
-    computed: {
-  
-    },
-    components: {
-    },
-    mounted() {
-      
-    }
-  }
-  </script>
+          this.$router.push({ name: page });
+      },
+      // 녹음 시작/중지 토글
+      async toggleRecording() {
+          if (this.isRecording) {
+              console.log('녹음 그만!');
+              this.stopRecording(); // 녹음 중이면 중지
+          } else {
+              console.log('녹음 시작!');
+              await this.startRecording(); // 녹음 중이 아니면 녹음 시작
+          }
+      },
+
+      // 녹음 시작
+      async startRecording() {
+          this.audioChunks = []; // 오디오 초기화
+          this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+          this.mediaRecorder = new MediaRecorder(this.stream);
+          this.mediaRecorder.ondataavailable = (event) => {
+              this.audioChunks.push(event.data); // 녹음 데이터 저장
+          };
+          this.mediaRecorder.onstop = () => {
+              this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
+
+              /******************************/
+              // this.audioURL = URL.createObjectURL(this.audioBlob); // 오디오 URL 생성
+              // console.log('Audio URL:', this.audioURL);
+              /******************************/
+
+              console.log('Recorded Audio Blob:', this.audioBlob); // 콘솔에 Blob 확인
+              this.sendAudioToServer(); // 서버로 오디오 전송
+          };
+          this.mediaRecorder.start(); // 녹음 시작
+          this.isRecording = true; // 녹음 상태 변경
+      },
+
+      // 녹음 중지
+      stopRecording() {
+          this.mediaRecorder.stop(); // 녹음 중단
+
+          if (this.stream) {
+              this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지
+          }
+
+          this.isRecording = false; // 녹음 상태 변경
+      },
+
+      // 오디오 전송
+      async sendAudioToServer() {
+          const formData = new FormData();
+          formData.append('file', this.audioBlob, 'recording.wav');
+          try {
+              const resposne = await axios.post('/api/speechToText.json', formData, {
+                  headers: {
+                      'Content-Type': 'multipart/form-data',
+                  },
+              });
+              this.transcription = resposne.data;
+              console.log(`받은 데이터 : ${this.transcription}`);
+          } catch (error) {
+              console.log('파일 전송 실패 : ', error);
+          }
+      },
+  },
+  watch: {},
+  computed: {},
+  components: {
+      SvgIcon,
+  },
+  mounted() {},
+};
+</script>
+<style scoped>
+.mic-btn {
+  cursor: pointer;
+}
+.mic-btn.notRecording {
+  background-image: none;
+  cursor: pointer;
+}
+.speakText {
+  background-color: #fff8e9;
+  border: 0;
+}
+.speakText span {
+  font-size: 28px;
+}
+</style>

9c51750

65ab45c

client/views/pages/main/Dashboard.vue

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

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


                 <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
                 <div class="rcon flex justify-end mb5">
                     <div class="race-btn" @click="goToPage('Chapter1')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">
-                    <img :src="item.imgSrc1" >
-                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                 </button>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+                            data-num="1">
+                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        </button>
                         <p>지문1</p>
                     </div>
                     <div class="race-btn" @click="goToPage('Chapter2')">
-                        <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>
+                        <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>단어장</p>
                     </div>
                 </div>
                 <div class="lcon flex justify-between mb5">
                     <div class="race-btn" @click="goToPage('Chapter7')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="7">
-                    <img :src="item.imgSrc1" >
-                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                 </button>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+                            data-num="7">
+                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        </button>
                         <p>문제1</p>
                     </div>
                     <div class="race-btn" @click="goToPage('Chapter6')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="6">
-                    <img :src="item.imgSrc1" >
-                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                 </button>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+                            data-num="6">
+                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        </button>
                         <p>단어장</p>
                     </div>
                     <div class="race-btn" @click="goToPage('Chapter5')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="5">
-                    <img :src="item.imgSrc1" >
-                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                 </button>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+                            data-num="5">
+                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        </button>
                         <p>지문2</p>
                     </div>
                     <div class="race-btn" @click="goToPage('Chapter4')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="4">
-                    <img :src="item.imgSrc1" >
-                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                 </button>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+                            data-num="4">
+                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        </button>
                         <p>문제2</p>
                     </div>
                     <div class="race-btn" @click="goToPage('Chapter3')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="3">
-                    <img :src="item.imgSrc1" >
-                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                 </button>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+                            data-num="3">
+                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        </button>
                         <p>문제1</p>
                     </div>
                 </div>
                 <div class="rcon flex">
                     <div class="race-btn" @click="goToPage('Chapter8')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="8">
-                    <img :src="item.imgSrc3" >
-                    <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                 </button>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+                            data-num="8">
+                            <img :src="item.imgSrc3">
+                            <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        </button>
                         <p class="long">중간 평가</p>
                     </div>
                     <div class="race-btn" @click="goToPage('Chapter9')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="9">
-                    <img :src="item.imgSrc1" >
-                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                 </button>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+                            data-num="9">
+                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        </button>
                         <p>지문3</p>
                     </div>
                     <div class="race-btn" @click="goToPage('Chapter10')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="10">
-                    <img :src="item.imgSrc1" >
-                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                 </button>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+                            data-num="10">
+                            <img :src="item.imgSrc1">
+                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        </button>
                         <p>단어장</p>
                     </div>
-                    <div class="race-btn" >
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="11">
-                    <img :src="item.imgSrc3" >
-                    <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                 </button>
-                        <p class="long">최종 평가</p>
+                    <div class="rcon flex">
+                        <div class="race-btn">
+                            <button class="popTxt" v-for="(item, index) in items" :key="index"
+                                @click="toggleImageAndShowPopup(index, '11')">
+                                <img :src="item.imgSrc3">
+                                <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                            </button>
+                            <p class="long">최종 평가</p>
+                        </div>
                     </div>
                 </div>
-                <div class="rabbit-end" @click="buttonSearch"><img src="../../../resources/img/img138_72s.png" alt=""></div>
             </div>
             <!-- 팝업 -->
-            <div v-show="searchOpen" class="popup-wrap">
-                <div class="popup-box popup-yellow">
-                    <div class="flex justify-end">
-                        <button type="button" class="popup-close-btn" @click="closeBtn">
-                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-                            </button>
+            <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=" 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="goToPage('Camera')">
-                            사진촬영
+                    <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%;">
+                            <!-- 여기에 카메라 기능을 구현 -->
+                            <!-- <p>카메라 모듈이 여기에 위치합니다.</p> -->
+
+                            <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 class="box">
+                        <div style="width: 100%;">
+                            <div id="container">
+                                <canvas ref="canvas"></canvas>
+                            </div>
+                        </div>
+                    </div> -->
+
+                </div>
+            </article>
+
         </div>
         <div class="complete-wrap mt90 myphoto">
             <h2 class="mb40">이 단원을 끝낸 친구들</h2>
             <article class=" flex-column" style="gap: 5px;">
                 <div class="flex" style="gap: 5px;">
                     <div @click="buttonSearch2" class="photo" ><img   src="../../../resources/img/img143_75s.png" alt=""></div>
+                    <div @click="buttonSearch" class="photo"><img src="../../../resources/img/img143_75s.png" alt=""></div>
                 </div>
             </article>
-            <article class="popup-wrap" v-show="searchOpen2">
+            <!-- 팝업 -->
+            <article class="popup-wrap" v-show="searchOpen">
                 <div class="popup-box ">
                     <div class="flex mb10  justify-between">
                         <p class="popup-title">알림</p>

                     <div class="box">
                         <div style="width: 910px;"><img src="../../../resources/img/img140_747s.png" alt=""></div>
                     </div>
-                   <div class="flex justify-between mt20">
+                    <div class="flex justify-between mt20">
                         <div class="text  flex">
                             <p class="title2 date ml30">2024-08-06</p>
                             <span class=" title1 ml30">1단원을 마친 <em class="yellow">가나다</em>친구</span>
                         </div>
-                        <div class="title2 flex align-center" style="gap: 10px;"><svg-icon type="mdi" :path="mdiHeart" style="color: #FFBA08;"></svg-icon><p><em class="yellow">1</em></p></div>
-                   </div>
+                        <div class="title2 flex align-center" style="gap: 10px;"><svg-icon type="mdi" :path="mdiHeart"
+                                style="color: #FFBA08;"></svg-icon>
+                            <p><em class="yellow">1</em></p>
+                        </div>
+                    </div>
                 </div>
             </article>
         </div>

 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
+
 export default {
     data() {
         return {
             items: [
-            { imgSrc1: 'client/resources/img/img11_1_s.png', imgSrc2: 'client/resources/img/img12_1_s.png', imgSrc3: 'client/resources/img/img11_2_s.png', imgSrc4: 'client/resources/img/img12_2_s.png', isSecondImageVisible: false },
-         ],
+                {
+                    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
+                },
+            ],
+            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'     //스티커 선택됨
+                },
+            ],
             mdiWindowClose: mdiWindowClose,
             mdiHeart: mdiHeart,
             showModal: false,
-            showModal2: false,
-            searchOpen: false,
-            searchOpen2: false,
+            searchOpen: false,  // 사진 상세보기 모달창
+            searchOpen2: false, // 단원 마친 후, 사진 촬영 여부 선택 모달창
+            showCameraModal: false, // 카메라 모달창
+            showPhotoModal: false, // 사진꾸미기 모달창
+            photoTaken: false,
+            photo: null,    //캡쳐 사진
+            videoReady: false, // 비디오 준비 상태를 나타내는 플래그
+            stream: null,
+            canvasWidth: 0,
+            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 }
+            }
+
         }
     },
     methods: {
         toggleImage(index) {
-         this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
-      },
+            this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
+        },
+        toggleImageAndShowPopup(index, dataNum) {
+            this.toggleImage(index);
+            if (dataNum === '11') {  // 최종 평가 버튼 클릭 시
+                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 });
         },
-        closeModal() {
-            this.showModal = false;
+        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.searchOpen2 = false;
+            this.showCameraModal = false;
+            this.photoTaken = false;
+            this.photo = null;
+
+            //스트림 종료
+            if (this.stream) {
+                let tracks = this.stream.getTracks();
+                tracks.forEach(track => track.stop());
+                this.stream = null;
+            }
+        },
+        closePhotoModal() { //사진꾸미기 팝업 닫기
+            this.showPhotoModal = false;
+            this.closeModal();
+        },
+        onVideoLoaded() {
+            this.videoReady = true;
+            this.adjustContainerSize();
+        },
+        adjustContainerSize() {
+            const video = this.$refs.modalVideoElement;
+            const container = this.$refs.container;
+            const body = this.$refs.body;
+            if (video && container) {
+                container.style.width = `${video.videoWidth}px`;
+                container.style.height = `${video.videoHeight}px`;
+                body.style.height = `${video.videoHeight}px`;
+            }
+        },
+
         buttonSearch() {
             this.searchOpen = true;
         },

         },
         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();
+            });
 
         },
-        closeBtn2() {
-            this.searchOpen2 = false;
+        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);
+            };
         },
-    },
-    watch: {
 
-    },
-    computed: {
+        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);
+                });
+            };
+        },
+
 
     },
     components: {

     },
     mounted() {
         console.log('main mounted');
+
+
+    },
+    computed() {
+
+    },
+    beforeDestroy() {
+        // 컴포넌트가 파괴되기 전에 리스너 제거
+        window.removeEventListener('resize', this.updateCanvasRect);
+        this.$refs.canvas.removeEventListener('click', this.handleCanvasClick);
     }
 }
-</script>
+</script>
+
+<style>
+.body {
+    width: 1435px;
+    height: auto;
+    margin: 0 auto;
+}
+
+#container {
+    position: relative;
+    margin: auto;
+    border: 10px #333 solid;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+}
+
+
+video {
+    width: 100%;
+    height: auto;
+    background-color: #666;
+}
+
+.mirrored {
+    transform: scaleX(-1);
+}
+
+.new-btn:disabled {
+    background-color: #FFF3D7;
+    cursor: not-allowed;
+}
+
+/* button {
+    margin: auto;
+    padding: 5px 10px;
+    font-size: 13px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */
+
+.sticker {
+    position: absolute;
+    cursor: move;
+}
+
+.sticker-handle {
+    width: 15px;
+    height: 15px;
+    background: rgba(255, 255, 255, 0.521);
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    cursor: nwse-resize;
+    font-size: 13px;
+    font-weight: bolder;
+    color: rgb(63, 63, 63);
+}
+
+.sticker-delete {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: rgba(255, 0, 0, 0.425);
+    color: white;
+    padding: 5px;
+    cursor: pointer;
+}
+
+.toolbar {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.toolbar button {
+    margin: 5px;
+    padding: 5px 10px;
+    cursor: pointer;
+}
+
+.toolbar input {
+    margin: 5px;
+}
+</style>

9c51750

65ab45c

client/views/pages/main/PhotoBook.vue

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

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


        <div>
             <div class="title-box flex justify-end mb40">
                 <select name="" id="">
-                    <option value="">A반</option>
+                    <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId" @click="currentPage = 1; stdPhotoSelectList(classItem.sclsId)">
+                        {{ classItem.sclsNm }}
+                    </option>
                 </select>
             </div>
-            <div class="btnGroup">
-                <button @click="selectedTab = 'tab1'" type="button" title="글쓰기" class="tab-btn">
-                    <img v-if="selectedTab !== 'tab1'" src="../../../resources/img/btn49_15s_normal.png" alt="">
+            <div class="btnGroup" style="display: flex; flex-direction: column;">
+                <button v-for="n in totalPages" :key="n" @click="changePage(n)" type="button" title="페이지 버튼" class="tab-btn">
+                    <img v-if="currentPage !== n" src="../../../resources/img/btn49_15s_normal.png" alt="">
                     <img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
-                    <p :class="{ 'custom-style': selectedTab === 'tab1' }">1</p>
+                    <p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
                 </button>
             </div>
             <div v-if="selectedTab === 'tab1'" class="tab-box">
                 <div class="flex justify-between">
-                    <div class="photo" style="transform: rotate(2deg);" @click="buttonSearch">
-                        <div class="class ">
+                    <div v-for="(photo, index) in (photoList?.result || []).slice(0, 3)" :key="index" class="photo" :style="{ transform: getRotation(index) }" @click="buttonSearch(photo)">
+                        <div class="class">
                             <div class="box">
                                 <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
                             </div>
                             <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
+                                <span class="member ml30">{{ photo.likeData }}</span>
+                                <p class="title2">{{ photo.unitName }}</p>
                             </div>
-                        </div>
-                    </div>
-                    <div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
-                        <div class="class photo">
-                            <div class="box">
-                                <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
-                            </div>
-                            <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
-                            </div>
-    
-                        </div>
-                    </div>
-                    <div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
-                        <div class="class ">
-                            <div class="box">
-                                <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
-                            </div>
-                            <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
-                            </div>
-    
                         </div>
                     </div>
                 </div>
                 <div class="flex justify-between mt50">
-                    <div class="photo" style="transform: rotate(-2deg);" @click="buttonSearch">
-                        <div class="class ">
+                    <div v-for="(photo, index) in (photoList?.result || []).slice(3, 6)" :key="index + 3" class="photo" :style="{ transform: getRotation(index + 3) }" @click="buttonSearch(photo)">
+                        <div class="class">
                             <div class="box">
                                 <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
                             </div>
                             <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
-                            </div>
-    
-                        </div>
-                    </div>
-                    <div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
-                        <div class="class ">
-                            <div class="box">
-                                <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
-                            </div>
-                            <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
-                            </div>
-    
-                        </div>
-                    </div>
-                    <div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
-                        <div class="class ">
-                            <div class="box">
-                                <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
-                            </div>
-                            <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
+                                <span class="member ml30">{{ photo.likeData }}</span>
+                                <p class="title2">{{ photo.unitName }}</p>
                             </div>
                         </div>
                     </div>
                 </div>
-    
             </div>
             <div class="popup-wrap" v-show="searchOpen">
-                <div class="popup-box ">
-                    <div class="flex mb10  justify-between">
+                <div class="popup-box">
+                    <div class="flex mb10 justify-between">
                         <p class="popup-title">알림</p>
                         <button type="button" class="popup-close-btn" @click="closeBtn">
                             <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>

                     <div class="box">
                         <div><img src="../../../resources/img/img184_91t.png" alt=""></div>
                     </div>
-                    <div class="text flex justify-between mt20">
-                        <span class=" title1">1단원을 마친 <em class="yellow">가나다</em>친구</span>
-                        <p class="title2 date">2024-08-06</p>
+                    <div class="text flex justify-between mt20" v-if="photoData.length > 0">
+                        <span class="title1">{{ photoData[0].unitName }}을 마친 <em class="yellow">{{ photoData[0].stdName }}</em>친구</span>
+                        <p class="title2 date">{{ photoData[0].photoDate }}</p>
+                    </div>
+                    <div class="text flex justify-between mt20" v-else>
+                        <span class="title1">데이터를 불러올 수 없습니다.</span>
                     </div>
                 </div>
             </div>
+
        </div>
     </div>
 </template>

 import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
 import { mdilArrowRight } from '@mdi/light-js';
 import ProgressBar from '../../component/ProgressBar.vue';
+import axios from "axios";
 
 
 export default {
     data() {
         return {
+            classList: [],
+            photoList: [],
+
+            photoData: [],
+
+            currentPage: 1,
+            pageSize: 6,
+            totalPages: 1,
+
             mdiWindowClose: mdiWindowClose,
             selectedTab: 'tab1',
             mdiMagnify: mdiMagnify,

         }
     },
     methods: {
+        stdClassesSelectList: function () {
+            const vm = this;
+            axios({
+                url: "/classes/selectClass.json",
+                method: "post",
+                headers:{
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    userId:"1"
+                }
+            })
+            .then(function (response) {
+                console.log("classList - response : ", response.data);
+                vm.classList = response.data.data;
+                vm.currentPage = 1;
+            })
+            .catch(function (error) {
+                console.log("classList - error : ", error);
+                alert("학생 반 조회에 오류가 발생했습니다.");
+            });
+        },
+
+        stdPhotoSelectList: function (sclsId) {
+            const vm = this;
+            axios({
+                url: "/photo/stdPhotoList.json",
+                method: "post",
+                headers:{
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                        "stdId":"1",
+                        "sclsId":"1", // 여기에 sclsId들어가야함
+                        page: vm.currentPage,
+                        pageSize: vm.pageSize
+                }
+            })
+            .then(function (response) {
+                console.log("photoList - response : ", response.data);
+                vm.photoList = response.data;
+                vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
+            })
+            .catch(function (error) {
+                console.log("photoList - error : ", error);
+                alert("반별 내 사진 조회에 오류가 발생했습니다.");
+            });
+        },
+
+        getRotation(index) {
+            const rotations = [2, -1, 1, -2, 1, -1];
+            return `rotate(${rotations[index]}deg)`;
+        },
+
+        changePage(pageNumber) {
+            this.currentPage = pageNumber;
+            this.stdPhotoSelectList(this.selectedClassId);
+        },
+
         closeModal() {
             this.showModal = false;
         },
-        buttonSearch() {
+        buttonSearch(photo) {
+            if(!photo) return;
+
+            const vm = this;
             this.searchOpen = true;
+            axios({
+                url: "/photo/photoDetail.json",
+                method: "post",
+                headers:{
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                        "photoId":photo.photoId
+                }
+            })
+            .then(function (response) {
+                console.log("photoData - response : ", response.data);
+                vm.photoData = response.data;
+            })
+            .catch(function (error) {
+                console.log("photoData - error : ", error);
+                alert("사진 조회에 오류가 발생했습니다.");
+            });
         },
+
         closeBtn() {
             this.searchOpen = false;
-
         },
         goToPage(page) {
             this.$router.push({ name: page });

 
     },
     computed: {
-
+        currentPhotos() {
+            // 현재 페이지에 해당하는 사진들만 반환
+            const start = (this.currentPage - 1) * this.pageSize;
+            const end = start + this.pageSize;
+            return this.photoList.result.slice(start, end);
+        }
     },
     components: {
         SvgIcon,

     },
     mounted() {
         console.log('Main2 mounted');
+        this.stdClassesSelectList();
+        this.stdPhotoSelectList();
     }
 }
-</script>
+</script>
+
+<style>
+.btnGroup button {
+    cursor: pointer;
+    z-index: 100000;
+}
+</style>

9c51750

65ab45c

client/views/pages/main/PhotoDesign.vue

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

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


       <span class="title mr40">기념 사진을 꾸며봅시다.</span>
     </div>
     <div class="flex justify-between align-center" style="gap: 40px;">
-      <div class="content " style="padding: 30px;">
+      <div class="content" style="padding: 30px;">
         <div class="tool">
           <div class="flex justify-center mb20" style="gap: 20px;">
-            <button class="popTxt" v-for="(item, index) in items" :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>
+            <button class="popTxt" v-for="(item, index) in items" :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">

         </div>
       </div>
       <div>
-        <div class="content " style="height: 549px; width: 973px;">
-          <button><img src="../../../resources/img/img143_75s.png" alt=""></button>
+        <div class="content" style="height: 549px; width: 973px;">
+          <button><img class="captured-img" :src="capturedImage" alt="Captured Image"></button>
         </div>
         <div class="btn-wrap flex justify-center mt40" style="gap: 40px;">
           <button class="login-btn" @click="goToPage('Camera')">

             <p>재촬영</p>
           </button>
 
-          <button class="login-btn" type="submit" @click="goToPage('PhotoEdit')"><img
-              src="../../../resources/img/btn07_s.png" alt="">
+          <button class="login-btn" type="submit" @click="goToPage('PhotoEdit')">
+            <img src="../../../resources/img/btn07_s.png" alt="">
             <p>완성</p>
           </button>
         </div>

           </button>
         </div>
       </div>
-
     </div>
   </div>
 </template>

   data() {
     return {
       items: [
-        { 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', },
+        { 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' },
       ],
-      timer: '00',
       selectedIndex: 0,
+    };
+  },
+  computed: {
+    capturedImage() {
+      // Retrieve the captured image from route query parameters
+      return this.$route.query.image || ''; // Return an empty string if no image is provided
     }
   },
   methods: {
     updateContent(index) {
-         this.selectedIndex = index;
-        //  this.currentCon = this.items[index].con;
-      },
+      this.selectedIndex = index;
+    },
     goToPage(page) {
       this.$router.push({ name: page });
     },
-    startTimer() {
-      if (this.intervalId) {
-        clearInterval(this.intervalId);
-      }
-      this.timer = 5;
-      this.intervalId = setInterval(() => {
-        if (this.timer > 0) {
-          this.timer--;
-        } else {
-          clearInterval(this.intervalId);
-        }
-      }, 1000);
-    }
-  },
-  watch: {
+    // captureAndGoToPhotoDesign() {
+    //     const video = this.$refs.modalVideoElement;
+    //     const canvas = document.createElement('canvas');
+    //     canvas.width = video.videoWidth;
+    //     canvas.height = video.videoHeight;
+    //     const ctx = canvas.getContext('2d');
 
-  },
-  computed: {
+    //     // 좌우 반전 적용
+    //     ctx.translate(canvas.width, 0);
+    //     ctx.scale(-1, 1);
 
+    //     ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    //     const imageDataUrl = canvas.toDataURL('image/png');
+    //     this.$router.push({ name: 'PhotoDesign', query: { image: imageDataUrl } });
+    // }
   },
-  components: {
-  },
-  mounted() {
-
-  }
 }
 </script>
+
 <style scoped>
-.content{width: 19%;}
+.captured-img {
+  margin: auto auto;
+}
+
 .imgGroup {
   width: fit-content;
 }

 .pickGroup article>div>p {
   font-size: 64px;
 }
-.popTxt{width: 101px;}
-</style>
+
+.popTxt {
+  width: 101px;
+}
+</style>

9c51750

65ab45c

client/views/pages/teacher/QuestionDetail.vue

--- client/views/pages/teacher/QuestionDetail.vue

+++ client/views/pages/teacher/QuestionDetail.vue

...	...	@@ -1,5 +1,82 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
	3	+<<<<<<< HEAD
	4	+ <p class="title">문제 조회</p>
	5	+ </div>
	6	+ <div class="board-wrap">
	7	+ <div class="flex align-center">
	8	+ <label for="" class="title2">문제</label>
	9	+ <p class="data-wrap">{{ questionExpln }}</p>
	10	+ </div>
	11	+ <hr>
	12	+ <div class="flex align-center">
	13	+ <label for="" class="title2">유형</label>
	14	+ <p class="data-wrap">{{ questionTypeId }}</p>
	15	+ </div>
	16	+ <div class="flex align-center">
	17	+ <label for="" class="title2">카테고리</label>
	18	+ <p class="data-wrap">{{ questionCategoryId }}</p>
	19	+ </div>
	20	+ <div class="flex align-center">
	21	+ <label for="" class="title2">사용자 아이디</label>
	22	+ <p class="data-wrap">{{ userId }}</p>
	23	+ </div>
	24	+ <div class="flex align-center">
	25	+ <label for="" class="title2">책 아이디</label>
	26	+ <p class="data-wrap">{{ bookId }}</p>
	27	+ </div>
	28	+ <div class="flex align-center">
	29	+ <label for="" class="title2">단원 아이디</label>
	30	+ <p class="data-wrap">{{ unitId }}</p>
	31	+ </div>
	32	+ <hr>
	33	+ <div class="flex align-center">
	34	+ <label for="" class="title2">문제 점수</label>
	35	+ <p class="data-wrap">{{ questionScore }}</p>
	36	+ </div>
	37	+ <div class="flex align-center">
	38	+ <label for="" class="title2">문제 힌트</label>
	39	+ <p class="data-wrap">{{ questionHint }}</p>
	40	+ </div>
	41	+ <div class="flex align-center">
	42	+ <label for="" class="title2">문제 해설</label>
	43	+ <p class="data-wrap">{{ questionExplanation }}</p>
	44	+ </div>
	45	+ <hr>
	46	+ <div class="flex align-center">
	47	+ <label for="" class="title2">첨부파일</label>
	48	+ <p class="data-wrap">{{ questionFile }}</p>
	49	+ </div>
	50	+ <div class="flex align-center mb20">
	51	+ <label for="" class="title2">답</label>
	52	+ <p class="data-wrap">{{ questionAnswer }}</p>
	53	+ </div>
	54	+ <div>
	55	+ <label for="" class="title2">오답 학생</label>
	56	+ <div class="table-wrap mt20">
	57	+ <table>
	58	+ <thead>
	59	+ <tr>
	60	+ <td>No.</td>
	61	+ <td>이름</td>
	62	+ <td>학년</td>
	63	+ <td>반</td>
	64	+ <td>오답</td>
	65	+ </tr>
	66	+ </thead>
	67	+ <tbody>
	68	+ <tr v-for="(student, index) in wrongStudents" :key="index" @click="goToPage('noticeDetail')">
	69	+ <td>{{ index + 1 }}</td>
	70	+ <td>{{ student.name }}</td>
	71	+ <td>{{ student.grade }}</td>
	72	+ <td>{{ student.class }}</td>
	73	+ <td>{{ student.wrongAnswer }}</td>
	74	+ </tr>
	75	+ </tbody>
	76	+ </table>
	77	+ </div>
	78	+ </div>
	79	+=======
3	80	<p class="title">문제 등록</p>
4	81	</div>
5	82	<div class="board-wrap">
...	...	@@ -180,18 +257,37 @@
180	257	</div>
181	258	</div>
182	259
	260	+>>>>>>> e47769b90c7ad4f0b34f38bb2a56a8a69a894941
183	261	</div>
184	262	<div class="flex justify-between mt50">
185	263	<button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')">
186	264	목록
187	265	</button>
188	266	<div class="flex">
	267	+<<<<<<< HEAD
	268	+ <button type="button" title="글쓰기" class="new-btn mr10" @click="editQuestion">
	269	+ 수정
	270	+ </button>
	271	+ <button type="button" title="글쓰기" class="new-btn" @click="confirmDelete">
	272	+ 삭제
	273	+ </button>
	274	+ </div>
	275	+ </div>
	276	+
	277	+ <!-- 모달 창 -->
	278	+ <div v-if="showModal" class="modal-overlay">
	279	+ <div class="modal-content">
	280	+ <p>삭제하시겠습니까?</p>
	281	+ <button @click="deleteQuestion">예, 삭제</button>
	282	+ <button @click="cancelDelete">취소</button>
	283	+=======
189	284	<button type="button" title="글쓰기" class="new-btn mr10">
190	285	삭제
191	286	</button>
192	287	<button type="button" title="글쓰기" class="new-btn">
193	288	수정
194	289	</button>
	290	+>>>>>>> e47769b90c7ad4f0b34f38bb2a56a8a69a894941
195	291	</div>
196	292	</div>
197	293	</template>
...	...	@@ -199,34 +295,157 @@
199	295	<script>
200	296	import SvgIcon from '@jamescoyle/vue-icon';
201	297	import { mdiMagnify } from '@mdi/js';
	298	+<<<<<<< HEAD
	299	+import axios from 'axios';
	300	+=======
202	301
	302	+>>>>>>> e47769b90c7ad4f0b34f38bb2a56a8a69a894941
203	303
204	304	export default {
205	305	data() {
206	306	return {
207	307	mdiMagnify: mdiMagnify,
	308	+<<<<<<< HEAD
	309	+ questionTitle: '샘플 제목',
	310	+ questionExpln: '샘플 내용',
	311	+ questionFile: null, // 파일 URL을 여기에 저장
	312	+ questionAnswer: '샘플 답',
	313	+ wrongStudents: [],
	314	+ showModal: false,
	315	+ parsedData: null, // parsedData 추가
	316	+ questionTypeId: '',
	317	+ questionCategoryId: '',
	318	+ userId: '',
	319	+ bookId: '',
	320	+ unitId: '',
	321	+ questionScore: '',
	322	+ questionHint: '',
	323	+ questionExplanation: ''
	324	+=======
208	325	selectedTab: 'tab1',
	326	+>>>>>>> e47769b90c7ad4f0b34f38bb2a56a8a69a894941
209	327	}
210	328	},
211	329	methods: {
212	330	goToPage(page) {
213	331	this.$router.push({ name: page });
214	332	},
	333	+<<<<<<< HEAD
	334	+ editQuestion() {
	335	+ // 수정 로직 추가
	336	+ console.log('수정 버튼 클릭');
	337	+ },
	338	+ confirmDelete() {
	339	+ this.showModal = true;
	340	+ },
	341	+ async deleteQuestion() {
	342	+ try {
	343	+ const prblmId = this.parsedData.prblmId; // this.parsedData 사용
	344	+ const response = await axios.post('/problem/deleteProblem.json', { prblmId : prblmId });
	345	+ console.log('삭제 완료:', response.data);
	346	+ this.showModal = false;
	347	+ this.goToPage('QuestionList');
	348	+ } catch (error) {
	349	+ console.error('삭제 실패:', error);
	350	+ }
	351	+ },
	352	+ cancelDelete() {
	353	+ this.showModal = false;
	354	+ },
	355	+ loadFromLocalStorage() {
	356	+ const data = sessionStorage.getItem('selectQuestionList');
	357	+ if (data) {
	358	+ this.parsedData = JSON.parse(data); // this.parsedData 설정
	359	+ console.log('Loaded data from local storage:', this.parsedData);
	360	+
	361	+ this.questionExpln = this.parsedData.prblmExpln \|\| '내용 없음';
	362	+ this.questionFile = this.parsedData.fileMngId \|\| '첨부파일 없음'; // 파일 경로는 실제 경로에 맞게 수정
	363	+ this.questionAnswer = this.parsedData.prblmCmmt \|\| '답 없음';
	364	+ this.wrongStudents = this.parsedData.wrongStudents \|\| [];
	365	+ this.questionTypeId = this.parsedData.prblmTypeId \|\| '유형 아이디 없음';
	366	+ this.questionCategoryId = this.parsedData.prblmCtgryId \|\| '카테고리 아이디 없음';
	367	+ this.userId = this.parsedData.userId \|\| '사용자 아이디 없음';
	368	+ this.bookId = this.parsedData.bookId \|\| '책 아이디 없음';
	369	+ this.unitId = this.parsedData.unitId \|\| '단원 아이디 없음';
	370	+ this.questionScore = this.parsedData.prblmScr \|\| '점수 없음',
	371	+ this.questionHint = this.parsedData.prblmHint \|\| '힌트 없음',
	372	+ this.questionExplanation = this.parsedData.prblmExpln \|\| '해설 없음'
	373	+ } else {
	374	+ console.log('No data found in local storage');
	375	+ }
	376	+ },
	377	+ downloadFile() {
	378	+ window.open(this.questionFile, '_blank');
	379	+ },
	380	+ getProblemId() {
	381	+ // 문제 ID를 얻는 로직을 추가하세요
	382	+ return 'sampleProblemId';
	383	+ }
	384	+=======
215	385	},
216	386	watch: {
217	387
218	388	},
219	389	computed: {
220	390
	391	+>>>>>>> e47769b90c7ad4f0b34f38bb2a56a8a69a894941
221	392	},
222	393	components: {
223	394	SvgIcon
224	395	},
225	396	mounted() {
	397	+<<<<<<< HEAD
	398	+ this.loadFromLocalStorage();
	399	+ }
	400	+}
	401	+</script>
	402	+
	403	+<style>
	404	+ .data-wrap {
	405	+ width: -webkit-fill-available;
	406	+ padding: 1.2rem;
	407	+ }
	408	+ .download-btn {
	409	+ background-color: #007bff;
	410	+ color: white;
	411	+ border: none;
	412	+ padding: 10px 20px;
	413	+ cursor: pointer;
	414	+ text-decoration: none;
	415	+ font-size: 1rem;
	416	+ }
	417	+ .download-btn:hover {
	418	+ background-color: #0056b3;
	419	+ }
	420	+ .modal-overlay {
	421	+ position: fixed;
	422	+ top: 0;
	423	+ left: 0;
	424	+ width: 100%;
	425	+ height: 100%;
	426	+ background-color: rgba(0, 0, 0, 0.5);
	427	+ display: flex;
	428	+ justify-content: center;
	429	+ align-items: center;
	430	+ }
	431	+ .modal-content {
	432	+ background-color: white;
	433	+ padding: 20px;
	434	+ border-radius: 5px;
	435	+ text-align: center;
	436	+ }
	437	+ .modal-content button {
	438	+ margin: 10px;
	439	+ padding: 10px 20px;
	440	+ cursor: pointer;
	441	+ }
	442	+</style>
	443	+=======
226	444	console.log('Main2 mounted');
227	445	}
228	446	}
229	447	</script>
230	448	<style scoped>
231	449	.ui-checkbox{width: 30px; height: 30px;}
232		-</style> (파일 끝에 줄바꿈 문자 없음)
	450	+</style>
	451	+>>>>>>> e47769b90c7ad4f0b34f38bb2a56a8a69a894941

9c51750

65ab45c

client/views/pages/teacher/QuestionList.vue

--- client/views/pages/teacher/QuestionList.vue

+++ client/views/pages/teacher/QuestionList.vue


             <button>3</button>
         </div>
     <div class="search-wrap flex justify-end mb20">
-            <select name="" id="" class="mr10 data-wrap">
-                <option value="">전체</option>
-            </select>
-                <input  type="text" placeholder="검색하세요.">
-                <button type="button" title="위원회 검색">
-                    <img src="../../../resources/img/look_t.png" alt="">
-                </button>
-        </div>
-        <div class="table-wrap">
-            <table>
-                <thead>
+        <select name="" id="" class="mr10 data-wrap" v-model="searchOption">
+            <option value="">전체</option>
+            <option value="">제목</option>
+            <option value="prblm_expln">문제</option>
+            <option value="user_id">작성자</option>
+            <option value="">등록일</option>
+        </select>
+        <input type="text" placeholder="검색하세요." v-model="searchKeyword">
+        <button type="button" title="위원회 검색" @click="searchProblems">
+            <img src="../../../resources/img/look_t.png" alt="">
+        </button>
+    </div>
+    <div class="table-wrap">
+        <table>
+            <thead>
+                <tr>
                     <td>No.</td>
                     <td>제목</td>
                     <td>내용</td>
                     <td>유형</td>
                     <td>지문</td>
                     <td>등록일</td>
+<<<<<<< HEAD
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="(problem, index) in problems" :key="problem.prblmId" @click="[goToPage('QuestionDetail', selectQuestionList(problem))]">
+                    <td>{{ (currentPage - 1) * 10 + index + 1 }}</td>
+                    <td>제목</td>
+                    <td>{{ problem.prblmExpln }}</td>
+                    <td>{{ problem.userId }}</td>
+                    <td>오답률</td>
+                    <td>등록일</td>
+                </tr>
+            </tbody>
+        </table>
+        <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
+            <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
+                <img src="../../../resources/img/btn27_90t_normal.png" alt="">
+            </button>
+            <button :class="{ 'selected-btn': currentPage === 1 }" @click="changePage(1)">1</button>
+            <button :class="{ 'selected-btn': currentPage === 2 }" @click="changePage(2)">2</button>
+            <button :class="{ 'selected-btn': currentPage === 3 }" @click="changePage(3)">3</button>
+            <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
+                <img src="../../../resources/img/btn28_90t_normal.png" alt="">
+            </button>
+        </article>
+        <div class="flex justify-end">
+            <button type="button" title="등록" class="new-btn" @click="goToPage('QuestionInsert')">
+                등록
+            </button>
+=======
                 </thead>
                 <tbody>
                     <tr @click="goToPage('QuestionDetail')">

                     등록
                 </button>
         </div>
+>>>>>>> e47769b90c7ad4f0b34f38bb2a56a8a69a894941
         </div>
+    </div>
 </template>
 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify} from '@mdi/js';
-
+import { mdiMagnify } from '@mdi/js';
+import axios from 'axios';
 
 export default {
-    data () {
+    data() {
         return {
+            problems: [],
             mdiMagnify: mdiMagnify,
+            currentPage: 1,
+            totalPages: 3,
+            searchOption: '',
+            searchKeyword: '',
         }
     },
     methods: {
         goToPage(page) {
-         this.$router.push({ name: page });
-      },
-      showConfirm(type) {
+            this.$router.push({ name: page });
+        },
+        selectQuestionList(item) {
+            sessionStorage.setItem("selectQuestionList", JSON.stringify(item));
+        },
+        showConfirm(type) {
             let message = '';
             if (type === 'cancel') {
                 message = '삭제하시겠습니까?';

                 this.goBack();
             }
         },
-
-    },
-    watch: {
-
-    },
-    computed: {
-       
-    },
-    components:{
-        SvgIcon
+        async fetchProblems(page = 1) {
+            try {
+                const response = await axios.post('/problem/problemList.json', {
+                    option: this.searchOption,
+                    keyword: this.searchKeyword,
+                    pageSize: 10,
+                    startIndex: (page - 1) * 10
+                });
+                this.problems = response.data;
+                this.currentPage = page;
+            } catch (error) {
+                console.error('문제 목록을 불러오는 중 오류가 발생했습니다.', error);
+            }
+        },
+        changePage(page) {
+            if (page < 1 || page > this.totalPages) return;
+            this.fetchProblems(page);
+            this.currentPage = page;
+        },
+        searchProblems() {
+            this.fetchProblems(1);
+        }
     },
     mounted() {
         console.log('Main2 mounted');
+        this.fetchProblems();
     }
 }
-</script>
+</script>

9c51750

65ab45c

client/views/pages/teacher/VocaList.vue

--- client/views/pages/teacher/VocaList.vue

+++ client/views/pages/teacher/VocaList.vue


 <template>
     <div class="title-box flex justify-between mb40">
         <p class="title">단어장</p>
-        <select name="" id="">
-            <option value="UNIT_000000000000001">A교재</option>
+        <select v-model="selectedBookId" @change="fetchUnits">
+            <option v-for="book in books" :key="book.book_id" :value="book.book_id">
+                {{ book.book_nm }}
+            </option>
         </select>
     </div>
     <label for="" class="title2">단원</label>
-        <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
-            <button class="selected-btn">1</button>
-            <button>2</button>
-            <button>3</button>
-        </div>
+    <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
+        <button v-for="unit in units" :key="unit.unitId" @click="selectUnit(unit.unitId)" :class="{ 'selected-btn': selectedUnitId === unit.unitId }">
+            {{ unit.unitName }}
+        </button>
+    </div>
     <div class="search-wrap flex justify-between mb20 align-center">
-        <div class="title2 gray">?단원 전체 목록</div>
+        <div class="title2 gray flex"><div class="black">[{{ selectedUnitName }}]</div>단원 전체 목록</div>
         <div>
             <select name="" id="" class="mr10 data-wrap">
                 <option value="">지문</option>

                 <td>지문</td>
                 <td>단어 목록</td>
                 <td>작성자</td>
-                <td>등록일</td>
             </thead>
             <tbody>
                 <tr v-for="(wordBook, index) in dataList" :key="wordBook.wdBookId" @click="goToViewPage('VocaDetail')">
                     <td>{{ createNo(index) }}</td>
                     <td>{{ wordBook.textTtl }}</td>
                     <td>{{ wordBook.wordsPreview }}</td>
-                    <td>{{ wordBook.userId }}</td>
-                    <td>{{ '' }}</td>
+                    <td>{{ wordBook.userNm }}</td>
                 </tr>
             </tbody>
         </table>

             </button>
         </article>
         <div class="flex justify-end ">
-            <button type="button" title="등록" class="new-btn" @click="goToPage('VocaInsert')">
+            <button type="button" title="등록" class="new-btn" @click="goToViewPage('VocaInsert')">
                 등록
             </button>
         </div>

     data () {
         return {
             mdiMagnify: mdiMagnify,
+            books: [],
+            units: [],
+            selectedBookId: null, // 선택된 책 ID 저장 변수
+            selectedUnitId: null, // 선택된 단원 ID 저장 변수
+            selectedUnitName: '', // 선택된 단원의 이름 저장 변수
             dataList: [],
             currentPage: 0,
             itemsPerPage: 2,
-            totalPosts: 0,
-            unitId: "UNIT_000000000000001"
+            totalPosts: 0
         }
     },
     methods: {
 
+        // 모든 책 목록을 가져오는 메서드
+        fetchBooks() {
+            axios.post('/book/findAll.json')
+            .then(response => {
+                this.books = response.data;
+                if (this.books.length > 0) {
+                    this.selectedBookId = this.books[1].book_id; // 두 번째 책을 선택하도록 기본 설정
+                    this.fetchUnits(); // 책 선택 후 단원 목록 가져오기
+                }
+            })
+            .catch(error => {
+                console.error("책 목록 가져오기 실패: ", error);
+            });
+        },
+
+        // 선택된 책의 단원 목록을 가져오는 메서드
+        fetchUnits() {
+            axios.post('/unit/unitList.json', { bookId: this.selectedBookId })
+            .then(response => {
+                this.units = response.data;
+                if (this.units.length > 0) {
+                    this.selectUnit(this.units[4].unitId); // 다섯 번째 단원을 선택하도록 기본 설정
+                }
+            })
+            .catch(error => {
+                console.error("단원 목록 가져오기 실패: ", error);
+            });
+        },
+
+        // 단원을 선택했을 때 호출되는 메서드
+        selectUnit(unitId) {
+            this.selectedUnitId = unitId;
+            const selectedUnit = this.units.find(unit => unit.unitId === unitId);
+            this.selectedUnitName = selectedUnit ? selectedUnit.unitName : '';
+            this.dataSelectList(); // 단어장 목록 조회
+        },
+
+        // 단어장 목록 조회 메서드
         dataSelectList() {
             const vm = this;
             axios({

                     "Content-Type": "application/json; charset=UTF-8",
                 },
                 data: {
-                    unitId: vm.unitId,
+                    unitId: vm.selectedUnitId,
                     page: vm.currentPage + 1,
                     pageSize: vm.itemsPerPage
                 },

                 alert("단어장 목록 조회에 오류가 발생했습니다.");
             });
         },
+
+        // 단어 목록 생략 String 생성 메서드
         generateWordsPreview(words) {
             const maxLength = 20; // 최대 표시 길이 설정
             const wordString = words.join(', ');

                 return wordString;
             }
         },
+
+        // 단어장 NO 생성 메서드
         createNo(index) {
             return this.totalPosts - (this.currentPage * this.itemsPerPage + index);
         },
+
+        // 페이지네이션 이동 메서드
         goToPage(page) {
             if (page < 0 || page >= this.totalPages) {
                 return;

             this.currentPage = page;
             this.dataSelectList();
         },
+
+        // 페이지 이동 메서드
         goToViewPage(page) {
             this.$router.push({ name: page });
         },

     },
     mounted() {
         console.log('Voca Book List Component mounted');
-        this.dataSelectList();
+        this.fetchBooks();
     }
 }
 </script>

9c51750

65ab45c

client/views/pages/teacher/textbook.vue

--- client/views/pages/teacher/textbook.vue

+++ client/views/pages/teacher/textbook.vue


 }
 </script>
 
-<style>
+<style scoped>
 .content-t {
     flex-wrap: wrap; 
     height: 90%;

 .flex {
     display: flex;
     flex-wrap: wrap;
-}
-.textbook, .textbook-add {
-    margin-bottom: 30px;
 }
 </style>

9c51750

65ab45c

package-lock.json

--- package-lock.json

+++ package-lock.json


 {
-  "name": "lms_front",
+  "name": "lms_front-1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "dependencies": {
+        "@amcharts/amcharts4": "^4.10.39",
         "@babel/cli": "7.19.3",
         "@babel/core": "7.19.3",
         "@jamescoyle/vue-icon": "^0.1.2",

         "@mdi/light-js": "^0.2.63",
         "axios": "^1.7.3",
         "babel-loader": "8.2.5",
+        "compress.js": "^2.1.2",
         "css-loader": "6.7.1",
         "express": "^4.18.1",
         "express-http-proxy": "^2.0.0",

         "vue-router": "4.1.5",
         "vue-style-loader": "4.1.3",
         "vue3-sfc-loader": "^0.8.4",
-        "vuex": "^4.1.0",
-        "webpack": "5.74.0",
-        "webpack-cli": "4.10.0"
+        "vuex": "^4.1.0"
+      },
+      "devDependencies": {
+        "webpack": "^5.93.0",
+        "webpack-cli": "^5.1.4"
+      }
+    },
+    "node_modules/@amcharts/amcharts4": {
+      "version": "4.10.39",
+      "resolved": "https://registry.npmjs.org/@amcharts/amcharts4/-/amcharts4-4.10.39.tgz",
+      "integrity": "sha512-5WbpZgI0m0Mf8Ydwlm1XWB8hIzkk6fJifzYmJqo5HLdA8jCQa+4I+8uOlGlvSMxbBTkvxanEgA2WX27+99X44w==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "core-js": "^3.0.0",
+        "d3-force": "^3.0.0",
+        "d3-geo": "^3.0.1",
+        "d3-geo-projection": "^4.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-transition": "^3.0.1",
+        "pdfmake": "^0.2.2",
+        "polylabel": "^1.0.2",
+        "raf": "^3.4.1",
+        "regression": "^2.0.1",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "tslib": "^2.0.1"
       }
     },
     "node_modules/@ampproject/remapping": {

         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
+      "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.25.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",

       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       }
+    },
+    "node_modules/@foliojs-fork/fontkit": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@foliojs-fork/fontkit/-/fontkit-1.9.2.tgz",
+      "integrity": "sha512-IfB5EiIb+GZk+77TRB86AHroVaqfq8JRFlUbz0WEwsInyCG0epX2tCPOy+UfaWPju30DeVoUAXfzWXmhn753KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@foliojs-fork/restructure": "^2.0.2",
+        "brotli": "^1.2.0",
+        "clone": "^1.0.4",
+        "deep-equal": "^1.0.0",
+        "dfa": "^1.2.0",
+        "tiny-inflate": "^1.0.2",
+        "unicode-properties": "^1.2.2",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/@foliojs-fork/linebreak": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@foliojs-fork/linebreak/-/linebreak-1.1.2.tgz",
+      "integrity": "sha512-ZPohpxxbuKNE0l/5iBJnOAfUaMACwvUIKCvqtWGKIMv1lPYoNjYXRfhi9FeeV9McBkBLxsMFWTVVhHJA8cyzvg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "1.3.1",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/@foliojs-fork/pdfkit": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@foliojs-fork/pdfkit/-/pdfkit-0.14.0.tgz",
+      "integrity": "sha512-nMOiQAv6id89MT3tVTCgc7HxD5ZMANwio2o5yvs5sexQkC0KI3BLaLakpsrHmFfeGFAhqPmZATZGbJGXTUebpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@foliojs-fork/fontkit": "^1.9.1",
+        "@foliojs-fork/linebreak": "^1.1.1",
+        "crypto-js": "^4.2.0",
+        "png-js": "^1.0.0"
+      }
+    },
+    "node_modules/@foliojs-fork/restructure": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@foliojs-fork/restructure/-/restructure-2.0.2.tgz",
+      "integrity": "sha512-59SgoZ3EXbkfSX7b63tsou/SDGzwUEK6MuB5sKqgVK1/XE0fxmpsOb9DQI8LXW3KfGnAjImCGhhEb7uPPAUVNA==",
+      "license": "MIT"
     },
     "node_modules/@jamescoyle/vue-icon": {
       "version": "0.1.2",

       }
     },
     "node_modules/@types/estree": {
-      "version": "0.0.51",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
-      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
-      "license": "MIT"
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",

       "license": "MIT"
     },
     "node_modules/@webassemblyjs/ast": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
-      "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
-      "license": "MIT",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
+      "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==",
       "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+        "@webassemblyjs/helper-numbers": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
       }
     },
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
-      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
-      "license": "MIT"
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw=="
     },
     "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
-      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
-      "license": "MIT"
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q=="
     },
     "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
-      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
-      "license": "MIT"
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz",
+      "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw=="
     },
     "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
-      "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
-      "license": "MIT",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
+      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
       "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.11.1",
-        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
         "@xtuc/long": "4.2.2"
       }
     },
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
-      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
-      "license": "MIT"
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA=="
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
-      "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
-      "license": "MIT",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz",
+      "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/helper-buffer": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-        "@webassemblyjs/wasm-gen": "1.11.1"
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.12.1"
       }
     },
     "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
-      "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
-      "license": "MIT",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
+      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "node_modules/@webassemblyjs/leb128": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
-      "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
-      "license": "Apache-2.0",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
+      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
     },
     "node_modules/@webassemblyjs/utf8": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
-      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
-      "license": "MIT"
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA=="
     },
     "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
-      "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
-      "license": "MIT",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz",
+      "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/helper-buffer": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-        "@webassemblyjs/helper-wasm-section": "1.11.1",
-        "@webassemblyjs/wasm-gen": "1.11.1",
-        "@webassemblyjs/wasm-opt": "1.11.1",
-        "@webassemblyjs/wasm-parser": "1.11.1",
-        "@webassemblyjs/wast-printer": "1.11.1"
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/helper-wasm-section": "1.12.1",
+        "@webassemblyjs/wasm-gen": "1.12.1",
+        "@webassemblyjs/wasm-opt": "1.12.1",
+        "@webassemblyjs/wasm-parser": "1.12.1",
+        "@webassemblyjs/wast-printer": "1.12.1"
       }
     },
     "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
-      "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
-      "license": "MIT",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz",
+      "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-        "@webassemblyjs/ieee754": "1.11.1",
-        "@webassemblyjs/leb128": "1.11.1",
-        "@webassemblyjs/utf8": "1.11.1"
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
       }
     },
     "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
-      "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
-      "license": "MIT",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz",
+      "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/helper-buffer": "1.11.1",
-        "@webassemblyjs/wasm-gen": "1.11.1",
-        "@webassemblyjs/wasm-parser": "1.11.1"
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
+        "@webassemblyjs/wasm-gen": "1.12.1",
+        "@webassemblyjs/wasm-parser": "1.12.1"
       }
     },
     "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
-      "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
-      "license": "MIT",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz",
+      "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/helper-api-error": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-        "@webassemblyjs/ieee754": "1.11.1",
-        "@webassemblyjs/leb128": "1.11.1",
-        "@webassemblyjs/utf8": "1.11.1"
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
       }
     },
     "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
-      "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
-      "license": "MIT",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz",
+      "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.12.1",
         "@xtuc/long": "4.2.2"
       }
     },
     "node_modules/@webpack-cli/configtest": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
-      "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
-      "license": "MIT",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
+      "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.15.0"
+      },
       "peerDependencies": {
-        "webpack": "4.x.x || 5.x.x",
-        "webpack-cli": "4.x.x"
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
       }
     },
     "node_modules/@webpack-cli/info": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
-      "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
-      "license": "MIT",
-      "dependencies": {
-        "envinfo": "^7.7.3"
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
+      "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.15.0"
       },
       "peerDependencies": {
-        "webpack-cli": "4.x.x"
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
       }
     },
     "node_modules/@webpack-cli/serve": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
-      "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
-      "license": "MIT",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
+      "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.15.0"
+      },
       "peerDependencies": {
-        "webpack-cli": "4.x.x"
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
       },
       "peerDependenciesMeta": {
         "webpack-dev-server": {

     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "license": "BSD-3-Clause"
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "license": "Apache-2.0"
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "node_modules/accepts": {
       "version": "1.3.8",

         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
-      "license": "MIT",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "peerDependencies": {
         "acorn": "^8"
       }

       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
+      "integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==",
+      "license": "MIT"
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",

       },
       "engines": {
         "node": ">=8"
+      }
+    },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
       }
     },
     "node_modules/browserslist": {

         "node": ">=6.0"
       }
     },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
       "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-plain-object": "^2.0.4",

       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/combined-stream": {

       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
       "license": "MIT"
+    },
+    "node_modules/compress.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/compress.js/-/compress.js-2.1.2.tgz",
+      "integrity": "sha512-DBb6M4wwe0rRAPeiKQ8HJrWuocVppUw9Qte4rEXiDrc5X3TrzeRKLzpvSE9oZ0Nd4HTXSSFphj3/XWwuptkQqw=="
     },
     "node_modules/concat-map": {
       "version": "0.0.1",

       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "3.38.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.0.tgz",
+      "integrity": "sha512-XPpwqEodRljce9KswjZShh95qJ1URisBeKCjUdq27YdenkslVe7OO0ZJhlYXAChW7OhXaRLl8AAba7IBfoIHug==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",

       "engines": {
         "node": ">= 8"
       }
+    },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
     },
     "node_modules/css-loader": {
       "version": "6.7.1",

       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==",
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-projection": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-geo-projection/-/d3-geo-projection-4.0.0.tgz",
+      "integrity": "sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "d3-array": "1 - 3",
+        "d3-geo": "1.12.0 - 3"
+      },
+      "bin": {
+        "geo2svg": "bin/geo2svg.js",
+        "geograticule": "bin/geograticule.js",
+        "geoproject": "bin/geoproject.js",
+        "geoquantize": "bin/geoquantize.js",
+        "geostitch": "bin/geostitch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-projection/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",

         }
       }
     },
+    "node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",

         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
         "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       },
       "engines": {
         "node": ">= 0.4"

         "node": ">= 0.8",
         "npm": "1.2.8000 || >= 1.4.16"
       }
+    },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
     },
     "node_modules/ee-first": {
       "version": "1.1.1",

       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.13.0.tgz",
       "integrity": "sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==",
-      "license": "MIT",
+      "dev": true,
       "bin": {
         "envinfo": "dist/cli.js"
       },

       }
     },
     "node_modules/es-module-lexer": {
-      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
-      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
-      "license": "MIT"
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
+      "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw=="
     },
     "node_modules/es6-promise": {
       "version": "4.2.8",

       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
       "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 4.9.1"

       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
       "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "bin": {
         "flat": "cli.js"

       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"

         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hash-sum": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",

       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
       "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pkg-dir": "^4.2.0",

       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
-    "node_modules/interpret": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
-      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
-      "license": "MIT",
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
       "engines": {
-        "node": ">= 0.10"
+        "node": ">=12"
+      }
+    },
+    "node_modules/interpret": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
+      "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
       }
     },
     "node_modules/ipaddr.js": {

       "license": "MIT",
       "engines": {
         "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-binary-path": {

       "version": "2.15.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz",
       "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==",
-      "license": "MIT",
+      "dev": true,
       "dependencies": {
         "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"

       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "isobject": "^3.0.1"

         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"

       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"

         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",

       "integrity": "sha512-HAKu/fG3HpHFO0AA8WE8q2g+gBJaZ9MG7fcKk+IJPLTGAD6Psw4443l+9DGRbOIh3/aXr7Phy0TjilYivJo5XQ==",
       "license": "MIT"
     },
+    "node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",

       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"

       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
       "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
+      "license": "MIT"
+    },
+    "node_modules/pdfmake": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/pdfmake/-/pdfmake-0.2.11.tgz",
+      "integrity": "sha512-Ig9LBhIYWW8t0/MiXQPYOQdMgwjg+f3JS2iWA7q94Ftc4wSDO5VZP+a1+QN7uz3FbA7+vB4EEYfg3xU0wRPk8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@foliojs-fork/linebreak": "^1.1.1",
+        "@foliojs-fork/pdfkit": "^0.14.0",
+        "iconv-lite": "^0.6.3",
+        "xmldoc": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/pdfmake/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
       "license": "MIT"
     },
     "node_modules/pg": {

       },
       "engines": {
         "node": ">=8"
+      }
+    },
+    "node_modules/png-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/png-js/-/png-js-1.0.0.tgz",
+      "integrity": "sha512-k+YsbhpA9e+EFfKjTCH3VW6aoKlyNYI6NYdTfDL4CIvFnvsuO84ttonmZE7rc+v23SLTH8XX+5w/Ak9v0xGY4g=="
+    },
+    "node_modules/polylabel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/polylabel/-/polylabel-1.1.0.tgz",
+      "integrity": "sha512-bxaGcA40sL3d6M4hH72Z4NdLqxpXRsCFk8AITYg6x1rn1Ei3izf00UMLklerBZTO49aPA3CYrIwVulx2Bce2pA==",
+      "license": "ISC",
+      "dependencies": {
+        "tinyqueue": "^2.0.3"
       }
     },
     "node_modules/postcss": {

         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

       }
     },
     "node_modules/rechoir": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
-      "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
-      "license": "MIT",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
+      "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
+      "dev": true,
       "dependencies": {
-        "resolve": "^1.9.0"
+        "resolve": "^1.20.0"
       },
       "engines": {
-        "node": ">= 0.10"
+        "node": ">= 10.13.0"
       }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/regression/-/regression-2.0.1.tgz",
+      "integrity": "sha512-A4XYsc37dsBaNOgEjkJKzfJlE394IMmUPlI/p3TTI9u3T+2a+eox5Pr/CPUqF0eszeWZJPAc6QkroAhuUpWDJQ==",
+      "license": "MIT"
     },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "license": "MIT",
+      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",

       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
       "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "resolve-from": "^5.0.0"

       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
+      }
+    },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "engines": {
+        "node": ">= 0.8.15"
       }
     },
     "node_modules/safe-buffer": {

       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
+    },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "license": "ISC"
     },
     "node_modules/schema-utils": {
       "version": "2.7.1",

         "node": ">= 0.4"
       }
     },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",

       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
       "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "kind-of": "^6.0.2"

       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"

       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"

         "node": ">= 10.x"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",

       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "license": "MIT",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },

       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "license": "MIT"
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
+    "node_modules/tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==",
+      "license": "ISC"
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",

         "node": ">=0.6"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+      "license": "0BSD"
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",

       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.11.1.tgz",
       "integrity": "sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==",
       "license": "MIT"
+    },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
     },
     "node_modules/unpipe": {
       "version": "1.0.0",

       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
       "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
-      "license": "MIT",
       "dependencies": {
         "@vue/devtools-api": "^6.0.0-beta.11"
       },

       }
     },
     "node_modules/webpack": {
-      "version": "5.74.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
-      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
-      "license": "MIT",
+      "version": "5.93.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.93.0.tgz",
+      "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
-        "@types/estree": "^0.0.51",
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/wasm-edit": "1.11.1",
-        "@webassemblyjs/wasm-parser": "1.11.1",
+        "@types/estree": "^1.0.5",
+        "@webassemblyjs/ast": "^1.12.1",
+        "@webassemblyjs/wasm-edit": "^1.12.1",
+        "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.7.6",
-        "browserslist": "^4.14.5",
+        "acorn-import-attributes": "^1.9.5",
+        "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.10.0",
-        "es-module-lexer": "^0.9.0",
+        "enhanced-resolve": "^5.17.0",
+        "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.9",
+        "graceful-fs": "^4.2.11",
         "json-parse-even-better-errors": "^2.3.1",
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^3.1.0",
+        "schema-utils": "^3.2.0",
         "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.1.3",
-        "watchpack": "^2.4.0",
+        "terser-webpack-plugin": "^5.3.10",
+        "watchpack": "^2.4.1",
         "webpack-sources": "^3.2.3"
       },
       "bin": {

       }
     },
     "node_modules/webpack-cli": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
-      "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
-      "license": "MIT",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
+      "dev": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.2.0",
-        "@webpack-cli/info": "^1.5.0",
-        "@webpack-cli/serve": "^1.7.0",
+        "@webpack-cli/configtest": "^2.1.1",
+        "@webpack-cli/info": "^2.0.2",
+        "@webpack-cli/serve": "^2.0.5",
         "colorette": "^2.0.14",
-        "commander": "^7.0.0",
+        "commander": "^10.0.1",
         "cross-spawn": "^7.0.3",
+        "envinfo": "^7.7.3",
         "fastest-levenshtein": "^1.0.12",
         "import-local": "^3.0.2",
-        "interpret": "^2.2.0",
-        "rechoir": "^0.7.0",
+        "interpret": "^3.1.1",
+        "rechoir": "^0.8.0",
         "webpack-merge": "^5.7.3"
       },
       "bin": {
         "webpack-cli": "bin/cli.js"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14.15.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/webpack"
       },
       "peerDependencies": {
-        "webpack": "4.x.x || 5.x.x"
+        "webpack": "5.x.x"
       },
       "peerDependenciesMeta": {
         "@webpack-cli/generators": {
-          "optional": true
-        },
-        "@webpack-cli/migrate": {
           "optional": true
         },
         "webpack-bundle-analyzer": {

       }
     },
     "node_modules/webpack-cli/node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "license": "MIT",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
       "engines": {
-        "node": ">= 10"
+        "node": ">=14"
       }
     },
     "node_modules/webpack-merge": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
       "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "clone-deep": "^4.0.1",

       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"

       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
       "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/wrappy": {

       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
     },
+    "node_modules/xmldoc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/xmldoc/-/xmldoc-1.3.0.tgz",
+      "integrity": "sha512-y7IRWW6PvEnYQZNZFMRLNJw+p3pezM4nKYPfr15g4OOW9i8VpeydycFuipE2297OvZnh3jSb2pxOt9QpkZUVng==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": "^1.2.4"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

9c51750

65ab45c

package.json

--- package.json

+++ package.json


 {
   "dependencies": {
+    "@amcharts/amcharts4": "^4.10.39",
     "@babel/cli": "7.19.3",
     "@babel/core": "7.19.3",
     "@jamescoyle/vue-icon": "^0.1.2",

     "@mdi/light-js": "^0.2.63",
     "axios": "^1.7.3",
     "babel-loader": "8.2.5",
+    "compress.js": "^2.1.2",
     "css-loader": "6.7.1",
     "express": "^4.18.1",
     "express-http-proxy": "^2.0.0",

     "vue-router": "4.1.5",
     "vue-style-loader": "4.1.3",
     "vue3-sfc-loader": "^0.8.4",
-    "vuex": "^4.1.0",
-    "webpack": "5.74.0",
-    "webpack-cli": "4.10.0"
+    "vuex": "^4.1.0"
   },
   "scripts": {
     "prod": "set NODE_ENV=production&&node ./server/modules/web/server.js",

     "linux-dev": "export NODE_ENV=development&&node ./server/modules/web/server.js",
     "webpack-build": "webpack",
     "webpack-build-watch": "webpack --watch"
+  },
+  "devDependencies": {
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4"
   }
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -934,6 +934,10 @@
934	934	color: #999999;
935	935	}
936	936
	937	+.black {
	938	+ color: #000000;
	939	+}
	940	+
937	941	.cursor {
938	942	cursor: pointer;
939	943	}

...	...	@@ -70,7 +70,7 @@
70	70	box-sizing: border-box;
71	71	}
72	72
73		-
	73	+html, body, #root, #app{height: 100%;}
74	74	html,
75	75	body,
76	76	#root {

...	...	@@ -336,7 +336,7 @@
336	336	width: max-content;
337	337	position: absolute;
338	338	right: 45px;
339		- z-index: -1;
	339	+ z-index: 10000;
340	340	}
341	341	.myphoto .class{border-radius: 0px; padding: 10px;}
342	342	.myphoto .class .box {

...	...	@@ -5,20 +5,24 @@
5	5	<svg-icon type="mdi" :path="mdilChevronLeft" style="width: 50px; height: 50px;"></svg-icon>
6	6	<p class="title"> 이전글</p>
7	7	</button>
8		- <button @click="goToPage('PhotoDesign')" ><img src="../../../resources/img/btn19_74s_normal.png" alt="">
	8	+ <button @click="captureAndGoToPhotoDesign">
	9	+ <img src="../../../resources/img/btn19_74s_normal.png" alt="">
9	10	</button>
10	11	</div>
11		- <div class="body ">
12		-<img src="../../../resources/img/img140_747s.png" alt="">
	12	+ <div class="body" ref="body">
	13	+ <div id="container" ref="container">
	14	+ <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
	15	+ @canplay="onVideoLoaded"></video>
	16	+ </div>
13	17	</div>
14	18	</div>
15	19	</template>
	20	+
16	21
17	22	<script>
18	23	import SvgIcon from '@jamescoyle/vue-icon';
19	24	import { mdiMagnify, mdiWindowClose } from '@mdi/js';
20	25	import { mdilChevronRight, mdilChevronLeft } from '@mdi/light-js';
21		-
22	26	import axios from "axios";
23	27
24	28	export default {
...	...	@@ -31,26 +35,105 @@
31	35	mdilChevronLeft: mdilChevronLeft,
32	36	showModal: false,
33	37	searchOpen: false,
	38	+ photoTaken: false,
	39	+ stream: null,
	40	+ videoReady: false,
34	41	}
35	42	},
36	43	methods: {
37		-
38	44	goToPage(page) {
39	45	this.$router.push({ name: page });
40	46	},
41	47	closeModal() {
42	48	this.showModal = false;
	49	+ if (this.stream) {
	50	+ let tracks = this.stream.getTracks();
	51	+ tracks.forEach(track => track.stop());
	52	+ this.stream = null;
	53	+ }
43	54	},
44	55	buttonSearch() {
45	56	this.searchOpen = true;
46	57	},
47	58	closeBtn() {
48	59	this.searchOpen = false;
49		-
50	60	},
	61	+ onVideoLoaded() {
	62	+ this.videoReady = true;
	63	+ this.adjustContainerSize();
	64	+ },
	65	+ adjustContainerSize() {
	66	+ const video = this.$refs.modalVideoElement;
	67	+ const container = this.$refs.container;
	68	+ const body = this.$refs.body;
	69	+ if (video && container) {
	70	+ container.style.width = `${video.videoWidth}px`;
	71	+ container.style.height = `${video.videoHeight}px`;
	72	+ body.style.height = `${video.videoHeight}px`;
	73	+ }
	74	+ },
	75	+ captureAndGoToPhotoDesign() {
	76	+ const video = this.$refs.modalVideoElement;
	77	+ const canvas = document.createElement('canvas');
	78	+ canvas.width = video.videoWidth;
	79	+ canvas.height = video.videoHeight;
	80	+ const ctx = canvas.getContext('2d');
	81	+
	82	+ // 좌우 반전 적용
	83	+ ctx.translate(canvas.width, 0);
	84	+ ctx.scale(-1, 1);
	85	+
	86	+ ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	87	+ const imageDataUrl = canvas.toDataURL('image/png');
	88	+ this.$router.push({ name: 'PhotoDesign', query: { image: imageDataUrl } });
	89	+ }
	90	+ },
	91	+ mounted() {
	92	+ // Clear localStorage when the component is mounted
	93	+ localStorage.removeItem('capturedImage');
	94	+
	95	+ this.videoReady = false;
	96	+ navigator.mediaDevices.getUserMedia({ video: true })
	97	+ .then(stream => {
	98	+ const modalVideo = this.$refs.modalVideoElement;
	99	+ modalVideo.srcObject = stream;
	100	+ this.stream = stream;
	101	+ modalVideo.addEventListener('loadedmetadata', this.adjustContainerSize);
	102	+ })
	103	+ .catch(error => {
	104	+ console.log("error>>>>>>>>", error);
	105	+ });
51	106	},
52	107	components: {
53	108	SvgIcon
54	109	},
55	110	}
56	111	</script>
	112	+
	113	+
	114	+<style>
	115	+.body {
	116	+ width: 1435px;
	117	+ height: auto;
	118	+ margin: 0 auto;
	119	+}
	120	+
	121	+#container {
	122	+ position: relative;
	123	+ margin: auto;
	124	+ border: 10px #333 solid;
	125	+ display: flex;
	126	+ justify-content: center;
	127	+ align-items: center;
	128	+}
	129	+
	130	+video {
	131	+ width: 100%;
	132	+ height: auto;
	133	+ background-color: #666;
	134	+}
	135	+
	136	+.mirrored {
	137	+ transform: scaleX(-1);
	138	+}
	139	+</style>

...	...	@@ -1,63 +1,169 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
	2	+ <div id="Chapter1_1" class="content-wrap">
3	3	<div class="title-box mb25 flex align-center mt40">
4		- <span class="title mr40">1. Hello WORLD</span>
5		- <span class="subtitle">my name is dd</span>
	4	+ <span class="title mr40">1. Hello WORLD</span>
	5	+ <span class="subtitle">my name is dd</span>
6	6	</div>
7	7	<div class="flex justify-between align-center">
8		- <div class="pre-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/left.png" alt=""></div>
9		- <div class="content title-box">
10		- <p class="title mt25 title-bg">step2</p>
11		- <div class="flex align-center mb30">
12		- <p class="subtitle2 mr20">오늘 배웠던 단어를 말하고 생성된 예문을 따라 읽어보세요</p>
13		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
14		- </button> -->
15		- </div>
16		- <div class="flex justify-center ">
17		- <div class="readGroup">
18		- <section >
19		- <div class="imgGroup flex justify-center">
20		- <div class="mic-btn">
21		- <img src="../../../../resources/img/btn11_s.png" alt="">
22		- </div>
23		-
24		- </div>
25		- <article >
26		- <input type="text" class="speak mb25" placeholder="오늘 배운 단어를 말해보세요!">
27		- <p class="read-ai"><img style="margin-top: -5px;" src="../../../../resources/img/img43_s.png" alt=""></p>
28		- </article>
29		-
30		- </section>
31		-
	8	+ <div class="pre-btn" @click="goToPage('Chapter2')">
	9	+ <img src="../../../../resources/img/left.png" alt="" />
32	10	</div>
33		- </div>
34		- </div>
35		- <div class="next-btn" @click="goToPage('Chapter2_2')"><img src="../../../../resources/img/right.png" alt=""></div>
	11	+ <div class="content title-box">
	12	+ <p class="title mt25 title-bg">step2</p>
	13	+ <div class="flex align-center mb30">
	14	+ <p class="subtitle2 mr20">오늘 배웠던 단어를 말하고 생성된 예문을 따라 읽어보세요</p>
	15	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	16	+ </button> -->
	17	+ </div>
	18	+ <div>
	19	+ <img src="http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png" data-num="1" />
	20	+ <p> {{ word }} </p>
	21	+ <p> {{ mean }} </p>
	22	+ </div>
	23	+ <div class="flex justify-center">
	24	+ <div class="readGroup">
	25	+ <section>
	26	+ <div class="imgGroup flex justify-center">
	27	+ <!-- 녹음 버튼 -->
	28	+ <div :class="['mic-btn', { notRecording: !isRecording }]" @click="toggleRecording">
	29	+ <img src="../../../../resources/img/btn11_s.png" alt="" />
	30	+ </div>
	31	+ </div>
	32	+ <article>
	33	+ <p class="speakText mb25">
	34	+ <span v-if="transcription === null"
	35	+ >위의 버튼을 누른 후 오늘 배운 단어를 말해보세요!</span
	36	+ >
	37	+ <span v-else-if="!transcription \|\| transcription.trim() === ''"
	38	+ >다시 말해보세요!</span
	39	+ >
	40	+ <span v-else>{{ transcription }}</span>
	41	+ </p>
	42	+ <p class="read-ai">
	43	+ <img style="margin-top: -5px" src="../../../../resources/img/img43_s.png" alt="" />
	44	+ </p>
	45	+ </article>
	46	+ </section>
	47	+ </div>
	48	+ </div>
	49	+ </div>
	50	+ <div class="next-btn" @click="goToPage('Chapter2_2')">
	51	+ <img src="../../../../resources/img/right.png" alt="" />
	52	+ </div>
36	53	</div>
37		- </div>
38		- </template>
39		-
40		- <script>
41		- export default {
42		- data() {
	54	+ </div>
	55	+</template>
	56	+
	57	+<script>
	58	+import axios from 'axios';
	59	+import SvgIcon from '@jamescoyle/vue-icon';
	60	+import { mdiStop } from '@mdi/js';
	61	+export default {
	62	+ data() {
43	63	return {
44		- }
45		- },
46		- methods: {
	64	+ isRecording: false, // 녹음 중 여부
	65	+ mediaRecorder: null,
	66	+ audioChunks: [], // 녹음된 오디오 데이터
	67	+ audioBlob: null, // 오디오 Blob 객체
	68	+ transcription: null, // 서버에서 받아온 텍스트 결과
	69	+ stream: null, // MediaStream 객체
	70	+
	71	+ path: mdiStop,
	72	+
	73	+ /* audioURL : null // 오디오 URL 객체 */
	74	+
	75	+ word : "apple",
	76	+ mean : "사과",
	77	+ imageSrc : "http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png"
	78	+ };
	79	+ },
	80	+ methods: {
47	81	goToPage(page) {
48		- this.$router.push({ name: page });
49		- }
50		- },
51		- watch: {
52		-
53		- },
54		- computed: {
55		-
56		- },
57		- components: {
58		- },
59		- mounted() {
60		-
61		- }
62		- }
63		- </script> (파일 끝에 줄바꿈 문자 없음)
	82	+ this.$router.push({ name: page });
	83	+ },
	84	+ // 녹음 시작/중지 토글
	85	+ async toggleRecording() {
	86	+ if (this.isRecording) {
	87	+ console.log('녹음 그만!');
	88	+ this.stopRecording(); // 녹음 중이면 중지
	89	+ } else {
	90	+ console.log('녹음 시작!');
	91	+ await this.startRecording(); // 녹음 중이 아니면 녹음 시작
	92	+ }
	93	+ },
	94	+
	95	+ // 녹음 시작
	96	+ async startRecording() {
	97	+ this.audioChunks = []; // 오디오 초기화
	98	+ this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
	99	+ this.mediaRecorder = new MediaRecorder(this.stream);
	100	+ this.mediaRecorder.ondataavailable = (event) => {
	101	+ this.audioChunks.push(event.data); // 녹음 데이터 저장
	102	+ };
	103	+ this.mediaRecorder.onstop = () => {
	104	+ this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
	105	+
	106	+ /******************************/
	107	+ // this.audioURL = URL.createObjectURL(this.audioBlob); // 오디오 URL 생성
	108	+ // console.log('Audio URL:', this.audioURL);
	109	+ /******************************/
	110	+
	111	+ console.log('Recorded Audio Blob:', this.audioBlob); // 콘솔에 Blob 확인
	112	+ this.sendAudioToServer(); // 서버로 오디오 전송
	113	+ };
	114	+ this.mediaRecorder.start(); // 녹음 시작
	115	+ this.isRecording = true; // 녹음 상태 변경
	116	+ },
	117	+
	118	+ // 녹음 중지
	119	+ stopRecording() {
	120	+ this.mediaRecorder.stop(); // 녹음 중단
	121	+
	122	+ if (this.stream) {
	123	+ this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지
	124	+ }
	125	+
	126	+ this.isRecording = false; // 녹음 상태 변경
	127	+ },
	128	+
	129	+ // 오디오 전송
	130	+ async sendAudioToServer() {
	131	+ const formData = new FormData();
	132	+ formData.append('file', this.audioBlob, 'recording.wav');
	133	+ try {
	134	+ const resposne = await axios.post('/api/speechToText.json', formData, {
	135	+ headers: {
	136	+ 'Content-Type': 'multipart/form-data',
	137	+ },
	138	+ });
	139	+ this.transcription = resposne.data;
	140	+ console.log(`받은 데이터 : ${this.transcription}`);
	141	+ } catch (error) {
	142	+ console.log('파일 전송 실패 : ', error);
	143	+ }
	144	+ },
	145	+ },
	146	+ watch: {},
	147	+ computed: {},
	148	+ components: {
	149	+ SvgIcon,
	150	+ },
	151	+ mounted() {},
	152	+};
	153	+</script>
	154	+<style scoped>
	155	+.mic-btn {
	156	+ cursor: pointer;
	157	+}
	158	+.mic-btn.notRecording {
	159	+ background-image: none;
	160	+ cursor: pointer;
	161	+}
	162	+.speakText {
	163	+ background-color: #fff8e9;
	164	+ border: 0;
	165	+}
	166	+.speakText span {
	167	+ font-size: 28px;
	168	+}
	169	+</style> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -6,96 +6,49 @@
6	6	<div>
7	7	<div class="title-box flex justify-end mb40">
8	8	<select name="" id="">
9		- <option value="">A반</option>
	9	+ <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId" @click="currentPage = 1; stdPhotoSelectList(classItem.sclsId)">
	10	+ {{ classItem.sclsNm }}
	11	+ </option>
10	12	</select>
11	13	</div>
12		- <div class="btnGroup">
13		- <button @click="selectedTab = 'tab1'" type="button" title="글쓰기" class="tab-btn">
14		- <img v-if="selectedTab !== 'tab1'" src="../../../resources/img/btn49_15s_normal.png" alt="">
	14	+ <div class="btnGroup" style="display: flex; flex-direction: column;">
	15	+ <button v-for="n in totalPages" :key="n" @click="changePage(n)" type="button" title="페이지 버튼" class="tab-btn">
	16	+ <img v-if="currentPage !== n" src="../../../resources/img/btn49_15s_normal.png" alt="">
15	17	<img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
16		- <p :class="{ 'custom-style': selectedTab === 'tab1' }">1</p>
	18	+ <p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
17	19	</button>
18	20	</div>
19	21	<div v-if="selectedTab === 'tab1'" class="tab-box">
20	22	<div class="flex justify-between">
21		- <div class="photo" style="transform: rotate(2deg);" @click="buttonSearch">
22		- <div class="class ">
	23	+ <div v-for="(photo, index) in (photoList?.result \|\| []).slice(0, 3)" :key="index" class="photo" :style="{ transform: getRotation(index) }" @click="buttonSearch(photo)">
	24	+ <div class="class">
23	25	<div class="box">
24	26	<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
25	27	</div>
26	28	<div class="text flex justify-between mt20">
27		- <span class="member ml30">20</span>
28		- <p class="title2">1단원</p>
	29	+ <span class="member ml30">{{ photo.likeData }}</span>
	30	+ <p class="title2">{{ photo.unitName }}</p>
29	31	</div>
30		- </div>
31		- </div>
32		- <div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
33		- <div class="class photo">
34		- <div class="box">
35		- <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
36		- </div>
37		- <div class="text flex justify-between mt20">
38		- <span class="member ml30">20</span>
39		- <p class="title2">1단원</p>
40		- </div>
41		-
42		- </div>
43		- </div>
44		- <div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
45		- <div class="class ">
46		- <div class="box">
47		- <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
48		- </div>
49		- <div class="text flex justify-between mt20">
50		- <span class="member ml30">20</span>
51		- <p class="title2">1단원</p>
52		- </div>
53		-
54	32	</div>
55	33	</div>
56	34	</div>
57	35	<div class="flex justify-between mt50">
58		- <div class="photo" style="transform: rotate(-2deg);" @click="buttonSearch">
59		- <div class="class ">
	36	+ <div v-for="(photo, index) in (photoList?.result \|\| []).slice(3, 6)" :key="index + 3" class="photo" :style="{ transform: getRotation(index + 3) }" @click="buttonSearch(photo)">
	37	+ <div class="class">
60	38	<div class="box">
61	39	<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
62	40	</div>
63	41	<div class="text flex justify-between mt20">
64		- <span class="member ml30">20</span>
65		- <p class="title2">1단원</p>
66		- </div>
67		-
68		- </div>
69		- </div>
70		- <div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
71		- <div class="class ">
72		- <div class="box">
73		- <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
74		- </div>
75		- <div class="text flex justify-between mt20">
76		- <span class="member ml30">20</span>
77		- <p class="title2">1단원</p>
78		- </div>
79		-
80		- </div>
81		- </div>
82		- <div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
83		- <div class="class ">
84		- <div class="box">
85		- <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
86		- </div>
87		- <div class="text flex justify-between mt20">
88		- <span class="member ml30">20</span>
89		- <p class="title2">1단원</p>
	42	+ <span class="member ml30">{{ photo.likeData }}</span>
	43	+ <p class="title2">{{ photo.unitName }}</p>
90	44	</div>
91	45	</div>
92	46	</div>
93	47	</div>
94		-
95	48	</div>
96	49	<div class="popup-wrap" v-show="searchOpen">
97		- <div class="popup-box ">
98		- <div class="flex mb10 justify-between">
	50	+ <div class="popup-box">
	51	+ <div class="flex mb10 justify-between">
99	52	<p class="popup-title">알림</p>
100	53	<button type="button" class="popup-close-btn" @click="closeBtn">
101	54	<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
...	...	@@ -104,12 +57,16 @@
104	57	<div class="box">
105	58	<div><img src="../../../resources/img/img184_91t.png" alt=""></div>
106	59	</div>
107		- <div class="text flex justify-between mt20">
108		- <span class=" title1">1단원을 마친 <em class="yellow">가나다</em>친구</span>
109		- <p class="title2 date">2024-08-06</p>
	60	+ <div class="text flex justify-between mt20" v-if="photoData.length > 0">
	61	+ <span class="title1">{{ photoData[0].unitName }}을 마친 <em class="yellow">{{ photoData[0].stdName }}</em>친구</span>
	62	+ <p class="title2 date">{{ photoData[0].photoDate }}</p>
	63	+ </div>
	64	+ <div class="text flex justify-between mt20" v-else>
	65	+ <span class="title1">데이터를 불러올 수 없습니다.</span>
110	66	</div>
111	67	</div>
112	68	</div>
	69	+
113	70	</div>
114	71	</div>
115	72	</template>
...	...	@@ -119,11 +76,21 @@
119	76	import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
120	77	import { mdilArrowRight } from '@mdi/light-js';
121	78	import ProgressBar from '../../component/ProgressBar.vue';
	79	+import axios from "axios";
122	80
123	81
124	82	export default {
125	83	data() {
126	84	return {
	85	+ classList: [],
	86	+ photoList: [],
	87	+
	88	+ photoData: [],
	89	+
	90	+ currentPage: 1,
	91	+ pageSize: 6,
	92	+ totalPages: 1,
	93	+
127	94	mdiWindowClose: mdiWindowClose,
128	95	selectedTab: 'tab1',
129	96	mdiMagnify: mdiMagnify,
...	...	@@ -136,15 +103,95 @@
136	103	}
137	104	},
138	105	methods: {
	106	+ stdClassesSelectList: function () {
	107	+ const vm = this;
	108	+ axios({
	109	+ url: "/classes/selectClass.json",
	110	+ method: "post",
	111	+ headers:{
	112	+ "Content-Type": "application/json; charset=UTF-8",
	113	+ },
	114	+ data: {
	115	+ userId:"1"
	116	+ }
	117	+ })
	118	+ .then(function (response) {
	119	+ console.log("classList - response : ", response.data);
	120	+ vm.classList = response.data.data;
	121	+ vm.currentPage = 1;
	122	+ })
	123	+ .catch(function (error) {
	124	+ console.log("classList - error : ", error);
	125	+ alert("학생 반 조회에 오류가 발생했습니다.");
	126	+ });
	127	+ },
	128	+
	129	+ stdPhotoSelectList: function (sclsId) {
	130	+ const vm = this;
	131	+ axios({
	132	+ url: "/photo/stdPhotoList.json",
	133	+ method: "post",
	134	+ headers:{
	135	+ "Content-Type": "application/json; charset=UTF-8",
	136	+ },
	137	+ data: {
	138	+ "stdId":"1",
	139	+ "sclsId":"1", // 여기에 sclsId들어가야함
	140	+ page: vm.currentPage,
	141	+ pageSize: vm.pageSize
	142	+ }
	143	+ })
	144	+ .then(function (response) {
	145	+ console.log("photoList - response : ", response.data);
	146	+ vm.photoList = response.data;
	147	+ vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
	148	+ })
	149	+ .catch(function (error) {
	150	+ console.log("photoList - error : ", error);
	151	+ alert("반별 내 사진 조회에 오류가 발생했습니다.");
	152	+ });
	153	+ },
	154	+
	155	+ getRotation(index) {
	156	+ const rotations = [2, -1, 1, -2, 1, -1];
	157	+ return `rotate(${rotations[index]}deg)`;
	158	+ },
	159	+
	160	+ changePage(pageNumber) {
	161	+ this.currentPage = pageNumber;
	162	+ this.stdPhotoSelectList(this.selectedClassId);
	163	+ },
	164	+
139	165	closeModal() {
140	166	this.showModal = false;
141	167	},
142		- buttonSearch() {
	168	+ buttonSearch(photo) {
	169	+ if(!photo) return;
	170	+
	171	+ const vm = this;
143	172	this.searchOpen = true;
	173	+ axios({
	174	+ url: "/photo/photoDetail.json",
	175	+ method: "post",
	176	+ headers:{
	177	+ "Content-Type": "application/json; charset=UTF-8",
	178	+ },
	179	+ data: {
	180	+ "photoId":photo.photoId
	181	+ }
	182	+ })
	183	+ .then(function (response) {
	184	+ console.log("photoData - response : ", response.data);
	185	+ vm.photoData = response.data;
	186	+ })
	187	+ .catch(function (error) {
	188	+ console.log("photoData - error : ", error);
	189	+ alert("사진 조회에 오류가 발생했습니다.");
	190	+ });
144	191	},
	192	+
145	193	closeBtn() {
146	194	this.searchOpen = false;
147		-
148	195	},
149	196	goToPage(page) {
150	197	this.$router.push({ name: page });
...	...	@@ -173,7 +220,12 @@
173	220
174	221	},
175	222	computed: {
176		-
	223	+ currentPhotos() {
	224	+ // 현재 페이지에 해당하는 사진들만 반환
	225	+ const start = (this.currentPage - 1) * this.pageSize;
	226	+ const end = start + this.pageSize;
	227	+ return this.photoList.result.slice(start, end);
	228	+ }
177	229	},
178	230	components: {
179	231	SvgIcon,
...	...	@@ -181,6 +233,15 @@
181	233	},
182	234	mounted() {
183	235	console.log('Main2 mounted');
	236	+ this.stdClassesSelectList();
	237	+ this.stdPhotoSelectList();
184	238	}
185	239	}
186		-</script> (파일 끝에 줄바꿈 문자 없음)
	240	+</script>
	241	+
	242	+<style>
	243	+.btnGroup button {
	244	+ cursor: pointer;
	245	+ z-index: 100000;
	246	+}
	247	+</style> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -5,13 +5,14 @@
5	5	<span class="title mr40">기념 사진을 꾸며봅시다.</span>
6	6	</div>
7	7	<div class="flex justify-between align-center" style="gap: 40px;">
8		- <div class="content " style="padding: 30px;">
	8	+ <div class="content" style="padding: 30px;">
9	9	<div class="tool">
10	10	<div class="flex justify-center mb20" style="gap: 20px;">
11		- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" :class="{ active: selectedIndex === index }">
12		- <img :src="item.imgSrc1" style="display: block;">
13		- <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
14		- </button>
	11	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
	12	+ :class="{ active: selectedIndex === index }">
	13	+ <img :src="item.imgSrc1" style="display: block;">
	14	+ <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
	15	+ </button>
15	16	</div>
16	17	</div>
17	18	<div class="stickers">
...	...	@@ -31,8 +32,8 @@
31	32	</div>
32	33	</div>
33	34	<div>
34		- <div class="content " style="height: 549px; width: 973px;">
35		- <button><img src="../../../resources/img/img143_75s.png" alt=""></button>
	35	+ <div class="content" style="height: 549px; width: 973px;">
	36	+ <button><img class="captured-img" :src="capturedImage" alt="Captured Image"></button>
36	37	</div>
37	38	<div class="btn-wrap flex justify-center mt40" style="gap: 40px;">
38	39	<button class="login-btn" @click="goToPage('Camera')">
...	...	@@ -40,8 +41,8 @@
40	41	<p>재촬영</p>
41	42	</button>
42	43
43		- <button class="login-btn" type="submit" @click="goToPage('PhotoEdit')"><img
44		- src="../../../resources/img/btn07_s.png" alt="">
	44	+ <button class="login-btn" type="submit" @click="goToPage('PhotoEdit')">
	45	+ <img src="../../../resources/img/btn07_s.png" alt="">
45	46	<p>완성</p>
46	47	</button>
47	48	</div>
...	...	@@ -65,7 +66,6 @@
65	66	</button>
66	67	</div>
67	68	</div>
68		-
69	69	</div>
70	70	</div>
71	71	</template>
...	...	@@ -75,50 +75,49 @@
75	75	data() {
76	76	return {
77	77	items: [
78		- { imgSrc1: 'client/resources/img/btn20_75s_normal.png', imgSrc2: 'client/resources/img/btn20_75s_click.png', },
79		- { imgSrc1: 'client/resources/img/btn21_75s_normal.png', imgSrc2: 'client/resources/img/btn21_75s_click.png', },
	78	+ { imgSrc1: 'client/resources/img/btn20_75s_normal.png', imgSrc2: 'client/resources/img/btn20_75s_click.png' },
	79	+ { imgSrc1: 'client/resources/img/btn21_75s_normal.png', imgSrc2: 'client/resources/img/btn21_75s_click.png' },
80	80	],
81		- timer: '00',
82	81	selectedIndex: 0,
	82	+ };
	83	+ },
	84	+ computed: {
	85	+ capturedImage() {
	86	+ // Retrieve the captured image from route query parameters
	87	+ return this.$route.query.image \|\| ''; // Return an empty string if no image is provided
83	88	}
84	89	},
85	90	methods: {
86	91	updateContent(index) {
87		- this.selectedIndex = index;
88		- // this.currentCon = this.items[index].con;
89		- },
	92	+ this.selectedIndex = index;
	93	+ },
90	94	goToPage(page) {
91	95	this.$router.push({ name: page });
92	96	},
93		- startTimer() {
94		- if (this.intervalId) {
95		- clearInterval(this.intervalId);
96		- }
97		- this.timer = 5;
98		- this.intervalId = setInterval(() => {
99		- if (this.timer > 0) {
100		- this.timer--;
101		- } else {
102		- clearInterval(this.intervalId);
103		- }
104		- }, 1000);
105		- }
106		- },
107		- watch: {
	97	+ // captureAndGoToPhotoDesign() {
	98	+ // const video = this.$refs.modalVideoElement;
	99	+ // const canvas = document.createElement('canvas');
	100	+ // canvas.width = video.videoWidth;
	101	+ // canvas.height = video.videoHeight;
	102	+ // const ctx = canvas.getContext('2d');
108	103
109		- },
110		- computed: {
	104	+ // // 좌우 반전 적용
	105	+ // ctx.translate(canvas.width, 0);
	106	+ // ctx.scale(-1, 1);
111	107
	108	+ // ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	109	+ // const imageDataUrl = canvas.toDataURL('image/png');
	110	+ // this.$router.push({ name: 'PhotoDesign', query: { image: imageDataUrl } });
	111	+ // }
112	112	},
113		- components: {
114		- },
115		- mounted() {
116		-
117		- }
118	113	}
119	114	</script>
	115	+
120	116	<style scoped>
121		-.content{width: 19%;}
	117	+.captured-img {
	118	+ margin: auto auto;
	119	+}
	120	+
122	121	.imgGroup {
123	122	width: fit-content;
124	123	}
...	...	@@ -164,5 +163,8 @@
164	163	.pickGroup article>div>p {
165	164	font-size: 64px;
166	165	}
167		-.popTxt{width: 101px;}
168		-</style> (파일 끝에 줄바꿈 문자 없음)
	166	+
	167	+.popTxt {
	168	+ width: 101px;
	169	+}
	170	+</style>

...	...	@@ -12,23 +12,58 @@
12	12	<button>3</button>
13	13	</div>
14	14	<div class="search-wrap flex justify-end mb20">
15		- <select name="" id="" class="mr10 data-wrap">
16		- <option value="">전체</option>
17		- </select>
18		- <input type="text" placeholder="검색하세요.">
19		- <button type="button" title="위원회 검색">
20		- <img src="../../../resources/img/look_t.png" alt="">
21		- </button>
22		- </div>
23		- <div class="table-wrap">
24		- <table>
25		- <thead>
	15	+ <select name="" id="" class="mr10 data-wrap" v-model="searchOption">
	16	+ <option value="">전체</option>
	17	+ <option value="">제목</option>
	18	+ <option value="prblm_expln">문제</option>
	19	+ <option value="user_id">작성자</option>
	20	+ <option value="">등록일</option>
	21	+ </select>
	22	+ <input type="text" placeholder="검색하세요." v-model="searchKeyword">
	23	+ <button type="button" title="위원회 검색" @click="searchProblems">
	24	+ <img src="../../../resources/img/look_t.png" alt="">
	25	+ </button>
	26	+ </div>
	27	+ <div class="table-wrap">
	28	+ <table>
	29	+ <thead>
	30	+ <tr>
26	31	<td>No.</td>
27	32	<td>제목</td>
28	33	<td>내용</td>
29	34	<td>유형</td>
30	35	<td>지문</td>
31	36	<td>등록일</td>
	37	+<<<<<<< HEAD
	38	+ </tr>
	39	+ </thead>
	40	+ <tbody>
	41	+ <tr v-for="(problem, index) in problems" :key="problem.prblmId" @click="[goToPage('QuestionDetail', selectQuestionList(problem))]">
	42	+ <td>{{ (currentPage - 1) * 10 + index + 1 }}</td>
	43	+ <td>제목</td>
	44	+ <td>{{ problem.prblmExpln }}</td>
	45	+ <td>{{ problem.userId }}</td>
	46	+ <td>오답률</td>
	47	+ <td>등록일</td>
	48	+ </tr>
	49	+ </tbody>
	50	+ </table>
	51	+ <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
	52	+ <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
	53	+ <img src="../../../resources/img/btn27_90t_normal.png" alt="">
	54	+ </button>
	55	+ <button :class="{ 'selected-btn': currentPage === 1 }" @click="changePage(1)">1</button>
	56	+ <button :class="{ 'selected-btn': currentPage === 2 }" @click="changePage(2)">2</button>
	57	+ <button :class="{ 'selected-btn': currentPage === 3 }" @click="changePage(3)">3</button>
	58	+ <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
	59	+ <img src="../../../resources/img/btn28_90t_normal.png" alt="">
	60	+ </button>
	61	+ </article>
	62	+ <div class="flex justify-end">
	63	+ <button type="button" title="등록" class="new-btn" @click="goToPage('QuestionInsert')">
	64	+ 등록
	65	+ </button>
	66	+=======
32	67	</thead>
33	68	<tbody>
34	69	<tr @click="goToPage('QuestionDetail')">
...	...	@@ -53,25 +88,35 @@
53	88	등록
54	89	</button>
55	90	</div>
	91	+>>>>>>> e47769b90c7ad4f0b34f38bb2a56a8a69a894941
56	92	</div>
	93	+ </div>
57	94	</template>
58	95
59	96	<script>
60	97	import SvgIcon from '@jamescoyle/vue-icon';
61		-import { mdiMagnify} from '@mdi/js';
62		-
	98	+import { mdiMagnify } from '@mdi/js';
	99	+import axios from 'axios';
63	100
64	101	export default {
65		- data () {
	102	+ data() {
66	103	return {
	104	+ problems: [],
67	105	mdiMagnify: mdiMagnify,
	106	+ currentPage: 1,
	107	+ totalPages: 3,
	108	+ searchOption: '',
	109	+ searchKeyword: '',
68	110	}
69	111	},
70	112	methods: {
71	113	goToPage(page) {
72		- this.$router.push({ name: page });
73		- },
74		- showConfirm(type) {
	114	+ this.$router.push({ name: page });
	115	+ },
	116	+ selectQuestionList(item) {
	117	+ sessionStorage.setItem("selectQuestionList", JSON.stringify(item));
	118	+ },
	119	+ showConfirm(type) {
75	120	let message = '';
76	121	if (type === 'cancel') {
77	122	message = '삭제하시겠습니까?';
...	...	@@ -85,19 +130,32 @@
85	130	this.goBack();
86	131	}
87	132	},
88		-
89		- },
90		- watch: {
91		-
92		- },
93		- computed: {
94		-
95		- },
96		- components:{
97		- SvgIcon
	133	+ async fetchProblems(page = 1) {
	134	+ try {
	135	+ const response = await axios.post('/problem/problemList.json', {
	136	+ option: this.searchOption,
	137	+ keyword: this.searchKeyword,
	138	+ pageSize: 10,
	139	+ startIndex: (page - 1) * 10
	140	+ });
	141	+ this.problems = response.data;
	142	+ this.currentPage = page;
	143	+ } catch (error) {
	144	+ console.error('문제 목록을 불러오는 중 오류가 발생했습니다.', error);
	145	+ }
	146	+ },
	147	+ changePage(page) {
	148	+ if (page < 1 \|\| page > this.totalPages) return;
	149	+ this.fetchProblems(page);
	150	+ this.currentPage = page;
	151	+ },
	152	+ searchProblems() {
	153	+ this.fetchProblems(1);
	154	+ }
98	155	},
99	156	mounted() {
100	157	console.log('Main2 mounted');
	158	+ this.fetchProblems();
101	159	}
102	160	}
103		-</script> (파일 끝에 줄바꿈 문자 없음)
	161	+</script>

...	...	@@ -1,18 +1,20 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3	3	<p class="title">단어장</p>
4		- <select name="" id="">
5		- <option value="UNIT_000000000000001">A교재</option>
	4	+ <select v-model="selectedBookId" @change="fetchUnits">
	5	+ <option v-for="book in books" :key="book.book_id" :value="book.book_id">
	6	+ {{ book.book_nm }}
	7	+ </option>
6	8	</select>
7	9	</div>
8	10	<label for="" class="title2">단원</label>
9		- <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
10		- <button class="selected-btn">1</button>
11		- <button>2</button>
12		- <button>3</button>
13		- </div>
	11	+ <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
	12	+ <button v-for="unit in units" :key="unit.unitId" @click="selectUnit(unit.unitId)" :class="{ 'selected-btn': selectedUnitId === unit.unitId }">
	13	+ {{ unit.unitName }}
	14	+ </button>
	15	+ </div>
14	16	<div class="search-wrap flex justify-between mb20 align-center">
15		- <div class="title2 gray">?단원 전체 목록</div>
	17	+ <div class="title2 gray flex"><div class="black">[{{ selectedUnitName }}]</div>단원 전체 목록</div>
16	18	<div>
17	19	<select name="" id="" class="mr10 data-wrap">
18	20	<option value="">지문</option>
...	...	@@ -31,15 +33,13 @@
31	33	<td>지문</td>
32	34	<td>단어 목록</td>
33	35	<td>작성자</td>
34		- <td>등록일</td>
35	36	</thead>
36	37	<tbody>
37	38	<tr v-for="(wordBook, index) in dataList" :key="wordBook.wdBookId" @click="goToViewPage('VocaDetail')">
38	39	<td>{{ createNo(index) }}</td>
39	40	<td>{{ wordBook.textTtl }}</td>
40	41	<td>{{ wordBook.wordsPreview }}</td>
41		- <td>{{ wordBook.userId }}</td>
42		- <td>{{ '' }}</td>
	42	+ <td>{{ wordBook.userNm }}</td>
43	43	</tr>
44	44	</tbody>
45	45	</table>
...	...	@@ -55,7 +55,7 @@
55	55	</button>
56	56	</article>
57	57	<div class="flex justify-end ">
58		- <button type="button" title="등록" class="new-btn" @click="goToPage('VocaInsert')">
	58	+ <button type="button" title="등록" class="new-btn" @click="goToViewPage('VocaInsert')">
59	59	등록
60	60	</button>
61	61	</div>
...	...	@@ -72,15 +72,57 @@
72	72	data () {
73	73	return {
74	74	mdiMagnify: mdiMagnify,
	75	+ books: [],
	76	+ units: [],
	77	+ selectedBookId: null, // 선택된 책 ID 저장 변수
	78	+ selectedUnitId: null, // 선택된 단원 ID 저장 변수
	79	+ selectedUnitName: '', // 선택된 단원의 이름 저장 변수
75	80	dataList: [],
76	81	currentPage: 0,
77	82	itemsPerPage: 2,
78		- totalPosts: 0,
79		- unitId: "UNIT_000000000000001"
	83	+ totalPosts: 0
80	84	}
81	85	},
82	86	methods: {
83	87
	88	+ // 모든 책 목록을 가져오는 메서드
	89	+ fetchBooks() {
	90	+ axios.post('/book/findAll.json')
	91	+ .then(response => {
	92	+ this.books = response.data;
	93	+ if (this.books.length > 0) {
	94	+ this.selectedBookId = this.books[1].book_id; // 두 번째 책을 선택하도록 기본 설정
	95	+ this.fetchUnits(); // 책 선택 후 단원 목록 가져오기
	96	+ }
	97	+ })
	98	+ .catch(error => {
	99	+ console.error("책 목록 가져오기 실패: ", error);
	100	+ });
	101	+ },
	102	+
	103	+ // 선택된 책의 단원 목록을 가져오는 메서드
	104	+ fetchUnits() {
	105	+ axios.post('/unit/unitList.json', { bookId: this.selectedBookId })
	106	+ .then(response => {
	107	+ this.units = response.data;
	108	+ if (this.units.length > 0) {
	109	+ this.selectUnit(this.units[4].unitId); // 다섯 번째 단원을 선택하도록 기본 설정
	110	+ }
	111	+ })
	112	+ .catch(error => {
	113	+ console.error("단원 목록 가져오기 실패: ", error);
	114	+ });
	115	+ },
	116	+
	117	+ // 단원을 선택했을 때 호출되는 메서드
	118	+ selectUnit(unitId) {
	119	+ this.selectedUnitId = unitId;
	120	+ const selectedUnit = this.units.find(unit => unit.unitId === unitId);
	121	+ this.selectedUnitName = selectedUnit ? selectedUnit.unitName : '';
	122	+ this.dataSelectList(); // 단어장 목록 조회
	123	+ },
	124	+
	125	+ // 단어장 목록 조회 메서드
84	126	dataSelectList() {
85	127	const vm = this;
86	128	axios({
...	...	@@ -90,7 +132,7 @@
90	132	"Content-Type": "application/json; charset=UTF-8",
91	133	},
92	134	data: {
93		- unitId: vm.unitId,
	135	+ unitId: vm.selectedUnitId,
94	136	page: vm.currentPage + 1,
95	137	pageSize: vm.itemsPerPage
96	138	},
...	...	@@ -134,6 +176,8 @@
134	176	alert("단어장 목록 조회에 오류가 발생했습니다.");
135	177	});
136	178	},
	179	+
	180	+ // 단어 목록 생략 String 생성 메서드
137	181	generateWordsPreview(words) {
138	182	const maxLength = 20; // 최대 표시 길이 설정
139	183	const wordString = words.join(', ');
...	...	@@ -144,9 +188,13 @@
144	188	return wordString;
145	189	}
146	190	},
	191	+
	192	+ // 단어장 NO 생성 메서드
147	193	createNo(index) {
148	194	return this.totalPosts - (this.currentPage * this.itemsPerPage + index);
149	195	},
	196	+
	197	+ // 페이지네이션 이동 메서드
150	198	goToPage(page) {
151	199	if (page < 0 \|\| page >= this.totalPages) {
152	200	return;
...	...	@@ -154,6 +202,8 @@
154	202	this.currentPage = page;
155	203	this.dataSelectList();
156	204	},
	205	+
	206	+ // 페이지 이동 메서드
157	207	goToViewPage(page) {
158	208	this.$router.push({ name: page });
159	209	},
...	...	@@ -184,7 +234,7 @@
184	234	},
185	235	mounted() {
186	236	console.log('Voca Book List Component mounted');
187		- this.dataSelectList();
	237	+ this.fetchBooks();
188	238	}
189	239	}
190	240	</script> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -167,7 +167,7 @@
167	167	}
168	168	</script>
169	169
170		-<style>
	170	+<style scoped>
171	171	.content-t {
172	172	flex-wrap: wrap;
173	173	height: 90%;
...	...	@@ -176,8 +176,5 @@
176	176	.flex {
177	177	display: flex;
178	178	flex-wrap: wrap;
179		-}
180		-.textbook, .textbook-add {
181		- margin-bottom: 30px;
182	179	}
183	180	</style>

...	...	@@ -1,5 +1,6 @@
1	1	{
2	2	"dependencies": {
	3	+ "@amcharts/amcharts4": "^4.10.39",
3	4	"@babel/cli": "7.19.3",
4	5	"@babel/core": "7.19.3",
5	6	"@jamescoyle/vue-icon": "^0.1.2",
...	...	@@ -7,6 +8,7 @@
7	8	"@mdi/light-js": "^0.2.63",
8	9	"axios": "^1.7.3",
9	10	"babel-loader": "8.2.5",
	11	+ "compress.js": "^2.1.2",
10	12	"css-loader": "6.7.1",
11	13	"express": "^4.18.1",
12	14	"express-http-proxy": "^2.0.0",
...	...	@@ -20,9 +22,7 @@
20	22	"vue-router": "4.1.5",
21	23	"vue-style-loader": "4.1.3",
22	24	"vue3-sfc-loader": "^0.8.4",
23		- "vuex": "^4.1.0",
24		- "webpack": "5.74.0",
25		- "webpack-cli": "4.10.0"
	25	+ "vuex": "^4.1.0"
26	26	},
27	27	"scripts": {
28	28	"prod": "set NODE_ENV=production&&node ./server/modules/web/server.js",
...	...	@@ -33,5 +33,9 @@
33	33	"linux-dev": "export NODE_ENV=development&&node ./server/modules/web/server.js",
34	34	"webpack-build": "webpack",
35	35	"webpack-build-watch": "webpack --watch"
	36	+ },
	37	+ "devDependencies": {
	38	+ "webpack": "^5.93.0",
	39	+ "webpack-cli": "^5.1.4"
36	40	}
37	41	}

Delete comment