{"version":3,"file":"static/chunks/pages/mypage/devices-21fc2aa3e63164ca.js","mappings":"AACA","sources":["webpack://_N_E/?ce55","webpack://_N_E/./src/api/device.ts","webpack://_N_E/./src/components/DeviceControls/DeviceIcon.tsx","webpack://_N_E/./src/components/DeviceControls/DeviceQueries.ts","webpack://_N_E/./src/components/DeviceControls/DeviceManage/DeviceManageContext.tsx","webpack://_N_E/./src/components/DeviceControls/DeviceManage/Empty.tsx","webpack://_N_E/./src/components/DeviceControls/utils.ts","webpack://_N_E/./src/hooks/useDialog.ts","webpack://_N_E/./src/components/DeviceControls/DeviceManage/DescriptionItem.tsx","webpack://_N_E/./src/components/DeviceControls/DeviceManage/DeviceListItem.tsx","webpack://_N_E/./src/components/DeviceControls/DeviceManage/DeviceManageContents.tsx","webpack://_N_E/./src/components/DeviceControls/DeviceManage/DeviceManageTitle.tsx","webpack://_N_E/./src/pages/mypage/devices/index.tsx","webpack://_N_E/<anon>"],"sourcesContent":["\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/mypage/devices\",\n      function () {\n        return require(\"private-next-pages/mypage/devices/index.tsx\");\n      }\n    ]);\n    if(module.hot) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/mypage/devices\"])\n      });\n    }\n  ","import { otherApiClient } from \"./index\"; //409 : 개수초과\n//409 : 개수초과\n//422 : 이미 등록된 디바이스\nexport const postDevice = async ()=>{\n    const { data  } = await otherApiClient.market.post(\"/devices\");\n    return data;\n};\nexport const getDevice = async ()=>{\n    const { data  } = await otherApiClient.market(\"/devices\");\n    return data;\n};\nexport const deleteDevice = async (deviceId)=>{\n    const { data  } = await otherApiClient.market.delete(\"/devices\", {\n        data: {\n            deviceId\n        }\n    });\n    return data;\n};\n// 409 중복 접근\nexport const postDetectViewer = async (eventType)=>{\n    const { data  } = await otherApiClient.market.post(\"/devices/log\", {\n        event: eventType\n    });\n    return data;\n};\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport Icon from \"../icon/Icon\";\nimport { Device_Desktop, Device_Mobile, Device_Tablet, Sizes } from \"../icon/IconList\";\nconst DeviceIcon = (param)=>{\n    let { device , size  } = param;\n    return /*#__PURE__*/ _jsx(Icon, {\n        icon: device === \"pc\" ? Device_Desktop : device === \"tablet\" ? Device_Tablet : Device_Mobile,\n        size: size || Sizes.xlarge\n    });\n};\nexport default DeviceIcon;\n","import { useMutation, useQuery, useQueryClient } from \"@tanstack/react-query\";\nimport { deleteDevice, getDevice, postDevice } from \"../../api/device\";\nimport { MYPAGE_DEVICE_INDEX_PAGE } from \"@/settings/constant\";\nimport { useCallback } from \"react\";\nexport const useDeviceQueries = (pathname)=>{\n    const queryClient = useQueryClient();\n    const defaultError = useCallback((error)=>{\n        alert(error);\n    }, []);\n    const QueryKeys = [\n        \"getDevice\"\n    ];\n    const { data: fetchedDeviceData , refetch  } = useQuery(QueryKeys, getDevice, {\n        enabled: pathname === MYPAGE_DEVICE_INDEX_PAGE\n    });\n    const fetchDeviceMutation = useMutation(getDevice, {\n        onError: defaultError\n    });\n    const createDeviceMutation = useMutation(postDevice, {\n        onError: defaultError\n    });\n    const removeDeviceMutation = useMutation(deleteDevice, {\n        onError: defaultError\n    });\n    const deleteDeviceById = useCallback(async (deviceId)=>{\n        try {\n            const response = await removeDeviceMutation.mutateAsync(deviceId);\n            queryClient.invalidateQueries(QueryKeys);\n            return response;\n        } catch (e) {}\n    }, [\n        removeDeviceMutation,\n        queryClient\n    ]);\n    const createDevice = useCallback(async ()=>{\n        try {\n            const response = await createDeviceMutation.mutateAsync();\n            queryClient.invalidateQueries(QueryKeys);\n            return response;\n        } catch (e) {}\n    }, [\n        createDeviceMutation,\n        queryClient\n    ]);\n    const fetchDeviceData = useCallback(async ()=>{\n        try {\n            const response = await fetchDeviceMutation.mutateAsync();\n            return response;\n        } catch (e) {}\n    }, [\n        fetchDeviceMutation\n    ]);\n    return {\n        fetchedDeviceData,\n        deleteDeviceById,\n        createDevice,\n        fetchDeviceData\n    };\n};\n","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { createContext, useContext } from \"react\";\nimport { ConfirmDialog } from \"@bookips/solvook-ui-library\";\nimport { MYPAGE_DEVICE_INDEX_PAGE } from \"@/settings/constant\";\nimport useSnackbar, { defaultSnackbarProps, IconWithSnackbarMessage, Snackbar } from \"@/components/common/Snackbar\";\nimport useDialog from \"@/hooks/useDialog\";\nimport useRedirect from \"@/hooks/useRedirect\";\nimport { useRouter } from \"next/router\";\nimport { DeviceMangePolicies } from \"../utils\";\nimport { useDeviceQueries } from \"../DeviceQueries\";\nexport const DeviceManageContext = /*#__PURE__*/ createContext(undefined);\nexport const DeviceManageProvider = (param)=>{\n    let { children  } = param;\n    const { fetchedDeviceData , handleDeviceAction , MAX_DEVICE_COUNT , MAX_DEVICE_DELETE_DAY , dialogProps , hideSnackbar , isShowSnackbar  } = useDeviceMangeHooks();\n    return /*#__PURE__*/ _jsxs(DeviceManageContext.Provider, {\n        value: {\n            fetchedDeviceData,\n            handleDevice: handleDeviceAction,\n            MAX_DEVICE_COUNT,\n            MAX_DEVICE_DELETE_DAY\n        },\n        children: [\n            children,\n            /*#__PURE__*/ _jsx(Snackbar, {\n                ...defaultSnackbarProps,\n                open: isShowSnackbar,\n                onClose: hideSnackbar,\n                message: /*#__PURE__*/ _jsx(IconWithSnackbarMessage, {\n                    text: \"기기를 삭제했어요.\",\n                    icon: \"success\"\n                })\n            }),\n            /*#__PURE__*/ _jsx(ConfirmDialog, {\n                ...dialogProps\n            })\n        ]\n    });\n};\nexport const useManageDevices = ()=>{\n    const context = useContext(DeviceManageContext);\n    if (!context) {\n        throw new Error(\"Missing PreviewDialogProvider\");\n    }\n    return context;\n};\nconst useDeviceMangeHooks = ()=>{\n    const router = useRouter();\n    const { isShowSnackbar , showSnackbar , hideSnackbar  } = useSnackbar();\n    const { open , dialogProps  } = useDialog();\n    const { redirectBack , redirectTo  } = useRedirect();\n    const { MAX_DEVICE_COUNT , MAX_DEVICE_DELETE_DAY  } = DeviceMangePolicies;\n    const { fetchedDeviceData , deleteDeviceById , createDevice , fetchDeviceData  } = useDeviceQueries(router.pathname);\n    const dialogMessages = {\n        deleteConfirm: {\n            title: \"기기를 삭제할까요?\",\n            okText: \"삭제하기\",\n            cancelText: \"취소\"\n        },\n        addSuccess: {\n            title: \"새로운 기기로 등록됐어요!\",\n            severity: \"success\",\n            okText: \"확인\"\n        },\n        addSuccessAndRedirect: {\n            title: /*#__PURE__*/ _jsxs(_Fragment, {\n                children: [\n                    \"새로운 기기로 등록됐어요.\",\n                    /*#__PURE__*/ _jsx(\"br\", {}),\n                    \"보고있던 자료로 돌아갈까요?.\"\n                ]\n            }),\n            severity: \"success\",\n            okText: \"돌아가기\",\n            cancelText: \"닫기\",\n            onOk: redirectBack\n        },\n        maxDevice: {\n            title: \"기기 제한 횟수를 넘었어요.\",\n            content: \"기기 관리에서 삭제 후 신규 등록을 진행해주세요.\",\n            severity: \"caution\",\n            okText: \"기기 관리 가기\",\n            cancelText: \"돌아가기\",\n            onCancel: ()=>window.close(),\n            onOk: ()=>redirectTo(MYPAGE_DEVICE_INDEX_PAGE),\n            onClose: null\n        },\n        deleteAndAddConfirm: {\n            title: /*#__PURE__*/ _jsxs(_Fragment, {\n                children: [\n                    \"선택한 기기를 삭제하고 \",\n                    /*#__PURE__*/ _jsx(\"br\", {}),\n                    \"지금 사용하는 기기를 등록할까요?\"\n                ]\n            }),\n            content: \"새롭게 등록된 기기는 \".concat(MAX_DEVICE_DELETE_DAY, \"일간 삭제할 수 없어요.\"),\n            okText: \"삭제 후 등록하기\",\n            cancelText: \"취소\"\n        }\n    };\n    const mutateDelete = async (id)=>{\n        const response = await deleteDeviceById(id);\n        if (response && !router.query.redirectPath) {\n            showSnackbar();\n        }\n    };\n    const mutateAdd = async ()=>{\n        const response = await createDevice();\n        if (response) {\n            setTimeout(()=>{\n                open(dialogMessages.addSuccessAndRedirect);\n            }, 300);\n        }\n    };\n    const deleteDeviceConfirm = (props)=>{\n        //redirect url이 있을 경우 && 등록된 기기가 아닐경우 등록도 함께\n        if (router.query.redirectPath && !props.inUse) {\n            open({\n                ...dialogMessages.deleteAndAddConfirm,\n                //삭제 후 등록하기\n                onOk: async ()=>{\n                    await mutateDelete(props.id) //FIXME: delete 성공해야 add 가능\n                    ;\n                    await mutateAdd();\n                }\n            });\n            return;\n        }\n        open({\n            ...dialogMessages.deleteConfirm,\n            onOk: ()=>mutateDelete(props.id)\n        });\n    };\n    const checkViewerAccess = async ()=>{\n        const response = await fetchDeviceData();\n        if (response) {\n            const { isRegisted , count  } = response;\n            //이미 등록된 기기라면 사용가능\n            if (isRegisted) return true;\n            //추가등록이 가능하다면 등록하기\n            if (count < MAX_DEVICE_COUNT) {\n                const addResponse = await createDevice();\n                if (addResponse) {\n                    return true;\n                }\n            }\n            //추가등록이 불가능 하다면 기기관리 페이지로 이동\n            open(dialogMessages.maxDevice);\n            return false;\n        }\n    };\n    const handleDeviceAction = async (type, props)=>{\n        switch(type){\n            case \"check\":\n                return await checkViewerAccess();\n            case \"delete\":\n                return deleteDeviceConfirm(props);\n        }\n    };\n    return {\n        fetchedDeviceData,\n        handleDeviceAction,\n        MAX_DEVICE_COUNT,\n        MAX_DEVICE_DELETE_DAY,\n        dialogProps,\n        open,\n        isShowSnackbar,\n        hideSnackbar\n    };\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 dayjs from \"dayjs\";\nexport const DeviceMangePolicies = {\n    MAX_DEVICE_COUNT: 5,\n    MAX_DEVICE_DELETE_DAY: 30\n};\nexport const diffDays = (date)=>{\n    return dayjs().diff(date, \"day\");\n};\n//0일 전 오늘,\nexport const lastViewDays = (viewDate)=>{\n    const day = diffDays(viewDate);\n    if (day === 0) return \"오늘\";\n    return day + \"일 전\";\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 { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport { styled, Typography } from \"@mui/material\";\nexport const DescriptionItem = (param)=>{\n    let { title , description , subDescription  } = param;\n    return /*#__PURE__*/ _jsxs(DescriptionItemContainer, {\n        children: [\n            /*#__PURE__*/ _jsx(\"dt\", {\n                children: /*#__PURE__*/ _jsx(Typography, {\n                    variant: \"body2\",\n                    color: title.color,\n                    children: title.children\n                })\n            }),\n            /*#__PURE__*/ _jsx(\"dd\", {\n                children: /*#__PURE__*/ _jsxs(Typography, {\n                    variant: \"body2\",\n                    color: subDescription.color,\n                    children: [\n                        /*#__PURE__*/ _jsx(Typography, {\n                            component: \"em\",\n                            variant: \"body2\",\n                            color: description.color,\n                            children: description.children\n                        }),\n                        \" \",\n                        subDescription.children\n                    ]\n                })\n            })\n        ]\n    });\n};\nconst DescriptionItemContainer = styled(\"dl\")((param)=>{\n    let { theme  } = param;\n    return {\n        margin: 0,\n        display: \"flex\",\n        gap: \"4px\",\n        dd: {\n            margin: 0\n        }\n    };\n});\n","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport Icon from \"@/components/icon/Icon\";\nimport { Button } from \"@bookips/solvook-ui-library\";\nimport { Stack, styled, Typography, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { Sizes, Success24Fill } from \"../../icon/IconList\";\nimport dayjs from \"dayjs\";\nimport DeviceIcon from \"../DeviceIcon\";\nimport { DescriptionItem } from \"./DescriptionItem\";\nimport { lastViewDays } from \"../utils\";\nexport const DeviceListItem = (param)=>{\n    let { device , handleDevice  } = param;\n    const theme = useTheme();\n    return /*#__PURE__*/ _jsxs(LisItemContainer, {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                children: /*#__PURE__*/ _jsx(DeviceIcon, {\n                    device: device.type\n                })\n            }),\n            /*#__PURE__*/ _jsxs(Stack, {\n                sx: {\n                    width: \"100%\",\n                    flex: 1,\n                    gap: \"4px\"\n                },\n                children: [\n                    /*#__PURE__*/ _jsxs(Typography, {\n                        variant: \"subtitle1\",\n                        children: [\n                            device.os,\n                            \" \",\n                            device.osMajorVersion\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsxs(Typography, {\n                        variant: \"body2\",\n                        children: [\n                            device.browser,\n                            \" Browser\"\n                        ]\n                    }),\n                    !device.inUse && /*#__PURE__*/ _jsxs(_Fragment, {\n                        children: [\n                            /*#__PURE__*/ _jsx(DescriptionItem, {\n                                title: {\n                                    children: \"마지막 열람일 : \",\n                                    color: theme.palette.text.secondary\n                                },\n                                description: {\n                                    children: lastViewDays(device.lastUsedAt),\n                                    color: theme.palette.mint[400]\n                                },\n                                subDescription: {\n                                    children: \"(\" + dayjs(device.lastUsedAt).format(\"YY.MM.DD\") + \")\",\n                                    color: theme.palette.text.disabled\n                                }\n                            }),\n                            !device.isDeletable && /*#__PURE__*/ _jsxs(DeleteWarning, {\n                                children: [\n                                    device.deletableDays,\n                                    \"일 후 삭제 가능\"\n                                ]\n                            })\n                        ]\n                    }),\n                    device.inUse && /*#__PURE__*/ _jsxs(InUseText, {\n                        children: [\n                            /*#__PURE__*/ _jsx(Icon, {\n                                icon: Success24Fill,\n                                size: Sizes.small\n                            }),\n                            \"지금 사용하는 기기\"\n                        ]\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(Stack, {\n                sx: {\n                    justifyContent: \"center\"\n                },\n                children: !device.inUse && /*#__PURE__*/ _jsx(DeleteButton, {\n                    disabled: !device.isDeletable,\n                    variant: \"filledPrimary\",\n                    onClick: ()=>handleDevice(\"delete\", device),\n                    children: \"삭제\"\n                })\n            })\n        ]\n    });\n};\nconst LisItemContainer = styled(\"li\")((param)=>{\n    let { theme  } = param;\n    return {\n        display: \"flex\",\n        gap: \"16px\",\n        padding: \"20px\",\n        borderBottom: \"1px solid \".concat(theme.palette.grey[50])\n    };\n});\nconst DeleteButton = styled(Button)((param)=>{\n    let { theme  } = param;\n    return {\n        height: \"fit-content\",\n        backgroundColor: theme.palette.red[400],\n        padding: \"6px 12px\",\n        minWidth: \"50px\",\n        ...theme.typography.subtitle2,\n        \":hover\": {\n            backgroundColor: theme.palette.red[500]\n        }\n    };\n});\nconst InUseText = styled(\"p\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.primary.main,\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: \"4px\",\n        ...theme.typography.body2\n    };\n});\nconst DeleteWarning = styled(\"p\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.red[400],\n        ...theme.typography.body2\n    };\n});\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Button } from \"@bookips/solvook-ui-library\";\nimport { styled, Typography } from \"@mui/material\";\nimport React from \"react\";\nimport { Empty } from \"./Empty\";\nimport { EXTERNAL_DEVICE_GUIDE } from \"@/settings/constant\";\nimport { DeviceListItem } from \"./DeviceListItem\";\nimport { useManageDevices } from \"./DeviceManageContext\";\nexport const DeviceManageContents = (param)=>{\n    let {} = param;\n    const { MAX_DEVICE_COUNT , MAX_DEVICE_DELETE_DAY , handleDevice , fetchedDeviceData  } = useManageDevices();\n    if (fetchedDeviceData) return /*#__PURE__*/ _jsxs(DeviceManageContainer, {\n        children: [\n            /*#__PURE__*/ _jsxs(ContentsItemContainer, {\n                sx: (theme)=>{\n                    return {\n                        [theme.breakpoints.down(\"sm\")]: {\n                            padding: \"20px 20px 0 20px\"\n                        }\n                    };\n                },\n                children: [\n                    /*#__PURE__*/ _jsxs(Typography, {\n                        variant: \"subtitle1\",\n                        sx: {\n                            marginBottom: \"6px\"\n                        },\n                        children: [\n                            \"등록된 기기 (\",\n                            fetchedDeviceData.count,\n                            \"/\",\n                            MAX_DEVICE_COUNT,\n                            \")\"\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsxs(Typography, {\n                        variant: \"body2\",\n                        sx: {\n                            color: \"text.secondary\"\n                        },\n                        children: [\n                            \"등록 후 \",\n                            MAX_DEVICE_DELETE_DAY,\n                            \"일이 지난 기기만 삭제 가능해요.\"\n                        ]\n                    })\n                ]\n            }),\n            fetchedDeviceData.count ? /*#__PURE__*/ _jsx(DeviceList, {\n                children: fetchedDeviceData.items.map((device)=>{\n                    return /*#__PURE__*/ _jsx(DeviceListItem, {\n                        device: device,\n                        handleDevice: handleDevice\n                    }, device.id);\n                })\n            }) : /*#__PURE__*/ _jsx(Empty, {\n                description: \"자료 이용시 자동으로 기기가 등록돼요.\"\n            }, \"empty\"),\n            /*#__PURE__*/ _jsx(ContentsItemContainer, {\n                children: /*#__PURE__*/ _jsx(Button, {\n                    variant: \"strokeSecondary\",\n                    sx: {\n                        width: \"100%\"\n                    },\n                    href: EXTERNAL_DEVICE_GUIDE,\n                    children: \"관리 가이드 보기\"\n                })\n            })\n        ]\n    });\n};\nexport const DeviceManageContainer = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        borderRadius: \"12px\",\n        background: theme.palette.background.paper,\n        boxShadow: theme.shadows[3],\n        [theme.breakpoints.down(\"sm\")]: {\n            boxShadow: \"none\",\n            borderRadius: \"0\"\n        }\n    };\n});\nexport const ContentsItemContainer = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        padding: \"20px\"\n    };\n});\nexport const DeviceList = styled(\"ul\")((param)=>{\n    let { theme  } = param;\n    return {};\n});\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport Icon from \"@/components/icon/Icon\";\nimport { Typography } from \"@mui/material\";\nimport { ArrowLeft, Sizes } from \"../../icon/IconList\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nimport { useRouter } from \"next/router\";\nexport const DeviceManageTitle = (param)=>{\n    let { children  } = param;\n    const { isMobile  } = useWindowDimensions();\n    const { back  } = useRouter();\n    return /*#__PURE__*/ _jsxs(Typography, {\n        onClick: back,\n        variant: isMobile ? \"subtitle1\" : \"h6\",\n        sx: (theme)=>{\n            return {\n                padding: \"16px 0\",\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: \"12px\",\n                cursor: \"pointer\",\n                [theme.breakpoints.down(\"sm\")]: {\n                    padding: \"16px 20px\",\n                    borderTop: \"1px solid \".concat(theme.palette.grey[50]),\n                    borderBottom: \"1px solid \".concat(theme.palette.grey[50])\n                }\n            };\n        },\n        children: [\n            /*#__PURE__*/ _jsx(Icon, {\n                icon: ArrowLeft,\n                size: Sizes.xmedium\n            }),\n            children\n        ]\n    });\n};\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { DeviceManageContents } from \"@/components/DeviceControls/DeviceManage/DeviceManageContents\";\nimport { DeviceManageProvider } from \"@/components/DeviceControls/DeviceManage/DeviceManageContext\";\nimport { DeviceManageTitle } from \"@/components/DeviceControls/DeviceManage/DeviceManageTitle\";\nimport { styled } from \"@mui/material\";\nimport useRedirect from \"@/hooks/useRedirect\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { useEffect } from \"react\";\nconst MypageDeviceNextPage = ()=>{\n    const { isLoggedIn  } = useAuthStore();\n    const { redirectToLogin  } = useRedirect();\n    useEffect(()=>{\n        if (!isLoggedIn) redirectToLogin();\n    }, [\n        isLoggedIn\n    ]);\n    return /*#__PURE__*/ _jsx(DeviceManageProvider, {\n        children: /*#__PURE__*/ _jsx(DeviceManageWrapper, {\n            children: /*#__PURE__*/ _jsxs(DeviceManageContainer, {\n                children: [\n                    /*#__PURE__*/ _jsx(DeviceManageTitle, {\n                        children: \"기기관리\"\n                    }),\n                    /*#__PURE__*/ _jsx(DeviceManageContents, {})\n                ]\n            })\n        })\n    });\n};\nexport default MypageDeviceNextPage;\nexport const DeviceManageWrapper = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        flexGrow: 1,\n        backgroundColor: theme.palette.grey[0]\n    };\n});\nexport const DeviceManageContainer = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        maxWidth: 640,\n        margin: \"0 auto\",\n        padding: \"48px 20px\",\n        [theme.breakpoints.down(\"sm\")]: {\n            maxWidth: \"unset\",\n            padding: \"0\",\n            backgroundColor: theme.palette.background.paper\n        }\n    };\n});\n"],"names":[],"sourceRoot":""}