feat: 잔디 클릭 시 디테일 표시

Author: moo1677

components/heatmap/GrassHeatmap.tsx

@@ -3,26 +3,21 @@
 import { useEffect, useMemo, useState } from 'react';
 import CalendarHeatmap from 'react-calendar-heatmap';
 import 'react-calendar-heatmap/dist/styles.css';
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
 import { fetchDailyStats } from '@/services/heatmap/dailyStat.service';
 
-type HeatmapValue = {
-  date: string;
-  count: number;
-};
+type HeatmapValue = { date: string; count: number };
 
-/** 토요일 기준으로 endDate 설정  */
 function endOfWeek(date = new Date()) {
   const d = new Date(date);
-  const diff = 6 - d.getDay(); // 0=Sun, 6=Sat
-  d.setDate(d.getDate() + diff);
+  d.setDate(d.getDate() + (6 - d.getDay()));
   return d;
 }
 
-type Props = {
-  uid?: string;
-};
+type Props = { uid?: string };
 
-export const GrassHeatmap = ({ uid }: Props) => {
+export default function GrassHeatmap({ uid }: Props) {
   const endDate = useMemo(() => endOfWeek(new Date()), []);
   const startDate = useMemo(() => {
     const d = new Date(endDate);
@@ -31,28 +26,46 @@ export const GrassHeatmap = ({ uid }: Props) => {
     return d;
   }, [endDate]);
 
-  const [values, setValues] = useState<HeatmapValue[]>([]);
+  const [values, setValues] = useState<
+    { date: string; total: number; tilCount?: number; todoDoneCount?: number }[]
+  >([]);
+
   useEffect(() => {
     if (!uid) return;
-
     (async () => {
       const stats = await fetchDailyStats(uid);
-      const heatmapValues: HeatmapValue[] = stats.map((s) => ({
-        date: s.date,
-        count: s.total,
-      }));
-      setValues(heatmapValues);
+      setValues(stats);
     })();
   }, [uid]);
+
+  const byDate = useMemo(() => {
+    const m = new Map<
+      string,
+      { tilCount: number; todoDoneCount: number; total: number }
+    >();
+    for (const s of values) {
+      m.set(s.date, {
+        tilCount: s.tilCount ?? 0,
+        todoDoneCount: s.todoDoneCount ?? 0,
+        total: s.total ?? 0,
+      });
+    }
+    return m;
+  }, [values]);
+
+  const heatmapValues: HeatmapValue[] = useMemo(
+    () => values.map((s) => ({ date: s.date, count: s.total ?? 0 })),
+    [values]
+  );
+
   return (
     <>
-      {/* 가로 길어질 때 대비 */}
       <div className="overflow-x-auto">
         <div className="min-w-max">
           <CalendarHeatmap
             startDate={startDate}
             endDate={endDate}
-            values={values}
+            values={heatmapValues}
             gutterSize={2}
             showWeekdayLabels
             classForValue={(value) => {
@@ -63,13 +76,38 @@ export const GrassHeatmap = ({ uid }: Props) => {
               return 'grass-1';
             }}
             tooltipDataAttrs={(value) => {
-              if (!value) return { 'data-tip': '기록 없음' };
-              return { 'data-tip': `${value.date} · ${value.count}개 완료` };
+              if (!value?.date)
+                return { 'data-tooltip-id': '', 'data-tooltip-html': '' };
+              const d = byDate.get(value.date);
+
+              const til = d?.tilCount ?? 0;
+              const todo = d?.todoDoneCount ?? 0;
+              const total = d?.total ?? 0;
+
+              return {
+                'data-tooltip-id': 'grass-tip',
+                // HTML 툴팁 (작은 박스)
+                'data-tooltip-html':
+                  total === 0
+                    ? `<div style="font-size:12px"><b>${value.date}</b><br/>기록 없음</div>`
+                    : `<div style="font-size:12px">
+                        <b>${value.date}</b><br/>
+                        📘 TIL: ${til}개<br/>
+                        ✅ Plan: ${todo}개<br/>
+                        🔥 합계: ${total}개
+                       </div>`,
+              };
             }}
           />
         </div>
       </div>
 
+      {/* 툴팁 컴포넌트 */}
+      <Tooltip
+        id="grass-tip"
+        place="top"
+        className="!rounded-lg !bg-black/80 !px-3 !py-2 !text-xs !text-white"
+      />
       {/* 범례 */}
       <div className="mt-4 flex items-center justify-end gap-2 text-xs text-slate-500">
         <span>Less</span>
@@ -82,5 +120,4 @@ export const GrassHeatmap = ({ uid }: Props) => {
       </div>
     </>
   );
-};
-export default GrassHeatmap;
+}

package-lock.json

@@ -22,7 +22,8 @@
     "react-calendar-heatmap": "^1.10.0",
     "react-day-picker": "^9.13.0",
     "react-dom": "19.2.3",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.5.0",
+    "react-tooltip": "^5.30.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

package.json

@@ -7,6 +7,7 @@ import {
   query,
   where,
   orderBy,
+  getDoc,
 } from 'firebase/firestore';
 import { db } from '@/lib/firebase';
 
@@ -15,6 +16,13 @@ export interface DailyStat {
   total: number;
 }
 
+export type DailyStatDetail = {
+  date: string;
+  tilCount: number;
+  todoDoneCount: number;
+  total: number;
+};
+
 function dateKeyKST(date = new Date()) {
   const kst = new Date(date.getTime() + 9 * 60 * 60 * 1000);
   return kst.toISOString().slice(0, 10);
@@ -57,7 +65,7 @@ export const bumpDailyStat = async (
   });
 };
 
-export const fetchDailyStats = async (uid: string) => {
+export const fetchDailyStats = async (uid: string): Promise<DailyStat[]> => {
   const colRef = collection(db, 'users', uid, 'dailyStats');
 
   const endDate = dateKeyKST(new Date());
@@ -81,7 +89,27 @@ export const fetchDailyStats = async (uid: string) => {
     const data = doc.data();
     return {
       date: data.date,
+      tilCount: data.tilCount ?? 0,
+      todoDoneCount: data.todoDoneCount ?? 0,
       total: data.total ?? 0,
     };
   });
 };
+
+export const fetchDailyStatByDate = async (
+  uid: string,
+  date: string // YYYY-MM-DD
+): Promise<DailyStatDetail | null> => {
+  const ref = doc(db, 'users', uid, 'dailyStats', date);
+  const snap = await getDoc(ref);
+
+  if (!snap.exists()) return null;
+
+  const data = snap.data();
+  return {
+    date: data.date,
+    tilCount: data.tilCount ?? 0,
+    todoDoneCount: data.todoDoneCount ?? 0,
+    total: data.total ?? 0,
+  };
+};