Commit @65f54c3ae79adb5d08ce2d7454ab4d606196f43d

19d7b4c

65f54c3

client/resources/css/Main.css

--- client/resources/css/Main.css

+++ client/resources/css/Main.css


   overflow: hidden;
   text-align: left;
 }
-
-/* 게시글 상단고정 css */
-
-.first-row {
-  background-color: #e8f4ff; /* 원하는 색상으로 변경하세요 */
-}

19d7b4c

65f54c3

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


   border-bottom: 1px solid #007aff;
 }
 
-.title-zone > p{
+.title-zone > p {
   margin-bottom: 10px;
 }
 
-.title-zone > div > p{
+.title-zone > div > p {
   margin-left: 10px;
 }
 

   width: 100%;
 }
 
-.viewer iframe{
+.viewer iframe {
   width: 100%;
-}
+}
+
+/* 게시글 상단고정 css */
+
+.first-row {
+  background-color: #e8f4ff;
+}
+
+.sort-wrap li {
+  font-weight: 600;
+  font-family: "Pretendard-Regular";
+
+  color: #000000;
+}
+.sort-wrap li.active {
+  color: #333;
+  font-weight: 600;
+  font-family: "Pretendard-Regular";
+}

19d7b4c

65f54c3

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

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

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


                             </div>
                             <div class="sort-wrap" style="grid-column: 1 / span 2;">
                                 <ul class="flex-end">
-                                    <li>최신순</li>
-                                    <li>조회수순</li>
+                                    <li v-for="(item, index) in sorts" :key="index"
+                                        :class="{ active: activeIndex === index }" @click="changeColor(index)">
+                                        {{ item }}
+                                    </li>
                                 </ul>
                             </div>
                         </div>

             postIdx: 0,
             categoryName: '전체',
             route: useRoute(),
+            // 최신순 조회순
+            sorts: ['최신순', '조회수순'],
+            activeIndex: 0,
 
             // 자료실 버튼
             buttons: Array(3).fill(),

         }
     },
     methods: {
-
+        //  최신순 조회순
+        changeColor(index) {
+            this.activeIndex = index;
+        },
         clickButton(index) {
             this.buttons.forEach((button, idx) => {
                 if (idx === index) {

19d7b4c

65f54c3

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

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

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


                     <img src="../../../../resources/jpg/tech-logo.png" alt="">
                     <h1>기술문서</h1>
                 </div>
+                <!-- 최신순 조회순 -->
                 <div class="sort-wrap" style="grid-column: 1 / span 2;">
                     <ul class="flex-end">
-                        <li>최신순</li>
-                        <li>조회수순</li>
+                        <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
+                            @click="changeColor(index)">
+                            {{ item }}
+                        </li>
                     </ul>
                 </div>
                 <ul class="tech-bos">

             postList: [],
             postListCount: 0,
             postIdx: 0,
+            // 최신순 조회순
+            sorts: ['최신순', '조회수순'],
+            activeIndex: 0,
         }
     },
     methods: {
+        //  최신순 조회순
+        changeColor(index) {
+            this.activeIndex = index;
+        },
         postSelectOnePage(item) {
             const vm = this;
 

19d7b4c

65f54c3

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

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

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


                     <img src="../../../../resources/jpg/info-logo.png" alt="홍보뉴스 아이콘">
                     <h1>홍보/뉴스</h1>
                 </div>
+                <!-- 최신순 조회순 -->
                 <div class="sort-wrap" style="grid-column: 1 / span 2;">
                     <ul class="flex-end">
-                        <li>최신순</li>
-                        <li>조회수순</li>
+                        <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
+                            @click="changeColor(index)">
+                            {{ item }}
+                        </li>
                     </ul>
                 </div>
                 <ul class="news-bos">

             realContent: null,
             fileList: [],
             realFileList: [],
+            // 최신순 조회순
+            sorts: ['최신순', '조회수순'],
+            activeIndex: 0,
         }
     },
     methods: {
+        //  최신순 조회순
+        changeColor(index) {
+            this.activeIndex = index;
+        },
         openModal: function (item) {
             const vm = this;
 

                 },
                 data: { 'post_id': item.post_id, 'bbs_id': item.bbs_id }
             }).then(function (response) {
-                    vm.findFiles(item)
-                    vm.isModalOpen = true;
-                    vm.videoUrl = item.post_content;
-                    vm.urlHTML(vm.videoUrl)
-                    vm.modalItem = item;
-                    vm.realContent = item.real_content;
+                vm.findFiles(item)
+                vm.isModalOpen = true;
+                vm.videoUrl = item.post_content;
+                vm.urlHTML(vm.videoUrl)
+                vm.modalItem = item;
+                vm.realContent = item.real_content;
             }).catch(function (error) {
                 alert("홍보/뉴스 상세보기 오류, 관리자에게 문의바랍니다.");
             })

19d7b4c

65f54c3

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

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

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


                         <input class="button--submit" value="검색" type="submit" @click="postSelectList()">
                     </div>
                 </div>
+                <!-- 최신순 조회순 -->
                 <div class="sort-wrap" style="grid-column: 1 / span 2;">
                     <ul class="flex-end">
-                        <li>최신순</li>
-                        <li>조회수순</li>
+                        <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
+                            @click="changeColor(index)">
+                            {{ item }}
+                        </li>
                     </ul>
                 </div>
                 <div class="noti-sec">

             },
             postList: [],
             postListCount: 0,
-            postIdx: 0
+            postIdx: 0,
+            // 최신순 조회순
+            sorts: ['최신순', '조회수순'],
+            activeIndex: 0,
         }
     },
     methods: {
+        //  최신순 조회순
+        changeColor(index) {
+            this.activeIndex = index;
+        },
         postSelectList: function () {
             const vm = this;
 

...	...	@@ -2956,9 +2956,3 @@
2956	2956	overflow: hidden;
2957	2957	text-align: left;
2958	2958	}
2959		-
2960		-/* 게시글 상단고정 css */
2961		-
2962		-.first-row {
2963		- background-color: #e8f4ff; /* 원하는 색상으로 변경하세요 */
2964		-}

...	...	@@ -120,11 +120,11 @@
120	120	border-bottom: 1px solid #007aff;
121	121	}
122	122
123		-.title-zone > p{
	123	+.title-zone > p {
124	124	margin-bottom: 10px;
125	125	}
126	126
127		-.title-zone > div > p{
	127	+.title-zone > div > p {
128	128	margin-left: 10px;
129	129	}
130	130
...	...	@@ -408,6 +408,24 @@
408	408	width: 100%;
409	409	}
410	410
411		-.viewer iframe{
	411	+.viewer iframe {
412	412	width: 100%;
413		-} (No newline at end of file)
	413	+}
	414	+
	415	+/* 게시글 상단고정 css */
	416	+
	417	+.first-row {
	418	+ background-color: #e8f4ff;
	419	+}
	420	+
	421	+.sort-wrap li {
	422	+ font-weight: 600;
	423	+ font-family: "Pretendard-Regular";
	424	+
	425	+ color: #000000;
	426	+}
	427	+.sort-wrap li.active {
	428	+ color: #333;
	429	+ font-weight: 600;
	430	+ font-family: "Pretendard-Regular";
	431	+}

...	...	@@ -61,8 +61,10 @@
61	61	</div>
62	62	<div class="sort-wrap" style="grid-column: 1 / span 2;">
63	63	<ul class="flex-end">
64		- <li>최신순</li>
65		- <li>조회수순</li>
	64	+ <li v-for="(item, index) in sorts" :key="index"
	65	+ :class="{ active: activeIndex === index }" @click="changeColor(index)">
	66	+ {{ item }}
	67	+ </li>
66	68	</ul>
67	69	</div>
68	70	</div>
...	...	@@ -128,6 +130,9 @@
128	130	postIdx: 0,
129	131	categoryName: '전체',
130	132	route: useRoute(),
	133	+ // 최신순 조회순
	134	+ sorts: ['최신순', '조회수순'],
	135	+ activeIndex: 0,
131	136
132	137	// 자료실 버튼
133	138	buttons: Array(3).fill(),
...	...	@@ -148,7 +153,10 @@
148	153	}
149	154	},
150	155	methods: {
151		-
	156	+ // 최신순 조회순
	157	+ changeColor(index) {
	158	+ this.activeIndex = index;
	159	+ },
152	160	clickButton(index) {
153	161	this.buttons.forEach((button, idx) => {
154	162	if (idx === index) {

...	...	@@ -6,10 +6,13 @@
6	6	<img src="../../../../resources/jpg/tech-logo.png" alt="">
7	7	<h1>기술문서</h1>
8	8	</div>
	9	+ <!-- 최신순 조회순 -->
9	10	<div class="sort-wrap" style="grid-column: 1 / span 2;">
10	11	<ul class="flex-end">
11		- <li>최신순</li>
12		- <li>조회수순</li>
	12	+ <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
	13	+ @click="changeColor(index)">
	14	+ {{ item }}
	15	+ </li>
13	16	</ul>
14	17	</div>
15	18	<ul class="tech-bos">
...	...	@@ -261,9 +264,16 @@
261	264	postList: [],
262	265	postListCount: 0,
263	266	postIdx: 0,
	267	+ // 최신순 조회순
	268	+ sorts: ['최신순', '조회수순'],
	269	+ activeIndex: 0,
264	270	}
265	271	},
266	272	methods: {
	273	+ // 최신순 조회순
	274	+ changeColor(index) {
	275	+ this.activeIndex = index;
	276	+ },
267	277	postSelectOnePage(item) {
268	278	const vm = this;
269	279

...	...	@@ -6,10 +6,13 @@
6	6	<img src="../../../../resources/jpg/info-logo.png" alt="홍보뉴스 아이콘">
7	7	<h1>홍보/뉴스</h1>
8	8	</div>
	9	+ <!-- 최신순 조회순 -->
9	10	<div class="sort-wrap" style="grid-column: 1 / span 2;">
10	11	<ul class="flex-end">
11		- <li>최신순</li>
12		- <li>조회수순</li>
	12	+ <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
	13	+ @click="changeColor(index)">
	14	+ {{ item }}
	15	+ </li>
13	16	</ul>
14	17	</div>
15	18	<ul class="news-bos">
...	...	@@ -82,9 +85,16 @@
82	85	realContent: null,
83	86	fileList: [],
84	87	realFileList: [],
	88	+ // 최신순 조회순
	89	+ sorts: ['최신순', '조회수순'],
	90	+ activeIndex: 0,
85	91	}
86	92	},
87	93	methods: {
	94	+ // 최신순 조회순
	95	+ changeColor(index) {
	96	+ this.activeIndex = index;
	97	+ },
88	98	openModal: function (item) {
89	99	const vm = this;
90	100
...	...	@@ -96,12 +106,12 @@
96	106	},
97	107	data: { 'post_id': item.post_id, 'bbs_id': item.bbs_id }
98	108	}).then(function (response) {
99		- vm.findFiles(item)
100		- vm.isModalOpen = true;
101		- vm.videoUrl = item.post_content;
102		- vm.urlHTML(vm.videoUrl)
103		- vm.modalItem = item;
104		- vm.realContent = item.real_content;
	109	+ vm.findFiles(item)
	110	+ vm.isModalOpen = true;
	111	+ vm.videoUrl = item.post_content;
	112	+ vm.urlHTML(vm.videoUrl)
	113	+ vm.modalItem = item;
	114	+ vm.realContent = item.real_content;
105	115	}).catch(function (error) {
106	116	alert("홍보/뉴스 상세보기 오류, 관리자에게 문의바랍니다.");
107	117	})

...	...	@@ -20,10 +20,13 @@
20	20	<input class="button--submit" value="검색" type="submit" @click="postSelectList()">
21	21	</div>
22	22	</div>
	23	+ <!-- 최신순 조회순 -->
23	24	<div class="sort-wrap" style="grid-column: 1 / span 2;">
24	25	<ul class="flex-end">
25		- <li>최신순</li>
26		- <li>조회수순</li>
	26	+ <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
	27	+ @click="changeColor(index)">
	28	+ {{ item }}
	29	+ </li>
27	30	</ul>
28	31	</div>
29	32	<div class="noti-sec">
...	...	@@ -76,10 +79,17 @@
76	79	},
77	80	postList: [],
78	81	postListCount: 0,
79		- postIdx: 0
	82	+ postIdx: 0,
	83	+ // 최신순 조회순
	84	+ sorts: ['최신순', '조회수순'],
	85	+ activeIndex: 0,
80	86	}
81	87	},
82	88	methods: {
	89	+ // 최신순 조회순
	90	+ changeColor(index) {
	91	+ this.activeIndex = index;
	92	+ },
83	93	postSelectList: function () {
84	94	const vm = this;
85	95

Delete comment