{"version":3,"file":"static/chunks/pages/mypage/packages-1b4a1d93c3e6d51e.js","mappings":"AACA","sources":["webpack://_N_E/?4843","webpack://_N_E/./src/api/package.ts","webpack://_N_E/./src/components/DeviceControls/DeviceManage/Empty.tsx","webpack://_N_E/./src/components/common/Button/ButtonWithArrow.tsx","webpack://_N_E/./src/components/common/LoginDialogProvider.tsx","webpack://_N_E/./src/hooks/useDialog.ts","webpack://_N_E/./src/components/Package/MyPackage/Card.tsx","webpack://_N_E/./src/components/Package/MyPackage/CardItem.tsx","webpack://_N_E/./src/components/Package/MyPackage/NoticeBanner.tsx","webpack://_N_E/./src/components/Package/MyPackage/MyPackageDialog.tsx","webpack://_N_E/./src/pages/mypage/packages/index.tsx","webpack://_N_E/<anon>"],"sourcesContent":["\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/mypage/packages\",\n      function () {\n        return require(\"private-next-pages/mypage/packages/index.tsx\");\n      }\n    ]);\n    if(module.hot) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/mypage/packages\"])\n      });\n    }\n  ","import { otherApiClient } from \"./index\";\nexport const getPackage = async (id)=>{\n    const { data  } = await otherApiClient.market(\"/packages/\".concat(id));\n    return data;\n};\nexport const getMyPackages = async ()=>{\n    const { data  } = await otherApiClient.market(\"/packages/purchased\");\n    return data;\n};\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { styled } from \"@mui/material\";\nexport const Empty = (param)=>{\n    let { description , sx , children  } = param;\n    return /*#__PURE__*/ _jsxs(EmptyContainer, {\n        sx: sx,\n        children: [\n            /*#__PURE__*/ _jsx(\"p\", {\n                children: description\n            }),\n            children\n        ]\n    });\n};\nconst EmptyContainer = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        borderRadius: \"6px\",\n        backgroundColor: theme.palette.grey[50],\n        padding: \"10px\",\n        height: \"120px\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        margin: \"0 20px\",\n        p: {\n            color: theme.palette.text.secondary,\n            ...theme.typography.body2\n        },\n        [theme.breakpoints.down(\"sm\")]: {\n            margin: \"20px 20px 0 \"\n        }\n    };\n});\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport Icon from \"@/components/icon/Icon\";\nimport { ArrowRight, Sizes } from \"@/components/icon/IconList\";\nimport { Button } from \"@bookips/solvook-ui-library\";\nimport { styled } from \"@mui/material\";\n// Fixme: 마이페이지 버튼 사용처 확인하기\nexport const ButtonWithArrow = (param)=>{\n    let { iconColor , iconSize , ...props } = param;\n    return /*#__PURE__*/ _jsxs(CustomButton, {\n        variant: \"filledPrimary\",\n        ...props,\n        children: [\n            props.children,\n            /*#__PURE__*/ _jsx(Icon, {\n                icon: ArrowRight,\n                size: iconSize || Sizes.small,\n                color: iconColor || \"#FFFFFF\"\n            })\n        ]\n    });\n};\nconst CustomButton = styled(Button)((param)=>{\n    let { theme  } = param;\n    return {\n        padding: \"12px 20px\",\n        gap: \"8px\"\n    };\n});\n","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useEffect } from \"react\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport CheckLoginDialog from \"../modal/CheckLoginDialog\";\nimport useDialog from \"@/hooks/useDialog\";\nexport const LoginDialogProvider = (param)=>{\n    let { children  } = param;\n    const { isLoggedIn  } = useAuthStore();\n    const { open , isOpen  } = useDialog();\n    useEffect(()=>{\n        if (!isLoggedIn) open();\n    }, [\n        isLoggedIn\n    ]);\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            children,\n            /*#__PURE__*/ _jsx(CheckLoginDialog, {\n                open: isOpen\n            })\n        ]\n    });\n};\n","import { useCallback, useEffect, useState } from \"react\";\nconst useDialog = (defaultValues)=>{\n    const [isOpen, setIsOpen] = useState(false);\n    const DEFAULT_DIALOG_PROPS = {\n        onClose: ()=>setIsOpen(false),\n        open: isOpen\n    };\n    const [dialogProps, setDialogProps] = useState({\n        ...DEFAULT_DIALOG_PROPS,\n        ...defaultValues\n    });\n    useEffect(()=>{\n        setDialogProps((prev)=>({\n                ...prev,\n                open: isOpen\n            }));\n    }, [\n        isOpen\n    ]);\n    const close = ()=>{\n        setIsOpen(false);\n    };\n    const onOk = async ()=>{\n        try {\n            var _dialogProps_onOk;\n            await ((_dialogProps_onOk = dialogProps.onOk) === null || _dialogProps_onOk === void 0 ? void 0 : _dialogProps_onOk.call(dialogProps));\n        } catch (error) {\n            ;\n        } finally{\n            close();\n        }\n    };\n    const onCancel = async ()=>{\n        try {\n            var _dialogProps_onCancel;\n            await ((_dialogProps_onCancel = dialogProps.onCancel) === null || _dialogProps_onCancel === void 0 ? void 0 : _dialogProps_onCancel.call(dialogProps));\n        } catch (error) {\n            ;\n        } finally{\n            close();\n        }\n    };\n    const modifyDialog = useCallback((modifyProps)=>{\n        setDialogProps({\n            ...DEFAULT_DIALOG_PROPS,\n            ...modifyProps\n        });\n    }, []);\n    const open = useCallback((updateData)=>{\n        updateData && modifyDialog(updateData);\n        setIsOpen(true);\n    }, [\n        modifyDialog\n    ]);\n    return {\n        open,\n        close,\n        modifyDialog,\n        isOpen,\n        dialogProps: {\n            ...dialogProps,\n            onOk,\n            onCancel\n        }\n    };\n};\nexport default useDialog;\n","import { styled } from \"@mui/material\";\nexport const PackageCard = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        borderRadius: \"12px\",\n        border: \"1px solid \".concat(theme.palette.grey[100]),\n        backgroundColor: theme.palette.blackAndWhite.white\n    };\n});\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport { PackageCard } from \"./Card\";\nimport { Box, Stack, styled, Typography } from \"@mui/material\";\nimport Image from \"next/image\";\nimport { ButtonWithArrow } from \"../../common/Button/ButtonWithArrow\";\nimport { Sizes } from \"../../icon/IconList\";\nimport dayjs from \"dayjs\";\nexport const CardItem = (param)=>{\n    let { onClick , item  } = param;\n    return /*#__PURE__*/ _jsxs(PackageCard, {\n        sx: {\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"20px\",\n            padding: \"20px\"\n        },\n        children: [\n            /*#__PURE__*/ _jsxs(Stack, {\n                display: \"flex\",\n                gap: \"20px\",\n                flexDirection: \"row\",\n                children: [\n                    /*#__PURE__*/ _jsx(ThumbnailBox, {\n                        children: /*#__PURE__*/ _jsx(Image, {\n                            src: (item === null || item === void 0 ? void 0 : item.imageUrl) || \"/static/assets/Package_Thumbnail_Empty.jpg\",\n                            width: 100,\n                            height: 100,\n                            alt: \"package_thumbnail\"\n                        })\n                    }),\n                    /*#__PURE__*/ _jsxs(Stack, {\n                        gap: \"8px\",\n                        children: [\n                            /*#__PURE__*/ _jsx(CardTitle, {\n                                children: item.title\n                            }),\n                            /*#__PURE__*/ _jsxs(CardSubTitle, {\n                                children: [\n                                    \"구매일 : \",\n                                    dayjs(item.createdAt).format(\"YYYY.MM.DD\")\n                                ]\n                            })\n                        ]\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(Stack, {\n                display: \"flex\",\n                alignItems: \"flex-end\",\n                children: /*#__PURE__*/ _jsx(ButtonWithArrow, {\n                    sx: (theme)=>({\n                            [theme.breakpoints.down(\"sm\")]: {\n                                width: \"100%\"\n                            }\n                        }),\n                    onClick: ()=>onClick(item),\n                    variant: \"filledSecondary\",\n                    iconColor: \"#6950E5\",\n                    iconSize: Sizes.small,\n                    children: /*#__PURE__*/ _jsx(Typography, {\n                        variant: \"subtitle1\",\n                        color: (theme)=>theme.palette.primary.main,\n                        children: \"패키지 이용하기\"\n                    })\n                })\n            })\n        ]\n    });\n};\nconst ThumbnailBox = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        overflow: \"hidden\",\n        width: \"100%\",\n        maxWidth: \"100px\",\n        \"& img\": {\n            objectFit: \"cover\",\n            border: \"1px solid rgba(169, 175, 199, 0.20)\",\n            borderRadius: \"6px\"\n        },\n        [theme.breakpoints.down(\"sm\")]: {\n            maxWidth: \"80px\"\n        }\n    };\n});\nconst CardTitle = styled(\"p\")((param)=>{\n    let { theme  } = param;\n    return {\n        display: \"-webkit-box\",\n        WebkitBoxOrient: \"vertical\",\n        WebkitLineClamp: 2,\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        ...theme.typography.h6,\n        [theme.breakpoints.down(\"sm\")]: {\n            WebkitLineClamp: \"unset\",\n            ...theme.typography.subtitle1\n        }\n    };\n});\nconst CardSubTitle = styled(\"p\")((param)=>{\n    let { theme  } = param;\n    return {\n        ...theme.typography.body1,\n        color: theme.palette.text.secondary,\n        [theme.breakpoints.down(\"sm\")]: {\n            ...theme.typography.body2\n        }\n    };\n});\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport { styled, Typography } from \"@mui/material\";\nimport { ButtonWithArrow } from \"../../common/Button/ButtonWithArrow\";\nimport { Package_Fill, Sizes } from \"../../icon/IconList\";\nimport Icon from \"@/components/icon/Icon\";\nimport { EXTERNAL_PACKAGE_CAMPAIGN } from \"@/settings/constant\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nexport const PackageNoticeBanner = (param)=>{\n    let {} = param;\n    return /*#__PURE__*/ _jsxs(PackageNoticeBannerButton, {\n        onClick: ()=>{\n            mixpanelEvent(\"Package Banner Clicked\", {\n                \"Banner Url\": EXTERNAL_PACKAGE_CAMPAIGN\n            });\n        },\n        href: EXTERNAL_PACKAGE_CAMPAIGN,\n        iconSize: Sizes.small,\n        iconColor: \"#6A708A\",\n        children: [\n            /*#__PURE__*/ _jsxs(Typography, {\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: \"8px\",\n                variant: \"subtitle1\",\n                component: \"p\",\n                color: (theme)=>theme.palette.secondary.main,\n                children: [\n                    /*#__PURE__*/ _jsx(Icon, {\n                        icon: Package_Fill,\n                        size: Sizes.medium\n                    }),\n                    \"다양한 패키지 상품을 확인해보세요!\"\n                ]\n            }),\n            /*#__PURE__*/ _jsx(SubDescription, {\n                children: \"패키지 상품 보러가기\"\n            })\n        ]\n    });\n};\nconst PackageNoticeBannerButton = styled(ButtonWithArrow)((param)=>{\n    let { theme  } = param;\n    return {\n        flexDirection: \"row\",\n        justifyContent: \"space-between\",\n        backgroundColor: theme.palette.blackAndWhite.white,\n        padding: \"12px 16px\",\n        borderRadius: \"6px\",\n        margin: \"28px 0\",\n        gap: \"12px\",\n        boxShadow: theme.shadows[2],\n        \"&:hover, &:active\": {\n            backgroundColor: theme.palette.grey[50]\n        }\n    };\n});\nconst SubDescription = styled(Typography)((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.text.secondary,\n        position: \"absolute\",\n        right: 34,\n        ...theme.typography.subtitle2,\n        [theme.breakpoints.down(\"sm\")]: {\n            display: \"none\"\n        }\n    };\n});\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport { Stack, styled, Typography } from \"@mui/material\";\nimport { ButtonWithArrow } from \"../../common/Button/ButtonWithArrow\";\nimport { Sizes } from \"../../icon/IconList\";\nimport { useRouter } from \"next/router\";\nimport { LIBRARIES_INDEX_PAGE, MYPAGE_PASSES } from \"@/settings/constant\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nexport const MyPackageDialog = (param)=>{\n    let { title , itemInfo  } = param;\n    const { push  } = useRouter();\n    const onClick = (item)=>{\n        mixpanelEvent(\"Package Product Button Clicked\", {\n            \"Product Category\": item.type,\n            \"Button Url\": item.type === \"product\" ? LIBRARIES_INDEX_PAGE : MYPAGE_PASSES\n        });\n        switch(item.type){\n            case \"product\":\n                push(LIBRARIES_INDEX_PAGE.concat(\"?subject=\".concat(item.subject, \"&packages=\").concat(item.id, \"&searchType=handout&page=1&pageSize=50\")));\n                break;\n            case \"ticket\":\n                push(MYPAGE_PASSES);\n                break;\n            case \"expert\":\n                push(MYPAGE_PASSES);\n                break;\n            default:\n                break;\n        }\n    };\n    return /*#__PURE__*/ _jsxs(Stack, {\n        margin: \"28px\",\n        children: [\n            /*#__PURE__*/ _jsx(Typography, {\n                marginBottom: \"28px\",\n                variant: \"h6\",\n                children: title\n            }),\n            /*#__PURE__*/ _jsx(Stack, {\n                gap: \"8px\",\n                children: itemInfo.map((item, index)=>/*#__PURE__*/ _jsx(PackageButton, {\n                        onClick: ()=>onClick(item),\n                        variant: \"strokeSecondary\",\n                        iconColor: \"#6A708A\",\n                        iconSize: Sizes.xmedium,\n                        children: /*#__PURE__*/ _jsxs(Typography, {\n                            variant: \"h6\",\n                            component: \"p\",\n                            children: [\n                                item.title,\n                                \" \",\n                                /*#__PURE__*/ _jsxs(Strong, {\n                                    children: [\n                                        item.count,\n                                        \"개\"\n                                    ]\n                                })\n                            ]\n                        })\n                    }, index))\n            })\n        ]\n    });\n};\nexport const Strong = styled(\"strong\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.secondary.main,\n        ...theme.typography.h6\n    };\n});\nexport const PackageButton = styled(ButtonWithArrow)((param)=>{\n    let { theme  } = param;\n    return {\n        justifyContent: \"space-between\"\n    };\n});\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport { Box, styled, Typography } from \"@mui/material\";\nimport { CardItem } from \"@/components/Package/MyPackage/CardItem\";\nimport { PackageNoticeBanner } from \"@/components/Package/MyPackage/NoticeBanner\";\nimport { Empty } from \"@/components/DeviceControls/DeviceManage/Empty\";\nimport { Dialog } from \"@bookips/solvook-ui-library\";\nimport useDialog from \"@/hooks/useDialog\";\nimport { MyPackageDialog } from \"@/components/Package/MyPackage/MyPackageDialog\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { getMyPackages } from \"../../../api/package\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { LoginDialogProvider } from \"@/components/common/LoginDialogProvider\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nconst MyPagePackageNextPage = ()=>{\n    const { isLoggedIn  } = useAuthStore();\n    const { dialogProps , open  } = useDialog();\n    const { data: packages  } = useQuery([\n        \"my package\"\n    ], getMyPackages, {\n        enabled: isLoggedIn\n    });\n    const onClick = (data)=>{\n        let tempData = [];\n        Object.keys(data.component).map((key)=>{\n            var _data_component_key;\n            tempData.push({\n                title: data.component[key].title,\n                count: data.component[key].count,\n                type: key,\n                subject: key === \"product\" && ((_data_component_key = data.component[key]) === null || _data_component_key === void 0 ? void 0 : _data_component_key.subject),\n                id: data.id\n            });\n        });\n        open({\n            content: /*#__PURE__*/ _jsx(MyPackageDialog, {\n                title: data.title,\n                itemInfo: tempData\n            })\n        });\n        mixpanelEvent(\"Package Module Button Clicked\", {\n            \"Product Title\": data.title,\n            \"Package ID\": data.id\n        });\n    };\n    return /*#__PURE__*/ _jsx(LoginDialogProvider, {\n        children: /*#__PURE__*/ _jsxs(PageLayout, {\n            children: [\n                /*#__PURE__*/ _jsxs(PageContainer, {\n                    children: [\n                        /*#__PURE__*/ _jsx(Typography, {\n                            variant: \"h4\",\n                            children: \"패키지 보관함\"\n                        }),\n                        /*#__PURE__*/ _jsx(PackageNoticeBanner, {}),\n                        packages && /*#__PURE__*/ _jsxs(Box, {\n                            display: \"flex\",\n                            justifyContent: \"space-between\",\n                            marginBottom: \"8px\",\n                            children: [\n                                /*#__PURE__*/ _jsxs(Typography, {\n                                    variant: \"body2\",\n                                    color: (theme)=>theme.palette.text.secondary,\n                                    children: [\n                                        \"총 \",\n                                        packages === null || packages === void 0 ? void 0 : packages.count,\n                                        \"개\"\n                                    ]\n                                }),\n                                /*#__PURE__*/ _jsx(Typography, {\n                                    variant: \"subtitle2\",\n                                    color: (theme)=>theme.palette.text.secondary,\n                                    children: \"최근 구매 순\"\n                                })\n                            ]\n                        }),\n                        (packages === null || packages === void 0 ? void 0 : packages.count) > 0 ? /*#__PURE__*/ _jsx(GridLayout, {\n                            children: packages.items.map((item, index)=>{\n                                return /*#__PURE__*/ _jsx(CardItem, {\n                                    onClick: onClick,\n                                    item: item\n                                }, item.id + index);\n                            })\n                        }) : /*#__PURE__*/ _jsx(Empty, {\n                            description: \"아직 구매한 패키지가 없어요.\",\n                            sx: (theme)=>({\n                                    display: \"flex\",\n                                    flexDirection: \"column\",\n                                    backgroundColor: \"transparent\",\n                                    minHeight: \"200px\",\n                                    \">p\": {\n                                        color: theme.palette.text.secondary,\n                                        ...theme.typography.body1\n                                    }\n                                })\n                        })\n                    ]\n                }),\n                /*#__PURE__*/ _jsx(CustomDialog, {\n                    open: dialogProps.open,\n                    onClose: dialogProps.onClose,\n                    children: dialogProps.content\n                })\n            ]\n        })\n    });\n};\nexport default MyPagePackageNextPage;\nconst PageLayout = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        backgroundColor: theme.palette.grey[0],\n        [theme.breakpoints.down(\"lg\")]: {\n            padding: \"0 32px\"\n        },\n        [theme.breakpoints.down(\"sm\")]: {\n            padding: \"0 20px\"\n        }\n    };\n});\nconst PageContainer = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        flexGrow: 1,\n        maxWidth: 1200,\n        margin: \"0 auto\",\n        minHeight: \"100vh\",\n        padding: \"40px 0\",\n        display: \"flex\",\n        flexDirection: \"column\"\n    };\n});\nconst GridLayout = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        display: \"grid\",\n        gridTemplateColumns: \"repeat(auto-fit, minmax(440px, 49%))\",\n        gap: 20,\n        [theme.breakpoints.down(\"lg\")]: {\n            gridTemplateColumns: \"repeat(auto-fit, minmax(440px, 1fr))\"\n        },\n        [theme.breakpoints.down(\"sm\")]: {\n            gridTemplateColumns: \"1fr\"\n        }\n    };\n});\nexport const CustomDialog = styled(Dialog)((param)=>{\n    let { theme  } = param;\n    return {\n        \"& .MuiDialog-paper\": {\n            borderRadius: \"12px\",\n            maxWidth: \"520px\",\n            width: \"100%\"\n        }\n    };\n});\n"],"names":[],"sourceRoot":""}