{"version":3,"file":"static/chunks/5418-4790458c661e2d8c.js","mappings":"AACA","sources":["webpack://_N_E/./src/components/PaginationWrapper.tsx","webpack://_N_E/./src/components/common/ShadowSlideContainer.tsx","webpack://_N_E/./src/modules/mypages/libraries/components/filter/LibraryFilterDropdown.tsx","webpack://_N_E/./src/modules/mypages/libraries/components/filter/LibrarySelectedFilters.tsx","webpack://_N_E/./src/modules/mypages/libraries/components/filter/LibraryFilterDetails.tsx","webpack://_N_E/./src/modules/mypages/libraries/components/filter/LibraryFilterTabs.tsx","webpack://_N_E/./src/modules/mypages/libraries/components/filter/LibraryFilter.tsx","webpack://_N_E/./src/modules/mypages/libraries/views/LibraryListView.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 text-align: center;\\n margin-top: 40px;\\n\\n .ant-pagination {\\n li {\\n width: 16px;\\n min-width: 10px;\\n height: 24px;\\n\\n &.ant-pagination-item {\\n width: auto;\\n min-width: 24px;\\n line-height: 22px;\\n\\n a {\\n padding: 0;\\n }\\n }\\n\\n .ant-pagination-item-link {\\n font-size: 14px;\\n font-weight: 500;\\n color: \",\n \";\\n\\n .anticon {\\n display: none;\\n }\\n }\\n\\n &.ant-pagination-prev {\\n background: url('/assets/left_small.svg') no-repeat center center;\\n }\\n\\n &.ant-pagination-next {\\n background: url('/assets/right_small.svg') no-repeat center center;\\n }\\n\\n &.ant-pagination-disabled {\\n opacity: 0.7;\\n pointer-events: none;\\n }\\n\\n &.ant-pagination-item-active {\\n color: \",\n \";\\n padding: 0 3px;\\n border-radius: 0;\\n }\\n }\\n }\\n\"\n ]);\n _templateObject = function() {\n return data;\n };\n return data;\n}\nimport styled from \"styled-components\";\nimport { themeGet } from \"@styled-system/theme-get\";\nexport const PaginationWrapper = styled.div.withConfig({\n componentId: \"sc-92f8e28f-0\"\n})(_templateObject(), themeGet(\"text.0\", \"#1B1B29\"), themeGet(\"primary.0\", \"#002FA8\"));\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","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 height: auto;\\n padding: 6px 12px;\\n border-radius: 6px;\\n border-color: \",\n \";\\n color: \",\n \";\\n font-size: 16px;\\n line-height: 1.5;\\n\\n &:hover,\\n &.ant-dropdown-open,\\n &.active {\\n &:not([disabled]) {\\n border-color: \",\n \";\\n color: \",\n \";\\n font-weight: 600;\\n }\\n }\\n &[disabled] {\\n background-color: \",\n \";\\n }\\n\\n svg {\\n margin-left: 4px;\\n transition: transform 0.2s;\\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 width: 450px;\\n max-height: 200px;\\n padding: 0px 4px;\\n overflow: auto;\\n border-radius: 6px;\\n box-shadow: 6px 6px 20px 0px rgba(28, 31, 46, 0.12) !important;\\n\\n ::-webkit-scrollbar {\\n -webkit-appearance: none;\\n width: 8px;\\n }\\n\\n ::-webkit-scrollbar-thumb {\\n border-radius: 5px;\\n background-color: rgba(0, 0, 0, 0.5);\\n -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\\n }\\n\\n @media (max-width: 768px) {\\n width: 90vw;\\n }\\n\\n dt {\\n padding: 8px 0;\\n color: \",\n \";\\n font-size: 14px;\\n font-weight: 600;\\n line-height: 22px;\\n letter-spacing: -0.14px;\\n }\\n dd {\\n margin-bottom: 12px;\\n\\n &:last-of-type {\\n margin-bottom: 0px;\\n }\\n }\\n .ant-checkbox-wrapper {\\n width: 100%;\\n margin: 6px 0;\\n padding: 6px 0;\\n align-items: center;\\n }\\n .ant-checkbox {\\n margin: 3px;\\n top: 0;\\n\\n .ant-checkbox-inner {\\n width: 18px;\\n height: 18px;\\n }\\n & + span {\\n color: \",\n \";\\n font-size: 16px;\\n line-height: 1.5;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n white-space: nowrap;\\n }\\n }\\n .ant-checkbox-checked + span {\\n color: \",\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 Icon from \"@/components/icon/Icon\";\nimport { ArrowDownOutlined, Sizes } from \"@/components/icon/IconList\";\nimport { Button, Card, Dropdown } from \"antd\";\nimport { useState } from \"react\";\nimport styled from \"styled-components\";\nexport const Chip = styled(Button).withConfig({\n componentId: \"sc-560a5e23-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_gray_100, (props)=>props.theme.new.colors.sol_gray_300, (props)=>props.theme.new.colors.sol_gray_700, (props)=>props.theme.new.colors.sol_gray_700, (props)=>props.theme.new.colors.sol_gray_50, (props)=>props.open ? \"transform: rotate(180deg);\" : \"\");\nconst StyledCard = styled(Card).withConfig({\n componentId: \"sc-560a5e23-1\"\n})(_templateObject1(), (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_gray_900, (props)=>props.theme.new.colors.sol_indigo_500);\nconst LibraryFilterDropdown = (param)=>{\n let { label , count , children , disabled } = param;\n const [open, setOpen] = useState(false);\n return /*#__PURE__*/ _jsx(_Fragment, {\n children: /*#__PURE__*/ _jsx(Dropdown, {\n dropdownRender: (menu)=>{\n return /*#__PURE__*/ _jsx(StyledCard, {\n size: \"small\",\n bordered: false,\n className: \"styled-card\",\n children: children\n });\n },\n trigger: [\n \"click\"\n ],\n open: open,\n onOpenChange: setOpen,\n disabled: disabled,\n children: /*#__PURE__*/ _jsxs(Chip, {\n type: \"ghost\",\n ghost: true,\n open: open,\n className: count && \"active\",\n children: [\n /*#__PURE__*/ _jsxs(\"span\", {\n children: [\n label,\n \" \",\n !!count && count\n ]\n }),\n /*#__PURE__*/ _jsx(Icon, {\n icon: ArrowDownOutlined,\n size: Sizes.small\n })\n ]\n })\n })\n });\n};\nexport default LibraryFilterDropdown;\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: flex-end;\\n margin-top: 20px;\\n padding: 0 16px 16px 0;\\n position: relative;\\n background-color: \",\n \";\\n border-radius: 6px;\\n color: \",\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-bottom: 0;\\n padding-left: 0;\\n flex-grow: 1;\\n\"\n ]);\n _templateObject1 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject2() {\n const data = _tagged_template_literal([\n \"\\n display: inline-flex;\\n align-items: center;\\n margin: 16px 0 0 16px;\\n gap: 4px;\\n font-size: 16px;\\n line-height: 1.5;\\n letter-spacing: -0.16px;\\n\"\n ]);\n _templateObject2 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject3() {\n const data = _tagged_template_literal([\n \"\\n max-width: 160px;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n white-space: nowrap;\\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 align-items: center;\\n height: auto;\\n padding: 0 !important;\\n gap: 4px;\\n font-weight: 600;\\n\\n i {\\n display: block;\\n }\\n\"\n ]);\n _templateObject4 = function() {\n return data;\n };\n return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport Icon from \"@/components/icon/Icon\";\nimport { Close1_5px, Reset24_2, Sizes } from \"@/components/icon/IconList\";\nimport useSearchParams from \"@/hooks/useSearchParams\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { Button } from \"antd\";\nimport { useEffect, useState } from \"react\";\nimport { fetchLibraries, LibraryFilterRequestMap } from \"src/api/library\";\nimport styled from \"styled-components\";\nimport { useDebounce } from \"use-debounce\";\nimport useLibraryStore from \"../../stores/library.store\";\nconst Wrapper = styled.div.withConfig({\n componentId: \"sc-d77eb511-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_gray_0, (props)=>props.theme.new.colors.sol_gray_500);\nconst Container = styled.ol.withConfig({\n componentId: \"sc-d77eb511-1\"\n})(_templateObject1());\nconst ItemContainer = styled.li.withConfig({\n componentId: \"sc-d77eb511-2\"\n})(_templateObject2());\nconst ItemTypography = styled.span.withConfig({\n componentId: \"sc-d77eb511-3\"\n})(_templateObject3());\nconst NoPadButton = styled(Button).withConfig({\n componentId: \"sc-d77eb511-4\"\n})(_templateObject4());\nconst LibrarySelectedFilters = (param)=>{\n let { flat , checked , onReset , onRemoveItem } = param;\n const [items, setItems] = useState([]);\n useEffect(()=>{\n const result = [];\n for (const filter of flat){\n Object.entries(checked).some((param)=>{\n let [k, v] = param;\n if (k === \"\".concat(filter.uid)) {\n result.push(filter);\n return true;\n }\n });\n }\n setItems(result);\n }, [\n flat,\n checked\n ]);\n const searchParams = useSearchParams();\n const searchType = useLibraryStore((state)=>state.searchType);\n const pagination = useLibraryStore((state)=>state.pagination);\n const { setPagination , setList } = useLibraryStore((param)=>{\n let { setPagination , setList } = param;\n return {\n setPagination,\n setList\n };\n });\n const [filters, setFilters] = useState({\n queryKeys: []\n });\n const [debouncedFilters] = useDebounce(filters, 50);\n const [detailFilters, setDetailFilters] = useState();\n const { data } = useQuery([\n \"libraryList\",\n ...debouncedFilters.queryKeys\n ], ()=>fetchLibraries(debouncedFilters.params), {\n enabled: !!debouncedFilters.queryKeys.length\n });\n useEffect(()=>{\n const { parsing , ...summary } = items.reduce((acc, param)=>{\n let { uid , id , value } = param;\n let key = LibraryFilterRequestMap[checked[uid]];\n if (key) {\n if (!acc[key]) {\n acc[key] = [];\n }\n acc[key].push(key === \"unit\" ? value : id);\n }\n return acc;\n }, {});\n const details = {\n parsing: !!parsing,\n ...summary\n };\n // console.log('details', details)\n setDetailFilters(details);\n }, [\n items,\n checked\n ]);\n useEffect(()=>{\n if (!pagination.current || !searchType || !detailFilters) {\n return;\n }\n const subject = searchParams.get(\"subject\");\n const params = {\n limit: pagination.pageSize,\n offset: pagination.pageSize * (pagination.current - 1),\n searchType,\n subject,\n ...detailFilters\n };\n setFilters({\n params,\n queryKeys: Object.values(params)\n });\n }, [\n pagination,\n searchParams,\n searchType,\n detailFilters\n ]);\n useEffect(()=>{\n if (!data) {\n return;\n }\n const { data: libraries } = data;\n if (libraries) {\n setList(libraries);\n }\n setPagination({\n total: data.pagination.total\n });\n }, [\n data,\n setList,\n searchParams,\n setPagination\n ]);\n return items.length ? /*#__PURE__*/ _jsx(_Fragment, {\n children: /*#__PURE__*/ _jsxs(Wrapper, {\n children: [\n /*#__PURE__*/ _jsx(Container, {\n children: items.map((param)=>/*#__PURE__*/ {\n let { id , uid , value } = param;\n return _jsx(Item, {\n label: value,\n onRemove: onRemoveItem(uid, id)\n }, uid);\n })\n }),\n /*#__PURE__*/ _jsxs(NoPadButton, {\n type: \"text\",\n onClick: onReset,\n children: [\n /*#__PURE__*/ _jsx(Icon, {\n icon: Reset24_2,\n size: Sizes.small\n }),\n \"초기화\"\n ]\n })\n ]\n })\n }) : null;\n};\nexport default LibrarySelectedFilters;\nconst Item = (param)=>{\n let { label , onRemove } = param;\n return /*#__PURE__*/ _jsxs(ItemContainer, {\n children: [\n /*#__PURE__*/ _jsx(ItemTypography, {\n children: label\n }),\n /*#__PURE__*/ _jsx(NoPadButton, {\n type: \"text\",\n onClick: onRemove,\n children: /*#__PURE__*/ _jsx(Icon, {\n icon: Close1_5px,\n size: Sizes.small\n })\n })\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\"\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: 8px;\\n align-items: center;\\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 ShadowSlideContainer from \"@/components/common/ShadowSlideContainer\";\nimport { REDIRECT_QUERY } from \"@/hooks/useRedirect\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { LOGIN_PAGE } from \"@/settings/constant\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { Checkbox, Col, Row } from \"antd\";\nimport { isAxiosError } from \"axios\";\nimport { useRouter } from \"next/router\";\nimport { Fragment, useCallback, useEffect, useState } from \"react\";\nimport { fetchLibraryFilters, isLibraryGeneralFilter, LibraryFiltersMap, LibrarySearchType } from \"src/api/library\";\nimport styled from \"styled-components\";\nimport { useLibrarySubject } from \"..\";\nimport useLibraryStore from \"../../stores/library.store\";\nimport { defaultPagination } from \"../../views/LibraryListView\";\nimport LibraryFilterDropdown, { Chip } from \"./LibraryFilterDropdown\";\nimport LibrarySelectedFilters from \"./LibrarySelectedFilters\";\nconst DetailsWrapper = styled.div.withConfig({\n componentId: \"sc-d9fe2f0b-0\"\n})(_templateObject());\nconst Container = styled.div.withConfig({\n componentId: \"sc-d9fe2f0b-1\"\n})(_templateObject1());\nconst ItemOrder = [\n \"baseSources\",\n \"brands\",\n \"dataTypes\",\n \"units\",\n \"genres\",\n \"eras\",\n \"useBooks\",\n \"publishers\",\n \"curriculums\",\n // 'filterParsing',\n \"packages\"\n];\nconst getDefaultItems = ()=>({\n hierarchical: [],\n flat: [],\n checked: {},\n isInitializing: true\n });\nconst LibraryFilterDetails = (param)=>{\n let { append } = param;\n const { pathname , query , push , asPath } = useRouter();\n const subject = useLibrarySubject();\n const searchType = useLibraryStore((state)=>state.searchType);\n const { data , error } = useQuery([\n \"libraryFilters\",\n subject,\n searchType\n ], ()=>fetchLibraryFilters({\n subject,\n searchType\n }), {\n enabled: !!subject && !!searchType,\n refetchOnWindowFocus: false\n });\n const handleError = useCallback(async ()=>{\n if (error && isAxiosError(error) && error.response.status === 401) {\n alert(\"세션 오류가 발생했습니다. 다시 로그인 부탁드립니다.\");\n const searchParams = new URLSearchParams();\n searchParams.set(REDIRECT_QUERY, asPath);\n document.location.href = LOGIN_PAGE.concat(\"?\", searchParams.toString());\n }\n }, [\n error,\n asPath\n ]);\n useEffect(()=>{\n handleError();\n }, [\n handleError\n ]);\n const [items, setItems] = useState(getDefaultItems());\n const [unmounters, setUnmounters] = useState({\n scroller: 0\n });\n const setup = useCallback(()=>{\n if (!data) {\n return;\n }\n const result = getDefaultItems();\n let uid = 0;\n for (const key of ItemOrder){\n const values = data[key];\n if (key !== \"useBooks\" && searchType === \"non_literature\") {\n continue;\n }\n if (values) {\n let hasGrandChildren = false;\n if (typeof values !== \"boolean\") {\n for (const sub of values){\n if (isLibraryGeneralFilter(sub)) {\n if (sub.id) {\n sub.uid = ++uid;\n result.flat.push({\n ...sub,\n id: sub.id,\n type: key\n });\n }\n } else {\n sub.values = sub.values.map((item, index)=>{\n return {\n ...item,\n uid: ++uid,\n id: \"\".concat(item.id),\n type: key\n };\n });\n result.flat.push(...sub.values);\n hasGrandChildren = true;\n }\n }\n }\n result.hierarchical.push({\n name: key,\n values,\n hasGrandChildren,\n count: 0,\n order: LibraryFiltersMap[key].order\n });\n }\n }\n setItems({\n ...result,\n hierarchical: [\n ...result.hierarchical\n ].sort((a, b)=>a.order - b.order)\n });\n }, [\n data,\n searchType\n ]);\n useEffect(()=>{\n setup();\n }, [\n setup\n ]);\n //선택한 필터만 count up\n const calc = useCallback(()=>{\n setItems((prev)=>{\n const counts = Object.values(prev.checked).reduce((acc, filterKey)=>{\n if (!acc[filterKey]) {\n acc[filterKey] = 0;\n }\n acc[filterKey]++;\n return acc;\n }, {});\n return {\n ...prev,\n hierarchical: prev.hierarchical.map((filter)=>({\n ...filter,\n count: counts[filter.name] || 0\n }))\n };\n });\n }, []);\n useEffect(()=>{\n calc();\n }, [\n items.checked,\n calc\n ]);\n const toggleChecked = useCallback((_id, filterKey)=>()=>{\n if (!_id) {\n return;\n }\n const id = \"\".concat(_id);\n const value = query[filterKey];\n const result = value ? [\n ...value instanceof Array ? value : [\n value\n ]\n ] : [];\n const index = result.indexOf(id);\n if (index < 0) {\n result.push(id);\n } else {\n result.splice(index, 1);\n }\n const newQuery = {\n ...query,\n [filterKey]: result\n };\n // const newQuery = { ...query, [filterKey]: filterKey === 'packages' ? [1] : result } // Test 호출을 위한 임시 코드\n if (!result.length) {\n delete newQuery[filterKey];\n }\n mixpanelEvent(\"MyProduct Filter Clicked\", {\n \"Product Type\": searchType,\n \"Filter Name\": filterKey\n });\n push({\n pathname,\n query: {\n ...newQuery,\n ...defaultPagination\n }\n }, undefined, {\n shallow: true,\n scroll: true\n });\n }, [\n pathname,\n query,\n push,\n searchType\n ]);\n const handleReset = useCallback(()=>{\n push({\n pathname,\n query: {\n subject: query.subject,\n searchType,\n ...defaultPagination\n }\n }, undefined, {\n shallow: true,\n scroll: true\n });\n }, [\n pathname,\n query,\n push\n ]);\n const handleRemove = useCallback((uid, id)=>()=>{\n toggleChecked(id, items.checked[uid])();\n }, [\n items.checked,\n toggleChecked\n ]);\n useEffect(()=>{\n setItems((prev)=>{\n const result = {};\n const keys = Object.keys(LibraryFiltersMap);\n for (const key of keys){\n const value = query[key];\n const arr = value ? [\n ...value instanceof Array ? value : [\n value\n ]\n ] : [];\n for (const idInSearch of arr){\n prev.flat.filter((param)=>{\n let { id: _id , uid , type } = param;\n const id = \"\".concat(_id);\n const { label } = LibraryFiltersMap[key];\n if (idInSearch === id && key === type) {\n result[uid] = key;\n return true;\n }\n });\n }\n }\n return {\n ...prev,\n checked: result,\n isInitializing: false\n };\n });\n }, [\n query,\n items.isInitializing\n ]);\n useEffect(()=>{\n setUnmounters((prev)=>({\n ...prev,\n scroller: new Date().getTime()\n }));\n }, [\n searchType\n ]);\n return /*#__PURE__*/ _jsxs(_Fragment, {\n children: [\n /*#__PURE__*/ _jsxs(DetailsWrapper, {\n children: [\n /*#__PURE__*/ _jsx(ShadowSlideContainer, {\n children: /*#__PURE__*/ _jsx(Container, {\n children: items.hierarchical.map((param)=>{\n let { uid , name , values , hasGrandChildren , count } = param;\n var _LibraryFiltersMap_name, _LibraryFiltersMap_name1;\n return typeof values === \"boolean\" ? /*#__PURE__*/ _jsx(Chip, {\n type: \"ghost\",\n ghost: true,\n className: items.checked[uid] && \"active\",\n onClick: toggleChecked(\"true\", name),\n children: (_LibraryFiltersMap_name = LibraryFiltersMap[name]) === null || _LibraryFiltersMap_name === void 0 ? void 0 : _LibraryFiltersMap_name.label\n }, name) : /*#__PURE__*/ _jsx(LibraryFilterDropdown, {\n label: (_LibraryFiltersMap_name1 = LibraryFiltersMap[name]) === null || _LibraryFiltersMap_name1 === void 0 ? void 0 : _LibraryFiltersMap_name1.label,\n disabled: !values.length,\n count: count,\n children: hasGrandChildren ? /*#__PURE__*/ _jsx(\"dl\", {\n children: values.map((sub, idx)=>{\n /*#__PURE__*/ return _jsxs(Fragment, {\n children: [\n /*#__PURE__*/ _jsx(\"dt\", {\n children: name === \"baseSources\" ? Object.keys(LibrarySearchType).find((t)=>LibrarySearchType[t] === sub.source_type) : sub.initial\n }),\n /*#__PURE__*/ _jsx(\"dd\", {\n children: /*#__PURE__*/ _jsx(Row, {\n gutter: [\n 24,\n 0\n ],\n children: sub.values.map((child)=>{\n var _LibraryFiltersMap_name;\n /*#__PURE__*/ return _jsx(Col, {\n span: ((_LibraryFiltersMap_name = LibraryFiltersMap[name]) === null || _LibraryFiltersMap_name === void 0 ? void 0 : _LibraryFiltersMap_name.colSpan) || 12,\n children: /*#__PURE__*/ _jsx(Checkbox, {\n checked: !!items.checked[child.uid],\n onChange: toggleChecked(child.id, name),\n children: child.value\n })\n }, child.uid);\n })\n })\n })\n ]\n }, idx);\n })\n }) : /*#__PURE__*/ _jsx(Row, {\n gutter: [\n 24,\n 0\n ],\n children: values.map((sub)=>{\n var _LibraryFiltersMap_name;\n /*#__PURE__*/ return _jsx(Col, {\n span: ((_LibraryFiltersMap_name = LibraryFiltersMap[name]) === null || _LibraryFiltersMap_name === void 0 ? void 0 : _LibraryFiltersMap_name.colSpan) || 12,\n children: /*#__PURE__*/ _jsx(Checkbox, {\n checked: !!items.checked[sub.uid],\n onChange: toggleChecked(sub.id, name),\n children: sub.value\n })\n }, sub.uid);\n })\n })\n }, name);\n })\n })\n }, unmounters.scroller),\n append\n ]\n }),\n !items.isInitializing && /*#__PURE__*/ _jsx(LibrarySelectedFilters, {\n flat: items.flat,\n checked: items.checked,\n onReset: handleReset,\n onRemoveItem: handleRemove\n })\n ]\n });\n};\nexport default LibraryFilterDetails;\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n const data = _tagged_template_literal([\n \"\\n .ant-tabs-nav {\\n margin-bottom: 20px;\\n\\n &::before {\\n border-bottom-width: 2px;\\n border-bottom-color: \",\n \";\\n }\\n }\\n\\n .ant-tabs-tab {\\n font-size: 18px;\\n font-weight: 600;\\n line-height: 26px;\\n\\n &.ant-tabs-tab-active .ant-tabs-tab-btn {\\n color: \",\n \";\\n }\\n }\\n\\n .ant-tabs-tab-btn {\\n color: \",\n \";\\n }\\n\\n .ant-tabs-ink-bar {\\n height: 3px !important;\\n background-color: \",\n \";\\n }\\n\"\n ]);\n _templateObject = function() {\n return data;\n };\n return data;\n}\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport useSearchParams from \"@/hooks/useSearchParams\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { Tabs } from \"antd\";\nimport { useRouter } from \"next/router\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { fetchLibraryMetadata, getLibrarySearchTypeName, LibrarySearchType } from \"src/api/library\";\nimport styled from \"styled-components\";\nimport { useLibrarySubject } from \"..\";\nimport useLibraryStore from \"../../stores/library.store\";\nimport { defaultPagination } from \"../../views/LibraryListView\";\nconst StyledTabs = styled(Tabs).withConfig({\n componentId: \"sc-aeff3c79-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_gray_100, (props)=>props.theme.new.colors.sol_gray_900, (props)=>props.theme.new.colors.sol_gray_300, (props)=>props.theme.new.colors.sol_gray_900);\nexport const LibrarySearchTypesBySubject = {\n EN: [\n LibrarySearchType.자료,\n LibrarySearchType.교과서,\n LibrarySearchType.참고서\n ],\n KO: [\n LibrarySearchType.자료,\n LibrarySearchType.문학,\n LibrarySearchType.비문학\n ],\n MA: [\n LibrarySearchType.자료,\n LibrarySearchType.교과서,\n LibrarySearchType.참고서\n ],\n SO: [\n LibrarySearchType.자료,\n LibrarySearchType.교과서,\n LibrarySearchType.참고서\n ],\n SC: [\n LibrarySearchType.자료,\n LibrarySearchType.교과서,\n LibrarySearchType.참고서\n ]\n};\nconst LibraryFilterTabs = (param)=>{\n let { setSlots } = param;\n const { pathname , query , replace } = useRouter();\n const searchParams = useSearchParams();\n const subject = useLibrarySubject();\n const metadata = useLibraryStore((state)=>state.metadata);\n const value = useLibraryStore((state)=>state.searchType);\n const { setSearchType , setMetadata } = useLibraryStore((param)=>{\n let { setSearchType , setMetadata } = param;\n return {\n setSearchType,\n setMetadata\n };\n });\n const [options, setOptions] = useState();\n const changeSearchType = useCallback((searchType)=>{\n // mx-108 자료보관함 탭 클릭시\n mixpanelEvent(\"Tab UI Clicked\", {\n \"Tab Type\": \"Library\",\n \"Tab Name\": getLibrarySearchTypeName(searchType)\n });\n replace({\n pathname,\n query: {\n subject: query.subject,\n searchType,\n ...defaultPagination\n }\n }, undefined, {\n shallow: true,\n scroll: true\n });\n }, [\n pathname,\n query,\n replace\n ]);\n useEffect(()=>{\n const searchType = searchParams.get(\"searchType\");\n if (!subject) {\n return;\n }\n const searchTypes = LibrarySearchTypesBySubject[subject];\n if (searchTypes) {\n setOptions(searchTypes.map((key)=>{\n const label = getLibrarySearchTypeName(key);\n return {\n key,\n label: // metadata && metadata[key] !== undefined\n // \t? `${label} ${metadata[key].toLocaleString()}`\n // \t: label,\n metadata && \"\".concat(label, \" \").concat((metadata[key] || 0).toLocaleString())\n };\n }));\n if (searchTypes.find((t)=>t === searchType)) {\n setSearchType(searchType);\n } else {\n changeSearchType(searchTypes[0]);\n }\n }\n }, [\n searchParams,\n metadata,\n setSearchType,\n changeSearchType\n ]);\n const { data } = useQuery([\n \"libraryMetadata\",\n subject\n ], ()=>fetchLibraryMetadata({\n subject\n }), {\n enabled: !!subject\n });\n useEffect(()=>{\n if (!data) {\n return;\n }\n setMetadata(data.metadata);\n setSlots({\n libraryReviewButton: data.libraryReviewButton\n });\n }, [\n data,\n setSlots\n ]);\n return /*#__PURE__*/ _jsx(StyledTabs, {\n tabBarGutter: 16,\n activeKey: value,\n items: options,\n onChange: changeSearchType\n });\n};\nexport default LibraryFilterTabs;\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-direction: column;\\n margin-bottom: 40px;\\n\\n .filterWrapper {\\n display: flex;\\n flex-direction: column;\\n gap: 36px;\\n .inner {\\n display: flex;\\n }\\n }\\n\\n .ant-select {\\n &,\\n &:not(.ant-select-customize-input) {\\n width: 100px;\\n }\\n }\\n\\n @media (max-width: 1200px) {\\n // margin-top: \",\n \"px;\\n }\\n @media (max-width: 768px) {\\n position: relative;\\n display: block;\\n\\n .filterWrapper {\\n overflow-x: auto;\\n padding-bottom: 8px;\\n\\n gap: 32px;\\n\\n &::-webkit-scrollbar {\\n width: 120px;\\n height: 4px;\\n }\\n\\n &::-webkit-scrollbar-thumb {\\n border-radius: 2px;\\n background: #bbbbbf;\\n }\\n\\n .inner {\\n white-space: nowrap;\\n padding: 0 16px;\\n }\\n }\\n\\n .ant-select {\\n position: absolute;\\n bottom: -8px;\\n right: 0;\\n }\\n }\\n .newPlan-select {\\n color: \",\n \";\\n font-size: 14px;\\n font-weight: 600;\\n text-align: right;\\n padding: 6px 0;\\n\\n @media (max-width: 768px) {\\n display: none;\\n vertical-align: bottom;\\n position: absolute;\\n bottom: -8px;\\n right: 0;\\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 /* margin-bottom: 36px; */\\n font-size: 28px;\\n font-weight: 700;\\n line-height: 38px;\\n margin-bottom: 0;\\n @media (max-width: 768px) {\\n /* margin-bottom: 24px; */\\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 Icon from \"@/components/icon/Icon\";\nimport { ArrowRight2px, Sizes } from \"@/components/icon/IconList\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { MYPAGE_PACKAGES_INDEX_PAGE } from \"@/settings/constant\";\nimport { Button, useTypography } from \"@bookips/solvook-ui-library\";\nimport { Stack, useTheme } from \"@mui/material\";\nimport { useRouter } from \"next/router\";\nimport React, { useCallback, useState } from \"react\";\nimport styled from \"styled-components\";\nimport \"../../../../../api/library\";\nimport LibraryFilterDetails from \"./LibraryFilterDetails\";\nimport LibraryFilterTabs from \"./LibraryFilterTabs\";\n// import LibrarySubjectSwitch from './LibrarySubjectSwitch'\nimport dynamic from \"next/dynamic\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nconst LibrarySubjectSwitch = dynamic(()=>import(\"./LibrarySubjectSwitch\"), {\n loadableGenerated: {\n webpack: ()=>[\n require.resolveWeak(\"./LibrarySubjectSwitch\")\n ]\n },\n ssr: false\n});\nconst LibraryFilterWrapper = styled.div.withConfig({\n componentId: \"sc-95a14d80-0\"\n})(_templateObject(), 40 - 24, (props)=>props.theme.new.colors.sol_gray_500);\nexport const Title = styled.div.withConfig({\n componentId: \"sc-95a14d80-1\"\n})(_templateObject1());\nexport const LibraryFilter = ()=>{\n const router = useRouter();\n const { tpr } = useTypography();\n const [slots, setSlots] = useState();\n const theme = useTheme();\n const { isMobile } = useWindowDimensions();\n const authStore = useAuthStore();\n const handleClickPromotionButton = useCallback(()=>{\n mixpanelEvent(\"Review Event Button Clicked\", {\n \"Button Proposition\": \"라이브러리\",\n \"User ID\": authStore.user.id.toString(),\n \"User Name\": authStore.user.displayName,\n \"Phone Number\": authStore.user.phoneNumber,\n \"User Job\": authStore.user.job\n });\n }, [\n authStore\n ]);\n return /*#__PURE__*/ _jsxs(LibraryFilterWrapper, {\n children: [\n /*#__PURE__*/ _jsxs(\"div\", {\n className: \"filterWrapper\",\n children: [\n /*#__PURE__*/ _jsxs(Stack, {\n direction: \"row\",\n sx: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\"\n },\n children: [\n /*#__PURE__*/ _jsxs(Title, {\n children: [\n \"자료 보관함\",\n /*#__PURE__*/ _jsx(LibrarySubjectSwitch, {})\n ]\n }),\n /*#__PURE__*/ _jsx(Button, {\n label: \"패키지 보관함\",\n variant: \"strokeSecondary\",\n size: isMobile ? \"xsmall\" : \"small\",\n endIcon: /*#__PURE__*/ _jsx(Stack, {\n direction: \"row\",\n sx: {\n display: \"flex\",\n alignItems: \"center\"\n },\n children: /*#__PURE__*/ _jsx(Icon, {\n icon: ArrowRight2px,\n color: theme.palette.text.secondary,\n size: Sizes.smallHalf\n })\n }),\n sx: {\n height: \"fit-content\",\n alignItems: \"center\"\n },\n onClick: ()=>{\n mixpanelEvent(\"Library Page Button Clicked\", {\n \"Button Name\": \"패키지 보관함 가기\",\n \"Button Url\": MYPAGE_PACKAGES_INDEX_PAGE\n });\n },\n href: \"\".concat(MYPAGE_PACKAGES_INDEX_PAGE)\n })\n ]\n }),\n /*#__PURE__*/ _jsx(LibraryFilterTabs, {\n setSlots: setSlots\n })\n ]\n }),\n /*#__PURE__*/ _jsx(LibraryFilterDetails, {\n append: /*#__PURE__*/ _jsx(\"div\", {\n className: \"newPlan-select\",\n children: \"최근 구매 순\"\n })\n })\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 width: calc(100% - \",\n \"px);\\n\\n @media (max-width: 1200px) {\\n width: 100%;\\n }\\n @media (min-width: 769px) and (max-width: 1200px) {\\n padding-left: \",\n \"px;\\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: 16px;\\n font-weight: bold;\\n color: \",\n \";\\n line-height: 1.5;\\n margin: 16px 0;\\n\\n @media (max-width: 1200px) {\\n display: none;\\n }\\n @media (max-width: 768px) {\\n }\\n\"\n ]);\n _templateObject1 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject2() {\n const data = _tagged_template_literal([\n \"\\n width: 100%;\\n max-width: 384px;\\n\\n .ant-form {\\n .ant-form-item {\\n margin-bottom: 0;\\n }\\n }\\n\\n @media (max-width: 1200px) {\\n flex: 1;\\n }\\n @media (max-width: 768px) {\\n max-width: 100%;\\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: absolute;\\n top: 16px;\\n right: 0;\\n z-index: 30;\\n\\n .ant-select {\\n &,\\n &:not(.ant-select-customize-input) {\\n width: 100px;\\n }\\n }\\n\"\n ]);\n _templateObject3 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject4() {\n const data = _tagged_template_literal([\n \"\\n .ant-tabs-nav {\\n margin-top: 12px;\\n margin-bottom: 4px;\\n\\n &:before {\\n display: none;\\n }\\n\\n .ant-tabs-nav-wrap {\\n .ant-tabs-nav-list {\\n .ant-tabs-tab {\\n min-width: 50px;\\n font-size: 16px;\\n color: \",\n \";\\n margin: 0;\\n text-shadow: none;\\n transition: opacity 0.2s;\\n\\n &-active {\\n font-weight: bold;\\n }\\n\\n &:not(:nth-of-type(1)) {\\n &:before {\\n display: inline-block;\\n vertical-align: baseline;\\n content: '';\\n width: 1px;\\n height: 12px;\\n margin: 0 6px;\\n background: rgba(27, 27, 41, 0.1);\\n }\\n }\\n\\n &:not(.ant-tabs-tab-active):hover {\\n opacity: 0.7;\\n }\\n\\n .num {\\n color: rgba(27, 27, 41, 0.3);\\n }\\n }\\n\\n .ant-tabs-ink-bar {\\n display: none;\\n }\\n }\\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 .ant-pagination {\\n li {\\n &.ant-pagination-item-active {\\n border-color: \",\n \";\\n\\n a {\\n color: \",\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 position: relative;\\n display: flex;\\n flex-direction: column;\\n width: 100%;\\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 ClassWithSelected from \"@/components/Class/ClassWithSelected\";\nimport { PaginationWrapper } from \"@/components/PaginationWrapper\";\nimport useSearchParams from \"@/hooks/useSearchParams\";\nimport { themeGet } from \"@styled-system/theme-get\";\nimport { Pagination, Tabs } from \"antd\";\nimport { observer } from \"mobx-react-lite\";\nimport { useRouter } from \"next/router\";\nimport React, { useCallback, useEffect } from \"react\";\nimport useClassStore from \"src/store/class\";\nimport styled from \"styled-components\";\nimport { LibraryFilter } from \"../components/filter/LibraryFilter\";\nimport LibraryList from \"../components/LibraryList\";\nimport { libraryLnbDimensions } from \"../components/LibraryLNB\";\nimport useLibraryStore from \"../stores/library.store\";\nexport const LibraryListViewWrapper = styled.div.withConfig({\n componentId: \"sc-9375ceea-0\"\n})(_templateObject(), libraryLnbDimensions.width + libraryLnbDimensions.gap, libraryLnbDimensions.widthOnTablet);\nexport const CategoryName = styled.h3.withConfig({\n componentId: \"sc-9375ceea-1\"\n})(_templateObject1(), themeGet(\"color.0\", \"#1B1B29\"));\nexport const SearchFormWrapper = styled.div.withConfig({\n componentId: \"sc-9375ceea-2\"\n})(_templateObject2());\nconst SelectWrapper = styled.div.withConfig({\n componentId: \"sc-9375ceea-3\"\n})(_templateObject3());\nexport const StyledTabs = styled(Tabs).withConfig({\n componentId: \"sc-9375ceea-4\"\n})(_templateObject4(), themeGet(\"text.0\", \"#1B1B29\"));\nexport const PaginationWrapperSecondaryColor = styled(PaginationWrapper).withConfig({\n componentId: \"sc-9375ceea-5\"\n})(_templateObject5(), themeGet(\"primary.1\", \"#00BFC8\"), themeGet(\"primary.1\", \"#00BFC8\"));\nconst ContentsContainer = styled.div.withConfig({\n componentId: \"sc-9375ceea-6\"\n})(_templateObject6());\nexport const LibraryListView = observer((props)=>{\n const { pathname , query , push , replace } = useRouter();\n const searchParams = useSearchParams();\n const pagination = useLibraryStore((state)=>state.pagination);\n const { setPagination } = useLibraryStore((param)=>{\n let { setPagination } = param;\n return {\n setPagination\n };\n });\n const handleChangePagination = useCallback((page, pageSize)=>{\n push({\n pathname,\n query: {\n ...query,\n page,\n pageSize\n }\n }, undefined, {\n shallow: true,\n scroll: true\n });\n }, [\n push,\n pathname,\n query\n ]);\n useEffect(()=>{\n const page = Number.parseInt(searchParams.get(\"page\"), 10);\n const pageSize = Number.parseInt(searchParams.get(\"pageSize\"), 10);\n if (!page || !pageSize) {\n replace({\n pathname,\n query: {\n ...query,\n ...defaultPagination\n }\n }, undefined, {\n shallow: true,\n scroll: true\n });\n return;\n }\n setPagination({\n current: page,\n pageSize\n });\n }, [\n searchParams,\n replace,\n pathname,\n query\n ]);\n const { setSelected } = useClassStore((param)=>{\n let { setSelected } = param;\n return {\n setSelected\n };\n });\n useEffect(()=>{\n return ()=>{\n setSelected({});\n };\n }, [\n setSelected\n ]);\n return /*#__PURE__*/ _jsxs(LibraryListViewWrapper, {\n children: [\n /*#__PURE__*/ _jsx(LibraryFilter, {}),\n /*#__PURE__*/ _jsx(ContentsContainer, {\n children: /*#__PURE__*/ _jsx(LibraryList, {})\n }),\n !!pagination.total && /*#__PURE__*/ _jsx(PaginationWrapper, {\n children: /*#__PURE__*/ _jsx(Pagination, {\n showQuickJumper: false,\n showLessItems: false,\n showSizeChanger: false,\n ...pagination,\n onChange: handleChangePagination\n })\n }),\n /*#__PURE__*/ _jsx(ClassWithSelected, {})\n ]\n });\n});\nexport const defaultPagination = {\n page: 1,\n pageSize: 50\n};\n"],"names":[],"sourceRoot":""}