fix: 내 티켓 페이지 개선

src/features/event/model/FunnelContext.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, ReactNode, useContext, useState } from 'react';
 import { CreateEventRequest } from './event';
-import { HostCreationRequest } from './hostCreation';
+import { HostCreationRequest } from '../../host/model/host';
 
 export interface FunnelState {
   hostState: HostCreationRequest;

src/features/ticket/api/order.ts

@@ -1,5 +1,5 @@
-import { axiosClient } from "../../../shared/types/api/http-client"
-import { OrderTicketRequest } from "../model/orderInformation";
+import { axiosClient } from '../../../shared/types/api/http-client';
+import { OrderTicketRequest } from '../model/orderInformation';
 
 export const readTicket = {
   // 주문 티켓 전체 조회
@@ -24,6 +24,6 @@ export const orderTickets = async (data: OrderTicketRequest) => {
 
 // 티켓 취소
 export const cancelTickets = async (orderId: number) => {
-  const response = await axiosClient.post(`/orders/cancel?orderId=${orderId}`);
+  const response = await axiosClient.post(`/orders/${orderId}/cancel`);
   return response.data;
 };

src/features/ticket/hooks/useOrderHook.ts

@@ -4,40 +4,40 @@ import { OrderTicketRequest } from '../model/orderInformation';
 
 // 주문 전체 조회
 export const useTicketOrders = (page: number = 0, size: number = 10) => {
-    return useQuery({
-        queryKey: ['ticketOrders', page, size],
-        queryFn: () => readTicket.getAll(page, size),
-    });
+  return useQuery({
+    queryKey: ['ticketOrders', page, size],
+    queryFn: () => readTicket.getAll(page, size),
+  });
 };
 
 // 주문 상세 조회
 export const useTicketOrderDetail = (orderId: number) => {
-    return useQuery({
-        queryKey: ['ticketOrderDetail', orderId],
-        queryFn: () => readTicket.getDetail(orderId),
-        enabled: !!orderId 
-    });
+  return useQuery({
+    queryKey: ['ticketOrderDetail', orderId],
+    queryFn: () => readTicket.getDetail(orderId),
+    enabled: !!orderId,
+  });
 };
 
 // 주문 취소
 export const useCancelTicket = () => {
-    return useMutation({
-        mutationFn: (orderId: number) => cancelTickets(orderId),
-        onSuccess: () => {
-            alert('티켓이 성공적으로 취소되었습니다.');
-        },
-        onError: () => {
-            alert('티켓 취소에 실패하였습니다.');
-        },
-    });
+  return useMutation({
+    mutationFn: (orderId: number) => cancelTickets(orderId),
+    onSuccess: () => {
+      alert('티켓이 성공적으로 취소되었습니다.');
+    },
+    onError: () => {
+      alert('티켓 취소에 실패하였습니다.');
+    },
+  });
 };
 
 // 티켓 구매
 export const useOrderTicket = () => {
-    return useMutation({
-        mutationFn: (data: OrderTicketRequest) => orderTickets(data),
-        onError: () => {
-            alert("티켓 구매 중 오류가 발생했습니다.");
-        },
-    });
-};
+  return useMutation({
+    mutationFn: (data: OrderTicketRequest) => orderTickets(data),
+    onError: () => {
+      alert('티켓 구매 중 오류가 발생했습니다.');
+    },
+  });
+};

src/features/ticket/hooks/useTicketOptionHook.ts

@@ -1,53 +1,64 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { PersonalTicketOptionAnswerResponse, TicketOptionAnswerRequest, TicketOptionAnswerResponse, TicketOptionResponse, TicketResponse } from "../model/ticketInformation";
-import { createTicketOptionAnswers, readPersonalTicketOptionAnswers, readPurchaserAnswers, readTicketOptions } from "../api/ticketOption";
+import { useMutation, useQuery } from '@tanstack/react-query';
+import {
+  PersonalTicketOptionAnswerResponse,
+  TicketOptionAnswerRequest,
+  TicketOptionAnswerResponse,
+  TicketOptionResponse,
+} from '../model/ticketInformation';
+import {
+  createTicketOptionAnswers,
+  readPersonalTicketOptionAnswers,
+  readPurchaserAnswers,
+  readTicketOptions,
+} from '../api/ticketOption';
+import { ApiResponse } from '../../../shared/types/api/apiResponse';
 
 // 티켓 옵션 조회
 export const useTicketOptions = (ticketId: number) => {
-    return useQuery<{ isSuccess: boolean; result: TicketOptionResponse[] }>({
-        queryKey: ['ticketOptions', ticketId],
-        queryFn: () => readTicketOptions(ticketId),
-        enabled: !!ticketId,
-    });
+  return useQuery<{ isSuccess: boolean; result: TicketOptionResponse[] }>({
+    queryKey: ['ticketOptions', ticketId],
+    queryFn: () => readTicketOptions(ticketId),
+    enabled: !!ticketId,
+  });
 };
 
 // 티켓 옵션 응답 전송
 export const useCreateTicketOptionAnswers = () => {
-    return useMutation<TicketResponse, Error, TicketOptionAnswerRequest>({
-        mutationFn: createTicketOptionAnswers,
-        onSuccess: () => {
-            console.log("티켓 옵션 응답 전송 성공");
-        },
-        onError: () => {
-            alert("티켓 옵션 응답 전송 중 오류가 발생했습니다.");
-        },
-    });
+  return useMutation<ApiResponse<null>, Error, TicketOptionAnswerRequest>({
+    mutationFn: createTicketOptionAnswers,
+    onSuccess: () => {
+      console.log('티켓 옵션 응답 전송 성공');
+    },
+    onError: () => {
+      alert('티켓 옵션 응답 전송 중 오류가 발생했습니다.');
+    },
+  });
 };
 
 // 티켓 옵션 응답 전체 조회
 export const usePurchaserAnswers = (ticketId: number | null) => {
-    return useQuery<{ isSuccess: boolean; result: TicketOptionAnswerResponse[] }>({
-        queryKey: ['purchaserAnswers', ticketId],
-        queryFn: () => {
-            if (ticketId === null) {
-                throw new Error("ticketId is required");
-            }
-            return readPurchaserAnswers(ticketId);
-        },
-        enabled: !!ticketId,
-    });
+  return useQuery<{ isSuccess: boolean; result: TicketOptionAnswerResponse[] }>({
+    queryKey: ['purchaserAnswers', ticketId],
+    queryFn: () => {
+      if (ticketId === null) {
+        throw new Error('ticketId is required');
+      }
+      return readPurchaserAnswers(ticketId);
+    },
+    enabled: !!ticketId,
+  });
 };
 
 // 티켓 옵션 응답 개별 조회
 export const usePersonalTicketOptionAnswers = (ticketId: number | null) => {
-    return useQuery<{ isSuccess: boolean; result: PersonalTicketOptionAnswerResponse[] }>({
-        queryKey: ['personalTicketOptionAnswers', ticketId],
-        queryFn: () => {
-            if (ticketId === null) {
-                throw new Error("ticketId is required");
-            }
-            return readPersonalTicketOptionAnswers(ticketId);
-        },
-        enabled: !!ticketId,
-    });
-};
+  return useQuery<{ isSuccess: boolean; result: PersonalTicketOptionAnswerResponse[] }>({
+    queryKey: ['personalTicketOptionAnswers', ticketId],
+    queryFn: () => {
+      if (ticketId === null) {
+        throw new Error('ticketId is required');
+      }
+      return readPersonalTicketOptionAnswers(ticketId);
+    },
+    enabled: !!ticketId,
+  });
+};

src/features/ticket/model/Order.ts

@@ -1,5 +1,27 @@
+import { OnlineType } from '../../../shared/types/baseEventType';
+
 export interface OrderTicketRequest {
-    ticketId: number;
-    eventId: number;
-    ticketCnt: number;
-}
+  ticketId: number;
+  eventId: number;
+  ticketCnt: number;
+}
+
+export interface OrderTicketResponse {
+  id: number;
+  event: {
+    id: number;
+    bannerImageUrl: string;
+    title: string;
+    hostChannelName: string;
+    address: string;
+    startDate: string;
+    remainDays: string;
+    hashtags: string[];
+    onlineType: OnlineType;
+  };
+  ticketQrCode: string;
+  ticketName: string;
+  ticketPrice: number;
+  orderStatus: 'COMPLETED' | 'PENDING' | 'CANCELED';
+  checkIn: boolean;
+}

src/features/ticket/model/TicketContext.tsx

@@ -19,8 +19,6 @@ export const TicketProvider = ({ children }: { children: ReactNode }) => {
     availableQuantity: 0,
     startDate: '',
     endDate: '',
-    startTime: '06:00',
-    endTime: '23:00',
   });
 
   const setTicketChannelId = (ticketChannelId: number) => {

src/features/ticket/model/ticketInformation.ts

@@ -1,50 +1,43 @@
-export interface CreateTicketRequest {
-    eventId: number;
-    ticketType: string;
-    ticketName: string;
-    ticketDescription: string;
-    ticketPrice: number;
-    availableQuantity: number;
-    startDate: string;
-    endDate: string;
-    startTime: string;
-    endTime: string;
-}
+export type TicketOptionType = 'SINGLE' | 'MULTIPLE' | 'TEXT';
 
-export interface TicketResponse {
-    isSuccess: boolean;
-    code: string;
-    message: string;
-    result: string; // "ticketId: 2"
+export interface CreateTicketRequest {
+  eventId: number;
+  ticketType: string;
+  ticketName: string;
+  ticketDescription: string;
+  ticketPrice: number;
+  availableQuantity: number;
+  startDate: string;
+  endDate: string;
 }
 
 export interface ReadTicketResponse {
-    ticketId: number;
-    ticketName: string;
-    ticketDescription: string;
-    ticketPrice: number;
-    availableQuantity: number;
+  ticketId: number;
+  ticketName: string;
+  ticketDescription: string;
+  ticketPrice: number;
+  availableQuantity: number;
 }
 
 export interface TicketOptionChoice {
-    id: number;
-    name: string;
+  id: number;
+  name: string;
 }
 export interface TicketOptionResponse {
-    id: number;
-    name: string;
-    description: string;
-    type: 'SINGLE' | 'MULTIPLE' | 'TEXT';
-    isMandatory: boolean;
-    choices: TicketOptionChoice[];
+  id: number;
+  name: string;
+  description: string;
+  type: TicketOptionType;
+  isMandatory: boolean;
+  choices: TicketOptionChoice[];
 }
 
 // 티켓 옵션 응답 전송
 export interface TicketOptionAnswerRequest {
-    ticketOptionId: number;
-    answerText?: string;
-    ticketOptionChoiceId?: number;
-    ticketOptionChoiceIds?: number[];
+  ticketOptionId: number;
+  answerText?: string;
+  ticketOptionChoiceId?: number;
+  ticketOptionChoiceIds?: number[];
 }
 
 // 티켓 옵션 응답 전체 조회
@@ -55,11 +48,10 @@ export type TicketOptionAnswer = {
 export type TicketOptionAnswerResponse = {
   optionId: number;
   optionName: string;
-  optionType: 'SINGLE' | 'MULTIPLE' | 'TEXT';
+  optionType: TicketOptionType;
   answers: TicketOptionAnswer[];
 };
 
-
 // 티켓 옵션 응답 개별 조회
 export type PersonalTicketOptionAnswerResponse = {
   userId: number;
@@ -71,6 +63,6 @@ export interface Order {
 }
 export interface OptionAnswer {
   optionName: string;
-  optionType: 'SINGLE' | 'MULTIPLE' | 'TEXT';
+  optionType: TicketOptionType;
   answer: string;
-}
+}