Commit @82c555fef9e85af2ee0ab6f3b3d5fe9871ea25f3

박정하 03-28

250328 박정하 메인화면 링크 및 통합 검색 파라미터 연결

@82c555fef9e85af2ee0ab6f3b3d5fe9871ea25f3

a46a47a

82c555f

client/views/component/listLayout/CardViewList.vue

--- client/views/component/listLayout/CardViewList.vue

+++ client/views/component/listLayout/CardViewList.vue


         <img :src="resulticon" alt="">
         <p>총 <b>{{ count }}개</b>의 {{ helpText }}</p>
       </div>
-      <button type="button" class="gopage" @click="fnMoveTo(routeName, null)">모두보기</button>
+      <button type="button" class="gopage" @click="fnMoveTo">모두보기</button>
     </div>
     <div v-if="list.length > 0">
       <CardStyleComponent :name="name" :list="list" />

       type: Array,
       default: () => [],
     },
+    params: {
+      type: Object,
+      default: () => { },
+    },
   },
 
   data() {

           return '보도자료가 검색되었습니다.';
       }
     },
-    routeName() {
-      switch (this.name) {
-        case 'P':
-          return 'PicHistorySearch';
-        case 'V':
-          return '영상 기록물';
-        case 'M':
-          return '미디어 영상';
-        case 'N':
-          return '보도자료';
-      }
-    },
   },
 
   methods: {
     // 페이지 이동
-    fnMoveTo(page, id) {
-      if (id !== null || id !== '') {
-        this.$router.push({ name: page, query: { id: id } });
-      } else {
-        this.$router.push({ name: page });
+    fnMoveTo() {
+      switch (this.name) {
+        case 'P':
+          this.$router.push({ name: 'PicHistorySearch', query: this.params });
+          break;
+        case 'V':
+          this.$router.push({ name: 'VideoHistorySearch', query: this.params });
+          break;
+        case 'M':
+          this.$router.push({ name: 'MediaVideoSearch', query: this.params });
+          break;
+        case 'N':
+          this.$router.push({ name: 'NewsReleaseSearch', query: this.params });
+          break;
       }
     }
   },

a46a47a

82c555f

client/views/pages/bbsDcry/photo/PicHistoryDetail.vue

--- client/views/pages/bbsDcry/photo/PicHistoryDetail.vue

+++ client/views/pages/bbsDcry/photo/PicHistoryDetail.vue


 
   created() {
     this.pageId = this.$route.query.id;
-    if (this.pageId === null) {
+    if (this.$isEmpty(this.pageId)) {
       alert("게시물 존재하지 않습니다.");
       this.fnMoveTo('list');
     }

a46a47a

82c555f

client/views/pages/bbsDcry/photo/PicHistorySearch.vue

--- client/views/pages/bbsDcry/photo/PicHistorySearch.vue

+++ client/views/pages/bbsDcry/photo/PicHistorySearch.vue


       if (this.isInitialLoad) {
         this.isInitialLoad = false;
 
-        let searchText = this.$route.query.searchText;
-        if (searchText !== null) {
-          this.searchReqDTO.searchText = searchText;
-        }
+        this.queryParamsToSearch();
       } else {
         if (!confirm('검색 조건을 초기화하시겠습니까?')) {
           return;
         }
       }
 
+      this.searchReqDTO.searchTy = "P"; // 사진 기록물 고정
+      this.selectedTabId = this.tabs[0].id;
+
       this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
       this.searchResult = []; // 검색결과 초기화
 
-      this.selectedTabId = this.tabs[0].id;
-
       this.fnSearch(); // 통합검색
     },
 
+    queryParamsToSearch() {
+      let query = this.$route.query;
+      if (!this.$isEmpty(query)) {
+        const typeConverters = {
+          useSj: val => val === 'true',
+          useCn: val => val === 'true',
+          useAdres: val => val === 'true',
+          searchCtgries: val => Array.isArray(val) ? val : (val ? val.split(',') : [])
+        };
+        Object.entries(query).forEach(([key, value]) => {
+          if (key in this.searchDefault) {
+            this.searchDefault[key] = key in typeConverters ? typeConverters[key](value) : value;
+          }
+        });
+      }
+    },
+
     // 카테고리 목록 조회
     async fnFindCategorys() {
       try {

a46a47a

82c555f

client/views/pages/bbsDcry/video/VideoHistoryDetail.vue

--- client/views/pages/bbsDcry/video/VideoHistoryDetail.vue

+++ client/views/pages/bbsDcry/video/VideoHistoryDetail.vue


 
   created() {
     this.pageId = this.$route.query.id;
-    if (this.pageId === null) {
+    if (this.$isEmpty(this.pageId)) {
       alert("게시물 존재하지 않습니다.");
       this.fnMoveTo('list');
     }

a46a47a

82c555f

client/views/pages/bbsDcry/video/VideoHistorySearch.vue

--- client/views/pages/bbsDcry/video/VideoHistorySearch.vue

+++ client/views/pages/bbsDcry/video/VideoHistorySearch.vue


       if (this.isInitialLoad) {
         this.isInitialLoad = false;
 
-        let searchText = this.$route.query.searchText;
-        if (searchText !== null) {
-          this.searchReqDTO.searchText = searchText;
-        }
+        this.queryParamsToSearch();
       } else {
         if (!confirm('검색 조건을 초기화하시겠습니까?')) {
           return;
         }
       }
 
+      this.searchReqDTO.searchTy = "V"; // 영상 기록물 고정
+      this.selectedTabId = this.tabs[0].id;
+
       this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
       this.searchResult = []; // 검색결과 초기화
 
-      this.selectedTabId = this.tabs[0].id;
-
       this.fnChnageReqDTO(); // 통합검색
     },
 
+    queryParamsToSearch() {
+      let query = this.$route.query;
+      if (!this.$isEmpty(query)) {
+        const typeConverters = {
+          useSj: val => val === 'true',
+          useCn: val => val === 'true',
+          useAdres: val => val === 'true',
+          searchCtgries: val => Array.isArray(val) ? val : (val ? val.split(',') : [])
+        };
+        Object.entries(query).forEach(([key, value]) => {
+          if (key in this.searchDefault) {
+            this.searchDefault[key] = key in typeConverters ? typeConverters[key](value) : value;
+          }
+        });
+      }
+    },
+
     // 카테고리 목록 조회
     async fnFindCategorys() {
       try {

a46a47a

82c555f

client/views/pages/bbsMediaVido/MediaVideoDetail.vue

--- client/views/pages/bbsMediaVido/MediaVideoDetail.vue

+++ client/views/pages/bbsMediaVido/MediaVideoDetail.vue


 
   created() {
     this.pageId = this.$route.query.id;
-    if (this.pageId === null) {
+    if (this.$isEmpty(this.pageId)) {
       alert("게시물 존재하지 않습니다.");
       this.fnMoveTo('list');
     }

a46a47a

82c555f

client/views/pages/bbsMediaVido/MediaVideoSearch.vue

--- client/views/pages/bbsMediaVido/MediaVideoSearch.vue

+++ client/views/pages/bbsMediaVido/MediaVideoSearch.vue


       if (this.isInitialLoad) {
         this.isInitialLoad = false;
 
-        let searchText = this.$route.query.searchText;
-        if (searchText !== null) {
-          this.searchReqDTO.searchText = searchText;
-        }
+        this.queryParamsToSearch();
       } else {
         if (!confirm('검색 조건을 초기화하시겠습니까?')) {
           return;
         }
       }
 
+      this.selectedTabId = this.tabs[0].id;
+
       this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
       this.searchResult = []; // 검색결과 초기화
 
-      this.selectedTabId = this.tabs[0].id;
-
       this.fnChnageReqDTO(); // 통합검색
     },
 
+    queryParamsToSearch() {
+      let query = this.$route.query;
+      if (!this.$isEmpty(query)) {
+        const typeConverters = {
+          useSj: val => val === 'true',
+          useCn: val => val === 'true',
+          searchCtgries: val => Array.isArray(val) ? val : (val ? val.split(',') : [])
+        };
+        Object.entries(query).forEach(([key, value]) => {
+          if (key in this.searchDefault) {
+            this.searchDefault[key] = key in typeConverters ? typeConverters[key](value) : value;
+          }
+        });
+      }
+    },
+
     // 카테고리 목록 조회
     async fnFindCategorys() {
       try {

a46a47a

82c555f

client/views/pages/bbsNesDta/NewsReleaseDetail.vue

--- client/views/pages/bbsNesDta/NewsReleaseDetail.vue

+++ client/views/pages/bbsNesDta/NewsReleaseDetail.vue


 
   created() {
     this.pageId = this.$route.query.id;
-    if (this.pageId === null) {
+    if (this.$isEmpty(this.pageId)) {
       alert("게시물 존재하지 않습니다.");
       this.fnMoveTo('list');
     }

a46a47a

82c555f

client/views/pages/bbsNesDta/NewsReleaseSearch.vue

--- client/views/pages/bbsNesDta/NewsReleaseSearch.vue

+++ client/views/pages/bbsNesDta/NewsReleaseSearch.vue


       if (this.isInitialLoad) {
         this.isInitialLoad = false;
 
-        let searchText = this.$route.query.searchText;
-        if (searchText !== null) {
-          this.searchReqDTO.searchText = searchText;
-        }
+        this.queryParamsToSearch();
       } else {
         if (!confirm('검색 조건을 초기화하시겠습니까?')) {
           return;
         }
       }
 
+      this.selectedTabId = this.tabs[0].id;
+
       this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
       this.searchResult = []; // 검색결과 초기화
 
-      this.selectedTabId = this.tabs[0].id;
-
       this.fnChnageReqDTO(); // 통합검색
     },
 
+    queryParamsToSearch() {
+      let query = this.$route.query;
+      if (!this.$isEmpty(query)) {
+        const typeConverters = {
+          useSj: val => val === 'true',
+          useCn: val => val === 'true',
+          searchCtgries: val => Array.isArray(val) ? val : (val ? val.split(',') : [])
+        };
+        Object.entries(query).forEach(([key, value]) => {
+          if (key in this.searchDefault) {
+            this.searchDefault[key] = key in typeConverters ? typeConverters[key](value) : value;
+          }
+        });
+      }
+    },
+
     // 카테고리 목록 조회
     async fnFindCategorys() {
       try {

a46a47a

82c555f

client/views/pages/main/Main.vue

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

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


     </swiper>
     <div class="search-wrap">
       <div class="search-area">
-        <select name="" id="">
+        <select name="" id="" v-model="searchRecord">
           <option value="all" selected>전체</option>
           <option value="pic">사진</option>
           <option value="video">영상</option>

           <option value="bodo">보도자료</option>
         </select>
         <div class="line"></div>
-        <input type="text" placeholder="검색어를 입력하세요" v-model="searchText">
-        <button class="search-btn"><img :src="search" alt=""></button>
+        <input type="text" placeholder="검색어를 입력하세요" v-model="searchText" @keyup.enter="fnMoveTo('TotalSearch')">
+        <button type="button" class="search-btn" @click="fnMoveTo('TotalSearch')"><img :src="search" alt=""></button>
       </div>
       <div class="total-search">
-        <button class="total-btn" @click="fnMoveTo('TotalSearch')">상세검색</button>
+        <button type="button" class="total-btn" @click="fnMoveTo('TotalSearch')">상세검색</button>
       </div>
     </div>
   </div>

           <li class="line" v-if="idx < icons.length - 1"></li>
         </template>
       </ul>
-      <div class="current-banner"><div><span>기록물 현황</span><img :src="direct" alt=""></div></div>
+      <div class="current-banner">
+        <div><span>기록물 현황</span><img :src="direct" alt=""></div>
+      </div>
     </div>
   </div>
   <div class="new-update w1500 mb-50">

       <div class="tab-content">
         <template v-for="(tabContent, idx1) of tabContents" :key="idx1">
           <div v-show="tabContent.id === selectedTab" class="content-wrap">
-            <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
+            <router-link :to="{ name: tabContent.search }" class="gopage">더보기</router-link>
             <div class="new-pic">
               <div v-for="(item, idx2) in tabContent.list" :key="idx2" class="box-wrap">
-                <div class="box">
+                <div class="box" @click="fnMoveTo(tabContent.view, item.dcryId)">
                   <img :src="item.hasOwnProperty('files') && item.files.length > 0 ? item.files[0].filePath : null" :alt="item.sj" class="tab-image" />
                   <div class="info">
                     <p>{{ item.sj }}</p>
-                    <span>{{ item.rgsde.slice(0, -6) }}</span>
+                    <span>{{ $dotFormatDate(item.rgsde) }}</span>
                   </div>
                 </div>
               </div>

     <div class="new-media">
       <div class="title mb-30">
         <h4>신규 미디어 영상</h4>
-        <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
+        <router-link :to="{ name: 'MediaVideoSearch' }" class="gopage">더보기</router-link>
       </div>
       <div class="media-wrap">
-        <div v-for="(mediaContent, index) in mediaContent" :key="index" class="media-box">
-          <img :src="mediaContent.url" :alt="mediaContent.title" class="media-image" />
-          <div class="info">
-            <p>{{ mediaContent.content }}</p>
-            <span>{{ mediaContent.date }}</span>
+        <template v-for="(item, index) of mediaContents" :key="index">
+          <div class="media-box" @click="fnMoveTo('MediaVideoDetail', item.mediaVidoId)">
+            <img :src="item.url" :alt="item.sj" class="media-image" />
+            <div class="info">
+              <p>{{ item.sj }}</p>
+              <span>{{ $dotFormatDate(item.rgsde) }}</span>
+            </div>
           </div>
-        </div>
+        </template>
         <!-- 게시글이 없는 경우 -->
-        <div v-for="i in Math.max(0, 2 - mediaContent.length)" :key="`empty-${i}`" class="media-box">
-          <img :src="nomedia" :alt="mediaContent.title" class="media-image" />
+        <div v-for="i in Math.max(0, 2 - mediaContents.length)" :key="`empty-${i}`" class="media-box">
+          <img :src="nomedia" alt="" class="media-image" />
           <div class="info">
             <p>등록된 게시글이 없습니다.</p>
           </div>

     <div class="new-bodo">
       <div class="title mb-30">
         <h4>신규 보도 자료</h4>
-        <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
+        <router-link :to="{ name: 'NewsReleaseSearch' }" class="gopage">더보기</router-link>
       </div>
       <ul>
-        <li v-for="(bodoContent, index) in bodoContent" :key="index" class="info">
-          <p>{{ bodoContent.content }}</p>
-          <span>{{ bodoContent.date }}</span>
-        </li>
+        <template v-for="(item, index) of bodoContents" :key="index">
+          <li class="info" @click="fnMoveTo('NewsReleaseDetail', item.nesDtaId)">
+            <p>{{ item.sj }}</p>
+            <span>{{ $dotFormatDate(item.rgsde) }}</span>
+          </li>
+        </template>
         <!-- 게시글이 없는 경우 -->
-        <li v-if="bodoContent.length < 1" class="info">
+        <li v-if="bodoContents.length < 1" class="info">
           <img :src="nobodo" alt="">
         </li>
       </ul>

         },
       ],
       tabContents: [], // 신규 사진, 영상 기록물
-      mediaContent: [], // 신규 미디어 영상
-      bodoContent: [], // 신규 보도자료
+      mediaContents: [], // 신규 미디어 영상
+      bodoContents: [], // 신규 보도자료
+      searchRecord: 'all', // 통합검색 Selectbox 내용
       searchText: null, // 통합검색 Input 내용
       icons: [
         {

           });
 
           let photoDcrys = response.data.data.photoDcrys;
-          this.tabContents.push({ id: 'newPhoto', list: photoDcrys });
+          this.tabContents.push({ id: 'newPhoto', list: photoDcrys, search: 'PicHistorySearch', view: 'PicHistoryDetail' });
 
           let vidoDcrys = response.data.data.vidoDcrys;
-          this.tabContents.push({ id: 'newVideo', list: vidoDcrys });
+          this.tabContents.push({ id: 'newVideo', list: vidoDcrys, search: 'VideoHistorySearch', view: 'VideoHistoryDetail' });
 
           let mediaVidos = response.data.data.mediaVidos;
-          this.mediaContent = this.onChangeList(mediaVidos);
+          this.mediaContents = this.onChangeList(mediaVidos);
 
           let nesDtas = response.data.data.nesDtas;
-          this.bodoContent = this.onChangeList(nesDtas);
+          this.bodoContents = this.onChangeList(nesDtas);
         } else {
           alert(response.data.message);
         }

     },
     // 목록 변환
     onChangeList(list) {
-      let resultArr = [];
-
       for (let item of list) {
         let url = null;
 

           url = getYouTubeThumbnail(item.link);
         }
 
-        resultArr.push({
-          content: item.sj,
-          date: item.rgsde.slice(0, -6),
-          url: url
-        });
+        item.url = url;
       }
 
-      return resultArr;
+      return list;
     },
 
     // 페이지 이동
-    fnMoveTo(page) {
-      let params = null;
+    fnMoveTo(page, id) {
+      console.log("!! ", id);
       if (page === 'TotalSearch') {
-        params = { searchText: this.searchText };
+        this.$router.push({ name: page, query: { searchRecord: this.searchRecord, searchText: this.searchText }, });
+      } else {
+        if (this.$isEmpty(id)) {
+          this.$router.push({ name: page });
+        } else {
+          this.$router.push({ name: page, query: { id: id } });
+        }
       }
-
-      this.$router.push({
-        name: page,
-        query: params,
-      });
     }
   },
 };
-</script>
-<style scoped></style>
+</script>

a46a47a

82c555f

client/views/pages/main/TotalSearch.vue

--- client/views/pages/main/TotalSearch.vue

+++ client/views/pages/main/TotalSearch.vue


       </dl>
     </div>
     <div class="search-result">
-      <CardViewList v-for="(item, idx) of searchResult" :key="idx" :name="item.key" :count="item.count" :list="item.list" />
+      <CardViewList v-for="(item, idx) of searchResult" :key="idx" :name="item.key" :count="item.count" :list="item.list" :params="params" />
     </div>
   </div>
 </template>

 
       searchResult: [], // 검색결과
 
-      isInitialLoad: true // 초기 로드 여부
+      isInitialLoad: true, // 초기 로드 여부
+
+      params: {},
     };
   },
 

   },
 
   mounted() {
+    let searchRecord = this.$route.query.searchRecord;
+    if (!this.$isEmpty(searchRecord)) {
+      switch (searchRecord) {
+        case 'pic':
+          this.isChkAllRecord = false;
+          this.searchReqDTO.usePhoto = true;
+          this.searchReqDTO.useVideo = false;
+          this.searchReqDTO.useMedia = false;
+          this.searchReqDTO.useNews = false;
+          break;
+        case 'video':
+          this.isChkAllRecord = false;
+          this.searchReqDTO.usePhoto = false;
+          this.searchReqDTO.useVideo = true;
+          this.searchReqDTO.useMedia = false;
+          this.searchReqDTO.useNews = false;
+          break;
+        case 'media':
+          this.isChkAllRecord = false;
+          this.searchReqDTO.usePhoto = false;
+          this.searchReqDTO.useVideo = false;
+          this.searchReqDTO.useMedia = true;
+          this.searchReqDTO.useNews = false;
+          break;
+        case 'bodo':
+          this.isChkAllRecord = false;
+          this.searchReqDTO.usePhoto = false;
+          this.searchReqDTO.useVideo = false;
+          this.searchReqDTO.useMedia = false;
+          this.searchReqDTO.useNews = true;
+          break;
+        default:
+          this.isChkAllRecord = true;
+          this.searchReqDTO.usePhoto = true;
+          this.searchReqDTO.useVideo = true;
+          this.searchReqDTO.useMedia = true;
+          this.searchReqDTO.useNews = true;
+          break;
+      }
+    }
+
     let searchText = this.$route.query.searchText;
     if (searchText !== null) {
       this.searchReqDTO.searchText = searchText;

           delete params.searchCtgries;
         }
 
+        this.params = params; // 바로가기 링크 전달을 위해 저장
+
         // API 호출
         const response = await findAllDatas(params);
         this.searchResult = response.data.data.searchResult;

Add a comment

Open 0
Closed 0

List

...	...	@@ -5,7 +5,7 @@
5	5	<img :src="resulticon" alt="">
6	6	<p>총 <b>{{ count }}개</b>의 {{ helpText }}</p>
7	7	</div>
8		- <button type="button" class="gopage" @click="fnMoveTo(routeName, null)">모두보기</button>
	8	+ <button type="button" class="gopage" @click="fnMoveTo">모두보기</button>
9	9	</div>
10	10	<div v-if="list.length > 0">
11	11	<CardStyleComponent :name="name" :list="list" />
...	...	@@ -38,6 +38,10 @@
38	38	type: Array,
39	39	default: () => [],
40	40	},
	41	+ params: {
	42	+ type: Object,
	43	+ default: () => { },
	44	+ },
41	45	},
42	46
43	47	data() {
...	...	@@ -58,27 +62,24 @@
58	62	return '보도자료가 검색되었습니다.';
59	63	}
60	64	},
61		- routeName() {
62		- switch (this.name) {
63		- case 'P':
64		- return 'PicHistorySearch';
65		- case 'V':
66		- return '영상 기록물';
67		- case 'M':
68		- return '미디어 영상';
69		- case 'N':
70		- return '보도자료';
71		- }
72		- },
73	65	},
74	66
75	67	methods: {
76	68	// 페이지 이동
77		- fnMoveTo(page, id) {
78		- if (id !== null \|\| id !== '') {
79		- this.$router.push({ name: page, query: { id: id } });
80		- } else {
81		- this.$router.push({ name: page });
	69	+ fnMoveTo() {
	70	+ switch (this.name) {
	71	+ case 'P':
	72	+ this.$router.push({ name: 'PicHistorySearch', query: this.params });
	73	+ break;
	74	+ case 'V':
	75	+ this.$router.push({ name: 'VideoHistorySearch', query: this.params });
	76	+ break;
	77	+ case 'M':
	78	+ this.$router.push({ name: 'MediaVideoSearch', query: this.params });
	79	+ break;
	80	+ case 'N':
	81	+ this.$router.push({ name: 'NewsReleaseSearch', query: this.params });
	82	+ break;
82	83	}
83	84	}
84	85	},

...	...	@@ -144,7 +144,7 @@
144	144
145	145	created() {
146	146	this.pageId = this.$route.query.id;
147		- if (this.pageId === null) {
	147	+ if (this.$isEmpty(this.pageId)) {
148	148	alert("게시물 존재하지 않습니다.");
149	149	this.fnMoveTo('list');
150	150	}

...	...	@@ -203,24 +203,39 @@
203	203	if (this.isInitialLoad) {
204	204	this.isInitialLoad = false;
205	205
206		- let searchText = this.$route.query.searchText;
207		- if (searchText !== null) {
208		- this.searchReqDTO.searchText = searchText;
209		- }
	206	+ this.queryParamsToSearch();
210	207	} else {
211	208	if (!confirm('검색 조건을 초기화하시겠습니까?')) {
212	209	return;
213	210	}
214	211	}
215	212
	213	+ this.searchReqDTO.searchTy = "P"; // 사진 기록물 고정
	214	+ this.selectedTabId = this.tabs[0].id;
	215	+
216	216	this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
217	217	this.searchResult = []; // 검색결과 초기화
218	218
219		- this.selectedTabId = this.tabs[0].id;
220		-
221	219	this.fnSearch(); // 통합검색
222	220	},
223	221
	222	+ queryParamsToSearch() {
	223	+ let query = this.$route.query;
	224	+ if (!this.$isEmpty(query)) {
	225	+ const typeConverters = {
	226	+ useSj: val => val === 'true',
	227	+ useCn: val => val === 'true',
	228	+ useAdres: val => val === 'true',
	229	+ searchCtgries: val => Array.isArray(val) ? val : (val ? val.split(',') : [])
	230	+ };
	231	+ Object.entries(query).forEach(([key, value]) => {
	232	+ if (key in this.searchDefault) {
	233	+ this.searchDefault[key] = key in typeConverters ? typeConverters[key](value) : value;
	234	+ }
	235	+ });
	236	+ }
	237	+ },
	238	+
224	239	// 카테고리 목록 조회
225	240	async fnFindCategorys() {
226	241	try {

...	...	@@ -95,7 +95,7 @@
95	95
96	96	created() {
97	97	this.pageId = this.$route.query.id;
98		- if (this.pageId === null) {
	98	+ if (this.$isEmpty(this.pageId)) {
99	99	alert("게시물 존재하지 않습니다.");
100	100	this.fnMoveTo('list');
101	101	}

...	...	@@ -203,24 +203,39 @@
203	203	if (this.isInitialLoad) {
204	204	this.isInitialLoad = false;
205	205
206		- let searchText = this.$route.query.searchText;
207		- if (searchText !== null) {
208		- this.searchReqDTO.searchText = searchText;
209		- }
	206	+ this.queryParamsToSearch();
210	207	} else {
211	208	if (!confirm('검색 조건을 초기화하시겠습니까?')) {
212	209	return;
213	210	}
214	211	}
215	212
	213	+ this.searchReqDTO.searchTy = "V"; // 영상 기록물 고정
	214	+ this.selectedTabId = this.tabs[0].id;
	215	+
216	216	this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
217	217	this.searchResult = []; // 검색결과 초기화
218	218
219		- this.selectedTabId = this.tabs[0].id;
220		-
221	219	this.fnChnageReqDTO(); // 통합검색
222	220	},
223	221
	222	+ queryParamsToSearch() {
	223	+ let query = this.$route.query;
	224	+ if (!this.$isEmpty(query)) {
	225	+ const typeConverters = {
	226	+ useSj: val => val === 'true',
	227	+ useCn: val => val === 'true',
	228	+ useAdres: val => val === 'true',
	229	+ searchCtgries: val => Array.isArray(val) ? val : (val ? val.split(',') : [])
	230	+ };
	231	+ Object.entries(query).forEach(([key, value]) => {
	232	+ if (key in this.searchDefault) {
	233	+ this.searchDefault[key] = key in typeConverters ? typeConverters[key](value) : value;
	234	+ }
	235	+ });
	236	+ }
	237	+ },
	238	+
224	239	// 카테고리 목록 조회
225	240	async fnFindCategorys() {
226	241	try {

...	...	@@ -96,7 +96,7 @@
96	96
97	97	created() {
98	98	this.pageId = this.$route.query.id;
99		- if (this.pageId === null) {
	99	+ if (this.$isEmpty(this.pageId)) {
100	100	alert("게시물 존재하지 않습니다.");
101	101	this.fnMoveTo('list');
102	102	}

...	...	@@ -196,24 +196,37 @@
196	196	if (this.isInitialLoad) {
197	197	this.isInitialLoad = false;
198	198
199		- let searchText = this.$route.query.searchText;
200		- if (searchText !== null) {
201		- this.searchReqDTO.searchText = searchText;
202		- }
	199	+ this.queryParamsToSearch();
203	200	} else {
204	201	if (!confirm('검색 조건을 초기화하시겠습니까?')) {
205	202	return;
206	203	}
207	204	}
208	205
	206	+ this.selectedTabId = this.tabs[0].id;
	207	+
209	208	this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
210	209	this.searchResult = []; // 검색결과 초기화
211	210
212		- this.selectedTabId = this.tabs[0].id;
213		-
214	211	this.fnChnageReqDTO(); // 통합검색
215	212	},
216	213
	214	+ queryParamsToSearch() {
	215	+ let query = this.$route.query;
	216	+ if (!this.$isEmpty(query)) {
	217	+ const typeConverters = {
	218	+ useSj: val => val === 'true',
	219	+ useCn: val => val === 'true',
	220	+ searchCtgries: val => Array.isArray(val) ? val : (val ? val.split(',') : [])
	221	+ };
	222	+ Object.entries(query).forEach(([key, value]) => {
	223	+ if (key in this.searchDefault) {
	224	+ this.searchDefault[key] = key in typeConverters ? typeConverters[key](value) : value;
	225	+ }
	226	+ });
	227	+ }
	228	+ },
	229	+
217	230	// 카테고리 목록 조회
218	231	async fnFindCategorys() {
219	232	try {

...	...	@@ -100,7 +100,7 @@
100	100
101	101	created() {
102	102	this.pageId = this.$route.query.id;
103		- if (this.pageId === null) {
	103	+ if (this.$isEmpty(this.pageId)) {
104	104	alert("게시물 존재하지 않습니다.");
105	105	this.fnMoveTo('list');
106	106	}

...	...	@@ -197,24 +197,37 @@
197	197	if (this.isInitialLoad) {
198	198	this.isInitialLoad = false;
199	199
200		- let searchText = this.$route.query.searchText;
201		- if (searchText !== null) {
202		- this.searchReqDTO.searchText = searchText;
203		- }
	200	+ this.queryParamsToSearch();
204	201	} else {
205	202	if (!confirm('검색 조건을 초기화하시겠습니까?')) {
206	203	return;
207	204	}
208	205	}
209	206
	207	+ this.selectedTabId = this.tabs[0].id;
	208	+
210	209	this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
211	210	this.searchResult = []; // 검색결과 초기화
212	211
213		- this.selectedTabId = this.tabs[0].id;
214		-
215	212	this.fnChnageReqDTO(); // 통합검색
216	213	},
217	214
	215	+ queryParamsToSearch() {
	216	+ let query = this.$route.query;
	217	+ if (!this.$isEmpty(query)) {
	218	+ const typeConverters = {
	219	+ useSj: val => val === 'true',
	220	+ useCn: val => val === 'true',
	221	+ searchCtgries: val => Array.isArray(val) ? val : (val ? val.split(',') : [])
	222	+ };
	223	+ Object.entries(query).forEach(([key, value]) => {
	224	+ if (key in this.searchDefault) {
	225	+ this.searchDefault[key] = key in typeConverters ? typeConverters[key](value) : value;
	226	+ }
	227	+ });
	228	+ }
	229	+ },
	230	+
218	231	// 카테고리 목록 조회
219	232	async fnFindCategorys() {
220	233	try {

...	...	@@ -23,7 +23,7 @@
23	23	</swiper>
24	24	<div class="search-wrap">
25	25	<div class="search-area">
26		- <select name="" id="">
	26	+ <select name="" id="" v-model="searchRecord">
27	27	<option value="all" selected>전체</option>
28	28	<option value="pic">사진</option>
29	29	<option value="video">영상</option>
...	...	@@ -31,11 +31,11 @@
31	31	<option value="bodo">보도자료</option>
32	32	</select>
33	33	<div class="line"></div>
34		- <input type="text" placeholder="검색어를 입력하세요" v-model="searchText">
35		- <button class="search-btn"><img :src="search" alt=""></button>
	34	+ <input type="text" placeholder="검색어를 입력하세요" v-model="searchText" @keyup.enter="fnMoveTo('TotalSearch')">
	35	+ <button type="button" class="search-btn" @click="fnMoveTo('TotalSearch')"><img :src="search" alt=""></button>
36	36	</div>
37	37	<div class="total-search">
38		- <button class="total-btn" @click="fnMoveTo('TotalSearch')">상세검색</button>
	38	+ <button type="button" class="total-btn" @click="fnMoveTo('TotalSearch')">상세검색</button>
39	39	</div>
40	40	</div>
41	41	</div>
...	...	@@ -50,7 +50,9 @@
50	50	<li class="line" v-if="idx < icons.length - 1"></li>
51	51	</template>
52	52	</ul>
53		- <div class="current-banner"><div><span>기록물 현황</span><img :src="direct" alt=""></div></div>
	53	+ <div class="current-banner">
	54	+ <div><span>기록물 현황</span><img :src="direct" alt=""></div>
	55	+ </div>
54	56	</div>
55	57	</div>
56	58	<div class="new-update w1500 mb-50">
...	...	@@ -64,14 +66,14 @@
64	66	<div class="tab-content">
65	67	<template v-for="(tabContent, idx1) of tabContents" :key="idx1">
66	68	<div v-show="tabContent.id === selectedTab" class="content-wrap">
67		- <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
	69	+ <router-link :to="{ name: tabContent.search }" class="gopage">더보기</router-link>
68	70	<div class="new-pic">
69	71	<div v-for="(item, idx2) in tabContent.list" :key="idx2" class="box-wrap">
70		- <div class="box">
	72	+ <div class="box" @click="fnMoveTo(tabContent.view, item.dcryId)">
71	73	<img :src="item.hasOwnProperty('files') && item.files.length > 0 ? item.files[0].filePath : null" :alt="item.sj" class="tab-image" />
72	74	<div class="info">
73	75	<p>{{ item.sj }}</p>
74		- <span>{{ item.rgsde.slice(0, -6) }}</span>
	76	+ <span>{{ $dotFormatDate(item.rgsde) }}</span>
75	77	</div>
76	78	</div>
77	79	</div>
...	...	@@ -94,19 +96,21 @@
94	96	<div class="new-media">
95	97	<div class="title mb-30">
96	98	<h4>신규 미디어 영상</h4>
97		- <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
	99	+ <router-link :to="{ name: 'MediaVideoSearch' }" class="gopage">더보기</router-link>
98	100	</div>
99	101	<div class="media-wrap">
100		- <div v-for="(mediaContent, index) in mediaContent" :key="index" class="media-box">
101		- <img :src="mediaContent.url" :alt="mediaContent.title" class="media-image" />
102		- <div class="info">
103		- <p>{{ mediaContent.content }}</p>
104		- <span>{{ mediaContent.date }}</span>
	102	+ <template v-for="(item, index) of mediaContents" :key="index">
	103	+ <div class="media-box" @click="fnMoveTo('MediaVideoDetail', item.mediaVidoId)">
	104	+ <img :src="item.url" :alt="item.sj" class="media-image" />
	105	+ <div class="info">
	106	+ <p>{{ item.sj }}</p>
	107	+ <span>{{ $dotFormatDate(item.rgsde) }}</span>
	108	+ </div>
105	109	</div>
106		- </div>
	110	+ </template>
107	111	<!-- 게시글이 없는 경우 -->
108		- <div v-for="i in Math.max(0, 2 - mediaContent.length)" :key="`empty-${i}`" class="media-box">
109		- <img :src="nomedia" :alt="mediaContent.title" class="media-image" />
	112	+ <div v-for="i in Math.max(0, 2 - mediaContents.length)" :key="`empty-${i}`" class="media-box">
	113	+ <img :src="nomedia" alt="" class="media-image" />
110	114	<div class="info">
111	115	<p>등록된 게시글이 없습니다.</p>
112	116	</div>
...	...	@@ -116,15 +120,17 @@
116	120	<div class="new-bodo">
117	121	<div class="title mb-30">
118	122	<h4>신규 보도 자료</h4>
119		- <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
	123	+ <router-link :to="{ name: 'NewsReleaseSearch' }" class="gopage">더보기</router-link>
120	124	</div>
121	125	<ul>
122		- <li v-for="(bodoContent, index) in bodoContent" :key="index" class="info">
123		- <p>{{ bodoContent.content }}</p>
124		- <span>{{ bodoContent.date }}</span>
125		- </li>
	126	+ <template v-for="(item, index) of bodoContents" :key="index">
	127	+ <li class="info" @click="fnMoveTo('NewsReleaseDetail', item.nesDtaId)">
	128	+ <p>{{ item.sj }}</p>
	129	+ <span>{{ $dotFormatDate(item.rgsde) }}</span>
	130	+ </li>
	131	+ </template>
126	132	<!-- 게시글이 없는 경우 -->
127		- <li v-if="bodoContent.length < 1" class="info">
	133	+ <li v-if="bodoContents.length < 1" class="info">
128	134	<img :src="nobodo" alt="">
129	135	</li>
130	136	</ul>
...	...	@@ -188,8 +194,9 @@
188	194	},
189	195	],
190	196	tabContents: [], // 신규 사진, 영상 기록물
191		- mediaContent: [], // 신규 미디어 영상
192		- bodoContent: [], // 신규 보도자료
	197	+ mediaContents: [], // 신규 미디어 영상
	198	+ bodoContents: [], // 신규 보도자료
	199	+ searchRecord: 'all', // 통합검색 Selectbox 내용
193	200	searchText: null, // 통합검색 Input 내용
194	201	icons: [
195	202	{
...	...	@@ -277,16 +284,16 @@
277	284	});
278	285
279	286	let photoDcrys = response.data.data.photoDcrys;
280		- this.tabContents.push({ id: 'newPhoto', list: photoDcrys });
	287	+ this.tabContents.push({ id: 'newPhoto', list: photoDcrys, search: 'PicHistorySearch', view: 'PicHistoryDetail' });
281	288
282	289	let vidoDcrys = response.data.data.vidoDcrys;
283		- this.tabContents.push({ id: 'newVideo', list: vidoDcrys });
	290	+ this.tabContents.push({ id: 'newVideo', list: vidoDcrys, search: 'VideoHistorySearch', view: 'VideoHistoryDetail' });
284	291
285	292	let mediaVidos = response.data.data.mediaVidos;
286		- this.mediaContent = this.onChangeList(mediaVidos);
	293	+ this.mediaContents = this.onChangeList(mediaVidos);
287	294
288	295	let nesDtas = response.data.data.nesDtas;
289		- this.bodoContent = this.onChangeList(nesDtas);
	296	+ this.bodoContents = this.onChangeList(nesDtas);
290	297	} else {
291	298	alert(response.data.message);
292	299	}
...	...	@@ -296,8 +303,6 @@
296	303	},
297	304	// 목록 변환
298	305	onChangeList(list) {
299		- let resultArr = [];
300		-
301	306	for (let item of list) {
302	307	let url = null;
303	308
...	...	@@ -309,29 +314,25 @@
309	314	url = getYouTubeThumbnail(item.link);
310	315	}
311	316
312		- resultArr.push({
313		- content: item.sj,
314		- date: item.rgsde.slice(0, -6),
315		- url: url
316		- });
	317	+ item.url = url;
317	318	}
318	319
319		- return resultArr;
	320	+ return list;
320	321	},
321	322
322	323	// 페이지 이동
323		- fnMoveTo(page) {
324		- let params = null;
	324	+ fnMoveTo(page, id) {
	325	+ console.log("!! ", id);
325	326	if (page === 'TotalSearch') {
326		- params = { searchText: this.searchText };
	327	+ this.$router.push({ name: page, query: { searchRecord: this.searchRecord, searchText: this.searchText }, });
	328	+ } else {
	329	+ if (this.$isEmpty(id)) {
	330	+ this.$router.push({ name: page });
	331	+ } else {
	332	+ this.$router.push({ name: page, query: { id: id } });
	333	+ }
327	334	}
328		-
329		- this.$router.push({
330		- name: page,
331		- query: params,
332		- });
333	335	}
334	336	},
335	337	};
336		-</script>
337		-<style scoped></style>
	338	+</script> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -102,7 +102,7 @@
102	102	</dl>
103	103	</div>
104	104	<div class="search-result">
105		- <CardViewList v-for="(item, idx) of searchResult" :key="idx" :name="item.key" :count="item.count" :list="item.list" />
	105	+ <CardViewList v-for="(item, idx) of searchResult" :key="idx" :name="item.key" :count="item.count" :list="item.list" :params="params" />
106	106	</div>
107	107	</div>
108	108	</template>
...	...	@@ -164,7 +164,9 @@
164	164
165	165	searchResult: [], // 검색결과
166	166
167		- isInitialLoad: true // 초기 로드 여부
	167	+ isInitialLoad: true, // 초기 로드 여부
	168	+
	169	+ params: {},
168	170	};
169	171	},
170	172
...	...	@@ -174,6 +176,47 @@
174	176	},
175	177
176	178	mounted() {
	179	+ let searchRecord = this.$route.query.searchRecord;
	180	+ if (!this.$isEmpty(searchRecord)) {
	181	+ switch (searchRecord) {
	182	+ case 'pic':
	183	+ this.isChkAllRecord = false;
	184	+ this.searchReqDTO.usePhoto = true;
	185	+ this.searchReqDTO.useVideo = false;
	186	+ this.searchReqDTO.useMedia = false;
	187	+ this.searchReqDTO.useNews = false;
	188	+ break;
	189	+ case 'video':
	190	+ this.isChkAllRecord = false;
	191	+ this.searchReqDTO.usePhoto = false;
	192	+ this.searchReqDTO.useVideo = true;
	193	+ this.searchReqDTO.useMedia = false;
	194	+ this.searchReqDTO.useNews = false;
	195	+ break;
	196	+ case 'media':
	197	+ this.isChkAllRecord = false;
	198	+ this.searchReqDTO.usePhoto = false;
	199	+ this.searchReqDTO.useVideo = false;
	200	+ this.searchReqDTO.useMedia = true;
	201	+ this.searchReqDTO.useNews = false;
	202	+ break;
	203	+ case 'bodo':
	204	+ this.isChkAllRecord = false;
	205	+ this.searchReqDTO.usePhoto = false;
	206	+ this.searchReqDTO.useVideo = false;
	207	+ this.searchReqDTO.useMedia = false;
	208	+ this.searchReqDTO.useNews = true;
	209	+ break;
	210	+ default:
	211	+ this.isChkAllRecord = true;
	212	+ this.searchReqDTO.usePhoto = true;
	213	+ this.searchReqDTO.useVideo = true;
	214	+ this.searchReqDTO.useMedia = true;
	215	+ this.searchReqDTO.useNews = true;
	216	+ break;
	217	+ }
	218	+ }
	219	+
177	220	let searchText = this.$route.query.searchText;
178	221	if (searchText !== null) {
179	222	this.searchReqDTO.searchText = searchText;
...	...	@@ -233,6 +276,8 @@
233	276	delete params.searchCtgries;
234	277	}
235	278
	279	+ this.params = params; // 바로가기 링크 전달을 위해 저장
	280	+
236	281	// API 호출
237	282	const response = await findAllDatas(params);
238	283	this.searchResult = response.data.data.searchResult;

Delete comment