정다정
10-22
241022 정다정 선생님&학부모일때 헤더에 네비바 제거
@11a75437f680f3538e865a2db76fb21fc1a600ea
--- client/views/layout/Header.vue
+++ client/views/layout/Header.vue
... | ... | @@ -1,252 +1,225 @@ |
1 | 1 |
<template> |
2 |
- <div class="header flex justify-between align-center header-box"> |
|
3 |
- <div> |
|
4 |
- <router-link to="/MyPlan.page"> |
|
5 |
- <div class="logo"> |
|
6 |
- <img src="../../resources/img/new_img/logo_v2.png" alt="" /> |
|
2 |
+ <div class="header flex justify-between align-center header-box"> |
|
3 |
+ <div> |
|
4 |
+ <router-link to="/MyPlan.page"> |
|
5 |
+ <div v-if="getUserInfo.authcd == 'STUDENT'" class="logo"> |
|
6 |
+ <img src="../../resources/img/new_img/logo_v2.png" alt="" /> |
|
7 |
+ </div> |
|
8 |
+ </router-link> |
|
7 | 9 |
</div> |
8 |
- </router-link> |
|
9 |
- </div> |
|
10 |
- <div class="flex align-center"> |
|
11 |
- <Menu :currentRoute="$route.path"></Menu> |
|
12 |
- <div class="notice" @click="buttonSearch"> |
|
13 |
- <img src="../../resources/img/icon2.png" alt="" /> |
|
14 |
- <p>{{ unCheck }}</p> |
|
15 |
- </div> |
|
16 |
- <img src="../../resources/img/new_img/profile_img.png" alt="" /> |
|
17 |
- <div class="look-btn" @click="logout"> |
|
18 |
- <img src="../../resources/img/new_img/icon/logout_icon.png" alt="" /> |
|
19 |
- </div> |
|
20 |
- <div class="popup-wrap" v-show="searchOpen"> |
|
21 |
- <div class="popup-box"> |
|
22 |
- <div class="flex mb10 justify-between"> |
|
23 |
- <p class="popup-title">알림</p> |
|
24 |
- <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
25 |
- <svg-icon |
|
26 |
- type="mdi" |
|
27 |
- :path="mdiWindowClose" |
|
28 |
- class="close-btn" |
|
29 |
- ></svg-icon> |
|
30 |
- </button> |
|
31 |
- </div> |
|
32 |
- <article |
|
33 |
- class="flex justify-between mt20" |
|
34 |
- v-for="item in dataList" |
|
35 |
- :key="item.id" |
|
36 |
- :class="{ 'selected-row': selectedRow == item.dataList }" |
|
37 |
- > |
|
38 |
- <img |
|
39 |
- style="width: fit-content" |
|
40 |
- src="../../resources/img/img200_13p.png" |
|
41 |
- alt="" |
|
42 |
- /> |
|
43 |
- <p class="title1 ml20" style="width: 60%">{{ item.bbsTtl }}</p> |
|
44 |
- <button |
|
45 |
- @click="buttonSearch2(item)" |
|
46 |
- type="button" |
|
47 |
- title="글쓰기" |
|
48 |
- class="new-btn" |
|
49 |
- > |
|
50 |
- 자세히 보기 |
|
51 |
- </button> |
|
52 |
- </article> |
|
53 |
- <article |
|
54 |
- class="table-pagination flex justify-center align-center mb20 mt30" |
|
55 |
- style="gap: 10px" |
|
56 |
- > |
|
57 |
- <button @click="previousPage" :disabled="page === 1">이전</button> |
|
58 |
- <button class="selected-btn">{{ page }}</button> |
|
59 |
- <button @click="nextPage" :disabled="page === totalPages"> |
|
60 |
- 다음 |
|
61 |
- </button> |
|
62 |
- </article> |
|
63 |
- </div> |
|
64 |
- </div> |
|
65 |
- <div class="popup-wrap popup2" v-show="searchOpen2"> |
|
66 |
- <div class="popup-box"> |
|
67 |
- <div class="flex mb10 justify-between"> |
|
68 |
- <p class="popup-title">알림 자세히 보기</p> |
|
69 |
- <button type="button" class="popup-close-btn" @click="closeBtn2"> |
|
70 |
- <svg-icon |
|
71 |
- type="mdi" |
|
72 |
- :path="mdiWindowClose" |
|
73 |
- class="close-btn" |
|
74 |
- ></svg-icon> |
|
75 |
- </button> |
|
76 |
- </div> |
|
77 |
- <div class="board-wrap"> |
|
78 |
- <div class="flex align-center"> |
|
79 |
- <label for="" class="title2">{{ boardData.bbsTtl }}</label> |
|
10 |
+ <div class="flex align-center"> |
|
11 |
+ <Menu v-if="getUserInfo.authcd == 'STUDENT'" :currentRoute="$route.path"></Menu> |
|
12 |
+ <div class="notice" @click="buttonSearch"> |
|
13 |
+ <img src="../../resources/img/icon2.png" alt="" /> |
|
14 |
+ <p>{{ unCheck }}</p> |
|
80 | 15 |
</div> |
81 |
- <hr /> |
|
82 |
- <!-- <textarea readonly name="" id="">{{ boardData.bbsCnt }}</textarea> --> |
|
83 |
- </div> |
|
84 |
- <div class="flex justify-center mt20"> |
|
85 |
- <button |
|
86 |
- type="button" |
|
87 |
- title="확인" |
|
88 |
- class="new-btn" |
|
89 |
- @click="closeBtn2" |
|
90 |
- > |
|
91 |
- 확인 |
|
92 |
- </button> |
|
93 |
- </div> |
|
16 |
+ <img src="../../resources/img/new_img/profile_img.png" alt="" /> |
|
17 |
+ <div class="look-btn" @click="logout"> |
|
18 |
+ <img src="../../resources/img/new_img/icon/logout_icon.png" alt="" /> |
|
19 |
+ </div> |
|
20 |
+ <div class="popup-wrap" v-show="searchOpen"> |
|
21 |
+ <div class="popup-box"> |
|
22 |
+ <div class="flex mb10 justify-between"> |
|
23 |
+ <p class="popup-title">알림</p> |
|
24 |
+ <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
25 |
+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
26 |
+ </button> |
|
27 |
+ </div> |
|
28 |
+ <article |
|
29 |
+ class="flex justify-between mt20" |
|
30 |
+ v-for="item in dataList" |
|
31 |
+ :key="item.id" |
|
32 |
+ :class="{ 'selected-row': selectedRow == item.dataList }" |
|
33 |
+ > |
|
34 |
+ <img style="width: fit-content" src="../../resources/img/img200_13p.png" alt="" /> |
|
35 |
+ <p class="title1 ml20" style="width: 60%">{{ item.bbsTtl }}</p> |
|
36 |
+ <button @click="buttonSearch2(item)" type="button" title="글쓰기" class="new-btn"> |
|
37 |
+ 자세히 보기 |
|
38 |
+ </button> |
|
39 |
+ </article> |
|
40 |
+ <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px"> |
|
41 |
+ <button @click="previousPage" :disabled="page === 1">이전</button> |
|
42 |
+ <button class="selected-btn">{{ page }}</button> |
|
43 |
+ <button @click="nextPage" :disabled="page === totalPages">다음</button> |
|
44 |
+ </article> |
|
45 |
+ </div> |
|
46 |
+ </div> |
|
47 |
+ <div class="popup-wrap popup2" v-show="searchOpen2"> |
|
48 |
+ <div class="popup-box"> |
|
49 |
+ <div class="flex mb10 justify-between"> |
|
50 |
+ <p class="popup-title">알림 자세히 보기</p> |
|
51 |
+ <button type="button" class="popup-close-btn" @click="closeBtn2"> |
|
52 |
+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
53 |
+ </button> |
|
54 |
+ </div> |
|
55 |
+ <div class="board-wrap"> |
|
56 |
+ <div class="flex align-center"> |
|
57 |
+ <label for="" class="title2">{{ boardData.bbsTtl }}</label> |
|
58 |
+ </div> |
|
59 |
+ <hr /> |
|
60 |
+ <!-- <textarea readonly name="" id="">{{ boardData.bbsCnt }}</textarea> --> |
|
61 |
+ </div> |
|
62 |
+ <div class="flex justify-center mt20"> |
|
63 |
+ <button type="button" title="확인" class="new-btn" @click="closeBtn2">확인</button> |
|
64 |
+ </div> |
|
65 |
+ </div> |
|
66 |
+ </div> |
|
94 | 67 |
</div> |
95 |
- </div> |
|
96 | 68 |
</div> |
97 |
- </div> |
|
98 | 69 |
</template> |
99 | 70 |
|
100 | 71 |
<script> |
101 |
-import SvgIcon from "@jamescoyle/vue-icon"; |
|
102 |
-import { mdiMagnify, mdiWindowClose } from "@mdi/js"; |
|
103 |
-import axios from "axios"; |
|
104 |
-import Menu from "./Menu.vue"; |
|
72 |
+import SvgIcon from '@jamescoyle/vue-icon'; |
|
73 |
+import { mdiMagnify, mdiWindowClose } from '@mdi/js'; |
|
74 |
+import { mapGetters } from 'vuex'; |
|
75 |
+import axios from 'axios'; |
|
76 |
+import Menu from './Menu.vue'; |
|
105 | 77 |
export default { |
106 |
- data() { |
|
107 |
- return { |
|
108 |
- mdiWindowClose: mdiWindowClose, |
|
109 |
- showModal: false, |
|
110 |
- searchOpen: false, |
|
111 |
- searchOpen2: false, |
|
78 |
+ data() { |
|
79 |
+ return { |
|
80 |
+ mdiWindowClose: mdiWindowClose, |
|
81 |
+ showModal: false, |
|
82 |
+ searchOpen: false, |
|
83 |
+ searchOpen2: false, |
|
112 | 84 |
|
113 |
- // 게시글 정보 |
|
114 |
- dataList: [], |
|
115 |
- totalBoard: null, |
|
116 |
- selectedRow: "", |
|
117 |
- unCheck: null, |
|
85 |
+ // 게시글 정보 |
|
86 |
+ dataList: [], |
|
87 |
+ totalBoard: null, |
|
88 |
+ selectedRow: '', |
|
89 |
+ unCheck: null, |
|
118 | 90 |
|
119 |
- boardData: [], |
|
91 |
+ boardData: [], |
|
120 | 92 |
|
121 |
- // 페이징 정보 |
|
122 |
- page: 1, |
|
123 |
- pageSize: 2, |
|
124 |
- totalpages: null, |
|
93 |
+ // 페이징 정보 |
|
94 |
+ page: 1, |
|
95 |
+ pageSize: 2, |
|
96 |
+ totalpages: null, |
|
125 | 97 |
|
126 |
- // 사용자 정보 |
|
127 |
- userId: "USID_000000000000006", |
|
128 |
- stdId: "", |
|
129 |
- }; |
|
130 |
- }, |
|
131 |
- methods: { |
|
132 |
- closeModal() { |
|
133 |
- this.showModal = false; |
|
98 |
+ // 사용자 정보 |
|
99 |
+ userId: 'USID_000000000000006', |
|
100 |
+ stdId: '', |
|
101 |
+ }; |
|
134 | 102 |
}, |
135 |
- buttonSearch() { |
|
136 |
- this.searchOpen = true; |
|
137 |
- }, |
|
138 |
- buttonSearch2(item) { |
|
139 |
- const vm = this; |
|
140 |
- this.searchOpen2 = true; |
|
141 |
- this.boardData = item; |
|
142 |
- |
|
143 |
- axios({ |
|
144 |
- url: "/board/boardStudentCheck.json", |
|
145 |
- method: "post", |
|
146 |
- headers: { |
|
147 |
- "Content-Type": "application/json; charset=UTF-8", |
|
103 |
+ methods: { |
|
104 |
+ closeModal() { |
|
105 |
+ this.showModal = false; |
|
148 | 106 |
}, |
149 |
- data: { |
|
150 |
- bbsId: item.bbsId, |
|
151 |
- stdId: vm.stdId, |
|
107 |
+ buttonSearch() { |
|
108 |
+ this.searchOpen = true; |
|
152 | 109 |
}, |
153 |
- }) |
|
154 |
- .then(function (res) { |
|
155 |
- vm.boardList(); |
|
156 |
- }) |
|
157 |
- .catch(function (error) { |
|
158 |
- console.log("result - error : ", error); |
|
159 |
- }); |
|
160 |
- }, |
|
161 |
- closeBtn() { |
|
162 |
- this.searchOpen = false; |
|
163 |
- }, |
|
164 |
- closeBtn2() { |
|
165 |
- this.searchOpen2 = false; |
|
166 |
- }, |
|
110 |
+ buttonSearch2(item) { |
|
111 |
+ const vm = this; |
|
112 |
+ this.searchOpen2 = true; |
|
113 |
+ this.boardData = item; |
|
167 | 114 |
|
168 |
- logout() { |
|
169 |
- const result = confirm("로그아웃 하시겠습니까?"); |
|
170 |
- if (result) { |
|
171 |
- this.$store.dispatch("logout"); |
|
172 |
- this.goToPage("login"); |
|
173 |
- } else { |
|
174 |
- return; |
|
175 |
- } |
|
176 |
- }, |
|
177 |
- goToPage(page) { |
|
178 |
- this.$router.push({ name: page }); |
|
179 |
- }, |
|
180 |
- |
|
181 |
- // 공지 조회 |
|
182 |
- boardList() { |
|
183 |
- const vm = this; |
|
184 |
- axios({ |
|
185 |
- url: "/board/boardStudentList.json", |
|
186 |
- method: "post", |
|
187 |
- headers: { |
|
188 |
- "Content-Type": "application/json; charset=UTF-8", |
|
115 |
+ axios({ |
|
116 |
+ url: '/board/boardStudentCheck.json', |
|
117 |
+ method: 'post', |
|
118 |
+ headers: { |
|
119 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
120 |
+ }, |
|
121 |
+ data: { |
|
122 |
+ bbsId: item.bbsId, |
|
123 |
+ stdId: vm.stdId, |
|
124 |
+ }, |
|
125 |
+ }) |
|
126 |
+ .then(function (res) { |
|
127 |
+ vm.boardList(); |
|
128 |
+ }) |
|
129 |
+ .catch(function (error) { |
|
130 |
+ console.log('result - error : ', error); |
|
131 |
+ }); |
|
189 | 132 |
}, |
190 |
- data: { page: vm.page, pageSize: vm.pageSize, userId: vm.userId }, |
|
191 |
- }) |
|
192 |
- .then(function (res) { |
|
193 |
- vm.dataList = res.data.result[0].boardClass[0].board; |
|
194 |
- vm.userNm = res.data.result[0].userNm; |
|
195 |
- vm.userId = res.data.result[0].userId; |
|
196 |
- vm.unCheck = res.data.unCheck; |
|
197 |
- vm.stdId = |
|
198 |
- res.data.result[0].boardClass[0].board[0].boardStudent[0].stdId; |
|
199 |
- vm.totalBoard = res.data.totalBoard; |
|
200 |
- vm.totalPages = Math.ceil(vm.totalBoard / vm.pageSize); |
|
201 |
- }) |
|
202 |
- .catch(function (error) { |
|
203 |
- console.log("result - error : ", error); |
|
204 |
- }); |
|
205 |
- }, |
|
133 |
+ closeBtn() { |
|
134 |
+ this.searchOpen = false; |
|
135 |
+ }, |
|
136 |
+ closeBtn2() { |
|
137 |
+ this.searchOpen2 = false; |
|
138 |
+ }, |
|
206 | 139 |
|
207 |
- previousPage() { |
|
208 |
- if (this.page > 1) { |
|
209 |
- this.page -= 1; |
|
140 |
+ logout() { |
|
141 |
+ const result = confirm('로그아웃 하시겠습니까?'); |
|
142 |
+ if (result) { |
|
143 |
+ this.$store.dispatch('logout'); |
|
144 |
+ this.goToPage('login'); |
|
145 |
+ } else { |
|
146 |
+ return; |
|
147 |
+ } |
|
148 |
+ }, |
|
149 |
+ goToPage(page) { |
|
150 |
+ this.$router.push({ name: page }); |
|
151 |
+ }, |
|
152 |
+ |
|
153 |
+ // 공지 조회 |
|
154 |
+ boardList() { |
|
155 |
+ const vm = this; |
|
156 |
+ axios({ |
|
157 |
+ url: '/board/boardStudentList.json', |
|
158 |
+ method: 'post', |
|
159 |
+ headers: { |
|
160 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
161 |
+ }, |
|
162 |
+ data: { page: vm.page, pageSize: vm.pageSize, userId: vm.userId }, |
|
163 |
+ }) |
|
164 |
+ .then(function (res) { |
|
165 |
+ vm.dataList = res.data.result[0].boardClass[0].board; |
|
166 |
+ vm.userNm = res.data.result[0].userNm; |
|
167 |
+ vm.userId = res.data.result[0].userId; |
|
168 |
+ vm.unCheck = res.data.unCheck; |
|
169 |
+ vm.stdId = res.data.result[0].boardClass[0].board[0].boardStudent[0].stdId; |
|
170 |
+ vm.totalBoard = res.data.totalBoard; |
|
171 |
+ vm.totalPages = Math.ceil(vm.totalBoard / vm.pageSize); |
|
172 |
+ }) |
|
173 |
+ .catch(function (error) { |
|
174 |
+ console.log('result - error : ', error); |
|
175 |
+ }); |
|
176 |
+ }, |
|
177 |
+ |
|
178 |
+ previousPage() { |
|
179 |
+ if (this.page > 1) { |
|
180 |
+ this.page -= 1; |
|
181 |
+ this.boardList(); |
|
182 |
+ } |
|
183 |
+ }, |
|
184 |
+ |
|
185 |
+ nextPage() { |
|
186 |
+ if (this.page < this.totalPages) { |
|
187 |
+ this.page += 1; |
|
188 |
+ this.boardList(); |
|
189 |
+ } |
|
190 |
+ }, |
|
191 |
+ }, |
|
192 |
+ watch: {}, |
|
193 |
+ computed: { |
|
194 |
+ ...mapGetters(['getUserInfo']), |
|
195 |
+ }, |
|
196 |
+ components: { |
|
197 |
+ SvgIcon, |
|
198 |
+ Menu: Menu, |
|
199 |
+ }, |
|
200 |
+ mounted() { |
|
201 |
+ console.log('Header mounted'); |
|
210 | 202 |
this.boardList(); |
211 |
- } |
|
212 | 203 |
}, |
213 |
- |
|
214 |
- nextPage() { |
|
215 |
- if (this.page < this.totalPages) { |
|
216 |
- this.page += 1; |
|
217 |
- this.boardList(); |
|
218 |
- } |
|
219 |
- }, |
|
220 |
- }, |
|
221 |
- watch: {}, |
|
222 |
- computed: {}, |
|
223 |
- components: { |
|
224 |
- SvgIcon, |
|
225 |
- Menu: Menu, |
|
226 |
- }, |
|
227 |
- mounted() { |
|
228 |
- console.log("Header mounted"); |
|
229 |
- this.boardList(); |
|
230 |
- }, |
|
231 | 204 |
}; |
232 | 205 |
</script> |
233 | 206 |
<style scoped> |
234 | 207 |
.popup-wrap { |
235 |
- position: fixed; |
|
236 |
- background-color: transparent; |
|
237 |
- width: fit-content; |
|
238 |
- height: fit-content; |
|
239 |
- z-index: 10; |
|
208 |
+ position: fixed; |
|
209 |
+ background-color: transparent; |
|
210 |
+ width: fit-content; |
|
211 |
+ height: fit-content; |
|
212 |
+ z-index: 10; |
|
240 | 213 |
} |
241 | 214 |
|
242 | 215 |
.popup-box { |
243 |
- top: 300px; |
|
244 |
- left: 62%; |
|
216 |
+ top: 300px; |
|
217 |
+ left: 62%; |
|
245 | 218 |
} |
246 | 219 |
|
247 | 220 |
.popup2 .popup-box { |
248 |
- top: 450px; |
|
249 |
- left: 38%; |
|
221 |
+ top: 450px; |
|
222 |
+ left: 38%; |
|
250 | 223 |
} |
251 | 224 |
|
252 | 225 |
/* |
... | ... | @@ -259,9 +232,9 @@ |
259 | 232 |
} */ |
260 | 233 |
|
261 | 234 |
.header-box { |
262 |
- background-color: #ffffff80; |
|
263 |
- padding: 10px 50px; |
|
264 |
- /* box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px; */ |
|
265 |
- backdrop-filter: blur(10px); |
|
235 |
+ background-color: #ffffff80; |
|
236 |
+ padding: 10px 50px; |
|
237 |
+ /* box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px; */ |
|
238 |
+ backdrop-filter: blur(10px); |
|
266 | 239 |
} |
267 | 240 |
</style> |
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?