호텔 검색 앱 2 - 호텔 검색 페이지 구현하기

 

* 사용자 입력을 위한 Input 컴포넌트 만들기

components 폴더를 생성하고 하위에 아래와 같은 파일들을 생성하자!

import React from 'react'

import './Input.css'

const Input = ({ name, type, placeholder, value, onChange, width, min, max}) => {
    return (
        <input className={`Input-container ${width}`} name={name} type={type} min={min} max={max} placeholder={placeholder} value={value} onChange={onChange}/>
    )
}

export default Input

Input.defaultProps = {
    width: 'middle',
    min: 0,
    max: 0
}

Input.js 파일을 생성하고 위와 같이 작성하자!

<input className={`Input-container ${width}`} name={name} type={type} min={min} max={max} placeholder={placeholder} value={value} onChange={onChange}/>

input 요소를 렌더링한다. 클래스 이름에 width 속성이 전달되어 Input 의 너비를 설정할 수 있다. min, max 속성은 Input 요소의 type 이 number 인 경우에 설정하기 위함이다. 

.Input-container{
    width: 100%;
    height: 60px;
    background-color: lightgoldenrodyellow;
    border: none;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    margin-right: 10px;
    color: peru;
    font-size: 1.2rem;
    font-weight: bold;
}
.Input-container:focus{  
    outline: 3px solid tan;
}
.Input-container::placeholder{
    color:peru;
    font-size: 1rem;
    font-weight: bold;
}

input[type="date"]{
    color: peru;
    font-size: 1rem;
    font-weight: 600;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.5);
    font-size: 1.5rem;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    filter: invert(0.7);
}
input[type="number"]{
    color: peru;
    font-size: 1.2rem;
    font-weight: 600;
}
input[type=number]:hover::-webkit-inner-spin-button {  
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.large{
    width: 500px;
}
.middle{
    width: 400px;
}
.small{
    width: 300px;
}

Input.css 파일을 생성하고 위와 같이 작성하자! Input 요소의 기본적인 스타일링 이외에 type 속성에 따라 다양한 스타일을 적용하였다. 또한, 클래스명으로 설정된 Input 의 너비에 따라 width 값을 다르게 설정하였다. 

export { default as Input } from './Input'

components > index.js 파일을 생성하고 Input 요소를 내보낸다. 

 

* 호텔 검색 페이지 구현하기 - Input 사용하기

import React from 'react'

import { Input } from 'components'

import './Search.css'

const Search = () => {
    return (
        <div className='Search-container'>
           <div className='Search-inputs'>
                <Input name='destination' type='text' placeholder='목적지를 입력하세요 ...' width='large'/>
                <Input name='check-in' type='date' placeholder='체크인' width='small'/>
                <Input name='check-out' type='date' placeholder='체크아웃' width='small'/> 
                <Input name='adults-number' type='number' placeholder='인원수' width='middle' min={1} max={7}/>
           </div>
        </div>
    )
}

export default Search

Search.js 파일을 위와 같이 수정하자!

import { Input } from 'components'

호텔 검색을 위한 사용자 입력을 받기 위하여 Input 컴포넌트를 임포트한다.

import './Search.css'

호텔 검색 페이지의 스타일을 적용하기 위하여 css 파일을 임포트한다.

<div className='Search-inputs'>
    <Input name='destination' type='text' placeholder='목적지를 입력하세요 ...' width='large'/>
    <Input name='check-in' type='date' placeholder='체크인' width='small'/>
    <Input name='check-out' type='date' placeholder='체크아웃' width='small'/> 
    <Input name='adults-number' type='number' placeholder='인원수' width='middle' min={1} max={7}/>
</div>

호텔 검색에 필요한 Input 컴포넌트들을 화면에 렌더링한다. 여행 목적지, 체크인 날짜, 체크아웃 날짜, 투숙 인원수를 사용자 입력으로 전달 받는다.  체크인과 체크아웃 날짜를 선택하는 Input 컴포넌트의 type 속성은 date 로 설정하였다. 또한, 투숙 인원수를 설정하는 Input 컴포넌트의 type 속성은 number 로 설정하고 최소, 최대 값에 제한을 두었다. 

.Search-container{
    width: 100%;
    height: 100vh;
    text-align: center;
    background-image: url('../assets/images/search.jpg');
    background-size: cover;
}
.Search-inputs{
    padding-top: 100px;
}

Search.css 파일을 생성하고 위와 같이 작성하자!

 

* 호텔 검색 페이지 구현하기 - 사용자 입력 전달받기

import React, { useState } from 'react'

import { Input } from 'components'

import './Search.css'

const Search = () => {
    const [destination, setDestination] = useState('')
    const [checkIn, setCheckIn] = useState('')
    const [checkOut, setCheckOut] = useState('')
    const [adultsNumber, setAdultsNumber] = useState(1)

    const handleChange = (e) => {
        const { name, value } = e.target
        console.log(name, value)
        switch(name){
            case 'destination':
                setDestination(value)
                break;
            case 'check-in':
                setCheckIn(value)
                break;
            case 'check-out':
                setCheckOut(value)
                break;
            case 'adults-number':
                setAdultsNumber(value)
                break;
        }
    }

    return (
        <div className='Search-container'>
           <div className='Search-inputs'>
                <Input name='destination' type='text' placeholder='목적지를 입력하세요 ...' width='large' value={destination} onChange={handleChange}/>
                <Input name='check-in' type='date' placeholder='체크인' width='small' value={checkIn} onChange={handleChange}/>
                <Input name='check-out' type='date' placeholder='체크아웃' width='small' value={checkOut} onChange={handleChange}/> 
                <Input name='adults-number' type='number' placeholder='인원수' width='middle' min={1} max={7} value={adultsNumber} onChange={handleChange}/>
           </div>
        </div>
    )
}

export default Search

Search.js 파일을 위와 같이 수정하자!

import React, { useState } from 'react'

State Hook 을 사용하기 위하여 useState 함수를 임포트한다.

const [destination, setDestination] = useState('')
const [checkIn, setCheckIn] = useState('')
const [checkOut, setCheckOut] = useState('')
const [adultsNumber, setAdultsNumber] = useState(1)

여행 목적지, 체크인 날짜, 체크아웃 날짜, 투숙 인원수에 대한 상태값을 초기화한다. 

const handleChange = (e) => {
    const { name, value } = e.target
    console.log(name, value)
    switch(name){
        case 'destination':
            setDestination(value)
            break;
        case 'check-in':
            setCheckIn(value)
            break;
        case 'check-out':
            setCheckOut(value)
            break;
        case 'adults-number':
            setAdultsNumber(value)
            break;
    }
}

사용자가 뭔가를 입력할때 실행되는 이벤트핸들러 함수이다. 서로 다른 사용자 입력에 대하여 하나의 이벤트핸들러 함수에서 처리하기 위하여 switch case 문을 사용하였다. 현재 사용자가 입력중인 Input 컴포넌트의 name 값에 따라 해당하는 상태값을 변경한다. 

<div className='Search-inputs'>
    <Input name='destination' type='text' placeholder='목적지를 입력하세요 ...' width='large' value={destination} onChange={handleChange}/>
    <Input name='check-in' type='date' placeholder='체크인' width='small' value={checkIn} onChange={handleChange}/>
    <Input name='check-out' type='date' placeholder='체크아웃' width='small' value={checkOut} onChange={handleChange}/> 
    <Input name='adults-number' type='number' placeholder='인원수' width='middle' min={1} max={7} value={adultsNumber} onChange={handleChange}/>
</div>

Input 컴포넌트들을 화면에 렌더링한다. value 속성과 onChange 이벤트에 대한 핸들러 함수를 설정하였다.