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