feat: 도구 쇼케이스 페이지 + 네이버 블로그 AI 자동화 툴
- 사이드바 "이베이 부품 검색" → "여긴 뭐 만들어요?" (DEMO 배지, /tools) - /tools 쇼케이스: 완성형 레퍼런스 데모 카드 그리드 + 상담 CTA - /tools/naver-blog: 주제·키워드·형식·톤·분량 선택 → AI 블로그 글 자동 생성 - 결과 3탭 (글 미리보기·SEO 정보·이미지 가이드) + 전체 복사 - Claude API 연동 SEO 최적화 프롬프트 + fallback 지원 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
65
app/api/tools/naver-blog/generate/route.ts
Normal file
65
app/api/tools/naver-blog/generate/route.ts
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
import { NextResponse } from 'next/server';
|
||||||
|
import { generateBlogPost } from '@/lib/blog-tools/generator';
|
||||||
|
import type { BlogStyle, BlogTone, BlogLength } from '@/lib/blog-tools/types';
|
||||||
|
|
||||||
|
export const maxDuration = 60;
|
||||||
|
|
||||||
|
const VALID_STYLES: BlogStyle[] = ['informational', 'review', 'howto', 'listicle', 'comparison', 'story'];
|
||||||
|
const VALID_TONES: BlogTone[] = ['professional', 'friendly', 'casual', 'formal'];
|
||||||
|
const VALID_LENGTHS: BlogLength[] = ['short', 'medium', 'long'];
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
try {
|
||||||
|
const body = await request.json();
|
||||||
|
const { topic, keywords, style, tone, length, imageGuide, sections } = body;
|
||||||
|
|
||||||
|
// 유효성 검증
|
||||||
|
if (!topic || typeof topic !== 'string' || topic.trim().length === 0) {
|
||||||
|
return NextResponse.json({ success: false, error: '주제를 입력해주세요.' }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (topic.trim().length > 100) {
|
||||||
|
return NextResponse.json({ success: false, error: '주제는 100자 이내로 입력해주세요.' }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Array.isArray(keywords) || keywords.length === 0) {
|
||||||
|
return NextResponse.json({ success: false, error: '키워드를 최소 1개 입력해주세요.' }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (keywords.length > 10) {
|
||||||
|
return NextResponse.json({ success: false, error: '키워드는 최대 10개까지 가능합니다.' }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!VALID_STYLES.includes(style)) {
|
||||||
|
return NextResponse.json({ success: false, error: '유효하지 않은 글 형식입니다.' }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!VALID_TONES.includes(tone)) {
|
||||||
|
return NextResponse.json({ success: false, error: '유효하지 않은 톤입니다.' }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!VALID_LENGTHS.includes(length)) {
|
||||||
|
return NextResponse.json({ success: false, error: '유효하지 않은 분량입니다.' }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const sectionCount = Math.min(Math.max(Number(sections) || 4, 3), 8);
|
||||||
|
|
||||||
|
const result = await generateBlogPost({
|
||||||
|
topic: topic.trim(),
|
||||||
|
keywords: keywords.map((k: string) => k.trim()).filter(Boolean),
|
||||||
|
style,
|
||||||
|
tone,
|
||||||
|
length,
|
||||||
|
imageGuide: Boolean(imageGuide),
|
||||||
|
sections: sectionCount,
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(result, { status: 200 });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[NaverBlog] Generate error:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ success: false, error: '블로그 글 생성 중 오류가 발생했습니다.' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -64,13 +64,12 @@ const navItems = [
|
|||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: '/tools/ebay-parts',
|
href: '/tools',
|
||||||
label: '이베이 부품 검색',
|
label: '여긴 뭐 만들어요?',
|
||||||
badge: 'NEW',
|
badge: 'DEMO',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 11h4m-2-2v4" />
|
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
|||||||
524
app/tools/naver-blog/page.tsx
Normal file
524
app/tools/naver-blog/page.tsx
Normal file
@@ -0,0 +1,524 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useCallback } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
/* ── Types ─────────────────────────────────────────────── */
|
||||||
|
interface BlogSection {
|
||||||
|
heading: string;
|
||||||
|
body: string;
|
||||||
|
imageSlot?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImageGuide {
|
||||||
|
position: string;
|
||||||
|
description: string;
|
||||||
|
searchKeyword: string;
|
||||||
|
altText: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BlogData {
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
content: BlogSection[];
|
||||||
|
tags: string[];
|
||||||
|
seoTitle: string;
|
||||||
|
seoDescription: string;
|
||||||
|
imageGuides: ImageGuide[];
|
||||||
|
meta: {
|
||||||
|
charCount: number;
|
||||||
|
sectionCount: number;
|
||||||
|
estimatedReadTime: string;
|
||||||
|
generatedAt: string;
|
||||||
|
model: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Option configs ────────────────────────────────────── */
|
||||||
|
const STYLES = [
|
||||||
|
{ value: 'informational', label: '정보 전달', desc: '사실 기반 정보 정리', icon: '📖' },
|
||||||
|
{ value: 'review', label: '리뷰/후기', desc: '제품·서비스 체험기', icon: '⭐' },
|
||||||
|
{ value: 'howto', label: '방법/튜토리얼', desc: '단계별 가이드', icon: '🔧' },
|
||||||
|
{ value: 'listicle', label: '리스트형', desc: 'OO가지 모음', icon: '📋' },
|
||||||
|
{ value: 'comparison', label: '비교 분석', desc: 'A vs B 비교', icon: '⚖️' },
|
||||||
|
{ value: 'story', label: '에세이/스토리', desc: '경험 기반 서사', icon: '✍️' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const TONES = [
|
||||||
|
{ value: 'professional', label: '전문적', color: 'border-blue-500/40 bg-blue-500/10 text-blue-300' },
|
||||||
|
{ value: 'friendly', label: '친근한', color: 'border-emerald-500/40 bg-emerald-500/10 text-emerald-300' },
|
||||||
|
{ value: 'casual', label: '캐주얼', color: 'border-amber-500/40 bg-amber-500/10 text-amber-300' },
|
||||||
|
{ value: 'formal', label: '격식체', color: 'border-violet-500/40 bg-violet-500/10 text-violet-300' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const LENGTHS = [
|
||||||
|
{ value: 'short', label: '짧게', desc: '800~1,200자', time: '~2분' },
|
||||||
|
{ value: 'medium', label: '보통', desc: '1,500~2,500자', time: '~5분' },
|
||||||
|
{ value: 'long', label: '길게', desc: '3,000~4,500자', time: '~9분' },
|
||||||
|
];
|
||||||
|
|
||||||
|
/* ── Component ─────────────────────────────────────────── */
|
||||||
|
export default function NaverBlogPage() {
|
||||||
|
// Form state
|
||||||
|
const [topic, setTopic] = useState('');
|
||||||
|
const [keywordInput, setKeywordInput] = useState('');
|
||||||
|
const [keywords, setKeywords] = useState<string[]>([]);
|
||||||
|
const [style, setStyle] = useState('informational');
|
||||||
|
const [tone, setTone] = useState('friendly');
|
||||||
|
const [length, setLength] = useState('medium');
|
||||||
|
const [sections, setSections] = useState(5);
|
||||||
|
const [imageGuide, setImageGuide] = useState(true);
|
||||||
|
|
||||||
|
// Result state
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [result, setResult] = useState<BlogData | null>(null);
|
||||||
|
const [viewMode, setViewMode] = useState<'preview' | 'seo' | 'image'>('preview');
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
/* ── Keyword management ───────────────────────────────── */
|
||||||
|
const addKeyword = () => {
|
||||||
|
const kw = keywordInput.trim();
|
||||||
|
if (kw && !keywords.includes(kw) && keywords.length < 10) {
|
||||||
|
setKeywords([...keywords, kw]);
|
||||||
|
setKeywordInput('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeKeyword = (kw: string) => {
|
||||||
|
setKeywords(keywords.filter((k) => k !== kw));
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ── Generate ─────────────────────────────────────────── */
|
||||||
|
const handleGenerate = useCallback(async () => {
|
||||||
|
if (!topic.trim()) {
|
||||||
|
setError('주제를 입력해주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (keywords.length === 0) {
|
||||||
|
setError('키워드를 최소 1개 추가해주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
setResult(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/tools/naver-blog/generate', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ topic: topic.trim(), keywords, style, tone, length, imageGuide, sections }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const json = await res.json();
|
||||||
|
|
||||||
|
if (!res.ok || !json.success) {
|
||||||
|
throw new Error(json.error || '생성에 실패했습니다.');
|
||||||
|
}
|
||||||
|
|
||||||
|
setResult(json.data);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : '오류가 발생했습니다.');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [topic, keywords, style, tone, length, imageGuide, sections]);
|
||||||
|
|
||||||
|
/* ── Copy full content ────────────────────────────────── */
|
||||||
|
const copyContent = () => {
|
||||||
|
if (!result) return;
|
||||||
|
const text = result.content.map((s) => `## ${s.heading}\n\n${s.body}`).join('\n\n');
|
||||||
|
const full = `# ${result.title}\n\n${result.subtitle}\n\n${text}\n\n태그: ${result.tags.map((t) => '#' + t).join(' ')}`;
|
||||||
|
navigator.clipboard.writeText(full);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="px-6 pt-8 pb-6 max-w-5xl mx-auto">
|
||||||
|
<Link href="/tools" className="inline-flex items-center gap-1.5 text-slate-500 hover:text-slate-300 text-sm mb-4 transition-colors">
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
도구 목록
|
||||||
|
</Link>
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-600 to-teal-500 flex items-center justify-center text-white">
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-white text-2xl font-bold">네이버 블로그 자동화</h1>
|
||||||
|
<p className="text-slate-500 text-xs font-mono">Naver Blog AI Writer</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="px-6 pb-16 max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-5 gap-6">
|
||||||
|
{/* ── Left: Settings Panel ──────────────────────────── */}
|
||||||
|
<div className="lg:col-span-2 space-y-5">
|
||||||
|
{/* Topic */}
|
||||||
|
<div className="bg-slate-900/80 rounded-2xl border border-slate-700/50 p-5">
|
||||||
|
<label className="text-white text-sm font-semibold block mb-2">주제</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={topic}
|
||||||
|
onChange={(e) => setTopic(e.target.value)}
|
||||||
|
placeholder="예: 2026년 제주도 가족여행 추천 코스"
|
||||||
|
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2.5 text-white text-sm placeholder-slate-500 focus:outline-none focus:border-blue-500/50"
|
||||||
|
maxLength={100}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Keywords */}
|
||||||
|
<label className="text-white text-sm font-semibold block mt-4 mb-2">핵심 키워드</label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={keywordInput}
|
||||||
|
onChange={(e) => setKeywordInput(e.target.value)}
|
||||||
|
onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), addKeyword())}
|
||||||
|
placeholder="키워드 입력 후 Enter"
|
||||||
|
className="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white text-sm placeholder-slate-500 focus:outline-none focus:border-blue-500/50"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={addKeyword}
|
||||||
|
className="px-3 py-2 bg-slate-700 hover:bg-slate-600 text-white text-sm rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
추가
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{keywords.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-1.5 mt-2.5">
|
||||||
|
{keywords.map((kw) => (
|
||||||
|
<span key={kw} className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-500/15 text-blue-300 text-xs">
|
||||||
|
{kw}
|
||||||
|
<button onClick={() => removeKeyword(kw)} className="hover:text-white ml-0.5">x</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Style */}
|
||||||
|
<div className="bg-slate-900/80 rounded-2xl border border-slate-700/50 p-5">
|
||||||
|
<label className="text-white text-sm font-semibold block mb-3">글 형식</label>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{STYLES.map((s) => (
|
||||||
|
<button
|
||||||
|
key={s.value}
|
||||||
|
onClick={() => setStyle(s.value)}
|
||||||
|
className={`text-left px-3 py-2.5 rounded-lg border transition-all text-sm ${
|
||||||
|
style === s.value
|
||||||
|
? 'border-blue-500/50 bg-blue-500/10 text-white'
|
||||||
|
: 'border-slate-700 bg-slate-800/50 text-slate-400 hover:border-slate-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="text-base mr-1.5">{s.icon}</span>
|
||||||
|
<span className="font-medium">{s.label}</span>
|
||||||
|
<div className="text-[11px] text-slate-500 mt-0.5 ml-6">{s.desc}</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tone */}
|
||||||
|
<div className="bg-slate-900/80 rounded-2xl border border-slate-700/50 p-5">
|
||||||
|
<label className="text-white text-sm font-semibold block mb-3">톤앤매너</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{TONES.map((t) => (
|
||||||
|
<button
|
||||||
|
key={t.value}
|
||||||
|
onClick={() => setTone(t.value)}
|
||||||
|
className={`px-4 py-2 rounded-lg border text-sm font-medium transition-all ${
|
||||||
|
tone === t.value ? t.color : 'border-slate-700 bg-slate-800/50 text-slate-400 hover:border-slate-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{t.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Length + Sections + Image */}
|
||||||
|
<div className="bg-slate-900/80 rounded-2xl border border-slate-700/50 p-5 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-white text-sm font-semibold block mb-3">분량</label>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{LENGTHS.map((l) => (
|
||||||
|
<button
|
||||||
|
key={l.value}
|
||||||
|
onClick={() => setLength(l.value)}
|
||||||
|
className={`px-3 py-2.5 rounded-lg border text-center transition-all ${
|
||||||
|
length === l.value
|
||||||
|
? 'border-blue-500/50 bg-blue-500/10 text-white'
|
||||||
|
: 'border-slate-700 bg-slate-800/50 text-slate-400 hover:border-slate-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="text-sm font-medium">{l.label}</div>
|
||||||
|
<div className="text-[11px] text-slate-500">{l.desc}</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<label className="text-white text-sm font-semibold">소제목 수</label>
|
||||||
|
<p className="text-slate-500 text-xs">3~8개</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setSections(Math.max(3, sections - 1))}
|
||||||
|
className="w-8 h-8 rounded-lg bg-slate-800 border border-slate-700 text-white flex items-center justify-center hover:bg-slate-700"
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</button>
|
||||||
|
<span className="text-white font-bold w-6 text-center">{sections}</span>
|
||||||
|
<button
|
||||||
|
onClick={() => setSections(Math.min(8, sections + 1))}
|
||||||
|
className="w-8 h-8 rounded-lg bg-slate-800 border border-slate-700 text-white flex items-center justify-center hover:bg-slate-700"
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label className="flex items-center gap-3 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={imageGuide}
|
||||||
|
onChange={(e) => setImageGuide(e.target.checked)}
|
||||||
|
className="w-4 h-4 rounded accent-blue-500"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<span className="text-white text-sm font-medium">이미지 배치 가이드</span>
|
||||||
|
<p className="text-slate-500 text-xs">각 섹션에 적합한 이미지 추천</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Generate Button */}
|
||||||
|
<button
|
||||||
|
onClick={handleGenerate}
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full py-3.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-700 text-white font-semibold text-sm transition-colors flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<>
|
||||||
|
<svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||||
|
</svg>
|
||||||
|
AI 작성 중...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||||
|
</svg>
|
||||||
|
블로그 글 생성하기
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-900/20 border border-red-500/30 rounded-lg px-4 py-3 text-red-400 text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Right: Result Panel ───────────────────────────── */}
|
||||||
|
<div className="lg:col-span-3">
|
||||||
|
{!result && !loading && (
|
||||||
|
<div className="bg-slate-900/80 rounded-2xl border border-slate-700/50 p-12 text-center">
|
||||||
|
<svg className="w-16 h-16 text-slate-700 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||||
|
</svg>
|
||||||
|
<p className="text-slate-500 text-sm">왼쪽에서 옵션을 선택하고<br />블로그 글을 생성해보세요</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{loading && (
|
||||||
|
<div className="bg-slate-900/80 rounded-2xl border border-slate-700/50 p-12 text-center">
|
||||||
|
<svg className="w-10 h-10 animate-spin text-emerald-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||||
|
</svg>
|
||||||
|
<p className="text-white font-medium mb-1">AI가 블로그 글을 작성하고 있습니다</p>
|
||||||
|
<p className="text-slate-500 text-sm">주제 분석 → 구조 설계 → 본문 작성 → SEO 최적화</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{result && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* View mode tabs */}
|
||||||
|
<div className="flex gap-1 bg-slate-900/80 rounded-xl border border-slate-700/50 p-1">
|
||||||
|
{[
|
||||||
|
{ id: 'preview' as const, label: '글 미리보기' },
|
||||||
|
{ id: 'seo' as const, label: 'SEO 정보' },
|
||||||
|
{ id: 'image' as const, label: '이미지 가이드' },
|
||||||
|
].map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setViewMode(tab.id)}
|
||||||
|
className={`flex-1 py-2 rounded-lg text-sm font-medium transition-all ${
|
||||||
|
viewMode === tab.id
|
||||||
|
? 'bg-slate-700 text-white'
|
||||||
|
: 'text-slate-500 hover:text-slate-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Meta bar */}
|
||||||
|
<div className="flex items-center justify-between px-4 py-2 bg-slate-800/60 rounded-lg text-xs text-slate-400">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<span>{result.meta.charCount.toLocaleString()}자</span>
|
||||||
|
<span>{result.meta.sectionCount}개 섹션</span>
|
||||||
|
<span>읽기 {result.meta.estimatedReadTime}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={copyContent}
|
||||||
|
className="px-3 py-1 rounded bg-slate-700 hover:bg-slate-600 text-slate-300 transition-colors"
|
||||||
|
>
|
||||||
|
{copied ? '복사됨!' : '전체 복사'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content based on viewMode */}
|
||||||
|
{viewMode === 'preview' && (
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 overflow-hidden">
|
||||||
|
{/* Blog preview (light theme to mimic Naver Blog) */}
|
||||||
|
<div className="p-6 md:p-8">
|
||||||
|
<h1 className="text-[#333] text-2xl font-bold mb-2 leading-tight">{result.title}</h1>
|
||||||
|
<p className="text-[#888] text-sm mb-6">{result.subtitle}</p>
|
||||||
|
<div className="w-12 h-0.5 bg-emerald-500 mb-6" />
|
||||||
|
|
||||||
|
{result.content.map((section, idx) => (
|
||||||
|
<div key={idx} className="mb-6">
|
||||||
|
<h2 className="text-[#222] text-lg font-bold mb-3 flex items-center gap-2">
|
||||||
|
<span className="w-1.5 h-5 bg-emerald-500 rounded-full inline-block" />
|
||||||
|
{section.heading}
|
||||||
|
</h2>
|
||||||
|
{section.imageSlot && (
|
||||||
|
<div className="w-full h-32 bg-slate-100 rounded-lg mb-3 flex items-center justify-center border border-dashed border-slate-300">
|
||||||
|
<span className="text-slate-400 text-sm">
|
||||||
|
이미지 배치 위치
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="text-[#333] text-sm leading-relaxed whitespace-pre-wrap">{section.body}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Tags */}
|
||||||
|
<div className="pt-4 border-t border-slate-200 flex flex-wrap gap-1.5">
|
||||||
|
{result.tags.map((tag) => (
|
||||||
|
<span key={tag} className="px-2.5 py-1 bg-emerald-50 text-emerald-700 text-xs rounded-full">
|
||||||
|
#{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{viewMode === 'seo' && (
|
||||||
|
<div className="bg-slate-900/80 rounded-2xl border border-slate-700/50 p-6 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-slate-400 text-xs font-medium block mb-1">SEO 제목</label>
|
||||||
|
<p className="text-white text-sm bg-slate-800 rounded-lg px-4 py-3">{result.seoTitle}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-slate-400 text-xs font-medium block mb-1">메타 설명</label>
|
||||||
|
<p className="text-white text-sm bg-slate-800 rounded-lg px-4 py-3">{result.seoDescription}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-slate-400 text-xs font-medium block mb-1">추천 태그</label>
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{result.tags.map((tag) => (
|
||||||
|
<span key={tag} className="px-3 py-1.5 bg-slate-800 rounded-lg text-emerald-400 text-sm">
|
||||||
|
#{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-slate-400 text-xs font-medium block mb-1">글 구조</label>
|
||||||
|
<div className="bg-slate-800 rounded-lg px-4 py-3 space-y-1.5">
|
||||||
|
{result.content.map((section, idx) => (
|
||||||
|
<div key={idx} className="flex items-center gap-2 text-sm">
|
||||||
|
<span className="text-slate-500 font-mono text-xs w-5">H2</span>
|
||||||
|
<span className="text-white">{section.heading}</span>
|
||||||
|
<span className="text-slate-600 text-xs ml-auto">{section.body.length}자</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-slate-500 text-xs pt-2 border-t border-slate-700/50">
|
||||||
|
모델: {result.meta.model} · 생성: {new Date(result.meta.generatedAt).toLocaleString('ko-KR')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{viewMode === 'image' && (
|
||||||
|
<div className="bg-slate-900/80 rounded-2xl border border-slate-700/50 p-6">
|
||||||
|
{result.imageGuides.length === 0 ? (
|
||||||
|
<p className="text-slate-500 text-sm text-center py-8">이미지 가이드가 없습니다.</p>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{result.imageGuides.map((guide, idx) => (
|
||||||
|
<div key={idx} className="bg-slate-800/50 rounded-lg p-4">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<span className="w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-400 text-xs flex items-center justify-center font-bold">
|
||||||
|
{idx + 1}
|
||||||
|
</span>
|
||||||
|
<span className="text-white text-sm font-medium">{guide.position}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-300 text-sm mb-2">{guide.description}</p>
|
||||||
|
<div className="flex gap-4 text-xs">
|
||||||
|
<span className="text-slate-500">
|
||||||
|
검색어: <span className="text-blue-400">{guide.searchKeyword}</span>
|
||||||
|
</span>
|
||||||
|
<span className="text-slate-500">
|
||||||
|
Alt: <span className="text-slate-400">{guide.altText}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<div className="bg-slate-900/60 rounded-xl border border-slate-700/40 p-5 text-center">
|
||||||
|
<p className="text-slate-400 text-sm mb-3">
|
||||||
|
이런 블로그 자동화를 우리 사업에 맞게 커스텀하고 싶다면?
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/freelance#contact-form"
|
||||||
|
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold transition-colors"
|
||||||
|
>
|
||||||
|
맞춤 자동화 상담하기
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
159
app/tools/page.tsx
Normal file
159
app/tools/page.tsx
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
interface ToolCard {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
description: string;
|
||||||
|
tags: string[];
|
||||||
|
href: string;
|
||||||
|
status: 'live' | 'beta' | 'coming';
|
||||||
|
icon: React.ReactNode;
|
||||||
|
gradient: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TOOLS: ToolCard[] = [
|
||||||
|
{
|
||||||
|
id: 'ebay-parts',
|
||||||
|
title: '이베이 부품 AI 리스팅',
|
||||||
|
subtitle: 'eBay Auto Parts Listing Tool',
|
||||||
|
description:
|
||||||
|
'품번 하나 입력하면 AI가 RockAuto·eBay를 크롤링하고, 리스팅 제목·Fitment·관세까지 자동 생성합니다. 수작업 30분 → 10초.',
|
||||||
|
tags: ['크롤링', 'Claude AI', '관세 계산', 'eBay Motors'],
|
||||||
|
href: '/tools/ebay-parts',
|
||||||
|
status: 'live',
|
||||||
|
icon: (
|
||||||
|
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 11h4m-2-2v4" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
gradient: 'from-blue-600 to-cyan-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'naver-blog',
|
||||||
|
title: '네이버 블로그 자동화',
|
||||||
|
subtitle: 'Naver Blog AI Writer',
|
||||||
|
description:
|
||||||
|
'주제·톤·분량만 선택하면 AI가 SEO 최적화된 블로그 글을 자동 작성합니다. 소제목 구조, 이미지 배치 가이드까지 한 번에.',
|
||||||
|
tags: ['GPT/Claude', 'SEO 최적화', '자동 포스팅', '이미지 가이드'],
|
||||||
|
href: '/tools/naver-blog',
|
||||||
|
status: 'live',
|
||||||
|
icon: (
|
||||||
|
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
gradient: 'from-emerald-600 to-teal-500',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const STATUS_BADGE: Record<string, { label: string; className: string }> = {
|
||||||
|
live: { label: '체험 가능', className: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30' },
|
||||||
|
beta: { label: 'BETA', className: 'bg-amber-500/15 text-amber-400 border-amber-500/30' },
|
||||||
|
coming: { label: '준비 중', className: 'bg-slate-500/15 text-slate-400 border-slate-500/30' },
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ToolsShowcasePage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="px-6 pt-12 pb-10 max-w-5xl mx-auto text-center">
|
||||||
|
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-medium mb-6">
|
||||||
|
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
||||||
|
</svg>
|
||||||
|
실제로 작동하는 완성형 데모
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-bold text-white leading-tight mb-4">
|
||||||
|
여긴 뭐 만들어요?
|
||||||
|
</h1>
|
||||||
|
<p className="text-slate-400 text-base md:text-lg max-w-2xl mx-auto leading-relaxed">
|
||||||
|
“이런 것도 자동화돼요?” — 직접 체험해보세요.<br className="hidden md:block" />
|
||||||
|
아래 툴들은 <span className="text-white font-medium">실제 고객 프로젝트를 기반으로 제작</span>된 완성형 레퍼런스입니다.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Tool Cards */}
|
||||||
|
<section className="px-6 pb-16 max-w-5xl mx-auto">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{TOOLS.map((tool) => {
|
||||||
|
const badge = STATUS_BADGE[tool.status];
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={tool.id}
|
||||||
|
href={tool.href}
|
||||||
|
className="group block bg-slate-900/80 rounded-2xl border border-slate-700/50 hover:border-slate-600/80 transition-all duration-200 overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Gradient header */}
|
||||||
|
<div className={`h-2 bg-gradient-to-r ${tool.gradient}`} />
|
||||||
|
|
||||||
|
<div className="p-6">
|
||||||
|
{/* Icon + Badge */}
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${tool.gradient} flex items-center justify-center text-white`}>
|
||||||
|
{tool.icon}
|
||||||
|
</div>
|
||||||
|
<span className={`px-2.5 py-0.5 rounded-full text-[11px] font-medium border ${badge.className}`}>
|
||||||
|
{badge.label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<h3 className="text-white font-bold text-lg mb-0.5 group-hover:text-blue-300 transition-colors">
|
||||||
|
{tool.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-500 text-xs font-mono mb-3">{tool.subtitle}</p>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed mb-4">
|
||||||
|
{tool.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Tags */}
|
||||||
|
<div className="flex flex-wrap gap-1.5 mb-5">
|
||||||
|
{tool.tags.map((tag) => (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
className="px-2 py-0.5 rounded bg-slate-800 text-slate-400 text-[11px] font-medium"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<div className="flex items-center gap-2 text-blue-400 text-sm font-medium group-hover:gap-3 transition-all">
|
||||||
|
체험하기
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom CTA */}
|
||||||
|
<div className="mt-12 text-center bg-slate-900/60 rounded-2xl border border-slate-700/40 p-8">
|
||||||
|
<h3 className="text-white font-bold text-lg mb-2">우리 업무에도 이런 자동화가 가능할까?</h3>
|
||||||
|
<p className="text-slate-400 text-sm mb-5">
|
||||||
|
위 데모를 참고해 원하시는 자동화를 구체적으로 의뢰하세요. 무료 상담부터 시작합니다.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/freelance#contact-form"
|
||||||
|
className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold transition-colors"
|
||||||
|
>
|
||||||
|
무료 상담 신청하기
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
199
lib/blog-tools/generator.ts
Normal file
199
lib/blog-tools/generator.ts
Normal file
@@ -0,0 +1,199 @@
|
|||||||
|
import Anthropic from '@anthropic-ai/sdk';
|
||||||
|
import type { BlogRequest, BlogResult, BlogSection, ImageGuide } from './types';
|
||||||
|
|
||||||
|
let client: Anthropic | null = null;
|
||||||
|
|
||||||
|
function getClient(): Anthropic {
|
||||||
|
if (!client) {
|
||||||
|
const apiKey = process.env.ANTHROPIC_API_KEY;
|
||||||
|
if (!apiKey) throw new Error('ANTHROPIC_API_KEY not set');
|
||||||
|
client = new Anthropic({ apiKey });
|
||||||
|
}
|
||||||
|
return client;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STYLE_LABELS: Record<string, string> = {
|
||||||
|
informational: '정보 전달형',
|
||||||
|
review: '리뷰/후기형',
|
||||||
|
howto: '방법/튜토리얼형',
|
||||||
|
listicle: '리스트형 (OO가지)',
|
||||||
|
comparison: '비교 분석형',
|
||||||
|
story: '에세이/스토리형',
|
||||||
|
};
|
||||||
|
|
||||||
|
const TONE_LABELS: Record<string, string> = {
|
||||||
|
professional: '전문적이고 신뢰감 있는',
|
||||||
|
friendly: '친근하고 대화하듯',
|
||||||
|
casual: '편한 말투, 구어체',
|
||||||
|
formal: '격식 있는 존댓말',
|
||||||
|
};
|
||||||
|
|
||||||
|
const LENGTH_RANGES: Record<string, string> = {
|
||||||
|
short: '800~1200자',
|
||||||
|
medium: '1500~2500자',
|
||||||
|
long: '3000~4500자',
|
||||||
|
};
|
||||||
|
|
||||||
|
function buildPrompt(req: BlogRequest): string {
|
||||||
|
return `당신은 네이버 블로그 SEO 전문 작가입니다.
|
||||||
|
|
||||||
|
## 작성 요청
|
||||||
|
|
||||||
|
- **주제**: ${req.topic}
|
||||||
|
- **핵심 키워드**: ${req.keywords.join(', ')}
|
||||||
|
- **글 형식**: ${STYLE_LABELS[req.style] || req.style}
|
||||||
|
- **톤앤매너**: ${TONE_LABELS[req.tone] || req.tone}
|
||||||
|
- **목표 분량**: ${LENGTH_RANGES[req.length] || req.length}
|
||||||
|
- **소제목 수**: ${req.sections}개
|
||||||
|
- **이미지 가이드**: ${req.imageGuide ? '포함' : '미포함'}
|
||||||
|
|
||||||
|
## 출력 형식 (반드시 아래 JSON 구조로 출력)
|
||||||
|
|
||||||
|
\`\`\`json
|
||||||
|
{
|
||||||
|
"title": "블로그 제목 (네이버 검색에 최적화된 30자 내외)",
|
||||||
|
"subtitle": "부제목 또는 한 줄 요약",
|
||||||
|
"sections": [
|
||||||
|
{
|
||||||
|
"heading": "소제목",
|
||||||
|
"body": "본문 내용 (마크다운 불릿·볼드 허용)",
|
||||||
|
"imageSlot": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tags": ["태그1", "태그2", "태그3", "태그4", "태그5"],
|
||||||
|
"seoTitle": "검색 노출용 제목 (핵심 키워드 포함 40자 이내)",
|
||||||
|
"seoDescription": "메타 설명 (120자 이내, 키워드 자연스럽게 포함)",
|
||||||
|
"imageGuides": [
|
||||||
|
{
|
||||||
|
"position": "섹션 제목 또는 위치",
|
||||||
|
"description": "어떤 이미지가 적합한지 설명",
|
||||||
|
"searchKeyword": "이미지 검색 키워드",
|
||||||
|
"altText": "대체 텍스트"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
## 작성 규칙
|
||||||
|
|
||||||
|
1. 네이버 블로그 검색 상위 노출을 위해 핵심 키워드를 제목·첫 문단·소제목에 자연스럽게 배치
|
||||||
|
2. 각 소제목(heading) 아래 본문은 구체적이고 실용적인 정보 포함
|
||||||
|
3. 첫 문단은 독자의 공감 또는 궁금증을 유발하는 도입부
|
||||||
|
4. 마지막 섹션은 요약 또는 CTA(댓글 유도, 공유 요청 등)
|
||||||
|
5. 본문에서 핵심 키워드는 전체 글의 2~3% 밀도로 자연스럽게 반복
|
||||||
|
6. imageSlot이 true인 섹션에는 반드시 imageGuides에 해당 위치의 이미지 가이드 포함
|
||||||
|
7. 태그는 5~8개, 관련 검색어와 롱테일 키워드 조합
|
||||||
|
8. JSON만 출력 — 설명이나 마크다운 코드블록 바깥 텍스트 금지`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function generateBlogPost(req: BlogRequest): Promise<BlogResult> {
|
||||||
|
const hasApiKey = !!process.env.ANTHROPIC_API_KEY;
|
||||||
|
|
||||||
|
if (hasApiKey) {
|
||||||
|
try {
|
||||||
|
const ai = getClient();
|
||||||
|
const response = await ai.messages.create({
|
||||||
|
model: 'claude-sonnet-4-20250514',
|
||||||
|
max_tokens: 4096,
|
||||||
|
messages: [
|
||||||
|
{ role: 'user', content: buildPrompt(req) },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
const text = response.content
|
||||||
|
.filter((b): b is Anthropic.TextBlock => b.type === 'text')
|
||||||
|
.map((b) => b.text)
|
||||||
|
.join('');
|
||||||
|
|
||||||
|
// JSON 파싱 (코드블록 래핑 제거)
|
||||||
|
const jsonStr = text.replace(/^```json?\s*/i, '').replace(/\s*```$/i, '').trim();
|
||||||
|
const parsed = JSON.parse(jsonStr);
|
||||||
|
|
||||||
|
const sections: BlogSection[] = (parsed.sections || []).map((s: Record<string, unknown>) => ({
|
||||||
|
heading: String(s.heading || ''),
|
||||||
|
body: String(s.body || ''),
|
||||||
|
imageSlot: Boolean(s.imageSlot),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const imageGuides: ImageGuide[] = (parsed.imageGuides || []).map((g: Record<string, unknown>) => ({
|
||||||
|
position: String(g.position || ''),
|
||||||
|
description: String(g.description || ''),
|
||||||
|
searchKeyword: String(g.searchKeyword || ''),
|
||||||
|
altText: String(g.altText || ''),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const totalChars = sections.reduce((sum, s) => sum + s.heading.length + s.body.length, 0);
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
title: String(parsed.title || ''),
|
||||||
|
subtitle: String(parsed.subtitle || ''),
|
||||||
|
content: sections,
|
||||||
|
tags: Array.isArray(parsed.tags) ? parsed.tags.map(String) : [],
|
||||||
|
seoTitle: String(parsed.seoTitle || ''),
|
||||||
|
seoDescription: String(parsed.seoDescription || ''),
|
||||||
|
imageGuides,
|
||||||
|
meta: {
|
||||||
|
charCount: totalChars,
|
||||||
|
sectionCount: sections.length,
|
||||||
|
estimatedReadTime: `${Math.max(1, Math.round(totalChars / 500))}분`,
|
||||||
|
generatedAt: new Date().toISOString(),
|
||||||
|
model: 'claude-sonnet-4-20250514',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[BlogGenerator] AI error, using fallback:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback (API 키 없거나 실패 시)
|
||||||
|
return buildFallback(req);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildFallback(req: BlogRequest): BlogResult {
|
||||||
|
const sections: BlogSection[] = [];
|
||||||
|
for (let i = 0; i < req.sections; i++) {
|
||||||
|
if (i === 0) {
|
||||||
|
sections.push({
|
||||||
|
heading: `${req.topic}이란?`,
|
||||||
|
body: `${req.keywords[0] || req.topic}에 대해 알아보겠습니다. 이 글에서는 ${req.topic}의 핵심 내용을 정리해 드립니다.`,
|
||||||
|
imageSlot: req.imageGuide,
|
||||||
|
});
|
||||||
|
} else if (i === req.sections - 1) {
|
||||||
|
sections.push({
|
||||||
|
heading: '마치며',
|
||||||
|
body: `지금까지 ${req.topic}에 대해 알아보았습니다. 도움이 되셨다면 댓글과 공감 부탁드립니다!`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
sections.push({
|
||||||
|
heading: `포인트 ${i}`,
|
||||||
|
body: `${req.topic} 관련 상세 내용이 이 자리에 들어갑니다. AI API 키 설정 후 실제 콘텐츠가 생성됩니다.`,
|
||||||
|
imageSlot: i % 2 === 0 && req.imageGuide,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
title: `${req.topic} — 완벽 가이드`,
|
||||||
|
subtitle: `${req.keywords.join(', ')} 핵심 정리`,
|
||||||
|
content: sections,
|
||||||
|
tags: req.keywords.slice(0, 5),
|
||||||
|
seoTitle: `${req.topic} ${req.keywords[0] || ''} 총정리`,
|
||||||
|
seoDescription: `${req.topic}에 대한 핵심 정보를 정리했습니다.`,
|
||||||
|
imageGuides: req.imageGuide
|
||||||
|
? [{ position: '도입부', description: '주제 대표 이미지', searchKeyword: req.keywords[0] || req.topic, altText: req.topic }]
|
||||||
|
: [],
|
||||||
|
meta: {
|
||||||
|
charCount: sections.reduce((s, sec) => s + sec.heading.length + sec.body.length, 0),
|
||||||
|
sectionCount: sections.length,
|
||||||
|
estimatedReadTime: '1분',
|
||||||
|
generatedAt: new Date().toISOString(),
|
||||||
|
model: 'fallback (no API key)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
61
lib/blog-tools/types.ts
Normal file
61
lib/blog-tools/types.ts
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
export interface BlogRequest {
|
||||||
|
topic: string;
|
||||||
|
keywords: string[];
|
||||||
|
style: BlogStyle;
|
||||||
|
tone: BlogTone;
|
||||||
|
length: BlogLength;
|
||||||
|
imageGuide: boolean;
|
||||||
|
sections: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type BlogStyle =
|
||||||
|
| 'informational' // 정보 전달
|
||||||
|
| 'review' // 리뷰/후기
|
||||||
|
| 'howto' // 방법/튜토리얼
|
||||||
|
| 'listicle' // 리스트형
|
||||||
|
| 'comparison' // 비교 분석
|
||||||
|
| 'story'; // 에세이/스토리
|
||||||
|
|
||||||
|
export type BlogTone =
|
||||||
|
| 'professional' // 전문적
|
||||||
|
| 'friendly' // 친근한
|
||||||
|
| 'casual' // 캐주얼
|
||||||
|
| 'formal'; // 격식체
|
||||||
|
|
||||||
|
export type BlogLength =
|
||||||
|
| 'short' // 800~1200자
|
||||||
|
| 'medium' // 1500~2500자
|
||||||
|
| 'long'; // 3000~4500자
|
||||||
|
|
||||||
|
export interface BlogResult {
|
||||||
|
success: true;
|
||||||
|
data: {
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
content: BlogSection[];
|
||||||
|
tags: string[];
|
||||||
|
seoTitle: string;
|
||||||
|
seoDescription: string;
|
||||||
|
imageGuides: ImageGuide[];
|
||||||
|
meta: {
|
||||||
|
charCount: number;
|
||||||
|
sectionCount: number;
|
||||||
|
estimatedReadTime: string;
|
||||||
|
generatedAt: string;
|
||||||
|
model: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BlogSection {
|
||||||
|
heading: string;
|
||||||
|
body: string;
|
||||||
|
imageSlot?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ImageGuide {
|
||||||
|
position: string;
|
||||||
|
description: string;
|
||||||
|
searchKeyword: string;
|
||||||
|
altText: string;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user