Commit @3bc623b0e4cb213b6db83f30b3443722c57d3d06

김하영 2023-12-07

231207김하영 기술문서 카테고리

@3bc623b0e4cb213b6db83f30b3443722c57d3d06

5a2d59d

3bc623b

client/resources/css/Main.css

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

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


 
   color: #848484;
 }
-.tech-search-box {
+/* .tech-search-box{
+  padding: 3rem 0;
+} */
+.tech-box-category{
+  width: 100%;
   display: grid;
-  /* border: 1px solid red; */
-
-  justify-content: end;
-  grid-template-columns: 30%;
+  padding: 3rem 0;
+  grid-template-columns: 1fr 30%;
+  justify-content: space-between;
+}
+.tech-category{
+  padding: 1rem 0;
 }
 
 /* --------------------------------------------------------------------------- */

5a2d59d

3bc623b

client/resources/css/responsive.css

--- client/resources/css/responsive.css

+++ client/resources/css/responsive.css


   .tech-box-sec-h3 h3 {
     font-size: 1.5rem;
   }
+  .tech-category .category-bar {
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    justify-content: center;
+  }
+  .tech-category .category-bar div{
+    padding: 1.5rem 0;
+  }
+  .tech-box-category{
+    grid-template-columns: 1fr;
+  }
 
   /* 자료집 */
   .data-banner {

5a2d59d

3bc623b

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="tech-search-box">
+                <div class="tech-box-category">
 
-                    <div class="data-wrap-search">
-                        <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild"
-                            class="data-table-search">
-                            <option v-for="(item, idx) in option" :key="idx" :value=item.value>
-                                {{ item.name }}
-                            </option>
-                        </select>
-                        <div class="input-group">
-                            <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText"
-                                @keyup.enter="postSelectList()">
-                            <input class="button--submit data-button-sum" value="검색" type="submit"
-                                @click="postSelectList()">
+
+                    <div class="tech-category">
+                        <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>
+                                <input type="radio" name="category" id="service" value="service" style="display:none"
+                                    @click="ctgry($event)">
+                                <label for="service" class="category">서비스</label>
+                            </div>
+                        </div>
+
+                    </div>
+
+
+                    <div class="tech-search-box">
+
+                        <div class="data-wrap-search">
+                            <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild"
+                                class="data-table-search">
+                                <option v-for="(item, idx) in option" :key="idx" :value=item.value>
+                                    {{ item.name }}
+                                </option>
+                            </select>
+                            <div class="input-group">
+                                <input type="text" class="input" placeholder="검색어를 입력해주세요."
+                                    v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
+                                <input class="button--submit data-button-sum" value="검색" type="submit"
+                                    @click="postSelectList()">
+                            </div>
                         </div>
                     </div>
-                    <!-- 최신순 조회순 -->
-                    <div class="sort-wrap">
-                        <ul class="flex-end">
-                            <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
-                                @click="changeColor(index)">
-                                {{ item.name }}
-                            </li>
-                        </ul>
-                    </div>
                 </div>
-                <ul class="tech-bos">
-                    <li class="tech-box-sec" v-for="(item, idx) in postList" :key="idx">
+                <!-- 최신순 조회순 -->
+                <div class="sort-wrap">
+                    <ul class="flex-end">
+                        <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
+                            @click="changeColor(index)">
+                            {{ item.name }}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <ul class="tech-bos">
+                <li class="tech-box-sec" v-for="(item, idx) in postList" :key="idx">
+                    <div class="tech-box-sec-h3">
+                        <h3>{{ item.post_title }}</h3>
+                    </div>
+                    <div v-if="item.ctgry_nm === 'api'">
+                        <img src="../../../../resources/jpg/api.png" alt="">
+                    </div>
+                    <div v-if="item.ctgry_nm === 'standard'">
+                        <img src="../../../../resources/jpg/techdocument.png" alt="">
+                    </div>
+                    <div v-if="item.ctgry_nm === 'tech'">
+                        <img src="../../../../resources/jpg/tech.png" alt="">
+                    </div>
+                    <div v-if="item.ctgry_nm === 'service'">
+                        <img src="../../../../resources/jpg/service.png" alt="">
+                    </div>
+                    <div>
+                        <p class="keyword-zone" v-if="item.tech_doc_keyword">
+                            <span v-for="(keyword, keywordIndex) in item.tech_doc_keyword.split(',')" :key="keywordIndex">
+                                {{ keyword }}
+                            </span>
+                        </p>
+                        <div class="flex">
+                            <p class="date">{{ item.tech_doc_dt }}</p>
+                            <p>조회수 <span>{{ item.view_cnt }}</span></p>
+                        </div>
+                    </div>
+                    <div>
+                        <!-- <button class="blue-btn" @click="postSelectOnePage(item)">바로가기</button> -->
+                        <button class="blue-btn"
+                            @click="item.ctgry_nm === 'service' ? serviceEvent(item) : postSelectOnePage(item)">바로가기</button>
+                    </div>
+                </li>
+                <li class="tech-box-sec" v-for="(space, index) in emptySpaces" :key="index">
+                    <div class="tech-box-fillter">
                         <div class="tech-box-sec-h3">
-                            <h3>{{ item.post_title }}</h3>
-                        </div>
-                        <div v-if="item.ctgry_nm === 'api'">
-                            <img src="../../../../resources/jpg/api.png" alt="">
-                        </div>
-                        <div v-if="item.ctgry_nm === 'standard'">
-                            <img src="../../../../resources/jpg/techdocument.png" alt="">
-                        </div>
-                        <div v-if="item.ctgry_nm === 'tech'">
-                            <img src="../../../../resources/jpg/tech.png" alt="">
-                        </div>
-                        <div v-if="item.ctgry_nm === 'service'">
-                            <img src="../../../../resources/jpg/service.png" alt="">
-                        </div>
-                        <div>
-                            <p class="keyword-zone" v-if="item.tech_doc_keyword">
-                                <span v-for="(keyword, keywordIndex) in item.tech_doc_keyword.split(',')"
-                                    :key="keywordIndex">
-                                    {{ keyword }}
-                                </span>
-                            </p>
                             <div class="flex">
-                                <p class="date">{{ item.tech_doc_dt }}</p>
-                                <p>조회수 <span>{{ item.view_cnt }}</span></p>
+                                <h3>&nbsp;</h3>
+                                <p>&nbsp;</p>
                             </div>
+                        </div>
+                        <div class="tech-box-sec-img">
+                            <!-- 이미지자리 -->
+                            &nbsp;
                         </div>
                         <div>
-                            <!-- <button class="blue-btn" @click="postSelectOnePage(item)">바로가기</button> -->
-                            <button class="blue-btn" @click="item.ctgry_nm === 'service' ? serviceEvent(item) : postSelectOnePage(item)">바로가기</button>
+                            <p class="content-detail">&nbsp;</p>
+                            <p class="date">&nbsp;</p>
                         </div>
-                    </li>
-                    <li class="tech-box-sec" v-for="(space, index) in emptySpaces" :key="index">
-                        <div class="tech-box-fillter">
-                            <div class="tech-box-sec-h3">
-                                <div class="flex">
-                                    <h3>&nbsp;</h3>
-                                    <p>&nbsp;</p>
-                                </div>
-                            </div>
-                            <div class="tech-box-sec-img">
-                                <!-- 이미지자리 -->
-                                &nbsp;
-                            </div>
-                            <div>
-                                <p class="content-detail">&nbsp;</p>
-                                <p class="date">&nbsp;</p>
-                            </div>
-                            <div>
-                                <button class="blue-btn" @click="showAlert">바로가기</button>
-                                <!-- <button class="blue-btn" @click="goToPage3">바로가기</button> -->
-                            </div>
+                        <div>
+                            <button class="blue-btn" @click="showAlert">바로가기</button>
+                            <!-- <button class="blue-btn" @click="goToPage3">바로가기</button> -->
                         </div>
-                        <!-- <div class="overlay-text">준비 중 입니다.</div> -->
-                    </li>
-                
-                </ul>
-                <div class="bottom-wrap">
-                    <PaginationButton v-model:currentPage="postListSearch.currentPage" :perPage="postListSearch.perPage"
-                        :totalCount="postListCount" :maxRange="5" :click="postSelectList" />
-                </div>
+                    </div>
+                    <!-- <div class="overlay-text">준비 중 입니다.</div> -->
+                </li>
+
+            </ul>
+            <div class="bottom-wrap">
+                <PaginationButton v-model:currentPage="postListSearch.currentPage" :perPage="postListSearch.perPage"
+                    :totalCount="postListCount" :maxRange="5" :click="postSelectList" />
             </div>
         </div>
     </div>

         },
 
         /**페이지 접속 로그 등록 */
-        pageLogInsert: function() {
+        pageLogInsert: function () {
             const vm = this;
 
             axios({

                 }).then(function (response) {
                     window.location.href = item.link_url;
                 })
-                
+
             }).catch(function (error) {
                 alert("기술문서 상세보기 오류, 관리자에게 문의바랍니다.");
             })

Add a comment

Open 0
Closed 0

List

...	...	@@ -1543,12 +1543,18 @@
1543	1543
1544	1544	color: #848484;
1545	1545	}
1546		-.tech-search-box {
	1546	+/* .tech-search-box{
	1547	+ padding: 3rem 0;
	1548	+} */
	1549	+.tech-box-category{
	1550	+ width: 100%;
1547	1551	display: grid;
1548		- /* border: 1px solid red; */
1549		-
1550		- justify-content: end;
1551		- grid-template-columns: 30%;
	1552	+ padding: 3rem 0;
	1553	+ grid-template-columns: 1fr 30%;
	1554	+ justify-content: space-between;
	1555	+}
	1556	+.tech-category{
	1557	+ padding: 1rem 0;
1552	1558	}
1553	1559
1554	1560	/* --------------------------------------------------------------------------- */

...	...	@@ -273,6 +273,18 @@
273	273	.tech-box-sec-h3 h3 {
274	274	font-size: 1.5rem;
275	275	}
	276	+ .tech-category .category-bar {
	277	+ flex-direction: row;
	278	+ flex-wrap: wrap;
	279	+ margin: 0 auto;
	280	+ justify-content: center;
	281	+ }
	282	+ .tech-category .category-bar div{
	283	+ padding: 1.5rem 0;
	284	+ }
	285	+ .tech-box-category{
	286	+ grid-template-columns: 1fr;
	287	+ }
276	288
277	289	/* 자료집 */
278	290	.data-banner {

...	...	@@ -6,95 +6,131 @@
6	6	<img src="../../../../resources/jpg/tech-logo.png" alt="">
7	7	<h1>기술문서</h1>
8	8	</div>
9		- <div class="tech-search-box">
	9	+ <div class="tech-box-category">
10	10
11		- <div class="data-wrap-search">
12		- <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild"
13		- class="data-table-search">
14		- <option v-for="(item, idx) in option" :key="idx" :value=item.value>
15		- {{ item.name }}
16		- </option>
17		- </select>
18		- <div class="input-group">
19		- <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText"
20		- @keyup.enter="postSelectList()">
21		- <input class="button--submit data-button-sum" value="검색" type="submit"
22		- @click="postSelectList()">
	11	+
	12	+ <div class="tech-category">
	13	+ <div class="category-bar flex-start">
	14	+ <div>
	15	+ <input type="radio" name="category" id="all" :value=null style="display:none" checked
	16	+ @click="ctgry($event)">
	17	+ <label for="all" class="category">전체</label>
	18	+ </div>
	19	+ <div>
	20	+ <input type="radio" name="category" id="policy" value="api" style="display:none"
	21	+ @click="ctgry($event)">
	22	+ <label for="policy" class="category">API</label>
	23	+ </div>
	24	+ <div>
	25	+ <input type="radio" name="category" id="research" value="tech" style="display:none"
	26	+ @click="ctgry($event)">
	27	+ <label for="research" class="category">기술리포트</label>
	28	+ </div>
	29	+ <div>
	30	+ <input type="radio" name="category" id="guide" value="standard" style="display:none"
	31	+ @click="ctgry($event)">
	32	+ <label for="guide" class="category">기술규격문서</label>
	33	+ </div>
	34	+ <div>
	35	+ <input type="radio" name="category" id="service" value="service" style="display:none"
	36	+ @click="ctgry($event)">
	37	+ <label for="service" class="category">서비스</label>
	38	+ </div>
	39	+ </div>
	40	+
	41	+ </div>
	42	+
	43	+
	44	+ <div class="tech-search-box">
	45	+
	46	+ <div class="data-wrap-search">
	47	+ <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild"
	48	+ class="data-table-search">
	49	+ <option v-for="(item, idx) in option" :key="idx" :value=item.value>
	50	+ {{ item.name }}
	51	+ </option>
	52	+ </select>
	53	+ <div class="input-group">
	54	+ <input type="text" class="input" placeholder="검색어를 입력해주세요."
	55	+ v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
	56	+ <input class="button--submit data-button-sum" value="검색" type="submit"
	57	+ @click="postSelectList()">
	58	+ </div>
23	59	</div>
24	60	</div>
25		- <!-- 최신순 조회순 -->
26		- <div class="sort-wrap">
27		- <ul class="flex-end">
28		- <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
29		- @click="changeColor(index)">
30		- {{ item.name }}
31		- </li>
32		- </ul>
33		- </div>
34	61	</div>
35		- <ul class="tech-bos">
36		- <li class="tech-box-sec" v-for="(item, idx) in postList" :key="idx">
	62	+ <!-- 최신순 조회순 -->
	63	+ <div class="sort-wrap">
	64	+ <ul class="flex-end">
	65	+ <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
	66	+ @click="changeColor(index)">
	67	+ {{ item.name }}
	68	+ </li>
	69	+ </ul>
	70	+ </div>
	71	+ </div>
	72	+ <ul class="tech-bos">
	73	+ <li class="tech-box-sec" v-for="(item, idx) in postList" :key="idx">
	74	+ <div class="tech-box-sec-h3">
	75	+ <h3>{{ item.post_title }}</h3>
	76	+ </div>
	77	+ <div v-if="item.ctgry_nm === 'api'">
	78	+ <img src="../../../../resources/jpg/api.png" alt="">
	79	+ </div>
	80	+ <div v-if="item.ctgry_nm === 'standard'">
	81	+ <img src="../../../../resources/jpg/techdocument.png" alt="">
	82	+ </div>
	83	+ <div v-if="item.ctgry_nm === 'tech'">
	84	+ <img src="../../../../resources/jpg/tech.png" alt="">
	85	+ </div>
	86	+ <div v-if="item.ctgry_nm === 'service'">
	87	+ <img src="../../../../resources/jpg/service.png" alt="">
	88	+ </div>
	89	+ <div>
	90	+ <p class="keyword-zone" v-if="item.tech_doc_keyword">
	91	+ <span v-for="(keyword, keywordIndex) in item.tech_doc_keyword.split(',')" :key="keywordIndex">
	92	+ {{ keyword }}
	93	+ </span>
	94	+ </p>
	95	+ <div class="flex">
	96	+ <p class="date">{{ item.tech_doc_dt }}</p>
	97	+ <p>조회수 <span>{{ item.view_cnt }}</span></p>
	98	+ </div>
	99	+ </div>
	100	+ <div>
	101	+ <!-- <button class="blue-btn" @click="postSelectOnePage(item)">바로가기</button> -->
	102	+ <button class="blue-btn"
	103	+ @click="item.ctgry_nm === 'service' ? serviceEvent(item) : postSelectOnePage(item)">바로가기</button>
	104	+ </div>
	105	+ </li>
	106	+ <li class="tech-box-sec" v-for="(space, index) in emptySpaces" :key="index">
	107	+ <div class="tech-box-fillter">
37	108	<div class="tech-box-sec-h3">
38		- <h3>{{ item.post_title }}</h3>
39		- </div>
40		- <div v-if="item.ctgry_nm === 'api'">
41		- <img src="../../../../resources/jpg/api.png" alt="">
42		- </div>
43		- <div v-if="item.ctgry_nm === 'standard'">
44		- <img src="../../../../resources/jpg/techdocument.png" alt="">
45		- </div>
46		- <div v-if="item.ctgry_nm === 'tech'">
47		- <img src="../../../../resources/jpg/tech.png" alt="">
48		- </div>
49		- <div v-if="item.ctgry_nm === 'service'">
50		- <img src="../../../../resources/jpg/service.png" alt="">
51		- </div>
52		- <div>
53		- <p class="keyword-zone" v-if="item.tech_doc_keyword">
54		- <span v-for="(keyword, keywordIndex) in item.tech_doc_keyword.split(',')"
55		- :key="keywordIndex">
56		- {{ keyword }}
57		- </span>
58		- </p>
59	109	<div class="flex">
60		- <p class="date">{{ item.tech_doc_dt }}</p>
61		- <p>조회수 <span>{{ item.view_cnt }}</span></p>
	110	+ <h3> </h3>
	111	+ <p> </p>
62	112	</div>
	113	+ </div>
	114	+ <div class="tech-box-sec-img">
	115	+ <!-- 이미지자리 -->
	116	+
63	117	</div>
64	118	<div>
65		- <!-- <button class="blue-btn" @click="postSelectOnePage(item)">바로가기</button> -->
66		- <button class="blue-btn" @click="item.ctgry_nm === 'service' ? serviceEvent(item) : postSelectOnePage(item)">바로가기</button>
	119	+ <p class="content-detail"> </p>
	120	+ <p class="date"> </p>
67	121	</div>
68		- </li>
69		- <li class="tech-box-sec" v-for="(space, index) in emptySpaces" :key="index">
70		- <div class="tech-box-fillter">
71		- <div class="tech-box-sec-h3">
72		- <div class="flex">
73		- <h3> </h3>
74		- <p> </p>
75		- </div>
76		- </div>
77		- <div class="tech-box-sec-img">
78		- <!-- 이미지자리 -->
79		-
80		- </div>
81		- <div>
82		- <p class="content-detail"> </p>
83		- <p class="date"> </p>
84		- </div>
85		- <div>
86		- <button class="blue-btn" @click="showAlert">바로가기</button>
87		- <!-- <button class="blue-btn" @click="goToPage3">바로가기</button> -->
88		- </div>
	122	+ <div>
	123	+ <button class="blue-btn" @click="showAlert">바로가기</button>
	124	+ <!-- <button class="blue-btn" @click="goToPage3">바로가기</button> -->
89	125	</div>
90		- <!-- <div class="overlay-text">준비 중 입니다.</div> -->
91		- </li>
92		-
93		- </ul>
94		- <div class="bottom-wrap">
95		- <PaginationButton v-model:currentPage="postListSearch.currentPage" :perPage="postListSearch.perPage"
96		- :totalCount="postListCount" :maxRange="5" :click="postSelectList" />
97		- </div>
	126	+ </div>
	127	+ <!-- <div class="overlay-text">준비 중 입니다.</div> -->
	128	+ </li>
	129	+
	130	+ </ul>
	131	+ <div class="bottom-wrap">
	132	+ <PaginationButton v-model:currentPage="postListSearch.currentPage" :perPage="postListSearch.perPage"
	133	+ :totalCount="postListCount" :maxRange="5" :click="postSelectList" />
98	134	</div>
99	135	</div>
100	136	</div>
...	...	@@ -187,7 +223,7 @@
187	223	},
188	224
189	225	/*페이지 접속 로그 등록 /
190		- pageLogInsert: function() {
	226	+ pageLogInsert: function () {
191	227	const vm = this;
192	228
193	229	axios({
...	...	@@ -220,7 +256,7 @@
220	256	}).then(function (response) {
221	257	window.location.href = item.link_url;
222	258	})
223		-
	259	+
224	260	}).catch(function (error) {
225	261	alert("기술문서 상세보기 오류, 관리자에게 문의바랍니다.");
226	262	})

Delete comment