Commit @bfdcc335b2bb2231ebcbd3a8d1b1101498f9c15e

PsHooN7979 2024-08-07
240807 박세훈 학생 공지 알람 추가 ui 수정 필요
@bfdcc335b2bb2231ebcbd3a8d1b1101498f9c15e
7f75fa2
bfdcc33
client/views/layout/Header.vue
--- client/views/layout/Header.vue
+++ client/views/layout/Header.vue

 <template>
-    <div class="header flex justify-end">
-        <img src="../../resources/img/setting.png" alt="">
-        <div class="notice" @click="buttonSearch"><img src="../../resources/img/icon2.png" alt="">
-            <p>1</p>
-        </div>
-        <img src="../../resources/img/img03.png" alt="">
-        <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">
-                    <img style="width: fit-content;" src="../../resources/img/img200_13p.png" alt="">
-                    <p class="title1 ml20" style="width: 60%;">1반친구들</p>
-                    <button @click="buttonSearch2" type="button" title="글쓰기" class="new-btn">
-                        자세히 보기
-                    </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">제목</label>
-                        <input type="text" class="data-wrap">
-                    </div>
-                    <hr>
-                    <textarea name="" id=""></textarea>
-
-                </div>
-                <div class="flex justify-center mt20">
-                    <button type="button" title="확인" class="new-btn">
-                        확인
-                    </button>
-                </div>
-            </div>
-        </div>
+  <div class="header flex justify-end">
+    <img src="../../resources/img/setting.png" alt="" />
+    <div class="notice" @click="buttonSearch">
+      <img src="../../resources/img/icon2.png" alt="" />
+      <p>{{ unCheck }}</p>
     </div>
-
+    <img src="../../resources/img/img03.png" alt="" />
+    <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, index) 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>
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiWindowClose } from '@mdi/js';
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify, mdiWindowClose } from "@mdi/js";
+import axios from "axios";
 export default {
-    data() {
-        return {
-            mdiWindowClose: mdiWindowClose,
-            showModal: false,
-            searchOpen: false,
-            searchOpen2: false,
-        }
-    },
-    methods: {
-        closeModal() {
-            this.showModal = false;
-        },
-        buttonSearch() {
-            this.searchOpen = true;
-        },
-        buttonSearch2() {
-            this.searchOpen2 = true;
-        },
-        closeBtn() {
-            this.searchOpen = false;
+  data() {
+    return {
+      mdiWindowClose: mdiWindowClose,
+      showModal: false,
+      searchOpen: false,
+      searchOpen2: false,
 
+      // 게시글 정보
+      dataList: [],
+      totalBoard: null,
+      selectedRow: "",
+      unCheck: null,
+
+      boardData: [],
+
+      // 페이징 정보
+      page: 1,
+      pageSize: 3,
+      totalpages: null,
+
+      // 사용자 정보
+      userId: "USID_000000000000002",
+      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",
         },
-        closeBtn2() {
-            this.searchOpen2 = false;
-
+        data: {
+          bbsId: item.bbsId,
+          stdId: vm.stdId,
         },
+      })
+        .then(function (res) {
+          vm.boardList();
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+        });
     },
-    watch: {
+    closeBtn() {
+      this.searchOpen = false;
+    },
+    closeBtn2() {
+      this.searchOpen2 = false;
+    },
 
+    // 공지 조회
+    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);
+          alert("게시물 조회 실패");
+        });
     },
-    computed: {
 
+    previousPage() {
+      if (this.page > 1) {
+        this.page -= 1;
+        this.boardList();
+      }
     },
-    components: {
-        SvgIcon
+
+    nextPage() {
+      if (this.page < this.totalPages) {
+        this.page += 1;
+        this.boardList();
+      }
     },
-    mounted() {
-        console.log('Header mounted');
-    }
-}
+  },
+  watch: {},
+  computed: {},
+  components: {
+    SvgIcon,
+  },
+  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: 164px;
-    left: 62%;
+  top: 164px;
+  left: 62%;
 }
 
 .popup2 .popup-box {
-    top: 450px;
-    left: 38%;
+  top: 450px;
+  left: 38%;
 }
-</style>
+</style>
Add a comment
Open 0
Closed 0
List
Delete comment
