GoTogether-Inc · HSCHEOL · Mar 4, 2025 · Mar 2, 2025 · Mar 3, 2025 · Mar 3, 2025
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -9,5 +9,9 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=&libraries=services,clusterer&autoload=false"
+    ></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
+    "react-kakao-maps-sdk": "^1.1.27",
     "react-quill": "^2.0.0",
     "react-router-dom": "^7.0.1",
     "storybook": "^8.4.6",

diff --git a/...ts/dashboard/create_ticket/PersonIcon.svg → ...ic/assets/dashboard/ticket/PersonIcon.svg b/...ts/dashboard/create_ticket/PersonIcon.svg → ...ic/assets/dashboard/ticket/PersonIcon.svg
diff --git a/.../dashboard/create_ticket/Ticket(gray).svg → .../assets/dashboard/ticket/Ticket(gray).svg b/.../dashboard/create_ticket/Ticket(gray).svg → .../assets/dashboard/ticket/Ticket(gray).svg
diff --git a/...shboard/create_ticket/Ticket(horizon).svg → ...sets/dashboard/ticket/Ticket(horizon).svg b/...shboard/create_ticket/Ticket(horizon).svg → ...sets/dashboard/ticket/Ticket(horizon).svg
diff --git a/public/assets/dashboard/ticket/callIcon.svg b/public/assets/dashboard/ticket/callIcon.svg
diff --git a/public/assets/dashboard/ticket/checkIcon.svg b/public/assets/dashboard/ticket/checkIcon.svg
diff --git a/public/assets/dashboard/ticket/emailIcon.svg b/public/assets/dashboard/ticket/emailIcon.svg
diff --git a/public/assets/dashboard/ticket/ticketConfirmLayout.svg b/public/assets/dashboard/ticket/ticketConfirmLayout.svg
diff --git a/src/app/routes/Router.tsx b/src/app/routes/Router.tsx
@@ -28,6 +28,7 @@ import ParticipantsManagementPage from '../../pages/dashboard/ui/ParticipantsMan
 import MailBoxPage from '../../pages/dashboard/ui/mail/MailBoxPage';
 import EmailEditPage from '../../pages/dashboard/ui/mail/EmailEditPage';
 import PaymentPage from '../../pages/payment/ui/PaymentPage';
+import TicketConfirmPage from '../../pages/dashboard/ui/ticket/TicketConfirmPage';
 
 const routesConfig = [
   {
@@ -160,6 +161,11 @@ const routesConfig = [
     element: <ParticipantsManagementPage />,
     requiresAuth: false,
   },
+  {
+    path: DASHBOARD_ROUTES.ticketConfirm,
+    element: <TicketConfirmPage />,
+    requiresAuth: false,
+  },
 ];
 
 const router = createBrowserRouter(

diff --git a/src/app/routes/routes.ts b/src/app/routes/routes.ts
@@ -5,7 +5,7 @@ export const MAIN_ROUTES = {
   eventDatail: '/event-details',
   search: '/search',
   menu: '/menu',
-  dashbord: '/dashboard',
+  dashboard: '/dashboard',
   payment: '/payment',
 };
 
@@ -30,16 +30,17 @@ export const MENU_ROUTES = {
 };
 
 export const DASHBOARD_ROUTES = {
-  dashboard: `${MAIN_ROUTES.dashbord}`,
-  eventInfo: `${MAIN_ROUTES.dashbord}/eventInfo`,
-  eventDetail: `${MAIN_ROUTES.dashbord}/eventDetail`,
-  eventTag: `${MAIN_ROUTES.dashbord}/eventTag`,
-  ticket: `${MAIN_ROUTES.dashbord}/ticket`,
-  ticketCreate: `${MAIN_ROUTES.dashbord}/ticket/create`,
-  email: `${MAIN_ROUTES.dashbord}/email`,
-  mailBox: `${MAIN_ROUTES.dashbord}/mailBox`,
-  emailEdit: `${MAIN_ROUTES.dashbord}/edit-email`,
-  participantsMangement: `${MAIN_ROUTES.dashbord}/participants-mangement`,
+  dashboard: `${MAIN_ROUTES.dashboard}`,
+  eventInfo: `${MAIN_ROUTES.dashboard}/eventInfo`,
+  eventDetail: `${MAIN_ROUTES.dashboard}/eventDetail`,
+  eventTag: `${MAIN_ROUTES.dashboard}/eventTag`,
+  ticket: `${MAIN_ROUTES.dashboard}/ticket`,
+  ticketCreate: `${MAIN_ROUTES.dashboard}/ticket/create`,
+  ticketConfirm: `${MAIN_ROUTES.dashboard}/ticket/confirm`,
+  email: `${MAIN_ROUTES.dashboard}/email`,
+  mailBox: `${MAIN_ROUTES.dashboard}/mailBox`,
+  emailEdit: `${MAIN_ROUTES.dashboard}/edit-email`,
+  participantsMangement: `${MAIN_ROUTES.dashboard}/participants-mangement`,
 };
 
 export const PAYMENT_ROUTES = {

diff --git a/src/features/dashboard/ui/KakaoMap.tsx b/src/features/dashboard/ui/KakaoMap.tsx
@@ -0,0 +1,14 @@
+import { Map, MapMarker } from 'react-kakao-maps-sdk';
+
+const KakaoMap = ({ lat, lng }: { lat: number; lng: number }) => {
+  //@TODO:마커 등 추가기능 추후에
+  return (
+    <Map center={{ lat: lat, lng: lng }} style={{ width: '100%', height: '360px' }}>
+      <MapMarker position={{ lat: lat, lng: lng }}>
+        <div style={{ color: '#000' }}></div>
+      </MapMarker>
+    </Map>
+  );
+};
+
+export default KakaoMap;
diff --git a/src/index.css b/src/index.css
@@ -97,3 +97,13 @@ body {
 * {
   box-sizing: border-box;
 }
+
+@layer utilities {
+  .clip-top-banner {
+    clip-path: polygon(0% 0%, 3% 100%, 97% 100%, 100% 0%);
+  }
+
+  .clip-bottom-banner {
+    clip-path: polygon(3% 0%, 0% 100%, 100% 100%, 97% 0%);
+  }
+}
diff --git a/src/pages/dashboard/ui/mail/MailBoxPage.tsx b/src/pages/dashboard/ui/mail/MailBoxPage.tsx
@@ -41,7 +41,15 @@ const MailBoxPage = () => {
           />
         ))}
       </div>
-      {isModalOpen && <EmailDeleteMoal onClose={() => setIsModalOpen(false)} />}
+      {isModalOpen && (
+        <EmailDeleteMoal
+          mainText="이메일을 삭제하면 예약이 자동으로 취소됩니다.. 그래도 삭제하시겠습니까?"
+          approveButtonText="삭제"
+          rejectButtonText="취소"
+          onClose={() => setIsModalOpen(false)}
+          onClick={() => setIsModalOpen(false)} //임시
+        />
+      )}
     </DashboardLayout>
   );
 };

diff --git a/src/pages/dashboard/ui/ticket/TIcketConfirmPage.tsx b/src/pages/dashboard/ui/ticket/TIcketConfirmPage.tsx
@@ -0,0 +1,45 @@
+import React, { 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 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';
+
+const TicketConfirmPage = () => {
+  const navigate = useNavigate();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handlePreviousButton = () => {
+    navigate(-1);
+  };
+
+  return (
+    <>
+      <Header
+        leftButtonClassName="text-xl hover:no-underline z-30"
+        leftButtonClick={handlePreviousButton}
+        leftButtonLabel="<"
+        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>
+      {isModalOpen && (
+        <EmailDeleteMoal
+          mainText="WOOACON 2024의 일반 티켓 2매 구매를 취소하시겠습니까?. 취소 후에는 복구가 불가능합니다."
+          approveButtonText="취소"
+          rejectButtonText="뒤로가기"
+          onClose={() => setIsModalOpen(false)}
+          onClick={() => navigate('/menu/myticket')}
+        />
+      )}
+    </>
+  );
+};
+
+export default TicketConfirmPage;
diff --git a/src/pages/dashboard/ui/ticket/TicketListPage.tsx b/src/pages/dashboard/ui/ticket/TicketListPage.tsx
@@ -1,5 +1,5 @@
 import DashboardLayout from '../../../../shared/ui/backgrounds/DashboardLayout';
-import Ticket from '../../../../../public/assets/dashboard/create_ticket/Ticket(horizon).svg';
+import Ticket from '../../../../../public/assets/dashboard/ticket/Ticket(horizon).svg';
 import { TicketMockData } from '../../../../shared/types/ticketType';
 import TicketItem from '../../../../widgets/dashboard/ui/TicketItem';
 import { useNavigate } from 'react-router-dom';

diff --git a/src/pages/payment/ui/PaymentPage.tsx b/src/pages/payment/ui/PaymentPage.tsx
@@ -1,5 +1,5 @@
 import Header from '../../../../design-system/ui/Header';
-import ticket from '../../../../public/assets/dashboard/create_ticket/Ticket(horizon).svg';
+import ticket from '../../../../public/assets/dashboard/ticket/Ticket(horizon).svg';
 import PaymentCard from '../../../widgets/payment/ui/PaymentCard';
 import Button from '../../../../design-system/ui/Button';
 import { useNavigate } from 'react-router-dom';

diff --git a/src/widgets/dashboard/ui/EmailDeleteModal.tsx b/src/widgets/dashboard/ui/EmailDeleteModal.tsx
@@ -2,22 +2,28 @@ import TertiaryButton from '../../../../design-system/ui/buttons/TertiaryButton'
 import notice from '../../../../public/assets/dashboard/mail/Notice.svg';
 
 interface EmailDeleteMoalProps {
+  mainText: string;
+  approveButtonText: string;
+  rejectButtonText: string;
   onClose: () => void;
+  onClick?: () => void;
 }
 
-const EmailDeleteMoal = ({ onClose }: 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">
         <img src={notice} alt="경고 아이콘" className="w-20" />
-        <span className="text-14 font-semibold text-center">
-          이메일을 삭제하면 예약이 자동으로 취소됩니다.
-          <br />
-          그래도 삭제하시겠습니까?
-        </span>
+        <div>
+          {mainText.split('. ').map((text, i) => (
+            <p className="text-14 font-semibold text-center" key={i}>
+              {text}
+            </p>
+          ))}
+        </div>
         <div className="flex justify-end gap-4">
-          <TertiaryButton label="취소" type="button" color="black" size="medium" onClick={onClose} />
-          <TertiaryButton label="삭제" type="button" color="pink" size="medium" onClick={onClose} />
+          <TertiaryButton label={rejectButtonText} type="button" color="black" size="medium" onClick={onClose} />
+          <TertiaryButton label={approveButtonText} type="button" color="pink" size="medium" onClick={onClick} />
         </div>
       </div>
     </div>

diff --git a/src/widgets/dashboard/ui/TicketConfirmPage/LocationInfo.tsx b/src/widgets/dashboard/ui/TicketConfirmPage/LocationInfo.tsx
@@ -0,0 +1,19 @@
+import KakaoMap from '../../../../features/dashboard/ui/KakaoMap';
+
+const MapInfo = {
+  LocationName: '서울특별시 강남구 00동',
+  lat: 37.4979,
+  lng: 126.795841,
+};
+
+const LocationInfo = () => {
+  return (
+    <div className="p-5 bg-white flex flex-col gap-2">
+      <p className="font-bold md:text-2xl text-xl">오시는 길</p>
+      <p>{MapInfo.LocationName}</p>
+      <KakaoMap lat={MapInfo.lat} lng={MapInfo.lng} />
+    </div>
+  );
+};
+
+export default LocationInfo;
diff --git a/src/widgets/dashboard/ui/TicketConfirmPage/OrganizerInfo.tsx b/src/widgets/dashboard/ui/TicketConfirmPage/OrganizerInfo.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import CallIcon from '../../../../../public/assets/dashboard/ticket/callIcon.svg';
+import EmailIcon from '../../../../../public/assets/dashboard/ticket/emailIcon.svg';
+
+const OrganizerInfo = () => {
+  return (
+    <div className="bg-white w-full p-5 flex flex-col gap-3">
+      <p className="md:text-2xl text-xl font-bold">주최자 정보</p>
+      <p>테크 이노베이션 그룹</p>
+      <p className="text-gray-400 md:text-base text-sm">
+        최신 기술 트렌드를 선도하는 테크 이노베이션 그룹입니다. 다양한 기술 컨퍼런스와 워크샵을 주최하고 있습니다.
+      </p>
+      <div className="flex gap-3 items-center">
+        <img src={CallIcon} alt="Call_Icon" />
+        <p className="text-gray-500">02-1234-5678</p>
+      </div>
+      <div className="flex gap-3 items-center">
+        <img src={EmailIcon} alt="Email_Icon" />
+        <p className="text-gray-500">aaa@naver.com</p>
+      </div>
+    </div>
+  );
+};
+
+export default OrganizerInfo;
diff --git a/src/widgets/dashboard/ui/TicketConfirmPage/PurchaseBanner.tsx b/src/widgets/dashboard/ui/TicketConfirmPage/PurchaseBanner.tsx
@@ -0,0 +1,51 @@
+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>> }) => {
+  const navigate = useNavigate();
+  //@TODO:api연동하면서 props 변경
+
+  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">
+          <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>
+      <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-gray-700 mt-5 flex gap-3">
+            <span className="font-semibold text-gray-400">일정</span>
+            2025년 4월 24일, 14시 20분
+          </p>
+          <p className="text-gray-700 flex gap-3">
+            <span className="font-semibold text-gray-400">상품</span>
+            일반 티켓, 2인
+          </p>
+        </div>
+
+        <div className="mt-4 space-y-2">
+          <button
+            className="w-full border border-gray-300 py-2 md:text-base text-sm"
+            onClick={() => navigate('/menu/myticket')}
+          >
+            상세보기
+          </button>
+          <button
+            className="w-full border border-gray-300 py-2 md:text-base text-sm"
+            onClick={() => setIsModalOpen(true)}
+          >
+            구매 취소
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PurchaseBanner;
diff --git a/src/widgets/dashboard/ui/TicketItem.tsx b/src/widgets/dashboard/ui/TicketItem.tsx
@@ -1,6 +1,6 @@
 import { TicketType } from '../../../shared/types/ticketType';
-import AvailableTicket from '../../../../public/assets/dashboard/create_ticket/Ticket(gray).svg';
-import PersonIcon from '../../../../public/assets/dashboard/create_ticket/PersonIcon.svg';
+import AvailableTicket from '../../../../public/assets/dashboard/ticket/Ticket(gray).svg';
+import PersonIcon from '../../../../public/assets/dashboard/ticket/PersonIcon.svg';
 
 const TicketItem = ({ ticket }: { ticket: TicketType }) => {
   return (

diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -20,7 +20,9 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    "types": ["kakao.maps.d.ts"]
   },
   "include": ["src", "design-system"]
 }