🌐 Translation Automation Project

Angular 프로젝트에서 번역 키 추출부터 Google Sheets 생성, 번역 완료까지의 전체 워크플로우를 자동화하는 시스템입니다.

🚀 간단한 번역 워크플로우

👨‍💻 개발자

1. 새 기능 개발 후 PR 생성 → 자동으로 구글 시트 생성
2. 번역팀으로부터 "번역 완료" 알림 받기
3. 한 줄 명령어 실행: npm run merge-translations [시트ID]
4. 완료! 🎉

🌐 번역팀

1. 구글 시트에서 번역 작업
2. 완료 후 개발팀에 시트 ID와 함께 알림
3. 끝! ✅

💰 비용: 무료 (수동 실행, 정기 체크 없음)
🎯 복잡도: 최소화 (한 줄 명령어)
🔑 접근 권한: 번역팀은 구글 시트만 필요

✨ 주요 기능

• 실시간 번역 키 자동 추출: 코드 작성 시 자동으로 번역 키를 JSON 파일에 추가
• Git Hook 번역 무결성 검사: 커밋 시 번역 파일 키 일치성 자동 검사
• PR 기반 Google Sheets 자동 생성: PR 생성 시 새로운 번역 키를 감지하여 구글 시트 자동 생성
• GitHub Actions 자동화: PR 댓글에 번역 시트 링크 자동 추가
• Material Design UI: 현대적이고 전문적인 관리 대시보드

🛠️ 기술 스택

• Frontend: Angular 20, ngx-translate, Angular Material
• API: Google Sheets API, Google Drive API
• CI/CD: GitHub Actions, Husky
• 언어: TypeScript, Node.js, SCSS

📦 설치 방법

# 저장소 클론
git clone https://github.com/pyoseunghoon/auto_extract_merge_translation.git
cd auto_extract_merge_translation

# 의존성 설치
npm install

# Husky 설정 (Git hooks)
npm run prepare

🔑 Google API 설정

1. Google Service Account 생성

1. Google Cloud Console에서 새 프로젝트 생성
2. Google Sheets API 및 Google Drive API 활성화
3. Service Account 생성 및 JSON 키 다운로드

2. GitHub Secrets 설정

Repository Settings > Secrets and variables > Actions에서 추가:

• GOOGLE_SERVICE_ACCOUNT: Service Account JSON 내용
• GOOGLE_DRIVE_FOLDER_ID: Google Drive 폴더 ID (선택사항)

🚀 사용법

개발 모드 실행

# 개발 서버 시작
npm start

# 실시간 번역 키 감시와 함께 실행
npm run dev-with-extract

번역 관련 명령어

# 실시간 번역 키 감시
npm run simple-watch

# 전체 파일 스캔하여 번역 키 추출
npm run auto-extract

# 번역 파일 무결성 검사
npm run check-translation

# 번역 키 자동 정렬
npm run sort-translation-keys

# PR에서 새로운 번역 키 추출 (로컬 테스트)
npm run extract-keys

# Google Sheet에서 번역 머지 (번역팀 완료 후)
npm run merge-translations SPREADSHEET_ID

🔄 워크플로우

1. 개발 단계

// 새로운 번역 키 작성
<span>{{ 'USER.WELCOME_MESSAGE' | translate }}</span>

2. 자동화 단계

• 실시간 감시 스크립트가 새 키를 감지
• 자동으로 ko.json, en.json, ja.json에 키 추가
• Git 커밋 시 Husky가 번역 파일 무결성 검사

3. PR 단계

• PR 생성 시 GitHub Actions 자동 실행
• Git diff로 새로운 번역 키 추출
• Google Sheets 자동 생성
• PR 댓글에 시트 링크 추가

4. 번역 단계

• 번역팀이 Google Sheets에서 번역 작업
• 번역팀이 개발팀에 완료 알림 (시트 ID 포함)
• 개발자가 npm run merge-translations SHEET_ID 실행
• Git 커밋 & 푸시로 완료

📁 프로젝트 구조

auto_extract_merge_translation/
├── src/
│   ├── app/                    # Angular 앱
│   └── assets/i18n/           # 번역 파일
│       ├── ko.json
│       ├── en.json
│       └── ja.json
├── scripts/                   # 자동화 스크립트
│   ├── auto-extract-keys.js   # 번역 키 자동 추출
│   ├── simple-watch.js        # 실시간 파일 감시
│   ├── pr-translation-extractor.js  # PR 번역 키 추출
│   ├── create-translation-sheet.js  # Google Sheets 생성
│   ├── merge-translations.ts  # 번역 머지
│   └── check-translation-integrity.js  # 무결성 검사
├── .github/workflows/         # GitHub Actions
└── .husky/                    # Git hooks

🎯 지원하는 번역 패턴

// Template에서
{{ 'KEY.NAME' | translate }}

// Component에서
this.translate.get('KEY.NAME')
this.translate.instant('KEY.NAME')
translate.get('KEY.NAME')
translate.instant('KEY.NAME')

🔧 설정 파일

scripts/config.ts에서 다음 설정 가능:

• 지원 언어 목록
• 파일 스캔 패턴
• Google API 설정
• 성능 최적화 설정

🤝 기여하기

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 라이선스

MIT License - 자세한 내용은 LICENSE 파일 참조

🆘 문제 해결

자주 발생하는 문제들

Q: GitHub Actions에서 Google API 인증 실패 A: Repository Secrets에 GOOGLE_SERVICE_ACCOUNT가 올바르게 설정되었는지 확인

Q: 실시간 감시가 작동하지 않음 A: npm run simple-watch 대신 npm run dev-watch 사용

Q: 번역 키가 추출되지 않음 A: 번역 키 패턴이 올바른지 확인 ('KEY.NAME' | translate)

Q: Git hook이 작동하지 않음 A: npm run prepare 명령어로 Husky 재설정

📚 자세한 가이드

• 간단한 번역 워크플로우: 전체 프로세스 요약
• 번역팀 가이드: 번역팀을 위한 상세 설명

📧 연락처

프로젝트 관련 문의: GitHub Issues