Commit @e845bd3792d553cca3205b2ab9621e3a57c75e50

[jichoi] 2024-08-08

240808 최정임 로드맵

@e845bd3792d553cca3205b2ab9621e3a57c75e50

2767c00

e845bd3

client/resources/css/style.css

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

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


   background-image: url('../img/img199_12p.png');
   width: 367px;
   height: 182px;
-  padding: 20px 46px 20px 31px;
+  padding: 20px 60px 20px 50px;
   color: #fff;
 }
 .mypage .textbook{font-family: 'ONEMobilePOPOTF';}

 .mypage .textbook .text {border-radius:  12px 12px 0px 0px; height: 68px;
 }
 .mypage .textbook .box{height: 199px; text-align: center; padding: 10px;}
-.mypage .textbook:nth-child(1) .text{background-color: #DB2B39;}
+.mypage .book-red .text{background-color: #DB2B39;}
 /* .mypage .textbook:nth-child(2) .text */
-.mypage .textbook:nth-child(3) .text{background-color:#2D7DD2;}
-.mypage .textbook:nth-child(4) .text{ background-color: #3066BE;}
-.mypage .textbook .box{height: 199px; text-align: center; padding: 10px;}
-.mypage .textbook:nth-child(1){border: #DB2B39 solid 6px;}
+.mypage .book-blue .text{background-color:#2D7DD2;}
+.mypage .book-navy .text{ background-color: #3066BE;}
+.mypage .book-gray > .text{ background-color: #F7F8F9;}
+.mypage .textbook .box{ text-align: center; padding: 10px;}
+.mypage .book-red{border: #DB2B39 solid 6px;}
 /* .mypage .textbook:nth-child(2) .text */
-.mypage .textbook:nth-child(3){border:#2D7DD2 solid 6px;}
-.mypage .textbook:nth-child(4){ border: #3066BE solid 6px;}
+.mypage .book-blue{border:#2D7DD2 solid 6px;}
+.mypage .book-navy{ border: #3066BE solid 6px;}
+.mypage .book-gray{ border: #8C8E92 solid 1px;}
 .mypage em.orange {
   color: #FFBA08;
 }

 .class .member::before{content: ""; background-image: url('../img/img171_82t.png'); width: 20px; height: 22px; position: absolute; left: -28px;}
 .class .btnGroup, .textbook .text .btnGroup {width: initial;}
 .class button, .textbook button{font-size: 19px; font-family: 'Pretendard-Regular';}
-.textbook{width: 300px; border: #FFBA08 solid 6px; border-radius: 20px;  font-size: 19px;}
+.textbook{width: 100%; border: #FFBA08 solid 6px; border-radius: 20px;  font-size: 19px;}
 .textbook-add{width: 300px; height: 354px; background-color: #F8F9FB; border: #75767A solid 2px; border-radius: 20px;  font-size: 19px;}
 .textbook .box{height: 250px;}
 .textbook .text{height: 97px; background-color: #FFBA08; border-radius: 0px 0px 12px 12px; padding: 20px;}

   background-color: #fff;
 
 }
+
+/* 로드맵 */
+.mypage .big{width: 48%; height: 100%;}
+.mypage .big > .text {
+  border-radius: 19px 19px 0px 0px; border-bottom: 1px solid #8C8E92;}
+  .mypage .big > .box{
+    overflow-x: auto;
+    margin: 4rem 3rem;
+    height: 100%;
+    max-height: calc(100% - 16rem);
+  }
+  .dropbox{
+    color: #8C8E92;
+    border: #8C8E92 dotted 1px;
+    background-color: #EAEDF4;
+    border-radius: 20px;
+    min-height: 20rem;
+  }
+  .dropbox p{line-height: 20rem;}
 /* ------------------------선생님 --------------------- */

2767c00

e845bd3

client/views/layout/Side_t.vue

--- client/views/layout/Side_t.vue

+++ client/views/layout/Side_t.vue


             <div>
                 <details>
                     <summary>교재 관리</summary>
-                    <router-link to="/Board.page" class="tpt">홈</router-link>
+                    <router-link to="/textbook.page" class="tpt">홈</router-link>
                     <router-link to="/Board.page" class="tpt">게시판</router-link>
                     <router-link to="/Board.page" class="tpt">학생목록</router-link>
                     <router-link to="/Board.page" class="tpt">교재</router-link>

2767c00

e845bd3

client/views/pages/AppRouter.js

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

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


 import VocaList from "./teacher/VocaList.vue";
 import ExamList from "./teacher/ExamList.vue";
 import ExamDetail from "./teacher/ExamDetail.vue";
+import RoadMap from "./teacher/RoadMap.vue";
 
 const routes = [
     { path: '/login.page', name: 'login', component: login },

             { path: '/VocaList.page', name: 'VocaList', component: VocaList },
             { path: '/ExamList.page', name: 'ExamList', component: ExamList },
             { path: '/ExamDetail.page', name: 'ExamDetail', component: ExamDetail },
+            { path: '/RoadMap.page', name: 'RoadMap', component: RoadMap },
         ],
     },
 ];

2767c00

e845bd3

client/views/pages/main/MyPage.vue

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

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


         </div>
         <div class=" mb30">
             <div class=" flex " style="gap: 50px;">
-                <div class="textbook">
+                <div class="textbook book-red">
                     <div class="text ">
                         <p class="title1" style="color: #fff;">포토북 랭킹</p>
                     </div>

                         <P class="title2 mt10">현재 30명 중 <em class="red">2등</em>입니다.</P>
                     </div>
                 </div>
-                <div class="textbook">
+                <div class="textbook ">
                     <div class="text ">
                         <p class="title1" style="color: #fff;">포토북 랭킹</p>
                     </div>

                         <P class="title2 mt10">현재 30명 중 <em class="yellow">2등</em>입니다.</P>
                     </div>
                 </div>
-                <div class="textbook">
+                <div class="textbook book-blue">
                     <div class="text ">
                         <p class="title1" style="color: #fff;">포토북 랭킹</p>
                     </div>

                         <P class="title2 mt10">현재 30명 중 <em class="blue">2등</em>입니다.</P>
                     </div>
                 </div>
-                <div class="textbook">
+                <div class="textbook book-navy">
                     <div class="text ">
                         <p class="title1" style="color: #fff;">포토북 랭킹</p>
                     </div>

2767c00

e845bd3

client/views/pages/teacher/ExamDetail.vue

--- client/views/pages/teacher/ExamDetail.vue

+++ client/views/pages/teacher/ExamDetail.vue

...	...	@@ -18,8 +18,8 @@
18	18	<tr>
19	19	<td>1</td>
20	20	<td>1</td>
21		- <td><button type="button" title="보기" class="new-btn">
22		- 보기
	21	+ <td><button type="button" title="수정" class="new-btn">
	22	+ 수정
23	23	</button></td>
24	24	</tr>
25	25	</tbody>

2767c00

e845bd3

client/views/pages/teacher/ExamList.vue

--- client/views/pages/teacher/ExamList.vue

+++ client/views/pages/teacher/ExamList.vue


                         <td></td>
                         <td></td>
                         <td></td>
-                        <td><button type="button" title="보기" class="new-btn"  @click="toggleRow">
+                        <td><button type="button" title="보기" class="new-btn" @click="goToPage('ExamDetail')">
                     보기
                 </button></td>
                         <td></td>
                     </tr>
-                    <tr :class="{ 'hidden-tr': !isRowVisible }" class="show-tr">
+                    <!-- <tr :class="{ 'hidden-tr': !isRowVisible }" class="show-tr">
                         <td colspan="7">
                             <div>
                                 <table>

                                 </table>
                             </div>
                         </td>
-                    </tr>
+                    </tr> -->
                 </tbody>
             </table>
             <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">

e845bd3

client/views/pages/teacher/RoadMap.vue (added)

+++ client/views/pages/teacher/RoadMap.vue

...	...	@@ -0,0 +1,166 @@
	1	+<template>
	2	+ <div class="title-box flex justify-between mb40">
	3	+ <p class="title">A반</p>
	4	+ <select name="" id="">
	5	+ <option value="">A 교재</option>
	6	+ </select>
	7	+ </div>
	8	+ <div class="board-wrap" style=" height: calc(100% - 16rem);">
	9	+ <label for="" class="title2">단원</label>
	10	+ <div class="table-pagination flex mt10">
	11	+ <button class="selected-btn">1</button>
	12	+ <button>2</button>
	13	+ <button>3</button>
	14	+ </div>
	15	+ <hr>
	16	+ <label for="" class="title2 ">1단원 로드맵 등록</label>
	17	+ <div class="search-wrap flex mb20 mt30">
	18	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	19	+ <option value="bbsTtl">제목</option>
	20	+ <option value="bbsCnt">내용</option>
	21	+ <option value="userNm">작성자</option>
	22	+ <option value="bbsCls">카테고리</option>
	23	+ </select>
	24	+ <input v-model="searchKeyword" type="text" placeholder="검색하세요." @keyup.enter="boardDataSearch" />
	25	+ <button type="button" @click="boardDataSearch()" title="게시글 검색">
	26	+ <img src="../../../resources/img/look_t.png" alt="" />
	27	+ </button>
	28	+ </div>
	29	+ <div class="flex justify-between align-center mypage mt10" style="height: calc(100% - 23rem);">
	30	+ <div class="textbook big book-gray">
	31	+ <div class="text ">
	32	+ <p class="title1">학습항목</p>
	33	+ </div>
	34	+ <div class="box flex-column" style="gap: 30px;">
	35	+ <!-- 지문 -->
	36	+ <div class="textbook book-red">
	37	+ <div class="text ">
	38	+ <p class="title1" style="color: #fff;">지문. 제목</p>
	39	+ </div>
	40	+ <div class="box">
	41	+
	42	+ <P class="title2 mt10">지문 내용</P>
	43	+ </div>
	44	+ </div>
	45	+ <!-- 단어 -->
	46	+ <div class="textbook ">
	47	+ <div class="text ">
	48	+ <p class="title1" style="color: #fff;">단어장1</p>
	49	+ </div>
	50	+ <div class="box">
	51	+
	52	+ <P class="title2 mt10">단어1</P>
	53	+ </div>
	54	+ </div>
	55	+ <!-- 문제 -->
	56	+ <div class="textbook book-blue">
	57	+ <div class="text ">
	58	+ <p class="title1" style="color: #fff;">문제1</p>
	59	+ </div>
	60	+ <div class="box">
	61	+
	62	+ <P class="title2 mt10">문제유형</P>
	63	+ <P class="title2 mt10">정답</P>
	64	+ </div>
	65	+ </div>
	66	+ <!-- 평가 -->
	67	+ <div class="textbook book-navy">
	68	+ <div class="text ">
	69	+ <p class="title1" style="color: #fff;">평가1</p>
	70	+ </div>
	71	+ <div class="box">
	72	+
	73	+ <P class="title2 mt10">평가 내용</P>
	74	+ </div>
	75	+ </div>
	76	+ </div>
	77	+ </div>
	78	+ <div class="textbook big book-gray">
	79	+ <div class="text ">
	80	+ <p class="title1">로드맵</p>
	81	+ </div>
	82	+ <div class="box flex-column" style="gap: 10px;">
	83	+ <div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div>
	84	+ <div class="text-ct"><svg-icon type="mdi" :path="mdilArrowDown" style="width: 40px; height: 40px; color: #8C8E92;"></svg-icon></div>
	85	+ <div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div>
	86	+ <div class="text-ct"><svg-icon type="mdi" :path="mdilArrowDown" style="width: 40px; height: 40px; color: #8C8E92;"></svg-icon></div>
	87	+ <div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div>
	88	+ </div>
	89	+ </div>
	90	+ </div>
	91	+
	92	+ </div>
	93	+ <div class="flex justify-end mt30" style="gap: 10px;">
	94	+ <!-- <button type="button" title="" class="new-btn" @click="showConfirm('delete')">
	95	+ 추가
	96	+ </button> -->
	97	+ <button type="button" title="" class="new-btn" @click="goToPage('TextBookDetail')">
	98	+ 취소
	99	+ </button>
	100	+ <button type="button" title="" class="new-btn" @click="goToPage('TextBookDetail')">
	101	+ 등록
	102	+ </button>
	103	+ </div>
	104	+</template>
	105	+
	106	+<script>
	107	+import SvgIcon from '@jamescoyle/vue-icon';
	108	+import { mdiMagnify, mdilArrowRight } from '@mdi/js';
	109	+import { mdilArrowDown } from '@mdi/light-js';
	110	+import ProgressBar from '../../component/ProgressBar.vue';
	111	+
	112	+
	113	+export default {
	114	+ data() {
	115	+ return {
	116	+ mdilArrowDown: mdilArrowDown,
	117	+ mdiMagnify: mdiMagnify,
	118	+ mdilArrowRight: mdilArrowRight,
	119	+ timer: "00:00",
	120	+ progress: 20
	121	+ }
	122	+ },
	123	+ methods: {
	124	+ goToPage(page) {
	125	+ this.$router.push({ name: page });
	126	+ },
	127	+ increaseProgress() {
	128	+ if (this.progress < 100) {
	129	+ this.progress += 10;
	130	+ }
	131	+ },
	132	+ showConfirm(type) {
	133	+ let message = '';
	134	+ if (type === 'delete') {
	135	+ message = '삭제하시겠습니까?';
	136	+ } else if (type === 'reset') {
	137	+ message = '초기화하시겠습니까?';
	138	+ } else if (type === 'save') {
	139	+ message = '등록하시겠습니까?';
	140	+ }
	141	+
	142	+ if (confirm(message)) {
	143	+ this.goBack();
	144	+ }
	145	+ },
	146	+ },
	147	+ watch: {
	148	+
	149	+ },
	150	+ computed: {
	151	+
	152	+ },
	153	+ components: {
	154	+ SvgIcon,
	155	+ ProgressBar
	156	+ },
	157	+ mounted() {
	158	+ console.log('Main2 mounted');
	159	+ }
	160	+}
	161	+</script>
	162	+<style scoped>
	163	+.search-wrap button {
	164	+ right: 83rem;
	165	+}
	166	+</style>(No newline at end of file)

2767c00

e845bd3

client/views/pages/teacher/TextBookDetail.vue

--- client/views/pages/teacher/TextBookDetail.vue

+++ client/views/pages/teacher/TextBookDetail.vue


 <template>
     <div class="title-box flex justify-between mb40">
-        <p class="title">교재 관리</p>
+        <p class="title">A반</p>
         <select name="" id="">
             <option value="">A 교재</option>
         </select>

             </div>
         </div>
     </div>
-    <div class="flex justify-end mt30">
+    <div class="flex justify-end mt30" style="gap: 10px;">
+        <!-- <button type="button" title="" class="new-btn" @click="showConfirm('delete')">
+            추가
+        </button> -->
+        <button type="button" title="" class="new-btn" @click="goToPage('RoadMap')">
+            로드맵
+        </button>
         <button type="button" title="" class="new-btn" @click="showConfirm('delete')">
             삭제
         </button>

Add a comment

Open 0
Closed 0

List

...	...	@@ -277,7 +277,7 @@
277	277	background-image: url('../img/img199_12p.png');
278	278	width: 367px;
279	279	height: 182px;
280		- padding: 20px 46px 20px 31px;
	280	+ padding: 20px 60px 20px 50px;
281	281	color: #fff;
282	282	}
283	283	.mypage .textbook{font-family: 'ONEMobilePOPOTF';}
...	...	@@ -285,15 +285,17 @@
285	285	.mypage .textbook .text {border-radius: 12px 12px 0px 0px; height: 68px;
286	286	}
287	287	.mypage .textbook .box{height: 199px; text-align: center; padding: 10px;}
288		-.mypage .textbook:nth-child(1) .text{background-color: #DB2B39;}
	288	+.mypage .book-red .text{background-color: #DB2B39;}
289	289	/* .mypage .textbook:nth-child(2) .text */
290		-.mypage .textbook:nth-child(3) .text{background-color:#2D7DD2;}
291		-.mypage .textbook:nth-child(4) .text{ background-color: #3066BE;}
292		-.mypage .textbook .box{height: 199px; text-align: center; padding: 10px;}
293		-.mypage .textbook:nth-child(1){border: #DB2B39 solid 6px;}
	290	+.mypage .book-blue .text{background-color:#2D7DD2;}
	291	+.mypage .book-navy .text{ background-color: #3066BE;}
	292	+.mypage .book-gray > .text{ background-color: #F7F8F9;}
	293	+.mypage .textbook .box{ text-align: center; padding: 10px;}
	294	+.mypage .book-red{border: #DB2B39 solid 6px;}
294	295	/* .mypage .textbook:nth-child(2) .text */
295		-.mypage .textbook:nth-child(3){border:#2D7DD2 solid 6px;}
296		-.mypage .textbook:nth-child(4){ border: #3066BE solid 6px;}
	296	+.mypage .book-blue{border:#2D7DD2 solid 6px;}
	297	+.mypage .book-navy{ border: #3066BE solid 6px;}
	298	+.mypage .book-gray{ border: #8C8E92 solid 1px;}
297	299	.mypage em.orange {
298	300	color: #FFBA08;
299	301	}
...	...	@@ -860,7 +862,7 @@
860	862	.class .member::before{content: ""; background-image: url('../img/img171_82t.png'); width: 20px; height: 22px; position: absolute; left: -28px;}
861	863	.class .btnGroup, .textbook .text .btnGroup {width: initial;}
862	864	.class button, .textbook button{font-size: 19px; font-family: 'Pretendard-Regular';}
863		-.textbook{width: 300px; border: #FFBA08 solid 6px; border-radius: 20px; font-size: 19px;}
	865	+.textbook{width: 100%; border: #FFBA08 solid 6px; border-radius: 20px; font-size: 19px;}
864	866	.textbook-add{width: 300px; height: 354px; background-color: #F8F9FB; border: #75767A solid 2px; border-radius: 20px; font-size: 19px;}
865	867	.textbook .box{height: 250px;}
866	868	.textbook .text{height: 97px; background-color: #FFBA08; border-radius: 0px 0px 12px 12px; padding: 20px;}
...	...	@@ -1025,4 +1027,23 @@
1025	1027	background-color: #fff;
1026	1028
1027	1029	}
	1030	+
	1031	+/* 로드맵 */
	1032	+.mypage .big{width: 48%; height: 100%;}
	1033	+.mypage .big > .text {
	1034	+ border-radius: 19px 19px 0px 0px; border-bottom: 1px solid #8C8E92;}
	1035	+ .mypage .big > .box{
	1036	+ overflow-x: auto;
	1037	+ margin: 4rem 3rem;
	1038	+ height: 100%;
	1039	+ max-height: calc(100% - 16rem);
	1040	+ }
	1041	+ .dropbox{
	1042	+ color: #8C8E92;
	1043	+ border: #8C8E92 dotted 1px;
	1044	+ background-color: #EAEDF4;
	1045	+ border-radius: 20px;
	1046	+ min-height: 20rem;
	1047	+ }
	1048	+ .dropbox p{line-height: 20rem;}
1028	1049	/* ------------------------선생님 --------------------- */ (No newline at end of file)

...	...	@@ -32,7 +32,7 @@
32	32	<div>
33	33	<details>
34	34	<summary>교재 관리</summary>
35		- <router-link to="/Board.page" class="tpt">홈</router-link>
	35	+ <router-link to="/textbook.page" class="tpt">홈</router-link>
36	36	<router-link to="/Board.page" class="tpt">게시판</router-link>
37	37	<router-link to="/Board.page" class="tpt">학생목록</router-link>
38	38	<router-link to="/Board.page" class="tpt">교재</router-link>

...	...	@@ -76,6 +76,7 @@
76	76	import VocaList from "./teacher/VocaList.vue";
77	77	import ExamList from "./teacher/ExamList.vue";
78	78	import ExamDetail from "./teacher/ExamDetail.vue";
	79	+import RoadMap from "./teacher/RoadMap.vue";
79	80
80	81	const routes = [
81	82	{ path: '/login.page', name: 'login', component: login },
...	...	@@ -176,6 +177,7 @@
176	177	{ path: '/VocaList.page', name: 'VocaList', component: VocaList },
177	178	{ path: '/ExamList.page', name: 'ExamList', component: ExamList },
178	179	{ path: '/ExamDetail.page', name: 'ExamDetail', component: ExamDetail },
	180	+ { path: '/RoadMap.page', name: 'RoadMap', component: RoadMap },
179	181	],
180	182	},
181	183	];

...	...	@@ -74,7 +74,7 @@
74	74	</div>
75	75	<div class=" mb30">
76	76	<div class=" flex " style="gap: 50px;">
77		- <div class="textbook">
	77	+ <div class="textbook book-red">
78	78	<div class="text ">
79	79	<p class="title1" style="color: #fff;">포토북 랭킹</p>
80	80	</div>
...	...	@@ -83,7 +83,7 @@
83	83	<P class="title2 mt10">현재 30명 중 <em class="red">2등</em>입니다.</P>
84	84	</div>
85	85	</div>
86		- <div class="textbook">
	86	+ <div class="textbook ">
87	87	<div class="text ">
88	88	<p class="title1" style="color: #fff;">포토북 랭킹</p>
89	89	</div>
...	...	@@ -92,7 +92,7 @@
92	92	<P class="title2 mt10">현재 30명 중 <em class="yellow">2등</em>입니다.</P>
93	93	</div>
94	94	</div>
95		- <div class="textbook">
	95	+ <div class="textbook book-blue">
96	96	<div class="text ">
97	97	<p class="title1" style="color: #fff;">포토북 랭킹</p>
98	98	</div>
...	...	@@ -101,7 +101,7 @@
101	101	<P class="title2 mt10">현재 30명 중 <em class="blue">2등</em>입니다.</P>
102	102	</div>
103	103	</div>
104		- <div class="textbook">
	104	+ <div class="textbook book-navy">
105	105	<div class="text ">
106	106	<p class="title1" style="color: #fff;">포토북 랭킹</p>
107	107	</div>

...	...	@@ -36,12 +36,12 @@
36	36	<td></td>
37	37	<td></td>
38	38	<td></td>
39		- <td><button type="button" title="보기" class="new-btn" @click="toggleRow">
	39	+ <td><button type="button" title="보기" class="new-btn" @click="goToPage('ExamDetail')">
40	40	보기
41	41	</button></td>
42	42	<td></td>
43	43	</tr>
44		- <tr :class="{ 'hidden-tr': !isRowVisible }" class="show-tr">
	44	+ <!-- <tr :class="{ 'hidden-tr': !isRowVisible }" class="show-tr">
45	45	<td colspan="7">
46	46	<div>
47	47	<table>
...	...	@@ -67,7 +67,7 @@
67	67	</table>
68	68	</div>
69	69	</td>
70		- </tr>
	70	+ </tr> -->
71	71	</tbody>
72	72	</table>
73	73	<article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3		- <p class="title">교재 관리</p>
	3	+ <p class="title">A반</p>
4	4	<select name="" id="">
5	5	<option value="">A 교재</option>
6	6	</select>
...	...	@@ -49,7 +49,13 @@
49	49	</div>
50	50	</div>
51	51	</div>
52		- <div class="flex justify-end mt30">
	52	+ <div class="flex justify-end mt30" style="gap: 10px;">
	53	+ <!-- <button type="button" title="" class="new-btn" @click="showConfirm('delete')">
	54	+ 추가
	55	+ </button> -->
	56	+ <button type="button" title="" class="new-btn" @click="goToPage('RoadMap')">
	57	+ 로드맵
	58	+ </button>
53	59	<button type="button" title="" class="new-btn" @click="showConfirm('delete')">
54	60	삭제
55	61	</button>

Delete comment