pav
/
pav-home
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

레이아웃정리-eun

master
이준희 11 months ago
parent
7a50181d88
commit
8fb4f11851
2 changed files with 143 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/assets/css/custom.css
  2. 279
      src/views/control/setting/ControlReservation.js

10
src/assets/css/custom.css
Unescape View File

@ -847,12 +847,10 @@ background-size: 75% auto;
.modal-video{display:flex;align-items: center;justify-content: center;}
.modal-video>.modal-content{height:90vh;}
.modal-uam-reservation{min-width:1200px}
.modal-uam-reservation .modal-title{width:100%;}
.modal-uam-reservation .modal-body{padding:1.4rem}
.modal-uam-reservation .nav-link{transition:0.3s ease;-webkit-transition:0.3s ease;}
.modal-uam-reservation .nav-link{border:0px;background-color:#242b3d}
.modal-uam-reservation .nav-link.active span{font-weight:500}
.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;}

279
src/views/control/setting/ControlReservation.js
Unescape View File

@ -21,6 +21,7 @@ import {
ReserveStep3,
ReserveStep4
} from './steps';
import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
export default function ControlReservation({ modal, handler }) {
const [activeTab, setActiveTab] = useState(1);
@ -29,25 +30,40 @@ export default function ControlReservation({ modal, handler }) {
const [isChoise, setIsChoise] = useState(false);
const [search, setSearch] = useState(false);
const [reserveStep, setReserveStep] = useState(1);
const titleName = '도심항공교통(UAM) 예약';
function getStepColorClass(stepNumber, currentStep) {
return stepNumber === currentStep ? 'active-step' : 'inactive-step';
}
return (
<div className='vertically-centered-modal'>
{/* <Modal
isOpen={modal}
toggle={handler}
className='modal-dialog-centered modal-lg modal-uam-reservation'
> */}
{/* <ModalHeader
toggle={handler}
> */}
{search ? (
reserveStep !== 4 ? (
<div className='uam-reservation-header'>
<h5>도심항공교통(UAM) 예약</h5>
<div>
<CustomMainLayout title={titleName}>
<div className='uam-reservation'>
<div>
{search ? (
reserveStep !== 4 ? (
<div className='uam-reservation-header'>
<div>
<ul className='step'>
<li className={getStepColorClass(1, step)}>
➀ 항공교통 조회
</li>
<li className={getStepColorClass(2, step)}>
➁ 항공교통 선택
</li>
<li className={getStepColorClass(3, step)}>
➂ 탑승정보 입력
</li>
<li className={getStepColorClass(4, step)}>➃ 결제</li>
</ul>
</div>
</div>
) : (
<div className='uam-reservation-header'>
<div>결제완료</div>
</div>
)
) : (
<div className='uam-reservation-header'>
<ul className='step'>
<li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
<li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
@ -55,145 +71,128 @@ export default function ControlReservation({ modal, handler }) {
<li className={getStepColorClass(4, step)}>➃ 결제</li>
</ul>
</div>
</div>
) : (
<div className='uam-reservation-header'>
<h4>도심항공교통(UAM) 예약</h4>
<div>결제완료</div>
</div>
)
) : (
<div className='uam-reservation-header'>
<h5>도심항공교통(UAM) 예약</h5>
<ul className='step'>
<li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
<li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
<li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
<li className={getStepColorClass(4, step)}>➃ 결제</li>
</ul>
)}
</div>
)}
{/* </ModalHeader> */}
{/* <ModalBody> */}
{!search ? (
<div>
<div>
<Nav justified pills>
<NavItem>
<NavLink
active={activeTab === 1}
onClick={() => setActiveTab(1)}
>
<span>왕복</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={activeTab === 2}
onClick={() => setActiveTab(2)}
>
<span>편도</span>
</NavLink>
</NavItem>
</Nav>
</div>
<div className='uam-reservation-tab-list'>
<div
className={`list ${airTraficCheck === 1 ? 'active' : ''}`}
onClick={() => {
setAirTraficCheck(1);
}}
>
출발지
</div>
<div
className={`list ${airTraficCheck === 2 ? 'active' : ''}`}
onClick={() => {
setAirTraficCheck(2);
}}
>
도착지
</div>
<div
className={`list ${airTraficCheck === 3 ? 'active' : ''}`}
onClick={() => {
setAirTraficCheck(3);
}}
>
탑승일
</div>
<div
className={`list ${airTraficCheck === 4 ? 'active' : ''}`}
onClick={() => {
setAirTraficCheck(4);
}}
>
탑승객
</div>
<div
className={`list finish ${isChoise ? 'active' : ''}`}
onClick={() => {
setSearch(true);
setStep(2);
}}
>
항공교통 조회
</div>
</div>
<>
{airTraficCheck === 1 && <Step1 />}
{airTraficCheck === 2 && <Step2 />}
{airTraficCheck === 3 && <Step3 />}
{airTraficCheck === 4 && <Step4 setIsChoise={setIsChoise} />}
</>
</div>
) : (
<>
{reserveStep === 1 && <ReserveStep1 />}
{reserveStep === 2 && <ReserveStep2 />}
{reserveStep === 3 && <ReserveStep3 />}
{reserveStep === 4 && <ReserveStep4 />}
{reserveStep !== 4 ? (
{!search ? (
<div>
<div>
<button
<Nav justified pills>
<NavItem>
<NavLink
active={activeTab === 1}
onClick={() => setActiveTab(1)}
>
<span>왕복</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={activeTab === 2}
onClick={() => setActiveTab(2)}
>
<span>편도</span>
</NavLink>
</NavItem>
</Nav>
</div>
<div className='uam-reservation-tab-list'>
<div
className={`list ${airTraficCheck === 1 ? 'active' : ''}`}
onClick={() => {
if (reserveStep === 1) {
setIsChoise(false);
setSearch(false);
setAirTraficCheck(1);
} else {
setReserveStep(reserveStep - 1);
setStep(step - 1);
}
setAirTraficCheck(1);
}}
>
취소
</button>
</div>
<div>
<button
출발지
</div>
<div
className={`list ${airTraficCheck === 2 ? 'active' : ''}`}
onClick={() => {
setAirTraficCheck(2);
}}
>
도착지
</div>
<div
className={`list ${airTraficCheck === 3 ? 'active' : ''}`}
onClick={() => {
setAirTraficCheck(3);
}}
>
탑승일
</div>
<div
className={`list ${airTraficCheck === 4 ? 'active' : ''}`}
onClick={() => {
setAirTraficCheck(4);
}}
>
탑승객
</div>
<div
className={`list finish ${isChoise ? 'active' : ''}`}
onClick={() => {
setReserveStep(reserveStep + 1);
setStep(step + 1);
setSearch(true);
setStep(2);
}}
>
{reserveStep === 3 ? '결제하기' : '다음'}
</button>
항공교통 조회
</div>
</div>
<>
{airTraficCheck === 1 && <Step1 />}
{airTraficCheck === 2 && <Step2 />}
{airTraficCheck === 3 && <Step3 />}
{airTraficCheck === 4 && <Step4 setIsChoise={setIsChoise} />}
</>
</div>
) : (
<div>
<div>
<button onClick={handler}>확인</button>
</div>
</div>
<>
{reserveStep === 1 && <ReserveStep1 />}
{reserveStep === 2 && <ReserveStep2 />}
{reserveStep === 3 && <ReserveStep3 />}
{reserveStep === 4 && <ReserveStep4 />}
{reserveStep !== 4 ? (
<div>
<div>
<button
onClick={() => {
if (reserveStep === 1) {
setIsChoise(false);
setSearch(false);
setAirTraficCheck(1);
} else {
setReserveStep(reserveStep - 1);
setStep(step - 1);
}
}}
>
취소
</button>
</div>
<div>
<button
onClick={() => {
setReserveStep(reserveStep + 1);
setStep(step + 1);
}}
>
{reserveStep === 3 ? '결제하기' : '다음'}
</button>
</div>
</div>
) : (
<div>
<div>
<button onClick={handler}>확인</button>
</div>
</div>
)}
</>
)}
</>
)}
{/* </ModalBody> */}
{/* </Modal> */}
</div>
</div>
</div>
</CustomMainLayout>
);
}

Write Preview
Loading…
Cancel
Save