File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content pt50 pb50">
<div class="w1400">
<div class="search-bar mb30 user-search-bar">
<input type="text" class="full-input search-input" placeholder="검색어를 입력하세요." v-model="inputSearchText" @keyup.enter="totalSearch"/>
<button class="icon-button search-button" @click="totalSearch">
<svg-icon type="mdi" :path="this.$iconPath()" class="search-icon"></svg-icon>
</button>
</div>
<div class="search-content">
<p class="mb30 box-title"><strong>{{ search.searchText }}</strong>에 대한 <strong class="red-text">총 {{ totalCount }}</strong>건의 검색결과를
찾았습니다.</p>
<ul>
<li class="mb30" v-for="(item, idx) in pageList" :key="idx">
<div class="border background radius pd10">
<p class="chart-title">{{ item.fullMenuNm }} ({{ item.totalListCount }}건)</p>
</div>
<ul class="mb10">
<li class="pd10 border-b" v-for="(subItem, subIdx) in item.previewList" @click="fnView(item, subItem)" style="cursor: pointer;" :key="subIdx">
<div class="flex justify-start align-center mb10">
<div v-if="subItem.title != null && subItem.title != ''" class="gd-10">
<p class="detail-bold ">{{ subItem.title }}</p>
</div>
<div v-else class="gd-10">
<p class="detail-bold ">Q.</p>
</div>
<div class="gd-2">
<p class="date-text text-rg">{{ subItem.regDt }}</p>
</div>
</div>
<div class="content-warp gd-12">
<p class="date-text">{{ subItem.content }}</p>
</div>
</li>
</ul>
<div v-show="item.totalListCount > 5" class="flex justify-end align-center no-gutters">
<div class="gd-1">
<button class="large-btn darkg-border-btn" @click="fnViewList(item)" style="cursor: pointer;">더보기 <svg-icon type="mdi"
:path="path"></svg-icon></button>
</div>
</div>
</li>
<!-- <li class="mb30">
<div class="border background radius pd10">
<p class="chart-title">기업정보(메뉴명)</p>
</div>
<ul class="mb10">
<li class="pd10 border-b">
<div class="flex justify-start align-center mb10">
<div class="gd-10">
<p class="detail-bold ">검색내용에 대한 제목</p>
</div>
<div class="gd-2">
<p class="date-text text-rg">2024-05-02</p>
</div>
</div>
<div class="content-warp gd-12">
<p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
</div>
</li>
<li class="pd10 border-b">
<div class="flex justify-start align-center mb10">
<div class="gd-10">
<p class="detail-bold ">검색내용에 대한 제목</p>
</div>
<div class="gd-2">
<p class="date-text text-rg">2024-05-02</p>
</div>
</div>
<div class="content-warp gd-12">
<p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
</div>
</li>
<li class="pd10 border-b">
<div class="flex justify-start align-center mb10">
<div class="gd-10">
<p class="detail-bold ">검색내용에 대한 제목</p>
</div>
<div class="gd-2">
<p class="date-text text-rg">2024-05-02</p>
</div>
</div>
<div class="content-warp gd-12">
<p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
</div>
</li>
<li class="pd10 border-b">
<div class="flex justify-start align-center mb10">
<div class="gd-10">
<p class="detail-bold ">검색내용에 대한 제목</p>
</div>
<div class="gd-2">
<p class="date-text text-rg">2024-05-02</p>
</div>
</div>
<div class="content-warp gd-12">
<p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
</div>
</li>
<li class="pd10 border-b">
<div class="flex justify-start align-center mb10">
<div class="gd-10">
<p class="detail-bold ">검색내용에 대한 제목</p>
</div>
<div class="gd-2">
<p class="date-text text-rg">2024-05-02</p>
</div>
</div>
<div class="content-warp gd-12">
<p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
</div>
</li>
</ul>
<div class="flex justify-end align-center no-gutters">
<div class="gd-1">
<button class="large-btn darkg-border-btn">더보기 <svg-icon type="mdi"
:path="path"></svg-icon></button>
</div>
</div>
</li>
<li class="mb30">
<div class="border background radius pd10">
<p class="chart-title">기업정보(메뉴명)</p>
</div>
<ul class="mb10">
<li class="pd10 border-b">
<div class="flex justify-start align-center mb10">
<div class="gd-10">
<p class="detail-bold ">검색내용에 대한 제목</p>
</div>
<div class="gd-2">
<p class="date-text text-rg">2024-05-02</p>
</div>
</div>
<div class="content-warp gd-12">
<p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
</div>
</li>
<li class="pd10 border-b">
<div class="flex justify-start align-center mb10">
<div class="gd-10">
<p class="detail-bold ">검색내용에 대한 제목</p>
</div>
<div class="gd-2">
<p class="date-text text-rg">2024-05-02</p>
</div>
</div>
<div class="content-warp gd-12">
<p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
</div>
</li>
<li class="pd10 border-b">
<div class="flex justify-start align-center mb10">
<div class="gd-10">
<p class="detail-bold ">검색내용에 대한 제목</p>
</div>
<div class="gd-2">
<p class="date-text text-rg">2024-05-02</p>
</div>
</div>
<div class="content-warp gd-12">
<p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
</div>
</li>
<li class="pd10 border-b">
<div class="flex justify-start align-center mb10">
<div class="gd-10">
<p class="detail-bold ">검색내용에 대한 제목</p>
</div>
<div class="gd-2">
<p class="date-text text-rg">2024-05-02</p>
</div>
</div>
<div class="content-warp gd-12">
<p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
</div>
</li>
<li class="pd10 border-b">
<div class="flex justify-start align-center mb10">
<div class="gd-10">
<p class="detail-bold ">검색내용에 대한 제목</p>
</div>
<div class="gd-2">
<p class="date-text text-rg">2024-05-02</p>
</div>
</div>
<div class="content-warp gd-12">
<p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
</div>
</li>
</ul>
<div class="flex justify-end align-center no-gutters">
<div class="gd-1">
<button class="large-btn darkg-border-btn">더보기 <svg-icon type="mdi"
:path="path"></svg-icon></button>
</div>
</div>
</li> -->
</ul>
</div>
</div>
</div>
</template>
<script>
import { toRaw } from 'vue'
import store from "../../../AppStore";
import { mdiArrowRightDropCircleOutline } from '@mdi/js';
import queryParams from '../../../../../resources/js/queryParams';
import { defaultTotalSearchParams } from "../../../../../resources/js/defaultTotalSearchParams.js"
import { searchAll } from "../../../../../resources/api/search.js";
import { defaultSearchParams } from "../../../../../resources/js/defaultSearchParams.js"
export default {
mixins: [queryParams],
data() {
return {
path: mdiArrowRightDropCircleOutline,
search: { ...defaultTotalSearchParams },
pageSearch: { ...defaultSearchParams },
mbrId: store.state.mbrId || null, // 사용자 아이디
roles: store.state.roles.map(auth => auth.authority) || [], // 사용자 권한
menuType: store.state.userType || null, // 메뉴 타입
inputSearchText: '',
totalCount: 0,
menuCount: 0,
menuList: [],
pageCount: 0,
pageList: [],
}
},
created() {
this.resotreQueryParams('totalSearchQueryParams');
this.checkSearchText();
},
methods: {
// 검색어 확인
checkSearchText() {
if(this.search.searchText !== "") {
this.inputSearchText = this.search.searchText;
this.totalSearch();
}
},
// 통합 검색
async totalSearch() {
if(this.search.searchText === "") {
alert("검색어를 입력해주세요.");
return;
}
this.search.searchText = this.inputSearchText
this.search.mbrId = this.mbrId;
this.search.roles = this.roles;
this.search.menuType = this.menuType;
this.saveQueryParams('totalSearchQueryParams', this.search); // 검색조건 저장
try {
const res = await searchAll(toRaw(this.search));
this.menuCount = res.data.data.menuCount;
this.menuList = res.data.data.menuList;
this.pageCount = res.data.data.pageCount;
this.pageList = res.data.data.pageList;
this.totalCount = this.menuCount + this.pageCount;
} catch (error) {
alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
}
},
// 메뉴 목록으로 이동
fnViewList(item) {
this.$router.push({
path: item.routerUrl
});
},
// 메뉴 상세 조회로 이동
fnView(item, subItem) {
let menuPath = null;
if(item.routerUrl.includes('.page')) {
const lastSlashIndex = item.routerUrl.lastIndexOf('/'); // 마지막 '/' 인덱스
menuPath = item.routerUrl.substring(0, lastSlashIndex) ; // 마지막 '/' 이전 경로
}
// 페이지 검색 조건 저장
this.pageSearch.searchText = this.search.searchText;
this.saveQueryParams('queryParams', this.pageSearch); // 검색조건 저장
// 일반 검색 결과
if(subItem.title != null && subItem.title != '') {
this.$router.push({
path: menuPath + '/view.page',
query: {
pageId: subItem.pageId
},
});
}
// 질의형 검색 결과
else {
this.$router.push({
path: item.routerUrl
});
}
},
},
watch: {
},
computed: {
},
components: {
},
mounted() {
}
}
</script>