Github API로 내 기여도 보여주기

avatar
kidow
@kidow
Github API로 내 기여도 보여주기
태그
Github
API
설명
내가 얼마나 오픈 소스 기여, 사이드 프로젝트 활동을 열심히 하는지 어필해 보고 싶다면
배포
배포
수정일
Jul 31, 2023 09:35 AM
생성일
Jul 15, 2023 08:48 AM
저는 이 웹 사이트 홈에서 다음처럼 깃허브 링크를 보여주고 있는데요,
notion image
오른쪽에 보이는 것이 바로 저의 깃허브 오픈소스 기여도를 보여주는 깃허브 컨트리뷰션 캘린더입니다.
한 열당 7개의 행이 있고, 한 칸은 하루를 의미합니다. 초록색이 짙을 수록 많은 활동을 했다고 보시면 됩니다. 꼭 초록색이 아니어도 직접 색상을 커스텀할 수도 있습니다.
이런 UI를 구현하려면 2가지 준비물이 필요합니다.
  1. 깃허브 기여도를 가져올 토큰
  1. UI를 보여줄 도구
💡
이 글에서는 어떻게 깃허브 컨트리뷰션 캘린더를 직접 구성하는지 다뤄봅니다.

1. 깃허브 토큰 등록

깃허브 데이터를 가져올 것이기 때문에 깃허브의 허락이 필요합니다. 깃허브는 토큰을 발행함으로써 외부 사용자에게 API 사용을 허락합니다.
깃허브에 들어가서 오른쪽 상단 메뉴를 통해 Settings으로 들어갑니다.
깃허브 오른쪽 상단의 메뉴 클릭 시
깃허브 오른쪽 상단의 메뉴 클릭 시
왼쪽 사이드 바 가장 하단에 있는 Developer Settings으로 들어갑니다.
깃허브 프로필 설정
깃허브 프로필 설정
Personal access tokens - Tokens로 들어갑니다. 여기서 Generate new token으로 새 토큰을 생성해 봅시다. 두 가지 유형의 선택지가 있다면 classic으로 생성합니다.
notion image
간단하게 토큰의 이름을 지어주고 만료 기한은 없음으로, 접근 범위는 public_repo만 지정해 줍시다.
새 토큰 생성
새 토큰 생성
이렇게 해서 토큰이 생성되었습니다. 이 토큰을 환경 변수에 저장해 둡니다.

2. UI를 보여줄 도구

깃허브 컨트리뷰션 캘린더를 직접 구현하기는 골치 아픈 일입니다. 대신 제공되는 라이브러리를 사용합니다.
npm install react-github-contribution-calendar
API 호출은 간단합니다. React 기준으로 다음과 같이 적용하면 끝입니다.
import { useEffect, useState } from 'react'
import dayjs from 'dayjs'
import Calendar from 'react-github-contribution-calendar'

function GCC() {
	const [data, setData] = useState<Record<string, number>>({})

	useEffect(() => {
    fetch('https://api.github.com/graphql', {
      method: 'POST',
      headers: new Headers({
        Authorization: `Bearer ${GITHUB_TOKEN}`
      }),
      body: JSON.stringify({
        query: `
        query($userName:String!) {
          user(login: $userName){
            contributionsCollection {
              contributionCalendar {
                totalContributions
                weeks {
                  contributionDays {
                    contributionCount
                    date
                  }
                }
              }
            }
          }
        }
        `,
        variables: { userName: 'kidow' }
      })
    })
      .then((res) => res.json())
      .then((json) => {
        let result = {}
        for (const week of json?.data?.user?.contributionsCollection
          ?.contributionCalendar?.weeks) {
          for (const day of week.contributionDays) {
            result[day.date] = day.contributionCount
          }
        }
        setData(result)
      })
      .catch((err) => console.error('github error', err))
  }, [])
	return (
		<Calendar
	      values={data}
	      until={dayjs().format('YYYY-MM-DD')}
	      weekLabelAttributes={{}}
	      monthLabelAttributes={{}}
	      panelAttributes={{}}
	      panelColors={['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']}
	    />
	)
}
위와 같이 fetch에서 header에 발급받은 토큰을, GraphQL 쿼리를 body로, 여러분의 유저명을 변수로 전달하면 완료입니다!
비어 있는 3개의 attribute들은 타입 오류로 인해 강제로 넣은 것이고, until은 오늘 날짜, panelColors는 5단계에 걸쳐 칠해질 한 칸의 색을 넣으시면 됩니다.

참고 사이트

 
 
  • Github
  • API