{"id":44057,"date":"2023-09-20T10:47:36","date_gmt":"2023-09-20T01:47:36","guid":{"rendered":"https:\/\/k-eco.or.kr\/?page_id=44057"},"modified":"2023-09-20T10:47:36","modified_gmt":"2023-09-20T01:47:36","slug":"visitor-event","status":"publish","type":"page","link":"https:\/\/k-eco.or.kr\/eng\/visitor-event\/","title":{"rendered":"\ud604\uc7a5 \uc774\ubca4\ud2b8&#038;\ud504\ub85c\uadf8\ub7a8"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1456px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\" \/> <!-- icon -->\n<!-- swiper -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/11.0.5\/swiper-bundle.min.js\"><\/script>\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/11.0.5\/swiper-bundle.min.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lodash.js\/4.17.21\/lodash.min.js\"\n  integrity=\"sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g\/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==\" crossorigin=\"anonymous\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/js-cookie@rc\/dist\/js.cookie.min.js\"><\/script>\n<style>\n  #app div.guide {\n    --point-200: #0000AA;\n  }\n\n  .brand_list_wrap {\n    margin: 5rem 0;\n  }\n\n  .sch_wrap div.sch_field input {\n    width: 100%;\n    height: 100%;\n    border-radius: 10em;\n    border: 1px solid var(--gray-400);\n    padding: 0 6em 0 11em;\n  }\n\n  [v-cloak] {\n    display: none;\n  }\n\n  #sch_area:focus {\n    border-color: var(--point-200);\n  }\n\n\n  @media screen and (max-width: 760px) {\n    .brand_list_wrap {\n      margin: 2rem 0;\n    }\n\n    .sch_wrap div.sch_field input {\n      padding-left: 6em;\n      padding-right: 3.33em;\n    }\n  }\n\n<\/style>\n\n<div id=\"app\" class=\"brand_list_wrap\" v-cloak>\n  <div class=\"guide\">\n    <section>\n      <div class=\"menu_wrap\">\n        <div style=\"cursor: pointer\"\n          :style=\"{ color: menu.type == 'I' ? menu.color : '#d3d3d3' , fontWeight: menu.type == 'I' ? menu.fontWeight : 'normal' }\"\n          @click=\"menu.type = 'I'\">\n          <i style=\"font-size: 20pt; position: relative; top: 5px; margin-right: 10px\" class=\"fas fa-th-large\"><\/i> \uc774\ubbf8\uc9c0 \ubcf4\uae30\n        <\/div>\n        <div style=\"cursor: pointer\"\n          :style=\"{ color: menu.type == 'T' ? menu.color : '#d3d3d3' , fontWeight: menu.type == 'T' ? menu.fontWeight : 'normal' }\"\n          @click=\"menu.type = 'T'\">\n          <i style=\"font-size: 20pt; position: relative; top: 5px; margin-right: 10px\" class=\"fas fa-bars\"><\/i> \ubaa9\ub85d \ubcf4\uae30\n        <\/div>\n      <\/div>\n    <\/section>\n    <section :class=\"{'sch_wrap': true, 'ft_notosans': true, 'on': onClass}\">\n      <div class=\"sch_field\">\n        <button type=\"button\" class=\"sch_btn\" @click=\"searchBrand\"><span class=\"material-symbols-outlined\">search<\/span><\/button>\n        <input type=\"text\" placeholder=\"\ube0c\ub79c\ub4dc \uac80\uc0c9\" id=\"sch_area\" name=\"sch_area\" v-model=\"searchKeyword\" autocomplete=\"false\"\n          @keyup.enter=\"searchBrand\" @focus=\"onClass = true\">\n        <button type=\"button\" class=\"sch_close_btn\" v-show=\"searchKeyword.trim() !== ''\" @click=\"deleteKeyword\"><span\n            class=\"material-symbols-outlined\">close<\/span><\/button>\n      <\/div>\n      <div class=\"recent_sch_wrap ft_notosans\">\n        <div class=\"head\">\n          <p class=\"tit\">\ucd5c\uadfc \uac80\uc0c9\uc5b4<\/p>\n          <button type=\"button\" class=\"all_del_btn\" @click=\"recentSearchKeywords = []\">\uc804\uccb4\uc0ad\uc81c<\/button>\n        <\/div>\n        <div class=\"cont swiper\">\n          <ul class=\"recent_sch_list swiper-wrapper\">\n            <li class=\"swiper-slide\" v-for=\"(keyword, index) in recentSearchKeywords\">\n              <a href=\"#\">\n                <span @click=\"clickRecentKeyword(keyword)\">{{ keyword }}<\/span>\n                <span class=\"material-symbols-outlined\"\n                  @click=\"recentSearchKeywords = recentSearchKeywords.filter(k => k !== keyword)\">close<\/span>\n              <\/a>\n            <\/li>\n            <li class=\"empty\" v-show=\"recentSearchKeywords.length === 0\">\n              \ucd5c\uadfc \uac80\uc0c9\uc5b4\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.\n            <\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n      <div class=\"recent_sch_mask\" @click=\"onClass = false\"><\/div>\n    <\/section>\n    <section class=\"gallery_wrap\">\n      <ul class=\"gallery_list\" v-if=\"menu.type == 'I'\">\n        <li v-for=\"(info, index) in eventInfos\" :key=\"info.FAIR_EVENT_ID\" class=\"exhibitor_info\">\n          <a :href=\"detailUrl + '?e=' + info.FAIR_EVENT_ID\">\n            <div class=\"img\"><img :src=\"info.IMAGE_URL === null ? defaultImg : info.IMAGE_URL\" @error=\"e => e.target.src = defaultImg\"\n                alt=\"\ube0c\ub79c\ub4dc \uc774\ubbf8\uc9c0\" style=\"object-fit: contain;\"><\/div>\n            <div class=\"txt_box\">\n              <p class=\"brand_name ft_notosans\">{{ info.PR_NAME_KR !== null ? info.PR_NAME_KR : info.COMPANY_NAME }}<\/p>\n              <p class=\"cate\">{{info.EVENT_TYPE_DESC !== null ? info.EVENT_TYPE_DESC : '-'}}<\/p>\n            <\/div>\n          <\/a>\n        <\/li>\n        <!-- \ub9ac\uc2a4\ud2b8 \uc5c6\uc744 \ub54c -->\n        <li class=\"empty\" v-show=\"totalEventCount === 0\">\n          \ub9ac\uc2a4\ud2b8\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.\n        <\/li>\n      <\/ul>\n\n      <table class=\"free_board_view cat-tbl\" id=\"dataTables-example\" style=\"table-layout: fixed !important; width: 100% !important\" v-else>\n        <thead>\n          <tr>\n            <th class=\"text_center\">\ubd80\uc2a4\ubc88\ud638<\/th>\n            <th class=\"text_center\">\ube0c\ub79c\ub4dc<\/th>\n            <th class=\"text_center\" v-if=\"!isMobile\">\uc774\ubca4\ud2b8 \uc885\ub958<\/th>\n            <th class=\"text_center\" v-if=\"!isMobile\">\uc774\ubca4\ud2b8 \ub0b4\uc6a9<\/th>\n            <th class=\"text_center\">\ubcf4\uae30<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody>\n          <tr v-for=\"(info, index) in eventInfos\" :key=\"info.FAIR_EVENT_ID\">\n            <td class=\"text_center\">{{ info.BOOTH_NUMBER !== null ? info.BOOTH_NUMBER : '-' }}<\/td>\n            <td class=\"text_center\">{{ info.PR_NAME_KR !== null ? info.PR_NAME_KR : info.COMPANY_NAME }}<\/td>\n            <td class=\"text_center\" v-if=\"!isMobile\">{{ info.EVENT_TYPE_DESC !== null ? info.EVENT_TYPE_DESC : '-' }}<\/td>\n            <td class=\"text_left\" v-if=\"!isMobile\"\n              v-html=\"info.CONTENT != null && info.CONTENT != undefined ? info.CONTENT.replace(\/\\n\/g,'<br\/>') : ''\"><\/td>\n            <td class=\"text_center\">\n              <a :href=\"detailUrl + '?e=' + info.FAIR_EVENT_ID\" class=\"cat-btn\">\n                \uc790\uc138\ud788 \ubcf4\uae30\n              <\/a>\n            <\/td>\n          <\/tr>\n        <\/tbody>\n      <\/table>\n\n\n\n      <div class=\"pagination\">\n\n        <ul>\n          <li class=\"move_btn prev_btn\" @click=\"changePage(1)\"><span class=\"material-symbols-outlined\">keyboard_double_arrow_left<\/span>\n          <\/li>\n          <li class=\"move_btn prev_btn\" @click=\"changePage(prevBtnPage)\"><span class=\"material-symbols-outlined\">navigate_before<\/span><\/li>\n          <li v-for=\"(pageNumber, index) in pageNumbers\" @click=\"changePage(pageNumber)\" :class=\"{'now' : currentPage === pageNumber}\"><span\n              class=\"page_btn\">{{ pageNumber }}<\/span><\/li>\n          <li class=\"move_btn next_btn\" @click=\"changePage(nextBtnPage)\"><span class=\"material-symbols-outlined\">navigate_next<\/span><\/li>\n          <li class=\"move_btn next_btn \" @click=\"changePage(lastPage)\"><span\n              class=\"material-symbols-outlined\">keyboard_double_arrow_right<\/span><\/li>\n        <\/ul>\n\n      <\/div>\n    <\/section>\n  <\/div>\n<\/div>\n\n<script type=\"importmap\">\n  {\n    \"imports\": {\n      \"vue\": \"https:\/\/cdn.messeesang.com\/npm\/vue.esm-browser\/3.5.13\/vue.esm-browser.js\"\n    }\n  }\n<\/script>\n\n<script type=\"module\">\n  import {\n    createApp,\n    ref,\n    watch,\n    computed,\n    onMounted,\n    onUnmounted\n  } from 'vue'\n\n  const App = {\n    setup() {\n      const onClass = ref(false);\n      const fairId = '569';\n      const defaultImg = 'https:\/\/d5bvmdkxgb6q.cloudfront.net\/wp-content\/uploads\/2024\/04\/30174441\/noimage.png';\n      const detailUrl = 'https:\/\/k-eco.or.kr\/eng\/';\n\n      const menu = ref({\n        type: \"I\", \/\/ I : \uc774\ubbf8\uc9c0 , T : TEXT\n        color: \"#0000AA\",\n        fontWeight: \"bold\",\n      });\n\n      const width = ref(window.innerWidth);\n      const isMobile = computed(() => width.value <= 760);\n\n      const searchKeyword = ref('');\n      const recentSearchKeywords = ref([]); \/\/ \ucd5c\uadfc \uac80\uc0c9\uc5b4 (\ucfe0\ud0a4\uc5d0\uc11c \ubd88\ub7ec\uc634)\n\n      const eventInfos = ref(); \/\/ \ube0c\ub79c\ub4dc \ub370\uc774\ud130\n\n      const totalEventCount = ref(0);\n      const eventCountPerPage = 12;\n      const pageNumberCount = 5; \/\/ \ud398\uc774\uc9c0 \ubc88\ud638\ub294 \ucd5c\ub300 5\uac1c\uae4c\uc9c0\n      const currentPage = ref(1);\n      const lastPage = computed(() => (totalEventCount.value !== 0) ? Math.ceil(totalEventCount.value \/ eventCountPerPage) : 1);\n\n      \/\/ \ube0c\ub79c\ub4dc \ub370\uc774\ud130 \ubd88\ub7ec\uc624\uae30\n      const getEventInfo = () => {\n        let data = fmsApi.fair.getEventInfo(fairId);\n\n        let totalEvents = _.filter(data, function(event) {\n          if (\n            searchKeyword.value == null ||\n            searchKeyword.value == \"\" ||\n            (event.CONTENT && event.CONTENT.indexOf(searchKeyword.value) > -1) ||\n            (event.COMPANY_NAME && event.COMPANY_NAME.indexOf(searchKeyword.value) > -1) ||\n            (event.PR_NAME_KR && event.PR_NAME_KR.indexOf(searchKeyword.value) > -1)\n          ) {\n            return event;\n          }\n        });\n        totalEventCount.value = totalEvents.length;\n\n        let startIndex = (currentPage.value - 1) * eventCountPerPage;\n        let endIndex = startIndex + eventCountPerPage;\n\n        return totalEvents.slice(startIndex, endIndex);\n      }\n\n      \/\/ \ud604\uc7ac \ud45c\uc2dc\ub420 \ud398\uc774\uc9c0 \ubc88\ud638 \ubc30\uc5f4\n      const pageNumbers = computed(() => {\n        let startNumber = Math.floor((currentPage.value - 1) \/ pageNumberCount) * pageNumberCount + 1;\n        let endNumber = (startNumber + (pageNumberCount - 1)) > lastPage.value ? lastPage.value : startNumber + (pageNumberCount -\n          1);\n\n        return Array.from({\n          length: endNumber - startNumber + 1\n        }, (_, i) => startNumber + i);\n      });\n\n      const prevBtnPage = computed(() => {\n        let currentMinPage = Math.min(...pageNumbers.value);\n        return (currentMinPage - pageNumberCount) < 1 ? 1 : (currentMinPage - pageNumberCount);\n      });\n\n      const nextBtnPage = computed(() => {\n        let currentMaxPage = Math.max(...pageNumbers.value);\n        return (currentMaxPage + 1) < lastPage.value ? (currentMaxPage + 1) : lastPage.value;\n      });\n\n      watch(isMobile, (newVal, oldVal) => {\n        if (newVal !== oldVal) {\n          if (newVal) {\n            \/\/ PC -> \ubaa8\ubc14\uc77c \uc804\ud658 \uc2dc\n            currentPage.value = 1;\n            eventInfos.value = getEventInfo();\n\n          } else {\n            \/\/ \ubaa8\ubc14\uc77c -> PC \uc804\ud658 \uc2dc currentPage\uc5d0 \ud574\ub2f9\ud558\ub294 \ub370\uc774\ud130\ub9cc \ub2e4\uc2dc \ubd88\ub7ec\uc624\uae30\n            eventInfos.value = getEventInfo();\n          }\n        }\n      });\n\n      \/\/ PC\uc5d0\uc11c\ub9cc \uc0ac\uc6a9) \ud398\uc774\uc9c0 \uc804\ud658\n      const changePage = (pageNumber) => {\n        currentPage.value = pageNumber;\n        eventInfos.value = getEventInfo();\n      }\n\n      \/\/ \ucfe0\ud0a4 \uad00\ub828 (\ucd5c\uadfc \uac80\uc0c9\uc5b4)\n      const COOKIE_NAME = 'kanacatSearchKeywords';\n      const loadCookie = () => {\n        let keywords = Cookies.get(COOKIE_NAME);\n        if (keywords) {\n          return JSON.parse(keywords);\n        }\n        return [];\n      }\n\n      const updateCookie = (cookieValue) => {\n        Cookies.set(COOKIE_NAME, JSON.stringify(cookieValue), {\n          expires: 30 \/\/ \uc720\ud6a8\uae30\uac04\n        });\n      }\n\n      const searchBrand = () => {\n        currentPage.value = 1;\n        eventInfos.value = getEventInfo();\n\n        if (searchKeyword.value.trim() === '') {\n          return;\n        }\n\n        \/\/ \ucd5c\uadfc \uac80\uc0c9\uc5b4 \uc800\uc7a5\n        recentSearchKeywords.value = recentSearchKeywords.value.filter(k => k !== searchKeyword.value);\n        recentSearchKeywords.value.unshift(searchKeyword.value);\n      }\n\n      const deleteKeyword = () => {\n        searchKeyword.value = '';\n        searchBrand();\n      }\n\n      \/\/ \ucd5c\uadfc \uac80\uc0c9\uc5b4 \uc801\uc6a9\n      const clickRecentKeyword = (newKeyword) => {\n        searchKeyword.value = newKeyword;\n        searchBrand();\n      }\n\n      watch(recentSearchKeywords, (recentSearchKeywords, old) => {\n        updateCookie(recentSearchKeywords);\n        initSwiper();\n      }, {\n        deep: true\n      });\n\n      const onResize = () => {\n        width.value = window.innerWidth;\n        if (width.value > 760) {\n          $('.sch_wrap').removeClass('on')\n        }\n\n        initSwiper();\n      }\n\n      var recentSchSwiper = undefined;\n\n      function initSwiper() {\n        if (recentSchSwiper != undefined) {\n          recentSchSwiper.destroy();\n        }\n\n        recentSchSwiper = new Swiper(\".recent_sch_wrap .cont\", {\n          slidesPerView: 'auto',\n          freeMode: true,\n          watchSlidesProgress: true,\n        });\n      }\n\n      const isLoading = ref(false);\n\n      onMounted(() => {\n        initSwiper();\n        window.addEventListener('resize', onResize);\n\n        window.addEventListener('scroll', _.throttle(() => {\n          if (!isMobile.value || currentPage.value === lastPage.value) {\n            return;\n          }\n\n          if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 500 || isLoading\n            .value) {\n            return;\n          }\n          isLoading.value = true;\n          currentPage.value++;\n          eventInfos.value = eventInfos.value.concat(getEventInfo());\n          isLoading.value = false;\n        }, 300), true);\n\n        eventInfos.value = getEventInfo();\n        recentSearchKeywords.value = loadCookie();\n\n      });\n\n      onUnmounted(() => {\n        window.removeEventListener('resize', onResize);\n      });\n\n      return {\n        menu,\n        fairId,\n        eventCountPerPage,\n        searchKeyword,\n        currentPage,\n        eventInfos,\n        getEventInfo,\n        pageNumbers,\n        changePage,\n        searchBrand,\n        lastPage,\n        prevBtnPage,\n        nextBtnPage,\n        totalEventCount,\n        defaultImg,\n        isMobile,\n        recentSearchKeywords,\n        COOKIE_NAME,\n        clickRecentKeyword,\n        detailUrl,\n        deleteKeyword,\n        onClass\n      };\n    }\n  };\n\n  createApp(App).mount('#app');\n\n<\/script>\n<\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-44057","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/k-eco.or.kr\/eng\/wp-json\/wp\/v2\/pages\/44057","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/k-eco.or.kr\/eng\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/k-eco.or.kr\/eng\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/k-eco.or.kr\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/k-eco.or.kr\/eng\/wp-json\/wp\/v2\/comments?post=44057"}],"version-history":[{"count":0,"href":"https:\/\/k-eco.or.kr\/eng\/wp-json\/wp\/v2\/pages\/44057\/revisions"}],"wp:attachment":[{"href":"https:\/\/k-eco.or.kr\/eng\/wp-json\/wp\/v2\/media?parent=44057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}