diff --git a/app/api/tools/naver-blog/generate/route.ts b/app/api/tools/naver-blog/generate/route.ts new file mode 100644 index 0000000..b5a4422 --- /dev/null +++ b/app/api/tools/naver-blog/generate/route.ts @@ -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 } + ); + } +} diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx index fc3146a..85c6897 100644 --- a/app/components/Sidebar.tsx +++ b/app/components/Sidebar.tsx @@ -64,13 +64,12 @@ const navItems = [ ), }, { - href: '/tools/ebay-parts', - label: '이베이 부품 검색', - badge: 'NEW', + href: '/tools', + label: '여긴 뭐 만들어요?', + badge: 'DEMO', icon: ( - - + ), }, diff --git a/app/tools/naver-blog/page.tsx b/app/tools/naver-blog/page.tsx new file mode 100644 index 0000000..0b5364e --- /dev/null +++ b/app/tools/naver-blog/page.tsx @@ -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([]); + 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(null); + const [result, setResult] = useState(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 ( +
+ {/* Header */} +
+ + + + + 도구 목록 + +
+
+ + + +
+
+

네이버 블로그 자동화

+

Naver Blog AI Writer

+
+
+
+ +
+ {/* ── Left: Settings Panel ──────────────────────────── */} +
+ {/* Topic */} +
+ + 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 */} + +
+ 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" + /> + +
+ {keywords.length > 0 && ( +
+ {keywords.map((kw) => ( + + {kw} + + + ))} +
+ )} +
+ + {/* Style */} +
+ +
+ {STYLES.map((s) => ( + + ))} +
+
+ + {/* Tone */} +
+ +
+ {TONES.map((t) => ( + + ))} +
+
+ + {/* Length + Sections + Image */} +
+
+ +
+ {LENGTHS.map((l) => ( + + ))} +
+
+ +
+
+ +

3~8개

+
+
+ + {sections} + +
+
+ + +
+ + {/* Generate Button */} + + + {error && ( +
+ {error} +
+ )} +
+ + {/* ── Right: Result Panel ───────────────────────────── */} +
+ {!result && !loading && ( +
+ + + +

왼쪽에서 옵션을 선택하고
블로그 글을 생성해보세요

+
+ )} + + {loading && ( +
+ + + + +

AI가 블로그 글을 작성하고 있습니다

+

주제 분석 → 구조 설계 → 본문 작성 → SEO 최적화

+
+ )} + + {result && ( +
+ {/* View mode tabs */} +
+ {[ + { id: 'preview' as const, label: '글 미리보기' }, + { id: 'seo' as const, label: 'SEO 정보' }, + { id: 'image' as const, label: '이미지 가이드' }, + ].map((tab) => ( + + ))} +
+ + {/* Meta bar */} +
+
+ {result.meta.charCount.toLocaleString()}자 + {result.meta.sectionCount}개 섹션 + 읽기 {result.meta.estimatedReadTime} +
+
+ +
+
+ + {/* Content based on viewMode */} + {viewMode === 'preview' && ( +
+ {/* Blog preview (light theme to mimic Naver Blog) */} +
+

{result.title}

+

{result.subtitle}

+
+ + {result.content.map((section, idx) => ( +
+

+ + {section.heading} +

+ {section.imageSlot && ( +
+ + 이미지 배치 위치 + +
+ )} +
{section.body}
+
+ ))} + + {/* Tags */} +
+ {result.tags.map((tag) => ( + + #{tag} + + ))} +
+
+
+ )} + + {viewMode === 'seo' && ( +
+
+ +

{result.seoTitle}

+
+
+ +

{result.seoDescription}

+
+
+ +
+ {result.tags.map((tag) => ( + + #{tag} + + ))} +
+
+
+ +
+ {result.content.map((section, idx) => ( +
+ H2 + {section.heading} + {section.body.length}자 +
+ ))} +
+
+
+ 모델: {result.meta.model} · 생성: {new Date(result.meta.generatedAt).toLocaleString('ko-KR')} +
+
+ )} + + {viewMode === 'image' && ( +
+ {result.imageGuides.length === 0 ? ( +

이미지 가이드가 없습니다.

+ ) : ( +
+ {result.imageGuides.map((guide, idx) => ( +
+
+ + {idx + 1} + + {guide.position} +
+

{guide.description}

+
+ + 검색어: {guide.searchKeyword} + + + Alt: {guide.altText} + +
+
+ ))} +
+ )} +
+ )} + + {/* CTA */} +
+

+ 이런 블로그 자동화를 우리 사업에 맞게 커스텀하고 싶다면? +

+ + 맞춤 자동화 상담하기 + + + + +
+
+ )} +
+
+
+ ); +} diff --git a/app/tools/page.tsx b/app/tools/page.tsx new file mode 100644 index 0000000..9aa86f4 --- /dev/null +++ b/app/tools/page.tsx @@ -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: ( + + + + + ), + 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: ( + + + + ), + gradient: 'from-emerald-600 to-teal-500', + }, +]; + +const STATUS_BADGE: Record = { + 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 ( +
+ {/* Hero */} +
+
+ + + + 실제로 작동하는 완성형 데모 +
+

+ 여긴 뭐 만들어요? +

+

+ “이런 것도 자동화돼요?” — 직접 체험해보세요.
+ 아래 툴들은 실제 고객 프로젝트를 기반으로 제작된 완성형 레퍼런스입니다. +

+
+ + {/* Tool Cards */} +
+
+ {TOOLS.map((tool) => { + const badge = STATUS_BADGE[tool.status]; + return ( + + {/* Gradient header */} +
+ +
+ {/* Icon + Badge */} +
+
+ {tool.icon} +
+ + {badge.label} + +
+ + {/* Title */} +

+ {tool.title} +

+

{tool.subtitle}

+ + {/* Description */} +

+ {tool.description} +

+ + {/* Tags */} +
+ {tool.tags.map((tag) => ( + + {tag} + + ))} +
+ + {/* CTA */} +
+ 체험하기 + + + +
+
+ + ); + })} +
+ + {/* Bottom CTA */} +
+

우리 업무에도 이런 자동화가 가능할까?

+

+ 위 데모를 참고해 원하시는 자동화를 구체적으로 의뢰하세요. 무료 상담부터 시작합니다. +

+ + 무료 상담 신청하기 + + + + +
+
+
+ ); +} diff --git a/lib/blog-tools/generator.ts b/lib/blog-tools/generator.ts new file mode 100644 index 0000000..61e80d2 --- /dev/null +++ b/lib/blog-tools/generator.ts @@ -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 = { + informational: '정보 전달형', + review: '리뷰/후기형', + howto: '방법/튜토리얼형', + listicle: '리스트형 (OO가지)', + comparison: '비교 분석형', + story: '에세이/스토리형', +}; + +const TONE_LABELS: Record = { + professional: '전문적이고 신뢰감 있는', + friendly: '친근하고 대화하듯', + casual: '편한 말투, 구어체', + formal: '격식 있는 존댓말', +}; + +const LENGTH_RANGES: Record = { + 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 { + 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) => ({ + heading: String(s.heading || ''), + body: String(s.body || ''), + imageSlot: Boolean(s.imageSlot), + })); + + const imageGuides: ImageGuide[] = (parsed.imageGuides || []).map((g: Record) => ({ + 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)', + }, + }, + }; +} diff --git a/lib/blog-tools/types.ts b/lib/blog-tools/types.ts new file mode 100644 index 0000000..29fb221 --- /dev/null +++ b/lib/blog-tools/types.ts @@ -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; +}