jichoi / lms_front star
이은진 이은진 2024-08-13
Merge branch 'master' of http://210.180.118.83/jichoi/lms_front
@9d0e2016f98bbe7da0fe04aaf40dc85fee31fbfd
client/views/pages/AppRouter.js
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
@@ -1,19 +1,20 @@
 import { createWebHistory, createRouter } from "vue-router";
 
 // import App from "../App.vue";
-import login from "../Login.vue"
-import Join from "../Join.vue"
-import MyPage from './main/MyPage.vue';
-import MyPlan from './main/MyPlan.vue';
-import MyPlan2 from './main/MyPlan2.vue';
-import PhotoBook from './main/PhotoBook.vue';
-import Dashboard from './main/Dashboard.vue';
-import AIDashboard from './main/AIDashboard.vue';
-import Camera from "./main/Camera.vue"
-import PhotoDesign from "./main/PhotoDesign.vue"
-import PhotoEdit from "./main/PhotoEdit.vue"
-import PreviewNote from './main/PreviewNote.vue';
+import login from "../Login.vue";
+import Join from "../Join.vue";
+import MyPage from "./main/MyPage.vue";
+import MyPlan from "./main/MyPlan.vue";
+import MyPlan2 from "./main/MyPlan2.vue";
+import PhotoBook from "./main/PhotoBook.vue";
+import Dashboard from "./main/Dashboard.vue";
+import AIDashboard from "./main/AIDashboard.vue";
+import Camera from "./main/Camera.vue";
+import PhotoDesign from "./main/PhotoDesign.vue";
+import PhotoEdit from "./main/PhotoEdit.vue";
+import PreviewNote from "./main/PreviewNote.vue";
 import Main from "./main/Main.vue";
+import Main_c from "./main/Main_c.vue";
 import Chapter1 from "./main/Chapter/Chapter1.vue";
 import Chapter1_1 from "./main/Chapter/Chapter1_1.vue";
 import Chapter1_2 from "./main/Chapter/Chapter1_2.vue";
@@ -96,9 +97,9 @@
 import RoadMap from "./teacher/RoadMap.vue";
 
 const routes = [
-    { path: '/login.page', name: 'login', component: login },
-    { path: '/Join.page', name: 'Join', component: Join },
-    
+    { path: "/login.page", name: "login", component: login },
+    { path: "/Join.page", name: "Join", component: Join },
+
     // { path: '/App.page', name: 'App', component: App,
     //     children:[
     //     ]
@@ -106,115 +107,304 @@
     // { path: '/Main.page', name: 'Main', component: Main},
     /* 학생 */
     {
-        path: '/',
-        name: 'Main',
+        path: "/",
+        name: "Main",
         component: Main,
         children: [
-            { path: '/Dashboard.page', name: 'Dashboard', component: Dashboard },
-            { path: '/AIDashboard.page', name: 'AIDashboard', component: AIDashboard },
-            { path: '/MyPage.page', name: 'MyPage', component: MyPage },
-            { path: '/MyPlan.page', name: 'MyPlan', component: MyPlan },
-            { path: '/MyPlan2.page', name: 'MyPlan2', component: MyPlan2 },
-            { path: '/PhotoBook.page', name: 'PhotoBook', component: PhotoBook },
-            { path: '/PreviewNote.page', name: 'PreviewNote', component: PreviewNote },
-        ]
+            {
+                path: "/Dashboard.page",
+                name: "Dashboard",
+                component: Dashboard,
+            },
+            { path: "/MyPage.page", name: "MyPage", component: MyPage },
+            { path: "/MyPlan.page", name: "MyPlan", component: MyPlan },
+            { path: "/MyPlan2.page", name: "MyPlan2", component: MyPlan2 },
+            {
+                path: "/PhotoBook.page",
+                name: "PhotoBook",
+                component: PhotoBook,
+            },
+            {
+                path: "/PreviewNote.page",
+                name: "PreviewNote",
+                component: PreviewNote,
+            },
+        ],
     },
-    { path: '/Camera.page', name: 'Camera', component: Camera },
-    { path: '/PhotoDesign.page', name: 'PhotoDesign', component: PhotoDesign },
-    { path: '/PhotoEdit.page', name: 'PhotoEdit', component: PhotoEdit },
+    { path: "/Camera.page", name: "Camera", component: Camera },
+    { path: "/PhotoDesign.page", name: "PhotoDesign", component: PhotoDesign },
+    { path: "/PhotoEdit.page", name: "PhotoEdit", component: PhotoEdit },
     /* 지문 */
-    { path: '/Chapter1.page', name: 'Chapter1', component: Chapter1 },
-    { path: '/Chapter1_1.page', name: 'Chapter1_1', component: Chapter1_1 },
-    { path: '/Chapter1_2.page', name: 'Chapter1_2', component: Chapter1_2 },
-    { path: '/Chapter1_3.page', name: 'Chapter1_3', component: Chapter1_3 },
+    { path: "/Chapter1.page", name: "Chapter1", component: Chapter1 },
+    { path: "/Chapter1_1.page", name: "Chapter1_1", component: Chapter1_1 },
+    { path: "/Chapter1_2.page", name: "Chapter1_2", component: Chapter1_2 },
+    { path: "/Chapter1_3.page", name: "Chapter1_3", component: Chapter1_3 },
 
     /* 단어장 및 지문 문제 */
-    { path: '/Chapter2.page', name: 'Chapter2', component: Chapter2 },
-    { path: '/Chapter2_1.page', name: 'Chapter2_1', component: Chapter2_1 },
-    { path: '/Chapter2_2.page', name: 'Chapter2_2', component: Chapter2_2 },
-    { path: '/Chapter2_3.page', name: 'Chapter2_3', component: Chapter2_3 },
-    { path: '/Chapter2_4.page', name: 'Chapter2_4', component: Chapter2_4 },
-    { path: '/Chapter2_5.page', name: 'Chapter2_5', component: Chapter2_5 },
-    { path: '/Chapter2_6.page', name: 'Chapter2_6', component: Chapter2_6 },
-    { path: '/Chapter2_7.page', name: 'Chapter2_7', component: Chapter2_7 },
-    { path: '/Chapter2_8.page', name: 'Chapter2_8', component: Chapter2_8 },
-    { path: '/Chapter2_9.page', name: 'Chapter2_9', component: Chapter2_9 },
-    { path: '/Chapter2_10.page', name: 'Chapter2_10', component: Chapter2_10 },
-    { path: '/Chapter2_11.page', name: 'Chapter2_11', component: Chapter2_11 },
-    { path: '/Chapter2_12.page', name: 'Chapter2_12', component: Chapter2_12 },
-    { path: '/Chapter2_13.page', name: 'Chapter2_13', component: Chapter2_13 },
+    { path: "/Chapter2.page", name: "Chapter2", component: Chapter2 },
+    { path: "/Chapter2_1.page", name: "Chapter2_1", component: Chapter2_1 },
+    { path: "/Chapter2_2.page", name: "Chapter2_2", component: Chapter2_2 },
+    { path: "/Chapter2_3.page", name: "Chapter2_3", component: Chapter2_3 },
+    { path: "/Chapter2_4.page", name: "Chapter2_4", component: Chapter2_4 },
+    { path: "/Chapter2_5.page", name: "Chapter2_5", component: Chapter2_5 },
+    { path: "/Chapter2_6.page", name: "Chapter2_6", component: Chapter2_6 },
+    { path: "/Chapter2_7.page", name: "Chapter2_7", component: Chapter2_7 },
+    { path: "/Chapter2_8.page", name: "Chapter2_8", component: Chapter2_8 },
+    { path: "/Chapter2_9.page", name: "Chapter2_9", component: Chapter2_9 },
+    { path: "/Chapter2_10.page", name: "Chapter2_10", component: Chapter2_10 },
+    { path: "/Chapter2_11.page", name: "Chapter2_11", component: Chapter2_11 },
+    { path: "/Chapter2_12.page", name: "Chapter2_12", component: Chapter2_12 },
+    { path: "/Chapter2_13.page", name: "Chapter2_13", component: Chapter2_13 },
 
     /* 평가 문제 */
-    { path: '/Chapter3.page', name: 'Chapter3', component: Chapter3 },    
-    { path: '/Chapter3_1.page', name: 'Chapter3_1', component: Chapter3_1 },
-    { path: '/Chapter3_2.page', name: 'Chapter3_2', component: Chapter3_2 },
-    { path: '/Chapter3_3.page', name: 'Chapter3_3', component: Chapter3_3 },
-    { path: '/Chapter3_3_1.page', name: 'Chapter3_3_1', component: Chapter3_3_1 },
-    { path: '/Chapter3_4.page', name: 'Chapter3_4', component: Chapter3_4 },
-    { path: '/Chapter3_5.page', name: 'Chapter3_5', component: Chapter3_5 },
-    { path: '/Chapter3_6.page', name: 'Chapter3_6', component: Chapter3_6 },
-    { path: '/Chapter3_7.page', name: 'Chapter3_7', component: Chapter3_7 },
-    { path: '/Chapter3_8.page', name: 'Chapter3_8', component: Chapter3_8 },
-    { path: '/Chapter3_9.page', name: 'Chapter3_9', component: Chapter3_9 },
-    { path: '/Chapter3_10.page', name: 'Chapter3_10', component: Chapter3_10 },
-    { path: '/Chapter3_11.page', name: 'Chapter3_11', component: Chapter3_11 },
-    { path: '/Chapter3_12.page', name: 'Chapter3_12', component: Chapter3_12 },
-    { path: '/Chapter3_13.page', name: 'Chapter3_13', component: Chapter3_13 },
-    { path: '/Chapter3_14.page', name: 'Chapter3_14', component: Chapter3_14 },
-    { path: '/Chapter3_15.page', name: 'Chapter3_15', component: Chapter3_15 },
+    {
+        path: "/Main_c.page",
+        name: "Main_c",
+        component: Main_c,
+        children: [
+            { path: "/Chapter3.page", name: "Chapter3", component: Chapter3 },
+            {
+                path: "/Chapter3_1.page",
+                name: "Chapter3_1",
+                component: Chapter3_1,
+            },
+            {
+                path: "/Chapter3_2.page",
+                name: "Chapter3_2",
+                component: Chapter3_2,
+            },
+            {
+                path: "/Chapter3_3.page",
+                name: "Chapter3_3",
+                component: Chapter3_3,
+            },
+            {
+                path: "/Chapter3_3_1.page",
+                name: "Chapter3_3_1",
+                component: Chapter3_3_1,
+            },
+            {
+                path: "/Chapter3_4.page",
+                name: "Chapter3_4",
+                component: Chapter3_4,
+            },
+            {
+                path: "/Chapter3_5.page",
+                name: "Chapter3_5",
+                component: Chapter3_5,
+            },
+            {
+                path: "/Chapter3_6.page",
+                name: "Chapter3_6",
+                component: Chapter3_6,
+            },
+            {
+                path: "/Chapter3_7.page",
+                name: "Chapter3_7",
+                component: Chapter3_7,
+            },
+            {
+                path: "/Chapter3_8.page",
+                name: "Chapter3_8",
+                component: Chapter3_8,
+            },
+            {
+                path: "/Chapter3_9.page",
+                name: "Chapter3_9",
+                component: Chapter3_9,
+            },
+            {
+                path: "/Chapter3_10.page",
+                name: "Chapter3_10",
+                component: Chapter3_10,
+            },
+            {
+                path: "/Chapter3_11.page",
+                name: "Chapter3_11",
+                component: Chapter3_11,
+            },
+            {
+                path: "/Chapter3_12.page",
+                name: "Chapter3_12",
+                component: Chapter3_12,
+            },
+            {
+                path: "/Chapter3_13.page",
+                name: "Chapter3_13",
+                component: Chapter3_13,
+            },
+            {
+                path: "/Chapter3_14.page",
+                name: "Chapter3_14",
+                component: Chapter3_14,
+            },
+            {
+                path: "/Chapter3_15.page",
+                name: "Chapter3_15",
+                component: Chapter3_15,
+            },
+        ],
+    },
     /* 설문 조사 페이지*/
-    { path: '/Chapter3_16.page', name: 'Chapter3_16', component: Chapter3_16 },
-/* 평가 결과 페이지*/
-    { path: '/Chapter4.page', name: 'Chapter4', component: Chapter4 },
+    { path: "/Chapter3_16.page", name: "Chapter3_16", component: Chapter3_16 },
+    /* 평가 결과 페이지*/
+    { path: "/Chapter4.page", name: "Chapter4", component: Chapter4 },
 
-    { path: '/Chapter5.page', name: 'Chapter5', component: Chapter5 },
-    { path: '/Chapter6.page', name: 'Chapter6', component: Chapter6 },
-    { path: '/Chapter7.page', name: 'Chapter7', component: Chapter7 },
-    { path: '/Chapter8.page', name: 'Chapter8', component: Chapter8 },
-    { path: '/Chapter9.page', name: 'Chapter9', component: Chapter9 },
-    { path: '/Chapter10.page', name: 'Chapter10', component: Chapter10 },
-    { path: '/Chapter11.page', name: 'Chapter11', component: Chapter11 },
+    { path: "/Chapter5.page", name: "Chapter5", component: Chapter5 },
+    { path: "/Chapter6.page", name: "Chapter6", component: Chapter6 },
+    { path: "/Chapter7.page", name: "Chapter7", component: Chapter7 },
+    { path: "/Chapter8.page", name: "Chapter8", component: Chapter8 },
+    { path: "/Chapter9.page", name: "Chapter9", component: Chapter9 },
+    { path: "/Chapter10.page", name: "Chapter10", component: Chapter10 },
+    { path: "/Chapter11.page", name: "Chapter11", component: Chapter11 },
 
     /* 부모님 */
-    { path: '/Main_p.page', name: 'Main_p', component: Main_p },
+    { path: "/Main_p.page", name: "Main_p", component: Main_p },
     /* 선생님 */
-    { path: '/Main_t.page', name: 'Main_t', component: Main_t ,
+    {
+        path: "/Main_t.page",
+        name: "Main_t",
+        component: Main_t,
         children: [
-            { path: '/Board.page', name: 'Board', component: Board },
-            { path: '/noticeInsert.page', name: 'noticeInsert', component: noticeInsert },
-            { path: '/noticeDetail.page', name: 'noticeDetail', component: noticeDetail },
-            { path: '/Home.page', name: 'Home', component: Home },
-            { path: '/ClassDetail.page', name: 'ClassDetail', component: ClassDetail },
-            { path: '/StudentList.page', name: 'StudentList', component: StudentList },
-            { path: '/StudentDetail.page', name: 'StudentDetail', component: StudentDetail },
-            { path: '/C_Textbook.page', name: 'C_Textbook', component: C_Textbook },
-            { path: '/textbook.page', name: 'textbook', component: textbook },
-            { path: '/TextBookDetail.page', name: 'TextBookDetail', component: TextBookDetail },
-            { path: '/C_TextBookDetail.page', name: 'C_TextBookDetail', component: C_TextBookDetail },
-            { path: '/TextList.page', name: 'TextList', component: TextList },
-            { path: '/TextInsert.page', name: 'TextInsert', component: TextInsert },
-            { path: '/TextDetail.page', name: 'TextDetail', component: TextDetail },
-            { path: '/QuestionList.page', name: 'QuestionList', component: QuestionList },
-            { path: '/QuestionInsert.page', name: 'QuestionInsert', component: QuestionInsert },
-            { path: '/QuestionDetail.page', name: 'QuestionDetail', component: QuestionDetail },
-            { path: '/VocaList.page', name: 'VocaList', component: VocaList },
-            { path: '/VocaInsert.page', name: 'VocaInsert', component: VocaInsert },
-            { path: '/VocaDetail.page', name: 'VocaDetail', component: VocaDetail },
-            { path: '/ExamList.page', name: 'ExamList', component: ExamList },
-            { path: '/ExamDetail.page', name: 'ExamDetail', component: ExamDetail },
-            { path: '/ExamInsert.page', name: 'ExamInsert', component: ExamInsert },
-            { path: '/C_TextList.page', name: 'C_TextList', component: C_TextList },
-            { path: '/C_TextInsert.page', name: 'C_TextInsert', component: C_TextInsert },
-            { path: '/C_QuestionList.page', name: 'C_QuestionList', component: C_QuestionList },
-            { path: '/C_QuestionInsert.page', name: 'C_QuestionInsert', component: C_QuestionInsert },
-            { path: '/C_Voca_List.page', name: 'C_Voca_List', component: C_Voca_List },
-            { path: '/C_ExamList.page', name: 'C_ExamList', component: C_ExamList },
-            { path: '/C_ExamDetail.page', name: 'C_ExamDetail', component: C_ExamDetail },
-            { path: '/C_ExamInsert.page', name: 'C_ExamInsert', component: C_ExamInsert },
-            
-            { path: '/RoadMap.page', name: 'RoadMap', component: RoadMap },
-            
-            { path: '/TextDetail.page', name: 'TextDetail', component: TextDetail },
+            { path: "/Board.page", name: "Board", component: Board },
+            {
+                path: "/noticeInsert.page",
+                name: "noticeInsert",
+                component: noticeInsert,
+            },
+            {
+                path: "/noticeDetail.page",
+                name: "noticeDetail",
+                component: noticeDetail,
+            },
+            { path: "/Home.page", name: "Home", component: Home },
+            {
+                path: "/ClassDetail.page",
+                name: "ClassDetail",
+                component: ClassDetail,
+            },
+            {
+                path: "/StudentList.page",
+                name: "StudentList",
+                component: StudentList,
+            },
+            {
+                path: "/StudentDetail.page",
+                name: "StudentDetail",
+                component: StudentDetail,
+            },
+            {
+                path: "/C_Textbook.page",
+                name: "C_Textbook",
+                component: C_Textbook,
+            },
+            { path: "/textbook.page", name: "textbook", component: textbook },
+            {
+                path: "/TextBookDetail.page",
+                name: "TextBookDetail",
+                component: TextBookDetail,
+            },
+            {
+                path: "/C_TextBookDetail.page",
+                name: "C_TextBookDetail",
+                component: C_TextBookDetail,
+            },
+            { path: "/TextList.page", name: "TextList", component: TextList },
+            {
+                path: "/TextInsert.page",
+                name: "TextInsert",
+                component: TextInsert,
+            },
+            {
+                path: "/TextDetail.page",
+                name: "TextDetail",
+                component: TextDetail,
+            },
+            {
+                path: "/QuestionList.page",
+                name: "QuestionList",
+                component: QuestionList,
+            },
+            {
+                path: "/QuestionInsert.page",
+                name: "QuestionInsert",
+                component: QuestionInsert,
+            },
+            {
+                path: "/QuestionDetail.page",
+                name: "QuestionDetail",
+                component: QuestionDetail,
+            },
+            { path: "/VocaList.page", name: "VocaList", component: VocaList },
+            {
+                path: "/VocaInsert.page",
+                name: "VocaInsert",
+                component: VocaInsert,
+            },
+            {
+                path: "/VocaDetail.page",
+                name: "VocaDetail",
+                component: VocaDetail,
+            },
+            { path: "/ExamList.page", name: "ExamList", component: ExamList },
+            {
+                path: "/ExamDetail.page",
+                name: "ExamDetail",
+                component: ExamDetail,
+            },
+            {
+                path: "/ExamInsert.page",
+                name: "ExamInsert",
+                component: ExamInsert,
+            },
+            {
+                path: "/C_TextList.page",
+                name: "C_TextList",
+                component: C_TextList,
+            },
+            {
+                path: "/C_TextInsert.page",
+                name: "C_TextInsert",
+                component: C_TextInsert,
+            },
+            {
+                path: "/C_QuestionList.page",
+                name: "C_QuestionList",
+                component: C_QuestionList,
+            },
+            {
+                path: "/C_QuestionInsert.page",
+                name: "C_QuestionInsert",
+                component: C_QuestionInsert,
+            },
+            {
+                path: "/C_Voca_List.page",
+                name: "C_Voca_List",
+                component: C_Voca_List,
+            },
+            {
+                path: "/C_ExamList.page",
+                name: "C_ExamList",
+                component: C_ExamList,
+            },
+            {
+                path: "/C_ExamDetail.page",
+                name: "C_ExamDetail",
+                component: C_ExamDetail,
+            },
+            {
+                path: "/C_ExamInsert.page",
+                name: "C_ExamInsert",
+                component: C_ExamInsert,
+            },
+
+            { path: "/RoadMap.page", name: "RoadMap", component: RoadMap },
+
+            {
+                path: "/TextDetail.page",
+                name: "TextDetail",
+                component: TextDetail,
+            },
         ],
     },
 ];
@@ -224,4 +414,4 @@
     routes,
 });
 
-export default AppRouter;
(No newline at end of file)
+export default AppRouter;
client/views/pages/main/Chapter/Chapter1_2.vue
--- client/views/pages/main/Chapter/Chapter1_2.vue
+++ client/views/pages/main/Chapter/Chapter1_2.vue
@@ -21,7 +21,7 @@
                 <article class="flex align-start mb10">
                   <div class="icon mr40">
                     <img src="../../../../resources/img/img37_s.png" alt="">
-                    <p class="name">발화좌</p>
+                    <p class="name">발화자</p>
                   </div>
                   <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
                 </article>
@@ -29,13 +29,13 @@
                   <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
                   <div class="icon ">
                     <img src="../../../../resources/img/img37_s.png" alt="">
-                    <p class="name">발화좌</p>
+                    <p class="name">발화자</p>
                   </div>
                 </article>
                 <article class="flex align-start mb10">
                   <div class="icon mr40">
                     <img src="../../../../resources/img/img37_s.png" alt="">
-                    <p class="name">발화좌</p>
+                    <p class="name">발화자</p>
                   </div>
                   <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
                 </article>
@@ -43,7 +43,7 @@
                   <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
                   <div class="icon ">
                     <img src="../../../../resources/img/img37_s.png" alt="">
-                    <p class="name">발화좌</p>
+                    <p class="name">발화자</p>
                   </div>
                 </article>
               </div>
client/views/pages/main/Chapter/Chapter2_10.vue
--- client/views/pages/main/Chapter/Chapter2_10.vue
+++ client/views/pages/main/Chapter/Chapter2_10.vue
@@ -15,54 +15,53 @@
         <p class="title mt25 title-bg">step2</p>
           <div class="flex align-center mb30">
           <p class="subtitle2 mr20">방문이 자물쇠로 잠겨져 있네? 세 개 중에 맞는 열쇠 하나를 찾아줘!</p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button> -->
         </div>
 
         <div class="flex align-center justify-center" style="gap: 113px;">
           <div class="imgGroup">
             <div class="flex" style="gap: 60px;">
               <button><img src="../../../../resources/img/img82_42s.png" alt="">
-                <p>1</p>
+                <p>Tell me</p>
               </button>
               <button><img src="../../../../resources/img/img159_42s.png" alt=""></button>
               <button><img src="../../../../resources/img/img83_42s.png" alt="">
-                <p>1</p>
+                <p>Why</p>
               </button>
             </div>
-
           </div>
           <div class="pickGroup">
             <div>
-              <article  class="flex justify-center mb50" style="gap: 60px;">
+              <article class="flex justify-center mb50" style="gap: 60px;">
                 <img src="../../../../resources/img/img84_42s.png" alt="">
                 <div class="flex">
-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <p>1</p>
+                  <button @click="handleClick('You are so upset.', 1)">
+                    <img src="../../../../resources/img/img136_71s.png" alt="">
+                    <p :class="{ active: selectedButton === 1 }">1</p>
                   </button>
-                  <p>a</p>
+                  <p>You are so upset.</p>
                 </div>
               </article>
-              <article  class="flex justify-center mb50" style="gap: 60px;">
+              <article class="flex justify-center mb50" style="gap: 60px;">
                 <img src="../../../../resources/img/img85_42s.png" alt="">
                 <div class="flex">
-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <p>2</p>
+                  <button @click="handleClick('You is so upset.', 2)">
+                    <img src="../../../../resources/img/img136_71s.png" alt="">
+                    <p :class="{ active: selectedButton === 2 }">2</p>
                   </button>
-                  <p>a</p>
+                  <p>You is so upset.</p>
                 </div>
               </article>
-              <article  class="flex justify-center" style="gap: 60px;">
+              <article class="flex justify-center" style="gap: 60px;">
                 <img src="../../../../resources/img/img86_42s.png" alt="">
                 <div class="flex">
-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <p>3</p>
+                  <button @click="handleClick('You am so upset.', 3)">
+                    <img src="../../../../resources/img/img136_71s.png" alt="">
+                    <p :class="{ active: selectedButton === 3 }">3</p>
                   </button>
-                  <p>a</p>
+                  <p>You am so upset.</p>
                 </div>
               </article>
             </div>
-
           </div>
         </div>
       </div>
@@ -75,26 +74,26 @@
 export default {
   data() {
     return {
-    }
+      selectedButton: null, // 선택된 버튼을 추적하기 위한 데이터
+    };
   },
   methods: {
     goToPage(page) {
       this.$router.push({ name: page });
+    },
+    handleClick(text, buttonNumber) {
+      this.selectedButton = buttonNumber; // 선택된 버튼 번호를 저장
+
+      if (text === 'You are so upset.') {
+        alert('정답입니다!');
+      } else {
+        alert('오답입니다!');
+      }
     }
-  },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
   }
 }
 </script>
+
 <style scoped>
 .imgGroup{width: fit-content;}
 .imgGroup button {
@@ -112,7 +111,7 @@
   background: #ffffffb8;
   border-radius: 5px;
   padding: 10px;
-  font-size: 48px;
+  font-size: 23px;
   font-family: 'ONEMobilePOP';
 }
 
@@ -129,8 +128,18 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.pickGroup article img{object-fit: contain; width: -webkit-fill-available;}
-.pickGroup article >div >p {
-  font-size: 64px;
+
+.pickGroup article img {
+  object-fit: contain;
+  width: -webkit-fill-available;
 }
-</style>
(No newline at end of file)
+
+.pickGroup article >div >p {
+  font-size: 25px;
+  white-space: nowrap; /* 텍스트가 줄 바꿈 없이 한 줄로 표시되도록 설정 */
+}
+
+.pickGroup button p.active {
+  color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */
+}
+</style>
client/views/pages/main/Chapter/Chapter2_13.vue
--- client/views/pages/main/Chapter/Chapter2_13.vue
+++ client/views/pages/main/Chapter/Chapter2_13.vue
@@ -70,9 +70,9 @@
               </div>
                 </div>
                 <!-- 오답일 경우 아래의 이미지가 보여야함 -->
-                <div class="flex justify-center wrong-anwser" style="gap: 20px;">
+                <!-- <div class="flex justify-center wrong-anwser" style="gap: 20px;">
                   <img src="../../../../resources/img/img165_46s.png" alt="">
-                </div>
+                </div> -->
   
               </div>
             </div>
client/views/pages/main/Chapter/Chapter2_4.vue
--- client/views/pages/main/Chapter/Chapter2_4.vue
+++ client/views/pages/main/Chapter/Chapter2_4.vue
@@ -53,9 +53,9 @@
       return {
          items: [
             { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img59_36s.png', title: 'apple' },
-            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img58_36s.png', title: 'a'},
-            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img57_36s.png', title: 'a' },
-            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img56_36s.png', title: 'a' },
+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img58_36s.png', title: 'cloud'},
+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img57_36s.png', title: 'car' },
+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img56_36s.png', title: 'guitar' },
          ],
          selectedIndex: 0,
          timer: "00",
client/views/pages/main/Chapter/Chapter2_8.vue
--- client/views/pages/main/Chapter/Chapter2_8.vue
+++ client/views/pages/main/Chapter/Chapter2_8.vue
@@ -1,78 +1,154 @@
 <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>
-      <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_9')"><img src="../../../../resources/img/left.png" alt=""></div>
-        <div class="content title-box">
-          <p class="title mt25 title-bg">step2</p>
-          <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button> -->
-        </div>
-  
-          <div class="text-ct">
-          <div class="dropGroup flex align-center justify-center mt30">
-            <div style="position: relative;" >
-              <img src="../../../../resources/img/img28_s.png" alt="">
-              <button style="    left: 30px;
-    top: 167px;"><img src="../../../../resources/img/img29_s_01.png" alt=""><p>a</p></button>
-              <button style="     right: 409px;
-    top: 133px;"><img src="../../../../resources/img/img30_s_01.png" alt=""><p>a</p></button>
-              <button style=" right: 46px;
-    top: 128px;"><img src="../../../../resources/img/img31_s_01.png" alt=""><p>a</p></button>
-               
-            </div>
-          </div>
-          <div class="dragGroup ">
-            <div class="flex justify-center" style="gap: 20px;">
-              <article style="  right: 0;
-    top: 36%;  "><button><img src="../../../../resources/img/img29_s.png" alt=""><p>a</p></button></article>
-            <article style="  left: 0;
-    top: 36%;   "><button><img src="../../../../resources/img/img30_s.png" alt=""><p>a</p></button></article>
-            <article style="left: 50%;
-    top: 10%;"><button><img src="../../../../resources/img/img31_s.png" alt=""><p>a</p></button></article>
-            </div>
-            
-          </div>
-        </div>
-        </div>
-        <div class="next-btn" @click="goToPage('Chapter2_12')"><img src="../../../../resources/img/right.png" alt=""></div>
-      </div>
+  <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>
-  </template>
+    <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_9')"><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>
+        </div>
+
+        <div class="text-ct">
+          <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="This" 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="is" 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="a pen" style="right: 46px; top: 128px;">
+                <img src="../../../../resources/img/img31_s_01.png" alt="">
+                <p style="font-size: 35px;">?</p>
+              </button>
+            </div>
+          </div>
+          <div class="dragGroup flex justify-center" style="gap: 20px;">
+            <article style="right: 0; top: 36%;">
+              <button class="draggable" data-text="This" draggable="true">
+                <img src="../../../../resources/img/img29_s.png" alt="">
+                <p style="font-size: 35px;">This</p>
+              </button>
+            </article>
+            <article style="left: 0; top: 36%;">
+              <button class="draggable" data-text="is" draggable="true">
+                <img src="../../../../resources/img/img30_s.png" alt="">
+                <p style="font-size: 35px;">is</p>
+              </button>
+            </article>
+            <article style="left: 50%; top: 10%;">
+              <button class="draggable" data-text="a pen" draggable="true">
+                <img src="../../../../resources/img/img31_s.png" alt="">
+                <p style="font-size: 35px;">a pen</p>
+              </button>
+            </article>
+          </div>
+        </div>
+      </div>
+      <div class="next-btn" @click="goToPage('Chapter2_12')"><img src="../../../../resources/img/right.png" alt=""></div>
+    </div>
+  </div>
+</template>
+
   
-  <script>
-  export default {
-    data() {
-      return {
+<script>
+export default {
+  data() {
+    return {
+      draggedElement: null, // 현재 드래그 중인 요소
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    handleDragStart(event) {
+      this.draggedElement = event.target; // 드래그한 요소 저장
+      event.dataTransfer.setData('text/plain', event.target.dataset.text);
+      event.target.style.cursor = 'grabbing'; // 드래그 중 커서 변경
+    },
+    handleDragEnd(event) {
+      event.target.style.cursor = 'grab'; // 드래그 종료 후 커서 변경
+    },
+    handleDragOver(event) {
+      event.preventDefault(); // 드롭 허용
+    },
+    handleDrop(event) {
+      event.preventDefault();
+      const dropZone = event.target.closest('button.dropzone');
+      const draggedText = this.draggedElement ? this.draggedElement.dataset.text : '';
+
+      if (dropZone) {
+        const expectedText = dropZone.dataset.answer;
+        if (draggedText === expectedText) {
+          // 드래그된 텍스트가 정답인 경우
+          const rect = dropZone.getBoundingClientRect();
+          // 버튼의 이미지 및 텍스트를 드롭존에 맞게 설정
+          dropZone.querySelector('p').textContent = draggedText;
+          dropZone.querySelector('img').style.display = 'none'; // 기존 이미지 숨기기
+
+          // 드래그된 버튼의 이미지와 텍스트를 드롭존에 복사
+          const draggedImage = this.draggedElement.querySelector('img').cloneNode();
+          const draggedTextElement = this.draggedElement.querySelector('p').cloneNode();
+
+          // 드롭존에 이미지 및 텍스트를 추가
+          dropZone.appendChild(draggedImage);
+          dropZone.appendChild(draggedTextElement);
+
+          // 드래그한 요소 숨기기
+          this.draggedElement.style.display = 'none';
+        } else {
+          // 정답이 아닌 경우
+          alert('오답입니다!'); // 오답 경고 메시지
+        }
       }
-    },
-    methods: {
-      goToPage(page) {
-        this.$router.push({ name: page });
-      }
-    },
-    watch: {
-  
-    },
-    computed: {
-  
-    },
-    components: {
-    },
-    mounted() {
-      
+
+      this.draggedElement = null; // 드래그 상태 초기화
     }
+  },
+  mounted() {
+    // 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가
+    document.querySelectorAll('.draggable').forEach(button => {
+      button.addEventListener('dragstart', this.handleDragStart);
+      button.addEventListener('dragend', this.handleDragEnd);
+    });
+
+    // 드롭 가능한 영역에 드래그 오버 및 드롭 이벤트 추가
+    document.querySelectorAll('.dropzone').forEach(zone => {
+      zone.addEventListener('dragover', this.handleDragOver);
+      zone.addEventListener('drop', this.handleDrop);
+    });
   }
-  </script>
-  <style scoped>
+}
+</script>
+
+
+
+<style scoped>
+.draggable {
+  cursor: grab;
+}
+
+.draggable:active {
+  cursor: grabbing;
+}
+
+
+
+.dropzone img {
+  display: block; /* 이미지가 항상 보이도록 설정 */
+}
+
 </style>
(No newline at end of file)
client/views/pages/main/Chapter/Chapter2_9.vue
--- client/views/pages/main/Chapter/Chapter2_9.vue
+++ client/views/pages/main/Chapter/Chapter2_9.vue
@@ -1,5 +1,10 @@
 <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>
     <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>
@@ -24,9 +29,9 @@
                     </div>
                     <div class="flex align-start">
                       <div>
-                        <h3>sidewalk</h3>
+                        <h3>mountain</h3>
                         <div class="flex align-center mt10">
-                          <span class="title1">보도</span>
+                          <span class="title1">산</span>
                         </div>
                       </div>
                     </div>
@@ -37,9 +42,9 @@
                     </div>
                     <div class="flex align-start">
                       <div>
-                        <h3>sidewalk</h3>
+                        <h3>cat</h3>
                         <div class="flex align-center mt10">
-                          <span class="title1">보도</span>
+                          <span class="title1">고양이</span>
                         </div>
                       </div>
                     </div>
@@ -52,9 +57,9 @@
                     </div>
                     <div class="flex align-start">
                       <div>
-                        <h3>sidewalk</h3>
+                        <h3>watermelon</h3>
                         <div class="flex align-center mt10">
-                          <span class="title1">보도</span>
+                          <span class="title1">수박</span>
                         </div>
                       </div>
                     </div>
@@ -65,7 +70,7 @@
                     </div>
                     <div class="flex align-start">
                       <div>
-                        <h3>sidewalk</h3>
+                        <h3>america</h3>
                         <div class="flex align-center mt10">
                           <span class="title1">보도</span>
                         </div>
client/views/pages/main/Dashboard.vue
--- client/views/pages/main/Dashboard.vue
+++ client/views/pages/main/Dashboard.vue
@@ -278,11 +278,8 @@
                     </div>
                 </div>
             </article>
-
         </div>
-
     </div>
-
 </template>
 
 <script>
 
client/views/pages/main/Main_c.vue (added)
+++ client/views/pages/main/Main_c.vue
@@ -0,0 +1,27 @@
+<template>
+    <router-view />
+    <Footer></Footer>
+</template>
+
+<script>
+import Footer from "../../layout/Footer.vue";
+
+export default {
+    data() {
+        return {};
+    },
+    methods: {},
+    watch: {},
+    computed: {},
+    components: {
+        //   Header: Header,
+        // Menu: Menu,
+        Footer: Footer,
+        // Side_t:Side_t,
+    },
+    mounted() {
+        console.log("main mounted");
+    },
+};
+</script>
+<style scoped></style>
client/views/pages/teacher/C_Textbook.vue
--- client/views/pages/teacher/C_Textbook.vue
+++ client/views/pages/teacher/C_Textbook.vue
@@ -117,20 +117,23 @@
             }
         },
         bookDataSearch() {
-            const vm = this;
-            const searchPayload = {
-                keyword: vm.searchKeyword,
-            };
-            axios.post("/book/search.json", searchPayload)
-                .then(function (res) {
-                    console.log("bookDataSearch - response : ", res.data);
-                    vm.searchResults = res.data.result; // 검색 결과 저장
-                })
-                .catch(function (error) {
-                    console.log("bookSearch - error : ", error);
-                    alert("책이 존재하지 않습니다.");
-                });
-        },
+    const vm = this;
+    console.log("Search keyword:", vm.searchKeyword);
+    
+    const searchPayload = {
+        keyword: vm.searchKeyword,
+    };
+    
+    axios.post("/book/searchBookInClass.json", searchPayload)
+        .then(function (res) {
+            console.log("bookDataSearch - response : ", res.data);
+            vm.searchResults = res.data.result; // 검색 결과 저장
+        })
+        .catch(function (error) {
+            console.log("bookSearch - error : ", error);
+            alert("책이 존재하지 않습니다.");
+        });
+},
         stdClassesSelectList() {
             const vm = this;
             axios({
Add a comment
List