[WRFE0-70](feat): 래플, 이벤트 생성API연동 중

eric-hjh · eric-hjh · commit aef4aabe0b0f · 2025-03-26T18:41:36.000+09:00
diff --git a/apps/front/wraffle-webview/app/products/create/event/page.tsx b/apps/front/wraffle-webview/app/products/create/event/page.tsx
@@ -1,10 +1,15 @@
 'use client';
 
-import type {EventCreateState} from '@/entities/product/model';
+import type {
+  CreateEventPayload,
+  EventCreateState,
+} from '@/entities/product/model';
 import {
   createEventDefaultValues,
   createEventSchema,
 } from '@/entities/product/model';
+import {useCreateProductMutation} from '@/features/product/create/api/useCreateQuery';
+import type {Payload} from '@/features/product/create/config/type';
 import {GenericForm, Header, ProgressBar} from '@/shared/ui';
 import {
   DateStep,
@@ -41,13 +46,31 @@ const EventCreate = () => {
       context: {},
     },
   });
-
   const EventTotalStepIndex = 5;
 
-  // TODO
-  // 생성 api 연동
-  const onSubmit = (data: EventCreateState) => {
-    console.log('go : ', data);
+  const {mutateAsync: createProduct, data} = useCreateProductMutation();
+
+  const onSubmit = async (data: CreateEventPayload) => {
+    const formatRaffleData: Payload = {
+      type: 'event',
+      title: data.title,
+      categoryId: Number(data.categoryId),
+      tagIds: data.tagIds,
+      price: Number(data.price),
+      startDate: String(data.startDate),
+      endDate: String(data.endDate),
+      announceAt: String(data.announceAt),
+      winnerCount: Number(data.winnerCount),
+      images: data.images,
+      etc: data.etc,
+      description: '', // 사용되지 않음
+      products: data.products,
+    };
+    try {
+      await createProduct(formatRaffleData);
+    } catch (e) {
+      console.error(e);
+    }
   };
 
   return (
@@ -64,7 +87,7 @@ const EventCreate = () => {
       )}
 
       <GenericForm
-        onSubmit={() => onSubmit(funnel.context)}
+        onSubmit={onSubmit}
         formOptions={{
           mode: 'onChange',
           resolver: (data, context, options) => {
@@ -107,13 +130,14 @@ const EventCreate = () => {
           etcStep={({history}) => (
             <EtcStep onNext={etc => history.push('successStep', {etc})} />
           )}
-          successStep={() => (
-            <SuccessList type='event' productId={'1'} thumbnail={''} /> // productId,thumbnail api 연동후 작업
-          )}
+          successStep={() => <SuccessList type='event' productData={data} />}
         />
       </GenericForm>
     </div>
   );
 };
 
 export default EventCreate;
+
+// success 라우터 따로 빼기
+// -> 이미지 링크를 어떻게 줘야
diff --git a/apps/front/wraffle-webview/app/products/create/raffle/page.tsx b/apps/front/wraffle-webview/app/products/create/raffle/page.tsx
@@ -1,10 +1,15 @@
 'use client';
 
+import type {
+  CreateRafflePayload,
+  RaffleCreateState,
+} from '@/entities/product/model';
 import {
   createRaffleDefaultValues,
   createRaffleSchema,
-  type RaffleCreateState,
 } from '@/entities/product/model';
+import {useCreateProductMutation} from '@/features/product/create/api/useCreateQuery';
+import type {Payload} from '@/features/product/create/config/type';
 import {GenericForm, Header, ProgressBar} from '@/shared/ui';
 import {
   DateStep,
@@ -37,15 +42,33 @@ const RaffleCreate = () => {
       context: {},
     },
   });
-
   const RaffleTotalStepIndex = 4;
 
+  const {mutateAsync: createProduct, data} = useCreateProductMutation();
+
   console.log(funnel.context);
 
-  // TODO
-  // 생성 api 연결
-  const onSubmit = (data: RaffleCreateState) =>
-    console.log('go to server : ', data);
+  const onSubmit = async (data: CreateRafflePayload) => {
+    const formatRaffleData: Payload = {
+      type: 'raffle',
+      title: data.title,
+      categoryId: Number(data.categoryId),
+      tagIds: data.tagIds,
+      price: Number(data.price),
+      startDate: String(data.startDate),
+      endDate: String(data.endDate),
+      announceAt: String(data.announceAt),
+      winnerCount: Number(data.winnerCount),
+      images: data.images,
+      etc: data.etc,
+      description: '', // 사용되지 않음
+    };
+    try {
+      await createProduct(formatRaffleData);
+    } catch (e) {
+      console.error(e);
+    }
+  };
 
   return (
     <div>
@@ -61,7 +84,7 @@ const RaffleCreate = () => {
       )}
 
       <GenericForm
-        onSubmit={() => onSubmit(funnel.context)}
+        onSubmit={onSubmit}
         formOptions={{
           mode: 'onChange',
           resolver: (data, context, options) => {
@@ -99,9 +122,7 @@ const RaffleCreate = () => {
           etcStep={({history}) => (
             <EtcStep onNext={etc => history.push('successStep', {etc})} />
           )}
-          successStep={() => (
-            <SuccessList type='raffle' productId={'1'} thumbnail={''} /> // productId,thumbnail api 연동후 작업
-          )}
+          successStep={() => <SuccessList type='raffle' productData={data} />}
         />
       </GenericForm>
     </div>
diff --git a/apps/front/wraffle-webview/src/entities/product/model/createEventSchema.ts b/apps/front/wraffle-webview/src/entities/product/model/createEventSchema.ts
@@ -12,9 +12,9 @@ const announceAtSchema = z.date();
 const winnerCountSchema = z.string().default('');
 
 const productsSchema = z.object({
-  title: z.string(),
+  title: z.string().default(''),
   tagIds: z.number().array().default([]),
-  imageUrl: z.string(),
+  imageUrl: z.string().default(''),
 });
 const productsArraySchema = z.array(productsSchema).default([]);
 
diff --git a/apps/front/wraffle-webview/src/entities/product/model/createRaffleSchema.ts b/apps/front/wraffle-webview/src/entities/product/model/createRaffleSchema.ts
@@ -6,9 +6,9 @@ const categoryIdSchema = z.string().default('');
 const tagIdsSchema = z.number().array().default([]);
 const priceSchema = z.string().default('');
 
-const startDateSchema = z.date().optional();
-const endDateSchema = z.date().optional();
-const announceAtSchema = z.date().optional();
+const startDateSchema = z.date();
+const endDateSchema = z.date();
+const announceAtSchema = z.date();
 const winnerCountSchema = z.string().default('');
 
 const imagesSchema = z.string().array().default([]);
diff --git a/apps/front/wraffle-webview/src/features/product/create/api/useCreateQuery.ts b/apps/front/wraffle-webview/src/features/product/create/api/useCreateQuery.ts
@@ -0,0 +1,25 @@
+import type {
+  EventPayload,
+  Payload,
+  ProductResponse,
+  RafflePayload,
+} from '../config/type';
+import apiClient from '@/shared/api/apiClient';
+import {useMutation} from '@tanstack/react-query';
+
+export const createProduct = async (payload: Payload) => {
+  const {type, ...data} = payload;
+  const url = type === 'raffle' ? '/raffles' : '/events';
+
+  const response = await apiClient.post<
+    ProductResponse,
+    RafflePayload | EventPayload
+  >(url, {body: data, withAuth: true});
+  return response.data;
+};
+
+export const useCreateProductMutation = () => {
+  return useMutation({
+    mutationFn: (data: Payload) => createProduct(data),
+  });
+};
diff --git a/apps/front/wraffle-webview/src/features/product/create/config/type.ts b/apps/front/wraffle-webview/src/features/product/create/config/type.ts
@@ -0,0 +1,34 @@
+interface BasePayload {
+  title: string;
+  price: number;
+  startDate: string;
+  endDate: string;
+  announceAt: string;
+  winnerCount: number;
+  description: string;
+  etc: string;
+  categoryId: number;
+  tagIds: number[];
+  images: string[];
+}
+
+export interface RafflePayload extends BasePayload {}
+
+interface Product {
+  title: string;
+  imageUrl: string;
+  tagIds: number[];
+}
+
+export interface EventPayload extends BasePayload {
+  products: Product[];
+}
+
+export type Payload =
+  | ({type: 'raffle'} & RafflePayload)
+  | ({type: 'event'} & EventPayload);
+
+export interface ProductResponse {
+  id: number;
+  thumbnail: string;
+}
diff --git a/apps/front/wraffle-webview/src/widgets/product-list/create/ui/SuccessList.tsx b/apps/front/wraffle-webview/src/widgets/product-list/create/ui/SuccessList.tsx
@@ -3,17 +3,20 @@ import Link from 'next/link';
 import {getTypeText} from '@/shared/util';
 import {Button, Typography} from '@wraffle/ui';
 
-export const SuccessList = ({
-  type,
-  productId,
-  thumbnail,
-}: {
-  type: 'raffle' | 'event';
-  productId: string;
-  thumbnail: string;
-}) => {
+interface SuccessListProps {
+  type: 'event' | 'raffle';
+  productData?: {
+    id: number;
+    thumbnail: string;
+  };
+}
+
+export const SuccessList = ({type, productData}: SuccessListProps) => {
   const eventOrRaffleText = getTypeText(type);
 
+  if (!productData) {
+    return <div>data loaidng</div>;
+  }
   return (
     <div className='flex h-full flex-col items-center px-4 py-6'>
       <div className='mb-24 w-full text-left'>
@@ -27,15 +30,15 @@ export const SuccessList = ({
       </div>
 
       <Image
-        src={thumbnail}
+        src={productData.thumbnail}
         width={250}
         height={250}
         alt='thumbnail-image'
         className='h-60 w-60 rounded-lg bg-blue-200 object-cover'
       />
 
       <div className='fixed inset-x-0 bottom-0 px-4 py-4'>
-        <Link href={`/products/${productId}?type=${type}`}>
+        <Link href={`/products/${productData.id}?type=${type}`} replace={true}>
           <Button className='h-[45px]'>
             {eventOrRaffleText.successWithoutReviewButton}
           </Button>
