diff --git a/packages/web/src/features/manage-club/funding/frames/FundingInfoFrame.tsx b/packages/web/src/features/manage-club/funding/frames/FundingInfoFrame.tsx index aa36252e5..9d8825912 100644 --- a/packages/web/src/features/manage-club/funding/frames/FundingInfoFrame.tsx +++ b/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 ( + + ); + } + return ( - + = ({ clubId }) => { name="expenditureDate" required control={control} + rules={{ + validate: value => + (value != null && isValidDateRange(value)) || + "활동 기간에 포함되도록 입력해주세요", + }} renderItem={({ value, onChange, errorMessage }) => ( { onChange(data); diff --git a/packages/web/src/utils/Date/getKSTDate.ts b/packages/web/src/utils/Date/getKSTDate.ts index 90d3084b5..f69c5343a 100644 --- a/packages/web/src/utils/Date/getKSTDate.ts +++ b/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);