{"version":3,"file":"static/chunks/6165-c1677258a2b33592.js","mappings":"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","sources":["webpack://_N_E/./src/components/commons/popup/StoryGameChapterPurchaseForTimeLeapPopup.tsx","webpack://_N_E/./src/components/commons/tooltip/Tooltip.tsx","webpack://_N_E/./src/components/commons/popup/container/BlackInfoPopupContainer.tsx","webpack://_N_E/./src/components/commons/popup/StoryGameCommonPlayPopup.tsx","webpack://_N_E/./src/components/commons/popup/StoryGameTimeLeapPopup.tsx","webpack://_N_E/./src/hooks/useWidowWidth.ts"],"sourcesContent":["import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { useQuery } from '@apollo/client';\nimport { GetUser } from '@customTypes/user';\nimport { GET_USER } from '@api/user';\nimport { useAppDispatch } from '@store/hooks';\nimport {\n setIsRestarting,\n setIsRestartingForRemainingAfterClear,\n} from '@/slices/chatChapterSlice';\nimport { SPLoading } from '@components/commons';\nimport useCheckAdultCertification from '@/hooks/useCheckAdultCertification';\nimport StoryGameCommonPlayPopup from './StoryGameCommonPlayPopup';\nimport { useRouter } from 'next/router';\nimport { isMobileDevice } from '@/common/utils';\nimport { STORAGE_KEY } from '@/common/values';\n\ninterface IStoryGameChapterPurchaseForTimeLeapPopup {\n storyName?: string;\n chapterName?: string;\n chapterId?: number;\n storyId?: number;\n chapterIndex?: number;\n price: number;\n isShow: boolean;\n onClose: () => void;\n chapterImage?: string;\n showAdultChapterIcon: boolean;\n}\n\nconst STORYGAME_PLAY_PAGE = '/storygame/[chapterId]';\n\nconst StoryGameChapterPurchaseForTimeLeapPopup = ({\n storyName,\n chapterName,\n chapterId,\n storyId,\n chapterImage,\n price,\n isShow,\n onClose,\n showAdultChapterIcon,\n chapterIndex,\n}: IStoryGameChapterPurchaseForTimeLeapPopup) => {\n const router = useRouter();\n const { t } = useTranslation();\n const dispatch = useAppDispatch();\n const { data: userData } = useQuery(GET_USER);\n const { goToAdultChapter } = useCheckAdultCertification({\n storyId,\n chapterId,\n });\n\n if (!isShow) {\n return null;\n }\n\n if (!userData) {\n return ;\n }\n\n const handlePurchaseChapterButtonClick = () => {\n if (!chapterId) return;\n\n !isMobileDevice() && onClose();\n if (router.pathname === STORYGAME_PLAY_PAGE) {\n dispatch(setIsRestartingForRemainingAfterClear(true));\n } else {\n dispatch(setIsRestarting(true));\n }\n\n const redirectInfo = JSON.stringify({\n redirectUrl: `/story/${storyId}`,\n createdAt: new Date(),\n });\n localStorage.setItem(STORAGE_KEY.REDIRECT_INFO, redirectInfo);\n\n storyId &&\n chapterId &&\n goToAdultChapter({\n storyId,\n chapterId,\n price,\n query: {\n prevScreen: 'story_detail',\n startType: 'restartChapter',\n isRestarting: true,\n chapterIndex: chapterIndex,\n },\n });\n };\n\n return (\n \n );\n};\n\nexport default StoryGameChapterPurchaseForTimeLeapPopup;\n","import { pxToRem } from '@lib/common-react/utils/pixelToRem';\nimport theme from '@styles/theme';\nimport React, { useState, useRef } from 'react';\nimport { css } from '@emotion/react';\n\ntype Position = 'top' | 'bottom';\ntype Alignment = 'start' | 'center' | 'end';\n\n// Todo: 사용되는 곳이 늘어난다면, 색상 및 외부 컴포넌트 프랍스로 추가, 현재는 스토리게임 타임리프 모달에서만 사용중\ninterface TooltipProps {\n children: JSX.Element;\n message: string;\n position?: Position;\n align?: Alignment;\n}\n\nexport const Tooltip = ({\n disabled,\n children,\n ...props\n}: TooltipProps & { disabled?: boolean }): JSX.Element => {\n if (disabled) {\n return children;\n }\n\n return {children};\n};\n\nconst TooltipImpl = ({\n children,\n message,\n position = 'top',\n align = 'center',\n}: TooltipProps) => {\n const [isVisible, setIsVisible] = useState(false);\n const triggerRef = useRef(null);\n\n return (\n setIsVisible(true)}\n onMouseLeave={() => setIsVisible(false)}\n >\n {children}\n {isVisible && (\n
\n {message}\n
\n
\n )}\n
\n );\n};\n\nconst container = css`\n position: relative;\n display: inline-block;\n\n .tooltip-content {\n position: absolute;\n z-index: 10;\n background-color: #303030;\n color: white;\n padding: ${pxToRem(8)} ${pxToRem(12)};\n border-radius: ${pxToRem(4)};\n display: flex;\n align-items: center;\n width: max-content;\n white-space: pre-wrap;\n }\n\n .tooltip-arrow {\n position: absolute;\n width: 12px;\n height: 12px;\n background-color: #303030;\n transform: rotate(45deg);\n }\n\n .tooltip-message {\n ${theme.font.body.body1};\n color: ${theme.colors.white};\n }\n`;\n\nfunction getPositionStyles(position: Position, align: Alignment) {\n return css`\n .tooltip-content {\n ${position === 'top' && 'bottom: 100%; margin-bottom: 8px;'}\n ${position === 'bottom' && 'top: 100%; margin-top: 8px;'}\n\n ${align === 'start' && 'left: 0;'}\n ${align === 'center' && 'left: 50%; transform: translateX(-50%);'}\n ${align === 'end' && 'right: 0;'}\n }\n\n .tooltip-arrow {\n ${position === 'top' && 'bottom: -6px;'}\n ${position === 'bottom' && 'top: -6px;'}\n\n ${align === 'start' && 'left: 12px;'}\n ${align === 'center' &&\n 'left: 50%; transform: translateX(-50%) rotate(45deg);'}\n ${align === 'end' && 'right: 12px;'}\n }\n `;\n}\n","import React, { useEffect } from 'react';\nimport { css, SerializedStyles } from '@emotion/react';\nimport { NavCloseBtn } from 'public/assets';\nimport theme from '@styles/theme';\nimport Portal from '@components/commons/portal/Portal';\n\ninterface IBlackInfoPopupContainer {\n children: JSX.Element[] | JSX.Element;\n customCSS?: SerializedStyles;\n title?: string;\n onClose?: () => void;\n}\n\nconst BlackInfoPopupContainer = ({\n title,\n customCSS,\n onClose,\n children,\n}: IBlackInfoPopupContainer) => {\n useEffect(() => {\n document.body.style.overflow = 'hidden';\n return () => {\n document.body.style.overflow = '';\n };\n }, []);\n\n return (\n \n
\n
\n
\n {onClose && (\n \n )}\n {title &&
{title}
}\n {children}\n
\n
\n \n );\n};\n\nconst backDrop = css`\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n min-height: 100%;\n background: ${theme.colors.gray900};\n opacity: 0.6;\n overflow: hidden;\n z-index: 20;\n`;\n\nconst container = css`\n position: fixed;\n top: 50%;\n left: 50%;\n width: 26.25rem;\n transform: translate(-50%, -50%);\n padding: 2rem 1.5rem 1.5em 1.5em;\n background: #1a1a1a;\n border-radius: 0.75rem;\n max-width: 26.25rem;\n z-index: 29;\n\n .popup-wrapper {\n position: relative;\n margin: auto;\n\n .title {\n ${theme.fontV3.heading.heading03};\n font-weight: 500;\n color: ${theme.colors.white};\n }\n\n .title.center {\n text-align: center;\n }\n\n .close-button {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 0;\n right: 0;\n background: none;\n cursor: pointer;\n }\n }\n\n .popup-wrapper.center {\n text-align: center;\n }\n\n ${theme.setMobileStyle(css`\n width: 90%;\n `)}\n`;\n\nexport default BlackInfoPopupContainer;\n","import { Tooltip } from '@components/commons/tooltip/Tooltip';\nimport React from 'react';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport SPImage from '@components/commons/image/SPImage';\n\nimport Button from '../../storyDetail/button/Button';\nimport { AdultLabelIcon, Coin1Icon } from 'public/assets';\nimport BlackInfoPopupContainer from './container/BlackInfoPopupContainer';\nimport useTranslation from 'next-translate/useTranslation';\nexport interface IStoryGameCommonPlayPopup {\n title: string;\n description?: string;\n confirmText: string;\n onConfirm: () => void;\n onClose: () => void;\n image?: string;\n mainText: string;\n subText: string;\n isShowCoin?: boolean;\n discountRate?: number;\n originalCoin?: number;\n coin?: number;\n isShowAd?: boolean;\n isShowAdultChapterIcon?: boolean;\n isTimeLeapEventActive?: boolean;\n}\n\nconst StoryGameCommonPlayPopup = ({\n title,\n description,\n confirmText,\n onConfirm,\n onClose,\n image,\n mainText,\n subText,\n isShowCoin,\n discountRate,\n originalCoin,\n coin,\n isShowAd,\n isShowAdultChapterIcon,\n isTimeLeapEventActive,\n}: IStoryGameCommonPlayPopup) => {\n const { t } = useTranslation();\n return (\n \n
\n

{description}

\n
\n
\n \n
\n
\n
\n
\n {isShowAdultChapterIcon && (\n \n )}\n

{mainText}

\n
\n {isShowAd &&
AD
}\n
\n

{subText}

\n
\n
\n {isShowCoin && (\n <>\n
\n
\n
{'주문 금액'}
\n
\n {discountRate && (\n
-{discountRate}%
\n )}\n {originalCoin && (\n
\n \n

{originalCoin}

\n
\n )}\n {isTimeLeapEventActive && (\n
\n \n

{coin}

\n
\n )}\n \n
\n \n

\n {isTimeLeapEventActive ? 0 : coin}\n

\n
\n \n
\n
\n \n )}\n
\n \n
\n
\n \n );\n};\n\nconst container = css`\n margin-top: 1em;\n\n .summary {\n display: flex;\n align-items: center;\n margin-top: 1.5rem;\n }\n\n .image-wrapper {\n img {\n object-fit: cover;\n border-radius: 0.5rem;\n }\n }\n\n .content-wrapper {\n display: flex;\n flex-direction: column;\n margin-left: 1rem;\n width: 100%;\n gap: 0.125rem;\n }\n\n .sub-text {\n ${theme.fontV3.body.body06Reg};\n color: var(--whiteA50, rgba(255, 255, 255, 0.5));\n }\n\n .main-text-wrapper {\n display: flex;\n justify-content: space-between;\n }\n\n .main-text {\n ${theme.fontV3.body.body04Reg};\n color: var(--white, #fff);\n display: flex;\n align-items: flex-start;\n gap: 0.25rem;\n\n .adult-icon {\n margin-top: 0.0625rem;\n flex-shrink: 0;\n }\n }\n\n .ad-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 9px;\n font-weight: 800;\n color: ${theme.colors.gray500};\n border: 0.125rem solid ${theme.colors.gray400};\n border-radius: 0.125rem;\n margin-top: 0.125rem;\n margin-right: 0.5rem;\n padding: 0.15rem 0.25rem 0.0625rem;\n width: 1.5rem;\n height: 1rem;\n }\n\n .ticket-wrapper {\n display: flex;\n align-items: center;\n }\n\n .description {\n font: ${theme.font.body2Normal};\n color: ${theme.colors.gray600};\n line-height: 1.25em;\n margin: 1em 0;\n }\n\n .button-wrapper {\n display: flex;\n padding-top: 1.5rem;\n }\n\n .price-container {\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n margin-top: 1.5rem;\n }\n\n .coin-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .price-title {\n font: ${theme.fontV3.body.body04Reg};\n color: var(--whiteA50, rgba(255, 255, 255, 0.5));\n }\n\n .price {\n ${theme.fontV3.body.body03Medium};\n color: var(--white, #fff);\n text-align: center;\n }\n\n .icon {\n display: flex;\n align-items: center;\n color: ${theme.colors.point500};\n }\n\n .price-right-wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n .discount-percent {\n height: 1.0625rem;\n padding: 0.125rem 0.25rem;\n border-radius: 0.125rem;\n background: #ff3a58;\n color: #fff;\n text-align: center;\n ${theme.fontV3.body.caption02Reg}\n }\n\n .coin-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 0.375rem;\n\n .coin-number {\n padding-top: 2px;\n ${theme.fontV3.body.body03Medium}\n color: var(--white, #fff);\n }\n }\n\n .coin-wrapper.origin {\n opacity: 0.5;\n ${theme.fontV3.body.body06Reg}\n text-decoration: line-through;\n color: var(--white, #fff);\n }\n }\n\n .divider {\n width: 100%;\n height: 1px;\n background: var(--whiteA10, rgba(255, 255, 255, 0.1));\n margin-top: 1.5rem;\n }\n`;\n\nexport default StoryGameCommonPlayPopup;\n","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { useAppDispatch } from '@store/hooks';\nimport {\n setIsRestarting,\n setIsRestartingForRemainingAfterClear,\n} from '@/slices/chatChapterSlice';\nimport useCheckAdultCertification from '@/hooks/useCheckAdultCertification';\nimport StoryGameCommonPlayPopup from './StoryGameCommonPlayPopup';\nimport { useRouter } from 'next/router';\nimport { RESTART_AI_CHARACTER_STORYGAME_CHAPTER } from '@/api/story';\nimport { useMutation } from '@apollo/client';\n\nexport interface IStoryGameTimeLeapPopup {\n title: string;\n isShow: boolean;\n onClose: () => void;\n image?: string;\n storyName: string;\n coin: number;\n chapterName?: string;\n chapterId?: number;\n chapterIndex?: number;\n isPurchased?: boolean;\n isShowAd?: boolean;\n isShowCoin?: boolean;\n storyId?: number;\n isTimeLeapEventActive: boolean;\n}\n\nconst STORYGAME_PLAY_PAGE = '/storygame/[chapterId]';\n\nconst StoryGameTimeLeapPopup = ({\n title,\n isShow,\n onClose,\n image,\n storyName,\n chapterId,\n chapterName,\n chapterIndex,\n isShowAd,\n isShowCoin,\n coin,\n storyId,\n isTimeLeapEventActive,\n}: IStoryGameTimeLeapPopup) => {\n const { t } = useTranslation();\n const dispatch = useAppDispatch();\n const [onStorygameTimeLeap] = useMutation(\n RESTART_AI_CHARACTER_STORYGAME_CHAPTER,\n );\n const { showAdultChapterIcon, goToAdultChapter } = useCheckAdultCertification(\n {\n storyId,\n chapterId,\n },\n );\n\n const router = useRouter();\n\n const handleGoingBackButtonClick = async () => {\n if (!chapterId) return;\n\n await onStorygameTimeLeap({ variables: { chapterId } });\n if (router.pathname === STORYGAME_PLAY_PAGE) {\n dispatch(setIsRestartingForRemainingAfterClear(true));\n } else {\n dispatch(setIsRestarting(true));\n }\n\n storyId &&\n chapterId &&\n goToAdultChapter({\n storyId: storyId,\n chapterId: chapterId,\n query: {\n prevScreen: 'story_detail',\n startType: 'restartChapter',\n isRestarting: true,\n adsOn: isShowAd,\n chapterIndex: chapterIndex,\n },\n });\n };\n\n if (!isShow) {\n return null;\n }\n\n return (\n \n );\n};\n\nexport default StoryGameTimeLeapPopup;\n","import { useState, useEffect, useCallback } from 'react';\n\nconst MIN_PC_WIDTH = 1024;\n\nexport const useWindowWidth = () => {\n const [width, setWidth] = useState(0);\n\n const handleResize = useCallback(() => {\n setWidth(window.innerWidth);\n }, []);\n\n useEffect(() => {\n window.addEventListener('resize', handleResize);\n handleResize();\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, [handleResize]);\n\n return { width, isPCSize: width >= MIN_PC_WIDTH };\n};\n"],"names":["storyName","chapterName","chapterId","storyId","chapterImage","price","isShow","onClose","showAdultChapterIcon","chapterIndex","router","useRouter","t","useTranslation","dispatch","useAppDispatch","userData","useQuery","GET_USER","data","goToAdultChapter","useCheckAdultCertification","title","description","confirmText","onConfirm","isMobileDevice","pathname","setIsRestartingForRemainingAfterClear","setIsRestarting","redirectInfo","JSON","stringify","redirectUrl","createdAt","Date","localStorage","setItem","STORAGE_KEY","query","prevScreen","startType","isRestarting","image","mainText","subText","isShowCoin","coin","isShowAdultChapterIcon","Tooltip","disabled","children","props","TooltipImpl","message","position","align","useState","isVisible","setIsVisible","triggerRef","useRef","ref","css","container","getPositionStyles","onMouseEnter","onMouseLeave","className","pxToRem","theme","backDrop","customCSS","useEffect","document","body","style","overflow","Portal","onClick","width","height","fill","discountRate","originalCoin","isShowAd","isTimeLeapEventActive","SPImage","src","Button","isFill","useMutation","RESTART_AI_CHARACTER_STORYGAME_CHAPTER","onStorygameTimeLeap","handleGoingBackButtonClick","variables","adsOn","useWindowWidth","setWidth","handleResize","useCallback","window","innerWidth","addEventListener","removeEventListener","isPCSize"],"sourceRoot":""}