https://www.freecanvas.ai.kr/assets/SharedDetailView-ChB-1CpJ.js

1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/firestoreService-7NrzI4tJ.js","assets/index-CL-0Jw9t.js","assets/vendor-react-Hmgc0IJo.js","assets/index-BDOMsqD5.css","assets/vendor-firebase-Dak2Hxsr.js","assets/firebase-FBroemQC.js","assets/detailHtml-BUUBOfBA.js","assets/storageService-BSSwqqbq.js","assets/shareComments-BhcYGG95.js"])))=>i.map(i=>d[i]);
2import{_ as y}from"./index-CL-0Jw9t.js";import{r,j as t}from"./vendor-react-Hmgc0IJo.js";import{S as I,g as se,a as ae,b as F,d as re,n as le}from"./shareCommentRules-Bqb9G7Ec.js";const K="freecanvas-share-comment-name",ne=d=>!!d&&d.some(u=>{var a;return u.htmlOnly===!0||!!((a=u.htmlBody)!=null&&a.trim())}),oe=d=>{const u=(d.plan||[]).filter(i=>i.visible!==!1).map(i=>i.id),a=d.images||[];return(u.length>0?u.map(i=>a.find(c=>c.sectionId===i)).filter(i=>!!i):a).filter(i=>i.status==="completed")},ie=()=>{try{return window.localStorage.getItem(K)||""}catch{return""}},xe=({token:d,onOpenApp:u})=>{var z;const[a,h]=r.useState({status:"loading"}),i=r.useRef(null),[c,L]=r.useState([]),[w,k]=r.useState("idle"),[N,E]=r.useState(!1),[j,U]=r.useState(I),[$,X]=r.useState(()=>ie()),[v,D]=r.useState(""),[C,H]=r.useState(!1),[M,g]=r.useState(null),B=r.useRef(null);r.useEffect(()=>{let e=!1,s=null;return(async()=>{var o,b,V,G;try{const[{getPublicProjectByToken:P},{resolveGeneratedImageUrl:Z}]=await Promise.all([y(()=>import("./firestoreService-7NrzI4tJ.js").then(n=>n.ar),__vite__mapDeps([0,1,2,3,4,5,6,7])),y(()=>import("./storageService-BSSwqqbq.js").then(n=>n.s),__vite__mapDeps([7,4,5]))]),m=await P(d);if(e)return;if(!m){h({status:"error",message:"이 공유 링크는 만료되었거나 공개가 해제되었습니다. 링크를 보낸 분에게 다시 요청해 주세요."});return}const W=oe(m),O=new Map;if(await Promise.all(W.map(async n=>{try{const l=await Z(n);l&&O.set(n.sectionId,l)}catch(l){console.warn("공유 뷰어: 이미지 URL 확인 실패",n.sectionId,l)}})),e)return;const T=(m.plan||[]).filter(n=>n.visible!==!1),ee=(n,l)=>{var S;return((S=T.find(x=>x.id===n))==null?void 0:S.title)||l||n};if(ne(m.plan)){const{buildDetailPageHtml:n}=await y(async()=>{const{buildDetailPageHtml:x}=await import("./detailHtml-BUUBOfBA.js").then(te=>te.k);return{buildDetailPageHtml:x}},[]),l=n(T.map(x=>({section:x,imageSrc:O.get(x.id)})),{title:m.name||((o=m.productInfo)==null?void 0:o.name)||"상세페이지",maxWidth:860,brandName:(b=m.productInfo)==null?void 0:b.brandName,fontFamilyKorean:(G=(V=m.productInfo)==null?void 0:V.fontSelection)==null?void 0:G.korean,interactive:!0}),S=new Blob([l],{type:"text/html;charset=utf-8"});s=URL.createObjectURL(S),h({status:"ready",project:m,docUrl:s,images:[],sections:T.map(x=>({id:x.id,title:x.title||x.id}))})}else{const n=W.map(l=>({sectionId:l.sectionId,title:ee(l.sectionId,l.sectionTitle),url:O.get(l.sectionId)||""})).filter(l=>!!l.url);h({status:"ready",project:m,docUrl:null,images:n,sections:n.map(l=>({id:l.sectionId,title:l.title}))})}}catch(P){console.error("공유 뷰어 로드 실패:",P),e||h({status:"error",message:"상세페이지를 불러오지 못했습니다. 잠시 후 다시 시도해 주세요."})}})(),()=>{e=!0,s&&URL.revokeObjectURL(s)}},[d]);const R=r.useCallback(async()=>{k("loading");try{const{fetchPublicShareComments:e}=await y(async()=>{const{fetchPublicShareComments:o}=await import("./shareComments-BhcYGG95.js");return{fetchPublicShareComments:o}},__vite__mapDeps([8,4,5])),s=await e(d);L(s),k("idle")}catch(e){console.warn("공유 뷰어: 코멘트 불러오기 실패",e),k("error")}},[d]);r.useEffect(()=>{a.status==="ready"&&R()},[a.status,R]);const p=a.status==="ready"?a.sections:[],A=r.useMemo(()=>p.map(e=>e.id),[p]),_=r.useCallback(e=>{U(e&&A.includes(e)?e:I),E(!0),g(null),window.setTimeout(()=>{var s;return(s=B.current)==null?void 0:s.focus()},50)},[A]);r.useEffect(()=>{const e=s=>{if(!i.current||s.source!==i.current.contentWindow)return;const o=s.data;!o||typeof o!="object"||(o.type==="detailHtmlSectionClick"||o.type==="detailHtmlImageClick")&&typeof o.sectionId=="string"&&_(o.sectionId)};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[_]);const Y=async()=>

2{if(a.status!=="ready"||C)return;const e=le({sectionId:j,authorName:$,body:v},A);if(e.ok===!1){g({tone:"error",text:e.message});return}H(!0),g(null);try{const{submitPublicShareComment:s}=await y(async()=>{const{submitPublicShareComment:b}=await import("./shareComments-BhcYGG95.js");return{submitPublicShareComment:b}},__vite__mapDeps([8,4,5])),o=await s(d,e.value);L(b=>[...b,o]),D("");try{window.localStorage.setItem(K,e.value.authorName)}catch{}g({tone:"ok",text:"코멘트를 남겼어요. 작성자에게 알림이 갔어요."})}catch(s){g({tone:"error",text:s instanceof Error?s.message:"코멘트를 남기지 못했어요. 잠시 후 다시 시도해 주세요."})}finally{H(!1)}},q=r.useMemo(()=>se(c,p),[c,p]),J=r.useMemo(()=>{const e=new Map;return c.forEach(s=>{s.sectionId&&e.set(s.sectionId,(e.get(s.sectionId)||0)+1)}),e},[c]),f=r.useMemo(()=>{var e;return a.status==="ready"?a.project.name||((e=a.project.productInfo)==null?void 0:e.name)||"상세페이지":"공유된 상세페이지"},[a]);r.useEffect(()=>{const e=document.title;return document.title=`${f} · 프리캔버스 AI 공유`,()=>{document.title=e}},[f]);const Q=j===I?"페이지 전체":((z=p.find(e=>e.id===j))==null?void 0:z.title)||"페이지 전체";return t.jsxs("div",{className:"min-h-screen bg-slate-50",children:[t.jsx("header",{className:"sticky top-0 z-10 border-b border-slate-200 bg-white/95 backdrop-blur",children:t.jsxs("div",{className:"mx-auto flex max-w-5xl items-center justify-between gap-3 px-4 py-3",children:[t.jsxs("div",{className:"min-w-0",children:[t.jsx("div",{className:"text-[11px] font-semibold uppercase tracking-wide text-slate-400",children:"공유된 상세페이지 · 읽기 전용"}),t.jsx("h1",{className:"truncate text-base font-bold text-slate-900 sm:text-lg",children:f})]}),t.jsxs("div",{className:"flex flex-shrink-0 items-center gap-2",children:[a.status==="ready"&&t.jsxs("button",{type:"button",onClick:()=>N?E(!1):_(null),className:"rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-2 text-xs font-semibold text-indigo-800 hover:bg-indigo-100 sm:text-sm","aria-expanded":N,"data-share-comment-toggle":"1",children:["💬 코멘트",c.length>0?` ${c.length}`:" 남기기"]}),t.jsx("button",{type:"button",onClick:u,className:"hidden rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800 sm:inline-flex sm:text-sm",children:"프리캔버스 AI로 내 상세 만들기"})]})]})}),t.jsxs("main",{className:`mx-auto max-w-5xl px-2 py-4 transition-[padding] sm:px-4 sm:py-6 ${N?"lg:pr-[420px]":""}`,children:[a.status==="loading"&&t.jsx("div",{className:"rounded-2xl border border-slate-200 bg-white px-6 py-16 text-center text-sm text-slate-600",role:"status","aria-live":"polite",children:"상세페이지를 불러오는 중입니다…"}),a.status==="error"&&t.jsx("div",{className:"rounded-2xl border border-amber-200 bg-amber-50 px-6 py-12 text-center text-sm text-amber-800 break-keep",children:a.message}),a.status==="ready"&&t.jsxs("p",{className:"mb-2 text-center text-[11px] text-slate-500 break-keep",children:["💬 ",a.docUrl?"문서에서 섹션을 클릭하면":"이미지의 「코멘트」를 누르면"," 그 부분에 의견을 남길 수 있어요. 작성자에게 바로 알림이 갑니다."]}),a.status==="ready"&&a.docUrl&&t.jsx("iframe",{ref:i,title:f,src:a.docUrl,className:"h-[calc(100vh-9rem)] w-full rounded-2xl border border-slate-200 bg-white shadow-sm",sandbox:"allow-same-origin allow-scripts"}),a.status==="ready"&&!a.docUrl&&t.jsx("div",{className:"mx-auto max-w-[860px] overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm",children:a.images.length===0?t.jsx("div",{className:"px-6 py-12 text-center text-sm text-slate-500",children:"표시할 이미지가 아직 없습니다."}):a.images.map((e,s)=>{const o=J.get(e.sectionId)||0;return t.jsxs("div",{className:"relative","data-share-image-section":e.sectionId,children:[t.jsx("img",{src:e.url,alt:`${f} ${s+1}`,className:"block w-full",loading:s<2?"eager":"lazy"}),t.jsxs("button",{type:"button",onClick:()=>_(e.sectionId),className:"absolute right-2 top-2 rounded-full bg-slate-900/75 px-2.5 py-1 text-[11px] font-semibold text-white shadow hover:bg-slate-900",title:`「${e.title}」에 코멘트 남기기`,children:["💬 코멘트",o>0?` ${o}`:""]})]},`${s}-${e.sectionId}`)})}),t.jsx("p",{className:"mt-4 text-center text-[11px] text-slate-400 break-keep",children:"이 페이지는 작성자가 공개 링크로 공유한 상세페이지입니다. 내용과 이미지의 권리는 작성자에게 있습니다."}),t.jsx("div",{className:"mt-3 text-center sm:hidden",children:t.jsx("button",{type:"button",onClick:u,className:"rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800",children:"프리캔버스 AI로 내 상세 만들기"})})]}),N&&a.status==="ready"&&t.jsxs("aside",{className:"fixed inset-x-0 bottom-0 z-20 flex max-h-[80vh] flex-col rounded-t-2xl border-t border-slate-200 bg-white shadow-2xl lg:inset-y-0 lg:left-auto lg:right-0 lg:max-h-none lg:w-[400px] lg:rounded-none lg:border-l lg:border-t-0","aria-label":"코멘트","data-share-comment-panel":"1",children:[t.jsxs("div",{className:"flex items-center justify-between gap-2 border-b border-slate-200 px-4 py-3",children:[t.jsxs("div",{className:"text-sm font-bold text-slate-900",children:["💬 코멘트 ",c.length>0?c.length:""]}),t.jsx("button",{type:"button",onClick:()=>E(!1),className:"rounded-lg px-2 py-1 text-sm text-slate-500 hover:bg-slate-100","aria-label":"닫기",children:"✕"})]}),t.jsxs("div",{className:"border-b border-slate-100 px-4 py-3",children:[t.jsx("label",{className:"block text-[11px] font-semibold text-slate-600",children:"어느 부분인가요?"}),t.jsxs("select",{value:j,onChange:e=>U(e.target.value),className:"mt-1 w-full rounded-lg border border-slate-300 bg-white px-2 py-1.5 text-sm","data-share-comment-section":"1",children:[t.jsx("option",{value:I,children:"페이지 전체"}),p.map((e,s)=>t.jsxs("option",{value:e.id,children:[s+1,". ",e.title]},e.id))]}),t.jsxs("div",{className:"mt-2 flex gap-2",children:[t.jsx("input",{value:$,onChange:e=>X(e.target.value.slice(0,ae)),placeholder:"이름 (선택)",className:"w-32 flex-shrink-0 rounded-lg border border-slate-300 px-2 py-1.5 text-sm","aria-label":"이름","data-share-comment-name":"1"}

2),t.jsx("textarea",{ref:B,value:v,onChange:e=>D(e.target.value.slice(0,F)),placeholder:`「${Q}」에 남길 의견을 적어 주세요`,rows:3,className:"min-w-0 flex-1 resize-none rounded-lg border border-slate-300 px-2 py-1.5 text-sm","aria-label":"코멘트 내용","data-share-comment-body":"1"})]}),t.jsxs("div",{className:"mt-2 flex items-center justify-between gap-2",children:[t.jsxs("span",{className:"text-[11px] text-slate-400",children:[v.length,"/",F]}),t.jsx("button",{type:"button",onClick:()=>{Y()},disabled:C||!v.trim(),className:"rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-700 disabled:opacity-50","data-share-comment-submit":"1",children:C?"보내는 중…":"코멘트 남기기"})]}),M&&t.jsx("p",{className:`mt-2 text-[11px] break-keep ${M.tone==="ok"?"text-emerald-700":"text-red-600"}`,role:"status",children:M.text})]}),t.jsxs("div",{className:"min-h-0 flex-1 overflow-y-auto px-4 py-3",children:[w==="loading"&&c.length===0&&t.jsx("p",{className:"text-xs text-slate-500",children:"코멘트를 불러오는 중…"}),w==="error"&&c.length===0&&t.jsxs("p",{className:"text-xs text-slate-500",children:["코멘트를 불러오지 못했어요. ",t.jsx("button",{type:"button",onClick:()=>{R()},className:"underline",children:"다시 시도"})]}),w!=="loading"&&w!=="error"&&c.length===0&&t.jsx("p",{className:"text-xs text-slate-500 break-keep",children:"아직 코멘트가 없어요. 첫 의견을 남겨 보세요."}),q.map(e=>t.jsxs("section",{className:"mb-4",children:[t.jsxs("h4",{className:"mb-1.5 text-xs font-semibold text-slate-700 break-keep",children:[e.title," ",t.jsx("span",{className:"font-normal text-slate-400",children:e.comments.length})]}),t.jsx("ul",{className:"space-y-1.5",children:e.comments.map(s=>t.jsxs("li",{className:`rounded-lg border px-2.5 py-2 ${s.resolved?"border-slate-200 bg-slate-50 text-slate-500":"border-slate-200 bg-white text-slate-800"}`,children:[t.jsxs("div",{className:"flex items-center justify-between gap-2 text-[11px]",children:[t.jsx("span",{className:"font-semibold",children:s.authorName}),t.jsxs("span",{className:"text-slate-400",children:[re(s.createdAt),s.resolved?" · ✓ 반영됨":""]})]}),t.jsx("p",{className:"mt-0.5 whitespace-pre-wrap text-sm break-keep",children:s.body})]},s.id))})]},e.sectionId??"__page__"))]})]})]})};export{xe as default};