https://utilzip.com/_next/static/chunks/2477.003d799bae4916fe.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2477],{31166:(e,t,r)=>{r.d(t,{Ay:()=>h,S8:()=>d,oK:()=>u,t0:()=>o,tV:()=>c});var a=r(95155),n=r(12115);let i={primary:"bg-accent text-white shadow-cta hover:bg-accent-hover hover:shadow-cta-hover",secondary:"bg-white text-warm-600 border border-warm-200 shadow-card hover:border-accent hover:text-accent-deep hover:bg-accent-sub",ghost:"text-warm-600 hover:bg-warm-50",danger:"bg-red-500 text-white hover:bg-red-600"},l={sm:"h-8 px-3 text-sm",md:"h-10 px-4 text-sm",lg:"h-12 px-6 text-base"},s=(0,n.forwardRef)(function(e,t){let{variant:r="primary",size:n="md",loading:s=!1,disabled:o,className:c="",children:d,...u}=e;return(0,a.jsxs)("button",{ref:t,disabled:o||s,className:["rounded-md font-semibold transition-all duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none inline-flex items-center justify-center gap-2",i[r],l[n],c].join(" "),...u,children:[s&&(0,a.jsxs)("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",className:"animate-spin","aria-hidden":"true",children:[(0,a.jsx)("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"3",strokeOpacity:"0.3"}),(0,a.jsx)("path",{d:"M12 2a10 10 0 0 1 10 10",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round"})]}),d]})}),o="inline-flex items-center justify-center gap-2 min-h-[44px] px-5 rounded-xl bg-accent text-white text-sm font-bold whitespace-nowrap shadow-cta transition-all duration-200 hover:bg-accent-hover hover:shadow-cta-hover active:scale-95 disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed disabled:hover:bg-accent",c="inline-flex items-center justify-center gap-1 min-h-[36px] px-2.5 rounded-lg bg-accent-sub text-accent-deep text-xs font-semibold whitespace-nowrap border border-accent/25 transition hover:bg-accent hover:text-white",d="inline-flex items-center justify-center gap-2 min-h-[44px] px-5 rounded-xl bg-accent-sub text-accent-deep text-sm font-semibold whitespace-nowrap border border-accent/25 transition hover:bg-accent-tint disabled:opacity-40 disabled:cursor-not-allowed",u="inline-flex shrink-0 items-center gap-1.5 rounded-full px-4 py-1.5 bg-accent text-white text-xs font-bold shadow-cta transition hover:bg-accent-hover hover:shadow-cta-hover disabled:opacity-50 disabled:shadow-none",h=s},92477:(e,t,r)=>{r.r(t),r.d(t,{default:()=>k});var a=r(95155),n=r(94801),i=r(12115),l=r(46339),s=r(92531),o=r(16443),c=r(31166);let d={mode:"text",text:"\xa9 UtilZip",color:"#ffffff",stroke:!1,size:6,opacity:35,rotation:0,nx:.8,ny:.88,tile:!1,margin:4},u="utilzip-image-watermark-settings",h="image/jpeg,image/png,image/webp,image/avif,image/gif,image/bmp",x={webp:{mime:"image/webp",ext:"webp",label:"WebP"},jpeg:{mime:"image/jpeg",ext:"jpg",label:"JPG"},png:{mime:"image/png",ext:"png",label:"PNG"}},m=e=>e.replace(/\.[^.]+$/,"")||"image",f=null;async function p(){return f||(f=(async()=>{if("undefined"!=typeof document&&document.fonts)try{await Promise.all([document.fonts.load("bold 48px Pretendard"),document.fonts.load("600 48px Pretendard")]),await document.fonts.ready}catch{}})())}function g(e,t,r,a,n){let i,l,s;if(e.save(),e.globalAlpha=Math.max(0,Math.min(1,a.opacity/100)),"text"===a.mode){let r=a.text;if(!r.trim())return e.restore(),null;let n=Math.max(8,a.size/100*t);if(e.font=`bold ${n}px Pretendard, system-ui, sans-serif`,e.textAlign="center",e.textBaseline="middle",e.fillStyle=a.color,e.shadowColor="rgba(0,0,0,0.35)",e.shadowBlur=Math.max(1,.04*n),i=e.measureText(r).width||n,l=n,a.stroke){let t=a.color.replace("#",""),i=parseInt(t.slice(0,2),16)||0,l=parseInt(t.slice(2,4),16)||0;e.strokeStyle=.299*i+.587*l+.114*(parseInt(t.slice(4,6),16)||0)>140?"rgba(0,0,0,0.85)":"rgba(255,255,255,0.85)",e.lineWidth=Math.max(1,.05*n),e.lineJoin="round",s=()=>{e.strokeText(r,0,0),e.fillText(r,0,0)}}else s=()=>e.fillText(r,0,0)}else{if(!n)return e.restore(),null;let r=a.size/100*t,o=r*(n.height/n.width);i=r,l=o,s=()=>e.drawImage(n,-r/2,-o/2,r,o)}let o=a.rotation*Math.PI/180,c=(t,r)=>{e.save(),e.translate(t,r),o&&e.rotate(o),s(),e.restore()};if(a.tile){let n=Math.max(a.margin/100*t,.4*i),s=i+n,o=2.2*l+n,d=Math.hypot(i,l),u=0;for(let e=-d;e<r+d;e+=o){let r=u%2*(s/2);for(let a=-d;a<t+d;a+=s)c(a+r,e);u++}

1return e.restore(),null}let d=Math.abs(Math.cos(o)),u=Math.abs(Math.sin(o)),h=i/2*d+l/2*u,x=i/2*u+l/2*d,m=2*h>=t?t/2:Math.min(Math.max(a.nx*t,h),t-h),f=2*x>=r?r/2:Math.min(Math.max(a.ny*r,x),r-x);return c(m,f),e.restore(),{x:m-h,y:f-x,w:2*h,h:2*x}}async function w(e,t){let r=x[t].mime;return new Promise((a,n)=>{e.toBlob(e=>e?a(e):n(Error("encode-failed")),r,"jpeg"===t?.92:"webp"===t?.9:void 0)})}function b(e){let{value:t,onChange:r}=e;return(0,a.jsx)("div",{className:"flex items-center gap-1 rounded-full bg-warm-50 p-0.5",children:Object.keys(x).map(e=>(0,a.jsx)("button",{onClick:()=>r(e),"aria-pressed":t===e,className:`flex-1 rounded-full px-2 py-1 text-xs font-medium transition ${t===e?"bg-white text-accent-hover shadow-sm":"text-warm-500 hover:text-warm-700"}`,children:x[e].label},e))})}function v(e){let{label:t,value:r,min:n,max:i,suffix:l,onChange:s}=e;return(0,a.jsxs)("label",{className:"block",children:[(0,a.jsxs)("div",{className:"mb-1 flex items-center justify-between",children:[(0,a.jsx)("span",{className:"text-xs text-warm-500",children:t}),(0,a.jsxs)("span",{className:"text-xs font-medium tabular-nums text-warm-700",children:[r,l]})]}),(0,a.jsx)("input",{type:"range",min:n,max:i,value:r,onChange:e=>s(Number(e.target.value)),className:"w-full accent-accent"})]})}let y=()=>(0,a.jsx)("span",{className:"mx-0.5 h-5 w-px shrink-0 bg-warm-200","aria-hidden":"true"}),j=e=>{let{open:t}=e;return(0,a.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:`transition-transform ${t?"rotate-180":""}`,"aria-hidden":"true",children:(0,a.jsx)("path",{d:"m6 9 6 6 6-6"})})};function k(){let[e,t]=(0,i.useState)([]),[f,k]=(0,i.useState)(d),[N,C]=(0,i.useState)(null),[M,L]=(0,i.useState)(""),[R,P]=(0,i.useState)(null),[E,$]=(0,i.useState)("jpeg"),[S,B]=(0,i.useState)(""),[I,O]=(0,i.useState)(""),[z,U]=(0,i.useState)(!1),[W,_]=(0,i.useState)(!1),[A,T]=(0,i.useState)(null),[D,G]=(0,i.useState)(!1),[F,J]=(0,i.useState)(null),[V,H]=(0,i.useState)({w:0,h:0}),[K,Z]=(0,i.useState)({w:0,h:0}),[X,Y]=(0,i.useState)(!1),q=(0,i.useRef)(0),Q=(0,i.useRef)(null),ee=(0,i.useRef)(null),et=(0,i.useRef)(null),er=(0,i.useRef)(null),ea=(0,i.useRef)(null),en=(0,i.useRef)([]);en.current=e;let ei=(0,i.useRef)(new Set),el=(0,i.useRef)({nx:d.nx,ny:d.ny}),es=(0,i.useRef)(null),eo=(0,i.useRef)(null),ec=(0,i.useRef)(!1),ed=(0,i.useRef)(!1),eu=e.find(e=>e.id===R)??e[0]??null;(0,i.useEffect)(()=>{try{let e=localStorage.getItem(u);e&&k(t=>({...t,...JSON.parse(e)}))}catch{}},[]),(0,i.useEffect)(()=>{try{localStorage.setItem(u,JSON.stringify(f))}catch{}},[f]),(0,i.useEffect)(()=>{let e=ei.current;return()=>{ee.current?.bitmap.close?.(),N?.close?.(),e.forEach(e=>URL.revokeObjectURL(e)),e.clear()}},[]),(0,i.useEffect)(()=>{el.current={nx:f.nx,ny:f.ny}},[f.nx,f.ny]),(0,i.useEffect)(()=>{if(0===e.length){null!==R&&P(null);return}R&&e.some(e=>e.id===R)||P(e[0].id)},[e,R]);let eh=(0,i.useCallback)((e,t)=>{k(r=>({...r,[e]:t}))},[]),ex=(0,i.useCallback)(e=>{let r=e.filter(e=>e.type.startsWith("image/"));if(0===r.length)return void B("이미지 파일만 추가할 수 있어요. JPG\xb7PNG\xb7WebP 등을 올려주세요.");let a=r.filter(e=>e.size<=0x1e00000),i=r.length-a.length,l=Math.max(0,50-en.current.length),s=a.slice(0,l),o=[];if(i>0&&o.push(`30MB를 넘는 ${i}장은 제외했어요.`),a.length>s.length&&o.push(`한 번에 최대 50장까지 처리할 수 있어 ${a.length-s.length}장은 제외했어요.`),B(o.join(" ")),0===s.length)return;let c=0===en.current.length,d=s.map(e=>{let t=URL.createObjectURL(e);return ei.current.add(t),{id:`${e.name}-${e.size}-${crypto.randomUUID()}`,file:e,url:t}});if(t(e=>[...e,...d]),P(d[0].id),c){let e=s[0].type;$(e.includes("png")?"png":e.includes("webp")?"webp":"jpeg")}(0,n.s)("image_watermark_files_added",{file_count:s.length})},[]),em=(0,i.useCallback)(e=>{let r=en.current.find(t=>t.id===e);r&&(URL.revokeObjectURL(r.url),ei.current.delete(r.url)),t(t=>t.filter(t=>t.id!==e))},[]),ef=(0,i.useCallback)(async e=>{if(!e.type.startsWith("image/"))return void B("로고는 이미지 파일(PNG 권장)만 가능해요.");try{let t=await createImageBitmap(e,{imageOrientation:"from-image"});N?.close?.(),C(t),L(e.name),B("")}catch{B("로고 이미지를 불러오지 못했어요. 다른 PNG\xb7JPG 파일로 다시 시도해주세요.")}},[N]),ep=(0,i.useCallback)(()=>{let e=Q.current,t=ee.current;if(!e||!t||t.id!==eu?.id)return;let r=e.getContext("2d");if(!r)return;

1let a=e.width,n=e.height;r.clearRect(0,0,a,n),r.drawImage(t.bitmap,0,0,a,n);let i=g(r,a,n,{...f,nx:el.current.nx,ny:el.current.ny},N);es.current=i,i&&ed.current&&!f.tile&&(r.save(),r.strokeStyle="rgba(79,70,229,0.95)",r.setLineDash([6,4]),r.lineWidth=Math.max(1,a/480),r.strokeRect(i.x,i.y,i.w,i.h),r.restore())},[eu?.id,f,N]);(0,i.useEffect)(()=>{let e=!1,t=Q.current;if(eu&&t)return(async()=>{if(await p(),e)return;let r=ee.current;if(!r||r.id!==eu.id)try{let e=await createImageBitmap(eu.file,{imageOrientation:"from-image"});ee.current?.bitmap.close?.(),ee.current=r={id:eu.id,bitmap:e}}catch{e||B("이 이미지를 미리볼 수 없어요. 파일이 손상됐거나 지원하지 않는 형식일 수 있어요.");return}if(e||!r)return;let a=Math.min(1,1400/Math.max(r.bitmap.width,r.bitmap.height)),n=Math.round(r.bitmap.width*a),i=Math.round(r.bitmap.height*a);t.width!==n&&(t.width=n),t.height!==i&&(t.height=i),Z(e=>e.w===n&&e.h===i?e:{w:n,h:i}),ep()})(),()=>{e=!0}},[eu,ep]),(0,i.useEffect)(()=>{let e=et.current;if(!e)return;let t=()=>H({w:e.clientWidth,h:e.clientHeight}),r=new ResizeObserver(t);return r.observe(e),t(),()=>r.disconnect()},[e.length]);let eg=(e,t)=>{let r=Q.current,a=r.getBoundingClientRect();return{x:(e-a.left)*(r.width/a.width),y:(t-a.top)*(r.height/a.height)}},ew=e=>{let t=es.current;return!!t&&e.x>=t.x-8&&e.x<=t.x+t.w+8&&e.y>=t.y-8&&e.y<=t.y+t.h+8},eb=()=>{eo.current&&(eo.current=null,ed.current=ec.current,k(e=>({...e,nx:el.current.nx,ny:el.current.ny})))},ev=(0,i.useCallback)(async e=>{let t=await createImageBitmap(e,{imageOrientation:"from-image"}),r=document.createElement("canvas");r.width=t.width,r.height=t.height;let a=r.getContext("2d");return a?(a.drawImage(t,0,0),g(a,r.width,r.height,f,N),t.close?.(),r):(t.close?.(),null)},[f,N]),ey=()=>"logo"!==f.mode||N?"text"!==f.mode||!!f.text.trim()||(B("워터마크에 넣을 텍스트를 입력해주세요."),!1):(B("로고 이미지를 먼저 업로드해주세요."),!1),ej=(0,i.useCallback)(async()=>{if(G(!1),eu&&!z&&ey()){U(!0);try{await p();let e=await ev(eu.file);if(!e)throw Error("render");let t=await w(e,E),r=URL.createObjectURL(t);Object.assign(document.createElement("a"),{href:r,download:`${m(eu.file.name)}-watermark.${x[E].ext}`}).click(),URL.revokeObjectURL(r),O("✅ 이미지를 저장했어요"),(0,n.s)("image_watermark_download",{format:E,mode:f.mode,tile:f.tile})}catch{B("이미지 저장에 실패했어요. 손상됐거나 지원하지 않는 형식일 수 있어요.")}finally{U(!1)}}},[eu,z,ev,E,f.mode,f.tile]),ek=(0,i.useCallback)(async()=>{if(G(!1),0===e.length||z||!ey())return;U(!0);let t=0;try{await p();let{default:a}=await Promise.all([r.e(5376),r.e(7496)]).then(r.t.bind(r,7496,23)),i=new a,l=new Map;for(let r of e)try{let e=await ev(r.file);if(!e){t++;continue}let a=await w(e,E),n=`${m(r.file.name)}-watermark.${x[E].ext}`,s=l.get(n)??0;s>0&&(n=n.replace(/(\.[^.]+)$/,`_${s}$1`)),l.set(`${m(r.file.name)}-watermark.${x[E].ext}`,s+1),i.file(n,a)}catch{t++}let s=URL.createObjectURL(await i.generateAsync({type:"blob"}));Object.assign(document.createElement("a"),{href:s,download:"watermarked-images.zip"}).click(),URL.revokeObjectURL(s),O(`✅ ${e.length-t}장을 저장했어요`),t>0&&B(`${t}장은 처리하지 못했어요. 손상됐거나 지원하지 않는 형식일 수 있어요.`),(0,n.s)("image_watermark_zip_download",{file_count:e.length-t,failed:t})}catch{B("ZIP 저장에 실패했어요. 잠시 후 다시 시도해주세요.")}finally{U(!1)}},[e,z,ev,E]);(0,i.useEffect)(()=>{if(!I)return;let e=setTimeout(()=>O(""),3e3);return()=>clearTimeout(e)},[I]),(0,i.useEffect)(()=>{if(!W&&!D)return;let e=e=>{let t=e.target;t instanceof Element&&t.closest("[data-popover]")||(_(!1),G(!1))},t=()=>{_(!1),G(!1)};return document.addEventListener("mousedown",e),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{document.removeEventListener("mousedown",e),window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}},[W,D]);let eN=V.w||860,eC=V.h||520,eM=K.w?Math.min(eN/K.w,eC/K.h,1):1,eL=K.w?Math.max(1,Math.round(K.w*eM)):0,eR=(0,a.jsxs)("svg",{width:52,height:52,viewBox:"0 0 24 24",fill:"none",stroke:"#4F46E5",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[(0,a.jsx)("rect",{x:"3",y:"4",width:"18",height:"16",rx:"2"}),(0,a.jsx)("path",{d:"M3 15l4-4 3 3 4-4 3 3 4-4"}),(0,a.jsx)("circle",{cx:"8",cy:"8.5",r:"1.4"}),(0,a.jsx)("path",{d:"M8 13.5h8",strokeOpacity:"0.5"})]});if(0===e.length)return(0,a.jsxs)("div",{className:"space-y-3",children:[(0,a.jsx)(s.A,{onFiles:ex,accept:h,multiple:!0,icon:eR,label:"이미지 선택",hint:`JPG \xb7 PNG \xb7 WebP \xb7 AVIF \xb7 GIF \xb7 BMP \xb7 최대 50장 \xb7 장당 30MB`}),S&&(0,a.jsx)("p",{className:"text-sm text-red-500 text-center",children:S})]});let eP=window.innerWidth;return(0,a.jsxs)("div",{className:"flex flex-col gap-4",onDragEnter:e=>{Array.from(e.dataTransfer.types).includes("Files")&&(e.preventDefault(),q.current+=1,Y(!0))},onDragOver:e=>{Array.from(e.dataTransfer.types).includes("Files")&&e.preventDefault()},onDragLeave:e=>{Array.from(e.dataTransfer.types).includes("Files")&&(q.current-=1,q.current<=0&&(q.current=0,Y(!1)))},onDrop:e=>{e.preventDefault(),q.current=0,Y(!1);let t=Array.from(e.dataTransfer.files);t.length&&ex(t)},children:[(0,a.jsx)("div",{className:"flex justify-center pt-2 sm:pt-3",children:(0,a.jsxs)("div",{className:"inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-full border border-warm-200 bg-white px-2 py-1.5 shadow-sm",children:[(0,a.jsx)("div",{className:"flex shrink-0 items-center gap-1 rounded-full bg-warm-50 p-0.5",children:["text","logo"].map(e=>(0,a.jsx)("button",{onClick:()=>eh("mode",e),"aria-pressed":f.mode===e,className:`rounded-full px-3 py-1 text-xs font-medium transition ${f.mode===e?"bg-white text-accent-hover shadow-sm":"text-warm-500 hover:text-warm-700"}`,children:"text"===e?"텍스트":"로고"},e))}),(0,a.jsx)(y,{}),(0,a.jsxs)("button",{onClick:()=>eh("tile",!f.tile),"aria-pressed":f.tile,className:`inline-flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition ${f.tile?"bg-accent-sub text-accent-hover":"text-warm-600 hover:bg-warm-50"}`,children:[(0,a.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[(0,a.jsx)("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),(0,a.jsx)("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),(0,a.jsx)("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"}),(0,a.jsx)("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"})]}),"반복"]}

1),(0,a.jsx)("div",{className:"relative shrink-0","data-popover":"adjust",children:(0,a.jsxs)("button",{onClick:e=>{T(e.currentTarget.getBoundingClientRect()),_(e=>!e),G(!1)},"aria-haspopup":"menu","aria-expanded":W,className:"inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium text-warm-600 transition hover:bg-warm-50",children:[(0,a.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[(0,a.jsx)("circle",{cx:"12",cy:"12",r:"3"}),(0,a.jsx)("path",{d:"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"})]}),"조정",(0,a.jsx)(j,{open:W})]})}),(0,a.jsx)(y,{}),(0,a.jsx)("div",{className:"relative shrink-0","data-popover":"download",children:(0,a.jsxs)("button",{onClick:e=>{J(e.currentTarget.getBoundingClientRect()),G(e=>!e),_(!1)},"aria-haspopup":"menu","aria-expanded":D,disabled:z,className:c.oK,children:[z?"저장 중…":"다운로드",(0,a.jsx)(j,{open:D})]})})]})}),(0,a.jsx)("div",{className:"-mt-1 flex min-h-[46px] flex-wrap items-center justify-center gap-2",children:"text"===f.mode?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("input",{type:"text",value:f.text,onChange:e=>eh("text",e.target.value),placeholder:"워터마크 문구",className:"w-56 max-w-full rounded-full border border-warm-200 px-4 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"}),(0,a.jsxs)("div",{className:"flex items-center gap-1.5",children:[(0,a.jsx)("input",{type:"color",value:f.color,onChange:e=>eh("color",e.target.value),className:"h-8 w-8 cursor-pointer rounded-full border border-warm-200 bg-white p-0.5","aria-label":"색상"}),["#ffffff","#000000","#4f46e5","#ff3b30"].map(e=>(0,a.jsx)("button",{onClick:()=>eh("color",e),className:`h-6 w-6 rounded-full border transition ${f.color===e?"border-accent ring-2 ring-accent/30":"border-warm-200"}`,style:{backgroundColor:e},"aria-label":`색상 ${e}`},e))]}),(0,a.jsxs)("label",{className:"flex cursor-pointer items-center gap-1.5 rounded-full px-2 py-1 text-xs text-warm-600 hover:bg-warm-50",children:[(0,a.jsx)("input",{type:"checkbox",checked:f.stroke,onChange:e=>eh("stroke",e.target.checked),className:"h-3.5 w-3.5 accent-accent"}),"외곽선"]})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("button",{onClick:()=>ea.current?.click(),className:"inline-flex items-center gap-2 rounded-full border-2 border-dashed border-accent/40 px-4 py-1.5 text-sm text-accent-hover transition hover:bg-accent-sub/40",children:[(0,a.jsx)(l.JM,{size:15,className:"text-accent-hover"}),M?"로고 변경":"로고 업로드 (PNG 권장)"]}),M&&(0,a.jsx)("span",{className:"max-w-[200px] truncate text-xs text-warm-500",children:M})]})}),(0,a.jsxs)("div",{className:"relative mt-2 sm:mt-4",children:[(0,a.jsx)("div",{ref:et,className:"flex min-w-0 h-[calc(100vh_-_220px)] min-h-[360px] max-h-[820px] items-center justify-center overflow-hidden",children:(0,a.jsx)("canvas",{ref:Q,onPointerDown:e=>{if(f.tile||!eu)return;let t=eg(e.clientX,e.clientY);if(!ew(t))return;try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}let r=es.current,a=r.x+r.w/2,n=r.y+r.h/2;eo.current={dx:a-t.x,dy:n-t.y},ed.current=!0,ep()},onPointerMove:e=>{if(f.tile)return;let t=Q.current;if(!t)return;let r=eg(e.clientX,e.clientY);if(eo.current){let e=r.x+eo.current.dx,a=r.y+eo.current.dy;el.current={nx:Math.min(Math.max(e/t.width,0),1),ny:Math.min(Math.max(a/t.height,0),1)},ep();return}let a=ew(r);t.style.cursor=a?"move":"default",a!==ec.current&&(ec.current=a,ed.current=a,ep())},onPointerUp:eb,onPointerLeave:()=>{eb(),ec.current&&(ec.current=!1,ed.current=!1,ep())},style:{width:eL||void 0,height:"auto",maxWidth:"100%",touchAction:"none"},className:"block rounded-lg shadow-sm"})}),X&&(0,a.jsx)("div",{className:"pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-accent-sub/70",children:(0,a.jsx)("span",{className:"rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-accent shadow-lg",children:"놓으면 사진이 추가됩니다"})})]}),(0,a.jsx)("div",{className:"overflow-x-auto",children:(0,a.jsxs)("div",{className:"mx-auto flex w-max items-center gap-2 px-3 py-1",children:[e.map(e=>(0,a.jsxs)("div",{role:"button",tabIndex:0,onClick:()=>P(e.id),onKeyDown:t=>"Enter"===t.key&&P(e.id),className:`group relative h-16 w-16 shrink-0 cursor-pointer overflow-hidden rounded-lg border-2 transition ${eu?.id===e.id?"border-accent":"border-warm-200 hover:border-accent/50"}`,children:[(0,a.jsx)("img",{src:e.url,alt:e.file.name,className:"h-full w-full object-cover",decoding:"async"}),(0,a.jsx)("button",{onClick:t=>{t.stopPropagation(),em(e.id)},"aria-label":"삭제",className:"absolute right-0.5 top-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-warm-800/60 text-white opacity-100 transition md:h-4 md:w-4 md:opacity-0 md:group-hover:opacity-100 hover:bg-red-500",children:(0,a.jsxs)("svg",{width:"9",height:"9",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,a.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,a.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]},e.id)),(0,a.jsxs)("button",{onClick:()=>er.current?.click(),"aria-label":"사진 추가",className:"flex h-16 w-16 shrink-0 flex-col items-center justify-center gap-0.5 rounded-lg border-2 border-dashed border-warm-200 text-warm-400 transition hover:border-accent/50 hover:text-accent",children:[(0,a.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,a.jsx)("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),(0,a.jsx)("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]}),(0,a.jsx)("span",{className:"text-[10px]",children:"추가"})]})]})}),S&&(0,a.jsx)("p",{className:"text-sm text-red-500 text-center",children:S}),W&&A&&(0,a.jsxs)("div",{role:"menu","data-popover":"adjust",style:{position:"fixed",top:A.bottom+8,left:Math.min(Math.max(8,A.left),eP-248)},className:"z-50 w-60 space-y-3 rounded-xl border border-warm-200 bg-white p-4 shadow-lg",children:[(0,a.jsx)(v,{label:"불투명도",value:f.opacity,min:5,max:100,suffix:"%",onChange:e=>eh("opacity",e)}),(0,a.jsx)(v,{label:"크기",value:f.size,min:2,max:40,suffix:"%",onChange:e=>eh("size",e)}),(0,a.jsx)(v,{label:"회전",value:f.rotation,min:-90,max:90,suffix:"\xb0",onChange:e=>eh("rotation",e)}),f.tile&&(0,a.jsx)(v,{label:"간격",value:f.margin,min:0,max:20,suffix:"%",onChange:e=>eh("margin",e)})]}),D&&F&&(0,a.jsxs)("div",{role:"menu","data-popover":"download",style:{position:"fixed",top:F.bottom+8,left:Math.min(Math.max(8,F.right-224),eP-232)},className:"z-50 w-56 space-y-2.5 rounded-xl border border-warm-200 bg-white p-3 shadow-lg",children:[(0,a.jsx)(b,{value:E,onChange:$}),(0,a.jsx)("button",{onClick:ej,disabled:z,className:`${c.t0} w-full`,children:"이 사진 저장"}),e.length>=2&&(0,a.jsxs)("button",{onClick:ek,disabled:z,className:`${c.S8} w-full`,children:["전체 ZIP 저장 ",(0,a.jsxs)("span",{className:"text-[11px] text-warm-400",children:[e.length,"장"]})]})]}),(0,a.jsx)("input",{ref:er,type:"file",accept:h,multiple:!0,className:"hidden",onChange:e=>{ex(Array.from(e.target.files??[])),e.target.value=""},"aria-hidden":"true"}),(0,a.jsx)("input",{ref:ea,type:"file",accept:"image/*",className:"hidden",onChange:e=>{let t=e.target.files?.[0];t&&ef(t),e.target.value=""},"aria-hidden":"true"}),I&&(0,a.jsx)(o.A,{message:I,onClose:()=>O("")})]})}}}]);