feat: 잔디그래프 UI 구현

Author: moo1677

app/globals.css

@@ -42,3 +42,33 @@
   /* 텍스트(흰색) */
   --color-text-invert: #ffffff;
 }
+/* --- 잔디그래프 --- */
+.react-calendar-heatmap {
+  transform-origin: top left;
+}
+
+.react-calendar-heatmap text {
+  font-size: 8px;
+  fill: #9ca3af; /* gray-400 */
+}
+
+.react-calendar-heatmap rect {
+  rx: 3px;
+  ry: 3px;
+}
+
+.react-calendar-heatmap .grass-empty {
+  fill: #f1f5f9;
+}
+.react-calendar-heatmap .grass-1 {
+  fill: #a7f3d0;
+}
+.react-calendar-heatmap .grass-2 {
+  fill: #34d399;
+}
+.react-calendar-heatmap .grass-3 {
+  fill: #059669;
+}
+.react-calendar-heatmap .grass-4 {
+  fill: #065f46;
+}

components/heatmap/GrassHeatmap.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { useMemo } from 'react';
+import CalendarHeatmap from 'react-calendar-heatmap';
+import 'react-calendar-heatmap/dist/styles.css';
+
+type HeatmapValue = {
+  date: string;
+  count: number;
+};
+
+/** 이번 주 토요일 기준으로 endDate 맞추기 (GitHub 느낌) */
+function endOfWeek(date = new Date()) {
+  const d = new Date(date);
+  const diff = 6 - d.getDay(); // 0=Sun, 6=Sat
+  d.setDate(d.getDate() + diff);
+  return d;
+}
+
+/** mock data: 최근 1년 */
+function buildMockValues(days = 366): HeatmapValue[] {
+  const out: HeatmapValue[] = [];
+  const today = new Date();
+
+  for (let i = days - 1; i >= 0; i--) {
+    const d = new Date(today);
+    d.setDate(today.getDate() - i);
+
+    const iso = d.toISOString().slice(0, 10);
+
+    const r = Math.random();
+    const count =
+      r < 0.65 ? 0 : r < 0.85 ? 1 : r < 0.95 ? 2 : r < 0.985 ? 3 : 4;
+
+    if (count > 0) out.push({ date: iso, count });
+  }
+
+  return out;
+}
+
+export default function GrassHeatmap() {
+  const endDate = useMemo(() => endOfWeek(new Date()), []);
+  const startDate = useMemo(() => {
+    const d = new Date(endDate);
+    d.setFullYear(d.getFullYear() - 1);
+    d.setDate(d.getDate() + 1);
+    return d;
+  }, [endDate]);
+
+  const values = useMemo(() => buildMockValues(366), []);
+
+  return (
+    <>
+      {/* 가로 길어질 때 대비 */}
+      <div className="overflow-x-auto">
+        <div className="min-w-max">
+          <CalendarHeatmap
+            startDate={startDate}
+            endDate={endDate}
+            values={values}
+            gutterSize={2}
+            showWeekdayLabels
+            classForValue={(value) => {
+              if (!value) return 'grass-empty';
+              if (value.count >= 4) return 'grass-4';
+              if (value.count === 3) return 'grass-3';
+              if (value.count === 2) return 'grass-2';
+              return 'grass-1';
+            }}
+            tooltipDataAttrs={(value) => {
+              if (!value) return { 'data-tip': '기록 없음' };
+              return { 'data-tip': `${value.date} · ${value.count}개 완료` };
+            }}
+          />
+        </div>
+      </div>
+
+      {/* 범례 */}
+      <div className="mt-4 flex items-center justify-end gap-2 text-xs text-slate-500">
+        <span>Less</span>
+        <span className="h-3 w-3 rounded-sm bg-slate-100" />
+        <span className="h-3 w-3 rounded-sm bg-emerald-200" />
+        <span className="h-3 w-3 rounded-sm bg-emerald-400" />
+        <span className="h-3 w-3 rounded-sm bg-emerald-600" />
+        <span className="h-3 w-3 rounded-sm bg-emerald-800" />
+        <span>More</span>
+      </div>
+    </>
+  );
+}

components/home/GraphSection.tsx

@@ -1,4 +1,5 @@
 import Card from './Card';
+import GrassHeatmap from '../heatmap/GrassHeatmap';
 
 interface GraphSectionProps {
   className?: string;
@@ -7,7 +8,9 @@ interface GraphSectionProps {
 const GraphSection = ({ className }: GraphSectionProps) => {
   return (
     <div className={className}>
-      <Card title="학습 기록">잔디그래프 구현 예정</Card>
+      <Card title="학습 기록">
+        <GrassHeatmap />
+      </Card>
     </div>
   );
 };

package-lock.json

@@ -9,8 +9,8 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "@radix-ui/react-popover": "^1.1.15",
     "@headlessui/react": "^2.2.9",
+    "@radix-ui/react-popover": "^1.1.15",
     "@uiw/react-md-editor": "^4.0.11",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -19,6 +19,7 @@
     "lucide-react": "^0.562.0",
     "next": "16.1.1",
     "react": "19.2.3",
+    "react-calendar-heatmap": "^1.10.0",
     "react-day-picker": "^9.13.0",
     "react-dom": "19.2.3",
     "react-icons": "^5.5.0"

package.json

@@ -0,0 +1,26 @@
+declare module 'react-calendar-heatmap' {
+  import * as React from 'react';
+
+  export type HeatmapValue = {
+    date: string;
+    count: number;
+  } & Record<string, unknown>;
+
+  export interface CalendarHeatmapProps {
+    startDate: Date;
+    endDate: Date;
+    values: HeatmapValue[];
+
+    classForValue?: (value: HeatmapValue | null) => string;
+    tooltipDataAttrs?: (value: HeatmapValue | null) => Record<string, string>;
+
+    showWeekdayLabels?: boolean;
+    showMonthLabels?: boolean;
+    gutterSize?: number;
+    horizontal?: boolean;
+    onClick?: (value: HeatmapValue | null) => void;
+  }
+
+  const CalendarHeatmap: React.FC<CalendarHeatmapProps>;
+  export default CalendarHeatmap;
+}