Commit @c4cce0ff83b111afd2c37523247579685c1773cb

PsHooN7979 2024-08-07

240807 박세훈 선생님 게시판

@c4cce0ff83b111afd2c37523247579685c1773cb

7b34d9c

c4cce0f

client/views/pages/teacher/Board.vue

--- client/views/pages/teacher/Board.vue

+++ client/views/pages/teacher/Board.vue


 <template>
-    <div class="title-box flex justify-between mb40">
-        <p class="title">게시판</p>
-        <select name="" id="">
-            <option value="">A반</option>
-        </select>
+  <div class="title-box flex justify-between mb40">
+    <p class="title">게시판</p>
+    <select name="" id="">
+      <option value="">A반</option>
+    </select>
+  </div>
+  <div class="search-wrap flex justify-end mb20">
+    <select v-model="selectedSearchOption" class="mr10 data-wrap">
+      <option value="bbsTtl">제목</option>
+      <option value="bbsCnt">내용</option>
+      <option value="userNm">작성자</option>
+      <option value="bbsCls">카테고리</option>
+    </select>
+    <input
+      v-model="searchKeyword"
+      type="text"
+      placeholder="검색하세요."
+      @keyup.enter="boardDataSearch"
+    />
+    <button type="button" @click="boardDataSearch()" title="게시글 검색">
+      <img src="../../../resources/img/look_t.png" alt="" />
+    </button>
+  </div>
+  <div class="table-wrap">
+    <table>
+      <thead>
+        <td>No.</td>
+        <td>제목</td>
+        <td>카테고리</td>
+        <td>작성자</td>
+        <td>등록일</td>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(item, index) in dataList"
+          :key="item.id"
+          :class="{ 'selected-row': selectedRow == item.dataList }"
+          @click="[goToPage('noticeDetail'), selectBoardList(item)]"
+        >
+          <td>{{ totalBoard - index }}</td>
+          <td>{{ item.bbsTtl }}</td>
+          <td>{{ item.bbsCls }}</td>
+          <td>{{ userNm }}</td>
+          <td>{{ item.bbsTm }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <article
+      class="table-pagination flex justify-center align-center mb20 mt30"
+      style="gap: 10px"
+    >
+      <button>
+        <img
+          src="../../../resources/img/btn27_90t_normal.png"
+          alt=""
+          @click="previousPage"
+          :disabled="page === 1"
+        />
+      </button>
+      <button class="selected-btn">{{ page }}</button>
+      <button>
+        <img
+          src="../../../resources/img/btn28_90t_normal.png"
+          alt=""
+          @click="nextPage"
+          :disabled="page === totalPages"
+        />
+      </button>
+    </article>
+    <div class="flex justify-end">
+      <button
+        type="button"
+        title="글쓰기"
+        class="new-btn"
+        @click="goToPage('noticeInsert')"
+      >
+        글쓰기
+      </button>
     </div>
-    <div class="search-wrap flex justify-end mb20">
-            <select name="" id="" class="mr10 data-wrap">
-                <option value="">전체</option>
-            </select>
-                <input  type="text" placeholder="검색하세요.">
-                <button type="button" title="위원회 검색">
-                    <img src="../../../resources/img/look_t.png" alt="">
-                </button>
-        </div>
-        <div class="table-wrap">
-            <table>
-                <thead>
-                    <td>No.</td>
-                    <td>제목</td>
-                    <td>카테고리</td>
-                    <td>작성자</td>
-                    <td>등록일</td>
-                </thead>
-                <tbody>
-                    <tr @click="goToPage('noticeDetail')">
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                    </tr>
-                </tbody>
-            </table>
-            <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
-                    <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button>
-                    <button class="selected-btn">1</button>
-                    <button>2</button>
-                    <button>3</button>
-                    <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button>
-                </article>
-                <div class="flex justify-end ">
-                <button type="button" title="글쓰기" class="new-btn" @click="goToPage('noticeInsert')">
-                    글쓰기
-                </button>
-        </div>
-        </div>
+  </div>
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify} from '@mdi/js';
-
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify } from "@mdi/js";
+import axios from "axios";
 
 export default {
-    data () {
-        return {
-            mdiMagnify: mdiMagnify,
-        }
-    },
-    methods: {
-        goToPage(page) {
-         this.$router.push({ name: page });
-      },
-      showConfirm(type) {
-            let message = '';
-            if (type === 'cancel') {
-                message = '삭제하시겠습니까?';
-            } else if (type === 'reset') {
-                message = '초기화하시겠습니까?';
-            } else if (type === 'save') {
-                message = '등록하시겠습니까?';
-            }
+  data() {
+    return {
+      mdiMagnify: mdiMagnify,
 
-            if (confirm(message)) {
-                this.goBack();
-            }
+      // 게시글 정보
+      dataList: [],
+      totalBoard: null,
+      selectedRow: "",
+
+      // 페이징
+      page: 1,
+      pageSize: 8,
+      totalPages: null,
+
+      // 반 아이디 (추후 세션에서 받는걸로 수정)
+      sclsId: "1",
+
+      // 검색어
+      searchKeyword: "",
+      selectedSearchOption: "bbsTtl",
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    showConfirm(type) {
+      let message = "";
+      if (type === "cancel") {
+        message = "삭제하시겠습니까?";
+      } else if (type === "reset") {
+        message = "초기화하시겠습니까?";
+      } else if (type === "save") {
+        message = "등록하시겠습니까?";
+      }
+
+      if (confirm(message)) {
+        this.goBack();
+      }
+    },
+
+    // 게시글 전체 조회
+    boardList() {
+      const vm = this;
+      axios({
+        url: "/board/findAll.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
+        data: { page: vm.page, pageSize: vm.pageSize, sclsId: vm.sclsId },
+      })
+        .then(function (res) {
+          console.log("dataList - response : ", res.data);
+          console.log(res.data.result[0].boardClass[0].board);
 
+          vm.dataList = res.data.result[0].boardClass[0].board;
+          vm.userNm = res.data.result[0].userNm;
+          vm.userId = res.data.result[0].userId;
+          vm.totalBoard = res.data.totalBoard;
+          vm.totalPages = Math.ceil(vm.totalBoard / vm.pageSize);
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+          alert("비상 비상!");
+        });
     },
-    watch: {
 
+    // 게시글 정보 세션에 저장
+    selectBoardList(item) {
+      sessionStorage.setItem("selectedBoardList", JSON.stringify(item));
     },
-    computed: {
-       
+
+    // 반 아이디 세션에 저장
+    setClassId() {
+      sessionStorage.setItem("sclsId", JSON.stringify(this.sclsId));
     },
-    components:{
-        SvgIcon
+
+    // 게시글 검색
+    boardDataSearch() {
+      const vm = this;
+      let searchPayload = {
+        keyword: vm.searchKeyword,
+        option: vm.selectedSearchOption,
+        page: vm.page,
+        pageSize: vm.pageSize,
+        sclsId: vm.sclsId,
+      };
+      axios({
+        url: "/board/search.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: searchPayload,
+      })
+        .then(function (res) {
+          console.log("boardDataSearch - response : ", res.data);
+          vm.dataList = res.data.result[0].boardClass[0].board;
+          vm.userNm = res.data.result[0].userNm;
+          vm.userId = res.data.result[0].userId;
+          vm.totalBoard = res.data.totalBoard;
+        })
+        .catch(function (error) {
+          console.log("dataSearch - error : ", error);
+          alert("게시글이 존재하지 않습니다.");
+        });
     },
-    mounted() {
-        console.log('Main2 mounted');
-    }
-}
-</script>
+
+    previousPage() {
+      if (this.page > 1) {
+        this.page -= 1;
+        this.boardList();
+      }
+    },
+
+    nextPage() {
+      if (this.page < this.totalPages) {
+        this.page += 1;
+        this.boardList();
+      }
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {
+    SvgIcon,
+  },
+  mounted() {
+    console.log("Main2 mounted");
+    this.boardList();
+    this.setClassId();
+  },
+};
+</script>

7b34d9c

c4cce0f

client/views/pages/teacher/noticeInsert.vue

--- client/views/pages/teacher/noticeInsert.vue

+++ client/views/pages/teacher/noticeInsert.vue


 <template>
-    <div class="title-box flex justify-between mb40">
-        <p class="title">공지 등록</p>
-    </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>
-            <hr>
-            <div class="flex align-center">
-                <label for="" class="title2">첨부파일</label>
-                <input type="file" ref="fileInput" @change="handleFileUpload" />
-            </div>
-        </div>
-        <div class="flex justify-between mt50">
-                <button type="button" title="글쓰기" class="new-btn"  @click="goToPage('Board')">
-                    목록
-                </button>
-                <button type="button" title="글쓰기" class="new-btn"  @click="goToPage('Board')">
-                     등록
-                </button>
-        </div>
+  <div class="title-box flex justify-between mb40">
+    <p class="title">공지 등록</p>
+  </div>
+  <div class="board-wrap">
+    <form @submit.prevent="handleSubmit">
+      <div class="flex align-center">
+        <label for="title" class="title2">제목</label>
+        <input type="text" id="title" class="data-wrap" v-model="title" />
+      </div>
+      <hr />
+      <textarea name="" id="content" v-model="content"></textarea>
+      <hr />
+      <div class="flex align-center">
+        <label for="file" class="title2">첨부파일</label>
+        <input type="file" ref="fileInput" @change="handleFileUpload" />
+      </div>
+      <div class="flex justify-between mt50">
+        <button title="글쓰기" class="new-btn" @click="goToPage('Board')">
+          목록
+        </button>
+        <button title="글쓰기" class="new-btn">등록</button>
+      </div>
+    </form>
+  </div>
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify} from '@mdi/js';
-
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify } from "@mdi/js";
+import axios from "axios";
 
 export default {
-    data () {
-        return {
-            mdiMagnify: mdiMagnify,
-        }
-    },
-    methods: {
-        goToPage(page) {
-         this.$router.push({ name: page });
-      },
-    },
-    watch: {
+  data() {
+    return {
+      mdiMagnify: mdiMagnify,
 
+      title: "",
+      content: "",
+      category: "Notice",
+      sclsId: "",
+      selectedFile: null,
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    computed: {
-       
+
+    handleFileUpload(e) {
+      this.selectedFile = e.target.files[0];
+      console.log(this.selectedFile);
     },
-    components:{
-        SvgIcon
+
+    created() {
+      const vm = this;
+      const sclsId = JSON.parse(sessionStorage.getItem("sclsId"));
+
+      if (sclsId) {
+        vm.sclsId = sclsId;
+      }
+      console.log(sclsId);
     },
-    mounted() {
-        console.log('Main2 mounted');
-    }
-}
-</script>
+
+    async handleSubmit() {
+      const vm = this;
+      try {
+        // 파일 업로드
+        const formData = new FormData();
+        formData.append("files", this.selectedFile);
+
+        const fileUploadResponse = await axios.post(
+          "/file/upload.json",
+          formData,
+          {
+            headers: {
+              "Content-Type": "multipart/form-data",
+            },
+          }
+        );
+
+        // 업로드 후 파일 매니지 아이디 호출
+        const fileMngId = fileUploadResponse.data.fileMngId;
+
+        // 게시물 등록
+        const newData = {
+          bbsTtl: vm.title,
+          bbsCls: vm.category,
+          bbsCnt: vm.content,
+          fileMngId: fileMngId,
+          sclsId: vm.sclsId,
+        };
+
+        await axios.post("/board/insert.json", newData);
+
+        alert("게시물 등록 성공");
+      } catch (error) {
+        console.error("게시물 등록 실패 ", error);
+        alert("게시물 등록 실패");
+      }
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {
+    SvgIcon,
+  },
+  mounted() {
+    console.log("Main2 mounted");
+    this.created();
+  },
+};
+</script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,95 +1,224 @@
1	1	<template>
2		- <div class="title-box flex justify-between mb40">
3		- <p class="title">게시판</p>
4		- <select name="" id="">
5		- <option value="">A반</option>
6		- </select>
	2	+ <div class="title-box flex justify-between mb40">
	3	+ <p class="title">게시판</p>
	4	+ <select name="" id="">
	5	+ <option value="">A반</option>
	6	+ </select>
	7	+ </div>
	8	+ <div class="search-wrap flex justify-end mb20">
	9	+ <select v-model="selectedSearchOption" class="mr10 data-wrap">
	10	+ <option value="bbsTtl">제목</option>
	11	+ <option value="bbsCnt">내용</option>
	12	+ <option value="userNm">작성자</option>
	13	+ <option value="bbsCls">카테고리</option>
	14	+ </select>
	15	+ <input
	16	+ v-model="searchKeyword"
	17	+ type="text"
	18	+ placeholder="검색하세요."
	19	+ @keyup.enter="boardDataSearch"
	20	+ />
	21	+ <button type="button" @click="boardDataSearch()" title="게시글 검색">
	22	+ <img src="../../../resources/img/look_t.png" alt="" />
	23	+ </button>
	24	+ </div>
	25	+ <div class="table-wrap">
	26	+ <table>
	27	+ <thead>
	28	+ <td>No.</td>
	29	+ <td>제목</td>
	30	+ <td>카테고리</td>
	31	+ <td>작성자</td>
	32	+ <td>등록일</td>
	33	+ </thead>
	34	+ <tbody>
	35	+ <tr
	36	+ v-for="(item, index) in dataList"
	37	+ :key="item.id"
	38	+ :class="{ 'selected-row': selectedRow == item.dataList }"
	39	+ @click="[goToPage('noticeDetail'), selectBoardList(item)]"
	40	+ >
	41	+ <td>{{ totalBoard - index }}</td>
	42	+ <td>{{ item.bbsTtl }}</td>
	43	+ <td>{{ item.bbsCls }}</td>
	44	+ <td>{{ userNm }}</td>
	45	+ <td>{{ item.bbsTm }}</td>
	46	+ </tr>
	47	+ </tbody>
	48	+ </table>
	49	+ <article
	50	+ class="table-pagination flex justify-center align-center mb20 mt30"
	51	+ style="gap: 10px"
	52	+ >
	53	+ <button>
	54	+ <img
	55	+ src="../../../resources/img/btn27_90t_normal.png"
	56	+ alt=""
	57	+ @click="previousPage"
	58	+ :disabled="page === 1"
	59	+ />
	60	+ </button>
	61	+ <button class="selected-btn">{{ page }}</button>
	62	+ <button>
	63	+ <img
	64	+ src="../../../resources/img/btn28_90t_normal.png"
	65	+ alt=""
	66	+ @click="nextPage"
	67	+ :disabled="page === totalPages"
	68	+ />
	69	+ </button>
	70	+ </article>
	71	+ <div class="flex justify-end">
	72	+ <button
	73	+ type="button"
	74	+ title="글쓰기"
	75	+ class="new-btn"
	76	+ @click="goToPage('noticeInsert')"
	77	+ >
	78	+ 글쓰기
	79	+ </button>
7	80	</div>
8		- <div class="search-wrap flex justify-end mb20">
9		- <select name="" id="" class="mr10 data-wrap">
10		- <option value="">전체</option>
11		- </select>
12		- <input type="text" placeholder="검색하세요.">
13		- <button type="button" title="위원회 검색">
14		- <img src="../../../resources/img/look_t.png" alt="">
15		- </button>
16		- </div>
17		- <div class="table-wrap">
18		- <table>
19		- <thead>
20		- <td>No.</td>
21		- <td>제목</td>
22		- <td>카테고리</td>
23		- <td>작성자</td>
24		- <td>등록일</td>
25		- </thead>
26		- <tbody>
27		- <tr @click="goToPage('noticeDetail')">
28		- <td></td>
29		- <td></td>
30		- <td></td>
31		- <td></td>
32		- <td></td>
33		- </tr>
34		- </tbody>
35		- </table>
36		- <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
37		- <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button>
38		- <button class="selected-btn">1</button>
39		- <button>2</button>
40		- <button>3</button>
41		- <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button>
42		- </article>
43		- <div class="flex justify-end ">
44		- <button type="button" title="글쓰기" class="new-btn" @click="goToPage('noticeInsert')">
45		- 글쓰기
46		- </button>
47		- </div>
48		- </div>
	81	+ </div>
49	82	</template>
50	83
51	84	<script>
52		-import SvgIcon from '@jamescoyle/vue-icon';
53		-import { mdiMagnify} from '@mdi/js';
54		-
	85	+import SvgIcon from "@jamescoyle/vue-icon";
	86	+import { mdiMagnify } from "@mdi/js";
	87	+import axios from "axios";
55	88
56	89	export default {
57		- data () {
58		- return {
59		- mdiMagnify: mdiMagnify,
60		- }
61		- },
62		- methods: {
63		- goToPage(page) {
64		- this.$router.push({ name: page });
65		- },
66		- showConfirm(type) {
67		- let message = '';
68		- if (type === 'cancel') {
69		- message = '삭제하시겠습니까?';
70		- } else if (type === 'reset') {
71		- message = '초기화하시겠습니까?';
72		- } else if (type === 'save') {
73		- message = '등록하시겠습니까?';
74		- }
	90	+ data() {
	91	+ return {
	92	+ mdiMagnify: mdiMagnify,
75	93
76		- if (confirm(message)) {
77		- this.goBack();
78		- }
	94	+ // 게시글 정보
	95	+ dataList: [],
	96	+ totalBoard: null,
	97	+ selectedRow: "",
	98	+
	99	+ // 페이징
	100	+ page: 1,
	101	+ pageSize: 8,
	102	+ totalPages: null,
	103	+
	104	+ // 반 아이디 (추후 세션에서 받는걸로 수정)
	105	+ sclsId: "1",
	106	+
	107	+ // 검색어
	108	+ searchKeyword: "",
	109	+ selectedSearchOption: "bbsTtl",
	110	+ };
	111	+ },
	112	+ methods: {
	113	+ goToPage(page) {
	114	+ this.$router.push({ name: page });
	115	+ },
	116	+ showConfirm(type) {
	117	+ let message = "";
	118	+ if (type === "cancel") {
	119	+ message = "삭제하시겠습니까?";
	120	+ } else if (type === "reset") {
	121	+ message = "초기화하시겠습니까?";
	122	+ } else if (type === "save") {
	123	+ message = "등록하시겠습니까?";
	124	+ }
	125	+
	126	+ if (confirm(message)) {
	127	+ this.goBack();
	128	+ }
	129	+ },
	130	+
	131	+ // 게시글 전체 조회
	132	+ boardList() {
	133	+ const vm = this;
	134	+ axios({
	135	+ url: "/board/findAll.json",
	136	+ method: "post",
	137	+ headers: {
	138	+ "Content-Type": "application/json; charset=UTF-8",
79	139	},
	140	+ data: { page: vm.page, pageSize: vm.pageSize, sclsId: vm.sclsId },
	141	+ })
	142	+ .then(function (res) {
	143	+ console.log("dataList - response : ", res.data);
	144	+ console.log(res.data.result[0].boardClass[0].board);
80	145
	146	+ vm.dataList = res.data.result[0].boardClass[0].board;
	147	+ vm.userNm = res.data.result[0].userNm;
	148	+ vm.userId = res.data.result[0].userId;
	149	+ vm.totalBoard = res.data.totalBoard;
	150	+ vm.totalPages = Math.ceil(vm.totalBoard / vm.pageSize);
	151	+ })
	152	+ .catch(function (error) {
	153	+ console.log("result - error : ", error);
	154	+ alert("비상 비상!");
	155	+ });
81	156	},
82		- watch: {
83	157
	158	+ // 게시글 정보 세션에 저장
	159	+ selectBoardList(item) {
	160	+ sessionStorage.setItem("selectedBoardList", JSON.stringify(item));
84	161	},
85		- computed: {
86		-
	162	+
	163	+ // 반 아이디 세션에 저장
	164	+ setClassId() {
	165	+ sessionStorage.setItem("sclsId", JSON.stringify(this.sclsId));
87	166	},
88		- components:{
89		- SvgIcon
	167	+
	168	+ // 게시글 검색
	169	+ boardDataSearch() {
	170	+ const vm = this;
	171	+ let searchPayload = {
	172	+ keyword: vm.searchKeyword,
	173	+ option: vm.selectedSearchOption,
	174	+ page: vm.page,
	175	+ pageSize: vm.pageSize,
	176	+ sclsId: vm.sclsId,
	177	+ };
	178	+ axios({
	179	+ url: "/board/search.json",
	180	+ method: "post",
	181	+ headers: {
	182	+ "Content-Type": "application/json; charset=UTF-8",
	183	+ },
	184	+ data: searchPayload,
	185	+ })
	186	+ .then(function (res) {
	187	+ console.log("boardDataSearch - response : ", res.data);
	188	+ vm.dataList = res.data.result[0].boardClass[0].board;
	189	+ vm.userNm = res.data.result[0].userNm;
	190	+ vm.userId = res.data.result[0].userId;
	191	+ vm.totalBoard = res.data.totalBoard;
	192	+ })
	193	+ .catch(function (error) {
	194	+ console.log("dataSearch - error : ", error);
	195	+ alert("게시글이 존재하지 않습니다.");
	196	+ });
90	197	},
91		- mounted() {
92		- console.log('Main2 mounted');
93		- }
94		-}
95		-</script> (No newline at end of file)
	198	+
	199	+ previousPage() {
	200	+ if (this.page > 1) {
	201	+ this.page -= 1;
	202	+ this.boardList();
	203	+ }
	204	+ },
	205	+
	206	+ nextPage() {
	207	+ if (this.page < this.totalPages) {
	208	+ this.page += 1;
	209	+ this.boardList();
	210	+ }
	211	+ },
	212	+ },
	213	+ watch: {},
	214	+ computed: {},
	215	+ components: {
	216	+ SvgIcon,
	217	+ },
	218	+ mounted() {
	219	+ console.log("Main2 mounted");
	220	+ this.boardList();
	221	+ this.setClassId();
	222	+ },
	223	+};
	224	+</script>

...	...	@@ -1,57 +1,113 @@
1	1	<template>
2		- <div class="title-box flex justify-between mb40">
3		- <p class="title">공지 등록</p>
4		- </div>
5		- <div class="board-wrap">
6		- <div class="flex align-center">
7		- <label for="" class="title2">제목</label>
8		- <input type="text" class="data-wrap">
9		- </div>
10		- <hr>
11		- <textarea name="" id=""></textarea>
12		- <hr>
13		- <div class="flex align-center">
14		- <label for="" class="title2">첨부파일</label>
15		- <input type="file" ref="fileInput" @change="handleFileUpload" />
16		- </div>
17		- </div>
18		- <div class="flex justify-between mt50">
19		- <button type="button" title="글쓰기" class="new-btn" @click="goToPage('Board')">
20		- 목록
21		- </button>
22		- <button type="button" title="글쓰기" class="new-btn" @click="goToPage('Board')">
23		- 등록
24		- </button>
25		- </div>
	2	+ <div class="title-box flex justify-between mb40">
	3	+ <p class="title">공지 등록</p>
	4	+ </div>
	5	+ <div class="board-wrap">
	6	+ <form @submit.prevent="handleSubmit">
	7	+ <div class="flex align-center">
	8	+ <label for="title" class="title2">제목</label>
	9	+ <input type="text" id="title" class="data-wrap" v-model="title" />
	10	+ </div>
	11	+ <hr />
	12	+ <textarea name="" id="content" v-model="content"></textarea>
	13	+ <hr />
	14	+ <div class="flex align-center">
	15	+ <label for="file" class="title2">첨부파일</label>
	16	+ <input type="file" ref="fileInput" @change="handleFileUpload" />
	17	+ </div>
	18	+ <div class="flex justify-between mt50">
	19	+ <button title="글쓰기" class="new-btn" @click="goToPage('Board')">
	20	+ 목록
	21	+ </button>
	22	+ <button title="글쓰기" class="new-btn">등록</button>
	23	+ </div>
	24	+ </form>
	25	+ </div>
26	26	</template>
27	27
28	28	<script>
29		-import SvgIcon from '@jamescoyle/vue-icon';
30		-import { mdiMagnify} from '@mdi/js';
31		-
	29	+import SvgIcon from "@jamescoyle/vue-icon";
	30	+import { mdiMagnify } from "@mdi/js";
	31	+import axios from "axios";
32	32
33	33	export default {
34		- data () {
35		- return {
36		- mdiMagnify: mdiMagnify,
37		- }
38		- },
39		- methods: {
40		- goToPage(page) {
41		- this.$router.push({ name: page });
42		- },
43		- },
44		- watch: {
	34	+ data() {
	35	+ return {
	36	+ mdiMagnify: mdiMagnify,
45	37
	38	+ title: "",
	39	+ content: "",
	40	+ category: "Notice",
	41	+ sclsId: "",
	42	+ selectedFile: null,
	43	+ };
	44	+ },
	45	+ methods: {
	46	+ goToPage(page) {
	47	+ this.$router.push({ name: page });
46	48	},
47		- computed: {
48		-
	49	+
	50	+ handleFileUpload(e) {
	51	+ this.selectedFile = e.target.files[0];
	52	+ console.log(this.selectedFile);
49	53	},
50		- components:{
51		- SvgIcon
	54	+
	55	+ created() {
	56	+ const vm = this;
	57	+ const sclsId = JSON.parse(sessionStorage.getItem("sclsId"));
	58	+
	59	+ if (sclsId) {
	60	+ vm.sclsId = sclsId;
	61	+ }
	62	+ console.log(sclsId);
52	63	},
53		- mounted() {
54		- console.log('Main2 mounted');
55		- }
56		-}
57		-</script> (No newline at end of file)
	64	+
	65	+ async handleSubmit() {
	66	+ const vm = this;
	67	+ try {
	68	+ // 파일 업로드
	69	+ const formData = new FormData();
	70	+ formData.append("files", this.selectedFile);
	71	+
	72	+ const fileUploadResponse = await axios.post(
	73	+ "/file/upload.json",
	74	+ formData,
	75	+ {
	76	+ headers: {
	77	+ "Content-Type": "multipart/form-data",
	78	+ },
	79	+ }
	80	+ );
	81	+
	82	+ // 업로드 후 파일 매니지 아이디 호출
	83	+ const fileMngId = fileUploadResponse.data.fileMngId;
	84	+
	85	+ // 게시물 등록
	86	+ const newData = {
	87	+ bbsTtl: vm.title,
	88	+ bbsCls: vm.category,
	89	+ bbsCnt: vm.content,
	90	+ fileMngId: fileMngId,
	91	+ sclsId: vm.sclsId,
	92	+ };
	93	+
	94	+ await axios.post("/board/insert.json", newData);
	95	+
	96	+ alert("게시물 등록 성공");
	97	+ } catch (error) {
	98	+ console.error("게시물 등록 실패 ", error);
	99	+ alert("게시물 등록 실패");
	100	+ }
	101	+ },
	102	+ },
	103	+ watch: {},
	104	+ computed: {},
	105	+ components: {
	106	+ SvgIcon,
	107	+ },
	108	+ mounted() {
	109	+ console.log("Main2 mounted");
	110	+ this.created();
	111	+ },
	112	+};
	113	+</script>

Delete comment