개요

깃허브 프로필을 꾸미다가 백준 티어는 뱃지가 있는데 프로그래머스는 없어서 아쉬웠다. 그러던 중 https://github.com/libtv/github-programmers-rank 의 레포를 발견하고 코드 분석 후 자바로 언어를 변경하여 뱃지 생성 프로젝트를 만들었다.

하지만 프로그래머스에서 문제를 풀고 바로 뱃지가 반영되기를 원해서 백준 허브와 연동해서 프로그래머스에서 문제를 풀면 바로 자동으로 뱃지가 생성 및 업데이트 되고 이를 깃허브 프로필에서 볼 수 있도록 하였다.

전제 조건

백준 허브가 깔려서 프로그래머스에서 문제를 풀면 깃허브에 자동으로 커밋되는 레포가 있어야 한다.

작동 원리

1. 프로그래머스에서 문제를 푼다.
2. 백준 허브를 통해 지정한 레포에 커밋이 된다.
3. GitHub Action 을 통해 프로그래머스 뱃지 생성 프로젝트가 dispatch 되면서 뱃지가 생성 및 업데이트 된다.
   
4. 깃허브 프로필에 프로그래머스 뱃지가 반영된다. ![Programmers Badge](https://raw.githubusercontent.com/{깃허브 아이디}/Programmers_Badge_Generator/main/result/result.svg)

How to install

1. Fork Project - 프로젝트를 포크합니다. (링크 클릭시 이동)

2. Apply Secrets - 시크릿에 키를 등록합니다.

Settings - Secrets and variables - Actions

• 커밋시 사용하기 위한 값

  • GH_PAT : GitHub Personal Access Token 값 입니다. (처음 한번만 볼 수 있기 때문에 복사해서 메모장에 붙여둡니다.)

    • 발급 방법

      1. 오른쪽 위의 내 프로필 사진 클릭

      2. Settings 클릭

      3. 왼쪽 제일 아래에 있는 Developer settings 클릭

      4. Personal access tokens - Tokens (classic) 클릭

      5. 오른쪽 위의 Generate new token(classic) 클릭

      6. 기억할 토큰 이름 Note 에 입력

      7. Expiration 만료 기간 지정

      8. Select scopes - repo workflow 선택

      9. generate token 클릭 후 토큰 값 복사해서 메모장에 붙여놓기

  • GIT_EMAIL : 깃허브 이메일

  • GIT_NAME : 깃허브 이름

• 프로그래머스 정보를 가져오기 위한 값

  • PROGRAMMERS_TOKEN_ID : 프로그래머스 아이디 값

  • PROGRAMMERS_TOKEN_PW : 프로그래머스 패스워드 값

3. set Github Action - 깃허브 액션을 설정합니다.

1. 화면 위쪽 가운데 있는 Actions 클릭

2. understand 클릭

3. 왼쪽에 programmers_badge_action 클릭 후 Enable workflow 클릭

4. 백준 허브로 코딩테스트 문제 자동 커밋되는 레포로 이동

1. Settings 클릭

2. Secrets and variables - Actions 에 GH_PAT 값 추가

3. Actions 클릭

4. set up a workflow yourself 클릭

5. 밑의 dispatch-workflow.yml 복붙 후 yml 내용 중 깃허브 이름 부분 변경

name: dispatch-workflow

on:
 push:
   branches:
     - main

jobs:
 dispatch:
   runs-on: ubuntu-latest
   steps:
     - name: Trigger repository dispatch
       uses: peter-evans/repository-dispatch@v1
       with:
         token: ${{ secrets.GH_PAT }}
         repository: {자기 깃허브 이름}/Programmers_Badge_Generator
         event-type: trigger-workflow

6. 오른쪽 위의 Commit changes.. 클릭 후 커밋

7. Actions 클릭 후 잘 돌아가는지 확인

5. 프로그래머스 문제 풀기

1. 프로그래머스 접속 후 아무 문제 풀기
   

2. 백준 허브 커밋 후 자동으로 dispatch 되는지 확인

6. 뱃지 생성 확인

1. 포크했던 Programmers_Badge_Generator 레포로 이동

2. result 폴더에 result.svg 생성된 결과 자신의 정보와 맞는지 확인

7. 깃허브 프로필에 프로그래머스 뱃지 등록

1. 자신의 이름과 같은 레포의 README.md 수정

2. ![Programmers Badge](https://raw.githubusercontent.com/{자기신 깃허브 아이디}/Programmers_Badge_Generator/main/result/result.svg) 삽입

   캐시로 인해 뱃지 파일은 변경되었지만 깃허브 프로필에는 반영되지 않을 수 있습니다.

3. 뱃지 생성 확인

8. 프로그래머스에서 문제를 풀면 자동으로 뱃지가 업데이트된다.

이 프로젝트를 개선하고 싶으시거나 문의 사항 있으면 댓글과 pull request 해주시면 감사하겠습니다.