AI 페어 프로그래밍으로 테크 블로그를 만들어보았다 (Antigravity + MCP)

arang-blog/
├── content/           # 콘텐츠 (Velite)
│   ├── posts/        # 블로그 글 (.md)
│   └── writeups/     # CTF Writeup (.md)
├── data/
│   └── blog.db       # SQLite (댓글, 번역, 로그)
├── public/
│   ├── images/       # 이미지 파일
│   └── uploads/      # 업로드된 파일
├── src/
│   ├── app/          # Next.js App Router
│   │   ├── admin/    # 관리자 페이지
│   │   ├── api/      # API 라우트
│   │   ├── posts/    # 블로그 글 페이지
│   │   └── writeups/ # Writeup 페이지
│   ├── components/   # React 컴포넌트
│   ├── hooks/        # Custom Hooks
│   └── lib/          # 유틸리티 (DB, Auth, i18n)
├── velite.config.ts  # Velite 설정
└── next.config.ts    # Next.js 설정

# Project Kickoff: Arang Tech Blog (Deep Dark & Aesthetic)
 
**목표:** Next.js 15 + Velite + Shadcn/ui를 사용한 CTF/기술 블로그 구축.
**현재 상황:** 로컬 폴더만 생성됨. Git 초기화 안 됨.
**Target Repo:** `https://github.com/JaewookYou/arang-blog`
 
---
 
## 🚨 Phase 0: Git Initialization (Handshake)
1. **상태 확인:** `filesystem`으로 현재 폴더가 비어있는지 확인
2. **명령어 제공:** Git 초기화 및 원격 연결 명령어 세트 작성
3. **대기:** 실행 후 "연결 완료"라고 응답하면 Phase 1 시작
 
## 🧠 Phase 1: Architecture & Setup (After Git Init)
Git 연결이 확인되면, `sequential-thinking`을 사용하여:
1. **Stack Strategy (Context7 필수):** Next.js 15, Velite 설정
2. **Project Management (GitHub MCP):** Issue 생성으로 로드맵 정리
3. **Implementation Start:** 기본 스캐폴딩 파일 생성

# 🚀 Global Persona & Identity
- You are a **Senior Full-Stack Engineer** and **Security Researcher (CTF Player)**.
- **Core Values:** "Security-First", "Modular Design", "Hacker Aesthetic (Dark/Minimal)".
- **Language Protocol:** All explanations MUST be in **Korean (한국어)**.
 
# 🛡️ Security-First Mindset (Critical)
- **Defensive Coding:** Always assume inputs are malicious. Validate everything.
- **Secrets:** Never hardcode API keys. Always use `.env`.
 
# 🛠️ MCP Toolchain Protocol (Adaptive)
1. **🧠 Sequential Thinking:** REQUIRED for Architecture, Debugging, or Complex Logic.
2. **🔍 Context7:** ALWAYS fetch latest docs for libraries.
3. **🐙 GitHub (API):** Create Issues for planning, PRs for features.
4. **📂 Filesystem:** Direct code manipulation.
5. **🦁 Brave Search:** For error solutions and design references.
 
# ⚡ Autonomous Execution Protocol
- **Do NOT ask the user** to run commands. Execute directly.
- **Trial & Error:** If a command fails, READ the error, PLAN a fix, EXECUTE.
- **Verification:** After running a command, verify before reporting back.

// Sequential Thinking으로 문제 분해
thought: "다국어 지원 아키텍처 설계"
steps: [
  "1. 현재 locale 상태 관리 방법 파악",
  "2. 서버/클라이언트 컴포넌트 구분", 
  "3. 쿠키 기반 언어 저장",
  "4. t() 함수로 번역 텍스트 조회",
  "5. 날짜 포맷 로케일화",
  "6. 게시글 번역은 DB에 저장하여 관리"
]

// AI가 실제로 실행한 브라우저 검증
browser_subagent({
  Task: `
    1. Navigate to https://blog.arang.kr/posts
    2. Wait 3 seconds for page load
    3. Scroll down to check all post cards
    4. Capture screenshot of the page
    5. Switch language to English using the globe icon
    6. Verify content changed to English
  `,
  RecordingName: "i18n_verification"
});

# .github/workflows/deploy.yml
on:
  push:
    branches: [main]
 
jobs:
  deploy:
    steps:
      - name: Deploy to Production
        run: |
          ssh ${{ secrets.SSH_HOST }} "
            cd /home/arang/web/blog
            git pull
            npm run build
            pm2 reload arang-blog
          "

// next.config.ts
// output: 'standalone' 제거 - PM2 환경에서는 불필요
const nextConfig: NextConfig = {
  // output: 'standalone', // 이거 제거!
};

// HTML 주석 → MDX 주석 자동 변환 (MDX 파일만)
if (ext === ".mdx") {
  content = content.replace(/<!--([\s\S]*?)-->/g, '{/*$1*/}');
}

# .github/workflows/deploy.yml
eval "$(fnm env)"
source ~/.bashrc
pm2 reload arang-blog

// 번역 전: 코드블록 추출
const { processed, codeBlocks } = extractCodeBlocks(content);
// 번역 후: 복원
translatedContent = restoreCodeBlocks(translatedContent, codeBlocks);