김장현
11 months ago
9 changed files with 1810 additions and 17 deletions
@ -0,0 +1,421 @@ |
|||||||
|
export default function ReserveStep1() { |
||||||
|
return ( |
||||||
|
<div style={{ padding: '40px' }}> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
flexDirection: 'column', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span style={{ color: '#990033' }}>여정 1</span> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-around', |
||||||
|
alignItems: 'center', |
||||||
|
width: '25%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
fontSize: '1.4rem', |
||||||
|
color: '#000' |
||||||
|
}} |
||||||
|
> |
||||||
|
고양 킨텍스 |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
fontSize: '1.7rem', |
||||||
|
color: '#000' |
||||||
|
}} |
||||||
|
> |
||||||
|
➔ |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
fontSize: '1.4rem', |
||||||
|
color: '#000' |
||||||
|
}} |
||||||
|
> |
||||||
|
여의도 공원 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
// justifyContent: 'space-between',
|
||||||
|
flexDirection: 'column', |
||||||
|
borderBottom: '1px dotted #000', |
||||||
|
marginBottom: '30px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
backgroundColor: '#F2F2F2', |
||||||
|
marginBottom: '5px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}> |
||||||
|
출발/도착시간 (비행시간) |
||||||
|
</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}>편명/기종</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}>특가운임</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}>할인운임</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}>정규운임</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
alignItems: 'center', |
||||||
|
borderBottom: '1px dotted #000', |
||||||
|
marginBottom: '5px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}> |
||||||
|
<span>2시간 5분</span> |
||||||
|
<div style={{ fontWeight: 'bold' }}> |
||||||
|
08:40----------------------10:45 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}> |
||||||
|
<div>3P1003</div> |
||||||
|
<div>B737-800</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center', |
||||||
|
height: '50px', |
||||||
|
border: '1px solid #F2F2F2' |
||||||
|
// width: '500px',
|
||||||
|
}} |
||||||
|
> |
||||||
|
<div>매진</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
textAlign: 'center', |
||||||
|
border: '1px solid #F2F2F2', |
||||||
|
height: '50px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<span style={{ fontWeight: 'bold' }}>63,000 </span> |
||||||
|
<span>KRW</span> |
||||||
|
</div> |
||||||
|
<span style={{ color: 'red' }}>잔여7석</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
textAlign: 'center', |
||||||
|
border: '1px solid #F2F2F2', |
||||||
|
height: '50px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ backgroundColor: '#C00001' }}> |
||||||
|
<div> |
||||||
|
<span style={{ color: '#fff', fontWeight: 'bold' }}> |
||||||
|
76,000{' '} |
||||||
|
</span> |
||||||
|
<span style={{ color: '#fff' }}>KRW</span> |
||||||
|
</div> |
||||||
|
<span style={{ color: '#fff' }}>잔여9석</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}> |
||||||
|
<span>2시간 5분</span> |
||||||
|
<div style={{ fontWeight: 'bold' }}> |
||||||
|
10:40----------------------12:45 |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'end', |
||||||
|
marginRight: '40px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span>+1 day</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}> |
||||||
|
<div>3P1003</div> |
||||||
|
<div>B737-800</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center', |
||||||
|
height: '50px', |
||||||
|
border: '1px solid #F2F2F2' |
||||||
|
// width: '500px',
|
||||||
|
}} |
||||||
|
> |
||||||
|
<div>매진</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
textAlign: 'center', |
||||||
|
border: '1px solid #F2F2F2', |
||||||
|
height: '50px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<span style={{ fontWeight: 'bold' }}>63,000 </span> |
||||||
|
<span>KRW</span> |
||||||
|
</div> |
||||||
|
<span>잔여3석</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
textAlign: 'center', |
||||||
|
border: '1px solid #F2F2F2', |
||||||
|
height: '50px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<span>76,000 </span> |
||||||
|
<span>KRW</span> |
||||||
|
</div> |
||||||
|
<span>잔여9석</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
flexDirection: 'column', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span style={{ color: '#990033' }}>여정 2</span> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-around', |
||||||
|
alignItems: 'center', |
||||||
|
width: '25%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
fontSize: '1.4rem', |
||||||
|
color: '#000' |
||||||
|
}} |
||||||
|
> |
||||||
|
여의도 공원 |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
fontSize: '1.7rem', |
||||||
|
color: '#000' |
||||||
|
}} |
||||||
|
> |
||||||
|
➔ |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
fontSize: '1.4rem', |
||||||
|
color: '#000' |
||||||
|
}} |
||||||
|
> |
||||||
|
고양 킨텍스 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
// justifyContent: 'space-between',
|
||||||
|
flexDirection: 'column', |
||||||
|
borderBottom: '1px dotted #000' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
backgroundColor: '#F2F2F2', |
||||||
|
marginBottom: '5px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}> |
||||||
|
출발/도착시간 (비행시간) |
||||||
|
</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}>편명/기종</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}>특가운임</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}>할인운임</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}>정규운임</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
alignItems: 'center', |
||||||
|
borderBottom: '1px dotted #000', |
||||||
|
marginBottom: '5px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}> |
||||||
|
<span>2시간 5분</span> |
||||||
|
<div style={{ fontWeight: 'bold' }}> |
||||||
|
08:40----------------------10:45 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}> |
||||||
|
<div>3P1003</div> |
||||||
|
<div>B737-800</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center', |
||||||
|
height: '50px', |
||||||
|
border: '1px solid #F2F2F2' |
||||||
|
// width: '500px',
|
||||||
|
}} |
||||||
|
> |
||||||
|
<div>매진</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
textAlign: 'center', |
||||||
|
border: '1px solid #F2F2F2', |
||||||
|
height: '50px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ backgroundColor: '#C00001' }}> |
||||||
|
<div> |
||||||
|
<span style={{ color: '#fff', fontWeight: 'bold' }}> |
||||||
|
63,000{' '} |
||||||
|
</span> |
||||||
|
<span style={{ color: '#fff' }}>KRW</span> |
||||||
|
</div> |
||||||
|
<span style={{ color: '#fff' }}>잔여7석</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
textAlign: 'center', |
||||||
|
border: '1px solid #F2F2F2', |
||||||
|
height: '50px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<span style={{ fontWeight: 'bold' }}>76,000 </span> |
||||||
|
<span>KRW</span> |
||||||
|
</div> |
||||||
|
<span>잔여9석</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}> |
||||||
|
<span>2시간 5분</span> |
||||||
|
<div style={{ fontWeight: 'bold' }}> |
||||||
|
10:40----------------------12:45 |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'end', |
||||||
|
marginRight: '40px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span>+1 day</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style={{ flex: 1, textAlign: 'center' }}> |
||||||
|
<div>3P1003</div> |
||||||
|
<div>B737-800</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center', |
||||||
|
height: '50px', |
||||||
|
border: '1px solid #F2F2F2' |
||||||
|
// width: '500px',
|
||||||
|
}} |
||||||
|
> |
||||||
|
<div>매진</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
textAlign: 'center', |
||||||
|
border: '1px solid #F2F2F2', |
||||||
|
height: '50px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<span style={{ fontWeight: 'bold' }}>63,000 </span> |
||||||
|
<span>KRW</span> |
||||||
|
</div> |
||||||
|
<span>잔여3석</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
flex: 1, |
||||||
|
textAlign: 'center', |
||||||
|
border: '1px solid #F2F2F2', |
||||||
|
height: '50px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<span>76,000 </span> |
||||||
|
<span>KRW</span> |
||||||
|
</div> |
||||||
|
<span>잔여9석</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
@ -0,0 +1,221 @@ |
|||||||
|
export default function ReserveStep2() { |
||||||
|
return ( |
||||||
|
<div style={{ padding: '40px' }}> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
fontSize: '1.3rem', |
||||||
|
borderBottom: '1px solid #000' |
||||||
|
}} |
||||||
|
> |
||||||
|
성인 1 |
||||||
|
</div> |
||||||
|
<div style={{ padding: '10px', marginBottom: '20px' }}> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
width: '100%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '50%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
borderBottom: '1px dotted #000', |
||||||
|
marginBottom: '10px', |
||||||
|
height: '100px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span style={{ fontWeight: 'bold' }}>성명</span> |
||||||
|
<div style={{ marginBottom: '10px' }}> |
||||||
|
<input value='KIM' style={{ marginRight: '10px' }} /> |
||||||
|
<input value='YOONSUN' style={{ marginRight: '10px' }} /> |
||||||
|
<input value='12345678' /> |
||||||
|
</div> |
||||||
|
<div style={{ marginBottom: '10px' }}> |
||||||
|
* 탑승자의 성명은 신분증상의 성명과 동일하게 입력하여 주시기 |
||||||
|
바랍니다. |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
borderBottom: '1px dotted #000', |
||||||
|
marginBottom: '10px', |
||||||
|
height: '100px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span style={{ fontWeight: 'bold' }}>신분할인 (여정1)</span> |
||||||
|
<div style={{ marginBottom: '10px' }}> |
||||||
|
<select style={{ width: '72%' }}> |
||||||
|
<option>성인 (기본운임)</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
* 선택한 할인율 적용된 금액은 다음 단계에서 확인 가능합니다. |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
borderBottom: '1px dotted #000', |
||||||
|
|
||||||
|
height: '50px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span style={{ fontWeight: 'bold' }}>신분할인 (여정2)</span> |
||||||
|
<div style={{ marginBottom: '10px' }}> |
||||||
|
<select style={{ width: '72%' }}> |
||||||
|
<option>성인 (기본운임)</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '50%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
borderBottom: '1px dotted #000', |
||||||
|
marginBottom: '10px', |
||||||
|
height: '100px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span style={{ fontWeight: 'bold' }}>성별</span> |
||||||
|
<div> |
||||||
|
<span style={{ padding: '5px 40px', border: '1px solid #000' }}> |
||||||
|
남자 |
||||||
|
</span> |
||||||
|
<span |
||||||
|
style={{ |
||||||
|
padding: '5px 40px', |
||||||
|
border: '1px solid #990033', |
||||||
|
backgroundColor: '#990033', |
||||||
|
color: '#fff' |
||||||
|
}} |
||||||
|
> |
||||||
|
여자 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
borderBottom: '1px dotted #000', |
||||||
|
marginBottom: '10px', |
||||||
|
height: '100px' |
||||||
|
}} |
||||||
|
></div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
borderBottom: '1px dotted #000', |
||||||
|
|
||||||
|
height: '50px' |
||||||
|
}} |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
|
||||||
|
borderBottom: '1px solid #000' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
fontSize: '1.3rem' |
||||||
|
}} |
||||||
|
> |
||||||
|
예매자 정보 |
||||||
|
</div> |
||||||
|
<div style={{ color: 'red' }}> |
||||||
|
* 반드시 연락 가능한 연락처와 이메일을 입력하십시오. |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
padding: '0 10px 0 10px', |
||||||
|
backgroundColor: '#F2F2F2', |
||||||
|
borderBottom: '1px dotted #000' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
width: '100%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '50%', |
||||||
|
borderRight: '1px solid #000', |
||||||
|
marginRight: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
// marginBottom: '10px',
|
||||||
|
height: '100px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span style={{ fontWeight: 'bold' }}>연락처</span> |
||||||
|
<div style={{ marginBottom: '10px' }}> |
||||||
|
<select |
||||||
|
disabled |
||||||
|
style={{ height: '29px', marginRight: '10px' }} |
||||||
|
> |
||||||
|
<option>+ 82 (대한민국)</option> |
||||||
|
</select> |
||||||
|
<select |
||||||
|
disabled |
||||||
|
style={{ height: '29px', marginRight: '10px' }} |
||||||
|
> |
||||||
|
<option>010</option> |
||||||
|
</select> |
||||||
|
<input value='' disabled style={{ marginRight: '10px' }} /> |
||||||
|
<input value='' disabled /> |
||||||
|
</div> |
||||||
|
<div style={{ marginBottom: '10px' }}> |
||||||
|
* 탑승자의 성명은 신분증상의 성명과 동일하게 입력하여 주시기 |
||||||
|
바랍니다. |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '50%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
// marginBottom: '10px',
|
||||||
|
height: '100px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span style={{ fontWeight: 'bold' }}>이메일</span> |
||||||
|
<div> |
||||||
|
<input |
||||||
|
value='이메일' |
||||||
|
disabled |
||||||
|
style={{ marginRight: '10px' }} |
||||||
|
/> |
||||||
|
@ |
||||||
|
<select disabled style={{ height: '29px', width: '300px' }}> |
||||||
|
<option>선택</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
@ -0,0 +1,128 @@ |
|||||||
|
export default function ReserveStep3() { |
||||||
|
return ( |
||||||
|
<div style={{ padding: '40px' }}> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
borderBottom: '1px solid #000' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
fontSize: '1.3rem' |
||||||
|
}} |
||||||
|
> |
||||||
|
결제 정보 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
padding: '5px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '15%', |
||||||
|
height: '50px', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
결제 수단 |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '15%', |
||||||
|
height: '50px', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'end', |
||||||
|
alignItems: 'center', |
||||||
|
backgroundColor: '#990033', |
||||||
|
color: '#fff', |
||||||
|
padding: '5px', |
||||||
|
marginRight: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
신용카드 |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '15%', |
||||||
|
height: '50px', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'end', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '5px', |
||||||
|
border: '1px solid #000', |
||||||
|
marginRight: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
카카오페이 |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '15%', |
||||||
|
height: '50px', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'end', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '5px', |
||||||
|
border: '1px solid #000' |
||||||
|
}} |
||||||
|
> |
||||||
|
계좌이체 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
padding: '5px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '15%', |
||||||
|
height: '50px', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
결제 카드 |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '15%', |
||||||
|
height: '50px', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'start', |
||||||
|
alignItems: 'center', |
||||||
|
marginRight: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<select style={{ width: '200px' }}> |
||||||
|
<option>카드 선택</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '15%', |
||||||
|
height: '50px', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'start', |
||||||
|
alignItems: 'center', |
||||||
|
marginRight: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<select style={{ width: '200px' }}> |
||||||
|
<option>일시불</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
@ -0,0 +1,247 @@ |
|||||||
|
export default function Step1() { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
border: '1px solid #990033', |
||||||
|
padding: '25px', |
||||||
|
width: '70%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center', |
||||||
|
borderBottom: '1px solid #990033', |
||||||
|
fontSize: '1.2rem' |
||||||
|
}} |
||||||
|
> |
||||||
|
<h5 style={{ fontWeight: 'bold' }}>출발지 선택</h5> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
cursor: 'pointer', |
||||||
|
fontSize: '1.5rem' |
||||||
|
}} |
||||||
|
> |
||||||
|
X |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style={{ padding: '20px 15px' }}> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-around', |
||||||
|
marginBottom: '20px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<ul |
||||||
|
style={{ |
||||||
|
width: '30%', |
||||||
|
border: '1px solid #990033', |
||||||
|
height: '120px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
backgroundColor: '#990033', |
||||||
|
color: '#fff', |
||||||
|
height: '50px', |
||||||
|
fontWeight: 'bold', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
아라뱃길 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
height: '35px', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
alignItems: 'center', |
||||||
|
borderBottom: '1px solid #990033', |
||||||
|
padding: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
드론시험 인증센터 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
계양 신도시 |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<ul |
||||||
|
style={{ |
||||||
|
width: '30%', |
||||||
|
border: '1px solid #990033' |
||||||
|
}} |
||||||
|
> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
backgroundColor: '#990033', |
||||||
|
color: '#fff', |
||||||
|
height: '50px', |
||||||
|
fontWeight: 'bold', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
한강 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px', |
||||||
|
borderBottom: '1px solid #990033' |
||||||
|
}} |
||||||
|
> |
||||||
|
고양 킨텍스 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px', |
||||||
|
borderBottom: '1px solid #990033' |
||||||
|
}} |
||||||
|
> |
||||||
|
김포공항 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
여의도 공원 |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<ul |
||||||
|
style={{ |
||||||
|
width: '30%', |
||||||
|
border: '1px solid #990033', |
||||||
|
height: '120px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
backgroundColor: '#990033', |
||||||
|
color: '#fff', |
||||||
|
height: '50px', |
||||||
|
fontWeight: 'bold', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
도심 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px', |
||||||
|
borderBottom: '1px solid #990033' |
||||||
|
}} |
||||||
|
> |
||||||
|
잠실한강공원 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
수서역 |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div style={{ paddingLeft: '15px', paddingRight: '15px' }}> |
||||||
|
<div style={{ marginBottom: '10px' }}> |
||||||
|
<span style={{ fontWeight: 'bold', color: '#000' }}> |
||||||
|
최근 조회하신 여정 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '47.5%', |
||||||
|
backgroundColor: '#F2F2F2', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
padding: '5px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span style={{ fontWeight: 'bold' }}> |
||||||
|
{'드론시험 인증센터 -> 계양 신도시 (VVO)'} |
||||||
|
</span> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
backgroundColor: '#fff', |
||||||
|
borderRadius: '50%', |
||||||
|
width: '20px', |
||||||
|
textAlign: 'center', |
||||||
|
fontWeight: 'bold' |
||||||
|
}} |
||||||
|
> |
||||||
|
X |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '47.5%', |
||||||
|
backgroundColor: '#F2F2F2', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
padding: '5px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<span style={{ fontWeight: 'bold' }}> |
||||||
|
{'고양 킨텍스 -> 여의도 공원'} |
||||||
|
</span> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
backgroundColor: '#fff', |
||||||
|
borderRadius: '50%', |
||||||
|
width: '20px', |
||||||
|
textAlign: 'center', |
||||||
|
fontWeight: 'bold' |
||||||
|
}} |
||||||
|
> |
||||||
|
X |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
@ -0,0 +1,185 @@ |
|||||||
|
export default function Step2() { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
border: '1px solid #990033', |
||||||
|
padding: '25px', |
||||||
|
width: '70%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center', |
||||||
|
borderBottom: '1px solid #990033', |
||||||
|
fontSize: '1.2rem' |
||||||
|
}} |
||||||
|
> |
||||||
|
<h5 style={{ fontWeight: 'bold' }}>도착지 선택</h5> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
cursor: 'pointer', |
||||||
|
fontSize: '1.5rem' |
||||||
|
}} |
||||||
|
> |
||||||
|
X |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style={{ padding: '20px 15px' }}> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-around', |
||||||
|
marginBottom: '20px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<ul |
||||||
|
style={{ |
||||||
|
width: '30%', |
||||||
|
border: '1px solid #990033', |
||||||
|
height: '120px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
backgroundColor: '#990033', |
||||||
|
color: '#fff', |
||||||
|
height: '50px', |
||||||
|
fontWeight: 'bold', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
아라뱃길 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
height: '35px', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
alignItems: 'center', |
||||||
|
borderBottom: '1px solid #990033', |
||||||
|
padding: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
드론시험 인증센터 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
계양 신도시 |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<ul |
||||||
|
style={{ |
||||||
|
width: '30%', |
||||||
|
border: '1px solid #990033' |
||||||
|
}} |
||||||
|
> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
backgroundColor: '#990033', |
||||||
|
color: '#fff', |
||||||
|
height: '50px', |
||||||
|
fontWeight: 'bold', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
한강 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px', |
||||||
|
borderBottom: '1px solid #990033' |
||||||
|
}} |
||||||
|
> |
||||||
|
고양 킨텍스 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px', |
||||||
|
borderBottom: '1px solid #990033' |
||||||
|
}} |
||||||
|
> |
||||||
|
김포공항 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
여의도 공원 |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<ul |
||||||
|
style={{ |
||||||
|
width: '30%', |
||||||
|
border: '1px solid #990033', |
||||||
|
height: '120px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
backgroundColor: '#990033', |
||||||
|
color: '#fff', |
||||||
|
height: '50px', |
||||||
|
fontWeight: 'bold', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
도심 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px', |
||||||
|
borderBottom: '1px solid #990033' |
||||||
|
}} |
||||||
|
> |
||||||
|
잠실한강공원 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
height: '35px', |
||||||
|
alignItems: 'center', |
||||||
|
padding: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
수서역 |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
@ -0,0 +1,70 @@ |
|||||||
|
import Flatpickr from 'react-flatpickr'; |
||||||
|
import 'flatpickr/dist/themes/material_green.css'; |
||||||
|
export default function Step3() { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
border: '1px solid #990033', |
||||||
|
padding: '25px', |
||||||
|
width: '70%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center', |
||||||
|
borderBottom: '1px solid #990033', |
||||||
|
fontSize: '1.2rem' |
||||||
|
}} |
||||||
|
> |
||||||
|
<h5 style={{ fontWeight: 'bold' }}>탑승일 선택</h5> |
||||||
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
||||||
|
<button |
||||||
|
style={{ |
||||||
|
border: '1px solid #000', |
||||||
|
padding: '0 10px', |
||||||
|
fontSize: '1rem' |
||||||
|
}} |
||||||
|
> |
||||||
|
초기화 |
||||||
|
</button> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
cursor: 'pointer', |
||||||
|
fontSize: '1.5rem', |
||||||
|
marginLeft: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
X |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style={{ padding: '20px 15px' }}> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
<Flatpickr |
||||||
|
// value={['2023-10-10', '2023-10-10']}
|
||||||
|
|
||||||
|
// className='hidden-input'
|
||||||
|
id='searchDate' |
||||||
|
options={{ |
||||||
|
inline: true, |
||||||
|
mode: 'range', |
||||||
|
showMonths: 2, |
||||||
|
wrap: true |
||||||
|
}} |
||||||
|
> |
||||||
|
<input type='text' data-input style={{ display: 'none' }} /> |
||||||
|
</Flatpickr> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
@ -0,0 +1,185 @@ |
|||||||
|
export default function Step4({ setIsChoise }) { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
border: '1px solid #990033', |
||||||
|
padding: '25px 25px 5px 25px', |
||||||
|
width: '70%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center', |
||||||
|
borderBottom: '1px solid #990033', |
||||||
|
fontSize: '1.2rem' |
||||||
|
}} |
||||||
|
> |
||||||
|
<h5 style={{ fontWeight: 'bold' }}>탑승객 수 선택</h5> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
cursor: 'pointer', |
||||||
|
fontSize: '1.5rem' |
||||||
|
}} |
||||||
|
> |
||||||
|
X |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style={{ padding: '20px 15px' }}> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
alignItems: 'center', |
||||||
|
marginBottom: '30px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ fontWeight: 'bold', width: '300px' }}> |
||||||
|
성인<span> (만 13세 이상)</span>{' '} |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
width: '400px', |
||||||
|
backgroundColor: '#f2f2f2', |
||||||
|
padding: '5px', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
<button |
||||||
|
style={{ |
||||||
|
border: '1px solid #000', |
||||||
|
padding: '0 10px', |
||||||
|
fontSize: '1rem', |
||||||
|
backgroundColor: '#fff' |
||||||
|
}} |
||||||
|
> |
||||||
|
- |
||||||
|
</button> |
||||||
|
<span style={{ fontWeight: 'bold' }}>성인 1</span> |
||||||
|
<button |
||||||
|
style={{ |
||||||
|
border: '1px solid #000', |
||||||
|
padding: '0 10px', |
||||||
|
fontSize: '1rem', |
||||||
|
backgroundColor: '#fff' |
||||||
|
}} |
||||||
|
> |
||||||
|
+ |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
alignItems: 'center', |
||||||
|
marginBottom: '30px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ fontWeight: 'bold', width: '300px' }}> |
||||||
|
소아<span> (만 2세 ~ 13세 미만)</span>{' '} |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
width: '400px', |
||||||
|
backgroundColor: '#f2f2f2', |
||||||
|
padding: '5px', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
<button |
||||||
|
style={{ |
||||||
|
border: '1px solid #000', |
||||||
|
padding: '0 10px', |
||||||
|
fontSize: '1rem', |
||||||
|
backgroundColor: '#fff' |
||||||
|
}} |
||||||
|
> |
||||||
|
- |
||||||
|
</button> |
||||||
|
<span style={{ fontWeight: 'bold' }}>소아 0</span> |
||||||
|
<button |
||||||
|
style={{ |
||||||
|
border: '1px solid #000', |
||||||
|
padding: '0 10px', |
||||||
|
fontSize: '1rem', |
||||||
|
backgroundColor: '#fff' |
||||||
|
}} |
||||||
|
> |
||||||
|
+ |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
alignItems: 'center', |
||||||
|
marginBottom: '30px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ fontWeight: 'bold', width: '300px' }}> |
||||||
|
유아<span> (만 2세 미만)</span>{' '} |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
width: '400px', |
||||||
|
backgroundColor: '#f2f2f2', |
||||||
|
padding: '5px', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
<button |
||||||
|
style={{ |
||||||
|
border: '1px solid #000', |
||||||
|
padding: '0 10px', |
||||||
|
fontSize: '1rem', |
||||||
|
backgroundColor: '#fff' |
||||||
|
}} |
||||||
|
> |
||||||
|
- |
||||||
|
</button> |
||||||
|
<span style={{ fontWeight: 'bold' }}>유아 0</span> |
||||||
|
<button |
||||||
|
style={{ |
||||||
|
border: '1px solid #000', |
||||||
|
padding: '0 10px', |
||||||
|
fontSize: '1rem', |
||||||
|
backgroundColor: '#fff' |
||||||
|
}} |
||||||
|
> |
||||||
|
+ |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ display: 'flex', justifyContent: 'end', alignItems: 'end' }} |
||||||
|
> |
||||||
|
<button |
||||||
|
style={{ |
||||||
|
border: '1px solid #7F7F7F', |
||||||
|
padding: '0 10px', |
||||||
|
fontSize: '1rem', |
||||||
|
backgroundColor: '#7F7F7F', |
||||||
|
color: '#fff', |
||||||
|
padding: '5px 30px', |
||||||
|
fontWeight: 'bold', |
||||||
|
fontSize: '0.8rem' |
||||||
|
}} |
||||||
|
onClick={() => setIsChoise(true)} |
||||||
|
> |
||||||
|
선택 완료 |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
@ -0,0 +1,9 @@ |
|||||||
|
import Step1 from './Step1'; |
||||||
|
import Step2 from './Step2'; |
||||||
|
import Step3 from './Step3'; |
||||||
|
import Step4 from './Step4'; |
||||||
|
import ReserveStep1 from './ReserveStep1'; |
||||||
|
import ReserveStep2 from './ReserveStep2'; |
||||||
|
import ReserveStep3 from './ReserveStep3'; |
||||||
|
|
||||||
|
export { Step1, Step2, Step3, Step4, ReserveStep1, ReserveStep2, ReserveStep3 }; |
Loading…
Reference in new issue