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

apps/front/wraffle-webview/app/products/[id]/edit/page.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import {
+  createRaffleSchema,
+  type CreateRafflePayload,
+} from '@/entities/product/model';
+import {Header} from '@/shared/ui';
+import GenericForm from '@/shared/ui/form/GenericForm';
+import {EditList} from '@/widgets/product-list/edit/ui';
+import {zodResolver} from '@hookform/resolvers/zod';
+import {Typography} from '@wraffle/ui';
+
+// 조회 api 연결시 삭제할 코드 입니다
+const product = {
+  title: 'test Title',
+  categoryId: '1',
+  tagIds: [1, 2],
+  images: ['/1', '/2', '/3'],
+  price: '999999',
+  startDate: new Date(),
+  endDate: new Date(),
+  announceAt: new Date(),
+  winnerCount: '99',
+  etc: 'test ETC',
+};
+
+const Edit = ({
+  params: {id},
+  searchParams: {type},
+}: {
+  params: {id: string};
+  searchParams: {type: 'raffle' | 'event'};
+}) => {
+  const onSubmit = (data: CreateRafflePayload) => {
+    console.log(data);
+  };
+
+  return (
+    <div>
+      <div className='my-5'>
+        <Header withUnderline>
+          <Header.Left>
+            <Header.BackButton />
+          </Header.Left>
+          <Header.Middle>
+            <Typography className='text-sm font-semibold text-[#191F28]'>
+              래플 수정
+            </Typography>
+          </Header.Middle>
+        </Header>
+      </div>
+
+      <GenericForm
+        onSubmit={onSubmit}
+        formOptions={{
+          mode: 'onSubmit',
+          resolver: zodResolver(createRaffleSchema),
+          defaultValues: product,
+        }}
+      >
+        <EditList type={type} />
+      </GenericForm>
+    </div>
+  );
+};
+
+export default Edit;

apps/front/wraffle-webview/app/products/create/event/page.tsx

@@ -54,7 +54,7 @@ const EventCreate = () => {
   return (
     <div>
       {funnel.index < EventTotalStepIndex && (
-        <div className='py-5'>
+        <div className='my-5'>
           <Header>
             <Header.Left>
               <Header.BackButton onClick={() => funnel.history.back()} />

apps/front/wraffle-webview/src/features/image-handle/index.ts

@@ -0,0 +1,2 @@
+export {AddItemCard} from './ui/AddItemCard';
+export {ImageCardWithDelete} from './ui/ImageCardWithDelete';

apps/front/wraffle-webview/src/features/image-handle/ui/AddItemCard.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import clsx from 'clsx';
+
+export const AddItemCard = ({
+  label,
+  onClick,
+  className,
+}: {
+  label: string;
+  onClick: () => void;
+  className: string;
+}) => (
+  <button
+    className={clsx(
+      'relative flex aspect-square items-center justify-center rounded-lg border border-solid border-[#F5F5F7] bg-[#FAFAFB] text-sm font-medium text-[#ADB5BD]',
+      className,
+    )}
+    onClick={onClick}
+  >
+    {label}
+  </button>
+);

apps/front/wraffle-webview/src/features/image-handle/ui/ImageCardWithDelete.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import clsx from 'clsx';
+import Image from 'next/image';
+
+export const ImageCardWithDelete = ({
+  url,
+  onClick,
+  className,
+}: {
+  url: string;
+  onClick: () => void;
+  className: string;
+}) => (
+  <div
+    className={clsx(
+      'relative flex-none overflow-hidden rounded-lg bg-slate-100',
+      className,
+    )}
+  >
+    <button type='button' className='absolute right-2 top-2' onClick={onClick}>
+      <Image src={'/icons/ic_close.svg'} alt='close' width={12} height={12} />
+    </button>
+    <Image
+      alt='thumbnail'
+      width={160}
+      height={160}
+      src={url}
+      className='h-full w-full object-cover'
+    />
+  </div>
+);

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/PriceForm.tsx

@@ -28,7 +28,7 @@ export const PriceForm = ({
           <FormControl>
             <div className='relative w-full'>
               <Input
-                className='border-[#F5F5F7] bg-[#FAFAFB] pr-10 placeholder:text-[#ADB5BD]'
+                className='border-[#F5F5F7] bg-[#FAFAFB] pr-10 text-right text-base font-medium placeholder:text-left placeholder:text-[#ADB5BD]'
                 id='price'
                 type='text'
                 inputMode='numeric'

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>

apps/front/wraffle-webview/src/shared/ui/divider/Divider.tsx

@@ -0,0 +1,3 @@
+export const Divider = () => {
+  return <div className='h-1 w-full bg-[#F9FAFB]' />;
+};

apps/front/wraffle-webview/src/shared/ui/index.ts

@@ -2,3 +2,4 @@ export * from './form';
 export * from './header/Header';
 export * from './progress/Progress';
 export * from './Timer';
+export * from './divider/Divider';

apps/front/wraffle-webview/src/widgets/product-list/create/ui/DateStepList.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import {useDateValidationWithToast} from '../../lib/hooks';
 import {useEffect} from 'react';
 import {useFormContext, useWatch} from 'react-hook-form';
 import type {CreateEventPayload} from '@/entities/product/model';
@@ -10,7 +11,7 @@ import {
   WinnerCountForm,
 } from '@/features/product-form/ui';
 import {getTypeText} from '@/shared/util';
-import {Button, Toaster, Typography, useToast} from '@wraffle/ui';
+import {Button, Toaster, Typography} from '@wraffle/ui';
 
 export const DateStep = ({
   type,
@@ -26,42 +27,29 @@ export const DateStep = ({
 }) => {
   const eventOrRaffleText = getTypeText(type);
 
-  const {setValue, control} = useFormContext<CreateEventPayload>();
+  const {control, setValue} = useFormContext<CreateEventPayload>();
 
   const [startDate, endDate, announceAt, winnerCount] = useWatch({
     control,
     name: ['startDate', 'endDate', 'announceAt', 'winnerCount'],
   });
 
-  const {toast} = useToast();
-
   const disabled = !startDate || !endDate || !announceAt || !winnerCount;
 
+  useDateValidationWithToast({startDate, endDate, announceAt});
+
   useEffect(() => {
     if (endDate < startDate) {
       setValue('endDate', startDate);
-      toast({
-        title: '응모 마감 일정은',
-        description: '응모 시작 일정 이후로 설정해주세요.',
-        duration: 10000,
-        variant: 'warning',
-      });
     }
-
     if (announceAt < endDate) {
       setValue('announceAt', endDate);
-      toast({
-        title: '당첨자 발표 일정은',
-        description: '응모 마감 일정 이후로 설정해주세요.',
-        duration: 10000,
-        variant: 'warning',
-      });
     }
-  }, [startDate, endDate, announceAt]);
+  }, [startDate, endDate]);
 
   return (
     <div className='flex h-full flex-col gap-5 px-5 pb-20'>
-      <div className='fixed top-5'>
+      <div className='fixed top-5 z-10'>
         <Toaster />
       </div>
       <div>

apps/front/wraffle-webview/src/widgets/product-list/create/ui/ImageStepList.tsx

@@ -1,4 +1,4 @@
-import {ThumbnailCard} from '@/entities/product/ui';
+import {AddItemCard, ImageCardWithDelete} from '@/features/image-handle';
 import {Button, Label, Typography} from '@wraffle/ui';
 
 // TODO
@@ -26,16 +26,21 @@ export const ImageStep = ({onNext}: {onNext: (images: string[]) => void}) => {
         </Label>
       </div>
 
-      <div className='grid w-full max-w-[21rem] grid-cols-2 gap-4 sm:max-w-[55rem] sm:grid-cols-4'>
-        {images.map((url, i) => (
-          <ThumbnailCard key={i} url={url} />
+      <div className='flex flex-wrap gap-4'>
+        {images.map(url => (
+          <ImageCardWithDelete
+            key={url}
+            url={url}
+            onClick={() => {}}
+            className='h-40 w-40'
+          />
         ))}
         {images.length < 4 && (
-          <div className='relative flex aspect-square max-h-40 w-full max-w-40 rounded-lg border border-solid border-[#F5F5F7] bg-[#FAFAFB] sm:max-h-52 sm:max-w-52'>
-            <div className='flex h-full w-full items-center justify-center rounded-lg text-center text-sm font-medium text-[#ADB5BD]'>
-              이미지 추가
-            </div>
-          </div>
+          <AddItemCard
+            label='이미지 추가'
+            onClick={() => {}}
+            className='h-40 w-40'
+          />
         )}
       </div>