Commit @338f9f4d761c15b90cb8d07739aba65966d8402d

이세현 2023-11-12

231112 이세현 사용자 홍보/뉴스

@338f9f4d761c15b90cb8d07739aba65966d8402d

efb8ebe

338f9f4

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

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

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


         <div class="content-box">
             <div class="title-wrap">
                 <div class="flex-start">
-                    <img src="../../../../resources/jpg/info-logo.png" alt="공지사항 아이콘" class="title-icon">
+                    <img src="../../../../resources/jpg/info-logo.png" alt="홍보뉴스 아이콘" class="title-icon">
                     <h2 class="main-title">홍보 / news</h2>
                 </div>
             </div>

efb8ebe

338f9f4

client/views/pages/user/community/News.vue

--- client/views/pages/user/community/News.vue

+++ client/views/pages/user/community/News.vue


         <div class="w1400">
             <div class="news">
                 <div class="page-logo flex-start">
-                    <img src="../../../../resources/jpg/info-logo.png" alt="">
+                    <img src="../../../../resources/jpg/info-logo.png" alt="홍보뉴스 아이콘">
                     <h1>홍보/뉴스</h1>
                 </div>
                 <ul class="news-bos">
-                    <li class="news-bos-box">
+                    <li class="news-bos-box" v-for="(item, idx) in postList" :key="idx">
                         <div class="modal-img"
-                            @click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
-                            <img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
+                            @click="openModal(item)">
+                            <img :src="'http://localhost:8088'+ item.file_path +'\\thumbnail_'+ item.file_nm + '.' + item.file_extn_nm" alt="thumbnail" />      
                         </div>
                         <div>
-                            <h3>학교알리미</h3>
+                            <h3>{{ item.post_title }}</h3>
                         </div>
                         <div class="news-box-sed">
                             <p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
                         </div>
                         <div class="news-box-end">
-                            <p>작성자 <span>케리스</span></p>
-                            <p>조회수 <span>100</span></p>
-                        </div>
-                    </li>
-                    <li class="news-bos-box">
-                        <div class="modal-img"
-                            @click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
-                            <img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
-                        </div>
-                        <div>
-                            <h3>학교알리미</h3>
-                        </div>
-                        <div class="news-box-sed">
-                            <p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
-                        </div>
-                        <div class="news-box-end">
-                            <p>작성자 <span>케리스</span></p>
-                            <p>조회수 <span>100</span></p>
-                        </div>
-                    </li>
-                    <li class="news-bos-box">
-                        <div class="modal-img"
-                            @click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
-                            <img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
-                        </div>
-                        <div>
-                            <h3>학교알리미</h3>
-                        </div>
-                        <div class="news-box-sed">
-                            <p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
-                        </div>
-                        <div class="news-box-end">
-                            <p>작성자 <span>케리스</span></p>
-                            <p>조회수 <span>100</span></p>
+                            <p>작성자 <span>{{ item.rgtr_id }}</span></p>
+                            <p>조회수 <span>{{ item.view_cnt }}</span></p>
                         </div>
                     </li>
                 </ul>
             </div>
-            <div v-if="isModalOpen" class="modal">
+            <div v-show="isModalOpen" class="modal">
                 <div class="modal-content">
-                    <iframe width="100%" height="80%" :src="videoUrl" title="YouTube video player" frameborder="0"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                        allowfullscreen></iframe>
+                    <div ref="modalInner"></div>
                     <!-- 모달 닫기 버튼 -->
                     <button @click="closeModal">닫기</button>
                 </div>

 </template>
 
 <script>
+import axios from 'axios';
+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
+
 export default {
     data() {
         return {
             isModalOpen: false,
             videoUrl: '',
+            postList: [],
+            postListCount: 0,
+            postIdx: 0,
+            postListSearch: {
+                currentPage: 1,
+                perPage: 10,
+                searchType: null,
+                searchText: null,
+                bbs_id : '1'
+            },
         }
     },
     methods: {
-        openModal(url) {
-            this.videoUrl = url;
+        openModal: function(item){
             this.isModalOpen = true;
+            this.videoUrl = item.post_content;
+            this.urlHTML(this.videoUrl)
         },
+
+        urlHTML: function(content) {
+            let divRef = this.$refs['modalInner'];
+            divRef.innerHTML = content;
+        },
+        
         closeModal() {
             this.isModalOpen = false;
         },
+
+        postSelectList: function() {
+            const vm = this;
+            
+            axios({
+                url: '/post/newsSelectListForMain.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);
+        },
+
     },
     watch: {
 

 
     },
     mounted() {
-        console.log('Login mounted');
+        console.log('User News mounted');
+        this.postSelectList();
     }
 }
 </script>

efb8ebe

338f9f4

client/views/pages/user/main/Main.vue

--- client/views/pages/user/main/Main.vue

+++ client/views/pages/user/main/Main.vue


             return COMMON_UTIL.yyyymmdd(date);
         },
         openModal: function(item){
-            console.log('item!!', item);
-
             this.isModalOpen = true;
             this.videoUrl = item.post_content;
             this.urlHTML(this.videoUrl)
         },
         urlHTML: function(content) {
-            console.log("content: ", content);
             /* this.$nextTick(() => {
                 let divRef = this.$refs['modalInner'];
                 if (divRef) {

             }); */
             let divRef = this.$refs['modalInner'];
             divRef.innerHTML = content;
-
-            console.log(divRef);
-            // divUrl.innerTEXT(content);
         }
     },
     watch: {

Add a comment

Open 0
Closed 0

List

...	...	@@ -465,14 +465,11 @@
465	465	return COMMON_UTIL.yyyymmdd(date);
466	466	},
467	467	openModal: function(item){
468		- console.log('item!!', item);
469		-
470	468	this.isModalOpen = true;
471	469	this.videoUrl = item.post_content;
472	470	this.urlHTML(this.videoUrl)
473	471	},
474	472	urlHTML: function(content) {
475		- console.log("content: ", content);
476	473	/* this.$nextTick(() => {
477	474	let divRef = this.$refs['modalInner'];
478	475	if (divRef) {
...	...	@@ -481,9 +478,6 @@
481	478	}); */
482	479	let divRef = this.$refs['modalInner'];
483	480	divRef.innerHTML = content;
484		-
485		- console.log(divRef);
486		- // divUrl.innerTEXT(content);
487	481	}
488	482	},
489	483	watch: {

...	...	@@ -3,7 +3,7 @@
3	3	<div class="content-box">
4	4	<div class="title-wrap">
5	5	<div class="flex-start">
6		- <img src="../../../../resources/jpg/info-logo.png" alt="공지사항 아이콘" class="title-icon">
	6	+ <img src="../../../../resources/jpg/info-logo.png" alt="홍보뉴스 아이콘" class="title-icon">
7	7	<h2 class="main-title">홍보 / news</h2>
8	8	</div>
9	9	</div>

...	...	@@ -3,65 +3,31 @@
3	3	<div class="w1400">
4	4	<div class="news">
5	5	<div class="page-logo flex-start">
6		- <img src="../../../../resources/jpg/info-logo.png" alt="">
	6	+ <img src="../../../../resources/jpg/info-logo.png" alt="홍보뉴스 아이콘">
7	7	<h1>홍보/뉴스</h1>
8	8	</div>
9	9	<ul class="news-bos">
10		- <li class="news-bos-box">
	10	+ <li class="news-bos-box" v-for="(item, idx) in postList" :key="idx">
11	11	<div class="modal-img"
12		- @click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
13		- <img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
	12	+ @click="openModal(item)">
	13	+ <img :src="'http://localhost:8088'+ item.file_path +'\\thumbnail_'+ item.file_nm + '.' + item.file_extn_nm" alt="thumbnail" />
14	14	</div>
15	15	<div>
16		- <h3>학교알리미</h3>
	16	+ <h3>{{ item.post_title }}</h3>
17	17	</div>
18	18	<div class="news-box-sed">
19	19	<p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
20	20	</div>
21	21	<div class="news-box-end">
22		- <p>작성자 <span>케리스</span></p>
23		- <p>조회수 <span>100</span></p>
24		- </div>
25		- </li>
26		- <li class="news-bos-box">
27		- <div class="modal-img"
28		- @click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
29		- <img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
30		- </div>
31		- <div>
32		- <h3>학교알리미</h3>
33		- </div>
34		- <div class="news-box-sed">
35		- <p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
36		- </div>
37		- <div class="news-box-end">
38		- <p>작성자 <span>케리스</span></p>
39		- <p>조회수 <span>100</span></p>
40		- </div>
41		- </li>
42		- <li class="news-bos-box">
43		- <div class="modal-img"
44		- @click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
45		- <img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
46		- </div>
47		- <div>
48		- <h3>학교알리미</h3>
49		- </div>
50		- <div class="news-box-sed">
51		- <p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
52		- </div>
53		- <div class="news-box-end">
54		- <p>작성자 <span>케리스</span></p>
55		- <p>조회수 <span>100</span></p>
	22	+ <p>작성자 <span>{{ item.rgtr_id }}</span></p>
	23	+ <p>조회수 <span>{{ item.view_cnt }}</span></p>
56	24	</div>
57	25	</li>
58	26	</ul>
59	27	</div>
60		- <div v-if="isModalOpen" class="modal">
	28	+ <div v-show="isModalOpen" class="modal">
61	29	<div class="modal-content">
62		- <iframe width="100%" height="80%" :src="videoUrl" title="YouTube video player" frameborder="0"
63		- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
64		- allowfullscreen></iframe>
	30	+ <div ref="modalInner"></div>
65	31	<!-- 모달 닫기 버튼 -->
66	32	<button @click="closeModal">닫기</button>
67	33	</div>
...	...	@@ -71,21 +37,66 @@
71	37	</template>
72	38
73	39	<script>
	40	+import axios from 'axios';
	41	+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
	42	+
74	43	export default {
75	44	data() {
76	45	return {
77	46	isModalOpen: false,
78	47	videoUrl: '',
	48	+ postList: [],
	49	+ postListCount: 0,
	50	+ postIdx: 0,
	51	+ postListSearch: {
	52	+ currentPage: 1,
	53	+ perPage: 10,
	54	+ searchType: null,
	55	+ searchText: null,
	56	+ bbs_id : '1'
	57	+ },
79	58	}
80	59	},
81	60	methods: {
82		- openModal(url) {
83		- this.videoUrl = url;
	61	+ openModal: function(item){
84	62	this.isModalOpen = true;
	63	+ this.videoUrl = item.post_content;
	64	+ this.urlHTML(this.videoUrl)
85	65	},
	66	+
	67	+ urlHTML: function(content) {
	68	+ let divRef = this.$refs['modalInner'];
	69	+ divRef.innerHTML = content;
	70	+ },
	71	+
86	72	closeModal() {
87	73	this.isModalOpen = false;
88	74	},
	75	+
	76	+ postSelectList: function() {
	77	+ const vm = this;
	78	+
	79	+ axios({
	80	+ url: '/post/newsSelectListForMain.json',
	81	+ method: 'post',
	82	+ hearder: {
	83	+ 'Content-Type': "application/json; charset=UTF-8",
	84	+ },
	85	+ data: vm.postListSearch
	86	+ }).then(function(response) {
	87	+ vm.postList = response.data.postSelectList;
	88	+ vm.postListCount = response.data.postSelectListCount;
	89	+ vm.postIdx = vm.postListCount - (vm.postListSearch.currentPage - 1) * vm.postListSearch.perPage;
	90	+ }).catch(function(error) {
	91	+ alert('홍보/뉴스 목록 조회 오류, 관리자에게 문의하세요.');
	92	+ })
	93	+ },
	94	+
	95	+ //날짜 시,분,초 자르기
	96	+ yyyymmdd: function (date) {
	97	+ return COMMON_UTIL.yyyymmdd(date);
	98	+ },
	99	+
89	100	},
90	101	watch: {
91	102
...	...	@@ -94,7 +105,8 @@
94	105
95	106	},
96	107	mounted() {
97		- console.log('Login mounted');
	108	+ console.log('User News mounted');
	109	+ this.postSelectList();
98	110	}
99	111	}
100	112	</script>

Delete comment