소개 이 프로젝트는 GitHub 의 기여 그래프와 유사한 React 에서 히트맵 캘린더를 만드는 과정을 안내합니다. 이러한 종류의 캘린더는 주어진 날짜의 활동 수준을 색상의 강도로 나타내어 시간 경과에 따른 활동 데이터를 시각화하는 매력적인 방법이 될 수 있습니다. 이 프로젝트를 완료하면 React 애플리케이션에서 캘린더 히트맵을 통합하고 사용하는 방법에 대한 명확한 이해를 얻게 될 것입니다. 👀 미리보기 🎯 작업 이 프로젝트에서는 다음을 배우게 됩니다. 히트맵 캘린더에 필요한 종속성을 설치하는 방법. 히트맵 컴포넌트의 기본 구조를 만드는 방법. 데이터를 필터링하기 위한 상태를 추가하는 방법. 히트맵을 채우기 위한 더미 데이터를 생성하는 방법. 더미 데이터를 사용하여 캘린더 히트맵을 렌더링하는 방법. 활동 수준에 따라 히트맵을 필터링하는 필터링 로직을 구현하는 방법. 히트맵 컴포넌트와 필터 버튼의 스타일을 지정하는 방법. 히트맵 컴포넌트를 메인 애플리케이션 파일에 통합하는 방법. 히트맵 캘린더를 보기 위해 애플리케이션을 실행하는 방법. 🏆 성과 이 프로젝트를 완료하면 다음을 수행할 수 있습니다. 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 컴포넌트를 구축하는 단계별 접근 방식을 제공했으며, 다양한 유형의 시계열 데이터 또는 사용자 활동을 표시하는 데 적용할 수 있습니다.