Commit @30b5a373ea0ba1ba4346e9eb163502b7551cb63a

구자현 2024-08-13

240813 Dashboard 수정(이후 수정 필요)

@30b5a373ea0ba1ba4346e9eb163502b7551cb63a

b9cd63e

30b5a37

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import MyPlan2 from './main/MyPlan2.vue';
 import PhotoBook from './main/PhotoBook.vue';
 import Dashboard from './main/Dashboard.vue';
+import Dashboard2 from './main/Dashboard2.vue';
 import Camera from "./main/Camera.vue"
 import PhotoDesign from "./main/PhotoDesign.vue"
 import PhotoEdit from "./main/PhotoEdit.vue"

         component: Main,
         children: [
             { path: '/Dashboard.page', name: 'Dashboard', component: Dashboard },
+            { path: '/Dashboard2.page', name: 'Dashboard2', component: Dashboard2 },
             { path: '/MyPage.page', name: 'MyPage', component: MyPage },
             { path: '/MyPlan.page', name: 'MyPlan', component: MyPlan },
             { path: '/MyPlan2.page', name: 'MyPlan2', component: MyPlan2 },

b9cd63e

30b5a37

client/views/pages/main/Dashboard.vue

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

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


 <template>
-    <div class="main">
-        <div class="race-wrap">
-            <div class="title-box">
-                <p class="title">hello world!</p>
-                <p class="subtitle">hi my name is dd!</p>
-            </div>
-            <div class="race-box">
+    <div>
+        <div v-if="roadViewTF">
+            <!-- 1번 템플릿 -->
+            <div class="main">
+                <div class="race-wrap">
+                    <div class="title-box">
+                        <p class="title">hello world!</p>
+                        <p class="subtitle">hi my name is dd!</p>
+                    </div>
+                    <!--
+                    <div class="race-box">
+                        <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
+                        <div class="rcon flex justify-between mb5">
+                            <div class="race-btn" v-for="roadmap in roadmapData" :key="roadmap.learning_id" @click="goToPage('Chapter7')">
+                                <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2">
+                                    <img :src="item.imgSrc1">
+                                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                                </button>
+                                <p>{{getNonNullColumn(roadmap)}}</p>
+                            </div>
+                        </div>
+                    </div>
+                -->
+                <div class="race-box">
                 <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
                 <div class="rcon flex justify-end mb5">
                     <div class="race-btn" @click="goToPage('Chapter1')">

                     </div>
 
                     <div class="race-btn">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index"
-                            @click="toggleImageAndShowPopup(index, '11')">
+                        <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>
-
                 </div>
+                <div class="rabbit-end" @click="ShowPopup"><img src="../../../resources/img/img138_72s.png" alt=""></div>
             </div>
-            <!-- 팝업 -->
-            <div v-show="searchOpen2" class="popup-wrap">
-                <div class="popup-box">
-                    <button type="button" class="popup-close-btn" style="position:absolute; top:10px; right: 10px;"
-                        @click="closeModal">
-                        <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-                    </button>
-
-                    <div class="mb30 text-ct">
-                        <p class="title1 mb20">1단원이 끝났습니다!</p>
-                        <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요</p>
-                    </div>
-                    <div class="flex justify-center">
-                        <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal">
-                            사진 촬영
-                        </button>
-                    </div>
                 </div>
-            </div>
-
-            <!-- 카메라 모달 -->
-            <article v-show="showCameraModal" class="popup-wrap">
-                <div class="popup-box" style="top: 500px; left:500px">
-                    <div class="flex mb10 justify-between">
-                        <p class="popup-title">사진 촬영</p>
-                        <button type="button" class="popup-close-btn" @click="closeModal">
+                <!-- 팝업 -->
+                <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>
-                    <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 class="mb30 text-ct">
+                            <p class="title1 mb20">1단원이 끝났습니다!</p>
+                            <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요</p>
+                        </div>
+                        <div class="flex justify-center">
+                            <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal">
+                                사진 촬영
+                            </button>
                         </div>
                     </div>
-                    <div 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>
+                <!-- 카메라 모달 -->
+                <article v-show="showCameraModal" class="popup-wrap">
+                    <div class="popup-box" style="top: 500px; left:500px">
+                        <div class="flex mb10 justify-between">
+                            <p class="popup-title">사진 촬영</p>
+                            <button type="button" class="popup-close-btn" @click="closeModal">
+                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
+                            </button>
+                        </div>
+                        <div class="box">
+                            <div style="width: 100%;">
+                                <div id="container" ref="container">
+                                    <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
+                                        @canplay="onVideoLoaded"></video>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex justify-center mt20">
+                            <button type="button" class="new-btn" v-if="!photoTaken" @click="capturePhoto"
+                                :disabled="!videoReady">
+                                사진 촬영
+                            </button>
+                        </div>
                     </div>
-                    <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;">
+                </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="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 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 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>
-
+                </article>
+            </div>
         </div>
-        <div class="complete-wrap mt90 myphoto">
-            <h2 class="mb40">이 단원을 끝낸 친구들</h2>
-            <article class=" flex-column" style="gap: 5px;">
-                <div class="flex" style="gap: 5px;">
-                    <div @click="buttonSearch2" class="photo"><img src="../../../resources/img/img143_75s.png" alt=""></div>
-                    <div @click="buttonSearch" class="photo"><img src="../../../resources/img/img143_75s.png" alt=""></div>
+
+        <div v-else>
+            <!-- 2번 템플릿 -->
+            <div class="myplan">
+                <div class="title-box flex justify-between mb40">
+                    <p class="title">지금은 학습 루트가 등록이 안됐어요 ! 학습 일정에서 학습루트를 등록해볼까요 ?</p>
                 </div>
-            </article>
-            <!-- 팝업 -->
-            <article class="popup-wrap" v-show="searchOpen">
-                <div class="popup-box ">
-                    <div class="flex mb10  justify-between">
-                        <p class="popup-title">알림</p>
-                        <button type="button" class="popup-close-btn" @click="closeBtn2">
-                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
+                <div class="wrap" style="border-radius: 0; min-height: 197px;">
+                   <p class="title1"> 오늘 학습할 내용이 없습니다.</p>
+                </div>
+                <div class="yellow-box mt30">
+                    <div class="title-box flex justify-between align-center">
+                        <div >
+                            <p class="title">오늘 공부를 계획해봅시다.</p>
+                            <p class="title1 mt20"> 스스로 학습 일정을 바꿔볼까요?</p>
+                        </div>
+                        <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">
+                            바로가기
                         </button>
                     </div>
-                    <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="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>
-            </article>
+            </div>
         </div>
-
     </div>
 </template>
 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
+import axios from 'axios';
 
 export default {
     data() {

                     imgSrc2: 'client/resources/img/btn21_75s_click.png'     //스티커 선택됨
                 },
             ],
+            mdiMagnify: mdiMagnify,
             mdiWindowClose: mdiWindowClose,
             mdiHeart: mdiHeart,
             showModal: false,

             canvasRect: {
                 topLeft: { x: 0, y: 0 },
                 bottomRight: { x: 0, y: 0 }
-            }
+            },
 
+
+            roadViewTF : false,
+            roadmapData: [],
         }
     },
     methods: {
+        fetchRoadmapData() {
+            const vm = this;
+            axios({
+                url: "/unitLearning/find.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    unit_id: "UNIT_000000000000001",
+                    book_id: "BOOK_000000000000004"
+                }
+            })
+            .then(response => {
+                    console.log("roadmap - response : ", response.data);
+                    vm.roadmapData = response.data;
+                    vm.roadViewTF = vm.roadmapData.length > 0;
+            })
+            .catch(error => {
+                console.error("Error fetching roadmap data:", error);
+            });
+        },
+        getNonNullColumn(item) {
+            if (item.prblm_id !== null) return '문제';
+            if (item.wd_book_id !== null) return '단어장';
+            if (item.text_id !== null) return '지문';
+            if (item.eval_id !== null) return '평가';
+        return '';
+        },
         toggleImage(index) {
             this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
         },
         toggleImageAndShowPopup(index, dataNum) {
             this.toggleImage(index);
-            if (dataNum === '11') {  // 최종 평가 버튼 클릭 시
-                this.searchOpen2 = true;  // 모달창 열기
+            if (dataNum === '11') {
+                this.searchOpen2 = true;
             }
         },
         updateContent(index) {

                 });
             };
         },
+        getNonNullColumn(item) {
+            if (item.prblm_id !== null) return '문제';
+            if (item.wd_book_id !== null) return '단어장';
+            if (item.text_id !== null) return '지문';
+            if (item.eval_id !== null) return '평가';
+            return ''; 
+        },
+        showConfirm(type) {
+            let message = '';
+            if (type === 'cancel') {
+                message = '삭제하시겠습니까?';
+            } else if (type === 'reset') {
+                message = '초기화하시겠습니까?';
+            } else if (type === 'save') {
+                message = '등록하시겠습니까?';
+            }
 
-
+            if (confirm(message)) {
+                this.goBack();
+            }
+        },
     },
     components: {
         SvgIcon,
     },
     mounted() {
         console.log('main mounted');
-
-
+        this.fetchRoadmapData();
     },
     computed() {
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -8,6 +8,7 @@
8	8	import MyPlan2 from './main/MyPlan2.vue';
9	9	import PhotoBook from './main/PhotoBook.vue';
10	10	import Dashboard from './main/Dashboard.vue';
	11	+import Dashboard2 from './main/Dashboard2.vue';
11	12	import Camera from "./main/Camera.vue"
12	13	import PhotoDesign from "./main/PhotoDesign.vue"
13	14	import PhotoEdit from "./main/PhotoEdit.vue"
...	...	@@ -110,6 +111,7 @@
110	111	component: Main,
111	112	children: [
112	113	{ path: '/Dashboard.page', name: 'Dashboard', component: Dashboard },
	114	+ { path: '/Dashboard2.page', name: 'Dashboard2', component: Dashboard2 },
113	115	{ path: '/MyPage.page', name: 'MyPage', component: MyPage },
114	116	{ path: '/MyPlan.page', name: 'MyPlan', component: MyPlan },
115	117	{ path: '/MyPlan2.page', name: 'MyPlan2', component: MyPlan2 },

...	...	@@ -1,11 +1,28 @@
1	1	<template>
2		- <div class="main">
3		- <div class="race-wrap">
4		- <div class="title-box">
5		- <p class="title">hello world!</p>
6		- <p class="subtitle">hi my name is dd!</p>
7		- </div>
8		- <div class="race-box">
	2	+ <div>
	3	+ <div v-if="roadViewTF">
	4	+ <!-- 1번 템플릿 -->
	5	+ <div class="main">
	6	+ <div class="race-wrap">
	7	+ <div class="title-box">
	8	+ <p class="title">hello world!</p>
	9	+ <p class="subtitle">hi my name is dd!</p>
	10	+ </div>
	11	+ <!--
	12	+ <div class="race-box">
	13	+ <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
	14	+ <div class="rcon flex justify-between mb5">
	15	+ <div class="race-btn" v-for="roadmap in roadmapData" :key="roadmap.learning_id" @click="goToPage('Chapter7')">
	16	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2">
	17	+ <img :src="item.imgSrc1">
	18	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	19	+ </button>
	20	+ <p>{{getNonNullColumn(roadmap)}}</p>
	21	+ </div>
	22	+ </div>
	23	+ </div>
	24	+ -->
	25	+ <div class="race-box">
9	26	<div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
10	27	<div class="rcon flex justify-end mb5">
11	28	<div class="race-btn" @click="goToPage('Chapter1')">
...	...	@@ -94,210 +111,188 @@
94	111	</div>
95	112
96	113	<div class="race-btn">
97		- <button class="popTxt" v-for="(item, index) in items" :key="index"
98		- @click="toggleImageAndShowPopup(index, '11')">
	114	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
	115	+ data-num="11">
99	116	<img :src="item.imgSrc3">
100	117	<img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
101	118	</button>
102	119	<p class="long">최종 평가</p>
103	120	</div>
104		-
105	121	</div>
	122	+ <div class="rabbit-end" @click="ShowPopup"><img src="../../../resources/img/img138_72s.png" alt=""></div>
106	123	</div>
107		- <!-- 팝업 -->
108		- <div v-show="searchOpen2" class="popup-wrap">
109		- <div class="popup-box">
110		- <button type="button" class="popup-close-btn" style="position:absolute; top:10px; right: 10px;"
111		- @click="closeModal">
112		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
113		- </button>
114		-
115		- <div class="mb30 text-ct">
116		- <p class="title1 mb20">1단원이 끝났습니다!</p>
117		- <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요</p>
118		- </div>
119		- <div class="flex justify-center">
120		- <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal">
121		- 사진 촬영
122		- </button>
123		- </div>
124	124	</div>
125		- </div>
126		-
127		- <!-- 카메라 모달 -->
128		- <article v-show="showCameraModal" class="popup-wrap">
129		- <div class="popup-box" style="top: 500px; left:500px">
130		- <div class="flex mb10 justify-between">
131		- <p class="popup-title">사진 촬영</p>
132		- <button type="button" class="popup-close-btn" @click="closeModal">
	125	+ <!-- 팝업 -->
	126	+ <div v-show="searchOpen2" class="popup-wrap">
	127	+ <div class="popup-box">
	128	+ <button type="button" class="popup-close-btn" style="position:absolute; top:10px; right: 10px;"
	129	+ @click="closeModal">
133	130	<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
134	131	</button>
135		- </div>
136		- <div class="box">
137		- <div style="width: 100%;">
138		- <!-- 여기에 카메라 기능을 구현 -->
139		- <!-- <p>카메라 모듈이 여기에 위치합니다.</p> -->
140	132
141		- <div id="container" ref="container">
142		- <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
143		- @canplay="onVideoLoaded"></video>
144		- </div>
145		-
	133	+ <div class="mb30 text-ct">
	134	+ <p class="title1 mb20">1단원이 끝났습니다!</p>
	135	+ <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요</p>
	136	+ </div>
	137	+ <div class="flex justify-center">
	138	+ <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal">
	139	+ 사진 촬영
	140	+ </button>
146	141	</div>
147	142	</div>
148		- <div class="flex justify-center mt20">
149		- <button type="button" class="new-btn" v-if="!photoTaken" @click="capturePhoto"
150		- :disabled="!videoReady">
151		- 사진 촬영
152		- </button>
153		-
154		- </div>
155	143	</div>
156		- </article>
157	144
158		- <!-- 사진 모달 -->
159		- <article v-show="showPhotoModal" class="popup-wrap">
160		- <div class="popup-box" style="top: 500px; left: auto">
161		- <div class="flex mb10 justify-between">
162		- <p class="popup-title">사진 꾸미기</p>
163		- <button type="button" class="popup-close-btn" @click="closePhotoModal">
164		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
165		- </button>
	145	+ <!-- 카메라 모달 -->
	146	+ <article v-show="showCameraModal" class="popup-wrap">
	147	+ <div class="popup-box" style="top: 500px; left:500px">
	148	+ <div class="flex mb10 justify-between">
	149	+ <p class="popup-title">사진 촬영</p>
	150	+ <button type="button" class="popup-close-btn" @click="closeModal">
	151	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	152	+ </button>
	153	+ </div>
	154	+ <div class="box">
	155	+ <div style="width: 100%;">
	156	+ <div id="container" ref="container">
	157	+ <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
	158	+ @canplay="onVideoLoaded"></video>
	159	+ </div>
	160	+ </div>
	161	+ </div>
	162	+ <div class="flex justify-center mt20">
	163	+ <button type="button" class="new-btn" v-if="!photoTaken" @click="capturePhoto"
	164	+ :disabled="!videoReady">
	165	+ 사진 촬영
	166	+ </button>
	167	+ </div>
166	168	</div>
167		- <div class="flex justify-between align-center" style="gap: 40px;">
168		- <div class="content" style="padding: 30px; min-width: 401px; min-height: 710px;">
169		- <div class="tool">
170		- <div class="flex justify-center mb20" style="gap: 20px;">
171		- <button class="popTxt" style="width: 101px;" v-for="(item, index) in items_photo"
172		- :key="index" @click="updateContent(index)"
173		- :class="{ active: selectedIndex === index }">
174		- <img :src="item.imgSrc1" style="display: block;">
175		- <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
	169	+ </article>
	170	+
	171	+ <!-- 사진 모달 -->
	172	+ <article v-show="showPhotoModal" class="popup-wrap">
	173	+ <div class="popup-box" style="top: 500px; left: auto">
	174	+ <div class="flex mb10 justify-between">
	175	+ <p class="popup-title">사진 꾸미기</p>
	176	+ <button type="button" class="popup-close-btn" @click="closePhotoModal">
	177	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	178	+ </button>
	179	+ </div>
	180	+ <div class="flex justify-between align-center" style="gap: 40px;">
	181	+ <div class="content" style="padding: 30px; min-width: 401px; min-height: 710px;">
	182	+ <div class="tool">
	183	+ <div class="flex justify-center mb20" style="gap: 20px;">
	184	+ <button class="popTxt" style="width: 101px;" v-for="(item, index) in items_photo"
	185	+ :key="index" @click="updateContent(index)"
	186	+ :class="{ active: selectedIndex === index }">
	187	+ <img :src="item.imgSrc1" style="display: block;">
	188	+ <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
	189	+ </button>
	190	+ </div>
	191	+ </div>
	192	+
	193	+ <div class="stickers" v-show="!stickersVisible">
	194	+ <div class="toolbar">
	195	+ <label for="brushSize" style="font-size: 9px;">펜 굵기</label>
	196	+ <input type="color" v-model="color" />
	197	+ <input type="range" id="brushSize" min="1" max="10" v-model="brushSize"
	198	+ @input="updateBrushSize" style="width: 100px; margin-left: 5px;" />
	199	+ <button class="new-btn" style="font-size: 9px;" @click="setTool('draw')">펜</button>
	200	+ <button class="new-btn" style="font-size: 9px;" @click="setTool('eraser')">지우개</button>
	201	+ <button class="new-btn" style="font-size: 9px;" @click="clearAll">전체 지우개</button>
	202	+ </div>
	203	+ </div>
	204	+
	205	+ <div class="stickers" v-show="stickersVisible">
	206	+ <button><img src="../../../resources/img/img146_75s.png" alt=""></button>
	207	+ <button><img src="../../../resources/img/img147_75s.png" alt=""></button>
	208	+ <button><img src="../../../resources/img/img148_75s.png" alt=""></button>
	209	+ <button><img src="../../../resources/img/img149_75s.png" alt=""></button>
	210	+ <button><img src="../../../resources/img/img150_75s.png" alt=""></button>
	211	+ <button><img src="../../../resources/img/img151_75s.png" alt=""></button>
	212	+ <button><img src="../../../resources/img/img152_75s.png" alt=""></button>
	213	+ <button><img src="../../../resources/img/img153_75s.png" alt=""></button>
	214	+ <button><img src="../../../resources/img/img154_75s.png" alt=""></button>
	215	+ <button><img src="../../../resources/img/img155_75s.png" alt=""></button>
	216	+ <button><img src="../../../resources/img/img156_75s.png" alt=""></button>
	217	+ <button><img src="../../../resources/img/img157_75s.png" alt=""></button>
	218	+ <button><img src="../../../resources/img/img158_75s.png" alt=""></button>
	219	+ </div>
	220	+ </div>
	221	+ <div>
	222	+ <div class="content" style="height: 549px;
	223	+ position: relative;
	224	+ width: 973px;
	225	+ display: flex;
	226	+ justify-content: center;
	227	+ align-items: center;">
	228	+ <canvas ref="canvas" style="position: absolute;"></canvas>
	229	+ </div>
	230	+ <div class="btn-wrap flex justify-center mt40" style="gap: 40px;">
	231	+ <button class="login-btn" @click="openCameraModal">
	232	+ <img src="../../../resources/img/btn07_s.png" alt="">
	233	+ <p>재촬영</p>
	234	+ </button>
	235	+
	236	+ <button class="login-btn" type="submit" @click="goToPage('PhotoEdit')">
	237	+ <img src="../../../resources/img/btn07_s.png" alt="">
	238	+ <p>완성</p>
176	239	</button>
177	240	</div>
178	241	</div>
179		-
180		- <div class="stickers" v-show="!stickersVisible">
181		- <div class="toolbar">
182		- <label for="brushSize" style="font-size: 9px;">펜 굵기</label>
183		- <input type="color" v-model="color" />
184		- <input type="range" id="brushSize" min="1" max="10" v-model="brushSize"
185		- @input="updateBrushSize" style="width: 100px; margin-left: 5px;" />
186		- <button class="new-btn" style="font-size: 9px;" @click="setTool('draw')">펜</button>
187		- <button class="new-btn" style="font-size: 9px;" @click="setTool('eraser')">지우개</button>
188		- <button class="new-btn" style="font-size: 9px;" @click="clearAll">전체 지우개</button>
	242	+ <div class="content" style="padding: 30px; min-width: 401px; min-height: 710px;">
	243	+ <div class="mb20">
	244	+ <p class="popup-title" style="font-size: 32px">랜덤 단어</p>
	245	+ </div>
	246	+ <div class="flex-column" style="gap: 10px;">
	247	+ <button class="login-btn"><img src="../../../resources/img/img141_75s.png" alt="">
	248	+ <p class="title">a</p>
	249	+ </button>
	250	+ <button class="login-btn"><img src="../../../resources/img/img152_75s_01.png" alt="">
	251	+ <p class="title">a</p>
	252	+ </button>
	253	+ <button class="login-btn"><img src="../../../resources/img/img144_75s.png" alt="">
	254	+ <p class="title" style="color: #fff;">a</p>
	255	+ </button>
	256	+ <button class="login-btn"><img src="../../../resources/img/img145_75s.png" alt="">
	257	+ <p class="title mt20" style="color: #fff;">a</p>
	258	+ </button>
189	259	</div>
190	260	</div>
191		-
192		- <div class="stickers" v-show="stickersVisible">
193		- <button><img src="../../../resources/img/img146_75s.png" alt=""></button>
194		- <button><img src="../../../resources/img/img147_75s.png" alt=""></button>
195		- <button><img src="../../../resources/img/img148_75s.png" alt=""></button>
196		- <button><img src="../../../resources/img/img149_75s.png" alt=""></button>
197		- <button><img src="../../../resources/img/img150_75s.png" alt=""></button>
198		- <button><img src="../../../resources/img/img151_75s.png" alt=""></button>
199		- <button><img src="../../../resources/img/img152_75s.png" alt=""></button>
200		- <button><img src="../../../resources/img/img153_75s.png" alt=""></button>
201		- <button><img src="../../../resources/img/img154_75s.png" alt=""></button>
202		- <button><img src="../../../resources/img/img155_75s.png" alt=""></button>
203		- <button><img src="../../../resources/img/img156_75s.png" alt=""></button>
204		- <button><img src="../../../resources/img/img157_75s.png" alt=""></button>
205		- <button><img src="../../../resources/img/img158_75s.png" alt=""></button>
206		- </div>
207		- </div>
208		- <div>
209		- <div class="content" style="height: 549px;
210		- position: relative;
211		- width: 973px;
212		- display: flex;
213		- justify-content: center;
214		- align-items: center;">
215		- <canvas ref="canvas" style="position: absolute;"></canvas>
216		- </div>
217		- <div class="btn-wrap flex justify-center mt40" style="gap: 40px;">
218		- <button class="login-btn" @click="openCameraModal">
219		- <img src="../../../resources/img/btn07_s.png" alt="">
220		- <p>재촬영</p>
221		- </button>
222		-
223		- <button class="login-btn" type="submit" @click="goToPage('PhotoEdit')">
224		- <img src="../../../resources/img/btn07_s.png" alt="">
225		- <p>완성</p>
226		- </button>
227		- </div>
228		- </div>
229		- <div class="content" style="padding: 30px; min-width: 401px; min-height: 710px;">
230		- <div class="mb20">
231		- <p class="popup-title" style="font-size: 32px">랜덤 단어</p>
232		- </div>
233		- <div class="flex-column" style="gap: 10px;">
234		- <button class="login-btn"><img src="../../../resources/img/img141_75s.png" alt="">
235		- <p class="title">a</p>
236		- </button>
237		- <button class="login-btn"><img src="../../../resources/img/img152_75s_01.png" alt="">
238		- <p class="title">a</p>
239		- </button>
240		- <button class="login-btn"><img src="../../../resources/img/img144_75s.png" alt="">
241		- <p class="title" style="color: #fff;">a</p>
242		- </button>
243		- <button class="login-btn"><img src="../../../resources/img/img145_75s.png" alt="">
244		- <p class="title mt20" style="color: #fff;">a</p>
245		- </button>
246		- </div>
247	261	</div>
248	262	</div>
249		- <!-- <div class="box">
250		- <div style="width: 100%;">
251		- <div id="container">
252		- <canvas ref="canvas"></canvas>
253		- </div>
254		- </div>
255		- </div> -->
256		-
257		- </div>
258		- </article>
259		-
	263	+ </article>
	264	+ </div>
260	265	</div>
261		- <div class="complete-wrap mt90 myphoto">
262		- <h2 class="mb40">이 단원을 끝낸 친구들</h2>
263		- <article class=" flex-column" style="gap: 5px;">
264		- <div class="flex" style="gap: 5px;">
265		- <div @click="buttonSearch2" class="photo"><img src="../../../resources/img/img143_75s.png" alt=""></div>
266		- <div @click="buttonSearch" class="photo"><img src="../../../resources/img/img143_75s.png" alt=""></div>
	266	+
	267	+ <div v-else>
	268	+ <!-- 2번 템플릿 -->
	269	+ <div class="myplan">
	270	+ <div class="title-box flex justify-between mb40">
	271	+ <p class="title">지금은 학습 루트가 등록이 안됐어요 ! 학습 일정에서 학습루트를 등록해볼까요 ?</p>
267	272	</div>
268		- </article>
269		- <!-- 팝업 -->
270		- <article class="popup-wrap" v-show="searchOpen">
271		- <div class="popup-box ">
272		- <div class="flex mb10 justify-between">
273		- <p class="popup-title">알림</p>
274		- <button type="button" class="popup-close-btn" @click="closeBtn2">
275		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	273	+ <div class="wrap" style="border-radius: 0; min-height: 197px;">
	274	+ <p class="title1"> 오늘 학습할 내용이 없습니다.</p>
	275	+ </div>
	276	+ <div class="yellow-box mt30">
	277	+ <div class="title-box flex justify-between align-center">
	278	+ <div >
	279	+ <p class="title">오늘 공부를 계획해봅시다.</p>
	280	+ <p class="title1 mt20"> 스스로 학습 일정을 바꿔볼까요?</p>
	281	+ </div>
	282	+ <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">
	283	+ 바로가기
276	284	</button>
277	285	</div>
278		- <div class="box">
279		- <div style="width: 910px;"><img src="../../../resources/img/img140_747s.png" alt=""></div>
280		- </div>
281		- <div class="flex justify-between mt20">
282		- <div class="text flex">
283		- <p class="title2 date ml30">2024-08-06</p>
284		- <span class=" title1 ml30">1단원을 마친 <em class="yellow">가나다</em>친구</span>
285		- </div>
286		- <div class="title2 flex align-center" style="gap: 10px;"><svg-icon type="mdi" :path="mdiHeart"
287		- style="color: #FFBA08;"></svg-icon>
288		- <p><em class="yellow">1</em></p>
289		- </div>
290		- </div>
291	286	</div>
292		- </article>
	287	+ </div>
293	288	</div>
294		-
295	289	</div>
296	290	</template>
297	291
298	292	<script>
299	293	import SvgIcon from '@jamescoyle/vue-icon';
300	294	import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
	295	+import axios from 'axios';
301	296
302	297	export default {
303	298	data() {
...	...	@@ -321,6 +316,7 @@
321	316	imgSrc2: 'client/resources/img/btn21_75s_click.png' //스티커 선택됨
322	317	},
323	318	],
	319	+ mdiMagnify: mdiMagnify,
324	320	mdiWindowClose: mdiWindowClose,
325	321	mdiHeart: mdiHeart,
326	322	showModal: false,
...	...	@@ -353,18 +349,50 @@
353	349	canvasRect: {
354	350	topLeft: { x: 0, y: 0 },
355	351	bottomRight: { x: 0, y: 0 }
356		- }
	352	+ },
357	353
	354	+
	355	+ roadViewTF : false,
	356	+ roadmapData: [],
358	357	}
359	358	},
360	359	methods: {
	360	+ fetchRoadmapData() {
	361	+ const vm = this;
	362	+ axios({
	363	+ url: "/unitLearning/find.json",
	364	+ method: "post",
	365	+ headers: {
	366	+ "Content-Type": "application/json; charset=UTF-8",
	367	+ },
	368	+ data: {
	369	+ unit_id: "UNIT_000000000000001",
	370	+ book_id: "BOOK_000000000000004"
	371	+ }
	372	+ })
	373	+ .then(response => {
	374	+ console.log("roadmap - response : ", response.data);
	375	+ vm.roadmapData = response.data;
	376	+ vm.roadViewTF = vm.roadmapData.length > 0;
	377	+ })
	378	+ .catch(error => {
	379	+ console.error("Error fetching roadmap data:", error);
	380	+ });
	381	+ },
	382	+ getNonNullColumn(item) {
	383	+ if (item.prblm_id !== null) return '문제';
	384	+ if (item.wd_book_id !== null) return '단어장';
	385	+ if (item.text_id !== null) return '지문';
	386	+ if (item.eval_id !== null) return '평가';
	387	+ return '';
	388	+ },
361	389	toggleImage(index) {
362	390	this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
363	391	},
364	392	toggleImageAndShowPopup(index, dataNum) {
365	393	this.toggleImage(index);
366		- if (dataNum === '11') { // 최종 평가 버튼 클릭 시
367		- this.searchOpen2 = true; // 모달창 열기
	394	+ if (dataNum === '11') {
	395	+ this.searchOpen2 = true;
368	396	}
369	397	},
370	398	updateContent(index) {
...	...	@@ -733,16 +761,34 @@
733	761	});
734	762	};
735	763	},
	764	+ getNonNullColumn(item) {
	765	+ if (item.prblm_id !== null) return '문제';
	766	+ if (item.wd_book_id !== null) return '단어장';
	767	+ if (item.text_id !== null) return '지문';
	768	+ if (item.eval_id !== null) return '평가';
	769	+ return '';
	770	+ },
	771	+ showConfirm(type) {
	772	+ let message = '';
	773	+ if (type === 'cancel') {
	774	+ message = '삭제하시겠습니까?';
	775	+ } else if (type === 'reset') {
	776	+ message = '초기화하시겠습니까?';
	777	+ } else if (type === 'save') {
	778	+ message = '등록하시겠습니까?';
	779	+ }
736	780
737		-
	781	+ if (confirm(message)) {
	782	+ this.goBack();
	783	+ }
	784	+ },
738	785	},
739	786	components: {
740	787	SvgIcon,
741	788	},
742	789	mounted() {
743	790	console.log('main mounted');
744		-
745		-
	791	+ this.fetchRoadmapData();
746	792	},
747	793	computed() {
748	794

Delete comment