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>

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<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>
+  );
+}

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: (
+      <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">
+          &ldquo;이런 것도 자동화돼요?&rdquo; — 직접 체험해보세요.<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>
+  );
+}