{"version":3,"file":"static/chunks/2912-af7055b6a9615f24.js","mappings":"AACA","sources":["webpack://_N_E/./src/components/Search/SearchFilteredProductEmpty.tsx","webpack://_N_E/./src/components/Search/SearchProductEmpty.tsx","webpack://_N_E/./src/components/Search/SearchListItemComponents.tsx","webpack://_N_E/./src/components/Search/SearchListItemView.tsx","webpack://_N_E/./src/components/Search/SearchProductListView.tsx","webpack://_N_E/./src/components/Search/SkeletonListItem.tsx","webpack://_N_E/./src/components/Search/useSearchFilterHandler.ts","webpack://_N_E/./src/components/common/ShadowSlideContainer.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  display: flex;\\n  flex-direction: column;\\n  align-items: center;\\n  justify-content: center;\\n  background-color: #ffffff;\\n  height: 240px;\\n  width: 100%;\\n  p {\\n    color: \",\n        \";\\n    margin-top: 16px;\\n    font-size: 16px;\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport Image from \"next/image\";\nimport themeGet from \"@styled-system/theme-get\";\nexport const SearchFilteredProductEmpty = (param)=>{\n    let {} = param;\n    return /*#__PURE__*/ _jsxs(SearchFilteredProductEmptyWrapper, {\n        children: [\n            /*#__PURE__*/ _jsx(Image, {\n                src: \"/static/assets/img-construction-01.svg\",\n                alt: \"icon\",\n                width: 90,\n                height: 90\n            }),\n            /*#__PURE__*/ _jsx(\"p\", {\n                children: \"필터와 일치하는 상품을 찾을 수 없어요\"\n            })\n        ]\n    });\n};\nconst SearchFilteredProductEmptyWrapper = styled.div.withConfig({\n    componentId: \"sc-9ffe682e-0\"\n})(_templateObject(), themeGet(\"text.2\", \"#000000\"));\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex-direction: column;\\n  min-height: 240px;\\n  padding: 0;\\n  padding-top: 92px;\\n  padding-bottom: 100px;\\n  border-radius: 0;\\n\\n  gap: 24px;\\n  @media (max-width: 768px) {\\n    padding-top: 60px;\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useCallback } from \"react\";\nimport styled from \"styled-components\";\nimport { useRouter } from \"next/router\";\nimport { Box, Typography, useTheme } from \"@mui/material\";\nimport { Button } from \"@bookips/solvook-ui-library\";\nimport { useSideCategoryMenuStore } from \"../SideSheets/store/useCategoryMenuStore\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\n// 카테고리 메뉴판을 열어주기 위한 카테고리 메뉴 구분자 입니다.\n// 서버에서 설정한 아이디 값과 과목을 매칭한 값입니다.\n// 현재 국영수를 제외한 과목은 기타 13번으로 내려오는데, 남은 과목별로 세분화 될 가능성이 있어서, 나머지 과목은 13번으로 잡아둡니다.\n// 10: 영어, 11: 국어, 12: 수학, 13: 사회/과학/기타\nconst SubjectCategoryId = {\n    EN: 10,\n    KO: 11,\n    MA: 12,\n    SO: 13,\n    SC: 13,\n    SL: 13,\n    KH: 13,\n    HI: 13,\n    ET: 13\n};\nexport const SearchProductEmpty = (param)=>{\n    let {} = param;\n    const { query  } = useRouter();\n    const theme = useTheme();\n    const { q: searchKeyword , subject: subjectCode  } = query;\n    const { openSideMenu , openMobileSideMenu , setCurrentDepth  } = useSideCategoryMenuStore();\n    const { isTablet  } = useWindowDimensions();\n    const handleFindCategoryClick = useCallback(()=>{\n        const subjectId = SubjectCategoryId[subjectCode];\n        setCurrentDepth(String(subjectId));\n        if (isTablet) openMobileSideMenu();\n        else openSideMenu();\n    }, [\n        isTablet,\n        setCurrentDepth,\n        subjectCode,\n        openSideMenu\n    ]);\n    return /*#__PURE__*/ _jsxs(SearchProductEmptyWrapper, {\n        children: [\n            /*#__PURE__*/ _jsxs(Box, {\n                sx: {\n                    width: \"100%\",\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    textAlign: \"center\"\n                },\n                children: [\n                    /*#__PURE__*/ _jsx(Typography, {\n                        variant: \"h6\",\n                        sx: {\n                            color: theme.palette.grey[500]\n                        },\n                        children: '\"'.concat(searchKeyword, '\" 의')\n                    }),\n                    /*#__PURE__*/ _jsx(Typography, {\n                        variant: \"h6\",\n                        sx: {\n                            color: theme.palette.text.title\n                        },\n                        children: \"검색결과가 없어요.\"\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(Button, {\n                label: \"카테고리로 찾아보기\",\n                variant: \"solid\",\n                size: \"large\",\n                onClick: handleFindCategoryClick\n            })\n        ]\n    });\n};\nconst SearchProductEmptyWrapper = styled.div.withConfig({\n    componentId: \"sc-158861da-0\"\n})(_templateObject());\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  gap: 6px;\\n\\n  & .thumb-img-container {\\n    height: 130px;\\n    width: 92px;\\n    max-width: none;\\n    border-radius: 4px;\\n    overflow: hidden;\\n    display: flex;\\n    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.04);\\n\\n    img {\\n      object-fit: contain;\\n      margin: 0 auto;\\n      max-width: 100%;\\n      display: block;\\n      max-height: 100%;\\n    }\\n  }\\n\\n  @media (max-width: 768px) {\\n    & .thumb-img-container {\\n      height: 96px;\\n      width: 68px;\\n    }\\n\\n    button {\\n      display: none;\\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  display: flex;\\n  gap: 6px;\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport Image from \"@/components/common/Image\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { Button } from \"@bookips/solvook-ui-library\";\nimport { Stack } from \"@mui/material\";\nimport { styled } from \"@mui/material/styles\";\nimport Link from \"next/link\";\nimport React from \"react\";\nimport { Subjects } from \"src/api/product\";\nimport { SearchRatingWithText } from \"../common/RatingWithText\";\nimport ShadowSlideContainer from \"../common/ShadowSlideContainer\";\nimport { CouponTag, OnlySolvookTag } from \"../Tags\";\nimport { ChipItem } from \"./Chips\";\nimport { usePreviewDialogStore } from \"./PreviewDialogProvider\";\nimport { useSearchFilterHandler } from \"./useSearchFilterHandler\";\nexport const SearchListItemContainer = (param)=>{\n    let { href , coreInfoSection , subInfoSection , onClick  } = param;\n    return /*#__PURE__*/ _jsx(SearchListItemLI, {\n        className: \"search-list-item-li\",\n        children: /*#__PURE__*/ _jsxs(Link, {\n            href: href,\n            onClick: onClick,\n            children: [\n                /*#__PURE__*/ _jsx(\"section\", {\n                    children: coreInfoSection\n                }),\n                subInfoSection && /*#__PURE__*/ _jsx(\"section\", {\n                    children: subInfoSection\n                })\n            ]\n        })\n    });\n};\nexport const CoreInfoSection = (param)=>{\n    let { thumbImg , productId , questionNo , avgReviewRating , price , title , badgeText , author , isCouponAvailable , editable  } = param;\n    const { openPreviewDialog  } = usePreviewDialogStore();\n    const onClickPreviewButton = (e)=>{\n        e.preventDefault();\n        e.stopPropagation();\n        openPreviewDialog({\n            id: productId.toString()\n        });\n        mixpanelEvent(\"Preview Button Clicked\", {\n            bookId: productId,\n            bookTitle: title,\n            Proposition: \"검색페이지\"\n        });\n    };\n    return /*#__PURE__*/ _jsxs(CoreInfoStack, {\n        children: [\n            /*#__PURE__*/ _jsx(ThumbArea, {\n                src: thumbImg,\n                width: 184,\n                height: 260,\n                previewButton: true,\n                onClickPreviewButton: onClickPreviewButton\n            }),\n            /*#__PURE__*/ _jsx(InfoArea, {\n                infoTop: /*#__PURE__*/ _jsxs(_Fragment, {\n                    children: [\n                        /*#__PURE__*/ _jsxs(ChipsContainer, {\n                            className: \"chips-container\",\n                            children: [\n                                badgeText && /*#__PURE__*/ _jsx(OnlySolvookTag, {\n                                    style: {\n                                        position: \"relative\",\n                                        marginBottom: \"8px\"\n                                    },\n                                    children: badgeText\n                                }),\n                                questionNo > 0 && /*#__PURE__*/ _jsxs(ChipItem, {\n                                    bgColor: \"#F0F4FC\",\n                                    color: \"#326EE5\",\n                                    children: [\n                                        questionNo,\n                                        \"문항\"\n                                    ]\n                                }),\n                                avgReviewRating && avgReviewRating >= 3 && /*#__PURE__*/ _jsx(ChipItem, {\n                                    bgColor: \"#F7F8FA\",\n                                    color: \"\",\n                                    children: /*#__PURE__*/ _jsx(SearchRatingWithText, {\n                                        rating: avgReviewRating\n                                    })\n                                })\n                            ]\n                        }),\n                        /*#__PURE__*/ _jsx(Title, {\n                            className: \"title\",\n                            children: title\n                        }),\n                        /*#__PURE__*/ _jsx(Author, {\n                            className: \"author\",\n                            children: author\n                        })\n                    ]\n                }),\n                infoBottom: /*#__PURE__*/ _jsxs(_Fragment, {\n                    children: [\n                        /*#__PURE__*/ _jsx(Price, {\n                            children: price\n                        }),\n                        isCouponAvailable && /*#__PURE__*/ _jsx(CouponTag, {\n                            children: \"쿠폰\"\n                        })\n                    ]\n                })\n            })\n        ]\n    });\n};\nexport const SubInfoSection = (param)=>{\n    let { relatedBook , units , dataTypes  } = param;\n    const { filterParams  } = useSearchFilterHandler();\n    return /*#__PURE__*/ _jsxs(SubInfoStack, {\n        children: [\n            relatedBook && filterParams.subject !== Subjects.KO && /*#__PURE__*/ _jsx(SubInfoItem, {\n                children: relatedBook\n            }),\n            (units === null || units === void 0 ? void 0 : units.length) && /*#__PURE__*/ _jsx(SubInfoItem, {\n                children: units\n            }),\n            dataTypes && /*#__PURE__*/ _jsx(SubInfoItem, {\n                children: dataTypes\n            })\n        ]\n    });\n};\nexport const SubInfoStack = (param)=>{\n    let { children  } = param;\n    return /*#__PURE__*/ _jsx(SubInfoContainer, {\n        onClick: (e)=>{\n            //스크롤 영역으로 클릭이벤트 전파 방지\n            e.preventDefault();\n            e.stopPropagation();\n        },\n        children: /*#__PURE__*/ _jsx(ShadowSlideContainer, {\n            children: children\n        })\n    });\n};\nexport const ThumbArea = (param)=>{\n    let { src , width , height , onClickPreviewButton , previewButton  } = param;\n    return /*#__PURE__*/ _jsxs(ThumbContainer, {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"thumb-img-container\",\n                children: /*#__PURE__*/ _jsx(Image, {\n                    src: src,\n                    width: width,\n                    height: height,\n                    alt: \"thumb-img\"\n                })\n            }),\n            previewButton && /*#__PURE__*/ _jsx(Button, {\n                variant: \"strokeSecondary\",\n                sx: (theme)=>{\n                    return {\n                        padding: \"6px 12px\",\n                        ...theme.typography.subtitle2\n                    };\n                },\n                onClick: onClickPreviewButton,\n                children: \"샘플 보기\"\n            })\n        ]\n    });\n};\nexport const InfoArea = (param)=>{\n    let { infoTop , infoBottom  } = param;\n    return /*#__PURE__*/ _jsxs(Stack, {\n        sx: (theme)=>{\n            return {\n                justifyContent: \"space-between\",\n                [theme.breakpoints.down(\"sm\")]: {\n                    gap: \"16px\"\n                }\n            };\n        },\n        direction: \"column\",\n        children: [\n            /*#__PURE__*/ _jsx(Stack, {\n                className: \"into-top\",\n                sx: {\n                    \".chip\": {\n                        marginTop: \"8px\"\n                    },\n                    \".title + .author\": {\n                        marginTop: \"4px\"\n                    }\n                },\n                direction: \"column\",\n                children: infoTop\n            }),\n            /*#__PURE__*/ _jsx(Stack, {\n                className: \"info-bottom\",\n                direction: \"row\",\n                spacing: \"6px\",\n                alignItems: \"center\",\n                children: infoBottom\n            })\n        ]\n    });\n};\nconst SearchListItemLI = styled(\"li\")((param)=>{\n    let { theme  } = param;\n    return {\n        position: \"relative\",\n        width: \"100%\",\n        backgroundColor: \"#fff\",\n        minHeight: \"201px\",\n        borderRadius: \"6px\",\n        border: \"1px solid\",\n        borderColor: theme.palette.grey[100],\n        a: {\n            display: \"flex\",\n            flexDirection: \"column\",\n            height: \"100%\"\n        },\n        [theme.breakpoints.down(\"sm\")]: {\n            borderRadius: 0,\n            borderTop: 0,\n            borderLeft: 0,\n            borderRight: 0\n        }\n    };\n});\nconst CoreInfoStack = styled(Stack)((param)=>{\n    let { theme  } = param;\n    return {\n        padding: \"20px\",\n        gap: \"20px\",\n        flexDirection: \"row\",\n        [theme.breakpoints.down(\"sm\")]: {\n            paddingBottom: \"16px\",\n            gap: \"16px\"\n        }\n    };\n});\nconst ThumbContainer = styled(Stack)(_templateObject());\nexport const Title = styled(\"p\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.text.title,\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n        display: \"-webkit-box\",\n        WebkitLineClamp: \"2\",\n        WebkitBoxOrient: \"vertical\",\n        ...theme.typography.subtitle1\n    };\n});\nexport const Author = styled(\"p\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.text.secondary,\n        ...theme.typography.body1\n    };\n});\nexport const Price = styled(\"p\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.text.primary,\n        ...theme.typography.h6\n    };\n});\nexport const ChipsContainer = styled(\"div\")(_templateObject1());\nexport const SubInfoContainer = styled(Stack)((param)=>{\n    let { theme  } = param;\n    return {\n        borderRadius: \"0 0 6px 6px\",\n        backgroundColor: theme.palette.grey[0],\n        flexDirection: \"row\",\n        overflowX: \"auto\",\n        \"span + span\": {\n            \"::before\": {\n                content: '\"|\"',\n                color: theme.palette.grey[100],\n                margin: \"0 8px\"\n            }\n        },\n        \"& ::-webkit-scrollbar\": {\n            display: \"none\"\n        },\n        \">div >div\": {\n            padding: \"12px 20px\",\n            display: \"flex\",\n            height: \"44px\"\n        },\n        [theme.breakpoints.down(\"sm\")]: {\n            margin: \"0 20px 20px 20px\",\n            borderRadius: \"4px\",\n            \">div >div\": {\n                padding: \"8px 12px\",\n                height: \"36px\"\n            }\n        }\n    };\n});\nexport const SubInfoItem = styled(\"span\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.text.secondary,\n        whiteSpace: \"nowrap\",\n        ...theme.typography.body2\n    };\n});\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { priceWithStringFormatter } from \"@/lib/utils\";\nimport React from \"react\";\nimport { DataTypesWithString } from \"../../api/product\";\nimport { CoreInfoSection, SearchListItemContainer, SubInfoSection } from \"./SearchListItemComponents\";\nexport const SearchListItemView = (param)=>{\n    let { product  } = param;\n    var _product_attributes, _product_attributes_handout, _product_attributes1, _product_attributes_handout1, _product_attributes2, _product_attributes_handout2, _product_attributes3, _product_attributes_handout3, _product_attributes_handout_relatedBooks, _product_attributes4, _product_attributes_handout4, _product_attributes_handout_units, _product_attributes5, _product_attributes_handout5;\n    const coreInfoProps = {\n        productId: product.productId,\n        title: product.title,\n        author: product === null || product === void 0 ? void 0 : (_product_attributes = product.attributes) === null || _product_attributes === void 0 ? void 0 : (_product_attributes_handout = _product_attributes.handout) === null || _product_attributes_handout === void 0 ? void 0 : _product_attributes_handout.author,\n        thumbImg: product === null || product === void 0 ? void 0 : product.thumbImg,\n        questionNo: (_product_attributes1 = product.attributes) === null || _product_attributes1 === void 0 ? void 0 : (_product_attributes_handout1 = _product_attributes1.handout) === null || _product_attributes_handout1 === void 0 ? void 0 : _product_attributes_handout1.questionNo,\n        avgReviewRating: (product === null || product === void 0 ? void 0 : product.avgReviewRating) && parseFloat(product === null || product === void 0 ? void 0 : product.avgReviewRating),\n        price: typeof product.price === \"string\" ? product.price : priceWithStringFormatter(product.price),\n        editable: product === null || product === void 0 ? void 0 : (_product_attributes2 = product.attributes) === null || _product_attributes2 === void 0 ? void 0 : (_product_attributes_handout2 = _product_attributes2.handout) === null || _product_attributes_handout2 === void 0 ? void 0 : _product_attributes_handout2.editable,\n        isCouponAvailable: product === null || product === void 0 ? void 0 : product.isCouponAvailable,\n        badgeText: product === null || product === void 0 ? void 0 : product.badgeText\n    };\n    const subInfoProps = {\n        relatedBook: (product === null || product === void 0 ? void 0 : (_product_attributes3 = product.attributes) === null || _product_attributes3 === void 0 ? void 0 : (_product_attributes_handout3 = _product_attributes3.handout) === null || _product_attributes_handout3 === void 0 ? void 0 : (_product_attributes_handout_relatedBooks = _product_attributes_handout3.relatedBooks) === null || _product_attributes_handout_relatedBooks === void 0 ? void 0 : _product_attributes_handout_relatedBooks.length) > 0 && (product === null || product === void 0 ? void 0 : product.attributes.handout.relatedBooks[0]),\n        units: product === null || product === void 0 ? void 0 : (_product_attributes4 = product.attributes) === null || _product_attributes4 === void 0 ? void 0 : (_product_attributes_handout4 = _product_attributes4.handout) === null || _product_attributes_handout4 === void 0 ? void 0 : (_product_attributes_handout_units = _product_attributes_handout4.units) === null || _product_attributes_handout_units === void 0 ? void 0 : _product_attributes_handout_units.join(\", \"),\n        dataTypes: product === null || product === void 0 ? void 0 : (_product_attributes5 = product.attributes) === null || _product_attributes5 === void 0 ? void 0 : (_product_attributes_handout5 = _product_attributes5.handout) === null || _product_attributes_handout5 === void 0 ? void 0 : _product_attributes_handout5.dataTypes.map((item)=>DataTypesWithString[item]).join(\", \")\n    };\n    return /*#__PURE__*/ _jsx(SearchListItemContainer, {\n        href: \"/products/\".concat(product.productId),\n        onClick: ()=>{\n            var _product_attributes, _product_attributes_handout;\n            mixpanelEvent(\"Search Item Clicked\", {\n                \"Product ID\": product.productId,\n                \"Product Title\": product.title,\n                \"Coupon Badge\": product.isCouponAvailable,\n                \"Edit Badge\": product === null || product === void 0 ? void 0 : (_product_attributes = product.attributes) === null || _product_attributes === void 0 ? void 0 : (_product_attributes_handout = _product_attributes.handout) === null || _product_attributes_handout === void 0 ? void 0 : _product_attributes_handout.editable,\n                \"Review Badge\": product.avgReviewRating\n            });\n        },\n        coreInfoSection: /*#__PURE__*/ _jsx(CoreInfoSection, {\n            ...coreInfoProps\n        }),\n        subInfoSection: /*#__PURE__*/ _jsx(SubInfoSection, {\n            ...subInfoProps\n        })\n    });\n};\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  justify-content: space-between;\\n  flex-wrap: wrap;\\n  background-color: #fff;\\n  @media (max-width: 768px) {\\n    display: flex;\\n    margin: 0 -16px;\\n    padding: 0;\\n    gap: 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  background-color: \",\n        \";\\n  justify-content: space-between;\\n  flex-wrap: wrap;\\n  gap: 20px;\\n  display: grid;\\n  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));\\n\\n  @media (max-width: 768px) {\\n    display: flex;\\n    margin: 0 -16px;\\n    padding: 0;\\n    gap: 0;\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { SearchFilteredProductEmpty } from \"@/components/Search/SearchFilteredProductEmpty\";\nimport { SearchProductEmpty } from \"@/components/Search/SearchProductEmpty\";\nimport { SkeletonListItem } from \"@/components/Search/SkeletonListItem\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { SearchListItemView } from \"./SearchListItemView\";\nexport const SearchProductListView = (param)=>{\n    let { list , isLoading , isFetchingNextPage , hasNextPage , emptyStatus  } = param;\n    if (isLoading) return /*#__PURE__*/ _jsx(NewSearchListWrapper, {\n        children: [\n            ...Array(10)\n        ].map((_, index)=>/*#__PURE__*/ _jsx(SkeletonListItem, {}, index))\n    });\n    if (emptyStatus === \"FILTER\") {\n        return /*#__PURE__*/ _jsx(SearchFilteredProductEmpty, {});\n    }\n    if (emptyStatus === \"ITEM\") return /*#__PURE__*/ _jsx(SearchProductEmpty, {});\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(NewSearchListWrapper, {\n                children: list.pages.map((page, idx)=>{\n                    return /*#__PURE__*/ _jsx(React.Fragment, {\n                        children: page === null || page === void 0 ? void 0 : page.data.map((product)=>{\n                            if (!!!product) return null;\n                            return /*#__PURE__*/ _jsx(SearchListItemView, {\n                                product: product\n                            }, product.productId);\n                        })\n                    }, \"search-list-data-\".concat(idx));\n                })\n            }),\n            isFetchingNextPage && hasNextPage && /*#__PURE__*/ _jsx(NewSearchListWrapper, {\n                children: [\n                    ...Array(2)\n                ].map((_, index)=>/*#__PURE__*/ _jsx(SkeletonListItem, {}, index))\n            })\n        ]\n    });\n};\n//@fixme: 추후삭제 (알라딘 굿노트 사용중)\nexport const SearchListWrapper = styled.div.withConfig({\n    componentId: \"sc-c5d4f1e3-0\"\n})(_templateObject());\nexport const NewSearchListWrapper = styled.div.withConfig({\n    componentId: \"sc-c5d4f1e3-1\"\n})(_templateObject1(), (props)=>props.theme.new.colors.sol_gray_0);\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  width: 100%;\\n  display: flex;\\n  padding: 28px;\\n  padding-right: 69px;\\n  background-color: #fff;\\n  min-height: 201px;\\n  border-radius: 6px;\\n  box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 3px 0px;\\n  @media (max-width: 1200px) {\\n    padding: 16px;\\n    padding-right: 83px;\\n    width: 100%;\\n  }\\n\\n  .ant-skeleton.ant-skeleton-element .ant-skeleton-avatar {\\n    width: 120px;\\n    height: 145px;\\n    background-color: #e7e7e9;\\n    border-radius: 4px;\\n    @media (max-width: 1200px) {\\n      width: 78px;\\n      height: 94px;\\n    }\\n  }\\n\\n  .contents {\\n    display: flex;\\n    flex-direction: column;\\n    justify-content: space-between;\\n    margin-left: 16px;\\n    width: 100%;\\n\\n    .content-top {\\n      display: flex;\\n      flex-direction: column;\\n      gap: 8px;\\n      @media (max-width: 1200px) {\\n        gap: 4px;\\n      }\\n\\n      .ant-skeleton.ant-skeleton-element {\\n        .ant-skeleton-input {\\n          height: 28px;\\n          width: 100%;\\n          background-color: #e7e7e9;\\n          border-radius: 4px;\\n          @media (max-width: 1200px) {\\n            height: 20px;\\n          }\\n        }\\n\\n        .ant-skeleton-button {\\n          height: 20px;\\n          width: 91px;\\n          background-color: #e7e7e9;\\n          border-radius: 4px;\\n          @media (max-width: 1200px) {\\n            height: 16px;\\n            width: 103px;\\n          }\\n        }\\n      }\\n    }\\n\\n    .content-bottom {\\n      gap: 8px;\\n      display: flex;\\n      flex-direction: column;\\n\\n      .ant-skeleton.ant-skeleton-element {\\n        .ant-skeleton-input {\\n          height: 28px;\\n          width: 119px;\\n          background-color: #e7e7e9;\\n          border-radius: 4px;\\n          @media (max-width: 1200px) {\\n            height: 20px;\\n            width: 86px;\\n            min-width: 86px;\\n            margin-bottom: 18px;\\n          }\\n        }\\n      }\\n\\n      .tags-wrapper {\\n        display: flex;\\n        gap: 6px;\\n        @media (max-width: 1200px) {\\n          display: none;\\n        }\\n\\n        .ant-skeleton.ant-skeleton-element {\\n          &:nth-last-child(2) {\\n            display: none;\\n          }\\n\\n          .ant-skeleton-button {\\n            height: 20px;\\n            width: 65px;\\n            background-color: #e7e7e9;\\n            border-radius: 4px;\\n          }\\n        }\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Skeleton } from \"antd\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nexport const SkeletonListItem = (param)=>{\n    let {} = param;\n    const active = true;\n    const buttonShape = \"default\";\n    const size = \"default\";\n    const block = false;\n    const avatarShape = \"square\";\n    return /*#__PURE__*/ _jsxs(SkeletonListItemWrapper, {\n        className: \"item-wrapper\",\n        children: [\n            /*#__PURE__*/ _jsx(Skeleton.Avatar, {\n                active: active,\n                size: size,\n                shape: avatarShape\n            }),\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"contents\",\n                children: [\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"content-top\",\n                        children: [\n                            /*#__PURE__*/ _jsx(Skeleton.Input, {\n                                active: active,\n                                size: size\n                            }),\n                            /*#__PURE__*/ _jsx(Skeleton.Button, {\n                                active: active,\n                                size: size,\n                                shape: buttonShape,\n                                block: block\n                            })\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"content-bottom\",\n                        children: [\n                            /*#__PURE__*/ _jsx(Skeleton.Input, {\n                                active: active,\n                                size: size\n                            }),\n                            /*#__PURE__*/ _jsxs(\"div\", {\n                                className: \"tags-wrapper\",\n                                children: [\n                                    /*#__PURE__*/ _jsx(Skeleton.Button, {\n                                        active: active,\n                                        size: size,\n                                        shape: buttonShape,\n                                        block: block\n                                    }),\n                                    /*#__PURE__*/ _jsx(Skeleton.Button, {\n                                        active: active,\n                                        size: size,\n                                        shape: buttonShape,\n                                        block: block\n                                    }),\n                                    /*#__PURE__*/ _jsx(Skeleton.Button, {\n                                        active: active,\n                                        size: size,\n                                        shape: buttonShape,\n                                        block: block\n                                    }),\n                                    /*#__PURE__*/ _jsx(Skeleton.Button, {\n                                        active: active,\n                                        size: size,\n                                        shape: buttonShape,\n                                        block: block\n                                    })\n                                ]\n                            })\n                        ]\n                    })\n                ]\n            })\n        ]\n    });\n};\nconst SkeletonListItemWrapper = styled.div.withConfig({\n    componentId: \"sc-e8c7ec9d-0\"\n})(_templateObject());\n","import useSearchParams from \"@/hooks/useSearchParams\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useRouter } from \"next/router\";\nimport { useCallback, useEffect, useMemo } from \"react\";\nimport { Subjects } from \"../../api/product\";\nimport { BaseFilterKeyToLabel, SearchQueryKey, searchQueryKeys, SearchType } from \"../../api/search\";\nimport { getUserMeta } from \"../../api/users\";\nconst routerOptions = {\n    shallow: true,\n    scroll: true\n};\nconst DEFAULT_PRODUCT_TYPE = SearchType.HANDOUT;\nconst DEFAULT_AVAILABLE = true;\nconst DEFAULT_SUBJECT = Subjects.EN;\nconst DEFAULT_SORT = \"POPULAR\";\nexport const useSearchFilterHandler = ()=>{\n    const { push , pathname , query  } = useRouter();\n    const searchParams = useSearchParams();\n    const { isLoggedIn  } = useAuthStore();\n    const { data: userMeta  } = useQuery([\n        \"search\",\n        \"userMainSubject\"\n    ], getUserMeta, {\n        enabled: isLoggedIn\n    });\n    const navigationHandler = useCallback((parameter)=>{\n        push({\n            pathname,\n            query: parameter.toString()\n        }, undefined, routerOptions);\n    }, [\n        push\n    ]);\n    const handleSortFilter = useCallback((sortKey)=>{\n        searchParams.set(SearchQueryKey.SORT, sortKey);\n        navigationHandler(searchParams);\n    }, [\n        searchParams\n    ]);\n    const handleResetFilter = useCallback(()=>{\n        //productType 제외 모든 query 삭제\n        for(const key in searchQueryKeys){\n            searchParams.delete(searchQueryKeys[key]);\n        }\n        navigationHandler(searchParams);\n    }, [\n        searchParams\n    ]);\n    const handleSubjectFilter = useCallback((subject)=>{\n        //productType 제외 모든 query 삭제\n        for(const key in searchQueryKeys){\n            searchParams.delete(searchQueryKeys[key]);\n        }\n        searchParams.set(SearchQueryKey.SUBJECT, subject);\n        navigationHandler(searchParams);\n    }, [\n        searchParams\n    ]);\n    const handleDetailFilter = useCallback((filterType, id)=>{\n        const isExist = searchParams.getAll(filterType).includes(id.toString());\n        if (isExist) {\n            const newFilter = searchParams.getAll(filterType).filter((item)=>item !== id.toString());\n            searchParams.delete(filterType);\n            if (newFilter.length > 0) {\n                newFilter.map((item)=>searchParams.append(filterType, item));\n            }\n        } else {\n            searchParams.append(filterType, id.toString());\n        }\n        push({\n            pathname,\n            query: searchParams.toString()\n        }, undefined, routerOptions);\n    }, [\n        searchParams\n    ]);\n    const handleKeywordFilter = useCallback((value)=>{\n        //전체 클릭시\n        if (!value) {\n            handleResetFilter();\n            return;\n        }\n        //상세필터 초기화\n        for(const key in searchQueryKeys){\n            searchParams.delete(searchQueryKeys[key]);\n        }\n        searchParams.set(SearchQueryKey.RELATEDBOOKS, value);\n        navigationHandler(searchParams);\n    }, [\n        searchParams\n    ]);\n    const findFilterKeyToLabel = useCallback((filterName)=>{\n        return Object.keys(BaseFilterKeyToLabel).find((key)=>BaseFilterKeyToLabel[key] === filterName);\n    }, []);\n    const isCheckFilterItem = useCallback((filterName, filterItem)=>{\n        return searchParams.getAll(filterName).includes(filterItem.toString());\n    }, [\n        searchParams\n    ]);\n    const isCheckFilterCount = useCallback((filterName)=>{\n        return searchParams.getAll(findFilterKeyToLabel(filterName)).length;\n    }, [\n        searchParams\n    ]);\n    const selectedFilterList = useMemo(()=>{\n        let selectedFilters = [];\n        Object.values(SearchQueryKey).forEach((key)=>{\n            if (key === SearchQueryKey.KEYWORD) return;\n            if (key === SearchQueryKey.SORT) return;\n            if (key === SearchQueryKey.SUBJECT) return;\n            if (key === SearchQueryKey.PRODUCT_TYPE) return;\n            searchParams.getAll(key).map((item)=>{\n                selectedFilters.push({\n                    key: key,\n                    value: item\n                });\n            });\n        });\n        return selectedFilters;\n    }, [\n        searchParams\n    ]);\n    const hasSelectedFilter = useMemo(()=>{\n        return selectedFilterList.length > 0;\n    }, [\n        selectedFilterList\n    ]);\n    // solvookPasses 필터 추가\n    const handleSolvookPassesFilter = useCallback((value)=>{\n        if (value && searchParams.getAll(SearchQueryKey.SOLVOOKPASSES).includes(value)) {\n            searchParams.delete(SearchQueryKey.SOLVOOKPASSES);\n            navigationHandler(searchParams);\n            return;\n        }\n        searchParams.set(SearchQueryKey.SOLVOOKPASSES, value);\n        navigationHandler(searchParams);\n    }, [\n        searchParams\n    ]);\n    const filterParams = useMemo(()=>{\n        var _searchParams_get, _ref, _searchParams_get1;\n        return {\n            q: searchParams.get(SearchQueryKey.KEYWORD),\n            productType: DEFAULT_PRODUCT_TYPE,\n            subject: (_ref = (_searchParams_get = searchParams.get(SearchQueryKey.SUBJECT)) !== null && _searchParams_get !== void 0 ? _searchParams_get : userMeta === null || userMeta === void 0 ? void 0 : userMeta.mainSubject) !== null && _ref !== void 0 ? _ref : DEFAULT_SUBJECT,\n            available: DEFAULT_AVAILABLE,\n            sort: (_searchParams_get1 = searchParams.get(SearchQueryKey.SORT)) !== null && _searchParams_get1 !== void 0 ? _searchParams_get1 : DEFAULT_SORT,\n            filters: {\n                curriculums: searchParams.getAll(SearchQueryKey.CURRICULUMS),\n                grades: searchParams.getAll(SearchQueryKey.GRADES),\n                publishers: searchParams.getAll(SearchQueryKey.PUBLISHERS),\n                contentTypes: searchParams.getAll(SearchQueryKey.CONTENTTYPES),\n                dataTypes: searchParams.getAll(SearchQueryKey.DATATYPES),\n                units: searchParams.getAll(SearchQueryKey.UNITS),\n                // editable: searchParams.get(SearchQueryKey.EDITABLES),\n                authors: searchParams.getAll(SearchQueryKey.AUTHORS),\n                genres: searchParams.getAll(SearchQueryKey.GENRES),\n                eras: searchParams.getAll(SearchQueryKey.ERAS),\n                relatedBooks: searchParams.getAll(SearchQueryKey.RELATEDBOOKS),\n                tickets: searchParams.getAll(SearchQueryKey.TICKETS),\n                solvookPasses: searchParams.getAll(SearchQueryKey.SOLVOOKPASSES)\n            }\n        };\n    }, [\n        searchParams,\n        userMeta\n    ]);\n    // query에 ticket id가 넘어오는데 내가 보유하지 않은 이용권일 경우, query에서 제거\n    useEffect(()=>{\n        var _userMeta_tickets;\n        if (!userMeta || !((_userMeta_tickets = userMeta.tickets) === null || _userMeta_tickets === void 0 ? void 0 : _userMeta_tickets.length)) return;\n        const queryTicketIds = searchParams.getAll(SearchQueryKey.TICKETS);\n        if (!queryTicketIds.length) return;\n        const hasValidTicket = userMeta.tickets.filter((ticket)=>queryTicketIds.some((item)=>item === String(ticket.productInfo.id)));\n        if (!hasValidTicket.length) {\n            searchParams.delete(SearchQueryKey.TICKETS);\n            navigationHandler(searchParams);\n        }\n    }, [\n        userMeta,\n        searchParams\n    ]);\n    return {\n        handleSortFilter,\n        handleResetFilter,\n        handleSubjectFilter,\n        handleDetailFilter,\n        handleKeywordFilter,\n        isCheckFilterItem,\n        isCheckFilterCount,\n        selectedFilterList,\n        hasSelectedFilter,\n        handleSolvookPassesFilter,\n        filterParams\n    };\n};\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  overflow: hidden;\\n  position: relative;\\n\\n  &:before,\\n  &:after {\\n    content: '';\\n    height: 100%;\\n    width: 10px;\\n    position: absolute;\\n    top: 0;\\n    transition: 0.2s opacity;\\n    pointer-events: none;\\n  }\\n\\n  &:before {\\n    left: 0;\\n    background: linear-gradient(90deg, rgba(247, 248, 250, 0), transparent);\\n    opacity: \",\n        \";\\n    z-index: 1;\\n  }\\n\\n  &:after {\\n    right: 0;\\n    background: linear-gradient(270deg, rgba(247, 248, 250, 1), transparent);\\n    opacity: \",\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  overflow-x: auto;\\n  width: auto;\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useScroll } from \"framer-motion\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { useDebouncedCallback } from \"use-debounce\";\nconst ShadowWrapper = styled.div.withConfig({\n    componentId: \"sc-f8a070c5-0\"\n})(_templateObject(), (props)=>props.opacityLeft, (props)=>props.opacityRight);\nconst ShadowScroller = styled.div.withConfig({\n    componentId: \"sc-f8a070c5-1\"\n})(_templateObject1());\nconst ShadowSlideContainer = (param)=>{\n    let { children  } = param;\n    const wrapperShadowRef = useRef();\n    const { scrollXProgress  } = useScroll({\n        container: wrapperShadowRef\n    });\n    const [transparencies, setTransparencies] = useState({\n        opacityLeft: 0,\n        opacityRight: 0\n    });\n    const setup = useCallback((progress)=>{\n        const { current: wrapperShadow  } = wrapperShadowRef;\n        let newValues = {\n            opacityLeft: 0,\n            opacityRight: 0\n        };\n        if (wrapperShadow && wrapperShadow.offsetWidth < wrapperShadow.scrollWidth) {\n            newValues.opacityLeft = progress === 0 ? 0 : 1;\n            newValues.opacityRight = progress === 1 ? 0 : 1;\n        // newValues.opacityLeft = progress\n        // newValues.opacityRight = 1 - progress\n        }\n        // console.log(\n        // \twrapperShadow.offsetWidth,\n        // \twrapperShadow.scrollWidth,\n        // \tnewValues.opacityLeft,\n        // \tnewValues.opacityRight,\n        // )\n        setTransparencies(newValues);\n    }, []);\n    const debouncedSetup = useDebouncedCallback(setup, 50);\n    useEffect(()=>{\n        function handleChange() {\n            debouncedSetup(scrollXProgress.get());\n        }\n        const unsubscribe = scrollXProgress.on(\"change\", handleChange);\n        handleChange();\n        return ()=>{\n            unsubscribe();\n        };\n    }, [\n        debouncedSetup\n    ]);\n    return /*#__PURE__*/ _jsx(ShadowWrapper, {\n        ...transparencies,\n        children: /*#__PURE__*/ _jsx(ShadowScroller, {\n            ref: wrapperShadowRef,\n            children: children\n        })\n    });\n};\nexport default ShadowSlideContainer;\n"],"names":[],"sourceRoot":""}