feat(mobile): 날짜 선택 시, 지난 날짜를 선택할 수 없도록 제한합니다. (#124)

Author: Arooming

apps/mobile/components/select-date/SelectDateCalendar.tsx

@@ -2,13 +2,13 @@
 
 import { MobileIconArrowLeftGray, MobileIconArrowRightGray } from "@setaday/icon";
 import { useState } from "react";
-import { DAY, MAX_DATE, MONTH_NAMES } from "../../constants/selectDateConst";
+import { DAY, MAX_DATE, MONTH_NAMES, TODAYS_MONTH, TODAYS_YEAR } from "../../constants/selectDateConst";
 import type { ClickDateProps, SelctDateCalendarProps, SelectedDateType } from "../../type/selectedDateType";
 import { getCalendarDate } from "../../utils/getCalendarDate";
 
 function SelectDateCalendar({ selectedDateNum, selectedDate, handleSelectDate }: SelctDateCalendarProps) {
-  const [year, setYear] = useState(new Date().getFullYear());
-  const [month, setMonth] = useState(new Date().getMonth() + 1);
+  const [year, setYear] = useState(TODAYS_YEAR);
+  const [month, setMonth] = useState(TODAYS_MONTH);
 
   const ALL_DATE = getCalendarDate({ year, month });
 
@@ -249,8 +249,9 @@ function SelectDateCalendar({ selectedDateNum, selectedDate, handleSelectDate }:
 
         <div className="grid grid-cols-7 grid-rows-5 gap-y-[1.8rem]">
           {ALL_DATE.map(({ id, date, color }) =>
-            date.map((curDate) => {
-              const isActiveClick = id === "currentDate";
+            date.map((curDate, idx) => {
+              const isActiveClick = id === "validDate";
+
               const idxOfStartDate = selectedDate.findIndex(
                 ({ startDate, startMonth, startYear }) =>
                   startDate === curDate && startMonth === month && startYear === year
@@ -286,10 +287,11 @@ function SelectDateCalendar({ selectedDateNum, selectedDate, handleSelectDate }:
               const isRightSelection = !!(matchedObj && matchedObj.endDate > 0 && matchedObj.startDate > 0);
 
               return (
-                // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
-                <div
-                  key={id + curDate}
+                <button
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                  key={id + curDate + idx}
                   className="flex items-center justify-center relative"
+                  type="button"
                   onClick={() =>
                     isActiveClick &&
                     !isInRange &&
@@ -315,7 +317,7 @@ function SelectDateCalendar({ selectedDateNum, selectedDate, handleSelectDate }:
                   >
                     {curDate}
                   </p>
-                </div>
+                </button>
               );
             })
           )}

apps/mobile/constants/selectDateConst.ts

@@ -18,3 +18,7 @@ export const MONTH_NAMES = [
   "November",
   "December",
 ];
+
+export const TODAYS_YEAR = new Date().getFullYear();
+export const TODAYS_MONTH = new Date().getMonth() + 1;
+export const TODAYS_DATE = new Date().getDate();

apps/mobile/utils/getCalendarDate.ts

@@ -1,3 +1,6 @@
+import { TODAYS_DATE, TODAYS_MONTH } from "../constants/selectDateConst";
+import { TODAYS_YEAR } from "./../constants/selectDateConst";
+
 export const getCalendarDate = ({
   year,
   month,
@@ -14,20 +17,63 @@ export const getCalendarDate = ({
   // 지난 달 마지막 날짜
   const lastEndDate = new Date(year, month - 1, 0).getDate();
 
+  const isCurrentMonth = year === TODAYS_YEAR && month === TODAYS_MONTH;
+  const isPastYear = year < TODAYS_YEAR;
+  const isFutureYear = year > TODAYS_YEAR;
+  const isPastMonthsOfThisYear = year === TODAYS_YEAR && month < TODAYS_MONTH;
+  const isFutureMonthsOfThisYear = year === TODAYS_YEAR && month > TODAYS_MONTH;
+
   const DATE = Array.from({ length: endDate }, (_, idx) => idx + 1);
-  const LAST_DATE = Array.from({ length: startDay }, (_, idx) => lastEndDate - (startDay - idx - 1));
-  const NEXT_DATE = Array.from({ length: nextStartDay === 0 ? 0 : 7 - nextStartDay }, (_, idx) => idx + 1);
+
+  // 선택 제한 날짜
+  const INVALID_DATE = DATE.filter((date) => {
+    // 이번 년도, 이번 달의 경우 오늘의 날짜보다 작은 날짜는 선택 불가
+    if (isCurrentMonth) {
+      return date < TODAYS_DATE;
+    }
+
+    // 지난 년도 || 이번 년도의 지난 달의 경우, 모든 날짜 선택 불가
+    if (isPastYear || isPastMonthsOfThisYear) {
+      return date;
+    }
+  });
+
+  // 선택 가능 날짜
+  const VALID_DATE = DATE.filter((date) => {
+    // 이번 년도, 이번 달의 경우 오늘의 날짜보다 크거나 같은 날짜 선택 가능
+    if (isCurrentMonth) {
+      return date >= TODAYS_DATE;
+    }
+
+    // 다음 년도 || 이번 년도의 이후 달의 경우, 모든 날짜 선택 가능
+    if (isFutureYear || isFutureMonthsOfThisYear) {
+      return date;
+    }
+  });
+
+  // 오늘이 속한 달에 표시해야 할 지난 달의 날짜
+  const LAST_MONTH_DATE = Array.from({ length: startDay }, (_, idx) => lastEndDate - (startDay - idx - 1));
+
+  // 오늘 이전의 모든 날짜 (올해 이하인 경우, 지난 달 날짜와 선택 불가 날짜를 포함 / 내년 이상인 경우 지난 달 날짜만 포함)
+  const LAST_DATE = year <= TODAYS_YEAR ? [...LAST_MONTH_DATE, ...INVALID_DATE] : LAST_MONTH_DATE;
+
+  // 오늘이 속한 달에 표시해야 할 다음 달의 날짜
+  const NEXT_MONTH_DATE = Array.from({ length: nextStartDay === 0 ? 0 : 7 - nextStartDay }, (_, idx) => idx + 1);
 
   const ALL_DATE = [
     {
       id: "lastDate",
       date: LAST_DATE,
       color: "text-gray-4",
     },
-    { id: "currentDate", date: DATE, color: "text-gray-6" },
+    {
+      id: "validDate",
+      date: VALID_DATE,
+      color: "text-gray-6",
+    },
     {
       id: "nextDate",
-      date: NEXT_DATE,
+      date: NEXT_MONTH_DATE,
       color: "text-gray-4",
     },
   ];