refact: ticket api 리팩토링

Author: hyeeuncho

src/features/ticket/api/ticket.ts

@@ -1,23 +1,19 @@
 import { axiosClient } from "../../../shared/types/api/http-client";
-import { CreateTicketRequest } from "../model/ticketCreation";
+import { CreateTicketRequest, ReadTicketResponse } from "../model/ticketInformation";
 
 export const createTicket = async (data: CreateTicketRequest) => {
     const response = await axiosClient.post('/tickets', data);
     return response.data;
 }
 
-export const readTicket = {
-    getAll: async (eventId: number) => {
-        const response = await axiosClient.get("/tickets", {
-            params: { eventId },
-        });
-        return response.data;
-    },
+export const readTicket = async (eventId: number): Promise<{ isSuccess: boolean; result: ReadTicketResponse[] }> => {
+    const response = await axiosClient.get("/tickets", {
+        params: { eventId },
+    });
+    return response.data;
 }
 
-export const deleteTicket = {
-    remove: async (ticketId: number) => {
-        const response = await axiosClient.delete(`/tickets/${ticketId}`);
-        return response.data;
-    },
+export const deleteTicket = async (ticketId: number) => {
+    const response = await axiosClient.delete(`/tickets/${ticketId}`);
+    return response.data;
 }

src/features/ticket/hooks/useTicketHook.ts

@@ -0,0 +1,37 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { createTicket, deleteTicket, readTicket } from "../api/ticket";
+import { CreateTicketRequest, ReadTicketResponse, TicketResponse } from "../model/ticketInformation";
+
+export const useTickets = (eventId: number) => {
+    return useQuery<{ isSuccess: boolean; result: ReadTicketResponse[] }>({
+        queryKey: ['tickets', eventId],
+        queryFn: () => readTicket(eventId),
+        enabled: !!eventId,
+    });
+};
+
+export const useCreateTicket = () => {
+    return useMutation<TicketResponse, Error, CreateTicketRequest>({
+        mutationFn: createTicket,
+        onSuccess: () => {
+            alert('티켓이 성공적으로 저장되었습니다.');
+            window.location.reload();
+        },
+        onError: () => {
+            alert('티켓 저장에 실패했습니다. 다시 시도해주세요.');
+        },
+    });
+};
+
+export const useDeleteTicket = () => {
+    return useMutation<TicketResponse, Error, number>({
+        mutationFn: deleteTicket,
+        onSuccess: () => {
+            alert("티켓이 삭제되었습니다.");
+            window.location.reload();
+        },
+        onError: () => {
+            alert('티켓 삭제 중 오류가 발생했습니다.');
+        }
+    });
+};

src/features/ticket/model/TicketContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, ReactNode, useContext, useState } from 'react';
-import { CreateTicketRequest } from './ticketCreation';
+import { CreateTicketRequest } from './ticketInformation';
 
 export interface TicketState {
   ticketState: CreateTicketRequest;

src/features/ticket/model/ticketCreation.ts

@@ -0,0 +1,27 @@
+export interface CreateTicketRequest {
+    eventId: number;
+    ticketType: string;
+    ticketName: string;
+    ticketDescription: string;
+    ticketPrice: number;
+    availableQuantity: number;
+    startDate: string;
+    endDate: string;
+    startTime: string;
+    endTime: string;
+}
+
+export interface TicketResponse {
+    isSuccess: boolean;
+    code: string;
+    message: string;
+    result: string; // "ticketId: 2"
+}
+
+export interface ReadTicketResponse {
+    ticketId: number;
+    ticketName: string;
+    ticketDescription: string;
+    ticketPrice: number;
+    availableQuantity: number;
+}

src/features/ticket/model/ticketInformation.ts

@@ -5,12 +5,18 @@ import ChoiceChip from '../../../../../design-system/ui/ChoiceChip';
 import DefaultTextField from '../../../../../design-system/ui/textFields/DefaultTextField';
 import Button from '../../../../../design-system/ui/Button';
 import TicketDatePicker from '../../../../features/ticket/model/TicketDatePicker';
-import { createTicket } from '../../../../features/ticket/api/ticket';
-import { CreateTicketRequest } from '../../../../features/ticket/model/ticketCreation';
+import { CreateTicketRequest } from '../../../../features/ticket/model/ticketInformation';
+import { useCreateTicket } from '../../../../features/ticket/hooks/useTicketHook';
+import { useNavigate, useParams } from 'react-router-dom';
 
 const TicketCreatePage = () => {
+  const navigate = useNavigate();
+  const { mutate: createTicket } = useCreateTicket();
+  const { id } = useParams();
+  const eventId = Number(id);
+  
   const [ticketData, setTicketData] = useState<CreateTicketRequest>({
-    eventId: 1,
+    eventId: eventId,
     ticketType: 'FIRST_COME',
     ticketName: '',
     ticketDescription: '',
@@ -76,14 +82,8 @@ const TicketCreatePage = () => {
       alert('모든 필수 입력 항목을 작성해주세요.');
       return;
     }
-    try {
-      const response = await createTicket(ticketData);
-      console.log('티켓 저장 성공:', response);
-      alert('티켓이 성공적으로 저장되었습니다.');
-    } catch (err) {
-      console.error('티켓 저장에 실패했습니다.', err);
-      alert('티켓 저장에 실패했습니다. 다시 시도해주세요.');
-    }
+    createTicket(ticketData);
+    navigate(`/dashboard/${id}/ticket`);
   };
 
   return (

src/pages/dashboard/ui/ticket/TicketCreatePage.tsx

@@ -1,48 +1,24 @@
 import DashboardLayout from '../../../../shared/ui/backgrounds/DashboardLayout';
 import Ticket from '../../../../../public/assets/dashboard/ticket/Ticket(horizon).svg';
 import TicketItem from '../../../../widgets/dashboard/ui/TicketItem';
-import { useNavigate } from 'react-router-dom';
-import { DASHBOARD_ROUTES } from '../../../../app/routes/routes';
+import { useNavigate, useParams } from 'react-router-dom';
 import HorizontalCardButton from '../../../../../design-system/ui/buttons/HorizontalCardButton';
 import AddButton from '../../../../../public/assets/dashboard/ticket/AddButton.svg';
-import { useEffect, useState } from 'react';
-import { readTicket } from '../../../../features/ticket/api/ticket';
-
-export interface ReadTicket {
-  ticketId: number;
-  ticketName: string;
-  ticketDescription: string;
-  ticketPrice: number;
-  availableQuantity: number;
-}
+import { useTickets } from '../../../../features/ticket/hooks/useTicketHook';
 
 const TicketListPage = () => {
   const navigate = useNavigate();
 
   const navigateToTicketCreate = () => {
-    navigate(DASHBOARD_ROUTES.ticketCreate);
+    navigate(`/dashboard/${id}/ticket/create`);
   };
+  const { id } = useParams();
+  const eventId = id ? parseInt(id) : 1;
+  const { data, isLoading, isError } = useTickets(eventId);
 
-  const [tickets, setTickets] = useState<ReadTicket[]>([]); 
-  const eventId = 1; //수정 필요
+  if (isLoading) return <div>로딩 중...</div>;
+  if (isError) return <div>티켓 정보를 불러오는 중 오류가 발생했습니다.</div>;
 
-  useEffect(() => {
-    const fetchTickets = async () => {
-      try {
-        const data = await readTicket.getAll(eventId);
-        if (data.isSuccess && Array.isArray(data.result)) {
-          setTickets(data.result);
-        } else {
-          setTickets([]);
-        }
-      } catch (error) {
-        console.error("티켓 데이터를 불러오는 중 오류 발생:", error);
-        setTickets([]);
-      }
-    };
-    fetchTickets();
-  }, [eventId]);
-  
   return (
     <DashboardLayout centerContent="WOOACON 2024">
       <div className="mt-8 px-7">
@@ -69,8 +45,8 @@ const TicketListPage = () => {
             <img src={Ticket} />
             <p className="font-bold text-base md:text-lg">티켓</p>
           </div>
-          {tickets.length > 0 ? (
-            tickets.map(value => <TicketItem key={value.ticketId} ticket={value}/>)
+          {data?.isSuccess && data?.result.length > 0 ? (
+            data.result.map(value => <TicketItem key={value.ticketId} ticket={value} />)
           ) : (
             <div className="text-gray5 font-thin">현재 등록된 티켓이 없습니다.</div>
           )}

src/pages/dashboard/ui/ticket/TicketListPage.tsx

@@ -1,23 +1,13 @@
 import AvailableTicket from '../../../../public/assets/dashboard/ticket/Ticket(gray).svg';
 import PersonIcon from '../../../../public/assets/dashboard/ticket/PersonIcon.svg';
-import { ReadTicket } from '../../../pages/dashboard/ui/ticket/TicketListPage';
 import { motion } from "framer-motion";
 import { useState } from 'react';
-import { deleteTicket } from '../../../features/ticket/api/ticket';
+import { ReadTicketResponse } from '../../../features/ticket/model/ticketInformation';
+import { useDeleteTicket } from '../../../features/ticket/hooks/useTicketHook';
 
-const TicketItem = ({ ticket }: { ticket: ReadTicket }) => {
+const TicketItem = ({ ticket }: { ticket: ReadTicketResponse }) => {
   const [isDragging, setIsDragging] = useState(false);
-  const handleDelete = async () => {
-    const isConfirmed = window.confirm("티켓을 삭제하시겠습니까?");
-    if (!isConfirmed) return;
-    try {
-      await deleteTicket.remove(ticket.ticketId);
-      alert("티켓이 삭제되었습니다.");
-      window.location.reload();
-    } catch (error) {
-      console.error("티켓 삭제 중 오류 발생:", error);
-    }
-  };
+  const { mutate: handleDelete} = useDeleteTicket();
   return (
     <div className="relative overflow-hidden w-full mb-4">
       <motion.div
@@ -54,7 +44,7 @@ const TicketItem = ({ ticket }: { ticket: ReadTicket }) => {
         initial={{ x: '100%' }}
         animate={{ x: isDragging ? 0 : 'calc(100% + 1px)' }}
         transition={{ duration: 0 }}
-        onClick={handleDelete}
+        onClick={() => handleDelete(ticket.ticketId)}
       >
         삭제
       </motion.button>

src/widgets/dashboard/ui/TicketItem.tsx

@@ -1,43 +1,26 @@
 import { useEffect, useState } from 'react';
 import TertiaryButton from '../../../../design-system/ui/buttons/TertiaryButton';
 import TextButton from '../../../../design-system/ui/buttons/TextButton';
-import { readTicket } from '../../../features/ticket/api/ticket';
-import { ReadTicket } from '../../../pages/dashboard/ui/ticket/TicketListPage';
 import { OrderTicketRequest } from '../../../features/ticket/model/OrderCreation';
 import { orderTickets } from '../../../features/ticket/api/order';
 import { useNavigate } from 'react-router-dom';
+import { useTickets } from '../../../features/ticket/hooks/useTicketHook';
 
 const TicketInfo = ({ eventId }: { eventId: number }) => {
   const limitNum = 4;
-  const [tickets, setTickets] = useState<ReadTicket[]>([]);
+  const { data, isError, isLoading } = useTickets(eventId);
   const [quantity, setQuantity] = useState<{ [key: number]: number }>({});
   const navigate = useNavigate();
-
-  useEffect(() => {
-    const fetchTickets = async () => {
-      try {
-        const data = await readTicket.getAll(eventId);
-        if (data.isSuccess && Array.isArray(data.result)) {
-          setTickets(data.result);
-        } else {
-          setTickets([]);
-        }
-      } catch (error) {
-        console.error("티켓 데이터를 불러오는 중 오류 발생:", error);
-        setTickets([]);
-      }
-    };
-    fetchTickets();
-  }, [eventId]);
   useEffect(() => {
-    if (tickets.length > 0) {
+    if (data && data.isSuccess) {
       const initialQuantity: { [key: number]: number } = {};
-      tickets.forEach(ticket => {
+      data.result.forEach(ticket => {
         initialQuantity[ticket.ticketId] = 1;
       });
       setQuantity(initialQuantity);
     }
-  }, [tickets]);
+  }, [data]);
+
   const handleIncrement = (ticketId: number) => {
     setQuantity(prev => ({
       ...prev,
@@ -60,28 +43,29 @@ const TicketInfo = ({ eventId }: { eventId: number }) => {
         eventId,
         ticketCnt,
       };
-  
+
       const response = await orderTickets(requestData);
-  
+
       console.log("API 응답:", response);
-  
+
       if (response.isSuccess && Array.isArray(response.result)) {
         const orderIds = response.result;
-  
+
         navigate('/payment/ticket-confirm', { state: { orderIds, ticketId, eventId } });
       } else {
         alert("주문 정보를 불러올 수 없습니다.");
       }
-  
+
     } catch (error) {
       alert("티켓 구매 중 오류가 발생했습니다.");
     }
   };
-  
+  if (isLoading) return <div>Loading...</div>;
+  if (isError || !data || !data.isSuccess) return <div>티켓 정보를 불러올 수 없습니다.</div>;
 
   return (
     <div className="w-full h-full">
-      {tickets.map(ticket => (
+      {data.result.map(ticket => (
         <div key={ticket.ticketId} className="bg-gray1 px-3 py-3 md:px-6 md:py-4 rounded-[10px] mb-3">
           <div className="flex justify-between items-center">
             <div className="flex flex-col gap-2">