jichoi / lms_front star
정다정 10-22
241022 정다정 선생님&학부모일때 헤더에 네비바 제거
@11a75437f680f3538e865a2db76fb21fc1a600ea
client/views/layout/Header.vue
--- client/views/layout/Header.vue
+++ client/views/layout/Header.vue
@@ -1,252 +1,225 @@
 <template>
-  <div class="header flex justify-between align-center header-box">
-    <div>
-      <router-link to="/MyPlan.page">
-        <div class="logo">
-          <img src="../../resources/img/new_img/logo_v2.png" alt="" />
+    <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>
-      </router-link>
-    </div>
-    <div class="flex align-center">
-      <Menu :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 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>
-            <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>
+            <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>
     </div>
-  </div>
 </template>
 
 <script>
-import SvgIcon from "@jamescoyle/vue-icon";
-import { mdiMagnify, mdiWindowClose } from "@mdi/js";
-import axios from "axios";
-import Menu from "./Menu.vue";
+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,
+    data() {
+        return {
+            mdiWindowClose: mdiWindowClose,
+            showModal: false,
+            searchOpen: false,
+            searchOpen2: false,
 
-      // 게시글 정보
-      dataList: [],
-      totalBoard: null,
-      selectedRow: "",
-      unCheck: null,
+            // 게시글 정보
+            dataList: [],
+            totalBoard: null,
+            selectedRow: '',
+            unCheck: null,
 
-      boardData: [],
+            boardData: [],
 
-      // 페이징 정보
-      page: 1,
-      pageSize: 2,
-      totalpages: null,
+            // 페이징 정보
+            page: 1,
+            pageSize: 2,
+            totalpages: null,
 
-      // 사용자 정보
-      userId: "USID_000000000000006",
-      stdId: "",
-    };
-  },
-  methods: {
-    closeModal() {
-      this.showModal = false;
+            // 사용자 정보
+            userId: 'USID_000000000000006',
+            stdId: '',
+        };
     },
-    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",
+    methods: {
+        closeModal() {
+            this.showModal = false;
         },
-        data: {
-          bbsId: item.bbsId,
-          stdId: vm.stdId,
+        buttonSearch() {
+            this.searchOpen = true;
         },
-      })
-        .then(function (res) {
-          vm.boardList();
-        })
-        .catch(function (error) {
-          console.log("result - error : ", error);
-        });
-    },
-    closeBtn() {
-      this.searchOpen = false;
-    },
-    closeBtn2() {
-      this.searchOpen2 = false;
-    },
+        buttonSearch2(item) {
+            const vm = this;
+            this.searchOpen2 = true;
+            this.boardData = item;
 
-    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",
+            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);
+                });
         },
-        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);
-        });
-    },
+        closeBtn() {
+            this.searchOpen = false;
+        },
+        closeBtn2() {
+            this.searchOpen2 = false;
+        },
 
-    previousPage() {
-      if (this.page > 1) {
-        this.page -= 1;
+        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();
-      }
     },
-
-    nextPage() {
-      if (this.page < this.totalPages) {
-        this.page += 1;
-        this.boardList();
-      }
-    },
-  },
-  watch: {},
-  computed: {},
-  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;
+    position: fixed;
+    background-color: transparent;
+    width: fit-content;
+    height: fit-content;
+    z-index: 10;
 }
 
 .popup-box {
-  top: 300px;
-  left: 62%;
+    top: 300px;
+    left: 62%;
 }
 
 .popup2 .popup-box {
-  top: 450px;
-  left: 38%;
+    top: 450px;
+    left: 38%;
 }
 
 /* 
@@ -259,9 +232,9 @@
 } */
 
 .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);
+    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>
Add a comment
List