refact: 티켓 확인 관련 컴포넌트 일부 CSS 수정

Author: Yejiin21

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Header from '../../../../../design-system/ui/Header';
 import Search from '../../../../../design-system/icons/Search.svg';
 import { useNavigate } from 'react-router-dom';
@@ -24,15 +24,15 @@ 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">
+      <div className="bg-gray-100 p-3 min-h-screen flex flex-col gap-3">
         <PurchaseBanner setIsModalOpen={setIsModalOpen} />
         <OrganizerInfo />
         <LocationInfo />
       </div>
       {isModalOpen && (
         <EmailDeleteMoal
           mainText="WOOACON 2024의 일반 티켓 2매 구매를 취소하시겠습니까?. 취소 후에는 복구가 불가능합니다."
-          approveButtonText="취소"
+          approveButtonText="티켓 취소"
           rejectButtonText="뒤로가기"
           onClose={() => setIsModalOpen(false)}
           onClick={() => navigate('/menu/myticket')}

src/widgets/dashboard/ui/EmailDeleteModal.tsx

@@ -12,11 +12,11 @@ interface EmailDeleteMoalProps {
 const EmailDeleteMoal = ({ onClose, mainText, approveButtonText, rejectButtonText, onClick }: EmailDeleteMoalProps) => {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center w-full max-w-lg mx-auto backdrop-blur-sm">
-      <div className="flex flex-col items-center justify-center w-[90%] gap-5 py-6 bg-white border border-placeholderText rounded-lg p-6">
+      <div className="flex flex-col items-center justify-center w-[93%] gap-5 py-6 bg-white border border-placeholderText rounded-lg p-6">
         <img src={notice} alt="경고 아이콘" className="w-20" />
         <div>
           {mainText.split('. ').map((text, i) => (
-            <p className="text-14 font-semibold text-center" key={i}>
+            <p className="text-12 md:text-14 font-semibold text-center" key={i}>
               {text}
             </p>
           ))}

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

@@ -8,7 +8,7 @@ const MapInfo = {
 
 const LocationInfo = () => {
   return (
-    <div className="p-5 bg-white flex flex-col gap-2">
+    <div className="p-5 bg-white flex flex-col gap-2 rounded-[10px]">
       <p className="font-bold md:text-2xl text-xl">오시는 길</p>
       <p>{MapInfo.LocationName}</p>
       <KakaoMap lat={MapInfo.lat} lng={MapInfo.lng} />

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

@@ -4,7 +4,7 @@ import EmailIcon from '../../../../../public/assets/dashboard/ticket/emailIcon.s
 
 const OrganizerInfo = () => {
   return (
-    <div className="bg-white w-full p-5 flex flex-col gap-3">
+    <div className="bg-white w-full p-5 flex flex-col gap-3 rounded-[10px]">
       <p className="md:text-2xl text-xl font-bold">주최자 정보</p>
       <p>테크 이노베이션 그룹</p>
       <p className="text-gray-400 md:text-base text-sm">

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

@@ -9,11 +9,11 @@ const PurchaseBanner = ({ setIsModalOpen }: { setIsModalOpen: React.Dispatch<Rea
   return (
     <div>
       <div className="flex flex-col justify-center items-center">
-        <div className="w-full h-16 bg-gradient-to-l from-main to-gradation text-white font-bold flex items-center px-10 text-xl pt-2 gap-2">
+        <div className="w-full h-14 md:h-16 bg-gradient-to-l from-main to-gradation text-white font-bold flex items-center px-6 text-xl pt-2 gap-2">
           <img src={CheckIcon} alt="Check_Icon" />
           <p>구매 확정</p>
         </div>
-        <div className="w-full h-3 bg-gradient-to-l from-main to-gradation clip-top-banner"></div>
+        <div className="w-full h-2 md:h-3 bg-gradient-to-l from-main to-gradation clip-top-banner"></div>
       </div>
       <div className="w-full h-3 bg-white clip-bottom-banner"></div>
       <div className="bg-white p-5 flex flex-col gap-5">