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

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

master
김장현 11 months ago
parent
a802aed33d
commit
4812519fcb
4 changed files with 311 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 228
      src/views/control/setting/ControlReservation.js
  2. 47
      src/views/control/setting/steps/ReserveStep3.js
  3. 121
      src/views/control/setting/steps/ReserveStep4.js
  4. 12
      src/views/control/setting/steps/index.js

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

@ -18,7 +18,8 @@ import {
Step4, Step4,
ReserveStep1, ReserveStep1,
ReserveStep2, ReserveStep2,
ReserveStep3 ReserveStep3,
ReserveStep4
} from './steps'; } from './steps';
export default function ControlReservation({ modal, handler }) { export default function ControlReservation({ modal, handler }) {
@ -45,59 +46,74 @@ export default function ControlReservation({ modal, handler }) {
style={{ paddingLeft: search ? '1%' : '45%' }} style={{ paddingLeft: search ? '1%' : '45%' }}
> >
{search ? ( {search ? (
<div reserveStep !== 4 ? (
style={{ <div
display: 'flex', style={{
justifyContent: 'space-between', display: 'flex',
width: '1600px' justifyContent: 'space-between',
}} width: '1600px'
> }}
<h5 style={{ fontWeight: 'bold' }}>도심항공교통(UAM) 예약</h5> >
<div style={{ display: 'flex', justifyContent: 'center' }}> <h5 style={{ fontWeight: 'bold' }}>도심항공교통(UAM) 예약</h5>
<ul style={{ listStyle: 'none' }}> <div style={{ display: 'flex', justifyContent: 'center' }}>
<li <ul style={{ listStyle: 'none' }}>
style={{ <li
float: 'left', style={{
paddingRight: '10px', float: 'left',
fontWeight: 'bold', paddingRight: '10px',
color: step === 1 ? '#990033' : '#000' fontWeight: 'bold',
}} color: step === 1 ? '#990033' : '#000'
> }}
➀ 항공교통 조회 >
</li> ➀ 항공교통 조회
<li </li>
style={{ <li
float: 'left', style={{
paddingRight: '10px', float: 'left',
fontWeight: 'bold', paddingRight: '10px',
color: step === 2 ? '#990033' : '#000' fontWeight: 'bold',
}} color: step === 2 ? '#990033' : '#000'
> }}
➁ 항공교통 선택{' '} >
</li> ➁ 항공교통 선택{' '}
<li </li>
style={{ <li
float: 'left', style={{
paddingRight: '10px', float: 'left',
fontWeight: 'bold', paddingRight: '10px',
color: step === 3 ? '#990033' : '#000' fontWeight: 'bold',
}} color: step === 3 ? '#990033' : '#000'
> }}
➂ 탑승정보 입력{' '} >
</li> ➂ 탑승정보 입력{' '}
<li </li>
style={{ <li
float: 'left', style={{
paddingRight: '10px', float: 'left',
fontWeight: 'bold', paddingRight: '10px',
color: step === 4 ? '#990033' : '#000' fontWeight: 'bold',
}} color: step === 4 ? '#990033' : '#000'
> }}
➃ 결제 >
</li> ➃ 결제
</ul> </li>
</ul>
</div>
</div> </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) 예약' '도심항공교통(UAM) 예약'
)} )}
@ -321,47 +337,75 @@ export default function ControlReservation({ modal, handler }) {
{reserveStep === 1 && <ReserveStep1 />} {reserveStep === 1 && <ReserveStep1 />}
{reserveStep === 2 && <ReserveStep2 />} {reserveStep === 2 && <ReserveStep2 />}
{reserveStep === 3 && <ReserveStep3 />} {reserveStep === 3 && <ReserveStep3 />}
<div {reserveStep === 4 && <ReserveStep4 />}
style={{ {reserveStep !== 4 ? (
display: 'flex', <div
justifyContent: 'space-between', style={{
padding: '5px 35px', display: 'flex',
marginBottom: '20px' justifyContent: 'space-between',
}} padding: '5px 35px',
> marginBottom: '20px'
<div> }}
<button >
style={{ padding: '10px 50px', backgroundColor: '#F2F2F2' }} <div>
onClick={() => { <button
if (reserveStep === 1) { style={{
setIsChoise(false); padding: '10px 50px',
setSearch(false); backgroundColor: '#F2F2F2'
setAirTraficCheck(1); }}
} else { onClick={() => {
setReserveStep(reserveStep - 1); if (reserveStep === 1) {
setStep(step - 1); setIsChoise(false);
} setSearch(false);
}} setAirTraficCheck(1);
> } else {
취소 setReserveStep(reserveStep - 1);
</button> setStep(step - 1);
}
}}
>
취소
</button>
</div>
<div>
<button
style={{
padding: '10px 50px',
backgroundColor: '#990033',
color: '#fff'
}}
onClick={() => {
setReserveStep(reserveStep + 1);
setStep(step + 1);
}}
>
{reserveStep === 3 ? '결제하기' : '다음'}
</button>
</div>
</div> </div>
<div> ) : (
<button <div
style={{ style={{
padding: '10px 50px', display: 'flex',
backgroundColor: '#990033', justifyContent: 'center',
color: '#fff' padding: '5px 35px',
}} marginBottom: '20px'
onClick={() => { }}
setReserveStep(reserveStep + 1); >
setStep(step + 1); <div>
}} <button
> style={{
다음 padding: '10px 50px',
</button> backgroundColor: '#990033',
color: '#fff'
}}
onClick={handler}
>
확인
</button>
</div>
</div> </div>
</div> )}
</> </>
)} )}
</ModalBody> </ModalBody>

47
src/views/control/setting/steps/ReserveStep3.js
Unescape View File

@ -19,7 +19,8 @@ export default function ReserveStep3() {
style={{ style={{
display: 'flex', display: 'flex',
justifyContent: 'flex-start', justifyContent: 'flex-start',
padding: '5px' padding: '5px',
borderBottom: '1px solid #000'
}} }}
> >
<div <div
@ -80,7 +81,8 @@ export default function ReserveStep3() {
style={{ style={{
display: 'flex', display: 'flex',
justifyContent: 'flex-start', justifyContent: 'flex-start',
padding: '5px' padding: '5px',
borderBottom: '1px solid #000'
}} }}
> >
<div <div
@ -104,7 +106,7 @@ export default function ReserveStep3() {
marginRight: '10px' marginRight: '10px'
}} }}
> >
<select style={{ width: '200px' }}> <select style={{ width: '400px' }}>
<option>카드 선택</option> <option>카드 선택</option>
</select> </select>
</div> </div>
@ -118,11 +120,48 @@ export default function ReserveStep3() {
marginRight: '10px' marginRight: '10px'
}} }}
> >
<select style={{ width: '200px' }}> <select style={{ width: '400px' }}>
<option>일시불</option> <option>일시불</option>
</select> </select>
</div> </div>
</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> </div>
); );
} }

121
src/views/control/setting/steps/ReserveStep4.js
Unescape View File

@ -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>
);
}

12
src/views/control/setting/steps/index.js
Unescape View File

@ -5,5 +5,15 @@ import Step4 from './Step4';
import ReserveStep1 from './ReserveStep1'; import ReserveStep1 from './ReserveStep1';
import ReserveStep2 from './ReserveStep2'; import ReserveStep2 from './ReserveStep2';
import ReserveStep3 from './ReserveStep3'; 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
};

Write Preview
Loading…
Cancel
Save