<template> <div class="content"> <div class="sub-title-area mb-30"> <h2>통합검색</h2> <div class="breadcrumb-list"> <ul> <li> <img :src="homeicon" alt="Home Icon"> <p></p> </li> <li><img :src="righticon" alt=""></li> <li>통합검색</li> </ul> </div> </div> <!-- 분리된 검색 폼 컴포넌트 사용 --> <SearchFormComponent :initialData="searchReqDTO" pageType="all" @search="handleSearch" @reset="handleReset" /> <div class="search-result"> <CardViewList v-for="(item, idx) of searchResult" :key="idx" :name="item.key" :count="item.count" :list="item.list" :params="params" /> </div> </div> <div v-if="loading" class="loading-overlay"> <div class="loading-spinner"></div> <div> <p>검색 중입니다</p> <p>잠시만 기다려주세요</p> </div> </div> </template> <script> // COMPONENT import SearchFormComponent from '@/views/component/SearchFormComponent.vue'; import CardViewList from "../../component/CardViewList.vue"; // API import { findAllDatas } from "../../../resources/api/main"; // 통합 검색 export default { components: { SearchFormComponent, CardViewList }, data() { return { // icon homeicon: 'client/resources/images/icon/home.png', righticon: 'client/resources/images/icon/right.png', // 검색용 객체 초기값 searchDefault: { usePhoto: true, useVideo: true, useMedia: true, useNews: true, useSj: true, useCn: true, useAdres: true, searchText: null, startYear: null, endYear: null, searchCtgries: [], order: "rgsde", }, // URL 파라미터로부터 가져온 초기 검색 조건 urlParamsDefault: null, searchReqDTO: {}, // 현재 검색 조건 searchResult: [], // 검색결과 params: {}, // 바로가기 링크용 파라미터 loading: false, // 로딩 상태 추가 }; }, created() { // 초기화 this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault)); // URL 파라미터에서 검색 조건 가져오기 this.loadSearchParamsFromUrl(); }, mounted() { if (this.searchReqDTO != null && !this.$isEmpty(this.searchReqDTO)) { if (this.searchReqDTO.searchText != null && !this.$isEmpty(this.searchReqDTO.searchText != null)) { this.fnSearch(); // 초기 검색 실행 } } }, methods: { // URL 파라미터로부터 검색 조건 설정 loadSearchParamsFromUrl() { // 검색 기본 값 저장 let urlParams = JSON.parse(JSON.stringify(this.searchDefault)); let hasUrlParams = false; // searchRecord 파라미터 처리 let searchRecord = this.$route.query.searchRecord; if (!this.$isEmpty(searchRecord)) { hasUrlParams = true; switch (searchRecord) { case 'pic': urlParams.usePhoto = true; urlParams.useVideo = false; urlParams.useMedia = false; urlParams.useNews = false; break; case 'video': urlParams.usePhoto = false; urlParams.useVideo = true; urlParams.useMedia = false; urlParams.useNews = false; break; case 'media': urlParams.usePhoto = false; urlParams.useVideo = false; urlParams.useMedia = true; urlParams.useNews = false; break; case 'bodo': urlParams.usePhoto = false; urlParams.useVideo = false; urlParams.useMedia = false; urlParams.useNews = true; break; default: urlParams.usePhoto = true; urlParams.useVideo = true; urlParams.useMedia = true; urlParams.useNews = true; break; } } // searchText 파라미터 처리 let searchText = this.$route.query.searchText; if (searchText !== null && searchText !== undefined) { hasUrlParams = true; urlParams.searchText = searchText; } // URL 파라미터가 있으면 저장 if (hasUrlParams) { this.urlParamsDefault = urlParams; this.searchReqDTO = JSON.parse(JSON.stringify(urlParams)); } }, // 검색 폼 컴포넌트에서 검색 버튼 클릭 시 호출되는 메소드 handleSearch(formData) { this.searchReqDTO = formData; this.fnSearch(); }, // 검색 폼 컴포넌트에서 초기화 버튼 클릭 시 호출되는 메소드 handleReset() { // URL 파라미터가 있으면 그 값 사용, 없으면 기본값 사용 if (this.urlParamsDefault) { this.searchReqDTO = JSON.parse(JSON.stringify(this.urlParamsDefault)); } else { this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault)); } this.searchResult = []; // 검색결과 초기화 this.fnSearch(); // 초기화 후 검색 실행 }, // 통합검색 실행 async fnSearch() { this.loading = true; // 로딩 시작 try { const params = JSON.parse(JSON.stringify(this.searchReqDTO)); // 카테고리 목록 처리 if (this.searchReqDTO.searchCtgries && this.searchReqDTO.searchCtgries.length > 0) { params.searchCtgries = this.searchReqDTO.searchCtgries.join(','); } else { delete params.searchCtgries; } this.params = params; // 바로가기 링크 전달을 위해 저장 // API 호출 const response = await findAllDatas(params); this.searchResult = response.data.data.searchResult; } catch (error) { this.searchResult = []; // 검색결과 초기화 if (error.response) { alert(error.response.data.message); } console.error(error.message); } finally { this.loading = false; // 로딩 종료 } }, }, }; </script>