도심항공교통 예약 화면 작업

src/views/control/setting/ControlReservation.js

@@ -18,7 +18,8 @@ import {
   Step4,
   ReserveStep1,
   ReserveStep2,
-  ReserveStep3
+  ReserveStep3,
+  ReserveStep4
 } from './steps';
 
 export default function ControlReservation({ modal, handler }) {
@@ -45,6 +46,7 @@ export default function ControlReservation({ modal, handler }) {
           style={{ paddingLeft: search ? '1%' : '45%' }}
         >
           {search ? (
+            reserveStep !== 4 ? (
               <div
                 style={{
                   display: 'flex',
@@ -98,6 +100,20 @@ export default function ControlReservation({ modal, handler }) {
                   </ul>
                 </div>
               </div>
+            ) : (
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  width: '1600px'
+                }}
+              >
+                <h5 style={{ fontWeight: 'bold' }}>도심항공교통(UAM) 예약</h5>
+                <div style={{ fontWeight: 'bold', color: '#990033' }}>
+                  결제완료
+                </div>
+              </div>
+            )
           ) : (
             '도심항공교통(UAM) 예약'
           )}
@@ -321,6 +337,8 @@ export default function ControlReservation({ modal, handler }) {
               {reserveStep === 1 && <ReserveStep1 />}
               {reserveStep === 2 && <ReserveStep2 />}
               {reserveStep === 3 && <ReserveStep3 />}
+              {reserveStep === 4 && <ReserveStep4 />}
+              {reserveStep !== 4 ? (
                 <div
                   style={{
                     display: 'flex',
@@ -331,7 +349,10 @@ export default function ControlReservation({ modal, handler }) {
                 >
                   <div>
                     <button
-                    style={{ padding: '10px 50px', backgroundColor: '#F2F2F2' }}
+                      style={{
+                        padding: '10px 50px',
+                        backgroundColor: '#F2F2F2'
+                      }}
                       onClick={() => {
                         if (reserveStep === 1) {
                           setIsChoise(false);
@@ -358,10 +379,33 @@ export default function ControlReservation({ modal, handler }) {
                         setStep(step + 1);
                       }}
                     >
-                    다음
+                      {reserveStep === 3 ? '결제하기' : '다음'}
                     </button>
                   </div>
                 </div>
+              ) : (
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    padding: '5px 35px',
+                    marginBottom: '20px'
+                  }}
+                >
+                  <div>
+                    <button
+                      style={{
+                        padding: '10px 50px',
+                        backgroundColor: '#990033',
+                        color: '#fff'
+                      }}
+                      onClick={handler}
+                    >
+                      확인
+                    </button>
+                  </div>
+                </div>
+              )}
             </>
           )}
         </ModalBody>

src/views/control/setting/steps/ReserveStep3.js

@@ -19,7 +19,8 @@ export default function ReserveStep3() {
         style={{
           display: 'flex',
           justifyContent: 'flex-start',
-          padding: '5px'
+          padding: '5px',
+          borderBottom: '1px solid #000'
         }}
       >
         <div
@@ -80,7 +81,8 @@ export default function ReserveStep3() {
         style={{
           display: 'flex',
           justifyContent: 'flex-start',
-          padding: '5px'
+          padding: '5px',
+          borderBottom: '1px solid #000'
         }}
       >
         <div
@@ -104,7 +106,7 @@ export default function ReserveStep3() {
             marginRight: '10px'
           }}
         >
-          <select style={{ width: '200px' }}>
+          <select style={{ width: '400px' }}>
             <option>카드 선택</option>
           </select>
         </div>
@@ -118,11 +120,48 @@ export default function ReserveStep3() {
             marginRight: '10px'
           }}
         >
-          <select style={{ width: '200px' }}>
+          <select style={{ width: '400px' }}>
             <option>일시불</option>
           </select>
         </div>
       </div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-start',
+          padding: '5px',
+          borderBottom: '1px solid #000',
+          backgroundColor: '#F2F2F2'
+        }}
+      >
+        <div
+          style={{
+            width: '15%',
+            height: '50px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: '#990033'
+          }}
+        >
+          총액
+        </div>
+        <div
+          style={{
+            width: '15%',
+            height: '50px',
+            display: 'flex',
+            justifyContent: 'start',
+            alignItems: 'center',
+            marginRight: '10px',
+            color: '#990033',
+            fontWeight: 'bold',
+            fontSize: '1.2rem'
+          }}
+        >
+          118,200 <span style={{ fontSize: '0.7rem' }}>KRW</span>
+        </div>
+      </div>
     </div>
   );
 }

src/views/control/setting/steps/ReserveStep4.js

@@ -0,0 +1,121 @@
+import { Table } from 'reactstrap';
+export default function ReserveStep4() {
+  return (
+    <div style={{ padding: '40px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          fontSize: '1.5rem',
+          color: '#000',
+          fontWeight: 'bold',
+          marginBottom: '10px'
+        }}
+      >
+        항공교통 예약이 완료되었습니다.
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          backgroundColor: '#F2F2F2',
+          height: '70px',
+          alignItems: 'center',
+          fontSize: '1.2rem',
+          marginBottom: '10px'
+        }}
+      >
+        <div>
+          예약번호 :{' '}
+          <span style={{ color: '#990033', marginRight: '20px' }}>
+            452006915(Y08HR)
+          </span>
+        </div>
+        <div style={{ color: '#990033', marginRight: '20px' }}>|</div>
+        <div>
+          {' '}
+          예약일 :{' '}
+          <span style={{ color: '#990033', marginRight: '20px' }}>
+            2023.10.25(목)
+          </span>
+        </div>
+      </div>
+      <div style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>항공 일정</div>
+      <Table bordered style={{ textAlign: 'center', marginBottom: '10px' }}>
+        <thead>
+          <tr>
+            <th>구간</th>
+            <th>편명</th>
+            <th>출발일시</th>
+            <th>도착일시</th>
+            <th>좌석수</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              {' '}
+              여정1
+              <br />
+              {'고양 킨텍스 -> 여의도 공원'}
+            </td>
+            <td>UAM123</td>
+            <td>2023.10.25(목) 08:40</td>
+            <td>2023.10.25(목) 10:45</td>
+            <td>1</td>
+          </tr>
+          <tr>
+            <td>
+              {' '}
+              여정1
+              <br />
+              {'여의도 공원 -> 고양 킨텍스'}
+            </td>
+            <td>UAM321</td>
+            <td>2023.10.28(목) 10:45</td>
+            <td>2023.10.28(목) 11:40</td>
+            <td>1</td>
+          </tr>
+        </tbody>
+      </Table>
+      <div style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>예매자 정보</div>
+      <Table bordered style={{ textAlign: 'center', marginBottom: '10px' }}>
+        <thead>
+          <tr>
+            <th>연락처</th>
+            <th>이메일</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>+82(대한민국) 010-8250-4456</td>
+            <td>kyw546@palnet.co.kr</td>
+          </tr>
+        </tbody>
+      </Table>
+      <div style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>결제 내역</div>
+      <Table bordered style={{ textAlign: 'center', marginBottom: '10px' }}>
+        <thead>
+          <tr>
+            <th>결제수단</th>
+            <th>카드번호</th>
+            <th>할부개월</th>
+            <th>승인번호</th>
+            <th>결제금액</th>
+            <th>결제일</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>신용카드</td>
+            <td>****_****_****_1234</td>
+            <td>일시불</td>
+            <td>123456789</td>
+            <td>118,200 KRW</td>
+            <td>2023.10.20 (목) 09:43 </td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  );
+}

src/views/control/setting/steps/index.js

@@ -5,5 +5,15 @@ import Step4 from './Step4';
 import ReserveStep1 from './ReserveStep1';
 import ReserveStep2 from './ReserveStep2';
 import ReserveStep3 from './ReserveStep3';
+import ReserveStep4 from './ReserveStep4';
 
-export { Step1, Step2, Step3, Step4, ReserveStep1, ReserveStep2, ReserveStep3 };
+export {
+  Step1,
+  Step2,
+  Step3,
+  Step4,
+  ReserveStep1,
+  ReserveStep2,
+  ReserveStep3,
+  ReserveStep4
+};