Commit @c4227a57ecf4ebc691efa6ac56f6d3f23d80575b

guntaek 09-13

Merge branch 'master' of http://210.180.118.83/jichoi/lms_front

@c4227a57ecf4ebc691efa6ac56f6d3f23d80575b

c4227a5

client/resources/audio/passage/passage_explanation.mp3 (Binary) (added)

+++ client/resources/audio/passage/passage_explanation.mp3

Binary file is not shown

c4227a5

client/resources/audio/passage/passage_intoduce.mp3 (Binary) (added)

+++ client/resources/audio/passage/passage_intoduce.mp3

Binary file is not shown

fd960b0

c4227a5

client/resources/css/reset.css

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

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


 @charset "utf-8";
 
 @font-face {
-	font-family: 'Pretendard-Bold';
-    src: url('../font/Pretendard-Bold.otf') format('opentype');
+  font-family: "Pretendard-Bold";
+  src: url("../font/Pretendard-Bold.otf") format("opentype");
 }
 @font-face {
-	font-family: 'Pretendard-Black';
-    src: url('../font/Pretendard-Black.otf') format('opentype');
+  font-family: "Pretendard-Black";
+  src: url("../font/Pretendard-Black.otf") format("opentype");
 }
 @font-face {
-	font-family: 'Pretendard-ExtraBold';
-    src: url('../font/Pretendard-ExtraBold.otf') format('opentype');
+  font-family: "Pretendard-ExtraBold";
+  src: url("../font/Pretendard-ExtraBold.otf") format("opentype");
 }
 @font-face {
-	font-family: 'Pretendard-ExtraLight';
-    src: url('../font/Pretendard-ExtraLight.otf') format('opentype');
+  font-family: "Pretendard-ExtraLight";
+  src: url("../font/Pretendard-ExtraLight.otf") format("opentype");
 }
 @font-face {
-	font-family: 'Pretendard-Light';
-    src: url('../font/Pretendard-Light.otf') format('opentype');
+  font-family: "Pretendard-Light";
+  src: url("../font/Pretendard-Light.otf") format("opentype");
 }
 @font-face {
-	font-family: 'Pretendard-Medium';
-    src: url('../font/Pretendard-Medium.otf') format('opentype');
+  font-family: "Pretendard-Medium";
+  src: url("../font/Pretendard-Medium.otf") format("opentype");
 }
 @font-face {
-	font-family: 'Pretendard-Regular';
-    src: url('../font/Pretendard-Regular.otf') format('opentype');
+  font-family: "Pretendard-Regular";
+  src: url("../font/Pretendard-Regular.otf") format("opentype");
 }
 @font-face {
-	font-family: 'Pretendard-SemiBold';
-    src: url('../font/Pretendard-SemiBold.otf') format('opentype');
+  font-family: "Pretendard-SemiBold";
+  src: url("../font/Pretendard-SemiBold.otf") format("opentype");
 }
 @font-face {
-	font-family: 'Pretendard-Thin';
-    src: url('../font/Pretendard-Thin.otf') format('opentype');
-}
-
-
-@font-face {
-	font-family: 'ONEMobilePOP';
-    src: url('../font/ONEMobilePOP.ttf') format('truetype');
-}
-@font-face {
-	font-family: 'ONEMobileOTF-Regular';
-    src: url('../font/ONEMobileOTF-Regular.otf') format('opentype');
-}
-@font-face {
-	font-family: 'ONEMobileOTF-Light';
-    src: url('../font/ONEMobileOTF-Light.otf') format('opentype');
-}
-@font-face {
-	font-family: 'ONEMobileOTF-Bold';
-    src: url('../font/ONEMobileOTF-Bold.otf') format('opentype');
-}
-@font-face {
-	font-family: 'ONEMobilePOPOTF';
-    src: url('../font/ONEMobilePOPOTF.otf') format('opentype');
+  font-family: "Pretendard-Thin";
+  src: url("../font/Pretendard-Thin.otf") format("opentype");
 }
 
 @font-face {
-	font-family: 'neodgm';
-    src: url('../font/neodgm.ttf') format('truetype');
+  font-family: "ONEMobilePOP";
+  src: url("../font/ONEMobilePOP.ttf") format("truetype");
+}
+@font-face {
+  font-family: "ONEMobileOTF-Regular";
+  src: url("../font/ONEMobileOTF-Regular.otf") format("opentype");
+}
+@font-face {
+  font-family: "ONEMobileOTF-Light";
+  src: url("../font/ONEMobileOTF-Light.otf") format("opentype");
+}
+@font-face {
+  font-family: "ONEMobileOTF-Bold";
+  src: url("../font/ONEMobileOTF-Bold.otf") format("opentype");
+}
+@font-face {
+  font-family: "ONEMobilePOPOTF";
+  src: url("../font/ONEMobilePOPOTF.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "neodgm";
+  src: url("../font/neodgm.ttf") format("truetype");
 }
 
 * {
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
 }
 
-html, body, #root, #app{height: 100%;}
+html,
+body,
+#root,
+#app {
+  height: 100%;
+}
 html,
 body,
 #root {
-    font-size: 10px;
-    color: #2E2F30;
-    font-family: 'ONEMobileOTF-Regular';
-    
+  font-size: 10px;
+  color: #2e2f30;
+  font-family: "ONEMobileOTF-Regular";
 }
 html,
-body{ background-color: #eaedf4;}
-body{position:relative;text-align: left; overflow-x: hidden; width: 1920px;}
-::-webkit-scrollbar {width: 10px; height: 10px;}
-::-webkit-scrollbar-track {border-radius: 5px;background-color: #EAEDF4;}
-::-webkit-scrollbar-thumb {	border-radius: 5px; background-color: #FFBA08;}
-#root, #app{
-    /* height: 100%;  */
-   }
-input, select, span,p, label {
-    font-size: 16px;
+body {
+  background-color: #eaedf4;
 }
-input::placeholder{color: #8C8E92;}
-input[type="text"]{ padding:10px 20px; width: 100%; }
-input#file-upload-button{padding: 10px ;} 
-  
-button{
-    border: none;
-    background-color: transparent;
-    cursor: pointer;
+body {
+  position: relative;
+  text-align: left;
+  overflow-x: hidden;
+  width: 1920px;
 }
-textarea{resize: none; border: 0; outline: 0; font-size: 20px; font-family: 'ONEMobileOTF-Regular';}
+::-webkit-scrollbar {
+  width: 7px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background-color: #eaedf4;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: #ffba08;
+}
+body,
+#root,
+#app {
+  /* height: 100%;  */
+  /* background-image: url("../img/new_img/plan/background.png");
+  background-repeat: no-repeat;
+  background-size: cover; */
+}
+body {
+  height: 100%;
+  background-image: url(../img/new_img/plan/background.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  position: absolute;
+}
+input,
+select,
+span,
+p,
+label {
+  font-size: 16px;
+}
+input::placeholder {
+  color: #8c8e92;
+}
+input[type="text"] {
+  padding: 10px 20px;
+  width: 100%;
+}
+input#file-upload-button {
+  padding: 10px;
+}
 
-a{text-decoration: none; color: #2E2F30;}
+button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+textarea {
+  resize: none;
+  border: 0;
+  outline: 0;
+  font-size: 20px;
+  font-family: "ONEMobileOTF-Regular";
+}
+
+a {
+  text-decoration: none;
+  color: #2e2f30;
+}
 
 table {
-    font-size: 20px;
-    width: 100%;
-    border-collapse: collapse;
-    table-layout: fixed;
-border: 0;}
-thead{background-color: #eaedf4;}
-tbody tr{border-bottom: #eaedf4 1px solid; cursor: pointer;}
-td{padding: 10px ; text-align: center;} 
+  font-size: 20px;
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  border: 0;
+}
+thead {
+  background-color: #eaedf4;
+}
+tbody tr {
+  border-bottom: #eaedf4 1px solid;
+  cursor: pointer;
+}
+td {
+  padding: 10px;
+  text-align: center;
+}
 
 /* .btn-upload {
     width: 100px;

   
   #file {
     display: none;
-  } */
+  } */

fd960b0

c4227a5

client/resources/css/style.css

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

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


 /* 레이아웃 */
 .side {
   width: 42rem;
+  background-color: #ffffffa6;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  padding: 2rem;
+  position: absolute;
+
+  top: 179px;
+  height: 700px;
 }
 
 .main-wrap {

 .main-wrap {
   width: 134rem;
   height: 70rem;
-  background-color: #fff;
+  background-color: #ffffffa6;
   border-radius: 10px;
   position: absolute;
   right: 60px;
   top: 179px;
   z-index: 1;
 }
-.main-wrap-plan {
+
+.main-wrap-mypage {
   width: 134rem;
   height: 70rem;
-  background-color: #fff;
   border-radius: 10px;
   position: absolute;
   right: 60px;
   top: 179px;
   z-index: 1;
-  background-image: url("../img/new_img/plan/background.png");
+  background-image: url("../img/new_img/mypage/background.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding: 6rem 8rem;
+}
+
+.main-wrap-plan {
+  width: 134rem;
+  height: 70rem;
+  border-radius: 10px;
+  position: absolute;
+  right: 60px;
+  top: 179px;
+  z-index: 1;
+  /* background-image: url("../img/new_img/plan/background.png"); */
+  background-color: #ffffffa6;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 .header img {
   margin-left: 20px;

   /* height: 24rem; */
   /* background-color: #fff; */
   border-radius: 10px;
-  padding: 30px 20px 0px;
+  padding: 20px 20px 0px;
   font-size: 16px;
   font-family: "ONEMobileOTF-Regular";
   /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */

 }
 
 .myphoto > div {
-  background-image: url("../img/img207_15s.png");
-  width: 1011px;
-  height: 558px;
+  background-image: url("../img/new_img/photobook/background.png");
+  width: 127rem;
+  height: 56rem;
   padding: 30px 60px;
   margin: 0 auto;
+  background-size: 100% 100%;
 }
 .tab-btn {
   position: relative;
-  color: #568bfa;
+  color: #fff;
 }
 .tab-btn p.custom-style {
   color: #fff;

   right: 7%;
   transform: translate(-50%, -50%);
   font-family: "ONEMobilePOPOTF";
-  font-size: 36px;
+  font-size: 27px;
 }
 .myphoto .btnGroup {
   width: max-content;
   position: absolute;
-  right: 45px;
+  top: 134px;
+  right: 14px;
   z-index: 10000;
 }
 .myphoto .class {

   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
   width: 93%;
   height: 710px;
-  background-color: #fff;
+  /* background-color: #fff; */
+  background-color: #ffffffa6;
   border-radius: 20px;
 }
 

 }
 
 .class {
-  background-color: #f8f9fb;
+  /* background-color: #f8f9fb; */
+  background-image: url("../img/new_img/photobook/photo.png");
   border-radius: 10px;
   padding: 25px;
   font-size: 19px;

c4227a5

client/resources/img/new_img/content_ink/background.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/background.png

Binary file is not shown

c4227a5

client/resources/img/new_img/content_ink/click_btn.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/click_btn.png

Binary file is not shown

c4227a5

client/resources/img/new_img/content_ink/ink_1.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/ink_1.png

Binary file is not shown

c4227a5

client/resources/img/new_img/content_ink/ink_2.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/ink_2.png

Binary file is not shown

c4227a5

client/resources/img/new_img/content_ink/ink_3.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/ink_3.png

Binary file is not shown

c4227a5

client/resources/img/new_img/content_ink/ink_4.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/ink_4.png

Binary file is not shown

c4227a5

client/resources/img/new_img/content_ink/return_v2.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/return_v2.png

Binary file is not shown

c4227a5

client/resources/img/new_img/dashboard/btn.png (Binary) (added)

+++ client/resources/img/new_img/dashboard/btn.png

Binary file is not shown

c4227a5

client/resources/img/new_img/dashboard/rabbit.png (Binary) (added)

+++ client/resources/img/new_img/dashboard/rabbit.png

Binary file is not shown

c4227a5

client/resources/img/new_img/icon/play_icon.png (Binary) (added)

+++ client/resources/img/new_img/icon/play_icon.png

Binary file is not shown

c4227a5

client/resources/img/new_img/icon/search-icon.png (Binary) (added)

+++ client/resources/img/new_img/icon/search-icon.png

Binary file is not shown

c4227a5

client/resources/img/new_img/logo_v2.png (Binary) (added)

+++ client/resources/img/new_img/logo_v2.png

Binary file is not shown

c4227a5

client/resources/img/new_img/mypage/background.png (Binary) (added)

+++ client/resources/img/new_img/mypage/background.png

Binary file is not shown

c4227a5

client/resources/img/new_img/mypage/photoBtn.png (Binary) (added)

+++ client/resources/img/new_img/mypage/photoBtn.png

Binary file is not shown

c4227a5

client/resources/img/new_img/photobook/background.png (Binary) (added)

+++ client/resources/img/new_img/photobook/background.png

Binary file is not shown

c4227a5

client/resources/img/new_img/photobook/down_btn.png (Binary) (added)

+++ client/resources/img/new_img/photobook/down_btn.png

Binary file is not shown

c4227a5

client/resources/img/new_img/photobook/heart.png (Binary) (added)

+++ client/resources/img/new_img/photobook/heart.png

Binary file is not shown

c4227a5

client/resources/img/new_img/photobook/heart_click.png (Binary) (added)

+++ client/resources/img/new_img/photobook/heart_click.png

Binary file is not shown

c4227a5

client/resources/img/new_img/photobook/page.png (Binary) (added)

+++ client/resources/img/new_img/photobook/page.png

Binary file is not shown

c4227a5

client/resources/img/new_img/photobook/page_click.png (Binary) (added)

+++ client/resources/img/new_img/photobook/page_click.png

Binary file is not shown

c4227a5

client/resources/img/new_img/photobook/photo.png (Binary) (added)

+++ client/resources/img/new_img/photobook/photo.png

Binary file is not shown

c4227a5

client/resources/img/new_img/photobook/up_btn.png (Binary) (added)

+++ client/resources/img/new_img/photobook/up_btn.png

Binary file is not shown

fd960b0

c4227a5

client/views/Login.vue

--- client/views/Login.vue

+++ client/views/Login.vue


 <template>
-   <div class="login-container">
+   <div style="padding: 20px 20px;">
 
       <div class="login ">
          <div class="logo flex justify-end"><img src="../resources/img/logo.png" alt=""></div>

          <div class="find-form mt30" v-if="selectedTab === 'tab1'">
             <div class="mb20 flex justify-between align-center">
                <p class="title2" for="username" style="width: 12rem;">이름</p>
-               <input class="data-wrap" type="text" id="username" v-model="findUserNm" placeholder="이름을 입력하세요."  style="width: 45rem;" >
+               <input class="data-wrap" type="text" id="username" v-model="findUserNm" placeholder="이름을 입력하세요."
+                  style="width: 45rem;">
             </div>
             <div class="mb30 flex justify-between align-center">
                <p class="title2" for="username" style="width: 12rem;">전화번호</p>
-               <div class="flex justify-between align-center"><input class="data-wrap"
-                     style="width: 14rem;" type="text" id="username" v-model="findTel1">
+               <div class="flex justify-between align-center"><input class="data-wrap" style="width: 14rem;" type="text"
+                     id="username" v-model="findTel1">
                   <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
                      v-model="findTel2">
                   <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"

          <div class="find-form mt30" v-else-if="selectedTab === 'tab2'">
             <div class="mb20 flex justify-between align-center">
                <p class="title2" for="username" style="width: 12rem;">아이디</p>
-               <input class="data-wrap" type="text" id="username" v-model="changeLoginId" placeholder="아이디를 입력하세요." style="width: 45rem;" >
+               <input class="data-wrap" type="text" id="username" v-model="changeLoginId" placeholder="아이디를 입력하세요."
+                  style="width: 45rem;">
             </div>
             <div class="mb20 flex justify-between align-center">
                <p class="title2" for="username" style="width: 14rem;">변경할 비밀번호</p>
-               <input class="data-wrap" type="password" id="username" v-model="changeUserPw" placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;" >
+               <input class="data-wrap" type="password" id="username" v-model="changeUserPw"
+                  placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;">
             </div>
             <div class="mb20 flex justify-between align-center">
                <p class="title2" for="username" style="width: 12rem;">비밀번호 확인</p>
-               <input class="data-wrap" type="password" id="username" v-model="changeUserPwCheck" placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;" >
+               <input class="data-wrap" type="password" id="username" v-model="changeUserPwCheck"
+                  placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;">
             </div>
             <div class="flex justify-center ">
                <button type="button" title="글쓰기" class="new-btn mr10" @click="closeBtn">

          findTel1: '',
          findTel2: '',
          findTel3: '',
-         findUserInfo : {},
-         changeLoginId:'',
+         findUserInfo: {},
+         changeLoginId: '',
          changeUserPw: '',
          changeUserPwCheck: '',
       }

fd960b0

c4227a5

client/views/component/TextToImage.vue

--- client/views/component/TextToImage.vue

+++ client/views/component/TextToImage.vue


 <template>
-    <div class="flex justify-center align-center" style="margin-top : 30px">
-        <div class="content title-box aibox">
-            <p class="title mt25 title-bg">모르는 단어를 물어봐~!</p>
-            <div class="propmt-container">
-                <div class="input-conatiner">
-                    <input v-model="word" @keyup.enter="startProgress(word)"/>
-                    <button @click="startProgress(word)"> <p> 생성하기 </p> </button>
+    <div class="flex justify-center align-center">
+        <div class="propmt-container">
+            <div class="input-conatiner">
+                <input v-model="word" @keyup.enter="startProgress(word)" />
+                <button @click="startProgress(word)">
+                    <img src="../../resources/img/new_img/icon/search-icon.png" style="width: 52px" />
+                </button>
+            </div>
+        </div>
+        <div class="modal-container flex" v-if="!modalClose">
+            <div class="progress-container" v-if="progressWidth < 100 && progressWidth > 1">
+                <div class="progress-bar" :style="{ width: progressWidth + '%' }">{{ Math.floor(progressWidth) }}%</div>
+                <!-- 로딩 이미지 -->
+                <div class="loading-container">
+                    <img src="../../resources/img/jumpingRabbit.gif" alt="Loading" class="loading-gif" />
+                    <p>잠깐만 기다려봐~</p>
                 </div>
-                <div class="progress-container">
-                    <div class="progress-bar" :style="{ width: progressWidth + '%' }">{{ Math.floor(progressWidth) }}%</div>
-                    
-                    <!-- 로딩 이미지 -->
-                    <div v-if="progressWidth < 100 && progressWidth > 1" class="loading-container">
-                        <img src="../../resources/img/jumpingRabbit.gif" alt="Loading" class="loading-gif"/>
-                        <p> 잠깐만 기다려봐~ </p>
-                    </div>
-
-                </div>
-                <div v-if="visibleWord" class="result-container">
-                    <img :src="imageSrc"/>
+            </div>
+            <div v-if="visibleWord" class="result-container">
+                <div class="flex align-center modal-box">
+                    <img :src="imageSrc" />
                     <div class="word-container">
-                        <h2> {{ inputWord }}  </h2>
+                        <h2>{{ inputWord }}</h2>
                     </div>
                 </div>
+                <button @click="handleModalClose">
+                    <img src="../../resources/img/btn25_93t_normal.png" alt="" style="width: auto" />
+                </button>
             </div>
         </div>
     </div>
-    
 </template>
 
 <script>

     data() {
         return {
             progressWidth: 0,
-            inputWord : "",
+            inputWord: '',
 
-            // 하드 코딩 -> 수정 필요 : API
-            word : "",
-            imageSrc : "",
+            word: '',
+            imageSrc: '',
             imageData: null, // 서버에서 받아온 이미지 데이터 저장
 
-            visibleWord : false,
+            visibleWord: false,
+            modalClose: true, // 초기 상태 === 닫힘
         };
     },
-    mounted() {
-        
-    },
+    mounted() {},
     methods: {
         // 상태 진행 바(progress bar)
         startProgress(word) {
+            this.modalClose = false;
+
             if (this.progressWidth == 100) {
                 this.resetProgress();
             }

                     clearInterval(progressInterval);
                     this.visibleWord = true;
 
-                     // 진행이 완료된 후에 이미지 데이터 렌더링
+                    // 진행이 완료된 후에 이미지 데이터 렌더링
                     if (this.imageData) {
                         this.imageSrc = this.imageUrl;
                     }

             this.inputWord = word;
             this.visibleWord = false;
         },
-        
+
         resetProgress() {
             this.progressWidth = 0;
             this.visibleWord = false;
-            this.imageSrc = ""; // 이미지 URL 초기화
+            this.imageSrc = ''; // 이미지 URL 초기화
             this.imageData = null; // 이미지 데이터 초기화
+            this.word = '';
+        },
+
+        handleModalClose() {
+            this.resetProgress();
+            this.modalClose = true;
+            console.log('모달 상태 : ', this.modalClose);
         },
 
         // 이미지 API
-        async getAiImage(){
-            const url = "http://takensoftai.iptime.org:20200/generate_json";
+        async getAiImage() {
+            const url = 'http://takensoftai.iptime.org:20200/generate_json';
             // console.log(`word : ${this.word}`);
             try {
                 const response = await axios({
                     url: url,
-                    method: "post",
+                    method: 'post',
                     headers: {
-                        "Content-Type": "application/json; charset=UTF-8",
+                        'Content-Type': 'application/json; charset=UTF-8',
                     },
                     responseType: 'arraybuffer',
                     data: {
-                        text: this.word
+                        text: this.word,
                     },
                 });
-                
+
                 // console.log(`응답 : ${response}`);
 
                 // 바이너리 데이터 -> Blob으로 변환

             } catch (err) {
                 console.log(err);
             }
-        }
-    }
-}
+        },
+    },
+};
 </script>
 
 <style>
-.propmt-container{
-    padding: 0px 50px 30px 50px;
+.propmt-container {
+    /*padding: 0px 50px 30px 50px;*/
 }
 /* 입력 컨테이너  */
-.input-conatiner{
+.input-conatiner {
     display: flex;
     align-items: center;
-    gap: 30px;
-    height: 50px;
+    width: 80rem;
 }
-.input-conatiner input{
+.input-conatiner input {
     width: 90%;
     height: 100%;
     padding: 10px 30px;

     border-radius: 10px;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
     outline: none;
-    font-size : 28px;
+    font-size: 28px;
 }
-.input-conatiner button{
+.input-conatiner button {
     width: 15%;
     height: 100%;
     border: none;
     border-radius: 10px;
     cursor: pointer;
-    background-color: #ffba08;
+    /*background-color: #ffba08;*/
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-.input-conatiner button p{
-    font-size : 28px;
+.input-conatiner button p {
+    font-size: 28px;
 }
 
 /* 진행 상태바 */
 .progress-container {
-    width: 100%;
+    width: 50rem;
+    height: fit-content;
     background-color: #ffffff;
-    border-radius: 5px;
+    border-radius: 10px;
     overflow: hidden;
-    margin-top: 20px;
-    display : flex;
+    display: flex;
     flex-direction: column;
-    gap :30px;
+    gap: 30px;
+    padding: 30px;
 }
 
 .progress-bar {

     text-align: center;
     line-height: 30px;
     color: white;
-    border : none;
+    border: none;
     border-radius: 5px;
     transition: width 0.3s;
-    font-size : 20px;
+    font-size: 20px;
 }
 
 /* 로딩 gif */
-.loading-container{
-    display : flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 30px;
-    text-align: center;
-    margin-top : 30px;
-    padding-bottom : 40px;
-}
-.loading-gif{
-    width: 25%;
-    border-radius: 500px;
-}
-.loading-container p {
-    font-size : 25px;
-}
-
-/* 결과 container */
-.result-container{
-    margin-top: 30px;
+.loading-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 30px;
+    text-align: center;
 }
-.result-container img{
-    width : 30%;
+.loading-gif {
+    width: 52%;
+    border-radius: 500px;
 }
-.word-container{
+.loading-container p {
+    font-size: 25px;
+}
+
+/* 결과 container */
+.result-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 10px;
+    width: 50rem;
+    height: 100%;
+}
+.result-container img {
+    width: 60%;
+}
+.word-container {
     width: 30%;
     text-align: center;
     padding: 20px 0px;

     gap: 15px;
 }
 .word-container h2 {
-    font-size : 28px;
+    font-size: 28px;
 }
 
-.aibox{
+.aibox {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: auto;
     padding: 30px 0px;
 }
+
+.modal-container {
+    width: 50rem;
+    height: 40rem;
+    border-radius: 10px;
+    z-index: 100;
+    position: absolute;
+    top: 25rem;
+    right: 10%;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
+.modal-box {
+    gap: 30px;
+    margin-top: 10%;
+    margin-left: 5%;
+}
 </style>

fd960b0

c4227a5

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


 <template>
-    <div class="header flex justify-between align-center header-box">
-        <div>
-            <router-link to="/MyPlan.page">
-                <div class="logo"><img src="../../resources/img/logo2.png" alt="" /></div>
-            </router-link>
+  <div class="header flex justify-between align-center header-box">
+    <div>
+      <router-link to="/MyPlan.page">
+        <div class="logo">
+          <img src="../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
-        <div class="flex align-center">
-            <Menu :currentRoute="$route.path"></Menu>
-            <div class="notice" @click="buttonSearch">
-                <img src="../../resources/img/icon2.png" alt="" />
-                <p>{{ unCheck }}</p>
-            </div>
-            <img src="../../resources/img/new_img/profile_img.png" alt="" />
-            <div class="look-btn" @click="logout">
-                <img src="../../resources/img/new_img/icon/logout_icon.png" alt="" />
-            </div>
-            <div 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="closeBtn">
-                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-                        </button>
-                    </div>
-                    <article
-                        class="flex justify-between mt20"
-                        v-for="item in dataList"
-                        :key="item.id"
-                        :class="{ 'selected-row': selectedRow == item.dataList }"
-                    >
-                        <img style="width: fit-content" src="../../resources/img/img200_13p.png" alt="" />
-                        <p class="title1 ml20" style="width: 60%">{{ item.bbsTtl }}</p>
-                        <button @click="buttonSearch2(item)" type="button" title="글쓰기" class="new-btn">
-                            자세히 보기
-                        </button>
-                    </article>
-                    <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px">
-                        <button @click="previousPage" :disabled="page === 1">이전</button>
-                        <button class="selected-btn">{{ page }}</button>
-                        <button @click="nextPage" :disabled="page === totalPages">다음</button>
-                    </article>
-                </div>
-            </div>
-            <div class="popup-wrap popup2" v-show="searchOpen2">
-                <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 class="board-wrap">
-                        <div class="flex align-center">
-                            <label for="" class="title2">{{ boardData.bbsTtl }}</label>
-                        </div>
-                        <hr />
-                        <!-- <textarea readonly name="" id="">{{ boardData.bbsCnt }}</textarea> -->
-                    </div>
-                    <div class="flex justify-center mt20">
-                        <button type="button" title="확인" class="new-btn" @click="closeBtn2">확인</button>
-                    </div>
-                </div>
-            </div>
-        </div>
+      </router-link>
     </div>
+    <div class="flex align-center">
+      <Menu :currentRoute="$route.path"></Menu>
+      <div class="notice" @click="buttonSearch">
+        <img src="../../resources/img/icon2.png" alt="" />
+        <p>{{ unCheck }}</p>
+      </div>
+      <img src="../../resources/img/new_img/profile_img.png" alt="" />
+      <div class="look-btn" @click="logout">
+        <img src="../../resources/img/new_img/icon/logout_icon.png" alt="" />
+      </div>
+      <div 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="closeBtn">
+              <svg-icon
+                type="mdi"
+                :path="mdiWindowClose"
+                class="close-btn"
+              ></svg-icon>
+            </button>
+          </div>
+          <article
+            class="flex justify-between mt20"
+            v-for="item in dataList"
+            :key="item.id"
+            :class="{ 'selected-row': selectedRow == item.dataList }"
+          >
+            <img
+              style="width: fit-content"
+              src="../../resources/img/img200_13p.png"
+              alt=""
+            />
+            <p class="title1 ml20" style="width: 60%">{{ item.bbsTtl }}</p>
+            <button
+              @click="buttonSearch2(item)"
+              type="button"
+              title="글쓰기"
+              class="new-btn"
+            >
+              자세히 보기
+            </button>
+          </article>
+          <article
+            class="table-pagination flex justify-center align-center mb20 mt30"
+            style="gap: 10px"
+          >
+            <button @click="previousPage" :disabled="page === 1">이전</button>
+            <button class="selected-btn">{{ page }}</button>
+            <button @click="nextPage" :disabled="page === totalPages">
+              다음
+            </button>
+          </article>
+        </div>
+      </div>
+      <div class="popup-wrap popup2" v-show="searchOpen2">
+        <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 class="board-wrap">
+            <div class="flex align-center">
+              <label for="" class="title2">{{ boardData.bbsTtl }}</label>
+            </div>
+            <hr />
+            <!-- <textarea readonly name="" id="">{{ boardData.bbsCnt }}</textarea> -->
+          </div>
+          <div class="flex justify-center mt20">
+            <button
+              type="button"
+              title="확인"
+              class="new-btn"
+              @click="closeBtn2"
+            >
+              확인
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiWindowClose } from '@mdi/js';
-import axios from 'axios';
-import Menu from './Menu.vue';
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify, mdiWindowClose } from "@mdi/js";
+import axios from "axios";
+import Menu from "./Menu.vue";
 export default {
-    data() {
-        return {
-            mdiWindowClose: mdiWindowClose,
-            showModal: false,
-            searchOpen: false,
-            searchOpen2: false,
+  data() {
+    return {
+      mdiWindowClose: mdiWindowClose,
+      showModal: false,
+      searchOpen: false,
+      searchOpen2: false,
 
-            // 게시글 정보
-            dataList: [],
-            totalBoard: null,
-            selectedRow: '',
-            unCheck: null,
+      // 게시글 정보
+      dataList: [],
+      totalBoard: null,
+      selectedRow: "",
+      unCheck: null,
 
-            boardData: [],
+      boardData: [],
 
-            // 페이징 정보
-            page: 1,
-            pageSize: 2,
-            totalpages: null,
+      // 페이징 정보
+      page: 1,
+      pageSize: 2,
+      totalpages: null,
 
-            // 사용자 정보
-            userId: 'USID_000000000000006',
-            stdId: '',
-        };
+      // 사용자 정보
+      userId: "USID_000000000000006",
+      stdId: "",
+    };
+  },
+  methods: {
+    closeModal() {
+      this.showModal = false;
     },
-    methods: {
-        closeModal() {
-            this.showModal = false;
-        },
-        buttonSearch() {
-            this.searchOpen = true;
-        },
-        buttonSearch2(item) {
-            const vm = this;
-            this.searchOpen2 = true;
-            this.boardData = item;
-
-            axios({
-                url: '/board/boardStudentCheck.json',
-                method: 'post',
-                headers: {
-                    'Content-Type': 'application/json; charset=UTF-8',
-                },
-                data: {
-                    bbsId: item.bbsId,
-                    stdId: vm.stdId,
-                },
-            })
-                .then(function (res) {
-                    vm.boardList();
-                })
-                .catch(function (error) {
-                    console.log('result - error : ', error);
-                });
-        },
-        closeBtn() {
-            this.searchOpen = false;
-        },
-        closeBtn2() {
-            this.searchOpen2 = false;
-        },
-
-        logout() {
-            const result = confirm('로그아웃 하시겠습니까?');
-            if (result) {
-                this.$store.dispatch('logout');
-                this.goToPage('login');
-            } else {
-                return;
-            }
-        },
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-
-        // 공지 조회
-        boardList() {
-            const vm = this;
-            axios({
-                url: '/board/boardStudentList.json',
-                method: 'post',
-                headers: {
-                    'Content-Type': 'application/json; charset=UTF-8',
-                },
-                data: { page: vm.page, pageSize: vm.pageSize, userId: vm.userId },
-            })
-                .then(function (res) {
-                    vm.dataList = res.data.result[0].boardClass[0].board;
-                    vm.userNm = res.data.result[0].userNm;
-                    vm.userId = res.data.result[0].userId;
-                    vm.unCheck = res.data.unCheck;
-                    vm.stdId = res.data.result[0].boardClass[0].board[0].boardStudent[0].stdId;
-                    vm.totalBoard = res.data.totalBoard;
-                    vm.totalPages = Math.ceil(vm.totalBoard / vm.pageSize);
-                })
-                .catch(function (error) {
-                    console.log('result - error : ', error);
-                });
-        },
-
-        previousPage() {
-            if (this.page > 1) {
-                this.page -= 1;
-                this.boardList();
-            }
-        },
-
-        nextPage() {
-            if (this.page < this.totalPages) {
-                this.page += 1;
-                this.boardList();
-            }
-        },
+    buttonSearch() {
+      this.searchOpen = true;
     },
-    watch: {},
-    computed: {},
-    components: {
-        SvgIcon,
-        Menu: Menu,
+    buttonSearch2(item) {
+      const vm = this;
+      this.searchOpen2 = true;
+      this.boardData = item;
+
+      axios({
+        url: "/board/boardStudentCheck.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          bbsId: item.bbsId,
+          stdId: vm.stdId,
+        },
+      })
+        .then(function (res) {
+          vm.boardList();
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+        });
     },
-    mounted() {
-        console.log('Header mounted');
+    closeBtn() {
+      this.searchOpen = false;
+    },
+    closeBtn2() {
+      this.searchOpen2 = false;
+    },
+
+    logout() {
+      const result = confirm("로그아웃 하시겠습니까?");
+      if (result) {
+        this.$store.dispatch("logout");
+        this.goToPage("login");
+      } else {
+        return;
+      }
+    },
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+
+    // 공지 조회
+    boardList() {
+      const vm = this;
+      axios({
+        url: "/board/boardStudentList.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: { page: vm.page, pageSize: vm.pageSize, userId: vm.userId },
+      })
+        .then(function (res) {
+          vm.dataList = res.data.result[0].boardClass[0].board;
+          vm.userNm = res.data.result[0].userNm;
+          vm.userId = res.data.result[0].userId;
+          vm.unCheck = res.data.unCheck;
+          vm.stdId =
+            res.data.result[0].boardClass[0].board[0].boardStudent[0].stdId;
+          vm.totalBoard = res.data.totalBoard;
+          vm.totalPages = Math.ceil(vm.totalBoard / vm.pageSize);
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+        });
+    },
+
+    previousPage() {
+      if (this.page > 1) {
+        this.page -= 1;
         this.boardList();
+      }
     },
+
+    nextPage() {
+      if (this.page < this.totalPages) {
+        this.page += 1;
+        this.boardList();
+      }
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {
+    SvgIcon,
+    Menu: Menu,
+  },
+  mounted() {
+    console.log("Header mounted");
+    this.boardList();
+  },
 };
 </script>
 <style scoped>
 .popup-wrap {
-    position: fixed;
-    background-color: transparent;
-    width: fit-content;
-    height: fit-content;
-    z-index: 10;
+  position: fixed;
+  background-color: transparent;
+  width: fit-content;
+  height: fit-content;
+  z-index: 10;
 }
 
 .popup-box {
-    top: 300px;
-    left: 62%;
+  top: 300px;
+  left: 62%;
 }
 
 .popup2 .popup-box {
-    top: 450px;
-    left: 38%;
+  top: 450px;
+  left: 38%;
 }
 
+/* 
 .header-box {
     background-color: white;
     padding: 10px 50px;
     box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
         rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
         rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
+} */
+
+.header-box {
+  background-color: #ffffff80;
+  padding: 10px 50px;
+  /* box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px; */
+  backdrop-filter: blur(10px);
 }
 </style>

fd960b0

c4227a5

client/views/layout/Side.vue

--- client/views/layout/Side.vue

+++ client/views/layout/Side.vue


 <template>
-    <div class="side">
-        <div class="profile mb30">
-            <div class="flex align-center" style="gap: 18px">
-                <img src="../../resources/img/img16_s.png" alt="" style="border-radius: 100%; width: 10rem" />
-                <div class="mt25">
-                    <div>
-                        <p class="name mb10">{{ studentInfo.studentName }}</p>
-                        <p class="mb5">
-                            <span><img src="../../resources/img/new_img/icon/school_icon.png" alt="" /></span>
-                            {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
-                            {{ studentInfo.className }}
-                        </p>
-                    </div>
-                    <!-- <progress-bar :progress="progress"></progress-bar> -->
-                </div>
-            </div>
-            <div class="problem-box mt25">
-                <p style="font-weight: bold">
-                    지금까지 푼 총 문제 수 :
-                    <span style="color: #9528b7; font-size: 16px; font-weight: bold"
-                        >{{ studentInfo.totalProblemsSolved }}개</span
-                    >
-                </p>
-            </div>
+  <div class="side">
+    <div class="profile mb30">
+      <div class="flex align-center" style="gap: 18px">
+        <img
+          src="../../resources/img/img16_s.png"
+          alt=""
+          style="border-radius: 100%; width: 10rem"
+        />
+        <div class="mt25">
+          <div>
+            <p class="name mb10">{{ studentInfo.studentName }}</p>
+            <p class="mb5">
+              <span
+                ><img
+                  src="../../resources/img/new_img/icon/school_icon.png"
+                  alt=""
+              /></span>
+              {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
+              {{ studentInfo.className }}
+            </p>
+          </div>
+          <!-- <progress-bar :progress="progress"></progress-bar> -->
         </div>
-        <hr style="margin: 25px 20px" />
-        <div class="history-box">
-            <p class="title2 mb20">최근 학습 히스토리</p>
-            <ul class="flex-column" style="gap: 10px">
-                <!-- 더미 데이터 -->
-                <li>· 지학사 3학년 1학기</li>
-                <li>· 지학사 3학년 2학기</li>
-                <!-- 여기까지 -->
-                <li v-for="historyItem in studentInfo.history" :key="historyItem.unitId">
-                    · [{{ historyItem.bookName }}] {{ historyItem.unitName }}
-                </li>
-            </ul>
-        </div>
-        <!-- <div class="ask mb30">
+      </div>
+      <div class="problem-box mt25">
+        <p style="font-weight: bold">
+          지금까지 푼 총 문제 수 :
+          <span style="color: #9528b7; font-size: 16px; font-weight: bold"
+            >{{ studentInfo.totalProblemsSolved }}개</span
+          >
+        </p>
+      </div>
+    </div>
+    <hr style="margin: 25px 20px" />
+    <div class="history-box">
+      <p class="title2 mb20">최근 학습 히스토리</p>
+      <ul class="flex-column" style="gap: 10px">
+        <!-- 더미 데이터 -->
+        <li>· 에듀캐롯 3학년 1학기</li>
+        <li>· 에듀캐롯 3학년 2학기</li>
+        <!-- 여기까지 -->
+        <li
+          v-for="historyItem in studentInfo.history"
+          :key="historyItem.unitId"
+        >
+          · [{{ historyItem.bookName }}] {{ historyItem.unitName }}
+        </li>
+      </ul>
+    </div>
+    <!-- <div class="ask mb30">
             <p class="title1 mb15">선생님께 질문 있어요~</p>
 
             <div class="memo mb15">

                 <button @click="updateQuestion">질문하기</button>
             </div>
         </div> -->
-        <div class="mt25">
-            <div class="button-box flex">
-                <button @click="handleClickEvent" style="width: 100%">
-                    <img
-                        class="look-btn"
-                        src="../../resources/img/new_img/plan/wrong_note_btn.png"
-                        alt=""
-                        style="width: 100%"
-                    />
-                </button>
-            </div>
-            <div class="button-box flex">
-                <button @click="goPopupOpen" style="width: 100%">
-                    <img src="../../resources/img/new_img/plan/question_btn.png" alt="" style="width: 100%" />
-                </button>
-            </div>
-        </div>
+    <div class="mt25">
+      <div class="button-box flex">
+        <button @click="handleClickEvent" style="width: 100%">
+          <img
+            class="look-btn"
+            src="../../resources/img/new_img/plan/wrong_note_btn.png"
+            alt=""
+            style="width: 100%"
+          />
+        </button>
+      </div>
+      <div class="button-box flex">
+        <button @click="goPopupOpen" style="width: 100%">
+          <img
+            src="../../resources/img/new_img/plan/question_btn.png"
+            alt=""
+            style="width: 100%"
+          />
+        </button>
+      </div>
     </div>
-    <!-- 질문하기 팝업 -->
-    <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
-        <div class="question-popup">
-            <div class="flex justify-between align-center">
-                <p class="question-text mt20">선생님께 질문하기</p>
-                <img class="look-btn" @click="goPopupClose" src="../../resources/img/btn25_93t_normal.png" alt="" />
-            </div>
-            <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">선생님! 질문있어요!!</p>
-            <div class="memo mt25">
-                <p class="title1 memo-text">내용</p>
-                <textarea name="" id="" placeholder="궁금한 것을 적어보세요." v-model="question"></textarea>
-            </div>
-            <div class="questionBtn-box flex justify-end" style="gap: 15px">
-                <button style="border-color: #eaedf4; color: #8c8c8c" @click="goPopupClose">취소하기</button>
-                <button @click="updateQuestion" style="border-color: #6327b9; color: white; background-color: #6327b9">
-                    질문하기
-                </button>
-            </div>
-        </div>
+  </div>
+  <!-- 질문하기 팝업 -->
+  <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
+    <div class="question-popup">
+      <div class="flex justify-between align-center">
+        <p class="question-text mt20">선생님께 질문하기</p>
+        <img
+          class="look-btn"
+          @click="goPopupClose"
+          src="../../resources/img/btn25_93t_normal.png"
+          alt=""
+        />
+      </div>
+      <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">
+        선생님! 질문있어요!!
+      </p>
+      <div class="memo mt25">
+        <p class="title1 memo-text">내용</p>
+        <textarea
+          name=""
+          id=""
+          placeholder="궁금한 것을 적어보세요."
+          v-model="question"
+        ></textarea>
+      </div>
+      <div class="questionBtn-box flex justify-end" style="gap: 15px">
+        <button
+          style="border-color: #eaedf4; color: #8c8c8c"
+          @click="goPopupClose"
+        >
+          취소하기
+        </button>
+        <button
+          @click="updateQuestion"
+          style="border-color: #6327b9; color: white; background-color: #6327b9"
+        >
+          질문하기
+        </button>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import ProgressBar from '../component/ProgressBar.vue';
-import axios from 'axios';
+import ProgressBar from "../component/ProgressBar.vue";
+import axios from "axios";
 
 export default {
-    data() {
-        return {
-            progress: 20,
-            studentInfo: {
-                studentName: '',
-                institutionName: '',
-                grade: '',
-                className: '',
-                studentQuestion: '',
-                history: [],
-            },
-            userId: '1', // userId 임시 설정
+  data() {
+    return {
+      progress: 20,
+      studentInfo: {
+        studentName: "",
+        institutionName: "",
+        grade: "",
+        className: "",
+        studentQuestion: "",
+        history: [],
+      },
+      userId: "1", // userId 임시 설정
 
-            popupOpen: false,
-            question: null,
-        };
+      popupOpen: false,
+      question: null,
+    };
+  },
+  methods: {
+    pageSetting() {
+      this.userId = this.$store.getters.getUserInfo.userId;
+      console.log("유저 아이디: ", this.userId);
+      this.fetchStudentInfo();
     },
-    methods: {
-        pageSetting() {
-            this.userId = this.$store.getters.getUserInfo.userId;
-            console.log('유저 아이디: ', this.userId);
-            this.fetchStudentInfo();
-        },
 
-        // 학생 정보를 가져오는 메서드
-        fetchStudentInfo() {
-            axios
-                .post('/studentInfo/getInfo.json', { userId: this.userId })
-                .then((response) => {
-                    console.log('학생 정보 조회 : ', response.data);
-                    this.studentInfo = response.data;
-                })
-                .catch((error) => {
-                    console.error('학생 정보 가져오기 실패:', error);
-                });
-        },
-
-        // 질문 업데이트 메서드
-        updateQuestion() {
-            if (this.question === null) {
-                alert('질문을 입력해주세요');
-                return;
-            }
-            axios
-                .post('/studentInfo/updateQuestion.json', {
-                    userId: this.userId,
-                    // userId: 'USID_000000000000002',
-                    studentQuestion: this.question,
-                })
-                .then((response) => {
-                    console.log('질문이 성공적으로 업데이트되었습니다.');
-                    alert('질문이 성공적으로 업데이트되었습니다.');
-                })
-                .catch((error) => {
-                    console.error('질문 업데이트 실패:', error);
-                    alert('질문 업데이트에 실패했습니다.');
-                });
-            this.question = null;
-        },
-
-        handleClick() {
-            this.toggleText();
-            this.goToPage('PreviewNote');
-        },
-
-        handleClick() {
-            this.toggleTextAndNavigate();
-        },
-
-        toggleTextAndNavigate() {
-            if (this.buttonText === '오답노트') {
-                this.buttonText = '학습 코스';
-                this.goToPage('PreviewNote');
-                // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
-            } else {
-                this.buttonText = '오답노트';
-                this.goToPage('Dashboard');
-                // 버튼 텍스트가 '오답노트'일 때 이동할 경로
-            }
-        },
-
-        handleClickEvent() {
-            this.goToPage('PreviewNote');
-        },
-
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-
-        goPopupOpen() {
-            this.popupOpen = true;
-        },
-        goPopupClose() {
-            this.popupOpen = false;
-            this.question = null;
-        },
+    // 학생 정보를 가져오는 메서드
+    fetchStudentInfo() {
+      axios
+        .post("/studentInfo/getInfo.json", { userId: this.userId })
+        .then((response) => {
+          console.log("학생 정보 조회 : ", response.data);
+          this.studentInfo = response.data;
+        })
+        .catch((error) => {
+          console.error("학생 정보 가져오기 실패:", error);
+        });
     },
-    watch: {},
-    computed: {},
-    components: {
-        ProgressBar,
+
+    // 질문 업데이트 메서드
+    updateQuestion() {
+      if (this.question === null) {
+        alert("질문을 입력해주세요");
+        return;
+      }
+      axios
+        .post("/studentInfo/updateQuestion.json", {
+          userId: this.userId,
+          // userId: 'USID_000000000000002',
+          studentQuestion: this.question,
+        })
+        .then((response) => {
+          console.log("질문이 성공적으로 업데이트되었습니다.");
+          alert("질문이 성공적으로 업데이트되었습니다.");
+        })
+        .catch((error) => {
+          console.error("질문 업데이트 실패:", error);
+          alert("질문 업데이트에 실패했습니다.");
+        });
+      this.question = null;
     },
-    mounted() {
-        console.log('Side mounted');
-        this.pageSetting();
+
+    handleClick() {
+      this.toggleText();
+      this.goToPage("PreviewNote");
     },
+
+    handleClick() {
+      this.toggleTextAndNavigate();
+    },
+
+    toggleTextAndNavigate() {
+      if (this.buttonText === "오답노트") {
+        this.buttonText = "학습 코스";
+        this.goToPage("PreviewNote");
+        // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
+      } else {
+        this.buttonText = "오답노트";
+        this.goToPage("Dashboard");
+        // 버튼 텍스트가 '오답노트'일 때 이동할 경로
+      }
+    },
+
+    handleClickEvent() {
+      this.goToPage("PreviewNote");
+    },
+
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+
+    goPopupOpen() {
+      this.popupOpen = true;
+    },
+    goPopupClose() {
+      this.popupOpen = false;
+      this.question = null;
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {
+    ProgressBar,
+  },
+  mounted() {
+    console.log("Side mounted");
+    this.pageSetting();
+  },
 };
 </script>
 <style scoped>
 .login-btn img {
-    width: 430px;
-    height: 85px;
+  width: 430px;
+  height: 85px;
 }
 
 .problem-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid #6327b9;
-    background-color: #f0eaf8;
-    border-radius: 8px;
-    padding: 10px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #6327b9;
+  background-color: #f0eaf8;
+  border-radius: 8px;
+  padding: 10px 10px;
 }
 
 .history-box {
-    background-color: white;
-    padding: 30px 20px;
-    border: 1px solid #c6c6c6;
-    border-radius: 10px;
-    margin: 25px 20px 0px;
+  background-color: white;
+  padding: 30px 20px;
+  border: 1px solid #c6c6c6;
+  border-radius: 10px;
+  margin: 25px 20px 0px;
 }
 
 .history-box li {
-    background-color: #eaedf4;
-    border-radius: 10px;
-    font-size: 18px;
-    list-style-type: none;
-    padding: 10px;
+  background-color: #eaedf4;
+  border-radius: 10px;
+  font-size: 18px;
+  list-style-type: none;
+  padding: 10px;
 }
 
 .button-box {
-    margin: 10px 20px;
+  margin: 10px 20px;
 }
 
 .question-popup {
-    background-color: white;
-    border-radius: 10px;
-    padding: 30px 40px;
-    position: absolute;
-    top: 15%;
-    left: 25%;
-    width: 100rem;
+  background-color: white;
+  border-radius: 10px;
+  padding: 30px 40px;
+  position: absolute;
+  top: 15%;
+  left: 25%;
+  width: 100rem;
 }
 
 .question-text {
-    font-family: 'ONEMobilePOPOTF';
-    font-size: 32px;
-    color: #6327b9;
+  font-family: "ONEMobilePOPOTF";
+  font-size: 32px;
+  color: #6327b9;
 }
 
 .memo-text {
-    font-family: 'ONEMobilePOPOTF';
-    color: #6327b9;
+  font-family: "ONEMobilePOPOTF";
+  color: #6327b9;
 }
 
 .memo textarea {
-    border: 2px solid #cac0e3;
-    border-radius: 10px;
-    width: 100%;
-    padding: 20px;
-    height: 30rem;
-    margin: 20px 0px 40px;
+  border: 2px solid #cac0e3;
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  height: 30rem;
+  margin: 20px 0px 40px;
 }
 
 .questionBtn-box button {
-    font-size: 18px;
-    padding: 8px 30px;
-    border: 2px solid;
-    border-radius: 8px;
-    font-weight: bold;
-    font-family: 'ONEMobileOTF-Regular';
+  font-size: 18px;
+  padding: 8px 30px;
+  border: 2px solid;
+  border-radius: 8px;
+  font-weight: bold;
+  font-family: "ONEMobileOTF-Regular";
 }
 </style>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>
-    <div class="title-box mb25 flex align-center mt40" style="
-    justify-content: space-between;
-">
+    <div
+      class="title-box mb25 flex align-center mt40"
+      style="justify-content: space-between"
+    >
       <div>
         <span class="title mr40">1. Hello WORLD</span>
         <span class="subtitle">my name is dd</span>
       </div>
-      <button class="completeBtn" @click="complete"> 학습 종료 </button>
+      <button class="completeBtn" @click="complete">학습 종료</button>
     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn">

   },
   methods: {
     complete() {
-        const { unit_id, book_id } = this.$route.query;
-        this.$router.push({ name: 'Dashboard', query: { value: 1, unit_id, book_id } });
+      const { unit_id, book_id } = this.$route.query;
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: 1, unit_id, book_id },
+      });
     },
     goToPage(page) {
       this.$router.push({ name: page });

   padding: 10px 30px;
   border-radius: 10px;
   font-size: 28px;
-  font-family: 'ONEMobilePOPOTF';
+  font-family: "ONEMobilePOPOTF";
 }
 </style>

fd960b0

c4227a5

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

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

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


 <template>
-  <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px; width: 20%">
-      <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-      </router-link>
-    </div>
-    <div class="title-box mb25 flex align-center mt40">
-      <span class="title mr40">1. Hello WORLD</span>
-      <span class="subtitle">my name is dd</span>
-    </div>
-    <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter1')"><img src="../../../../resources/img/left.png" alt=""></div>
-      <div class="content title-box">
-        <p class="title mt25 title-bg">step1. Hello WORLD</p>
-
-        <div class="imgGroup">
-          <img src="../../../../resources/img/img35_s.png" data-num="1">
-
+    <div id="Chapter1_1" class="content-wrap">
+        <div style="margin: 30px 0px 50px; width: 20%">
+            <router-link to="/MyPlan.page">
+                <div class="logo mb25">
+                    <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </div>
-        <div class="textareaGroup">
-          <textarea>Bike lanes are important because they ket, bike riders and all other people safe. Before bike lanes, people rode on the sidewalk or in the same lanes as the cars on the street. Riding a bike on the sidewalk can cause you to crash into someone who is walking by. And riding a bike in the same lanes as cars can be unsafe, too, Bikes move more slowly than cars, so people driving behind bikes will try to go around them. These cars could hit the bike riders or other cars. </textarea>
-          <div id="popup" class="popup">
-            <div class="imgGroup mb10">
-              <img src="../../../../resources/img/img36_s.png" data-num="1">
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <div>
+                <span class="title mr40">1. Hello WORLD</span>
+                <span class="subtitle">my name is dd</span>
             </div>
-              <h3>sidewalk</h3>
-             <div class="flex align-center  justify-center mt10">
-                <p class="yellow-box">명</p>
-                <span class="title1">보도</span>
-             </div>
-          </div>
+            <div class="flex">
+                <TextToImage />
+                <button class="completeBtn" @click="complete">학습 종료</button>
+            </div>
         </div>
-      </div>
-      <div class="next-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/right.png" alt=""></div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" @click="goToPage('Chapter1_2')">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <div class="content title-box">
+                <p class="title mt25 title-bg">step1. Hello WORLD</p>
+                <div class="flex align-center ml50 mb15" style="margin-top: -30px; gap: 10px">
+                    <h4>설명에 맞춰 영어 문장의 의미를 이해해봅시다. 대화문을 클릭해보세요!</h4>
+                    <div class="listen-btn">
+                        <img src="../../../../resources/img/btn10_s.png" alt="" @click="playAudio" />
+                        <audio
+                            id="audio-player"
+                            src="client/resources/audio/passage/passage_explanation.mp3"
+                            preload="auto"
+                        ></audio>
+                    </div>
+                </div>
+                <div class="flex justify-center" style="gap: 50px">
+                    <div class="readGroup">
+                        <div>
+                            <div class="textbox">
+                                <article
+                                    v-for="(line, index) in combinedLines"
+                                    :key="index"
+                                    :class="['flex', 'align-center', 'mb10', { 'justify-end': index % 2 !== 0 }]"
+                                >
+                                    <div v-if="index % 2 === 0" class="icon mr40">
+                                        <img src="../../../../resources/img/img37_s.png" alt="" />
+                                        <p class="name">{{ speakerA_name }}</p>
+                                    </div>
+                                    <p
+                                        v-if="index % 2 === 0"
+                                        class="read"
+                                        @click="handleSelectLine(line)"
+                                        :style="getStyle(line)"
+                                    >
+                                        {{ line }}
+                                    </p>
+
+                                    <p
+                                        v-if="index % 2 !== 0"
+                                        class="read mr40"
+                                        @click="handleSelectLine(line)"
+                                        :style="getStyle(line)"
+                                    >
+                                        {{ line }}
+                                    </p>
+                                    <div v-if="index % 2 !== 0" class="icon">
+                                        <img src="../../../../resources/img/img37_s.png" alt="" />
+                                        <p class="name">{{ speakerB_name }}</p>
+                                    </div>
+                                </article>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="button-box">
+                        <button class="word" @click="wordQuestion">단어 설명</button>
+                        <button class="passage" @click="passageQuestion">문장 설명</button>
+                    </div>
+                </div>
+            </div>
+            <div class="next-btn" @click="goToNextPage">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
+        <div class="popup-wrap" v-if="popupOpen">
+            <div class="popup-container flex-column">
+                <div class="popup-header flex align-center">
+                    <p>선생님의 한 마디</p>
+                    <img
+                        class="look-btn"
+                        @click="handlePopupClose"
+                        src="../../../../resources/img/btn25_93t_normal.png"
+                        alt=""
+                    />
+                </div>
+                <div>
+                    <p class="popup-content mt30" v-html="formattedExplanation"></p>
+                </div>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
+import TextToImage from '../../../component/TextToImage.vue';
+import axios from 'axios';
 export default {
-  data() {
-    return {
-    }
-  },
-  methods: {
-    goToPage(page) {
-      this.$router.push({ name: page });
-    }
-  },
-  watch: {
+    data() {
+        return {
+            text_data: null, // 받아온 지문 정보
+            speakerA_name: null,
+            speakerB_name: null,
+            speakerA: [],
+            speakerB: [],
 
-  },
-  computed: {
+            seq: this.$store.getters.seqNum,
+            selectedLine: null, // 선택한 지문
+            explanation_response: null, // 설명 응답
 
-  },
-  components: {
-  },
-  mounted() {
-    const textArea = this.$refs.textArea;
-      const popup = this.$refs.popup;
+            popupOpen: false,
+        };
+    },
+    methods: {
+        complete() {
+            const { unit_id, book_id } = this.$route.query;
+            this.$router.push({
+                name: 'Dashboard',
+                query: { value: this.seq, unit_id, book_id },
+            });
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        goToNextPage() {
+            alert('지문 학습 완료!');
+            this.complete();
+        },
+        // 대화 지문 API
+        async fetchText() {
+            axios({
+                url: '/text/selectOneText.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    textId: this.textId,
+                },
+            })
+                .then((response) => {
+                    this.text_data = response.data[0].text_cnt;
+                    this.splitConversation();
+                })
+                .catch((err) => {
+                    console.log('지문 에러 : ', err);
+                });
+        },
+        // 대화 지문 split
+        splitConversation() {
+            const lines = this.text_data.split('/');
+            const speakers = {};
 
-      textArea.addEventListener('mousemove', (event) => {
-         const text = textArea.value;
-         const words = text.split(' ');
-         const selectionStart = textArea.selectionStart;
-         const selectionEnd = textArea.selectionEnd;
+            lines.forEach((line) => {
+                const [speaker, message] = line.trim().split(':');
 
-         if (selectionStart !== selectionEnd) {
-            const selectedText = text.substring(selectionStart, selectionEnd);
-            const rect = textArea.getBoundingClientRect();
-            popup.style.left = `${event.clientX}px`;
-            popup.style.top = `${event.clientY + window.scrollY}px`;
-            popup.innerHTML = `You selected: ${selectedText}`;
-            popup.style.display = 'block';
-         } else {
-            popup.style.display = 'none';
-         }
-      });
+                if (!speakers.speakerA_name && !speakers.speakerB_name) {
+                    // 첫 번째 발화자를 speakerA_name으로 설정
+                    speakers.speakerA_name = speaker.trim();
+                    this.speakerA.push(message.trim());
+                } else if (
+                    speakers.speakerA_name &&
+                    !speakers.speakerB_name &&
+                    speakers.speakerA_name !== speaker.trim()
+                ) {
+                    // 두 번째 발화자를 speakerB_name으로 설정
+                    speakers.speakerB_name = speaker.trim();
+                    this.speakerB.push(message.trim());
+                } else if (speaker.trim() === speakers.speakerA_name) {
+                    // speakerA_name에 내용 추가
+                    this.speakerA.push(message.trim());
+                } else if (speaker.trim() === speakers.speakerB_name) {
+                    // speakerB_name에 내용 추가
+                    this.speakerB.push(message.trim());
+                }
+            });
 
-      document.addEventListener('click', (event) => {
-         if (!textArea.contains(event.target) && !popup.contains(event.target)) {
-            popup.style.display = 'none';
-         }
-      });
-  }
+            this.speakerA_name = speakers.speakerA_name;
+            this.speakerB_name = speakers.speakerB_name;
+        },
+
+        playAudio() {
+            const audio = document.getElementById('audio-player');
+            audio.play();
+            console.log('playing');
+        },
+
+        // 검색할 지문 선택
+        handleSelectLine(line) {
+            this.selectedLine = line;
+            // console.log('선택된 지문 : ', this.selectedLine);
+        },
+
+        getStyle(line) {
+            return {
+                backgroundColor: this.selectedLine === line ? '#ffc980' : '',
+                fontSize: this.selectedLine === line ? '40px' : '',
+                boxShadow: this.selectedLine === line ? 'rgba(0, 0, 0, 0.24) 0px 3px 8px' : '',
+                fontWeight: this.selectedLine === line ? 'bold' : '',
+                cursor: 'pointer',
+            };
+        },
+
+        // 단어 설명
+        wordQuestion() {
+            // console.log('line : ', this.selectedLine);
+            if (this.selectedLine === null) {
+                alert('궁금한 대화문을 선택해주세요');
+                return;
+            }
+            axios({
+                url: 'http://165.229.169.32:35716/word_question',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    word: this.selectedLine,
+                },
+            })
+                .then((response) => {
+                    // console.log('word 지문 응답 : ', response.data.explanation);
+                    this.explanation_response = response.data.explanation;
+                    this.handlePopupOpen();
+                })
+                .catch((err) => {
+                    console.log('word 지문 에러 : ', err);
+                });
+        },
+
+        // 지문 설명
+        passageQuestion() {
+            // console.log('line : ', this.selectedLine);
+            if (this.selectedLine === null) {
+                alert('궁금한 대화문을 선택해주세요');
+                return;
+            }
+            axios({
+                url: 'http://165.229.169.32:35716/passage_question',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    passage: this.selectedLine,
+                },
+            })
+                .then((response) => {
+                    // console.log('passage 지문 응답 : ', response.data.explanation);
+                    this.explanation_response = response.data.explanation;
+                    this.handlePopupOpen();
+                })
+                .catch((err) => {
+                    console.log('passage 지문 에러 : ', err);
+                });
+        },
+
+        /* 팝업 */
+        handlePopupOpen() {
+            this.popupOpen = true;
+        },
+
+        handlePopupClose() {
+            this.popupOpen = false;
+            this.explanation_response = null;
+            this.selectedLine = null;
+        },
+    },
+    watch: {},
+    computed: {
+        textId() {
+            //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
+            return this.$store.getters.getTextId;
+        },
+        combinedLines() {
+            const maxLength = Math.max(this.speakerA.length, this.speakerB.length);
+            const lines = [];
+
+            for (let i = 0; i < maxLength; i++) {
+                if (i < this.speakerA.length) {
+                    lines.push(this.speakerA[i]);
+                }
+                if (i < this.speakerB.length) {
+                    lines.push(this.speakerB[i]);
+                }
+            }
+            return lines;
+        },
+        // 지문 포맷팅
+        formattedExplanation() {
+            return this.explanation_response.replace(/\n/g, '<br>').replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+        },
+    },
+    components: {
+        TextToImage: TextToImage,
+    },
+    mounted() {
+        this.fetchText();
+    },
+};
+</script>
+
+<style scoped>
+.completeBtn {
+    margin-right: 100px;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
 }
-</script>
+
+.button-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.button-box button {
+    font-family: 'ONEMobilePOPOTF';
+    font-size: 25px;
+    color: #fff;
+    padding: 20px 70px;
+    border-radius: 15px;
+    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
+}
+
+.word {
+    background-color: #28b863;
+}
+
+.passage {
+    background-color: #9528b7;
+}
+
+.popup-container {
+    background-color: #fff;
+    position: absolute;
+    width: 120rem;
+    height: 60rem;
+    padding: 30px;
+    border-radius: 10px;
+    top: 25rem;
+    left: 40rem;
+    overflow: scroll;
+    overflow-x: hidden;
+}
+
+.popup-header {
+    justify-content: space-between;
+}
+
+.popup-header p {
+    font-size: 30px;
+    font-family: 'ONEMobilePOPOTF';
+    color: #6327b9;
+}
+
+.popup-content {
+    font-size: 24px;
+    padding: 20px;
+}
+</style>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

         <span class="title mr40">1. Hello WORLD</span>
         <span class="subtitle">my name is dd</span>
       </div>
-      <button class="completeBtn" @click="complete">학습 종료</button>
+      <div class="flex">
+        <TextToImage />
+        <button class="completeBtn" @click="complete">학습 종료</button>
+      </div>
     </div>
     <div class="flex justify-between align-center">
       <div

       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step1. Hello WORLD</p>
+        <div
+          class="flex align-center ml50 mb15"
+          style="margin-top: -30px; gap: 10px"
+        >
+          <h4>
+            각 인물들의 대화를 듣고 읽어봅시다. 아래의 플레이버튼을 눌러 영어
+            발음을 들어보세요!
+          </h4>
+          <div class="listen-btn">
+            <img
+              src="../../../../resources/img/btn10_s.png"
+              alt=""
+              @click="playAudio"
+            />
+            <audio
+              id="audio-player"
+              src="client/resources/audio/passage/passage_intoduce.mp3"
+              preload="auto"
+            ></audio>
+          </div>
+        </div>
         <div class="flex justify-center">
           <div class="readGroup">
-            <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
             <div>
               <div class="textbox">
                 <article

                   :key="index"
                   :class="[
                     'flex',
-                    'align-start',
+                    'align-center',
                     'mb10',
                     { 'justify-end': index % 2 !== 0 },
                   ]"

                     <p class="name">{{ speakerA_name }}</p>
                   </div>
                   <p v-if="index % 2 === 0" class="read">{{ line }}</p>
+                  <div class="listen-btn ml10" v-if="index % 2 === 0">
+                    <img
+                      src="../../../../resources/img/new_img/icon/play_icon.png"
+                      alt=""
+                      @click="generateTts('male', line)"
+                    />
+                    <audio id="tts-audio-player" preload="auto"></audio>
+                  </div>
 
+                  <div class="listen-btn mr10" v-if="index % 2 !== 0">
+                    <img
+                      src="../../../../resources/img/new_img/icon/play_icon.png"
+                      alt=""
+                      @click="generateTts('femail', line)"
+                    />
+                    <audio id="tts-audio-player" preload="auto"></audio>
+                  </div>
                   <p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
                   <div v-if="index % 2 !== 0" class="icon">
                     <img src="../../../../resources/img/img37_s.png" alt="" />

         <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
-    <TextToImage />
   </div>
 </template>
 

       this.$router.push({ name: page });
     },
     goToNextPage() {
-      alert("지문 학습 완료!");
+      // alert('지문 학습 완료!');
       this.complete();
+      this.goToPage("Chapter1_1");
     },
     // 대화 지문 API
     async fetchText() {

       this.speakerA_name = speakers.speakerA_name;
       this.speakerB_name = speakers.speakerB_name;
     },
+
+    playAudio() {
+      const audio = document.getElementById("audio-player");
+      audio.play();
+      console.log("playing");
+    },
+
+    // 대화 지문 재생
+    generateTts(gender, line) {
+      console.log("line : ", line);
+      axios({
+        url: "http://165.229.169.32:35716/generate_tts",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        responseType: "blob",
+        data: {
+          gender: gender,
+          input_text: line,
+        },
+      })
+        .then((response) => {
+          console.log("tts 응답 : ", response);
+          const audioBlob = new Blob([response.data], { type: "audio/mpeg" });
+          const audioUrl = URL.createObjectURL(audioBlob); // 오디오 url 생성
+          const audioPlayer = document.getElementById("tts-audio-player");
+          audioPlayer.src = audioUrl;
+          audioPlayer.play();
+        })
+        .catch((err) => {
+          console.log("tts 에러 : ", err);
+        });
+    },
   },
   watch: {},
   computed: {

fd960b0

c4227a5

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

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

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


 <template>
-  <div id="Chapter1" class="content-wrap">
-    <div style="margin: 30px 0px 50px; width: 20%">
-      <router-link to="/MyPlan.page">
-        <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+    <div id="Chapter1" class="content-wrap">
+        <div style="margin: 30px 0px 50px; width: 20%">
+            <router-link to="/MyPlan.page">
+                <div class="logo mb25">
+                    <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+                </div>
+            </router-link>
         </div>
-      </router-link>
-    </div>
-    <div
-      class="title-box mb25 flex align-center mt40"
-      style="justify-content: space-between"
-    >
-      <div>
-        <span class="title mr40">1. Hello WORLD</span>
-        <span class="subtitle">my name is dd</span>
-      </div>
-      <button class="completeBtn" @click="complete">학습 종료</button>
-    </div>
-    <div class="flex justify-between align-center">
-      <div
-        class="pre-btn"
-        style="visibility: hidden"
-        @click="goToPage('Chapter1_2')"
-      >
-        <img src="../../../../resources/img/left.png" alt="" />
-      </div>
-      <div class="content title-box">
-        <div class="listenGroup">
-          <p class="title mt25 title-bg">step1. Hello WORLD</p>
-          <!--
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+            <div>
+                <span class="title mr40">1. Hello WORLD</span>
+                <span class="subtitle">my name is dd</span>
+            </div>
+            <button class="completeBtn" @click="complete">학습 종료</button>
+        </div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" style="visibility: hidden" @click="goToPage('Chapter1_2')">
+                <img src="../../../../resources/img/left.png" alt="" />
+            </div>
+            <div class="content title-box">
+                <div class="listenGroup">
+                    <p class="title mt25 title-bg">step1. Hello WORLD</p>
+                    <!--
                     <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1" />
                     -->
-          <img class="bg" :src="img_src" />
+                    <img class="bg" :src="img_src" />
+                </div>
+            </div>
+            <div class="next-btn" @click="goToNextPage">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
         </div>
-      </div>
-      <div class="next-btn" @click="goToNextPage">
-        <img src="../../../../resources/img/right.png" alt="" />
-      </div>
+        <TextToImage />
     </div>
-    <TextToImage />
-  </div>
 </template>
 
 <script>
-import TextToImage from "../../../component/TextToImage.vue";
-import axios from "axios";
+import TextToImage from '../../../component/TextToImage.vue';
+import axios from 'axios';
 export default {
-  data() {
-    return {
-      text_data: null,
-      img_src: null,
-      seq: this.$store.getters.seqNum,
-    };
-  },
-  methods: {
-    complete() {
-      const { unit_id, book_id } = this.$route.query;
-      this.$router.push({
-        name: "Dashboard",
-        query: { value: this.seq, unit_id, book_id },
-      });
+    data() {
+        return {
+            text_data: null,
+            img_src: null,
+            seq: this.$store.getters.seqNum,
+        };
     },
-    goToPage(page) {
-      this.$router.push({ name: page });
-    },
-    goToNextPage() {
-      alert("지문 학습 완료!");
-      this.complete();
-    },
-    // 지문 API
-    async fetchText() {
-      axios({
-        url: "/text/selectOneText.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
+    methods: {
+        complete() {
+            const { unit_id, book_id } = this.$route.query;
+            this.$router.push({
+                name: 'Dashboard',
+                query: { value: this.seq, unit_id, book_id },
+            });
         },
-        data: {
-          textId: this.textId,
+        goToPage(page) {
+            this.$router.push({ name: page });
         },
-      })
-        .then((response) => {
-          this.text_data = response.data[0];
-          console.log("지문 데이터 : ", this.text_data);
-          this.img_src = this.fetchImage(this.text_data.file_rpath);
-        })
-        .catch((err) => {
-          console.log("지문 에러 : ", err);
-        });
+        goToNextPage() {
+            alert('지문 학습 완료!');
+            this.complete();
+        },
+        // 지문 API
+        async fetchText() {
+            axios({
+                url: '/text/selectOneText.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    textId: this.textId,
+                },
+            })
+                .then((response) => {
+                    this.text_data = response.data[0];
+                    console.log('지문 데이터 : ', this.text_data);
+                    this.img_src = this.fetchImage(this.text_data.file_rpath);
+                })
+                .catch((err) => {
+                    console.log('지문 에러 : ', err);
+                });
+        },
+        // 이미지 불러오기
+        fetchImage(fileRpath) {
+            return 'http://165.229.169.113:9080/' + fileRpath;
+        },
     },
-    // 이미지 불러오기
-    fetchImage(fileRpath) {
-      return "http://165.229.169.113:9080/" + fileRpath;
+    watch: {},
+    computed: {
+        textId() {
+            //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
+            return this.$store.getters.getTextId;
+        },
     },
-  },
-  watch: {},
-  computed: {
-    textId() {
-      //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
-      return this.$store.getters.getTextId;
+    components: {
+        TextToImage: TextToImage,
     },
-  },
-  components: {
-    TextToImage: TextToImage,
-  },
-  mounted() {
-    this.fetchText();
-  },
+    mounted() {
+        this.fetchText();
+    },
 };
 </script>
 <style scoped>
 .listenGroup .textbox {
-  width: 900px;
+    width: 900px;
 }
 
 .completeBtn {
-  margin-right: 100px;
-  background-color: #ffba08;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 28px;
-  font-family: "ONEMobilePOPOTF";
+    margin-right: 100px;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
 }
 </style>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

fd960b0

c4227a5

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

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

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


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

 .speakText span {
   font-size: 28px;
 }
-</style>
+</style>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter2_8')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step2</p>
-          <div class="flex align-center mb30">
+        <div class="flex align-center mb30">
           <p class="subtitle2 mr20">단어 짝 맞추기 게임</p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
           </button> -->
         </div>
 
         <div class="text-ct">
-          <div class="pickGroup flex align-center justify-center mt50" style="gap: 100px;">
+          <div
+            class="pickGroup flex align-center justify-center mt50"
+            style="gap: 100px"
+          >
             <div>
               <div class="mb20">
-                <button><img src="../../../../resources/img/img100_45s.png" alt="">
+                <button>
+                  <img src="../../../../resources/img/img100_45s.png" alt="" />
                   <p>1</p>
                 </button>
-                <button><img src="../../../../resources/img/img101_45s.png" alt="">
+                <button>
+                  <img src="../../../../resources/img/img101_45s.png" alt="" />
                   <p>1</p>
                 </button>
-                <button><img src="../../../../resources/img/img102_45s.png" alt="">
+                <button>
+                  <img src="../../../../resources/img/img102_45s.png" alt="" />
                   <p>1</p>
                 </button>
-                <button><img src="../../../../resources/img/img103_45s.png" alt="">
+                <button>
+                  <img src="../../../../resources/img/img103_45s.png" alt="" />
                   <p>1</p>
                 </button>
               </div>
               <div>
-                <button><img src="../../../../resources/img/img100_45s.png" alt="">
+                <button>
+                  <img src="../../../../resources/img/img100_45s.png" alt="" />
                   <p>1</p>
                 </button>
-                <button><img src="../../../../resources/img/img101_45s.png" alt="">
+                <button>
+                  <img src="../../../../resources/img/img101_45s.png" alt="" />
                   <p>1</p>
                 </button>
-                <button><img src="../../../../resources/img/img102_45s.png" alt="">
+                <button>
+                  <img src="../../../../resources/img/img102_45s.png" alt="" />
                   <p>1</p>
                 </button>
-                <button><img src="../../../../resources/img/img103_45s.png" alt="">
+                <button>
+                  <img src="../../../../resources/img/img103_45s.png" alt="" />
                   <p>1</p>
                 </button>
               </div>
             </div>
-            <div class="dropGroup" style="gap: 20px;">
-              <img src="../../../../resources/img/img160_43s.png" alt="">
+            <div class="dropGroup" style="gap: 20px">
+              <img src="../../../../resources/img/img160_43s.png" alt="" />
               <div class="dropimg">
-                <img style="top: 21px;" src="../../../../resources/img/img161_44s.png" alt="">
-                <img style="top: 119px;" src="../../../../resources/img/img162_43s.png" alt="">
-                <img style="top: 215px;" src="../../../../resources/img/img163_43s.png" alt="">
-                <img style="bottom: 36px;" src="../../../../resources/img/img164_43s.png" alt="">
+                <img
+                  style="top: 21px"
+                  src="../../../../resources/img/img161_44s.png"
+                  alt=""
+                />
+                <img
+                  style="top: 119px"
+                  src="../../../../resources/img/img162_43s.png"
+                  alt=""
+                />
+                <img
+                  style="top: 215px"
+                  src="../../../../resources/img/img163_43s.png"
+                  alt=""
+                />
+                <img
+                  style="bottom: 36px"
+                  src="../../../../resources/img/img164_43s.png"
+                  alt=""
+                />
               </div>
             </div>
-            
           </div>
 
           <div class="time-bg">

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

   data() {
     return {
       timer: "00",
-    }
+    };
   },
   methods: {
     goToPage(page) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
-.dropGroup{position: relative;}
-.dropimg img{position: absolute; left: 27px;}
+.dropGroup {
+  position: relative;
+}
+.dropimg img {
+  position: absolute;
+  left: 27px;
+}
 .pickGroup button {
   position: relative;
   margin: 10px 40px;

   left: 50%;
   transform: translate(-50%, -50%);
 }
-</style>
+</style>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

           class="flex align-center mb30"
           style="justify-content: space-between; margin-right: 9em"
         >
-          <p class="subtitle2 mr20">3초마다 뒤집어지는 카드의 단어를 외어보세요!</p>
+          <p class="subtitle2 mr20">
+            3초마다 뒤집어지는 카드의 단어를 외어보세요!
+          </p>
           <div class="time-bg">
             <div>
               <div class="time">

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

         this.showButton(dropNumber); // 버튼을 보여주고
         this.hideDragButton(dropNumber); // 드래그한 퍼즐은 숨김
         this.correctNum++;
-
       } else {
         // 오답일 경우 알림 표시
         alert("오답입니다! 다시 시도해보세요.");
       }
-      
 
       if (this.correctNum === 3) {
         setTimeout(() => {

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>
-    <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+    <div
+      class="title-box mb25 flex align-center mt40"
+      style="justify-content: space-between"
+    >
       <div>
         <span class="title mr40">1. Hello WORLD</span>
         <span class="subtitle">my name is dd</span>

       <button class="completeBtn" @click="complete">학습 종료</button>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
+      <div
+        class="pre-btn"
+        :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
+        @click="previousProblem()"
+      >
         <img src="../../../../resources/img/left.png" alt="" />
       </div>
       <div class="content title-box">

           <div class="dropGroup flex align-center justify-center mt30">
             <div style="position: relative">
               <img src="../../../../resources/img/img28_s.png" alt="" />
-              <button class="dropzone" :data-answer="answerArr[0]" style="left: 30px; top: 167px">
+              <button
+                class="dropzone"
+                :data-answer="answerArr[0]"
+                style="left: 30px; top: 167px"
+              >
                 <img src="../../../../resources/img/img29_s_01.png" alt="" />
                 <p style="font-size: 35px">?</p>
               </button>
-              <button class="dropzone" :data-answer="answerArr[1]" style="right: 409px; top: 133px">
+              <button
+                class="dropzone"
+                :data-answer="answerArr[1]"
+                style="right: 409px; top: 133px"
+              >
                 <img src="../../../../resources/img/img30_s_01.png" alt="" />
                 <p style="font-size: 35px">?</p>
               </button>
-              <button class="dropzone" :data-answer="answerArr[2]" style="right: 46px; top: 128px">
+              <button
+                class="dropzone"
+                :data-answer="answerArr[2]"
+                style="right: 46px; top: 128px"
+              >
                 <img src="../../../../resources/img/img31_s_01.png" alt="" />
                 <p style="font-size: 35px">?</p>
               </button>

           </div>
           <div class="dragGroup flex justify-center" style="gap: 20px">
             <article style="right: 0; top: 36%">
-              <button class="draggable" :data-text="answerArr[0]" draggable="true">
+              <button
+                class="draggable"
+                :data-text="answerArr[0]"
+                draggable="true"
+              >
                 <img src="../../../../resources/img/img29_s.png" alt="" />
                 <p style="font-size: 35px">{{ answerArr[0] }}</p>
               </button>
             </article>
             <article style="left: 0; top: 36%">
-              <button class="draggable" :data-text="answerArr[1]" draggable="true">
+              <button
+                class="draggable"
+                :data-text="answerArr[1]"
+                draggable="true"
+              >
                 <img src="../../../../resources/img/img30_s.png" alt="" />
                 <p style="font-size: 35px">{{ answerArr[1] }}</p>
               </button>
             </article>
             <article style="left: 50%; top: 10%">
-              <button class="draggable" :data-text="answerArr[2]" draggable="true">
+              <button
+                class="draggable"
+                :data-text="answerArr[2]"
+                draggable="true"
+              >
                 <img src="../../../../resources/img/img31_s.png" alt="" />
                 <p style="font-size: 35px">{{ answerArr[2] }}</p>
               </button>

       window.location.reload();
     },
     handleDragStart(event) {
-      this.draggedElement = event.target.closest(".draggable");// 드래그한 요소 저장
+      this.draggedElement = event.target.closest(".draggable"); // 드래그한 요소 저장
       event.dataTransfer.setData("text/plain", event.target.dataset.text);
       event.target.style.cursor = "grabbing"; // 드래그 중 커서 변경
     },

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

       <div class="content title-box">
         <div style="display: flex; justify-content: space-between">
           <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
-          <button id="returnButton" @click="returnPage" style="margin: 4rem">
-            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
+          <button
+            id="returnButton"
+            @click="returnPage"
+            style="margin: 4rem 4rem 0 2rem"
+          >
+            <img
+              src="../../../../resources/img/new_img/content_ink/return_v2.png"
+              alt=""
+            />
             <p>되돌리기</p>
           </button>
         </div>

           <div class="dropGroup flex align-center justify-center">
             <div style="position: relative">
               <img
-                src="../../../../resources/img/img72_41s.png"
+                src="../../../../resources/img/new_img/content_ink/background.png"
                 alt=""
-                style="width: 93%"
+                style="width: 138rem; height: 49rem"
               />
               <div class="vocaGroup">
                 <div

                 <button
                   id="eraser1"
                   class="dropzone"
-                  style="left: 141px; top: 44px"
+                  style="left: 97px; top: 125px; position: fixed"
                 >
-                  <img src="../../../../resources/img/img78_41s.png" alt="" />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/ink_1.png"
+                    alt=""
+                    style="position: relative; z-index: 1"
+                  />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                    alt=""
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      height: 56px;
+                      right: 69px;
+                    "
+                  />
                 </button>
                 <button
                   id="eraser2"
                   class="dropzone"
-                  style="left: 200px; bottom: 46px"
+                  style="left: 87px; bottom: 38px; position: fixed"
                 >
-                  <img src="../../../../resources/img/img79_41s.png" alt="" />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/ink_2.png"
+                    alt=""
+                    style="position: relative; z-index: 1"
+                  />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                    alt=""
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      height: 56px;
+                      right: 139px;
+                    "
+                  />
                 </button>
                 <button
                   id="eraser3"
                   class="dropzone"
-                  style="right: 237px; top: 114px"
+                  style="right: 207px; top: 133px; position: fixed"
                 >
-                  <img src="../../../../resources/img/img80_41s.png" alt="" />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/ink_3.png"
+                    alt=""
+                    style="position: relative; z-index: 1"
+                  />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                    alt=""
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      height: 56px;
+                      right: 109px;
+                    "
+                  />
                 </button>
                 <button
                   id="eraser4"
                   class="dropzone"
-                  style="right: 159px; bottom: 5px"
+                  style="right: 206px; bottom: 51px; position: fixed"
                 >
-                  <img src="../../../../resources/img/img81_41s.png" alt="" />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/ink_4.png"
+                    alt=""
+                    style="position: relative; z-index: 1"
+                  />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                    alt=""
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      height: 56px;
+                      right: 115px;
+                    "
+                  />
                 </button>
               </div>
             </div>

       const dropZone = event.target.closest("button.dropzone");
 
       if (dropZone) {
-        // 드롭이 이루어진 영역이 버튼일 때만 처리
-        dropZone.querySelector("img").style.display = "none"; // 잉크를 숨깁니다
+        // 잉크 이미지를 숨깁니다
+        const inkImage = dropZone.querySelector("img:first-child");
+        if (inkImage) {
+          inkImage.style.display = "none";
+        }
+
+        // 클릭포인트 이미지를 숨깁니다
+        const clickPointImage = dropZone.querySelector("img:nth-child(2)");
+        if (clickPointImage) {
+          clickPointImage.style.display = "none";
+        }
       }
 
       // 드래그한 요소를 원래 위치로 복원

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>
-    <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
+    <div
+      class="title-box mb25 flex align-center mt40"
+      style="justify-content: space-between"
+    >
       <div>
         <span class="title mr40">1. Hello WORLD</span>
         <span class="subtitle">my name is dd</span>

     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="previousProblem()">
-        <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
       </div>
       <div class="content title-box">
         ,,,
         <p class="title mt25 title-bg">step3.</p>
-        <div class="flex align-center mb30" style="justify-content: space-between">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+        <div
+          class="flex align-center mb30"
+          style="justify-content: space-between"
+        >
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
         </div>
 
-        <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px">
+        <div
+          class="flex align-center justify-center"
+          style="margin-top: 9rem; gap: 113px"
+        >
           <div class="time-hint">
             <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">

             </div>
           </div>
           <div class="pickGroup">
-            <article class="flex justify-center mb50" style="gap: 60px" v-for="(item, index) in problemDetail"
-              :key="index">
+            <article
+              class="flex justify-center mb50"
+              style="gap: 60px"
+              v-for="(item, index) in problemDetail"
+              :key="index"
+            >
               <div class="flex" @click="handleClick(item.prblmDtlExpln)">
                 <button>
                   <img src="../../../../resources/img/img136_71s.png" alt="" />
-                  <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
+                  <p :class="{ active: selectedButton === item.prblmDtlExpln }">
+                    {{ index + 1 }}
+                  </p>
                 </button>
                 <p>{{ item.prblmDtlExpln }}</p>
               </div>
             </article>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
       <div class="next-btn" @click="nextProblem()">
         <img src="../../../../resources/img/right.png" alt="" />

 </template>
 
 <script>
-
 import axios from "axios";
 export default {
   data() {

   methods: {
     complete() {
       const { unit_id, book_id } = this.$route.query;
-      this.$router.push({ name: 'Dashboard', query: { value: 8, unit_id, book_id } });
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: 8, unit_id, book_id },
+      });
     },
     goToPage(page) {
       this.$router.push({ name: page });

       }, 1000);
     },
     handleClick(answer) {
-      console.log(answer)
+      console.log(answer);
       this.selectedButton = answer;
     },
     // 제출하기 버튼

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
 
       axios({
         url: "problemLog/insertProblemLog.json",

           "Content-Type": "application/json; charset=UTF-8",
         },
         data: this.$store.getters.getAllAnswers,
-      }).then(function (res) {
-        console.log("problem - response : ", res.data);
       })
+        .then(function (res) {
+          console.log("problem - response : ", res.data);
+        })
         .catch(function (error) {
           console.log("problem - error : ", error);
         });
-
     },
     getProblem() {
       const vm = this;

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     getStdId() {
       return this.$store.getters.getStdId;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
 
     // Fetch or process the current problem based on `currentLearningId`
   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

   width: -webkit-fill-available;
 }
 
-.pickGroup article>div>p {
+.pickGroup article > div > p {
   font-size: 64px;
 }
 

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" /></div>
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
+      </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
-          <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
+          <button>
+            <img src="../../../../resources/img/btn10_s.png" alt="" />
+          </button>
         </div>
 
         <div class="flex align-center justify-center" style="gap: 113px">

           <div class="pickGroup">
             <div class="flex" style="gap: 250px">
               <article class="text-ct" @click="handleClick('A')">
-                <div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt="" /></div>
+                <div class="mb30">
+                  <img src="../../../../resources/img/img107_50s.png" alt="" />
+                </div>
                 <button class="popTxt">
-                  <img :src="selectedButton === 'A' ? selectedbuttonImg : buttonImg" alt="" />
+                  <img
+                    :src="
+                      selectedButton === 'A' ? selectedbuttonImg : buttonImg
+                    "
+                    alt=""
+                  />
                 </button>
               </article>
               <article class="text-ct" @click="handleClick('B')">
-                <div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt="" /></div>
+                <div class="mb30">
+                  <img src="../../../../resources/img/img108_50s.png" alt="" />
+                </div>
                 <button class="popTxt">
-                  <img :src="selectedButton === 'B' ? selectedbuttonImg : buttonImg" alt="" />
+                  <img
+                    :src="
+                      selectedButton === 'B' ? selectedbuttonImg : buttonImg
+                    "
+                    alt=""
+                  />
                 </button>
               </article>
             </div>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
 import axios from "axios";
 export default {
   data() {

     },
     // 제출하기 버튼
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then((res) => {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

         console.log("Submission canceled by the user.");
       }
     },
-
 
     getProblem() {
       const vm = this;

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" /></div>
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
+      </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
           <button @click="playAudio">
             <img src="../../../../resources/img/btn10_s.png" alt="" />
-            <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>
+            <audio
+              id="audio-player"
+              src="client/resources/audio/bank.wav"
+              preload="auto"
+            ></audio>
           </button>
         </div>
 

           </div>
           <div class="imgGroup mt20">
             <img src="../../../../resources/img/img116_59s.png" alt="" />
-            <p class="title1 mt10" style="width: auto"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>
+            <p class="title1 mt10" style="width: auto">
+              <strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.
+            </p>
             <div class="mt20">
-              <input class="yellow-bd" v-model="answer" type="text" placeholder="답을 입력하세요." />
+              <input
+                class="yellow-bd"
+                v-model="answer"
+                type="text"
+                placeholder="답을 입력하세요."
+              />
             </div>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
-
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
   </div>

       console.log("playing");
     },
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" />
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

             </div>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
   </div>

       }, 1000);
     },
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" />
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

           <div class="dragGroup mt40">
             <div class="flex justify-center" style="gap: 20px">
               <div class="dropContainer" id="sourceContainer">
-                <button v-for="(word, index) in question" :key="index" draggable="true"
-                  @dragstart="onDragStart($event, word, index)">
+                <button
+                  v-for="(word, index) in question"
+                  :key="index"
+                  draggable="true"
+                  @dragstart="onDragStart($event, word, index)"
+                >
                   <p>{{ word }}</p>
                 </button>
               </div>
             </div>
           </div>
-          <div class="dropContainer flex align-center justify-center mt30" id="targetContainer">
-            <div class="dropSlot" v-for="(slot, index) in questionLength" :key="index" @dragover.prevent
-              @drop="onDrop($event, index)">
-              <div class="dropSlot-inner" draggable="true" @dragstart="onDragStart($event, userAnswer[index], index)">
+          <div
+            class="dropContainer flex align-center justify-center mt30"
+            id="targetContainer"
+          >
+            <div
+              class="dropSlot"
+              v-for="(slot, index) in questionLength"
+              :key="index"
+              @dragover.prevent
+              @drop="onDrop($event, index)"
+            >
+              <div
+                class="dropSlot-inner"
+                draggable="true"
+                @dragstart="onDragStart($event, userAnswer[index], index)"
+              >
                 <div class="dropSlot-inner">
                   <div v-if="userAnswer[index]" class="dropped-char">
                     {{ userAnswer[index] }}

             </div>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
   </div>

       }
     },
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
     this.initializeAnswer();
   },
 };

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" />
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

           <div class="flex justify-center">
             <div class="flex justify-between align-center" style="width: 50%">
               <!-- SVG Container for Drawing Lines -->
-              <svg class="line-container" xmlns="http://www.w3.org/2000/svg"
-                :style="{ width: svgWidth, height: svgHeight }">
-                <line v-for="(pair, index) in pairs" :key="'line-' + index" :x1="pair.leftPos.x" :y1="pair.leftPos.y"
-                  :x2="pair.rightPos.x" :y2="pair.rightPos.y" stroke="blue" stroke-width="2" />
+              <svg
+                class="line-container"
+                xmlns="http://www.w3.org/2000/svg"
+                :style="{ width: svgWidth, height: svgHeight }"
+              >
+                <line
+                  v-for="(pair, index) in pairs"
+                  :key="'line-' + index"
+                  :x1="pair.leftPos.x"
+                  :y1="pair.leftPos.y"
+                  :x2="pair.rightPos.x"
+                  :y2="pair.rightPos.y"
+                  stroke="blue"
+                  stroke-width="2"
+                />
               </svg>
 
               <div class="pickGroup left">
                 <div>
-                  <article class="flex align-center justify-between mb20" style="gap: 60px"
-                    v-for="(image, index) in images" :key="'left-' + index">
+                  <article
+                    class="flex align-center justify-between mb20"
+                    style="gap: 60px"
+                    v-for="(image, index) in images"
+                    :key="'left-' + index"
+                  >
                     <img :src="image.src" :alt="image.alt" />
                     <div>
-                      <button class="blue-c" @click="selectLeft(index, $event)"></button>
+                      <button
+                        class="blue-c"
+                        @click="selectLeft(index, $event)"
+                      ></button>
                     </div>
                   </article>
                 </div>
               </div>
 
               <div class="pickGroup right">
-                <article v-for="(word, index) in problemDetail" :key="index"
-                  class="flex align-center justify-start mb20" style="gap: 30px">
-                  <button class="blue-c" @click="selectRight(index, $event)"></button>
+                <article
+                  v-for="(word, index) in problemDetail"
+                  :key="index"
+                  class="flex align-center justify-start mb20"
+                  style="gap: 30px"
+                >
+                  <button
+                    class="blue-c"
+                    @click="selectRight(index, $event)"
+                  ></button>
                   <p class="word">{{ word.prblmDtlExpln }}</p>
                 </article>
               </div>
             </div>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
 import axios from "axios";
 export default {
   data() {

       };
     },
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
     this.updateSVGSize();
     window.addEventListener("resize", this.updateSVGSize);
   },

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" />
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

               </div>
             </div>
           </div>
-          <div class="imgGroup"><img src="../../../../resources/img/img124_63s.png" alt="" /></div>
+          <div class="imgGroup">
+            <img src="../../../../resources/img/img124_63s.png" alt="" />
+          </div>
 
           <div class="dropGroup flex align-center justify-center mt30">
             <div class="mt50">
-              <input class="yellow-bd" v-model="answer" type="text" placeholder="답을 입력하세요." style="width: 50rem" />
+              <input
+                class="yellow-bd"
+                v-model="answer"
+                type="text"
+                placeholder="답을 입력하세요."
+                style="width: 50rem"
+              />
             </div>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem(answer)"><img src="../../../../resources/img/right.png" alt=""
-          :class="{ active: currentIndex === learningIdsLength - 1 }" />
+      <div class="next-btn" @click="nextProblem(answer)">
+        <img
+          src="../../../../resources/img/right.png"
+          alt=""
+          :class="{ active: currentIndex === learningIdsLength - 1 }"
+        />
       </div>
     </div>
   </div>

       }, 1000);
     },
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: answer
-      }
+        prblmAns: answer,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: answer,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" />
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
-          <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
+          <button>
+            <img src="../../../../resources/img/btn10_s.png" alt="" />
+          </button>
         </div>
 
         <div class="text-ct">

               </div>
             </div>
           </div>
-          <div class="imgGroup"><img src="../../../../resources/img/img125_64s.png" alt="" /></div>
+          <div class="imgGroup">
+            <img src="../../../../resources/img/img125_64s.png" alt="" />
+          </div>
 
           <div class="dropGroup flex align-center justify-center mt70">
             <img src="../../../../resources/img/btn18_64s_normal.png" alt="" />
           </div>
         </div>
 
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /></div>
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
   </div>
 </template>

     },
 
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter4')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">중간 평가 설문 조사</p>
         <div class="flex align-center mb30">

                </button> -->
         </div>
 
-        <div class="text-ct ">
+        <div class="text-ct">
           <div class="table-wrap myplan">
             <table>
               <colgroup>
-                <col style="width: 5%;">
-                <col style="width: 70%;">
-                <col style="width: 25%;">
+                <col style="width: 5%" />
+                <col style="width: 70%" />
+                <col style="width: 25%" />
               </colgroup>
               <tr>
                 <td>

                   <p class="title1">2교시</p>
                 </td>
                 <td>
-                  <div class="flex justify-center" style="gap: 60px;">
+                  <div class="flex justify-center" style="gap: 60px">
                     <article>
                       <div class="flex align-center">
                         <p class="title1 mr20">네</p>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
-                          <img :src="item.imgSrc1">
-                          <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        <button
+                          class="popTxt"
+                          v-for="(item, index) in items"
+                          :key="index"
+                          @click="toggleImage(index)"
+                        >
+                          <img :src="item.imgSrc1" />
+                          <img
+                            :src="item.imgSrc2"
+                            :style="{
+                              display: item.isSecondImageVisible
+                                ? 'block'
+                                : 'none',
+                            }"
+                          />
                         </button>
                       </div>
                     </article>
                     <article>
                       <div class="flex align-center">
                         <p class="title1 mr20">아니요</p>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
-                          <img :src="item.imgSrc1">
-                          <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        <button
+                          class="popTxt"
+                          v-for="(item, index) in items"
+                          :key="index"
+                          @click="toggleImage(index)"
+                        >
+                          <img :src="item.imgSrc1" />
+                          <img
+                            :src="item.imgSrc2"
+                            :style="{
+                              display: item.isSecondImageVisible
+                                ? 'block'
+                                : 'none',
+                            }"
+                          />
                         </button>
                       </div>
                     </article>

                   <p class="title1">2교시</p>
                 </td>
                 <td>
-                  <div class="flex justify-center" style="gap: 60px;">
+                  <div class="flex justify-center" style="gap: 60px">
                     <article>
                       <div class="flex align-center">
                         <p class="title1 mr20">네</p>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
-                          <img :src="item.imgSrc1">
-                          <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        <button
+                          class="popTxt"
+                          v-for="(item, index) in items"
+                          :key="index"
+                          @click="toggleImage(index)"
+                        >
+                          <img :src="item.imgSrc1" />
+                          <img
+                            :src="item.imgSrc2"
+                            :style="{
+                              display: item.isSecondImageVisible
+                                ? 'block'
+                                : 'none',
+                            }"
+                          />
                         </button>
                       </div>
                     </article>
                     <article>
                       <div class="flex align-center">
                         <p class="title1 mr20">아니요</p>
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
-                          <img :src="item.imgSrc1">
-                          <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        <button
+                          class="popTxt"
+                          v-for="(item, index) in items"
+                          :key="index"
+                          @click="toggleImage(index)"
+                        >
+                          <img :src="item.imgSrc1" />
+                          <img
+                            :src="item.imgSrc2"
+                            :style="{
+                              display: item.isSecondImageVisible
+                                ? 'block'
+                                : 'none',
+                            }"
+                          />
                         </button>
                       </div>
                     </article>

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

   data() {
     return {
       items: [
-        { imgSrc1: 'client/resources/img/btn13_42s.png', imgSrc2: 'client/resources/img/btn14_50s_click.png', isSecondImageVisible: false },
-
+        {
+          imgSrc1: "client/resources/img/btn13_42s.png",
+          imgSrc2: "client/resources/img/btn14_50s_click.png",
+          isSecondImageVisible: false,
+        },
       ],
-      timer: '00',
+      timer: "00",
       showButton1: false,
       showButton2: false,
       showButton3: false,
       showButton4: false,
-    }
+    };
   },
   methods: {
     toggleImage(index) {
-      this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
+      this.items[index].isSecondImageVisible =
+        !this.items[index].isSecondImageVisible;
     },
     goToPage(page) {
       this.$router.push({ name: page });

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
 .textbox {

   width: 150rem;
   margin: 0 auto;
 }
-</style>
+</style>

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="previousProblem()">
-        <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
           </button> -->
         </div>

           <div class="flex align-center justify-center">
             <div class="inputbox mt30">go</div>
           </div>
-          <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
+          <div
+            class="pickGroup mt40 flex align-center justify-center"
+            style="gap: 100px"
+          >
             <p>i</p>
-            <article style="gap: 60px; bottom: 159px; left: 242px" @click="handleClick(1)">
+            <article
+              style="gap: 60px; bottom: 159px; left: 242px"
+              @click="handleClick(1)"
+            >
               <button>
                 <img src="../../../../resources/img/img136_71s.png" alt="" />
                 <p :class="{ active: selectedButton === 1 }">1</p>
               </button>
             </article>
             <p>to</p>
-            <article style="gap: 60px; bottom: 159px; right: 559px" @click="handleClick(2)">
+            <article
+              style="gap: 60px; bottom: 159px; right: 559px"
+              @click="handleClick(2)"
+            >
               <button>
                 <img src="../../../../resources/img/img136_71s.png" alt="" />
                 <p :class="{ active: selectedButton === 2 }">2</p>

             <p>bed</p>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /></div>
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
   </div>
 </template>

     },
     // 제출하기 버튼
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" /></div>
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
+      </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

               </div>
             </div>
           </div>
-          <div class="pickGroup mt60 flex align-center justify-center"
-            style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
-            <article v-for="(item, index) in problemDetail" :key="index"
-              style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
-              <div class="flex align-center" @click="handleClick(item.prblmDtlExpln)">
+          <div
+            class="pickGroup mt60 flex align-center justify-center"
+            style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%"
+          >
+            <article
+              v-for="(item, index) in problemDetail"
+              :key="index"
+              style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px"
+            >
+              <div
+                class="flex align-center"
+                @click="handleClick(item.prblmDtlExpln)"
+              >
                 <button>
                   <img src="../../../../resources/img/img136_71s.png" alt="" />
-                  <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
+                  <p :class="{ active: selectedButton === item.prblmDtlExpln }">
+                    {{ index + 1 }}
+                  </p>
                 </button>
                 <p>{{ item.prblmDtlExpln }}</p>
               </div>
             </article>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt=""
-          :class="{ active: currentIndex === learningIdsLength - 1 }" />
+      <div class="next-btn" @click="nextProblem()">
+        <img
+          src="../../../../resources/img/right.png"
+          alt=""
+          :class="{ active: currentIndex === learningIdsLength - 1 }"
+        />
       </div>
     </div>
   </div>

     },
     // 제출하기 버튼
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then((res) => {
             console.log("problem - response : ", res.data);
-            this.goToPage("Chapter4");  // 'this' correctly refers to the Vue instance
+            this.goToPage("Chapter4"); // 'this' correctly refers to the Vue instance
           })
           .catch((error) => {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
-
 
     // Fetch or process the current problem based on `currentLearningId`
   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" /></div>
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
+      </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
-          <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
+          <button>
+            <img src="../../../../resources/img/btn10_s.png" alt="" />
+          </button>
         </div>
 
         <div class="text-ct">

             <img src="../../../../resources/img/img109_51s.png" alt="" />
           </div>
 
-          <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%">
+          <div
+            class="pickGroup mt60 flex align-center justify-center"
+            style="gap: 100px; margin-top: 7%"
+          >
             <article style="gap: 60px; bottom: 159px; left: 242px">
               <div class="flex align-center" @click="handleClick(1)">
                 <button>

             </article>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
 import axios from "axios";
 export default {
   data() {

     },
     // 제출하기 버튼
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="previousProblem()">
-        <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
           <button>
-            <img src="../../../../resources/img/btn10_s.png" alt="Listen" @click="playAudio" />
-            <audio id="audio-player" src="client/resources/audio/tt.wav" preload="auto"></audio>
+            <img
+              src="../../../../resources/img/btn10_s.png"
+              alt="Listen"
+              @click="playAudio"
+            />
+            <audio
+              id="audio-player"
+              src="client/resources/audio/tt.wav"
+              preload="auto"
+            ></audio>
           </button>
         </div>
 

               </div>
             </div>
           </div>
-          <div class="pickGroup flex align-center justify-center"
-            style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
-            <article v-for="(item, index) in problemDetail" :key="index"
-              style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
+          <div
+            class="pickGroup flex align-center justify-center"
+            style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%"
+          >
+            <article
+              v-for="(item, index) in problemDetail"
+              :key="index"
+              style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px"
+            >
               <div class="flex align-center">
                 <button @click="handleClick(item.prblmDtlExpln)">
                   <img src="../../../../resources/img/img136_71s.png" alt="" />
-                  <p :class="{
-                    active: selectedButton === item.prblmDtlExpln,
-                  }">
+                  <p
+                    :class="{
+                      active: selectedButton === item.prblmDtlExpln,
+                    }"
+                  >
                     {{ index + 1 }}
                   </p>
                 </button>

             </article>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
       <div class="next-btn" @click="nextProblem()">
         <img src="../../../../resources/img/right.png" alt="" />

       this.selectedButton = number;
     },
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" /></div>
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
+      </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
           </button> -->
         </div>

               go
             </div>
           </div> -->
-          <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
+          <div
+            class="pickGroup mt40 flex align-center justify-center"
+            style="gap: 100px"
+          >
             <p>i</p>
             <p>&#40;</p>
             <article style="gap: 60px; bottom: 159px; left: 242px">

             <p>bed</p>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
   </div>

     },
     // 제출하기 버튼
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


   <div id="Chapter2_2" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" /></div>
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
+      </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
-          <button @click="playAudio"><img src="../../../../resources/img/btn10_s.png" alt="" /> <audio id="audio-player"
-              src="client/resources/audio/bank.wav" preload="auto"></audio></button>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
+          <button @click="playAudio">
+            <img src="../../../../resources/img/btn10_s.png" alt="" />
+            <audio
+              id="audio-player"
+              src="client/resources/audio/bank.wav"
+              preload="auto"
+            ></audio>
+          </button>
         </div>
         <div class="time-hint">
           <button class="hint-btn">HINT</button>

           <img src="../../../../resources/img/img114_57s.png" alt="" />
         </div> -->
 
-        <div class="pickGroup flex align-center justify-center"
-          style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
-          <div class="pickGroup flex align-center justify-center"
-            style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
-            <article v-for="(item, index) in problemDetail" :key="index"
-              style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
+        <div
+          class="pickGroup flex align-center justify-center"
+          style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%"
+        >
+          <div
+            class="pickGroup flex align-center justify-center"
+            style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%"
+          >
+            <article
+              v-for="(item, index) in problemDetail"
+              :key="index"
+              style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px"
+            >
               <div class="flex align-center">
                 <button @click="handleClick(item.prblmDtlExpln)">
                   <img src="../../../../resources/img/img136_71s.png" alt="" />
-                  <p :class="{
-                    active: selectedButton === item.prblmDtlExpln,
-                  }">
+                  <p
+                    :class="{
+                      active: selectedButton === item.prblmDtlExpln,
+                    }"
+                  >
                     {{ index + 1 }}
                   </p>
                 </button>

             </article>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
-
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
 import axios from "axios";
 export default {
   data() {
     return {
       items: [
-        { imgSrc2: "client/resources/img/img53_6_35s.png", imgSrc1: "client/resources/img/img53_1_35s.png" },
-        { imgSrc2: "client/resources/img/img53_7_35s.png", imgSrc1: "client/resources/img/img53_2_35s.png" },
-        { imgSrc2: "client/resources/img/img53_8_35s.png", imgSrc1: "client/resources/img/img53_3_35s.png" },
-        { imgSrc2: "client/resources/img/img53_9_35s.png", imgSrc1: "client/resources/img/img53_4_35s.png" },
-        { imgSrc2: "client/resources/img/img53_10_35s.png", imgSrc1: "client/resources/img/img53_5_35s.png" },
+        {
+          imgSrc2: "client/resources/img/img53_6_35s.png",
+          imgSrc1: "client/resources/img/img53_1_35s.png",
+        },
+        {
+          imgSrc2: "client/resources/img/img53_7_35s.png",
+          imgSrc1: "client/resources/img/img53_2_35s.png",
+        },
+        {
+          imgSrc2: "client/resources/img/img53_8_35s.png",
+          imgSrc1: "client/resources/img/img53_3_35s.png",
+        },
+        {
+          imgSrc2: "client/resources/img/img53_9_35s.png",
+          imgSrc1: "client/resources/img/img53_4_35s.png",
+        },
+        {
+          imgSrc2: "client/resources/img/img53_10_35s.png",
+          imgSrc1: "client/resources/img/img53_5_35s.png",
+        },
       ],
       selectedIndex: null,
       timer: "00",

       this.selectedButton = number;
     },
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="previousProblem()">
-        <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
         </div>
 
         <div class="text-ct">

             </div>
           </div>
 
-          <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px">
+          <div
+            class="pickGroup flex align-center justify-between mt80"
+            style="gap: 100px"
+          >
             <!-- <p></p> -->
             <button>
               <img src="../../../../resources/img/btn10_s.png" alt="" />

               <article>
                 <div class="flex align-center">
                   <button @click="handleCheck('O')" name="O">
-                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                    <img
+                      src="../../../../resources/img/img136_71s.png"
+                      alt=""
+                    />
                     <p :class="{ active: selectedButton === 'O' }">1</p>
                   </button>
                   <img src="../../../../resources/img/img111_56s.png" alt="" />

               <article>
                 <div class="flex align-center">
                   <button @click="handleCheck('X')" name="X">
-                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                    <img
+                      src="../../../../resources/img/img136_71s.png"
+                      alt=""
+                    />
                     <p :class="{ active: selectedButton === 'X' }">2</p>
                   </button>
                   <img src="../../../../resources/img/img112_56s.png" alt="" />

             </div>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
-
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
       <div class="next-btn" @click="nextProblem()">
         <img src="../../../../resources/img/right.png" alt="" />

       console.log(this.selectedButton);
     },
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

           },
           data: this.$store.getters.getAllAnswers,
         })
-          .then((res)=> {
+          .then((res) => {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
+        </div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
-          :class="{ active: currentIndex === 0 }" /></div>
+      <div class="pre-btn" @click="previousProblem()">
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
+      </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

                 </button>
               </div>
             </div>
-            <input class="yellow-bd" v-model="answer" style="width: 45%" type="text" placeholder="답을 입력하세요." />
+            <input
+              class="yellow-bd"
+              v-model="answer"
+              style="width: 45%"
+              type="text"
+              placeholder="답을 입력하세요."
+            />
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
   </div>

       }, 1000);
     },
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="previousProblem()">
-        <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
+        <img
+          src="../../../../resources/img/left.png"
+          alt=""
+          :class="{ active: currentIndex === 0 }"
+        />
       </div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">
+            {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
+          </p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

                             alt=""
                         /> -->
             <div class="mt50">
-              <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요." v-model="answer"
-                @change="submitAnswer" />
+              <input
+                class="yellow-bd"
+                type="text"
+                name=""
+                id=""
+                placeholder="답을 입력하세요."
+                v-model="answer"
+                @change="submitAnswer"
+              />
             </div>
           </div>
         </div>
-        <button class="submit-button" @click="handleSubmit()"
-          v-if="currentIndex === learningIdsLength - 1">제출하기</button>
-          <button class="submit-button" @click="nextProblem()"
-          v-else>다음 문제로</button>
+        <button
+          class="submit-button"
+          @click="handleSubmit()"
+          v-if="currentIndex === learningIdsLength - 1"
+        >
+          제출하기
+        </button>
+        <button class="submit-button" @click="nextProblem()" v-else>
+          다음 문제로
+        </button>
       </div>
-      <div class="next-btn" @click="
-        nextProblem()
-        ">
+      <div class="next-btn" @click="nextProblem()">
         <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>

       }, 1000);
     },
     handleSubmit() {
-
       const userConfirmed = window.confirm("제출 하시겠습니까?");
       if (userConfirmed) {
-
         const problemData = {
           prblmInfo: this.currentLearningId,
           prblmNumber: this.currentProblemIndex,
-          prblmAns: this.selectedButton
+          prblmAns: this.selectedButton,
         };
 
         const answerData = {
           prblmId: this.currentLearningId.prblm_id,
           prblmAns: this.selectedButton,
           stdId: this.$store.getters.getStdId,
-          prblmLogAnsCnt: 1
+          prblmLogAnsCnt: 1,
         };
 
-        this.$store.dispatch('saveProblemData', problemData);
-        this.$store.dispatch('saveProblemAttempt', answerData);
+        this.$store.dispatch("saveProblemData", problemData);
+        this.$store.dispatch("saveProblemAttempt", answerData);
 
         console.log(this.$store.getters.getAllProblems);
         console.log(this.$store.getters.getAllAnswers);
-
 
         axios({
           url: "problemLog/insertProblemLog.json",

         })
           .then(function (res) {
             console.log("problem - response : ", res.data);
-            this.goToPage('Chapter4')
+            this.goToPage("Chapter4");
           })
           .catch(function (error) {
             console.log("problem - error : ", error);

       const problemData = {
         prblmInfo: this.currentLearningId,
         prblmNumber: this.currentProblemIndex,
-        prblmAns: this.selectedButton
-      }
+        prblmAns: this.selectedButton,
+      };
       const answerData = {
         prblmId: this.currentLearningId.prblm_id,
         prblmAns: this.selectedButton,
         stdId: this.$store.getters.getStdId,
-        prblmLogAnsCnt: 1
-      }
-      this.$store.dispatch('saveProblemData', problemData);
-      this.$store.dispatch('saveProblemAttempt', answerData);
-      console.log(this.$store.getters.getAllProblems)
-      console.log(this.$store.getters.getAllAnswers)
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+        prblmLogAnsCnt: 1,
+      };
+      this.$store.dispatch("saveProblemData", problemData);
+      this.$store.dispatch("saveProblemAttempt", answerData);
+      console.log(this.$store.getters.getAllProblems);
+      console.log(this.$store.getters.getAllAnswers);
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    console.log("Current Learning ID:", this.currentLearningId);
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
     this.currentIndex = this.currentProblemIndex;
     this.learningIdsLength = this.$store.state.currentLearningIds.length;
 

   },
   components: {},
   mounted() {
-    this.getProblem()
+    this.getProblem();
   },
 };
 </script>

fd960b0

c4227a5

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

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

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


 <template>
-    <div id="Chapter1_1" class="content-wrap">
-        <div style="margin: 30px 0px 50px; width: 20%">
-            <router-link to="/MyPlan.page">
-                <div class="logo mb25">
-                    <img src="../../../../resources/img/logo2.png" alt="" />
-                </div>
-            </router-link>
+  <div id="Chapter1_1" class="content-wrap">
+    <div style="margin: 30px 0px 50px; width: 20%">
+      <router-link to="/MyPlan.page">
+        <div class="logo mb25">
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
-        <div class="title-box mb25 flex align-center mt40">
-            <span class="title mr40">1. Hello WORLD</span>
-            <span class="subtitle">my name is dd</span>
-        </div>
-        <div class="flex justify-between align-center">
-            <div class="pre-btn" @click="goToPage('Chapter3_15')">
-                <img src="../../../../resources/img/left.png" alt="" />
-            </div>
-            <div class="content title-box">
-                <p class="title mt25 title-bg">Quiz Result</p>
-                <!-- <div class="flex align-center mb30">
+      </router-link>
+    </div>
+    <div class="title-box mb25 flex align-center mt40">
+      <span class="title mr40">1. Hello WORLD</span>
+      <span class="subtitle">my name is dd</span>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="goToPage('Chapter3_15')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">Quiz Result</p>
+        <!-- <div class="flex align-center mb30">
                     <p class="subtitle2 mr20"></p>
                     <button><img src="../../../../resources/img/btn10_s.png" alt="">
                  </button>
                 </div> -->
 
-                <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto">
-                    <div class="wrap-bg">
-                        <div class="title-box flex mb10 justify-between">
-                            <p class="title mb20">최종 점수</p>
-                            <button type="button" class="popup-close-btn" @click="closeBtn">
-                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-                            </button>
-                        </div>
-                        <div style="width: 100%" class="flex mt30">
-                            <p class="title5"><em class="yellow">93</em></p>
-                            <p class="title4 ml10 mr10">&#47;</p>
-                            <p class="title4">100</p>
-                        </div>
-                    </div>
-                    <div class="bg-gray" style="width: 980px">
-                        <div class="title-box flex mb10 justify-between">
-                            <p class="title mb20">오답 문제 리스트</p>
-                            <button type="button" class="popup-close-btn" @click="closeBtn">
-                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-                            </button>
-                        </div>
-                        <article class="mb20 flex-column result-box" style="gap: 20px">
-                            <div class="flex justify-between wrap" v-for="(item, index) in dataList" :key="index">
-                                <div class="flex align-center">
-                                    <div>
-                                        <p class="title1 mr20">
-                                            {{ index + 1 }}
-                                        </p>
-                                    </div>
-                                    <div class="text-lf">
-                                        <p class="title1">
-                                            {{ item.prblmInfo.prblm_expln }}
-                                        </p>
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex align-center" style="gap: 10px">
-                                        <button type="button" title="정답 확인" class="yellow-btn" @click="
-                                            [
-                                                handleProblemDetail(item.prblmInfo),
-                                                goToProblemPage(
-                                                    problemType
-                                                ),
-                                            ]
-                                            ">
-                                            정답 확인
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </article>
-                    </div>
+        <div
+          class="text-ct flex justify-center"
+          style="gap: 150px; margin: 0 auto"
+        >
+          <div class="wrap-bg">
+            <div class="title-box flex mb10 justify-between">
+              <p class="title mb20">최종 점수</p>
+              <button type="button" class="popup-close-btn" @click="closeBtn">
+                <svg-icon
+                  type="mdi"
+                  :path="mdiWindowClose"
+                  class="close-btn"
+                ></svg-icon>
+              </button>
+            </div>
+            <div style="width: 100%" class="flex mt30">
+              <p class="title5"><em class="yellow">93</em></p>
+              <p class="title4 ml10 mr10">&#47;</p>
+              <p class="title4">100</p>
+            </div>
+          </div>
+          <div class="bg-gray" style="width: 980px">
+            <div class="title-box flex mb10 justify-between">
+              <p class="title mb20">오답 문제 리스트</p>
+              <button type="button" class="popup-close-btn" @click="closeBtn">
+                <svg-icon
+                  type="mdi"
+                  :path="mdiWindowClose"
+                  class="close-btn"
+                ></svg-icon>
+              </button>
+            </div>
+            <article class="mb20 flex-column result-box" style="gap: 20px">
+              <div
+                class="flex justify-between wrap"
+                v-for="(item, index) in dataList"
+                :key="index"
+              >
+                <div class="flex align-center">
+                  <div>
+                    <p class="title1 mr20">
+                      {{ index + 1 }}
+                    </p>
+                  </div>
+                  <div class="text-lf">
+                    <p class="title1">
+                      {{ item.prblmInfo.prblm_expln }}
+                    </p>
+                  </div>
                 </div>
-            </div>
-            <div class="next-btn" @click="goToPage('Chapter3_16')">
-                <img src="../../../../resources/img/right.png" alt="" />
-            </div>
+                <div>
+                  <div class="flex align-center" style="gap: 10px">
+                    <button
+                      type="button"
+                      title="정답 확인"
+                      class="yellow-btn"
+                      @click="
+                        [
+                          handleProblemDetail(item.prblmInfo),
+                          goToProblemPage(problemType),
+                        ]
+                      "
+                    >
+                      정답 확인
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </div>
         </div>
+      </div>
+      <div class="next-btn" @click="goToPage('Chapter3_16')">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import axios from "axios";
 
 export default {
-    data() {
-        return {
-            timer: "00",
-            showButton1: false,
-            showButton2: false,
-            showButton3: false,
-            showButton4: false,
+  data() {
+    return {
+      timer: "00",
+      showButton1: false,
+      showButton2: false,
+      showButton3: false,
+      showButton4: false,
 
-            // 단원 평가 아이디, 추후 세션으로 받게 변경
-            evalId: "",
+      // 단원 평가 아이디, 추후 세션으로 받게 변경
+      evalId: "",
 
-            dataList: [],
+      dataList: [],
 
-            prblmId: "",
+      prblmId: "",
 
-            problemType: null,
-        };
+      problemType: null,
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    methods: {
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        goToProblemPage(page) {
-            this.$router.push({ name: page });
-        },
-        handleDrag(dragNumber) {
-            // Drag 버튼 숨기기
-            // 여기서는 상태 관리를 통해 버튼을 제어합니다.
-            if (dragNumber === 1) {
-                this.showButton1 = false;
-            } else if (dragNumber === 2) {
-                this.showButton2 = false;
-            } else if (dragNumber === 3) {
-                this.showButton3 = false;
-            }
-        },
-        showButton(dropNumber) {
-            // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
-            // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
-            if (dropNumber === 1) {
-                this.showButton1 = true;
-            } else if (dropNumber === 2) {
-                this.showButton2 = true;
-            } else if (dropNumber === 3) {
-                this.showButton3 = true;
-            } else if (dropNumber === 4) {
-                this.showButton4 = true;
-            }
-        },
-        startTimer() {
-            if (this.intervalId) {
-                clearInterval(this.intervalId);
-            }
-            this.timer = 5;
-            this.intervalId = setInterval(() => {
-                if (this.timer > 0) {
-                    this.timer--;
-                } else {
-                    clearInterval(this.intervalId);
-                }
-            }, 1000);
-        },
-        problemList() {
-        },
+    goToProblemPage(page) {
+      this.$router.push({ name: page });
+    },
+    handleDrag(dragNumber) {
+      // Drag 버튼 숨기기
+      // 여기서는 상태 관리를 통해 버튼을 제어합니다.
+      if (dragNumber === 1) {
+        this.showButton1 = false;
+      } else if (dragNumber === 2) {
+        this.showButton2 = false;
+      } else if (dragNumber === 3) {
+        this.showButton3 = false;
+      }
+    },
+    showButton(dropNumber) {
+      // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
+      // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
+      if (dropNumber === 1) {
+        this.showButton1 = true;
+      } else if (dropNumber === 2) {
+        this.showButton2 = true;
+      } else if (dropNumber === 3) {
+        this.showButton3 = true;
+      } else if (dropNumber === 4) {
+        this.showButton4 = true;
+      }
+    },
+    startTimer() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    },
+    problemList() {},
 
-        handleProblemDetail(item) {
-            if (item.prblm_type_id === "prblm_type_001") {
-                this.problemType = "Chapter3";
-            } else if (item.prblm_type_id === "prblm_type_002") {
-                this.problemType = "Chapter3_1";
-            } else if (item.prblm_type_id === "prblm_type_003") {
-                this.problemType = "Chapter3_2";
-            } else if (item.prblm_type_id === "prblm_type_004") {
-                this.problemType = "Chapter3_3";
-            } else if (item.prblm_type_id === "prblm_type_005") {
-                this.problemType = "Chapter3_3_1";
-            } else if (item.prblm_type_id === "prblm_type_006") {
-                this.problemType = "Chapter3_4";
-            } else if (item.prblm_type_id === "prblm_type_007") {
-                this.problemType = "Chapter3_5";
-            } else if (item.prblm_type_id === "prblm_type_008") {
-                this.problemType = "Chapter3_6";
-            } else if (item.prblm_type_id === "prblm_type_009") {
-                this.problemType = "Chapter3_7";
-            } else if (item.prblm_type_id === "prblm_type_010") {
-                this.problemType = "Chapter3_8";
-            } else if (item.prblm_type_id === "prblm_type_011") {
-                this.problemType = "Chapter3_9";
-            } else if (item.prblm_type_id === "prblm_type_012") {
-                this.problemType = "Chapter3_10";
-            } else if (item.prblm_type_id === "prblm_type_013") {
-                this.problemType = "Chapter3_11";
-            } else if (item.prblm_type_id === "prblm_type_014") {
-                this.problemType = "Chapter3_12";
-            } else if (item.prblm_type_id === "prblm_type_015") {
-                this.problemType = "Chapter3_13";
-            } else if (item.prblm_type_id === "prblm_type_016") {
-                this.problemType = "Chapter3_14";
-            } else if (item.prblm_type_id === "prblm_type_017") {
-                this.problemType = "Chapter3_15";
-            } else if (item.prblm_type_id === "prblm_type_018") {
-                this.problemType = "Chapter2_8";
-            } else if (item.prblm_type_id === "prblm_type_019") {
-                this.problemType = "Chapter2_7";
-            } else if (item.prblm_type_id === "prblm_type_020") {
-                this.problemType = "Chapter2_5";
-            } else if (item.prblm_type_id === "prblm_type_021") {
-                this.problemType = "Chapter2_6";
-            } else if (item.prblm_type_id === "prblm_type_022") {
-                this.problemType = "Chapter2_10";
-            } else if (item.prblm_type_id === "prblm_type_023") {
-                this.problemType = "Chapter2_11";
-            } else if (item.prblm_type_id === "prblm_type_024") {
-                this.problemType = "Chapter2_13";
-            }
-        },
+    handleProblemDetail(item) {
+      if (item.prblm_type_id === "prblm_type_001") {
+        this.problemType = "Chapter3";
+      } else if (item.prblm_type_id === "prblm_type_002") {
+        this.problemType = "Chapter3_1";
+      } else if (item.prblm_type_id === "prblm_type_003") {
+        this.problemType = "Chapter3_2";
+      } else if (item.prblm_type_id === "prblm_type_004") {
+        this.problemType = "Chapter3_3";
+      } else if (item.prblm_type_id === "prblm_type_005") {
+        this.problemType = "Chapter3_3_1";
+      } else if (item.prblm_type_id === "prblm_type_006") {
+        this.problemType = "Chapter3_4";
+      } else if (item.prblm_type_id === "prblm_type_007") {
+        this.problemType = "Chapter3_5";
+      } else if (item.prblm_type_id === "prblm_type_008") {
+        this.problemType = "Chapter3_6";
+      } else if (item.prblm_type_id === "prblm_type_009") {
+        this.problemType = "Chapter3_7";
+      } else if (item.prblm_type_id === "prblm_type_010") {
+        this.problemType = "Chapter3_8";
+      } else if (item.prblm_type_id === "prblm_type_011") {
+        this.problemType = "Chapter3_9";
+      } else if (item.prblm_type_id === "prblm_type_012") {
+        this.problemType = "Chapter3_10";
+      } else if (item.prblm_type_id === "prblm_type_013") {
+        this.problemType = "Chapter3_11";
+      } else if (item.prblm_type_id === "prblm_type_014") {
+        this.problemType = "Chapter3_12";
+      } else if (item.prblm_type_id === "prblm_type_015") {
+        this.problemType = "Chapter3_13";
+      } else if (item.prblm_type_id === "prblm_type_016") {
+        this.problemType = "Chapter3_14";
+      } else if (item.prblm_type_id === "prblm_type_017") {
+        this.problemType = "Chapter3_15";
+      } else if (item.prblm_type_id === "prblm_type_018") {
+        this.problemType = "Chapter2_8";
+      } else if (item.prblm_type_id === "prblm_type_019") {
+        this.problemType = "Chapter2_7";
+      } else if (item.prblm_type_id === "prblm_type_020") {
+        this.problemType = "Chapter2_5";
+      } else if (item.prblm_type_id === "prblm_type_021") {
+        this.problemType = "Chapter2_6";
+      } else if (item.prblm_type_id === "prblm_type_022") {
+        this.problemType = "Chapter2_10";
+      } else if (item.prblm_type_id === "prblm_type_023") {
+        this.problemType = "Chapter2_11";
+      } else if (item.prblm_type_id === "prblm_type_024") {
+        this.problemType = "Chapter2_13";
+      }
     },
-    watch: {},
-    computed: {
-        getAllProblems() {
-            return this.$store.getters.getAllProblems;
-        },
+  },
+  watch: {},
+  computed: {
+    getAllProblems() {
+      return this.$store.getters.getAllProblems;
     },
-    created() {
-        console.log('Problem List :', this.getAllProblems);
-        this.dataList = this.getAllProblems;
-        this.evalId = this.$route.query.eval_id;
-
-    },
-    components: {},
-    mounted() {
-        this.problemList();
-    },
+  },
+  created() {
+    console.log("Problem List :", this.getAllProblems);
+    this.dataList = this.getAllProblems;
+    this.evalId = this.$route.query.eval_id;
+  },
+  components: {},
+  mounted() {
+    this.problemList();
+  },
 };
 </script>
 <style scoped>
 .textbox {
-    height: 60px;
+  height: 60px;
 }
 
 .textbox p {
-    font-size: 28px;
-    font-weight: bold;
-    line-height: 65px;
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 65px;
 }
 
 .dropGroup button {
-    position: relative;
+  position: relative;
 }
 
 .dropGroup button p {
-    font-size: 48px;
+  font-size: 48px;
 }
 
 .dragGroup button p {
-    font-size: 48px;
+  font-size: 48px;
 }
 </style>

fd960b0

c4227a5

client/views/pages/main/Dashboard.vue

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

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


 <template>
-  <p
-    class="title1"
-    v-if="state === 'finish'"
-    style="position: absolute; top: 50%; transform: translate(0, -50%)"
-  >
+  <p class="title1" v-if="state === 'finish'" style="position: absolute; top: 50%; transform: translate(0, -50%)">
     오늘 공부를 다했어요! 너무 고생했어요!
   </p>
-  <div
-    class="title1"
-    v-else-if="state === 'notRegistered'"
-    style="position: absolute; top: 50%; transform: translate(0, -50%)"
-  >
-    <div>
-      <h3>
-        지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를
+  <div class="title1" v-else-if="state === 'notRegistered'"
+    style="position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;">
+    <div class="title-box" style="text-align: center;">
+      <img src="../../../resources/img/new_img/dashboard/rabbit.png">
+      <h3 class="title" style=" margin-top: 1em; letter-spacing: 2px; line-height: 42px; font-size: 30px">
+        지금은 학습 루트가 등록이 안됐어요! <br> 학습 일정에서 학습루트를
         등록해볼까요?
       </h3>
-      <button
-        type="button"
-        title="바로가기"
-        class="yellow-btn"
-        @click="goToPage2('MyPlan2')"
-      >
-        바로가기
-      </button>
+      <div @click="goToPage2('MyPlan2')" style="cursor: pointer; margin-top: 2em;">
+        <img src="../../../resources/img/new_img/dashboard/btn.png">
+      </div>
     </div>
   </div>
-  <p
-    class="title1"
-    v-else-if="state === 'noProblem'"
-    style="position: absolute; top: 50%; transform: translate(0, -50%)"
-  >
+  <p class="title1" v-else-if="state === 'noProblem'"
+    style="position: absolute; top: 50%; transform: translate(0, -50%)">
     교재에 등록된 문제가 없습니다.
   </p>
   <div v-else class="main">

       </div> -->
       <div class="race-box">
         <div class="rabbit-start">
-          <img
-            src="../../../resources/img/new_img/rabbit.png"
-            alt=""
-            :style="{ display: rabbitPos[0] ? 'block' : 'none' }"
-          />
+          <img src="../../../resources/img/new_img/rabbit.png" alt=""
+            :style="{ display: rabbitPos[0] ? 'block' : 'none' }" />
         </div>
         <!-- 1번째줄 -->
-        <div
-          class="rcon flex justify-end mb5"
-          style="position: relative; top: 24px"
-        >
+        <div class="rcon flex justify-end mb5" style="position: relative; top: 24px">
           <!-- 1 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[0])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[1] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[1] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="1"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_1.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[1]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_1.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[1]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[1] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[1]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[1]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[0].label }}
             </p>
           </div>
           <!-- 2 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[1])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[2] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[2] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="2"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_2.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[2]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                  style="position: absolute; left: 16px"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_2.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[2]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" style="position: absolute; left: 16px" />
               </div>
             </button>
             <p :class="!rabbitCompl[2] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[2]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[2]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[1].label }}
             </p>
           </div>

           <!-- 7 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[6])]">
             <div class="rabbit-running" style="top: -71px">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[7] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[7] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="7"
-              style="top: -53px; position: relative"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="7"
+              style="top: -53px; position: relative">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_7.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[7]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                  style="position: absolute; top: 85px"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_7.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[7]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" style="position: absolute; top: 85px" />
               </div>
             </button>
-            <p
-              :class="!rabbitCompl[7] ? 'before-clear' : 'clear'"
-              style="position: relative; top: -53px; left: -10px"
-            >
-              <img
-                v-if="rabbitCompl[7]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+            <p :class="!rabbitCompl[7] ? 'before-clear' : 'clear'" style="position: relative; top: -53px; left: -10px">
+              <img v-if="rabbitCompl[7]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[6].label }}
             </p>
           </div>
           <!-- 6 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[5])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[6] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[6] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="6"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="6">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_6.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[6]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_6.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[6]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[6] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[6]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[6]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[5].label }}
             </p>
           </div>
           <!-- 5 -->
-          <div
-            class="race-btn"
-            @click="[storeLearningId(labeledItems[4])]"
-            style="position: relative; left: -31px"
-          >
+          <div class="race-btn" @click="[storeLearningId(labeledItems[4])]" style="position: relative; left: -31px">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[5] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[5] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="5"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="5">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_5.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[5]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_5.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[5]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[5] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[5]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[5]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[4].label }}
             </p>
           </div>
           <!-- 4 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[3])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[4] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[4] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="4"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="4">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_4.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[4]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_4.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[4]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[4] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[4]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[4]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[3].label }}
             </p>
           </div>
           <!-- 3 -->
-          <div
-            class="race-btn"
-            @click="[storeLearningId(labeledItems[2])]"
-            style="right: 12px"
-          >
+          <div class="race-btn" @click="[storeLearningId(labeledItems[2])]" style="right: 12px">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[3] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[3] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="3"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="3">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_3.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[3]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_3.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[3]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[3] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[3]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[3]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[2].label }}
             </p>
           </div>

           <!-- 8 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[7])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[8] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[8] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="8"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="8">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_8.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[8]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_8.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[8]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[8] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[8]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[8]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[7].label }}
             </p>
           </div>
           <!-- 9 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[8])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[9] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[9] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="9"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="9">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_9.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[9]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_9.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[9]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[9] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[9]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[9]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[8].label }}
             </p>
           </div>
           <!-- 10 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[9])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[10] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[10] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="10"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+              data-num="10">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_10.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[10]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_10.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[10]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[10] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[10]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[10]" src="../../../resources/img/new_img/icon/complete_icon.png"
+                alt="Complete Icon" class="complete-icon" />
               {{ labeledItems[9].label }}
             </p>
           </div>
           <!-- 11 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[10])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[11] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[11] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImageAndShowPopup(index, '11')"
-              data-num="11"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index"
+              @click="toggleImageAndShowPopup(index, '11')" data-num="11">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_11.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[11]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_11.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[11]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[11] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[11]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[11]" src="../../../resources/img/new_img/icon/complete_icon.png"
+                alt="Complete Icon" class="complete-icon" />
               {{ labeledItems[10].label }}
             </p>
           </div>
         </div>
         <div class="race-btn">
           <div class="rabbit-running" style="display: flex">
-            <img
-              class="rabbit-end"
-              src="../../../resources/img/new_img/rabbit.png"
-              alt=""
-              :style="{ display: rabbitEnd ? 'block' : 'none' }"
-            />
-            <img
-              class="fireworks-end"
-              src="../../../resources/img/fireworks.gif"
-              alt=""
-              :style="{ display: rabbitEnd ? 'block' : 'none' }"
-            />
+            <img class="rabbit-end" src="../../../resources/img/new_img/rabbit.png" alt=""
+              :style="{ display: rabbitEnd ? 'block' : 'none' }" />
+            <img class="fireworks-end" src="../../../resources/img/fireworks.gif" alt=""
+              :style="{ display: rabbitEnd ? 'block' : 'none' }" />
           </div>
         </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 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>
           </div>
           <div class="flex justify-center">
-            <button
-              type="button"
-              title="사진촬영"
-              class="new-btn"
-              @click="openCameraModal"
-            >
+            <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal">
               사진 촬영
             </button>
           </div>

           <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>
+              <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"
-                  style="position: absolute; height: 100%"
-                ></video>
-                <img
-                  src="../../../resources/img/camera-rabbit.png"
-                  class="camera-rabbit"
-                  style="position: absolute"
-                />
+                <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
+                  @canplay="onVideoLoaded" style="position: absolute; height: 100%"></video>
+                <img src="../../../resources/img/camera-rabbit.png" class="camera-rabbit" style="position: absolute" />
                 <canvas ref="canvas" style="pointer-events: none"></canvas>
               </div>
             </div>

     </div>
 
     <div class="complete-wrap myphoto">
-      <button
-        class="login-btn mt10"
-        type="submit"
-        style="width: 100%"
-        @click="finishSchedule"
-      >
-        <img
-          src="../../../resources/img/btn07_s.png"
-          alt=""
-          style="height: 100px"
-        />
+      <button class="login-btn mt10" type="submit" style="width: 100%" @click="finishSchedule">
+        <img src="../../../resources/img/btn07_s.png" alt="" style="height: 100px" />
         <p>학습 종료하기</p>
       </button>
       <h2 class="mb40 mt10">이 단원을 끝낸 친구들</h2>

       <article class="flex-column">
         <div class="flex-row">
           <div class="flex" style="gap: 5px; flex-wrap: wrap">
-            <div
-              v-for="(image, index) in images"
-              :key="image.fileId"
-              @click="buttonSearch(image)"
-              class="photo"
-              style="margin-bottom: 5px"
-            >
-              <img
-                :src="image.url"
-                :alt="image.fileNm"
-                reloadable="true"
-                style="height: 100%"
-              />
+            <div v-for="(image, index) in images" :key="image.fileId" @click="buttonSearch(image)" class="photo"
+              style="margin-bottom: 5px">
+              <img :src="image.url" :alt="image.fileNm" reloadable="true" style="height: 100%" />
             </div>
           </div>
         </div>

         <div class="popup-box" style="top: 50%">
           <div class="flex mb10 justify-between">
             <button type="button" class="popup-close-btn" @click="closeModal">
-              <svg-icon
-                type="mdi"
-                :path="mdiWindowClose"
-                class="close-btn"
-              ></svg-icon>
+              <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
             </button>
           </div>
           <div class="box">
             <div style="width: 910px; height: 680px">
-              <img
-                :src="selectedImage.image"
-                alt="Image"
-                @error="onImageError"
-                reloadable="true"
-              />
+              <img :src="selectedImage.image" alt="Image" @error="onImageError" reloadable="true" />
             </div>
           </div>
           <div class="flex justify-between mt20">
             <div class="text flex">
               <p class="title2 date ml30">{{ selectedImage.date }}</p>
-              <span class="title1 ml30"
-                >{{ selectedImage.unit }}을 마친
-                <em class="yellow">{{ selectedImage.name }}</em
-                >친구</span
-              >
+              <span class="title1 ml30">{{ selectedImage.unit }}을 마친
+                <em class="yellow">{{ selectedImage.name }}</em>친구</span>
             </div>
             <div class="title2 flex align-center" style="gap: 10px">
-              <svg-icon
-                v-if="!isHeartFilled"
-                type="mdi"
-                :path="mdiHeartOutline"
-                @click="
-                  toggleHeart(selectedImage.heart, selectedImage.fileMngId)
-                "
-                style="color: #ffba08; cursor: pointer"
-              ></svg-icon>
-              <svg-icon
-                v-if="isHeartFilled"
-                type="mdi"
-                :path="mdiHeart"
-                @click="
-                  toggleHeart(selectedImage.heart, selectedImage.fileMngId)
-                "
-                style="color: #ffba08; cursor: pointer"
-              ></svg-icon>
+              <svg-icon v-if="!isHeartFilled" type="mdi" :path="mdiHeartOutline" @click="
+                toggleHeart(selectedImage.heart, selectedImage.fileMngId)
+                " style="color: #ffba08; cursor: pointer"></svg-icon>
+              <svg-icon v-if="isHeartFilled" type="mdi" :path="mdiHeart" @click="
+                toggleHeart(selectedImage.heart, selectedImage.fileMngId)
+                " style="color: #ffba08; cursor: pointer"></svg-icon>
               <p>
                 <em class="yellow">{{ selectedImage.heart }}</em>
               </p>

 .complete-wrap img {
   width: auto;
 }
+
 .body {
   width: 1435px;
   height: auto;

   display: flex;
   align-items: center;
 }
+
 .lcon .race-btn .rabbit-running {
   transform: scaleX(1);
 }

fd960b0

c4227a5

client/views/pages/main/Main.vue

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

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


                     <div v-if="$route.name === 'MyPlan'" class="main-wrap-plan">
                         <router-view />
                     </div>
+                    <div v-else-if="$route.name === 'MyPage'" class="main-wrap-mypage">
+                        <router-view />
+                    </div>
                     <div v-else class="main-wrap">
                         <router-view />
                     </div>

fd960b0

c4227a5

client/views/pages/main/MyPage.vue

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

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


 <template>
-    <div class="mypage">
-        <div class="flex justify-between mb30" style="gap: 30px;">
-            <div>
-                <div class="title-box flex justify-between mb20">
-                    <p class="title">소속 반</p>
-                    <div class="flex align-center look-btn">
-                        <!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> -->
-                    </div>
-                </div>
-                <div class="wrap " style="width: 82rem;">
-                    <section class="flex" style="gap: 20px;">
-                        <div class="class flex justify-between" style="cursor: default;">
-                            <div class="box gd-col2" style="gap: 5px;">
-                                <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                                <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                                <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                                <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                            </div>
-                            <div class="text mt10">
-                                <p class="title1 mb10">A반</p>
-                                <span class="member">20명</span>
-                            </div>
-                        </div>
-
-                    </section>
-                </div>
-            </div>
-            <div>
-                <div class="title-box flex justify-between mb20">
-                    <p class="title">사진첩</p>
-                </div>
-                <div class="photobook">
-                    <div class="flex justify-between">
-                        <div class="box" style="gap: 5px;">
-                            <div><img src="../../../resources/img/img198_12p.png" alt=""></div>
-                        </div>
-                        <div class="text mt10">
-                            <p class="title1 mb10">나의 사진첩</p>
-                            <button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button" title="글쓰기"
-                                class="new-btn">
-                                바로가기
-                            </button>
-
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
+  <div class="mypage">
+    <div class="flex justify-between mb30" style="gap: 30px">
+      <div>
         <div class="title-box flex justify-between mb20">
-            <p class="title">{{ studentInfo.studentName }} 학생 랭킹</p>
+          <p class="title" style="color: white">소속 반</p>
+          <div class="flex align-center look-btn">
+            <!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> -->
+          </div>
         </div>
-        <div class=" mb30">
-            <div class=" flex " style="gap: 50px;">
-                <div class="textbook book-red">
-                    <div class="text ">
-                        <p class="title1" style="color: #fff;">포토북 랭킹</p>
-                    </div>
-                    <div class="box " style="gap: 10px;">
-                        <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
-                        <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="red">{{ photo_rank }}등</em>입니다.</P>
-                    </div>
+        <div style="width: 82rem; padding: 2rem">
+          <section class="flex" style="gap: 20px">
+            <div
+              class="class flex justify-between"
+              style="cursor: default; background-color: transparent"
+            >
+              <div class="box gd-col2" style="gap: 5px">
+                <div>
+                  <img src="../../../resources/img/img176_82t.png" alt="" />
                 </div>
-                <div class="textbook ">
-                    <div class="text ">
-                        <p class="title1" style="color: #fff;">진도율 랭킹</p>
-                    </div>
-                    <div class="box " style="gap: 10px;">
-                        <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
-                        <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="yellow">{{ problem_rank }}등</em>입니다.</P>
-                    </div>
+                <div>
+                  <img src="../../../resources/img/img176_82t.png" alt="" />
                 </div>
-                <div class="textbook book-blue">
-                    <div class="text ">
-                        <p class="title1" style="color: #fff;">점수 랭킹</p>
-                    </div>
-                    <div class="box " style="gap: 10px;">
-                        <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
-                        <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="blue">{{ score_rank }}등</em>입니다.</P>
-                    </div>
+                <div>
+                  <img src="../../../resources/img/img176_82t.png" alt="" />
                 </div>
-                <div class="textbook book-navy">
-                    <div class="text ">
-                        <p class="title1" style="color: #fff;">학습시간 랭킹</p>
-                    </div>
-                    <div class="box " style="gap: 10px;">
-                        <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
-                        <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="navy">{{ time_rank }}등</em>입니다.</P>
-                    </div>
+                <div>
+                  <img src="../../../resources/img/img176_82t.png" alt="" />
                 </div>
+              </div>
+              <div class="text mt10">
+                <p class="title1 mb10">A반</p>
+                <span class="member">20명</span>
+              </div>
             </div>
+          </section>
         </div>
+      </div>
+      <div>
+        <div
+          style="position: absolute; left: 102rem; top: 10rem; cursor: pointer"
+          @click="
+            selectedTab = 'tab4';
+            goToPage('PhotoBook');
+          "
+        >
+          <img
+            src="../../../resources/img/new_img/mypage/photoBtn.png"
+            alt=""
+          />
+        </div>
+        <div
+          class="title-box flex justify-between mb20"
+          style="position: absolute; left: 117em; top: 6em"
+        >
+          <p class="title" style="color: white">사진첩</p>
+        </div>
+      </div>
     </div>
+    <div class="title-box flex justify-between mb20">
+      <p class="title" style="color: white">
+        {{ studentInfo.studentName }} 학생 랭킹
+      </p>
+    </div>
+    <div class="mb30">
+      <div class="flex" style="gap: 95px">
+        <div
+          class="textbook book-red"
+          style="background-color: white; width: 19%; border: #f9c4eb solid 6px"
+        >
+          <div class="text" style="background-color: #f9c4eb">
+            <p class="title1" style="color: #fff">포토북 랭킹</p>
+          </div>
+          <div class="box" style="gap: 10px">
+            <div>
+              <img src="../../../resources/img/img196_12p.png" alt="" />
+            </div>
+            <P class="subtitle mt10" style="font-size: 19px"
+              >현재 {{ stdCount }}명 중
+              <em class="red">{{ photo_rank }}등</em>입니다.</P
+            >
+          </div>
+        </div>
+        <div
+          class="textbook"
+          style="background-color: white; width: 19%; border: #b5dbcc solid 6px"
+        >
+          <div class="text" style="background-color: #b5dbcc">
+            <p class="title1" style="color: #fff">진도율 랭킹</p>
+          </div>
+          <div class="box" style="gap: 10px">
+            <div>
+              <img src="../../../resources/img/img196_12p.png" alt="" />
+            </div>
+            <P class="subtitle mt10" style="font-size: 19px"
+              >현재 {{ stdCount }}명 중
+              <em class="yellow">{{ problem_rank }}등</em>입니다.</P
+            >
+          </div>
+        </div>
+        <div
+          class="textbook book-blue"
+          style="background-color: white; width: 19%; border: #bcd3eb solid 6px"
+        >
+          <div class="text" style="background-color: #bcd3eb">
+            <p class="title1" style="color: #fff">점수 랭킹</p>
+          </div>
+          <div class="box" style="gap: 10px">
+            <div>
+              <img src="../../../resources/img/img196_12p.png" alt="" />
+            </div>
+            <P class="subtitle mt10" style="font-size: 19px"
+              >현재 {{ stdCount }}명 중
+              <em class="blue">{{ score_rank }}등</em>입니다.</P
+            >
+          </div>
+        </div>
+        <div
+          class="textbook book-navy"
+          style="background-color: white; width: 19%; border: #f9c894 solid 6px"
+        >
+          <div class="text" style="background-color: #f9c894">
+            <p class="title1" style="color: #fff">학습시간 랭킹</p>
+          </div>
+          <div class="box" style="gap: 10px">
+            <div>
+              <img src="../../../resources/img/img196_12p.png" alt="" />
+            </div>
+            <P class="subtitle mt10" style="font-size: 19px"
+              >현재 {{ stdCount }}명 중
+              <em class="navy">{{ time_rank }}등</em>입니다.</P
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, } from '@mdi/js';
-import { mdilArrowRight } from '@mdi/light-js';
-import ProgressBar from '../../component/ProgressBar.vue';
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify } from "@mdi/js";
+import { mdilArrowRight } from "@mdi/light-js";
+import ProgressBar from "../../component/ProgressBar.vue";
 import axios from "axios";
 
-
 export default {
-    data() {
-        return {
-            stdCount: 0,
-            photo_rank: 0,
-            problem_rank: 0,
-            score_rank: 0,
-            time_rank: 0,
-            mdiMagnify: mdiMagnify,
-            mdilArrowRight: mdilArrowRight,
-            timer: "00:00",
-            progress: 20,
-            studentInfo: {
-                studentName: "",
-                institutionName: "",
-                grade: "",
-                className: "",
-                studentQuestion: "",
-                history: [],
-            },
-        }
+  data() {
+    return {
+      stdCount: 0,
+      photo_rank: 0,
+      problem_rank: 0,
+      score_rank: 0,
+      time_rank: 0,
+      mdiMagnify: mdiMagnify,
+      mdilArrowRight: mdilArrowRight,
+      timer: "00:00",
+      progress: 20,
+      studentInfo: {
+        studentName: "",
+        institutionName: "",
+        grade: "",
+        className: "",
+        studentQuestion: "",
+        history: [],
+      },
+    };
+  },
+  methods: {
+    classStdCount: function () {
+      const vm = this;
+      axios({
+        url: "/userclass/classStdCountByUserId.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          userId: "USID_000000000000002", // 로그인한 학생의 userId
+        },
+      })
+        .then(function (response) {
+          console.log("classStdCount - response : ", response.data);
+          vm.stdCount = response.data;
+        })
+        .catch(function (error) {
+          console.log("classStdCount - error : ", error);
+          alert("반 학생 수 조회에 오류가 발생했습니다.");
+        });
     },
-    methods: {
-        classStdCount: function () {
-            const vm = this;
-            axios({
-                url: "/userclass/classStdCountByUserId.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    userId: "USID_000000000000002"   // 로그인한 학생의 userId
-                }
-            })
-                .then(function (response) {
-                    console.log("classStdCount - response : ", response.data);
-                    vm.stdCount = response.data;
-                })
-                .catch(function (error) {
-                    console.log("classStdCount - error : ", error);
-                    alert("반 학생 수 조회에 오류가 발생했습니다.");
-                });
+    fetchStudentInfo() {
+      const vm = this;
+      axios({
+        url: "/studentInfo/getInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        fetchStudentInfo() {
-            const vm = this;
-            axios({
-                url: "/studentInfo/getInfo.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    userId: "USID_000000000000002" // 로그인한 학생의 userId
-                }
-            })
-                .then((response) => {
-                console.log(response.data);
-                this.studentInfo = response.data;
-                })
-                .catch((error) => {
-                console.error("학생 정보 가져오기 실패:", error);
-                });
+        data: {
+          userId: "USID_000000000000002", // 로그인한 학생의 userId
         },
-        photoRankByLikeData: function () {
-            const vm = this;
-            axios({
-                url: "/photo/photoRankByLikeData.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    sclsId: "1",
-                    stdId: "1"
-                }
-            })
-                .then(function (response) {
-                    console.log("Photo Rank - response : ", response.data);
-                    vm.photo_rank = response.data;
-                })
-                .catch(function (error) {
-                    console.log("Photo Rank - error : ", error);
-                    alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
-                });
+      })
+        .then((response) => {
+          console.log(response.data);
+          this.studentInfo = response.data;
+        })
+        .catch((error) => {
+          console.error("학생 정보 가져오기 실패:", error);
+        });
+    },
+    photoRankByLikeData: function () {
+      const vm = this;
+      axios({
+        url: "/photo/photoRankByLikeData.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        getUserRankByScore: function () {
-            const vm = this;
-            axios({
-                url: "/userclass/getUserRankByScore.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    userId: "USID_000000000000002"   // 로그인한 학생의 userId
-                }
-            })
-                .then(function (response) {
-                    console.log("User Rank - response : ", response.data);
-                    vm.score_rank = response.data; 
-                })
-                .catch(function (error) {
-                    console.log("User Rank - error : ", error);
-                    alert("점수 랭킹 조회에 오류가 발생했습니다.");
-                });
+        data: {
+          sclsId: "1",
+          stdId: "1",
         },
-        getUserRankByStudyTime: function () {
-            const vm = this;
-            axios({
-                url: "/userclass/getUserRankByStudyTime.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    userId: "1"   // 로그인한 학생의 userId
-                }
-            })
-                .then(function (response) {
-                    console.log("User Rank - response : ", response.data);
-                    vm.time_rank = response.data; 
-                })
-                .catch(function (error) {
-                    console.log("User Rank - error : ", error);
-                    alert("학습시간 랭킹 조회에 오류가 발생했습니다.");
-                });
+      })
+        .then(function (response) {
+          console.log("Photo Rank - response : ", response.data);
+          vm.photo_rank = response.data;
+        })
+        .catch(function (error) {
+          console.log("Photo Rank - error : ", error);
+          alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
+        });
+    },
+    getUserRankByScore: function () {
+      const vm = this;
+      axios({
+        url: "/userclass/getUserRankByScore.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        problemRankByProblemData: function () {
-            const vm = this;
-            axios({
-                url: "/problemLog/problemRankByProblemData.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    sclsId: "1",
-                    stdId: "2"
-                }
-            })
-                .then(function (response) {
-                    console.log("Problem Rank - response : ", response.data);
-                    vm.problem_rank = response.data;
-                })
-                .catch(function (error) {
-                    console.log("Problem Rank - error : ", error);
-                    alert("학생 문제 랭킹 조회에 오류가 발생했습니다.");
-                });
+        data: {
+          userId: "USID_000000000000002", // 로그인한 학생의 userId
         },
-        goToPage(page) {
-            this.$router.push({ name: page });
+      })
+        .then(function (response) {
+          console.log("User Rank - response : ", response.data);
+          vm.score_rank = response.data;
+        })
+        .catch(function (error) {
+          console.log("User Rank - error : ", error);
+          alert("점수 랭킹 조회에 오류가 발생했습니다.");
+        });
+    },
+    getUserRankByStudyTime: function () {
+      const vm = this;
+      axios({
+        url: "/userclass/getUserRankByStudyTime.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        increaseProgress() {
-            if (this.progress < 100) {
-                this.progress += 10;
-            }
+        data: {
+          userId: "1", // 로그인한 학생의 userId
         },
-        showConfirm(type) {
-            let message = '';
-            if (type === 'cancel') {
-                message = '삭제하시겠습니까?';
-            } else if (type === 'reset') {
-                message = '초기화하시겠습니까?';
-            } else if (type === 'save') {
-                message = '등록하시겠습니까?';
-            }
+      })
+        .then(function (response) {
+          console.log("User Rank - response : ", response.data);
+          vm.time_rank = response.data;
+        })
+        .catch(function (error) {
+          console.log("User Rank - error : ", error);
+          alert("학습시간 랭킹 조회에 오류가 발생했습니다.");
+        });
+    },
+    problemRankByProblemData: function () {
+      const vm = this;
+      axios({
+        url: "/problemLog/problemRankByProblemData.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          sclsId: "1",
+          stdId: "2",
+        },
+      })
+        .then(function (response) {
+          console.log("Problem Rank - response : ", response.data);
+          vm.problem_rank = response.data;
+        })
+        .catch(function (error) {
+          console.log("Problem Rank - error : ", error);
+          alert("학생 문제 랭킹 조회에 오류가 발생했습니다.");
+        });
+    },
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    increaseProgress() {
+      if (this.progress < 100) {
+        this.progress += 10;
+      }
+    },
+    showConfirm(type) {
+      let message = "";
+      if (type === "cancel") {
+        message = "삭제하시겠습니까?";
+      } else if (type === "reset") {
+        message = "초기화하시겠습니까?";
+      } else if (type === "save") {
+        message = "등록하시겠습니까?";
+      }
 
-            if (confirm(message)) {
-                this.goBack();
-            }
-        },
+      if (confirm(message)) {
+        this.goBack();
+      }
     },
-    watch: {
-
-    },
-    computed: {
-
-    },
-    components: {
-        SvgIcon,
-        ProgressBar
-    },
-    mounted() {
-        console.log('Main2 mounted');
-        this.fetchStudentInfo();
-        this.classStdCount();
-        this.photoRankByLikeData();
-        this.getUserRankByScore();
-        this.problemRankByProblemData();
-        this.getUserRankByStudyTime();
-    }
-}
+  },
+  watch: {},
+  computed: {},
+  components: {
+    SvgIcon,
+    ProgressBar,
+  },
+  mounted() {
+    console.log("Main2 mounted");
+    this.fetchStudentInfo();
+    this.classStdCount();
+    this.photoRankByLikeData();
+    this.getUserRankByScore();
+    this.problemRankByProblemData();
+    this.getUserRankByStudyTime();
+  },
+};
 </script>
 <style scoped>
 .mypage .textbook {
-    width: 22%;
+  width: 22%;
 }
-</style>
+</style>

fd960b0

c4227a5

client/views/pages/main/MyPlan.vue

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

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


                 <div class="text">
                     <p class="title1" style="color: #fff;">스케줄</p>
                 </div>
-                <div class="purple-scroll" style="overflow: auto; height: 85%;">
+                <div class="purple-scroll" style="overflow: auto; height: 85%; margin: 5px">
                     <div style="padding: 10px 20px;">
                         <p style="text-align: right;cursor: pointer;text-decoration: underline;padding-bottom: 5px;"
                             class="title2" @click="goToPage2('MyPlan2')">학습 일정 변경하기</p>

                         <div class="text">
                             <p class="title1" style="color: #fff;">오늘의 뉴스</p>
                         </div>
-                        <div class="green-scroll" style="overflow: auto; height: 75%;">
+                        <div class="green-scroll" style="overflow: auto; height: 73%; margin: 5px;">
                             <div style=" padding: 10px;">
                                 <div v-for="(news, index) in schedules" :key="index">
                                     <div style="display: flex;">

fd960b0

c4227a5

client/views/pages/main/PhotoBook.vue

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

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


   <div class="myphoto mb30">
     <div>
       <div class="title-box flex justify-end mb40">
+        <p class="class-p">반</p>
         <select @change="handleClassChange">
-          <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId">
+          <option
+            v-for="classItem in classList"
+            :key="classItem.sclsId"
+            :value="classItem.sclsId"
+          >
             {{ classItem.sclsNm }}
           </option>
         </select>
       </div>
       <div class="btnGroup" style="display: flex; flex-direction: column">
-        <button v-for="n in totalPages" :key="n" @click="changePage(n)" type="button" title="페이지 버튼" class="tab-btn">
-          <img v-if="currentPage !== n" src="../../../resources/img/btn49_15s_normal.png" alt="" />
-          <img v-else src="../../../resources/img/btn49_15s_click.png" alt="" />
+        <button
+          v-for="n in totalPages"
+          :key="n"
+          @click="changePage(n)"
+          type="button"
+          title="페이지 버튼"
+          class="tab-btn"
+        >
+          <img
+            v-if="currentPage !== n"
+            src="../../../resources/img/new_img/photobook/page.png"
+            alt=""
+          />
+          <img
+            v-else
+            src="../../../resources/img/new_img/photobook/page_click.png"
+            alt=""
+          />
           <p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
         </button>
       </div>
       <div v-if="selectedTab === 'tab1'" class="tab-box">
-        <div class="flex justify-between">
-          <div v-for="(photo, index) in (photoList?.result || []).slice(0, 3)" :key="index" class="photo"
-            :style="{ transform: getRotation(index) }" @click="buttonSearch(photo)">
-            <div class="class">
-              <div class="box">
-                <div class="photo-container">
-                  <img :src="fetchImage(photo.fileRpath)" alt="" />
+        <div
+          class="flex justify-between"
+          style="margin-right: -82px; margin-left: -47px"
+        >
+          <!-- 왼쪽에 4개의 사진 -->
+          <div class="left-side">
+            <div
+              v-for="(photo, index) in (photoList?.result || []).slice(0, 4)"
+              :key="index"
+              class="photo"
+              :style="{ transform: getRotation(index) }"
+              @click="buttonSearch(photo)"
+            >
+              <div class="class">
+                <div class="box">
+                  <div class="photo-container">
+                    <img
+                      :src="fetchImage(photo.fileRpath)"
+                      alt=""
+                      style="width: 150px"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div class="photo-text mt10 ml10">
-                <div class="member ml30">{{ photo.likeData }}</div>
-                <div class="title2">{{ photo.unitName }}</div>
+                <div class="photo-text mt20 ml30">
+                  <div class="member ml30">{{ photo.likeData }}</div>
+                  <div class="title2-photo">{{ photo.unitName }}</div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="flex justify-between mt20">
-          <div v-for="(photo, index) in (photoList?.result || []).slice(3, 6)" :key="index + 3" class="photo"
-            :style="{ transform: getRotation(index + 3) }" @click="buttonSearch(photo)">
-            <div class="class">
-              <div class="box">
-                <div class="photo-container">
-                  <img :src="fetchImage(photo.fileRpath)" alt="" style="width: 150px" />
+
+          <!-- 오른쪽에 4개의 사진 -->
+          <div class="right-side">
+            <div
+              v-for="(photo, index) in (photoList?.result || []).slice(4, 8)"
+              :key="index + 4"
+              class="photo"
+              :style="{ transform: getRotation(index + 4) }"
+              style="width: fit-content"
+              @click="buttonSearch(photo)"
+            >
+              <div class="class" style="width: 24rem; height: 21rem">
+                <div class="box">
+                  <div class="photo-container">
+                    <img
+                      :src="fetchImage(photo.fileRpath)"
+                      alt=""
+                      style="width: 150px"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div class="photo-text mt10 ml10">
-                <div class="member ml30">{{ photo.likeData }}</div>
-                <div class="title2">{{ photo.unitName }}</div>
+                <div class="photo-text mt20 ml30">
+                  <div class="member ml30">{{ photo.likeData }}</div>
+                  <div class="title2-photo">{{ photo.unitName }}</div>
+                </div>
               </div>
             </div>
           </div>

           <div class="flex mb10 justify-between">
             <p class="popup-title">알림</p>
             <button type="button" class="popup-close-btn" @click="closeBtn">
-              <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
+              <svg-icon
+                type="mdi"
+                :path="mdiWindowClose"
+                class="close-btn"
+              ></svg-icon>
             </button>
           </div>
 
-          <div class="photo-modal flex justify-between mt20" v-if="photoData.length > 0">
+          <div
+            class="photo-modal flex justify-between mt20"
+            v-if="photoData.length > 0"
+          >
             <div class="box">
               <div>
-                <img :src="fetchImage(photoData[0].fileRpath)" alt="" style="width: 640px; height: 480px" />
+                <img
+                  :src="fetchImage(photoData[0].fileRpath)"
+                  alt=""
+                  style="width: 640px; height: 480px"
+                />
               </div>
             </div>
             <div class="photo-title-container">
               <div class="title1">
                 {{ photoData[0].unitName }}을 마친
-                <em class="yellow">{{ photoData[0].stdName }}</em>친구
+                <em class="yellow">{{ photoData[0].stdName }}</em
+                >친구
               </div>
               <p class="title2 date">{{ photoData[0].photoDate }}</p>
             </div>

       photoData: [],
 
       currentPage: 1,
-      pageSize: 6,
+      pageSize: 8,
       totalPages: 1,
 
       mdiWindowClose: mdiWindowClose,

           console.log("classList - response : ", response.data);
           vm.classList = response.data.data;
           vm.currentPage = 1;
-          vm.selectedSclsId= vm.classList[0].sclsId;
+          vm.selectedSclsId = vm.classList[0].sclsId;
           vm.stdPhotoSelectList();
-
         })
         .catch(function (error) {
           console.log("classList - error : ", error);

     },
 
     handleClassChange(event) {
-    this.selectedSclsId = event.target.value; // 선택된 sclsId 가져오기
-    this.currentPage = 1; // 페이지 초기화
-    this.stdPhotoSelectList(); // 함수 호출
-  },
-  stdPhotoSelectList: function (scsId) {
-    const vm = this;
-    axios({
-      url: "/photo/stdPhotoList.json",
-      method: "post",
-      headers: {
-        "Content-Type": "application/json; charset=UTF-8",
-      },
-      data: {
-        stdId: "1",
-        sclsId: vm.selectedSclsId, // 여기에 sclsId 들어가야 함
-        page: vm.currentPage,
-        pageSize: vm.pageSize,
-      },
-    })
-      .then(function (response) {
-        console.log("photoList - response : ", response.data);
-        vm.photoList = response.data;
-        vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
+      this.selectedSclsId = event.target.value; // 선택된 sclsId 가져오기
+      this.currentPage = 1; // 페이지 초기화
+      this.stdPhotoSelectList(); // 함수 호출
+    },
+    stdPhotoSelectList: function (scsId) {
+      const vm = this;
+      axios({
+        url: "/photo/stdPhotoList.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          stdId: "1",
+          sclsId: vm.selectedSclsId, // 여기에 sclsId 들어가야 함
+          page: vm.currentPage,
+          pageSize: vm.pageSize,
+        },
       })
-      .catch(function (error) {
-        console.log("photoList - error : ", error);
-        alert("반별 내 사진 조회에 오류가 발생했습니다.");
-      });
-  },
+        .then(function (response) {
+          console.log("photoList - response : ", response.data);
+          vm.photoList = response.data;
+          vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
+        })
+        .catch(function (error) {
+          console.log("photoList - error : ", error);
+          alert("반별 내 사진 조회에 오류가 발생했습니다.");
+        });
+    },
     getRotation(index) {
       const rotations = [2, -1, 1, -2, 1, -1];
       return `rotate(${rotations[index]}deg)`;

 .class {
   width: 260px;
   height: 200px;
+  background-repeat: no-repeat;
 }
 
 .photo-container {

 .photo-container img {
   width: 150px;
   height: 110px;
+  height: 105px;
+  position: relative;
+  top: 23px;
 }
 
 .photo-text {

   justify-content: space-between;
   margin-top: 20px;
 }
+
+select {
+  border-radius: 16px;
+  position: absolute;
+  top: 42px;
+  right: 33px;
+}
+
+.class-p {
+  font-size: 23px;
+  position: absolute;
+  top: 52px;
+  right: 218px;
+}
+
+.left-side,
+.right-side {
+  width: 48%; /* 좌우로 나눔 */
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+
+.title2-photo {
+  font-size: 15px;
+  font-weight: bold;
+  font-family: "ONEMobileOTF-Regular";
+  max-width: 175px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,118 +1,179 @@
1	1	@charset "utf-8";
2	2
3	3	@font-face {
4		- font-family: 'Pretendard-Bold';
5		- src: url('../font/Pretendard-Bold.otf') format('opentype');
	4	+ font-family: "Pretendard-Bold";
	5	+ src: url("../font/Pretendard-Bold.otf") format("opentype");
6	6	}
7	7	@font-face {
8		- font-family: 'Pretendard-Black';
9		- src: url('../font/Pretendard-Black.otf') format('opentype');
	8	+ font-family: "Pretendard-Black";
	9	+ src: url("../font/Pretendard-Black.otf") format("opentype");
10	10	}
11	11	@font-face {
12		- font-family: 'Pretendard-ExtraBold';
13		- src: url('../font/Pretendard-ExtraBold.otf') format('opentype');
	12	+ font-family: "Pretendard-ExtraBold";
	13	+ src: url("../font/Pretendard-ExtraBold.otf") format("opentype");
14	14	}
15	15	@font-face {
16		- font-family: 'Pretendard-ExtraLight';
17		- src: url('../font/Pretendard-ExtraLight.otf') format('opentype');
	16	+ font-family: "Pretendard-ExtraLight";
	17	+ src: url("../font/Pretendard-ExtraLight.otf") format("opentype");
18	18	}
19	19	@font-face {
20		- font-family: 'Pretendard-Light';
21		- src: url('../font/Pretendard-Light.otf') format('opentype');
	20	+ font-family: "Pretendard-Light";
	21	+ src: url("../font/Pretendard-Light.otf") format("opentype");
22	22	}
23	23	@font-face {
24		- font-family: 'Pretendard-Medium';
25		- src: url('../font/Pretendard-Medium.otf') format('opentype');
	24	+ font-family: "Pretendard-Medium";
	25	+ src: url("../font/Pretendard-Medium.otf") format("opentype");
26	26	}
27	27	@font-face {
28		- font-family: 'Pretendard-Regular';
29		- src: url('../font/Pretendard-Regular.otf') format('opentype');
	28	+ font-family: "Pretendard-Regular";
	29	+ src: url("../font/Pretendard-Regular.otf") format("opentype");
30	30	}
31	31	@font-face {
32		- font-family: 'Pretendard-SemiBold';
33		- src: url('../font/Pretendard-SemiBold.otf') format('opentype');
	32	+ font-family: "Pretendard-SemiBold";
	33	+ src: url("../font/Pretendard-SemiBold.otf") format("opentype");
34	34	}
35	35	@font-face {
36		- font-family: 'Pretendard-Thin';
37		- src: url('../font/Pretendard-Thin.otf') format('opentype');
38		-}
39		-
40		-
41		-@font-face {
42		- font-family: 'ONEMobilePOP';
43		- src: url('../font/ONEMobilePOP.ttf') format('truetype');
44		-}
45		-@font-face {
46		- font-family: 'ONEMobileOTF-Regular';
47		- src: url('../font/ONEMobileOTF-Regular.otf') format('opentype');
48		-}
49		-@font-face {
50		- font-family: 'ONEMobileOTF-Light';
51		- src: url('../font/ONEMobileOTF-Light.otf') format('opentype');
52		-}
53		-@font-face {
54		- font-family: 'ONEMobileOTF-Bold';
55		- src: url('../font/ONEMobileOTF-Bold.otf') format('opentype');
56		-}
57		-@font-face {
58		- font-family: 'ONEMobilePOPOTF';
59		- src: url('../font/ONEMobilePOPOTF.otf') format('opentype');
	36	+ font-family: "Pretendard-Thin";
	37	+ src: url("../font/Pretendard-Thin.otf") format("opentype");
60	38	}
61	39
62	40	@font-face {
63		- font-family: 'neodgm';
64		- src: url('../font/neodgm.ttf') format('truetype');
	41	+ font-family: "ONEMobilePOP";
	42	+ src: url("../font/ONEMobilePOP.ttf") format("truetype");
	43	+}
	44	+@font-face {
	45	+ font-family: "ONEMobileOTF-Regular";
	46	+ src: url("../font/ONEMobileOTF-Regular.otf") format("opentype");
	47	+}
	48	+@font-face {
	49	+ font-family: "ONEMobileOTF-Light";
	50	+ src: url("../font/ONEMobileOTF-Light.otf") format("opentype");
	51	+}
	52	+@font-face {
	53	+ font-family: "ONEMobileOTF-Bold";
	54	+ src: url("../font/ONEMobileOTF-Bold.otf") format("opentype");
	55	+}
	56	+@font-face {
	57	+ font-family: "ONEMobilePOPOTF";
	58	+ src: url("../font/ONEMobilePOPOTF.otf") format("opentype");
	59	+}
	60	+
	61	+@font-face {
	62	+ font-family: "neodgm";
	63	+ src: url("../font/neodgm.ttf") format("truetype");
65	64	}
66	65
67	66	* {
68		- padding: 0;
69		- margin: 0;
70		- box-sizing: border-box;
	67	+ padding: 0;
	68	+ margin: 0;
	69	+ box-sizing: border-box;
71	70	}
72	71
73		-html, body, #root, #app{height: 100%;}
	72	+html,
	73	+body,
	74	+#root,
	75	+#app {
	76	+ height: 100%;
	77	+}
74	78	html,
75	79	body,
76	80	#root {
77		- font-size: 10px;
78		- color: #2E2F30;
79		- font-family: 'ONEMobileOTF-Regular';
80		-
	81	+ font-size: 10px;
	82	+ color: #2e2f30;
	83	+ font-family: "ONEMobileOTF-Regular";
81	84	}
82	85	html,
83		-body{ background-color: #eaedf4;}
84		-body{position:relative;text-align: left; overflow-x: hidden; width: 1920px;}
85		-::-webkit-scrollbar {width: 10px; height: 10px;}
86		-::-webkit-scrollbar-track {border-radius: 5px;background-color: #EAEDF4;}
87		-::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #FFBA08;}
88		-#root, #app{
89		- /* height: 100%; */
90		- }
91		-input, select, span,p, label {
92		- font-size: 16px;
	86	+body {
	87	+ background-color: #eaedf4;
93	88	}
94		-input::placeholder{color: #8C8E92;}
95		-input[type="text"]{ padding:10px 20px; width: 100%; }
96		-input#file-upload-button{padding: 10px ;}
97		-
98		-button{
99		- border: none;
100		- background-color: transparent;
101		- cursor: pointer;
	89	+body {
	90	+ position: relative;
	91	+ text-align: left;
	92	+ overflow-x: hidden;
	93	+ width: 1920px;
102	94	}
103		-textarea{resize: none; border: 0; outline: 0; font-size: 20px; font-family: 'ONEMobileOTF-Regular';}
	95	+::-webkit-scrollbar {
	96	+ width: 7px;
	97	+ height: 10px;
	98	+}
	99	+::-webkit-scrollbar-track {
	100	+ border-radius: 5px;
	101	+ background-color: #eaedf4;
	102	+}
	103	+::-webkit-scrollbar-thumb {
	104	+ border-radius: 5px;
	105	+ background-color: #ffba08;
	106	+}
	107	+body,
	108	+#root,
	109	+#app {
	110	+ /* height: 100%; */
	111	+ /* background-image: url("../img/new_img/plan/background.png");
	112	+ background-repeat: no-repeat;
	113	+ background-size: cover; */
	114	+}
	115	+body {
	116	+ height: 100%;
	117	+ background-image: url(../img/new_img/plan/background.png);
	118	+ background-repeat: no-repeat;
	119	+ background-size: cover;
	120	+ background-position: center;
	121	+ position: absolute;
	122	+}
	123	+input,
	124	+select,
	125	+span,
	126	+p,
	127	+label {
	128	+ font-size: 16px;
	129	+}
	130	+input::placeholder {
	131	+ color: #8c8e92;
	132	+}
	133	+input[type="text"] {
	134	+ padding: 10px 20px;
	135	+ width: 100%;
	136	+}
	137	+input#file-upload-button {
	138	+ padding: 10px;
	139	+}
104	140
105		-a{text-decoration: none; color: #2E2F30;}
	141	+button {
	142	+ border: none;
	143	+ background-color: transparent;
	144	+ cursor: pointer;
	145	+}
	146	+textarea {
	147	+ resize: none;
	148	+ border: 0;
	149	+ outline: 0;
	150	+ font-size: 20px;
	151	+ font-family: "ONEMobileOTF-Regular";
	152	+}
	153	+
	154	+a {
	155	+ text-decoration: none;
	156	+ color: #2e2f30;
	157	+}
106	158
107	159	table {
108		- font-size: 20px;
109		- width: 100%;
110		- border-collapse: collapse;
111		- table-layout: fixed;
112		-border: 0;}
113		-thead{background-color: #eaedf4;}
114		-tbody tr{border-bottom: #eaedf4 1px solid; cursor: pointer;}
115		-td{padding: 10px ; text-align: center;}
	160	+ font-size: 20px;
	161	+ width: 100%;
	162	+ border-collapse: collapse;
	163	+ table-layout: fixed;
	164	+ border: 0;
	165	+}
	166	+thead {
	167	+ background-color: #eaedf4;
	168	+}
	169	+tbody tr {
	170	+ border-bottom: #eaedf4 1px solid;
	171	+ cursor: pointer;
	172	+}
	173	+td {
	174	+ padding: 10px;
	175	+ text-align: center;
	176	+}
116	177
117	178	/* .btn-upload {
118	179	width: 100px;
...	...	@@ -132,4 +193,4 @@
132	193
133	194	#file {
134	195	display: none;
135		- } */ (파일 끝에 줄바꿈 문자 없음)
	196	+ } */

...	...	@@ -117,6 +117,14 @@
117	117	/* 레이아웃 */
118	118	.side {
119	119	width: 42rem;
	120	+ background-color: #ffffffa6;
	121	+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	122	+ border-radius: 10px;
	123	+ padding: 2rem;
	124	+ position: absolute;
	125	+
	126	+ top: 179px;
	127	+ height: 700px;
120	128	}
121	129
122	130	.main-wrap {
...	...	@@ -127,23 +135,40 @@
127	135	.main-wrap {
128	136	width: 134rem;
129	137	height: 70rem;
130		- background-color: #fff;
	138	+ background-color: #ffffffa6;
131	139	border-radius: 10px;
132	140	position: absolute;
133	141	right: 60px;
134	142	top: 179px;
135	143	z-index: 1;
136	144	}
137		-.main-wrap-plan {
	145	+
	146	+.main-wrap-mypage {
138	147	width: 134rem;
139	148	height: 70rem;
140		- background-color: #fff;
141	149	border-radius: 10px;
142	150	position: absolute;
143	151	right: 60px;
144	152	top: 179px;
145	153	z-index: 1;
146		- background-image: url("../img/new_img/plan/background.png");
	154	+ background-image: url("../img/new_img/mypage/background.png");
	155	+ background-size: 100% 100%;
	156	+ background-position: center;
	157	+ background-repeat: no-repeat;
	158	+ padding: 6rem 8rem;
	159	+}
	160	+
	161	+.main-wrap-plan {
	162	+ width: 134rem;
	163	+ height: 70rem;
	164	+ border-radius: 10px;
	165	+ position: absolute;
	166	+ right: 60px;
	167	+ top: 179px;
	168	+ z-index: 1;
	169	+ /* background-image: url("../img/new_img/plan/background.png"); */
	170	+ background-color: #ffffffa6;
	171	+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
147	172	}
148	173	.header img {
149	174	margin-left: 20px;
...	...	@@ -159,7 +184,7 @@
159	184	/* height: 24rem; */
160	185	/* background-color: #fff; */
161	186	border-radius: 10px;
162		- padding: 30px 20px 0px;
	187	+ padding: 20px 20px 0px;
163	188	font-size: 16px;
164	189	font-family: "ONEMobileOTF-Regular";
165	190	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
...	...	@@ -406,15 +431,16 @@
406	431	}
407	432
408	433	.myphoto > div {
409		- background-image: url("../img/img207_15s.png");
410		- width: 1011px;
411		- height: 558px;
	434	+ background-image: url("../img/new_img/photobook/background.png");
	435	+ width: 127rem;
	436	+ height: 56rem;
412	437	padding: 30px 60px;
413	438	margin: 0 auto;
	439	+ background-size: 100% 100%;
414	440	}
415	441	.tab-btn {
416	442	position: relative;
417		- color: #568bfa;
	443	+ color: #fff;
418	444	}
419	445	.tab-btn p.custom-style {
420	446	color: #fff;
...	...	@@ -426,12 +452,13 @@
426	452	right: 7%;
427	453	transform: translate(-50%, -50%);
428	454	font-family: "ONEMobilePOPOTF";
429		- font-size: 36px;
	455	+ font-size: 27px;
430	456	}
431	457	.myphoto .btnGroup {
432	458	width: max-content;
433	459	position: absolute;
434		- right: 45px;
	460	+ top: 134px;
	461	+ right: 14px;
435	462	z-index: 10000;
436	463	}
437	464	.myphoto .class {
...	...	@@ -732,7 +759,8 @@
732	759	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
733	760	width: 93%;
734	761	height: 710px;
735		- background-color: #fff;
	762	+ /* background-color: #fff; */
	763	+ background-color: #ffffffa6;
736	764	border-radius: 20px;
737	765	}
738	766
...	...	@@ -1169,7 +1197,8 @@
1169	1197	}
1170	1198
1171	1199	.class {
1172		- background-color: #f8f9fb;
	1200	+ /* background-color: #f8f9fb; */
	1201	+ background-image: url("../img/new_img/photobook/photo.png");
1173	1202	border-radius: 10px;
1174	1203	padding: 25px;
1175	1204	font-size: 19px;

...	...	@@ -1,5 +1,5 @@
1	1	<template>
2		- <div class="login-container">
	2	+ <div style="padding: 20px 20px;">
3	3
4	4	<div class="login ">
5	5	<div class="logo flex justify-end"><img src="../resources/img/logo.png" alt=""></div>
...	...	@@ -57,12 +57,13 @@
57	57	<div class="find-form mt30" v-if="selectedTab === 'tab1'">
58	58	<div class="mb20 flex justify-between align-center">
59	59	<p class="title2" for="username" style="width: 12rem;">이름</p>
60		- <input class="data-wrap" type="text" id="username" v-model="findUserNm" placeholder="이름을 입력하세요." style="width: 45rem;" >
	60	+ <input class="data-wrap" type="text" id="username" v-model="findUserNm" placeholder="이름을 입력하세요."
	61	+ style="width: 45rem;">
61	62	</div>
62	63	<div class="mb30 flex justify-between align-center">
63	64	<p class="title2" for="username" style="width: 12rem;">전화번호</p>
64		- <div class="flex justify-between align-center"><input class="data-wrap"
65		- style="width: 14rem;" type="text" id="username" v-model="findTel1">
	65	+ <div class="flex justify-between align-center"><input class="data-wrap" style="width: 14rem;" type="text"
	66	+ id="username" v-model="findTel1">
66	67	<p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
67	68	v-model="findTel2">
68	69	<p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
...	...	@@ -82,15 +83,18 @@
82	83	<div class="find-form mt30" v-else-if="selectedTab === 'tab2'">
83	84	<div class="mb20 flex justify-between align-center">
84	85	<p class="title2" for="username" style="width: 12rem;">아이디</p>
85		- <input class="data-wrap" type="text" id="username" v-model="changeLoginId" placeholder="아이디를 입력하세요." style="width: 45rem;" >
	86	+ <input class="data-wrap" type="text" id="username" v-model="changeLoginId" placeholder="아이디를 입력하세요."
	87	+ style="width: 45rem;">
86	88	</div>
87	89	<div class="mb20 flex justify-between align-center">
88	90	<p class="title2" for="username" style="width: 14rem;">변경할 비밀번호</p>
89		- <input class="data-wrap" type="password" id="username" v-model="changeUserPw" placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;" >
	91	+ <input class="data-wrap" type="password" id="username" v-model="changeUserPw"
	92	+ placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;">
90	93	</div>
91	94	<div class="mb20 flex justify-between align-center">
92	95	<p class="title2" for="username" style="width: 12rem;">비밀번호 확인</p>
93		- <input class="data-wrap" type="password" id="username" v-model="changeUserPwCheck" placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;" >
	96	+ <input class="data-wrap" type="password" id="username" v-model="changeUserPwCheck"
	97	+ placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;">
94	98	</div>
95	99	<div class="flex justify-center ">
96	100	<button type="button" title="글쓰기" class="new-btn mr10" @click="closeBtn">
...	...	@@ -161,8 +165,8 @@
161	165	findTel1: '',
162	166	findTel2: '',
163	167	findTel3: '',
164		- findUserInfo : {},
165		- changeLoginId:'',
	168	+ findUserInfo: {},
	169	+ changeLoginId: '',
166	170	changeUserPw: '',
167	171	changeUserPwCheck: '',
168	172	}

...	...	@@ -1,32 +1,35 @@
1	1	<template>
2		- <div class="flex justify-center align-center" style="margin-top : 30px">
3		- <div class="content title-box aibox">
4		- <p class="title mt25 title-bg">모르는 단어를 물어봐~!</p>
5		- <div class="propmt-container">
6		- <div class="input-conatiner">
7		- <input v-model="word" @keyup.enter="startProgress(word)"/>
8		- <button @click="startProgress(word)"> <p> 생성하기 </p> </button>
	2	+ <div class="flex justify-center align-center">
	3	+ <div class="propmt-container">
	4	+ <div class="input-conatiner">
	5	+ <input v-model="word" @keyup.enter="startProgress(word)" />
	6	+ <button @click="startProgress(word)">
	7	+ <img src="../../resources/img/new_img/icon/search-icon.png" style="width: 52px" />
	8	+ </button>
	9	+ </div>
	10	+ </div>
	11	+ <div class="modal-container flex" v-if="!modalClose">
	12	+ <div class="progress-container" v-if="progressWidth < 100 && progressWidth > 1">
	13	+ <div class="progress-bar" :style="{ width: progressWidth + '%' }">{{ Math.floor(progressWidth) }}%</div>
	14	+ <!-- 로딩 이미지 -->
	15	+ <div class="loading-container">
	16	+ <img src="../../resources/img/jumpingRabbit.gif" alt="Loading" class="loading-gif" />
	17	+ <p>잠깐만 기다려봐~</p>
9	18	</div>
10		- <div class="progress-container">
11		- <div class="progress-bar" :style="{ width: progressWidth + '%' }">{{ Math.floor(progressWidth) }}%</div>
12		-
13		- <!-- 로딩 이미지 -->
14		- <div v-if="progressWidth < 100 && progressWidth > 1" class="loading-container">
15		- <img src="../../resources/img/jumpingRabbit.gif" alt="Loading" class="loading-gif"/>
16		- <p> 잠깐만 기다려봐~ </p>
17		- </div>
18		-
19		- </div>
20		- <div v-if="visibleWord" class="result-container">
21		- <img :src="imageSrc"/>
	19	+ </div>
	20	+ <div v-if="visibleWord" class="result-container">
	21	+ <div class="flex align-center modal-box">
	22	+ <img :src="imageSrc" />
22	23	<div class="word-container">
23		- <h2> {{ inputWord }} </h2>
	24	+ <h2>{{ inputWord }}</h2>
24	25	</div>
25	26	</div>
	27	+ <button @click="handleModalClose">
	28	+ <img src="../../resources/img/btn25_93t_normal.png" alt="" style="width: auto" />
	29	+ </button>
26	30	</div>
27	31	</div>
28	32	</div>
29		-
30	33	</template>
31	34
32	35	<script>
...	...	@@ -36,22 +39,22 @@
36	39	data() {
37	40	return {
38	41	progressWidth: 0,
39		- inputWord : "",
	42	+ inputWord: '',
40	43
41		- // 하드 코딩 -> 수정 필요 : API
42		- word : "",
43		- imageSrc : "",
	44	+ word: '',
	45	+ imageSrc: '',
44	46	imageData: null, // 서버에서 받아온 이미지 데이터 저장
45	47
46		- visibleWord : false,
	48	+ visibleWord: false,
	49	+ modalClose: true, // 초기 상태 === 닫힘
47	50	};
48	51	},
49		- mounted() {
50		-
51		- },
	52	+ mounted() {},
52	53	methods: {
53	54	// 상태 진행 바(progress bar)
54	55	startProgress(word) {
	56	+ this.modalClose = false;
	57	+
55	58	if (this.progressWidth == 100) {
56	59	this.resetProgress();
57	60	}
...	...	@@ -72,7 +75,7 @@
72	75	clearInterval(progressInterval);
73	76	this.visibleWord = true;
74	77
75		- // 진행이 완료된 후에 이미지 데이터 렌더링
	78	+ // 진행이 완료된 후에 이미지 데이터 렌더링
76	79	if (this.imageData) {
77	80	this.imageSrc = this.imageUrl;
78	81	}
...	...	@@ -86,31 +89,38 @@
86	89	this.inputWord = word;
87	90	this.visibleWord = false;
88	91	},
89		-
	92	+
90	93	resetProgress() {
91	94	this.progressWidth = 0;
92	95	this.visibleWord = false;
93		- this.imageSrc = ""; // 이미지 URL 초기화
	96	+ this.imageSrc = ''; // 이미지 URL 초기화
94	97	this.imageData = null; // 이미지 데이터 초기화
	98	+ this.word = '';
	99	+ },
	100	+
	101	+ handleModalClose() {
	102	+ this.resetProgress();
	103	+ this.modalClose = true;
	104	+ console.log('모달 상태 : ', this.modalClose);
95	105	},
96	106
97	107	// 이미지 API
98		- async getAiImage(){
99		- const url = "http://takensoftai.iptime.org:20200/generate_json";
	108	+ async getAiImage() {
	109	+ const url = 'http://takensoftai.iptime.org:20200/generate_json';
100	110	// console.log(`word : ${this.word}`);
101	111	try {
102	112	const response = await axios({
103	113	url: url,
104		- method: "post",
	114	+ method: 'post',
105	115	headers: {
106		- "Content-Type": "application/json; charset=UTF-8",
	116	+ 'Content-Type': 'application/json; charset=UTF-8',
107	117	},
108	118	responseType: 'arraybuffer',
109	119	data: {
110		- text: this.word
	120	+ text: this.word,
111	121	},
112	122	});
113		-
	123	+
114	124	// console.log(`응답 : ${response}`);
115	125
116	126	// 바이너리 데이터 -> Blob으로 변환
...	...	@@ -124,23 +134,22 @@
124	134	} catch (err) {
125	135	console.log(err);
126	136	}
127		- }
128		- }
129		-}
	137	+ },
	138	+ },
	139	+};
130	140	</script>
131	141
132	142	<style>
133		-.propmt-container{
134		- padding: 0px 50px 30px 50px;
	143	+.propmt-container {
	144	+ /padding: 0px 50px 30px 50px;/
135	145	}
136	146	/* 입력 컨테이너 */
137		-.input-conatiner{
	147	+.input-conatiner {
138	148	display: flex;
139	149	align-items: center;
140		- gap: 30px;
141		- height: 50px;
	150	+ width: 80rem;
142	151	}
143		-.input-conatiner input{
	152	+.input-conatiner input {
144	153	width: 90%;
145	154	height: 100%;
146	155	padding: 10px 30px;
...	...	@@ -148,34 +157,35 @@
148	157	border-radius: 10px;
149	158	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
150	159	outline: none;
151		- font-size : 28px;
	160	+ font-size: 28px;
152	161	}
153		-.input-conatiner button{
	162	+.input-conatiner button {
154	163	width: 15%;
155	164	height: 100%;
156	165	border: none;
157	166	border-radius: 10px;
158	167	cursor: pointer;
159		- background-color: #ffba08;
	168	+ /background-color: #ffba08;/
160	169	display: flex;
161	170	justify-content: center;
162	171	align-items: center;
163	172	}
164	173
165		-.input-conatiner button p{
166		- font-size : 28px;
	174	+.input-conatiner button p {
	175	+ font-size: 28px;
167	176	}
168	177
169	178	/* 진행 상태바 */
170	179	.progress-container {
171		- width: 100%;
	180	+ width: 50rem;
	181	+ height: fit-content;
172	182	background-color: #ffffff;
173		- border-radius: 5px;
	183	+ border-radius: 10px;
174	184	overflow: hidden;
175		- margin-top: 20px;
176		- display : flex;
	185	+ display: flex;
177	186	flex-direction: column;
178		- gap :30px;
	187	+ gap: 30px;
	188	+ padding: 30px;
179	189	}
180	190
181	191	.progress-bar {
...	...	@@ -185,42 +195,43 @@
185	195	text-align: center;
186	196	line-height: 30px;
187	197	color: white;
188		- border : none;
	198	+ border: none;
189	199	border-radius: 5px;
190	200	transition: width 0.3s;
191		- font-size : 20px;
	201	+ font-size: 20px;
192	202	}
193	203
194	204	/* 로딩 gif */
195		-.loading-container{
196		- display : flex;
197		- flex-direction: column;
198		- align-items: center;
199		- gap: 30px;
200		- text-align: center;
201		- margin-top : 30px;
202		- padding-bottom : 40px;
203		-}
204		-.loading-gif{
205		- width: 25%;
206		- border-radius: 500px;
207		-}
208		-.loading-container p {
209		- font-size : 25px;
210		-}
211		-
212		-/* 결과 container */
213		-.result-container{
214		- margin-top: 30px;
	205	+.loading-container {
215	206	display: flex;
216	207	flex-direction: column;
217	208	align-items: center;
218	209	gap: 30px;
	210	+ text-align: center;
219	211	}
220		-.result-container img{
221		- width : 30%;
	212	+.loading-gif {
	213	+ width: 52%;
	214	+ border-radius: 500px;
222	215	}
223		-.word-container{
	216	+.loading-container p {
	217	+ font-size: 25px;
	218	+}
	219	+
	220	+/* 결과 container */
	221	+.result-container {
	222	+ display: flex;
	223	+ flex-direction: row;
	224	+ align-items: flex-start;
	225	+ background-color: #fff;
	226	+ padding: 30px;
	227	+ border-radius: 10px;
	228	+ width: 50rem;
	229	+ height: 100%;
	230	+}
	231	+.result-container img {
	232	+ width: 60%;
	233	+}
	234	+.word-container {
224	235	width: 30%;
225	236	text-align: center;
226	237	padding: 20px 0px;
...	...	@@ -231,14 +242,31 @@
231	242	gap: 15px;
232	243	}
233	244	.word-container h2 {
234		- font-size : 28px;
	245	+ font-size: 28px;
235	246	}
236	247
237		-.aibox{
	248	+.aibox {
238	249	display: flex;
239	250	flex-direction: column;
240	251	justify-content: center;
241	252	height: auto;
242	253	padding: 30px 0px;
243	254	}
	255	+
	256	+.modal-container {
	257	+ width: 50rem;
	258	+ height: 40rem;
	259	+ border-radius: 10px;
	260	+ z-index: 100;
	261	+ position: absolute;
	262	+ top: 25rem;
	263	+ right: 10%;
	264	+ box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	265	+}
	266	+
	267	+.modal-box {
	268	+ gap: 30px;
	269	+ margin-top: 10%;
	270	+ margin-left: 5%;
	271	+}
244	272	</style>

...	...	@@ -1,43 +1,54 @@
1	1	<template>
2		- <div class="side">
3		- <div class="profile mb30">
4		- <div class="flex align-center" style="gap: 18px">
5		- <img src="../../resources/img/img16_s.png" alt="" style="border-radius: 100%; width: 10rem" />
6		- <div class="mt25">
7		- <div>
8		- <p class="name mb10">{{ studentInfo.studentName }}</p>
9		- <p class="mb5">
10		- <span><img src="../../resources/img/new_img/icon/school_icon.png" alt="" /></span>
11		- {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
12		- {{ studentInfo.className }}
13		- </p>
14		- </div>
15		- <!-- <progress-bar :progress="progress"></progress-bar> -->
16		- </div>
17		- </div>
18		- <div class="problem-box mt25">
19		- <p style="font-weight: bold">
20		- 지금까지 푼 총 문제 수 :
21		- <span style="color: #9528b7; font-size: 16px; font-weight: bold"
22		- >{{ studentInfo.totalProblemsSolved }}개</span
23		- >
24		- </p>
25		- </div>
	2	+ <div class="side">
	3	+ <div class="profile mb30">
	4	+ <div class="flex align-center" style="gap: 18px">
	5	+ <img
	6	+ src="../../resources/img/img16_s.png"
	7	+ alt=""
	8	+ style="border-radius: 100%; width: 10rem"
	9	+ />
	10	+ <div class="mt25">
	11	+ <div>
	12	+ <p class="name mb10">{{ studentInfo.studentName }}</p>
	13	+ <p class="mb5">
	14	+ <span
	15	+ ><img
	16	+ src="../../resources/img/new_img/icon/school_icon.png"
	17	+ alt=""
	18	+ /></span>
	19	+ {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
	20	+ {{ studentInfo.className }}
	21	+ </p>
	22	+ </div>
	23	+ <!-- <progress-bar :progress="progress"></progress-bar> -->
26	24	</div>
27		- <hr style="margin: 25px 20px" />
28		- <div class="history-box">
29		- <p class="title2 mb20">최근 학습 히스토리</p>
30		- <ul class="flex-column" style="gap: 10px">
31		- <!-- 더미 데이터 -->
32		- <li>· 지학사 3학년 1학기</li>
33		- <li>· 지학사 3학년 2학기</li>
34		- <!-- 여기까지 -->
35		- <li v-for="historyItem in studentInfo.history" :key="historyItem.unitId">
36		- · [{{ historyItem.bookName }}] {{ historyItem.unitName }}
37		- </li>
38		- </ul>
39		- </div>
40		- <!-- <div class="ask mb30">
	25	+ </div>
	26	+ <div class="problem-box mt25">
	27	+ <p style="font-weight: bold">
	28	+ 지금까지 푼 총 문제 수 :
	29	+ <span style="color: #9528b7; font-size: 16px; font-weight: bold"
	30	+ >{{ studentInfo.totalProblemsSolved }}개</span
	31	+ >
	32	+ </p>
	33	+ </div>
	34	+ </div>
	35	+ <hr style="margin: 25px 20px" />
	36	+ <div class="history-box">
	37	+ <p class="title2 mb20">최근 학습 히스토리</p>
	38	+ <ul class="flex-column" style="gap: 10px">
	39	+ <!-- 더미 데이터 -->
	40	+ <li>· 에듀캐롯 3학년 1학기</li>
	41	+ <li>· 에듀캐롯 3학년 2학기</li>
	42	+ <!-- 여기까지 -->
	43	+ <li
	44	+ v-for="historyItem in studentInfo.history"
	45	+ :key="historyItem.unitId"
	46	+ >
	47	+ · [{{ historyItem.bookName }}] {{ historyItem.unitName }}
	48	+ </li>
	49	+ </ul>
	50	+ </div>
	51	+ <!-- <div class="ask mb30">
41	52	<p class="title1 mb15">선생님께 질문 있어요~</p>
42	53
43	54	<div class="memo mb15">
...	...	@@ -52,231 +63,255 @@
52	63	<button @click="updateQuestion">질문하기</button>
53	64	</div>
54	65	</div> -->
55		- <div class="mt25">
56		- <div class="button-box flex">
57		- <button @click="handleClickEvent" style="width: 100%">
58		- <img
59		- class="look-btn"
60		- src="../../resources/img/new_img/plan/wrong_note_btn.png"
61		- alt=""
62		- style="width: 100%"
63		- />
64		- </button>
65		- </div>
66		- <div class="button-box flex">
67		- <button @click="goPopupOpen" style="width: 100%">
68		- <img src="../../resources/img/new_img/plan/question_btn.png" alt="" style="width: 100%" />
69		- </button>
70		- </div>
71		- </div>
	66	+ <div class="mt25">
	67	+ <div class="button-box flex">
	68	+ <button @click="handleClickEvent" style="width: 100%">
	69	+ <img
	70	+ class="look-btn"
	71	+ src="../../resources/img/new_img/plan/wrong_note_btn.png"
	72	+ alt=""
	73	+ style="width: 100%"
	74	+ />
	75	+ </button>
	76	+ </div>
	77	+ <div class="button-box flex">
	78	+ <button @click="goPopupOpen" style="width: 100%">
	79	+ <img
	80	+ src="../../resources/img/new_img/plan/question_btn.png"
	81	+ alt=""
	82	+ style="width: 100%"
	83	+ />
	84	+ </button>
	85	+ </div>
72	86	</div>
73		- <!-- 질문하기 팝업 -->
74		- <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
75		- <div class="question-popup">
76		- <div class="flex justify-between align-center">
77		- <p class="question-text mt20">선생님께 질문하기</p>
78		- <img class="look-btn" @click="goPopupClose" src="../../resources/img/btn25_93t_normal.png" alt="" />
79		- </div>
80		- <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">선생님! 질문있어요!!</p>
81		- <div class="memo mt25">
82		- <p class="title1 memo-text">내용</p>
83		- <textarea name="" id="" placeholder="궁금한 것을 적어보세요." v-model="question"></textarea>
84		- </div>
85		- <div class="questionBtn-box flex justify-end" style="gap: 15px">
86		- <button style="border-color: #eaedf4; color: #8c8c8c" @click="goPopupClose">취소하기</button>
87		- <button @click="updateQuestion" style="border-color: #6327b9; color: white; background-color: #6327b9">
88		- 질문하기
89		- </button>
90		- </div>
91		- </div>
	87	+ </div>
	88	+ <!-- 질문하기 팝업 -->
	89	+ <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
	90	+ <div class="question-popup">
	91	+ <div class="flex justify-between align-center">
	92	+ <p class="question-text mt20">선생님께 질문하기</p>
	93	+ <img
	94	+ class="look-btn"
	95	+ @click="goPopupClose"
	96	+ src="../../resources/img/btn25_93t_normal.png"
	97	+ alt=""
	98	+ />
	99	+ </div>
	100	+ <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">
	101	+ 선생님! 질문있어요!!
	102	+ </p>
	103	+ <div class="memo mt25">
	104	+ <p class="title1 memo-text">내용</p>
	105	+ <textarea
	106	+ name=""
	107	+ id=""
	108	+ placeholder="궁금한 것을 적어보세요."
	109	+ v-model="question"
	110	+ ></textarea>
	111	+ </div>
	112	+ <div class="questionBtn-box flex justify-end" style="gap: 15px">
	113	+ <button
	114	+ style="border-color: #eaedf4; color: #8c8c8c"
	115	+ @click="goPopupClose"
	116	+ >
	117	+ 취소하기
	118	+ </button>
	119	+ <button
	120	+ @click="updateQuestion"
	121	+ style="border-color: #6327b9; color: white; background-color: #6327b9"
	122	+ >
	123	+ 질문하기
	124	+ </button>
	125	+ </div>
92	126	</div>
	127	+ </div>
93	128	</template>
94	129
95	130	<script>
96		-import ProgressBar from '../component/ProgressBar.vue';
97		-import axios from 'axios';
	131	+import ProgressBar from "../component/ProgressBar.vue";
	132	+import axios from "axios";
98	133
99	134	export default {
100		- data() {
101		- return {
102		- progress: 20,
103		- studentInfo: {
104		- studentName: '',
105		- institutionName: '',
106		- grade: '',
107		- className: '',
108		- studentQuestion: '',
109		- history: [],
110		- },
111		- userId: '1', // userId 임시 설정
	135	+ data() {
	136	+ return {
	137	+ progress: 20,
	138	+ studentInfo: {
	139	+ studentName: "",
	140	+ institutionName: "",
	141	+ grade: "",
	142	+ className: "",
	143	+ studentQuestion: "",
	144	+ history: [],
	145	+ },
	146	+ userId: "1", // userId 임시 설정
112	147
113		- popupOpen: false,
114		- question: null,
115		- };
	148	+ popupOpen: false,
	149	+ question: null,
	150	+ };
	151	+ },
	152	+ methods: {
	153	+ pageSetting() {
	154	+ this.userId = this.$store.getters.getUserInfo.userId;
	155	+ console.log("유저 아이디: ", this.userId);
	156	+ this.fetchStudentInfo();
116	157	},
117		- methods: {
118		- pageSetting() {
119		- this.userId = this.$store.getters.getUserInfo.userId;
120		- console.log('유저 아이디: ', this.userId);
121		- this.fetchStudentInfo();
122		- },
123	158
124		- // 학생 정보를 가져오는 메서드
125		- fetchStudentInfo() {
126		- axios
127		- .post('/studentInfo/getInfo.json', { userId: this.userId })
128		- .then((response) => {
129		- console.log('학생 정보 조회 : ', response.data);
130		- this.studentInfo = response.data;
131		- })
132		- .catch((error) => {
133		- console.error('학생 정보 가져오기 실패:', error);
134		- });
135		- },
136		-
137		- // 질문 업데이트 메서드
138		- updateQuestion() {
139		- if (this.question === null) {
140		- alert('질문을 입력해주세요');
141		- return;
142		- }
143		- axios
144		- .post('/studentInfo/updateQuestion.json', {
145		- userId: this.userId,
146		- // userId: 'USID_000000000000002',
147		- studentQuestion: this.question,
148		- })
149		- .then((response) => {
150		- console.log('질문이 성공적으로 업데이트되었습니다.');
151		- alert('질문이 성공적으로 업데이트되었습니다.');
152		- })
153		- .catch((error) => {
154		- console.error('질문 업데이트 실패:', error);
155		- alert('질문 업데이트에 실패했습니다.');
156		- });
157		- this.question = null;
158		- },
159		-
160		- handleClick() {
161		- this.toggleText();
162		- this.goToPage('PreviewNote');
163		- },
164		-
165		- handleClick() {
166		- this.toggleTextAndNavigate();
167		- },
168		-
169		- toggleTextAndNavigate() {
170		- if (this.buttonText === '오답노트') {
171		- this.buttonText = '학습 코스';
172		- this.goToPage('PreviewNote');
173		- // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
174		- } else {
175		- this.buttonText = '오답노트';
176		- this.goToPage('Dashboard');
177		- // 버튼 텍스트가 '오답노트'일 때 이동할 경로
178		- }
179		- },
180		-
181		- handleClickEvent() {
182		- this.goToPage('PreviewNote');
183		- },
184		-
185		- goToPage(page) {
186		- this.$router.push({ name: page });
187		- },
188		-
189		- goPopupOpen() {
190		- this.popupOpen = true;
191		- },
192		- goPopupClose() {
193		- this.popupOpen = false;
194		- this.question = null;
195		- },
	159	+ // 학생 정보를 가져오는 메서드
	160	+ fetchStudentInfo() {
	161	+ axios
	162	+ .post("/studentInfo/getInfo.json", { userId: this.userId })
	163	+ .then((response) => {
	164	+ console.log("학생 정보 조회 : ", response.data);
	165	+ this.studentInfo = response.data;
	166	+ })
	167	+ .catch((error) => {
	168	+ console.error("학생 정보 가져오기 실패:", error);
	169	+ });
196	170	},
197		- watch: {},
198		- computed: {},
199		- components: {
200		- ProgressBar,
	171	+
	172	+ // 질문 업데이트 메서드
	173	+ updateQuestion() {
	174	+ if (this.question === null) {
	175	+ alert("질문을 입력해주세요");
	176	+ return;
	177	+ }
	178	+ axios
	179	+ .post("/studentInfo/updateQuestion.json", {
	180	+ userId: this.userId,
	181	+ // userId: 'USID_000000000000002',
	182	+ studentQuestion: this.question,
	183	+ })
	184	+ .then((response) => {
	185	+ console.log("질문이 성공적으로 업데이트되었습니다.");
	186	+ alert("질문이 성공적으로 업데이트되었습니다.");
	187	+ })
	188	+ .catch((error) => {
	189	+ console.error("질문 업데이트 실패:", error);
	190	+ alert("질문 업데이트에 실패했습니다.");
	191	+ });
	192	+ this.question = null;
201	193	},
202		- mounted() {
203		- console.log('Side mounted');
204		- this.pageSetting();
	194	+
	195	+ handleClick() {
	196	+ this.toggleText();
	197	+ this.goToPage("PreviewNote");
205	198	},
	199	+
	200	+ handleClick() {
	201	+ this.toggleTextAndNavigate();
	202	+ },
	203	+
	204	+ toggleTextAndNavigate() {
	205	+ if (this.buttonText === "오답노트") {
	206	+ this.buttonText = "학습 코스";
	207	+ this.goToPage("PreviewNote");
	208	+ // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
	209	+ } else {
	210	+ this.buttonText = "오답노트";
	211	+ this.goToPage("Dashboard");
	212	+ // 버튼 텍스트가 '오답노트'일 때 이동할 경로
	213	+ }
	214	+ },
	215	+
	216	+ handleClickEvent() {
	217	+ this.goToPage("PreviewNote");
	218	+ },
	219	+
	220	+ goToPage(page) {
	221	+ this.$router.push({ name: page });
	222	+ },
	223	+
	224	+ goPopupOpen() {
	225	+ this.popupOpen = true;
	226	+ },
	227	+ goPopupClose() {
	228	+ this.popupOpen = false;
	229	+ this.question = null;
	230	+ },
	231	+ },
	232	+ watch: {},
	233	+ computed: {},
	234	+ components: {
	235	+ ProgressBar,
	236	+ },
	237	+ mounted() {
	238	+ console.log("Side mounted");
	239	+ this.pageSetting();
	240	+ },
206	241	};
207	242	</script>
208	243	<style scoped>
209	244	.login-btn img {
210		- width: 430px;
211		- height: 85px;
	245	+ width: 430px;
	246	+ height: 85px;
212	247	}
213	248
214	249	.problem-box {
215		- display: flex;
216		- align-items: center;
217		- justify-content: center;
218		- border: 2px solid #6327b9;
219		- background-color: #f0eaf8;
220		- border-radius: 8px;
221		- padding: 10px 10px;
	250	+ display: flex;
	251	+ align-items: center;
	252	+ justify-content: center;
	253	+ border: 2px solid #6327b9;
	254	+ background-color: #f0eaf8;
	255	+ border-radius: 8px;
	256	+ padding: 10px 10px;
222	257	}
223	258
224	259	.history-box {
225		- background-color: white;
226		- padding: 30px 20px;
227		- border: 1px solid #c6c6c6;
228		- border-radius: 10px;
229		- margin: 25px 20px 0px;
	260	+ background-color: white;
	261	+ padding: 30px 20px;
	262	+ border: 1px solid #c6c6c6;
	263	+ border-radius: 10px;
	264	+ margin: 25px 20px 0px;
230	265	}
231	266
232	267	.history-box li {
233		- background-color: #eaedf4;
234		- border-radius: 10px;
235		- font-size: 18px;
236		- list-style-type: none;
237		- padding: 10px;
	268	+ background-color: #eaedf4;
	269	+ border-radius: 10px;
	270	+ font-size: 18px;
	271	+ list-style-type: none;
	272	+ padding: 10px;
238	273	}
239	274
240	275	.button-box {
241		- margin: 10px 20px;
	276	+ margin: 10px 20px;
242	277	}
243	278
244	279	.question-popup {
245		- background-color: white;
246		- border-radius: 10px;
247		- padding: 30px 40px;
248		- position: absolute;
249		- top: 15%;
250		- left: 25%;
251		- width: 100rem;
	280	+ background-color: white;
	281	+ border-radius: 10px;
	282	+ padding: 30px 40px;
	283	+ position: absolute;
	284	+ top: 15%;
	285	+ left: 25%;
	286	+ width: 100rem;
252	287	}
253	288
254	289	.question-text {
255		- font-family: 'ONEMobilePOPOTF';
256		- font-size: 32px;
257		- color: #6327b9;
	290	+ font-family: "ONEMobilePOPOTF";
	291	+ font-size: 32px;
	292	+ color: #6327b9;
258	293	}
259	294
260	295	.memo-text {
261		- font-family: 'ONEMobilePOPOTF';
262		- color: #6327b9;
	296	+ font-family: "ONEMobilePOPOTF";
	297	+ color: #6327b9;
263	298	}
264	299
265	300	.memo textarea {
266		- border: 2px solid #cac0e3;
267		- border-radius: 10px;
268		- width: 100%;
269		- padding: 20px;
270		- height: 30rem;
271		- margin: 20px 0px 40px;
	301	+ border: 2px solid #cac0e3;
	302	+ border-radius: 10px;
	303	+ width: 100%;
	304	+ padding: 20px;
	305	+ height: 30rem;
	306	+ margin: 20px 0px 40px;
272	307	}
273	308
274	309	.questionBtn-box button {
275		- font-size: 18px;
276		- padding: 8px 30px;
277		- border: 2px solid;
278		- border-radius: 8px;
279		- font-weight: bold;
280		- font-family: 'ONEMobileOTF-Regular';
	310	+ font-size: 18px;
	311	+ padding: 8px 30px;
	312	+ border: 2px solid;
	313	+ border-radius: 8px;
	314	+ font-weight: bold;
	315	+ font-family: "ONEMobileOTF-Regular";
281	316	}
282	317	</style>

...	...	@@ -3,18 +3,19 @@
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5	5	<div class="logo mb25">
6		- <img src="../../../../resources/img/logo2.png" alt="" />
	6	+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
7	7	</div>
8	8	</router-link>
9	9	</div>
10		- <div class="title-box mb25 flex align-center mt40" style="
11		- justify-content: space-between;
12		-">
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
13	14	<div>
14	15	<span class="title mr40">1. Hello WORLD</span>
15	16	<span class="subtitle">my name is dd</span>
16	17	</div>
17		- <button class="completeBtn" @click="complete"> 학습 종료 </button>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
18	19	</div>
19	20	<div class="flex justify-between align-center">
20	21	<div class="pre-btn">
...	...	@@ -43,8 +44,11 @@
43	44	},
44	45	methods: {
45	46	complete() {
46		- const { unit_id, book_id } = this.$route.query;
47		- this.$router.push({ name: 'Dashboard', query: { value: 1, unit_id, book_id } });
	47	+ const { unit_id, book_id } = this.$route.query;
	48	+ this.$router.push({
	49	+ name: "Dashboard",
	50	+ query: { value: 1, unit_id, book_id },
	51	+ });
48	52	},
49	53	goToPage(page) {
50	54	this.$router.push({ name: page });
...	...	@@ -115,6 +119,6 @@
115	119	padding: 10px 30px;
116	120	border-radius: 10px;
117	121	font-size: 28px;
118		- font-family: 'ONEMobilePOPOTF';
	122	+ font-family: "ONEMobilePOPOTF";
119	123	}
120	124	</style>

...	...	@@ -1,88 +1,373 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6		- </router-link>
7		- </div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter1')"><img src="../../../../resources/img/left.png" alt=""></div>
14		- <div class="content title-box">
15		- <p class="title mt25 title-bg">step1. Hello WORLD</p>
16		-
17		- <div class="imgGroup">
18		- <img src="../../../../resources/img/img35_s.png" data-num="1">
19		-
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
	7	+ </div>
	8	+ </router-link>
20	9	</div>
21		- <div class="textareaGroup">
22		- <textarea>Bike lanes are important because they ket, bike riders and all other people safe. Before bike lanes, people rode on the sidewalk or in the same lanes as the cars on the street. Riding a bike on the sidewalk can cause you to crash into someone who is walking by. And riding a bike in the same lanes as cars can be unsafe, too, Bikes move more slowly than cars, so people driving behind bikes will try to go around them. These cars could hit the bike riders or other cars. </textarea>
23		- <div id="popup" class="popup">
24		- <div class="imgGroup mb10">
25		- <img src="../../../../resources/img/img36_s.png" data-num="1">
	10	+ <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
	11	+ <div>
	12	+ <span class="title mr40">1. Hello WORLD</span>
	13	+ <span class="subtitle">my name is dd</span>
26	14	</div>
27		- <h3>sidewalk</h3>
28		- <div class="flex align-center justify-center mt10">
29		- <p class="yellow-box">명</p>
30		- <span class="title1">보도</span>
31		- </div>
32		- </div>
	15	+ <div class="flex">
	16	+ <TextToImage />
	17	+ <button class="completeBtn" @click="complete">학습 종료</button>
	18	+ </div>
33	19	</div>
34		- </div>
35		- <div class="next-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/right.png" alt=""></div>
	20	+ <div class="flex justify-between align-center">
	21	+ <div class="pre-btn" @click="goToPage('Chapter1_2')">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
	23	+ </div>
	24	+ <div class="content title-box">
	25	+ <p class="title mt25 title-bg">step1. Hello WORLD</p>
	26	+ <div class="flex align-center ml50 mb15" style="margin-top: -30px; gap: 10px">
	27	+ <h4>설명에 맞춰 영어 문장의 의미를 이해해봅시다. 대화문을 클릭해보세요!</h4>
	28	+ <div class="listen-btn">
	29	+ <img src="../../../../resources/img/btn10_s.png" alt="" @click="playAudio" />
	30	+ <audio
	31	+ id="audio-player"
	32	+ src="client/resources/audio/passage/passage_explanation.mp3"
	33	+ preload="auto"
	34	+ ></audio>
	35	+ </div>
	36	+ </div>
	37	+ <div class="flex justify-center" style="gap: 50px">
	38	+ <div class="readGroup">
	39	+ <div>
	40	+ <div class="textbox">
	41	+ <article
	42	+ v-for="(line, index) in combinedLines"
	43	+ :key="index"
	44	+ :class="['flex', 'align-center', 'mb10', { 'justify-end': index % 2 !== 0 }]"
	45	+ >
	46	+ <div v-if="index % 2 === 0" class="icon mr40">
	47	+ <img src="../../../../resources/img/img37_s.png" alt="" />
	48	+ <p class="name">{{ speakerA_name }}</p>
	49	+ </div>
	50	+ <p
	51	+ v-if="index % 2 === 0"
	52	+ class="read"
	53	+ @click="handleSelectLine(line)"
	54	+ :style="getStyle(line)"
	55	+ >
	56	+ {{ line }}
	57	+ </p>
	58	+
	59	+ <p
	60	+ v-if="index % 2 !== 0"
	61	+ class="read mr40"
	62	+ @click="handleSelectLine(line)"
	63	+ :style="getStyle(line)"
	64	+ >
	65	+ {{ line }}
	66	+ </p>
	67	+ <div v-if="index % 2 !== 0" class="icon">
	68	+ <img src="../../../../resources/img/img37_s.png" alt="" />
	69	+ <p class="name">{{ speakerB_name }}</p>
	70	+ </div>
	71	+ </article>
	72	+ </div>
	73	+ </div>
	74	+ </div>
	75	+ <div class="button-box">
	76	+ <button class="word" @click="wordQuestion">단어 설명</button>
	77	+ <button class="passage" @click="passageQuestion">문장 설명</button>
	78	+ </div>
	79	+ </div>
	80	+ </div>
	81	+ <div class="next-btn" @click="goToNextPage">
	82	+ <img src="../../../../resources/img/right.png" alt="" />
	83	+ </div>
	84	+ </div>
	85	+ <div class="popup-wrap" v-if="popupOpen">
	86	+ <div class="popup-container flex-column">
	87	+ <div class="popup-header flex align-center">
	88	+ <p>선생님의 한 마디</p>
	89	+ <img
	90	+ class="look-btn"
	91	+ @click="handlePopupClose"
	92	+ src="../../../../resources/img/btn25_93t_normal.png"
	93	+ alt=""
	94	+ />
	95	+ </div>
	96	+ <div>
	97	+ <p class="popup-content mt30" v-html="formattedExplanation"></p>
	98	+ </div>
	99	+ </div>
	100	+ </div>
36	101	</div>
37		- </div>
38	102	</template>
39	103
40	104	<script>
	105	+import TextToImage from '../../../component/TextToImage.vue';
	106	+import axios from 'axios';
41	107	export default {
42		- data() {
43		- return {
44		- }
45		- },
46		- methods: {
47		- goToPage(page) {
48		- this.$router.push({ name: page });
49		- }
50		- },
51		- watch: {
	108	+ data() {
	109	+ return {
	110	+ text_data: null, // 받아온 지문 정보
	111	+ speakerA_name: null,
	112	+ speakerB_name: null,
	113	+ speakerA: [],
	114	+ speakerB: [],
52	115
53		- },
54		- computed: {
	116	+ seq: this.$store.getters.seqNum,
	117	+ selectedLine: null, // 선택한 지문
	118	+ explanation_response: null, // 설명 응답
55	119
56		- },
57		- components: {
58		- },
59		- mounted() {
60		- const textArea = this.$refs.textArea;
61		- const popup = this.$refs.popup;
	120	+ popupOpen: false,
	121	+ };
	122	+ },
	123	+ methods: {
	124	+ complete() {
	125	+ const { unit_id, book_id } = this.$route.query;
	126	+ this.$router.push({
	127	+ name: 'Dashboard',
	128	+ query: { value: this.seq, unit_id, book_id },
	129	+ });
	130	+ },
	131	+ goToPage(page) {
	132	+ this.$router.push({ name: page });
	133	+ },
	134	+ goToNextPage() {
	135	+ alert('지문 학습 완료!');
	136	+ this.complete();
	137	+ },
	138	+ // 대화 지문 API
	139	+ async fetchText() {
	140	+ axios({
	141	+ url: '/text/selectOneText.json',
	142	+ method: 'post',
	143	+ headers: {
	144	+ 'Content-Type': 'application/json; charset=UTF-8',
	145	+ },
	146	+ data: {
	147	+ textId: this.textId,
	148	+ },
	149	+ })
	150	+ .then((response) => {
	151	+ this.text_data = response.data[0].text_cnt;
	152	+ this.splitConversation();
	153	+ })
	154	+ .catch((err) => {
	155	+ console.log('지문 에러 : ', err);
	156	+ });
	157	+ },
	158	+ // 대화 지문 split
	159	+ splitConversation() {
	160	+ const lines = this.text_data.split('/');
	161	+ const speakers = {};
62	162
63		- textArea.addEventListener('mousemove', (event) => {
64		- const text = textArea.value;
65		- const words = text.split(' ');
66		- const selectionStart = textArea.selectionStart;
67		- const selectionEnd = textArea.selectionEnd;
	163	+ lines.forEach((line) => {
	164	+ const [speaker, message] = line.trim().split(':');
68	165
69		- if (selectionStart !== selectionEnd) {
70		- const selectedText = text.substring(selectionStart, selectionEnd);
71		- const rect = textArea.getBoundingClientRect();
72		- popup.style.left = `${event.clientX}px`;
73		- popup.style.top = `${event.clientY + window.scrollY}px`;
74		- popup.innerHTML = `You selected: ${selectedText}`;
75		- popup.style.display = 'block';
76		- } else {
77		- popup.style.display = 'none';
78		- }
79		- });
	166	+ if (!speakers.speakerA_name && !speakers.speakerB_name) {
	167	+ // 첫 번째 발화자를 speakerA_name으로 설정
	168	+ speakers.speakerA_name = speaker.trim();
	169	+ this.speakerA.push(message.trim());
	170	+ } else if (
	171	+ speakers.speakerA_name &&
	172	+ !speakers.speakerB_name &&
	173	+ speakers.speakerA_name !== speaker.trim()
	174	+ ) {
	175	+ // 두 번째 발화자를 speakerB_name으로 설정
	176	+ speakers.speakerB_name = speaker.trim();
	177	+ this.speakerB.push(message.trim());
	178	+ } else if (speaker.trim() === speakers.speakerA_name) {
	179	+ // speakerA_name에 내용 추가
	180	+ this.speakerA.push(message.trim());
	181	+ } else if (speaker.trim() === speakers.speakerB_name) {
	182	+ // speakerB_name에 내용 추가
	183	+ this.speakerB.push(message.trim());
	184	+ }
	185	+ });
80	186
81		- document.addEventListener('click', (event) => {
82		- if (!textArea.contains(event.target) && !popup.contains(event.target)) {
83		- popup.style.display = 'none';
84		- }
85		- });
86		- }
	187	+ this.speakerA_name = speakers.speakerA_name;
	188	+ this.speakerB_name = speakers.speakerB_name;
	189	+ },
	190	+
	191	+ playAudio() {
	192	+ const audio = document.getElementById('audio-player');
	193	+ audio.play();
	194	+ console.log('playing');
	195	+ },
	196	+
	197	+ // 검색할 지문 선택
	198	+ handleSelectLine(line) {
	199	+ this.selectedLine = line;
	200	+ // console.log('선택된 지문 : ', this.selectedLine);
	201	+ },
	202	+
	203	+ getStyle(line) {
	204	+ return {
	205	+ backgroundColor: this.selectedLine === line ? '#ffc980' : '',
	206	+ fontSize: this.selectedLine === line ? '40px' : '',
	207	+ boxShadow: this.selectedLine === line ? 'rgba(0, 0, 0, 0.24) 0px 3px 8px' : '',
	208	+ fontWeight: this.selectedLine === line ? 'bold' : '',
	209	+ cursor: 'pointer',
	210	+ };
	211	+ },
	212	+
	213	+ // 단어 설명
	214	+ wordQuestion() {
	215	+ // console.log('line : ', this.selectedLine);
	216	+ if (this.selectedLine === null) {
	217	+ alert('궁금한 대화문을 선택해주세요');
	218	+ return;
	219	+ }
	220	+ axios({
	221	+ url: 'http://165.229.169.32:35716/word_question',
	222	+ method: 'post',
	223	+ headers: {
	224	+ 'Content-Type': 'application/json; charset=UTF-8',
	225	+ },
	226	+ data: {
	227	+ word: this.selectedLine,
	228	+ },
	229	+ })
	230	+ .then((response) => {
	231	+ // console.log('word 지문 응답 : ', response.data.explanation);
	232	+ this.explanation_response = response.data.explanation;
	233	+ this.handlePopupOpen();
	234	+ })
	235	+ .catch((err) => {
	236	+ console.log('word 지문 에러 : ', err);
	237	+ });
	238	+ },
	239	+
	240	+ // 지문 설명
	241	+ passageQuestion() {
	242	+ // console.log('line : ', this.selectedLine);
	243	+ if (this.selectedLine === null) {
	244	+ alert('궁금한 대화문을 선택해주세요');
	245	+ return;
	246	+ }
	247	+ axios({
	248	+ url: 'http://165.229.169.32:35716/passage_question',
	249	+ method: 'post',
	250	+ headers: {
	251	+ 'Content-Type': 'application/json; charset=UTF-8',
	252	+ },
	253	+ data: {
	254	+ passage: this.selectedLine,
	255	+ },
	256	+ })
	257	+ .then((response) => {
	258	+ // console.log('passage 지문 응답 : ', response.data.explanation);
	259	+ this.explanation_response = response.data.explanation;
	260	+ this.handlePopupOpen();
	261	+ })
	262	+ .catch((err) => {
	263	+ console.log('passage 지문 에러 : ', err);
	264	+ });
	265	+ },
	266	+
	267	+ /* 팝업 */
	268	+ handlePopupOpen() {
	269	+ this.popupOpen = true;
	270	+ },
	271	+
	272	+ handlePopupClose() {
	273	+ this.popupOpen = false;
	274	+ this.explanation_response = null;
	275	+ this.selectedLine = null;
	276	+ },
	277	+ },
	278	+ watch: {},
	279	+ computed: {
	280	+ textId() {
	281	+ //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
	282	+ return this.$store.getters.getTextId;
	283	+ },
	284	+ combinedLines() {
	285	+ const maxLength = Math.max(this.speakerA.length, this.speakerB.length);
	286	+ const lines = [];
	287	+
	288	+ for (let i = 0; i < maxLength; i++) {
	289	+ if (i < this.speakerA.length) {
	290	+ lines.push(this.speakerA[i]);
	291	+ }
	292	+ if (i < this.speakerB.length) {
	293	+ lines.push(this.speakerB[i]);
	294	+ }
	295	+ }
	296	+ return lines;
	297	+ },
	298	+ // 지문 포맷팅
	299	+ formattedExplanation() {
	300	+ return this.explanation_response.replace(/\n/g, '<br>').replace(/\\(.?)\\*/g, '<strong>$1</strong>');
	301	+ },
	302	+ },
	303	+ components: {
	304	+ TextToImage: TextToImage,
	305	+ },
	306	+ mounted() {
	307	+ this.fetchText();
	308	+ },
	309	+};
	310	+</script>
	311	+
	312	+<style scoped>
	313	+.completeBtn {
	314	+ margin-right: 100px;
	315	+ background-color: #ffba08;
	316	+ padding: 10px 30px;
	317	+ border-radius: 10px;
	318	+ font-size: 28px;
	319	+ font-family: 'ONEMobilePOPOTF';
87	320	}
88		-</script> (파일 끝에 줄바꿈 문자 없음)
	321	+
	322	+.button-box {
	323	+ display: flex;
	324	+ flex-direction: column;
	325	+ align-items: center;
	326	+ justify-content: space-evenly;
	327	+}
	328	+
	329	+.button-box button {
	330	+ font-family: 'ONEMobilePOPOTF';
	331	+ font-size: 25px;
	332	+ color: #fff;
	333	+ padding: 20px 70px;
	334	+ border-radius: 15px;
	335	+ box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
	336	+}
	337	+
	338	+.word {
	339	+ background-color: #28b863;
	340	+}
	341	+
	342	+.passage {
	343	+ background-color: #9528b7;
	344	+}
	345	+
	346	+.popup-container {
	347	+ background-color: #fff;
	348	+ position: absolute;
	349	+ width: 120rem;
	350	+ height: 60rem;
	351	+ padding: 30px;
	352	+ border-radius: 10px;
	353	+ top: 25rem;
	354	+ left: 40rem;
	355	+ overflow: scroll;
	356	+ overflow-x: hidden;
	357	+}
	358	+
	359	+.popup-header {
	360	+ justify-content: space-between;
	361	+}
	362	+
	363	+.popup-header p {
	364	+ font-size: 30px;
	365	+ font-family: 'ONEMobilePOPOTF';
	366	+ color: #6327b9;
	367	+}
	368	+
	369	+.popup-content {
	370	+ font-size: 24px;
	371	+ padding: 20px;
	372	+}
	373	+</style>

...	...	@@ -3,7 +3,7 @@
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5	5	<div class="logo mb25">
6		- <img src="../../../../resources/img/logo2.png" alt="" />
	6	+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
7	7	</div>
8	8	</router-link>
9	9	</div>
...	...	@@ -15,7 +15,10 @@
15	15	<span class="title mr40">1. Hello WORLD</span>
16	16	<span class="subtitle">my name is dd</span>
17	17	</div>
18		- <button class="completeBtn" @click="complete">학습 종료</button>
	18	+ <div class="flex">
	19	+ <TextToImage />
	20	+ <button class="completeBtn" @click="complete">학습 종료</button>
	21	+ </div>
19	22	</div>
20	23	<div class="flex justify-between align-center">
21	24	<div
...	...	@@ -27,9 +30,29 @@
27	30	</div>
28	31	<div class="content title-box">
29	32	<p class="title mt25 title-bg">step1. Hello WORLD</p>
	33	+ <div
	34	+ class="flex align-center ml50 mb15"
	35	+ style="margin-top: -30px; gap: 10px"
	36	+ >
	37	+ <h4>
	38	+ 각 인물들의 대화를 듣고 읽어봅시다. 아래의 플레이버튼을 눌러 영어
	39	+ 발음을 들어보세요!
	40	+ </h4>
	41	+ <div class="listen-btn">
	42	+ <img
	43	+ src="../../../../resources/img/btn10_s.png"
	44	+ alt=""
	45	+ @click="playAudio"
	46	+ />
	47	+ <audio
	48	+ id="audio-player"
	49	+ src="client/resources/audio/passage/passage_intoduce.mp3"
	50	+ preload="auto"
	51	+ ></audio>
	52	+ </div>
	53	+ </div>
30	54	<div class="flex justify-center">
31	55	<div class="readGroup">
32		- <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
33	56	<div>
34	57	<div class="textbox">
35	58	<article
...	...	@@ -37,7 +60,7 @@
37	60	:key="index"
38	61	:class="[
39	62	'flex',
40		- 'align-start',
	63	+ 'align-center',
41	64	'mb10',
42	65	{ 'justify-end': index % 2 !== 0 },
43	66	]"
...	...	@@ -47,7 +70,23 @@
47	70	<p class="name">{{ speakerA_name }}</p>
48	71	</div>
49	72	<p v-if="index % 2 === 0" class="read">{{ line }}</p>
	73	+ <div class="listen-btn ml10" v-if="index % 2 === 0">
	74	+ <img
	75	+ src="../../../../resources/img/new_img/icon/play_icon.png"
	76	+ alt=""
	77	+ @click="generateTts('male', line)"
	78	+ />
	79	+ <audio id="tts-audio-player" preload="auto"></audio>
	80	+ </div>
50	81
	82	+ <div class="listen-btn mr10" v-if="index % 2 !== 0">
	83	+ <img
	84	+ src="../../../../resources/img/new_img/icon/play_icon.png"
	85	+ alt=""
	86	+ @click="generateTts('femail', line)"
	87	+ />
	88	+ <audio id="tts-audio-player" preload="auto"></audio>
	89	+ </div>
51	90	<p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
52	91	<div v-if="index % 2 !== 0" class="icon">
53	92	<img src="../../../../resources/img/img37_s.png" alt="" />
...	...	@@ -63,7 +102,6 @@
63	102	<img src="../../../../resources/img/right.png" alt="" />
64	103	</div>
65	104	</div>
66		- <TextToImage />
67	105	</div>
68	106	</template>
69	107
...	...	@@ -94,8 +132,9 @@
94	132	this.$router.push({ name: page });
95	133	},
96	134	goToNextPage() {
97		- alert("지문 학습 완료!");
	135	+ // alert('지문 학습 완료!');
98	136	this.complete();
	137	+ this.goToPage("Chapter1_1");
99	138	},
100	139	// 대화 지문 API
101	140	async fetchText() {
...	...	@@ -149,6 +188,40 @@
149	188	this.speakerA_name = speakers.speakerA_name;
150	189	this.speakerB_name = speakers.speakerB_name;
151	190	},
	191	+
	192	+ playAudio() {
	193	+ const audio = document.getElementById("audio-player");
	194	+ audio.play();
	195	+ console.log("playing");
	196	+ },
	197	+
	198	+ // 대화 지문 재생
	199	+ generateTts(gender, line) {
	200	+ console.log("line : ", line);
	201	+ axios({
	202	+ url: "http://165.229.169.32:35716/generate_tts",
	203	+ method: "post",
	204	+ headers: {
	205	+ "Content-Type": "application/json; charset=UTF-8",
	206	+ },
	207	+ responseType: "blob",
	208	+ data: {
	209	+ gender: gender,
	210	+ input_text: line,
	211	+ },
	212	+ })
	213	+ .then((response) => {
	214	+ console.log("tts 응답 : ", response);
	215	+ const audioBlob = new Blob([response.data], { type: "audio/mpeg" });
	216	+ const audioUrl = URL.createObjectURL(audioBlob); // 오디오 url 생성
	217	+ const audioPlayer = document.getElementById("tts-audio-player");
	218	+ audioPlayer.src = audioUrl;
	219	+ audioPlayer.play();
	220	+ })
	221	+ .catch((err) => {
	222	+ console.log("tts 에러 : ", err);
	223	+ });
	224	+ },
152	225	},
153	226	watch: {},
154	227	computed: {

...	...	@@ -1,125 +1,118 @@
1	1	<template>
2		- <div id="Chapter1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25">
6		- <img src="../../../../resources/img/logo2.png" alt="" />
	2	+ <div id="Chapter1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
	7	+ </div>
	8	+ </router-link>
7	9	</div>
8		- </router-link>
9		- </div>
10		- <div
11		- class="title-box mb25 flex align-center mt40"
12		- style="justify-content: space-between"
13		- >
14		- <div>
15		- <span class="title mr40">1. Hello WORLD</span>
16		- <span class="subtitle">my name is dd</span>
17		- </div>
18		- <button class="completeBtn" @click="complete">학습 종료</button>
19		- </div>
20		- <div class="flex justify-between align-center">
21		- <div
22		- class="pre-btn"
23		- style="visibility: hidden"
24		- @click="goToPage('Chapter1_2')"
25		- >
26		- <img src="../../../../resources/img/left.png" alt="" />
27		- </div>
28		- <div class="content title-box">
29		- <div class="listenGroup">
30		- <p class="title mt25 title-bg">step1. Hello WORLD</p>
31		- <!--
	10	+ <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
	11	+ <div>
	12	+ <span class="title mr40">1. Hello WORLD</span>
	13	+ <span class="subtitle">my name is dd</span>
	14	+ </div>
	15	+ <button class="completeBtn" @click="complete">학습 종료</button>
	16	+ </div>
	17	+ <div class="flex justify-between align-center">
	18	+ <div class="pre-btn" style="visibility: hidden" @click="goToPage('Chapter1_2')">
	19	+ <img src="../../../../resources/img/left.png" alt="" />
	20	+ </div>
	21	+ <div class="content title-box">
	22	+ <div class="listenGroup">
	23	+ <p class="title mt25 title-bg">step1. Hello WORLD</p>
	24	+ <!--
32	25	<img class="bg" src="../../../../resources/img/img39_s.png" data-num="1" />
33	26	-->
34		- <img class="bg" :src="img_src" />
	27	+ <img class="bg" :src="img_src" />
	28	+ </div>
	29	+ </div>
	30	+ <div class="next-btn" @click="goToNextPage">
	31	+ <img src="../../../../resources/img/right.png" alt="" />
	32	+ </div>
35	33	</div>
36		- </div>
37		- <div class="next-btn" @click="goToNextPage">
38		- <img src="../../../../resources/img/right.png" alt="" />
39		- </div>
	34	+ <TextToImage />
40	35	</div>
41		- <TextToImage />
42		- </div>
43	36	</template>
44	37
45	38	<script>
46		-import TextToImage from "../../../component/TextToImage.vue";
47		-import axios from "axios";
	39	+import TextToImage from '../../../component/TextToImage.vue';
	40	+import axios from 'axios';
48	41	export default {
49		- data() {
50		- return {
51		- text_data: null,
52		- img_src: null,
53		- seq: this.$store.getters.seqNum,
54		- };
55		- },
56		- methods: {
57		- complete() {
58		- const { unit_id, book_id } = this.$route.query;
59		- this.$router.push({
60		- name: "Dashboard",
61		- query: { value: this.seq, unit_id, book_id },
62		- });
	42	+ data() {
	43	+ return {
	44	+ text_data: null,
	45	+ img_src: null,
	46	+ seq: this.$store.getters.seqNum,
	47	+ };
63	48	},
64		- goToPage(page) {
65		- this.$router.push({ name: page });
66		- },
67		- goToNextPage() {
68		- alert("지문 학습 완료!");
69		- this.complete();
70		- },
71		- // 지문 API
72		- async fetchText() {
73		- axios({
74		- url: "/text/selectOneText.json",
75		- method: "post",
76		- headers: {
77		- "Content-Type": "application/json; charset=UTF-8",
	49	+ methods: {
	50	+ complete() {
	51	+ const { unit_id, book_id } = this.$route.query;
	52	+ this.$router.push({
	53	+ name: 'Dashboard',
	54	+ query: { value: this.seq, unit_id, book_id },
	55	+ });
78	56	},
79		- data: {
80		- textId: this.textId,
	57	+ goToPage(page) {
	58	+ this.$router.push({ name: page });
81	59	},
82		- })
83		- .then((response) => {
84		- this.text_data = response.data[0];
85		- console.log("지문 데이터 : ", this.text_data);
86		- this.img_src = this.fetchImage(this.text_data.file_rpath);
87		- })
88		- .catch((err) => {
89		- console.log("지문 에러 : ", err);
90		- });
	60	+ goToNextPage() {
	61	+ alert('지문 학습 완료!');
	62	+ this.complete();
	63	+ },
	64	+ // 지문 API
	65	+ async fetchText() {
	66	+ axios({
	67	+ url: '/text/selectOneText.json',
	68	+ method: 'post',
	69	+ headers: {
	70	+ 'Content-Type': 'application/json; charset=UTF-8',
	71	+ },
	72	+ data: {
	73	+ textId: this.textId,
	74	+ },
	75	+ })
	76	+ .then((response) => {
	77	+ this.text_data = response.data[0];
	78	+ console.log('지문 데이터 : ', this.text_data);
	79	+ this.img_src = this.fetchImage(this.text_data.file_rpath);
	80	+ })
	81	+ .catch((err) => {
	82	+ console.log('지문 에러 : ', err);
	83	+ });
	84	+ },
	85	+ // 이미지 불러오기
	86	+ fetchImage(fileRpath) {
	87	+ return 'http://165.229.169.113:9080/' + fileRpath;
	88	+ },
91	89	},
92		- // 이미지 불러오기
93		- fetchImage(fileRpath) {
94		- return "http://165.229.169.113:9080/" + fileRpath;
	90	+ watch: {},
	91	+ computed: {
	92	+ textId() {
	93	+ //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
	94	+ return this.$store.getters.getTextId;
	95	+ },
95	96	},
96		- },
97		- watch: {},
98		- computed: {
99		- textId() {
100		- //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
101		- return this.$store.getters.getTextId;
	97	+ components: {
	98	+ TextToImage: TextToImage,
102	99	},
103		- },
104		- components: {
105		- TextToImage: TextToImage,
106		- },
107		- mounted() {
108		- this.fetchText();
109		- },
	100	+ mounted() {
	101	+ this.fetchText();
	102	+ },
110	103	};
111	104	</script>
112	105	<style scoped>
113	106	.listenGroup .textbox {
114		- width: 900px;
	107	+ width: 900px;
115	108	}
116	109
117	110	.completeBtn {
118		- margin-right: 100px;
119		- background-color: #ffba08;
120		- padding: 10px 30px;
121		- border-radius: 10px;
122		- font-size: 28px;
123		- font-family: "ONEMobilePOPOTF";
	111	+ margin-right: 100px;
	112	+ background-color: #ffba08;
	113	+ padding: 10px 30px;
	114	+ border-radius: 10px;
	115	+ font-size: 28px;
	116	+ font-family: 'ONEMobilePOPOTF';
124	117	}
125	118	</style>

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

...	...	@@ -2,7 +2,9 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</div>
8	10	<div class="title-box mb25 flex align-center mt40">
...	...	@@ -10,57 +12,85 @@
10	12	<span class="subtitle">my name is dd</span>
11	13	</div>
12	14	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/left.png" alt=""></div>
	15	+ <div class="pre-btn" @click="goToPage('Chapter2_8')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
	17	+ </div>
14	18	<div class="content title-box">
15	19	<p class="title mt25 title-bg">step2</p>
16		- <div class="flex align-center mb30">
	20	+ <div class="flex align-center mb30">
17	21	<p class="subtitle2 mr20">단어 짝 맞추기 게임</p>
18	22	<!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
19	23	</button> -->
20	24	</div>
21	25
22	26	<div class="text-ct">
23		- <div class="pickGroup flex align-center justify-center mt50" style="gap: 100px;">
	27	+ <div
	28	+ class="pickGroup flex align-center justify-center mt50"
	29	+ style="gap: 100px"
	30	+ >
24	31	<div>
25	32	<div class="mb20">
26		- <button><img src="../../../../resources/img/img100_45s.png" alt="">
	33	+ <button>
	34	+ <img src="../../../../resources/img/img100_45s.png" alt="" />
27	35	<p>1</p>
28	36	</button>
29		- <button><img src="../../../../resources/img/img101_45s.png" alt="">
	37	+ <button>
	38	+ <img src="../../../../resources/img/img101_45s.png" alt="" />
30	39	<p>1</p>
31	40	</button>
32		- <button><img src="../../../../resources/img/img102_45s.png" alt="">
	41	+ <button>
	42	+ <img src="../../../../resources/img/img102_45s.png" alt="" />
33	43	<p>1</p>
34	44	</button>
35		- <button><img src="../../../../resources/img/img103_45s.png" alt="">
	45	+ <button>
	46	+ <img src="../../../../resources/img/img103_45s.png" alt="" />
36	47	<p>1</p>
37	48	</button>
38	49	</div>
39	50	<div>
40		- <button><img src="../../../../resources/img/img100_45s.png" alt="">
	51	+ <button>
	52	+ <img src="../../../../resources/img/img100_45s.png" alt="" />
41	53	<p>1</p>
42	54	</button>
43		- <button><img src="../../../../resources/img/img101_45s.png" alt="">
	55	+ <button>
	56	+ <img src="../../../../resources/img/img101_45s.png" alt="" />
44	57	<p>1</p>
45	58	</button>
46		- <button><img src="../../../../resources/img/img102_45s.png" alt="">
	59	+ <button>
	60	+ <img src="../../../../resources/img/img102_45s.png" alt="" />
47	61	<p>1</p>
48	62	</button>
49		- <button><img src="../../../../resources/img/img103_45s.png" alt="">
	63	+ <button>
	64	+ <img src="../../../../resources/img/img103_45s.png" alt="" />
50	65	<p>1</p>
51	66	</button>
52	67	</div>
53	68	</div>
54		- <div class="dropGroup" style="gap: 20px;">
55		- <img src="../../../../resources/img/img160_43s.png" alt="">
	69	+ <div class="dropGroup" style="gap: 20px">
	70	+ <img src="../../../../resources/img/img160_43s.png" alt="" />
56	71	<div class="dropimg">
57		- <img style="top: 21px;" src="../../../../resources/img/img161_44s.png" alt="">
58		- <img style="top: 119px;" src="../../../../resources/img/img162_43s.png" alt="">
59		- <img style="top: 215px;" src="../../../../resources/img/img163_43s.png" alt="">
60		- <img style="bottom: 36px;" src="../../../../resources/img/img164_43s.png" alt="">
	72	+ <img
	73	+ style="top: 21px"
	74	+ src="../../../../resources/img/img161_44s.png"
	75	+ alt=""
	76	+ />
	77	+ <img
	78	+ style="top: 119px"
	79	+ src="../../../../resources/img/img162_43s.png"
	80	+ alt=""
	81	+ />
	82	+ <img
	83	+ style="top: 215px"
	84	+ src="../../../../resources/img/img163_43s.png"
	85	+ alt=""
	86	+ />
	87	+ <img
	88	+ style="bottom: 36px"
	89	+ src="../../../../resources/img/img164_43s.png"
	90	+ alt=""
	91	+ />
61	92	</div>
62	93	</div>
63		-
64	94	</div>
65	95
66	96	<div class="time-bg">
...	...	@@ -73,7 +103,9 @@
73	103	</div>
74	104	</div>
75	105	</div>
76		- <div class="next-btn" @click="goToPage('Chapter2_7')"><img src="../../../../resources/img/right.png" alt=""></div>
	106	+ <div class="next-btn" @click="goToPage('Chapter2_7')">
	107	+ <img src="../../../../resources/img/right.png" alt="" />
	108	+ </div>
77	109	</div>
78	110	</div>
79	111	</template>
...	...	@@ -83,7 +115,7 @@
83	115	data() {
84	116	return {
85	117	timer: "00",
86		- }
	118	+ };
87	119	},
88	120	methods: {
89	121	goToPage(page) {
...	...	@@ -101,24 +133,22 @@
101	133	clearInterval(this.intervalId);
102	134	}
103	135	}, 1000);
104		- }
	136	+ },
105	137	},
106		- watch: {
107		-
108		- },
109		- computed: {
110		-
111		- },
112		- components: {
113		- },
114		- mounted() {
115		-
116		- }
117		-}
	138	+ watch: {},
	139	+ computed: {},
	140	+ components: {},
	141	+ mounted() {},
	142	+};
118	143	</script>
119	144	<style scoped>
120		-.dropGroup{position: relative;}
121		-.dropimg img{position: absolute; left: 27px;}
	145	+.dropGroup {
	146	+ position: relative;
	147	+}
	148	+.dropimg img {
	149	+ position: absolute;
	150	+ left: 27px;
	151	+}
122	152	.pickGroup button {
123	153	position: relative;
124	154	margin: 10px 40px;
...	...	@@ -131,4 +161,4 @@
131	161	left: 50%;
132	162	transform: translate(-50%, -50%);
133	163	}
134		-</style> (파일 끝에 줄바꿈 문자 없음)
	164	+</style>

...	...	@@ -3,11 +3,14 @@
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5	5	<div class="logo mb25">
6		- <img src="../../../../resources/img/logo2.png" alt="" />
	6	+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
7	7	</div>
8	8	</router-link>
9	9	</div>
10		- <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
11	14	<div>
12	15	<span class="title mr40">1. Hello WORLD</span>
13	16	<span class="subtitle">my name is dd</span>
...	...	@@ -15,7 +18,11 @@
15	18	<button class="completeBtn" @click="complete">학습 종료</button>
16	19	</div>
17	20	<div class="flex justify-between align-center">
18		- <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
	21	+ <div
	22	+ class="pre-btn"
	23	+ :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
	24	+ @click="previousProblem()"
	25	+ >
19	26	<img src="../../../../resources/img/left.png" alt="" />
20	27	</div>
21	28	<div class="content title-box">
...	...	@@ -36,15 +43,27 @@
36	43	<div class="dropGroup flex align-center justify-center mt30">
37	44	<div style="position: relative">
38	45	<img src="../../../../resources/img/img28_s.png" alt="" />
39		- <button class="dropzone" :data-answer="answerArr[0]" style="left: 30px; top: 167px">
	46	+ <button
	47	+ class="dropzone"
	48	+ :data-answer="answerArr[0]"
	49	+ style="left: 30px; top: 167px"
	50	+ >
40	51	<img src="../../../../resources/img/img29_s_01.png" alt="" />
41	52	<p style="font-size: 35px">?</p>
42	53	</button>
43		- <button class="dropzone" :data-answer="answerArr[1]" style="right: 409px; top: 133px">
	54	+ <button
	55	+ class="dropzone"
	56	+ :data-answer="answerArr[1]"
	57	+ style="right: 409px; top: 133px"
	58	+ >
44	59	<img src="../../../../resources/img/img30_s_01.png" alt="" />
45	60	<p style="font-size: 35px">?</p>
46	61	</button>
47		- <button class="dropzone" :data-answer="answerArr[2]" style="right: 46px; top: 128px">
	62	+ <button
	63	+ class="dropzone"
	64	+ :data-answer="answerArr[2]"
	65	+ style="right: 46px; top: 128px"
	66	+ >
48	67	<img src="../../../../resources/img/img31_s_01.png" alt="" />
49	68	<p style="font-size: 35px">?</p>
50	69	</button>
...	...	@@ -52,19 +71,31 @@
52	71	</div>
53	72	<div class="dragGroup flex justify-center" style="gap: 20px">
54	73	<article style="right: 0; top: 36%">
55		- <button class="draggable" :data-text="answerArr[0]" draggable="true">
	74	+ <button
	75	+ class="draggable"
	76	+ :data-text="answerArr[0]"
	77	+ draggable="true"
	78	+ >
56	79	<img src="../../../../resources/img/img29_s.png" alt="" />
57	80	<p style="font-size: 35px">{{ answerArr[0] }}</p>
58	81	</button>
59	82	</article>
60	83	<article style="left: 0; top: 36%">
61		- <button class="draggable" :data-text="answerArr[1]" draggable="true">
	84	+ <button
	85	+ class="draggable"
	86	+ :data-text="answerArr[1]"
	87	+ draggable="true"
	88	+ >
62	89	<img src="../../../../resources/img/img30_s.png" alt="" />
63	90	<p style="font-size: 35px">{{ answerArr[1] }}</p>
64	91	</button>
65	92	</article>
66	93	<article style="left: 50%; top: 10%">
67		- <button class="draggable" :data-text="answerArr[2]" draggable="true">
	94	+ <button
	95	+ class="draggable"
	96	+ :data-text="answerArr[2]"
	97	+ draggable="true"
	98	+ >
68	99	<img src="../../../../resources/img/img31_s.png" alt="" />
69	100	<p style="font-size: 35px">{{ answerArr[2] }}</p>
70	101	</button>
...	...	@@ -111,7 +142,7 @@
111	142	window.location.reload();
112	143	},
113	144	handleDragStart(event) {
114		- this.draggedElement = event.target.closest(".draggable");// 드래그한 요소 저장
	145	+ this.draggedElement = event.target.closest(".draggable"); // 드래그한 요소 저장
115	146	event.dataTransfer.setData("text/plain", event.target.dataset.text);
116	147	event.target.style.cursor = "grabbing"; // 드래그 중 커서 변경
117	148	},

...	...	@@ -2,7 +2,9 @@
2	2	<div id="Chapter2_2" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</div>
8	10	<div class="title-box mb25 flex align-center mt40">
...	...	@@ -10,14 +12,27 @@
10	12	<span class="subtitle">my name is dd</span>
11	13	</div>
12	14	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
14		- :class="{ active: currentIndex === 0 }" /></div>
	15	+ <div class="pre-btn" @click="previousProblem()">
	16	+ <img
	17	+ src="../../../../resources/img/left.png"
	18	+ alt=""
	19	+ :class="{ active: currentIndex === 0 }"
	20	+ />
	21	+ </div>
15	22	<div class="content title-box">
16	23	<p class="title mt25 title-bg">step3.</p>
17	24	<div class="flex align-center mb30">
18		- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
19		- <button @click="playAudio"><img src="../../../../resources/img/btn10_s.png" alt="" /> <audio id="audio-player"
20		- src="client/resources/audio/bank.wav" preload="auto"></audio></button>
	25	+ <p class="subtitle2 mr20">
	26	+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
	27	+ </p>
	28	+ <button @click="playAudio">
	29	+ <img src="../../../../resources/img/btn10_s.png" alt="" />
	30	+ <audio
	31	+ id="audio-player"
	32	+ src="client/resources/audio/bank.wav"
	33	+ preload="auto"
	34	+ ></audio>
	35	+ </button>
21	36	</div>
22	37	<div class="time-hint">
23	38	<button class="hint-btn">HINT</button>
...	...	@@ -35,18 +50,27 @@
35	50	<img src="../../../../resources/img/img114_57s.png" alt="" />
36	51	</div> -->
37	52
38		- <div class="pickGroup flex align-center justify-center"
39		- style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
40		- <div class="pickGroup flex align-center justify-center"
41		- style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
42		- <article v-for="(item, index) in problemDetail" :key="index"
43		- style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
	53	+ <div
	54	+ class="pickGroup flex align-center justify-center"
	55	+ style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%"
	56	+ >
	57	+ <div
	58	+ class="pickGroup flex align-center justify-center"
	59	+ style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%"
	60	+ >
	61	+ <article
	62	+ v-for="(item, index) in problemDetail"
	63	+ :key="index"
	64	+ style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px"
	65	+ >
44	66	<div class="flex align-center">
45	67	<button @click="handleClick(item.prblmDtlExpln)">
46	68	<img src="../../../../resources/img/img136_71s.png" alt="" />
47		- <p :class="{
48		- active: selectedButton === item.prblmDtlExpln,
49		- }">
	69	+ <p
	70	+ :class="{
	71	+ active: selectedButton === item.prblmDtlExpln,
	72	+ }"
	73	+ >
50	74	{{ index + 1 }}
51	75	</p>
52	76	</button>
...	...	@@ -55,30 +79,50 @@
55	79	</article>
56	80	</div>
57	81	</div>
58		- <button class="submit-button" @click="handleSubmit()"
59		- v-if="currentIndex === learningIdsLength - 1">제출하기</button>
60		- <button class="submit-button" @click="nextProblem()"
61		- v-else>다음 문제로</button>
62		-
	82	+ <button
	83	+ class="submit-button"
	84	+ @click="handleSubmit()"
	85	+ v-if="currentIndex === learningIdsLength - 1"
	86	+ >
	87	+ 제출하기
	88	+ </button>
	89	+ <button class="submit-button" @click="nextProblem()" v-else>
	90	+ 다음 문제로
	91	+ </button>
63	92	</div>
64		- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
	93	+ <div class="next-btn" @click="nextProblem()">
	94	+ <img src="../../../../resources/img/right.png" alt="" />
65	95	</div>
66	96	</div>
67	97	</div>
68	98	</template>
69	99
70	100	<script>
71		-
72	101	import axios from "axios";
73	102	export default {
74	103	data() {
75	104	return {
76	105	items: [
77		- { imgSrc2: "client/resources/img/img53_6_35s.png", imgSrc1: "client/resources/img/img53_1_35s.png" },
78		- { imgSrc2: "client/resources/img/img53_7_35s.png", imgSrc1: "client/resources/img/img53_2_35s.png" },
79		- { imgSrc2: "client/resources/img/img53_8_35s.png", imgSrc1: "client/resources/img/img53_3_35s.png" },
80		- { imgSrc2: "client/resources/img/img53_9_35s.png", imgSrc1: "client/resources/img/img53_4_35s.png" },
81		- { imgSrc2: "client/resources/img/img53_10_35s.png", imgSrc1: "client/resources/img/img53_5_35s.png" },
	106	+ {
	107	+ imgSrc2: "client/resources/img/img53_6_35s.png",
	108	+ imgSrc1: "client/resources/img/img53_1_35s.png",
	109	+ },
	110	+ {
	111	+ imgSrc2: "client/resources/img/img53_7_35s.png",
	112	+ imgSrc1: "client/resources/img/img53_2_35s.png",
	113	+ },
	114	+ {
	115	+ imgSrc2: "client/resources/img/img53_8_35s.png",
	116	+ imgSrc1: "client/resources/img/img53_3_35s.png",
	117	+ },
	118	+ {
	119	+ imgSrc2: "client/resources/img/img53_9_35s.png",
	120	+ imgSrc1: "client/resources/img/img53_4_35s.png",
	121	+ },
	122	+ {
	123	+ imgSrc2: "client/resources/img/img53_10_35s.png",
	124	+ imgSrc1: "client/resources/img/img53_5_35s.png",
	125	+ },
82	126	],
83	127	selectedIndex: null,
84	128	timer: "00",
...	...	@@ -120,29 +164,26 @@
120	164	this.selectedButton = number;
121	165	},
122	166	handleSubmit() {
123		-
124	167	const userConfirmed = window.confirm("제출 하시겠습니까?");
125	168	if (userConfirmed) {
126		-
127	169	const problemData = {
128	170	prblmInfo: this.currentLearningId,
129	171	prblmNumber: this.currentProblemIndex,
130		- prblmAns: this.selectedButton
	172	+ prblmAns: this.selectedButton,
131	173	};
132	174
133	175	const answerData = {
134	176	prblmId: this.currentLearningId.prblm_id,
135	177	prblmAns: this.selectedButton,
136	178	stdId: this.$store.getters.getStdId,
137		- prblmLogAnsCnt: 1
	179	+ prblmLogAnsCnt: 1,
138	180	};
139	181
140		- this.$store.dispatch('saveProblemData', problemData);
141		- this.$store.dispatch('saveProblemAttempt', answerData);
	182	+ this.$store.dispatch("saveProblemData", problemData);
	183	+ this.$store.dispatch("saveProblemAttempt", answerData);
142	184
143	185	console.log(this.$store.getters.getAllProblems);
144	186	console.log(this.$store.getters.getAllAnswers);
145		-
146	187
147	188	axios({
148	189	url: "problemLog/insertProblemLog.json",
...	...	@@ -154,7 +195,7 @@
154	195	})
155	196	.then(function (res) {
156	197	console.log("problem - response : ", res.data);
157		- this.goToPage('Chapter4')
	198	+ this.goToPage("Chapter4");
158	199	})
159	200	.catch(function (error) {
160	201	console.log("problem - error : ", error);
...	...	@@ -194,27 +235,30 @@
194	235	const problemData = {
195	236	prblmInfo: this.currentLearningId,
196	237	prblmNumber: this.currentProblemIndex,
197		- prblmAns: this.selectedButton
198		- }
	238	+ prblmAns: this.selectedButton,
	239	+ };
199	240	const answerData = {
200	241	prblmId: this.currentLearningId.prblm_id,
201	242	prblmAns: this.selectedButton,
202	243	stdId: this.$store.getters.getStdId,
203		- prblmLogAnsCnt: 1
204		- }
205		- this.$store.dispatch('saveProblemData', problemData);
206		- this.$store.dispatch('saveProblemAttempt', answerData);
207		- console.log(this.$store.getters.getAllProblems)
208		- console.log(this.$store.getters.getAllAnswers)
209		- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
210		- this.$store.dispatch('goToNextProblem');
	244	+ prblmLogAnsCnt: 1,
	245	+ };
	246	+ this.$store.dispatch("saveProblemData", problemData);
	247	+ this.$store.dispatch("saveProblemAttempt", answerData);
	248	+ console.log(this.$store.getters.getAllProblems);
	249	+ console.log(this.$store.getters.getAllAnswers);
	250	+ if (
	251	+ this.currentProblemIndex <
	252	+ this.$store.state.currentLearningIds.length - 1
	253	+ ) {
	254	+ this.$store.dispatch("goToNextProblem");
211	255	this.handleProblemDetail(this.currentLearningId);
212	256	this.goToPage(this.problemType);
213	257	}
214	258	},
215	259	previousProblem() {
216	260	if (this.currentProblemIndex > 0) {
217		- this.$store.dispatch('goToPreviousProblem');
	261	+ this.$store.dispatch("goToPreviousProblem");
218	262	this.handleProblemDetail(this.currentLearningId);
219	263	this.goToPage(this.problemType);
220	264	}
...	...	@@ -285,12 +329,12 @@
285	329	},
286	330	isPreviousButtonDisabled() {
287	331	return this.currentProblemIndex === 0;
288		- }
	332	+ },
289	333	},
290	334	created() {
291		- console.log('Current Learning ID:', this.currentLearningId);
292		- console.log('Current Label:', this.currentLabel);
293		- console.log('Current Problem Index:', this.currentProblemIndex);
	335	+ console.log("Current Learning ID:", this.currentLearningId);
	336	+ console.log("Current Label:", this.currentLabel);
	337	+ console.log("Current Problem Index:", this.currentProblemIndex);
294	338	this.currentIndex = this.currentProblemIndex;
295	339	this.learningIdsLength = this.$store.state.currentLearningIds.length;
296	340
...	...	@@ -298,7 +342,7 @@
298	342	},
299	343	components: {},
300	344	mounted() {
301		- this.getProblem()
	345	+ this.getProblem();
302	346	},
303	347	};
304	348	</script>

...	...	@@ -1,248 +1,264 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25">
6		- <img src="../../../../resources/img/logo2.png" alt="" />
7		- </div>
8		- </router-link>
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
9	7	</div>
10		- <div class="title-box mb25 flex align-center mt40">
11		- <span class="title mr40">1. Hello WORLD</span>
12		- <span class="subtitle">my name is dd</span>
13		- </div>
14		- <div class="flex justify-between align-center">
15		- <div class="pre-btn" @click="goToPage('Chapter3_15')">
16		- <img src="../../../../resources/img/left.png" alt="" />
17		- </div>
18		- <div class="content title-box">
19		- <p class="title mt25 title-bg">Quiz Result</p>
20		- <!-- <div class="flex align-center mb30">
	8	+ </router-link>
	9	+ </div>
	10	+ <div class="title-box mb25 flex align-center mt40">
	11	+ <span class="title mr40">1. Hello WORLD</span>
	12	+ <span class="subtitle">my name is dd</span>
	13	+ </div>
	14	+ <div class="flex justify-between align-center">
	15	+ <div class="pre-btn" @click="goToPage('Chapter3_15')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
	17	+ </div>
	18	+ <div class="content title-box">
	19	+ <p class="title mt25 title-bg">Quiz Result</p>
	20	+ <!-- <div class="flex align-center mb30">
21	21	<p class="subtitle2 mr20"></p>
22	22	<button><img src="../../../../resources/img/btn10_s.png" alt="">
23	23	</button>
24	24	</div> -->
25	25
26		- <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto">
27		- <div class="wrap-bg">
28		- <div class="title-box flex mb10 justify-between">
29		- <p class="title mb20">최종 점수</p>
30		- <button type="button" class="popup-close-btn" @click="closeBtn">
31		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
32		- </button>
33		- </div>
34		- <div style="width: 100%" class="flex mt30">
35		- <p class="title5"><em class="yellow">93</em></p>
36		- <p class="title4 ml10 mr10">/</p>
37		- <p class="title4">100</p>
38		- </div>
39		- </div>
40		- <div class="bg-gray" style="width: 980px">
41		- <div class="title-box flex mb10 justify-between">
42		- <p class="title mb20">오답 문제 리스트</p>
43		- <button type="button" class="popup-close-btn" @click="closeBtn">
44		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
45		- </button>
46		- </div>
47		- <article class="mb20 flex-column result-box" style="gap: 20px">
48		- <div class="flex justify-between wrap" v-for="(item, index) in dataList" :key="index">
49		- <div class="flex align-center">
50		- <div>
51		- <p class="title1 mr20">
52		- {{ index + 1 }}
53		- </p>
54		- </div>
55		- <div class="text-lf">
56		- <p class="title1">
57		- {{ item.prblmInfo.prblm_expln }}
58		- </p>
59		- </div>
60		- </div>
61		- <div>
62		- <div class="flex align-center" style="gap: 10px">
63		- <button type="button" title="정답 확인" class="yellow-btn" @click="
64		- [
65		- handleProblemDetail(item.prblmInfo),
66		- goToProblemPage(
67		- problemType
68		- ),
69		- ]
70		- ">
71		- 정답 확인
72		- </button>
73		- </div>
74		- </div>
75		- </div>
76		- </article>
77		- </div>
	26	+ <div
	27	+ class="text-ct flex justify-center"
	28	+ style="gap: 150px; margin: 0 auto"
	29	+ >
	30	+ <div class="wrap-bg">
	31	+ <div class="title-box flex mb10 justify-between">
	32	+ <p class="title mb20">최종 점수</p>
	33	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	34	+ <svg-icon
	35	+ type="mdi"
	36	+ :path="mdiWindowClose"
	37	+ class="close-btn"
	38	+ ></svg-icon>
	39	+ </button>
	40	+ </div>
	41	+ <div style="width: 100%" class="flex mt30">
	42	+ <p class="title5"><em class="yellow">93</em></p>
	43	+ <p class="title4 ml10 mr10">/</p>
	44	+ <p class="title4">100</p>
	45	+ </div>
	46	+ </div>
	47	+ <div class="bg-gray" style="width: 980px">
	48	+ <div class="title-box flex mb10 justify-between">
	49	+ <p class="title mb20">오답 문제 리스트</p>
	50	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	51	+ <svg-icon
	52	+ type="mdi"
	53	+ :path="mdiWindowClose"
	54	+ class="close-btn"
	55	+ ></svg-icon>
	56	+ </button>
	57	+ </div>
	58	+ <article class="mb20 flex-column result-box" style="gap: 20px">
	59	+ <div
	60	+ class="flex justify-between wrap"
	61	+ v-for="(item, index) in dataList"
	62	+ :key="index"
	63	+ >
	64	+ <div class="flex align-center">
	65	+ <div>
	66	+ <p class="title1 mr20">
	67	+ {{ index + 1 }}
	68	+ </p>
	69	+ </div>
	70	+ <div class="text-lf">
	71	+ <p class="title1">
	72	+ {{ item.prblmInfo.prblm_expln }}
	73	+ </p>
	74	+ </div>
78	75	</div>
79		- </div>
80		- <div class="next-btn" @click="goToPage('Chapter3_16')">
81		- <img src="../../../../resources/img/right.png" alt="" />
82		- </div>
	76	+ <div>
	77	+ <div class="flex align-center" style="gap: 10px">
	78	+ <button
	79	+ type="button"
	80	+ title="정답 확인"
	81	+ class="yellow-btn"
	82	+ @click="
	83	+ [
	84	+ handleProblemDetail(item.prblmInfo),
	85	+ goToProblemPage(problemType),
	86	+ ]
	87	+ "
	88	+ >
	89	+ 정답 확인
	90	+ </button>
	91	+ </div>
	92	+ </div>
	93	+ </div>
	94	+ </article>
	95	+ </div>
83	96	</div>
	97	+ </div>
	98	+ <div class="next-btn" @click="goToPage('Chapter3_16')">
	99	+ <img src="../../../../resources/img/right.png" alt="" />
	100	+ </div>
84	101	</div>
	102	+ </div>
85	103	</template>
86	104
87	105	<script>
88	106	import axios from "axios";
89	107
90	108	export default {
91		- data() {
92		- return {
93		- timer: "00",
94		- showButton1: false,
95		- showButton2: false,
96		- showButton3: false,
97		- showButton4: false,
	109	+ data() {
	110	+ return {
	111	+ timer: "00",
	112	+ showButton1: false,
	113	+ showButton2: false,
	114	+ showButton3: false,
	115	+ showButton4: false,
98	116
99		- // 단원 평가 아이디, 추후 세션으로 받게 변경
100		- evalId: "",
	117	+ // 단원 평가 아이디, 추후 세션으로 받게 변경
	118	+ evalId: "",
101	119
102		- dataList: [],
	120	+ dataList: [],
103	121
104		- prblmId: "",
	122	+ prblmId: "",
105	123
106		- problemType: null,
107		- };
	124	+ problemType: null,
	125	+ };
	126	+ },
	127	+ methods: {
	128	+ goToPage(page) {
	129	+ this.$router.push({ name: page });
108	130	},
109		- methods: {
110		- goToPage(page) {
111		- this.$router.push({ name: page });
112		- },
113		- goToProblemPage(page) {
114		- this.$router.push({ name: page });
115		- },
116		- handleDrag(dragNumber) {
117		- // Drag 버튼 숨기기
118		- // 여기서는 상태 관리를 통해 버튼을 제어합니다.
119		- if (dragNumber === 1) {
120		- this.showButton1 = false;
121		- } else if (dragNumber === 2) {
122		- this.showButton2 = false;
123		- } else if (dragNumber === 3) {
124		- this.showButton3 = false;
125		- }
126		- },
127		- showButton(dropNumber) {
128		- // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
129		- // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
130		- if (dropNumber === 1) {
131		- this.showButton1 = true;
132		- } else if (dropNumber === 2) {
133		- this.showButton2 = true;
134		- } else if (dropNumber === 3) {
135		- this.showButton3 = true;
136		- } else if (dropNumber === 4) {
137		- this.showButton4 = true;
138		- }
139		- },
140		- startTimer() {
141		- if (this.intervalId) {
142		- clearInterval(this.intervalId);
143		- }
144		- this.timer = 5;
145		- this.intervalId = setInterval(() => {
146		- if (this.timer > 0) {
147		- this.timer--;
148		- } else {
149		- clearInterval(this.intervalId);
150		- }
151		- }, 1000);
152		- },
153		- problemList() {
154		- },
	131	+ goToProblemPage(page) {
	132	+ this.$router.push({ name: page });
	133	+ },
	134	+ handleDrag(dragNumber) {
	135	+ // Drag 버튼 숨기기
	136	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	137	+ if (dragNumber === 1) {
	138	+ this.showButton1 = false;
	139	+ } else if (dragNumber === 2) {
	140	+ this.showButton2 = false;
	141	+ } else if (dragNumber === 3) {
	142	+ this.showButton3 = false;
	143	+ }
	144	+ },
	145	+ showButton(dropNumber) {
	146	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	147	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	148	+ if (dropNumber === 1) {
	149	+ this.showButton1 = true;
	150	+ } else if (dropNumber === 2) {
	151	+ this.showButton2 = true;
	152	+ } else if (dropNumber === 3) {
	153	+ this.showButton3 = true;
	154	+ } else if (dropNumber === 4) {
	155	+ this.showButton4 = true;
	156	+ }
	157	+ },
	158	+ startTimer() {
	159	+ if (this.intervalId) {
	160	+ clearInterval(this.intervalId);
	161	+ }
	162	+ this.timer = 5;
	163	+ this.intervalId = setInterval(() => {
	164	+ if (this.timer > 0) {
	165	+ this.timer--;
	166	+ } else {
	167	+ clearInterval(this.intervalId);
	168	+ }
	169	+ }, 1000);
	170	+ },
	171	+ problemList() {},
155	172
156		- handleProblemDetail(item) {
157		- if (item.prblm_type_id === "prblm_type_001") {
158		- this.problemType = "Chapter3";
159		- } else if (item.prblm_type_id === "prblm_type_002") {
160		- this.problemType = "Chapter3_1";
161		- } else if (item.prblm_type_id === "prblm_type_003") {
162		- this.problemType = "Chapter3_2";
163		- } else if (item.prblm_type_id === "prblm_type_004") {
164		- this.problemType = "Chapter3_3";
165		- } else if (item.prblm_type_id === "prblm_type_005") {
166		- this.problemType = "Chapter3_3_1";
167		- } else if (item.prblm_type_id === "prblm_type_006") {
168		- this.problemType = "Chapter3_4";
169		- } else if (item.prblm_type_id === "prblm_type_007") {
170		- this.problemType = "Chapter3_5";
171		- } else if (item.prblm_type_id === "prblm_type_008") {
172		- this.problemType = "Chapter3_6";
173		- } else if (item.prblm_type_id === "prblm_type_009") {
174		- this.problemType = "Chapter3_7";
175		- } else if (item.prblm_type_id === "prblm_type_010") {
176		- this.problemType = "Chapter3_8";
177		- } else if (item.prblm_type_id === "prblm_type_011") {
178		- this.problemType = "Chapter3_9";
179		- } else if (item.prblm_type_id === "prblm_type_012") {
180		- this.problemType = "Chapter3_10";
181		- } else if (item.prblm_type_id === "prblm_type_013") {
182		- this.problemType = "Chapter3_11";
183		- } else if (item.prblm_type_id === "prblm_type_014") {
184		- this.problemType = "Chapter3_12";
185		- } else if (item.prblm_type_id === "prblm_type_015") {
186		- this.problemType = "Chapter3_13";
187		- } else if (item.prblm_type_id === "prblm_type_016") {
188		- this.problemType = "Chapter3_14";
189		- } else if (item.prblm_type_id === "prblm_type_017") {
190		- this.problemType = "Chapter3_15";
191		- } else if (item.prblm_type_id === "prblm_type_018") {
192		- this.problemType = "Chapter2_8";
193		- } else if (item.prblm_type_id === "prblm_type_019") {
194		- this.problemType = "Chapter2_7";
195		- } else if (item.prblm_type_id === "prblm_type_020") {
196		- this.problemType = "Chapter2_5";
197		- } else if (item.prblm_type_id === "prblm_type_021") {
198		- this.problemType = "Chapter2_6";
199		- } else if (item.prblm_type_id === "prblm_type_022") {
200		- this.problemType = "Chapter2_10";
201		- } else if (item.prblm_type_id === "prblm_type_023") {
202		- this.problemType = "Chapter2_11";
203		- } else if (item.prblm_type_id === "prblm_type_024") {
204		- this.problemType = "Chapter2_13";
205		- }
206		- },
	173	+ handleProblemDetail(item) {
	174	+ if (item.prblm_type_id === "prblm_type_001") {
	175	+ this.problemType = "Chapter3";
	176	+ } else if (item.prblm_type_id === "prblm_type_002") {
	177	+ this.problemType = "Chapter3_1";
	178	+ } else if (item.prblm_type_id === "prblm_type_003") {
	179	+ this.problemType = "Chapter3_2";
	180	+ } else if (item.prblm_type_id === "prblm_type_004") {
	181	+ this.problemType = "Chapter3_3";
	182	+ } else if (item.prblm_type_id === "prblm_type_005") {
	183	+ this.problemType = "Chapter3_3_1";
	184	+ } else if (item.prblm_type_id === "prblm_type_006") {
	185	+ this.problemType = "Chapter3_4";
	186	+ } else if (item.prblm_type_id === "prblm_type_007") {
	187	+ this.problemType = "Chapter3_5";
	188	+ } else if (item.prblm_type_id === "prblm_type_008") {
	189	+ this.problemType = "Chapter3_6";
	190	+ } else if (item.prblm_type_id === "prblm_type_009") {
	191	+ this.problemType = "Chapter3_7";
	192	+ } else if (item.prblm_type_id === "prblm_type_010") {
	193	+ this.problemType = "Chapter3_8";
	194	+ } else if (item.prblm_type_id === "prblm_type_011") {
	195	+ this.problemType = "Chapter3_9";
	196	+ } else if (item.prblm_type_id === "prblm_type_012") {
	197	+ this.problemType = "Chapter3_10";
	198	+ } else if (item.prblm_type_id === "prblm_type_013") {
	199	+ this.problemType = "Chapter3_11";
	200	+ } else if (item.prblm_type_id === "prblm_type_014") {
	201	+ this.problemType = "Chapter3_12";
	202	+ } else if (item.prblm_type_id === "prblm_type_015") {
	203	+ this.problemType = "Chapter3_13";
	204	+ } else if (item.prblm_type_id === "prblm_type_016") {
	205	+ this.problemType = "Chapter3_14";
	206	+ } else if (item.prblm_type_id === "prblm_type_017") {
	207	+ this.problemType = "Chapter3_15";
	208	+ } else if (item.prblm_type_id === "prblm_type_018") {
	209	+ this.problemType = "Chapter2_8";
	210	+ } else if (item.prblm_type_id === "prblm_type_019") {
	211	+ this.problemType = "Chapter2_7";
	212	+ } else if (item.prblm_type_id === "prblm_type_020") {
	213	+ this.problemType = "Chapter2_5";
	214	+ } else if (item.prblm_type_id === "prblm_type_021") {
	215	+ this.problemType = "Chapter2_6";
	216	+ } else if (item.prblm_type_id === "prblm_type_022") {
	217	+ this.problemType = "Chapter2_10";
	218	+ } else if (item.prblm_type_id === "prblm_type_023") {
	219	+ this.problemType = "Chapter2_11";
	220	+ } else if (item.prblm_type_id === "prblm_type_024") {
	221	+ this.problemType = "Chapter2_13";
	222	+ }
207	223	},
208		- watch: {},
209		- computed: {
210		- getAllProblems() {
211		- return this.$store.getters.getAllProblems;
212		- },
	224	+ },
	225	+ watch: {},
	226	+ computed: {
	227	+ getAllProblems() {
	228	+ return this.$store.getters.getAllProblems;
213	229	},
214		- created() {
215		- console.log('Problem List :', this.getAllProblems);
216		- this.dataList = this.getAllProblems;
217		- this.evalId = this.$route.query.eval_id;
218		-
219		- },
220		- components: {},
221		- mounted() {
222		- this.problemList();
223		- },
	230	+ },
	231	+ created() {
	232	+ console.log("Problem List :", this.getAllProblems);
	233	+ this.dataList = this.getAllProblems;
	234	+ this.evalId = this.$route.query.eval_id;
	235	+ },
	236	+ components: {},
	237	+ mounted() {
	238	+ this.problemList();
	239	+ },
224	240	};
225	241	</script>
226	242	<style scoped>
227	243	.textbox {
228		- height: 60px;
	244	+ height: 60px;
229	245	}
230	246
231	247	.textbox p {
232		- font-size: 28px;
233		- font-weight: bold;
234		- line-height: 65px;
	248	+ font-size: 28px;
	249	+ font-weight: bold;
	250	+ line-height: 65px;
235	251	}
236	252
237	253	.dropGroup button {
238		- position: relative;
	254	+ position: relative;
239	255	}
240	256
241	257	.dropGroup button p {
242		- font-size: 48px;
	258	+ font-size: 48px;
243	259	}
244	260
245	261	.dragGroup button p {
246		- font-size: 48px;
	262	+ font-size: 48px;
247	263	}
248	264	</style>

...	...	@@ -9,6 +9,9 @@
9	9	<div v-if="$route.name === 'MyPlan'" class="main-wrap-plan">
10	10	<router-view />
11	11	</div>
	12	+ <div v-else-if="$route.name === 'MyPage'" class="main-wrap-mypage">
	13	+ <router-view />
	14	+ </div>
12	15	<div v-else class="main-wrap">
13	16	<router-view />
14	17	</div>

...	...	@@ -1,303 +1,341 @@
1	1	<template>
2		- <div class="mypage">
3		- <div class="flex justify-between mb30" style="gap: 30px;">
4		- <div>
5		- <div class="title-box flex justify-between mb20">
6		- <p class="title">소속 반</p>
7		- <div class="flex align-center look-btn">
8		- <!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> -->
9		- </div>
10		- </div>
11		- <div class="wrap " style="width: 82rem;">
12		- <section class="flex" style="gap: 20px;">
13		- <div class="class flex justify-between" style="cursor: default;">
14		- <div class="box gd-col2" style="gap: 5px;">
15		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
16		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
17		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
18		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
19		- </div>
20		- <div class="text mt10">
21		- <p class="title1 mb10">A반</p>
22		- <span class="member">20명</span>
23		- </div>
24		- </div>
25		-
26		- </section>
27		- </div>
28		- </div>
29		- <div>
30		- <div class="title-box flex justify-between mb20">
31		- <p class="title">사진첩</p>
32		- </div>
33		- <div class="photobook">
34		- <div class="flex justify-between">
35		- <div class="box" style="gap: 5px;">
36		- <div><img src="../../../resources/img/img198_12p.png" alt=""></div>
37		- </div>
38		- <div class="text mt10">
39		- <p class="title1 mb10">나의 사진첩</p>
40		- <button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button" title="글쓰기"
41		- class="new-btn">
42		- 바로가기
43		- </button>
44		-
45		- </div>
46		- </div>
47		-
48		- </div>
49		- </div>
50		- </div>
	2	+ <div class="mypage">
	3	+ <div class="flex justify-between mb30" style="gap: 30px">
	4	+ <div>
51	5	<div class="title-box flex justify-between mb20">
52		- <p class="title">{{ studentInfo.studentName }} 학생 랭킹</p>
	6	+ <p class="title" style="color: white">소속 반</p>
	7	+ <div class="flex align-center look-btn">
	8	+ <!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> -->
	9	+ </div>
53	10	</div>
54		- <div class=" mb30">
55		- <div class=" flex " style="gap: 50px;">
56		- <div class="textbook book-red">
57		- <div class="text ">
58		- <p class="title1" style="color: #fff;">포토북 랭킹</p>
59		- </div>
60		- <div class="box " style="gap: 10px;">
61		- <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
62		- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="red">{{ photo_rank }}등</em>입니다.</P>
63		- </div>
	11	+ <div style="width: 82rem; padding: 2rem">
	12	+ <section class="flex" style="gap: 20px">
	13	+ <div
	14	+ class="class flex justify-between"
	15	+ style="cursor: default; background-color: transparent"
	16	+ >
	17	+ <div class="box gd-col2" style="gap: 5px">
	18	+ <div>
	19	+ <img src="../../../resources/img/img176_82t.png" alt="" />
64	20	</div>
65		- <div class="textbook ">
66		- <div class="text ">
67		- <p class="title1" style="color: #fff;">진도율 랭킹</p>
68		- </div>
69		- <div class="box " style="gap: 10px;">
70		- <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
71		- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="yellow">{{ problem_rank }}등</em>입니다.</P>
72		- </div>
	21	+ <div>
	22	+ <img src="../../../resources/img/img176_82t.png" alt="" />
73	23	</div>
74		- <div class="textbook book-blue">
75		- <div class="text ">
76		- <p class="title1" style="color: #fff;">점수 랭킹</p>
77		- </div>
78		- <div class="box " style="gap: 10px;">
79		- <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
80		- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="blue">{{ score_rank }}등</em>입니다.</P>
81		- </div>
	24	+ <div>
	25	+ <img src="../../../resources/img/img176_82t.png" alt="" />
82	26	</div>
83		- <div class="textbook book-navy">
84		- <div class="text ">
85		- <p class="title1" style="color: #fff;">학습시간 랭킹</p>
86		- </div>
87		- <div class="box " style="gap: 10px;">
88		- <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
89		- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="navy">{{ time_rank }}등</em>입니다.</P>
90		- </div>
	27	+ <div>
	28	+ <img src="../../../resources/img/img176_82t.png" alt="" />
91	29	</div>
	30	+ </div>
	31	+ <div class="text mt10">
	32	+ <p class="title1 mb10">A반</p>
	33	+ <span class="member">20명</span>
	34	+ </div>
92	35	</div>
	36	+ </section>
93	37	</div>
	38	+ </div>
	39	+ <div>
	40	+ <div
	41	+ style="position: absolute; left: 102rem; top: 10rem; cursor: pointer"
	42	+ @click="
	43	+ selectedTab = 'tab4';
	44	+ goToPage('PhotoBook');
	45	+ "
	46	+ >
	47	+ <img
	48	+ src="../../../resources/img/new_img/mypage/photoBtn.png"
	49	+ alt=""
	50	+ />
	51	+ </div>
	52	+ <div
	53	+ class="title-box flex justify-between mb20"
	54	+ style="position: absolute; left: 117em; top: 6em"
	55	+ >
	56	+ <p class="title" style="color: white">사진첩</p>
	57	+ </div>
	58	+ </div>
94	59	</div>
	60	+ <div class="title-box flex justify-between mb20">
	61	+ <p class="title" style="color: white">
	62	+ {{ studentInfo.studentName }} 학생 랭킹
	63	+ </p>
	64	+ </div>
	65	+ <div class="mb30">
	66	+ <div class="flex" style="gap: 95px">
	67	+ <div
	68	+ class="textbook book-red"
	69	+ style="background-color: white; width: 19%; border: #f9c4eb solid 6px"
	70	+ >
	71	+ <div class="text" style="background-color: #f9c4eb">
	72	+ <p class="title1" style="color: #fff">포토북 랭킹</p>
	73	+ </div>
	74	+ <div class="box" style="gap: 10px">
	75	+ <div>
	76	+ <img src="../../../resources/img/img196_12p.png" alt="" />
	77	+ </div>
	78	+ <P class="subtitle mt10" style="font-size: 19px"
	79	+ >현재 {{ stdCount }}명 중
	80	+ <em class="red">{{ photo_rank }}등</em>입니다.</P
	81	+ >
	82	+ </div>
	83	+ </div>
	84	+ <div
	85	+ class="textbook"
	86	+ style="background-color: white; width: 19%; border: #b5dbcc solid 6px"
	87	+ >
	88	+ <div class="text" style="background-color: #b5dbcc">
	89	+ <p class="title1" style="color: #fff">진도율 랭킹</p>
	90	+ </div>
	91	+ <div class="box" style="gap: 10px">
	92	+ <div>
	93	+ <img src="../../../resources/img/img196_12p.png" alt="" />
	94	+ </div>
	95	+ <P class="subtitle mt10" style="font-size: 19px"
	96	+ >현재 {{ stdCount }}명 중
	97	+ <em class="yellow">{{ problem_rank }}등</em>입니다.</P
	98	+ >
	99	+ </div>
	100	+ </div>
	101	+ <div
	102	+ class="textbook book-blue"
	103	+ style="background-color: white; width: 19%; border: #bcd3eb solid 6px"
	104	+ >
	105	+ <div class="text" style="background-color: #bcd3eb">
	106	+ <p class="title1" style="color: #fff">점수 랭킹</p>
	107	+ </div>
	108	+ <div class="box" style="gap: 10px">
	109	+ <div>
	110	+ <img src="../../../resources/img/img196_12p.png" alt="" />
	111	+ </div>
	112	+ <P class="subtitle mt10" style="font-size: 19px"
	113	+ >현재 {{ stdCount }}명 중
	114	+ <em class="blue">{{ score_rank }}등</em>입니다.</P
	115	+ >
	116	+ </div>
	117	+ </div>
	118	+ <div
	119	+ class="textbook book-navy"
	120	+ style="background-color: white; width: 19%; border: #f9c894 solid 6px"
	121	+ >
	122	+ <div class="text" style="background-color: #f9c894">
	123	+ <p class="title1" style="color: #fff">학습시간 랭킹</p>
	124	+ </div>
	125	+ <div class="box" style="gap: 10px">
	126	+ <div>
	127	+ <img src="../../../resources/img/img196_12p.png" alt="" />
	128	+ </div>
	129	+ <P class="subtitle mt10" style="font-size: 19px"
	130	+ >현재 {{ stdCount }}명 중
	131	+ <em class="navy">{{ time_rank }}등</em>입니다.</P
	132	+ >
	133	+ </div>
	134	+ </div>
	135	+ </div>
	136	+ </div>
	137	+ </div>
95	138	</template>
96	139
97	140	<script>
98		-import SvgIcon from '@jamescoyle/vue-icon';
99		-import { mdiMagnify, } from '@mdi/js';
100		-import { mdilArrowRight } from '@mdi/light-js';
101		-import ProgressBar from '../../component/ProgressBar.vue';
	141	+import SvgIcon from "@jamescoyle/vue-icon";
	142	+import { mdiMagnify } from "@mdi/js";
	143	+import { mdilArrowRight } from "@mdi/light-js";
	144	+import ProgressBar from "../../component/ProgressBar.vue";
102	145	import axios from "axios";
103	146
104		-
105	147	export default {
106		- data() {
107		- return {
108		- stdCount: 0,
109		- photo_rank: 0,
110		- problem_rank: 0,
111		- score_rank: 0,
112		- time_rank: 0,
113		- mdiMagnify: mdiMagnify,
114		- mdilArrowRight: mdilArrowRight,
115		- timer: "00:00",
116		- progress: 20,
117		- studentInfo: {
118		- studentName: "",
119		- institutionName: "",
120		- grade: "",
121		- className: "",
122		- studentQuestion: "",
123		- history: [],
124		- },
125		- }
	148	+ data() {
	149	+ return {
	150	+ stdCount: 0,
	151	+ photo_rank: 0,
	152	+ problem_rank: 0,
	153	+ score_rank: 0,
	154	+ time_rank: 0,
	155	+ mdiMagnify: mdiMagnify,
	156	+ mdilArrowRight: mdilArrowRight,
	157	+ timer: "00:00",
	158	+ progress: 20,
	159	+ studentInfo: {
	160	+ studentName: "",
	161	+ institutionName: "",
	162	+ grade: "",
	163	+ className: "",
	164	+ studentQuestion: "",
	165	+ history: [],
	166	+ },
	167	+ };
	168	+ },
	169	+ methods: {
	170	+ classStdCount: function () {
	171	+ const vm = this;
	172	+ axios({
	173	+ url: "/userclass/classStdCountByUserId.json",
	174	+ method: "post",
	175	+ headers: {
	176	+ "Content-Type": "application/json; charset=UTF-8",
	177	+ },
	178	+ data: {
	179	+ userId: "USID_000000000000002", // 로그인한 학생의 userId
	180	+ },
	181	+ })
	182	+ .then(function (response) {
	183	+ console.log("classStdCount - response : ", response.data);
	184	+ vm.stdCount = response.data;
	185	+ })
	186	+ .catch(function (error) {
	187	+ console.log("classStdCount - error : ", error);
	188	+ alert("반 학생 수 조회에 오류가 발생했습니다.");
	189	+ });
126	190	},
127		- methods: {
128		- classStdCount: function () {
129		- const vm = this;
130		- axios({
131		- url: "/userclass/classStdCountByUserId.json",
132		- method: "post",
133		- headers: {
134		- "Content-Type": "application/json; charset=UTF-8",
135		- },
136		- data: {
137		- userId: "USID_000000000000002" // 로그인한 학생의 userId
138		- }
139		- })
140		- .then(function (response) {
141		- console.log("classStdCount - response : ", response.data);
142		- vm.stdCount = response.data;
143		- })
144		- .catch(function (error) {
145		- console.log("classStdCount - error : ", error);
146		- alert("반 학생 수 조회에 오류가 발생했습니다.");
147		- });
	191	+ fetchStudentInfo() {
	192	+ const vm = this;
	193	+ axios({
	194	+ url: "/studentInfo/getInfo.json",
	195	+ method: "post",
	196	+ headers: {
	197	+ "Content-Type": "application/json; charset=UTF-8",
148	198	},
149		- fetchStudentInfo() {
150		- const vm = this;
151		- axios({
152		- url: "/studentInfo/getInfo.json",
153		- method: "post",
154		- headers: {
155		- "Content-Type": "application/json; charset=UTF-8",
156		- },
157		- data: {
158		- userId: "USID_000000000000002" // 로그인한 학생의 userId
159		- }
160		- })
161		- .then((response) => {
162		- console.log(response.data);
163		- this.studentInfo = response.data;
164		- })
165		- .catch((error) => {
166		- console.error("학생 정보 가져오기 실패:", error);
167		- });
	199	+ data: {
	200	+ userId: "USID_000000000000002", // 로그인한 학생의 userId
168	201	},
169		- photoRankByLikeData: function () {
170		- const vm = this;
171		- axios({
172		- url: "/photo/photoRankByLikeData.json",
173		- method: "post",
174		- headers: {
175		- "Content-Type": "application/json; charset=UTF-8",
176		- },
177		- data: {
178		- sclsId: "1",
179		- stdId: "1"
180		- }
181		- })
182		- .then(function (response) {
183		- console.log("Photo Rank - response : ", response.data);
184		- vm.photo_rank = response.data;
185		- })
186		- .catch(function (error) {
187		- console.log("Photo Rank - error : ", error);
188		- alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
189		- });
	202	+ })
	203	+ .then((response) => {
	204	+ console.log(response.data);
	205	+ this.studentInfo = response.data;
	206	+ })
	207	+ .catch((error) => {
	208	+ console.error("학생 정보 가져오기 실패:", error);
	209	+ });
	210	+ },
	211	+ photoRankByLikeData: function () {
	212	+ const vm = this;
	213	+ axios({
	214	+ url: "/photo/photoRankByLikeData.json",
	215	+ method: "post",
	216	+ headers: {
	217	+ "Content-Type": "application/json; charset=UTF-8",
190	218	},
191		- getUserRankByScore: function () {
192		- const vm = this;
193		- axios({
194		- url: "/userclass/getUserRankByScore.json",
195		- method: "post",
196		- headers: {
197		- "Content-Type": "application/json; charset=UTF-8",
198		- },
199		- data: {
200		- userId: "USID_000000000000002" // 로그인한 학생의 userId
201		- }
202		- })
203		- .then(function (response) {
204		- console.log("User Rank - response : ", response.data);
205		- vm.score_rank = response.data;
206		- })
207		- .catch(function (error) {
208		- console.log("User Rank - error : ", error);
209		- alert("점수 랭킹 조회에 오류가 발생했습니다.");
210		- });
	219	+ data: {
	220	+ sclsId: "1",
	221	+ stdId: "1",
211	222	},
212		- getUserRankByStudyTime: function () {
213		- const vm = this;
214		- axios({
215		- url: "/userclass/getUserRankByStudyTime.json",
216		- method: "post",
217		- headers: {
218		- "Content-Type": "application/json; charset=UTF-8",
219		- },
220		- data: {
221		- userId: "1" // 로그인한 학생의 userId
222		- }
223		- })
224		- .then(function (response) {
225		- console.log("User Rank - response : ", response.data);
226		- vm.time_rank = response.data;
227		- })
228		- .catch(function (error) {
229		- console.log("User Rank - error : ", error);
230		- alert("학습시간 랭킹 조회에 오류가 발생했습니다.");
231		- });
	223	+ })
	224	+ .then(function (response) {
	225	+ console.log("Photo Rank - response : ", response.data);
	226	+ vm.photo_rank = response.data;
	227	+ })
	228	+ .catch(function (error) {
	229	+ console.log("Photo Rank - error : ", error);
	230	+ alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
	231	+ });
	232	+ },
	233	+ getUserRankByScore: function () {
	234	+ const vm = this;
	235	+ axios({
	236	+ url: "/userclass/getUserRankByScore.json",
	237	+ method: "post",
	238	+ headers: {
	239	+ "Content-Type": "application/json; charset=UTF-8",
232	240	},
233		- problemRankByProblemData: function () {
234		- const vm = this;
235		- axios({
236		- url: "/problemLog/problemRankByProblemData.json",
237		- method: "post",
238		- headers: {
239		- "Content-Type": "application/json; charset=UTF-8",
240		- },
241		- data: {
242		- sclsId: "1",
243		- stdId: "2"
244		- }
245		- })
246		- .then(function (response) {
247		- console.log("Problem Rank - response : ", response.data);
248		- vm.problem_rank = response.data;
249		- })
250		- .catch(function (error) {
251		- console.log("Problem Rank - error : ", error);
252		- alert("학생 문제 랭킹 조회에 오류가 발생했습니다.");
253		- });
	241	+ data: {
	242	+ userId: "USID_000000000000002", // 로그인한 학생의 userId
254	243	},
255		- goToPage(page) {
256		- this.$router.push({ name: page });
	244	+ })
	245	+ .then(function (response) {
	246	+ console.log("User Rank - response : ", response.data);
	247	+ vm.score_rank = response.data;
	248	+ })
	249	+ .catch(function (error) {
	250	+ console.log("User Rank - error : ", error);
	251	+ alert("점수 랭킹 조회에 오류가 발생했습니다.");
	252	+ });
	253	+ },
	254	+ getUserRankByStudyTime: function () {
	255	+ const vm = this;
	256	+ axios({
	257	+ url: "/userclass/getUserRankByStudyTime.json",
	258	+ method: "post",
	259	+ headers: {
	260	+ "Content-Type": "application/json; charset=UTF-8",
257	261	},
258		- increaseProgress() {
259		- if (this.progress < 100) {
260		- this.progress += 10;
261		- }
	262	+ data: {
	263	+ userId: "1", // 로그인한 학생의 userId
262	264	},
263		- showConfirm(type) {
264		- let message = '';
265		- if (type === 'cancel') {
266		- message = '삭제하시겠습니까?';
267		- } else if (type === 'reset') {
268		- message = '초기화하시겠습니까?';
269		- } else if (type === 'save') {
270		- message = '등록하시겠습니까?';
271		- }
	265	+ })
	266	+ .then(function (response) {
	267	+ console.log("User Rank - response : ", response.data);
	268	+ vm.time_rank = response.data;
	269	+ })
	270	+ .catch(function (error) {
	271	+ console.log("User Rank - error : ", error);
	272	+ alert("학습시간 랭킹 조회에 오류가 발생했습니다.");
	273	+ });
	274	+ },
	275	+ problemRankByProblemData: function () {
	276	+ const vm = this;
	277	+ axios({
	278	+ url: "/problemLog/problemRankByProblemData.json",
	279	+ method: "post",
	280	+ headers: {
	281	+ "Content-Type": "application/json; charset=UTF-8",
	282	+ },
	283	+ data: {
	284	+ sclsId: "1",
	285	+ stdId: "2",
	286	+ },
	287	+ })
	288	+ .then(function (response) {
	289	+ console.log("Problem Rank - response : ", response.data);
	290	+ vm.problem_rank = response.data;
	291	+ })
	292	+ .catch(function (error) {
	293	+ console.log("Problem Rank - error : ", error);
	294	+ alert("학생 문제 랭킹 조회에 오류가 발생했습니다.");
	295	+ });
	296	+ },
	297	+ goToPage(page) {
	298	+ this.$router.push({ name: page });
	299	+ },
	300	+ increaseProgress() {
	301	+ if (this.progress < 100) {
	302	+ this.progress += 10;
	303	+ }
	304	+ },
	305	+ showConfirm(type) {
	306	+ let message = "";
	307	+ if (type === "cancel") {
	308	+ message = "삭제하시겠습니까?";
	309	+ } else if (type === "reset") {
	310	+ message = "초기화하시겠습니까?";
	311	+ } else if (type === "save") {
	312	+ message = "등록하시겠습니까?";
	313	+ }
272	314
273		- if (confirm(message)) {
274		- this.goBack();
275		- }
276		- },
	315	+ if (confirm(message)) {
	316	+ this.goBack();
	317	+ }
277	318	},
278		- watch: {
279		-
280		- },
281		- computed: {
282		-
283		- },
284		- components: {
285		- SvgIcon,
286		- ProgressBar
287		- },
288		- mounted() {
289		- console.log('Main2 mounted');
290		- this.fetchStudentInfo();
291		- this.classStdCount();
292		- this.photoRankByLikeData();
293		- this.getUserRankByScore();
294		- this.problemRankByProblemData();
295		- this.getUserRankByStudyTime();
296		- }
297		-}
	319	+ },
	320	+ watch: {},
	321	+ computed: {},
	322	+ components: {
	323	+ SvgIcon,
	324	+ ProgressBar,
	325	+ },
	326	+ mounted() {
	327	+ console.log("Main2 mounted");
	328	+ this.fetchStudentInfo();
	329	+ this.classStdCount();
	330	+ this.photoRankByLikeData();
	331	+ this.getUserRankByScore();
	332	+ this.problemRankByProblemData();
	333	+ this.getUserRankByStudyTime();
	334	+ },
	335	+};
298	336	</script>
299	337	<style scoped>
300	338	.mypage .textbook {
301		- width: 22%;
	339	+ width: 22%;
302	340	}
303		-</style> (파일 끝에 줄바꿈 문자 없음)
	341	+</style>

...	...	@@ -6,7 +6,7 @@
6	6	<div class="text">
7	7	<p class="title1" style="color: #fff;">스케줄</p>
8	8	</div>
9		- <div class="purple-scroll" style="overflow: auto; height: 85%;">
	9	+ <div class="purple-scroll" style="overflow: auto; height: 85%; margin: 5px">
10	10	<div style="padding: 10px 20px;">
11	11	<p style="text-align: right;cursor: pointer;text-decoration: underline;padding-bottom: 5px;"
12	12	class="title2" @click="goToPage2('MyPlan2')">학습 일정 변경하기</p>
...	...	@@ -135,7 +135,7 @@
135	135	<div class="text">
136	136	<p class="title1" style="color: #fff;">오늘의 뉴스</p>
137	137	</div>
138		- <div class="green-scroll" style="overflow: auto; height: 75%;">
	138	+ <div class="green-scroll" style="overflow: auto; height: 73%; margin: 5px;">
139	139	<div style=" padding: 10px;">
140	140	<div v-for="(news, index) in schedules" :key="index">
141	141	<div style="display: flex;">

...	...	@@ -5,48 +5,95 @@
5	5	<div class="myphoto mb30">
6	6	<div>
7	7	<div class="title-box flex justify-end mb40">
	8	+ <p class="class-p">반</p>
8	9	<select @change="handleClassChange">
9		- <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId">
	10	+ <option
	11	+ v-for="classItem in classList"
	12	+ :key="classItem.sclsId"
	13	+ :value="classItem.sclsId"
	14	+ >
10	15	{{ classItem.sclsNm }}
11	16	</option>
12	17	</select>
13	18	</div>
14	19	<div class="btnGroup" style="display: flex; flex-direction: column">
15		- <button v-for="n in totalPages" :key="n" @click="changePage(n)" type="button" title="페이지 버튼" class="tab-btn">
16		- <img v-if="currentPage !== n" src="../../../resources/img/btn49_15s_normal.png" alt="" />
17		- <img v-else src="../../../resources/img/btn49_15s_click.png" alt="" />
	20	+ <button
	21	+ v-for="n in totalPages"
	22	+ :key="n"
	23	+ @click="changePage(n)"
	24	+ type="button"
	25	+ title="페이지 버튼"
	26	+ class="tab-btn"
	27	+ >
	28	+ <img
	29	+ v-if="currentPage !== n"
	30	+ src="../../../resources/img/new_img/photobook/page.png"
	31	+ alt=""
	32	+ />
	33	+ <img
	34	+ v-else
	35	+ src="../../../resources/img/new_img/photobook/page_click.png"
	36	+ alt=""
	37	+ />
18	38	<p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
19	39	</button>
20	40	</div>
21	41	<div v-if="selectedTab === 'tab1'" class="tab-box">
22		- <div class="flex justify-between">
23		- <div v-for="(photo, index) in (photoList?.result \|\| []).slice(0, 3)" :key="index" class="photo"
24		- :style="{ transform: getRotation(index) }" @click="buttonSearch(photo)">
25		- <div class="class">
26		- <div class="box">
27		- <div class="photo-container">
28		- <img :src="fetchImage(photo.fileRpath)" alt="" />
	42	+ <div
	43	+ class="flex justify-between"
	44	+ style="margin-right: -82px; margin-left: -47px"
	45	+ >
	46	+ <!-- 왼쪽에 4개의 사진 -->
	47	+ <div class="left-side">
	48	+ <div
	49	+ v-for="(photo, index) in (photoList?.result \|\| []).slice(0, 4)"
	50	+ :key="index"
	51	+ class="photo"
	52	+ :style="{ transform: getRotation(index) }"
	53	+ @click="buttonSearch(photo)"
	54	+ >
	55	+ <div class="class">
	56	+ <div class="box">
	57	+ <div class="photo-container">
	58	+ <img
	59	+ :src="fetchImage(photo.fileRpath)"
	60	+ alt=""
	61	+ style="width: 150px"
	62	+ />
	63	+ </div>
29	64	</div>
30		- </div>
31		- <div class="photo-text mt10 ml10">
32		- <div class="member ml30">{{ photo.likeData }}</div>
33		- <div class="title2">{{ photo.unitName }}</div>
	65	+ <div class="photo-text mt20 ml30">
	66	+ <div class="member ml30">{{ photo.likeData }}</div>
	67	+ <div class="title2-photo">{{ photo.unitName }}</div>
	68	+ </div>
34	69	</div>
35	70	</div>
36	71	</div>
37		- </div>
38		- <div class="flex justify-between mt20">
39		- <div v-for="(photo, index) in (photoList?.result \|\| []).slice(3, 6)" :key="index + 3" class="photo"
40		- :style="{ transform: getRotation(index + 3) }" @click="buttonSearch(photo)">
41		- <div class="class">
42		- <div class="box">
43		- <div class="photo-container">
44		- <img :src="fetchImage(photo.fileRpath)" alt="" style="width: 150px" />
	72	+
	73	+ <!-- 오른쪽에 4개의 사진 -->
	74	+ <div class="right-side">
	75	+ <div
	76	+ v-for="(photo, index) in (photoList?.result \|\| []).slice(4, 8)"
	77	+ :key="index + 4"
	78	+ class="photo"
	79	+ :style="{ transform: getRotation(index + 4) }"
	80	+ style="width: fit-content"
	81	+ @click="buttonSearch(photo)"
	82	+ >
	83	+ <div class="class" style="width: 24rem; height: 21rem">
	84	+ <div class="box">
	85	+ <div class="photo-container">
	86	+ <img
	87	+ :src="fetchImage(photo.fileRpath)"
	88	+ alt=""
	89	+ style="width: 150px"
	90	+ />
	91	+ </div>
45	92	</div>
46		- </div>
47		- <div class="photo-text mt10 ml10">
48		- <div class="member ml30">{{ photo.likeData }}</div>
49		- <div class="title2">{{ photo.unitName }}</div>
	93	+ <div class="photo-text mt20 ml30">
	94	+ <div class="member ml30">{{ photo.likeData }}</div>
	95	+ <div class="title2-photo">{{ photo.unitName }}</div>
	96	+ </div>
50	97	</div>
51	98	</div>
52	99	</div>
...	...	@@ -57,20 +104,32 @@
57	104	<div class="flex mb10 justify-between">
58	105	<p class="popup-title">알림</p>
59	106	<button type="button" class="popup-close-btn" @click="closeBtn">
60		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	107	+ <svg-icon
	108	+ type="mdi"
	109	+ :path="mdiWindowClose"
	110	+ class="close-btn"
	111	+ ></svg-icon>
61	112	</button>
62	113	</div>
63	114
64		- <div class="photo-modal flex justify-between mt20" v-if="photoData.length > 0">
	115	+ <div
	116	+ class="photo-modal flex justify-between mt20"
	117	+ v-if="photoData.length > 0"
	118	+ >
65	119	<div class="box">
66	120	<div>
67		- <img :src="fetchImage(photoData[0].fileRpath)" alt="" style="width: 640px; height: 480px" />
	121	+ <img
	122	+ :src="fetchImage(photoData[0].fileRpath)"
	123	+ alt=""
	124	+ style="width: 640px; height: 480px"
	125	+ />
68	126	</div>
69	127	</div>
70	128	<div class="photo-title-container">
71	129	<div class="title1">
72	130	{{ photoData[0].unitName }}을 마친
73		- <em class="yellow">{{ photoData[0].stdName }}</em>친구
	131	+ <em class="yellow">{{ photoData[0].stdName }}</em
	132	+ >친구
74	133	</div>
75	134	<p class="title2 date">{{ photoData[0].photoDate }}</p>
76	135	</div>
...	...	@@ -101,7 +160,7 @@
101	160	photoData: [],
102	161
103	162	currentPage: 1,
104		- pageSize: 6,
	163	+ pageSize: 8,
105	164	totalPages: 1,
106	165
107	166	mdiWindowClose: mdiWindowClose,
...	...	@@ -133,9 +192,8 @@
133	192	console.log("classList - response : ", response.data);
134	193	vm.classList = response.data.data;
135	194	vm.currentPage = 1;
136		- vm.selectedSclsId= vm.classList[0].sclsId;
	195	+ vm.selectedSclsId = vm.classList[0].sclsId;
137	196	vm.stdPhotoSelectList();
138		-
139	197	})
140	198	.catch(function (error) {
141	199	console.log("classList - error : ", error);
...	...	@@ -144,35 +202,35 @@
144	202	},
145	203
146	204	handleClassChange(event) {
147		- this.selectedSclsId = event.target.value; // 선택된 sclsId 가져오기
148		- this.currentPage = 1; // 페이지 초기화
149		- this.stdPhotoSelectList(); // 함수 호출
150		- },
151		- stdPhotoSelectList: function (scsId) {
152		- const vm = this;
153		- axios({
154		- url: "/photo/stdPhotoList.json",
155		- method: "post",
156		- headers: {
157		- "Content-Type": "application/json; charset=UTF-8",
158		- },
159		- data: {
160		- stdId: "1",
161		- sclsId: vm.selectedSclsId, // 여기에 sclsId 들어가야 함
162		- page: vm.currentPage,
163		- pageSize: vm.pageSize,
164		- },
165		- })
166		- .then(function (response) {
167		- console.log("photoList - response : ", response.data);
168		- vm.photoList = response.data;
169		- vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
	205	+ this.selectedSclsId = event.target.value; // 선택된 sclsId 가져오기
	206	+ this.currentPage = 1; // 페이지 초기화
	207	+ this.stdPhotoSelectList(); // 함수 호출
	208	+ },
	209	+ stdPhotoSelectList: function (scsId) {
	210	+ const vm = this;
	211	+ axios({
	212	+ url: "/photo/stdPhotoList.json",
	213	+ method: "post",
	214	+ headers: {
	215	+ "Content-Type": "application/json; charset=UTF-8",
	216	+ },
	217	+ data: {
	218	+ stdId: "1",
	219	+ sclsId: vm.selectedSclsId, // 여기에 sclsId 들어가야 함
	220	+ page: vm.currentPage,
	221	+ pageSize: vm.pageSize,
	222	+ },
170	223	})
171		- .catch(function (error) {
172		- console.log("photoList - error : ", error);
173		- alert("반별 내 사진 조회에 오류가 발생했습니다.");
174		- });
175		- },
	224	+ .then(function (response) {
	225	+ console.log("photoList - response : ", response.data);
	226	+ vm.photoList = response.data;
	227	+ vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
	228	+ })
	229	+ .catch(function (error) {
	230	+ console.log("photoList - error : ", error);
	231	+ alert("반별 내 사진 조회에 오류가 발생했습니다.");
	232	+ });
	233	+ },
176	234	getRotation(index) {
177	235	const rotations = [2, -1, 1, -2, 1, -1];
178	236	return `rotate(${rotations[index]}deg)`;
...	...	@@ -305,6 +363,7 @@
305	363	.class {
306	364	width: 260px;
307	365	height: 200px;
	366	+ background-repeat: no-repeat;
308	367	}
309	368
310	369	.photo-container {
...	...	@@ -314,6 +373,9 @@
314	373	.photo-container img {
315	374	width: 150px;
316	375	height: 110px;
	376	+ height: 105px;
	377	+ position: relative;
	378	+ top: 23px;
317	379	}
318	380
319	381	.photo-text {
...	...	@@ -335,4 +397,36 @@
335	397	justify-content: space-between;
336	398	margin-top: 20px;
337	399	}
	400	+
	401	+select {
	402	+ border-radius: 16px;
	403	+ position: absolute;
	404	+ top: 42px;
	405	+ right: 33px;
	406	+}
	407	+
	408	+.class-p {
	409	+ font-size: 23px;
	410	+ position: absolute;
	411	+ top: 52px;
	412	+ right: 218px;
	413	+}
	414	+
	415	+.left-side,
	416	+.right-side {
	417	+ width: 48%; /* 좌우로 나눔 */
	418	+ display: flex;
	419	+ flex-wrap: wrap;
	420	+ align-content: flex-start;
	421	+}
	422	+
	423	+.title2-photo {
	424	+ font-size: 15px;
	425	+ font-weight: bold;
	426	+ font-family: "ONEMobileOTF-Regular";
	427	+ max-width: 175px;
	428	+ white-space: nowrap;
	429	+ overflow: hidden;
	430	+ text-overflow: ellipsis;
	431	+}
338	432	</style>

Delete comment