diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 0c70ac1..70c69e0 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -847,20 +847,32 @@ background-size: 75% auto; .modal-video{display:flex;align-items: center;justify-content: center;} .modal-video>.modal-content{height:90vh;} -.uam-reservation{min-width:1200px} +.uam-reservation{min-width:1200px;} .uam-reservation .nav-link{transition:0.3s ease;-webkit-transition:0.3s ease;} .uam-reservation .nav-link{border:0px;background-color:#242b3d} .uam-reservation .nav-link.active span{font-weight:500} .uam-reservation-header{display:flex;width:100%;align-items:center;justify-content:space-between;} .uam-reservation-header h5{font-weight:500;} -.uam-reservation-header .step{display:flex;} -.uam-reservation-header .step li{font-size:0.875rem} +.uam-reservation-header > div{width:100%} +.uam-reservation-header .step{display:flex;width:100%;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1)} +.uam-reservation-header .step li{font-size:0.875rem;display:flex;align-items:center;} .uam-reservation-header .step li + li{margin-left:0.5rem} +.uam-reservation-header .step .num-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius: 0.357rem;background:#10163A;margin-right:10px;} +.uam-reservation-header .step .ti{font-size:1rem} +.uam-reservation-header .step .line{width:14px;color: rgba(255,255,255,0.4);margin:0 0.3rem 0 0.5rem} .uam-reservation-tab-list{display:flex;} .uam-reservation-tab-list .list{display: flex;justify-content:center;align-items:center;flex:1;background-color:#242b3d;padding:0.5rem;font-size:0.875rem;text-align:center;border-radius: 0.357rem;cursor:pointer;border:1px solid #404656;} .uam-reservation-tab-list .list + .list{margin-left:0.5rem} + +.uam-reservation-header .step .active-step .num-icon{background:#7367f0;font-weight:500;} +.uam-reservation-header .step .active-step .ti{font-weight:500;} +.active-step{color:rgba(255,255,255,0.8);font-weight:500;} +.inactive-step{color:rgba(255,255,255,0.4);} +.list.active {background-color: #7367f0;border-color:#7367f0;color:#fff;font-weight:500;} +.finish.active{background-color: #ff9f43;border-color:#ff9f43;color: #fff;} + .step-wrap{margin-top:1rem;border-radius: 0.357rem;} -.step-box{padding:1rem;background-color:#242b3d;} +.step-box{padding:1rem;background-color:#242b3d;border-radius: 0.357rem;} .step-box + .step-box{margin-top:1rem} .step-box-ti{border-bottom:1px solid #404656;padding-bottom:0.5rem;margin-bottom:1rem;display:flex;align-items:center;justify-content: space-between;} .step-box-ti h5{font-weight:500;font-size:1rem} @@ -884,15 +896,10 @@ background-size: 75% auto; .step-wrap .passengers .btn-icon svg{margin-top:4px;} .step-wrap .finish-btn{text-align:right;margin-top:1rem;} -.active-step{color:rgba(255,255,255,0.8);font-weight:500;} -.inactive-step{color:rgba(255,255,255,0.4);} -.list.active {background-color: #7367f0;border-color:#7367f0;color:#fff;font-weight:500;} -.finish.active{background-color: #ff9f43;border-color:#ff9f43;color: #fff;} - .step-reservation .uam-reservation-tab-list .btn{margin-left:1rem} .step-box{padding:1rem;background-color:#242b3d;} .step-reservation-header{text-align:center;} -.step-reservation-header .place{margin:0.5rem 0;} +.step-reservation-header .place{margin:1rem 0;} .step-reservation-header .place span{font-size:1.5rem;font-weight:500;color:#fff} .step-reservation-header .arrow svg{width:22px;margin-top:-2px;margin-left:8px;margin-right:8px} @@ -902,6 +909,7 @@ background-size: 75% auto; .fsm-ti .btn-wrap button + button{margin-left:0.5rem} .fsm-box .list-input label{font-size:0.875rem} +.reservation-date{margin-left:1.5rem;margin-right:1.5rem} .reservation-date .box{display:flex!important;flex-direction: column;align-items:center;justify-content:center;background:#404656;border:2px solid #404656;border-radius: 0.1rem;padding:0.5rem;cursor:pointer;min-height:80px} .reservation-date .box.active{border-color: #7367f0;} .reservation-date .box.active span{color:#fff;} @@ -909,16 +917,33 @@ background-size: 75% auto; .reservation-date .box .state{font-size:1.25rem;font-weight:400;} .reservation-date .box .rate{font-size:0.875rem;margin-left:4px} .reservation-date .slick-slide{margin-left:1rem;max-width: 144px;} +.reservation-date .slick-next{ right: -30px;} +.reservation-date .slick-prev{left: -30px;} .reservation-table table{width:100%;margin:1rem auto} -.reservation-table table tr th, .reservation-table table tr td{vertical-align:middle;} +.reservation-table table tr th, .reservation-table table tr td{vertical-align:middle;text-align:center} .reservation-table table thead{background:#343d55;font-size:1rem;} -.reservation-table table thead tr th{padding:0.8rem 0.4rem;font-weight:500;} +.reservation-table table thead tr th{padding:0.8rem 0.4rem;font-weight:500;;} .reservation-table table tbody tr td{padding:0.8rem 0;} .reservation-table table tbody tr td:nth-child(4) .amount{border-left:0;border-right:0} -.reservation-table table tbody tr td .amount{border:1px solid #404656;width:100%;height:80px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0px auto;line-height:1.2;} +.reservation-table table tbody tr td .amount{border:1px solid #404656;width:100%;height:60px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0px auto;line-height:1.2;} .reservation-table table tbody tr td .rate{font-size:0.875rem;font-weight:400;margin-left:4px} -.reservation-table .state{font-size:1.25rem;font-weight:400} +.reservation-table .state{font-size:1.125rem;font-weight:400} .reservation-table .flight span{display:block;} -.reservation-table .seat{display:block;font-size:0.875rem;margin-top:6px;font-weight:400;} -.reservation-table .alltime .start, .reservation-table .alltime .arrive{font-size:1.25rem;font-weight:400;color:#ddd;} \ No newline at end of file +.reservation-table .seat{display:block;font-size:0.75rem;font-weight:400;} +.reservation-table .alltime .start, .reservation-table .alltime .arrive{font-size:1.25rem;font-weight:400;color:#ddd;padding:0 0.7rem;} +.reservation-table .alltime{display:flex;align-items: center;justify-content: center;width:100%;position: relative;} +.reservation-table .alltime .time{position:absolute;left:50%;transform: translateX(-50%);top:-10px;font-size:0.75rem} +.reservation-table .alltime .plus{position:absolute;left:50%;transform: translateX(-50%);bottom:-10px;font-size:0.75rem} +.reservation-table .alltime .line{display:inline-block;width:55%;height:1px;background:#b4b7bd;position: relative;} +.reservation-table .alltime .line::before{content:'';display:block;width:7px;height:7px;border-radius:100%;background:#b4b7bd;position:absolute;left:0;top:-3px;} +.reservation-table .alltime .line::after{content:'';display:block;width:7px;height:7px;border-radius:100%;background:#b4b7bd;position:absolute;right:0;top:-3px;} + + +.uam-reservation-quick{min-width:1200px} +.uam-reservation-quick .modal-title{width:100%} +.uam-reservation-quick .uam-reservation-tab-list .btn{margin-left:1rem} + +.uam-reservation-btn{display:flex;justify-content:space-between;margin-top:1rem} +.uam-reservation-btn button{min-width:120px} +.test{background:red} \ No newline at end of file diff --git a/src/views/control/setting/ControlReservation.js b/src/views/control/setting/ControlReservation.js index 421e67c..3a6ad3d 100644 --- a/src/views/control/setting/ControlReservation.js +++ b/src/views/control/setting/ControlReservation.js @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react'; +import { useState } from 'react'; import { Badge, Button, @@ -9,9 +9,7 @@ import { ModalBody, Nav, NavItem, - NavLink, - Row, - Col + NavLink } from 'reactstrap'; import { Step1, @@ -24,7 +22,7 @@ import { ReserveStep4 } from './steps'; import { CustomMainLayout } from '../../../components/layout/CustomMainLayout'; -import { ArrowRight } from 'react-feather'; +import { ChevronRight } from 'react-feather'; export default function ControlReservation({ modal, handler }) { const [activeTab, setActiveTab] = useState(1); @@ -40,9 +38,6 @@ export default function ControlReservation({ modal, handler }) { } return ( - - dd -
{search ? ( @@ -51,15 +46,30 @@ export default function ControlReservation({ modal, handler }) {
  • - ➀ 항공교통 조회 + 1 + 항공교통 조회 +
    • +
  • +
  • - ➁ 항공교통 선택 + 2 + 항공교통 선택 +
    • +
  • +
  • - ➂ 탑승정보 입력 + 3 + 탑승정보 입력 +
    • +
  • + +
    • +
  • + 4 + 결제
    • -
  • ➃ 결제
@@ -71,10 +81,31 @@ export default function ControlReservation({ modal, handler }) { ) : (
    -
  • ➀ 항공교통 조회
    • -
  • ➁ 항공교통 선택
    • -
  • ➂ 탑승정보 입력
    • -
  • ➃ 결제
    • +
  • + 1 + 항공교통 조회 +
    • +
  • + +
    • +
  • + 2 + 항공교통 선택 +
    • +
  • + +
    • +
  • + 3 + 탑승정보 입력 +
    • +
  • + +
    • +
  • + 4 + 결제 +
)} @@ -160,9 +191,10 @@ export default function ControlReservation({ modal, handler }) { {reserveStep === 3 && } {reserveStep === 4 && } {reserveStep !== 4 ? ( -
+
- +
- +
) : ( diff --git a/src/views/control/setting/steps/ReserveStep1.js b/src/views/control/setting/steps/ReserveStep1.js index a862a04..c515b39 100644 --- a/src/views/control/setting/steps/ReserveStep1.js +++ b/src/views/control/setting/steps/ReserveStep1.js @@ -4,8 +4,16 @@ import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; -import { Badge, Button } from 'reactstrap'; -import { ArrowRight } from 'react-feather'; +import { + Badge, + Button, + Modal, + ModalHeader, + ModalBody, + ModalFooter, + Alert +} from 'reactstrap'; +import { ArrowRight, XCircle, X } from 'react-feather'; export default function ReserveStep1() { const settings = { @@ -15,17 +23,135 @@ export default function ReserveStep1() { slidesToShow: 7, slidesToScroll: 1 }; + const [centeredModal, setCenteredModal] = useState(false); return (
-
고양 킨텍스
-
여의도 공원
-
2023. 10. 22(목) ~ 2023. 11. 01(목)
-
성인 1명, 소아 1명, 유아 1명
- +
setCenteredModal(!centeredModal)} + > + 고양 킨텍스 +
+
setCenteredModal(!centeredModal)} + > + 여의도 공원 +
+
setCenteredModal(!centeredModal)} + > + 2023. 10. 22(목) ~ 2023. 11. 01(목) +
+
setCenteredModal(!centeredModal)} + > + 성인 1명, 소아 1명, 유아 1명 +
+
+ setCenteredModal(!centeredModal)} + className='modal-dialog-centered uam-reservation-quick' + > + +
+
고양 킨텍스
+
여의도 공원
+
2023. 10. 22(목) ~ 2023. 11. 01(목)
+
성인 1명, 소아 1명, 유아 1명
+ +
+ + +
+
+
+
출발지 선택
+ {/* 버튼 클릭시 모달이 닫히는게 아니라 + step-wrap이 닫히거나 변경? 추후에... 다시 상의.. + modal사용시 quick box 커스텀 어려움 + modal 제거 후 하드코딩 ? 추후 상의 + 현재는 그냥 기획서상 화면만 구현 */} + +
+
+
    +
  • 아라뱃길
    • +
  • +
      +
    • 드론시험 인증센터
      • +
    • 계양 신도시
      • +
    +
    • +
+
    +
  • 한강
    • +
  • +
      +
    • 고양 킨텍스
      • +
    • 김포공항
      • +
    • 여의도 공원
      • +
    +
    • +
+
    +
  • 탄천
    • +
  • +
      +
    • 잠실한강공원
      • +
    • 수서역
      • +
    +
    • +
+
+
+
+
+
최근 조회하신 여정
+
+
+
+
+ 드론시험 인증센터 + + + + 계양 신도시 +
+
+ +
+
+
+
+ 드론시험 인증센터 + + + + 계양 신도시 +
+
+ +
+
+
+
+
+ +
@@ -40,327 +166,209 @@ export default function ReserveStep1() { 여의도 공원
- -
- -
- 2025.10.23(월) - 매진 -
-
- 2025.10.24(화) - 매진 -
-
- 2025.10.25(수) - 매진 -
-
- 2025.10.26(목) - - 56,000KRW - -
-
- 2025.10.27(금) - - 58,000KRW - -
-
- 2025.10.28(토) - - -
-
- 2025.10.29(일) - - 48,000KRW - -
-
- 2025.10.30(월) - - 38,000KRW - -
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
출발/도착시간(비행시간)편명/기종특가운임할인운임정규운임
-
- - 1시간 5분 - 08:40 - 09:45 - - +1 day -
- 		-
- 3P1003 - B737-800 -
- 		-
- 매진 -
- 		-
- - 76.000KRW - - 잔여 7석 -
- 		-
- - 76.000KRW - - 잔여 7석 -
-
-
-
- 여정 2 -
-
- 여의도 공원 -
-
- ➔ -
-
- 고양 킨텍스 -
-
-
-
-
-
- 출발/도착시간 (비행시간) -
-
편명/기종
-
특가운임
-
할인운임
-
정규운임
-
-
-
- 1시간 5분 -
- 08:40----------------------09:45 -
+
+ +
+ 2025.10.23(월) + 매진
-
-
3P1003
-
B737-800
+
+ 2025.10.24(화) + 매진
-
-
매진
+
+ 2025.10.25(수) + 매진
-
-
-
- 63,000 - KRW -
- 잔여7석 -
+
+ 2025.10.26(목) + + 56,000KRW +
-
-
-
- 76,000 - KRW -
- 잔여9석 -
+
+ 2025.10.27(금) + + 58,000KRW +
-
-
-
- 1시간 5분 -
- 10:40----------------------11:45 -
-
- +1 day -
-
-
-
3P1003
-
B737-800
-
-
-
매진
+
+ 2025.10.28(토) + -
-
-
-
- 63,000 - KRW -
- 잔여3석 -
+
+ 2025.10.29(일) + + 48,000KRW +
-
-
-
- 76,000 - KRW -
- 잔여9석 -
+
+ 2025.10.30(월) + + 38,000KRW +
-
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
출발/도착시간(비행시간)편명/기종특가운임할인운임정규운임
+
+ + 1시간 5분 + 12:40 + + 09:45 + + 1 day + +
+ 		+
+ 3P1003 + B737-800 +
+ 		+
+ 매진 +
+ 		+
+ + 76.000KRW + + 잔여 7석 +
+ 		+
+ + 76.000KRW + + 잔여 7석 +
+
+ ddd +
+
+ + 1시간 5분 + 12:40 + + 09:45 + + 1 day + +
+ 		+
+ 3P1003 + B737-800 +
+ 		+
+ 매진 +
+ 		+
+ + 76.000KRW + + 잔여 7석 +
+ 		+
+ + 76.000KRW + + 잔여 7석 +
+
+ ddd +
+
+ + 1시간 5분 + 12:40 + + 09:45 + + 1 day + +
+ 		+
+ 3P1003 + B737-800 +
+ 		+
+ 매진 +
+ 		+
+ + 76.000KRW + + 잔여 7석 +
+ 		+
+ + 76.000KRW + + 잔여 7석 +
+
+ ddd +