add a validation logic to funding expenditure date field

packages/web/src/features/manage-club/funding/frames/FundingInfoFrame.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import { useFormContext } from "react-hook-form";
 
@@ -15,7 +15,10 @@ import Select from "@sparcs-clubs/web/common/components/Select";
 import useGetActivityAvailable from "@sparcs-clubs/web/features/activity-report/services/useGetActivityAvailable";
 import { FundingInfo } from "@sparcs-clubs/web/features/manage-club/funding/types/funding";
 
+import { getLocalDateOnly } from "@sparcs-clubs/web/utils/Date/getKSTDate";
+
 import { NO_ACTIVITY_REPORT_FUNDING } from "../constants";
+import useGetFundingDeadline from "../services/useGetFundingDeadline";
 
 const RowWrapper = styled.div`
   display: flex;
@@ -35,6 +38,11 @@ const FundingInfoFrame: React.FC<{ clubId: number }> = ({ clubId }) => {
     isLoading,
     isError,
   } = useGetActivityAvailable({ clubId });
+  const {
+    data: fundingDeadline,
+    isLoading: isLoadingFundingDeadline,
+    isError: isErrorFundingDeadline,
+  } = useGetFundingDeadline();
 
   const purposeItems = [
     ...(purposeActivity?.activities.map(activity => ({
@@ -44,9 +52,39 @@ const FundingInfoFrame: React.FC<{ clubId: number }> = ({ clubId }) => {
     { value: Infinity, label: NO_ACTIVITY_REPORT_FUNDING },
   ];
 
+  const isValidDateRange = useCallback(
+    (targeDate: Date) => {
+      if (!fundingDeadline) {
+        return false;
+      }
+
+      const localTargetDate = getLocalDateOnly(targeDate);
+
+      return (
+        getLocalDateOnly(fundingDeadline.targetDuration.startTerm) <=
+          localTargetDate &&
+        localTargetDate <=
+          getLocalDateOnly(fundingDeadline.targetDuration.endTerm)
+      );
+    },
+    [fundingDeadline],
+  );
+
+  if (!fundingDeadline) {
+    return (
+      <AsyncBoundary
+        isLoading={isLoadingFundingDeadline}
+        isError={isErrorFundingDeadline}
+      />
+    );
+  }
+
   return (
     <FoldableSectionTitle title="지원금 정보">
-      <AsyncBoundary isLoading={isLoading} isError={isError}>
+      <AsyncBoundary
+        isLoading={isLoading || isLoadingFundingDeadline}
+        isError={isError || isErrorFundingDeadline}
+      >
         <Card outline gap={32}>
           <FormController
             name="name"
@@ -78,10 +116,19 @@ const FundingInfoFrame: React.FC<{ clubId: number }> = ({ clubId }) => {
               name="expenditureDate"
               required
               control={control}
+              rules={{
+                validate: value =>
+                  (value != null && isValidDateRange(value)) ||
+                  "활동 기간에 포함되도록 입력해주세요",
+              }}
               renderItem={({ value, onChange, errorMessage }) => (
                 <DateInput
                   label="지출 일자"
                   placeholder="20XX.XX.XX"
+                  minDate={
+                    fundingDeadline.targetDuration.startTerm ?? undefined
+                  }
+                  maxDate={fundingDeadline.targetDuration.endTerm ?? undefined}
                   selected={value}
                   onChange={(data: Date | null) => {
                     onChange(data);

packages/web/src/utils/Date/getKSTDate.ts

@@ -1,13 +1,17 @@
+// date를 입력했을 때 시간을 제외한 년, 월, 일만 남기고 Date 타입으로 반환, 즉 시간을 00:00:00 으로 치환하기
+export const getLocalDateOnly = (date: Date) =>
+  new Date(
+    new Date(date).getFullYear(),
+    new Date(date).getMonth(),
+    new Date(date).getDate(),
+  );
+
 // 시간을 제외한 날짜만 KST로 변경
 // 예시: 입력 date가 2024-10-18 15:00 일 경우 getKSTDate 씌워서 api 요청 보내면
 // 2024.10.18 00:00 으로 요청 보내짐 (백에서도 그대로 받아서 그대로 프론트에 데이터 보냄)
 // 즉 항상 시간은 00:00 이게 됨
 export function getKSTDate(date: Date): Date {
-  const localDateOnly = new Date(
-    new Date(date).getFullYear(),
-    new Date(date).getMonth(),
-    new Date(date).getDate(),
-  );
+  const localDateOnly = getLocalDateOnly(date);
 
   const kstOffset = 9 * 60; // KST: UTC+9
   return new Date(localDateOnly.getTime() + kstOffset * 60 * 1000);