feat: 잔디그래프 api 연동

Author: moo1677

app/(with-sidebar)/(home)/page.tsx

@@ -99,7 +99,7 @@ const Page = () => {
       />
 
       {/* 2-2. GraphSection */}
-      <GraphSection></GraphSection>
+      <GraphSection uid={currentUser.uid}></GraphSection>
 
       {/* 2-3. BottomSection */}
       <BottomSection

components/heatmap/GrassHeatmap.tsx

@@ -1,44 +1,28 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import CalendarHeatmap from 'react-calendar-heatmap';
 import 'react-calendar-heatmap/dist/styles.css';
+import { fetchDailyStats } from '@/services/heatmap/dailyStat.service';
 
 type HeatmapValue = {
   date: string;
   count: number;
 };
 
-/** 이번 주 토요일 기준으로 endDate 맞추기 (GitHub 느낌) */
+/** 토요일 기준으로 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);
   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;
-}
+type Props = {
+  uid?: string;
+};
 
-export default function GrassHeatmap() {
+export const GrassHeatmap = ({ uid }: Props) => {
   const endDate = useMemo(() => endOfWeek(new Date()), []);
   const startDate = useMemo(() => {
     const d = new Date(endDate);
@@ -47,8 +31,19 @@ export default function GrassHeatmap() {
     return d;
   }, [endDate]);
 
-  const values = useMemo(() => buildMockValues(366), []);
+  const [values, setValues] = useState<HeatmapValue[]>([]);
+  useEffect(() => {
+    if (!uid) return;
 
+    (async () => {
+      const stats = await fetchDailyStats(uid);
+      const heatmapValues: HeatmapValue[] = stats.map((s) => ({
+        date: s.date,
+        count: s.total,
+      }));
+      setValues(heatmapValues);
+    })();
+  }, [uid]);
   return (
     <>
       {/* 가로 길어질 때 대비 */}
@@ -87,4 +82,5 @@ export default function GrassHeatmap() {
       </div>
     </>
   );
-}
+};
+export default GrassHeatmap;

components/home/GraphSection.tsx

@@ -3,13 +3,14 @@ import GrassHeatmap from '../heatmap/GrassHeatmap';
 
 interface GraphSectionProps {
   className?: string;
+  uid?: string;
 }
 
-const GraphSection = ({ className }: GraphSectionProps) => {
+const GraphSection = ({ className, uid }: GraphSectionProps) => {
   return (
     <div className={className}>
       <Card title="학습 기록">
-        <GrassHeatmap />
+        <GrassHeatmap uid={uid} />
       </Card>
     </div>
   );

services/heatmap/dailyStat.service.ts

@@ -1,16 +1,30 @@
-import { doc, runTransaction, serverTimestamp } from 'firebase/firestore';
+import {
+  doc,
+  runTransaction,
+  serverTimestamp,
+  collection,
+  getDocs,
+  query,
+  where,
+  orderBy,
+} from 'firebase/firestore';
 import { db } from '@/lib/firebase';
 
+export interface DailyStat {
+  date: string; // YYYY-MM-DD
+  total: number;
+}
+
 function dateKeyKST(date = new Date()) {
   const kst = new Date(date.getTime() + 9 * 60 * 60 * 1000);
   return kst.toISOString().slice(0, 10);
 }
 
-export async function bumpDailyStat(
+export const bumpDailyStat = async (
   uid: string,
   deltaTil: number,
   deltaTodoDone: number
-) {
+) => {
   const key = dateKeyKST();
   const ref = doc(db, `users/${uid}/dailyStats/${key}`);
 
@@ -41,4 +55,33 @@ export async function bumpDailyStat(
       { merge: true }
     );
   });
-}
+};
+
+export const fetchDailyStats = async (uid: string) => {
+  const colRef = collection(db, 'users', uid, 'dailyStats');
+
+  const endDate = dateKeyKST(new Date());
+  const startDate = (() => {
+    const d = new Date();
+    d.setFullYear(d.getFullYear() - 1);
+    d.setDate(d.getDate() + 1);
+    return dateKeyKST(d);
+  })();
+
+  const q = query(
+    colRef,
+    where('date', '>=', startDate),
+    where('date', '<=', endDate),
+    orderBy('date', 'asc')
+  );
+
+  const snap = await getDocs(q);
+
+  return snap.docs.map((doc) => {
+    const data = doc.data();
+    return {
+      date: data.date,
+      total: data.total ?? 0,
+    };
+  });
+};

services/write/til.service.ts

@@ -57,8 +57,8 @@ export async function fetchMyTil(
   uid: string | null | undefined,
   tilId: string | null | undefined
 ): Promise<Til | null> {
-  // 여기서 uid/tilId 실물 확인
-  console.log('[fetchMyPost] path =', { uid, tilId });
+  // // 여기서 uid/tilId 실물 확인
+  // console.log('[fetchMyPost] path =', { uid, tilId });
 
   if (!uid || !tilId) return null;