{"version":3,"file":"static/chunks/4434-cabfa4b1f2428517.js","mappings":"AACA","sources":["webpack://_N_E/./src/components/GenericPanel.tsx","webpack://_N_E/./src/modules/banners/commands/getBannersByTypeCommand.ts","webpack://_N_E/./src/modules/products/commands/getNewFiltersCommnad.ts","webpack://_N_E/./src/modules/landings/home/MainContainer/viewModels/HeroCategoryViewModel.tsx","webpack://_N_E/./src/modules/landings/home/MainContainer/views/HeroCategoryView.tsx","webpack://_N_E/./src/modules/landings/home/MainContainer/viewModels/HeroListViewModel.tsx","webpack://_N_E/./src/modules/landings/home/MainContainer/views/HeroListView.tsx","webpack://_N_E/./src/api/banner.ts","webpack://_N_E/./src/modules/landings/home/MainContainer/views/ProductRecommendSection.tsx","webpack://_N_E/./src/modules/landings/protection/components/ProtectDescription.tsx","webpack://_N_E/<anon>"],"sourcesContent":["import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n      padding: 20px 20px 40px;\\n      box-shadow: 0 7.1px 70.7px 0 rgba(0, 0, 0, 0.1);\\n    \"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  padding: 32px 0;\\n  min-width: 432px;\\n  min-height: 100px;\\n  position: relative;\\n  @media (max-width: 1200px) {\\n  }\\n  @media (max-width: 768px) {\\n    min-width: 0;\\n    word-break: break-word;\\n  }\\n\\n  \",\n        \"\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  justify-content: center;\\n  align-items: center;\\n  padding: 0 20px;\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  padding: 0 20px;\\n  //margin-top: 24px;\\n\\n  & > * {\\n    flex: 1;\\n  }\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject4() {\n    const data = _tagged_template_literal([\n        \"\\n          background-color: rgba(27, 27, 41, 0.3) !important;\\n        \"\n    ]);\n    _templateObject4 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject5() {\n    const data = _tagged_template_literal([\n        \"\\n          background: \",\n        \" !important;\\n\\n          &:hover {\\n            background: \",\n        \" !important;\\n          }\\n        \"\n    ]);\n    _templateObject5 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject6() {\n    const data = _tagged_template_literal([\n        \"\\n  \",\n        \";\\n\"\n    ]);\n    _templateObject6 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject7() {\n    const data = _tagged_template_literal([\n        \"\\n        button:not(.ant-btn-background-ghost) {\\n          background-color: #ff5252 !important;\\n        }\\n\\n        button.ant-btn-background-ghost {\\n          background-color: transparent !important;\\n          border: 1px solid rgb(232, 232, 234) !important;\\n\\n          > span {\\n            color: rgba(79, 85, 107) !important;\\n          }\\n        }\\n      \"\n    ]);\n    _templateObject7 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject8() {\n    const data = _tagged_template_literal([\n        \"\\n        button:not(.ant-btn-background-ghost) {\\n          background-color: rgba(27, 27, 41, 0.3) !important;\\n        }\\n      \"\n    ]);\n    _templateObject8 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject9() {\n    const data = _tagged_template_literal([\n        \"\\n  text-align: center;\\n  padding: 0 40px;\\n\\n  @media (max-width: 1200px) {\\n  }\\n  @media (max-width: 768px) {\\n    padding: 0 16px;\\n  }\\n\\n  .ant-row {\\n    display: inline-flex;\\n    width: 100%;\\n    max-width: \",\n        \";\\n    gap: 12px;\\n    margin: 0 auto;\\n\\n    .ant-col {\\n      margin-top: 24px;\\n    }\\n\\n    @media (max-width: 1200px) {\\n    }\\n    @media (max-width: 768px) {\\n      max-width: 100%;\\n    }\\n  }\\n\\n  .buttons-wrapper {\\n    flex-direction: row;\\n\\n    button {\\n      height: 48px;\\n\\n      span {\\n        font-size: 16px;\\n        font-weight: 700;\\n\\n        @media (max-width: 1200px) {\\n        }\\n        @media (max-width: 768px) {\\n          font-size: 14px;\\n        }\\n      }\\n\\n      &.ant-btn-primary {\\n        &:not(.ant-btn-background-ghost) {\\n          span {\\n            color: #fff;\\n          }\\n        }\\n\\n        &.ant-btn-background-ghost {\\n          span {\\n            color: \",\n        \";\\n          }\\n        }\\n      }\\n    }\\n\\n    \",\n        \";\\n    \",\n        \"\\n  }\\n\"\n    ]);\n    _templateObject9 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject10() {\n    const data = _tagged_template_literal([\n        \"\\n  font-size: 24px;\\n  font-weight: 700;\\n  text-align: center;\\n  margin: 0;\\n\\n  .red {\\n    color: #ff5252;\\n  }\\n\\n  @media (max-width: 1200px) {\\n  }\\n  @media (max-width: 768px) {\\n    font-size: 20px;\\n  }\\n\"\n    ]);\n    _templateObject10 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject11() {\n    const data = _tagged_template_literal([\n        \"\\n  font-size: 16px;\\n  text-align: center;\\n  line-height: 1.5;\\n  margin-top: \",\n        \";\\n  margin-bottom: 0;\\n\\n  .go-btn {\\n    color: #002fa8;\\n    text-decoration: underline;\\n  }\\n\\n  @media (max-width: 1200px) {\\n  }\\n  @media (max-width: 768px) {\\n    font-size: 14px;\\n  }\\n\"\n    ]);\n    _templateObject11 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject12() {\n    const data = _tagged_template_literal([\n        \"\\n  border: none;\\n  display: block;\\n  position: absolute;\\n  background: transparent;\\n  top: 0;\\n  right: 0;\\n  font-size: 0;\\n  width: 64px;\\n  height: 64px;\\n  cursor: pointer;\\n\\n  > span {\\n    background: url('/static/assets/icon_close_bold.svg') no-repeat 50% 50%;\\n    background-size: 32px;\\n    display: block;\\n    height: 64px;\\n  }\\n\"\n    ]);\n    _templateObject12 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject13() {\n    const data = _tagged_template_literal([\n        \"\\n  width: 432px !important;\\n\"\n    ]);\n    _templateObject13 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { Button, Col, Row } from \"antd\";\nimport React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Modal from \"./modal/Modal\";\nconst GenericPanelWrapper = styled.div.withConfig({\n    componentId: \"sc-71532917-0\"\n})(_templateObject1(), (param)=>{\n    let { useStandardMode  } = param;\n    return useStandardMode && css(_templateObject());\n});\nconst Header = styled.div.withConfig({\n    componentId: \"sc-71532917-1\"\n})(_templateObject2());\nconst Body = styled.div.withConfig({\n    componentId: \"sc-71532917-2\"\n})(_templateObject3());\nconst StyledButton = styled(Button).withConfig({\n    componentId: \"sc-71532917-3\"\n})(_templateObject6(), (props)=>{\n    return (props === null || props === void 0 ? void 0 : props.disabled) ? css(_templateObject4()) : css(_templateObject5(), (props)=>props.theme.new.colors.sol_indigo_500, (props)=>props.theme.new.colors.sol_indigo_500);\n});\nconst Footer = styled.div.withConfig({\n    componentId: \"sc-71532917-4\"\n})(_templateObject9(), (param)=>{\n    let { maxWidth  } = param;\n    return maxWidth ? null : \"412px\";\n}, (props)=>props.theme.new.colors.sol_indigo_500, (props)=>{\n    return (props === null || props === void 0 ? void 0 : props.buttonType) === \"warning\" && css(_templateObject7());\n}, (props)=>{\n    return (props === null || props === void 0 ? void 0 : props.disabled) && css(_templateObject8());\n});\nconst PanelTitle = styled.h2.withConfig({\n    componentId: \"sc-71532917-5\"\n})(_templateObject10());\nconst PanelDescription = styled.p.withConfig({\n    componentId: \"sc-71532917-6\"\n})(_templateObject11(), (param)=>{\n    let { space  } = param;\n    return space ? \"32px\" : \"8px\";\n});\nexport const GenericPanelWithModal = (param)=>{\n    let { open , width =640 , cancelText , okText , title , description , onOk , onClose , children , okButtonProps , space , closeIcon , buttonType =\"default\" , ...props } = param;\n    return /*#__PURE__*/ _jsx(Modal, {\n        width: width,\n        onClose: onClose,\n        open: open,\n        ...props,\n        children: /*#__PURE__*/ _jsx(GenericPanel, {\n            space: space,\n            useStandardMode: false,\n            cancelText: cancelText,\n            okText: okText,\n            okButtonProps: okButtonProps,\n            title: title,\n            description: description,\n            onOk: onOk,\n            closeIcon: closeIcon,\n            buttonType: buttonType,\n            onClose: onClose,\n            children: children\n        })\n    });\n};\nexport const GenericPanelCloseIcon = (param)=>{\n    let { onClick  } = param;\n    return /*#__PURE__*/ _jsx(CloseIconBtn, {\n        onClick: onClick,\n        children: /*#__PURE__*/ _jsx(\"span\", {\n            children: \"닫기\"\n        })\n    });\n};\nconst CloseIconBtn = styled.button.withConfig({\n    componentId: \"sc-71532917-7\"\n})(_templateObject12());\nexport const GenericPanel = (param)=>{\n    let { children , cancelText , okText , title , description , onOk , onClose , useStandardMode =false , space , okButtonProps , closeIcon , buttonType  } = param;\n    const handleOnClose = (e)=>{\n        if (onClose) {\n            onClose(e);\n        }\n    };\n    const handleOnOk = (e)=>{\n        if (onOk) {\n            onOk(e);\n        }\n    };\n    return /*#__PURE__*/ _jsxs(GenericPanelWrapper, {\n        useStandardMode: useStandardMode,\n        className: \"panel_wrapper\",\n        children: [\n            (title || description) && /*#__PURE__*/ _jsxs(Header, {\n                className: \"panel_header\",\n                children: [\n                    /*#__PURE__*/ _jsx(PanelTitle, {\n                        className: \"panel_title\",\n                        children: title\n                    }),\n                    description && /*#__PURE__*/ _jsx(PanelDescription, {\n                        className: \"panel_desc\",\n                        space: space,\n                        children: description\n                    })\n                ]\n            }),\n            closeIcon && /*#__PURE__*/ _jsx(GenericPanelCloseIcon, {\n                onClick: (e)=>handleOnClose(e)\n            }),\n            children && /*#__PURE__*/ _jsx(Body, {\n                className: \"panel_body\",\n                children: children\n            }),\n            (okText || cancelText) && /*#__PURE__*/ _jsx(Footer, {\n                maxWidth: (okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.maxWidth) === \"100%\",\n                className: \"panel_footer\",\n                buttonType: buttonType,\n                disabled: okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.disabled,\n                children: /*#__PURE__*/ _jsxs(Row, {\n                    gutter: 8,\n                    className: \"buttons-wrapper\",\n                    justify: \"center\",\n                    children: [\n                        cancelText && onClose && okText && onOk && /*#__PURE__*/ _jsxs(_Fragment, {\n                            children: [\n                                /*#__PURE__*/ _jsx(Col, {\n                                    span: 11,\n                                    children: /*#__PURE__*/ _jsx(Button, {\n                                        type: \"primary\",\n                                        ghost: true,\n                                        onClick: handleOnClose,\n                                        block: true,\n                                        children: cancelText\n                                    })\n                                }),\n                                /*#__PURE__*/ _jsx(Col, {\n                                    span: 11,\n                                    children: /*#__PURE__*/ _jsx(StyledButton, {\n                                        className: okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.className,\n                                        disabled: okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.disabled,\n                                        buttonType: buttonType,\n                                        type: \"primary\",\n                                        onClick: handleOnOk,\n                                        block: true,\n                                        children: okText\n                                    })\n                                })\n                            ]\n                        }),\n                        !cancelText && okText && /*#__PURE__*/ _jsx(Col, {\n                            span: 24,\n                            children: /*#__PURE__*/ _jsx(StyledButton, {\n                                className: okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.className,\n                                disabled: okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.disabled,\n                                type: \"primary\",\n                                onClick: (e)=>handleOnOk(e),\n                                // style={{ backgroundColor: okButtonProps.className==='delete-btn'? 'red':null }}\n                                block: true,\n                                children: okText\n                            })\n                        })\n                    ]\n                })\n            })\n        ]\n    });\n};\nexport const genericPanelSmallWidth = css(_templateObject13());\n","export class GetBannersByTypeCommand {\n    execute(param) {\n        let { type , offset , limit , with_header , is_md_type  } = param;\n        const url = \"/banners\";\n        const params = new URLSearchParams();\n        if (type != undefined) {\n            params.set(\"type\", type.toString());\n        }\n        if (offset != undefined) {\n            params.set(\"offset\", offset.toString());\n        }\n        if (limit != undefined) {\n            params.set(\"limit\", limit.toString());\n        }\n        if (with_header != undefined) {\n            params.set(\"with_header\", with_header.toString());\n        }\n        if (is_md_type != undefined) {\n            params.set(\"is_md_type\", is_md_type.toString());\n        }\n        return this.apiService.fetch(url, {\n            method: \"GET\",\n            params\n        }).then((res)=>res.data);\n    }\n    constructor(apiService){\n        this.apiService = apiService;\n    }\n}\n","export class GetFiltersCommand {\n    execute(query) {\n        // const url = `/products/filters?id=${query.id}&type=${query.type}`\n        const url = \"/products/filters\";\n        const params = new URLSearchParams();\n        if (query.id) {\n            params.append(\"id\", query.id);\n        }\n        if (query.type) {\n            params.append(\"type\", query.type);\n        }\n        return this.apiService.fetch(url, {\n            params\n        }).then((res)=>res.data);\n    }\n    constructor(apiService){\n        this.apiService = apiService;\n    }\n}\n","import { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { GetBannersByTypeCommand } from \"@/modules/banners/commands/getBannersByTypeCommand\";\nimport { GetFiltersCommand } from \"@/modules/products/commands/getNewFiltersCommnad\";\nimport { Modal } from \"antd\";\nimport { runInAction } from \"mobx\";\nimport { useLocalObservable } from \"mobx-react-lite\";\nimport { useEffect, useMemo } from \"react\";\nexport const HeroCategoryViewModel = (param)=>{\n    let { apiService  } = param;\n    const getFiltersCommand = useMemo(()=>new GetFiltersCommand(apiService), [\n        apiService\n    ]);\n    const getBannersByTypeCommand = useMemo(()=>new GetBannersByTypeCommand(apiService), [\n        apiService\n    ]);\n    useEffect(()=>{\n        actions.initialize({});\n    }, []);\n    const status = useLocalObservable(()=>({\n            errors: [],\n            initialized: false,\n            loading: false,\n            isCooperate: false,\n            _items: [],\n            _unitItems: [],\n            _mobileBannerItems: [],\n            mixpanelProperty: {\n                \"Product Category\": \"수업자료\",\n                \"Banner-nav-1depth\": null,\n                \"Banner-nav-2depth\": null,\n                \"Banner-nav-3depth\": null,\n                \"Banner-nav-4depth\": null\n            }\n        }));\n    const actions = useLocalObservable(()=>{\n        return {\n            _items: null,\n            _unitItems: null,\n            _mobileBannerItems: null,\n            async initialize (props) {\n                await this.getCategoryList();\n                await this.getMobileBanners();\n                status.initialized = true;\n                status.loading = false;\n            },\n            dispose () {},\n            get items () {\n                return status._items;\n            },\n            get unitItems () {\n                return status._unitItems;\n            },\n            get mobileBannerItems () {\n                return status._mobileBannerItems;\n            },\n            async getCategoryList () {\n                try {\n                    const response = await getFiltersCommand.execute({});\n                    const tempList = response.filter;\n                    const resultList = [];\n                    Object.keys(tempList).map((key, i)=>{\n                        resultList.push(tempList[key]);\n                    });\n                    status._items = resultList;\n                } catch (e) {\n                    Modal.error({\n                        title: \"메인 카테고리 리스트 조회 실패\",\n                        content: e.message\n                    });\n                }\n            },\n            async getExtraList (item) {\n                const resultType = \"unit_\" + item[\"type\"];\n                const query = {\n                    id: item[\"id\"],\n                    type: resultType\n                };\n                try {\n                    const response = await getFiltersCommand.execute(query);\n                    const tempList = response.children;\n                    let resultList = [];\n                    resultList.push({\n                        text: \"단원명\",\n                        subtitle: true\n                    });\n                    if (tempList) {\n                        for(let i = 0; i < tempList.length; i++){\n                            const temp = {\n                                text: tempList[i][\"unit\"],\n                                link: item.link + \"&unit=\" + tempList[i][\"unit\"]\n                            };\n                            resultList.push(temp);\n                        }\n                    }\n                    status._unitItems = resultList;\n                } catch (e) {\n                    Modal.error({\n                        title: \"카테고리 리스트 조회 실패\",\n                        content: e.message\n                    });\n                }\n            },\n            async getMobileBanners () {\n                try {\n                    const response = await getBannersByTypeCommand.execute({\n                        type: \"m_category\",\n                        offset: 0,\n                        limit: 10\n                    });\n                    status._mobileBannerItems = response.banners.banners;\n                } catch (e) {\n                    Modal.error({\n                        title: \"카테고리 배너 조회 실패\",\n                        content: e.message\n                    });\n                }\n            },\n            updateIsCooperate (isCooperate) {\n                runInAction(()=>{\n                    status.isCooperate = isCooperate;\n                });\n            },\n            getTempList (originList, idxList, depth, updateIsCooperate) {\n                let count = depth;\n                let loop = 0;\n                let resultList;\n                const selectList = (list)=>{\n                    var _list_listOrder;\n                    let listOrder = idxList[loop];\n                    count -= 1;\n                    let temp = list && listOrder >= 0 && list[listOrder] ? (_list_listOrder = list[listOrder]) === null || _list_listOrder === void 0 ? void 0 : _list_listOrder.children : undefined;\n                    if (count === 1 && loop < 1) resultList = temp;\n                    loop += 1;\n                    if (loop === depth - 1) resultList = temp;\n                    else {\n                        selectList(temp);\n                    }\n                    updateIsCooperate(idxList[0] === 3);\n                    return resultList;\n                };\n                selectList(originList);\n                return resultList;\n            },\n            onItemClick (metadata, item, clicked) {\n                switch(metadata){\n                    case 1:\n                        status.mixpanelProperty[\"Product Category\"] = item;\n                        break;\n                    case 2:\n                        status.mixpanelProperty[\"Banner-nav-1depth\"] = item;\n                        break;\n                    case 3:\n                        status.mixpanelProperty[\"Banner-nav-2depth\"] = item;\n                        break;\n                    case 4:\n                        status.mixpanelProperty[\"Banner-nav-3depth\"] = item;\n                        break;\n                    case 5:\n                        status.mixpanelProperty[\"Banner-nav-4depth\"] = item;\n                        break;\n                    default:\n                        break;\n                }\n                if (clicked) {\n                    mixpanelEvent(\"Searched from Banner-nav\", status.mixpanelProperty);\n                    status.mixpanelProperty = {\n                        \"Product Category\": \"수업자료\",\n                        \"Banner-nav-1depth\": null,\n                        \"Banner-nav-2depth\": null,\n                        \"Banner-nav-3depth\": null,\n                        \"Banner-nav-4depth\": null\n                    };\n                }\n            }\n        };\n    });\n    return useLocalObservable(()=>({\n            status,\n            actions\n        }));\n};\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  position: absolute;\\n  top: 0;\\n  left: 0;\\n  height: 100%;\\n  border-bottom: solid 1px \",\n        \";\\n  box-sizing: content-box;\\n  z-index: 20;\\n  \\n  @media (max-width: 1200px) {\\n\tdisplay: none;\\n  }\\n  @media (max-width: 768px) {\\n  }\\n\\n  .inner {\\n    display: flex;\\n    height: 100%;\\n    background-color: #fff;\\n\\n    .category_depth {\\n      position: relative;\\n      overflow-x: hidden;\\n      overflow-y: auto;\\n      width: \",\n        \"px;\\n      max-width: calc(100vw / \",\n        \");\\n      height: 100%;\\n      background-color: #fff;\\n      z-index: 9;\\n\\n      &::-webkit-scrollbar {\\n        position: relative;\\n        width: 4px;\\n        background-color: transparent;\\n      }\\n\\n      &::-webkit-scrollbar-thumb {\\n        width: 10px;\\n        border-radius: 2px;\\n        background: #bbbbbf;\\n      }\\n\\n      &:not(.category_depth1) {\\n        letter-spacing: -0.2px;\\n\t\theight: calc(100% - 16px);\\n\t\tmargin:8px 0;\\n\\n        &:not(.category_depth2) {\\n          border-left: solid 1px \",\n        \";\\n        }\\n\t\t\\n\t\t&:not(.category_depth6) {\\n\t\t  margin-right: 4px;\\n        }\\n\\n        li {\\n          &:nth-of-type(1) {\\n            &.subtitle {\\n              a,\\n              div {\\n                padding-top: 24px;\\n              }\\n            }\\n          }\\n\\n          &:not(:nth-of-type(1)) {\\n            &.subtitle {\\n              a,\\n              div {\\n                padding-top: 12px;\\n              }\\n            }\\n          }\\n\\n          &.subtitle {\\n            a,\\n            div {\\n              padding-top: 24px;\\n              font-size: 12px;\\n              font-weight: 600;\\n              color: \",\n        \";\\n            }\\n          }\\n\\n          &:not(.subtitle) {\\n            a,\\n            div {\\n              padding-top: 8px;\\n              padding-bottom: 8px;\\n            }\\n          }\\n\\n          &.hover {\\n            a,\\n            div {\\n              font-weight: bold;\\n              color: \",\n        \";\\n            }\\n          }\\n\\n          a,\\n          div {\\n            display: block;\\n            font-size: 14px;\\n            line-height: 16px;\\n            color: \",\n        \";\\n            padding-left: 24px;\\n            padding-right: 24px;\\n          }\\n        }\\n      }\\n\\n      &.category_depth2 {\\n        &.big-type {\\n          .subtitle {\\n            a,\\n            div {\\n              font-size: 20px;\\n              font-weight: bold;\\n              color: \",\n        \";\\n\\n              &:after {\\n                display: inline-block;\\n                vertical-align: bottom;\\n                content: '';\\n                width: 16px;\\n                height: 16px;\\n                margin-left: 4px;\\n                background: url('/static/assets/icon_right.svg') no-repeat;\\n              }\\n            }\\n          }\\n\\n          a,\\n          div {\\n            font-size: 16px;\\n            color: \",\n        \";\\n            padding-top: 16px;\\n            padding-bottom: 16px;\\n          }\\n\\n          li {\\n            &:nth-of-type(1) {\\n              padding-top: 6px;\\n            }\\n\\n            &:not(.subtitle) {\\n              a, div {\\n                padding-top: 15px;\\n                padding-bottom: 15px;\\n              }\\n\\n            }\\n          }\\n        }\\n      }\\n\\n      ul {\\n        padding-bottom: 16px;\\n\\n        li {\\n\t\t\tcursor: pointer;\\n        }\\n      }\\n    }\\n\\n    .category_depth1 {\\n      background-color: #1b1b29;\\n      z-index: 1;\\n\\n      li {\\n        display: flex;\\n\t\tmargin: 0 16px;\\n\\n        ul {\\n          display: none;\\n        }\\n\\n        &:nth-of-type(1) {\\n          position: relative;\\n          padding-top: 10px;\\n          padding-bottom: 8px;\\n          margin-bottom: 12px;\\n          border-bottom: solid 1px \",\n        \";\\n\\n\t\t  &:before{\\n\t\t\tposition: absolute;\\n\t\t\tbottom: 1px;\\n\t\t\tleft:0;\\n\t\t\tdisplay: block;\\n\t\t\tcontent: '';\\n\t\t\twidth: 100%;\\n\t\t\theight: 1px;\\n\t\t\tbackground-color: \",\n        \";\\n\t\t  }\\n        }\\n\\n        &.active {\\n          > a,\\n          > div {\\n            position: relative;\\n\\n            &:before {\\n              position: absolute;\\n              display: block;\\n              content: '';\\n              left: -6px;\\n              bottom: 18px;\\n              width: calc(100% + 12px);\\n              height: 20px;\\n              z-index: -1;\\n              background-color: \",\n        \";\\n            }\\n\\n            &:after {\\n              position: absolute;\\n              top: calc(50% - 2px);\\n              left: min(calc(100vw / \",\n        \"),\\n              \",\n        \"px);\\n              display: inline-block;\\n              content: '';\\n              width: 0;\\n              height: 0;\\n              margin-left: -32px;\\n              transform: translate(-100%, -50%);\\n              border-top: 10px solid transparent;\\n              border-bottom: 10px solid transparent;\\n              border-right: 10px solid #fff;\\n            }\\n          }\\n        }\\n\\n        > a,\\n        > div {\\n          display: inline-block;\\n          height: 64px;\\n          font-size: 24px;\\n          font-weight: 700;\\n          color: #fff;\\n          line-height: 60px;\\n          margin-left: 16px;\\n        }\\n      }\\n    }\\n\\n    .category_depth2 {\\n      margin-left: -4px; \\n    }\\n\t.category_depth3 {\\n\t}\\n\t\\n\t.category_depth4 {\\n\t}\\n\t\\n\t.category_depth5 {\\n\t}\\n\t\\n\t.category_depth6 {\\n\t}\\n  }\\n\\n}\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useMemo, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { observer } from \"mobx-react-lite\";\nimport { themeGet } from \"@styled-system/theme-get\";\nimport { useViewModel } from \"@/lib/viewModels\";\nimport { HeroCategoryViewModel } from \"@/modules/landings/home/MainContainer/viewModels/HeroCategoryViewModel\";\nimport { useApiService } from \"@/lib/apiService\";\nimport Link from \"next/link\";\nimport { debounce } from \"lodash\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nimport { useRouter } from \"next/router\";\nexport const HeroCategoryView = observer((param)=>{\n    let {} = param;\n    const [activeIdxes, setActiveIdxes] = useState([\n        0,\n        -1,\n        -1,\n        -1,\n        -1,\n        -1\n    ]);\n    const [unitItems, setUnitItems] = useState([]);\n    const apiService = useApiService();\n    const { status , actions  } = useViewModel({\n        apiService\n    }, HeroCategoryViewModel);\n    const { width  } = useWindowDimensions();\n    if (width <= 768) return null;\n    return /*#__PURE__*/ _jsx(HeroCategoryWrapper, {\n        children: /*#__PURE__*/ _jsx(\"div\", {\n            className: \"inner\",\n            children: activeIdxes.slice(0, 4).map((item, i)=>/*#__PURE__*/ _jsx(HeroCategory, {\n                    depth: i + 1,\n                    currentIdx: item,\n                    activeIdxes: activeIdxes,\n                    setActiveIdxes: setActiveIdxes,\n                    setUnitItems: setUnitItems,\n                    actions: actions,\n                    status: status\n                }, \"category_\".concat(i)))\n        })\n    });\n});\nexport const HeroCategory = observer((param)=>{\n    let { depth , currentIdx , activeIdxes , setActiveIdxes , setUnitItems , actions , status  } = param;\n    if (!status._items) return;\n    const debounceMouseOverHandler = useMemo(()=>debounce((item)=>{\n            actions.getExtraList(item).then(()=>{\n                if (actions.unitItems) setUnitItems(actions.unitItems);\n            });\n            actions.onItemClick(depth, item.text);\n        }, 300), []);\n    const router = useRouter();\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: depth === 1 ? /*#__PURE__*/ _jsx(\"div\", {\n            className: \"category_depth category_depth1\",\n            children: /*#__PURE__*/ _jsx(\"ul\", {\n                children: status._items.map((item, i)=>/*#__PURE__*/ _jsx(\"li\", {\n                        className: i === activeIdxes[0] ? \"active\" : \"\",\n                        onMouseOver: ()=>{\n                            setActiveIdxes([\n                                i,\n                                -1,\n                                -1,\n                                -1,\n                                -1,\n                                -1\n                            ]);\n                            setUnitItems([]);\n                            actions.onItemClick(depth, item.text);\n                        },\n                        children: item.hasOwnProperty(\"link\") ? /*#__PURE__*/ _jsx(Link, {\n                            href: item.link,\n                            children: item.text\n                        }) : /*#__PURE__*/ _jsx(\"div\", {\n                            children: item.text\n                        })\n                    }, \"item_\".concat(depth, \"_\").concat(i)))\n            })\n        }) : actions.getTempList(status._items, activeIdxes, depth, actions.updateIsCooperate) && /*#__PURE__*/ _jsx(\"div\", {\n            className: activeIdxes[depth - 1] >= 0 ? \"category_depth category_depth\".concat(depth, \" active\") : \"category_depth category_depth\".concat(depth),\n            children: /*#__PURE__*/ _jsx(\"ul\", {\n                children: actions.getTempList(status._items, activeIdxes, depth, actions.updateIsCooperate).map((item, i)=>{\n                    var _item_link;\n                    /*#__PURE__*/ return _jsx(\"li\", {\n                        className: item.subtitle ? \"subtitle\" : activeIdxes[depth - 1] === i ? \"hover\" : \"\",\n                        onMouseOver: ()=>{\n                            let newActiveCategories = [\n                                ...activeIdxes\n                            ];\n                            newActiveCategories[depth - 1] = i;\n                            if (depth < activeIdxes.length) {\n                                for(let i = depth; i < activeIdxes.length; i++){\n                                    newActiveCategories[i] = -1;\n                                }\n                            }\n                            if (depth > 3) {\n                                var _status__items_newActiveCategories__children_newActiveCategories__children_newActiveCategories_, _status__items_newActiveCategories__children_newActiveCategories_, _status__items_newActiveCategories_;\n                                const temp = (_status__items_newActiveCategories__children_newActiveCategories__children_newActiveCategories_ = (_status__items_newActiveCategories__children_newActiveCategories_ = (_status__items_newActiveCategories_ = status._items[newActiveCategories[0]]) === null || _status__items_newActiveCategories_ === void 0 ? void 0 : _status__items_newActiveCategories_.children[newActiveCategories[1]]) === null || _status__items_newActiveCategories__children_newActiveCategories_ === void 0 ? void 0 : _status__items_newActiveCategories__children_newActiveCategories_.children[newActiveCategories[2]]) === null || _status__items_newActiveCategories__children_newActiveCategories__children_newActiveCategories_ === void 0 ? void 0 : _status__items_newActiveCategories__children_newActiveCategories__children_newActiveCategories_.children[newActiveCategories[3]];\n                                if (temp) {\n                                    debounceMouseOverHandler(item);\n                                }\n                            } else {\n                                setUnitItems([]);\n                            }\n                            setActiveIdxes(newActiveCategories);\n                            actions.onItemClick(depth, item.text);\n                        },\n                        children: item.hasOwnProperty(\"link\") && (item === null || item === void 0 ? void 0 : (_item_link = item.link) === null || _item_link === void 0 ? void 0 : _item_link.length) > 0 ? /*#__PURE__*/ _jsx(\"div\", {\n                            onClick: ()=>{\n                                if (activeIdxes[0] === 1) {\n                                    const { key , value  } = searchKeywordBooks.find((book)=>{\n                                        return item.text === book.key;\n                                    });\n                                    if (value) {\n                                        router.push(\"/search?q=\" + value + \"&search_type=handout&subjects=EN\");\n                                        return;\n                                    }\n                                    router.push(\"/search?q=\" + item.key + \"&search_type=handout&subjects=EN\");\n                                    return;\n                                }\n                                router.push(item.link);\n                            },\n                            children: item.text\n                        }) : /*#__PURE__*/ _jsx(\"div\", {\n                            children: item.text\n                        })\n                    }, i);\n                })\n            })\n        })\n    });\n});\nexport const UnitCategory = observer((param)=>{\n    let { depth , currentIdx , activeIdxes , setActiveIdxes , categoryItems , onItemClick  } = param;\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsx(\"div\", {\n            className: \"category_depth category_depth\".concat(depth),\n            children: /*#__PURE__*/ _jsx(\"ul\", {\n                children: categoryItems.map((item, i)=>{\n                    var _item_link;\n                    /*#__PURE__*/ return _jsx(\"li\", {\n                        className: item.subtitle ? \"subtitle\" : i === activeIdxes[depth - 1] ? \"hover\" : \"\",\n                        onMouseOver: ()=>{\n                            let newActiveCategories = [\n                                ...activeIdxes\n                            ];\n                            newActiveCategories[depth - 1] = i;\n                            setActiveIdxes(newActiveCategories);\n                        },\n                        children: item.hasOwnProperty(\"link\") && (item === null || item === void 0 ? void 0 : (_item_link = item.link) === null || _item_link === void 0 ? void 0 : _item_link.length) > 0 ? /*#__PURE__*/ _jsx(Link, {\n                            href: item.link,\n                            onClick: ()=>onItemClick(depth, item.text, true),\n                            children: item.text\n                        }) : /*#__PURE__*/ _jsx(\"div\", {\n                            children: item.text\n                        })\n                    }, \"item_\".concat(depth, \"_\").concat(i));\n                })\n            })\n        })\n    });\n});\nexport const HERO_CATEGORY_WIDTH = 227;\nexport const HERO_CATEGORY_DIVIDE_AMOUNT = 6;\nexport const HERO_CATEGORY_BORDER_COLOR = \"#f3f3f3\";\nconst HeroCategoryWrapper = styled.div.withConfig({\n    componentId: \"sc-1633e363-0\"\n})(_templateObject(), HERO_CATEGORY_BORDER_COLOR, HERO_CATEGORY_WIDTH, HERO_CATEGORY_DIVIDE_AMOUNT, HERO_CATEGORY_BORDER_COLOR, themeGet(\"text.3\", \"#BBBBBF\"), themeGet(\"primary.0\", \"#002FA8\"), themeGet(\"text.0\", \"#1B1B29\"), themeGet(\"text.0\", \"#1B1B29\"), themeGet(\"text.0\", \"#1B1B29\"), (props)=>props.theme.new.colors.gray700, (props)=>props.theme.new.colors.darkBlack, themeGet(\"primary.0\", \"#002FA8\"), HERO_CATEGORY_DIVIDE_AMOUNT, HERO_CATEGORY_WIDTH);\n//임시 검색키워드\nconst searchKeywordBooks = [\n    {\n        key: \"NE능률 영어 (김)\",\n        value: \"능률김\"\n    },\n    {\n        key: \"NE능률 영어 (양)\",\n        value: \"능률양\"\n    },\n    {\n        key: \"YBM 영어 (박)\",\n        value: \"박준언\"\n    },\n    {\n        key: \"YBM 영어 (한)\",\n        value: \"한상호\"\n    },\n    {\n        key: \"지학사 영어 (민)\",\n        value: \"지학사\"\n    },\n    {\n        key: \"다락원 영어 (김)\",\n        value: \"다락원\"\n    },\n    {\n        key: \"NE능률 영어Ⅰ (김)\",\n        value: \"능률 영어1\"\n    },\n    {\n        key: \"YBM 영어Ⅰ (박)\",\n        value: \"ybm 영어1 박\"\n    },\n    {\n        key: \"YBM 영어Ⅰ (한)\",\n        value: \"ybm 영어1 한\"\n    },\n    {\n        key: \"지학사 영어Ⅰ (민)\",\n        value: \"지학사 영어1\"\n    },\n    {\n        key: \"다락원 영어Ⅰ (김)\",\n        value: \"다락원 영어1\"\n    },\n    {\n        key: \"NE능률 영어Ⅱ (김)\",\n        value: \"능률김 영어1\"\n    },\n    {\n        key: \"YBM 영어Ⅱ (박)\",\n        value: \"ybm 영어2 박\"\n    },\n    {\n        key: \"YBM 영어Ⅱ (한)\",\n        value: \"ybm 영어2 한\"\n    },\n    {\n        key: \"지학사 영어Ⅱ (민)\",\n        value: \"지학사 영어2\"\n    },\n    {\n        key: \"다락원 영어Ⅱ (김)\",\n        value: \"다락원 영어2\"\n    },\n    {\n        key: \"NE능률 독해와작문 (양)\",\n        value: \"독해와 작문 능률\"\n    },\n    {\n        key: \"YBM 독해와작문 (신)\",\n        value: \"독해와 작문 신\"\n    },\n    {\n        key: \"NE능률 실용영어 (김)\",\n        value: \"실용영어\"\n    },\n    {\n        key: \"YBM 실용영어 (박)\",\n        value: \"실용영어\"\n    },\n    {\n        key: \"NE능률 영어권문화 (김)\",\n        value: \"영어권문화\"\n    },\n    {\n        key: \"NE능률 진로영어 (김)\",\n        value: \"진로영어\"\n    },\n    {\n        key: \"YBM 진로영어 (박)\",\n        value: \"진로영어\"\n    },\n    {\n        key: \"NE능률 심화영어Ⅰ (허)\",\n        value: \"심화영어1\"\n    },\n    {\n        key: \"YBM 심화영어Ⅰ (신)\",\n        value: \"심화영어1\"\n    },\n    {\n        key: \"NE능률 심화영어Ⅱ (허)\",\n        value: \"심화영어2\"\n    },\n    {\n        key: \"YBM 심화영어독해Ⅰ (신)\",\n        value: \"심화영어독해1\"\n    },\n    {\n        key: \"NE능률 심화영어독해Ⅱ (허)\",\n        value: \"심화영어독해2\"\n    },\n    {\n        key: \"YBM 심화영어독해Ⅱ (신)\",\n        value: \"심화영어독해2\"\n    },\n    {\n        key: \"NE능률 심화영어작문 Ⅰ (허)\",\n        value: \"심화영어작문1\"\n    },\n    {\n        key: \"1316 팬클럽 독해 Level. 1\",\n        value: \"1316 팬클럽\"\n    },\n    {\n        key: \"1316 팬클럽 독해 Level. 2\",\n        value: \"1316 팬클럽\"\n    },\n    {\n        key: \"1316 팬클럽 독해 Level. 3\",\n        value: \"1316 팬클럽\"\n    },\n    {\n        key: \"기강잡고 고등 영어 기초 잡는 유형 독해\",\n        value: \"기강잡고 유형독해\"\n    },\n    {\n        key: \"기강잡고 고등 영어 독해 잡는 필수 문법\",\n        value: \"기강잡고 필수문법\"\n    },\n    {\n        key: \"능률 고급 영문독해\",\n        value: \"능률 고급 영문독해\"\n    },\n    {\n        key: \"능률 고등 기본영어\",\n        value: \"능률 기본영어\"\n    },\n    {\n        key: \"능률 VOCA 어원편\",\n        value: \"어원편\"\n    },\n    {\n        key: \"능률 보카 수능 실전편\",\n        value: \"능률 보카 수능\"\n    },\n    {\n        key: \"능률 특급 독해유형별 모의고사\",\n        value: \"특급\"\n    },\n    {\n        key: \"능률 특급 어법\",\n        value: \"특급\"\n    },\n    {\n        key: \"특급 수능ㆍEBS 기출 VOCA(2021)\",\n        value: \"특급\"\n    },\n    {\n        key: \"다빈출코드 학평기출문제집 영어영역 고1 독해(2023)\",\n        value: \"다빈출 고1\"\n    },\n    {\n        key: \"다빈출코드 학평기출문제집 영어영역 고2 독해(2023)\",\n        value: \"다빈출 고2\"\n    },\n    {\n        key: \"다빈출코드 고1 영어영역 독해 학평기출문제집(2022)\",\n        value: \"다빈출 고1\"\n    },\n    {\n        key: \"다빈출코드 고2 영어영역 독해 학평기출문제집(2022)\",\n        value: \"다빈출 고2\"\n    },\n    {\n        key: \"리딩튜터 기본\",\n        value: \"리딩튜터 기본\"\n    },\n    {\n        key: \"리딩튜터 실력\",\n        value: \"리딩튜터 실력\"\n    },\n    {\n        key: \"리딩튜터 수능 Plus\",\n        value: \"리딩튜터 수능\"\n    },\n    {\n        key: \"맞수 구문독해 기본편\",\n        value: \"맞수 구문독해 기본\"\n    },\n    {\n        key: \"맞수 구문독해 실전편\",\n        value: \"맞수 구문독해 실전\"\n    },\n    {\n        key: \"맞수 빈칸추론\",\n        value: \"맞수 빈칸추론\"\n    },\n    {\n        key: \"맞수 수능문법어법 기본편\",\n        value: \"맞수 수능문법어법 기본\"\n    },\n    {\n        key: \"맞수 수능문법어법 실전편\",\n        value: \"맞수 수능문법어법 실전\"\n    },\n    {\n        key: \"맞수 수능유형 기본편\",\n        value: \"맞수 수능유형 기본\"\n    },\n    {\n        key: \"맞수 수능유형 실전편\",\n        value: \"맞수 수능유형 실전\"\n    },\n    {\n        key: \"빠른독해 바른독해 기초세우기\",\n        value: \"빠바 기초\"\n    },\n    {\n        key: \"빠른독해 바른독해 구문독해\",\n        value: \"빠바 구문독해\"\n    },\n    {\n        key: \"빠른독해 바른독해 유형독해\",\n        value: \"빠바 유형독해\"\n    },\n    {\n        key: \"빠른독해 바른독해 종합실전편\",\n        value: \"빠바 종합\"\n    },\n    {\n        key: \"수능만만 기본 문법\\xb7어법\\xb7어휘 150제\",\n        value: \"수능만만 어휘\"\n    },\n    {\n        key: \"수능만만 영어 어법 어휘 228제(2022)\",\n        value: \"수능만만 228제\"\n    },\n    {\n        key: \"수능만만 영어독해 20회\",\n        value: \"수능만만 20회\"\n    },\n    {\n        key: \"수능만만 영어독해 기본 10+1회\",\n        value: \"수능만만 기본\"\n    },\n    {\n        key: \"수능유형 픽 PICK 독해 기본\",\n        value: \"픽 기본\"\n    },\n    {\n        key: \"수능유형 픽 PICK 독해 실력\",\n        value: \"픽 실력\"\n    },\n    {\n        key: \"얇고 빠른 수능 독해 입문 미니 모의고사 10+2회\",\n        value: \"얇빠 입문\"\n    },\n    {\n        key: \"얇고 빠른 수능 독해 기본 미니 모의고사 10+2회\",\n        value: \"얇빠 기본\"\n    },\n    {\n        key: \"얇고 빠른 수능 독해 실전 미니 모의고사 10+2회\",\n        value: \"얇빠 실전\"\n    },\n    {\n        key: \"초간단 수능영어 구문편 입문\",\n        value: \"초간단 구문 입문\"\n    },\n    {\n        key: \"초간단 수능영어 구문편 기본\",\n        value: \"초간단 구문 기본\"\n    },\n    {\n        key: \"초간단 수능영어 구문편 실전\",\n        value: \"초간단 구문 실전\"\n    },\n    {\n        key: \"초간단 수능영어 문법편 입문\",\n        value: \"초간단 문법 입문\"\n    },\n    {\n        key: \"초간단 수능영어 문법편 기본\",\n        value: \"초간단 문법 기본\"\n    },\n    {\n        key: \"초간단 수능영어 문법편 실전\",\n        value: \"초간단 문법 실전\"\n    },\n    {\n        key: \"초간단 수능영어 유형편 입문\",\n        value: \"초간단 유형 입문\"\n    },\n    {\n        key: \"초간단 수능영어 유형편 기본\",\n        value: \"초간단 유형 기본\"\n    },\n    {\n        key: \"초간단 수능영어 유형편 실전\",\n        value: \"초간단 유형 실전\"\n    },\n    {\n        key: \"Advanced Reading Expert 1\",\n        value: \"advanced\"\n    },\n    {\n        key: \"Advanced Reading Expert 2\",\n        value: \"advanced\"\n    },\n    {\n        key: \"Booster(부스터) 구문독해 (2022)\",\n        value: \"부스터 구문\"\n    },\n    {\n        key: \"Booster(부스터) 유형독해 (2022)\",\n        value: \"부스터 유형\"\n    },\n    {\n        key: \"Booster(부스터) 어법어휘 (2022)\",\n        value: \"부스터 어법\"\n    },\n    {\n        key: \"Booster(부스터) 구문독해 (2016)\",\n        value: \"부스터 구문\"\n    },\n    {\n        key: \"Booster(부스터) 유형독해 (2016)\",\n        value: \"부스터 유형\"\n    },\n    {\n        key: \"Booster(부스터) 어법어휘 (2016)\",\n        value: \"부스터 어법\"\n    },\n    {\n        key: \"고등 Reading Booster 영어독해 모의고사 10+2회 (기본)\",\n        value: \"리딩 부스터 10+2\"\n    },\n    {\n        key: \"고등 Reading Booster 영어독해 모의고사 15회\",\n        value: \"리딩부스터 15회\"\n    },\n    {\n        key: \"Reading Expert 1(리딩 엑스퍼트)\",\n        value: \"Reading Expert\"\n    },\n    {\n        key: \"Reading Expert 2(리딩 엑스퍼트)\",\n        value: \"Reading Expert\"\n    },\n    {\n        key: \"Reading Expert 3(리딩 엑스퍼트)\",\n        value: \"Reading Expert\"\n    },\n    {\n        key: \"Reading Expert 4(리딩 엑스퍼트)\",\n        value: \"Reading Expert\"\n    },\n    {\n        key: \"Reading Expert 5(리딩 엑스퍼트)\",\n        value: \"Reading Expert\"\n    },\n    {\n        key: \"Reading it 고등 독해완성 12회(2021)\",\n        value: \"Reading it 모의고사\"\n    },\n    {\n        key: \"The 상승 구문편\",\n        value: \"더상승 구문\"\n    },\n    {\n        key: \"The 상승 문법독해편\",\n        value: \"더상승 문법\"\n    },\n    {\n        key: \"The 상승 수능유형편\",\n        value: \"더상승 수능유형\"\n    },\n    {\n        key: \"The 상승 직독직해편\",\n        value: \"더상승 직독직해\"\n    },\n    {\n        key: \"NE능률 중학 영어1 (김)\",\n        value: \"중등 영어1 능률\"\n    },\n    {\n        key: \"NE능률 중학 영어1 (양)\",\n        value: \"중등 영어1 능률\"\n    },\n    {\n        key: \"YBM 중학 영어1 (박)\",\n        value: \"중등 영어1 ybm\"\n    },\n    {\n        key: \"YBM 중학 영어1 (송)\",\n        value: \"중등 영어1 ybm\"\n    },\n    {\n        key: \"지학사 중학 영어1 (민)\",\n        value: \"중등 영어1 지학사\"\n    },\n    {\n        key: \"다락원 중학 영어1 (강)\",\n        value: \"중등 영어1 다락원\"\n    },\n    {\n        key: \"NE능률 중학 영어2 (김)\",\n        value: \"중등 영어2 능률\"\n    },\n    {\n        key: \"NE능률 중학 영어2 (양)\",\n        value: \"중등 영어2 능률\"\n    },\n    {\n        key: \"YBM 중학 영어2 (박)\",\n        value: \"중등 영어2 ybm\"\n    },\n    {\n        key: \"YBM 중학 영어2 (송)\",\n        value: \"중등 영어2 ybm\"\n    },\n    {\n        key: \"지학사 중학 영어2 (민)\",\n        value: \"중등 영어2 지학사\"\n    },\n    {\n        key: \"다락원 중학 영어2 (강)\",\n        value: \"중등 영어2 다락원\"\n    },\n    {\n        key: \"NE능률 중학 영어3 (김)\",\n        value: \"중등 영어3 능률\"\n    },\n    {\n        key: \"NE능률 중학 영어3 (양)\",\n        value: \"중등 영어3 능률\"\n    },\n    {\n        key: \"YBM 중학 영어3 (박)\",\n        value: \"중등 영어3 (박)\"\n    },\n    {\n        key: \"YBM 중학 영어3 (송)\",\n        value: \"중등 영어3 (송)\"\n    },\n    {\n        key: \"지학사 중학 영어3 (민)\",\n        value: \"중등 영어3 지학사\"\n    },\n    {\n        key: \"다락원 중학 영어3 (강)\",\n        value: \"중등 영어3 다락원\"\n    },\n    {\n        key: \"알리GO 올리GO 중학 영어 독해 1\",\n        value: \"알리 독해\"\n    },\n    {\n        key: \"알리GO 올리GO 중학 영어 독해 2\",\n        value: \"알리 독해\"\n    },\n    {\n        key: \"알리GO 올리GO 중학 영어 독해 3\",\n        value: \"알리 독해\"\n    },\n    {\n        key: \"Reading Prime 4\",\n        value: \"프라임\"\n    },\n    {\n        key: \"Reading Prime 5\",\n        value: \"프라임\"\n    },\n    {\n        key: \"Reading Prime 6\",\n        value: \"프라임\"\n    }\n];\n","import { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { GetBannersByTypeCommand } from \"@/modules/banners/commands/getBannersByTypeCommand\";\nimport { Modal } from \"antd\";\nimport { useLocalObservable } from \"mobx-react-lite\";\nimport { useEffect, useMemo } from \"react\";\nexport const HeroListViewModel = (param)=>{\n    let { apiService  } = param;\n    const getBannersByTypeCommand = useMemo(()=>new GetBannersByTypeCommand(apiService), [\n        apiService\n    ]);\n    const status = useLocalObservable(()=>({\n            errors: [],\n            initialized: false,\n            loading: false\n        }));\n    const actions = useLocalObservable(()=>({\n            _items: [],\n            async initialize (props) {\n                await this.getHeroList({\n                    type: \"main\"\n                });\n                status.initialized = true;\n                status.loading = false;\n            },\n            dispose () {},\n            get items () {\n                return actions._items;\n            },\n            async getHeroList (query) {\n                try {\n                    const response = await getBannersByTypeCommand.execute(query);\n                    actions._items = response.banners.banners;\n                } catch (e) {\n                    Modal.error({\n                        title: \"메인 히어로 리스트 조회 실패\",\n                        content: e.message\n                    });\n                }\n            },\n            onItemClick (item) {\n                mixpanelEvent(\"Banner Clicked\", {\n                    \"Banner ID\": item.id,\n                    \"Banner Title\": item.title\n                });\n            }\n        }));\n    useEffect(()=>{\n        actions.initialize({});\n    }, []);\n    return useLocalObservable(()=>({\n            status,\n            actions\n        }));\n};\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  width: calc(100% - \",\n        \"px);\\n  margin-left: auto;\\n\\n  @media (max-width: 1200px) {\\n    width: calc(100% + 32px);\\n    margin: 0 -16px;\\n  }\\n  @media (max-width: 768px) {\\n  }\\n\\n  .ant-carousel {\\n    .slick-prev,\\n    .slick-next,\\n    .slick-prev:hover,\\n    .slick-next:hover,\\n    .slick-prev:focus,\\n    .slick-next:focus {\\n      font-size: 20px;\\n      color: #fff;\\n      background-color: black;\\n    }\\n\\n    .slick-prev,\\n    .slick-next {\\n      width: 24px;\\n      height: 48px;\\n      background: no-repeat 50% 50%;\\n      background-size: 16px;\\n      margin: 0;\\n      transition: background-color 0.3s ease;\\n      transform: translateY(-50%);\\n\\n      &,\\n      &:hover,\\n      &:focus {\\n        font-size: 0;\\n        z-index: 9;\\n        background-color: rgba(0, 47, 160, 0.06);\\n        border-radius: 2px;\\n        -webkit-backdrop-filter: blur(53px);\\n        backdrop-filter: blur(53px);\\n        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);\\n        border: solid 1px #fff;\\n      }\\n\\n      @media (hover: hover) {\\n        &:hover {\\n          background-color: rgba(255, 255, 255, 0.15);\\n        }\\n      }\\n\\n      @media (max-width: 768px) {\\n        width: 18px;\\n        height: 36px;\\n        background-size: 12px;\\n\\n        &:after {\\n          display: block;\\n          content: '';\\n          position: absolute;\\n          top: 50%;\\n          left: 50%;\\n          width: 300%;\\n          height: 300%;\\n          transform: translate(-50%, -50%);\\n        }\\n      }\\n    }\\n\\n    .slick-prev {\\n      left: 24px;\\n      background-image: url('/static/assets/left.svg');\\n\\n      @media (max-width: 768px) {\\n        left: 16px;\\n      }\\n    }\\n\\n    .slick-next {\\n      right: 24px;\\n      background-image: url('/static/assets/right.svg');\\n\\n      @media (max-width: 768px) {\\n        right: 16px;\\n      }\\n    }\\n\\n    .slick-dots-bottom {\\n      bottom: 24px;\\n\\n      @media (max-width: 768px) {\\n        bottom: 12px;\\n      }\\n\\n      li {\\n        width: 8px;\\n        height: 8px;\\n        margin: 0 6px;\\n\\n        &.slick-active {\\n          button {\\n            background-color: #fff;\\n          }\\n        }\\n\\n        button {\\n          height: 100%;\\n          border-radius: 0;\\n        }\\n\\n        @media (max-width: 768px) {\\n          width: 6px;\\n          height: 6px;\\n        }\\n      }\\n    }\\n  }\\n\\n  .carousel-item {\\n    position: relative;\\n\\n    &.clickDisabled a * {\\n      pointer-events: none;\\n    }\\n\\n    a {\\n      display: block;\\n\\n      & > p {\\n        position: absolute;\\n        top: 56px;\\n        left: 104px;\\n        font-size: 24px;\\n        font-weight: normal;\\n        color: #fff;\\n        line-height: 1.1;\\n        z-index: 9;\\n\\n        span {\\n          display: block;\\n          font-size: 88px;\\n          font-weight: bold;\\n          color: #fff;\\n          margin-top: 8px;\\n\\n          &:after {\\n            display: inline-block;\\n            vertical-align: bottom;\\n            content: '';\\n            width: 28px;\\n            height: 28px;\\n            margin-bottom: 12px;\\n            margin-left: 10px;\\n            border-radius: 50%;\\n            background-color: \",\n        \";\\n          }\\n\\n          &.mint:after {\\n            background-color: #2f3088;\\n          }\\n        }\\n\\n        @media (max-width: 1200px) {\\n          top: 56px;\\n          left: 80px;\\n          margin: 0 auto;\\n        }\\n        @media (max-width: 768px) {\\n          top: 24px;\\n          left: 60px;\\n          font-size: 16px;\\n          word-break: keep-all;\\n\\n          span {\\n            font-size: 40px;\\n            margin-top: 0;\\n\\n            &:after {\\n              width: 16px;\\n              height: 16px;\\n              margin-left: 8px;\\n              margin-bottom: 4px;\\n            }\\n          }\\n        }\\n      }\\n\\n      .sub-text {\\n        position: absolute;\\n        right: 32px;\\n        bottom: 24px;\\n        font-size: 16px;\\n        color: #fff;\\n        z-index: 1;\\n\\n        @media (max-width: 1200px) {\\n        }\\n        @media (max-width: 768px) {\\n          font-size: 14px;\\n        }\\n        @media (max-width: 410px) {\\n          right: 16px;\\n          bottom: 10px;\\n        }\\n      }\\n\\n      .ant-image {\\n        display: block;\\n        width: 100%;\\n\\n        img {\\n          object-fit: cover;\\n        }\\n\\n        .show_m {\\n          display: none;\\n        }\\n\\n        @media (max-width: 1200px) {\\n          img {\\n            object-fit: contain;\\n          }\\n        }\\n        @media (max-width: 768px) {\\n          .show_w {\\n            display: none;\\n          }\\n\\n          .show_m {\\n            display: block;\\n          }\\n        }\\n      }\\n\\n      .ant-image-mask {\\n        display: none;\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  .swiper-button-prev,\\n  .swiper-button-next {\\n    top: unset;\\n    left: unset;\\n    right: 48px;\\n    bottom: 24px;\\n    width: 32px;\\n    height: 32px;\\n    background: no-repeat 50% 50% rgba(0, 0, 0, 0.2);\\n    background-size: 16px;\\n\\n    &.swiper-button-disabled {\\n      opacity: 1;\\n    }\\n\\n    &:after {\\n      font-size: 0;\\n    }\\n\\n    @media (max-width: 768px) {\\n      bottom: 16px;\\n      width: 24px;\\n      height: 24px;\\n    }\\n  }\\n\\n  .swiper-button-prev {\\n    transform: translateX(calc(-100% - \",\n        \"px));\\n    border-bottom-left-radius: 50%;\\n    border-top-left-radius: 50%;\\n    background-image: url('/static/assets/left.svg');\\n  }\\n  .swiper-button-next {\\n    transform: translateX(\",\n        \"px);\\n    border-bottom-right-radius: 50%;\\n    border-top-right-radius: 50%;\\n    background-image: url('/static/assets/ico-right-white.svg');\\n  }\\n\\n  .swiper-pagination {\\n    top: unset;\\n    left: unset;\\n    right: 32px;\\n    bottom: 24px;\\n    display: flex;\\n    align-items: center;\\n    justify-content: center;\\n    font-size: 16px;\\n    font-weight: 400;\\n    color: #fff;\\n    height: 32px;\\n    width: \",\n        \"px;\\n    margin: 0 auto;\\n    transform: translateX(-50%);\\n    background-color: rgba(0, 0, 0, 0.2);\\n\\n    @media (max-width: 768px) {\\n      bottom: 16px;\\n      height: 24px;\\n      right: 24px;\\n      font-size: 14px;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useEffect, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Image } from \"antd\";\nimport Link from \"next/link\";\nimport { HOME_PAGE } from \"@/settings/constant\";\nimport { themeGet } from \"@styled-system/theme-get\";\nimport { HERO_CATEGORY_WIDTH } from \"@/modules/landings/home/MainContainer/views/HeroCategoryView\";\nimport { observer } from \"mobx-react-lite\";\nimport { useApiService } from \"@/lib/apiService\";\nimport { useViewModel } from \"@/lib/viewModels\";\nimport { HeroListViewModel } from \"@/modules/landings/home/MainContainer/viewModels/HeroListViewModel\";\nimport SwiperCore, { A11y, Autoplay, Navigation, Pagination, Scrollbar } from \"swiper\";\nimport { Swiper, SwiperSlide } from \"swiper/react\";\nimport \"swiper/swiper.min.css\";\nimport \"swiper/css/navigation\";\nimport \"swiper/css/pagination\";\nimport \"swiper/css/scrollbar\";\nexport const HeroListView = observer((param)=>{\n    let {} = param;\n    const apiService = useApiService();\n    const { status , actions  } = useViewModel({\n        apiService\n    }, HeroListViewModel);\n    const [swiperObj, setSwiperObj] = useState(null);\n    useEffect(()=>{\n        const currentPixelRatio = window.devicePixelRatio;\n        if (currentPixelRatio !== 1 && !!swiperObj) {\n            setTimeout(()=>{\n                swiperObj.slideTo(0, 0, false);\n            }, 100);\n        }\n    }, [\n        swiperObj\n    ]);\n    SwiperCore.use([\n        Navigation,\n        Pagination,\n        Scrollbar,\n        Autoplay,\n        A11y\n    ]);\n    const slideItems = actions.items.map((banner, idx)=>{\n        return /*#__PURE__*/ _jsx(SwiperSlide, {\n            children: /*#__PURE__*/ _jsx(\"div\", {\n                className: banner.link ? \"carousel-item clickDisabled\" : \"carousel-item\",\n                children: /*#__PURE__*/ _jsxs(Link, {\n                    onClick: ()=>actions.onItemClick(banner),\n                    href: banner.link ? banner.link : HOME_PAGE,\n                    target: banner.link_type === 20 ? \"_blank\" : \"_self\",\n                    children: [\n                        /*#__PURE__*/ _jsx(Image, {\n                            className: banner.link ? \"show_w clickDisabled\" : \"show_w\",\n                            style: contentStyle,\n                            src: banner.image.url,\n                            alt: \"\".concat(banner.id, \"-img\")\n                        }),\n                        /*#__PURE__*/ _jsx(Image, {\n                            className: banner.link ? \"show_m clickDisabled\" : \"show_m\",\n                            style: contentMobileStyle,\n                            src: banner.image.url,\n                            alt: \"\".concat(banner.id, \"-img\")\n                        })\n                    ]\n                })\n            }, banner.id)\n        }, \"item-\".concat(idx));\n    });\n    return /*#__PURE__*/ _jsx(Container, {\n        children: slideItems && /*#__PURE__*/ _jsx(PaginationStyledSwiper, {\n            resistanceRatio: 2,\n            navigation: true,\n            pagination: {\n                type: \"fraction\"\n            },\n            autoplay: {\n                delay: 4000\n            },\n            loop: true,\n            onSwiper: (swiper)=>setSwiperObj(swiper),\n            className: \"name\",\n            children: slideItems\n        })\n    });\n});\nconst contentStyle = {\n    margin: 0,\n    height: \"373px\",\n    color: \"#fff\",\n    lineHeight: \"373px\",\n    textAlign: \"center\",\n    background: \"#151515\"\n};\nconst contentMobileStyle = {\n    margin: 0,\n    height: \"auto\",\n    color: \"#fff\",\n    lineHeight: \"168px\",\n    textAlign: \"center\",\n    background: \"#364d79\"\n};\nconst Container = styled.div.withConfig({\n    componentId: \"sc-b1f908f4-0\"\n})(_templateObject(), HERO_CATEGORY_WIDTH * 2, themeGet(\"primary.1\", \"#008489\"));\nexport const paginationWidth = 48;\nexport const PaginationStyledSwiper = styled(Swiper).withConfig({\n    componentId: \"sc-b1f908f4-1\"\n})(_templateObject1(), paginationWidth / 2, paginationWidth / 2, paginationWidth);\n","import { toQueryString } from \"src/utils/misc\";\nimport { api } from \".\";\nexport var BannerType;\n(function(BannerType) {\n    BannerType[\"best\"] = \"best\";\n    BannerType[\"quality\"] = \"quality\";\n    BannerType[\"bestLabs\"] = \"best_labs\";\n    BannerType[\"brand\"] = \"brand\";\n    BannerType[\"notice\"] = \"notice\";\n    BannerType[\"pick\"] = \"pick\";\n    BannerType[\"md1\"] = \"md1\";\n    BannerType[\"md2\"] = \"md2\";\n    BannerType[\"md3\"] = \"md3\";\n    BannerType[\"md4\"] = \"md4\";\n    BannerType[\"md5\"] = \"md5\";\n    BannerType[\"md6\"] = \"md6\";\n})(BannerType || (BannerType = {}));\nexport const fetchBanners = async (param)=>{\n    let { type , isMdType , withHeader , offset , limit  } = param;\n    const { data  } = await api.get(\"/banners/\".concat(toQueryString({\n        type,\n        isMdType,\n        withHeader,\n        offset,\n        limit\n    })));\n    return data;\n};\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  position: relative;\\n  padding-bottom: 75px;\\n\\n  @media (max-width: 768px) {\\n    padding-bottom: 48px;\\n  }\\n\\n  &:before {\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n    display: block;\\n    content: '';\\n    width: 150vw;\\n    height: 100%;\\n    background-color: \",\n        \";\\n    z-index: 0;\\n    transform: translateX(-25%);\\n\\n    @media (max-width: 1200px) {\\n    }\\n    @media (max-width: 768px) {\\n      display: none;\\n    }\\n  }\\n\\n  .title {\\n    position: relative;\\n    font-size: 24px;\\n    font-weight: 800;\\n    color: \",\n        \";\\n    padding: 74px 0 52px;\\n    margin: 0;\\n\\n    @media (max-width: 1200px) {\\n      padding: 40px 0 32px;\\n    }\\n    @media (max-width: 768px) {\\n      font-size: 18px;\\n      padding-bottom: 24px;\\n    }\\n\\n    span.hot {\\n      display: inline-block;\\n      vertical-align: text-top;\\n      font-family: 'Montserrat', sans-serif;\\n      font-size: 16px;\\n      font-weight: bold;\\n      color: #ff5252;\\n      margin-top: 4px;\\n      margin-left: 6px;\\n\\n      span {\\n        opacity: 0.5;\\n      }\\n\\n      @media (max-width: 768px) {\\n        font-size: 14px;\\n        margin-top: 2px;\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: row;\\n  overflow: visible;\\n  padding: 0;\\n  margin: 0 -12px;\\n\\n  ::-webkit-scrollbar {\\n    display: none;\\n  }\\n\\n  .wrap-vertical::-webkit-scrollbar {\\n    display: none;\\n  }\\n\\n  @media (max-width: 768px) {\\n    overflow: visible;\\n    padding: 0;\\n    margin: 0 -8px;\\n  }\\n\\n  .alice-carousel {\\n    .alice-carousel__prev-btn,\\n    .alice-carousel__next-btn {\\n      position: absolute;\\n      top: -60px;\\n      width: 48px;\\n      height: 48px;\\n      padding: 0;\\n      border-radius: 2px;\\n      background-color: #000;\\n      transform: translateY(-50%);\\n      transition: opacity 0.2s;\\n      z-index: 9;\\n\\n      &:hover {\\n        opacity: 0.75;\\n      }\\n\\n      &-wrapper {\\n        height: 100%;\\n      }\\n\\n      &-item {\\n        width: 100%;\\n        height: 100%;\\n        padding: 0;\\n        background: no-repeat 50% 50%;\\n        background-size: 22px;\\n\\n        span {\\n          display: none;\\n        }\\n      }\\n\\n      @media (max-width: 1200px) {\\n        top: -48px;\\n      }\\n      @media (max-width: 768px) {\\n        width: 36px;\\n        height: 36px;\\n        top: -36px;\\n      }\\n    }\\n\\n    .alice-carousel__prev-btn {\\n      right: 72px;\\n\\n      @media (max-width: 768px) {\\n        right: 54px;\\n      }\\n\\n      &-item {\\n        background-image: url('/static/assets/left.svg');\\n      }\\n    }\\n\\n    .alice-carousel__next-btn {\\n      right: 12px;\\n\\n      @media (max-width: 768px) {\\n        right: 4px;\\n      }\\n\\n      &-item {\\n        background-image: url('/static/assets/right.svg');\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  position: relative;\\n  padding-top: 82px;\\n  margin: -82px -10px 0;\\n\\n  @media (max-width: 1200px) {\\n    padding-top: 62px;\\n    margin: -62px -8px 0;\\n  }\\n\\n  @media (max-width: 768px) {\\n    padding-top: 46px;\\n    margin: -46px -4px 0;\\n  }\\n\\n  .swiper-button-prev,\\n  .swiper-button-next {\\n    top: 0;\\n    right: 0;\\n    left: unset;\\n    bottom: unset;\\n    width: 32px;\\n    height: 32px;\\n    margin: 0;\\n    border-radius: 2px;\\n    background: no-repeat 50% 50% rgba(27, 27, 41, 0.4);\\n    background-size: 20px;\\n    @media (hover: hover) {\\n      &:hover {\\n        transition: 0.2s linear;\\n        background-color: rgba(27, 27, 41, 0.6);\\n      }\\n    }\\n\\n    &.swiper-button-disabled {\\n      opacity: 1;\\n    }\\n\\n    &:after {\\n      font-size: 0;\\n    }\\n\\n    @media (max-width: 768px) {\\n      width: 24px;\\n      height: 24px;\\n    }\\n  }\\n\\n  .swiper-button-prev {\\n    right: 0;\\n    transform: translateX(calc(-100% - 10px - 12px));\\n    // border-bottom-left-radius: 50%;\\n    // border-top-left-radius: 50%;\\n    background-image: url('/static/assets/left.svg');\\n\\n    @media (max-width: 768px) {\\n      transform: translateX(calc(-100% - 12px));\\n    }\\n  }\\n\\n  .swiper-button-next {\\n    transform: translateX(-10px);\\n    // border-bottom-right-radius: 50%;\\n    // border-top-right-radius: 50%;\\n    background-image: url('/static/assets/ico-right-white.svg');\\n\\n    @media (max-width: 768px) {\\n      transform: none;\\n    }\\n  }\\n\\n  .swiper-pagination {\\n    top: 0;\\n    right: 18px;\\n    left: unset;\\n    bottom: unset;\\n    display: flex;\\n    align-items: center;\\n    justify-content: center;\\n    font-size: 16px;\\n    font-weight: 400;\\n    color: #fff;\\n    height: 32px;\\n    width: \",\n        \"px;\\n    margin: 0 auto;\\n    transform: translateX(-50%);\\n    background-color: rgba(0, 0, 0, 0.2);\\n    @media (max-width: 768px) {\\n      height: 24px;\\n      font-size: 14px;\\n      transform: translateX(-6px);\\n    }\\n  }\\n\\n  @media (max-width: 768px) {\\n    .swiper-button-prev, .swiper-button-next {\\n      display: none;\\n    }\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject4() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  margin: 0 12px;\\n  transition: transform 0.5s, opacity 0.5s;\\n\\n  @media (max-width: 1200px) {\\n    margin: 0 8px;\\n  }\\n\\n  @media (max-width: 768px) {\\n    margin: 0 4px;\\n  }\\n\\n  @media (hover: hover) {\\n    &:hover {\\n      opacity: 0.7;\\n    }\\n  }\\n\\n  .next {\\n    translate: -100vw;\\n  }\\n\\n  .prev {\\n    translate: 100vw;\\n  }\\n\\n  img {\\n    width: 100%;\\n    height: 232px;\\n    object-fit: cover;\\n    border: solid 1px #e8e8ea;\\n\\n    @media (max-width: 1200px) {\\n      height: calc((100vw - 80px) / 5 * 1.4);\\n    }\\n    @media (max-width: 768px) {\\n      height: calc((100vw - 28px) / 4 * 1.4);\\n    }\\n    @media (max-width: 410px) {\\n      height: calc((100vw - 32px) / 3 * 1.4);\\n    }\\n    @media (max-width: 360px) {\\n      height: calc((100vw - 24px) / 2 * 1.4);\\n    }\\n  }\\n\\n  p {\\n    font-size: 16px;\\n    line-height: 1.5;\\n    color: \",\n        \";\\n    letter-spacing: -0.5px;\\n  }\\n\\n  .book_type {\\n    display: inline-block;\\n    vertical-align: middle;\\n    height: 20px;\\n    font-size: 12px;\\n    color: #5f5f69;\\n    line-height: 20px;\\n    padding: 0 6px;\\n    margin-top: 13px;\\n    border: solid 1px #d9d9d9;\\n    border-radius: 2px;\\n    background-color: #fafafa;\\n  }\\n\\n  .ico-edit {\\n    width: 75px;\\n    height: 20px;\\n    margin-top: 13px;\\n    border: none;\\n    margin-left: 8px;\\n  }\\n\\n  .book_title {\\n    text-overflow: ellipsis;\\n    overflow: hidden;\\n    word-break: break-word;\\n    display: -webkit-box;\\n    -webkit-line-clamp: 1;\\n    -webkit-box-orient: vertical;\\n    font-weight: bold;\\n    margin-top: 9px;\\n    margin-bottom: 0;\\n\\n    @media (max-width: 768px) {\\n      font-size: 15px;\\n    }\\n  }\\n\\n  .book_author {\\n    font-size: 14px;\\n    color: \",\n        \";\\n    text-overflow: ellipsis;\\n    overflow: hidden;\\n    word-break: break-word;\\n    display: -webkit-box;\\n    -webkit-line-clamp: 1;\\n    -webkit-box-orient: vertical;\\n    margin-top: 4px;\\n  }\\n\"\n    ]);\n    _templateObject4 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { DefaultLoadingContainer } from \"@/components/DefaultLoadingContainer\";\nimport apiService from \"@/lib/apiService/apiService\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { paginationWidth } from \"@/modules/landings/home/MainContainer/views/HeroListView\";\nimport { GetBestSellingProductsCommand } from \"@/modules/products/commands/getBestSellingProductsCommand\";\nimport { themeGet } from \"@styled-system/theme-get\";\nimport { useQueries } from \"@tanstack/react-query\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport React from \"react\";\nimport \"react-alice-carousel/lib/alice-carousel.css\";\nimport styled from \"styled-components\";\nimport SwiperCore, { Navigation, Pagination } from \"swiper\";\nimport \"swiper/css/navigation\";\nimport \"swiper/css/pagination\";\nimport \"swiper/css/scrollbar\";\nimport { Swiper, SwiperSlide } from \"swiper/react\";\nimport \"swiper/swiper.min.css\";\nimport { BannerType, fetchBanners } from \"../../../../../api/banner\";\nexport const RecommendProductSlideList = (param)=>{\n    let { dataSource , title  } = param;\n    SwiperCore.use([\n        Navigation,\n        Pagination\n    ]);\n    return /*#__PURE__*/ _jsxs(RecommendProductSlideListWrapper, {\n        children: [\n            /*#__PURE__*/ _jsx(\"p\", {\n                className: \"title\",\n                children: title\n            }),\n            /*#__PURE__*/ _jsx(TopPaginationStyledSwiper, {\n                slidesPerView: 6,\n                loop: true,\n                navigation: true,\n                breakpoints: {\n                    1200: {\n                        slidesPerView: 6\n                    },\n                    768: {\n                        slidesPerView: 5\n                    },\n                    410: {\n                        slidesPerView: 3\n                    },\n                    0: {\n                        slidesPerView: 2\n                    }\n                },\n                onSlideChange: ()=>mixpanelEvent(\"Product Recommendation Carousel Clicked\"),\n                className: \"name\",\n                children: dataSource.map((favorite, i)=>{\n                    return /*#__PURE__*/ _jsx(SwiperSlide, {\n                        children: /*#__PURE__*/ _jsx(BookList, {\n                            onDragStart: (e)=>e.preventDefault(),\n                            role: \"presentation\",\n                            children: /*#__PURE__*/ _jsxs(Link, {\n                                onClick: ()=>mixpanelEvent(\"Product Recommendation Clicked\", {\n                                        \"Product ID\": favorite.id,\n                                        \"Product Name\": favorite.title\n                                    }),\n                                href: \"/products/\".concat(favorite.id),\n                                children: [\n                                    /*#__PURE__*/ _jsx(Image, {\n                                        alt: \"book_img\",\n                                        src: favorite.thumb_img,\n                                        width: 175,\n                                        height: 248\n                                    }),\n                                    /*#__PURE__*/ _jsxs(\"div\", {\n                                        children: [\n                                            /*#__PURE__*/ _jsx(\"p\", {\n                                                className: \"book_title\",\n                                                children: favorite.title\n                                            }),\n                                            /*#__PURE__*/ _jsx(\"div\", {\n                                                className: \"book_author\",\n                                                children: favorite === null || favorite === void 0 ? void 0 : favorite.author\n                                            })\n                                        ]\n                                    })\n                                ]\n                            })\n                        }, favorite.id)\n                    }, \"item-\".concat(i));\n                })\n            })\n        ]\n    });\n};\nconst fetchBestSales = async (query)=>{\n    const getBestSellingProductsCommand = new GetBestSellingProductsCommand(apiService);\n    return await getBestSellingProductsCommand.execute({\n        source_type: query\n    });\n};\nexport const ProductRecommendSection = ()=>{\n    const recommendProducts = [\n        BannerType.md1,\n        BannerType.md2\n    ];\n    //contents\n    const bestSalesData = useQueries({\n        queries: recommendProducts.map((md)=>({\n                queryKey: [\n                    \"bestHandout\",\n                    md\n                ],\n                queryFn: ()=>fetchBestSales(md),\n                retry: 1\n            }))\n    });\n    //title\n    const recommendProductsData = useQueries({\n        queries: recommendProducts.map((md)=>({\n                queryKey: [\n                    \"productRecommendList\",\n                    md\n                ],\n                queryFn: ()=>fetchBanners({\n                        type: md,\n                        isMdType: true,\n                        withHeader: true\n                    }),\n                retry: 1\n            }))\n    });\n    if (!bestSalesData.every((data)=>data.status === \"success\") || !recommendProductsData.every((data)=>data.status === \"success\")) {\n        return /*#__PURE__*/ _jsx(DefaultLoadingContainer, {\n            title: \"데이터를 불러오는 중입니다.\"\n        });\n    }\n    return /*#__PURE__*/ _jsx(ListWrap, {\n        children: bestSalesData.map((products, index)=>{\n            if (products.data.products.products.length === 0) return null;\n            const header = recommendProductsData[index].data.banners.header;\n            const { products: dataSource  } = products.data.products;\n            if (dataSource.length < 12) {\n                dataSource.push(...dataSource);\n            }\n            return /*#__PURE__*/ _jsx(RecommendProductSlideList, {\n                dataSource: dataSource,\n                title: header.display_title\n            }, \"curation\" + index);\n        })\n    });\n};\nconst RecommendProductSlideListWrapper = styled.div.withConfig({\n    componentId: \"sc-c1a05fe3-0\"\n})(_templateObject());\nconst ListWrap = styled.div.withConfig({\n    componentId: \"sc-c1a05fe3-1\"\n})(_templateObject1(), themeGet(\"background.1\", \"#F5F8FB\"), themeGet(\"text.0\", \"#1B1B29\"));\nexport const SlideWrap = styled.div.withConfig({\n    componentId: \"sc-c1a05fe3-2\"\n})(_templateObject2());\nexport const TopPaginationStyledSwiper = styled(Swiper).withConfig({\n    componentId: \"sc-c1a05fe3-3\"\n})(_templateObject3(), paginationWidth);\nconst BookList = styled.div.withConfig({\n    componentId: \"sc-c1a05fe3-4\"\n})(_templateObject4(), themeGet(\"text.0\", \"#1B1B29\"), themeGet(\"text.0\", \"#1B1B29\"));\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  background-color: #fdfdff;\\n  display: flex;\\n  flex-direction: column;\\n\\n  div,\\n  a,\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6,\\n  p {\\n    color: \",\n        \";\\n  }\\n\\n  @media (max-width: 1200px) {\\n    padding: 0 20px;\\n  }\\n  @media (max-width: 768px) {\\n    padding: 0;\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  font-size: 32px;\\n  font-weight: bold;\\n  text-align: center;\\n  line-height: 1.5;\\n  word-break: keep-all;\\n  padding: 88px 0 80px;\\n\\n  &:nth-of-type(1) {\\n    padding: 96px 0 64px;\\n  }\\n\\n  span {\\n    display: block;\\n    font-size: 24px;\\n    font-weight: normal;\\n    line-height: 1.5;\\n    margin-top: 36px;\\n  }\\n\\n  @media (max-width: 1200px) {\\n    font-size: 28px;\\n    padding: 64px 0 48px;\\n\\n    span {\\n      font-size: 22px;\\n    }\\n  }\\n  @media (max-width: 768px) {\\n    font-size: 22px;\\n    padding: 48px 0 24px;\\n\\n    span {\\n      font-size: 18px;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  img {\\n    display: block;\\n    width: 100%;\\n    max-width: 914px;\\n    margin: 0 auto;\\n  }\\n\\n  .inner {\\n    display: flex;\\n    word-break: keep-all;\\n    padding: 48px 64px 48px 56px;\\n    margin-top: 112px;\\n    background-color: rgba(255, 76, 17, 0.04);\\n\\n    .title {\\n      width: 290px;\\n      font-size: 24px;\\n      font-weight: bold;\\n      color: #ff4c11;\\n      line-height: 1.35;\\n\\n      &:before {\\n        display: inline-block;\\n        content: '';\\n        vertical-align: baseline;\\n        width: 16px;\\n        height: 16px;\\n        margin-right: 16px;\\n        border-radius: 50%;\\n        background-color: #ff4c11;\\n      }\\n    }\\n\\n    .text {\\n      flex: 1;\\n      font-size: 24px;\\n      color: \",\n        \";\\n      line-height: 1.5;\\n    }\\n\\n    @media (max-width: 1200px) {\\n      .title {\\n        font-size: 22px;\\n      }\\n\\n      .text {\\n        font-size: 22px;\\n      }\\n    }\\n    @media (max-width: 768px) {\\n      display: block;\\n      padding: 24px 48px 24px 36px;\\n\\n      .title {\\n        font-size: 20px;\\n\\n        &:before {\\n          vertical-align: middle;\\n          width: 8px;\\n          height: 8px;\\n          margin-right: 8px;\\n        }\\n      }\\n\\n      .text {\\n        font-size: 20px;\\n        margin-top: 16px;\\n      }\\n    }\\n    @media (max-width: 500px) {\\n      padding: 24px;\\n\\n      .title {\\n        font-size: 18px;\\n      }\\n\\n      .text {\\n        font-size: 16px;\\n      }\\n    }\\n  }\\n\\n  ,\\n  @media(max-width: 1200 px) {\\n  }\\n  @media (max-width: 768px) {\\n  }\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: row;\\n  align-items: center;\\n  justify-content: center;\\n  gap: 24px;\\n  width: 996px;\\n  text-align: center;\\n  margin: 0 auto;\\n  background-color: rgba(255, 255, 255, 0.1);\\n\\n  @media (max-width: 1200px) {\\n    width: 100%;\\n  }\\n  @media (max-width: 768px) {\\n    display: block;\\n  }\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject4() {\n    const data = _tagged_template_literal([\n        \"\\n      border-bottom: 2px solid #00bfc8;\\n    \"\n    ]);\n    _templateObject4 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject5() {\n    const data = _tagged_template_literal([\n        \"\\n  width: 100%;\\n  font-size: 24px;\\n  color: #fff;\\n  text-align: center;\\n  padding: 15px 15px 16px;\\n  border-bottom: 1px solid rgba(27, 27, 41, 0.1);\\n  transition: all 0.2s;\\n\\n  &.active {\\n    color: #00bfc8;\\n    font-weight: bold;\\n    padding-bottom: 15px;\\n  }\\n\\n  @media (hover: hover) {\\n    &:hover {\\n      color: #00bfc8;\\n      padding-bottom: 15px;\\n      border-bottom: 2px solid #00bfc8;\\n    }\\n  }\\n\\n  \",\n        \";\\n\\n  @media (max-width: 1200px) {\\n    font-size: 18px;\\n  }\\n  @media (max-width: 768px) {\\n    font-size: 14px;\\n    padding: 8px;\\n\\n    &.active,\\n    &:hover {\\n      padding-bottom: 7px;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject5 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject6() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: row;\\n  align-items: center;\\n  justify-content: space-around;\\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\\n\"\n    ]);\n    _templateObject6 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject7() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  padding: 24px 0 26px;\\n\\n  &:not(:nth-of-type(1)) {\\n    position: relative;\\n\\n    &:before {\\n      position: absolute;\\n      top: 50%;\\n      left: -12px;\\n      display: block;\\n      content: '';\\n      width: 1px;\\n      height: 100%;\\n      background-color: \",\n        \";\\n      transform: translateY(-50%);\\n    }\\n  }\\n\\n  .inner {\\n    font-size: 24px;\\n    line-height: 1.5;\\n\\n    span {\\n      display: block;\\n      font-weight: bold;\\n      line-height: 1.35;\\n      margin-bottom: 8px;\\n    }\\n  }\\n\\n  @media (max-width: 1200px) {\\n    padding: 0 0 24px;\\n\\n    .inner {\\n      font-size: 20px;\\n    }\\n  }\\n  @media (max-width: 768px) {\\n    flex-direction: row;\\n    align-items: center;\\n    padding-bottom: 8px;\\n\\n    &:not(:nth-of-type(1)) {\\n      &:before {\\n        top: 0;\\n        left: 0;\\n        width: 100%;\\n        height: 1px;\\n      }\\n    }\\n\\n    img {\\n      width: 30%;\\n      min-width: 100px;\\n      margin: 0 5%;\\n    }\\n\\n    .inner {\\n      flex: 1;\\n    }\\n  }\\n  @media (max-width: 410px) {\\n    img {\\n      margin: 0;\\n    }\\n\\n    .inner {\\n      font-size: 16px;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject7 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject8() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  align-items: center;\\n  text-align: center;\\n  padding-bottom: 115px;\\n\\n  @media (max-width: 1200px) {\\n  }\\n  @media (max-width: 768px) {\\n    padding-bottom: 72px;\\n  }\\n\\n  .ant-modal-close {\\n    margin: 5px;\\n  }\\n\\n  section {\\n    &:not(:nth-of-type(1)) > div {\\n      padding-top: 96px;\\n\\n      @media (max-width: 1200px) {\\n      }\\n      @media (max-width: 768px) {\\n        padding-top: 56px;\\n      }\\n    }\\n\\n    &:nth-of-type(1) {\\n      padding-top: 88px;\\n\\n      @media (max-width: 1200px) {\\n        padding-top: 56px;\\n      }\\n      @media (max-width: 768px) {\\n        padding-top: 72px;\\n      }\\n    }\\n\\n    .bubble {\\n      position: relative;\\n      display: inline-block;\\n      vertical-align: middle;\\n      font-size: 16px;\\n      color: #190082;\\n      letter-spacing: -0.5px;\\n      padding: 13px 20px;\\n      margin: 0 auto;\\n      background-color: #fff;\\n\\n      &:before {\\n        position: absolute;\\n        bottom: 0;\\n        left: 0;\\n        right: 0;\\n        display: block;\\n        content: '';\\n        width: 0;\\n        height: 0;\\n        margin: 0 auto;\\n        border-left: 6px solid transparent;\\n        border-right: 6px solid transparent;\\n        border-top: 8px solid #fff;\\n        transform: translateY(100%);\\n      }\\n\\n      span {\\n        font-weight: bold;\\n      }\\n\\n      @media (max-width: 1200px) {\\n      }\\n      @media (max-width: 768px) {\\n        font-size: 14px;\\n        padding: 8px 12px;\\n      }\\n    }\\n\\n    .comment {\\n      font-size: 24px;\\n      line-height: 1.5;\\n      color: rgba(255, 255, 255, 0.5);\\n      text-align: right;\\n      margin: 50px 0 0;\\n\\n      @media (max-width: 1200px) {\\n        font-size: 20px;\\n      }\\n      @media (max-width: 768px) {\\n        font-size: 16px;\\n        margin-top: 36px;\\n        margin-right: 16px;\\n      }\\n    }\\n\\n    .title {\\n      font-size: 24px;\\n      font-weight: bold;\\n      margin-top: 26px;\\n\\n      &:before {\\n        display: block;\\n        content: '';\\n        width: 23px;\\n        height: 21px;\\n        margin: 0 auto 26px;\\n        background: url('/static/assets/icon_quote.jpg') no-repeat 50% 50%;\\n        background-size: contain;\\n      }\\n\\n      @media (max-width: 1200px) {\\n        font-size: 20px;\\n      }\\n      @media (max-width: 768px) {\\n        font-size: 18px;\\n\\n        &:before {\\n          width: 16px;\\n          height: 14px;\\n          margin-bottom: 16px;\\n        }\\n      }\\n    }\\n\\n    .description {\\n      font-size: 24px;\\n      line-height: 1.5;\\n      margin-top: 24px;\\n      margin-bottom: 0;\\n\\n      @media (max-width: 1200px) {\\n        font-size: 20px;\\n        margin-top: 16px;\\n      }\\n      @media (max-width: 768px) {\\n        font-size: 16px;\\n        margin-top: 8px;\\n      }\\n    }\\n\\n    img {\\n      margin-top: 56px;\\n\\n      @media (max-width: 1200px) {\\n      }\\n      @media (max-width: 768px) {\\n        width: 90%;\\n        margin-top: 24px;\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject8 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject9() {\n    const data = _tagged_template_literal([\n        \"\\n  position: relative;\\n  margin-top: 104px;\\n\\n  &:before {\\n    display: block;\\n    content: '';\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n    width: 200vw;\\n    height: 100%;\\n    background-color: #f0fafc;\\n    z-index: 0;\\n    transform: translateX(-50%);\\n  }\\n\\n  & > * {\\n    position: relative;\\n    z-index: 1;\\n  }\\n\"\n    ]);\n    _templateObject9 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject10() {\n    const data = _tagged_template_literal([\n        \"\\n  padding-bottom: 140px;\\n\\n  .alice-carousel {\\n    display: flex;\\n    flex-wrap: wrap;\\n\\n    .alice-carousel__stage-item {\\n      width: 100% !important;\\n    }\\n\\n    div:nth-of-type(1) {\\n      order: 2;\\n    }\\n\\n    .alice-carousel__dots {\\n      order: 1;\\n      display: flex;\\n      width: 100%;\\n      height: 67px;\\n      margin: 0 0 68px;\\n      border-top: solid 2px \",\n        \";\\n      border-bottom: solid 2px \",\n        \";\\n\\n      @media (max-width: 1200px) {\\n        height: 56px;\\n      }\\n      @media (max-width: 768px) {\\n      }\\n      @media (max-width: 500px) {\\n        margin-bottom: 24px;\\n      }\\n\\n      .alice-carousel__dots-item {\\n        flex: 1;\\n        height: 100%;\\n        font-size: 24px;\\n        font-weight: normal;\\n        color: \",\n        \";\\n        line-height: 65px;\\n        background-color: transparent;\\n\\n        &.__active {\\n          font-weight: bold;\\n        }\\n\\n        &:nth-of-type(1):before {\\n          content: '온라인 홍보';\\n        }\\n\\n        &:nth-of-type(2):before {\\n          content: '내 자료 보호';\\n        }\\n\\n        &:nth-of-type(3):before {\\n          content: '내 자료 판매';\\n        }\\n\\n        @media (max-width: 1200px) {\\n          font-size: 20px;\\n          line-height: 52px;\\n        }\\n        @media (max-width: 768px) {\\n          font-size: 16px;\\n          line-height: 54px;\\n        }\\n      }\\n    }\\n\\n    .alice-carousel__prev-btn,\\n    .alice-carousel__next-btn {\\n      top: 90%;\\n      right: unset;\\n      bottom: 0;\\n    }\\n\\n    .alice-carousel__prev-btn {\\n      left: calc(min(672px, 52%) + 88px);\\n    }\\n\\n    .alice-carousel__next-btn {\\n      left: calc(min(672px, 52%) + 148px);\\n    }\\n\\n    @media (max-width: 1200px) {\\n      .alice-carousel__prev-btn,\\n      .alice-carousel__next-btn {\\n        bottom: -24px;\\n        top: 92%;\\n      }\\n\\n      .alice-carousel__prev-btn {\\n        left: calc(44% + 36px);\\n      }\\n\\n      .alice-carousel__next-btn {\\n        left: calc(44% + 96px);\\n      }\\n    }\\n    @media (max-width: 768px) {\\n      .alice-carousel__prev-btn,\\n      .alice-carousel__next-btn {\\n        bottom: -56px;\\n        top: 106%;\\n      }\\n\\n      .alice-carousel__prev-btn {\\n        left: calc(36% + 16px);\\n      }\\n\\n      .alice-carousel__next-btn {\\n        left: calc(36% + 68px);\\n      }\\n    }\\n    @media (max-width: 500px) {\\n      .alice-carousel__prev-btn,\\n      .alice-carousel__next-btn {\\n        left: 0;\\n        right: 0;\\n        bottom: -56px;\\n        margin: 0 auto;\\n      }\\n\\n      .alice-carousel__prev-btn {\\n        transform: translateX(calc(-50% - 8px));\\n      }\\n\\n      .alice-carousel__next-btn {\\n        transform: translateX(calc(50% + 8px));\\n      }\\n    }\\n  }\\n\\n  @media (max-width: 500px) {\\n    padding-bottom: 48px;\\n  }\\n\"\n    ]);\n    _templateObject10 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject11() {\n    const data = _tagged_template_literal([\n        \"\\n  padding: 136px 0 156px;\\n\\n  .top {\\n    display: flex;\\n    justify-content: space-between;\\n    align-items: center;\\n    margin-bottom: 36px;\\n\\n    .date {\\n      font-size: 24px;\\n      color: \",\n        \";\\n      line-height: 1.5;\\n\\n      &:before {\\n        display: inline-block;\\n        vertical-align: middle;\\n        content: '';\\n        width: 5px;\\n        height: 5px;\\n        margin: 0 12px;\\n        border-radius: 50%;\\n        background-color: \",\n        \";\\n      }\\n    }\\n\\n    .text {\\n      font-size: 16px;\\n      color: #5f5f69;\\n      line-height: 1.5;\\n    }\\n  }\\n\\n  @media (max-width: 1200px) {\\n    .top {\\n      display: block;\\n      margin-bottom: 16px;\\n\\n      .date {\\n        font-size: 18px;\\n      }\\n\\n      .text {\\n        font-size: 14px;\\n        text-align: right;\\n      }\\n    }\\n  }\\n  @media (max-width: 768px) {\\n  }\\n\"\n    ]);\n    _templateObject11 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject12() {\n    const data = _tagged_template_literal([\n        \"\\n  text-align: center;\\n  padding: 72px 0;\\n  background-color: #fdfdff;\\n  border-bottom: solid 1px \",\n        \";\\n\\n  .ant-btn {\\n    height: auto;\\n    border: solid 2px #002fa8;\\n    border-radius: 0;\\n    padding: 16px 88px 16px 50px;\\n    transition: all 0.2s;\\n    word-break: keep-all;\\n\\n    span {\\n      font-size: 16px;\\n      font-weight: bold;\\n      line-height: 1.5;\\n    }\\n\\n    .block_m {\\n      display: none;\\n\\n      @media (max-width: 768px) {\\n        //display: block;\\n      }\\n    }\\n\\n    &:before {\\n      display: block;\\n      content: '';\\n      vertical-align: text-bottom;\\n      position: absolute;\\n      right: 50px;\\n      top: 50%;\\n      width: 24px;\\n      height: 24px;\\n      background: url('/static/assets/icon_outlink_white.svg') no-repeat 50% 50%;\\n      background-size: contain;\\n      transform: translateY(-50%);\\n    }\\n\\n    @media (hover: hover) {\\n      &:hover {\\n        background-color: #113ac3;\\n\\n        span {\\n          color: #fff;\\n        }\\n\\n        &:before {\\n          background-image: url('/static/assets/icon_outlink_white.svg');\\n        }\\n      }\\n    }\\n  }\\n\\n  @media (max-width: 1200px) {\\n    margin: 0 -50px;\\n  }\\n  @media (max-width: 768px) {\\n    padding: 48px 16px;\\n    margin: 0;\\n\\n    .ant-btn {\\n      width: 100%;\\n      max-width: 100%;\\n      height: auto;\\n      min-height: 32px;\\n      padding: 8px 44px 8px 16px;\\n\\n      &:before {\\n        position: absolute;\\n        top: 50%;\\n        right: 16px;\\n        vertical-align: middle;\\n        transform: translateY(-50%);\\n      }\\n\\n      span {\\n        font-size: 14px;\\n        white-space: pre-wrap;\\n        word-break: keep-all;\\n        vertical-align: middle;\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject12 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject13() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  align-items: end;\\n  justify-content: space-between;\\n\\n  @media (max-width: 1200px) {\\n    align-items: center;\\n  }\\n  @media (max-width: 768px) {\\n    gap: 16px;\\n    justify-content: center;\\n  }\\n  @media (max-width: 500px) {\\n    flex-wrap: wrap;\\n    width: 100%;\\n  }\\n\\n  img {\\n    max-width: min(672px, 52%);\\n\\n    @media (max-width: 1200px) {\\n      max-width: 44%;\\n    }\\n    @media (max-width: 768px) {\\n      max-width: 36%;\\n      margin: 0 auto;\\n    }\\n    @media (max-width: 500px) {\\n      max-width: 70%;\\n      margin: 0 15%;\\n    }\\n  }\\n\\n  .text-area {\\n    flex: 1;\\n    height: 100%;\\n    padding-left: 88px;\\n    padding-bottom: 120px;\\n\\n    .title {\\n      font-size: 24px;\\n      font-weight: bold;\\n      color: \",\n        \";\\n      line-height: 1.35;\\n    }\\n\\n    .desc {\\n      font-size: 24px;\\n      font-weight: normal;\\n      color: \",\n        \";\\n      line-height: 1.5;\\n      margin-top: 22px;\\n    }\\n\\n    .copyright {\\n      font-size: 20px;\\n      font-weight: normal;\\n      color: #5f5f69;\\n      line-height: 1.5;\\n      margin-top: 24px;\\n    }\\n\\n    @media (max-width: 1200px) {\\n      padding-left: 36px;\\n      padding-bottom: 64px;\\n\\n      .title {\\n        font-size: 22px;\\n      }\\n\\n      .desc {\\n        font-size: 22px;\\n        word-break: keep-all;\\n      }\\n\\n      .copyright {\\n        font-size: 18px;\\n      }\\n    }\\n    @media (max-width: 768px) {\\n      padding: 0;\\n\\n      .title {\\n        font-size: 18px;\\n      }\\n\\n      .desc {\\n        font-size: 18px;\\n      }\\n\\n      .copyright {\\n        font-size: 16px;\\n      }\\n    }\\n    @media (max-width: 500px) {\\n      padding-left: 8px;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject13 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject14() {\n    const data = _tagged_template_literal([\n        \"\\n  margin: -32px 0;\\n\"\n    ]);\n    _templateObject14 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Image from \"next/image\";\nimport { Container } from \"@/components\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { themeGet } from \"@styled-system/theme-get\";\nimport { Button, Modal } from \"antd\";\nimport { GenericPanelWithModal } from \"@/components/GenericPanel\";\nimport { action } from \"@storybook/addon-actions\";\nimport { WarningOutlined } from \"@ant-design/icons\";\nimport { ProtectionReportForm } from \"@/modules/landings/protection/ProtectionReportForm\";\nimport { observer } from \"mobx-react-lite\";\nimport { useRouter } from \"next/router\";\nimport AliceCarousel from \"react-alice-carousel\";\nimport { SlideWrap } from \"@/modules/landings/home/MainContainer/views/ProductRecommendSection\";\nimport { Panel } from \"@/components/Panel\";\nimport { HasContentsPopupWrapper } from \"@/components/HasContentsPopupWrapper\";\nimport useRedirect from \"@/hooks/useRedirect\";\nconst Wrapper = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-0\"\n})(_templateObject(), themeGet(\"text.0\", \"#1B1B29\"));\nconst SectionHeader = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-1\"\n})(_templateObject1());\nconst InfoBox = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-2\"\n})(_templateObject2(), themeGet(\"text.0\", \"#1B1B29\"));\nconst MainContents = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-3\"\n})(_templateObject3());\nconst ContentsTab = styled.a.withConfig({\n    componentId: \"sc-2aa00ece-4\"\n})(_templateObject5(), (param)=>{\n    let { selected  } = param;\n    return selected && css(_templateObject4());\n});\nconst TabWrapper = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-5\"\n})(_templateObject6());\nconst FeatureItem = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-6\"\n})(_templateObject7(), themeGet(\"color.0\", \"#1B1B29\"));\nconst TestimonialsWrapper = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-7\"\n})(_templateObject8());\nconst SecondSection = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-8\"\n})(_templateObject9());\nconst StyledSlideWrap = styled(SlideWrap).withConfig({\n    componentId: \"sc-2aa00ece-9\"\n})(_templateObject10(), themeGet(\"primary.1\", \"#00BFC8\"), themeGet(\"primary.1\", \"#00BFC8\"), themeGet(\"primary.1\", \"#00BFC8\"));\nconst PublisherArea = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-10\"\n})(_templateObject11(), themeGet(\"color.0\", \"#1B1B29\"), themeGet(\"color.0\", \"#1B1B29\"));\nexport const CTASection = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-11\"\n})(_templateObject12(), themeGet(\"border.1\", \"#E8E8EA\"));\nconst CarouselItem = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-12\"\n})(_templateObject13(), themeGet(\"primary.1\", \"#00BFC8\"), themeGet(\"text.0\", \"#1B1B29\"));\nexport const ProtectionReportFormWrapper = styled.div.withConfig({\n    componentId: \"sc-2aa00ece-13\"\n})(_templateObject14());\nexport const ProtectDescription = observer((param)=>{\n    let { onClick , modalOpen , initialValues , onSubmit , publisherOptions , onSetImageFile , onSetPdfFile  } = param;\n    const authStore = useAuthStore();\n    const router = useRouter();\n    const { redirectToLogin  } = useRedirect();\n    const carouselItems = [\n        {\n            title: \"온라인 홍보\",\n            desc: /*#__PURE__*/ _jsxs(_Fragment, {\n                children: [\n                    '\"수업 영상을 유튜브에 올려도 문제 없어요. ',\n                    /*#__PURE__*/ _jsx(\"br\", {}),\n                    '학원 홍보도 되고 수익 창출도 됩니다.\"'\n                ]\n            }),\n            copyright: \"유튜브 채널 : 아삭영어\",\n            img: \"/static/assets/img-protection-1.png\"\n        },\n        {\n            title: \"내 자료 보호\",\n            desc: /*#__PURE__*/ _jsxs(_Fragment, {\n                children: [\n                    '\"공들여 만든 내 수업자료, ',\n                    /*#__PURE__*/ _jsx(\"br\", {}),\n                    '이제 무단 배포되지 않도록 보호할 수 있어요.\"'\n                ]\n            }),\n            copyright: \"내신 수업자료 : 젠나 영어학원\",\n            img: \"/static/assets/img-protection-2.png\"\n        },\n        {\n            title: \"내 자료 판매\",\n            desc: /*#__PURE__*/ _jsxs(_Fragment, {\n                children: [\n                    '\"전문성 인정받은 내신자료, ',\n                    /*#__PURE__*/ _jsx(\"br\", {}),\n                    '정식 자료 마켓을 통하니까 전국에서 쓰이네요.\"'\n                ]\n            }),\n            copyright: \"전문 자료 저작자\",\n            img: \"/static/assets/img-protection-3.png\"\n        }\n    ];\n    const renderItems = carouselItems.map((item)=>{\n        return /*#__PURE__*/ _jsxs(CarouselItem, {\n            children: [\n                /*#__PURE__*/ _jsx(Image, {\n                    src: item.img,\n                    alt: \"슬라이드 이미지\",\n                    width: 2016,\n                    height: 1416\n                }),\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"text-area\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"title\",\n                            children: item.title\n                        }),\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"desc\",\n                            children: item.desc\n                        }),\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"copyright\",\n                            children: item.copyright\n                        })\n                    ]\n                })\n            ]\n        });\n    });\n    return /*#__PURE__*/ _jsxs(Wrapper, {\n        children: [\n            /*#__PURE__*/ _jsxs(Container, {\n                children: [\n                    /*#__PURE__*/ _jsxs(SectionHeader, {\n                        children: [\n                            \"R인증은 교육콘텐츠의 저작권 이용 자격을 식별하는 체계입니다.\",\n                            /*#__PURE__*/ _jsxs(\"span\", {\n                                children: [\n                                    \"출판사의 정식 이용 허락을 받은 \",\n                                    /*#__PURE__*/ _jsx(\"br\", {}),\n                                    \"교재 기반의 검증된 수업과 수업자료에 발급됩니다.\"\n                                ]\n                            })\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsxs(InfoBox, {\n                        children: [\n                            /*#__PURE__*/ _jsx(Image, {\n                                src: \"/static/assets/img_R_center.jpg\",\n                                alt: \"저작권 이미지\",\n                                width: 914,\n                                height: 796\n                            }),\n                            /*#__PURE__*/ _jsxs(\"div\", {\n                                className: \"inner\",\n                                children: [\n                                    /*#__PURE__*/ _jsx(\"div\", {\n                                        className: \"title\",\n                                        children: \"Respect the Rights\"\n                                    }),\n                                    /*#__PURE__*/ _jsxs(\"div\", {\n                                        className: \"text\",\n                                        children: [\n                                            \"R인증의 R은 교육자의 저작권과 학생의 학습권 모두를 존중하겠다는 의지를 표현한 Respect the Rights에 반복되는 첫 글자입니다. \",\n                                            /*#__PURE__*/ _jsx(\"br\", {}),\n                                            \"R인증은 교재의 저작권(Right)을 바르게(Right) 이용함으로써 \",\n                                            /*#__PURE__*/ _jsx(\"br\", {}),\n                                            \"학생들에게 진정한(Right) 교육을 제공하는 의지와 실천을 의미합니다.\"\n                                        ]\n                                    })\n                                ]\n                            })\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsxs(SecondSection, {\n                        children: [\n                            /*#__PURE__*/ _jsx(SectionHeader, {\n                                children: \"R인증이 발급된 수업콘텐츠로 마음껏 활동하세요.\"\n                            }),\n                            /*#__PURE__*/ _jsx(StyledSlideWrap, {\n                                children: /*#__PURE__*/ _jsx(AliceCarousel, {\n                                    infinite: true,\n                                    // mouseTracking\n                                    items: renderItems\n                                })\n                            }),\n                            /*#__PURE__*/ _jsxs(PublisherArea, {\n                                children: [\n                                    /*#__PURE__*/ _jsxs(\"div\", {\n                                        className: \"top\",\n                                        children: [\n                                            /*#__PURE__*/ _jsx(\"div\", {\n                                                className: \"date\",\n                                                children: \"쏠북과 함께하는 자료 저작자 (24년 05월 기준)\"\n                                            }),\n                                            /*#__PURE__*/ _jsx(\"div\", {\n                                                className: \"text\",\n                                                children: \"*쏠북 마켓 입점순\"\n                                            })\n                                        ]\n                                    }),\n                                    /*#__PURE__*/ _jsx(Image, {\n                                        src: \"/static/assets/img-main-tea-v5.jpg\",\n                                        alt: \"저작자 이미지\",\n                                        width: 3600,\n                                        height: 5280\n                                    })\n                                ]\n                            })\n                        ]\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(CTASection, {\n                children: /*#__PURE__*/ _jsx(Button, {\n                    type: \"primary\",\n                    onClick: ()=>{\n                        if (authStore.isLoggedIn) {\n                            onClick();\n                        } else {\n                            const loginModal = ()=>{\n                                const modal = Modal.success({\n                                    title: \"로그인을 해주세요\",\n                                    content: \"로그인페이지로 이동합니다.\",\n                                    okButtonProps: {\n                                        style: {\n                                            display: \"none\"\n                                        }\n                                    }\n                                });\n                                setTimeout(()=>{\n                                    modal.destroy();\n                                }, 800);\n                            };\n                            loginModal();\n                            redirectToLogin();\n                        }\n                    },\n                    children: \"내가 만든 자료를 누군가 무단으로 쓰고 있다면?\"\n                })\n            }),\n            /*#__PURE__*/ _jsx(GenericPanelWithModal, {\n                width: 1044,\n                open: modalOpen,\n                closeIcon: true,\n                okButtonProps: {\n                    style: {\n                        display: \"none\"\n                    }\n                },\n                okText: \"\",\n                cancelText: \"\",\n                onClose: ()=>{\n                    action(\"onCancel\")();\n                    onClick();\n                },\n                onOk: ()=>{\n                    onClick();\n                    action(\"onOk\")();\n                },\n                children: /*#__PURE__*/ _jsx(ProtectionReportFormWrapper, {\n                    children: /*#__PURE__*/ _jsxs(HasContentsPopupWrapper, {\n                        children: [\n                            /*#__PURE__*/ _jsxs(\"div\", {\n                                className: \"titleWrapper\",\n                                children: [\n                                    /*#__PURE__*/ _jsx(\"div\", {\n                                        className: \"popupTitle\",\n                                        children: \"저작권 침해 신고\"\n                                    }),\n                                    /*#__PURE__*/ _jsx(WarningOutlined, {\n                                        className: \"alertIcon\"\n                                    }),\n                                    /*#__PURE__*/ _jsx(\"span\", {\n                                        className: \"alertComment\",\n                                        children: \"정확한 확인을 위해 모두 입력해주세요.\"\n                                    })\n                                ]\n                            }),\n                            /*#__PURE__*/ _jsx(Panel, {\n                                children: /*#__PURE__*/ _jsx(ProtectionReportForm, {\n                                    name: \"ProtectionReportForm\",\n                                    initialValues: initialValues,\n                                    initialStatus: null,\n                                    onSubmit: onSubmit,\n                                    publisherOptions: publisherOptions,\n                                    onSetImageFile: onSetImageFile,\n                                    onSetPdfFile: onSetPdfFile\n                                })\n                            })\n                        ]\n                    })\n                })\n            })\n        ]\n    });\n});\n"],"names":[],"sourceRoot":""}