feat: 구매완료 티켓 조회 API 연동

design-system/ui/modals/QrModal.tsx

@@ -10,34 +10,37 @@ import qr_check from '../../icons/QrCheck.svg';
 interface QrModalProps {
   isChecked: boolean; // QR 상태
   iconPath1?: React.ReactElement; // 모달 배경 이미지
-  iconPath2?: React.ReactElement; // QR 이미지
+  ticketQrCode: string;
   className?: string;
   title: string; // 이벤트명
   hostName: string; // 주최명
   date: string; // 이벤트 (시작)날짜
   location: string; // 이벤트 장소
   ticketName: string; // 티켓 이름
   price: number; // 티켓 가격
-  isApproved: boolean; // 티켓 승인 여부
+  orderStatus: string; // 티켓 승인 여부
   isCheckIn: boolean; // 참가자 체크인 여부
   isCountdownChecked: boolean;
+  remainDays: string; //d-day
   onClick: () => void;
 }
 
 const QrModal = ({
   isChecked,
   iconPath1,
-  iconPath2,
+  ticketQrCode,
   className,
   title,
   hostName,
   date,
   location,
   ticketName,
   price,
-  isApproved,
+  orderStatus,
   isCheckIn,
   isCountdownChecked,
+  remainDays,
+
   onClick,
 }: QrModalProps) => {
   const formattedPrice = price.toLocaleString();
@@ -53,11 +56,13 @@ const QrModal = ({
     <div className={`${flexColumnCenter} h-screen ${className}`}>
       <div>
         {iconPath1 && <div className="w-full">{iconPath1}</div>}
-        {iconPath2 && <div className={`ml-[8%] -mt-[176%] ${isChecked ? '' : 'opacity-50'}`}>{iconPath2}</div>}
+        <div className={`ml-[5%] -mt-[180%] ${isChecked ? '' : 'opacity-50'}`}>
+          <img src={`data:image/png;base64,${ticketQrCode}`} alt="QR Code" className="w-60 h-60" />
+        </div>
         <div className={`${flexColumn} justify-start px-6 ${isChecked ? '' : 'opacity-50'}`}>
           <div className={`${flexRowSpaceBetweenCenter} w-full mt-[22%]`}>
             <h1 className="truncate max-w-48 mr-2 font-semibold">{title}</h1>
-            <Countdown children={`${isCountdownChecked ? 'D-5' : '완료'}`} isChecked={isCountdownChecked} />
+            <Countdown children={remainDays} isChecked={isCountdownChecked} />
           </div>
           <h2 className="text-deDayTextDark text-xs font-medium mb-2">{hostName}</h2>
           <div className="space-y-1 text-deDayTextDark">
@@ -84,7 +89,7 @@ const QrModal = ({
             <IconText
               size="xSmall"
               iconPath={<img src={qr_check} alt="qr_check" />}
-              children={isApproved ? '승인 됨' : '승인 안됨'}
+              children={orderStatus === 'COMPLETED' ? '승인됨' : '대기 중'}
               className="text-11"
             ></IconText>
             <IconText

src/features/dashboard/ui/ResponseFilter.tsx

@@ -1,7 +1,7 @@
 import IconButton from '../../../../design-system/ui/buttons/IconButton';
 import { responsesData } from '../../../shared/types/responseType';
 import DropDown from '../../../shared/ui/DropDown';
-import { createFieldMappings } from '../../lib/createFieldMappings';
+import { createFieldMappings } from '../../../shared/lib/createFieldMappings';
 import rightButton from '../../../../public/assets/main/RightButton.svg';
 import leftButton from '../../../../public/assets/main/LeftButton.svg';
 

src/features/dashboard/ui/ResponsesList.tsx

@@ -2,7 +2,7 @@ import { useResponseStore } from '../model/ResponseStore';
 import { responsesInfo } from '../../../shared/types/responseType';
 import ResponseFilter from './ResponseFilter';
 import SelectedResponseList from './SelectedResponseList';
-import { createFieldMappings } from '../../lib/createFieldMappings';
+import { createFieldMappings } from '../../../shared/lib/createFieldMappings';
 import { useEffect } from 'react';
 
 interface ResponsesListProps {

src/features/ticket/api/order.ts

@@ -0,0 +1,14 @@
+import { axiosClient } from "../../../shared/types/api/http-client"
+export const readMyTickets = {
+    get: async (page: number = 0, size: number = 10) => {
+        try {
+          const response = await axiosClient.get("/orders", {
+            params: { page, size },
+          });
+          return response.data;
+        } catch (error) {
+          console.error("티켓 조회 중 오류 발생:", error);
+          throw error;
+        }
+      },
+}

src/pages/menu/ui/MyTicketPage.tsx

@@ -1,50 +1,101 @@
 import TicketHostLayout from '../../../shared/ui/backgrounds/TicketHostLayout';
 import TicketLogo from '../../../../public/assets/menu/TicketLogo.svg';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import QrModal from '../../../../design-system/ui/modals/QrModal';
 import QRbackground from '../../../../design-system/icons/QRbackground.svg';
-import QRcode from '../../../../design-system/icons/QrCode.svg';
-import { trendingEvents } from '../../../shared/types/eventCardType';
 import EventCard from '../../../shared/ui/EventCard';
+import { readMyTickets } 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';
+
+type Ticket = {
+  id: number;
+  eventId: number;
+  bannerImageUrl: string;
+  title: string;
+  hostChannelName: string;
+  address: string;
+  startDate: string;
+  ticketName: string;
+  orderStatus: "COMPLETED" | "PENDING" | "CANCELED";
+  remainDays: string;
+  ticketPrice: number;
+  ticketQrCode: string;
+  checkIn: boolean;
+  hashtags: [];
+};
 
 const MyTicketPage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [myTickets, setMyTickets] = useState<Ticket[]>([]);
+  const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
+
+  useEffect(() => {
+    const fetchMyTickets = async () => {
+      try {
+        const response = await readMyTickets.get(0, 10);
+        setMyTickets(response.result || []);
+      } catch (error) {
+        console.error("티켓 목록 불러오기 실패:", error);
+      }
+    };
+    fetchMyTickets();
+  }, []);
 
   return (
     <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">
-        {trendingEvents.map((event, index) => (
+        {myTickets.map((ticket, index) => (
           <EventCard
             key={index}
-            img={event.img}
-            eventTitle={event.eventTitle}
-            dDay={event.dDay}
-            host={event.host}
-            eventDate={event.eventDate}
-            location={event.location}
-            hashtags={event.hashtags}
-            onClick={() => setIsModalOpen(true)}
-          />
+            img={ticket.bannerImageUrl}
+            eventTitle={ticket.title}
+            dDay={ticket.remainDays}
+            host={ticket.hostChannelName}
+            eventDate={ticket.startDate}
+            location={ticket.address}
+            hashtags={ticket.hashtags}
+            onClick={() => {
+              setSelectedTicket(ticket);
+              setIsModalOpen(true);
+            }}
+          >
+            <div className="flex items-center text-xs text-gray-500">
+              <img src={ticketImg} alt="날짜" className="w-3 h-3 mr-1" />
+              {ticket.ticketName}
+            </div>
+            <div className="flex items-center text-xs text-gray-500">
+              <img
+                src={ticket.orderStatus === 'COMPLETED' ? completedImg : pendingImg}
+                alt={ticket.orderStatus === 'COMPLETED' ? '승인됨' : '대기 중'}
+                className="w-3 h-3 mr-1"
+              />
+              {ticket.orderStatus === 'COMPLETED' ? '승인됨' : '대기 중'}
+            </div>
+
+          </EventCard>
         ))}
       </div>
 
-      {isModalOpen && (
+      {isModalOpen && selectedTicket &&(
         <div className="fixed top-0 left-0 w-full h-full z-20">
           <div className="relative mx-auto w-full max-w-lg bg-black bg-opacity-30">
             <QrModal
               isChecked={true}
               iconPath1={<img src={QRbackground} alt="QRbackground" />}
-              iconPath2={<img src={QRcode} alt="QRcode" />}
-              title="이벤트명"
-              hostName="주최명"
-              date="2025-01-01"
-              location="이벤트 장소"
-              ticketName="티켓 이름"
-              price={50000}
-              isApproved={true}
-              isCheckIn={false}
+              ticketQrCode = {selectedTicket.ticketQrCode}
+              title={selectedTicket.title}
+              hostName={selectedTicket.hostChannelName}
+              date={selectedTicket.startDate}
+              location={selectedTicket.address}
+              ticketName={selectedTicket.ticketName}
+              price={selectedTicket.ticketPrice}
+              orderStatus={selectedTicket.orderStatus}
+              isCheckIn={selectedTicket.checkIn}
               isCountdownChecked={true}
+              remainDays={selectedTicket.remainDays}
               onClick={() => setIsModalOpen(false)}
             />
           </div>

src/shared/ui/EventCard.tsx

@@ -1,6 +1,8 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 import TertiaryButton from '../../../design-system/ui/buttons/TertiaryButton';
 import Countdown from '../../../design-system/ui/texts/Countdown';
+import dateImg from '../../../public/assets/event-manage/details/Date.svg';
+import locationImg from '../../../public/assets/event-manage/details/Location.svg'
 
 interface EventCardProps {
   img: string;
@@ -11,9 +13,10 @@ interface EventCardProps {
   location: string;
   hashtags: string[];
   onClick?: () => void;
+  children?: React.ReactNode;
 }
 
-const EventCard = ({ img, eventTitle, dDay, host, eventDate, location, hashtags, onClick }: EventCardProps) => {
+const EventCard = ({ img, eventTitle, dDay, host, eventDate, location, hashtags, onClick, children }: EventCardProps) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
@@ -32,8 +35,19 @@ const EventCard = ({ img, eventTitle, dDay, host, eventDate, location, hashtags,
         </div>
 
         <p className="text-xs text-gray-500">{host}</p>
-        <p className="text-xs text-gray-500">{eventDate}</p>
-        <p className="text-xs text-gray-500">{location}</p>
+
+        <div className="flex items-center text-xs text-gray-500">
+          <img src={dateImg} alt="날짜" className="w-3 h-3 mr-1" />
+          {eventDate}
+        </div>
+
+        <div className="flex items-center text-xs text-gray-500">
+          <img src={locationImg} alt="위치" className="w-3 h-3 mr-1" />
+          {location}
+        </div>
+
+        {/* 승인 여부 표시 */}
+        {children}
         {/* 해시태그 */}
         <div className="flex flex-wrap w-full h-6 mt-2 overflow-hidden text-xs font-semibold text-gray-700 whitespace-nowrap">
           {hashtags.map((tag, index) => (