-    <p class="title1" v-else-if="state === ''">지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를 등록해볼까요?</p>

-            <!--

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

-                -->

-                    <!-- 팝업 -->

-                    <article class="popup-wrap" v-show="searchOpen">

-                        <div class="popup-box ">

-                            <div class="flex mb10  justify-between">

-                                <p class="popup-title">알림</p>

-                                <button type="button" class="popup-close-btn" @click="closeBtn2">

-                                    <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>

-                                </button>

-                            </div>

-                        </div>

-                    </article>

-

-            <!-- 팝업 -->

-            <div v-show="searchOpen2" class="popup-wrap">

-                <div class="popup-box">

-                    <button type="button" class="popup-close-btn" style="position:absolute; top:10px; right: 10px;"

-                        @click="closeModal">

-                        <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>

-                    </button>

-

-                    <div class="mb30 text-ct">

-                        <p class="title1 mb20">1단원이 끝났습니다!</p>

-                        <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요</p>

-                    </div>

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

-                        <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal">

-                            사진 촬영

-                        </button>

-                    </div>

-                </div>

-            </div>

-

-            <!-- 카메라 모달 -->

-            <article v-show="showCameraModal" class="popup-wrap">

-                <div class="popup-box" style="top: 500px; left:500px">

-                    <div class="flex mb10 justify-between">

-                        <p class="popup-title">사진 촬영</p>

-                        <button type="button" class="popup-close-btn" @click="closeModal">

-                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>

-                        </button>

-                    </div>

-                    <div class="box">

-                        <div style="width: 100%;">

-                            <div id="container" ref="container">

-                                <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"

-                                    @canplay="onVideoLoaded"></video>

-                            </div>

-                        </div>

-                    </div>

-                    <div class="flex justify-center mt20">

-                        <button type="button" class="new-btn" v-if="!photoTaken" @click="capturePhoto"

-                            :disabled="!videoReady">

-                            사진 촬영

-                        </button>

-                    </div>

-                </div>

-            </article>

-

-            <!-- 사진 모달 -->

-            <article v-show="showPhotoModal" class="popup-wrap">

-                <div class="popup-box" style="top: 500px; left: auto">

-                    <div class="flex mb10 justify-between">

-                        <p class="popup-title">사진 꾸미기</p>

-                        <button type="button" class="popup-close-btn" @click="closePhotoModal">

-                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>

-                        </button>

-                    </div>

-                    <div class="flex justify-between align-center" style="gap: 40px;">

-                        <div class="content" style="padding: 30px; min-width: 401px; min-height: 710px;">

-                            <div class="tool">

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

-                                    <button class="popTxt" style="width: 101px;" v-for="(item, index) in items_photo"

-                                        :key="index" @click="updateContent(index)"

-                                        :class="{ active: selectedIndex === index }">

-                                        <img :src="item.imgSrc1" style="display: block;">

-                                        <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">

-                                    </button>

-                                </div>

-                            </div>

-

-                            <div class="stickers" v-show="!stickersVisible">

-                                <div class="toolbar">

-                                    <label for="brushSize" style="font-size: 9px;">펜 굵기</label>

-                                    <input type="color" v-model="color" />

-                                    <input type="range" id="brushSize" min="1" max="10" v-model="brushSize"

-                                        @input="updateBrushSize" style="width: 100px; margin-left: 5px;" />

-                                    <button class="new-btn" style="font-size: 9px;" @click="setTool('draw')">펜</button>

-                                    <button class="new-btn" style="font-size: 9px;"

-                                        @click="setTool('eraser')">지우개</button>

-                                    <button class="new-btn" style="font-size: 9px;" @click="clearAll">전체

-                                        지우개</button>

-                                </div>

-                            </div>

-

-                            <div class="stickers" v-show="stickersVisible">

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

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

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

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

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

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

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

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

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

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

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

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

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

-                            </div>

-                        </div>

-                        <div>

-                            <div class="content" style="height: 549px; 

-                                    position: relative;

-                                    width: 973px; 

-                                    display: flex; 

-                                    justify-content: center; 

-                                    align-items: center;">

-                                <canvas ref="canvas" style="position: absolute;"></canvas>

-                            </div>

-                            <div class="btn-wrap flex justify-center mt40" style="gap: 40px;">

-                                <button class="login-btn" @click="openCameraModal">

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

-                                    <p>재촬영</p>

-                                </button>

-

-                                <button class="login-btn" type="submit" @click="goToPage('PhotoEdit')">

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

-                                    <p>완성</p>

-                                </button>

-                            </div>

-                        </div>

-                        <div class="content" style="padding: 30px; min-width: 401px; min-height: 710px;">

-                            <div class="mb20">

-                                <p class="popup-title" style="font-size: 32px">랜덤 단어</p>

-                            </div>

-                            <div class="flex-column" style="gap: 10px;">

-                                <button class="login-btn"><img src="../../../resources/img/img141_75s.png" alt="">

-                                    <p class="title">a</p>

-                                </button>

-                                <button class="login-btn"><img src="../../../resources/img/img152_75s_01.png" alt="">

-                                    <p class="title">a</p>

-                                </button>

-                                <button class="login-btn"><img src="../../../resources/img/img144_75s.png" alt="">

-                                    <p class="title" style="color: #fff;">a</p>

-                                </button>

-                                <button class="login-btn"><img src="../../../resources/img/img145_75s.png" alt="">

-                                    <p class="title mt20" style="color: #fff;">a</p>

-                                </button>

-                            </div>

-                        </div>

-                    </div>

-                </div>

-            </article>

-            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'     //스티커 선택됨

-                },

-            ],

-

-            //사진 꾸미기 관련 변수

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

-            },

-                    this.state = ''

-                    this.nowSchedule = this.schedules.find(schedule => schedule.finish === null || schedule.finish === "");

-                    if (this.nowSchedule) {

-                        this.fetchRoadmapData(); // 진행 중인 스케줄이 있을 때 데이터를 가져오는 함수 호출

-                        this.state = 'studying'

-                        this.state = 'finish'

-                .catch(error => {

-                    console.error("Error fetching roadmap data:", error);

-                });

-                .then(response => { 

-                    window.location.reload();

-                })

-                .catch(error => {

-                    console.error("Error fetching roadmap data:", error);

-                });

-

-            const vm = this;

-                .then(response => { 

-                    this.roadmapData = response.data;

-                    console.log(this.roadmapData)

-                    this.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;

-            }

-        },

-        ShowPopup() {

-            this.searchOpen2 = true;  // 촬영 여부 묻는 모달창 열기

-        },

-        updateContent(index) {

-            this.selectedIndex = index;

-

-            // 선택된 버튼이 스티커 버튼(인덱스 1)인지 확인

-            if (index === 1) {

-                this.stickersVisible = true;  // 스티커 툴 보이기

-            } else {

-                this.stickersVisible = 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.searchOpen = false;

-            this.searchOpen2 = false;

-            this.showCameraModal = false;

-            this.photoTaken = false;

-            this.photo = null;

-            this.showPhotoModal = false;

-

-            //스트림 종료

-            if (this.stream) {

-                let tracks = this.stream.getTracks();

-                tracks.forEach(track => track.stop());

-                this.stream = null;

-            }

-        },

-        closePhotoModal() { //사진꾸미기 팝업 닫기

-            this.showPhotoModal = false;

-            this.closeModal();

-        },

-        onVideoLoaded() {

-            this.videoReady = true;

-            this.adjustContainerSize();

-

-        },

-        capturePhoto() {

-            // 사진 촬영 기능 구현

-            console.log("cam on");

-

-            if (!this.videoReady) return; // 비디오가 준비되지 않았으면 사진을 찍지 않음

-

-            const video = this.$refs.modalVideoElement;

-            const canvas = document.createElement('canvas');

-

-            canvas.width = video.videoWidth;

-            canvas.height = video.videoHeight;

-            this.canvasWidth = video.videoWidth;

-            this.canvasHeight = video.videoHeight;

-            const context = canvas.getContext('2d');

-            context.translate(canvas.width, 0);

-            context.scale(-1, 1);

-            context.drawImage(video, 0, 0, canvas.width, canvas.height);

-            this.photo = canvas.toDataURL('image/png');

-            this.photoTaken = true;

-            this.showPhotoModal = true;

-            console.log("PhotoModal open");

-            this.$nextTick(() => {

-                console.log("canvas setup");

-                // console.log("Photo data>>>>", this.photo);

-                this.setupCanvas();

-            });

-

-        },

-        setupCanvas() {

-            const canvas = this.$refs.canvas;

-            // const container = this.$refs.container;

-            if (!canvas) {

-                console.error("Canvas reference not found");

-                resolve();

-                return;

-            }

-            const context = canvas.getContext('2d');

-            if (!context) {

-                console.error("Canvas context not found");

-                return;

-            }

-            const image = new Image();

-            image.src = this.photo;

-            // console.log("Photo data>>>>", image.src);

-            image.onload = () => {

-                console.log("Image loaded successfully");

-                // this.canvasWidth = image.width;

-                // this.canvasHeight = image.height;

-                //이미지 크기가 캔버스와 안맞으면 이미지 불러오는데에 에러 남

-                // container.style.width = this.canvasWidth;

-                // container.style.height = this.canvasHeight;

-

-                canvas.width = this.canvasWidth;

-                canvas.height = this.canvasHeight;

-

-                const rect = canvas.getBoundingClientRect();

-                // 좌측 상단 좌표

-                const topLeft = {

-                    x: rect.left,

-                    y: rect.top

-                };

-

-                // 우측 하단 좌표

-                const bottomRight = {

-                    x: rect.right,

-                    y: rect.bottom

-                };

-

-                // 캔버스 크기 초기화

-                this.updateCanvasRect();

-

-                // 윈도우 리사이즈 이벤트 리스너 추가

-                window.addEventListener('resize', this.updateCanvasRect);

-

-                // 클릭 이벤트 핸들러 추가

-                this.$refs.canvas.addEventListener('click', this.handleCanvasClick);

-

-

-                // canvas.width = canvas.clientWidth;

-                // canvas.height = canvas.clientHeight;

-                // this.canvasWidth = canvas.clientWidth;

-                // this.canvasHeight = canvas.clientHeight;

-

-                context.clearRect(0, 0, canvas.width, canvas.height);  // 이전 이미지 있으면 초기화

-                context.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight);

-                this.addCanvasEventListeners(); //추가해야함

-            };

-            image.onerror = (error) => {

-                console.error("Error loading image: ", error);

-            };

-        },

-

-        addCanvasEventListeners() {

-            const canvas = this.$refs.canvas;

-            canvas.addEventListener('mousedown', this.onMouseDown);

-            canvas.addEventListener('mouseup', this.onMouseUp);

-            canvas.addEventListener('mousemove', this.onMouseMove);

-            canvas.addEventListener('click', this.onCanvasClick);

-        },

-        setTool(tool) {

-            this.tool = tool;

-        },

-        updateBrushSize() {

-            // 펜 굵기 변경 로직

-            if (this.tool === 'draw') {

-                this.setBrushSize(this.brushSize);

-            }

-        },

-        setBrushSize(size) {

-            this.brushSize = size;

-            const context = this.$refs.canvas.getContext('2d');

-            context.lineWidth = size;

-        },

-        // 캔버스 크기 갱신 함수

-        updateCanvasRect() {

-            const rect = this.$refs.canvas.getBoundingClientRect();

-            this.canvasRect = {

-                topLeft: { x: rect.left, y: rect.top },

-                bottomRight: { x: rect.right, y: rect.bottom }

-            };

-            console.log(">>>>>>>>>2222", rect.left);

-        },

-        getCanvasPosition(event) {

-

-            const rect = this.canvasRect;

-            console.log(">>>>>>>>>", this.canvasRect);

-            this.updateCanvasRect();

-

-            // 윈도우 리사이즈 이벤트 리스너 추가

-            window.addEventListener('resize', this.updateCanvasRect);

-

-            // 클릭 이벤트 핸들러 추가

-            this.$refs.canvas.addEventListener('click', this.handleCanvasClick);

-

-            // // 좌측 상단 좌표

-            // const topLeft = {

-            //     x: rect.left,

-            //     y: rect.top

-            // };

-

-            // // 우측 하단 좌표

-            // const bottomRight = {

-            //     x: rect.right,

-            //     y: rect.bottom

-            // };

-

-            // console.log(this.scrollLeft)

-

-            const x = event.clientX - rect.topLeft.x

-            const y = event.clientY - rect.topLeft.y

-

-

-            console.log(`클릭한 좌표: x=${event.clientX}, y=${event.clientY}`);

-            console.log(`계산베이스 좌표: x=${rect.topLeft.x}, y=${rect.topLeft.y}`);

-            console.log(`계산베이스 좌표: x=${rect.topLeft.x}, y=${rect.topLeft.y}`);

-            console.log(`계산된 좌표: x=${x}, y=${y}`);

-            return {

-                x, y

-            };

-        },

-        onMouseDown(event) {

-

-            // 캔버스 크기 초기화

-            this.updateCanvasRect();

-

-            // 윈도우 리사이즈 이벤트 리스너 추가

-            window.addEventListener('resize', this.updateCanvasRect);

-

-            // 클릭 이벤트 핸들러 추가

-            this.$refs.canvas.addEventListener('click', this.handleCanvasClick);

-

-            const { x, y } = this.getCanvasPosition(event);

-            this.startX = x;

-            this.startY = y;

-            const context = this.$refs.canvas.getContext('2d');

-            context.strokeStyle = this.color;

-            context.lineWidth = this.brushSize;  // 브러시 크기 설정

-            if (this.tool === 'draw') {

-                context.beginPath();

-                context.moveTo(this.startX, this.startY);

-                this.nextLineId++;

-            }

-            this.isDrawing = true;

-        },

-        onMouseUp(event) {

-            if (!this.isDrawing) return;

-            const { x, y } = this.getCanvasPosition(event);

-            const context = this.$refs.canvas.getContext('2d');

-            context.strokeStyle = this.color;

-            context.lineWidth = this.brushSize;  // 브러시 크기 설정

-            if (this.tool === 'rectangle') {

-                context.strokeRect(this.startX, this.startY, x - this.startX, y - this.startY);

-                this.drawHistory.push({ type: 'rectangle', startX: this.startX, startY: this.startY, endX: x, endY: y, color: this.color });

-            } else if (this.tool === 'circle') {

-                context.beginPath();

-                const radius = Math.sqrt(Math.pow((x - this.startX), 2) + Math.pow((y - this.startY), 2));

-                context.arc(this.startX, this.startY, radius, 0, 2 * Math.PI);

-                context.stroke();

-                this.drawHistory.push({ type: 'circle', startX: this.startX, startY: this.startY, radius, color: this.color });

-            } else if (this.tool === 'draw') {

-                context.lineTo(x, y);

-                context.stroke();

-                this.tempLines.push({ id: this.nextLineId, startX: this.startX, startY: this.startY, endX: x, endY: y, color: this.color });

-            }

-            this.isDrawing = false;

-        },

-        onMouseMove(event) {

-            if (!this.isDrawing || this.tool !== 'draw') return;

-            const { x, y } = this.getCanvasPosition(event);

-            const context = this.$refs.canvas.getContext('2d');

-            context.strokeStyle = this.color;

-            context.lineWidth = this.brushSize;  // 브러시 크기 설정

-            context.lineTo(x, y);

-            context.stroke();

-            this.tempLines.push({ id: this.nextLineId, startX: this.startX, startY: this.startY, endX: x, endY: y, color: this.color });

-            this.startX = x;

-            this.startY = y;

-        },

-        onCanvasClick(event) {

-            if (this.tool === 'eraser') {

-                const { x, y } = this.getCanvasPosition(event);

-                this.eraseDrawing(x, y);

-            }

-        },

-        eraseDrawing(x, y) {

-            const eraserRadius = 10;

-            this.drawHistory = this.drawHistory.filter(item => {

-                if (item.type === 'rectangle') {

-                    return !(x >= item.startX && x <= item.endX && y >= item.startY && y <= item.endY);

-                } else if (item.type === 'circle') {

-                    const distance = Math.sqrt(Math.pow((x - item.startX), 2) + Math.pow((y - item.startY), 2));

-                    return !(distance <= item.radius);

-                }

-            });

-            const linesToDelete = this.tempLines.filter(line => {

-                const distanceToLine = this.distanceToLineSegment(line.startX, line.startY, line.endX, line.endY, x, y);

-                return distanceToLine <= 10;

-            }).map(line => line.id);

-            this.tempLines = this.tempLines.filter(line => !linesToDelete.includes(line.id));

-            this.redraw();

-        },

-        distanceToLineSegment(x1, y1, x2, y2, px, py) {

-            const lengthSquared = Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2);

-            if (lengthSquared === 0) return Math.sqrt(Math.pow(px - x1, 2) + Math.pow(py - y1, 2));

-            const t = Math.max(0, Math.min(1, ((px - x1) * (x2 - x1) + (py - y1) * (y2 - y1)) / lengthSquared));

-            const projX = x1 + t * (x2 - x1);

-            const projY = y1 + t * (y2 - y1);

-            return Math.sqrt(Math.pow(px - projX, 2) + Math.pow(py - projY, 2));

-        },

-        clearAll() {

-            this.drawHistory = [];

-            this.stickers = [];

-            this.tempLines = [];

-            this.redraw();

-        },

-        redraw() {

-            const canvas = this.$refs.canvas;

-            const context = canvas.getContext('2d');

-            const image = new Image();

-            image.src = this.photo;

-            image.onload = () => {

-                context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

-                context.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight);

-                this.drawHistory.forEach(item => {

-                    context.strokeStyle = item.color;

-                    if (item.type === 'draw') {

-                        context.beginPath();

-                        context.moveTo(item.startX, item.startY);

-                        context.lineTo(item.endX, item.endY);

-                        context.stroke();

-                    } else if (item.type === 'rectangle') {

-                        context.strokeRect(item.startX, item.startY, item.endX - item.startX, item.endY - item.startY);

-                    } else if (item.type === 'circle') {

-                        context.beginPath();

-                        context.arc(item.startX, item.startY, item.radius, 0, 2 * Math.PI);

-                        context.stroke();

-                    }

-                });

-                this.tempLines.forEach(line => {

-                    context.strokeStyle = line.color;

-                    context.beginPath();

-                    context.moveTo(line.startX, line.startY);

-                    context.lineTo(line.endX, line.endY);

-                    context.stroke();

-                });

-                this.stickers.forEach((sticker, index) => {

-                    context.drawImage(sticker.img, sticker.x, sticker.y, sticker.width, sticker.height);

-                });

-            };

-

-

-

-/* button {

-    margin: auto;

-    padding: 5px 10px;

-    font-size: 13px;

-    cursor: pointer;

-    display: flex;

-    justify-content: center;

-    text-align: center;

-} */

-

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

-                            </div>

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

-        goToPage(page) {

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