https://www.freecanvas.ai.kr/assets/ContactForm-0D5di7Ir.js

1import{r as i,j as e}from"./vendor-react-Hmgc0IJo.js";import{a as q}from"./index-CHgVLYjI.js";import{g as D,s as O}from"./inquiryService-Chy6fmci.js";import{f as $}from"./storageService-BSSwqqbq.js";import"./vendor-firebase-Dak2Hxsr.js";import"./firebase-FBroemQC.js";import"./firestoreService-BMfNrRSy.js";import"./detailHtml-B1LfqO6-.js";import"./userNotifications-BFSmaFGp.js";const B={subscription:"구독 관리 열기","account-deletion":"계정 삭제 화면 열기"},U=[{id:"cancel-subscription",category:"subscription",question:"구독 해지는 어디서 하나요?",answer:["화면 위쪽 「구독 관리」를 누른 뒤(휴대폰은 오른쪽 위 더보기 메뉴 → 「구독 관리」) 「구독 해지」를 누르면 됩니다.","해지해도 이미 결제한 기간이 끝날 때까지는 그대로 쓸 수 있고, 다음 결제부터 청구되지 않습니다.","환불 규정은 같은 화면의 「해지·환불 안내」에 있습니다."],action:"subscription"},{id:"payment-history",category:"subscription",question:"결제 내역은 어디서 확인하나요?",answer:["「구독 관리」 → 「결제 내역」에서 날짜·금액·결제 수단을 볼 수 있습니다.","영수증이 필요하면 결제 내역의 해당 건을 눌러 확인해 주세요."],action:"subscription"},{id:"square-image",category:"usage",question:"이미지를 1:1(정사각)로 만들 수 있나요?",answer:["카드뉴스 유형은 처음부터 1:1로 만들어집니다.","상세페이지 이미지는 각 이미지 카드의 ⋯ 메뉴 → 「↔️ 비율 확장」에서 1:1·4:5·16:9 등 원하는 비율로 배경을 넓혀 만들 수 있습니다(크레딧 사용)."]},{id:"change-font",category:"usage",question:"글꼴은 어디서 바꾸나요?",answer:['HTML 방식 상세페이지: 결과 화면에서 「미리보기」 또는 「편집」을 연 뒤 오른쪽 위 🎨에서 글꼴을 고르거나, 그 화면의 「AI에게 시키기」에 "글꼴을 나눔고딕으로 바꿔줘"처럼 적으면 됩니다. 바꾼 글꼴은 프로젝트에 저장됩니다.',"이미지 카드 목록 위의 「AI에게 시키기」는 이미지 전용이라 글꼴을 바꾸지 못합니다. 글꼴 요청을 넣으면 편집 화면으로 안내해 드립니다.","이미지 방식(글자가 그림에 들어간 경우)은 해당 이미지의 「텍스트 편집」 또는 「Canvas 편집」에서 글자마다 글꼴을 바꿉니다."]},{id:"delete-account",category:"account",question:"계정을 삭제(탈퇴)하려면 어떻게 하나요?",answer:["오른쪽 위 내 프로필(사진)을 누른 뒤 맨 아래 「계정 삭제」에서 직접 진행할 수 있습니다.","정기결제가 진행 중이면 먼저 「구독 관리」에서 해지해야 합니다. 삭제 뒤에는 작업 내역과 이미지가 모두 지워지고 되돌릴 수 없습니다.","결제·구독 기록은 법에 따라 일정 기간 보관되며, 계정을 식별할 수 있는 정보는 제거됩니다."],action:"account-deletion"}],z={subscription:"구독·결제",usage:"사용법",account:"계정"},S=3,P=5*1024*1024,K="precanvas-contact-draft",ee=({onClose:d,initialCategory:h,onOpenSubscriptionManagement:E,onRequestAccountDeletion:A})=>{const{user:s}=q(),[l,c]=i.useState({name:(s==null?void 0:s.displayName)||"",email:(s==null?void 0:s.email)||"",category:h||"other",subject:"",message:""}),[x,g]=i.useState([]),[u,f]=i.useState(!1),[b,I]=i.useState(!1),[j,o]=i.useState(null),[N,y]=i.useState([]),[L,v]=i.useState(!1),w=i.useRef(null),m=`${K}:${(s==null?void 0:s.uid)||"guest"}`,F=[{value:"refund",label:"환불 문의",description:"환불 및 결제 관련 문의"},{value:"subscription",label:"구독 문의",description:"구독 해지 및 변경 관련 문의"},{value:"exclusive",label:"익스클루시브 권한신청",description:"익스클루시브 권한 신청 및 승인 문의"},{value:"technical",label:"기술 지원",description:"기능 사용 및 오류 관련 문의"},{value:"feature",label:"기능 제안",description:"새로운 기능 제안 및 개선사항"},{value:"other",label:"기타",description:"기타 문의사항"}],T=i.useMemo(()=>({pending:"접수됨","in-progress":"확인 중",resolved:"답변 완료"}),[]);i.useEffect(()=>{c(t=>({...t,name:(s==null?void 0:s.displayName)||t.name,email:(s==null?void 0:s.email)||t.email}))},[s]),i.useEffect(()=>{try{const t=window.sessionStorage.getItem(m);if(t){const a=JSON.parse(t);c(r=>({...r,...a,category:h||a.category||r.category,name:(s==null?void 0:s.displayName)||a.name||r.name,email:(s==null?void 0:s.email)||a.email||r.email}))}}catch(t){console.warn("문의 임시 작성 내용 복원 실패:",t)}finally{w.current=m}},[m,h,s==null?void 0:s.displayName,s==null?void 0:s.email]),i.useEffect(()=>{if(!(w.current!==m||b))try{!!(l.subject.trim()||l.message.trim())?window.sessionStorage.setItem(m,JSON.stringify(l)):window.sessionStorage.removeItem(m)}catch(t){console.warn("문의 임시 작성 내용 저장 실패:",t)}},[m,l,b]),i.useEffect(()=>{if(!d)return;const t=a=>{a.key==="Escape"&&!u&&d()};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[u,d]),i.useEffect(()=>{const t=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=t}},[]),i.useEffect(()=>{if(!(s!=null&&s.uid)){y([]);return}(async()=>{try{v(!0);const a=await D(s.uid);y(a)}catch(a){console.error("문의 내역 불러오기 실패:",a)}finally{v(!1)}})()},[s==null?void 0:s.uid,b]);const R=t=>new Promise((a,r)=>{const n=new FileReader;n.onload=()=>a(n.result),n.onerror=r,n.readAsDataURL(t)}),C=t=>{const a=Array.from(t.target.files||[]);if(a.length===0)return;if(!s){o("이미지 첨부는 로그인 후 사용할 수 있습니다."),t.target.value="";return}const r=[...x,...a];if(r.length>S){o(`이미지는 최대 ${S}장까지 첨부할 수 있습니다.`),t.target.value="";return}if(r.find(p=>!p.type.startsWith("image/"))){o("이미지 파일만 첨부할 수 있습니다."),t.target.value="";return}if(r.find(p=>p.size>P)){o("이미지는 1장당 5MB 이하만 첨부할 수 있습니다."),t.target.value="";return}o(null),g(r),t.target.value=""},_=t=>{g(a=>a.filter((r,n)=>n!==t))},M=async t=>{if(t.preventDefault(),o(null),!l.name.trim()){o("이름을 입력해주세요.");return}if(!l.email.trim()){o("이메일을 입력해주세요.");return}if(!l.email.includes("@")){o("올바른 이메일 주소를 입력해주세요.");return}if(!l.subject.trim()){o("제목을 입력해주세요.");return}if(!l.message.trim()){o("문의 내용을 입력해주세요.");return}if(l.message.trim().length<10){o("문의 내용은 최소 10자 이상 입력해주세요.");return}if(x.length>0&&!(s!=null&&s.uid)){o("이미지 첨부는 로그인 후 사용할 수 있습니다.");return}f(!0);try{let a=[];if(s!=null&&s.uid&&x.length>0){const r=`draft_${Date.now()}`;a=await Promise.all(x.map(async n=>{const k=await R(n),p=await $(k,s.uid,r,n.name);return{name:n.name,storagePath:p.storagePath,contentType:n.type,size:n.size,downloadUrl:p.downloadUrl}}))}await O({userId:s==null?void 0:s.uid,name:l.name.trim(),email:l.email.trim(),category:l.category,subject:l.subject.trim(),message:l.message.trim(),attachments:a}),window.sessionStorage.removeItem(m),I(!0),g([]),c({name:(s==null?void 0:s.displayName)||"",email:(s==null?void 0:s.email)||"",category:h||"other",subject:"",message:""}),d&&setTimeout(()=>{d()},3e3)}catch(a){console.error("Error submitting inquiry:",a),o(a.message||"문의 제출 중 오류가 발생했습니다. 다시 시도해주세요.")}finally{f(!1)}};return e.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":"

1contact-form-title",className:"bg-white rounded-xl shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto",children:[e.jsx("div",{className:"p-4 sm:p-6 border-b border-slate-200 sticky top-0 bg-white z-10",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h2",{id:"contact-form-title",className:"text-xl sm:text-2xl font-bold text-slate-900",children:"고객센터 문의하기"}),e.jsx("p",{className:"text-sm text-slate-600 mt-2",children:"문의사항을 남겨주시면 확인 후 답변드리겠습니다."})]}),d&&e.jsx("button",{type:"button",onClick:d,"aria-label":"문의 창 닫기",title:"닫기",className:"flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700",children:e.jsx("svg",{className:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]})}),e.jsxs("div",{className:"p-4 sm:p-6 space-y-6 sm:space-y-8",children:[e.jsxs("div",{className:"flex items-start gap-3 rounded-xl border border-blue-200 bg-blue-50 p-4",children:[e.jsx("svg",{className:"w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})}),e.jsxs("div",{className:"text-sm text-blue-900",children:[e.jsx("p",{className:"font-semibold",children:"답변 안내"}),e.jsxs("p",{className:"mt-1 text-blue-800",children:["문의 답변은 접수된 순서대로 ",e.jsx("span",{className:"font-semibold",children:"순차적으로"})," 진행되며, ",e.jsx("span",{className:"font-semibold",children:"오후 1시 이후"}),"에 답변드립니다. 조금만 기다려 주시면 정성껏 답변드리겠습니다."]})]})]}),e.jsxs("details",{className:"group rounded-xl border border-slate-200 bg-slate-50","data-contact-faq":"1",children:[e.jsxs("summary",{className:"flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-semibold text-slate-800 [&::-webkit-details-marker]:hidden",children:[e.jsxs("span",{children:["자주 묻는 질문 먼저 확인하기 ",e.jsx("span",{className:"font-normal text-slate-500",children:"— 해지·결제 내역·글꼴·1:1·계정 삭제"})]}),e.jsx("span",{"aria-hidden":"true",className:"text-slate-400 transition-transform group-open:rotate-180",children:"⌄"})]}),e.jsx("div",{className:"space-y-3 border-t border-slate-200 px-4 py-3",children:U.map(t=>e.jsxs("details",{className:"rounded-lg bg-white px-3 py-2 ring-1 ring-inset ring-slate-200","data-contact-faq-item":t.id,children:[e.jsxs("summary",{className:"cursor-pointer list-none text-sm font-medium text-slate-900 [&::-webkit-details-marker]:hidden",children:[e.jsx("span",{className:"mr-2 rounded bg-slate-100 px-1.5 py-0.5 text-[11px] font-semibold text-slate-600",children:z[t.category]}),t.question]}),e.jsx("ul",{className:"mt-2 space-y-1 text-[13px] leading-relaxed text-slate-700",children:t.answer.map(a=>e.jsxs("li",{className:"flex gap-2",children:[e.jsx("span",{"aria-hidden":"true",className:"text-slate-400",children:"·"}),e.jsx("span",{children:a})]},a))}),(()=>{const a=t.action==="subscription"?E:t.action==="account-deletion"?A:void 0;return!t.action||!a?null:e.jsxs("button",{type:"button",onClick:a,"data-contact-faq-action":t.action,className:"mt-2 inline-flex h-8 items-center rounded-lg border border-slate-300 bg-white px-3 text-xs font-semibold text-slate-800 hover:bg-slate-50",children:[B[t.action]," →"]})})()]},t.id))})]}),b&&e.jsxs("div",{className:"bg-green-50 border border-green-200 rounded-xl p-4",children:[e.jsx("h3",{className:"text-lg font-bold text-green-900",children:"문의가 접수되었습니다"}),e.jsx("p",{className:"text-sm text-green-800 mt-1",children:"답변은 접수 순서대로 순차적으로 진행되며 오후 1시 이후에 안내드립니다. 로그인한 경우 아래에서 내 문의와 답변을 바로 확인할 수 있습니다."})]}),e.jsxs("form",{onSubmit:M,className:"space-y-6",children:[e.jsxs("div",{children:[e.jsxs("label",{className:"block text-sm font-medium text-slate-700 mb-2",children:["문의 유형 ",e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-3",children:F.map(t=>e.jsxs("label",{className:`relative flex items-start p-3 sm:p-4 border-2 rounded-lg cursor-pointer transition-all ${l.category===t.value?"border-blue-600 bg-blue-50":"border-slate-200 hover:border-blue-300 bg-white"}`,children:[e.jsx("input",{type:"radio",name:"category",value:t.value,checked:l.category===t.value,onChange:a=>c({...l,category:a.target.value}),className:"sr-only"}),e.jsxs("div",{className:"flex-1",children:[e.jsx("div",{className:"font-medium text-slate-900",children:t.label}),e.jsx("div",{className:"text-xs text-slate-600 mt-1",children:t.description})]})]},t.value))})]}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4",children:[e.jsxs("div",{children:[e.jsxs("label",{className:"block text-sm font-medium text-slate-700 mb-2",children:["이름 ",e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("input",{type:"text",value:l.name,onChange:t=>c({...l,name:t.target.value}),className:"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500",placeholder:"이름을 입력해주세요",required:!0})]}),e.jsxs("div",{children:[e.jsxs("label",{className:"block text-sm font-medium text-slate-700 mb-2",children:["이메일 ",e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("input",{type:"email",value:l.email,onChange:t=>c({...l,email:t.target.value}),className:"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500",placeholder:"이메일을 입력해주세요",required:!0})]})]}),e.jsxs("div",{children:[e.jsxs("label",{className:"block text-sm font-medium text-slate-700 mb-2",children:["제목 ",e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("input",{type:"text",value:l.subject,onChange:t=>c({...l,subject:t.target.value}),className:"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500",placeholder:"문의 제목을 입력해주세요",required:!0})]}),e.jsxs("div",{children:[e.jsxs("label",{className:"block text-sm font-medium text-slate-700 mb-2",children:["문의 내용 ",e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("textarea",{value:l.message,onChange:t=>c({...l,message:t.target.value}),rows:6,minLength:10,className:"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none",placeholder:"문의 내용을 자세히 적어주세요. 오류 상황이라면 화면 캡처를 함께 첨부해주셔도 좋습니다.",required:!0}),e.jsxs("p",{className:"text-xs text-slate-500 mt-1",children:[l.message.length,"자 / 최소 10자 이상"]})]}),e.jsxs("div",{children:[e.jsxs("label",{className:"block text-sm font-medium text-slate-700 mb-2",children:["이미지 첨부 ",s?e.jsx("span",{className:"text-slate-400",children:"(최대 3장)"}):e.jsx("span",{className:"text-amber-600",children:"(로그인 후 사용 가능)"})]}),e.jsxs("label",{className:`flex items-center justify-center w-full px-4 py-4 border border-dashed rounded-lg cursor-pointer transition-colors ${s?"border-slate-300 hover:border-blue-400 bg-slate-50":"border-slate-200 bg-slate-100 cursor-not-allowed"}`,children:[e.jsx("input",{type:"file",accept:"image/*",multiple:!0,onChange:C,className:"hidden",disabled:!s||u}),e.jsx("span",{className:"text-sm text-slate-600",children:"이미지 선택"})]}),x.length>0&&e.jsx("ul",{className:"mt-3 space-y-2",children:x.map((t,a)=>e.jsxs("li",{className:"flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-sm text-slate-700",children:[e.jsx("span",{className:"truncate pr-3",children:t.name}),e.jsx("button",{type:"button",onClick:()=>_(a),className:"text-rose-600 hover:text-rose-700",children:"제거"})]},`${t.name}-${a}`))})]}),j&&e.jsx("div",{className:"bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-800",children:j}),e.jsxs("div",{className:"flex gap-3 pt-2",children:[d&&e.jsx("button",{type:"button",onClick:d,disabled:u,className:"flex-1 px-6 py-3 bg-slate-100 text-slate-700 font-medium rounded-lg hover:bg-slate-200 transition-colors disabled:opacity-50",children:"취소"}),e.jsx("button",{type:"submit",disabled:u,className:"flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold rounded-lg hover:from-blue-700 hover:to-indigo-700 transition-all disabled:opacity-50",children:u?"접수 중...":"문의 보내기"})]})]}),s&&e.jsxs("section",{className:"border-t border-slate-200 pt-8",children:[e.jsx("div",{className:"flex items-center justify-between mb-4",children:e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-bold text-slate-900",children:"내 문의 내역"}),e.jsx("p",{className:"text-sm text-slate-600 mt-1",children:"내가 남긴 문의와 관리자 답변을 여기서 바로 확인할 수 있습니다."})]})}),L?e.jsx("div",{className:"text-sm text-slate-500",children:"문의 내역을 불러오는 중입니다..."}):N.length===0?e.jsx("div",{className:"rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-6 text-sm text-slate-500",children:"아직 남긴 문의가 없습니다."}):e.jsx("div",{className:"space-y-4",children:N.map(t=>{var a,r;return e.jsxs("article",{className:"rounded-xl border border-slate-200 p-4",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-2 mb-3",children:[e.jsx("span",{className:"px-2 py-1 rounded-full bg-slate-100 text-xs font-medium text-slate-700",children:T[t.status||"pending"]}),e.jsx("span",{className:"text-xs text-slate-500",children:t.createdAt.toLocaleStr

1ing("ko-KR")})]}),e.jsx("h4",{className:"font-bold text-slate-900",children:t.subject}),e.jsx("p",{className:"mt-2 text-sm text-slate-700 whitespace-pre-wrap",children:t.message}),!!((a=t.attachments)!=null&&a.length)&&e.jsx("div",{className:"mt-3 flex flex-wrap gap-2",children:t.attachments.map(n=>e.jsxs("a",{href:n.downloadUrl,target:"_blank",rel:"noreferrer",className:"inline-flex items-center rounded-lg bg-blue-50 px-3 py-2 text-xs font-medium text-blue-700 hover:bg-blue-100",children:["첨부 이미지 · ",n.name]},n.storagePath))}),e.jsxs("div",{className:"mt-4 rounded-xl bg-slate-50 p-4 border border-slate-200",children:[e.jsx("div",{className:"text-xs font-semibold text-slate-500 mb-2",children:"관리자 답변"}),(r=t.adminReply)!=null&&r.message?e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-sm text-slate-800 whitespace-pre-wrap",children:t.adminReply.message}),e.jsxs("p",{className:"mt-2 text-xs text-slate-500",children:[t.adminReply.repliedAt.toLocaleString("ko-KR"),t.adminReply.repliedByName?` · ${t.adminReply.repliedByName}`:""]})]}):e.jsx("p",{className:"text-sm text-slate-500",children:"아직 답변 전입니다. 확인 후 안내드릴게요."})]})]},t.id)})})]})]})]})};export{ee as default};