(() => { const { pageHelper, EventManager, utils, actions } = ShopbySkin; const eventDetailHelper = pageHelper.eventDetailHelper(); const containerEl = document.querySelector('[shopby-helper-key="event-detail-helper-key"]'); const { event: eventNoOrId } = utils.getQueryParams(location); const eventDetailRequest = { eventNo: eventNoOrId, sortType: 'ADMIN_SETTING', soldout: true, }; const redirectLoginPage = () => { const nextUrl = '/pages/sign-in/sign-in.html'; location.href = `${nextUrl}?from=${encodeURIComponent(location.href)}`; }; eventDetailHelper.initialize({ helperKey: 'event-detail-helper-key', }); const likeHelper = { toggleClassName: (likeEl) => { likeEl.classList.toggle('is-active'); }, toggleLikeStatus: async (likeEl) => { const productNo = likeEl.getAttribute('shopby-product-no') ?? 0; await actions.toggleLikeStatus({ productNo: Number(productNo), }); }, }; const CLICK_EVENT_HANDLER_MAP = { HANDLE_COUPON_BTN_CLICK: () => { if (!utils.isSignIn()) { ShopbySkin.EventManager.fire('MODAL_CONFIRM_OPEN', { noticeType: 'CAUTION', message: '로그인하셔야 본 서비스를 이용하실 수 있습니다.', onConfirm: redirectLoginPage, }); return; } const { coupon, eventNo } = document.querySelector('event-detail-product-list').store.state ?? {}; ShopbySkin.EventManager.fire('OPEN_LAYER_MODAL', { title: '쿠폰받기', name: 'coupon-download', data: { coupons: coupon?.coupons?.filter(({ downloadable }) => downloadable) ?? [], eventNo, }, isFull: false, onClose: () => null, }); }, HANDLE_SECTION_ID_CLICK: ({ target, helper }) => { const tabId = target.getAttribute('shopby-tab-id'); helper.eventAction.selectEventCategory(tabId); }, LIKE_PRODUCT: ({ target }) => { if (!utils.isSignIn()) { ShopbySkin.EventManager.fire('MODAL_CONFIRM_OPEN', { noticeType: 'CAUTION', message: '로그인하셔야 본 서비스를 이용하실 수 있습니다.', onConfirm: redirectLoginPage, }); return; } const likeEl = target.closest('[shopby-product-no]'); likeHelper.toggleClassName(likeEl); likeHelper.toggleLikeStatus(likeEl); }, }; const CHANGE_EVENT_HANDLER_MAP = { HANDLE_SORT_CHANGE: ({ target, helper }) => { helper.eventAction.fetchEventDetail({ ...eventDetailRequest, sortType: target.value, }); }, }; EventManager.fire('INIT_EVENT_PRODUCT_SECTION_SLIDER', { spaceBetween: 32, direction: 'horizontal', effect: 'slide', slidesPerView: 'auto', }); EventManager.on('PAGE_LOAD_COMPLETED', () => { eventDetailHelper.eventAction.fetchEventDetail(eventDetailRequest); }); const clickEventListener = ({ target }) => { const actionType = target.getAttribute('shopby-action') ?? target.closest('button')?.getAttribute('shopby-action'); CLICK_EVENT_HANDLER_MAP[actionType]?.({ helper: eventDetailHelper, target, }); }; const changeEventListener = ({ target }) => { const actionType = target.getAttribute('shopby-action'); CHANGE_EVENT_HANDLER_MAP[actionType]?.({ helper: eventDetailHelper, target, }); }; containerEl.addEventListener('click', clickEventListener); containerEl.addEventListener('change', changeEventListener); })();