Commit @b545ffe7b6f12bce8b133f0ee2dc85bb3741ff9c

Stormen123 2023-11-15

231115 김성훈 관리자단 - 전문가 협의체, 기술문서 추가

@b545ffe7b6f12bce8b133f0ee2dc85bb3741ff9c

0f1babd

b545ffe

client/views/component/pagination/PaginationButton.vue

--- client/views/component/pagination/PaginationButton.vue

+++ client/views/component/pagination/PaginationButton.vue


 			for (var i = this.startPage; i <= this.endPage; i++) {
 				range.push(i);
 			}
+			if (range.length == 0) {
+					range.push(1);
+			}
 			return range;
 		}
 	},

0f1babd

b545ffe

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import AdminTechSelectList from "../pages/admin/technology/TechSelectList.vue";
 import AdminTechSelectOne from "../pages/admin/technology/TechSelectOne.vue";
 import AdminTechInsert from "../pages/admin/technology/TechInsert.vue";
+import AdminTechUpdate from "../pages/admin/technology/TechUpdate.vue";
 import AdminDataSelectList from "../pages/admin/databook/DataSelectList.vue";
 import AdminDataSelectOne from "./admin/databook/DataSelectOne.vue";
 import AdminDataInsert from "../pages/admin/databook/DataInsert.vue";

   { path: "/adm/techSelectList.page", name: "AdminTechSelectList", component: AdminTechSelectList },
   { path: "/adm/techSelectOne.page", name: "AdminTechSelectOne", component: AdminTechSelectOne },
   { path: "/adm/techInsert.page", name: "AdminTechInsert", component: AdminTechInsert },
+  { path: "/adm/techUpdate.page", name: "AdminTechUpdate", component: AdminTechUpdate },
   { path: "/adm/dataSelectList.page", name: "AdminDataSelectList", component: AdminDataSelectList },
   { path: "/adm/dataSelectOne.page", name: "AdminDataSelectOne", component: AdminDataSelectOne },
   { path: "/adm/dataInsert.page", name: "AdminDataInsert", component: AdminDataInsert },

0f1babd

b545ffe

client/views/pages/admin/databook/DataInsert.vue

--- client/views/pages/admin/databook/DataInsert.vue

+++ client/views/pages/admin/databook/DataInsert.vue


                 post_content: null,
                 link_url: null,
                 // 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
-                ctgry_nm: 'policy',
+                ctgry_nm: null,
             },
             fileList: [],
             filecount: 0,

                 return false;
             }
 
+            if (COMMON_UTIL.isEmpty(this.post.ctgry_nm) === false) {
+                alert("카테고리를 선택해주세요.");
+                return false;
+            }
+
             if (COMMON_UTIL.isEmpty(this.post.post_content) === false || this.post.post_content === "<p><br></p>") {
                 alert("내용을 입력해주세요.");
                 return false;

         fileUpload: function () {
             this.fileList[this.filecount] = this.$refs.fileInput.files[0]
             this.filecount += 1
-            console.log("file", this.fileList);
         },
 
         //파일업로드 중 업로드 파일 삭제
         fileRemove(idx) {
             this.fileList.splice(idx, 1);
-            console.log("reMove_file", this.fileList);
             this.filecount = this.fileList.length;
         },
 

0f1babd

b545ffe

client/views/pages/admin/databook/DataSelectList.vue

--- client/views/pages/admin/databook/DataSelectList.vue

+++ client/views/pages/admin/databook/DataSelectList.vue

...	...	@@ -44,12 +44,12 @@
44	44	</div>
45	45	</div>
46	46	<div class="sort-wrap">
47		- <ul class="flex-end">
48		- <li>최신순</li>
49		- <li>등록순</li>
50		- <li>조회수순</li>
51		- </ul>
52		- </div>
	47	+ <ul class="flex-end">
	48	+ <li>최신순</li>
	49	+ <li>등록순</li>
	50	+ <li>조회수순</li>
	51	+ </ul>
	52	+ </div>
53	53	<table class="select-table">
54	54	<thead>
55	55	<tr>
...	...	@@ -73,7 +73,7 @@
73	73	<td>{{ item.view_cnt }}</td>
74	74	</tr>
75	75	<tr v-if="postListCount == 0">
76		- <td style="font-size: 20px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
	76	+ <td style="font-size: 20px;" colspan="6">검색조건에 해당하는 데이터가 없습니다.</td>
77	77	</tr>
78	78	</tbody>
79	79	</table>

0f1babd

b545ffe

client/views/pages/admin/databook/DataSelectOne.vue

--- client/views/pages/admin/databook/DataSelectOne.vue

+++ client/views/pages/admin/databook/DataSelectOne.vue


 
         downloadFile: function (item) {
             const vm = this;
-            let path = item.file_path + '\\' + item.file_nm + '.' + item.file_extn_nm;
+            let path = item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm;
+            console.log(path);
             axios({
                 url: '/file/downloadFile.json',
                 method: 'post',

0f1babd

b545ffe

client/views/pages/admin/news/NewsInsert.vue

--- client/views/pages/admin/news/NewsInsert.vue

+++ client/views/pages/admin/news/NewsInsert.vue


                             <td><textarea name="smart" id="smart" style="width:100%"></textarea></td>
                         </tr>
                         <tr>
-                            <th>썸네일 파일</th>
+                            <th>썸네일</th>
                             <td>
                                 <div class="btn-upload" @click="openFileInput">파일 업로드하기</div>
                                 <input type="file" name="file" id="file" ref="fileInput" style="display: none"

0f1babd

b545ffe

client/views/pages/admin/technology/TechInsert.vue

--- client/views/pages/admin/technology/TechInsert.vue

+++ client/views/pages/admin/technology/TechInsert.vue


                     <tbody>
                         <tr>
                             <th>제목</th>
-                            <td><input type="text" name="" id="newsTitle"></td>
+                            <td><input type="text" name="" id="techTitle" v-model="post.post_title"></td>
                         </tr>
                         <tr>
                             <th>카테고리</th>
                             <td>
                                 <div class="flex-start">
                                     <div>
-                                        <input type="radio" name="category" id="api" style="display:none" checked>
+                                        <input type="radio" name="category" id="api"  value="api" style="display:none" checked
+                                            v-model="post.ctgry_nm">
                                         <label for="api" class="category">API</label>
                                     </div>
                                     <div>
-                                        <input type="radio" name="category" id="tech" style="display:none">
+                                        <input type="radio" name="category" id="tech" value="tech" style="display:none"
+                                            v-model="post.ctgry_nm">
                                         <label for="tech" class="category">기술리포트</label>
                                     </div>
                                     <div>
-                                        <input type="radio" name="category" id="issue" style="display:none">
-                                        <label for="issue" class="category">이슈리포트</label>
-                                    </div>
-                                    <div>
-                                        <input type="radio" name="category" id="edu" style="display:none">
-                                        <label for="edu" class="category">교육리포트</label>
+                                        <input type="radio" name="category" id="issue" value="standard" style="display:none"
+                                            v-model="post.ctgry_nm">
+                                        <label for="issue" class="category">기술규격문서</label>
                                     </div>
                                 </div>
                             </td>

                     </tbody>
                 </table>
                 <div class="btn-wrap">
-                    <button class="dark-gray-btn" @click="selectList">이전</button>
-                    <button class="blue-btn">글쓰기</button>
+                    <button class="dark-gray-btn" @click="postSelectListPage()">이전</button>
+                    <button class="blue-btn" @click="postInsertCheck()">등록</button>
                 </div>
             </div>
         </div>
     </div>
 </template>
 <script>
-import '@toast-ui/editor/dist/toastui-editor.css';
+import axios from 'axios';
+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
 
 export default {
     data() {
         return {
+            post: {
+                bbs_id: '3',
+                post_title: null,
+                post_content: null,
+                link_url: null,
+                // 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
+                ctgry_nm: 'api',
+            },
+            fileList: [],
+            filecount: 0,
             oEditors: [], // oEditors는 스마트에디터용
         };
     },
     methods: {
-        selectList: function () {
+
+        //게시글 및 첨부파일 등록
+        postInsert: function () {
+            const vm = this;
+            let formData = new FormData();
+
+            if (vm.fileList.length > 0) {
+                for (let i = 0; i < vm.fileList.length; i++) {
+                    formData.append('file', vm.fileList[i]);
+                    console.log(formData.get('file'));
+                }
+                formData.append("post", JSON.stringify(vm.post));
+
+                axios({
+                    url: '/post/postFileInsert.file',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                    data: formData
+                }).then(function (response) {
+                    console.log("qnaInsert - response : ", response);
+                    let result = response.data;
+                    if (result > 0) {
+                        alert("등록을 완료하였습니다.");
+                        vm.postSelectListPage()
+                    } else {
+                        alert("등록 실패, 관리자에게 문의해주세요.");
+                    }
+                }).catch(function (error) {
+                    console.log("qnaInsert - error : ", error);
+                    alert("등록 오류, 관리자에게 문의해주세요.");
+                });
+            } else {
+
+                axios({
+                    url: '/post/postInsert.json',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': "application/json; charset=UTF-8",
+                    },
+                    data: vm.post
+                }).then(function (response) {
+                    console.log("noticeInsert - response : ", response);
+                    let result = response.data;
+                    if (result > 0) {
+                        alert("등록을 완료하였습니다.");
+                        vm.postSelectListPage()
+                    } else {
+                        alert("등록 실패, 관리자에게 문의해주세요.");
+                    }
+                }).catch(function (error) {
+                    console.log("noticeInsert - error : ", error);
+                    alert("등록 오류, 관리자에게 문의해주세요.");
+                });
+            }
+        },
+
+        //등록 유효성 검사
+        postInsertCheck: function () {
+            const oEditors = this.oEditors;
+            oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
+            // 스마트에디터의 iframe에 있는 내용을 textarea로. 
+            this.post.post_content = document.getElementById("smart").value;
+            console.log(document.getElementById("smart").value);
+            console.log(this.post.post_content);
+            console.log(COMMON_UTIL.isEmpty(this.post.post_title));
+
+            if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
+                alert("제목을 입력해주세요.");
+                return false;
+            }
+
+            if (COMMON_UTIL.isEmpty(this.post.ctgry_nm) === false) {
+                alert("카테고리를 선택해주세요.");
+                return false;
+            }
+            
+            if (COMMON_UTIL.isEmpty(this.post.post_content) === false || this.post.post_content === "<p><br></p>") {
+                alert("내용을 입력해주세요.");
+                return false;
+            }
+
+            this.postInsert();
+        },
+
+        //파일업로드
+        fileUpload: function () {
+            this.fileList[this.filecount] = this.$refs.fileInput.files[0]
+            this.filecount += 1
+        },
+
+        //파일업로드 중 업로드 파일 삭제
+        fileRemove(idx) {
+            this.fileList.splice(idx, 1);
+            this.filecount = this.fileList.length;
+        },
+
+        //게시글 리스트로 이동
+        postSelectListPage: function () {
             this.$router.push({ path: '/adm/techSelectList.page' });
         },
 
         // 파일 업로드 커스텀을 위한 함수
         openFileInput: function () {
             this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭
-        },
-        //파일업로드
-        fileUpload: function () {
-            this.fileList[this.filecount] = this.$refs.fileInput.files[0]
-            this.filecount += 1
-            console.log("file", this.fileList);
-        },
-
-        //파일업로드 중 업로드 파일 삭제
-        fileRemove(idx) {
-            this.fileList.splice(idx, 1);
-            console.log("reMove_file", this.fileList);
-            this.filecount = this.fileList.length;
         },
     },
     watch: {},

0f1babd

b545ffe

client/views/pages/admin/technology/TechSelectList.vue

--- client/views/pages/admin/technology/TechSelectList.vue

+++ client/views/pages/admin/technology/TechSelectList.vue


                 </div>
             </div>
             <div class="content-wrap">
-                <div class="btn-wrap">
-                    <div class="data-select">
-                        <select  name="data-table-sild" id="data-table-sild">
-                            <option :value=null selected>전체</option>
-                            <option value="title">제목</option>
-                            <option value="user">작성자</option>
-                            <option value="조회순">조회순</option>
-                        </select>
-                        <div class="input-group">
-                            <input type="text" class="input" placeholder="검색어를 입력해주세요." >
-                            <button class="button--submit">검색</button>
+                <div class="top-bar">
+                    <div class="flex">
+                        <div class="category-bar flex-start">
+                            <div>
+                                <input type="radio" name="category" id="all" :value= null style="display:none" checked @click="ctgry($event)">
+                                <label for="all" class="category">전체</label>
+                            </div>
+                            <div>
+                                <input type="radio" name="category" id="policy" value="api" style="display:none" @click="ctgry($event)">
+                                <label for="policy" class="category">API</label>
+                            </div>
+                            <div>
+                                <input type="radio" name="category" id="research" value="tech" style="display:none" @click="ctgry($event)">
+                                <label for="research" class="category">기술리포트</label>
+                            </div>
+                            <div>
+                                <input type="radio" name="category" id="guide" value="standard" style="display:none" @click="ctgry($event)">
+                                <label for="guide" class="category">기술규격문서</label>
+                            </div>
+                        </div>
+                        <div class="data-select">
+                            <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
+                                <option :value=null selected>전체</option>
+                                <option value="title">제목</option>
+                                <option value="content">내용</option>
+                                <option value="writer">작성자</option>
+                            </select>
+                            <div class="input-group">
+                                <input type="text" class="input" placeholder="검색어를 입력해주세요."
+                                    v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
+                                <input class="button--submit" value="검색" type="submit" @click="postSelectList()">
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="sort-wrap">
-                        <ul class="flex-end">
-                            <li>최신순</li>
-                            <li>등록순</li>
-                            <li>조회수순</li>
-                        </ul>
-                    </div>
+                    <ul class="flex-end">
+                        <li>최신순</li>
+                        <li>등록순</li>
+                        <li>조회수순</li>
+                    </ul>
+                </div>
                 <table class="select-table">
                     <thead>
                         <tr>
                             <th style="width:5%">no</th>
-                            <th style="width:65%">제목</th>
+                            <th style="width:10%">카테고리</th>
+                            <th style="width:55%">제목</th>
                             <th style="width:10%">작성자</th>
                             <th style="width:10%">작성일자</th>
                             <th style="width:10%">조회수</th>
                         </tr>
                     </thead>
                     <tbody>
-                        <tr>
-                            <td>1</td>
-                            <td>제목이 들어가는 부분입니다.</td>
-                            <td>관리자</td>
-                            <td>2023/11/01</td>
-                            <td>100</td>
+                        <tr v-for="(item, idx) in postList" :key="idx" @click="postSelectOnePage(item)">
+                            <td>{{ postIdx - idx }}</td>
+                            <td v-if="item.ctgry_nm === 'api'"><span class="category-zone">API</span></td>
+                            <td v-else-if="item.ctgry_nm === 'tech'"><span class="category-zone">기술리포트</span></td>
+                            <td v-else><span class="category-zone">기술규격문서</span></td>
+                            <td>{{ item.post_title }}</td>
+                            <td>{{ item.rgtr_id }}</td>
+                            <td>{{ yyyymmdd(item.reg_dt) }}</td>
+                            <td>{{ item.view_cnt }}</td>
+                        </tr>
+                        <tr v-if="postListCount == 0">
+                            <td style="font-size: 20px;" colspan="6">검색조건에 해당하는 데이터가 없습니다.</td>
                         </tr>
                     </tbody>
                 </table>
                 <div class="btn-wrap">
-                    <button class="blue-btn" @click="selectInsert">글쓰기</button>
+                    <button class="blue-btn"  @click="postInsertPage()">글쓰기</button>
+                </div>
+                <div class="bottom-wrap">
+                    <PaginationButton v-model:currentPage="postListSearch.currentPage" :perpage="postListSearch.perPage"
+                        :total-count="postListCount" :max-range="5" :click="postSelectList" />
                 </div>
             </div>
         </div>
     </div>
 </template>
 <script>
-
+import axios from 'axios';
+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
+import PaginationButton from '../../../component/pagination/PaginationButton.vue';
 
 export default {
 
     data() {
-        return {};
+        return {
+            postListSearch: {
+                currentPage: 1,
+                perPage: 10,
+                searchType: null,
+                searchText: null,
+                bbs_id: '3',
+                ctgry_nm: null
+            },
+            postList: [],
+            postListCount: 0,
+            postIdx: 0
+        };
     },
     methods: {
-        selectInsert: function () {
+        postSelectList: function () {
+            const vm = this;
+
+            axios({
+                url: '/post/postSelectList.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: vm.postListSearch
+            }).then(function (response) {
+                vm.postList = response.data.postSelectList;
+                vm.postListCount = response.data.postSelectListCount;
+                vm.postIdx = vm.postListCount - (vm.postListSearch.currentPage - 1) * vm.postListSearch.perPage;
+            }).catch(function (error) {
+                alert('자료집 목록 조회 오류, 관리자에게 문의하세요.');
+            })
+        },
+
+        //날짜 시,분,초 자르기
+        yyyymmdd: function (date) {
+            return COMMON_UTIL.yyyymmdd(date);
+        },
+
+        //게시글 상세조회 페이지로 이동
+        postSelectOnePage: function (item) {
+            this.$router.push({ path: '/adm/techSelectOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
+        },
+
+        postInsertPage: function () {
             this.$router.push({ path: '/adm/techInsert.page', query: {} })
+        },
+
+        ctgry: function(e) {
+            this.postListSearch.ctgry_nm = e.target.value;
+            if(this.postListSearch.ctgry_nm === 'on') {
+                this.postListSearch.ctgry_nm = null
+            }
+            this.postSelectList();
         }
     },
     watch: {},
     computed: {},
-    components: {},
+    components: {
+        PaginationButton: PaginationButton,
+    },
     mounted() {
+        this.postSelectList();
     }
 };
 </script>

0f1babd

b545ffe

client/views/pages/admin/technology/TechSelectOne.vue

--- client/views/pages/admin/technology/TechSelectOne.vue

+++ client/views/pages/admin/technology/TechSelectOne.vue


                 <table class="insert-table">
                     <tbody>
                         <tr>
-                            <th>제목</th>
-                            <td><input type="text" name="" id="newsTitle"></td>
+                            <td class="title-zone" colspan="2">
+                                <p class="flex">
+                                    <span class="post-title">{{ post.post_title }}</span>
+                                    <span v-if="post.ctgry_nm === 'api'" class="category-zone">API</span>
+                                    <span v-else-if="post.ctgry_nm === 'tech'" class="category-zone">기술리포트</span>
+                                    <span v-else class="category-zone">기술규격문서</span>
+                                </p>
+                                <p class="flex-end write-info"><span class="writer">작성자</span>
+                                    <span>{{ post.rgtr_id}}</span>
+                                    <span class="view">조회수</span>
+                                    <span>{{ post.view_cnt }}</span>
+                                </p>
+                            </td>
                         </tr>
                         <tr>
-                            <th>내용</th>
-                            <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
+                            <td colspan="2" style="border-bottom: 1px solid #007aff;">
+                                <div id="viewer" ref="viewer" class="viewer"></div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th style="width: 10%;">첨부파일명</th>
+                            <td>
+                                <div v-if="fileList.length == 0">
+                                    <label>첨부된 파일이 없습니다.</label>
+                                </div>
+                                <ul v-else v-for="(item, idx) in fileList" :key="idx">
+                                    <li @click="downloadFile(item)">{{ item.real_file_nm }}</li>
+                                </ul>
+                            </td>
                         </tr>
                     </tbody>
                 </table>
+                <div class="article-list">
+                    <ul>
+                        <li><span class="next">다음글</span>
+                            <span>
+                                <span v-if="nextPost" @click="movePost(nextPost)" class="sub-content-title">
+                                    {{ nextPost.post_title }}
+                                </span>
+                                <span v-else class="sub-content-title">다음글이 없습니다.</span>
+                            </span>
+                        </li>
+                        <li><span class="prev">이전글</span>
+                            <span>
+                                <span v-if="prevPost" @click="movePost(prevPost)" class="sub-content-title">
+                                    {{ prevPost.post_title }}
+                                </span>
+                                <span v-else class="sub-content-title">이전글이 없습니다.</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
                 <div class="btn-wrap">
-                    <button class="red-btn" @click="selectList">삭제</button>
-                    <button class="dark-gray-btn" @click="selectList">목록</button>
-                    <button class="blue-btn">수정</button>
+                    <button class="red-btn" @click="postDelete()">삭제</button>
+                    <button class="dark-gray-btn" @click="postSelectListPage()">목록</button>
+                    <button class="blue-btn" @click="postUpdatePage()">수정</button>
                 </div>
             </div>
         </div>
     </div>
 </template>
 <script>
-
+import axios from 'axios';
+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
+import { useRoute } from 'vue-router';
+import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
+import '@toast-ui/editor/dist/toastui-editor.css';
+import '@toast-ui/editor/dist/i18n/ko-kr';
+import * as FileSaver from 'file-saver';
 
 export default {
 
     data() {
-        return {};
+        return {
+            post: {
+                post_id: null,
+                post_title: null,
+                post_content: null,
+                notice_yn: null,
+                notice_start_dt: null,
+                notice_end_dt: null,
+                reg_dt: null,
+                mdfcn_dt: null,
+                link_url: null,
+                view_cnt: null,
+                file_id: null,
+                bbs_id: null,
+                rgtr_id: null,
+                mdfr_id: null,
+                ctgry_nm: null,
+            },
+            fileList: [],
+            oEditors: [], // oEditors는 스마트에디터용
+            route: useRoute(),
+        };
     },
     methods: {
-        selectList:function(){
-            this.$router.push({ path: '/adm/techSelectList.page'});
-        }
+        postSelectOne: function () {
+            const vm = this;
+            axios({
+                url: '/post/postSelectOne.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: { 'post_id': vm.route.query.post_id, 'file_id': vm.route.query.file_id }
+            }).then(function (response) {
+                vm.post = response.data.postSelectOne.post;
+
+                if (response.data.selectFileList.length != 0) {
+                    vm.fileList = response.data.selectFileList;
+                }
+                vm.getViewer(vm.post.post_content)
+            }).catch(function (error) {
+                console.log("error - ", error)
+                alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
+            })
+        },
+
+        getViewer(data) {
+            this.viewer = new Viewer({
+                el: this.$refs.viewer,
+                initialEditType: 'wysiwyg',
+                previewStyle: 'vertical',
+                initialValue: data,
+                customHTMLRenderer: {
+                    htmlBlock: {
+                        iframe(node) {
+                            return [
+                                { type: 'openTag', tagName: 'iframe', outerNewLine: true, attributes: node.attrs },
+                                { type: 'html', content: node.childrenHTML },
+                                { type: 'closeTag', tagName: 'iframe', outerNewLine: true },
+                            ];
+                        },
+                    }
+                },
+            });
+        },
+
+        downloadFile: function (item) {
+            const vm = this;
+            let path = item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm;
+            console.log(path);
+            axios({
+                url: '/file/downloadFile.json',
+                method: 'post',
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded",
+                },
+                responseType: 'blob',
+                data: `file_path=${encodeURIComponent(path)}`
+            }).then((response) => {
+                const blob = new Blob([response.data]);
+
+                const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+                if (isSafari) {
+                    FileSaver.saveAs(blob, item.real_file_nm);
+                } else {
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.style.display = 'none';
+                    a.href = url;
+                    a.download = item.real_file_nm;
+                    document.body.appendChild(a);
+                    a.click();
+                    window.URL.revokeObjectURL(url);
+                }
+
+                this.$router.go(0);
+
+            }).catch(function (error) {
+                console.log('error - ', error)
+                alert('에러발생');
+            });
+        },
+
+        postDelete: function () {
+            const vm = this;
+
+            axios({
+                url: "/post/postDelete.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: vm.post
+            }).then(function (response) {
+                console.log("postDelete - response : ", response.data);
+                let result = response.data;
+                if (result > 0) {
+                    alert("삭제가 완료 되었습니다.");
+                    vm.postSelectListPage();
+                } else {
+                    alert("삭제실패, 다시 시도 해주세요.");
+                }
+            }).catch(function (error) {
+                console.log("postDelete - error : ", error);
+                alert("삭제 오류, 관리자에게 문의해주세요.");
+            });
+        },
+
+        postSelectListPage: function () {
+            this.$router.push({ path: '/adm/techSelectList.page' });
+        },
+
+        postUpdatePage: function () {
+            this.$router.push({ path: '/adm/techUpdate.page', query: { 'post_id': this.post.post_id, 'file_id': this.post.file_id } });
+        },
     },
     watch: {},
     computed: {},
     components: {},
     mounted() {
+        this.postSelectOne();
     }
 };
 </script>

b545ffe

client/views/pages/admin/technology/TechUpdate.vue (added)

+++ client/views/pages/admin/technology/TechUpdate.vue

...	...	@@ -0,0 +1,291 @@
	1	+<template>
	2	+ <div class="admin-wrap">
	3	+ <div class="content-box">
	4	+ <div class="title-wrap">
	5	+ <div class="flex-start">
	6	+ <img src="../../../../resources/jpg/data-img-text.png" alt="자료집 아이콘" class="title-icon">
	7	+ <h2 class="main-title">자료집</h2>
	8	+ </div>
	9	+ </div>
	10	+ <div class="content-wrap dataUpdate">
	11	+ <table class="insert-table">
	12	+ <tbody>
	13	+ <tr>
	14	+ <th>제목</th>
	15	+ <td><input type="text" name="" id="newsTitle" v-model="post.post_title"></td>
	16	+ </tr>
	17	+ <tr>
	18	+ <th>카테고리</th>
	19	+ <td>
	20	+ <div class="flex-start">
	21	+ <div>
	22	+ <input type="radio" name="category" id="api" value="api" style="display:none" checked
	23	+ v-model="post.ctgry_nm">
	24	+ <label for="api" class="category">API</label>
	25	+ </div>
	26	+ <div>
	27	+ <input type="radio" name="category" id="tech" value="tech" style="display:none"
	28	+ v-model="post.ctgry_nm">
	29	+ <label for="tech" class="category">기술리포트</label>
	30	+ </div>
	31	+ <div>
	32	+ <input type="radio" name="category" id="issue" value="standard" style="display:none"
	33	+ v-model="post.ctgry_nm">
	34	+ <label for="issue" class="category">기술규격문서</label>
	35	+ </div>
	36	+ </div>
	37	+ </td>
	38	+ </tr>
	39	+ <tr>
	40	+ <th>게시물 상단고정 사용여부</th>
	41	+ <td><input type="checkbox" name="" id=""><label>사용</label></td>
	42	+ </tr>
	43	+ <tr>
	44	+ <th>내용</th>
	45	+ <td><textarea name="smart" id="smart"></textarea></td>
	46	+ </tr>
	47	+ <tr>
	48	+ <th>등록된 첨부파일</th>
	49	+ <td colspan="6">
	50	+ <div v-if="fileList.length == 0">
	51	+ <label>첨부된 파일이 없습니다.</label>
	52	+ </div>
	53	+ <ul v-else v-for="(item, idx) in fileList" :key="idx">
	54	+ <li class="flex file-list">
	55	+ <p>{{ item.real_file_nm }}</p>
	56	+ <button class="red-btn" @click="fileRemove(item, idx)">삭제</button>
	57	+ </li>
	58	+ </ul>
	59	+ </td>
	60	+ </tr>
	61	+ <tr>
	62	+ <th>추가 첨부파일</th>
	63	+ <td colspan="6">
	64	+ <div class="btn-upload" @click="openFileInput">파일 업로드하기</div>
	65	+ <input type="file" name="file" id="file" ref="fileInput" style="display: none"
	66	+ @change="fileUpload()">
	67	+ <ul v-for="(item, idx) in insertFileList" :key="idx">
	68	+ <li v-if="insertFileList.length != 0" class="flex file-list">{{ item.name }} <button
	69	+ class="red-border-btn" @click="fileRemove(item, idx)">삭제</button></li>
	70	+ </ul>
	71	+ </td>
	72	+ </tr>
	73	+ </tbody>
	74	+ </table>
	75	+ <div class="btn-wrap">
	76	+ <button class="dark-gray-btn" @click="postSelectListPage()">이전</button>
	77	+ <button class="blue-btn" @click="postUpdateCheck()">수정</button>
	78	+ </div>
	79	+ </div>
	80	+ </div>
	81	+ </div>
	82	+</template>
	83	+<script>
	84	+import axios from 'axios';
	85	+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
	86	+import { useRoute } from 'vue-router';
	87	+
	88	+export default {
	89	+ data() {
	90	+ return {
	91	+ post: {
	92	+ post_id: null,
	93	+ post_title: null,
	94	+ post_content: null,
	95	+ notice_yn: null,
	96	+ notice_start_dt: null,
	97	+ notice_end_dt: null,
	98	+ reg_dt: null,
	99	+ mdfcn_dt: null,
	100	+ link_url: null,
	101	+ view_cnt: null,
	102	+ file_id: null,
	103	+ bbs_id: null,
	104	+ rgtr_id: null,
	105	+ mdfr_id: null,
	106	+ ctgry_nm: null,
	107	+ },
	108	+ fileList: [],
	109	+ deleteFileList: [],
	110	+ insertFileList: [],
	111	+ filecount: 0,
	112	+ insertCount: 0,
	113	+ deleteCount: 0,
	114	+ oEditors: [], // oEditors는 스마트에디터용
	115	+ route: useRoute(),
	116	+ };
	117	+ },
	118	+ methods: {
	119	+ postSelectOne: function () {
	120	+ const vm = this;
	121	+ axios({
	122	+ url: '/post/postSelectOne.json',
	123	+ method: 'post',
	124	+ hearder: {
	125	+ 'Content-Type': "application/json; charset=UTF-8",
	126	+ },
	127	+ data: { 'post_id': vm.route.query.post_id, 'file_id': vm.route.query.file_id }
	128	+ }).then(function (response) {
	129	+ vm.post = response.data.postSelectOne.post;
	130	+
	131	+ if (response.data.selectFileList.length != 0) {
	132	+ vm.fileList = response.data.selectFileList;
	133	+ vm.filecount = response.data.selectFileList.length;
	134	+ }
	135	+
	136	+ vm.initEditor(vm.post.post_content)
	137	+ }).catch(function (error) {
	138	+ console.log("error - ", error)
	139	+ alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
	140	+ })
	141	+ },
	142	+
	143	+ //게시글 및 첨부파일 등록
	144	+ postUpdate: function () {
	145	+ const vm = this;
	146	+ let formData = new FormData();
	147	+
	148	+ if (vm.insertFileList.length > 0 \|\| vm.deleteFileList.length > 0) {
	149	+ if (vm.insertFileList.length > 0) {
	150	+ for (let i = 0; i < vm.insertFileList.length; i++) {
	151	+ formData.append('file', vm.insertFileList[i]);
	152	+ console.log('file - ', formData.get('file'));
	153	+ }
	154	+ }
	155	+
	156	+ if (vm.deleteFileList.length > 0) {
	157	+ formData.append('deleteFile', JSON.stringify(vm.deleteFileList));
	158	+ console.log('deleteFile - ', formData.get('deleteFile'));
	159	+ }
	160	+
	161	+ formData.append("post", JSON.stringify(vm.post));
	162	+
	163	+ axios({
	164	+ url: '/post/postFileUpdate.file',
	165	+ method: 'post',
	166	+ headers: {
	167	+ 'Content-Type': 'multipart/form-data',
	168	+ },
	169	+ data: formData
	170	+ }).then(function (response) {
	171	+ console.log("qnaInsert - response : ", response);
	172	+ let result = response.data;
	173	+ if (result > 0) {
	174	+ alert("수정을 완료하였습니다.");
	175	+ vm.postSelectListPage()
	176	+ } else {
	177	+ alert("수정 실패, 관리자에게 문의해주세요.");
	178	+ }
	179	+ }).catch(function (error) {
	180	+ console.log("qnaInsert - error : ", error);
	181	+ alert("수정 오류, 관리자에게 문의해주세요.");
	182	+ });
	183	+ } else {
	184	+
	185	+ axios({
	186	+ url: '/post/postFileUpdate.json',
	187	+ method: 'post',
	188	+ headers: {
	189	+ 'Content-Type': "application/json; charset=UTF-8",
	190	+ },
	191	+ data: vm.post
	192	+ }).then(function (response) {
	193	+ console.log("noticeInsert - response : ", response);
	194	+ let result = response.data;
	195	+ if (result > 0) {
	196	+ alert("수정을 완료하였습니다.");
	197	+ vm.postSelectListPage()
	198	+ } else {
	199	+ alert("수정 실패, 관리자에게 문의해주세요.");
	200	+ }
	201	+ }).catch(function (error) {
	202	+ console.log("noticeInsert - error : ", error);
	203	+ alert("수정 오류, 관리자에게 문의해주세요.");
	204	+ });
	205	+ }
	206	+ },
	207	+
	208	+ //등록 유효성 검사
	209	+ postUpdateCheck: function () {
	210	+ const oEditors = this.oEditors;
	211	+ oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
	212	+ // 스마트에디터의 iframe에 있는 내용을 textarea로.
	213	+ this.post.post_content = document.getElementById("smart").value;
	214	+
	215	+ if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
	216	+ alert("제목을 입력해주세요.");
	217	+ return false;
	218	+ }
	219	+
	220	+ if (COMMON_UTIL.isEmpty(this.post.post_content) === false \|\| this.post.post_content === "<p><br></p>") {
	221	+ alert("내용을 입력해주세요.");
	222	+ return false;
	223	+ }
	224	+
	225	+ this.postUpdate();
	226	+ },
	227	+
	228	+ // 에디터 만들기
	229	+ initEditor: function (initData) {
	230	+ // 스마트 에디터 적용
	231	+ const oEditors = this.oEditors;
	232	+ nhn.husky.EZCreator.createInIFrame({
	233	+ oAppRef: oEditors,
	234	+ elPlaceHolder: "smart",
	235	+ sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
	236	+ htParams: {
	237	+ bSkipXssFilter: true,
	238	+ bUseVerticalResizer: true,
	239	+ bUseModeChanger: true
	240	+ },
	241	+ fOnAppLoad: function () {
	242	+ oEditors.getById["smart"].exec("PASTE_HTML", [initData]);
	243	+ },
	244	+ fCreator: "createSEditor2"
	245	+ });
	246	+ },
	247	+ //파일업로드
	248	+ fileUpload: function () {
	249	+
	250	+ this.insertFileList[this.insertCount] = this.$refs.fileInput.files[0];
	251	+ this.insertCount += 1;
	252	+ console.log("insertFile - ", this.insertFileList);
	253	+ },
	254	+
	255	+ //파일업로드 중 업로드 파일 삭제
	256	+ fileRemove(item, idx) {
	257	+ if (item.file_path === undefined) {
	258	+ this.insertFileList.splice(idx, 1);
	259	+ this.insertCount = this.insertFileList.length;
	260	+ console.log("insertfile", this.insertFileList);
	261	+
	262	+ } else {
	263	+ this.fileList.splice(idx, 1);
	264	+ this.deleteFileList[this.deleteCount] = item
	265	+ this.deleteCount += 1
	266	+ this.filecount = this.fileList.length;
	267	+ console.log("deleteFile - ", this.deleteFileList);
	268	+ }
	269	+
	270	+ },
	271	+
	272	+ //게시글 리스트로 이동
	273	+ postSelectListPage: function () {
	274	+ this.$router.push({ path: '/adm/techSelectList.page' });
	275	+ },
	276	+
	277	+ // 파일 업로드 커스텀을 위한 함수
	278	+ openFileInput: function () {
	279	+ this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭
	280	+ }
	281	+ },
	282	+ watch: {},
	283	+ computed: {},
	284	+ components: {},
	285	+ mounted() {
	286	+ this.postSelectOne();
	287	+ // 스마트 에디터 적용
	288	+ }
	289	+
	290	+};
	291	+</script>

0f1babd

b545ffe

client/views/pages/admin/wgcommunity/WgInsert.vue

--- client/views/pages/admin/wgcommunity/WgInsert.vue

+++ client/views/pages/admin/wgcommunity/WgInsert.vue


                         <tr>
                             <th>워킹그룹</th>
                             <td>
-                                <select name="" id="">
-                                    <option value="null">선택해주세요</option>
+                                <select name="" id="" v-model="post.ctgry_nm">
+                                    <option value=null>선택해주세요</option>
                                     <option value="WG1">교육과정 표준체계</option>
                                     <option value="WG2">맞춤학습지원 기능</option>
                                     <option value="WG3">접근성/UDL</option>

     data() {
         return {
             post: {
-                bbs_id: '0',
+                bbs_id: '4',
                 post_title: null,
                 post_content: null,
                 link_url: null,
                 // 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
-                ctgry_nm: 'policy',
+                ctgry_nm: null,
             },
             fileList: [],
             filecount: 0,

             oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
             // 스마트에디터의 iframe에 있는 내용을 textarea로. 
             this.post.post_content = document.getElementById("smart").value;
-            console.log(document.getElementById("smart").value);
-            console.log(this.post.post_content);
-            console.log(COMMON_UTIL.isEmpty(this.post.post_title));
+
+            // if(this.post.ctgry_nm = 'null') {
+            //     this.post.ctgry_nm = null;
+            // }
 
             if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
                 alert("제목을 입력해주세요.");
+                return false;
+            }
+
+            if (COMMON_UTIL.isEmpty(this.post.ctgry_nm) === false) {
+                alert("워킹그룹을 선택해주세요.");
                 return false;
             }
 

 
         //게시글 리스트로 이동
         postSelectListPage: function () {
-            this.$router.push({ path: '/adm/dataSelectList.page' });
+            this.$router.push({ path: '/adm/wgSelectList.page' });
         },
 
         // 파일 업로드 커스텀을 위한 함수

0f1babd

b545ffe

client/views/pages/admin/wgcommunity/WgSelectList.vue

--- client/views/pages/admin/wgcommunity/WgSelectList.vue

+++ client/views/pages/admin/wgcommunity/WgSelectList.vue


                 <div class="top-bar">
                     <div class="flex-end">
                         <div class="data-select">
-                            <select name="" id="">
-                                    <option value="null">워킹그룹</option>
+                            <select name="" id="" v-model="postListSearch.ctgry_nm">
+                                    <option value=null >워킹그룹</option>
                                     <option value="WG1">교육과정 표준체계</option>
                                     <option value="WG2">맞춤학습지원 기능</option>
                                     <option value="WG3">접근성/UDL</option>

                     <thead>
                         <tr>
                             <th style="width:5%">no</th>
-                            <th style="width:10%">워킹그룹</th>
-                            <th style="width:55%">제목</th>
+                            <th style="width:18%">워킹그룹</th>
+                            <th style="width:50%">제목</th>
                             <th style="width:10%">작성자</th>
                             <th style="width:10%">작성일자</th>
-                            <th style="width:10%">조회수</th>
+                            <th style="width:7%">조회수</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr v-for="(item, idx) in postList" :key="idx" @click="postSelectOnePage(item)">
                             <td>{{ postIdx - idx }}</td>
-                            <td v-if="item.ctgry_nm === 'policy'"><span class="category-zone">정책자료</span></td>
-                            <td v-else-if="item.ctgry_nm === 'research'"><span class="category-zone">연구자료</span></td>
-                            <td v-else><span class="category-zone">가이드라인</span></td>
+                            <td v-if="item.ctgry_nm === 'WG1'"><span class="category-zone">(WG1)교육과정 표준체계</span></td>
+                            <td v-else-if="item.ctgry_nm === 'WG2'"><span class="category-zone">(WG2)맞춤학습지원 기능</span></td>
+                            <td v-else-if="item.ctgry_nm === 'WG3'"><span class="category-zone">(WG3)접근성/UDL</span></td>
+                            <td v-else-if="item.ctgry_nm === 'WG4'"><span class="category-zone">(WG4)클라우드 보안인증</span></td>
+                            <td v-else-if="item.ctgry_nm === 'WG5'"><span class="category-zone">(WG5)통합인증체계</span></td>
+                            <td v-else-if="item.ctgry_nm === 'WG6'"><span class="category-zone">(WG6)학습이력데이터/통합대시보드</span></td>
+                            <td v-else-if="item.ctgry_nm === 'WG7'"><span class="category-zone">(WG7)AI 트레이닝 데이터</span></td>
+                            <td v-else-if="item.ctgry_nm === 'WG8'"><span class="category-zone">(WG8)국가수준 학습분석</span></td>
+                            <td v-else-if="item.ctgry_nm === 'WG9'"><span class="category-zone">(WG9)학교 인프라</span></td>
+                            <td v-else-if="item.ctgry_nm === 'WG10'"><span class="category-zone">(WG10)서비스 품질관리</span></td>
+                            <td v-else><span class="category-zone">(WG11)서비스 정책</span></td>
                             <td>{{ item.post_title }}</td>
                             <td>{{ item.rgtr_id }}</td>
                             <td>{{ yyyymmdd(item.reg_dt) }}</td>
                             <td>{{ item.view_cnt }}</td>
                         </tr>
                         <tr v-if="postListCount == 0">
-                            <td style="font-size: 20px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
+                            <td style="font-size: 20px;" colspan="6">검색조건에 해당하는 데이터가 없습니다.</td>
                         </tr>
                     </tbody>
                 </table>

                 perPage: 10,
                 searchType: null,
                 searchText: null,
-                bbs_id: '0',
+                bbs_id: '4',
                 ctgry_nm: null
             },
             postList: [],

         postSelectList: function () {
             const vm = this;
 
+            if(vm.postListSearch.ctgry_nm === 'null') {
+                vm.postListSearch.ctgry_nm = null
+            }
+            
             axios({
                 url: '/post/postSelectList.json',
                 method: 'post',

         postInsertPage: function () {
             this.$router.push({ path: '/adm/wgInsert.page', query: {} })
         },
-
-        ctgry: function(e) {
-            this.postListSearch.ctgry_nm = e.target.value;
-            if(this.postListSearch.ctgry_nm === 'on') {
-                this.postListSearch.ctgry_nm = null
-            }
-            this.postSelectList();
-        }
     },
     watch: {},
     computed: {},

0f1babd

b545ffe

client/views/pages/admin/wgcommunity/WgSelectOne.vue

--- client/views/pages/admin/wgcommunity/WgSelectOne.vue

+++ client/views/pages/admin/wgcommunity/WgSelectOne.vue


                             <td class="title-zone" colspan="2">
                                 <p class="flex">
                                     <span class="post-title">{{ post.post_title }}</span>
-                                    <span v-if="post.ctgry_nm === 'policy'" class="category-zone">정책자료</span>
-                                    <span v-else-if="post.ctgry_nm === 'research'" class="category-zone">연구자료</span>
-                                    <span v-else class="category-zone">가이드라인</span>
+                                    <span v-if="post.ctgry_nm === 'WG1'" class="category-zone">(WG1)교육과정 표준체계</span>
+                                    <span v-else-if="post.ctgry_nm === 'WG2'" class="category-zone">(WG2)맞춤학습지원 기능</span>
+                                    <span v-else-if="post.ctgry_nm === 'WG3'" class="category-zone">(WG3)접근성/UDL</span>
+                                    <span v-else-if="post.ctgry_nm === 'WG4'" class="category-zone">(WG4)클라우드 보안인증</span>
+                                    <span v-else-if="post.ctgry_nm === 'WG5'" class="category-zone">(WG5)통합인증체계</span>
+                                    <span v-else-if="post.ctgry_nm === 'WG6'" class="category-zone">(WG6)학습이력데이터/통합대시보드</span>
+                                    <span v-else-if="post.ctgry_nm === 'WG7'" class="category-zone">(WG7)AI 트레이닝 데이터</span>
+                                    <span v-else-if="post.ctgry_nm === 'WG8'" class="category-zone">(WG8)국가수준 학습분석</span>
+                                    <span v-else-if="post.ctgry_nm === 'WG9'" class="category-zone">(WG9)학교 인프라</span>
+                                    <span v-else-if="post.ctgry_nm === 'WG10'" class="category-zone">(WG10)서비스 품질관리</span>
+                                    <span v-else class="category-zone">(WG11)서비스 정책</span>
                                 </p>
                                 <p class="flex-end write-info"><span class="writer">작성자</span>
                                     <span>{{ post.rgtr_id}}</span>

         },
 
         postSelectListPage: function () {
-            this.$router.push({ path: '/adm/dataSelectList.page' });
+            this.$router.push({ path: '/adm/wgSelectList.page' });
         },
 
         postUpdatePage: function () {
-            this.$router.push({ path: '/adm/dataUpdate.page', query: { 'post_id': this.post.post_id, 'file_id': this.post.file_id } });
+            this.$router.push({ path: '/adm/wgUpdate.page', query: { 'post_id': this.post.post_id, 'file_id': this.post.file_id } });
         },
     },
     watch: {},

0f1babd

b545ffe

client/views/pages/admin/wgcommunity/WgUpdate.vue

--- client/views/pages/admin/wgcommunity/WgUpdate.vue

+++ client/views/pages/admin/wgcommunity/WgUpdate.vue


                         <tr>
                             <th>워킹그룹</th>
                             <td>
-                                <select name="" id="">
-                                    <option value="null">선택해주세요</option>
+                                <select name="" id="" v-model="post.ctgry_nm">
+                                    <option value=null disabled>선택해주세요</option>
                                     <option value="WG1">교육과정 표준체계</option>
                                     <option value="WG2">맞춤학습지원 기능</option>
                                     <option value="WG3">접근성/UDL</option>

 <script>
 import axios from 'axios';
 import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
+import { useRoute } from 'vue-router';
 
 export default {
     data() {
         return {
             post: {
-                bbs_id: '0',
+                post_id: null,
                 post_title: null,
                 post_content: null,
+                notice_yn: null,
+                notice_start_dt: null,
+                notice_end_dt: null,
+                reg_dt: null,
+                mdfcn_dt: null,
                 link_url: null,
-                // 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
-                ctgry_nm: 'policy',
+                view_cnt: null,
+                file_id: null,
+                bbs_id: null,
+                rgtr_id: null,
+                mdfr_id: null,
+                ctgry_nm: null,
             },
             fileList: [],
+            deleteFileList: [],
+            insertFileList: [],
             filecount: 0,
+            insertCount: 0,
+            deleteCount: 0,
             oEditors: [], // oEditors는 스마트에디터용
+            route: useRoute(),
         };
     },
     methods: {
 
+        postSelectOne: function () {
+            const vm = this;
+            axios({
+                url: '/post/postSelectOne.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: { 'post_id': vm.route.query.post_id, 'file_id': vm.route.query.file_id }
+            }).then(function (response) {
+                vm.post = response.data.postSelectOne.post;
+
+                if (response.data.selectFileList.length != 0) {
+                    vm.fileList = response.data.selectFileList;
+                    vm.filecount = response.data.selectFileList.length;
+                }
+
+                vm.initEditor(vm.post.post_content)
+            }).catch(function (error) {
+                console.log("error - ", error)
+                alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
+            })
+        },
+
         //게시글 및 첨부파일 등록
-        postInsert: function () {
+        postUpdate: function () {
             const vm = this;
             let formData = new FormData();
 
-            if (vm.fileList.length > 0) {
-                for (let i = 0; i < vm.fileList.length; i++) {
-                    formData.append('file', vm.fileList[i]);
-                    console.log(formData.get('file'));
+            if (vm.insertFileList.length > 0 || vm.deleteFileList.length > 0) {
+                if (vm.insertFileList.length > 0) {
+                    for (let i = 0; i < vm.insertFileList.length; i++) {
+                        formData.append('file', vm.insertFileList[i]);
+                        console.log('file - ', formData.get('file'));
+                    }
                 }
+
+                if (vm.deleteFileList.length > 0) {
+                    formData.append('deleteFile', JSON.stringify(vm.deleteFileList));
+                    console.log('deleteFile - ', formData.get('deleteFile'));
+                }
+
                 formData.append("post", JSON.stringify(vm.post));
 
                 axios({
-                    url: '/post/postFileInsert.file',
+                    url: '/post/postFileUpdate.file',
                     method: 'post',
                     headers: {
                         'Content-Type': 'multipart/form-data',

                     console.log("qnaInsert - response : ", response);
                     let result = response.data;
                     if (result > 0) {
-                        alert("등록을 완료하였습니다.");
+                        alert("수정을 완료하였습니다.");
                         vm.postSelectListPage()
                     } else {
-                        alert("등록 실패, 관리자에게 문의해주세요.");
+                        alert("수정 실패, 관리자에게 문의해주세요.");
                     }
                 }).catch(function (error) {
                     console.log("qnaInsert - error : ", error);
-                    alert("등록 오류, 관리자에게 문의해주세요.");
+                    alert("수정 오류, 관리자에게 문의해주세요.");
                 });
             } else {
 
                 axios({
-                    url: '/post/postInsert.json',
+                    url: '/post/postFileUpdate.json',
                     method: 'post',
                     headers: {
                         'Content-Type': "application/json; charset=UTF-8",

                     console.log("noticeInsert - response : ", response);
                     let result = response.data;
                     if (result > 0) {
-                        alert("등록을 완료하였습니다.");
+                        alert("수정을 완료하였습니다.");
                         vm.postSelectListPage()
                     } else {
-                        alert("등록 실패, 관리자에게 문의해주세요.");
+                        alert("수정 실패, 관리자에게 문의해주세요.");
                     }
                 }).catch(function (error) {
                     console.log("noticeInsert - error : ", error);
-                    alert("등록 오류, 관리자에게 문의해주세요.");
+                    alert("수정 오류, 관리자에게 문의해주세요.");
                 });
             }
         },
 
         //등록 유효성 검사
-        postInsertCheck: function () {
+        postUpdateCheck: function () {
             const oEditors = this.oEditors;
             oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
             // 스마트에디터의 iframe에 있는 내용을 textarea로. 
             this.post.post_content = document.getElementById("smart").value;
-            console.log(document.getElementById("smart").value);
-            console.log(this.post.post_content);
-            console.log(COMMON_UTIL.isEmpty(this.post.post_title));
 
             if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
                 alert("제목을 입력해주세요.");

                 return false;
             }
 
-            this.postInsert();
+            this.postUpdate();
         },
 
+        // 에디터 만들기 
+        initEditor: function (initData) {
+            // 스마트 에디터 적용
+            const oEditors = this.oEditors;
+            nhn.husky.EZCreator.createInIFrame({
+                oAppRef: oEditors,
+                elPlaceHolder: "smart",
+                sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
+                htParams: {
+                    bSkipXssFilter: true,
+                    bUseVerticalResizer: true,
+                    bUseModeChanger: true
+                },
+                fOnAppLoad: function () {
+                    oEditors.getById["smart"].exec("PASTE_HTML", [initData]);
+                },
+                fCreator: "createSEditor2"
+            });
+        },
         //파일업로드
         fileUpload: function () {
-            this.fileList[this.filecount] = this.$refs.fileInput.files[0]
-            this.filecount += 1
-            console.log("file", this.fileList);
+
+            this.insertFileList[this.insertCount] = this.$refs.fileInput.files[0];
+            this.insertCount += 1;
+            console.log("insertFile - ", this.insertFileList);
         },
 
         //파일업로드 중 업로드 파일 삭제
-        fileRemove(idx) {
-            this.fileList.splice(idx, 1);
-            console.log("reMove_file", this.fileList);
-            this.filecount = this.fileList.length;
+        fileRemove(item, idx) {
+            if (item.file_path === undefined) {
+                this.insertFileList.splice(idx, 1);
+                this.insertCount = this.insertFileList.length;
+                console.log("insertfile", this.insertFileList);
+
+            } else {
+                this.fileList.splice(idx, 1);
+                this.deleteFileList[this.deleteCount] = item
+                this.deleteCount += 1
+                this.filecount = this.fileList.length;
+                console.log("deleteFile - ", this.deleteFileList);
+            }
+
         },
 
         //게시글 리스트로 이동
         postSelectListPage: function () {
-            this.$router.push({ path: '/adm/dataSelectList.page' });
+            this.$router.push({ path: '/adm/wgSelectList.page' });
         },
 
         // 파일 업로드 커스텀을 위한 함수

     computed: {},
     components: {},
     mounted() {
-        // 스마트 에디터 적용
-        const oEditors = this.oEditors;
-        nhn.husky.EZCreator.createInIFrame({
-            oAppRef: oEditors,
-            elPlaceHolder: "smart",
-            sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
-            htParams: {
-                bUseToolbar: true,				// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
-                bSkipXssFilter: true,
-                bUseVerticalResizer: true,
-                bUseModeChanger: true
-            },
-            fCreator: "createSEditor2"
-        });
-
+        this.postSelectOne();
     }
 };
 </script>

0f1babd

b545ffe

client/views/pages/user/Data/Technology.vue

--- client/views/pages/user/Data/Technology.vue

+++ client/views/pages/user/Data/Technology.vue


 export default {
     data() {
         return {
+            postListSearch: {
+                currentPage: 1,
+                perPage: 10,
+                searchType: null,
+                searchText: null,
+                ctgry_nm: 'policy',
+                bbs_id: '3'
+            },
+            postList: [],
+            postListCount: 0,
+            postIdx: 0,
         }
     },
     methods: {

Add a comment

Open 0
Closed 0

List

...	...	@@ -73,6 +73,9 @@
73	73	for (var i = this.startPage; i <= this.endPage; i++) {
74	74	range.push(i);
75	75	}
	76	+ if (range.length == 0) {
	77	+ range.push(1);
	78	+ }
76	79	return range;
77	80	}
78	81	},

...	...	@@ -43,6 +43,7 @@
43	43	import AdminTechSelectList from "../pages/admin/technology/TechSelectList.vue";
44	44	import AdminTechSelectOne from "../pages/admin/technology/TechSelectOne.vue";
45	45	import AdminTechInsert from "../pages/admin/technology/TechInsert.vue";
	46	+import AdminTechUpdate from "../pages/admin/technology/TechUpdate.vue";
46	47	import AdminDataSelectList from "../pages/admin/databook/DataSelectList.vue";
47	48	import AdminDataSelectOne from "./admin/databook/DataSelectOne.vue";
48	49	import AdminDataInsert from "../pages/admin/databook/DataInsert.vue";
...	...	@@ -102,6 +103,7 @@
102	103	{ path: "/adm/techSelectList.page", name: "AdminTechSelectList", component: AdminTechSelectList },
103	104	{ path: "/adm/techSelectOne.page", name: "AdminTechSelectOne", component: AdminTechSelectOne },
104	105	{ path: "/adm/techInsert.page", name: "AdminTechInsert", component: AdminTechInsert },
	106	+ { path: "/adm/techUpdate.page", name: "AdminTechUpdate", component: AdminTechUpdate },
105	107	{ path: "/adm/dataSelectList.page", name: "AdminDataSelectList", component: AdminDataSelectList },
106	108	{ path: "/adm/dataSelectOne.page", name: "AdminDataSelectOne", component: AdminDataSelectOne },
107	109	{ path: "/adm/dataInsert.page", name: "AdminDataInsert", component: AdminDataInsert },

...	...	@@ -78,7 +78,7 @@
78	78	post_content: null,
79	79	link_url: null,
80	80	// 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
81		- ctgry_nm: 'policy',
	81	+ ctgry_nm: null,
82	82	},
83	83	fileList: [],
84	84	filecount: 0,
...	...	@@ -159,6 +159,11 @@
159	159	return false;
160	160	}
161	161
	162	+ if (COMMON_UTIL.isEmpty(this.post.ctgry_nm) === false) {
	163	+ alert("카테고리를 선택해주세요.");
	164	+ return false;
	165	+ }
	166	+
162	167	if (COMMON_UTIL.isEmpty(this.post.post_content) === false \|\| this.post.post_content === "<p><br></p>") {
163	168	alert("내용을 입력해주세요.");
164	169	return false;
...	...	@@ -171,13 +176,11 @@
171	176	fileUpload: function () {
172	177	this.fileList[this.filecount] = this.$refs.fileInput.files[0]
173	178	this.filecount += 1
174		- console.log("file", this.fileList);
175	179	},
176	180
177	181	//파일업로드 중 업로드 파일 삭제
178	182	fileRemove(idx) {
179	183	this.fileList.splice(idx, 1);
180		- console.log("reMove_file", this.fileList);
181	184	this.filecount = this.fileList.length;
182	185	},
183	186

...	...	@@ -152,7 +152,8 @@
152	152
153	153	downloadFile: function (item) {
154	154	const vm = this;
155		- let path = item.file_path + '\\' + item.file_nm + '.' + item.file_extn_nm;
	155	+ let path = item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm;
	156	+ console.log(path);
156	157	axios({
157	158	url: '/file/downloadFile.json',
158	159	method: 'post',

...	...	@@ -19,7 +19,7 @@
19	19	<td><textarea name="smart" id="smart" style="width:100%"></textarea></td>
20	20	</tr>
21	21	<tr>
22		- <th>썸네일 파일</th>
	22	+ <th>썸네일</th>
23	23	<td>
24	24	<div class="btn-upload" @click="openFileInput">파일 업로드하기</div>
25	25	<input type="file" name="file" id="file" ref="fileInput" style="display: none"

...	...	@@ -12,27 +12,26 @@
12	12	<tbody>
13	13	<tr>
14	14	<th>제목</th>
15		- <td><input type="text" name="" id="newsTitle"></td>
	15	+ <td><input type="text" name="" id="techTitle" v-model="post.post_title"></td>
16	16	</tr>
17	17	<tr>
18	18	<th>카테고리</th>
19	19	<td>
20	20	<div class="flex-start">
21	21	<div>
22		- <input type="radio" name="category" id="api" style="display:none" checked>
	22	+ <input type="radio" name="category" id="api" value="api" style="display:none" checked
	23	+ v-model="post.ctgry_nm">
23	24	<label for="api" class="category">API</label>
24	25	</div>
25	26	<div>
26		- <input type="radio" name="category" id="tech" style="display:none">
	27	+ <input type="radio" name="category" id="tech" value="tech" style="display:none"
	28	+ v-model="post.ctgry_nm">
27	29	<label for="tech" class="category">기술리포트</label>
28	30	</div>
29	31	<div>
30		- <input type="radio" name="category" id="issue" style="display:none">
31		- <label for="issue" class="category">이슈리포트</label>
32		- </div>
33		- <div>
34		- <input type="radio" name="category" id="edu" style="display:none">
35		- <label for="edu" class="category">교육리포트</label>
	32	+ <input type="radio" name="category" id="issue" value="standard" style="display:none"
	33	+ v-model="post.ctgry_nm">
	34	+ <label for="issue" class="category">기술규격문서</label>
36	35	</div>
37	36	</div>
38	37	</td>
...	...	@@ -55,43 +54,140 @@
55	54	</tbody>
56	55	</table>
57	56	<div class="btn-wrap">
58		- <button class="dark-gray-btn" @click="selectList">이전</button>
59		- <button class="blue-btn">글쓰기</button>
	57	+ <button class="dark-gray-btn" @click="postSelectListPage()">이전</button>
	58	+ <button class="blue-btn" @click="postInsertCheck()">등록</button>
60	59	</div>
61	60	</div>
62	61	</div>
63	62	</div>
64	63	</template>
65	64	<script>
66		-import '@toast-ui/editor/dist/toastui-editor.css';
	65	+import axios from 'axios';
	66	+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
67	67
68	68	export default {
69	69	data() {
70	70	return {
	71	+ post: {
	72	+ bbs_id: '3',
	73	+ post_title: null,
	74	+ post_content: null,
	75	+ link_url: null,
	76	+ // 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
	77	+ ctgry_nm: 'api',
	78	+ },
	79	+ fileList: [],
	80	+ filecount: 0,
71	81	oEditors: [], // oEditors는 스마트에디터용
72	82	};
73	83	},
74	84	methods: {
75		- selectList: function () {
	85	+
	86	+ //게시글 및 첨부파일 등록
	87	+ postInsert: function () {
	88	+ const vm = this;
	89	+ let formData = new FormData();
	90	+
	91	+ if (vm.fileList.length > 0) {
	92	+ for (let i = 0; i < vm.fileList.length; i++) {
	93	+ formData.append('file', vm.fileList[i]);
	94	+ console.log(formData.get('file'));
	95	+ }
	96	+ formData.append("post", JSON.stringify(vm.post));
	97	+
	98	+ axios({
	99	+ url: '/post/postFileInsert.file',
	100	+ method: 'post',
	101	+ headers: {
	102	+ 'Content-Type': 'multipart/form-data',
	103	+ },
	104	+ data: formData
	105	+ }).then(function (response) {
	106	+ console.log("qnaInsert - response : ", response);
	107	+ let result = response.data;
	108	+ if (result > 0) {
	109	+ alert("등록을 완료하였습니다.");
	110	+ vm.postSelectListPage()
	111	+ } else {
	112	+ alert("등록 실패, 관리자에게 문의해주세요.");
	113	+ }
	114	+ }).catch(function (error) {
	115	+ console.log("qnaInsert - error : ", error);
	116	+ alert("등록 오류, 관리자에게 문의해주세요.");
	117	+ });
	118	+ } else {
	119	+
	120	+ axios({
	121	+ url: '/post/postInsert.json',
	122	+ method: 'post',
	123	+ headers: {
	124	+ 'Content-Type': "application/json; charset=UTF-8",
	125	+ },
	126	+ data: vm.post
	127	+ }).then(function (response) {
	128	+ console.log("noticeInsert - response : ", response);
	129	+ let result = response.data;
	130	+ if (result > 0) {
	131	+ alert("등록을 완료하였습니다.");
	132	+ vm.postSelectListPage()
	133	+ } else {
	134	+ alert("등록 실패, 관리자에게 문의해주세요.");
	135	+ }
	136	+ }).catch(function (error) {
	137	+ console.log("noticeInsert - error : ", error);
	138	+ alert("등록 오류, 관리자에게 문의해주세요.");
	139	+ });
	140	+ }
	141	+ },
	142	+
	143	+ //등록 유효성 검사
	144	+ postInsertCheck: function () {
	145	+ const oEditors = this.oEditors;
	146	+ oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
	147	+ // 스마트에디터의 iframe에 있는 내용을 textarea로.
	148	+ this.post.post_content = document.getElementById("smart").value;
	149	+ console.log(document.getElementById("smart").value);
	150	+ console.log(this.post.post_content);
	151	+ console.log(COMMON_UTIL.isEmpty(this.post.post_title));
	152	+
	153	+ if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
	154	+ alert("제목을 입력해주세요.");
	155	+ return false;
	156	+ }
	157	+
	158	+ if (COMMON_UTIL.isEmpty(this.post.ctgry_nm) === false) {
	159	+ alert("카테고리를 선택해주세요.");
	160	+ return false;
	161	+ }
	162	+
	163	+ if (COMMON_UTIL.isEmpty(this.post.post_content) === false \|\| this.post.post_content === "<p><br></p>") {
	164	+ alert("내용을 입력해주세요.");
	165	+ return false;
	166	+ }
	167	+
	168	+ this.postInsert();
	169	+ },
	170	+
	171	+ //파일업로드
	172	+ fileUpload: function () {
	173	+ this.fileList[this.filecount] = this.$refs.fileInput.files[0]
	174	+ this.filecount += 1
	175	+ },
	176	+
	177	+ //파일업로드 중 업로드 파일 삭제
	178	+ fileRemove(idx) {
	179	+ this.fileList.splice(idx, 1);
	180	+ this.filecount = this.fileList.length;
	181	+ },
	182	+
	183	+ //게시글 리스트로 이동
	184	+ postSelectListPage: function () {
76	185	this.$router.push({ path: '/adm/techSelectList.page' });
77	186	},
78	187
79	188	// 파일 업로드 커스텀을 위한 함수
80	189	openFileInput: function () {
81	190	this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭
82		- },
83		- //파일업로드
84		- fileUpload: function () {
85		- this.fileList[this.filecount] = this.$refs.fileInput.files[0]
86		- this.filecount += 1
87		- console.log("file", this.fileList);
88		- },
89		-
90		- //파일업로드 중 업로드 파일 삭제
91		- fileRemove(idx) {
92		- this.fileList.splice(idx, 1);
93		- console.log("reMove_file", this.fileList);
94		- this.filecount = this.fileList.length;
95	191	},
96	192	},
97	193	watch: {},

...	...	@@ -8,71 +8,157 @@
8	8	</div>
9	9	</div>
10	10	<div class="content-wrap">
11		- <div class="btn-wrap">
12		- <div class="data-select">
13		- <select name="data-table-sild" id="data-table-sild">
14		- <option :value=null selected>전체</option>
15		- <option value="title">제목</option>
16		- <option value="user">작성자</option>
17		- <option value="조회순">조회순</option>
18		- </select>
19		- <div class="input-group">
20		- <input type="text" class="input" placeholder="검색어를 입력해주세요." >
21		- <button class="button--submit">검색</button>
	11	+ <div class="top-bar">
	12	+ <div class="flex">
	13	+ <div class="category-bar flex-start">
	14	+ <div>
	15	+ <input type="radio" name="category" id="all" :value= null style="display:none" checked @click="ctgry($event)">
	16	+ <label for="all" class="category">전체</label>
	17	+ </div>
	18	+ <div>
	19	+ <input type="radio" name="category" id="policy" value="api" style="display:none" @click="ctgry($event)">
	20	+ <label for="policy" class="category">API</label>
	21	+ </div>
	22	+ <div>
	23	+ <input type="radio" name="category" id="research" value="tech" style="display:none" @click="ctgry($event)">
	24	+ <label for="research" class="category">기술리포트</label>
	25	+ </div>
	26	+ <div>
	27	+ <input type="radio" name="category" id="guide" value="standard" style="display:none" @click="ctgry($event)">
	28	+ <label for="guide" class="category">기술규격문서</label>
	29	+ </div>
	30	+ </div>
	31	+ <div class="data-select">
	32	+ <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
	33	+ <option :value=null selected>전체</option>
	34	+ <option value="title">제목</option>
	35	+ <option value="content">내용</option>
	36	+ <option value="writer">작성자</option>
	37	+ </select>
	38	+ <div class="input-group">
	39	+ <input type="text" class="input" placeholder="검색어를 입력해주세요."
	40	+ v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
	41	+ <input class="button--submit" value="검색" type="submit" @click="postSelectList()">
	42	+ </div>
22	43	</div>
23	44	</div>
24	45	</div>
25	46	<div class="sort-wrap">
26		- <ul class="flex-end">
27		- <li>최신순</li>
28		- <li>등록순</li>
29		- <li>조회수순</li>
30		- </ul>
31		- </div>
	47	+ <ul class="flex-end">
	48	+ <li>최신순</li>
	49	+ <li>등록순</li>
	50	+ <li>조회수순</li>
	51	+ </ul>
	52	+ </div>
32	53	<table class="select-table">
33	54	<thead>
34	55	<tr>
35	56	<th style="width:5%">no</th>
36		- <th style="width:65%">제목</th>
	57	+ <th style="width:10%">카테고리</th>
	58	+ <th style="width:55%">제목</th>
37	59	<th style="width:10%">작성자</th>
38	60	<th style="width:10%">작성일자</th>
39	61	<th style="width:10%">조회수</th>
40	62	</tr>
41	63	</thead>
42	64	<tbody>
43		- <tr>
44		- <td>1</td>
45		- <td>제목이 들어가는 부분입니다.</td>
46		- <td>관리자</td>
47		- <td>2023/11/01</td>
48		- <td>100</td>
	65	+ <tr v-for="(item, idx) in postList" :key="idx" @click="postSelectOnePage(item)">
	66	+ <td>{{ postIdx - idx }}</td>
	67	+ <td v-if="item.ctgry_nm === 'api'"><span class="category-zone">API</span></td>
	68	+ <td v-else-if="item.ctgry_nm === 'tech'"><span class="category-zone">기술리포트</span></td>
	69	+ <td v-else><span class="category-zone">기술규격문서</span></td>
	70	+ <td>{{ item.post_title }}</td>
	71	+ <td>{{ item.rgtr_id }}</td>
	72	+ <td>{{ yyyymmdd(item.reg_dt) }}</td>
	73	+ <td>{{ item.view_cnt }}</td>
	74	+ </tr>
	75	+ <tr v-if="postListCount == 0">
	76	+ <td style="font-size: 20px;" colspan="6">검색조건에 해당하는 데이터가 없습니다.</td>
49	77	</tr>
50	78	</tbody>
51	79	</table>
52	80	<div class="btn-wrap">
53		- <button class="blue-btn" @click="selectInsert">글쓰기</button>
	81	+ <button class="blue-btn" @click="postInsertPage()">글쓰기</button>
	82	+ </div>
	83	+ <div class="bottom-wrap">
	84	+ <PaginationButton v-model:currentPage="postListSearch.currentPage" :perpage="postListSearch.perPage"
	85	+ :total-count="postListCount" :max-range="5" :click="postSelectList" />
54	86	</div>
55	87	</div>
56	88	</div>
57	89	</div>
58	90	</template>
59	91	<script>
60		-
	92	+import axios from 'axios';
	93	+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
	94	+import PaginationButton from '../../../component/pagination/PaginationButton.vue';
61	95
62	96	export default {
63	97
64	98	data() {
65		- return {};
	99	+ return {
	100	+ postListSearch: {
	101	+ currentPage: 1,
	102	+ perPage: 10,
	103	+ searchType: null,
	104	+ searchText: null,
	105	+ bbs_id: '3',
	106	+ ctgry_nm: null
	107	+ },
	108	+ postList: [],
	109	+ postListCount: 0,
	110	+ postIdx: 0
	111	+ };
66	112	},
67	113	methods: {
68		- selectInsert: function () {
	114	+ postSelectList: function () {
	115	+ const vm = this;
	116	+
	117	+ axios({
	118	+ url: '/post/postSelectList.json',
	119	+ method: 'post',
	120	+ hearder: {
	121	+ 'Content-Type': "application/json; charset=UTF-8",
	122	+ },
	123	+ data: vm.postListSearch
	124	+ }).then(function (response) {
	125	+ vm.postList = response.data.postSelectList;
	126	+ vm.postListCount = response.data.postSelectListCount;
	127	+ vm.postIdx = vm.postListCount - (vm.postListSearch.currentPage - 1) * vm.postListSearch.perPage;
	128	+ }).catch(function (error) {
	129	+ alert('자료집 목록 조회 오류, 관리자에게 문의하세요.');
	130	+ })
	131	+ },
	132	+
	133	+ //날짜 시,분,초 자르기
	134	+ yyyymmdd: function (date) {
	135	+ return COMMON_UTIL.yyyymmdd(date);
	136	+ },
	137	+
	138	+ //게시글 상세조회 페이지로 이동
	139	+ postSelectOnePage: function (item) {
	140	+ this.$router.push({ path: '/adm/techSelectOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
	141	+ },
	142	+
	143	+ postInsertPage: function () {
69	144	this.$router.push({ path: '/adm/techInsert.page', query: {} })
	145	+ },
	146	+
	147	+ ctgry: function(e) {
	148	+ this.postListSearch.ctgry_nm = e.target.value;
	149	+ if(this.postListSearch.ctgry_nm === 'on') {
	150	+ this.postListSearch.ctgry_nm = null
	151	+ }
	152	+ this.postSelectList();
70	153	}
71	154	},
72	155	watch: {},
73	156	computed: {},
74		- components: {},
	157	+ components: {
	158	+ PaginationButton: PaginationButton,
	159	+ },
75	160	mounted() {
	161	+ this.postSelectList();
76	162	}
77	163	};
78	164	</script>

...	...	@@ -11,41 +11,221 @@
11	11	<table class="insert-table">
12	12	<tbody>
13	13	<tr>
14		- <th>제목</th>
15		- <td><input type="text" name="" id="newsTitle"></td>
	14	+ <td class="title-zone" colspan="2">
	15	+ <p class="flex">
	16	+ <span class="post-title">{{ post.post_title }}</span>
	17	+ <span v-if="post.ctgry_nm === 'api'" class="category-zone">API</span>
	18	+ <span v-else-if="post.ctgry_nm === 'tech'" class="category-zone">기술리포트</span>
	19	+ <span v-else class="category-zone">기술규격문서</span>
	20	+ </p>
	21	+ <p class="flex-end write-info"><span class="writer">작성자</span>
	22	+ <span>{{ post.rgtr_id}}</span>
	23	+ <span class="view">조회수</span>
	24	+ <span>{{ post.view_cnt }}</span>
	25	+ </p>
	26	+ </td>
16	27	</tr>
17	28	<tr>
18		- <th>내용</th>
19		- <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
	29	+ <td colspan="2" style="border-bottom: 1px solid #007aff;">
	30	+ <div id="viewer" ref="viewer" class="viewer"></div>
	31	+ </td>
	32	+ </tr>
	33	+ <tr>
	34	+ <th style="width: 10%;">첨부파일명</th>
	35	+ <td>
	36	+ <div v-if="fileList.length == 0">
	37	+ <label>첨부된 파일이 없습니다.</label>
	38	+ </div>
	39	+ <ul v-else v-for="(item, idx) in fileList" :key="idx">
	40	+ <li @click="downloadFile(item)">{{ item.real_file_nm }}</li>
	41	+ </ul>
	42	+ </td>
20	43	</tr>
21	44	</tbody>
22	45	</table>
	46	+ <div class="article-list">
	47	+ <ul>
	48	+ <li><span class="next">다음글</span>
	49	+ <span>
	50	+ <span v-if="nextPost" @click="movePost(nextPost)" class="sub-content-title">
	51	+ {{ nextPost.post_title }}
	52	+ </span>
	53	+ <span v-else class="sub-content-title">다음글이 없습니다.</span>
	54	+ </span>
	55	+ </li>
	56	+ <li><span class="prev">이전글</span>
	57	+ <span>
	58	+ <span v-if="prevPost" @click="movePost(prevPost)" class="sub-content-title">
	59	+ {{ prevPost.post_title }}
	60	+ </span>
	61	+ <span v-else class="sub-content-title">이전글이 없습니다.</span>
	62	+ </span>
	63	+ </li>
	64	+ </ul>
	65	+ </div>
23	66	<div class="btn-wrap">
24		- <button class="red-btn" @click="selectList">삭제</button>
25		- <button class="dark-gray-btn" @click="selectList">목록</button>
26		- <button class="blue-btn">수정</button>
	67	+ <button class="red-btn" @click="postDelete()">삭제</button>
	68	+ <button class="dark-gray-btn" @click="postSelectListPage()">목록</button>
	69	+ <button class="blue-btn" @click="postUpdatePage()">수정</button>
27	70	</div>
28	71	</div>
29	72	</div>
30	73	</div>
31	74	</template>
32	75	<script>
33		-
	76	+import axios from 'axios';
	77	+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
	78	+import { useRoute } from 'vue-router';
	79	+import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
	80	+import '@toast-ui/editor/dist/toastui-editor.css';
	81	+import '@toast-ui/editor/dist/i18n/ko-kr';
	82	+import * as FileSaver from 'file-saver';
34	83
35	84	export default {
36	85
37	86	data() {
38		- return {};
	87	+ return {
	88	+ post: {
	89	+ post_id: null,
	90	+ post_title: null,
	91	+ post_content: null,
	92	+ notice_yn: null,
	93	+ notice_start_dt: null,
	94	+ notice_end_dt: null,
	95	+ reg_dt: null,
	96	+ mdfcn_dt: null,
	97	+ link_url: null,
	98	+ view_cnt: null,
	99	+ file_id: null,
	100	+ bbs_id: null,
	101	+ rgtr_id: null,
	102	+ mdfr_id: null,
	103	+ ctgry_nm: null,
	104	+ },
	105	+ fileList: [],
	106	+ oEditors: [], // oEditors는 스마트에디터용
	107	+ route: useRoute(),
	108	+ };
39	109	},
40	110	methods: {
41		- selectList:function(){
42		- this.$router.push({ path: '/adm/techSelectList.page'});
43		- }
	111	+ postSelectOne: function () {
	112	+ const vm = this;
	113	+ axios({
	114	+ url: '/post/postSelectOne.json',
	115	+ method: 'post',
	116	+ hearder: {
	117	+ 'Content-Type': "application/json; charset=UTF-8",
	118	+ },
	119	+ data: { 'post_id': vm.route.query.post_id, 'file_id': vm.route.query.file_id }
	120	+ }).then(function (response) {
	121	+ vm.post = response.data.postSelectOne.post;
	122	+
	123	+ if (response.data.selectFileList.length != 0) {
	124	+ vm.fileList = response.data.selectFileList;
	125	+ }
	126	+ vm.getViewer(vm.post.post_content)
	127	+ }).catch(function (error) {
	128	+ console.log("error - ", error)
	129	+ alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
	130	+ })
	131	+ },
	132	+
	133	+ getViewer(data) {
	134	+ this.viewer = new Viewer({
	135	+ el: this.$refs.viewer,
	136	+ initialEditType: 'wysiwyg',
	137	+ previewStyle: 'vertical',
	138	+ initialValue: data,
	139	+ customHTMLRenderer: {
	140	+ htmlBlock: {
	141	+ iframe(node) {
	142	+ return [
	143	+ { type: 'openTag', tagName: 'iframe', outerNewLine: true, attributes: node.attrs },
	144	+ { type: 'html', content: node.childrenHTML },
	145	+ { type: 'closeTag', tagName: 'iframe', outerNewLine: true },
	146	+ ];
	147	+ },
	148	+ }
	149	+ },
	150	+ });
	151	+ },
	152	+
	153	+ downloadFile: function (item) {
	154	+ const vm = this;
	155	+ let path = item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm;
	156	+ console.log(path);
	157	+ axios({
	158	+ url: '/file/downloadFile.json',
	159	+ method: 'post',
	160	+ headers: {
	161	+ "Content-Type": "application/x-www-form-urlencoded",
	162	+ },
	163	+ responseType: 'blob',
	164	+ data: `file_path=${encodeURIComponent(path)}`
	165	+ }).then((response) => {
	166	+ const blob = new Blob([response.data]);
	167	+
	168	+ const isSafari = /^((?!chrome\|android).)*safari/i.test(navigator.userAgent);
	169	+
	170	+ if (isSafari) {
	171	+ FileSaver.saveAs(blob, item.real_file_nm);
	172	+ } else {
	173	+ const url = window.URL.createObjectURL(blob);
	174	+ const a = document.createElement('a');
	175	+ a.style.display = 'none';
	176	+ a.href = url;
	177	+ a.download = item.real_file_nm;
	178	+ document.body.appendChild(a);
	179	+ a.click();
	180	+ window.URL.revokeObjectURL(url);
	181	+ }
	182	+
	183	+ this.$router.go(0);
	184	+
	185	+ }).catch(function (error) {
	186	+ console.log('error - ', error)
	187	+ alert('에러발생');
	188	+ });
	189	+ },
	190	+
	191	+ postDelete: function () {
	192	+ const vm = this;
	193	+
	194	+ axios({
	195	+ url: "/post/postDelete.json",
	196	+ method: "post",
	197	+ headers: {
	198	+ "Content-Type": "application/json; charset=UTF-8",
	199	+ },
	200	+ data: vm.post
	201	+ }).then(function (response) {
	202	+ console.log("postDelete - response : ", response.data);
	203	+ let result = response.data;
	204	+ if (result > 0) {
	205	+ alert("삭제가 완료 되었습니다.");
	206	+ vm.postSelectListPage();
	207	+ } else {
	208	+ alert("삭제실패, 다시 시도 해주세요.");
	209	+ }
	210	+ }).catch(function (error) {
	211	+ console.log("postDelete - error : ", error);
	212	+ alert("삭제 오류, 관리자에게 문의해주세요.");
	213	+ });
	214	+ },
	215	+
	216	+ postSelectListPage: function () {
	217	+ this.$router.push({ path: '/adm/techSelectList.page' });
	218	+ },
	219	+
	220	+ postUpdatePage: function () {
	221	+ this.$router.push({ path: '/adm/techUpdate.page', query: { 'post_id': this.post.post_id, 'file_id': this.post.file_id } });
	222	+ },
44	223	},
45	224	watch: {},
46	225	computed: {},
47	226	components: {},
48	227	mounted() {
	228	+ this.postSelectOne();
49	229	}
50	230	};
51	231	</script>

...	...	@@ -17,8 +17,8 @@
17	17	<tr>
18	18	<th>워킹그룹</th>
19	19	<td>
20		- <select name="" id="">
21		- <option value="null">선택해주세요</option>
	20	+ <select name="" id="" v-model="post.ctgry_nm">
	21	+ <option value=null>선택해주세요</option>
22	22	<option value="WG1">교육과정 표준체계</option>
23	23	<option value="WG2">맞춤학습지원 기능</option>
24	24	<option value="WG3">접근성/UDL</option>
...	...	@@ -66,12 +66,12 @@
66	66	data() {
67	67	return {
68	68	post: {
69		- bbs_id: '0',
	69	+ bbs_id: '4',
70	70	post_title: null,
71	71	post_content: null,
72	72	link_url: null,
73	73	// 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
74		- ctgry_nm: 'policy',
	74	+ ctgry_nm: null,
75	75	},
76	76	fileList: [],
77	77	filecount: 0,
...	...	@@ -143,12 +143,18 @@
143	143	oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
144	144	// 스마트에디터의 iframe에 있는 내용을 textarea로.
145	145	this.post.post_content = document.getElementById("smart").value;
146		- console.log(document.getElementById("smart").value);
147		- console.log(this.post.post_content);
148		- console.log(COMMON_UTIL.isEmpty(this.post.post_title));
	146	+
	147	+ // if(this.post.ctgry_nm = 'null') {
	148	+ // this.post.ctgry_nm = null;
	149	+ // }
149	150
150	151	if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
151	152	alert("제목을 입력해주세요.");
	153	+ return false;
	154	+ }
	155	+
	156	+ if (COMMON_UTIL.isEmpty(this.post.ctgry_nm) === false) {
	157	+ alert("워킹그룹을 선택해주세요.");
152	158	return false;
153	159	}
154	160
...	...	@@ -176,7 +182,7 @@
176	182
177	183	//게시글 리스트로 이동
178	184	postSelectListPage: function () {
179		- this.$router.push({ path: '/adm/dataSelectList.page' });
	185	+ this.$router.push({ path: '/adm/wgSelectList.page' });
180	186	},
181	187
182	188	// 파일 업로드 커스텀을 위한 함수

...	...	@@ -11,8 +11,8 @@
11	11	<div class="top-bar">
12	12	<div class="flex-end">
13	13	<div class="data-select">
14		- <select name="" id="">
15		- <option value="null">워킹그룹</option>
	14	+ <select name="" id="" v-model="postListSearch.ctgry_nm">
	15	+ <option value=null >워킹그룹</option>
16	16	<option value="WG1">교육과정 표준체계</option>
17	17	<option value="WG2">맞춤학습지원 기능</option>
18	18	<option value="WG3">접근성/UDL</option>
...	...	@@ -50,26 +50,34 @@
50	50	<thead>
51	51	<tr>
52	52	<th style="width:5%">no</th>
53		- <th style="width:10%">워킹그룹</th>
54		- <th style="width:55%">제목</th>
	53	+ <th style="width:18%">워킹그룹</th>
	54	+ <th style="width:50%">제목</th>
55	55	<th style="width:10%">작성자</th>
56	56	<th style="width:10%">작성일자</th>
57		- <th style="width:10%">조회수</th>
	57	+ <th style="width:7%">조회수</th>
58	58	</tr>
59	59	</thead>
60	60	<tbody>
61	61	<tr v-for="(item, idx) in postList" :key="idx" @click="postSelectOnePage(item)">
62	62	<td>{{ postIdx - idx }}</td>
63		- <td v-if="item.ctgry_nm === 'policy'"><span class="category-zone">정책자료</span></td>
64		- <td v-else-if="item.ctgry_nm === 'research'"><span class="category-zone">연구자료</span></td>
65		- <td v-else><span class="category-zone">가이드라인</span></td>
	63	+ <td v-if="item.ctgry_nm === 'WG1'"><span class="category-zone">(WG1)교육과정 표준체계</span></td>
	64	+ <td v-else-if="item.ctgry_nm === 'WG2'"><span class="category-zone">(WG2)맞춤학습지원 기능</span></td>
	65	+ <td v-else-if="item.ctgry_nm === 'WG3'"><span class="category-zone">(WG3)접근성/UDL</span></td>
	66	+ <td v-else-if="item.ctgry_nm === 'WG4'"><span class="category-zone">(WG4)클라우드 보안인증</span></td>
	67	+ <td v-else-if="item.ctgry_nm === 'WG5'"><span class="category-zone">(WG5)통합인증체계</span></td>
	68	+ <td v-else-if="item.ctgry_nm === 'WG6'"><span class="category-zone">(WG6)학습이력데이터/통합대시보드</span></td>
	69	+ <td v-else-if="item.ctgry_nm === 'WG7'"><span class="category-zone">(WG7)AI 트레이닝 데이터</span></td>
	70	+ <td v-else-if="item.ctgry_nm === 'WG8'"><span class="category-zone">(WG8)국가수준 학습분석</span></td>
	71	+ <td v-else-if="item.ctgry_nm === 'WG9'"><span class="category-zone">(WG9)학교 인프라</span></td>
	72	+ <td v-else-if="item.ctgry_nm === 'WG10'"><span class="category-zone">(WG10)서비스 품질관리</span></td>
	73	+ <td v-else><span class="category-zone">(WG11)서비스 정책</span></td>
66	74	<td>{{ item.post_title }}</td>
67	75	<td>{{ item.rgtr_id }}</td>
68	76	<td>{{ yyyymmdd(item.reg_dt) }}</td>
69	77	<td>{{ item.view_cnt }}</td>
70	78	</tr>
71	79	<tr v-if="postListCount == 0">
72		- <td style="font-size: 20px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
	80	+ <td style="font-size: 20px;" colspan="6">검색조건에 해당하는 데이터가 없습니다.</td>
73	81	</tr>
74	82	</tbody>
75	83	</table>
...	...	@@ -98,7 +106,7 @@
98	106	perPage: 10,
99	107	searchType: null,
100	108	searchText: null,
101		- bbs_id: '0',
	109	+ bbs_id: '4',
102	110	ctgry_nm: null
103	111	},
104	112	postList: [],
...	...	@@ -110,6 +118,10 @@
110	118	postSelectList: function () {
111	119	const vm = this;
112	120
	121	+ if(vm.postListSearch.ctgry_nm === 'null') {
	122	+ vm.postListSearch.ctgry_nm = null
	123	+ }
	124	+
113	125	axios({
114	126	url: '/post/postSelectList.json',
115	127	method: 'post',
...	...	@@ -139,14 +151,6 @@
139	151	postInsertPage: function () {
140	152	this.$router.push({ path: '/adm/wgInsert.page', query: {} })
141	153	},
142		-
143		- ctgry: function(e) {
144		- this.postListSearch.ctgry_nm = e.target.value;
145		- if(this.postListSearch.ctgry_nm === 'on') {
146		- this.postListSearch.ctgry_nm = null
147		- }
148		- this.postSelectList();
149		- }
150	154	},
151	155	watch: {},
152	156	computed: {},

...	...	@@ -14,9 +14,17 @@
14	14	<td class="title-zone" colspan="2">
15	15	<p class="flex">
16	16	<span class="post-title">{{ post.post_title }}</span>
17		- <span v-if="post.ctgry_nm === 'policy'" class="category-zone">정책자료</span>
18		- <span v-else-if="post.ctgry_nm === 'research'" class="category-zone">연구자료</span>
19		- <span v-else class="category-zone">가이드라인</span>
	17	+ <span v-if="post.ctgry_nm === 'WG1'" class="category-zone">(WG1)교육과정 표준체계</span>
	18	+ <span v-else-if="post.ctgry_nm === 'WG2'" class="category-zone">(WG2)맞춤학습지원 기능</span>
	19	+ <span v-else-if="post.ctgry_nm === 'WG3'" class="category-zone">(WG3)접근성/UDL</span>
	20	+ <span v-else-if="post.ctgry_nm === 'WG4'" class="category-zone">(WG4)클라우드 보안인증</span>
	21	+ <span v-else-if="post.ctgry_nm === 'WG5'" class="category-zone">(WG5)통합인증체계</span>
	22	+ <span v-else-if="post.ctgry_nm === 'WG6'" class="category-zone">(WG6)학습이력데이터/통합대시보드</span>
	23	+ <span v-else-if="post.ctgry_nm === 'WG7'" class="category-zone">(WG7)AI 트레이닝 데이터</span>
	24	+ <span v-else-if="post.ctgry_nm === 'WG8'" class="category-zone">(WG8)국가수준 학습분석</span>
	25	+ <span v-else-if="post.ctgry_nm === 'WG9'" class="category-zone">(WG9)학교 인프라</span>
	26	+ <span v-else-if="post.ctgry_nm === 'WG10'" class="category-zone">(WG10)서비스 품질관리</span>
	27	+ <span v-else class="category-zone">(WG11)서비스 정책</span>
20	28	</p>
21	29	<p class="flex-end write-info"><span class="writer">작성자</span>
22	30	<span>{{ post.rgtr_id}}</span>
...	...	@@ -213,11 +221,11 @@
213	221	},
214	222
215	223	postSelectListPage: function () {
216		- this.$router.push({ path: '/adm/dataSelectList.page' });
	224	+ this.$router.push({ path: '/adm/wgSelectList.page' });
217	225	},
218	226
219	227	postUpdatePage: function () {
220		- this.$router.push({ path: '/adm/dataUpdate.page', query: { 'post_id': this.post.post_id, 'file_id': this.post.file_id } });
	228	+ this.$router.push({ path: '/adm/wgUpdate.page', query: { 'post_id': this.post.post_id, 'file_id': this.post.file_id } });
221	229	},
222	230	},
223	231	watch: {},

...	...	@@ -70,6 +70,17 @@
70	70	export default {
71	71	data() {
72	72	return {
	73	+ postListSearch: {
	74	+ currentPage: 1,
	75	+ perPage: 10,
	76	+ searchType: null,
	77	+ searchText: null,
	78	+ ctgry_nm: 'policy',
	79	+ bbs_id: '3'
	80	+ },
	81	+ postList: [],
	82	+ postListCount: 0,
	83	+ postIdx: 0,
73	84	}
74	85	},
75	86	methods: {

Delete comment