{line}
; }); } // ──────────────────────────────────────────────── // Main // ──────────────────────────────────────────────── function BlogWriter() { // Provider + API key const [provider, setProvider] = useState(() => localStorage.getItem(PROVIDER_STORAGE) || "gemini"); const [apiKey, setApiKey] = useState(""); const [apiKeySaved, setApiKeySaved] = useState(false); const [apiKeyLoading, setApiKeyLoading] = useState(true); const [bookmarkUrl, setBookmarkUrl] = useState(""); const [bookmarkCopied, setBookmarkCopied] = useState(false); useEffect(() => { const { key, provider: det } = readKeyFromUrlOrStorage(provider); if (det !== provider) setProvider(det); if (key) { setApiKey(key); setApiKeySaved(true); } setApiKeyLoading(false); }, []); useEffect(() => { if (apiKey && apiKeySaved) { setBookmarkUrl(`${window.location.origin}${window.location.pathname}#k=${encodeURIComponent(apiKey)}`); } else setBookmarkUrl(""); }, [apiKey, apiKeySaved]); function switchProvider(next) { if (next === provider) return; localStorage.setItem(PROVIDER_STORAGE, next); setProvider(next); const saved = localStorage.getItem(STORAGE_KEYS[next]) || ""; setApiKey(saved); setApiKeySaved(!!saved); } function copyBookmark() { if (!bookmarkUrl) return; const ok = () => { setBookmarkCopied(true); setTimeout(() => setBookmarkCopied(false), 2000); }; const fallback = () => { const ta = document.createElement("textarea"); ta.value = bookmarkUrl; ta.style.cssText = "position:fixed;top:0;left:0;opacity:0"; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); ok(); } catch (e) {} document.body.removeChild(ta); }; if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(bookmarkUrl).then(ok, fallback); } else fallback(); } // App state const [disease, setDisease] = useState("쇼그렌증후군"); const [customDisease, setCustomDis] = useState(""); const [topic, setTopic] = useState(""); const [keywords, setKeywords] = useState(""); const [subtopicTarget, setSubtopicTarget] = useState("5"); const [extraInstruction, setExtraInstruction] = useState(""); const [paperFile, setPaperFile] = useState(null); const [referenceMode, setReferenceMode] = useState("url"); // "url" | "text" const [referenceUrl, setReferenceUrl] = useState(""); const [referenceText, setReferenceText] = useState(""); const [paperText, setPaperText] = useState(""); const [loading, setLoading] = useState(false); const [loadingMsg, setLoadingMsg] = useState(""); const [result, setResult] = useState(null); const [error, setError] = useState(""); const [rawDebug, setRawDebug] = useState(""); const [copied, setCopied] = useState(false); const [htmlCopied, setHtmlCopied] = useState(false); const [activeTab, setActiveTab] = useState("preview"); const fileRef = useRef(); // ── 이미지 생성 상태 const [portrait, setPortrait] = useState(""); const [clinicName, setClinicName] = useState(() => localStorage.getItem("mediblog_clinic") || "이레한의원"); const [doctorName, setDoctorName] = useState(() => localStorage.getItem("mediblog_doctor") || "박석민 원장"); const [imageParagraphCount, setImageParagraphCount] = useState("6"); const [imageParagraphs, setImageParagraphs] = useState([]); const [imageStatus, setImageStatus] = useState("idle"); // idle | generating | done | error const [imageError, setImageError] = useState(""); const [imageProgress, setImageProgress] = useState(""); const [zipping, setZipping] = useState(false); const portraitRef = useRef(); // ── 대표 이미지 (AEO 썸네일) const [heroAspect, setHeroAspect] = useState("1:1"); const [hero, setHero] = useState(null); // { imageUrl, subject, prompt, aspectRatio } const [heroStatus, setHeroStatus] = useState("idle"); const [heroError, setHeroError] = useState(""); // ── 자유 프롬프트 이미지 const [customPrompt, setCustomPrompt] = useState(""); const [customAspect, setCustomAspect] = useState("1:1"); const [customStyle, setCustomStyle] = useState("photo"); const [customImages, setCustomImages] = useState([]); // [{ id, imageUrl, userPrompt, aspectRatio, style, status, error }] const [customGenerating, setCustomGenerating] = useState(false); useEffect(() => { const saved = localStorage.getItem("mediblog_portrait"); if (saved) setPortrait(saved); }, []); const finalDisease = disease === "직접 입력" ? customDisease : disease; const handleFile = (e) => { const f = e.target.files[0]; if (!f) return; if (f.type === "application/pdf" || f.name.endsWith(".pdf")) { if (f.size > 18 * 1024 * 1024) { setError("PDF가 18MB를 초과합니다."); return; } setPaperFile(f); setPaperText(""); setError(""); } else if (f.type.startsWith("text/") || f.name.endsWith(".txt")) { const r = new FileReader(); r.onload = (ev) => { setPaperText(ev.target.result); setPaperFile(null); setError(""); }; r.readAsText(f); } else { setError("PDF 또는 TXT 파일만 업로드 가능합니다."); } }; const removePaper = () => { setPaperFile(null); setPaperText(""); if (fileRef.current) fileRef.current.value = ""; }; const caller = () => provider === "claude" ? callClaude : callGemini; // 마크다운 → 네이버 블로그 에디터 친화 HTML (붙여넣기 시 서식 보존) function markdownToNaverHtml(md) { const esc = (s) => s.replace(/&/g, "&").replace(//g, ">"); const lines = md.split("\n"); const out = []; let inList = false; const flushList = () => { if (inList) { out.push(""); inList = false; } }; for (let raw of lines) { const line = raw.replace(/\r$/, ""); if (/^# /.test(line)) { flushList(); out.push(`${esc(line)}
`); } else if (/^A\./.test(line)) { flushList(); out.push(`${esc(line)}
`); } else if (line.trim() === "") { flushList(); out.push("${esc(line)}
`); } } flushList(); return out.join("\n"); } function handlePortraitUpload(e) { const f = e.target.files?.[0]; if (!f) return; if (!f.type.startsWith("image/")) { alert("이미지 파일만 업로드 가능합니다."); return; } if (f.size > 5 * 1024 * 1024) { alert("이미지가 너무 큽니다 (최대 5MB)."); return; } const r = new FileReader(); r.onload = () => { const dataUrl = r.result; setPortrait(dataUrl); try { localStorage.setItem("mediblog_portrait", dataUrl); } catch (err) { console.warn("포트레이트 localStorage 저장 실패:", err.message); } }; r.readAsDataURL(f); } function clearPortrait() { if (!confirm("저장된 인물 사진을 삭제하시겠습니까?\n삭제 후에도 '📥 백업' 버튼으로 미리 받아둔 파일이 있다면 다시 업로드할 수 있습니다.")) return; setPortrait(""); try { localStorage.removeItem("mediblog_portrait"); } catch (e) {} if (portraitRef.current) portraitRef.current.value = ""; } function backupPortrait() { if (!portrait) return; // data URL 에서 mime type 추출 (data:image/png;base64,... 또는 image/jpeg 등) const mimeMatch = portrait.match(/^data:([^;]+);base64,/); const mime = mimeMatch ? mimeMatch[1] : "image/png"; const ext = mime.split("/")[1] || "png"; const a = document.createElement("a"); a.href = portrait; a.download = `original-portrait-backup.${ext}`; document.body.appendChild(a); a.click(); a.remove(); } async function generateHeroOnly() { if (!result?.content) { setHeroError("먼저 블로그 글을 생성해주세요."); return; } if (!apiKey.trim() || provider !== "gemini") { setHeroError("이미지 생성은 Gemini API 키가 필요합니다."); return; } setHeroError(""); setHeroStatus("generating"); try { const h = await generateHeroImage({ apiKey: apiKey.trim(), blogText: result.content, title: result.meta?.title, keywords: (result.meta?.keywords || []).join(", "), aspectRatio: heroAspect, }); setHero(h); setHeroStatus("done"); } catch (err) { setHeroError(err.message); setHeroStatus("error"); } } async function generateAllImages() { if (!result?.content) { setImageError("먼저 블로그 글을 생성해주세요."); return; } if (!apiKey.trim() || provider !== "gemini") { setImageError("이미지 생성은 Gemini API 키가 필요합니다. 상단에서 Gemini를 선택하고 키를 저장해주세요."); return; } setImageError(""); setImageStatus("generating"); setImageParagraphs([]); setHero(null); setHeroStatus("idle"); setHeroError(""); try { localStorage.setItem("mediblog_clinic", clinicName); localStorage.setItem("mediblog_doctor", doctorName); } catch (e) {} try { // 0단계: 대표 이미지 생성 (AEO 썸네일) setImageProgress("0단계: AEO 대표 이미지 생성 중…"); setHeroStatus("generating"); try { const h = await generateHeroImage({ apiKey: apiKey.trim(), blogText: result.content, title: result.meta?.title, keywords: (result.meta?.keywords || []).join(", "), aspectRatio: heroAspect, }); setHero(h); setHeroStatus("done"); } catch (err) { console.warn("대표 이미지 생성 실패, 단락 이미지로 계속:", err.message); setHeroStatus("error"); setHeroError(err.message); } setImageProgress(`1단계: 블로그를 ${imageParagraphCount}개 단락으로 분할 중…`); const split = await splitBlogForImages({ apiKey: apiKey.trim(), blogText: result.content, paragraphCount: parseInt(imageParagraphCount, 10), }); setImageParagraphs(split); const working = [...split]; for (let i = 0; i < working.length; i++) { setImageProgress(`2단계: 이미지 생성 (${i + 1}/${working.length})…`); setImageParagraphs(prev => prev.map((p, idx) => idx === i ? { ...p, status: "generating" } : p)); try { const imgUrl = await generateParagraphImage({ apiKey: apiKey.trim(), paragraph: working[i], portrait: portrait || undefined, clinicName, doctorName, }); working[i] = { ...working[i], imageUrl: imgUrl, status: "completed" }; setImageParagraphs(prev => prev.map((p, idx) => idx === i ? { ...p, imageUrl: imgUrl, status: "completed" } : p)); } catch (err) { console.error(`단락 ${i + 1} 이미지 생성 실패:`, err); working[i] = { ...working[i], status: "error", error: err.message }; setImageParagraphs(prev => prev.map((p, idx) => idx === i ? { ...p, status: "error", error: err.message } : p)); if (/not\s*found|billing|permission|unsupported/i.test(err.message || "")) { setImageError(`모델 접근 실패: ${err.message}. ${IMAGE_GEN_MODEL}은 결제가 활성화된 API 키에서만 작동합니다.`); setImageStatus("error"); return; } } } setImageStatus("done"); setImageProgress(""); } catch (err) { setImageError(err.message); setImageStatus("error"); setImageProgress(""); } } async function retryImage(idx) { const p = imageParagraphs[idx]; if (!p) return; setImageParagraphs(prev => prev.map((x, i) => i === idx ? { ...x, status: "generating", error: undefined } : x)); try { const imgUrl = await generateParagraphImage({ apiKey: apiKey.trim(), paragraph: p, portrait: portrait || undefined, clinicName, doctorName, }); setImageParagraphs(prev => prev.map((x, i) => i === idx ? { ...x, imageUrl: imgUrl, status: "completed" } : x)); } catch (err) { setImageParagraphs(prev => prev.map((x, i) => i === idx ? { ...x, status: "error", error: err.message } : x)); } } async function handleDownloadZip() { const hasHero = hero && hero.imageUrl; const completedParagraphs = imageParagraphs.filter(p => p.status === "completed"); const completedCustoms = customImages.filter(c => c.status === "completed" && c.imageUrl); if (!hasHero && completedParagraphs.length === 0 && completedCustoms.length === 0) return; setZipping(true); try { const safeTitle = (result?.meta?.title || "blog-images").replace(/[^\w가-힣]+/g, "-").slice(0, 40); await downloadImagesAsZip(imageParagraphs, safeTitle, hasHero ? hero : null, completedCustoms); } catch (err) { alert("ZIP 다운로드 실패: " + err.message); } setZipping(false); } function downloadHeroOnly() { if (!hero?.imageUrl) return; const safeTitle = (result?.meta?.title || "hero").replace(/[^\w가-힣]+/g, "-").slice(0, 40); const a = document.createElement("a"); a.href = hero.imageUrl; a.download = `${safeTitle}_hero_${hero.aspectRatio.replace(":", "x")}.png`; document.body.appendChild(a); a.click(); a.remove(); } async function generateCustomImage() { const p = customPrompt.trim(); if (!p) { alert("이미지 프롬프트를 입력해주세요."); return; } if (!apiKey.trim() || provider !== "gemini") { alert("Gemini API 키가 필요합니다."); return; } const placeholderId = Date.now(); setCustomImages(prev => [...prev, { id: placeholderId, userPrompt: p, aspectRatio: customAspect, style: customStyle, status: "generating", imageUrl: null, }]); setCustomGenerating(true); try { const img = await generateFromPrompt({ apiKey: apiKey.trim(), prompt: p, aspectRatio: customAspect, style: customStyle, }); setCustomImages(prev => prev.map(x => x.id === placeholderId ? { ...x, ...img, status: "completed" } : x)); } catch (err) { setCustomImages(prev => prev.map(x => x.id === placeholderId ? { ...x, status: "error", error: err.message } : x)); alert("커스텀 이미지 생성 실패: " + err.message); } finally { setCustomGenerating(false); } } function removeCustomImage(id) { setCustomImages(prev => prev.filter(x => x.id !== id)); } function downloadCustomImage(img) { if (!img?.imageUrl) return; const safeTitle = (result?.meta?.title || "custom").replace(/[^\w가-힣]+/g, "-").slice(0, 40); const slug = (img.userPrompt || "image").replace(/[^\w가-힣]+/g, "-").slice(0, 30); const a = document.createElement("a"); a.href = img.imageUrl; a.download = `${safeTitle}_custom_${slug}_${img.aspectRatio.replace(":", "x")}.png`; document.body.appendChild(a); a.click(); a.remove(); } async function copyAsHtml() { if (!result?.content) return; const html = markdownToNaverHtml(result.content); try { if (navigator.clipboard && window.ClipboardItem) { await navigator.clipboard.write([ new ClipboardItem({ "text/html": new Blob([html], { type: "text/html" }), "text/plain": new Blob([result.content], { type: "text/plain" }), }), ]); } else { // Fallback: 숨김 div에서 선택 후 execCommand const div = document.createElement("div"); div.innerHTML = html; div.style.cssText = "position:fixed;top:0;left:0;opacity:0;pointer-events:none;"; document.body.appendChild(div); const range = document.createRange(); range.selectNodeContents(div); const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); document.execCommand("copy"); sel.removeAllRanges(); document.body.removeChild(div); } setHtmlCopied(true); setTimeout(() => setHtmlCopied(false), 2500); } catch (e) { alert("HTML 복사 실패: " + e.message); } } const generate = async () => { if (!apiKey.trim()) { setError(`${PROVIDERS[provider].keyLabel}를 먼저 저장해주세요.`); return; } if (!topic.trim()) { setError("블로그 주제를 입력해주세요."); return; } if (!finalDisease.trim()) { setError("질환명을 입력해주세요."); return; } setError(""); setResult(null); setRawDebug(""); setLoading(true); const hasPaper = !!(paperFile || paperText); const useRefUrl = referenceMode === "url" && referenceUrl.trim(); const useRefText = referenceMode === "text" && referenceText.trim(); const hasReference = useRefUrl || useRefText; // 참고 블로그가 있으면 Gemini URL Context 도구 활성화 (Claude는 직접 fetch 불가 → 텍스트 모드만 지원) const geminiTools = useRefUrl && provider === "gemini" ? [{ urlContext: {} }] : undefined; if (useRefUrl && provider === "claude") { setError("참고 블로그 URL 가져오기는 Gemini에서만 지원됩니다. Claude 사용 시 글 본문을 복사해서 '텍스트' 탭에 붙여넣어주세요."); setLoading(false); return; } let sourceBlock = ""; if (hasPaper) { sourceBlock += "\n[소스1 · 논문 PDF/텍스트] 첨부된 논문을 꼼꼼히 읽고, 실제 데이터(연구 대상자 수, 통계 수치, OR/HR, P값, %)를 정확히 추출하여 반영해 주세요."; } if (useRefUrl) { sourceBlock += `\n\n[소스2 · 참고할 기존 블로그 URL]\n${referenceUrl.trim()}\n위 URL에 접속해서 글을 꼼꼼히 읽은 뒤, 원본의 핵심 정보·흐름·사례는 유지하되 이레한의원 브랜드 보이스 DNA로 완전히 **새롭게 재작성**해주세요. 단순 복사·요약·번역이 아니라 4막 구조와 어조에 맞게 전면 재구성.`; } if (useRefText) { sourceBlock += `\n\n[소스2 · 참고할 기존 블로그 원문]\n${referenceText.trim()}\n\n위 기존 글의 핵심 정보·흐름·사례는 유지하되, 이레한의원 브랜드 보이스 DNA로 완전히 **새롭게 재작성**해주세요. 단순 복사·요약이 아니라 4막 구조와 어조에 맞게 전면 재구성.`; } if (!hasPaper && !hasReference) { sourceBlock = "\n[소스 없음] 첨부 논문이나 참고 블로그 없이 질환명·주제·키워드 정보만으로 작성합니다. 일반적 사실관계를 유지하되 출처 단언은 피하세요."; } const userPrompt = `질환명: ${finalDisease} 블로그 주제/핵심 증상: ${topic} 추가 타겟 키워드: ${keywords || "자동 선정"} ${sourceBlock} 소주제(H2)를 **정확히 ${subtopicTarget}개** 구성하고, 공백 제외 한글 2,000~2,500자로 작성해 주세요. 반드시 **5블록 구조**를 따르세요 — 블록1 환자사례 → 블록2 논문본론 → 블록3 임상해석 → 블록4 이레한의원 연결 → **블록5 (맨 마지막) 자주 묻는 질문 Q&A 3개**. Q&A는 블록2에 넣지 말고 반드시 **마지막 블록**으로 배치하세요. 3번째 Q&A 답변 직후, 글의 마지막 한 문장으로 "그 과정에 이레한의원이 동행하겠습니다." 라고 마무리하세요. 본문에 ** (굵게) 나 --- (구분선) 표시는 절대 사용하지 마세요. ${extraInstruction.trim() ? ` [이번 글 추가 지침 — 최우선 반영] ${extraInstruction.trim()}` : ""}`; try { let msgContent; if (paperFile) { const b64 = await toBase64(paperFile); msgContent = [ { type: "document", source: { type: "base64", media_type: "application/pdf", data: b64 } }, { type: "text", text: userPrompt }, ]; } else if (paperText) { msgContent = [{ type: "text", text: `[논문 원문]\n${paperText}\n\n[작성 요청]\n${userPrompt}` }]; } else { msgContent = [{ type: "text", text: userPrompt }]; } // 1차 생성 setLoadingMsg(`1단계: ${PROVIDERS[provider].short}로 블로그 초안 생성 중...`); const call = caller(); const raw1 = await call({ apiKey: apiKey.trim(), messages: [{ role: "user", content: msgContent }], tools: geminiTools }); setRawDebug(raw1); let { meta, content } = parseRaw(raw1); let charCount = countKorean(content); // 2차 보정 (범위 벗어난 경우) if (charCount < 2000 || charCount > 2500) { const dir = charCount < 2000 ? "늘려" : "줄여"; const diff = charCount < 2000 ? 2000 - charCount : charCount - 2500; setLoadingMsg(`2단계: 글자 수 보정 중... (현재 ${charCount}자 → 목표 2,000~2,500자)`); const fixPrompt = `아래는 작성된 블로그 본문입니다. 현재 공백 제외 한글 글자 수가 ${charCount}자입니다. 약 ${diff}자를 ${dir}서 2,000자~2,500자 범위에 맞게 수정해 주세요. 내용 흐름, 브랜드 보이스, 4막 구조, Q&A 3개는 그대로 유지하세요. 반드시 동일한