https://slw-6vy.pages.dev/_next/static/chunks/7013.295b667f188db061.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7013],{61020:(e,t,a)=>{a.d(t,{N:()=>r.N,P:()=>n.P});var r=a(60760),n=a(36870)},67013:(e,t,a)=>{a.r(t),a.d(t,{default:()=>b});var r=a(95155),n=a(11518),s=a.n(n),c=a(12115),l=a(61020),i=a(35695),o=a(82178),d=a(85690),u=a(9389),h=a(37654),p=a(9771);function b(){(0,i.useRouter)();let e=(0,c.useRef)(null),[t,a]=(0,c.useState)(!1),[n,b]=(0,c.useState)(0),[m,x]=(0,c.useState)(0),[f,g]=(0,c.useState)(1),[w,j]=(0,c.useState)(!1),[v,y]=(0,c.useState)(!0),[k,N]=(0,c.useState)({top:0,left:0,width:0,height:0}),E=(0,c.useCallback)(()=>{let t,a,r,n;let s=e.current;if(!s||!s.videoWidth||!s.videoHeight)return;let c=s.clientWidth,l=s.clientHeight,i=s.videoWidth/s.videoHeight;c/l>i?(a=l,r=(c-(t=l*i))/2,n=0):(t=c,r=0,n=(l-(a=c/i))/2);let o=1.2*t,d=1.2*a;N({top:n-(d-a)/2,left:r-(o-t)/2,width:o,height:d})},[]);(0,c.useEffect)(()=>{let t=e.current;return y(!0),t&&t.load(),window.addEventListener("resize",E),()=>window.removeEventListener("resize",E)},[E]),(0,c.useEffect)(()=>{let t=e.current;if(!t)return;let r=!1,n=()=>{a(!t.paused)};t.muted=!1;let s=function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(e){if(r)return;r=!0,t.muted=!0,j(!0)}t.play().catch(t=>{!e&&"object"==typeof t&&null!==t&&"name"in t&&"NotAllowedError"===t.name?s(!0):(console.warn("Auto-play failed:",t),a(!1))})},c=()=>{s(!1),t.removeEventListener("canplay",c)};return t.addEventListener("play",n),t.addEventListener("pause",n),t.readyState>=2?s(!1):t.addEventListener("canplay",c),()=>{t.removeEventListener("play",n),t.removeEventListener("pause",n),t.removeEventListener("canplay",c)}},[]);let L=()=>{let t=e.current;if(t){if(t.paused){let e=t.play();e&&"function"==typeof e.then&&e.catch(e=>console.warn("Play attempt failed:",e))}else t.pause()}},z=e=>{let t=Math.floor(e/60),a=Math.floor(e%60);return"".concat(t,":").concat(a.toString().padStart(2,"0"))};return(0,r.jsxs)("div",{className:"jsx-1bca5904e8a84fe8 relative z-0 w-full h-screen bg-black overflow-hidden",children:[(0,r.jsx)("video",{ref:e,src:"/0923.mp4",preload:"auto",autoPlay:!0,playsInline:!0,style:{transformOrigin:"center center",filter:"contrast(1.0) saturate(1.1) brightness(2.0)"},onLoadedMetadata:()=>{e.current&&(x(e.current.duration),y(!1),E())},onLoadedData:()=>{y(!1),E()},onLoadStart:()=>y(!0),onTimeUpdate:()=>{e.current&&b(e.current.currentTime)},onEnded:()=>a(!1),onError:()=>y(!1),onClick:L,className:"jsx-1bca5904e8a84fe8 absolute inset-0 w-full h-full object-contain scale-[1.2]"}),k.width>0&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{style:{top:"".concat(k.top,"px"),left:"".concat(k.left,"px"),width:"120px",height:"60px"},className:"jsx-1bca5904e8a84fe8 pointer-events-none absolute bg-black z-50"}),(0,r.jsx)("div",{style:{top:"".concat(k.top,"px"),left:"".concat(k.left+k.width-120,"px"),width:"120px",height:"60px"},className:"jsx-1bca5904e8a84fe8 pointer-events-none absolute bg-black z-50"})]}),(0,r.jsx)(l.N,{children:v&&(0,r.jsx)(l.P.div,{initial:{opacity:1},exit:{opacity:0},className:"absolute inset-0 bg-black flex items-center justify-center z-40",children:(0,r.jsx)("div",{className:"jsx-1bca5904e8a84fe8 text-white text-xl",children:"데이터의 노래 로딩 중..."})})}),!v&&(0,r.jsxs)("div",{className:"jsx-1bca5904e8a84fe8 absolute bottom-4 right-4 z-30 flex flex-col items-end gap-2",children:[(0,r.jsxs)("div",{className:"jsx-1bca5904e8a84fe8 flex items-center gap-2",children:[(0,r.jsx)("button",{onClick:L,className:"jsx-1bca5904e8a84fe8 flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-full bg-black/40 transition-colors hover:bg-black/60 backdrop-blur-sm",children:t?(0,r.jsx)(o.A,{className:"h-4 w-4 md:h-5 md:w-5 text-white"}):(0,r.jsx)(d.A,{className:"h-4 w-4 md:h-5 md:w-5 text-white translate-x-[0.5px]"})}),(0,r.jsx)("button",{onClick:()=>{if(e.current){e.current.currentTime=0,b(0);let t=e.current.play();t&&"function"==typeof t.then&&t.catch(e=>console.warn("Restart play failed:",e))}},className:"jsx-1bca5904e8a84fe8 flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-full bg-black/40 transition-colors hover:bg-black/60 backdrop-blur-sm",children:(0,r.jsx)(u.A,{className:"h-4 w-4 md:h-5 md:w-5 text-white"})})]}),(0,r.jsxs)("div",{className:"jsx-1bca5904e8a84fe8 flex flex-col items-end gap-1",children:[(0,r.jsxs)("span",{className:"jsx-1bca5904e8a84fe8 text-[10px] md:text-xs font-mono text-white/80 bg-black/30 px-2 py-0.5 rounded-full backdrop-blur-sm",children:[z(n)," / ",z(m)]}),(0,r.jsx)("input",{type:"range",min:0,max:m||0,value:n,onChange:t=>{let a=parseFloat(t.target.value);e.current&&(e.current.currentTime=a,b(a))},style:{background:"linear-gradient(to right, rgba(255,255,255,0.8) ".concat(m?n/m*100:0,"%, rgba(75,85,99,0.5) ").concat(m?n/m*100:0,"%)")},className:"jsx-1bca5904e8a84fe8 h-1.5 w-24 md:w-32 cursor-pointer appearance-none rounded-full bg-gray-700/50 backdrop-blur-sm"})]}),(0,r.jsxs)("div",{className:"jsx-1bca5904e8a84fe8 flex items-center gap-1.5",children:[(0,r.jsx)("button",{onClick:()=>{e.current&&(w?(e.current.muted=!1,e.current.volume=f||.5,j(!1)):(e.current.muted=!0,e.current.volume=0,j(!0)))},className:"jsx-1bca5904e8a84fe8 flex h-8 w-8 md:h-10 md:w-10 items-center justify-center rounded-full bg-black/30 transition-colors hover:bg-black/50 backdrop-blur-sm",children:w?(0,r.jsx)(p.A,{className:"h-3.5 w-3.5 md:h-4 md:w-4 text-white"}):(0,r.jsx)(h.A,{className:"h-3.5 w-3.5 md:h-4 md:w-4 text-white"})}),(0,r.jsx)("input",{type:"range",min:0,max:1,step:.1,value:w?0:f,onChange:t=>{let a=parseFloat(t.target.value);e.current&&(e.current.volume=a,e.current.muted=0===a,g(a),j(0===a))},style:{background:"linear-gradient(to right, rgba(255,255,255,0.8) ".concat((w?0:f)*100,"%, rgba(75,85,99,0.5) ").concat((w?0:f)*100,"%)")},className:"jsx-1bca5904e8a84fe8 h-1.5 w-16 md:w-24 cursor-pointer appearance-none rounded-full bg-gray-700/50 backdrop-blur-sm"})]})]}),(0,r.jsx)(s(),{id:"1bca5904e8a84fe8",children:'input[type="range"].jsx-1bca5904e8a84fe8::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;width:14px;

1height:14px;background:white;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;cursor:pointer}input[type="range"].jsx-1bca5904e8a84fe8::-moz-range-thumb{width:14px;height:14px;background:white;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;cursor:pointer;border:none}'})]})}}}]);