React 로 GitHub 히트맵 기여도 만들기

🎯 작업

이 프로젝트에서는 다음을 배우게 됩니다.

• 히트맵 캘린더에 필요한 종속성을 설치하는 방법.
• 히트맵 컴포넌트의 기본 구조를 만드는 방법.
• 데이터를 필터링하기 위한 상태를 추가하는 방법.
• 히트맵을 채우기 위한 더미 데이터를 생성하는 방법.
• 더미 데이터를 사용하여 캘린더 히트맵을 렌더링하는 방법.
• 활동 수준에 따라 히트맵을 필터링하는 필터링 로직을 구현하는 방법.
• 히트맵 컴포넌트와 필터 버튼의 스타일을 지정하는 방법.
• 히트맵 컴포넌트를 메인 애플리케이션 파일에 통합하는 방법.
• 히트맵 캘린더를 보기 위해 애플리케이션을 실행하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

• React 애플리케이션에 캘린더 히트맵을 통합합니다.
• React 컴포넌트에서 상태를 관리하고 데이터를 필터링합니다.
• React 와 CSS 를 사용하여 캘린더 히트맵을 렌더링하고 스타일을 지정합니다.
• 시각화를 위해 더미 데이터를 생성하고 채우는 과정을 이해합니다.
• 히트맵 캘린더 애플리케이션을 실행하고 봅니다.

필요한 의존성 설치

히트맵 캘린더의 기반은 새로운 React 애플리케이션입니다.

기능:

• 프로젝트 종속성 설치.
• 히트맵을 위해 react-calendar-heatmap 라이브러리 설치.
• 간편한 날짜 조작을 위해 date-fns 설치.

프로젝트 종속성을 설치하려면 다음 명령을 사용하십시오.

cd github-heatmap-calendar
npm install

캘린더 히트맵 기능을 추가하려면 React 관련 라이브러리와 날짜 유틸리티 라이브러리를 설치해야 합니다. (해당 라이브러리는 이미 프로젝트에 포함되어 있으며 설치할 필요가 없습니다.)

npm install react-calendar-heatmap date-fns

히트맵 컴포넌트 셸 생성

어떤 기능도 없이 히트맵 컴포넌트의 기본 구조를 먼저 만들겠습니다.

기능:

• 히트맵 컴포넌트를 위한 새 파일 생성.
• 자리 표시자 콘텐츠로 함수형 컴포넌트 정의.

코드:

// src/GitHubCalendar.js
import React from "react";

const GitHubCalendar = () => {
  return (
    <div>
      {/* 히트맵 자리 표시자 */}
      <div>Heatmap will go here</div>
    </div>
  );
};

export default GitHubCalendar;

필터링을 위한 상태 추가

히트맵을 채우기 전에 사용자 상호 작용에 따라 데이터를 필터링하기 위한 상태를 추가해 보겠습니다.

기능:

• useState 훅을 가져옵니다.
• colorFilter 상태 변수를 초기화합니다.

코드:

// src/GitHubCalendar.js
import React, { useState } from "react";

const GitHubCalendar = () => {
  const [colorFilter, setColorFilter] = useState(null);

  return (
    <div>
      {/* 히트맵 자리 표시자 */}
      <div>Heatmap will go here</div>
    </div>
  );
};

export default GitHubCalendar;

더미 데이터 생성

활동을 시뮬레이션하기 위해 더미 데이터를 생성합니다. 실제 애플리케이션에서는 이 데이터를 실제 데이터로 대체할 것입니다.

기능:

• date-fns를 사용하여 날짜 범위를 생성합니다.
• 각 날짜에 대한 더미 데이터로 배열을 채웁니다.

코드:

// src/GitHubCalendar.js
import { subYears, isBefore, format } from "date-fns";

// GitHubCalendar 컴포넌트 내부에 추가
const startDate = subYears(new Date(), 1);
const endDate = new Date();
const values = [];
let currentDate = startDate;

while (isBefore(currentDate, endDate)) {
  values.push({
    date: format(currentDate, "yyyy-MM-dd"),
    count: Math.floor(Math.random() * 5)
  });
  currentDate = new Date(currentDate.setDate(currentDate.getDate() + 1));
}

캘린더 히트맵 렌더링

이제 CalendarHeatmap 컴포넌트를 포함하고 더미 데이터를 전달합니다.

기능:

• 데이터로 히트맵을 렌더링합니다.
• 카운트를 기반으로 색상 스케일을 정의합니다.

코드:

// src/GitHubCalendar.js
import CalendarHeatmap from "react-calendar-heatmap";
import "react-calendar-heatmap/dist/styles.css";

// GitHubCalendar 컴포넌트의 return 문 안에 추가
<CalendarHeatmap
  startDate={startDate}
  endDate={endDate}
  values={values}
  classForValue={(value) => {
    if (!value || value.count === 0) {
      return "color-empty";
    }
    return `color-scale-${value.count}`;
  }}
  showWeekdayLabels={true}
/>;

필터링 로직 구현

클릭 시 히트맵을 필터링하는 각 활동 레벨에 대한 버튼을 생성합니다.

기능:

• colorFilter 상태를 설정하는 버튼을 추가합니다.
• 선택된 필터를 기반으로 히트맵 데이터를 필터링합니다.

코드:

// src/GitHubCalendar.js
// return 문에서 CalendarHeatmap 컴포넌트 아래에 추가
<div className="filter-bar">
  {Array.from({ length: 5 }, (_, i) => (
    <button
      key={i}
      className={`filter-btn color-scale-${i}`}
      onClick={() => setColorFilter(colorFilter === i ? null : i)}
    >
      Filter {i}
    </button>
  ))}
</div>

컴포넌트 스타일 지정

데이터를 시각적으로 전달하기 위해 히트맵 및 필터 버튼에 대한 CSS 를 정의합니다.

기능:

• 히트맵 색상 및 버튼 스타일 지정을 위한 CSS 규칙을 추가합니다.

코드:

/* src/App.css */
/* 여기에 CSS 규칙을 추가하세요 */
.color-empty {
  fill: #ebedf0; /* 기여 없음 - 흰색 */
}
.color-scale-0 {
  fill: #ebedf0; /* 가장 밝은 녹색 - 가장 밝은 녹색으로 변경하세요 */
}
.color-scale-1 {
  fill: #9be9a8; /* 밝은 녹색 */
}
.color-scale-2 {
  fill: #40c463; /* 중간 녹색 */
}
.color-scale-3 {
  fill: #30a14e; /* 어두운 녹색 */
}
.color-scale-4 {
  fill: #216e39; /* 가장 어두운 녹색 */
}

.filter-bar {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.filter-btn {
  background: none;
  border: 2px solid transparent;
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}

/* 필터 버튼에 동일한 색상 적용 */
.filter-btn.color-scale-0 {
  border-color: #ebedf0;
}
.filter-btn.color-scale-1 {
  border-color: #9be9a8;
}
.filter-btn.color-scale-2 {
  border-color: #40c463;
}
.filter-btn.color-scale-3 {
  border-color: #30a14e;
}
.filter-btn.color-scale-4 {
  border-color: #216e39;
}

.filter-btn:hover,
.filter-btn:focus {
  background-color: #ddd;
}

.reset {
  border-color: #000; /* Reset 버튼 테두리 색상 */
}

/* 활성 필터 강조 */
.filter-btn.active {
  border-color: #666; /* 활성 버튼 테두리 색상 */
  font-weight: bold;
}

색상 스케일 및 버튼 스타일 설정에 대한 지침은 이전 CSS 예제를 참조하십시오.

애플리케이션 조립

히트맵 컴포넌트를 주 애플리케이션 파일에 통합합니다.

기능:

• GitHubCalendar 컴포넌트를 App.js로 가져옵니다.
• 애플리케이션에서 GitHubCalendar 컴포넌트를 렌더링합니다.

코드:

// src/App.js
import React from "react";
import "./App.css";
import GitHubCalendar from "./GitHubCalendar";

function App() {
  return (
    <div className="App">
      <GitHubCalendar />
    </div>
  );
}

export default App;

애플리케이션 실행

모든 구성 요소가 준비되었으니, 히트맵 캘린더가 작동하는 모습을 볼 차례입니다.

기능:

• 애플리케이션을 실행하고 히트맵 캘린더를 확인합니다.

명령어:

npm start

이 명령은 React 애플리케이션을 컴파일하고 기본 웹 브라우저에서 8080 포트로 엽니다.

요약

축하합니다! GitHub 의 기여 그래프와 유사한 히트맵 캘린더를 포함하는 React 애플리케이션을 방금 생성했습니다. 프로젝트 초기화부터 시작하여 필요한 라이브러리를 설치하고, 히트맵 컴포넌트를 생성하고, 필터링 기능을 구현하고, 컴포넌트의 스타일을 지정했습니다. 이 프로젝트는 React 에서 복잡한 UI 컴포넌트를 구축하는 단계별 접근 방식을 제공했으며, 다양한 유형의 시계열 데이터 또는 사용자 활동을 표시하는 데 적용할 수 있습니다.