{"version":3,"file":"static/chunks/4241-415a5a9eff20a5d7.js","mappings":"AACA","sources":["webpack://_N_E/./src/modules/mypages/components/MyPageTopNav.tsx","webpack://_N_E/./src/containers/Layout/MyPage/Layout.tsx","webpack://_N_E/./src/hooks/useLogout.ts","webpack://_N_E/./src/containers/Layout/MyPage/MyPageSubMenu.tsx","webpack://_N_E/./src/containers/Layout/MyPage/MySolvookLayout.tsx","webpack://_N_E/./src/lib/apiService/index.ts","webpack://_N_E/./src/lib/web-ui/Button.tsx","webpack://_N_E/./src/lib/web-ui/basicStyle.tsx","webpack://_N_E/./src/lib/web-ui/Row.tsx","webpack://_N_E/./src/lib/web-ui/Col.tsx","webpack://_N_E/./src/lib/web-ui/index.tsx","webpack://_N_E/./src/pages/mypage/index.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 border-bottom: 2px solid \",\n \";\\n\\n @media (max-width: 1200px) {\\n }\\n @media (max-width: 768px) {\\n display: none;\\n }\\n\"\n ]);\n _templateObject = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject1() {\n const data = _tagged_template_literal([\n \"\\n padding-bottom: 18px;\\n\\n .active-link {\\n height: auto;\\n font-size: 24px;\\n color: \",\n \";\\n opacity: 0.7;\\n transition: opacity 0.2s;\\n\\n &:not(:nth-of-type(1)) {\\n margin-left: 32px;\\n }\\n\\n &.active {\\n font-weight: bold;\\n }\\n\\n &:hover,\\n &.active {\\n opacity: 1;\\n }\\n\\n @media (max-width: 1200px) {\\n font-size: 20px;\\n }\\n @media (max-width: 768px) {\\n font-size: 18px;\\n }\\n }\\n\"\n ]);\n _templateObject1 = function() {\n return data;\n };\n return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport { ActiveLink } from \"@/components/ActiveLink\";\nimport styled from \"styled-components\";\nimport { includesPath } from \"@/lib/utils/url\";\nimport { MYPAGE_PAGE, MYPAGE_STORES_INDEX, MYPAGE_STORES_PRODUCTS_INDEX } from \"@/settings/constant\";\nimport { useRouter } from \"next/router\";\nimport { themeGet } from \"@styled-system/theme-get\";\nconst MyPageMenuWrapper = styled.div.withConfig({\n componentId: \"sc-87f9990c-0\"\n})(_templateObject(), themeGet(\"border.3\", \"#1B1B29\"));\nconst TitleWrapper = styled.div.withConfig({\n componentId: \"sc-87f9990c-1\"\n})(_templateObject1(), themeGet(\"text.0\", \"#1B1B29\"));\nexport const MyPageTopNav = (param)=>{\n let {} = param;\n const router = useRouter();\n const { pathname } = router;\n return /*#__PURE__*/ _jsx(MyPageMenuWrapper, {\n children: /*#__PURE__*/ _jsxs(TitleWrapper, {\n children: [\n /*#__PURE__*/ _jsx(ActiveLink, {\n className: includesPath(pathname, MYPAGE_STORES_INDEX) ? \"active-link\" : \"active-link active\",\n href: \"\".concat(MYPAGE_PAGE),\n children: \"마이쏠북\"\n }),\n /*#__PURE__*/ _jsx(ActiveLink, {\n className: includesPath(pathname, MYPAGE_STORES_INDEX) ? \"active-link active\" : \"active-link\",\n href: \"\".concat(MYPAGE_STORES_PRODUCTS_INDEX),\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 min-height: 70vh;\\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 { Container } from \"@/components\";\nimport { MyPageTopNav } from \"@/modules/mypages/components/MyPageTopNav\";\nexport const MyPageLayoutWrapper = styled.div.withConfig({\n componentId: \"sc-af6fa719-0\"\n})(_templateObject());\nexport const MyPageLayout = (param)=>{\n let { children } = param;\n return /*#__PURE__*/ _jsx(MyPageLayoutWrapper, {\n children: /*#__PURE__*/ _jsxs(Container, {\n children: [\n /*#__PURE__*/ _jsx(MyPageTopNav, {}),\n children\n ]\n })\n });\n};\n","import { useSignout } from \"@/containers/Header/LoginMenu\";\nimport { useApiService } from \"@/lib/apiService\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { redirect } from \"@/lib/next-utils\";\nimport { LogoutCommand } from \"@/modules/accounts/commands/logoutCommand\";\nimport { HOME_PAGE } from \"@/settings/constant\";\nimport React, { useMemo } from \"react\";\nimport { isInWebview } from \"src/utils/misc\";\nconst useLogout = ()=>{\n //로그아웃에 있어서, 카카오 계정과 로그아웃이 기본이어야 하는건지..?\n const authStore = useAuthStore();\n const apiService = useApiService();\n const { logoutCommand , isUseFooter } = useMemo(()=>({\n logoutCommand: new LogoutCommand(apiService),\n isUseFooter: !isInWebview()\n }), [\n apiService\n ]);\n const { postProcessForKakao } = useSignout();\n const onLogout = React.useCallback(async ()=>{\n if (authStore.user.providerId === \"kakao\") {\n postProcessForKakao();\n }\n authStore.logout();\n await logoutCommand.execute();\n redirect(HOME_PAGE);\n }, [\n authStore,\n logoutCommand,\n postProcessForKakao\n ]);\n return [\n onLogout\n ];\n};\nexport default useLogout;\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n const data = _tagged_template_literal([\n \"\\n .name {\\n display: block;\\n font-size: 20px;\\n font-weight: 800;\\n color: \",\n \";\\n padding: 16px 0;\\n transition: opacity 0.2s;\\n\\n &:hover {\\n opacity: 0.7;\\n }\\n\\n img {\\n margin-left: 4px;\\n }\\n\\n @media (max-width: 1200px) {\\n }\\n @media (max-width: 768px) {\\n font-size: 18px;\\n }\\n }\\n\\n ul {\\n .active-link {\\n height: auto;\\n }\\n\\n li {\\n width: 100%;\\n border-bottom: 1px solid \",\n \";\\n\\n .active-link {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n font-size: 16px;\\n color: \",\n \";\\n text-align: left;\\n padding: 18px 0;\\n opacity: 0.7;\\n transition: opacity 0.2s;\\n\\n &:hover,\\n &.active {\\n opacity: 1;\\n }\\n\\n &.active {\\n font-weight: bold;\\n }\\n\\n span {\\n flex: 1;\\n }\\n\\n img {\\n width: 16px;\\n\\n &:not(:nth-last-of-type(1)) {\\n margin-right: 8px;\\n }\\n }\\n\\n i {\\n margin-right: 8px;\\n }\\n\\n @media (max-width: 1200px) {\\n padding: 16px;\\n }\\n @media (max-width: 850px) {\\n padding: 16px 10px;\\n }\\n }\\n }\\n }\\n\\n .studio-menu {\\n position: relative;\\n\\n ::after {\\n content: '';\\n background-image: url('/static/assets/img-beta.svg');\\n position: absolute;\\n width: 24px;\\n height: 24px;\\n top: -2px;\\n @media (max-width: 768px) {\\n display: none;\\n }\\n }\\n }\\n\"\n ]);\n _templateObject = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject1() {\n const data = _tagged_template_literal([\n \"\\n .mobile-prev-btn {\\n display: block;\\n position: absolute;\\n top: 50%;\\n left: 4px;\\n transform: translateY(-50%);\\n border: none;\\n\\n img {\\n width: 24px;\\n height: 24px;\\n }\\n\\n & + a {\\n pointer-events: none;\\n border-bottom: solid 2px \",\n \";\\n }\\n }\\n \"\n ]);\n _templateObject1 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject2() {\n const data = _tagged_template_literal([\n \"\\n display: block;\\n min-width: 193px;\\n\\n .mobile-prev-btn {\\n display: none;\\n }\\n\\n @media (min-width: 1201px) {\\n ul {\\n li {\\n .active-link {\\n padding-left: 4px;\\n }\\n }\\n }\\n }\\n\\n @media (max-width: 1200px) {\\n width: 100%;\\n\\n ul {\\n display: flex;\\n /* justify-content: center; */\\n border: 1px solid \",\n \";\\n align-items: center;\\n flex-wrap: wrap;\\n\\n li {\\n //flex: 1;\\n\\n &:not(:nth-of-type(1)) {\\n .active-link {\\n border-left: 1px solid \",\n \";\\n }\\n }\\n\\n margin-left: -1px;\\n margin-bottom: -1px;\\n\\n &.hide_m {\\n display: none;\\n }\\n\\n //flex-grow: 4;\\n flex-basis: 25%;\\n\\n &:last-of-type {\\n border-right: 1px solid \",\n \";\\n }\\n\\n &:nth-of-type(4) {\\n flex: 1;\\n }\\n }\\n }\\n\\n .uci-icon {\\n display: none;\\n }\\n }\\n @media (max-width: 768px) {\\n \",\n \"\\n .name {\\n position: relative;\\n display: flex;\\n align-items: center;\\n min-height: 60px;\\n font-size: 24px;\\n text-align: center;\\n\\n padding: 0;\\n\\n img {\\n display: \",\n \";\\n width: 20px;\\n height: 20px;\\n }\\n }\\n\\n ul {\\n display: \",\n \";\\n // margin: 0 -16px;\\n margin: 0;\\n overflow-x: auto;\\n overflow-y: hidden;\\n border-bottom: 1px solid #e8e8ea;\\n\\n flex-wrap: nowrap;\\n\\n li {\\n border: none;\\n white-space: nowrap;\\n\\n &:not(:nth-of-type(1)) {\\n .active-link {\\n border-left: none;\\n }\\n }\\n\\n .active-link {\\n font-size: 16px;\\n text-align: center;\\n padding: 14px 12px;\\n\\n span {\\n color: \",\n \";\\n }\\n\\n img,\\n i {\\n display: none;\\n }\\n\\n &.active {\\n border-bottom: 2px solid \",\n \";\\n\\n span {\\n color: \",\n \";\\n }\\n }\\n }\\n }\\n }\\n }\\n\\n .uci-icon {\\n margin-right: 8px;\\n }\\n\"\n ]);\n _templateObject2 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject3() {\n const data = _tagged_template_literal([\n \"\\n display: none;\\n\\n @media (max-width: 1200px) {\\n }\\n @media (max-width: 768px) {\\n }\\n\"\n ]);\n _templateObject3 = function() {\n return data;\n };\n return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { ActiveLink } from \"@/components/ActiveLink\";\nimport Icon from \"@/components/icon/Icon\";\nimport { Bookmark, Card, CouponThin, Device, Folder, Library, Packages, Sizes } from \"@/components/icon/IconList\";\nimport useLogout from \"@/hooks/useLogout\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { redirect } from \"@/lib/next-utils\";\nimport { includesPath } from \"@/lib/utils/url\";\nimport { LIBRARIES_INDEX_PAGE, MYPAGE_ACCOUNTS_INDEX_PAGE, MYPAGE_COUPONS, MYPAGE_DEVICE_INDEX_PAGE, MYPAGE_LICENSES_INDEX_PAGE, MYPAGE_ORDERS_INDEX_PAGE, MYPAGE_PACKAGES_INDEX_PAGE, MYPAGE_PASSES } from \"@/settings/constant\";\nimport { themeGet } from \"@styled-system/theme-get\";\nimport { Button } from \"antd\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { useRouter } from \"next/router\";\nimport React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { styled as MuiStyled } from \"@mui/material\";\nimport { Button as SolvookButton } from \"@bookips/solvook-ui-library\";\nexport const MySolvookMenuWrapper = styled.div.withConfig({\n componentId: \"sc-4f029993-0\"\n})(_templateObject(), themeGet(\"text.0\", \"#1B1B29\"), themeGet(\"border.0\"), themeGet(\"text.0\", \"#1B1B29\"));\nexport const MypageMenuWeb = styled.div.withConfig({\n componentId: \"sc-4f029993-1\"\n})(_templateObject2(), themeGet(\"border.0\"), themeGet(\"border.0\"), themeGet(\"border.0\"), (props)=>props.isSettingPage && css(_templateObject1(), themeGet(\"border.3\", \"#1B1B29\")), (props)=>props.isSettingPage ? \"none\" : \"block\", (props)=>props.isSettingPage ? \"none\" : \"flex\", themeGet(\"text.3\", \"#BBBBBF\"), themeGet(\"border.3\", \"#1B1B29\"), themeGet(\"text.0\", \"#1B1B29\"));\nconst MypageMenuMobile = styled.div.withConfig({\n componentId: \"sc-4f029993-2\"\n})(_templateObject3());\nconst menuList = [\n {\n name: \"자료 보관함\",\n path: LIBRARIES_INDEX_PAGE,\n icon: Library\n },\n {\n name: \"패키지 보관함\",\n path: MYPAGE_PACKAGES_INDEX_PAGE,\n icon: Packages\n },\n {\n name: \"이용권 관리\",\n path: MYPAGE_PASSES,\n icon: Bookmark\n },\n {\n name: \"쿠폰 관리\",\n path: MYPAGE_COUPONS,\n icon: CouponThin\n },\n {\n name: \"기기 관리\",\n path: MYPAGE_DEVICE_INDEX_PAGE,\n icon: Device\n },\n {\n name: \"주문 내역\",\n path: MYPAGE_ORDERS_INDEX_PAGE,\n icon: Card\n },\n {\n name: \"계약 관리\",\n path: MYPAGE_LICENSES_INDEX_PAGE,\n icon: Folder\n }\n];\nexport const MyPageSubMenu = (param)=>{\n let { isSettingPage } = param;\n const authStore = useAuthStore();\n const router = useRouter();\n const { pathname , query } = router;\n const [onLogout] = useLogout();\n const logoutHandle = async (e)=>{\n e.preventDefault();\n await authStore.logout();\n // await clearSession()\n redirect(authStore.redirectUrlAfterLogout());\n };\n return /*#__PURE__*/ _jsx(_Fragment, {\n children: /*#__PURE__*/ _jsxs(MySolvookMenuWrapper, {\n children: [\n /*#__PURE__*/ _jsxs(MypageMenuWeb, {\n isSettingPage: isSettingPage,\n children: [\n /*#__PURE__*/ _jsx(Button, {\n type: \"default\",\n className: \"mobile-prev-btn\",\n onClick: ()=>{\n router.back();\n },\n children: /*#__PURE__*/ _jsx(Image, {\n src: \"/static/assets/left_strong_black.svg\",\n alt: \"이전으로\",\n width: 20,\n height: 20\n })\n }),\n /*#__PURE__*/ _jsxs(TwoColumnRow, {\n children: [\n /*#__PURE__*/ _jsxs(Link, {\n href: MYPAGE_ACCOUNTS_INDEX_PAGE,\n className: \"name\",\n children: [\n authStore.currentUser.displayName,\n /*#__PURE__*/ _jsx(Image, {\n src: \"/static/assets/icon_edit.svg\",\n alt: \"icon image\",\n width: 16,\n height: 16\n })\n ]\n }),\n /*#__PURE__*/ _jsx(SolvookButton, {\n label: \"로그아웃\",\n variant: \"text\",\n size: \"small\",\n onClick: ()=>onLogout()\n })\n ]\n }),\n /*#__PURE__*/ _jsx(\"ul\", {\n children: menuList.map((menu, index)=>/*#__PURE__*/ _jsx(\"li\", {\n children: /*#__PURE__*/ _jsxs(ActiveLink, {\n className: includesPath(pathname, menu.path) ? \"active-link active\" : \"active-link\",\n href: menu.path,\n passHref: true,\n children: [\n /*#__PURE__*/ _jsx(Icon, {\n icon: menu.icon,\n size: Sizes.small\n }),\n /*#__PURE__*/ _jsx(\"span\", {\n children: menu.name\n }),\n /*#__PURE__*/ _jsx(Image, {\n src: \"/static/assets/icon_right.svg\",\n alt: \"icon image\",\n width: 16,\n height: 16\n })\n ]\n })\n }, \"myPage-\".concat(index)))\n })\n ]\n }),\n /*#__PURE__*/ _jsx(MypageMenuMobile, {\n children: \"Mobile Menu\"\n })\n ]\n })\n });\n};\nconst TwoColumnRow = MuiStyled(\"div\")((param)=>{\n let { theme } = param;\n return {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n button: {\n display: \"none\"\n },\n \"@media (max-width: 1200px)\": {\n button: {\n ...theme.typography.semibold14,\n display: \"block\",\n color: theme.palette.text.secondary,\n height: 32,\n padding: \"6px 12px\",\n \":active, :hover\": {\n backgroundColor: theme.palette.grey[50],\n borderRadius: 4,\n color: theme.palette.text.secondary\n }\n }\n },\n \"@media (max-width: 768px)\": {\n padding: \"0 16px\"\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 @media (max-width: 1200px) {\\n display: block !important;\\n margin: 0 !important;\\n\\n & > .ant-col {\\n padding: 0 !important;\\n }\\n\\n .mysolvook-menu-col {\\n max-width: 100%;\\n }\\n\\n .mysolvook-content-col {\\n max-width: 100%;\\n }\\n }\\n @media (max-width: 768px) {\\n .mysolvook-menu-col {\\n max-width: 150%;\\n margin: 0 -16px !important;\\n background-color: #fff;\\n }\\n\\n .mysolvook-content-col {\\n padding-bottom: 48px !important;\\n /* margin: 12px 0 0 !important; */\\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 { MyPageSubMenu } from \"@/containers/Layout/MyPage/MyPageSubMenu\";\nimport { Col, Row } from \"@/lib/web-ui\";\nimport React, { useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport useRedirect from \"@/hooks/useRedirect\";\nexport const StyledRow = styled(Row).withConfig({\n componentId: \"sc-a53a29f0-0\"\n})(_templateObject());\nexport const MySolvookLayout = (param)=>{\n let { children } = param;\n const { isLoggedIn } = useAuthStore();\n const { redirectToLogin } = useRedirect();\n useEffect(()=>{\n if (!isLoggedIn) {\n redirectToLogin();\n }\n }, []);\n return /*#__PURE__*/ _jsxs(StyledRow, {\n gutter: 72,\n children: [\n /*#__PURE__*/ _jsx(Col, {\n md: 5,\n sm: 8,\n xs: 24,\n className: \"mysolvook-menu-col\",\n children: /*#__PURE__*/ _jsx(MyPageSubMenu, {})\n }),\n /*#__PURE__*/ _jsx(Col, {\n md: 19,\n sm: 16,\n xs: 24,\n className: \"mysolvook-content-col\",\n children: children\n })\n ]\n });\n};\n","export * from \"./ICommand\";\nexport * from \"./RestfulApiService\";\nexport const isAxiosError = (error)=>!!error.isAxiosError;\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from \"react\";\nexport const Button = ()=>{\n return /*#__PURE__*/ _jsx(\"button\", {\n children: \"Solvook Boop\"\n });\n};\n","const rowStyle = {\n // width: '100%',\n display: \"flex\",\n flexFlow: \"row wrap\"\n};\nconst colStyle = {\n};\nconst gutter = 16;\nexport const basicStyle = {\n rowStyle,\n colStyle,\n gutter\n};\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport ARow from \"antd/lib/row\";\nimport { basicStyle } from \"./basicStyle\";\nconst Row = (param)=>{\n let { children , ...props } = param;\n return /*#__PURE__*/ _jsx(ARow, {\n ...props,\n gutter: (props === null || props === void 0 ? void 0 : props.gutter) || basicStyle.gutter,\n style: (props === null || props === void 0 ? void 0 : props.style) || basicStyle.rowStyle,\n children: children\n });\n};\nexport { Row };\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport ACol from \"antd/lib/col\";\nimport { basicStyle } from \"./basicStyle\";\n// HoC 를 사용하여 기본 스타일을 적용한다.\n// High order Component\n// curry function\n// https://levelup.gitconnected.com/devmade-curry-ing-powder-recipe-in-functional-programming-c6e0e45cfbae\n// 데코레이터 패턴\n// https://refactoring.guru/ko/design-patterns/decorator\n// const withDefaultPropsCol = (Component) => {\n// \tconst defaultProps = {\n// \t\t...basicStyle,\n// \t}\n//\n// \treturn (props: ColProps) => \n// }\n//\n// const ColWithHoc = withDefaultPropsCol(Col)\n// const Col = withDefaultPropsCol(Col)\nconst Col = (param)=>{\n let { children , ...props } = param;\n return /*#__PURE__*/ _jsx(ACol, {\n ...props,\n style: (props === null || props === void 0 ? void 0 : props.style) || basicStyle.colStyle,\n children: children\n });\n};\nexport { Col };\n","export * from \"./Button\";\nexport * from \"./Row\";\nexport * from \"./Col\";\nexport * from \"./basicStyle\";\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n const data = _tagged_template_literal([\n \"\\n padding: 24px 0;\\n min-height: 80vh;\\n \",\n \"\\n\\n @media (max-width: 1200px) {\\n }\\n @media (max-width: 768px) {\\n padding: 0;\\n }\\n\"\n ]);\n _templateObject = function() {\n return data;\n };\n return data;\n}\nimport styled from \"styled-components\";\nconst Moved = ()=>null;\nexport var __N_SSP = true;\nexport default Moved;\nexport const MyPageWrapper = styled.div.withConfig({\n componentId: \"sc-c94a6711-0\"\n})(_templateObject(), (props)=>props.bgcolor ? \"background-color: \".concat(props.bgcolor, \";\") : \"\");\n"],"names":[],"sourceRoot":""}