https://utilzip.com/_next/static/chunks/5452.3fdf19b07e6ef2f7.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5452],{69174:(e,t,a)=>{a.d(t,{i:()=>s});var l=a(12115);function s(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:2e3,[t,a]=(0,l.useState)(!1),s=(0,l.useRef)(null);return{copy:(0,l.useCallback)(async t=>{try{let l=!1;if(navigator.clipboard&&navigator.clipboard.writeText&&(l=await navigator.clipboard.writeText(t).then(()=>!0,()=>!1)),!l){let e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select();let a=document.execCommand("copy");if(document.body.removeChild(e),!a)return!1}return a(!0),s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{a(!1),s.current=null},e),!0}catch{return!1}},[e]),copied:t}}},85452:(e,t,a)=>{a.r(t),a.d(t,{default:()=>_});var l=a(95155),s=a(12115),r=a(46339),n=a(69174);function i(e){return e.trim().toLowerCase().replace(/\s*\/\s*/g,"_").replace(/\s+/g,"_")}let o=(e,t)=>({l:e,v:t??i(e)}),c=[o("Meta"),o("Google"),o("TikTok"),o("Kakao"),o("Naver"),o("Toss"),o("당근","danggeun"),o("Instagram"),o("Facebook"),o("YouTube"),o("Criteo"),o("Mobon"),o("Twitter / X","x"),o("LinkedIn"),o("Pinterest"),o("Snapchat"),o("Reddit"),o("Threads"),o("카카오스토리","kakaostory"),o("LINE"),o("BAND"),o("Telegram"),o("Taboola"),o("Outbrain"),o("Dable"),o("쿠팡","coupang"),o("배민","baemin"),o("지그재그","zigzag"),o("무신사","musinsa"),o("오늘의집","ohouse"),o("Amazon"),o("Daum"),o("Bing"),o("Yahoo"),o("ZUM"),o("뉴스레터","newsletter"),o("Mailchimp"),o("Stibee"),o("Braze"),o("블로그","blog"),o("카페","cafe"),o("문자","sms"),o("QR 코드","qr"),o("오프라인","offline"),o("Direct")],m=[o("Meta Ads"),o("Google Ads"),o("SA360"),o("DV360"),o("CM360"),o("TikTok Ads"),o("카카오 모먼트","kakao_moment"),o("카카오 키워드","kakao_keyword"),o("네이버 검색광고","naver_sa"),o("네이버 브랜드검색","naver_brand_search"),o("네이버 GFA","naver_gfa"),o("Snapchat Ads"),o("LinkedIn Ads"),o("Pinterest Ads"),o("X Ads"),o("Criteo"),o("Mobon"),o("Taboola"),o("Outbrain"),o("Dable"),o("Mailchimp"),o("Stibee"),o("Braze"),o("수동 집행","manual")],u=[{label:"미디어",items:[o("페이드","paid"),o("온드","owned"),o("언드","earned"),o("브랜드 키워드","brand_keyword")]},{label:"채널",items:[o("소셜미디어","social"),o("검색엔진","search"),o("쇼핑","shopping"),o("이메일","email"),o("문자","sms"),o("푸시","push"),o("알림톡 푸시","alimtalk"),o("친구톡 푸시","chingutalk"),o("제휴","affiliate"),o("인플루언서","influencer"),o("레퍼럴","referral"),o("QR코드","qr"),o("오프라인","offline")]}],d=[{label:"타겟",items:[o("신규 발굴","prospecting"),o("리타겟팅","retargeting"),o("기존 고객","existing_customer"),o("풀퍼널","full_funnel"),o("없음","none")]},{label:"목적",items:[o("구매 전환","conversion"),o("트래픽","traffic"),o("브랜드 인지","awareness"),o("도달","reach"),o("동영상 조회","video_view"),o("참여","engagement"),o("리드 수집","lead_gen"),o("앱 설치","app_install"),o("앱 이벤트","app_event")]}],x=[{label:"미디어",items:[o("영상","video"),o("이미지","image"),o("혼합","mixed"),o("텍스트","text"),o("오디오","audio")]},{label:"표현",items:[o("싱글","single"),o("캐러셀","carousel"),o("컬렉션","collection"),o("슬라이드쇼","slideshow"),o("반응형","responsive"),o("다이나믹","dynamic"),o("리치미디어","rich_media"),o("HTML5"),o("플레이어블","playable")]}],p=[o("전체",""),o("남성","male"),o("여성","female")],g=["전체","10","20","30","40","50","60"];function h(e){let{items:t,value:a,onPick:s,label:r}=e;return(0,l.jsxs)("div",{className:"mt-2 flex gap-2",children:[r&&(0,l.jsx)("span",{className:"mt-1 w-10 shrink-0 text-[11px] text-gray-500",children:r}),(0,l.jsx)("div",{className:"flex flex-wrap gap-1.5",children:t.map(e=>{let t=a===e.v&&""!==e.v;return(0,l.jsx)("button",{type:"button",onClick:()=>s(t?"":e.v),className:`rounded-full px-2.5 py-1.5 text-xs font-medium transition ${t?"bg-accent text-white":"bg-gray-50 text-gray-600 hover:bg-gray-100"}`,children:e.l},e.l)})})]})}let b="mt-1 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent",v="text-[13px] text-gray-500";function j(){return(0,l.jsx)("span",{className:"ml-0.5 text-red-400",title:"필수 항목",children:"*"})}function f(e){let{text:t}=e;return(0,l.jsxs)("span",{className:"group relative ml-1 inline-flex align-middle p-2 -m-2",tabIndex:0,role:"button","aria-label":"설명 보기",children:[(0,l.jsx)("span",{className:"flex h-3.5 w-3.5 cursor-help items-center justify-center rounded-full bg-gray-200 text-[9px] font-semibold text-gray-500",children:"?"}),(0,l.jsx)("span",{className:"pointer-events-none invisible absolute bottom-full left-1/2 z-10 mb-1.5 w-64 -translate-x-1/2 roun

1ded-md bg-warm-800 px-2.5 py-1.5 text-xs font-normal leading-relaxed text-white opacity-0 transition group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100",children:t})]})}function _(){let[e,t]=(0,s.useState)(""),[a,o]=(0,s.useState)(""),[_,y]=(0,s.useState)(""),[N,k]=(0,s.useState)(""),[w,C]=(0,s.useState)(""),[S,T]=(0,s.useState)(""),[A,M]=(0,s.useState)(""),[F,L]=(0,s.useState)(""),[R,z]=(0,s.useState)(""),[P,D]=(0,s.useState)(""),[U,B]=(0,s.useState)("targeting"),[I,$]=(0,s.useState)(""),[E,G]=(0,s.useState)(""),[q,Z]=(0,s.useState)("전체"),[O,Q]=(0,s.useState)("전체"),[X,Y]=(0,s.useState)(""),[H,K]=(0,s.useState)(""),{copy:V,copied:J}=(0,n.i)(1e3),W=(0,s.useMemo)(()=>"keyword"===U?i(I):[E,[q,O].filter(e=>"전체"!==e).join("_"),i(X),i(H)].filter(Boolean).join("_"),[U,I,E,q,O,X,H]),ee=(0,s.useMemo)(()=>[N,w].map(i).filter(Boolean).join("|"),[N,w]),et=(0,s.useMemo)(()=>{let t=[];return e.trim()||t.push("URL"),a.trim()||t.push("소스"),_.trim()||t.push("매체"),ee||t.push("캠페인 이름"),t},[e,a,_,ee]),{result:ea,error:el}=(0,s.useMemo)(()=>{let t=e.trim();if(!t||!a.trim()||!_.trim()||!ee)return{result:null,error:null};let l=/^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//.test(t)?t:`https://${t}`;try{let e=new URL(l);for(let[t,l]of[["utm_source",i(a)],["utm_source_platform",i(S)],["utm_medium",i(_)],["utm_marketing_tactic",i(A)],["utm_campaign",ee],["utm_id",i(R)],["utm_term",W],["utm_creative_format",i(F)],["utm_content",i(P)]])l&&e.searchParams.set(t,l);return{result:e.toString(),error:null}}catch{return{result:null,error:"URL 형식이 올바르지 않습니다. 주소를 확인해 주세요."}}},[e,a,S,_,A,ee,R,W,F,P]);return(0,l.jsx)("div",{className:"w-full",children:(0,l.jsxs)("div",{className:"w-full rounded-2xl bg-white p-6 shadow-sm sm:p-8",children:[(0,l.jsxs)("div",{className:"grid gap-x-12 gap-y-5 md:grid-cols-2 md:items-start",children:[(0,l.jsxs)("div",{className:"md:col-span-2",children:[(0,l.jsxs)("label",{htmlFor:"utm-url",className:v,children:["URL",(0,l.jsx)(j,{})]}),(0,l.jsx)(f,{text:"UTM을 붙일 원본 페이지 주소. 프로토콜이 없으면 https://가 자동으로 붙고, 기존 쿼리 파라미터는 유지됩니다."}),(0,l.jsx)("input",{id:"utm-url",type:"text",value:e,onChange:e=>t(e.target.value),placeholder:"example.com/landing",className:b})]}),(0,l.jsxs)("div",{children:[(0,l.jsxs)("label",{htmlFor:"utm-source",className:v,children:["소스 (utm_source)",(0,l.jsx)(j,{})]}),(0,l.jsx)(f,{text:"트래픽이 시작된 곳(어디서 왔는가). 예: google, meta, newsletter"}),(0,l.jsx)("input",{id:"utm-source",type:"text",value:a,onChange:e=>o(e.target.value),placeholder:"google, meta",className:b}),(0,l.jsx)(h,{items:c,value:a,onPick:o})]}),(0,l.jsxs)("div",{children:[(0,l.jsxs)("label",{htmlFor:"utm-medium",className:v,children:["매체 (utm_medium)",(0,l.jsx)(j,{})]}),(0,l.jsx)(f,{text:"유입 방식\xb7채널 유형(어떻게 왔는가). 예: paid_social, email, cpc"}),(0,l.jsx)("input",{id:"utm-medium",type:"text",value:_,onChange:e=>y(e.target.value),placeholder:"paid_social",className:b}),u.map(e=>(0,l.jsx)(h,{label:e.label,items:e.items,value:_,onPick:y},e.label))]}),(0,l.jsxs)("div",{children:[(0,l.jsxs)("label",{htmlFor:"utm-campaign-name",className:v,children:["캠페인 (utm_campaign)",(0,l.jsx)(j,{})]}),(0,l.jsx)(f,{text:"캠페인 이름. 세트명을 함께 입력하면 캠페인명|세트명 형식으로 합쳐집니다."}),(0,l.jsx)("input",{id:"utm-campaign-name",type:"text",value:N,onChange:e=>k(e.target.value),placeholder:"캠페인명 (예: hotseller_2025q1)",className:b}),(0,l.jsx)("input",{type:"text","aria-label":"세트명",value:w,onChange:e=>C(e.target.value),placeholder:"세트명 (선택 — 예: broad_25_34, 캠페인명|세트명으로 합쳐짐)",className:b})]}),(0,l.jsxs)("div",{className:"grid gap-x-12 gap-y-5 md:col-span-2 md:grid-cols-2 md:items-start",children:[(0,l.jsxs)("div",{children:[(0,l.jsx)("label",{htmlFor:"utm-source-platform",className:v,children:"플랫폼 (utm_source_platform)"}),(0,l.jsx)(f,{text:"광고를 집행\xb7구매한 플랫폼. 예: google_ads, meta_ads, naver_sa"}),(0,l.jsx)("input",{id:"utm-source-platform",type:"text",value:S,onChange:e=>T(e.target.value),placeholder:"google_ads, meta_ads",className:b}),(0,l.jsx)(h,{items:m,value:S,onPick:T})]}),(0,l.jsxs)("div",{children:[(0,l.jsx)("label",{htmlFor:"utm-tactic",className:v,children:"전략 (utm_marketing_tactic)"}),(0,l.jsx)(f,{text:"타겟팅 전략과 캠페인 목적 구분. 예: retargeting_conversion, prospecting_traffic"}),(0,l.jsx)("input",{id:"utm-tactic",type:"text",value:A,onChange:e=>M(e.target.value),placeholder:"retargeting_purchase",className:b}),d.map(e=>(0,l.jsx)(h,{label:e.label,items:e.items,value:A,onPick:M},e.label))]}),(0,l.jsxs)("div",{children:[(0,l.jsx)("span",{className:v,children:"검색어/타겟팅 (utm_term)"}),(0,l.jsx)(f,{text:"검색 키워드 또는 타겟팅 조합. 타겟팅 모드는 성별_연령_관심사_지역을 자동 조합합니다. 예: male_25_34_fashion"}),(0,l.jsx)("div",{role:"radiogroup","aria-label":"utm_term 구성 방식",className:"mt-2 flex gap-1.5",children:["targeting","keyword"].map(e=>(0,l.jsx)("button",{type:"button",role:"radio","aria-checked":U===e,onClick:()=>B(e),className:`rounded-full px-2.5 py-1.5 text-xs font-medium transition ${U===e?"bg-accent text-white":"bg-gray-50 text-gray-600 hover:bg-gray-100"}`,children:"targeting"===e?"타겟팅":"키워드"},e))}),"keyword"===U?(0,l.jsx)("input",{type:"text","aria-label":"검색어",value:I,onChange:e=>$(e.target.value),placeholder:"male_25_34_fashion",className:b}):(0,l.jsxs)("div",{className:"mt-2 space-y-2",children:[(0,l.jsx)(h,{label:"성별",items:p,value:E,onPick:G}),(0,l.jsxs)("div",{className:"flex items-center gap-2",children:[(0,l.jsx)("span",{className:"w-10 shrink-0 text-[11px] text-gray-500",children:"연령"}),(0,l.jsx)("select",{"aria-label":"최소 연령",value:q,onChange:e=>Z(e.target.value),className:"h-9 rounded-lg border border-gray-200 bg-white px-2 text-xs text-gray-900 focus:outline-none focus:ring-2 focus:ring-accent",children:g.map(e=>(0,l.jsx)("option",{value:e,children:"전체"===e?"최소":e},e))}),(0,l.jsx)("span",{className:"text-xs text-gray-400",children:"~"}),(0,l.jsx)("select",{"aria-label":"최대 연령",value:O,onChange:e=>Q(e.target.value),className:"h-9 rounded-lg border border-gray-200 bg-white px-2 text-xs text-gray-900 focus:outline-none focus:ring-2 focus:ring-accent",children:g.map(e=>(0,l.jsx)("option",{value:e,children:"전체"===e?"최대":e},e))})]}),(0,l.jsxs)("div",{className:"flex items-center gap-2",children:[(0,l.jsx)("span",{className:"w-10 shrink-0 text-[11px] text-gray-500",children:"관심사"}),(0,l.jsx)("input",{type:"text","aria-label":"관심사",value:X,onChange:e=>Y(e.target.value),placeholder:"fashion, gaming",className:`${b} mt-0`})]}),(0,l.jsxs)("div",{className:"flex items-center gap-2",children:[(0,l.jsx)("span",{className:"w-10 shrink-0 text-[11px] text-gray-500",children:"지역"}),(0,l.jsx)("input",{type:"text","aria-label":"지역",value:H,onChange:e=>K(e.target.value),placeholder:"seoul, busan",className:`${b} mt-0`})]})]})]}),(0,l.jsxs)("div",{children:[(0,l.jsx)("label",{htmlFor:"utm-creative",className:v,children:"소재 형식 (utm_creative_format)"}),(0,l.jsx)(f,{text:"광고 소재의 형식 구분. 예: video_single, image_carousel"}),(0,l.jsx)("input",{id:"utm-creative",type:"text",value:F,onChange:e=>L(e.target.value),placeholder:"video_single",className:b}),x.map(e=>(0,l.jsx)(h,{label:e.label,items:e.items,value:F,onPick:L},e.label))]}),(0,l.jsxs)("div",{children:[(0,l.jsx)("label",{htmlFor:"utm-id",className:v,children:"캠페인 ID (utm_id)"}),(0,l.jsx)(f,{text:"광고 플랫폼\xb7GA4에서 캠페인을 식별하는 고유 ID(수동 캠페인 데이터 연결용)."}),(0,l.jsx)("input",{id:"utm-id",type:"text",value:R,onChange:e=>z(e.target.value),placeholder:"abc123",className:b})]}),(0,l.jsxs)("div",{children:[(0,l.jsx)("label",{htmlFor:"utm-content",className:v,children:"콘텐츠 (utm_content)"}),(0,l.jsx)(f,{text:"같은 캠페인 안에서 소재\xb7배치 위치를 구분(A/B 테스트). 예: banner_top, text_link"}),(0,l.jsx)("input",{id:"utm-content",type:"text",value:P,onChange:e=>D(e.target.value),placeholder:"banner_top, text_link",className:b})]})]}),el&&(0,l.jsx)("p",{className:"text-sm text-red-500 md:col-span-2",children:el})]}),!el&&et.length>0&&(0,l.jsxs)("p",{className:"mt-6 rounded-xl bg-gray-50 p-4 text-[13px] leading-relaxed text-gray-500",children:[(0,l.jsx)("span",{className:"text-red-400",children:"*"})," 표시된 필수 항목 중"," ",(0,l.jsx)("span",{className:"font-medium text-gray-700",children:et.join(" \xb7 ")})," ","항목이 비어 있어 추적 URL이 아직 만들어지지 않았습니다."]}),ea&&(0,l.jsxs)("div",{className:"mt-6",children:[(0,l.jsxs)("button",{type:"button",onClick:()=>V(ea),className:`group relative w-full rounded-xl p-4 pr-10 text-left transition ${J?"bg-accent-sub":"bg-gray-50 hover:bg-gray-100"}`,children:[(0,l.jsx)("span",{className:"text-[13px] text-gray-500",children:"추적 URL"}),(0,l.jsx)("p",{className:`mt-1 break-all font-mono text-sm ${J?"text-accent-hover":"text-gray-900"}`,children:ea}),J?(0,l.jsx)("span",{className:"absolute right-3 top-3 text-[11px] font-medium text-accent-hover",children:"복사됨"}):(0,l.jsx)(r.Td,{size:14,className:"absolute right-3 top-3 text-gray-300 transition group-hover:text-gray-500"})]}),(0,l.jsx)("button",{type:"button",onClick:()=>V(ea),className:"mt-4 inline-flex h-11 w-full items-center justify-center rounded-lg bg-accent px-6 text-sm font-medium text-white transition hover:bg-accent-hover active:scale-95 sm:w-auto",children:J?"복사됨":"복사"})]})]})})}}}]);