{"version":3,"file":"static/chunks/pages/passes/new-18986cfd27668733.js","mappings":"AACA","sources":["webpack://_N_E/?7f5a","webpack://_N_E/./src/components/Package/PassRegister/index.tsx","webpack://_N_E/./src/components/Package/PassRegister/AddPackages.tsx","webpack://_N_E/./src/pages/passes/new.tsx","webpack://_N_E/"],"sourcesContent":["\n (window.__NEXT_P = window.__NEXT_P || []).push([\n \"/passes/new\",\n function () {\n return require(\"private-next-pages/passes/new.tsx\");\n }\n ]);\n if(module.hot) {\n module.hot.dispose(function () {\n window.__NEXT_P.push([\"/passes/new\"])\n });\n }\n ","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n const data = _tagged_template_literal([\n \"\\n flex-grow: 1;\\n background-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 max-width: 600px;\\n margin: 0 auto;\\n padding: 40px 0;\\n\\n @media (max-width: 1200px) {\\n }\\n @media (max-width: 430px) {\\n width: 100%;\\n margin: 40px 0;\\n padding: 0 16px;\\n }\\n\"\n ]);\n _templateObject1 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject2() {\n const data = _tagged_template_literal([\n \"\\n display: flex;\\n flex-direction: column;\\n gap: 8px;\\n margin-bottom: 24px;\\n font-size: 24px;\\n font-weight: 600;\\n line-height: 32px;\\n color: \",\n \";\\n\"\n ]);\n _templateObject2 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject3() {\n const data = _tagged_template_literal([\n \"\\n font-size: 16px;\\n font-weight: 400;\\n line-height: 1.5;\\n letter-spacing: -0.16px;\\n color: \",\n \";\\n\"\n ]);\n _templateObject3 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject4() {\n const data = _tagged_template_literal([\n \"\\n margin: 40px 0;\\n display: flex;\\n gap: 8px;\\n flex-direction: column;\\n p {\\n font-size: 14px;\\n font-style: normal;\\n font-weight: 600;\\n line-height: 22px; /* 157.143% */\\n letter-spacing: -0.14px;\\n\\n color: \",\n \";\\n font-weight: 600;\\n }\\n\"\n ]);\n _templateObject4 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject5() {\n const data = _tagged_template_literal([\n \"\\n font-size: 14px;\\n\\n li {\\n font-weight: 400;\\n color: \",\n \";\\n\\n line-height: 22px;\\n list-style: initial;\\n margin-inline-start: 24px;\\n }\\n @media (max-width: 768px) {\\n li {\\n font-size: 14px;\\n }\\n }\\n\"\n ]);\n _templateObject5 = function() {\n return data;\n };\n return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport styled from \"styled-components\";\nexport const ContentsWrapper = styled.div.withConfig({\n componentId: \"sc-c644f458-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_gray_0);\nexport const ContentsContainer = styled.div.withConfig({\n componentId: \"sc-c644f458-1\"\n})(_templateObject1());\nexport const ContentsStyledTitle = styled.h2.withConfig({\n componentId: \"sc-c644f458-2\"\n})(_templateObject2(), (props)=>props.theme.new.colors.sol_gray_900);\nexport const Subtitle = styled.p.withConfig({\n componentId: \"sc-c644f458-3\"\n})(_templateObject3(), (props)=>props.theme.new.colors.sol_gray_500);\nexport const ContentsTitle = (param)=>{\n let { primary , secondary } = param;\n return /*#__PURE__*/ _jsx(_Fragment, {\n children: /*#__PURE__*/ _jsxs(ContentsStyledTitle, {\n children: [\n primary,\n !!secondary && /*#__PURE__*/ _jsx(Subtitle, {\n children: secondary\n })\n ]\n })\n });\n};\nexport const NoticeContainer = styled.div.withConfig({\n componentId: \"sc-c644f458-4\"\n})(_templateObject4(), (props)=>props.theme.new.colors.sol_gray_500);\n// page/packages/index 스타일 동일한 부분...충돌 방지로 가져와 사용중, 나중에 정리해야\nexport const NoticeList = styled.ul.withConfig({\n componentId: \"sc-c644f458-5\"\n})(_templateObject5(), (props)=>props.theme.new.colors.sol_gray_500);\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n const data = _tagged_template_literal([\n \"\\n .textfiled {\\n border-color: \",\n \";\\n background-color: \",\n \";\\n\\n &:hover {\\n border-color: \",\n \";\\n }\\n &:focus-within {\\n border-color: \",\n \";\\n }\\n input::placeholder {\\n color: \",\n \";\\n }\\n }\\n\\n .error {\\n background-color: \",\n \";\\n border-color: \",\n \";\\n svg {\\n fill: \",\n \";\\n }\\n }\\n\\n p {\\n margin-left: 4px;\\n color: \",\n \";\\n font-size: 14px;\\n font-weight: 400;\\n line-height: 22px;\\n letter-spacing: -0.14px;\\n }\\n\"\n ]);\n _templateObject = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject1() {\n const data = _tagged_template_literal([\n \"\\n border: 1px solid transparent;\\n\\n border-radius: 4px;\\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 display: flex;\\n flex: 1;\\n align-items: start;\\n gap: 16px;\\n div {\\n width: 100%;\\n align-items: start;\\n }\\n input {\\n width: 100%;\\n height: 48px;\\n box-sizing: border-box;\\n text-transform: uppercase;\\n padding: 12px 16px;\\n\\n border: 1px solid \",\n \";\\n color: \",\n \";\\n\\n :hover {\\n border: 1px solid \",\n \";\\n }\\n :focus {\\n border: 0;\\n outline: 1px solid \",\n \";\\n }\\n ::placeholder {\\n color: \",\n \";\\n }\\n }\\n\\n @media (max-width: 430px) {\\n flex-direction: column;\\n }\\n\"\n ]);\n _templateObject2 = function() {\n return data;\n };\n return data;\n}\nfunction _templateObject3() {\n const data = _tagged_template_literal([\n \"\\n all: unset;\\n border-radius: 6px;\\n background: \",\n \";\\n padding: 12px 20px;\\n flex-shrink: 0;\\n cursor: pointer;\\n\\n font-size: 16px;\\n font-style: normal;\\n font-weight: 600;\\n line-height: 24px; /* 150% */\\n letter-spacing: -0.16px;\\n color: \",\n \";\\n\\n @media (max-width: 430px) {\\n width: 100%;\\n text-align: center;\\n box-sizing: border-box;\\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 BooksOrderModal from \"@/components/Books/Order/BooksOrderModal\";\nimport FilledButton from \"@/components/common/Button/FilledButton\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { useMutation } from \"@tanstack/react-query\";\nimport { useRouter } from \"next/router\";\nimport { useCallback, useState } from \"react\";\nimport { Controller, FormProvider, useForm } from \"react-hook-form\";\nimport { IMaskInput } from \"react-imask\";\nimport { patchAddPass } from \"src/api/membership\";\nimport styled from \"styled-components\";\nconst AddPackages = ()=>{\n const router = useRouter();\n const [isModal, setIsModal] = useState(false);\n const [modalProps, sestModalProps] = useState({\n title: \"다시 시도해 주세요.\",\n severity: \"caution\"\n });\n const methods = useForm({\n mode: \"onTouched\",\n reValidateMode: \"onChange\",\n defaultValues: {}\n });\n const addPassMutation = useMutation(patchAddPass);\n const submit = useCallback(async (param)=>{\n let { packageNumber } = param;\n if (!packageNumber || packageNumber === \"\") return methods.setError(\"packageNumber\", {\n message: \"이용권 코드 16자리를 입력해주세요\"\n });\n if (packageNumber.split(\"-\").join(\"\").length < 16) return methods.setError(\"packageNumber\", {\n message: \"이용권 코드 16자리를 모두 입력해주세요.\"\n });\n mixpanelEvent(\"Preview Button Clicked\", {\n //이용권 등록 버튼 눌렀을 때 mx-13\n \"Pass Number\": packageNumber\n });\n addPassMutation.mutate({\n code: packageNumber\n }, {\n onSuccess: (data)=>{\n setIsModal(true);\n sestModalProps({\n title: \"이용권이 등록 되었습니다!\",\n severity: \"success\"\n });\n },\n onError: (error)=>{\n if (error.response.status === 404) methods.setError(\"packageNumber\", {\n // type: '404',\n message: \"이용권 코드가 맞는지 확인해주세요.\"\n });\n if (error.response.status === 400) methods.setError(\"packageNumber\", {\n // type: '400',\n message: \"이미 사용된 이용권입니다.\"\n });\n }\n });\n }, []);\n return /*#__PURE__*/ _jsxs(_Fragment, {\n children: [\n /*#__PURE__*/ _jsx(BooksOrderModal, {\n open: isModal,\n title: /*#__PURE__*/ _jsx(_Fragment, {\n children: \"이용권이 등록 되었습니다!\"\n }),\n footer: /*#__PURE__*/ _jsx(_Fragment, {\n children: /*#__PURE__*/ _jsx(FilledButton, {\n type: \"text\",\n onClick: ()=>{\n if (modalProps.severity === \"success\") {\n mixpanelEvent(\"Pass Register Completed\", {\n //mx-14\n \"Pass Number\": methods.getValues(\"packageNumber\")\n });\n router.back();\n } else setIsModal(false);\n },\n variant: \"solid\",\n children: \"확인\"\n })\n }),\n ...modalProps\n }),\n /*#__PURE__*/ _jsx(FormProvider, {\n ...methods,\n children: /*#__PURE__*/ _jsxs(FormWrapper, {\n onSubmit: methods.handleSubmit(submit),\n children: [\n /*#__PURE__*/ _jsx(Controller, {\n name: \"packageNumber\",\n render: (param)=>/*#__PURE__*/ {\n let { field , fieldState: { invalid , error } } = param;\n return _jsxs(MaskedContainer, {\n children: [\n /*#__PURE__*/ _jsx(InputContainer, {\n className: \"textfield \".concat(error && \"error\"),\n mask: \"####-####-####-####\",\n definitions: {\n \"#\": /([a-zA-Z0-9])$/\n },\n // onAccept={} onChange 대신 사용\n onAccept: (value)=>{\n field.onChange({\n target: {\n name: value.name,\n value: value.toUpperCase()\n }\n });\n },\n overwrite: true,\n placeholder: \"FF11-22EE-45DD-66HH\"\n }),\n /*#__PURE__*/ _jsx(\"p\", {\n children: error ? error.message : \"\"\n })\n ]\n });\n },\n control: methods.control\n }),\n /*#__PURE__*/ _jsx(SubmitButton, {\n type: \"submit\",\n children: \"이용권 등록\"\n })\n ]\n })\n })\n ]\n });\n};\nconst MaskedContainer = styled.div.withConfig({\n componentId: \"sc-15792d2b-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_gray_200, (props)=>props.theme.new.colors.white, (props)=>props.theme.new.colors.sol_gray_300, (props)=>props.theme.new.colors.sol_gray_900, (props)=>props.theme.new.colors.sol_gray_300, (props)=>props.theme.new.colors.sol_red_0, (props)=>props.theme.new.colors.sol_red_400, (props)=>props.theme.new.colors.sol_red_400, (props)=>props.theme.new.colors.sol_red_400);\nconst InputContainer = styled(IMaskInput).withConfig({\n componentId: \"sc-15792d2b-1\"\n})(_templateObject1());\nconst FormWrapper = styled.form.withConfig({\n componentId: \"sc-15792d2b-2\"\n})(_templateObject2(), (props)=>props.theme.new.colors.sol_gray_200, (props)=>props.theme.new.colors.sol_gray_900, (props)=>props.theme.new.colors.sol_gray_300, (props)=>props.theme.new.colors.sol_gray_900, (props)=>props.theme.new.colors.sol_gray_300);\nconst SubmitButton = styled.button.withConfig({\n componentId: \"sc-15792d2b-3\"\n})(_templateObject3(), (props)=>props.theme.new.colors.indigo500, (props)=>props.theme.new.colors.white);\nexport default AddPackages;\n","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport BooksOrderModal from \"@/components/Books/Order/BooksOrderModal\";\nimport { ContentsContainer, ContentsTitle, ContentsWrapper, NoticeContainer, NoticeList } from \"@/components/Package/PassRegister\";\nimport AddPackages from \"@/components/Package/PassRegister/AddPackages\";\nimport FilledButton from \"@/components/common/Button/FilledButton\";\nimport useRedirect from \"@/hooks/useRedirect\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { REGISTRATION_PAGE } from \"@/settings/constant\";\nimport Link from \"next/link\";\nimport { useEffect, useState } from \"react\";\nconst newPackages = ()=>{\n const { user , isLoggedIn } = useAuthStore();\n const [modal, setModal] = useState(false);\n const { loginPath } = useRedirect();\n useEffect(()=>{\n if (!isLoggedIn) setModal(true);\n }, [\n isLoggedIn\n ]);\n return /*#__PURE__*/ _jsxs(_Fragment, {\n children: [\n modal && /*#__PURE__*/ _jsx(BooksOrderModal, {\n open: modal,\n title: /*#__PURE__*/ _jsxs(_Fragment, {\n children: [\n \"로그인이 필요해요.\",\n /*#__PURE__*/ _jsx(\"br\", {})\n ]\n }),\n onClose: ()=>setModal(false),\n content: /*#__PURE__*/ _jsx(\"p\", {\n children: \"로그인 혹은 회원가입을 진행해 주세요.\"\n }),\n footer: /*#__PURE__*/ _jsxs(_Fragment, {\n children: [\n /*#__PURE__*/ _jsx(Link, {\n href: loginPath,\n target: \"_blank\",\n children: /*#__PURE__*/ _jsx(FilledButton, {\n type: \"text\",\n variant: \"soft\",\n children: \"로그인\"\n })\n }),\n /*#__PURE__*/ _jsx(Link, {\n href: REGISTRATION_PAGE,\n children: /*#__PURE__*/ _jsx(FilledButton, {\n type: \"text\",\n variant: \"solid\",\n children: \"회원가입\"\n })\n })\n ]\n })\n }),\n /*#__PURE__*/ _jsx(ContentsWrapper, {\n children: /*#__PURE__*/ _jsxs(ContentsContainer, {\n children: [\n /*#__PURE__*/ _jsx(ContentsTitle, {\n primary: \"이용권 등록\",\n secondary: \"아래에 이용권 코드를 -(하이픈) 없이 입력해주세요.\"\n }),\n /*#__PURE__*/ _jsx(AddPackages, {}),\n /*#__PURE__*/ _jsxs(NoticeContainer, {\n children: [\n /*#__PURE__*/ _jsx(\"p\", {\n children: \"이용권 등록 유의사항\"\n }),\n /*#__PURE__*/ _jsxs(NoticeList, {\n children: [\n /*#__PURE__*/ _jsx(\"li\", {\n children: \"이용권은 유효기간 내 1회만 등록 가능합니다.\"\n }),\n /*#__PURE__*/ _jsx(\"li\", {\n children: \"이미 등록된 이용권은 재등록할 수 없습니다.\"\n }),\n /*#__PURE__*/ _jsx(\"li\", {\n children: \"등록하신 이용권은 마이페이지 > 이용권 관리에서 확인하실 수 있습니다.\"\n }),\n /*#__PURE__*/ _jsx(\"li\", {\n children: \"이용권 관련 자세한 사항은 고객센터로 문의해주세요.\"\n })\n ]\n })\n ]\n })\n ]\n })\n })\n ]\n });\n};\nexport default newPackages;\n"],"names":[],"sourceRoot":""}