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

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

@@ -0,0 +1,74 @@
+'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',
+};
+
+interface Params {
+  id: string;
+}
+
+interface SearchParams {
+  type: 'raffle' | 'event';
+}
+
+interface EditProps {
+  params: Params;
+  searchParams: SearchParams;
+}
+
+const Edit = ({params: {id}, searchParams: {type}}: EditProps) => {
+  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

@@ -53,7 +53,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,21 @@
+'use client';
+
+import clsx from 'clsx';
+
+interface AddItemCardProps {
+  label: string;
+  onClick: () => void;
+  className: string;
+}
+
+export const AddItemCard = ({label, onClick, className}: AddItemCardProps) => (
+  <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,34 @@
+'use client';
+
+import clsx from 'clsx';
+import Image from 'next/image';
+
+interface ImageCardWithDeleteProps {
+  url: string;
+  onClick: () => void;
+  className: string;
+}
+
+export const ImageCardWithDelete = ({
+  url,
+  onClick,
+  className,
+}: ImageCardWithDeleteProps) => (
+  <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,19 @@
+export const STARTDATE_IS_OVER_ENDDATE = {
+  title: '유효하지 않은 날짜입니다.',
+  description: '응모 시작 일정은 응모 마감 일정 전으로 설정해주세요.',
+  duration: 5000,
+  variant: 'warning',
+};
+
+export const ENDDATE_IS_OVER_ANNOUNCEAT = {
+  title: '유효하지 않은 날짜입니다.',
+  description: '응모 마감 일정은 당첨자 발표 일정 전으로 설정해주세요.',
+  duration: 5000,
+  variant: 'warning',
+};
+
+export const STARTDATE_IS_UNDEFINED = {
+  title: '응모 시작 일정 먼저 선택해주세요',
+  duration: 2000,
+  variant: 'info',
+};

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

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

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

@@ -0,0 +1,30 @@
+import {isDateBeforeReferenceDate} from './isDateBeforeReferenceDate';
+
+interface ToastInfo {
+  title: string;
+  description: string;
+  duration: number;
+  variant: string;
+}
+
+interface ValidateAndChangeDateProps {
+  date: Date | undefined;
+  referenceDate: Date | undefined;
+  onChange: (selected: Date | undefined) => void;
+  toastInfo: ToastInfo;
+  toast: (info: ToastInfo) => void;
+}
+
+export const validateAndChangeDate = ({
+  date,
+  referenceDate,
+  onChange,
+  toastInfo,
+  toast,
+}: ValidateAndChangeDateProps) => {
+  if (isDateBeforeReferenceDate({date, referenceDate})) {
+    onChange(date);
+  } else {
+    toast(toastInfo);
+  }
+};

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

@@ -10,7 +10,7 @@ export const AnnounceAtForm = ({
   fromDate: endDate,
   startDate,
 }: {
-  defaultValue: Date;
+  defaultValue: Date | undefined;
   fromDate: Date;
   startDate: Date;
 }) => {
@@ -27,7 +27,7 @@ export const AnnounceAtForm = ({
             <CalendarForm
               dateLabel='당첨자 발표 시간을 입력해주세요.'
               selected={defaultValue}
-              setSelected={field.onChange}
+              onSelect={field.onChange}
               fromDate={endDate}
               onClick={e => {
                 if (!startDate || !endDate) {

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

@@ -1,19 +1,27 @@
 'use client';
 
 import type {CreateEventPayload} from '../../../entities/product/model';
+import {
+  ENDDATE_IS_OVER_ANNOUNCEAT,
+  STARTDATE_IS_UNDEFINED,
+} from '../config/const';
+import {validateAndChangeDate} from '../config/validateAndChangeDate.ts';
 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,17 +33,21 @@ export const EndDateForm = ({
             <CalendarForm
               dateLabel='응모 마감 시간을 입력해주세요.'
               selected={defaultValue}
-              setSelected={field.onChange}
+              onSelect={date =>
+                validateAndChangeDate({
+                  date,
+                  referenceDate: announceAt,
+                  onChange: field.onChange,
+                  toastInfo: ENDDATE_IS_OVER_ANNOUNCEAT,
+                  toast,
+                })
+              }
               fromDate={startDate}
               onClick={e => {
                 if (!startDate) {
                   e.preventDefault();
                   e.stopPropagation();
-                  toast({
-                    title: '응모 시작 일정 먼저 선택해주세요',
-                    duration: 2000,
-                    variant: 'info',
-                  });
+                  toast(STARTDATE_IS_UNDEFINED);
                 }
               }}
             />

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 {validateAndChangeDate} from '../config/validateAndChangeDate';
 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,15 @@ export const StartDateForm = ({defaultValue}: {defaultValue: Date}) => {
             <CalendarForm
               dateLabel='응모 시작 시간을 입력해주세요.'
               selected={defaultValue}
-              setSelected={field.onChange}
+              onSelect={date =>
+                validateAndChangeDate({
+                  date,
+                  referenceDate: endDate,
+                  onChange: field.onChange,
+                  toastInfo: STARTDATE_IS_OVER_ENDDATE,
+                  toast,
+                })
+              }
               fromDate={new Date()}
             />
           </FormControl>