GitHub Issue로 사용자 피드백 받기

sumi-0011·2024년 9월 3일

Feedback GitAnimals github api github issue

🐱 GitAnimals

목록 보기

1/1

"이 버그 좀 고쳐주세요!", "이런 기능이 있으면 좋겠어요!"

GitAnimals 서비스를 운영하다 보니 이런 피드백들이 종종 들어오곤 했어요.
특히 GitHub를 기반으로 한 서비스이었기 때문에, 사용자들이 직접 GitHub Issue를 통해 의견을 제시하는 경우도 있었죠.

그러다 문득 이런 생각이 들었어요. "잠깐, 이 모든 피드백을 한 곳에서 관리할 수 없을까?" 🤔

사용자들의 소중한 의견을 놓치지 않고, 효율적으로 관리하고 싶었거든요.
그래서 사용자 피드백을 자동으로 GitHub Issue로 등록하는 기능을 만들기로 했습니다.

채널톡 같은 방법도 있었지만, 우리 서비스만의 특별한 무언가를 만들고 싶었어요.

GitHub API와 친해지기

이 기능을 구현하려면 먼저 GitHub API를 사용해야 했습니다.
Issue를 생성하려면 Personal Access Token이 필요했는데, 이걸 만드는 과정이 꽤 조금 복잡했습니다.

Personal Access Token 생성하기

GitHub 사이트에 로그인합니다.
오른쪽 상단에 있는 자신의 프로필 아이콘을 클릭하고 Settings를 선택합니다.
왼쪽 메뉴에서 Developer settings를 클릭합니다.
Personal access tokens를 선택하고 Generate new token을 클릭합니다.
Token description에 'Auto create issue token'과 같이 용도를 적어줍니다.
Select scopes에서 repo만 선택합니다. (Issue 관리는 repo 권한에 포함되어 있습니다)
Generate 버튼을 클릭하면 토큰이 생성됩니다.

주의할 점은, 토큰은 생성 직후에만 볼 수 있기 때문에, 꼭 안전한 곳에 저장해두어야 합니다.

이렇게 만든 토큰으로 GitHub API를 사용할 수 있게 되었습니다. 이제 본격적으로 코드를 작성해볼 차례입니다.

코드로 구현하기

자, 이제 본격적으로 코드를 작성할 차례예요.
저는 API 호출을 위한 함수를 만들었어요.

const ISSUE_TOKEN = process.env.NEXT_PUBLIC_ISSUE_TOKEN;
const POST_ISSUE_URL = '/repos/{owner}/{repo}/issues';

interface PostIssueRequest {
  title: string;
  body: string;
  assignees?: string[];
  labels?: string[];
}

async function postIssue(request: PostIssueRequest) {
  const response = await fetch(POST_ISSUE_URL, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${ISSUE_TOKEN}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(request),
  });

  if (!response.ok) {
    throw new Error('Failed to post issue');
  }

  return response.json();
}

이 함수는 Issue의 제목, 내용, 담당자, 라벨을 받아서 GitHub에 새 Issue를 생성합니다.

1단계에서 만든 personal access token을 API를 호출할 때 header에 추가하여 넘겨줍니다.
그리고, 등록할 issue 관련 데이터는 body에 담아 POST API call을 합니다.

GitHub API에서는 /repos/{owner}/{repo}/issues라는 경로로 POST 요청을 보내 issue를 생성할 수 있습니다.

저의 경우에는 repository url이 https://github.com/git-goods/gitanimals였기 때문에 https://api.github.com/repos/git-goods/gitanimals/issues 경로로 요청을 보냈습니다.

또한 보안을 위해 토큰은 환경변수로 관리했으며,
이 함수를 더 쉽게 사용하기 위해 React Query의 useMutation을 활용했습니다.

export const usePostIssue = (options?: UseMutationOptions<unknown, unknown, PostIssueRequest>) =>
  useMutation({ mutationFn: postIssue, ...options });

이렇게 하면 컴포넌트에서 아주 간단하게 Issue를 생성할 수 있어요.

const { mutate } = usePostIssue();

const onSubmit = () => {
  const username = userData?.username;

  mutate(
    { ...content, assignees: [username] },
    {
      onSuccess() {
        setIsOpen(false);
        initContent();
        alert('Thank you for your feedback!');
      },
    },
  );
};

사용자가 피드백 제출 버튼을 누르면 onSubmit 함수가 실행되고, GitHub에 새 Issue가 생성되는 거예요!

마무리하며

이 기능을 구현하면서 정말 많은 것을 배웠어요. GitHub API 활용부터 React Query로 비동기 처리하는 방법까지, 새로운 기술을 적용해볼 수 있어 즐거웠죠.

특히 가장 만족스러운 점은 우리 서비스의 특성을 살린 피드백 시스템을 만들었다는 거예요. GitHub 기반 서비스니까 피드백도 GitHub Issue로 받는 거죠. 이런 작은 디테일이 사용자들에게 우리 서비스의 정체성을 더 잘 보여줄 수 있을 것 같아요.

실제로 지금도 사용자 피드백이 꾸준히 들어오고 있어요. 궁금하다면 GitAnimals Github Issue에서 직접 확인해볼 수 있어요. 우리 사용자들의 생생한 목소리를 들을 수 있답니다.

혹시 이 기능을 어떻게 구현했는지 자세히 알고 싶다면, PR Link에서 전체 구현 과정을 확인할 수 있어요.

이렇게 서비스에 녹아든 작은 기능 하나가 사용자 경험을 크게 바꿀 수 있다는 걸 새삼 느꼈어요. 서비스의 특성을 살린 독특한 기능 하나가 얼마나 큰 변화를 가져올 수 있는지, 이번 경험을 통해 확실히 알 수 있었죠.

그리고 추가로, 피드백을 누가 제출했는지 트래킹하기 위해 Google Sheets를 이용한 로그 수집 시스템도 만들어봤어요.
이 이야기는 다음 기회에 자세히 들려드릴게요. 기대해 주세요! 🍀

sumi-0011