https://www.timespread.co.kr/_next/static/chunks/pages/roulette/home-c2b3d4c6b8e561cd.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9076],{8912:function(n,t,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/roulette/home",function(){return e(6631)}])},8098:function(n,t,e){"use strict";e.d(t,{Z:function(){return N}});var i=e(5893),r=e(745),o=e(2729),l=e(7294),a=e(9521),c=e(4677),s=e(6528);function d(){let n=(0,o._)(["\n  position: relative;\n  width: 300px;\n  border-radius: 12px;\n  background-color: #fff;\n  overflow: hidden;\n  z-index: ",";\n"]);return d=function(){return n},n}function u(){let n=(0,o._)(["\n  width: 100%;\n  padding: 16px 0 28px 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  font-size: 16px;\n"]);return u=function(){return n},n}function f(){let n=(0,o._)(["\n    animation: "," forwards;\n    animation-duration: 0.3s;\n  "]);return f=function(){return n},n}function h(){let n=(0,o._)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: ",";\n\n  ","\n"]);return h=function(){return n},n}let g=a.ZP.div.withConfig({componentId:"sc-6b64ca60-0"})(d(),s.kg.MODAL),p=a.ZP.div.withConfig({componentId:"sc-6b64ca60-1"})(u());function x(){let n=(0,o._)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 100;\n"]);return x=function(){return n},n}a.ZP.div.withConfig({componentId:"sc-6b64ca60-2"})(h(),s.kg.MODAL_BACKDROP,n=>{let{visible:t}=n;return(0,a.iv)(f(),t?c.Ji:c.U6)});var m=n=>(0,i.jsx)(w,{...n});let w=a.ZP.div.withConfig({componentId:"sc-df92da3d-0"})(x());function b(){let n=(0,o._)(["\n  display: flex;\n  width: 100%;\n  height: 44px;\n  flex-direction: row;\n  justify-content: space-between;\n  color: white;\n\n  i {\n    height: 100%;\n    min-width: 8px;\n    max-width: 8px;\n  }\n\n  button {\n    width: 100%;\n    height: 48px;\n    background-color: #009bff;\n    color: #fff;\n    cursor: pointer;\n    border: 1px solid #009bff;\n    border-radius: 8px;\n    font-size: 14px;\n    line-height: 1.43;\n\n    &.on {\n      background-color: #009bff;\n      color: #fff;\n    }\n\n    &.cancel {\n      border: none;\n      background-color: #eee;\n      color: #000;\n    }\n  }\n\n  .role-case-confirm {\n    font-weight: 500;\n  }\n"]);return b=function(){return n},n}var v=n=>{let{type:t="confirm",confirmText:e="확인",closeText:r="취소",reverse:o=!1,confirm:l,setClose:a=n=>{}}=n,c=()=>a(!0),s=async()=>{await l&&(null==l||l(c))};return(0,i.jsxs)(y,{style:{flexDirection:o?"row-reverse":"row"},children:["confirm"===t&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("button",{className:"cancel",onClick:c,children:r}),(0,i.jsx)("i",{}),(0,i.jsx)("button",{role:"modalButtonConfirm",className:"on role-case-confirm",onClick:s,children:e})]}),"complete"===t&&(0,i.jsx)("button",{role:"modalButtonConfirm",className:"on role-case-confirm",onClick:s,children:e}),"alert"===t&&(0,i.jsx)("button",{className:"cancel",onClick:c,children:r})]})};let y=a.ZP.div.withConfig({componentId:"sc-a417e538-0"})(b());function j(){let n=(0,o._)(["\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;

1\n    align-items: center;\n    z-index: ",";\n    overscroll-behavior: contain;\n    animation: "," 0.2s;\n\n    .modal-wrapper {\n      position: relative;\n      padding: 16px;\n      box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2);\n      z-index: ",";\n    }\n\n    .modal-body {\n      position: relative;\n      background: #fff;\n\n      > div {\n        line-height: 1.5;\n      }\n    }\n  "]);return j=function(){return n},n}function A(){let n=(0,o._)(["\n  ","\n"]);return A=function(){return n},n}var _=n=>{let{mask:t=!0,children:e,onConfirm:r=null,onClose:o,confirmText:a="확인",closeText:c="취소",type:s}=n,[d,u]=(0,l.useState)(!1);return(0,i.jsxs)(k,{close:d,onAnimationEnd:()=>{d&&(null==o||o())},children:[(0,i.jsx)(m,{onClick:()=>{t&&u(!0)}}),(0,i.jsx)(g,{children:(0,i.jsxs)("div",{className:"modal-wrapper",children:[(0,i.jsx)("div",{className:"modal-body",children:(0,i.jsx)(p,{children:e})}),(0,i.jsx)(v,{type:s,setClose:u,confirm:r,confirmText:a,closeText:c})]})})]})};let k=a.ZP.div.withConfig({componentId:"sc-3e2bb0a9-0"})(A(),n=>{let{close:t}=n;return(0,a.iv)(j(),s.kg.MODAL_BACKDROP,t?c.U6:c.Ji,s.kg.MODAL)}),C=n=>{let t=document.getElementById(n);return t||((t=document.createElement("div")).id=n,document.body.appendChild(t)),(0,r.createRoot)(t)},E=n=>{let t="portal_".concat(Math.random().toString(36).substring(2,11)),e=C(t);e.render((0,i.jsx)(_,{...n,onClose:()=>{var t;e.unmount(),null===(t=n.onClose)||void 0===t||t.call(n)}}))};var N={confirm:n=>{let{...t}=n;return E({...t,type:"confirm"})},complete:n=>{let{...t}=n;return E({...t,type:"complete"})},alert:n=>{let{...t}=n,e={text:t};return"object"==typeof t&&(e=t),E({...e,type:"alert"})},text:n=>E({text:n,type:"alert"})}},8916:function(n,t,e){"use strict";e.d(t,{Z:function(){return d}});var i=e(8228),r=e(8052),o=e(4346),l=e(8098),a=e(5893);let c={NotFoundTicketError:()=>{l.Z.alert({children:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("h3",{style:{fontWeight:"bold",marginBottom:"16px"},children:"비정상적인 접근입니다."}),(0,a.jsx)("div",{style:{fontSize:"14px"},children:"카카오 신규 회원가입을 통해 이용해주세요"})]}),closeText:"확인"})},NetworkError:()=>{l.Z.alert({children:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("h3",{style:{fontWeight:"bold",marginBottom:"16px"},children:"네트워크 오류"}),(0,a.jsx)("div",{style:{fontSize:"14px"},children:"네트워크 오류가 발생하였습니다"})]}),closeText:"닫기"})}},s=async n=>{let{data:t}=await n.POST({url:o.Wb});return t};var d=n=>{let{handleSuccessEvent:t,handleType:e}=n,o=(0,r.Z)();return(0,i.D)(()=>s(o),{onSuccess:n=>{let{amount:i,deadLine:r}=n,o="reward"===e?{amount:i,deadLine:r}:{};t({...o})},onError:n=>{let{err:t}=n,e="NotFound Ticket Exception"===t.response.data.message?"NotFoundTicketError":"NetworkError";c[e]()}})}},8052:function(n,t,e){"use strict";var i=e(6154),r=e(9621),o=e(2190);let l=i.Z.create({baseURL:o.$f,withCredentials:!0}),a=async n=>{let{url:t,method:e,data:i={},headers:r={}}=n;try{let n=await l({method:e,url:t,data:i,headers:r});return n}catch(n){throw{err:n}}};t.Z=()=>({GET:n=>{let{url:t,...e}=n;return a({method:"GET",url:t+r.qs.stringURL(e.data,t)})},POST:n=>{let{...t}=n;return a({...t,method:"POST",data:t.data})},PUT:n=>{let{...t}=n;return a({...t,method:"PUT",data:t.data})},DELETE:n=>{let{...t}=n;return a({...t,method:"DELETE",data:t.data})}})},4346:function(n,t,e){"use strict";e.d(t,{I0:function(){return a},LT:function(){return o},Ms:function(){return i},N$:function(){return c},T4:function(){return u},Wb:function(){return p},YH:function(){return l},f4:function(){return d},kq:function(){return h},m5:function(){return f},rn:function(){return s},v2:function(){return g},wU:function(){return r}});let i="/challenges/basic-info",r="/challenges/my/ongoing",o="/challenges/available?lastSequenceIdx=-1&pageSize=100",l="/challenges/available",a="/challenges/my/end",c="/challenges/disadvantage/status",s="/challenges/detail",d="/challenges/community/recent",u="/challenges/joinable/check",f="/challenges",h="/challenges/reward",g="/roulette/winner",p="/roulette/signup-ticket"},7283:function(n,t,e){"use strict";e.d(t,{M:function(){return i}});let i=(n,t)=>{if("NaN"===n)return"-";if("number"==typeof(n=Number(n))){let e=String(n).split("."),i=Number(e[0]).toLocaleStr

1ing();return e.length>1&&t&&(i="".concat(i,".").concat(e[1].substr(0,t))),i}return"-"}},4677:function(n,t,e){"use strict";e.d(t,{Ji:function(){return u},U6:function(){return f}});var i=e(2729),r=e(9521);function o(){let n=(0,i._)(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translate3d(0, 1px, 0);\n  }\n"]);return o=function(){return n},n}function l(){let n=(0,i._)(["\n  from {\n    transform: translate3d(0, 1px, 0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n"]);return l=function(){return n},n}function a(){let n=(0,i._)(["\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1\n  }\n"]);return a=function(){return n},n}function c(){let n=(0,i._)(["\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 0.5\n  }\n"]);return c=function(){return n},n}function s(){let n=(0,i._)(["\n  from {\n    opacity: 1\n  }\n  to {\n    opacity: 0\n  }\n"]);return s=function(){return n},n}function d(){let n=(0,i._)(["\n  0% {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0px);\n  }\n"]);return d=function(){return n},n}(0,r.F4)(o()),(0,r.F4)(l());let u=(0,r.F4)(a());(0,r.F4)(c());let f=(0,r.F4)(s());(0,r.F4)(d())},6631:function(n,t,e){"use strict";e.r(t),e.d(t,{default:function(){return J}});var i=e(5893),r=e(7294),o=e(2729),l=e(1163),a=e(9521),c=e(6492),s=e(8052),d=function(n){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},e=(0,s.Z)(),[i,r]=n,o=async()=>{let n=await e.GET({url:i,data:r});if(n.data.error)throw n.data;return n.data};return(0,c.a)(n,o,{...t})},u=e(4346),f=e(2190),h=e(3469);let g=n=>"/auth/kakao?page=roulette&friendCode=".concat(n);var p=e(2786);let x=[(0,i.jsxs)(i.Fragment,{children:["해당 기능은 ",(0,i.jsx)("b",{children:"신규회원 전용"})," 기능입니다."]}),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("b",{children:"[필수]"})," 타임스프레드앱에서 ",(0,i.jsx)("b",{children:"카카오로 로그인"}),"하셔야 네이버페이를 받을 수 있습니다."]}),"네이버페이 당첨 시, 당첨된 금액 만큼 캐시를 지급해 드립니다.","이미 가입한 친구는 초대할 수 없습니다.","불법적이거나 비정상적인 방법으로 네이버페이 룰렛 참여 시, 캐시 회수 등 불이익이 발생할 수 있습니다."];function m(){let n=(0,o._)(["\n  display: flex;\n  margin-bottom: 8px;\n  color: #666;\n\n  p {\n    font-size: 13px;\n    line-height: 1.38;\n  }\n  span {\n    margin-right: 6px;\n  }\n"]);return m=function(){return n},n}var w=n=>{let{list:t}=n;return(0,i.jsxs)(b,{children:[(0,i.jsx)("span",{children:"-"}),(0,i.jsx)("p",{children:t})]})};let b=a.ZP.div.withConfig({componentId:"sc-30ee2c94-0"})(m());function v(){let n=(0,o._)(["\n  width: 100%;\n  padding: ",";\n  background-color: #f7f7f7;\n  > h2 {\n    font-size: 16px;\n    font-weight: bold;\n    color: #333;\n    margin-bottom: 14px;\n  }\n  > div {\n    height: 282px;\n  }\n"]);return v=function(){return n},n}var y=()=>{var n;let t=(null===(n=window)||void 0===n?void 0:n.innerHeight)<=880;return(0,i.jsxs)(j,{isViewHeightSmallerThanContent:t,children:[(0,i.jsx)("h2",{children:"유의사항"}),(0,i.jsx)("div",{children:x.map((n,t)=>(0,i.jsx)(w,{list:n},n+String(t)))})]})};let j=a.ZP.div.withConfig({componentId:"sc-ec7e3c79-0"})(v(),n=>n.isViewHeightSmallerThanContent?"16px 16px 80px":"16px 16px");var A=e(6528);function _(){let n=(0,o._)(["\n      @keyframes rotate {\n        from {\n          transform: rotate(300deg);\n        }\n        to {\n          transform: ",";\n        }\n      }\n\n      animation: rotate 3s;\n      animation-timing-function: ease-in-out;\n      animation-fill-mode: forwards;\n      animation-iteration-count: 1;\n    "]);return _=function(){return n},n}function k(){let n=(0,o._)(["\n  ","\n"]);return k=function(){return n},n}let C=(0,a.iv)(k(),n=>{let{isPlaying:t,rouletteStopDeg:e}=n;return t&&(0,a.iv)(_(),"rotate(calc(".concat(8," * 360deg + (60deg * ").concat(e,")))"))});function E(){let n=(0,o._)(["\n  margin-top: 45px;\n  margin-bottom: 50px;\n  width: 260px;\n  height: 260px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  @media (max-width: 350px) {\n    width: 240px;\n    height: 240px;\n  }\n\n  .back-image {\n    background-image: url('/image/roulette/[email protected]');\n    background-size: cover;\n    width: 100%;\n    height: 100%;\n    z-index: 5;\n    padding-bottom: 100%;\n    position: absolute;\n  }\n\n  .roulette {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    transform-origin: center;\n    transform: rotate(300deg);\n\n    @media (max-width: 350px) {\n      width: 237px;\n      height: 237px;\n    }\n\n    > img {\n      width: 90%;\n      height: 90%;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      z-index: ",";\n      transform: translate(-50%, -50%);\n    }\n\n    ","\n  }\n\n  .roulette-btn,\n  .pin-image {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .roulette-btn {\n    width: 30%;\n    height: 30%;\n    cursor: pointer;\n    z-index: ",";\n  }\n\n  .pin-image {\n    width: 36px;\n    height: 45px;\n    z-index: ",";\n    left: 50%;\n    top: -20px;\n    transform: translateX(-50%);\n  }\n"]);return E=function(){return n},n}var N=n=>{let{isPlaying:t,rouletteStopDeg:e,handleRoulette:r}=n;return(0,i.jsx)(T,{isPlaying:t,rouletteStopDeg:e,children:(0,i.jsxs)("div",{className:"back-image",children:[(0,i.jsx)("img",{className:"pin-image",src:"/_next/static/media/[email protected]",width:108,height:135,alt:"룰렛 핀",loading:"lazy",decoding:"async"}),(0,i.jsx)("div",{className:"roulette",children:(0,i.jsx)("img",{src:"/_next/static/media/[email protected]",width:798,height:798,alt:"룰렛",loading:"lazy",decoding:"async"})}),(0,i.jsx)("img",{className:"roulette-btn",src:"/_next/static/media/[email protected]",width:282,height:282,alt:"룰렛 버튼",loading:"lazy",decoding:"async",onClick:r})]})})};let T=a.ZP.div.withConfig({componentId:"sc-337d9d61-0"})(E(),A.kg.BASE,C,A.kg.RAISED,A.kg.FLOATING_INNER);var P=e(2261),S=e(6832);e(6268);var Z=e(7283);function z(){let n=(0,o._)(["\n  width: 100%;\n  height: 40px;\n  background-color: #f2f2f2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n\n  .swiper-container {\n    width: 100%;\n    height: 40px;\n    text-align: center;\n  }\n\n  .swiper {\n    width: 100%;\n    height: 40px;\n    text-align: center;\n  }\n\n  .swiper-slide {\n    display: flex;

1\n    align-items: center;\n  }\n\n  .slider-box {\n    font-size: 13px;\n    color: #333;\n    line-height: 40px;\n\n    .slider-box-content {\n      width: 100%;\n      align-items: center;\n    }\n    span {\n      font-weight: bold;\n      color: #009bff;\n    }\n  }\n"]);return z=function(){return n},n}var I=n=>{let{dataRouletteWinnerList:t}=n;return(0,i.jsx)(F,{children:(0,i.jsx)(P.tq,{loop:!0,allowTouchMove:!1,direction:"vertical",autoplay:{delay:1e3},speed:900,modules:[S.pt],children:null==t?void 0:t.map((n,t)=>(0,i.jsx)(P.o5,{className:"slider-box",children:(0,i.jsxs)("div",{className:"slider-box-content",children:[null==n?void 0:n.name,"님이 방금 네이버페이 ",(0,i.jsx)("span",{children:(0,Z.M)(null==n?void 0:n.reward,0)}),"을 받았어요"]})},n+String(t)))})})};let F=a.ZP.div.withConfig({componentId:"sc-68ddb386-0"})(z());function B(){let n=(0,o._)(["\n  width: 100%;\n  height: 38px;\n  background-color: #0027c7;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .img {\n    width: 20px;\n    height: 20px;\n    object-fit: contain;\n    margin-right: 2px;\n  }\n\n  > p {\n    margin-right: 4px;\n    font-size: 13px;\n    color: #ffffff;\n\n    > span {\n      font-weight: bold;\n    }\n  }\n"]);return B=function(){return n},n}var R=n=>{let{dataRouletteWinnerCount:t}=n;return(0,i.jsxs)(D,{children:[(0,i.jsx)("img",{className:"img",src:"/_next/static/media/[email protected]",width:60,height:60,alt:"사람아이콘",loading:"lazy",decoding:"async"}),(0,i.jsxs)("p",{children:["현재까지 네이버페이 받은 사람"," ",(0,i.jsxs)("span",{children:["총 ",(0,Z.M)(t,0),"명"]})]})]})};let D=a.ZP.section.withConfig({componentId:"sc-74ecf2a3-0"})(B());var L=e(9611);let M=n=>n?"룰렛 돌리고 네이버페이 받기":"네이버페이 받기";function O(){let n=(0,o._)(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 760px;\n  margin: 0 auto;\n  padding: 0 16px;\n  position: fixed;\n  width: 100%;\n  z-index: ",";\n  bottom: 16px;\n  justify-content: center;\n  Button {\n    width: 100%;\n    height: 48px;\n    font-weight: 500;\n  }\n"]);return O=function(){return n},n}var U=n=>{let{handleRoulette:t}=n,e=(0,h._)();return(0,i.jsx)(V,{children:(0,i.jsx)(L.Z,{type:"primary",onClick:t,children:M(e)})})};let V=a.ZP.div.withConfig({componentId:"sc-6fbe2f99-0"})(O(),A.kg.BUTTON_BAR);var H={src:"/_next/static/media/[email protected]",height:390,width:1080,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAMAAACZFr56AAAAIVBMVEVsc/VLTPtcUPFBJ+lTRvBSVvpcVfBONeZkTtNua+i+3vF3uO7jAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIUlEQVR4nAXBiQEAMAgCsQPFPvsPbMKxu+pdDHg+SImaLASpAFFEt6GMAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:3},W=e(8916);function G(){let n=(0,o._)(["\n  max-width: 760px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  > img {\n    width: 100%;\n    height: 100%;\n  }\n"]);return G=function(){return n},n}var X=()=>{let n=(0,h._)(),t=(0,p.Z)(),e=(0,l.useRouter)(),[o,a]=(0,r.useState)(!1),[c,s]=(0,r.useState)(3),x=()=>{var n;e.push(f.T5+g(null==e?void 0:null===(n=e.query)||void 0===n?void 0:n.code))},{mutate:m}=(0,W.Z)({handleSuccessEvent:()=>{a(!0),setTimeout(()=>{e.push("/roulette/reward")},4e3)},handleType:"roulette"}),w=()=>{if(t("CH_RouletteButton_Click",{button_type:"naverpay_get",status:n?"logined":"not_login"}),!n)return x();m()},{data:b,isLoading:v,isError:j}=d([u.v2]);return v||j?null:(0,i.jsxs)(Y,{children:[(0,i.jsx)("img",{src:H.src,width:H.width,height:H.height,alt:"룰렛 배너",loading:"lazy",decoding:"async"}),(0,i.jsx)(R,{dataRouletteWinnerCount:(null==b?void 0:b.count)||0}),(0,i.jsx)(I,{dataRouletteWinnerList:(null==b?void 0:b.list)||[]}),(0,i.jsx)(N,{isPlaying:o,rouletteStopDeg:c,handleRoulette:w}),(0,i.jsx)(y,{}),(0,i.jsx)(U,{handleRoulette:w})]})};let Y=a.ZP.div.withConfig({componentId:"sc-dd32ae3f-0"})(G()),q=()=>{let n=(0,h._)(),t=(0,p.Z)();return(0,r.useEffect)(()=>{t("CH_RoulettePage_View",{status:n?"logined":"not_login"})},[]),(0,i.jsx)(X,{})};var J=q;q.getInitialProps=async n=>({pageInfo:{isHeaderHidden:!0}})}},function(n){n.O(0,[9774,2888,179],function(){return n(n.s=8912)}),_N_E=n.O()}]);