Feat/#107 이벤트 흐름 변경에 따른 기능 구현 및 리팩토링

apps/web/app/_apis/mutations/useParticipationEvent.ts

@@ -1,4 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { AxiosError } from 'axios'
 import { participationEvent } from '@/_apis/services/event'
 import { EventQueryKeys } from '@/_apis/queries/event'
 import { addToast } from '@heroui/react'
@@ -12,17 +13,23 @@ export const useParticipationEvent = () => {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: [...EventQueryKeys.privateInfo()],
+        queryKey: EventQueryKeys.byPrivate(),
       })
       addToast({
         title: '응모가 성공적으로 완료되었습니다!',
         severity: 'success',
       })
     },
-    onError: () => {
+    onError: (error) => {
+      console.error('Event participation failed:', error)
+
+      const message =
+        error instanceof AxiosError && error.response?.data?.message
+          ? error.response.data.message
+          : '응모 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.'
+
       addToast({
-        title: '응모 중 오류가 발생했습니다.',
-        color: 'danger',
+        title: message,
         severity: 'danger',
       })
     },

apps/web/app/_apis/mutations/useSubmitWinnerForm.ts

@@ -0,0 +1,36 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { addToast } from '@heroui/react'
+
+import { submitWinnerForm } from '../services/event'
+import type { EventWinnerForm } from '@/_apis/schemas/event'
+import { EventQueryKeys } from '@/_apis/queries/event'
+
+type UseSubmitWinnerFormParams = {
+  eventId: string
+}
+
+export const useSubmitWinnerForm = ({ eventId }: UseSubmitWinnerFormParams) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (data: EventWinnerForm) => submitWinnerForm(eventId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [...EventQueryKeys.result(eventId)],
+      })
+
+      addToast({
+        title: '전화번호가 성공적으로 제출되었습니다!',
+        severity: 'success',
+      })
+    },
+    onError: (error) => {
+      console.error('Failed to submit winner phone number:', error)
+
+      addToast({
+        title: '전화번호 제출에 실패했습니다. 잠시 후 다시 시도해주세요.',
+        severity: 'danger',
+      })
+    },
+  })
+}

apps/web/app/_apis/queries/event.ts

@@ -1,31 +1,39 @@
 import { queryOptions } from '@tanstack/react-query'
 import {
-  getPublicEventInfo,
-  getPrivateEventInfo,
+  getEventByPublic,
+  getEventByPrivate,
   getEventResult,
+  getEventByEntries,
 } from '@/_apis/services/event'
 
 export const EventQueryKeys = {
   all: () => ['event'] as const,
-  publicInfo: () => [...EventQueryKeys.all(), 'info', 'public'] as const,
-  privateInfo: () => [...EventQueryKeys.all(), 'info', 'private'] as const,
-  result: () => [...EventQueryKeys.all(), 'result'] as const,
+  byPublic: () => [...EventQueryKeys.all(), 'info', 'public'] as const,
+  byPrivate: () => [...EventQueryKeys.all(), 'info', 'private'] as const,
+  byEntry: () => [...EventQueryKeys.all(), 'entry'] as const,
+  result: (eventId: string) =>
+    [...EventQueryKeys.all(), 'result', eventId] as const,
 }
 
 export const useEventQueries = {
-  publicInfo: () =>
+  byPublic: () =>
     queryOptions({
-      queryKey: EventQueryKeys.publicInfo(),
-      queryFn: getPublicEventInfo,
+      queryKey: EventQueryKeys.byPublic(),
+      queryFn: getEventByPublic,
     }),
-  privateInfo: () =>
+  byPrivate: () =>
     queryOptions({
-      queryKey: EventQueryKeys.privateInfo(),
-      queryFn: getPrivateEventInfo,
+      queryKey: EventQueryKeys.byPrivate(),
+      queryFn: getEventByPrivate,
     }),
-  result: () =>
+  byEntry: () =>
     queryOptions({
-      queryKey: EventQueryKeys.result(),
-      queryFn: getEventResult,
+      queryKey: EventQueryKeys.byEntry(),
+      queryFn: getEventByEntries,
+    }),
+  result: (eventId: string) =>
+    queryOptions({
+      queryKey: EventQueryKeys.result(eventId),
+      queryFn: () => getEventResult(eventId),
     }),
 }

apps/web/app/_apis/schemas/event.ts

@@ -1,32 +1,55 @@
 import { z } from 'zod'
 
-export const PublicEventSchema = z.object({
-  prize: z.object({
-    description: z.string(),
-    imageUrl: z.string(),
-  }),
+export const EventPrizeSchema = z.object({
+  description: z.string(),
+  imageUrl: z.string(),
 })
 
-export const PrivateEventSchema = z.object({
+export const BaseEventSchema = z.object({
   eventId: z.number().transform(String),
-  prize: z.object({
-    description: z.string(),
-    imageUrl: z.string(),
-  }),
+  prize: EventPrizeSchema,
   totalWinnersCount: z.number(),
   participantsCount: z.number(),
-  usedTicketsCount: z.number(),
-  remainingTicketsCount: z.number(),
   eventEndDate: z.string(),
 })
 
-export const EventResultSchema = z.object({
-  eventId: z.string(),
+export const EventByPublicSchema = z.nullable(
+  z.object({
+    prize: EventPrizeSchema,
+  }),
+)
+
+export const EventByPrivateSchema = z.nullable(
+  BaseEventSchema.extend({
+    usedTicketsCount: z.number(),
+    remainingTicketsCount: z.number(),
+  }),
+)
+
+export const EventEntrySchema = BaseEventSchema
+
+export const EventResultSchema = BaseEventSchema.extend({
   isWinner: z.boolean(),
-  participantsCount: z.number(),
   usedTicketsCount: z.number(),
+  isPhoneSubmitted: z.boolean(),
+})
+
+export const EventWinnerFormSchema = z.object({
+  phoneNumber: z
+    .string()
+    .min(1, '전화번호를 입력해주세요.')
+    .regex(
+      /^010-\d{4}-\d{4}$/,
+      '올바른 형식으로 입력해주세요 (예: 010-1234-5678)',
+    ),
+  agreements: z.object({
+    termsAgreed: z.boolean().refine((val) => val === true),
+    privacyAgreed: z.boolean().refine((val) => val === true),
+  }),
 })
 
-export type PublicEvent = z.infer<typeof PublicEventSchema>
-export type PrivateEvent = z.infer<typeof PrivateEventSchema>
+export type EventByPublic = z.infer<typeof EventByPublicSchema>
+export type EventByPrivate = z.infer<typeof EventByPrivateSchema>
+export type EventByEntry = z.infer<typeof EventEntrySchema>
 export type EventResult = z.infer<typeof EventResultSchema>
+export type EventWinnerForm = z.infer<typeof EventWinnerFormSchema>

apps/web/app/_apis/services/event.ts

@@ -1,33 +1,48 @@
 import axiosInstance from '@/_lib/axiosInstance'
 import { API_PATH } from '@/_constants/path'
 import {
-  PrivateEventSchema,
-  PublicEventSchema,
+  EventByPrivateSchema,
+  EventByPublicSchema,
+  EventEntrySchema,
   EventResultSchema,
+  type EventByEntry,
   type EventResult,
-  type PrivateEvent,
-  type PublicEvent,
+  type EventByPrivate,
+  type EventByPublic,
+  type EventWinnerForm,
 } from '@/_apis/schemas/event'
 
-export const getPublicEventInfo = async (): Promise<PublicEvent> => {
+export const getEventByPublic = async (): Promise<EventByPublic> => {
   const { data } = await axiosInstance.get(API_PATH.EVENT.INFO)
-  return PublicEventSchema.parse(data)
+  return EventByPublicSchema.parse(data)
 }
 
-export const getPrivateEventInfo = async (): Promise<PrivateEvent> => {
+export const getEventByPrivate = async (): Promise<EventByPrivate> => {
   const { data } = await axiosInstance.get(API_PATH.EVENT.INFO)
-  return PrivateEventSchema.parse(data)
+  return EventByPrivateSchema.parse(data)
 }
 
 export const participationEvent = async (body: {
   eventId: string
   ticketsCount: number
 }) => {
-  const { data } = await axiosInstance.post(API_PATH.EVENT.PARTICIPATIONS, body)
+  const { data } = await axiosInstance.post(API_PATH.EVENT.ENTRIES, body)
   return data
 }
 
-export const getEventResult = async (): Promise<EventResult | null> => {
-  const { data } = await axiosInstance.get(API_PATH.EVENT.RESULT)
+export const getEventByEntries = async (): Promise<EventByEntry[]> => {
+  const { data } = await axiosInstance.get(API_PATH.EVENT.ENTRIES)
+  return EventEntrySchema.array().parse(data)
+}
+
+export const getEventResult = async (eventId: string): Promise<EventResult> => {
+  const { data } = await axiosInstance.get(API_PATH.EVENT.RESULT(eventId))
   return EventResultSchema.parse(data)
 }
+
+export const submitWinnerForm = async (
+  eventId: string,
+  data: EventWinnerForm,
+): Promise<void> => {
+  await axiosInstance.post(API_PATH.EVENT.APPLY(eventId), data)
+}

apps/web/app/_constants/path.ts

@@ -36,8 +36,9 @@ export const API_PATH = {
   },
   EVENT: {
     INFO: '/events',
-    PARTICIPATIONS: '/events/entries',
-    RESULT: '/events/results',
+    ENTRIES: '/events/entries',
+    RESULT: (eventId: string) => `/events/${eventId}/entries`,
+    APPLY: (eventId: string) => `/events/${eventId}/apply`,
   },
   REQUEST: {
     LIST: '/requests/places',
@@ -66,6 +67,7 @@ export const CLIENT_PATH = {
   REQUEST_DETAIL: (id: string | number) => `/requests/${id}`,
   EVENTS_FOOD_SLOT: '/events/food-slot',
   EVENTS_LUCKY_DRAW: '/events/lucky-draw',
+  EVENTS_RESULT: (id: string | number) => `/events/lucky-draw/result/${id}`,
   EVENT_GIFTICON: '/events/gifticon',
   EVENT_GIFTICON_DETAIL: (id: string | number) => `/events/gifticon/${id}`,
   LOGIN: '/login',

apps/web/app/_mocks/data/event.ts

@@ -1,6 +1,6 @@
-import type { PrivateEvent, EventResult } from '@/_apis/schemas/event'
+import type { EventByPrivate, EventResult } from '@/_apis/schemas/event'
 
-export const event: PrivateEvent = {
+export const event: EventByPrivate = {
   eventId: '1',
   prize: {
     description: 'BHC 뿌링클 치킨 기프티콘 1장',
@@ -20,3 +20,30 @@ export const eventResult: EventResult = {
   participantsCount: 3,
   usedTicketsCount: 3,
 }
+
+export const EVENT_ENTRIES = {
+  data: [
+    {
+      eventId: 1,
+      totalWinnersCount: 3,
+      participantsCount: 27,
+      prize: {
+        description: 'BHC 뿌링클 치킨 기프티콘 1장',
+        imageUrl:
+          'https://search.pstatic.net/common/?src=https%3A%2F%2Fpup-review-phinf.pstatic.net%2FMjAyNTA3MjNfNzkg%2FMDAxNzUzMjYzMDcwMDI4.YZPG9RYk5jn6jJtaNcaba70NF9uqeD_o8hY4xJ9xc6Eg.mMpLZc8GqkgQAslKGy-gPgAjiktsTSUGuMPQbNdIDWYg.JPEG%2F20250723_182109.jpg',
+      },
+      eventEndDate: '2025-12-18T00:00:00.000000',
+    },
+    {
+      eventId: 2,
+      totalWinnersCount: 4,
+      participantsCount: 27,
+      prize: {
+        description: 'BHC 뿌링클 치킨 기프티콘 1장',
+        imageUrl:
+          'https://search.pstatic.net/common/?src=https%3A%2F%2Fpup-review-phinf.pstatic.net%2FMjAyNTA3MjNfNzkg%2FMDAxNzUzMjYzMDcwMDI4.YZPG9RYk5jn6jJtaNcaba70NF9uqeD_o8hY4xJ9xc6Eg.mMpLZc8GqkgQAslKGy-gPgAjiktsTSUGuMPQbNdIDWYg.JPEG%2F20250723_182109.jpg',
+      },
+      eventEndDate: '2025-12-18T00:00:00.000000',
+    },
+  ],
+}

apps/web/app/_mocks/handlers/eventHandlers.ts

@@ -1,16 +1,19 @@
 import { http, HttpResponse } from 'msw'
-import { eventResult } from '../data/event'
+import { EVENT_ENTRIES } from '../data/event'
 import { API_PATH } from '@/_constants/path'
 import { addBaseUrl } from './addBaseUrl'
 
 export const EventHandlers = [
   // http.get(addBaseUrl(API_PATH.EVENT.INFO), () => {
   //   return HttpResponse.json(event)
   // }),
-  http.post(addBaseUrl(API_PATH.EVENT.PARTICIPATIONS), () => {
-    return HttpResponse.json({ message: '성공' })
-  }),
-  http.get(addBaseUrl(API_PATH.EVENT.RESULT), () => {
-    return HttpResponse.json(eventResult)
+  // http.post(addBaseUrl(API_PATH.EVENT.ENTRIES), () => {
+  //   return HttpResponse.json({ message: '성공' })
+  // }),
+  // http.get(addBaseUrl('/events/:eventId/entries'), () => {
+  //   return HttpResponse.json(eventResult)
+  // }),
+  http.get(addBaseUrl(API_PATH.EVENT.ENTRIES), () => {
+    return HttpResponse.json(EVENT_ENTRIES)
   }),
 ]