feat: date-fns 설치 및 캘린더 생성 로직 구현

bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "ceos-21th-react-todo",
       "dependencies": {
+        "date-fns": "^4.1.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "styled-components": "^6.1.16",
@@ -308,6 +309,8 @@
 
     "csstype": ["[email protected]", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
+    "date-fns": ["[email protected]", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
+
     "debug": ["[email protected]", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],
 
     "deep-is": ["[email protected]", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "styled-components": "^6.1.16"

src/components/Calendar/Calendar.styled.ts

@@ -129,7 +129,7 @@ export const CalendarGrid = styled.ul`
 
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  grid-template-rows: repeat(6, 1fr);
+  grid-template-rows: auto;
 `;
 
 export const CalendarGridItem = styled.li`
@@ -141,7 +141,8 @@ export const CalendarGridItem = styled.li`
 
 export const CalendarGridItemLink = styled.a`
   width: 100%;
-  height: 10rem;
+
+  aspect-ratio: 1 / 1;
 
   display: flex;
   flex-direction: column;
@@ -150,12 +151,19 @@ export const CalendarGridItemLink = styled.a`
   gap: 0.8rem;
 `;
 
-export const DayText = styled.span<{ $isSelected: boolean }>`
+export const DayTextBox = styled.div<{
+  $isSelected: boolean;
+  $isCurrentMonthDay: boolean;
+}>`
   position: relative;
 
   ${({ theme }) => theme.fontStyles.Header2}
-  color: ${({ $isSelected, theme }) =>
-    $isSelected ? theme.colors.Grayscale[0] : theme.colors.Grayscale[500]};
+  color: ${({ $isSelected, $isCurrentMonthDay, theme }) =>
+    $isSelected
+      ? theme.colors.Grayscale[0]
+      : $isCurrentMonthDay
+        ? theme.colors.Grayscale[500]
+        : theme.colors.Grayscale[300]};
 
   &::before {
     content: ${({ $isSelected }) => ($isSelected ? '""' : 'none')};

src/components/Calendar/Calendar.tsx

@@ -3,17 +3,57 @@ import { useState } from 'react';
 import { CalendarIcon } from '@/icons/Calendar';
 import { LeftArrowIcon, RightArrowIcon } from '@/icons/Arrow';
 
-import { CALENDAR_DAY_LIST, DAY_LIST } from '@/constants/calendar';
+import { DAY_LIST, MONTH_NAMES } from '@/constants/calendar';
+
+import { generateCalendar } from '@/utils/generateCalender';
 
 import * as S from './Calendar.styled';
 
 const Calendar = () => {
   const [currentDate, setCurrentDate] = useState({
     year: 2025,
-    month: 'March',
+    month: 3,
     day: 20,
   });
 
+  const currentMonthName = MONTH_NAMES[currentDate.month - 1];
+
+  const calendarDays = generateCalendar(currentDate.year, currentDate.month);
+
+  const handlePrevMonth = () => {
+    if (currentDate.month === 1) {
+      return setCurrentDate({
+        ...currentDate,
+        year: currentDate.year - 1,
+        month: 12,
+        day: 1,
+      });
+    }
+
+    setCurrentDate({
+      ...currentDate,
+      month: currentDate.month - 1,
+      day: 1,
+    });
+  };
+
+  const handleNextMonth = () => {
+    if (currentDate.month === 12) {
+      return setCurrentDate({
+        ...currentDate,
+        year: currentDate.year + 1,
+        month: 1,
+        day: 1,
+      });
+    }
+
+    setCurrentDate({
+      ...currentDate,
+      month: currentDate.month + 1,
+      day: 1,
+    });
+  };
+
   const handleDaySelect = (day: number) => {
     setCurrentDate({
       ...currentDate,
@@ -31,13 +71,13 @@ const Calendar = () => {
 
       {/* Date Picker */}
       <S.DatePickerSection>
-        <S.PreviousMonthButton>
+        <S.PreviousMonthButton onClick={handlePrevMonth}>
           <LeftArrowIcon />
         </S.PreviousMonthButton>
         <S.CurrentMonthYear>
-          {currentDate.month}, {currentDate.year}
+          {currentMonthName}, {currentDate.year}
         </S.CurrentMonthYear>
-        <S.NextMonthButton>
+        <S.NextMonthButton onClick={handleNextMonth}>
           <RightArrowIcon />
         </S.NextMonthButton>
       </S.DatePickerSection>
@@ -55,12 +95,20 @@ const Calendar = () => {
         {/* Calendar Grid */}
         <S.CalendarGridSection>
           <S.CalendarGrid>
-            {CALENDAR_DAY_LIST.map((day, index) => (
+            {calendarDays.map((day, index) => (
               <S.CalendarGridItem key={index}>
-                <S.CalendarGridItemLink onClick={() => handleDaySelect(day)}>
-                  <S.DayText $isSelected={currentDate.day === day}>
-                    {day}
-                  </S.DayText>
+                <S.CalendarGridItemLink
+                  onClick={() => handleDaySelect(day.date)}
+                >
+                  <S.DayTextBox
+                    $isCurrentMonthDay={day.monthType === 'current'}
+                    $isSelected={
+                      day.monthType === 'current' &&
+                      currentDate.day === day.date
+                    }
+                  >
+                    {day.date}
+                  </S.DayTextBox>
                   <S.UnLoggedCircle />
                 </S.CalendarGridItemLink>
               </S.CalendarGridItem>

src/constants/calendar.ts

@@ -1,6 +1,16 @@
 export const DAY_LIST = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 
-export const CALENDAR_DAY_LIST = [
-  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
-  23, 24, 25, 26, 27, 28, 29, 30, 31,
+export const MONTH_NAMES = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
 ];

src/pages/Home.styled.ts

@@ -3,5 +3,5 @@ import styled from 'styled-components';
 export const HomeContainer = styled.div`
   width: 100%;
   height: 100%;
-  padding: 12rem 9.6rem;
+  padding: 6rem 9.6rem;
 `;

src/utils/generateCalender.ts

@@ -0,0 +1,49 @@
+import { format, getDaysInMonth, startOfMonth, subMonths } from 'date-fns';
+
+export const generateCalendar = (year: number, month: number) => {
+  const firstDay = startOfMonth(new Date(year, month - 1, 1));
+  // console.log('특정 달의 1일: ', firstDay);
+
+  const startDayOfWeek = firstDay.getDay();
+  // console.log('특정 달의 첫날의 요일: ', startDayOfWeek); // 0(일) ~ 6(토)
+
+  const totalDaysInMonth = getDaysInMonth(firstDay);
+  // console.log('특정 달의 총 일수: ', totalDaysInMonth);
+
+  const prevMonth = subMonths(firstDay, 1);
+  const prevMonthDays = getDaysInMonth(prevMonth);
+  // console.log('이전 달의 총 일수: ', prevMonthDays);
+
+  const prevDays = Array.from({ length: startDayOfWeek }, (_, i) => ({
+    date: prevMonthDays - startDayOfWeek + i + 1,
+    fullDate: format(
+      new Date(year, month - 2, prevMonthDays - startDayOfWeek + 1 + i),
+      'yyyy-MM-dd'
+    ),
+    monthType: 'prev',
+  }));
+
+  const currentDays = Array.from({ length: totalDaysInMonth }, (_, i) => ({
+    date: i + 1,
+    fullDate: format(new Date(year, month - 1, i + 1), 'yyyy-MM-dd'),
+    monthType: 'current',
+  }));
+
+  const totalCells = prevDays.length + currentDays.length;
+  // console.log('총 달력 Unit의 수: ', totalCells);
+
+  const nextDaysCount = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);
+  // console.log('렌더링할 다음 달의 일부 날짜의 수: ', nextDaysCount);
+
+  const nextDays = Array.from({ length: nextDaysCount }, (_, i) => ({
+    date: i + 1,
+    fullDate: format(new Date(year, month, i + 1), 'yyyy-MM-dd'),
+    monthType: 'next',
+  }));
+
+  // 최종 달력 날짜 배열
+  const calendarDays = [...prevDays, ...currentDays, ...nextDays];
+
+
+  return calendarDays;
+};