From 442418d41e67d0a6725228fd88608bab17a1d3ba Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sun, 26 Oct 2025 16:52:10 +0900
Subject: [PATCH] Feat:#319 - add previous/next month dates to fill empty cells

---
 src/components/calendar/CalendarCell.tsx | 22 +++++++++++++--
 src/components/calendar/CalendarGrid.tsx | 35 +++++++++++++++++++++---
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/src/components/calendar/CalendarCell.tsx b/src/components/calendar/CalendarCell.tsx
index b8551d6..1f105b5 100644
--- a/src/components/calendar/CalendarCell.tsx
+++ b/src/components/calendar/CalendarCell.tsx
@@ -4,12 +4,21 @@ import { cn } from '@/lib/utils';
 
 interface CalendarCellProps {
   date: number;
+  isCurrentMonth?: boolean;
+  isToday?: boolean;
   goals?: Goal[];
   onClick?: (date: number, goals: Goal[], event: React.MouseEvent) => void;
   className?: string;
 }
 
-const CalendarCell = ({ date, goals = [], onClick, className }: CalendarCellProps) => {
+const CalendarCell = ({
+  date,
+  isCurrentMonth = true,
+  isToday = false,
+  goals = [],
+  onClick,
+  className,
+}: CalendarCellProps) => {
   const hasGoals = goals.length > 0;
   const firstGoal = goals[0];
   const goalColorName = firstGoal ? getGoalBackgroundColorClass(firstGoal.color) : null;
@@ -26,10 +35,19 @@ const CalendarCell = ({ date, goals = [], onClick, className }: CalendarCellProp
       className={cn(
         'rounded-4 flex h-40 w-full min-w-40 cursor-pointer flex-col items-center p-1 transition md:max-h-44 md:max-w-84 lg:h-40 lg:w-71',
         hasGoals && 'hover:bg-tertiary-01',
+        !isCurrentMonth && 'opacity-40',
         className,
       )}
     >
-      <span className="text-body-m-16 text-text-03 h-20 self-center">{date}</span>
+      <span
+        className={cn(
+          'text-body-m-16 h-20 self-center',
+          isCurrentMonth ? 'text-text-03' : 'text-text-04',
+          isToday && 'text-body-b-16',
+        )}
+      >
+        {date}
+      </span>
 
       {hasGoals && (
         <div
diff --git a/src/components/calendar/CalendarGrid.tsx b/src/components/calendar/CalendarGrid.tsx
index 84d409b..7948371 100644
--- a/src/components/calendar/CalendarGrid.tsx
+++ b/src/components/calendar/CalendarGrid.tsx
@@ -12,18 +12,45 @@ interface CalendarGridProps {
 const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(({ data, onCellClick }, ref) => {
   const { firstDay, daysInMonth, groupedGoals } = useCalendarData(data);
   const calendarCells = [];
+  const TOTAL_CELLS = 42;
+
+  // 이전 달의 날짜 계산
+  const today = new Date();
+  const [currentYear, currentMonth] = data.month.split('-').map(Number);
+
+  const prevMonth = new Date(currentYear, currentMonth - 1, 0);
+  const prevMonthDays = prevMonth.getDate();
 
-  // 빈 셀 채우기 (월 시작 전 빈 공간)
   for (let i = 0; i < firstDay; i++) {
-    calendarCells.push(<div key={`empty-${i}`} />);
+    const date = prevMonthDays - firstDay + i + 1;
+    calendarCells.push(<CalendarCell key={`prev-${date}`} date={date} isCurrentMonth={false} />);
   }
 
-  // 날짜 셀 채우기
   for (let date = 1; date <= daysInMonth; date++) {
     const goalsOfTheDay = groupedGoals[date] || [];
+    const isToday =
+      today.getDate() === date &&
+      today.getMonth() + 1 === currentMonth &&
+      today.getFullYear() === currentYear;
+
+    calendarCells.push(
+      <CalendarCell
+        key={date}
+        date={date}
+        goals={goalsOfTheDay}
+        onClick={onCellClick}
+        isCurrentMonth={true}
+        isToday={isToday}
+      />,
+    );
+  }
 
+  // 다음 달의 날짜 계산
+  let nextMonthDate = 1;
+  const remainingCells = TOTAL_CELLS - (firstDay + daysInMonth);
+  for (let i = 0; i < remainingCells; i++) {
     calendarCells.push(
-      <CalendarCell key={date} date={date} goals={goalsOfTheDay} onClick={onCellClick} />,
+      <CalendarCell key={`next-${nextMonthDate}`} date={nextMonthDate++} isCurrentMonth={false} />,
     );
   }