{"version":3,"file":"UTMBuilder.DPbSCShd.mjs","names":["useState","useCallback","url"],"sources":["https:/framerusercontent.com/modules/3k3zXRTfooiOVp6qGf8f/qgpohZiiYl6wLUDBYzSe/UTMBuilder.js","https:/framerusercontent.com/modules/W6PW55bRZzkP7gnHqG1y/Zk1G66qewtP8oE83LjcA/UTMBuilder.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";export default function Test(){return /*#__PURE__*/_jsx(\"div\",{});}\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Test\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./UTMBuilder.map","import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useCallback}from\"react\";import styled,{css}from\"styled-components\";const ContentsWrapper=styled.section`\n    flex: 1;\n    width: 100%;\n    max-width: 676px;\n    display: flex;\n    padding-top: 60px;\n    flex-direction: column;\n    gap: 30px;\n    flex: 1 0 0;\n`;const UrlBoxWrapper=styled.div`\n    display: flex;\n    padding: 0px 15px;\n    flex-direction: column;\n    gap: 20px;\n`;const ContentTitle=styled.div`\n    color: #000;\n    font-family: Pretendard;\n    font-size: 21px;\n    font-style: normal;\n    font-weight: 700;\n`;const UrlBox=styled.div`\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n`;const UrlTitle=styled.div`\n    color: #000;\n    font-family: Pretendard;\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 160%;\n`;const UrlDescription=styled.div`\n    color: rgba(0, 0, 0, 0.50);\n    font-family: Pretendard;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 24px;\n`;const Divider=styled.div`\n    width: 100%;\n    height: 1px;\n    background-color: rgba(0, 0, 0, 0.10);\n`;const UtmsWrapper=styled.div`\n    display: flex;\n    flex-direction: column;\n    gap: 35px;\n`;const UtmBoxWrapper=styled.div`\n    display: flex;\n    padding: 0px 15px;\n    flex-direction: column;\n    gap: 10px;\n`;const Label=styled.label`\n    color: rgba(0, 0, 0, 0.80);\n    font-family: Pretendard;\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 160%;\n`;const LabelDescription=styled.div`\n    color: rgba(0, 0, 0, 0.50);\n    font-family: Pretendard;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 24px;\n`;const Input=styled.input`\n    color: rgba(0, 0, 0, 0.50);\n    display: flex;\n    width: 100%;\n    height: 45px;\n    padding: 0px 12px;\n    align-items: center;\n    gap: 10px;\n    border-radius: 10px;\n    border: 1px solid #E9E9E9;\n    background: #FFF;\n    font-family: Pretendard;\n    font-size: 14px;\n\n    ${props=>props.invalid&&css`\n            border-color: #ff4d4f;\n        `}\n\n    ::placeholder {\n        color: #C8C8C8;\n    }\n`;const StyledButton=styled.button`\n    width: 100%;\n    height: 40px;\n    padding: 4px 15px;\n    border-radius: 6px;\n    cursor: pointer;\n    background-color: #4A7CFE;\n    border: none;\n    color: #FFF;\n    font-family: Pretendard;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 24px;\n    box-shadow: none;\n\n    &:hover {\n        background-color: #4096ff;\n    }\n\n    &:disabled {\n        background-color: rgba(0, 0, 0, 0.04);\n        color: rgba(0, 0, 0, 0.25);\n        cursor: not-allowed;\n    }\n`;const ErrorText=styled.p`\n  color: #ff4d4f;\n  font-size: 15px;\n`;const RequiredMark=styled(Label)`\n    color: #ff4d4f;\n`;const HeaderWrapper=styled.div`\n    display:flex;\n    gap: 8px;\n    align-items: center;\n`;function UTMBuilder(){const[url,setUrl]=useState(\"\");const[source,setSource]=useState(\"\");const[medium,setMedium]=useState(\"\");const[campaign,setCampaign]=useState(\"\");const[term,setTerm]=useState(\"\");const[content,setContent]=useState(\"\");const[isUrlValid,setIsUrlValid]=useState(true);const initializeParams=useCallback(()=>{setSource(\"\");setMedium(\"\");setCampaign(\"\");setTerm(\"\");setContent(\"\");},[]);const handleUrlChange=useCallback(e=>{const value=e.target.value;setUrl(value);try{const url=new URL(value);console.log(url,url.origin);if(url.origin===\"null\"){setIsUrlValid(false);initializeParams();return;}const params=new URLSearchParams(url.search);setSource(params.get(\"utm_source\")||\"\");setMedium(params.get(\"utm_medium\")||\"\");setCampaign(params.get(\"utm_campaign\")||\"\");setTerm(params.get(\"utm_term\")||\"\");setContent(params.get(\"utm_content\")||\"\");if(!isUrlValid){setIsUrlValid(true);}}catch(err){setIsUrlValid(false);initializeParams();}},[isUrlValid,initializeParams]);const handleSourceChange=useCallback(e=>{setSource(e.target.value);},[]);const handleMediumChange=useCallback(e=>{setMedium(e.target.value);},[]);const handleCampaignChange=useCallback(e=>{setCampaign(e.target.value);},[]);const handleTermChange=useCallback(e=>{setTerm(e.target.value);},[]);const handleContentChange=useCallback(e=>{setContent(e.target.value);},[]);const generateUTMUrl=()=>{if(url===\"\"){return;}const urlObj=new URL(url);const params=new URLSearchParams(urlObj.search);if(source)params.set(\"utm_source\",source);if(medium)params.set(\"utm_medium\",medium);if(campaign)params.set(\"utm_campaign\",campaign);if(term)params.set(\"utm_term\",term);if(content)params.set(\"utm_content\",content);return`${urlObj.origin}${urlObj.pathname}${params.size>0?\"?\":\"\"}${params}${urlObj.hash}`;};return /*#__PURE__*/_jsxs(ContentsWrapper,{children:[/*#__PURE__*/_jsx(UrlBoxWrapper,{children:/*#__PURE__*/_jsxs(UrlBox,{children:[/*#__PURE__*/_jsxs(HeaderWrapper,{children:[/*#__PURE__*/_jsxs(UrlTitle,{children:[/*#__PURE__*/_jsx(RequiredMark,{children:\"*\"}),/*#__PURE__*/_jsx(\"span\",{children:\" 랜딩페이지 주소:\"})]}),/*#__PURE__*/_jsx(UrlDescription,{children:\"유입 경로 트래킹을 위한 웹사이트(랜딩페이지) 주소를 입력해주세요.\"})]}),/*#__PURE__*/_jsx(Input,{type:\"text\",value:url,onChange:handleUrlChange,invalid:!isUrlValid,placeholder:\"https://www.recatch.cc/ko\"}),!isUrlValid&&/*#__PURE__*/_jsx(ErrorText,{children:\"올바른 URL을 입력해 주세요\"})]})}),/*#__PURE__*/_jsxs(UtmsWrapper,{children:[/*#__PURE__*/_jsxs(UtmBoxWrapper,{children:[/*#__PURE__*/_jsxs(HeaderWrapper,{children:[/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(RequiredMark,{children:\"* \"}),/*#__PURE__*/_jsx(Label,{children:\"utm_source (유입 채널):\"})]}),/*#__PURE__*/_jsx(LabelDescription,{children:\"어떤 공간에서 잠재고객이 랜딩 페이지를 발견하나요?\"})]}),/*#__PURE__*/_jsx(Input,{type:\"text\",value:source,placeholder:\"facebook, google, naver, newsletter, youtube, kakao 등\",onChange:handleSourceChange})]}),/*#__PURE__*/_jsxs(UtmBoxWrapper,{children:[/*#__PURE__*/_jsxs(HeaderWrapper,{children:[/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(RequiredMark,{children:\"* \"}),/*#__PURE__*/_jsx(Label,{children:\"utm_medium (유입 매체):\"})]}),/*#__PURE__*/_jsx(LabelDescription,{children:\"어떤 매체를 통해 방문자가 유입되나요?\"})]}),/*#__PURE__*/_jsx(Input,{type:\"text\",value:medium,placeholder:\"email, blog, display, cpc, open_talk 등\",onChange:handleMediumChange})]}),/*#__PURE__*/_jsxs(UtmBoxWrapper,{children:[/*#__PURE__*/_jsxs(HeaderWrapper,{children:[/*#__PURE__*/_jsx(Label,{children:\"utm_campaign (캠페인명, 서비스명, 상품명):\"}),/*#__PURE__*/_jsx(LabelDescription,{children:\"어떤 캠페인을 통해 방문자가 유입되나요?\"})]}),/*#__PURE__*/_jsx(Input,{type:\"text\",value:campaign,placeholder:\"2023_black_friday, spring_sale, product_a 등\",onChange:handleCampaignChange})]}),/*#__PURE__*/_jsxs(UtmBoxWrapper,{children:[/*#__PURE__*/_jsxs(HeaderWrapper,{children:[/*#__PURE__*/_jsx(Label,{children:\"utm_content (소재):\"}),/*#__PURE__*/_jsx(LabelDescription,{children:\"동일한 캠페인에서 소재가 여러 개일 경우, 구분하기 위한 맥락을 입력해주세요.\"})]}),/*#__PURE__*/_jsx(Input,{type:\"text\",value:content,placeholder:\"buy_now, red_color_image 등\",onChange:handleContentChange})]}),/*#__PURE__*/_jsxs(UtmBoxWrapper,{children:[/*#__PURE__*/_jsxs(HeaderWrapper,{children:[/*#__PURE__*/_jsx(Label,{children:\"utm_term (타겟 검색어):\"}),/*#__PURE__*/_jsx(LabelDescription,{children:\"검색 광고 시 사용되는 검색어를 입력해주세요.\"})]}),/*#__PURE__*/_jsx(Input,{type:\"text\",value:term,placeholder:\"startup, smb, enterprise 등\",onChange:handleTermChange})]})]}),/*#__PURE__*/_jsxs(ButtonWrapper,{children:[/*#__PURE__*/_jsx(Label,{style:{color:\"#4A7CFE\"},children:\"생성된 UTM 링크:\"}),/*#__PURE__*/_jsx(UrlPreview,{disabled:true,value:isUrlValid?generateUTMUrl():\"\"}),/*#__PURE__*/_jsx(StyledButton,{onClick:()=>navigator.clipboard.writeText(generateUTMUrl()),disabled:!isUrlValid||url===\"\",children:\"링크 복사하기\"})]})]});}export default UTMBuilder;const ButtonWrapper=styled.div`\n    display:flex;\n    flex-direction: column;\n    gap: 8px;\n    background: #F2F6FF;\n    padding: 18px;\n    border: solid;\n    border-color: #4A7CFE;\n    border-radius: 18px;\n    margin-top: 15px;\n\n\n`;const UrlPreview=styled(Input)`\n    border-radius: 10px;\n    border: 1px solid var(--colorBorderSecondary, #E9E9E9);\n    background: #FFF;\n\n`;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"UTMBuilder\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./UTMBuilder.map"],"mappings":"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"}