[WRFE-48] 래플/이벤트 수정 페이지

apps/front/wraffle-webview/src/features/product-form/config/const.ts

@@ -0,0 +1,13 @@
+export const STARTDATE_IS_OVER_ENDDATE = {
+  title: '유효하지 않은 날짜입니다.',
+  description: '응모 시작 일정은 응모 마감 일정 이후로 설정해주세요.',
+  duration: 5000,
+  variant: 'warning',
+};
+
+export const ENDDATE_IS_OVER_ANNOUNCEAT = {
+  title: '유효하지 않은 날짜입니다.',
+  description: '응모 마감 일정은 당첨자 발표 일정 이후로 설정해주세요.',
+  duration: 5000,
+  variant: 'warning',
+};

apps/front/wraffle-webview/src/features/product-form/config/validateDate.ts

@@ -0,0 +1,10 @@
+export const validateDate = (
+  date: Date | undefined,
+  referenceDate: Date | undefined,
+) => {
+  if (!date || !referenceDate) return true;
+  if (date > referenceDate) {
+    return false;
+  }
+  return true;
+};

apps/front/wraffle-webview/src/features/product-form/ui/EndDateForm.tsx

@@ -1,19 +1,24 @@
 'use client';
 
 import type {CreateEventPayload} from '../../../entities/product/model';
+import {ENDDATE_IS_OVER_ANNOUNCEAT} from '../config/const';
+import {validateDate} from '../config/validateDate';
 import {useFormContext} from 'react-hook-form';
 import {FormControl, FormField, FormItem, FormLabel} from '@/shared/ui';
 import {CalendarForm, useToast} from '@wraffle/ui';
 
 export const EndDateForm = ({
   defaultValue,
   fromDate: startDate,
+  referenceDate: announceAt,
 }: {
-  defaultValue: Date;
+  defaultValue: Date | undefined;
   fromDate: Date;
+  referenceDate: Date | undefined;
 }) => {
   const {control} = useFormContext<CreateEventPayload>();
   const {toast} = useToast();
+
   return (
     <FormField
       control={control}
@@ -25,7 +30,13 @@ export const EndDateForm = ({
             <CalendarForm
               dateLabel='응모 마감 시간을 입력해주세요.'
               selected={defaultValue}
-              setSelected={field.onChange}
+              onSelect={date => {
+                if (validateDate(date, announceAt)) {
+                  field.onChange(date);
+                } else {
+                  toast(ENDDATE_IS_OVER_ANNOUNCEAT);
+                }
+              }}
               fromDate={startDate}
               onClick={e => {
                 if (!startDate) {

apps/front/wraffle-webview/src/features/product-form/ui/StartDateForm.tsx

@@ -1,12 +1,21 @@
 'use client';
 
 import type {CreateEventPayload} from '../../../entities/product/model';
+import {STARTDATE_IS_OVER_ENDDATE} from '../config/const';
+import {validateDate} from '../config/validateDate';
 import {useFormContext} from 'react-hook-form';
 import {FormControl, FormField, FormItem, FormLabel} from '@/shared/ui';
-import {CalendarForm} from '@wraffle/ui';
+import {CalendarForm, useToast} from '@wraffle/ui';
 
-export const StartDateForm = ({defaultValue}: {defaultValue: Date}) => {
+export const StartDateForm = ({
+  defaultValue,
+  referenceDate: endDate,
+}: {
+  defaultValue: Date | undefined;
+  referenceDate: Date | undefined;
+}) => {
   const {control} = useFormContext<CreateEventPayload>();
+  const {toast} = useToast();
   return (
     <FormField
       control={control}
@@ -18,7 +27,13 @@ export const StartDateForm = ({defaultValue}: {defaultValue: Date}) => {
             <CalendarForm
               dateLabel='응모 시작 시간을 입력해주세요.'
               selected={defaultValue}
-              setSelected={field.onChange}
+              onSelect={date => {
+                if (validateDate(date, endDate)) {
+                  field.onChange(date);
+                } else {
+                  toast(STARTDATE_IS_OVER_ENDDATE);
+                }
+              }}
               fromDate={new Date()}
             />
           </FormControl>

packages/ui/src/ui/calendar/Calendar.tsx

@@ -9,22 +9,22 @@ import * as Popover from '@radix-ui/react-popover';
 interface CalendarFormProps {
   dateLabel: string;
   selected: Date | undefined;
-  setSelected: (selected: Date | undefined) => void;
+  onSelect: (selected: Date | undefined) => void;
   fromDate: Date;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 interface CalendarProps {
   selected: Date | undefined;
-  setSelected: (selected: Date | undefined) => void;
+  onSelect: (selected: Date | undefined) => void;
   setCalendarOpen: (calendarOpen: boolean) => void;
   fromDate: Date;
 }
 
 export const CalendarForm = ({
   dateLabel,
   selected,
-  setSelected,
+  onSelect,
   fromDate,
   onClick,
 }: CalendarFormProps) => {
@@ -56,7 +56,7 @@ export const CalendarForm = ({
         >
           <SingleDayPickCalendar
             selected={selected}
-            setSelected={setSelected}
+            onSelect={onSelect}
             setCalendarOpen={setCalendarOpen}
             fromDate={fromDate}
           />
@@ -68,7 +68,7 @@ export const CalendarForm = ({
 
 const SingleDayPickCalendar = ({
   selected,
-  setSelected,
+  onSelect,
   setCalendarOpen,
   fromDate,
 }: CalendarProps) => {
@@ -77,7 +77,7 @@ const SingleDayPickCalendar = ({
       mode='single'
       selected={selected}
       onSelect={date => {
-        setSelected(date);
+        onSelect(date);
         setCalendarOpen(false);
       }}
       required