{"version":3,"file":"static/chunks/2559-6b5506da43a0d445.js","mappings":"AACA","sources":["webpack://_N_E/./src/components/Landing/MainPageSkeletons.tsx","webpack://_N_E/./src/components/Landing/ManualCurationSection.tsx","webpack://_N_E/./src/components/Landing/SwiperCustomButton.tsx","webpack://_N_E/"],"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 //gap: 52px;\\n padding: 41px 0;\\n @media (max-width: 1200px) {\\n //gap: 42px;\\n }\\n @media (max-width: 768px) {\\n padding: 24px 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 margin-top: 72px;\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-input {\\n width: 308px;\\n height: 32px;\\n margin-bottom: 20px;\\n }\\n .list-item-image > div {\\n height: 100%;\\n }\\n .list-wrapper {\\n display: flex;\\n margin-top: 16px;\\n gap: 16px;\\n .list-item {\\n flex-direction: column;\\n width: 420px;\\n height: 382px;\\n display: flex;\\n gap: 20px;\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-avatar {\\n width: 224px;\\n height: 224px;\\n border-radius: 6px;\\n }\\n .contents {\\n display: flex;\\n flex-direction: column;\\n gap: 8px;\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-button {\\n width: 220px;\\n height: 26px;\\n\\n &:nth-child(2) {\\n width: 26px;\\n }\\n }\\n }\\n }\\n }\\n @media (max-width: 768px) {\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-avatar {\\n width: 150px;\\n height: 150px;\\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 gap: 24px;\\n margin-bottom: 52px;\\n margin-top: 40px;\\n .contents {\\n display: flex;\\n align-items: center;\\n gap: 28px;\\n max-width: 1200px;\\n overflow: hidden;\\n\\n > div {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n }\\n }\\n @media (max-width: 1200px) {\\n margin-bottom: 40px;\\n }\\n @media (max-width: 768px) {\\n margin-bottom: 32px;\\n margin-top: 24px;\\n gap: 16px;\\n .contents {\\n height: 153px;\\n gap: 12px;\\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 .ant-skeleton.ant-skeleton-element .ant-skeleton-input,\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-button {\\n border-radius: 6px;\\n //background-color: dddd;\\n }\\n\"\n ]);\n _templateObject3 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject4() {\n const data = _tagged_template_literal([\n \"\\n margin-bottom: 50px;\\n @media (max-width: 1200px) {\\n margin-bottom: 42px;\\n }\\n @media (max-width: 768px) {\\n margin-bottom: 32px;\\n }\\n .ant-skeleton.ant-skeleton-element {\\n width: 100%;\\n }\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-avatar {\\n width: 100%;\\n height: 180px;\\n @media (max-width: 1200px) {\\n aspect-ratio: 1100/210;\\n max-height: 210px;\\n max-width: 1200px;\\n width: 100%;\\n height: 100%;\\n }\\n @media (max-width: 768px) {\\n }\\n }\\n\"\n ]);\n _templateObject4 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject5() {\n const data = _tagged_template_literal([\n \"\\n margin-bottom: 72px;\\n overflow: hidden;\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-input {\\n width: 352px;\\n height: 32px;\\n }\\n .button-wrapper {\\n display: flex;\\n gap: 12px;\\n margin-top: 20px;\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-button {\\n width: 80px;\\n height: 40px;\\n }\\n }\\n .list-wrapper {\\n display: grid;\\n grid-template-columns: repeat(3, 1fr);\\n /* row-gap: 28px; */\\n /* column-gap: 36px; */\\n gap: 36px 32px;\\n margin-top: 20px;\\n .list-item {\\n width: 376px;\\n height: 172px;\\n display: flex;\\n overflow: hidden;\\n gap: 16px;\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-avatar {\\n border-radius: 6px;\\n width: 136px;\\n height: 100%;\\n }\\n .contents {\\n display: flex;\\n flex-direction: column;\\n gap: 8px;\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-button {\\n height: 32px;\\n }\\n }\\n }\\n @media (max-width: 768px) {\\n display: flex;\\n flex-direction: column;\\n }\\n }\\n @media (max-width: 768px) {\\n margin-bottom: 38px;\\n .button-wrapper {\\n margin-top: 16px;\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-button {\\n height: 30px;\\n width: 68px;\\n }\\n }\\n .list-wrapper {\\n column-gap: 20px;\\n row-gap: 20px;\\n margin-top: 16px;\\n .list-item {\\n width: 320px;\\n height: 126px;\\n gap: 12px;\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-avatar {\\n width: 108px;\\n }\\n .contents {\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-button {\\n height: 22px;\\n }\\n }\\n }\\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 gap: 16px;\\n width: 100%;\\n flex: 1 1 auto;\\n margin-bottom: 72px;\\n .ant-skeleton.ant-skeleton-element {\\n width: 100%;\\n flex: 1 1 auto;\\n }\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-button {\\n width: 100%;\\n height: 104px;\\n display: flex;\\n flex: 1 1 auto;\\n }\\n @media (max-width: 768px) {\\n margin-bottom: 38px;\\n overflow: hidden;\\n .ant-skeleton.ant-skeleton-element .ant-skeleton-button {\\n width: 280px;\\n height: 74px;\\n display: flex;\\n }\\n }\\n\"\n ]);\n _templateObject6 = function() {\n return data;\n };\n return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nimport { Skeleton } from \"antd\";\nimport styled from \"styled-components\";\nconst MainPageSkeletonWrapper = styled.div.withConfig({\n componentId: \"sc-98575d1c-0\"\n})(_templateObject());\nexport const MainPageSkeleton = ()=>{\n return /*#__PURE__*/ _jsxs(MainPageSkeletonWrapper, {\n children: [\n /*#__PURE__*/ _jsx(MainBannerSkeleton, {}),\n /*#__PURE__*/ _jsx(MainBannerSkeleton, {}),\n /*#__PURE__*/ _jsx(SelectedBooksSectionSkeleton, {}),\n /*#__PURE__*/ _jsx(SolvookPassOnlySkeleton, {}),\n /*#__PURE__*/ _jsx(RankingListSkeleton, {}),\n /*#__PURE__*/ _jsx(MiniBannerSkeleton, {}),\n /*#__PURE__*/ _jsx(ManualCurationSkeleton, {})\n ]\n });\n};\nexport const MainBannerSkeleton = ()=>{\n return /*#__PURE__*/ _jsx(StyledSkeleton, {\n children: /*#__PURE__*/ _jsx(MainBannerSkeletonWrapper, {\n children: /*#__PURE__*/ _jsx(Skeleton.Avatar, {\n active: true,\n shape: \"square\"\n })\n })\n });\n};\nexport const MiniBannerSkeleton = ()=>{\n return /*#__PURE__*/ _jsx(StyledSkeleton, {\n children: /*#__PURE__*/ _jsxs(MiniBannerSkeletonWrapper, {\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n active: true\n }),\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n active: true\n }),\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n active: true\n })\n ]\n })\n });\n};\nconst SolvookPassOnlySkeleton = ()=>{\n const { width } = useWindowDimensions();\n const isMobile = width < 769;\n return /*#__PURE__*/ _jsx(\"div\", {\n style: {\n marginBottom: 40\n },\n children: /*#__PURE__*/ _jsx(StyledSkeleton, {\n children: /*#__PURE__*/ _jsxs(ManualCurationSkeletonWrapper, {\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Input, {}),\n /*#__PURE__*/ _jsxs(\"div\", {\n className: \"list-wrapper\",\n children: [\n /*#__PURE__*/ _jsx(\"div\", {\n className: \"list-item-image list-item\",\n children: /*#__PURE__*/ _jsx(Skeleton.Avatar, {\n shape: \"square\",\n active: true,\n style: {\n height: \"100%\"\n }\n })\n }),\n Array.from({\n length: 4\n }).map((item, index)=>{\n return /*#__PURE__*/ _jsxs(\"div\", {\n className: \"list-item\",\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Avatar, {\n shape: \"square\",\n active: true\n }),\n /*#__PURE__*/ _jsxs(\"div\", {\n className: \"contents\",\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n active: true\n }),\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n style: {\n width: isMobile ? \"100px\" : \"130px\"\n },\n active: true\n }),\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n style: {\n width: isMobile ? \"80px\" : \"100px\"\n },\n active: true\n })\n ]\n })\n ]\n }, \"manual-curation-skeleton-\".concat(index));\n })\n ]\n })\n ]\n })\n })\n });\n};\nexport const RankingListSkeleton = ()=>{\n const { width } = useWindowDimensions();\n const isMobile = width < 769;\n return /*#__PURE__*/ _jsx(StyledSkeleton, {\n children: /*#__PURE__*/ _jsxs(RankingSectionSkeletonWrapper, {\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Input, {}),\n /*#__PURE__*/ _jsxs(\"div\", {\n className: \"button-wrapper\",\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n active: true\n }),\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n active: true\n }),\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n active: true\n })\n ]\n }),\n /*#__PURE__*/ _jsx(\"div\", {\n className: \"list-wrapper\",\n children: Array.from({\n length: isMobile ? 3 : 12\n }).map((item, index)=>{\n return /*#__PURE__*/ _jsxs(\"div\", {\n className: \"list-item\",\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Avatar, {\n shape: \"square\",\n active: true\n }),\n /*#__PURE__*/ _jsxs(\"div\", {\n className: \"contents\",\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n active: true,\n style: {\n width: isMobile ? \"120px\" : \"150px\"\n }\n }),\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n style: {\n width: isMobile ? \"200px\" : \"260px\"\n },\n active: true\n }),\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n style: {\n width: isMobile ? \"100px\" : \"130px\"\n },\n active: true\n }),\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n style: {\n width: isMobile ? \"80px\" : \"100px\"\n },\n active: true\n })\n ]\n })\n ]\n }, \"ranking-list-skeleton-\".concat(index));\n })\n })\n ]\n })\n });\n};\nexport const SelectedBooksSectionSkeleton = ()=>{\n const active = true;\n const size = \"default\";\n const { width } = useWindowDimensions();\n const isMobile = width < 769;\n return /*#__PURE__*/ _jsx(StyledSkeleton, {\n children: /*#__PURE__*/ _jsxs(SelectedBooksSectionSkeletonWrapper, {\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Input, {\n active: true,\n size: size,\n style: {\n height: isMobile ? \"24px\" : \"32px\",\n width: isMobile ? \"224px\" : \"336px\"\n }\n }),\n /*#__PURE__*/ _jsx(\"div\", {\n className: \"contents\",\n children: Array.from({\n length: 8\n }).map((item, idx)=>{\n return /*#__PURE__*/ _jsxs(\"div\", {\n style: {\n display: \"flex\",\n flexDirection: \"row\",\n gap: 12,\n alignItems: \"center\"\n },\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Input, {\n active: true,\n style: {\n width: 34,\n minWidth: 34,\n height: 48\n }\n }),\n /*#__PURE__*/ _jsxs(\"div\", {\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Input, {\n active: true,\n style: {\n width: 124,\n minWidth: 34,\n height: 16\n }\n }),\n /*#__PURE__*/ _jsx(Skeleton.Input, {\n active: true,\n style: {\n width: 124,\n minWidth: 34,\n height: 16\n }\n })\n ]\n })\n ]\n }, \"selected-books-skeleton-\".concat(idx));\n })\n })\n ]\n })\n });\n};\nconst ManualCurationSkeletonWrapper = styled.div.withConfig({\n componentId: \"sc-98575d1c-1\"\n})(_templateObject1());\nexport const ManualCurationSkeleton = ()=>{\n const { width } = useWindowDimensions();\n const isMobile = width < 769;\n return /*#__PURE__*/ _jsx(StyledSkeleton, {\n children: /*#__PURE__*/ _jsxs(ManualCurationSkeletonWrapper, {\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Input, {}),\n /*#__PURE__*/ _jsx(\"div\", {\n className: \"list-wrapper\",\n children: Array.from({\n length: 5\n }).map((item, index)=>{\n return /*#__PURE__*/ _jsxs(\"div\", {\n className: \"list-item\",\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Avatar, {\n shape: \"square\",\n active: true\n }),\n /*#__PURE__*/ _jsxs(\"div\", {\n className: \"contents\",\n children: [\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n active: true\n }),\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n style: {\n width: isMobile ? \"100px\" : \"130px\"\n },\n active: true\n }),\n /*#__PURE__*/ _jsx(Skeleton.Button, {\n style: {\n width: isMobile ? \"80px\" : \"100px\"\n },\n active: true\n })\n ]\n })\n ]\n }, \"manual-curation-skeleton-\".concat(index));\n })\n })\n ]\n })\n });\n};\nexport const SelectedBooksSectionSkeletonWrapper = styled.div.withConfig({\n componentId: \"sc-98575d1c-2\"\n})(_templateObject2());\nexport const StyledSkeleton = styled.div.withConfig({\n componentId: \"sc-98575d1c-3\"\n})(_templateObject3());\nconst MainBannerSkeletonWrapper = styled.div.withConfig({\n componentId: \"sc-98575d1c-4\"\n})(_templateObject4());\nconst RankingSectionSkeletonWrapper = styled.div.withConfig({\n componentId: \"sc-98575d1c-5\"\n})(_templateObject5());\nconst MiniBannerSkeletonWrapper = styled.div.withConfig({\n componentId: \"sc-98575d1c-6\"\n})(_templateObject6());\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n const data = _tagged_template_literal([\n \"\\n .header {\\n display: flex;\\n justify-content: space-between;\\n align-items: flex-start;\\n }\\n\\n .book-info-wrapper {\\n width: 224px;\\n flex-direction: column;\\n gap: 8px;\\n\\n img {\\n width: 92px;\\n }\\n\\n .thumb-wrapper {\\n display: flex;\\n box-sizing: border-box;\\n flex-direction: column;\\n width: 100%;\\n padding: 8px;\\n height: 224px;\\n padding-bottom: 40px;\\n }\\n\\n > div {\\n position: relative;\\n }\\n\\n .preview-btn {\\n bottom: 8px;\\n left: 8px;\\n right: 8px;\\n width: auto;\\n text-align: center;\\n }\\n }\\n\\n .swiper-slide {\\n width: unset;\\n height: unset;\\n }\\n\\n @media (max-width: 1200px) {\\n margin-right: -32px;\\n }\\n @media (max-width: 768px) {\\n .swiper {\\n margin-right: -16px;\\n }\\n\\n .book-info-wrapper {\\n width: 150px;\\n\\n .thumb-wrapper {\\n height: 150px;\\n padding-bottom: 8px;\\n\\n img {\\n width: 68px;\\n }\\n }\\n }\\n\\n .preview-btn {\\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 color: \",\n \";\\n font-size: 24px;\\n font-weight: 700;\\n line-height: 32px;\\n margin-bottom: 20px;\\n\\n span {\\n margin-left: 8px;\\n color: \",\n \";\\n font-size: 14px;\\n font-weight: 400;\\n line-height: 22px;\\n }\\n\\n @media (max-width: 768px) {\\n font-size: 20px;\\n span {\\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, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Swiper, SwiperSlide } from \"swiper/react\";\nimport \"swiper/swiper-bundle.css\";\nimport { BookCard } from \"./BookCard\";\nimport { ManualCurationSkeleton } from \"./MainPageSkeletons\";\nimport { SwiperCustomButton } from \"./SwiperCustomButton\";\nexport const ManualCurationSection = (param)=>{\n let { data , showSkeleton , onClick } = param;\n const [skeletonTimer, setSkeletonTimer] = useState(false);\n const swiperRef = useRef(null);\n useEffect(()=>{\n if (showSkeleton) {\n setSkeletonTimer(true);\n setTimeout(()=>{\n setSkeletonTimer(false);\n }, 1000);\n }\n }, [\n showSkeleton\n ]);\n if (skeletonTimer) {\n return /*#__PURE__*/ _jsx(ManualCurationSkeleton, {});\n }\n if (!data) return /*#__PURE__*/ _jsx(_Fragment, {});\n return /*#__PURE__*/ _jsx(_Fragment, {\n children: /*#__PURE__*/ _jsxs(ManualCurationSectionWrapper, {\n children: [\n /*#__PURE__*/ _jsxs(\"div\", {\n className: \"header\",\n children: [\n /*#__PURE__*/ _jsx(SectionTitle, {\n children: data.title\n }),\n /*#__PURE__*/ _jsx(SwiperCustomButton, {\n nextClassName: \"manual-curation-button-next-\".concat(data.id),\n prevClassName: \"manual-curation-button-prev-\".concat(data.id)\n })\n ]\n }),\n /*#__PURE__*/ _jsx(Swiper, {\n ref: swiperRef,\n height: 382,\n // width={224}\n scrollbar: false,\n slidesPerView: \"auto\",\n spaceBetween: 20,\n navigation: {\n nextEl: \".manual-curation-button-next-\".concat(data.id),\n prevEl: \".manual-curation-button-prev-\".concat(data.id)\n },\n children: data.items.map((book, index)=>{\n return /*#__PURE__*/ _jsx(SwiperSlide, {\n onClick: ()=>onClick(book, data.title),\n children: /*#__PURE__*/ _jsx(BookCard, {\n book: book,\n index: index,\n positionType: \"curation\"\n }, \"manual-curation-book-info-\".concat(index))\n }, \"item-\".concat(index));\n })\n })\n ]\n }, \"manual-curation-\".concat(data.title))\n });\n};\nexport const ManualCurationSectionWrapper = styled.section.withConfig({\n componentId: \"sc-46385d2c-0\"\n})(_templateObject());\nexport const SectionTitle = styled.h3.withConfig({\n componentId: \"sc-46385d2c-1\"\n})(_templateObject1(), (props)=>props.theme.new.colors.sol_gray_800, (props)=>props.theme.new.colors.sol_gray_500);\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 flex: 1;\\n gap: 8px;\\n float: right;\\n justify-content: flex-end;\\n button {\\n all: unset;\\n width: 32px;\\n height: 32px;\\n border-radius: 4px; //2px\\n border: 1px solid \",\n \";\\n background-color: \",\n \";\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n cursor: pointer;\\n &.swiper-button-disabled {\\n border: 0;\\n background-color: \",\n \";\\n opacity: 0.4;\\n }\\n :hover,\\n :active {\\n background-color: \",\n \";\\n }\\n }\\n @media (max-width: 1200px) {\\n display: none;\\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 { ArrowLeft, ArrowRight, Sizes } from \"@/components/icon/IconList\";\nimport React from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport Icon from \"../icon/Icon\";\nexport const SwiperCustomButton = (param)=>{\n let { nextClassName , prevClassName } = param;\n const theme = useTheme();\n return /*#__PURE__*/ _jsxs(SwiperCustomButtonWrapper, {\n children: [\n /*#__PURE__*/ _jsx(\"button\", {\n className: prevClassName,\n children: /*#__PURE__*/ _jsx(Icon, {\n icon: ArrowLeft,\n size: Sizes.small,\n color: theme.new.colors.sol_gray_900\n })\n }),\n /*#__PURE__*/ _jsx(\"button\", {\n className: nextClassName,\n children: /*#__PURE__*/ _jsx(Icon, {\n icon: ArrowRight,\n size: Sizes.small,\n color: theme.new.colors.sol_gray_900\n })\n })\n ]\n });\n};\nconst SwiperCustomButtonWrapper = styled.div.withConfig({\n componentId: \"sc-eefc77c1-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_gray_200, (props)=>props.theme.new.colors.white, (props)=>props.theme.new.colors.sol_gray_0, (props)=>props.theme.new.colors.sol_gray_100);\n"],"names":[],"sourceRoot":""}