feat: 티켓 구매 API 연동

src/features/ticket/api/order.ts

@@ -1,9 +1,33 @@
 import { axiosClient } from "../../../shared/types/api/http-client"
-export const readMyTickets = {
-  get: async (page: number = 0, size: number = 10) => {
+import { OrderTicketRequest } from "../model/OrderCreation";
+
+export const readTicket = {
+  // 주문 티켓 전체 조회
+  getAll: async (page: number = 0, size: number = 10) => {
     const response = await axiosClient.get("/orders", {
       params: { page, size },
     });
     return response.data;
   },
-}
+  // 주문 상세 조회
+  getDetail: async(ticketId: number, eventId: number) => {
+    const response = await axiosClient.get('/orders/purchase-confirmation',{
+      params: {ticketId, eventId}
+    });
+    return response.data;
+  }
+}
+
+// 티켓 구매
+export const orderTickets = async (data: OrderTicketRequest) => {
+  const response = await axiosClient.post("/orders", data);
+  return response.data;
+}
+
+// 티켓 취소
+export const cancleTickets = async (orderId: number) => {
+  const response = await axiosClient.post(`/orders/cancel?orderId=${orderId}`);
+  return response.data;
+}
+
+

src/features/ticket/model/OrderCreation.ts

@@ -0,0 +1,5 @@
+export interface OrderTicketRequest {
+    ticketId: number;
+    eventId: number;
+    ticketCnt: number;
+}

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

@@ -1,20 +1,65 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Header from '../../../../../design-system/ui/Header';
 import Search from '../../../../../design-system/icons/Search.svg';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import EmailDeleteMoal from '../../../../widgets/dashboard/ui/EmailDeleteModal';
 import PurchaseBanner from '../../../../widgets/dashboard/ui/TicketConfirmPage/PurchaseBanner';
-import OrganizerInfo from '../../../../widgets/dashboard/ui/TicketConfirmPage/OrganizerInfo';
-import LocationInfo from '../../../../widgets/dashboard/ui/TicketConfirmPage/LocationInfo';
+import OrganizerInfo from '../../../../widgets/event/ui/OrganizerInfo';
+import KakaoMap from '../../../../shared/ui/KakaoMap';
+import { cancleTickets, readTicket } from '../../../../features/ticket/api/order';
+
+type Ticket = {
+  id: number;
+  title: string;
+  startDate: string;
+  startTime: string;
+  ticketName: string;
+  ticketCnt: number;
+  hostChannelName: string;
+  hostChannelDescription: string;
+  organizerEmail: string;
+  organizerPhoneNumber: string;
+  eventAddress: string;
+  location: { lng: number, lat: number };
+  remainDays: string;
+  ticketQrCode: string;
+  orderStatus: "COMPLETED" | "PENDING" | "CANCELED";
+};
 
 const TicketConfirmPage = () => {
   const navigate = useNavigate();
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const location = useLocation();
+  const orderIds: number[] = location.state?.orderIds || [];
+  const eventId = location.state?.eventId;
+  const ticketId = location.state?.ticketId;
 
+  console.log(ticketId, eventId, orderIds);
+  const [ticket, setTicket] = useState<Ticket | null>(null);
+  useEffect(() => {
+    const fetchOrderTicket = async () => {
+      try {
+        const response = await readTicket.getDetail(ticketId, eventId);
+        setTicket(response.result || []);
+      } catch (error) {
+        console.error("구매한 티켓 정보 불러오기 실패:", error);
+      }
+    };
+    fetchOrderTicket();
+  }, []);
   const handlePreviousButton = () => {
     navigate(-1);
   };
-
+  const cancleOrderTicket = async (orderIds: number[]) => {
+    for (const orderId of orderIds) {
+      try {
+        const response = await cancleTickets(orderId);
+        console.log("티켓 취소 API 응답:", response);
+      } catch (error) {
+        console.error(`orderId ${orderId} 취소 실패:`, error);
+      }
+    }
+  }
   return (
     <>
       <Header
@@ -24,18 +69,28 @@ const TicketConfirmPage = () => {
         centerContent="티켓 구매 확인"
         rightContent={<img src={Search} alt="검색" className="w-4" />}
       />
-      <div className="bg-gray-100 p-3 min-h-screen flex flex-col gap-3">
-        <PurchaseBanner setIsModalOpen={setIsModalOpen} />
-        <OrganizerInfo />
-        <LocationInfo />
-      </div>
+      {ticket ? (
+        <>
+          <div className="bg-gray-100 p-3 min-h-screen flex flex-col gap-3">
+            <PurchaseBanner setIsModalOpen={setIsModalOpen} title={ticket.title} startDate={ticket.startDate} startTime={ticket.startTime} ticketName={ticket.ticketName} quantity={orderIds.length} />
+            <OrganizerInfo name={ticket.hostChannelName} description={ticket.hostChannelDescription} phone={ticket.organizerPhoneNumber} email={ticket.organizerEmail} bgColor='bg-white' />
+            <div className="p-5 bg-white flex flex-col gap-2 rounded-[10px]">
+              <p className="font-bold md:text-2xl text-xl">오시는 길</p>
+              <p>{ticket.eventAddress}</p>
+              <KakaoMap lat={ticket.location.lat} lng={ticket.location.lng} />
+            </div>
+          </div>
+        </>
+      ) : (
+        <p className="text-center text-gray-500">티켓 정보를 불러오는 중...</p>
+      )}
       {isModalOpen && (
         <EmailDeleteMoal
-          mainText="WOOACON 2024의 일반 티켓 2매 구매를 취소하시겠습니까?. 취소 후에는 복구가 불가능합니다."
+          mainText={`${ticket?.title}의 ${ticket?.ticketName} ${orderIds.length}매 구매를 취소하시겠습니까?. 취소 후에는 복구가 불가능합니다.`}
           approveButtonText="티켓 취소"
           rejectButtonText="뒤로가기"
           onClose={() => setIsModalOpen(false)}
-          onClick={() => navigate('/menu/myticket')}
+          onClick={() => { cancleOrderTicket(orderIds),navigate('/menu/myticket') }}
         />
       )}
     </>

src/pages/event/ui/EventDetailsPage.tsx

@@ -80,7 +80,6 @@ const EventDetailsPage = () => {
     fetchEventDetail();
   }, []);
 
-
   return (
     <>
       <Header

src/pages/menu/ui/MyTicketPage.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import QrModal from '../../../../design-system/ui/modals/QrModal';
 import QRbackground from '../../../../design-system/icons/QRbackground.svg';
 import EventCard from '../../../shared/ui/EventCard';
-import { readMyTickets } from '../../../features/ticket/api/order';
+import { readTicket } from '../../../features/ticket/api/order';
 import completedImg from '../../../../public/assets/menu/Completed.svg';
 import pendingImg from '../../../../public/assets/menu/Pending.svg';
 import ticketImg from '../../../../public/assets/menu/Ticket.svg';
@@ -37,7 +37,7 @@ const MyTicketPage = () => {
   useEffect(() => {
     const fetchMyTickets = async () => {
       try {
-        const response = await readMyTickets.get(0, 10);
+        const response = await readTicket.getAll(0, 10);
         setMyTickets(response.result || []);
         console.log(response.result);
       } catch (error) {
@@ -51,9 +51,9 @@ const MyTicketPage = () => {
     <TicketHostLayout image={TicketLogo} centerContent="내 티켓" showText={true}>
       {/* 이벤트 카드 목록 */}
       <div className="grid grid-cols-2 gap-4 mx-6 mt-28 md:grid-cols-2 lg:grid-cols-2 pb-4">
-        {myTickets.map((ticket, index) => (
+        {myTickets.map((ticket) => (
           <EventCard
-            key={index}
+            id={ticket.id}
             img={ticket.event.bannerImageUrl}
             eventTitle={ticket.event.title}
             dDay={ticket.event.remainDays}

src/shared/types/api/http-client.ts

@@ -31,7 +31,9 @@ axiosClient.interceptors.request.use(
 axiosClient.interceptors.response.use(
   (response: AxiosResponse) => {
     if (response.config.method === 'post' || response.config.method === 'put') {
-      console.log('서버로 전송된 데이터:', JSON.parse(response.config.data));
+      if (response.config.data) {
+        console.log('서버로 전송된 데이터:', JSON.parse(response.config.data));
+      }
     }
     return response;
   },

src/widgets/dashboard/ui/TicketConfirmPage/PurchaseBanner.tsx

@@ -2,7 +2,15 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import CheckIcon from '../../../../../public/assets/dashboard/ticket/checkIcon.svg';
 
-const PurchaseBanner = ({ setIsModalOpen }: { setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>> }) => {
+interface PurchaseBannerPrpos {
+  title: string;
+  startDate: string;
+  startTime: string;
+  ticketName: string;
+  quantity: number;
+  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+const PurchaseBanner = ({ title,startDate, startTime, ticketName, quantity, setIsModalOpen }: PurchaseBannerPrpos) => {
   const navigate = useNavigate();
   //@TODO:api연동하면서 props 변경
 
@@ -18,14 +26,14 @@ const PurchaseBanner = ({ setIsModalOpen }: { setIsModalOpen: React.Dispatch<Rea
       <div className="w-full h-3 bg-white clip-bottom-banner"></div>
       <div className="bg-white p-5 flex flex-col gap-5">
         <div>
-          <p className="text-pink-500 font-bold md:text-2xl text-xl">WOOACON 2024</p>
+          <p className="text-pink-500 font-bold md:text-2xl text-xl">{title}</p>
           <p className="text-gray-700 mt-5 flex gap-3">
             <span className="font-semibold text-gray-400">일정</span>
-            2025년 4월 24일, 14시 20분
+            {startDate}, {startTime}
           </p>
           <p className="text-gray-700 flex gap-3">
             <span className="font-semibold text-gray-400">상품</span>
-            일반 티켓, 2인
+            {ticketName}, {quantity}인
           </p>
         </div>
 

src/widgets/event/ui/OrganizerInfo.tsx

@@ -6,12 +6,13 @@ interface OrganizerInfoProps {
   description: string;
   phone: string;
   email: string;
+  bgColor?: string;
 }
 
-const OrganizerInfo = ({ name, description, phone, email}: OrganizerInfoProps) => {
+const OrganizerInfo = ({ name, description, phone, email, bgColor = "bg-gray-100"}: OrganizerInfoProps) => {
 
   return (
-    <div className="flex flex-col w-full h-full bg-gray-100 px-4 py-3 md:px-6 md:py-4 rounded-[10px] gap-1">
+    <div className={`flex flex-col w-full h-full px-4 py-3 md:px-6 md:py-4 rounded-[10px] gap-1 ${bgColor}`}>
       <h1 className="font-bold text-lg">주최자</h1>
       <span className="font-semibold">{name}</span>
       <span className="text-sm md:text-base">{description}</span>

src/widgets/event/ui/TicketInfo.tsx

@@ -3,11 +3,15 @@ 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';
 
 const TicketInfo = ({ eventId }: { eventId: number }) => {
   const limitNum = 4;
   const [tickets, setTickets] = useState<ReadTicket[]>([]);
   const [quantity, setQuantity] = useState<{ [key: number]: number }>({});
+  const navigate = useNavigate();
 
   useEffect(() => {
     const fetchTickets = async () => {
@@ -48,6 +52,49 @@ const TicketInfo = ({ eventId }: { eventId: number }) => {
     }));
   };
 
+  // 구매 API 호출
+  const orderTicket = async (ticketId: number, eventId: number, ticketCnt: number) => {
+    try {
+      const requestData: OrderTicketRequest = {
+        ticketId,
+        eventId,
+        ticketCnt,
+      };
+
+      const response = await orderTickets(requestData);
+
+      console.log("API 응답:", response);
+
+      if (response.isSuccess) {
+        let orderIds: number[] = [];
+
+        if (typeof response.result === "string") {
+
+          const match = response.result.match(/\[.*?\]/);
+          if (match) {
+            orderIds = match[0]
+              .replace(/\[|\]/g, "")  
+              .split(",")            
+              .map((id: string) => Number(id.trim())); 
+          }
+        }
+        if (orderIds.length > 0) {
+          navigate('/payment/ticket-confirm', { state: { orderIds,ticketId, eventId } });
+        } else {
+          console.error("orderId를 파싱할 수 없습니다.", response.result);
+          alert("주문 정보를 불러올 수 없습니다.");
+        }
+
+      } else {
+        console.error("티켓 구매 실패:", response.message);
+        alert(`구매 실패: ${response.message}`);
+      }
+    } catch (error) {
+      console.error("티켓 구매 중 오류 발생:", error);
+      alert("티켓 구매 중 오류가 발생했습니다.");
+    }
+  };
+
   return (
     <div className="w-full h-full">
       {tickets.map(ticket => (
@@ -78,7 +125,7 @@ const TicketInfo = ({ eventId }: { eventId: number }) => {
                   className="flex justify-center items-center bg-white w-6 h-6 md:w-7 md:h-7"
                 />
               </div>
-              <TertiaryButton label="구매하기" type="button" color="black" size="large" className="w-22 h-8" />
+              <TertiaryButton label="구매하기" type="button" color="black" size="large" className="w-22 h-8" onClick={() => orderTicket(ticket.ticketId, eventId, quantity[ticket.ticketId])} />
             </div>
           </div>
         </div>