{"id":27608,"date":"2021-02-10T11:22:32","date_gmt":"2021-02-10T02:22:32","guid":{"rendered":"http:\/\/koreabuild.co.kr\/kintex\/?page_id=27608"},"modified":"2023-12-06T15:46:55","modified_gmt":"2023-12-06T06:46:55","slug":"koreabuild-support_notice","status":"publish","type":"page","link":"https:\/\/koreabuild.co.kr\/kintex\/exhibitor\/koreabuild-support_notice\/","title":{"rendered":"\uc9c0\uc6d0\uc0ac\uc5c5 \uacf5\uace0"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container 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\"><!-- \ucc38\uace0 : https:\/\/wiki-dev.messeesang.com\/ko\/wordpress\/bid-notice -->\n\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\" \/> <!-- icon -->\n\n<div id=\"bidApp\" v-cloak>\n  <div style=\"width: 100%; background-color: #f9f9f9;\">\n    <ul class=\"site-list\">\n      <li :class=\"{'selected-site': selectedSite === null}\"\n        @click=\"selectedSite = null\">\uc804\uccb4\n      <\/li>\n      <li v-for=\"(site, index) in sites\" :class=\"{'selected-site': selectedSite !== null && selectedSite.NAME == site.NAME}\"\n        @click=\"selectedSite = site\">{{ site.NAME }}\n      <\/li>\n    <\/ul>\n  <\/div>\n\n  <div style=\"display: flex; justify-content: space-between; padding: 0 4px 10px\">\n    <p style=\"font-size: 14px\">\u203b \ud0a4\uc6cc\ub4dc : {{ keywords.join(', ') }}<\/p>\n    <div class=\"search-wrap\">\n      <i class=\"fa-search fas icon\" aria-hidden=\"true\"><\/i>\n      <input type=\"text\" v-model=\"searchText\" placeholder=\"\uac80\uc0c9\uc5b4\ub97c \uc785\ub825\ud574\uc8fc\uc138\uc694.\">\n    <\/div>\n  <\/div>\n\n  <p class=\"none-data\" v-show=\"activeBidNotices.length === 0\">\ud0a4\uc6cc\ub4dc\uc5d0 \ud574\ub2f9\ud558\ub294 \uacf5\uace0\uac00 \uc874\uc7ac\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n\n  <table class=\"bid-list\" v-show=\"activeBidNotices.length > 0\">\n    <thead>\n      <tr>\n        <th style=\"width: 15%\">\ubd84\uc57c<\/th>\n        <th style=\"width: 70%\">\uc81c\ubaa9<\/th>\n        <th style=\"width: 15%\">\ub9c8\uac10\uc77c<\/th>\n      <\/tr>\n    <\/thead>\n    <tbody>\n      <tr v-for=\"(bid, index) in activeBidNotices\">\n        <td style=\"text-align: center;\">{{ bid.CATEGORY }}<\/td>\n        <td style=\"text-align: left\">\n          <a target=\"_blank\" :href=\"bid.DETAIL_URL ?? ''\">{{ bid.TITLE.replace(\/\\?\/g, \" \") }}<\/a>\n        <\/td>\n        <td style=\"text-align: center;\">{{ bid.CLOSE_DATE ?? '-' }}<\/td>\n      <\/tr>\n    <\/tbody>\n  <\/table>\n  <div style=\"text-align: right; margin: 5px\">\n    <a :href=\"selectedSite !== null ? selectedSite.URL : ''\" target=\"_blank\" v-show=\"selectedSite !== null\"\n      style=\"color: var(--messe-theme-color); font-size: 14px\">\n      {{ selectedSite !== null ? selectedSite.NAME : '' }} \ubc14\ub85c\uac00\uae30\n    <\/a>\n  <\/div>\n\n  <ul class=\"page-ul\">\n    <li @click=\"currentPage = prevBtnPage\"><span class=\"material-symbols-outlined\">navigate_before<\/span><\/li>\n    <li v-for=\"(pageNumber, index) in displayedPageNumbers\" @click=\"currentPage = pageNumber\"\n      :class=\"{'selected-page' : currentPage === pageNumber}\"><span>{{ pageNumber }}<\/span><\/li>\n    <li @click=\"currentPage = nextBtnPage\"><span class=\"material-symbols-outlined\">navigate_next<\/span><\/li>\n  <\/ul>\n<\/div>\n\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    computed,\n    onBeforeMount,\n    onMounted,\n    watch\n  } from 'vue'\n\n  const App = {\n    setup() {\n      const BID_NOTICE_COUNT_PER_PAGE = 10;\n      const PAGE_BLOCK_SIZE = 10;\n      const FAIR_MASTER_ID = '';\n      const DEFAULT_KEYWORDS = ['\uc804\uc2dc', '\ubc15\ub78c\ud68c'];\n\n      const sites = ref([]);\n      const getSites = () => {\n        $.ajax({\n          type: \"get\",\n          url: 'https:\/\/fmsapi.messeesang.com\/BidNotice\/BID_sd_ScrapedSites'\n        }).done((res) => {\n          if (!res.state) {\n            alert('\uc5d0\ub7ec\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.');\n            return;\n          }\n          sites.value = res.data;\n        }).fail((error) => {\n          console.log(error);\n        });\n      }\n\n      const keywords = ref([]);\n      const getKeywords = () => {\n        $.ajax({\n          type: \"get\",\n          url: 'https:\/\/fmsapi.messeesang.com\/BidNotice\/BID_sd_KeywordsByFairMasterId?fairMasterId=' + FAIR_MASTER_ID\n        }).done((res) => {\n          if (!res.state) {\n            alert('\uc5d0\ub7ec\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.');\n            return;\n          }\n          keywords.value = res.data ? JSON.parse(res.data) : DEFAULT_KEYWORDS;\n        }).fail((error) => {\n          console.log(error);\n        });\n      }\n      watch(keywords, () => {\n        getBidList();\n      });\n\n      const allBidNotices = ref([]);\n      const getBidList = () => {\n        if (keywords.value.length === 0) {\n          return;\n        }\n\n        currentPage.value = 1;\n        $.ajax({\n          type: \"post\",\n          url: 'https:\/\/fmsapi.messeesang.com\/BidNotice\/BID_sd_BidNoticesByFairMasterIdAndPeriod',\n          data: {\n            fairMasterId: FAIR_MASTER_ID\n          }\n        }).done((res) => {\n          if (!res.state) {\n            alert('\uc5d0\ub7ec\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.');\n            return;\n          }\n          allBidNotices.value = res.data;\n        }).fail((error) => {\n          console.log(error);\n        });\n      };\n\n      const currentPage = ref(1);\n\n      const selectedSite = ref(null);\n      watch(selectedSite, () => {\n        currentPage.value = 1;\n        searchText.value = '';\n      });\n\n      const searchText = ref('');\n      watch(searchText, () => {\n        currentPage.value = 1;\n      })\n\n      const filteredBidNotices = computed(() => {\n\n        let filteredBySearchText = allBidNotices.value.filter((bidNotice) =>\n          searchText.value.trim() === '' || bidNotice.TITLE.includes(searchText.value.trim())\n        );\n\n        if (selectedSite.value === null) {\n          return filteredBySearchText;\n        }\n\n        return filteredBySearchText.filter((bidNotice) => selectedSite.value.NAME === bidNotice.SITE_NAME)\n      });\n\n      const activeBidNotices = computed(() => {\n        let startIndex = (currentPage.value - 1) * BID_NOTICE_COUNT_PER_PAGE;\n        return filteredBidNotices.value.slice(startIndex, startIndex + BID_NOTICE_COUNT_PER_PAGE);\n      });\n\n      const lastPage = computed(() =>\n        (filteredBidNotices.value.length !== 0) ? Math.ceil(filteredBidNotices.value.length \/ BID_NOTICE_COUNT_PER_PAGE) : 1\n      );\n\n      const displayedPageNumbers = computed(() => {\n        let startNumber = Math.floor((currentPage.value - 1) \/ PAGE_BLOCK_SIZE) * PAGE_BLOCK_SIZE + 1;\n        let endNumber = (startNumber + (PAGE_BLOCK_SIZE - 1)) > lastPage.value ? lastPage.value : startNumber + (PAGE_BLOCK_SIZE -\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(...displayedPageNumbers.value);\n        return (currentMinPage - PAGE_BLOCK_SIZE) < 1 ? 1 : (currentMinPage - PAGE_BLOCK_SIZE);\n      });\n\n      const nextBtnPage = computed(() => {\n        let currentMaxPage = Math.max(...displayedPageNumbers.value);\n        return (currentMaxPage + 1) < lastPage.value ? (currentMaxPage + 1) : lastPage.value;\n      });\n\n      onBeforeMount(async () => {\n        await getSites();\n        await getKeywords();\n      });\n\n      onMounted(async () => {\n        $(\".post-content\").append($(\"#bidApp\"));\n      });\n\n      return {\n        sites,\n        keywords,\n        activeBidNotices,\n        selectedSite,\n        currentPage,\n        lastPage,\n        displayedPageNumbers,\n        prevBtnPage,\n        nextBtnPage,\n        searchText\n      };\n    }\n  };\n\n  createApp(App).mount('#bidApp');\n\n<\/script>\n\n<style>\n  .site-list {\n    padding: 0;\n  }\n\n  .site-list li {\n    font-size: 14px;\n    line-height: 1.1rem;\n    text-align: center !important;\n    background-color: #f9f9f9;\n    cursor: pointer;\n    color: #515151;\n    padding: 15px 20px 13px;\n    margin: 0 2px;\n    list-style: none;\n    display: inline-block;\n  }\n\n  .selected-site {\n    font-weight: bold;\n    border-bottom: 2px solid #545861;\n  }\n\n  .page-ul {\n    display: flex;\n    list-style: none;\n    justify-content: center;\n    margin-top: 30px;\n  }\n\n  .page-ul li {\n    cursor: pointer;\n    margin: 0 20px;\n    font-size: 14px;\n    color: #aaa;\n  }\n\n  .selected-page {\n    font-weight: bold;\n    color: black !important;\n  }\n\n  .none-data {\n    text-align: center;\n    font-size: 16px;\n    font-weight: bold;\n    color: gray;\n  }\n\n  .bid-list {\n    width: 100%;\n  }\n\n  .bid-list td,\n  .bid-list td a,\n  .bid-list th {\n    border: 0;\n    padding: 10px 2px;\n    font-size: 14px;\n    color: #545861;\n  }\n\n  .bid-list td a:hover {\n    color: #F05233\n  }\n\n  .bid-list th {\n    border-bottom: 2px solid #f1f1f1;\n    font-weight: bold;\n    text-align: center;\n  }\n\n  .bid-list td {\n    border-bottom: 1px solid #f1f1f1;\n  }\n\n  .bid-list tbody tr:hover {\n    background-color: #fafafa;\n  }\n\n  .bid-list a:hover {\n    color: #545861;\n  }\n\n  #bidApp {\n    max-width: 1400px;\n    margin: 0 auto;\n  }\n\n  [v-cloak] {\n    display: none;\n  }\n\n  .search-wrap {\n    display: flex;\n    align-items: center;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    padding: 5px 5px 4px 10px;\n    max-width: 400px;\n  }\n\n  .search-wrap input {\n    border: none;\n    outline: none;\n    flex: 1;\n    padding: 3px 5px 5px;\n    font-size: 14px;\n    max-height: 30px;\n  }\n\n  .search-wrap .icon {\n    margin-right: 5px;\n    font-size: 15px;\n    color: #777;\n  }\n\n<\/style>\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":12047,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-27608","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koreabuild.co.kr\/kintex\/wp-json\/wp\/v2\/pages\/27608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koreabuild.co.kr\/kintex\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koreabuild.co.kr\/kintex\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koreabuild.co.kr\/kintex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koreabuild.co.kr\/kintex\/wp-json\/wp\/v2\/comments?post=27608"}],"version-history":[{"count":0,"href":"https:\/\/koreabuild.co.kr\/kintex\/wp-json\/wp\/v2\/pages\/27608\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/koreabuild.co.kr\/kintex\/wp-json\/wp\/v2\/pages\/12047"}],"wp:attachment":[{"href":"https:\/\/koreabuild.co.kr\/kintex\/wp-json\/wp\/v2\/media?parent=27608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}