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);