
Merge branch 'master' of http://210.180.118.83/jichoi/lms_front
@48ccb40af180b14c5bf708ca71faca2620e95670
--- client/resources/css/style.css
+++ client/resources/css/style.css
... | ... | @@ -441,10 +441,15 @@ |
441 | 441 |
width: 1063px; |
442 | 442 |
} |
443 | 443 |
|
444 |
-.rabbit { |
|
444 |
+.rabbit-start { |
|
445 | 445 |
position: absolute; |
446 | 446 |
top: -45px; |
447 | 447 |
left: 393px; |
448 |
+} |
|
449 |
+.rabbit-end { |
|
450 |
+ position: absolute; |
|
451 |
+ bottom: 24px; |
|
452 |
+ right: 40px; |
|
448 | 453 |
} |
449 | 454 |
|
450 | 455 |
.rabbit img { |
... | ... | @@ -470,6 +475,13 @@ |
470 | 475 |
.race-btn p.long { |
471 | 476 |
width: fit-content; |
472 | 477 |
} |
478 |
+/* .popup-yellow{ |
|
479 |
+ background-image: url('../img/img139_72s.png'); |
|
480 |
+ min-width: 439px !important; |
|
481 |
+ min-height: 244px !important; |
|
482 |
+ background-color: transparent !important; |
|
483 |
+ border: 0 !important; |
|
484 |
+} */ |
|
473 | 485 |
/* 사진촬영 */ |
474 | 486 |
.camera{background-color: #000;} |
475 | 487 |
.camera .header{height: 110px; background-color: #eaedf4; padding: 0 60px;} |
... | ... | @@ -500,6 +512,20 @@ |
500 | 512 |
.complete-wrap img{width: inherit;} |
501 | 513 |
.complete-wrap .photo{cursor: pointer; width: 200px; height: 130px; } |
502 | 514 |
/* 챕터 */ |
515 |
+.time-hint{ |
|
516 |
+ position: absolute; |
|
517 |
+ top: 50px; |
|
518 |
+ right: 50px; |
|
519 |
+ text-align: center; |
|
520 |
+} |
|
521 |
+.hint-btn{ |
|
522 |
+ background-image: url('../img/btn01.png'); |
|
523 |
+ width: 110px; |
|
524 |
+ height: 45px; |
|
525 |
+ padding: 5px 20px; |
|
526 |
+ font-size: 28px; |
|
527 |
+ font-family: 'ONEMobilePOP'; |
|
528 |
+} |
|
503 | 529 |
.content-wrap { |
504 | 530 |
margin: 90px 60px 0 60px; |
505 | 531 |
|
... | ... | @@ -741,9 +767,6 @@ |
741 | 767 |
width: 560px; |
742 | 768 |
} |
743 | 769 |
.time-bg{ |
744 |
- position: absolute; |
|
745 |
- top: 50px; |
|
746 |
- right: 50px; |
|
747 | 770 |
text-align: center; |
748 | 771 |
font-family: 'neodgm'; background-image: url('../img/img55_s.png'); width: 110px; height: 128px;} |
749 | 772 |
.time-bg > div{position: relative;} |
+++ client/resources/img/img222_57s.png
Binary file is not shown |
--- client/views/layout/Side.vue
+++ client/views/layout/Side.vue
... | ... | @@ -4,7 +4,7 @@ |
4 | 4 |
<div class="profile mb30"> |
5 | 5 |
<div class="flex align-start"> |
6 | 6 |
<img src="../../resources/img/img16_s.png" alt=""> |
7 |
- <div class="ml25" style="width: 100%;"> |
|
7 |
+ <div class="ml25" > |
|
8 | 8 |
<p class="name mb10">학생이름</p> |
9 | 9 |
<p class="mb5">xx중학교 3학년 x반</p> |
10 | 10 |
<progress-bar :progress="progress"></progress-bar> |
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
... | ... | @@ -35,6 +35,7 @@ |
35 | 35 |
import Chapter3_1 from "./main/Chapter/Chapter3_1.vue"; |
36 | 36 |
import Chapter3_2 from "./main/Chapter/Chapter3_2.vue"; |
37 | 37 |
import Chapter3_3 from "./main/Chapter/Chapter3_3.vue"; |
38 |
+import Chapter3_3_1 from "./main/Chapter/Chapter3_3_1.vue"; |
|
38 | 39 |
import Chapter3_4 from "./main/Chapter/Chapter3_4.vue"; |
39 | 40 |
import Chapter3_5 from "./main/Chapter/Chapter3_5.vue"; |
40 | 41 |
import Chapter3_6 from "./main/Chapter/Chapter3_6.vue"; |
... | ... | @@ -146,6 +147,7 @@ |
146 | 147 |
{ path: '/Chapter3_1.page', name: 'Chapter3_1', component: Chapter3_1 }, |
147 | 148 |
{ path: '/Chapter3_2.page', name: 'Chapter3_2', component: Chapter3_2 }, |
148 | 149 |
{ path: '/Chapter3_3.page', name: 'Chapter3_3', component: Chapter3_3 }, |
150 |
+ { path: '/Chapter3_3_1.page', name: 'Chapter3_3_1', component: Chapter3_3_1 }, |
|
149 | 151 |
{ path: '/Chapter3_4.page', name: 'Chapter3_4', component: Chapter3_4 }, |
150 | 152 |
{ path: '/Chapter3_5.page', name: 'Chapter3_5', component: Chapter3_5 }, |
151 | 153 |
{ path: '/Chapter3_6.page', name: 'Chapter3_6', component: Chapter3_6 }, |
--- client/views/pages/main/Chapter/Chapter3_1.vue
+++ client/views/pages/main/Chapter/Chapter3_1.vue
... | ... | @@ -15,14 +15,17 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class="flex align-center justify-center" style="gap: 113px;"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
23 | 26 |
</div> |
24 | 27 |
</div> |
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="pickGroup "> |
27 | 30 |
<div class="flex" style="gap: 250px;"> |
28 | 31 |
<article class="text-ct"> |
... | ... | @@ -108,7 +111,6 @@ |
108 | 111 |
|
109 | 112 |
.pickGroup button { |
110 | 113 |
position: relative; |
111 |
- margin-right: 30px; |
|
112 | 114 |
} |
113 | 115 |
|
114 | 116 |
.pickGroup button p { |
--- client/views/pages/main/Chapter/Chapter3_10.vue
+++ client/views/pages/main/Chapter/Chapter3_10.vue
... | ... | @@ -15,14 +15,17 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class="text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="imgGroup mt20"> |
27 | 30 |
<img src="../../../../resources/img/img116_59s.png" alt=""> |
28 | 31 |
<p class="title1 mt10" style="width: auto;"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p> |
--- client/views/pages/main/Chapter/Chapter3_11.vue
+++ client/views/pages/main/Chapter/Chapter3_11.vue
... | ... | @@ -15,14 +15,17 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class="text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="imgGroup mt20"> |
27 | 30 |
<img src="../../../../resources/img/img115_58s.png" alt=""> |
28 | 31 |
<!-- <p class="title1 mt10"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p> --> |
--- client/views/pages/main/Chapter/Chapter3_12.vue
+++ client/views/pages/main/Chapter/Chapter3_12.vue
... | ... | @@ -15,14 +15,17 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class=" text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="dragGroup mt40"> |
27 | 30 |
<div class="flex justify-center" style="gap: 20px;"> |
28 | 31 |
<button><img src="../../../../resources/img/img63_37s.png" alt=""> |
--- client/views/pages/main/Chapter/Chapter3_13.vue
+++ client/views/pages/main/Chapter/Chapter3_13.vue
... | ... | @@ -15,14 +15,17 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class="text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="flex justify-center "> |
27 | 30 |
<div class=" flex justify-between align-center" style="width: 50%;"> |
28 | 31 |
<div class="pickGroup left"> |
--- client/views/pages/main/Chapter/Chapter3_14.vue
+++ client/views/pages/main/Chapter/Chapter3_14.vue
... | ... | @@ -15,14 +15,17 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class="text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="imgGroup"><img src="../../../../resources/img/img124_63s.png" alt=""></div> |
27 | 30 |
|
28 | 31 |
<div class="dropGroup flex align-center justify-center mt30"> |
--- client/views/pages/main/Chapter/Chapter3_15.vue
+++ client/views/pages/main/Chapter/Chapter3_15.vue
... | ... | @@ -9,39 +9,33 @@ |
9 | 9 |
<div class="content title-box"> |
10 | 10 |
<p class="title mt25 title-bg">step3</p> |
11 | 11 |
<div class="flex align-center mb30"> |
12 |
- <p class="subtitle2 mr20">그림에 알맞는 낱말을 쓰세요.</p> |
|
13 |
- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
14 |
- </button> --> |
|
12 |
+ <p class="subtitle2 mr20">듣고 올바른 대답을 말해보세요!</p> |
|
13 |
+ <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
14 |
+ </button> |
|
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class="text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="imgGroup"><img src="../../../../resources/img/img125_64s.png" alt=""></div> |
27 | 30 |
|
28 | 31 |
<div class="dropGroup flex align-center justify-center mt30"> |
29 |
- <div class="flex" style="gap: 20px;"> |
|
30 |
- <div class="bd-bt textbox" @click="showButton(1)"> |
|
31 |
- <p v-if="showButton1">A</p></div> |
|
32 |
- <div class="bd-bt textbox" @click="showButton(2)"> |
|
33 |
- <p v-if="showButton2">A</p></div> |
|
34 |
- <div class="bd-bt textbox" @click="showButton(3)"> |
|
35 |
- <p v-if="showButton3">A</p></div> |
|
36 |
- <div class="bd-bt textbox" @click="showButton(4)"> |
|
37 |
- <p v-if="showButton4">A</p></div> |
|
38 |
- </div> |
|
32 |
+ <img src="../../../../resources/img/btn18_64s_normal.png" alt=""> |
|
39 | 33 |
|
40 | 34 |
</div> |
41 | 35 |
|
42 | 36 |
</div> |
43 | 37 |
</div> |
44 |
- <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt=""></div> |
|
38 |
+ <div class="next-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/right.png" alt=""></div> |
|
45 | 39 |
</div> |
46 | 40 |
</div> |
47 | 41 |
</template> |
--- client/views/pages/main/Chapter/Chapter3_16.vue
+++ client/views/pages/main/Chapter/Chapter3_16.vue
... | ... | @@ -5,7 +5,7 @@ |
5 | 5 |
<span class="subtitle">my name is dd</span> |
6 | 6 |
</div> |
7 | 7 |
<div class="flex justify-between align-center"> |
8 |
- <div class="pre-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/left.png" alt=""></div> |
|
8 |
+ <div class="pre-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/left.png" alt=""></div> |
|
9 | 9 |
<div class="content title-box"> |
10 | 10 |
<p class="title mt25 title-bg">중간 평가 설문 조사</p> |
11 | 11 |
<div class="flex align-center mb30"> |
--- client/views/pages/main/Chapter/Chapter3_2.vue
+++ client/views/pages/main/Chapter/Chapter3_2.vue
... | ... | @@ -15,14 +15,17 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class="text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="imgGroup "> |
27 | 30 |
<img src="../../../../resources/img/img109_51s.png" alt=""> |
28 | 31 |
</div> |
--- client/views/pages/main/Chapter/Chapter3_3.vue
+++ client/views/pages/main/Chapter/Chapter3_3.vue
... | ... | @@ -13,14 +13,17 @@ |
13 | 13 |
</div> |
14 | 14 |
|
15 | 15 |
<div class="text-ct"> |
16 |
- <div class="time-bg"> |
|
17 |
- <div> |
|
18 |
- <div class="time"> |
|
19 |
- <p class="second">{{ timer }}</p> |
|
20 |
- <p class="text">sec</p> |
|
16 |
+ <div class="time-hint"> |
|
17 |
+ <button class="hint-btn">HINT</button> |
|
18 |
+ <div class="time-bg mt20"> |
|
19 |
+ <div> |
|
20 |
+ <div class="time"> |
|
21 |
+ <p class="second">{{ timer }}</p> |
|
22 |
+ <p class="text">sec</p> |
|
23 |
+ </div> |
|
24 |
+ </div> |
|
21 | 25 |
</div> |
22 |
- </div> |
|
23 |
- </div> |
|
26 |
+ </div> |
|
24 | 27 |
<div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;"> |
25 | 28 |
<article style="gap: 60px; bottom: 159px; |
26 | 29 |
left: 242px;"> |
... | ... | @@ -43,7 +46,7 @@ |
43 | 46 |
</div> |
44 | 47 |
</div> |
45 | 48 |
</div> |
46 |
- <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt=""></div> |
|
49 |
+ <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt=""></div> |
|
47 | 50 |
</div> |
48 | 51 |
</div> |
49 | 52 |
</template> |
+++ client/views/pages/main/Chapter/Chapter3_3_1.vue
... | ... | @@ -0,0 +1,150 @@ |
1 | +<template> | |
2 | + <div id="Chapter1_1" class="content-wrap"> | |
3 | + <div class="title-box mb25 flex align-center mt40"> | |
4 | + <span class="title mr40">1. Hello WORLD</span> | |
5 | + <span class="subtitle">my name is dd</span> | |
6 | + </div> | |
7 | + <div class="flex justify-between align-center"> | |
8 | + <div class="pre-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/left.png" alt=""></div> | |
9 | + <div class="content title-box"> | |
10 | + <p class="title mt25 title-bg">step3.</p> | |
11 | + <div class="flex align-center mb30"> | |
12 | + <p class="subtitle2 mr20">1. see the picture</p> | |
13 | + <button><img src="../../../../resources/img/btn10_s.png" alt=""> | |
14 | + </button> | |
15 | + </div> | |
16 | + | |
17 | + <div class="text-ct"> | |
18 | + <div class="time-hint"> | |
19 | + <button class="hint-btn">HINT</button> | |
20 | + <div class="time-bg mt20"> | |
21 | + <div> | |
22 | + <div class="time"> | |
23 | + <p class="second">{{ timer }}</p> | |
24 | + <p class="text">sec</p> | |
25 | + </div> | |
26 | + </div> | |
27 | + </div> | |
28 | + </div> | |
29 | + <div class="imgGroup "> | |
30 | + <img src="../../../../resources/img/img109_51s.png" alt=""> | |
31 | + </div> | |
32 | + | |
33 | + <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;"> | |
34 | + <article style="gap: 60px; bottom: 159px; | |
35 | + left: 242px;"> | |
36 | + <div class="flex align-center"> | |
37 | + <button><img src="../../../../resources/img/img136_71s.png" alt=""> | |
38 | + <p>1</p> | |
39 | + </button> | |
40 | + <img src="../../../../resources/img/img122_62s.png" alt=""> | |
41 | + </div> | |
42 | + </article> | |
43 | + <article style="gap: 60px; bottom: 159px; | |
44 | + right: 559px;"> | |
45 | + <div class="flex align-center"> | |
46 | + <button><img src="../../../../resources/img/img136_71s.png" alt=""> | |
47 | + <p>2</p> | |
48 | + </button> | |
49 | + <img src="../../../../resources/img/img123_62s.png" alt=""> | |
50 | + </div> | |
51 | + </article> | |
52 | + <article style="gap: 60px; bottom: 159px; | |
53 | + right: 559px;"> | |
54 | + <div class="flex align-center"> | |
55 | + <button><img src="../../../../resources/img/img136_71s.png" alt=""> | |
56 | + <p>3</p> | |
57 | + </button> | |
58 | + <img src="../../../../resources/img/img121_62s.png" alt=""> | |
59 | + </div> | |
60 | + </article> | |
61 | + </div> | |
62 | + </div> | |
63 | + </div> | |
64 | + <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt=""></div> | |
65 | + </div> | |
66 | + </div> | |
67 | +</template> | |
68 | + | |
69 | +<script> | |
70 | +export default { | |
71 | + data() { | |
72 | + return { | |
73 | + timer: '00' | |
74 | + } | |
75 | + }, | |
76 | + methods: { | |
77 | + goToPage(page) { | |
78 | + this.$router.push({ name: page }); | |
79 | + }, | |
80 | + startTimer() { | |
81 | + if (this.intervalId) { | |
82 | + clearInterval(this.intervalId); | |
83 | + } | |
84 | + this.timer = 5; | |
85 | + this.intervalId = setInterval(() => { | |
86 | + if (this.timer > 0) { | |
87 | + this.timer--; | |
88 | + } else { | |
89 | + clearInterval(this.intervalId); | |
90 | + } | |
91 | + }, 1000); | |
92 | + } | |
93 | + }, | |
94 | + watch: { | |
95 | + | |
96 | + }, | |
97 | + computed: { | |
98 | + | |
99 | + }, | |
100 | + components: { | |
101 | + }, | |
102 | + mounted() { | |
103 | + | |
104 | + } | |
105 | +} | |
106 | +</script> | |
107 | +<style scoped> | |
108 | +.inputbox { | |
109 | + font-size: 38px; | |
110 | + font-family: 'Pretendard-ExtraBold'; | |
111 | +} | |
112 | + | |
113 | +.imgGroup button { | |
114 | + position: relative; | |
115 | +} | |
116 | + | |
117 | +.imgGroup button p, | |
118 | +.textbox p { | |
119 | + position: absolute; | |
120 | + top: 50%; | |
121 | + left: 50%; | |
122 | + transform: translate(-50%, -50%); | |
123 | + width: fit-content; | |
124 | + height: fit-content; | |
125 | + background: #ffffffb8; | |
126 | + border-radius: 5px; | |
127 | + padding: 10px; | |
128 | + font-size: 48px; | |
129 | + font-family: 'ONEMobilePOP'; | |
130 | +} | |
131 | + | |
132 | +.pickGroup p { | |
133 | + font-size: 34px; | |
134 | + font-weight: bold; | |
135 | +} | |
136 | + | |
137 | +.pickGroup button { | |
138 | + position: relative; | |
139 | + margin-right: 30px; | |
140 | +} | |
141 | + | |
142 | +.pickGroup button p { | |
143 | + font-size: 34px; | |
144 | + color: #c6c6c6; | |
145 | + position: absolute; | |
146 | + top: 50%; | |
147 | + left: 50%; | |
148 | + transform: translate(-50%, -50%); | |
149 | +} | |
150 | +</style>(No newline at end of file) |
--- client/views/pages/main/Chapter/Chapter3_4.vue
+++ client/views/pages/main/Chapter/Chapter3_4.vue
... | ... | @@ -5,7 +5,7 @@ |
5 | 5 |
<span class="subtitle">my name is dd</span> |
6 | 6 |
</div> |
7 | 7 |
<div class="flex justify-between align-center"> |
8 |
- <div class="pre-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/left.png" alt=""></div> |
|
8 |
+ <div class="pre-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/left.png" alt=""></div> |
|
9 | 9 |
<div class="content title-box"> |
10 | 10 |
<p class="title mt25 title-bg">step3.</p> |
11 | 11 |
<div class="flex align-center mb30"> |
... | ... | @@ -15,14 +15,17 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class="text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="pickGroup flex align-center justify-center" style="gap: 100px; margin-top: 7%;"> |
27 | 30 |
<article style="gap: 60px; bottom: 159px; |
28 | 31 |
left: 242px;"> |
--- client/views/pages/main/Chapter/Chapter3_5.vue
+++ client/views/pages/main/Chapter/Chapter3_5.vue
... | ... | @@ -15,14 +15,17 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class=" text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="imgGroup "> |
27 | 30 |
<img src="../../../../resources/img/img125_64s.png" alt=""> |
28 | 31 |
</div> |
--- client/views/pages/main/Chapter/Chapter3_6.vue
+++ client/views/pages/main/Chapter/Chapter3_6.vue
... | ... | @@ -14,14 +14,17 @@ |
14 | 14 |
<button><img src="../../../../resources/img/btn10_s.png" alt=""> |
15 | 15 |
</button> |
16 | 16 |
</div> |
17 |
- <div class="time-bg"> |
|
18 |
- <div> |
|
17 |
+ <div class="time-hint"> |
|
18 |
+ <button class="hint-btn">HINT</button> |
|
19 |
+ <div class="time-bg mt20"> |
|
20 |
+ <div> |
|
19 | 21 |
<div class="time"> |
20 |
- <p class="second">{{ timer }}</p> |
|
21 |
- <p class="text">sec</p> |
|
22 |
+ <p class="second">{{ timer }}</p> |
|
23 |
+ <p class="text">sec</p> |
|
22 | 24 |
</div> |
23 |
- </div> |
|
24 |
- </div> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
27 |
+ </div> |
|
25 | 28 |
|
26 | 29 |
<div class="imgGroup"> |
27 | 30 |
<img src="../../../../resources/img/img114_57s.png" alt=""> |
--- client/views/pages/main/Chapter/Chapter3_7.vue
+++ client/views/pages/main/Chapter/Chapter3_7.vue
... | ... | @@ -15,16 +15,19 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class="text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
|
27 |
- <div class="pickGroup flex align-center justify-between" style="gap: 100px;"> |
|
30 |
+ <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px;"> |
|
28 | 31 |
<p>1. 문제</p> |
29 | 32 |
<div class="flex justify-center" style="gap: 60px;"> |
30 | 33 |
<article > |
--- client/views/pages/main/Chapter/Chapter3_8.vue
+++ client/views/pages/main/Chapter/Chapter3_8.vue
... | ... | @@ -15,14 +15,17 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class="text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="imgGroup flex align-center justify-center mt50"> |
27 | 30 |
<img src="../../../../resources/img/img114_57s.png" alt=""> |
28 | 31 |
<input class="yellow-bd ml50" style="width: 30%;" type="text" name="" id="" placeholder="답을 입력하세요."> |
--- client/views/pages/main/Chapter/Chapter3_9.vue
+++ client/views/pages/main/Chapter/Chapter3_9.vue
... | ... | @@ -15,14 +15,17 @@ |
15 | 15 |
</div> |
16 | 16 |
|
17 | 17 |
<div class="mt50 text-ct"> |
18 |
- <div class="time-bg"> |
|
19 |
- <div> |
|
20 |
- <div class="time"> |
|
21 |
- <p class="second">{{ timer }}</p> |
|
22 |
- <p class="text">sec</p> |
|
18 |
+ <div class="time-hint"> |
|
19 |
+ <button class="hint-btn">HINT</button> |
|
20 |
+ <div class="time-bg mt20"> |
|
21 |
+ <div> |
|
22 |
+ <div class="time"> |
|
23 |
+ <p class="second">{{ timer }}</p> |
|
24 |
+ <p class="text">sec</p> |
|
25 |
+ </div> |
|
26 |
+ </div> |
|
23 | 27 |
</div> |
24 |
- </div> |
|
25 |
- </div> |
|
28 |
+ </div> |
|
26 | 29 |
<div class="imgGroup mt50"> |
27 | 30 |
<img src="../../../../resources/img/img115_58s.png" alt=""> |
28 | 31 |
<div class=" mt50"> |
--- client/views/pages/main/Chapter/Chapter4.vue
+++ client/views/pages/main/Chapter/Chapter4.vue
... | ... | @@ -102,7 +102,7 @@ |
102 | 102 |
|
103 | 103 |
</div> |
104 | 104 |
</div> |
105 |
- <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt=""> |
|
105 |
+ <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt=""> |
|
106 | 106 |
</div> |
107 | 107 |
</div> |
108 | 108 |
</div> |
--- client/views/pages/main/Dashboard.vue
+++ client/views/pages/main/Dashboard.vue
... | ... | @@ -6,7 +6,7 @@ |
6 | 6 |
<p class="subtitle">hi my name is dd!</p> |
7 | 7 |
</div> |
8 | 8 |
<div class="race-box"> |
9 |
- <div class="rabbit"><img src="../../../resources/img/img09_s.png" alt=""></div> |
|
9 |
+ <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div> |
|
10 | 10 |
<div class="rcon flex justify-end mb5"> |
11 | 11 |
<div class="race-btn" @click="goToPage('Chapter1')"> |
12 | 12 |
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1"> |
... | ... | @@ -90,10 +90,16 @@ |
90 | 90 |
<p class="long">최종 평가</p> |
91 | 91 |
</div> |
92 | 92 |
</div> |
93 |
+ <div class="rabbit-end" @click="buttonSearch"><img src="../../../resources/img/img138_72s.png" alt=""></div> |
|
93 | 94 |
</div> |
94 | 95 |
<!-- 팝업 --> |
95 | 96 |
<div v-show="searchOpen" class="popup-wrap"> |
96 |
- <div class="popup-box "> |
|
97 |
+ <div class="popup-box popup-yellow"> |
|
98 |
+ <div class="flex justify-end"> |
|
99 |
+ <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
100 |
+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
101 |
+ </button> |
|
102 |
+ </div> |
|
97 | 103 |
<div class=" mb30 text-ct"> |
98 | 104 |
<p class="title1 mb20">1단원이 끝났습니다! </p> |
99 | 105 |
<p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요 </p> |
... | ... | @@ -110,14 +116,14 @@ |
110 | 116 |
<h2 class="mb40">이 단원을 끝낸 친구들</h2> |
111 | 117 |
<article class=" flex-column" style="gap: 5px;"> |
112 | 118 |
<div class="flex" style="gap: 5px;"> |
113 |
- <div @click="buttonSearch" class="photo" ><img src="../../../resources/img/img143_75s.png" alt=""></div> |
|
119 |
+ <div @click="buttonSearch2" class="photo" ><img src="../../../resources/img/img143_75s.png" alt=""></div> |
|
114 | 120 |
</div> |
115 | 121 |
</article> |
116 |
- <article class="popup-wrap" v-show="searchOpen"> |
|
122 |
+ <article class="popup-wrap" v-show="searchOpen2"> |
|
117 | 123 |
<div class="popup-box "> |
118 | 124 |
<div class="flex mb10 justify-between"> |
119 | 125 |
<p class="popup-title">알림</p> |
120 |
- <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
126 |
+ <button type="button" class="popup-close-btn" @click="closeBtn2"> |
|
121 | 127 |
<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
122 | 128 |
</button> |
123 | 129 |
</div> |
... | ... | @@ -150,6 +156,7 @@ |
150 | 156 |
mdiWindowClose: mdiWindowClose, |
151 | 157 |
mdiHeart: mdiHeart, |
152 | 158 |
showModal: false, |
159 |
+ showModal2: false, |
|
153 | 160 |
searchOpen: false, |
154 | 161 |
searchOpen2: false, |
155 | 162 |
} |
... | ... | @@ -167,10 +174,17 @@ |
167 | 174 |
buttonSearch() { |
168 | 175 |
this.searchOpen = true; |
169 | 176 |
}, |
177 |
+ buttonSearch2() { |
|
178 |
+ this.searchOpen2 = true; |
|
179 |
+ }, |
|
170 | 180 |
closeBtn() { |
171 | 181 |
this.searchOpen = false; |
172 | 182 |
|
173 | 183 |
}, |
184 |
+ closeBtn2() { |
|
185 |
+ this.searchOpen2 = false; |
|
186 |
+ |
|
187 |
+ }, |
|
174 | 188 |
}, |
175 | 189 |
watch: { |
176 | 190 |
|
--- client/views/pages/main/MyPage.vue
+++ client/views/pages/main/MyPage.vue
... | ... | @@ -172,4 +172,7 @@ |
172 | 172 |
} |
173 | 173 |
</script> |
174 | 174 |
<style scoped> |
175 |
+.mypage .textbook { |
|
176 |
+ width: 22%; |
|
177 |
+} |
|
175 | 178 |
</style>(No newline at end of file) |
--- client/views/pages/main/PhotoDesign.vue
+++ client/views/pages/main/PhotoDesign.vue
... | ... | @@ -118,6 +118,7 @@ |
118 | 118 |
} |
119 | 119 |
</script> |
120 | 120 |
<style scoped> |
121 |
+.content{width: 19%;} |
|
121 | 122 |
.imgGroup { |
122 | 123 |
width: fit-content; |
123 | 124 |
} |
--- client/views/pages/teacher/Board.vue
+++ client/views/pages/teacher/Board.vue
... | ... | @@ -1,8 +1,14 @@ |
1 | 1 |
<template> |
2 | 2 |
<div class="title-box flex justify-between mb40"> |
3 | 3 |
<p class="title">게시판</p> |
4 |
- <select name="" id=""> |
|
5 |
- <option value="">A반</option> |
|
4 |
+ <select v-model="sclsId" @change="handleClassId()"> |
|
5 |
+ <option |
|
6 |
+ v-for="(item, index) in classList" |
|
7 |
+ :key="index" |
|
8 |
+ :value="item.sclsId" |
|
9 |
+ > |
|
10 |
+ {{ item.sclsNm }} |
|
11 |
+ </option> |
|
6 | 12 |
</select> |
7 | 13 |
</div> |
8 | 14 |
<div class="search-wrap flex justify-end mb20"> |
... | ... | @@ -42,7 +48,7 @@ |
42 | 48 |
<td>{{ item.bbsTtl }}</td> |
43 | 49 |
<td>{{ item.bbsCls }}</td> |
44 | 50 |
<td>{{ userNm }}</td> |
45 |
- <td>{{ item.bbsTm }}</td> |
|
51 |
+ <td>{{ item.bbsTm.substr(0, 16) }}</td> |
|
46 | 52 |
</tr> |
47 | 53 |
</tbody> |
48 | 54 |
</table> |
... | ... | @@ -92,17 +98,22 @@ |
92 | 98 |
dataList: [], |
93 | 99 |
totalPosts: 0, |
94 | 100 |
selectedRow: "", |
101 |
+ bbsTm: "", |
|
95 | 102 |
|
96 | 103 |
// 페이징 |
97 | 104 |
currentPage: 0, |
98 | 105 |
itemsPerPage: 8, |
99 | 106 |
|
100 | 107 |
// 반 아이디 (추후 세션에서 받는걸로 수정) |
101 |
- sclsId: "1", |
|
108 |
+ sclsId: "", |
|
109 |
+ classList: [], |
|
102 | 110 |
|
111 |
+ userId: "", |
|
103 | 112 |
// 검색어 |
104 | 113 |
searchKeyword: "", |
105 | 114 |
selectedSearchOption: "bbsTtl", |
115 |
+ |
|
116 |
+ selected: null, |
|
106 | 117 |
}; |
107 | 118 |
}, |
108 | 119 |
methods: { |
... | ... | @@ -127,6 +138,7 @@ |
127 | 138 |
// 게시글 전체 조회 |
128 | 139 |
boardList() { |
129 | 140 |
const vm = this; |
141 |
+ vm.sclsId = JSON.parse(sessionStorage.getItem("sclsId")); |
|
130 | 142 |
axios({ |
131 | 143 |
url: "/board/findAll.json", |
132 | 144 |
method: "post", |
... | ... | @@ -146,6 +158,11 @@ |
146 | 158 |
vm.userNm = res.data.result[0].userNm; |
147 | 159 |
vm.userId = res.data.result[0].userId; |
148 | 160 |
vm.totalPosts = res.data.totalBoard; |
161 |
+ vm.selectClass(); |
|
162 |
+ sessionStorage.removeItem("selectedBoardList"); |
|
163 |
+ sessionStorage.removeItem("file"); |
|
164 |
+ |
|
165 |
+ console.log(vm.userId); |
|
149 | 166 |
}) |
150 | 167 |
.catch(function (error) { |
151 | 168 |
console.log("result - error : ", error); |
... | ... | @@ -158,9 +175,6 @@ |
158 | 175 |
}, |
159 | 176 |
|
160 | 177 |
// 반 아이디 세션에 저장 |
161 |
- setClassId() { |
|
162 |
- sessionStorage.setItem("sclsId", JSON.stringify(this.sclsId)); |
|
163 |
- }, |
|
164 | 178 |
|
165 | 179 |
// 게시글 검색 |
166 | 180 |
boardDataSearch() { |
... | ... | @@ -191,6 +205,34 @@ |
191 | 205 |
console.log("dataSearch - error : ", error); |
192 | 206 |
alert("게시글이 존재하지 않습니다."); |
193 | 207 |
}); |
208 |
+ }, |
|
209 |
+ |
|
210 |
+ // 반 조회 |
|
211 |
+ selectClass() { |
|
212 |
+ const vm = this; |
|
213 |
+ console.log(vm.userId); |
|
214 |
+ axios({ |
|
215 |
+ url: "/classes/selectClass.json", |
|
216 |
+ method: "post", |
|
217 |
+ headers: { |
|
218 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
219 |
+ }, |
|
220 |
+ data: { |
|
221 |
+ userId: vm.userId, |
|
222 |
+ }, |
|
223 |
+ }) |
|
224 |
+ .then(function (res) { |
|
225 |
+ console.log("classData - response : ", res.data); |
|
226 |
+ vm.classList = res.data.data; |
|
227 |
+ vm.selected = res.data.data.sclsId; |
|
228 |
+ }) |
|
229 |
+ .catch(function (error) { |
|
230 |
+ console.log("classData - error : ", error); |
|
231 |
+ }); |
|
232 |
+ }, |
|
233 |
+ handleClassId() { |
|
234 |
+ sessionStorage.setItem("sclsId", JSON.stringify(this.sclsId)); |
|
235 |
+ this.boardList(); |
|
194 | 236 |
}, |
195 | 237 |
|
196 | 238 |
createNo(index) { |
... | ... | @@ -230,7 +272,6 @@ |
230 | 272 |
mounted() { |
231 | 273 |
console.log("Main2 mounted"); |
232 | 274 |
this.boardList(); |
233 |
- this.setClassId(); |
|
234 | 275 |
}, |
235 | 276 |
}; |
236 | 277 |
</script> |
--- client/views/pages/teacher/ClassDetail.vue
+++ client/views/pages/teacher/ClassDetail.vue
... | ... | @@ -1,153 +1,218 @@ |
1 | 1 |
<template> |
2 |
- <div class="title-box flex justify-between mb40"> |
|
3 |
- <p class="title">반 관리</p> |
|
2 |
+ <div class="title-box flex justify-between mb40"> |
|
3 |
+ <p class="title">반 관리</p> |
|
4 |
+ </div> |
|
5 |
+ <div class="wrap mb30"> |
|
6 |
+ <div class="flex justify-between mb30 align-center"> |
|
7 |
+ <label for="" class="title1">게시판</label> |
|
8 |
+ <div class="look-btn flex align-center" @click="goToPage('Board')"> |
|
9 |
+ <p>자세히 보기</p> |
|
10 |
+ <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon> |
|
11 |
+ </div> |
|
12 |
+ </div> |
|
13 |
+ <div class="table-wrap"> |
|
14 |
+ <table> |
|
15 |
+ <thead> |
|
16 |
+ <td>No.</td> |
|
17 |
+ <td>제목</td> |
|
18 |
+ <td>내용</td> |
|
19 |
+ <td>작성자</td> |
|
20 |
+ <td>등록일</td> |
|
21 |
+ </thead> |
|
22 |
+ <tbody> |
|
23 |
+ <tr |
|
24 |
+ v-for="(item, index) in dataList" |
|
25 |
+ :key="item.id" |
|
26 |
+ :class="{ 'selected-row': selectedRow == item.dataList }" |
|
27 |
+ @click="[goToPage('noticeDetail'), selectBoardList(item)]" |
|
28 |
+ > |
|
29 |
+ <td>{{ totalPosts - index }}</td> |
|
30 |
+ <td>{{ item.bbsTtl }}</td> |
|
31 |
+ <td>{{ item.bbsCls }}</td> |
|
32 |
+ <td>{{ userNm }}</td> |
|
33 |
+ <td>{{ item.bbsTm.substr(0, 16) }}</td> |
|
34 |
+ </tr> |
|
35 |
+ </tbody> |
|
36 |
+ </table> |
|
37 |
+ </div> |
|
38 |
+ </div> |
|
39 |
+ <div class="flex justify-between" style="gap: 30px"> |
|
40 |
+ <div class="wrap mb30"> |
|
41 |
+ <div class="flex justify-between mb30 align-center"> |
|
42 |
+ <label for="" class="title1">학생 목록</label> |
|
43 |
+ <div class="look-btn align-center flex"> |
|
44 |
+ <p>자세히 보기</p> |
|
45 |
+ <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon> |
|
46 |
+ </div> |
|
47 |
+ </div> |
|
48 |
+ <div class="table-wrap"> |
|
49 |
+ <table> |
|
50 |
+ <thead> |
|
51 |
+ <td>No.</td> |
|
52 |
+ <td>이름</td> |
|
53 |
+ <td>학년</td> |
|
54 |
+ <td>반</td> |
|
55 |
+ </thead> |
|
56 |
+ <tbody> |
|
57 |
+ <tr> |
|
58 |
+ <td></td> |
|
59 |
+ <td></td> |
|
60 |
+ <td></td> |
|
61 |
+ <td></td> |
|
62 |
+ </tr> |
|
63 |
+ </tbody> |
|
64 |
+ </table> |
|
65 |
+ </div> |
|
4 | 66 |
</div> |
5 | 67 |
<div class="wrap mb30"> |
6 |
- <div class="flex justify-between mb30 align-center"> |
|
7 |
- <label for="" class="title1">학습 현황</label> |
|
8 |
- <div class="look-btn flex align-center"> |
|
9 |
- <p>자세히 보기 </p> |
|
10 |
- <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> |
|
68 |
+ <div class="flex justify-between mb30 align-center"> |
|
69 |
+ <label for="" class="title1">책 </label> |
|
70 |
+ <div class="align-center flex look-btn"> |
|
71 |
+ <p>자세히 보기</p> |
|
72 |
+ <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon> |
|
73 |
+ </div> |
|
74 |
+ </div> |
|
75 |
+ <div class="flex" style="gap: 50px"> |
|
76 |
+ <div class="textbook"> |
|
77 |
+ <div class="box" style="gap: 10px"></div> |
|
78 |
+ <div class="text"> |
|
79 |
+ <p class="title1" style="color: #fff">A 교재</p> |
|
80 |
+ <div |
|
81 |
+ class="btnGroup mt15 flex align-center justify-end" |
|
82 |
+ style="gap: 10px" |
|
83 |
+ > |
|
84 |
+ <button>수정</button> |
|
85 |
+ <p>|</p> |
|
86 |
+ <button @click="showConfirm('delete')">삭제</button> |
|
11 | 87 |
</div> |
88 |
+ </div> |
|
12 | 89 |
</div> |
13 |
- <div class="table-wrap"> |
|
14 |
- <table> |
|
15 |
- <thead> |
|
16 |
- <td>No.</td> |
|
17 |
- <td>제목</td> |
|
18 |
- <td>내용</td> |
|
19 |
- <td>작성자</td> |
|
20 |
- <td>등록일</td> |
|
21 |
- </thead> |
|
22 |
- <tbody> |
|
23 |
- <tr> |
|
24 |
- <td></td> |
|
25 |
- <td></td> |
|
26 |
- <td></td> |
|
27 |
- <td></td> |
|
28 |
- <td></td> |
|
29 |
- </tr> |
|
30 |
- </tbody> |
|
31 |
- </table> |
|
90 |
+ <div class="textbook"> |
|
91 |
+ <div class="box" style="gap: 10px"></div> |
|
92 |
+ <div class="text"> |
|
93 |
+ <p class="title1" style="color: #fff">A 교재</p> |
|
94 |
+ <div |
|
95 |
+ class="btnGroup mt15 flex align-center justify-end" |
|
96 |
+ style="gap: 10px" |
|
97 |
+ > |
|
98 |
+ <button>수정</button> |
|
99 |
+ <p>|</p> |
|
100 |
+ <button @click="showConfirm('delete')">삭제</button> |
|
101 |
+ </div> |
|
102 |
+ </div> |
|
32 | 103 |
</div> |
104 |
+ </div> |
|
33 | 105 |
</div> |
34 |
- <div class="flex justify-between" style="gap: 30px;"> |
|
35 |
- <div class="wrap mb30"> |
|
36 |
- <div class="flex justify-between mb30 align-center"> |
|
37 |
- <label for="" class="title1">학생 목록</label> |
|
38 |
- <div class="look-btn align-center flex"> |
|
39 |
- <p>자세히 보기 </p> |
|
40 |
- <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> |
|
41 |
- </div> |
|
42 |
- </div> |
|
43 |
- <div class="table-wrap"> |
|
44 |
- <table> |
|
45 |
- <thead> |
|
46 |
- <td>No.</td> |
|
47 |
- <td>이름</td> |
|
48 |
- <td>학년</td> |
|
49 |
- <td>반</td> |
|
50 |
- </thead> |
|
51 |
- <tbody> |
|
52 |
- <tr> |
|
53 |
- <td></td> |
|
54 |
- <td></td> |
|
55 |
- <td></td> |
|
56 |
- <td></td> |
|
57 |
- </tr> |
|
58 |
- </tbody> |
|
59 |
- </table> |
|
60 |
- </div> |
|
61 |
- </div> |
|
62 |
- <div class="wrap mb30"> |
|
63 |
- <div class="flex justify-between mb30 align-center"> |
|
64 |
- <label for="" class="title1">책 </label> |
|
65 |
- <div class="align-center flex look-btn"><p>자세히 보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon></div> |
|
66 |
- </div> |
|
67 |
- <div class=" flex " style="gap: 50px;"> |
|
68 |
- <div class="textbook"> |
|
69 |
- <div class="box " style="gap: 10px;"> |
|
70 |
- </div> |
|
71 |
- <div class="text "> |
|
72 |
- <p class="title1" style="color: #fff;">A 교재</p> |
|
73 |
- <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;"> |
|
74 |
- <button>수정</button><p>|</p> |
|
75 |
- <button @click="showConfirm('delete')">삭제</button> |
|
76 |
- </div> |
|
77 |
- </div> |
|
78 |
- </div> |
|
79 |
- <div class="textbook"> |
|
80 |
- <div class="box " style="gap: 10px;"> |
|
81 |
- </div> |
|
82 |
- <div class="text "> |
|
83 |
- <p class="title1" style="color: #fff;">A 교재</p> |
|
84 |
- <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;"> |
|
85 |
- <button>수정</button><p>|</p> |
|
86 |
- <button @click="showConfirm('delete')">삭제</button> |
|
87 |
- </div> |
|
88 |
- </div> |
|
89 |
- </div> |
|
90 |
- </div> |
|
91 |
- </div> |
|
92 |
- </div> |
|
106 |
+ </div> |
|
93 | 107 |
</template> |
94 | 108 |
|
95 | 109 |
<script> |
96 |
-import SvgIcon from '@jamescoyle/vue-icon'; |
|
97 |
-import { mdiMagnify, } from '@mdi/js'; |
|
98 |
-import { mdilArrowRight } from '@mdi/light-js'; |
|
99 |
-import ProgressBar from '../../component/ProgressBar.vue'; |
|
100 |
- |
|
110 |
+import SvgIcon from "@jamescoyle/vue-icon"; |
|
111 |
+import { mdiMagnify } from "@mdi/js"; |
|
112 |
+import { mdilArrowRight } from "@mdi/light-js"; |
|
113 |
+import ProgressBar from "../../component/ProgressBar.vue"; |
|
114 |
+import axios from "axios"; |
|
101 | 115 |
|
102 | 116 |
export default { |
103 |
- data() { |
|
104 |
- return { |
|
105 |
- mdiMagnify: mdiMagnify, |
|
106 |
- mdilArrowRight: mdilArrowRight, |
|
107 |
- timer: "00:00", |
|
108 |
- progress: 20, |
|
117 |
+ data() { |
|
118 |
+ return { |
|
119 |
+ mdiMagnify: mdiMagnify, |
|
120 |
+ mdilArrowRight: mdilArrowRight, |
|
121 |
+ timer: "00:00", |
|
122 |
+ progress: 20, |
|
109 | 123 |
|
110 |
- // 교사 홈페이지에서 쿼리 파라미터로부터 전달받은 선택된 반의 아이디 |
|
111 |
- selectedClassId : this.$route.query.sclsId |
|
112 |
- } |
|
124 |
+ // 교사 홈페이지에서 쿼리 파라미터로부터 전달받은 선택된 반의 아이디 |
|
125 |
+ selectedClassId: this.$route.query.sclsId, |
|
126 |
+ |
|
127 |
+ // 게시글 정보 |
|
128 |
+ dataList: [], |
|
129 |
+ totalPosts: 0, |
|
130 |
+ selectedRow: "", |
|
131 |
+ bbsTm: "", |
|
132 |
+ |
|
133 |
+ // 페이징 |
|
134 |
+ currentPage: 0, |
|
135 |
+ itemsPerPage: 5, |
|
136 |
+ |
|
137 |
+ // 반 아이디 |
|
138 |
+ sclsId: "", |
|
139 |
+ }; |
|
140 |
+ }, |
|
141 |
+ methods: { |
|
142 |
+ goToPage(page) { |
|
143 |
+ this.$router.push({ name: page }); |
|
113 | 144 |
}, |
114 |
- methods: { |
|
115 |
- goToPage(page) { |
|
116 |
- this.$router.push({ name: page }); |
|
145 |
+ increaseProgress() { |
|
146 |
+ if (this.progress < 100) { |
|
147 |
+ this.progress += 10; |
|
148 |
+ } |
|
149 |
+ }, |
|
150 |
+ showConfirm(type) { |
|
151 |
+ let message = ""; |
|
152 |
+ if (type === "cancel") { |
|
153 |
+ message = "삭제하시겠습니까?"; |
|
154 |
+ } else if (type === "reset") { |
|
155 |
+ message = "초기화하시겠습니까?"; |
|
156 |
+ } else if (type === "save") { |
|
157 |
+ message = "등록하시겠습니까?"; |
|
158 |
+ } |
|
159 |
+ |
|
160 |
+ if (confirm(message)) { |
|
161 |
+ this.goBack(); |
|
162 |
+ } |
|
163 |
+ }, |
|
164 |
+ |
|
165 |
+ // 게시글 조회 |
|
166 |
+ boardList() { |
|
167 |
+ const vm = this; |
|
168 |
+ axios({ |
|
169 |
+ url: "/board/findAll.json", |
|
170 |
+ method: "post", |
|
171 |
+ headers: { |
|
172 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
117 | 173 |
}, |
118 |
- increaseProgress() { |
|
119 |
- if (this.progress < 100) { |
|
120 |
- this.progress += 10; |
|
121 |
- } |
|
174 |
+ data: { |
|
175 |
+ page: vm.currentPage + 1, |
|
176 |
+ pageSize: vm.itemsPerPage, |
|
177 |
+ sclsId: vm.selectedClassId, |
|
122 | 178 |
}, |
123 |
- showConfirm(type) { |
|
124 |
- let message = ''; |
|
125 |
- if (type === 'cancel') { |
|
126 |
- message = '삭제하시겠습니까?'; |
|
127 |
- } else if (type === 'reset') { |
|
128 |
- message = '초기화하시겠습니까?'; |
|
129 |
- } else if (type === 'save') { |
|
130 |
- message = '등록하시겠습니까?'; |
|
131 |
- } |
|
179 |
+ }) |
|
180 |
+ .then(function (res) { |
|
181 |
+ console.log("dataList - response : ", res.data); |
|
132 | 182 |
|
133 |
- if (confirm(message)) { |
|
134 |
- this.goBack(); |
|
135 |
- } |
|
136 |
- }, |
|
137 |
- }, |
|
138 |
- watch: { |
|
183 |
+ vm.dataList = res.data.result[0].boardClass[0].board; |
|
184 |
+ vm.userNm = res.data.result[0].userNm; |
|
185 |
+ vm.userId = res.data.result[0].userId; |
|
186 |
+ vm.totalPosts = res.data.totalBoard; |
|
139 | 187 |
|
188 |
+ console.log(vm.userId); |
|
189 |
+ }) |
|
190 |
+ .catch(function (error) { |
|
191 |
+ console.log("result - error : ", error); |
|
192 |
+ }); |
|
140 | 193 |
}, |
141 |
- computed: { |
|
194 |
+ setClassId() { |
|
195 |
+ sessionStorage.setItem("sclsId", JSON.stringify(this.selectedClassId)); |
|
196 |
+ sessionStorage.removeItem("selectedBoardList"); |
|
197 |
+ sessionStorage.removeItem("file"); |
|
198 |
+ this.boardList(); |
|
199 |
+ }, |
|
142 | 200 |
|
201 |
+ // 게시글 정보 세션에 저장 |
|
202 |
+ selectBoardList(item) { |
|
203 |
+ sessionStorage.setItem("selectedBoardList", JSON.stringify(item)); |
|
143 | 204 |
}, |
144 |
- components: { |
|
145 |
- SvgIcon, |
|
146 |
- ProgressBar |
|
147 |
- }, |
|
148 |
- mounted() { |
|
149 |
- console.log('Main2 mounted'); |
|
150 |
- //console.log(`반 페이지 sclsId(반 아이디) 확인 : ${this.selectedClassId}`); |
|
151 |
- } |
|
152 |
-} |
|
153 |
-</script>(No newline at end of file) |
|
205 |
+ }, |
|
206 |
+ watch: {}, |
|
207 |
+ computed: {}, |
|
208 |
+ components: { |
|
209 |
+ SvgIcon, |
|
210 |
+ ProgressBar, |
|
211 |
+ }, |
|
212 |
+ mounted() { |
|
213 |
+ console.log("Main2 mounted"); |
|
214 |
+ //console.log(`반 페이지 sclsId(반 아이디) 확인 : ${this.selectedClassId}`); |
|
215 |
+ this.setClassId(); |
|
216 |
+ }, |
|
217 |
+}; |
|
218 |
+</script> |
--- client/views/pages/teacher/Home.vue
+++ client/views/pages/teacher/Home.vue
... | ... | @@ -1,268 +1,289 @@ |
1 | 1 |
<template> |
2 |
- <div class="title-box flex justify-between mb40"> |
|
3 |
- <p class="title">홈</p> |
|
4 |
- </div> |
|
5 |
- <div class="content-t"> |
|
6 |
- <div class=" flex " style="gap: 50px;" :style="{flexWrap: 'wrap'}"> |
|
7 |
- <div class="class" v-for="classItem in classesList" :key="classItem.sclsId"> |
|
8 |
- <div class="box gd-col2" style="gap: 10px;" @click="goToPage('ClassDetail', classItem.sclsId)"> |
|
9 |
- <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
10 |
- <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
11 |
- <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
12 |
- <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
13 |
- </div> |
|
14 |
- <div class="text flex justify-between mt20"> |
|
15 |
- <p class="title1">{{ classItem.sclsNm }}</p> |
|
16 |
- <span class="member">{{ classItem. studentCount}}</span> |
|
17 |
- </div> |
|
18 |
- <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;"> |
|
19 |
- <button @click="editModeModal(classItem.sclsId)">수정</button> |
|
20 |
- <p>|</p> |
|
21 |
- <button @click="deleteClass(classItem.sclsId)">삭제</button> |
|
22 |
- </div> |
|
23 |
- </div> |
|
24 |
- <div class="textbook-add"> |
|
25 |
- <button @click="addModeModal"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button> |
|
26 |
- |
|
27 |
- </div> |
|
28 |
- <!-- 팝업창 --> |
|
29 |
- <div v-show="searchOpen" class="popup-wrap"> |
|
30 |
- <div class="popup-box "> |
|
31 |
- <div class="flex justify-between mb30"> |
|
32 |
- <p class="popup-title">반 이름</p> |
|
33 |
- <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
34 |
- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
35 |
- |
|
36 |
- </button> |
|
37 |
- </div> |
|
38 |
- <div class="search-wrap mb30"> |
|
39 |
- <input type="text" v-model="createClassName" class="data-wrap" placeholder=""> |
|
40 |
- <!-- <button type="button" > |
|
2 |
+ <div class="title-box flex justify-between mb40"> |
|
3 |
+ <p class="title">홈</p> |
|
4 |
+ </div> |
|
5 |
+ <div class="content-t"> |
|
6 |
+ <div class="flex" style="gap: 50px" :style="{ flexWrap: 'wrap' }"> |
|
7 |
+ <div |
|
8 |
+ class="class" |
|
9 |
+ v-for="classItem in classesList" |
|
10 |
+ :key="classItem.sclsId" |
|
11 |
+ > |
|
12 |
+ <div |
|
13 |
+ class="box gd-col2" |
|
14 |
+ style="gap: 10px" |
|
15 |
+ @click="goToPage('ClassDetail', classItem.sclsId)" |
|
16 |
+ > |
|
17 |
+ <div><img src="../../../resources/img/img176_82t.png" alt="" /></div> |
|
18 |
+ <div><img src="../../../resources/img/img176_82t.png" alt="" /></div> |
|
19 |
+ <div><img src="../../../resources/img/img176_82t.png" alt="" /></div> |
|
20 |
+ <div><img src="../../../resources/img/img176_82t.png" alt="" /></div> |
|
21 |
+ </div> |
|
22 |
+ <div class="text flex justify-between mt20"> |
|
23 |
+ <p class="title1">{{ classItem.sclsNm }}</p> |
|
24 |
+ <span class="member">{{ classItem.studentCount }}</span> |
|
25 |
+ </div> |
|
26 |
+ <div |
|
27 |
+ class="btnGroup mt15 flex align-center justify-end" |
|
28 |
+ style="gap: 10px" |
|
29 |
+ > |
|
30 |
+ <button @click="editModeModal(classItem.sclsId)">수정</button> |
|
31 |
+ <p>|</p> |
|
32 |
+ <button @click="deleteClass(classItem.sclsId)">삭제</button> |
|
33 |
+ </div> |
|
34 |
+ </div> |
|
35 |
+ <div class="textbook-add"> |
|
36 |
+ <button @click="addModeModal"> |
|
37 |
+ <img src="../../../resources/img/btn32_98t_normal.png" alt="" /> |
|
38 |
+ </button> |
|
39 |
+ </div> |
|
40 |
+ <!-- 팝업창 --> |
|
41 |
+ <div v-show="searchOpen" class="popup-wrap"> |
|
42 |
+ <div class="popup-box"> |
|
43 |
+ <div class="flex justify-between mb30"> |
|
44 |
+ <p class="popup-title">반 이름</p> |
|
45 |
+ <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
46 |
+ <svg-icon |
|
47 |
+ type="mdi" |
|
48 |
+ :path="mdiWindowClose" |
|
49 |
+ class="close-btn" |
|
50 |
+ ></svg-icon> |
|
51 |
+ </button> |
|
52 |
+ </div> |
|
53 |
+ <div class="search-wrap mb30"> |
|
54 |
+ <input |
|
55 |
+ type="text" |
|
56 |
+ v-model="createClassName" |
|
57 |
+ class="data-wrap" |
|
58 |
+ placeholder="" |
|
59 |
+ /> |
|
60 |
+ <!-- <button type="button" > |
|
41 | 61 |
<img src="../../../resources/img/look_t.png" alt=""> |
42 | 62 |
</button> --> |
43 |
- </div> |
|
44 |
- <div class="flex justify-center "> |
|
45 |
- <button type="button" title="글쓰기" class="new-btn mr10" @click="closeBtn"> |
|
46 |
- 취소 |
|
47 |
- </button> |
|
48 |
- <button type="button" title="등록" class="new-btn" @click="isEditMode ? updateClass() : insertClass()"> |
|
49 |
- {{ isEditMode ? '수정' : '등록' }} |
|
50 |
- </button> |
|
51 |
- </div> |
|
52 |
- </div> |
|
53 |
- </div> |
|
63 |
+ </div> |
|
64 |
+ <div class="flex justify-center"> |
|
65 |
+ <button |
|
66 |
+ type="button" |
|
67 |
+ title="글쓰기" |
|
68 |
+ class="new-btn mr10" |
|
69 |
+ @click="closeBtn" |
|
70 |
+ > |
|
71 |
+ 취소 |
|
72 |
+ </button> |
|
73 |
+ <button |
|
74 |
+ type="button" |
|
75 |
+ title="등록" |
|
76 |
+ class="new-btn" |
|
77 |
+ @click="isEditMode ? updateClass() : insertClass()" |
|
78 |
+ > |
|
79 |
+ {{ isEditMode ? "수정" : "등록" }} |
|
80 |
+ </button> |
|
81 |
+ </div> |
|
54 | 82 |
</div> |
83 |
+ </div> |
|
55 | 84 |
</div> |
85 |
+ </div> |
|
56 | 86 |
</template> |
57 | 87 |
|
58 | 88 |
<script> |
59 |
-import axios from 'axios'; |
|
60 |
-import SvgIcon from '@jamescoyle/vue-icon'; |
|
61 |
-import { mdiMagnify, mdiWindowClose } from '@mdi/js'; |
|
89 |
+import axios from "axios"; |
|
90 |
+import SvgIcon from "@jamescoyle/vue-icon"; |
|
91 |
+import { mdiMagnify, mdiWindowClose } from "@mdi/js"; |
|
62 | 92 |
export default { |
63 |
- data() { |
|
64 |
- return { |
|
65 |
- mdiWindowClose: mdiWindowClose, |
|
66 |
- showModal: false, |
|
67 |
- searchOpen: false, |
|
93 |
+ data() { |
|
94 |
+ return { |
|
95 |
+ mdiWindowClose: mdiWindowClose, |
|
96 |
+ showModal: false, |
|
97 |
+ searchOpen: false, |
|
68 | 98 |
|
69 |
- classesList : [], // 불러온 반 정보 |
|
70 |
- user_id : '2', //유저 아이디 : 현재는 고정 |
|
71 |
- createClassName : "", // 생성 또는 수정할 반 이름 |
|
99 |
+ classesList: [], // 불러온 반 정보 |
|
100 |
+ user_id: "2", //유저 아이디 : 현재는 고정 |
|
101 |
+ createClassName: "", // 생성 또는 수정할 반 이름 |
|
72 | 102 |
|
73 |
- isEditMode: false, // 추가 모드인지 수정 모드인지 구분하는 변수 |
|
74 |
- current_editId : '', // 현재 수정할 반 id |
|
75 |
- } |
|
103 |
+ isEditMode: false, // 추가 모드인지 수정 모드인지 구분하는 변수 |
|
104 |
+ current_editId: "", // 현재 수정할 반 id |
|
105 |
+ }; |
|
106 |
+ }, |
|
107 |
+ methods: { |
|
108 |
+ goToPage(page, sclsId) { |
|
109 |
+ //console.log(`sclsId : ${sclsId}`); // 쿼리 확인 |
|
110 |
+ this.$router.push({ name: page, query: { sclsId: sclsId } }); |
|
76 | 111 |
}, |
77 |
- methods: { |
|
78 |
- |
|
79 |
- goToPage(page, sclsId) { |
|
80 |
- //console.log(`sclsId : ${sclsId}`); // 쿼리 확인 |
|
81 |
- this.$router.push({ name: page , query : {sclsId : sclsId}}); |
|
82 |
- }, |
|
83 |
- closeModal() { |
|
84 |
- this.showModal = false; |
|
85 |
- }, |
|
86 |
- editModeModal(sclsId) { |
|
87 |
- this.searchOpen = true; |
|
88 |
- this.isEditMode = true; // 수정 모드로 설정 |
|
89 |
- this.current_editId = sclsId |
|
90 |
- }, |
|
91 |
- addModeModal() { |
|
92 |
- this.searchOpen = true; |
|
93 |
- this.isEditMode = false; // 추가 모드로 설정 |
|
94 |
- }, |
|
95 |
- closeBtn() { |
|
96 |
- this.searchOpen = false; |
|
97 |
- this.createClassName = ""; // 팝업 닫을 때 반 이름 초기화 |
|
112 |
+ closeModal() { |
|
113 |
+ this.showModal = false; |
|
114 |
+ }, |
|
115 |
+ editModeModal(sclsId) { |
|
116 |
+ this.searchOpen = true; |
|
117 |
+ this.isEditMode = true; // 수정 모드로 설정 |
|
118 |
+ this.current_editId = sclsId; |
|
119 |
+ }, |
|
120 |
+ addModeModal() { |
|
121 |
+ this.searchOpen = true; |
|
122 |
+ this.isEditMode = false; // 추가 모드로 설정 |
|
123 |
+ }, |
|
124 |
+ closeBtn() { |
|
125 |
+ this.searchOpen = false; |
|
126 |
+ this.createClassName = ""; // 팝업 닫을 때 반 이름 초기화 |
|
127 |
+ }, |
|
128 |
+ showConfirm(type, callback) { |
|
129 |
+ let message = ""; |
|
130 |
+ if (type === "delete") { |
|
131 |
+ message = "삭제하시겠습니까?"; |
|
132 |
+ } else if (type === "reset") { |
|
133 |
+ message = "초기화하시겠습니까?"; |
|
134 |
+ } else if (type === "save") { |
|
135 |
+ message = "등록하시겠습니까?"; |
|
136 |
+ } else if (type === "edit") { |
|
137 |
+ message = "수정하시겠습니까?"; |
|
138 |
+ } |
|
98 | 139 |
|
140 |
+ if (confirm(message)) { |
|
141 |
+ if (callback) callback(); // 콜백 함수 호출 |
|
142 |
+ } |
|
143 |
+ }, |
|
144 |
+ // 조회 |
|
145 |
+ selectClass() { |
|
146 |
+ sessionStorage.removeItem("sclsId"); |
|
147 |
+ axios({ |
|
148 |
+ url: "/classes/selectClass.json", |
|
149 |
+ method: "post", |
|
150 |
+ headers: { |
|
151 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
99 | 152 |
}, |
100 |
- showConfirm(type, callback) { |
|
101 |
- let message = ''; |
|
102 |
- if (type === 'delete') { |
|
103 |
- message = '삭제하시겠습니까?'; |
|
104 |
- } else if (type === 'reset') { |
|
105 |
- message = '초기화하시겠습니까?'; |
|
106 |
- } else if (type === 'save') { |
|
107 |
- message = '등록하시겠습니까?'; |
|
108 |
- } else if (type === 'edit'){ |
|
109 |
- message = '수정하시겠습니까?'; |
|
110 |
- } |
|
111 |
- |
|
112 |
- |
|
113 |
- if (confirm(message)) { |
|
114 |
- if (callback) callback(); // 콜백 함수 호출 |
|
115 |
- } |
|
153 |
+ data: { |
|
154 |
+ userId: this.user_id, |
|
116 | 155 |
}, |
117 |
- // 조회 |
|
118 |
- selectClass() { |
|
119 |
- axios({ |
|
120 |
- url: "/classes/selectClass.json", |
|
121 |
- method: "post", |
|
122 |
- headers: { |
|
123 |
- "Content-Type": "application/json; charset=UTF-8", |
|
124 |
- }, |
|
125 |
- data: { |
|
126 |
- userId: this.user_id |
|
127 |
- }, |
|
128 |
- }) |
|
156 |
+ }) |
|
157 |
+ .then((res) => { |
|
158 |
+ if (res.data.status === "success") { |
|
159 |
+ console.log("classesList - response(조회) : ", res.data.data); |
|
160 |
+ this.classesList = res.data.data; |
|
161 |
+ } else { |
|
162 |
+ console.log("조회에 실패했습니다: ", res.data); |
|
163 |
+ alert("조회에 실패했습니다."); |
|
164 |
+ } |
|
165 |
+ }) |
|
166 |
+ .catch((err) => { |
|
167 |
+ console.log("classesList - error(조회) : ", err); |
|
168 |
+ alert("조회에 오류가 발생했습니다."); |
|
169 |
+ }); |
|
170 |
+ }, |
|
171 |
+ // 추가 |
|
172 |
+ insertClass() { |
|
173 |
+ if (this.createClassName.trim() === "") { |
|
174 |
+ alert("반 이름을 입력해주세요"); |
|
175 |
+ } else { |
|
176 |
+ this.showConfirm("save", () => { |
|
177 |
+ axios({ |
|
178 |
+ url: "/classes/insertClass.json", |
|
179 |
+ method: "post", |
|
180 |
+ headers: { |
|
181 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
182 |
+ }, |
|
183 |
+ data: { |
|
184 |
+ userId: this.user_id, |
|
185 |
+ sclsNm: this.createClassName, |
|
186 |
+ }, |
|
187 |
+ }) |
|
129 | 188 |
.then((res) => { |
130 |
- if (res.data.status === "success") { |
|
131 |
- console.log("classesList - response(조회) : ", res.data.data); |
|
132 |
- this.classesList = res.data.data; |
|
133 |
- } else { |
|
134 |
- console.log("조회에 실패했습니다: ", res.data); |
|
135 |
- alert("조회에 실패했습니다."); |
|
136 |
- } |
|
189 |
+ if (res.data.status === "success") { |
|
190 |
+ console.log("classesList - response(추가) : ", res.data.data); |
|
191 |
+ this.selectClass(); |
|
192 |
+ this.createClassName = ""; // 반 이름 초기화 |
|
193 |
+ this.closeBtn(); // 생성 모달 닫기 |
|
194 |
+ } else { |
|
195 |
+ console.log("추가에 실패했습니다: ", res.data); |
|
196 |
+ alert("추가에 실패했습니다."); |
|
197 |
+ } |
|
137 | 198 |
}) |
138 | 199 |
.catch((err) => { |
139 |
- console.log("classesList - error(조회) : ", err); |
|
140 |
- alert("조회에 오류가 발생했습니다."); |
|
200 |
+ console.log("classesList - error(추가) : ", err); |
|
201 |
+ alert("추가에 오류가 발생했습니다."); |
|
141 | 202 |
}); |
142 |
- }, |
|
143 |
- // 추가 |
|
144 |
- insertClass() { |
|
145 |
- if(this.createClassName.trim() === ""){ |
|
146 |
- alert("반 이름을 입력해주세요"); |
|
203 |
+ }); |
|
204 |
+ } |
|
205 |
+ }, |
|
206 |
+ // 삭제 |
|
207 |
+ deleteClass(sclsId) { |
|
208 |
+ this.showConfirm("delete", () => { |
|
209 |
+ axios({ |
|
210 |
+ url: "/classes/deleteClass.json", |
|
211 |
+ method: "post", |
|
212 |
+ headers: { |
|
213 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
214 |
+ }, |
|
215 |
+ data: { |
|
216 |
+ sclsId: sclsId, |
|
217 |
+ }, |
|
218 |
+ }) |
|
219 |
+ .then((res) => { |
|
220 |
+ if (res.data.status === "success") { |
|
221 |
+ console.log("classesList - response(삭제) : ", res.data.data); |
|
222 |
+ this.selectClass(); |
|
223 |
+ } else { |
|
224 |
+ console.log("삭제에 실패했습니다: ", res.data); |
|
225 |
+ alert("삭제에 실패했습니다."); |
|
147 | 226 |
} |
148 |
- else{ |
|
149 |
- this.showConfirm('save', () => { |
|
150 |
- axios({ |
|
151 |
- url: "/classes/insertClass.json", |
|
152 |
- method: "post", |
|
153 |
- headers: { |
|
154 |
- "Content-Type": "application/json; charset=UTF-8", |
|
155 |
- }, |
|
156 |
- data: { |
|
157 |
- userId: this.user_id, |
|
158 |
- sclsNm: this.createClassName |
|
159 |
- }, |
|
160 |
- }) |
|
161 |
- .then((res) => { |
|
162 |
- if (res.data.status === "success") { |
|
163 |
- console.log("classesList - response(추가) : ", res.data.data); |
|
164 |
- this.selectClass(); |
|
165 |
- this.createClassName = ""; // 반 이름 초기화 |
|
166 |
- this.closeBtn(); // 생성 모달 닫기 |
|
167 |
- } else { |
|
168 |
- console.log("추가에 실패했습니다: ", res.data); |
|
169 |
- alert("추가에 실패했습니다."); |
|
170 |
- } |
|
171 |
- }) |
|
172 |
- .catch((err) => { |
|
173 |
- console.log("classesList - error(추가) : ", err); |
|
174 |
- alert("추가에 오류가 발생했습니다."); |
|
175 |
- }); |
|
176 |
- }); |
|
177 |
- } |
|
178 |
- |
|
179 |
- }, |
|
180 |
- // 삭제 |
|
181 |
- deleteClass(sclsId) { |
|
182 |
- this.showConfirm('delete', () => { |
|
183 |
- axios({ |
|
184 |
- url: "/classes/deleteClass.json", |
|
185 |
- method: "post", |
|
186 |
- headers: { |
|
187 |
- "Content-Type": "application/json; charset=UTF-8", |
|
188 |
- }, |
|
189 |
- data: { |
|
190 |
- sclsId: sclsId |
|
191 |
- }, |
|
192 |
- }) |
|
193 |
- .then((res) => { |
|
194 |
- if (res.data.status === "success") { |
|
195 |
- console.log("classesList - response(삭제) : ", res.data.data); |
|
196 |
- this.selectClass(); |
|
197 |
- } else { |
|
198 |
- console.log("삭제에 실패했습니다: ", res.data); |
|
199 |
- alert("삭제에 실패했습니다."); |
|
200 |
- } |
|
201 |
- }) |
|
202 |
- .catch((err) => { |
|
203 |
- console.log("classesList - error(삭제) : ", err); |
|
204 |
- alert("삭제에 오류가 발생했습니다."); |
|
205 |
- }); |
|
227 |
+ }) |
|
228 |
+ .catch((err) => { |
|
229 |
+ console.log("classesList - error(삭제) : ", err); |
|
230 |
+ alert("삭제에 오류가 발생했습니다."); |
|
231 |
+ }); |
|
232 |
+ }); |
|
233 |
+ }, |
|
234 |
+ // 수정 |
|
235 |
+ updateClass() { |
|
236 |
+ if (this.createClassName.trim() === "") { |
|
237 |
+ alert("반 이름을 입력해주세요"); |
|
238 |
+ } else { |
|
239 |
+ this.showConfirm("edit", () => { |
|
240 |
+ axios({ |
|
241 |
+ url: "/classes/updateClass.json", |
|
242 |
+ method: "post", |
|
243 |
+ headers: { |
|
244 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
245 |
+ }, |
|
246 |
+ data: { |
|
247 |
+ sclsId: this.current_editId, |
|
248 |
+ sclsNm: this.createClassName, |
|
249 |
+ }, |
|
250 |
+ }) |
|
251 |
+ .then((res) => { |
|
252 |
+ if (res.data.status === "success") { |
|
253 |
+ console.log("classesList - response(수정) : ", res.data.data); |
|
254 |
+ this.selectClass(); |
|
255 |
+ this.createClassName = ""; // 반 이름 초기화 |
|
256 |
+ this.current_editId = ""; // 반 Id 초기화 |
|
257 |
+ this.closeBtn(); // 팝업 닫기 |
|
258 |
+ } else { |
|
259 |
+ console.log("수정에 실패했습니다: ", res.data); |
|
260 |
+ alert("수정에 실패했습니다."); |
|
261 |
+ } |
|
262 |
+ }) |
|
263 |
+ .catch((err) => { |
|
264 |
+ console.log("classesList - error(수정) : ", err); |
|
265 |
+ alert("수정에 오류가 발생했습니다."); |
|
206 | 266 |
}); |
207 |
- }, |
|
208 |
- // 수정 |
|
209 |
- updateClass() { |
|
210 |
- if(this.createClassName.trim() === ""){ |
|
211 |
- alert("반 이름을 입력해주세요"); |
|
212 |
- } |
|
213 |
- else{ |
|
214 |
- this.showConfirm('edit', () => { |
|
215 |
- axios({ |
|
216 |
- url: "/classes/updateClass.json", |
|
217 |
- method: "post", |
|
218 |
- headers: { |
|
219 |
- "Content-Type": "application/json; charset=UTF-8", |
|
220 |
- }, |
|
221 |
- data: { |
|
222 |
- sclsId: this.current_editId, |
|
223 |
- sclsNm: this.createClassName |
|
224 |
- }, |
|
225 |
- }) |
|
226 |
- .then((res) => { |
|
227 |
- if (res.data.status === "success") { |
|
228 |
- console.log("classesList - response(수정) : ", res.data.data); |
|
229 |
- this.selectClass(); |
|
230 |
- this.createClassName = ""; // 반 이름 초기화 |
|
231 |
- this.current_editId = ""; // 반 Id 초기화 |
|
232 |
- this.closeBtn(); // 팝업 닫기 |
|
233 |
- } else { |
|
234 |
- console.log("수정에 실패했습니다: ", res.data); |
|
235 |
- alert("수정에 실패했습니다."); |
|
236 |
- } |
|
237 |
- }) |
|
238 |
- .catch((err) => { |
|
239 |
- console.log("classesList - error(수정) : ", err); |
|
240 |
- alert("수정에 오류가 발생했습니다."); |
|
241 |
- }); |
|
242 |
- }); |
|
243 |
- } |
|
244 |
- } |
|
267 |
+ }); |
|
268 |
+ } |
|
245 | 269 |
}, |
246 |
- watch: { |
|
247 |
- |
|
248 |
- }, |
|
249 |
- computed: { |
|
250 |
- |
|
251 |
- }, |
|
252 |
- components: { |
|
253 |
- SvgIcon |
|
254 |
- }, |
|
255 |
- mounted() { |
|
256 |
- console.log('Main2 mounted'); |
|
257 |
- this.selectClass(); |
|
258 |
- } |
|
259 |
-} |
|
270 |
+ }, |
|
271 |
+ watch: {}, |
|
272 |
+ computed: {}, |
|
273 |
+ components: { |
|
274 |
+ SvgIcon, |
|
275 |
+ }, |
|
276 |
+ mounted() { |
|
277 |
+ console.log("Main2 mounted"); |
|
278 |
+ this.selectClass(); |
|
279 |
+ }, |
|
280 |
+}; |
|
260 | 281 |
</script> |
261 | 282 |
|
262 | 283 |
<style> |
263 | 284 |
.content-t { |
264 |
- flex-wrap: wrap; |
|
265 |
- height: 90%; |
|
266 |
- overflow-y: scroll; |
|
285 |
+ flex-wrap: wrap; |
|
286 |
+ height: 90%; |
|
287 |
+ overflow-y: scroll; |
|
267 | 288 |
} |
268 |
-</style>(No newline at end of file) |
|
289 |
+</style> |
--- client/views/pages/teacher/noticeDetail.vue
+++ client/views/pages/teacher/noticeDetail.vue
... | ... | @@ -1,13 +1,13 @@ |
1 | 1 |
<template> |
2 | 2 |
<div class="title-box flex justify-between mb40"> |
3 |
- <p class="title">{{ dataList.bbsCls }}</p> |
|
3 |
+ <p class="title">{{ category }}</p> |
|
4 | 4 |
</div> |
5 | 5 |
<div class="board-wrap"> |
6 | 6 |
<div class="flex align-center"> |
7 |
- <label for="" class="title2">{{ dataList.bbsTtl }}</label> |
|
7 |
+ <label for="" class="title2">{{ title }}</label> |
|
8 | 8 |
</div> |
9 | 9 |
<hr /> |
10 |
- <textarea readonly name="" id="">{{ dataList.bbsCnt }}</textarea> |
|
10 |
+ <textarea readonly name="" id="">{{ content }}</textarea> |
|
11 | 11 |
<hr /> |
12 | 12 |
<div class="flex align-center"> |
13 | 13 |
<label for="" class="title2">첨부파일</label> |
... | ... | @@ -35,7 +35,14 @@ |
35 | 35 |
목록 |
36 | 36 |
</button> |
37 | 37 |
<div class="flex"> |
38 |
- <button type="button" title="글쓰기" class="new-btn mr10">수정</button> |
|
38 |
+ <button |
|
39 |
+ type="button" |
|
40 |
+ title="글쓰기" |
|
41 |
+ class="new-btn mr10" |
|
42 |
+ @click="goToPage('noticeInsert')" |
|
43 |
+ > |
|
44 |
+ 수정 |
|
45 |
+ </button> |
|
39 | 46 |
<button |
40 | 47 |
type="button" |
41 | 48 |
title="글쓰기" |
... | ... | @@ -68,6 +75,7 @@ |
68 | 75 |
content: "", |
69 | 76 |
category: "", |
70 | 77 |
file: "", |
78 |
+ time: "", |
|
71 | 79 |
user: "", |
72 | 80 |
}; |
73 | 81 |
}, |
... | ... | @@ -84,7 +92,10 @@ |
84 | 92 |
if (seletedBoardList) { |
85 | 93 |
vm.dataList = seletedBoardList; |
86 | 94 |
} |
87 |
- console.log(vm.dataList); |
|
95 |
+ vm.title = vm.dataList.bbsTtl; |
|
96 |
+ vm.content = vm.dataList.bbsCnt; |
|
97 |
+ vm.category = vm.dataList.bbsCls; |
|
98 |
+ vm.time = vm.dataList.bbsTm; |
|
88 | 99 |
}, |
89 | 100 |
|
90 | 101 |
findFile() { |
... | ... | @@ -102,6 +113,7 @@ |
102 | 113 |
.then(function (res) { |
103 | 114 |
console.log("fileInfo - response : ", res.data.list[0]); |
104 | 115 |
vm.file = res.data.list[0]; |
116 |
+ sessionStorage.setItem("file", JSON.stringify(vm.file)); |
|
105 | 117 |
}) |
106 | 118 |
.catch(function (error) { |
107 | 119 |
console.log("result - error : ", error); |
... | ... | @@ -128,6 +140,10 @@ |
128 | 140 |
"selectedBoardList", |
129 | 141 |
JSON.stringify(vm.dataList) |
130 | 142 |
); |
143 |
+ vm.title = vm.dataList.bbsTtl; |
|
144 |
+ vm.content = vm.dataList.bbsCnt; |
|
145 |
+ vm.category = vm.dataList.bbsCls; |
|
146 |
+ vm.time = vm.dataList.bbsTm; |
|
131 | 147 |
vm.findFile(); |
132 | 148 |
console.log(vm.dataList); |
133 | 149 |
}) |
... | ... | @@ -157,6 +173,10 @@ |
157 | 173 |
"selectedBoardList", |
158 | 174 |
JSON.stringify(vm.dataList) |
159 | 175 |
); |
176 |
+ vm.title = vm.dataList.bbsTtl; |
|
177 |
+ vm.content = vm.dataList.bbsCnt; |
|
178 |
+ vm.category = vm.dataList.bbsCls; |
|
179 |
+ vm.time = vm.dataList.bbsTm; |
|
160 | 180 |
vm.findFile(); |
161 | 181 |
console.log(vm.dataList); |
162 | 182 |
}) |
--- client/views/pages/teacher/noticeInsert.vue
+++ client/views/pages/teacher/noticeInsert.vue
... | ... | @@ -1,9 +1,9 @@ |
1 | 1 |
<template> |
2 | 2 |
<div class="title-box flex justify-between mb40"> |
3 |
- <p class="title">공지 등록</p> |
|
3 |
+ <p class="title">{{ titleLabel }}</p> |
|
4 | 4 |
</div> |
5 | 5 |
<div class="board-wrap"> |
6 |
- <form @submit.prevent="handleSubmit"> |
|
6 |
+ <form @submit.prevent="handleButtonAction"> |
|
7 | 7 |
<div class="flex align-center"> |
8 | 8 |
<label for="title" class="title2">제목</label> |
9 | 9 |
<input type="text" id="title" class="data-wrap" v-model="title" /> |
... | ... | @@ -13,13 +13,16 @@ |
13 | 13 |
<hr /> |
14 | 14 |
<div class="flex align-center"> |
15 | 15 |
<label for="file" class="title2">첨부파일</label> |
16 |
+ <label for="file" class="title2"> {{ file.fileNm }}</label> |
|
16 | 17 |
<input type="file" ref="fileInput" @change="handleFileUpload" /> |
17 | 18 |
</div> |
18 | 19 |
<div class="flex justify-between mt50"> |
19 | 20 |
<button title="글쓰기" class="new-btn" @click="goToPage('Board')"> |
20 | 21 |
목록 |
21 | 22 |
</button> |
22 |
- <button title="글쓰기" class="new-btn">등록</button> |
|
23 |
+ <button title="글쓰기" class="new-btn" @click="goToPage('Board')"> |
|
24 |
+ {{ buttonLabel }} |
|
25 |
+ </button> |
|
23 | 26 |
</div> |
24 | 27 |
</form> |
25 | 28 |
</div> |
... | ... | @@ -38,8 +41,14 @@ |
38 | 41 |
title: "", |
39 | 42 |
content: "", |
40 | 43 |
category: "Notice", |
44 |
+ file: "", |
|
41 | 45 |
sclsId: "", |
46 |
+ |
|
42 | 47 |
selectedFile: null, |
48 |
+ dataList: "", |
|
49 |
+ |
|
50 |
+ // 데이터 편집 상태 (true = 수정, false = 등록) |
|
51 |
+ isEditMode: false, |
|
43 | 52 |
}; |
44 | 53 |
}, |
45 | 54 |
methods: { |
... | ... | @@ -55,14 +64,25 @@ |
55 | 64 |
created() { |
56 | 65 |
const vm = this; |
57 | 66 |
const sclsId = JSON.parse(sessionStorage.getItem("sclsId")); |
67 |
+ const dataList = JSON.parse(sessionStorage.getItem("selectedBoardList")); |
|
68 |
+ const file = JSON.parse(sessionStorage.getItem("file")); |
|
58 | 69 |
|
59 | 70 |
if (sclsId) { |
60 | 71 |
vm.sclsId = sclsId; |
72 |
+ if (dataList && file) { |
|
73 |
+ vm.dataList = dataList; |
|
74 |
+ vm.file = file; |
|
75 |
+ vm.title = vm.dataList.bbsTtl; |
|
76 |
+ vm.content = vm.dataList.bbsCnt; |
|
77 |
+ vm.category = vm.dataList.bbsCls; |
|
78 |
+ vm.isEditMode = true; |
|
79 |
+ } else { |
|
80 |
+ vm.isEditMode = false; |
|
81 |
+ } |
|
61 | 82 |
} |
62 |
- console.log(sclsId); |
|
63 | 83 |
}, |
64 |
- |
|
65 |
- async handleSubmit() { |
|
84 |
+ // 게시글 등록 |
|
85 |
+ async dataInsert() { |
|
66 | 86 |
const vm = this; |
67 | 87 |
try { |
68 | 88 |
// 파일 업로드 |
... | ... | @@ -94,14 +114,76 @@ |
94 | 114 |
await axios.post("/board/insert.json", newData); |
95 | 115 |
|
96 | 116 |
alert("게시물 등록 성공"); |
117 |
+ vm.$router.push({ name: "Board" }); |
|
97 | 118 |
} catch (error) { |
98 | 119 |
console.error("게시물 등록 실패 ", error); |
99 | 120 |
alert("게시물 등록 실패"); |
100 | 121 |
} |
101 | 122 |
}, |
123 |
+ |
|
124 |
+ // 게시글 수정 |
|
125 |
+ async boardUpdate() { |
|
126 |
+ const vm = this; |
|
127 |
+ |
|
128 |
+ // 파일 업로드 |
|
129 |
+ const formData = new FormData(); |
|
130 |
+ formData.append("files", this.selectedFile); |
|
131 |
+ |
|
132 |
+ const fileUploadResponse = await axios.post( |
|
133 |
+ "/file/upload.json", |
|
134 |
+ formData, |
|
135 |
+ { |
|
136 |
+ headers: { |
|
137 |
+ "Content-Type": "multipart/form-data", |
|
138 |
+ }, |
|
139 |
+ } |
|
140 |
+ ); |
|
141 |
+ |
|
142 |
+ // 업로드 후 파일 매니지 아이디 호출 |
|
143 |
+ const fileMngId = fileUploadResponse.data.fileMngId; |
|
144 |
+ |
|
145 |
+ const newData = { |
|
146 |
+ bbsTtl: vm.title, |
|
147 |
+ bbsCls: vm.category, |
|
148 |
+ bbsCnt: vm.content, |
|
149 |
+ fileMngId: fileMngId, |
|
150 |
+ sclsId: vm.sclsId, |
|
151 |
+ bbsId: this.dataList.bbsId, |
|
152 |
+ }; |
|
153 |
+ await axios({ |
|
154 |
+ url: "/board/update.json", |
|
155 |
+ method: "post", |
|
156 |
+ headers: { |
|
157 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
158 |
+ }, |
|
159 |
+ data: newData, |
|
160 |
+ }) |
|
161 |
+ .then(function (res) { |
|
162 |
+ console.log("dataUpdate - response : ", res.data); |
|
163 |
+ }) |
|
164 |
+ .catch(function (error) { |
|
165 |
+ console.log("result - error : ", error); |
|
166 |
+ }); |
|
167 |
+ }, |
|
168 |
+ |
|
169 |
+ handleButtonAction() { |
|
170 |
+ if (this.isEditMode) { |
|
171 |
+ this.boardUpdate(); |
|
172 |
+ } else { |
|
173 |
+ this.dataInsert(); |
|
174 |
+ } |
|
175 |
+ }, |
|
102 | 176 |
}, |
103 | 177 |
watch: {}, |
104 |
- computed: {}, |
|
178 |
+ computed: { |
|
179 |
+ titleLabel() { |
|
180 |
+ return this.isEditMode ? "수정" : "공지 등록"; |
|
181 |
+ }, |
|
182 |
+ |
|
183 |
+ buttonLabel() { |
|
184 |
+ return this.isEditMode ? "수정" : "등록"; |
|
185 |
+ }, |
|
186 |
+ }, |
|
105 | 187 |
components: { |
106 | 188 |
SvgIcon, |
107 | 189 |
}, |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?