Claude Code Plugins

Community-maintained marketplace

Feedback

code-changelog

@dayoumin/Skills
0
0

AI가 만든 모든 코드 변경사항을 reviews 폴더에 기록하고 간단한 HTML 뷰어로 웹 브라우저에서 실시간 확인할 수 있습니다. 매 수정마다 문서가 생성되고 Python 서버로 즉시 확인 가능합니다.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name code-changelog
description AI가 만든 모든 코드 변경사항을 reviews 폴더에 기록하고 간단한 HTML 뷰어로 웹 브라우저에서 실시간 확인할 수 있습니다. 매 수정마다 문서가 생성되고 Python 서버로 즉시 확인 가능합니다.

Code Changelog with Simple HTML Viewer

AI가 생성한 모든 코드 변경사항을 reviews 폴더에 기록하고, 간단한 HTML 뷰어로 브라우저에서 실시간으로 확인할 수 있는 솔루션입니다.

🎯 핵심 기능

  • ✅ 자동 문서 생성: 매 수정마다 reviews 폴더에 MD 파일 생성
  • ✅ 간단한 HTML 뷰어: 설치 불필요, Python만으로 작동
  • ✅ 자동 index.html 업데이트: 새 문서 추가 시 자동으로 파일 목록 갱신
  • ✅ 실시간 서버: http://localhost:4000에서 즉시 확인
  • ✅ 다크 모드 UI: GitHub 스타일의 아름다운 문서 사이트
  • ✅ 네비게이션: 자동 파일 목록 생성으로 쉬운 탐색
  • ✅ Markdown 렌더링: 코드 하이라이팅 및 diff 표시
  • ✅ 최신 문서 우선: 가장 최근 작성한 문서가 기본으로 표시됨

🚀 빠른 시작

1. 초기 설정 (최초 1회)

# 설치 불필요! Python만 있으면 OK
python3 create_changelog.py

2. 개발하면서 사용

from code_changelog_tracker import CodeChangeLogger

# 로거 생성
logger = CodeChangeLogger("프로젝트명", user_request="요구사항")

# 변경사항 기록
logger.log_file_creation("main.py", "코드", "이유")
logger.save_and_build()  # 저장!

3. 문서 서버 실행

# reviews 폴더에서 Python 서버 실행
cd reviews
python3 -m http.server 4000

# 브라우저에서 확인
# http://localhost:4000

또는 백그라운드 실행:

cd reviews && python3 -m http.server 4000 &

📁 프로젝트 구조

your-project/
├── reviews/                    # 문서 루트
│   ├── index.html             # HTML 뷰어 (자동 생성)
│   ├── README.md              # 홈페이지
│   ├── SUMMARY.md             # 네비게이션 (자동 생성)
│   │
│   ├── 20251020_140000.md    # 변경 이력 1
│   ├── 20251020_140530.md    # 변경 이력 2
│   ├── 20251020_141200.md    # 변경 이력 3
│   └── ...
│
├── code_changelog_tracker.py  # 로거 스크립트
└── create_changelog.py         # 변경사항 기록 스크립트

💡 사용 시나리오

시나리오 1: 연속 개발하면서 문서화

logger = CodeChangeLogger("로그인 기능")

# 첫 번째 작업
logger.log_file_creation("auth.py", "def login(): pass", "로그인 함수")
logger.save_and_build()
# → reviews/20251020_140000.md 생성
# → index.html 자동 업데이트 (파일 목록에 추가)
# → 기본 페이지가 20251020_140000.md로 변경

# 두 번째 작업
logger.log_file_modification("auth.py", "old", "new", "암호화 추가")
logger.save_and_build()
# → reviews/20251020_140530.md 생성
# → index.html 자동 업데이트 (파일 목록 갱신)
# → 기본 페이지가 20251020_140530.md로 변경

# 세 번째 작업
logger.log_file_creation("test_auth.py", "test code", "테스트")
logger.save_and_build()
# → reviews/20251020_141200.md 생성
# → index.html 자동 업데이트 (파일 목록 갱신)
# → 기본 페이지가 20251020_141200.md로 변경

# 브라우저에서 http://localhost:4000 방문
# → 최신 문서가 자동으로 표시됨!
# → 좌측 네비게이션에서 이전 버전들도 확인 가능

시나리오 2: 백그라운드 서버 실행

# 터미널 1: 문서 서버 실행 (계속 켜둠)
cd reviews && python3 -m http.server 4000

# 터미널 2: 개발 작업
python3 your_dev_script.py  # logger.save_and_build() 호출

# 브라우저 새로고침하여 최신 문서 확인!

시나리오 3: 팀 공유

# reviews 폴더를 팀원들과 공유
# GitHub Pages, Netlify 등에 배포
# 또는 내부 웹서버에 호스팅

🛠️ 구현 코드

code_changelog_tracker.py (메인 로거)

이미 생성된 파일 사용. 주요 메서드:

  • log_file_creation() - 파일 생성 기록
  • log_file_modification() - 파일 수정 기록
  • log_file_deletion() - 파일 삭제 기록
  • update_index_html() - index.html 파일 목록 자동 업데이트 ⭐ NEW!
  • save_and_build() - 저장 + SUMMARY 업데이트 + index.html 업데이트

reviews/index.html (HTML 뷰어)

자동으로 생성 및 업데이트됩니다! save_and_build() 호출 시 매번 최신 파일 목록으로 갱신됩니다.

제공 기능:

  • Markdown 자동 렌더링 (marked.js)
  • 다크 모드 UI (GitHub 스타일)
  • 파일 목록 네비게이션 (자동 업데이트)
  • 코드 하이라이팅
  • 최신 문서가 기본으로 표시됨
  • 활성 링크 하이라이트

📋 간단한 사용법

1단계: 변경사항 기록

# create_changelog.py 예시
from code_changelog_tracker import CodeChangeLogger

logger = CodeChangeLogger(
    "Daily Signal App - 회원 가입 기능",
    user_request="이메일/비밀번호 기반 회원 가입 구현"
)

# 파일 생성 기록
logger.log_file_creation(
    "lib/screens/signup_screen.dart",
    "SignUpScreen 코드...",
    "회원 가입 화면 구현"
)

# 파일 수정 기록
logger.log_file_modification(
    "lib/providers/auth_provider.dart",
    "old code",
    "new code",
    "signUp 메서드 추가"
)

# 저장
logger.save_and_build()

2단계: 서버 실행

cd reviews
python3 -m http.server 4000

3단계: 브라우저에서 확인

http://localhost:4000

🎨 HTML 뷰어 특징

다크 모드 UI

  • GitHub 스타일의 마크다운 렌더링
  • 코드 블록 하이라이팅
  • 반응형 레이아웃

네비게이션

  • 좌측에 파일 목록 자동 표시
  • 날짜/시간별 정렬
  • 클릭으로 쉬운 이동

Markdown 렌더링

  • 제목, 목록, 코드 블록 지원
  • Diff 표시
  • 이모지 지원

💻 명령어 가이드

서버 시작

cd reviews
python3 -m http.server 4000

포트 변경

python3 -m http.server 3000
python3 -m http.server 8080

백그라운드 실행

cd reviews && python3 -m http.server 4000 &

서버 종료

# 포그라운드: Ctrl+C
# 백그라운드: 프로세스 ID 찾아서 종료
lsof -ti:4000 | xargs kill -9

🔧 포트 설정

기본 포트: 4000

python3 -m http.server 4000
# → http://localhost:4000

다른 포트 사용

python3 -m http.server 3000
# → http://localhost:3000

포트 충돌 해결

# 다른 포트 사용
python3 -m http.server 4001

# 또는 기존 프로세스 종료
lsof -ti:4000 | xargs kill -9

🌐 배포 옵션

GitHub Pages

# reviews 폴더를 gh-pages 브랜치에 푸시
git subtree push --prefix reviews origin gh-pages

Netlify

# Netlify에 reviews 폴더 배포
# Build command: (없음)
# Publish directory: reviews

Vercel

# Vercel에 reviews 폴더 배포
vercel reviews

📝 Best Practices

  1. 서버 항상 실행: 개발 중에는 서버를 계속 켜두기
  2. 작은 단위: 각 작업을 작은 단위로 나누어 문서화
  3. 명확한 제목: 프로젝트명을 명확하게 작성
  4. 정기적 백업: reviews 폴더를 Git으로 관리
  5. 브라우저 북마크: http://localhost:4000 북마크 추가

🎓 활용 예시

회원 가입 기능 구현

logger = CodeChangeLogger(
    "Daily Signal App - 회원 가입",
    user_request="이메일/비밀번호 회원 가입 기능"
)

# CustomTextField 생성
logger.log_file_creation(
    "lib/widgets/custom_text_field.dart",
    "CustomTextField 코드...",
    "재사용 가능한 입력 필드 위젯"
)

# SignUpScreen 생성
logger.log_file_creation(
    "lib/screens/signup_screen.dart",
    "SignUpScreen 코드...",
    "회원 가입 화면 구현"
)

# AuthProvider 수정
logger.log_file_modification(
    "lib/providers/auth_provider.dart",
    "old code",
    "new code with signUp",
    "signUp 메서드 추가"
)

# 저장
logger.save_and_build()

# 서버에서 확인: http://localhost:4000

🚨 문제 해결

포트가 이미 사용 중

# 다른 포트 사용
python3 -m http.server 4001

# 또는 프로세스 종료
lsof -ti:4000 | xargs kill -9

파일이 표시되지 않음

# index.html이 있는지 확인
ls reviews/index.html

# 없으면 logger.save_and_build() 호출 시 자동 생성됨

중요: logger.save_and_build()를 호출하면 index.html이 자동으로 업데이트됩니다!

  • 새 마크다운 파일 추가 시 파일 목록 자동 갱신
  • 최신 파일이 기본 페이지로 자동 설정
  • 브라우저 새로고침만으로 최신 문서 확인 가능

Markdown이 렌더링되지 않음

  • 브라우저 캐시 삭제 (Cmd+Shift+R / Ctrl+Shift+R)
  • 서버 재시작
  • index.html이 최신인지 확인 (save_and_build() 재실행)

🎯 장점

설치 불필요

  • Node.js, npm, HonKit 설치 불필요
  • Python만 있으면 즉시 사용 가능
  • 의존성 없음

빠른 실행

  • 1초 안에 서버 시작
  • 즉시 문서 확인 가능

간단한 배포

  • reviews 폴더만 배포하면 끝
  • 정적 사이트로 어디든 호스팅 가능

자동 업데이트 ⭐ NEW!

  • save_and_build() 호출 시 index.html 자동 갱신
  • 수동 편집 불필요
  • 항상 최신 파일 목록 유지
  • 최신 문서가 기본 페이지로 자동 설정

📊 비교: HonKit vs Simple HTML

기능 HonKit Simple HTML
설치 npm, Node.js 필요 Python만 필요
빌드 시간 5-10초 즉시
의존성 많음 없음
커스터마이징 높음 중간
검색 기능 있음 브라우저 검색
배포 _book 폴더 reviews 폴더

라이선스

MIT License

설치 불필요! Python으로 바로 실행하고 웹 브라우저에서 확인하세요! 🎉