Commit @c4b6fb7cc02706a8747ebfefa221dff52ce8e8a0

홍아랑 08-12

240812 홍아랑 웹캠 관련 기능 추가(이후 수정 필요)

@c4b6fb7cc02706a8747ebfefa221dff52ce8e8a0

2767c00

c4b6fb7

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>

2767c00

c4b6fb7

client/views/pages/main/Dashboard.vue

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

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


                 <div class="rabbit"><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>
             <!-- 팝업 -->
-            <div v-show="searchOpen" class="popup-wrap">
-                <div class="popup-box ">
-                    <div class=" mb30 text-ct">
-                        <p class="title1 mb20">1단원이 끝났습니다! </p>
-                        <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요 </p>
+            <div v-show="searchOpen2" class="popup-wrap">
+                <div class="popup-box">
+                    <button type="button" class="popup-close-btn" style="position:absolute; top:10px; right: 10px;"
+                        @click="closeModal">
+                        <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
+                    </button>
+
+                    <div class="mb30 text-ct">
+                        <p class="title1 mb20">1단원이 끝났습니다!</p>
+                        <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요</p>
                     </div>
-                    <div class="flex justify-center ">
-                        <button type="button" title="사진촬영" class="new-btn" @click="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="buttonSearch" 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="searchOpen">
                 <div class="popup-box ">
                     <div class="flex mb10  justify-between">

                     <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,
-            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();
+            });
 
         },
-    },
-    watch: {
+        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;
 
-    },
-    computed: {
+                canvas.width = this.canvasWidth;
+                canvas.height = this.canvasHeight;
+
+                const rect = canvas.getBoundingClientRect();
+                // 좌측 상단 좌표
+                const topLeft = {
+                    x: rect.left,
+                    y: rect.top
+                };
+
+                // 우측 하단 좌표
+                const bottomRight = {
+                    x: rect.right,
+                    y: rect.bottom
+                };
+
+                // 캔버스 크기 초기화
+                this.updateCanvasRect();
+
+                // 윈도우 리사이즈 이벤트 리스너 추가
+                window.addEventListener('resize', this.updateCanvasRect);
+
+                // 클릭 이벤트 핸들러 추가
+                this.$refs.canvas.addEventListener('click', this.handleCanvasClick);
+
+
+                // canvas.width = canvas.clientWidth;
+                // canvas.height = canvas.clientHeight;
+                // this.canvasWidth = canvas.clientWidth;
+                // this.canvasHeight = canvas.clientHeight;
+
+                context.clearRect(0, 0, canvas.width, canvas.height);  // 이전 이미지 있으면 초기화
+                context.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight);
+                this.addCanvasEventListeners(); //추가해야함
+            };
+            image.onerror = (error) => {
+                console.error("Error loading image: ", error);
+            };
+        },
+
+        addCanvasEventListeners() {
+            const canvas = this.$refs.canvas;
+            canvas.addEventListener('mousedown', this.onMouseDown);
+            canvas.addEventListener('mouseup', this.onMouseUp);
+            canvas.addEventListener('mousemove', this.onMouseMove);
+            canvas.addEventListener('click', this.onCanvasClick);
+        },
+        setTool(tool) {
+            this.tool = tool;
+        },
+        updateBrushSize() {
+            // 펜 굵기 변경 로직
+            if (this.tool === 'draw') {
+                this.setBrushSize(this.brushSize);
+            }
+        },
+        setBrushSize(size) {
+            this.brushSize = size;
+            const context = this.$refs.canvas.getContext('2d');
+            context.lineWidth = size;
+        },
+        // 캔버스 크기 갱신 함수
+        updateCanvasRect() {
+            const rect = this.$refs.canvas.getBoundingClientRect();
+            this.canvasRect = {
+                topLeft: { x: rect.left, y: rect.top },
+                bottomRight: { x: rect.right, y: rect.bottom }
+            };
+            console.log(">>>>>>>>>2222", rect.left);
+        },
+        getCanvasPosition(event) {
+
+            const rect = this.canvasRect;
+            console.log(">>>>>>>>>", this.canvasRect);
+            this.updateCanvasRect();
+
+            // 윈도우 리사이즈 이벤트 리스너 추가
+            window.addEventListener('resize', this.updateCanvasRect);
+
+            // 클릭 이벤트 핸들러 추가
+            this.$refs.canvas.addEventListener('click', this.handleCanvasClick);
+
+            // // 좌측 상단 좌표
+            // const topLeft = {
+            //     x: rect.left,
+            //     y: rect.top
+            // };
+
+            // // 우측 하단 좌표
+            // const bottomRight = {
+            //     x: rect.right,
+            //     y: rect.bottom
+            // };
+
+            // console.log(this.scrollLeft)
+
+            const x = event.clientX - rect.topLeft.x
+            const y = event.clientY - rect.topLeft.y
+
+
+            console.log(`클릭한 좌표: x=${event.clientX}, y=${event.clientY}`);
+            console.log(`계산베이스 좌표: x=${rect.topLeft.x}, y=${rect.topLeft.y}`);
+            console.log(`계산베이스 좌표: x=${rect.topLeft.x}, y=${rect.topLeft.y}`);
+            console.log(`계산된 좌표: x=${x}, y=${y}`);
+            return {
+                x, y
+            };
+        },
+        onMouseDown(event) {
+
+            // 캔버스 크기 초기화
+            this.updateCanvasRect();
+
+            // 윈도우 리사이즈 이벤트 리스너 추가
+            window.addEventListener('resize', this.updateCanvasRect);
+
+            // 클릭 이벤트 핸들러 추가
+            this.$refs.canvas.addEventListener('click', this.handleCanvasClick);
+
+            const { x, y } = this.getCanvasPosition(event);
+            this.startX = x;
+            this.startY = y;
+            const context = this.$refs.canvas.getContext('2d');
+            context.strokeStyle = this.color;
+            context.lineWidth = this.brushSize;  // 브러시 크기 설정
+            if (this.tool === 'draw') {
+                context.beginPath();
+                context.moveTo(this.startX, this.startY);
+                this.nextLineId++;
+            }
+            this.isDrawing = true;
+        },
+        onMouseUp(event) {
+            if (!this.isDrawing) return;
+            const { x, y } = this.getCanvasPosition(event);
+            const context = this.$refs.canvas.getContext('2d');
+            context.strokeStyle = this.color;
+            context.lineWidth = this.brushSize;  // 브러시 크기 설정
+            if (this.tool === 'rectangle') {
+                context.strokeRect(this.startX, this.startY, x - this.startX, y - this.startY);
+                this.drawHistory.push({ type: 'rectangle', startX: this.startX, startY: this.startY, endX: x, endY: y, color: this.color });
+            } else if (this.tool === 'circle') {
+                context.beginPath();
+                const radius = Math.sqrt(Math.pow((x - this.startX), 2) + Math.pow((y - this.startY), 2));
+                context.arc(this.startX, this.startY, radius, 0, 2 * Math.PI);
+                context.stroke();
+                this.drawHistory.push({ type: 'circle', startX: this.startX, startY: this.startY, radius, color: this.color });
+            } else if (this.tool === 'draw') {
+                context.lineTo(x, y);
+                context.stroke();
+                this.tempLines.push({ id: this.nextLineId, startX: this.startX, startY: this.startY, endX: x, endY: y, color: this.color });
+            }
+            this.isDrawing = false;
+        },
+        onMouseMove(event) {
+            if (!this.isDrawing || this.tool !== 'draw') return;
+            const { x, y } = this.getCanvasPosition(event);
+            const context = this.$refs.canvas.getContext('2d');
+            context.strokeStyle = this.color;
+            context.lineWidth = this.brushSize;  // 브러시 크기 설정
+            context.lineTo(x, y);
+            context.stroke();
+            this.tempLines.push({ id: this.nextLineId, startX: this.startX, startY: this.startY, endX: x, endY: y, color: this.color });
+            this.startX = x;
+            this.startY = y;
+        },
+        onCanvasClick(event) {
+            if (this.tool === 'eraser') {
+                const { x, y } = this.getCanvasPosition(event);
+                this.eraseDrawing(x, y);
+            }
+        },
+        eraseDrawing(x, y) {
+            const eraserRadius = 10;
+            this.drawHistory = this.drawHistory.filter(item => {
+                if (item.type === 'rectangle') {
+                    return !(x >= item.startX && x <= item.endX && y >= item.startY && y <= item.endY);
+                } else if (item.type === 'circle') {
+                    const distance = Math.sqrt(Math.pow((x - item.startX), 2) + Math.pow((y - item.startY), 2));
+                    return !(distance <= item.radius);
+                }
+            });
+            const linesToDelete = this.tempLines.filter(line => {
+                const distanceToLine = this.distanceToLineSegment(line.startX, line.startY, line.endX, line.endY, x, y);
+                return distanceToLine <= 10;
+            }).map(line => line.id);
+            this.tempLines = this.tempLines.filter(line => !linesToDelete.includes(line.id));
+            this.redraw();
+        },
+        distanceToLineSegment(x1, y1, x2, y2, px, py) {
+            const lengthSquared = Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2);
+            if (lengthSquared === 0) return Math.sqrt(Math.pow(px - x1, 2) + Math.pow(py - y1, 2));
+            const t = Math.max(0, Math.min(1, ((px - x1) * (x2 - x1) + (py - y1) * (y2 - y1)) / lengthSquared));
+            const projX = x1 + t * (x2 - x1);
+            const projY = y1 + t * (y2 - y1);
+            return Math.sqrt(Math.pow(px - projX, 2) + Math.pow(py - projY, 2));
+        },
+        clearAll() {
+            this.drawHistory = [];
+            this.stickers = [];
+            this.tempLines = [];
+            this.redraw();
+        },
+        redraw() {
+            const canvas = this.$refs.canvas;
+            const context = canvas.getContext('2d');
+            const image = new Image();
+            image.src = this.photo;
+            image.onload = () => {
+                context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+                context.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight);
+                this.drawHistory.forEach(item => {
+                    context.strokeStyle = item.color;
+                    if (item.type === 'draw') {
+                        context.beginPath();
+                        context.moveTo(item.startX, item.startY);
+                        context.lineTo(item.endX, item.endY);
+                        context.stroke();
+                    } else if (item.type === 'rectangle') {
+                        context.strokeRect(item.startX, item.startY, item.endX - item.startX, item.endY - item.startY);
+                    } else if (item.type === 'circle') {
+                        context.beginPath();
+                        context.arc(item.startX, item.startY, item.radius, 0, 2 * Math.PI);
+                        context.stroke();
+                    }
+                });
+                this.tempLines.forEach(line => {
+                    context.strokeStyle = line.color;
+                    context.beginPath();
+                    context.moveTo(line.startX, line.startY);
+                    context.lineTo(line.endX, line.endY);
+                    context.stroke();
+                });
+                this.stickers.forEach((sticker, index) => {
+                    context.drawImage(sticker.img, sticker.x, sticker.y, sticker.width, sticker.height);
+                });
+            };
+        },
+
 
     },
     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>

2767c00

c4b6fb7

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>
+.captured-img {
+  margin: auto auto;
+}
+
 .imgGroup {
   width: fit-content;
 }

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

2767c00

c4b6fb7

package-lock.json

--- package-lock.json

+++ package-lock.json


         "@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/@ampproject/remapping": {

       "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/@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"
       }

       "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",

       "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",

       "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": "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",

       "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",
+      "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": ">= 0.10"
+        "node": ">=10.13.0"
       }
     },
     "node_modules/ipaddr.js": {

       "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"
       },

       "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"

       "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"

       "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",

       }
     },
     "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/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"

       "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"

       "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"
       },

       "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": {

2767c00

c4b6fb7

package.json

--- package.json

+++ package.json


     "@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

...	...	@@ -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>

...	...	@@ -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,49 +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>
	117	+.captured-img {
	118	+ margin: auto auto;
	119	+}
	120	+
121	121	.imgGroup {
122	122	width: fit-content;
123	123	}
...	...	@@ -163,5 +163,8 @@
163	163	.pickGroup article>div>p {
164	164	font-size: 64px;
165	165	}
166		-.popTxt{width: 101px;}
167		-</style> (파일 끝에 줄바꿈 문자 없음)
	166	+
	167	+.popTxt {
	168	+ width: 101px;
	169	+}
	170	+</style>

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

Delete comment