영화목록 (Netflix) 앱 3 - 스타일링하기

 

* 글로벌 스타일 설정하기

src 폴더에 해당 파일을 추가한다. 

body{
    margin: 0;
    padding: 0;
}

index.css 파일을 위와 같이 생성하자!

import './index.css'

src 폴더의 index.js 파일에 위 코드를 추가하자!

 

* 로딩화면 스타일링하기

components 폴더에 아래 파일을 추가한다. 

.loading-container{
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.loading-img{
    width: 100%;
    height: 100%;
}

Loading.css 파일을 위와 같이 작성하자!

import React from 'react'
import loadingImg from 'assets/images/loading.gif'
import './Loading.css'

const Loading = () => {
    return (
        <div className='loading-container'>
            <img className='loading-img' src={loadingImg} alt='loading-img'></img>
        </div>
    )
}

export default Loading

Loading.js 파일을 위와 같이 수정하자! 스타일 코드를 임포트하고 클래스 이름을 설정하여 스타일을 적용하였다.

 

* Input 스타일링하기

components 폴더에 아래 파일을 추가한다. 

input{
    all: unset;
    margin: 10px;
    width: 400px;
    height: 50px;
    border: 2px solid lightgreen;
    border-radius: 15px;
    text-align: left;
    padding-left: 15px;
    color: lightgreen;
    font-size: 1.2rem;
    font-weight: bold;
}
input::placeholder{
    color: lightgreen;
    font-size: 1.2rem;
    font-weight: bold;
}

Input.css 파일을 위와 같이 작성하자!

import './Input.css'

Input.js 파일에 위 코드를 추가하자!

 

* 버튼 스타일링하기

components 폴더에 아래 파일을 추가한다. 

import React from 'react'
import './Button.css'

const Button = ({ children, size, color, width, handleClick, disabled }) => {
    return <button 
                className={`Button ${size} ${color} ${width}`} 
                onClick={handleClick} disabled={disabled}
            >{children}</button>
}

export default Button;

Button.defaultProps = {
    size: 'medium',
    color: 'tomato',
    disabled: false
}

Button.js 파일을 위와 같이 작성하자!

.Button {
    all: unset;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.Button:hover{
    opacity: 0.7;
}

/* 버튼의 크기 설정 */
.large{
    height: 70px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 1.2rem;
}
.medium{
    height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1rem;
}
.small{
    height: 30px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 0.8rem;
}

/* 버튼의 배경색 설정 */
.blue{
    background:blue;
}
.blue:hover{
    background: skyblue;
}
.tomato{
    background: tomato;
}
.tomato:hover{
    background: lightsalmon;
}
.grey{
    background: grey;
}
.grey:hover{
    background: lightgray;
}
/* 전체 너비를 차지하는 버튼 */
.fullWidth{
    width: 100%;
    margin-left: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}

Button.css 파일을 위와 같이 작성하자!

export { default as Input } from './Input'
export { default as Movie } from './Movie'
export { default as Loading } from './Loading'
export { default as Button } from './Button'

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

import React, { useState } from 'react'
import { useNavigate } from "react-router-dom"

import { Input, Button } from 'components'

const Register = () => {
    const [id, setId] = useState('')
    const [password, setPassword] = useState('')
    const navigate = useNavigate()

    const handleChange = (e) => {
        const { name, value } = e.target
        name === 'id' ? setId(value) : setPassword(value)
        console.log(name, value)
    }
    const handleRegister = () => {
        if(JSON.parse(sessionStorage.getItem('user'))){
            navigate('/login')
        }else{
            sessionStorage.setItem('user', JSON.stringify({ id, password }))
            navigate('/home')
        } 
    }
    return (
        <div>
            <Input name='id' type='text' placeholder='Type ID ...' value={id} onChange={handleChange}/><br/>
            <Input name='password' type='password' placeholder='Type PASSWORD ...' value={password} onChange={handleChange}/><br/>
            <Button handleClick={handleRegister}>Register</Button>
        </div>
    )
}

export default Register

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

import { Input, Button } from 'components'

Button 컴포넌트를 임포트한다.

<Button handleClick={handleRegister}>Register</Button>

button 요소를 Button 컴포넌트로 교체하고 onClick 을 handleClick 으로 설정한다.

import React, { useState } from 'react'
import { useNavigate } from "react-router-dom"

import { Input, Button } from 'components'

const Login = () => {
    const [id, setId] = useState('')
    const [password, setPassword] = useState('')
    const navigate = useNavigate()

    const handleChange = (e) => {
        const { name, value } = e.target
        name === 'id' ? setId(value) : setPassword(value)
        console.log(name, value)
    }
    const handleLogin = () => {
        const user = JSON.parse(sessionStorage.getItem('user'))
        if(id === user.id && password === user.password){
            navigate('/home')
        }else{
            alert('You gaved wrong id or password !')
        } 
    }
    return (
        <div>
            <Input name='id' type='text' placeholder='Type ID ...' value={id} onChange={handleChange}/><br/>
            <Input name='password' type='password' placeholder='Type PASSWORD ...' value={password} onChange={handleChange}/><br/>
            <Button handleClick={handleLogin}>Login</Button>
        </div>
    )
}

export default Login

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

import { Input, Button } from 'components'

Button 컴포넌트를 임포트한다.

<Button handleClick={handleLogin}>Login</Button>

button 요소를 Button 컴포넌트로 교체하고 onClick 을 handleClick 으로 설정한다.

 

* Register 배경화면 스타일링하기

assets/images 폴더에 background.jpg 파일을 추가한다.

pages 폴더에 아래 파일을 추가한다. 

.register-container{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('../assets/images/background.jpg');
}

Register.css 파일을 위와 같이 작성하자!

import React, { useState } from 'react'
import { useNavigate } from "react-router-dom"

import { Input, Button } from 'components'
import './Register.css'

const Register = () => {
    const [id, setId] = useState('')
    const [password, setPassword] = useState('')
    const navigate = useNavigate()

    const handleChange = (e) => {
        const { name, value } = e.target
        name === 'id' ? setId(value) : setPassword(value)
        console.log(name, value)
    }
    const handleRegister = () => {
        if(JSON.parse(sessionStorage.getItem('user'))){
            navigate('/login')
        }else{
            sessionStorage.setItem('user', JSON.stringify({ id, password }))
            navigate('/home')
        } 
    }
    return (
        <div className='register-container'>
            <Input name='id' type='text' placeholder='Type ID ...' value={id} onChange={handleChange}/><br/>
            <Input name='password' type='password' placeholder='Type PASSWORD ...' value={password} onChange={handleChange}/><br/>
            <Button handleClick={handleRegister}>Register</Button>
        </div>
    )
}

export default Register

Register.js 파일을 위와 같이 작성하자!

import './Register.css'

스타일링 파일을 추가한다.

<div className='register-container'>
    <Input name='id' type='text' placeholder='Type ID ...' value={id} onChange={handleChange}/><br/>
    <Input name='password' type='password' placeholder='Type PASSWORD ...' value={password} onChange={handleChange}/><br/>
    <Button handleClick={handleRegister}>Register</Button>
</div>

클래스 이름을 설정하여 스타일을 적용한다. 

 

* 로그인 화면 스타일링하기

pages 폴더에 아래 파일을 추가한다. 

.login-container{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('../assets/images/background.jpg');
}

Login.css 파일을 위와 같이 작성하자!

import React, { useState } from 'react'
import { useNavigate } from "react-router-dom"

import { Input, Button } from 'components'
import './Login.css'

const Login = () => {
    const [id, setId] = useState('')
    const [password, setPassword] = useState('')
    const navigate = useNavigate()

    const handleChange = (e) => {
        const { name, value } = e.target
        name === 'id' ? setId(value) : setPassword(value)
        console.log(name, value)
    }
    const handleLogin = () => {
        const user = JSON.parse(sessionStorage.getItem('user'))
        if(id === user.id && password === user.password){
            navigate('/home')
        }else{
            alert('You gaved wrong id or password !')
        } 
    }
    return (
        <div className='login-container'>
            <Input name='id' type='text' placeholder='Type ID ...' value={id} onChange={handleChange}/><br/>
            <Input name='password' type='password' placeholder='Type PASSWORD ...' value={password} onChange={handleChange}/><br/>
            <Button handleClick={handleLogin}>Login</Button>
        </div>
    )
}

export default Login

Login.js 파일을 위와 같이 작성하자!

import './Login.css'

스타일링 파일을 추가한다.

<div className='login-container'>
    <Input name='id' type='text' placeholder='Type ID ...' value={id} onChange={handleChange}/><br/>
    <Input name='password' type='password' placeholder='Type PASSWORD ...' value={password} onChange={handleChange}/><br/>
    <Button handleClick={handleLogin}>Login</Button>
</div>

클래스 이름을 설정하여 스타일을 적용한다. 

 

* 홈화면 스타일링하기

components 폴더에 아래 파일을 추가한다. 

.movie-container{
    width: 230px;
    height: 500px;
    margin: 10px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    box-shadow: rgba(255, 255, 255, 0.35) 0px 5px 15px;
    background: url('../assets/images/background.jpg');
}
.movie-container:hover{
    transform: scale(1.05);
}

Movie.css 파일을 위와 같이 작성하자!

import React from 'react'
import './Movie.css'

const Movie = ({ title, genres, cover, summary }) => {
    return (
        <div className='movie-container'>
            <img src={cover} alt={title}></img>
            <h3>{title}</h3>
            <h4>{genres.join(" ")}</h4>
        </div>
    )
}

export default Movie

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

 

pages 폴더에 아래 파일을 추가한다. 

.Home-container{
    background: url('../assets/images/background.jpg');
    width: 100%;
    text-align: center;
}
.Home-movies{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 60%;
    margin: 0px auto;
    text-align: center;
}

Home.css 파일을 위와 같이 작성하자!

import React, { useState, useEffect } from 'react'
import { Movie, Loading } from 'components'

import './Home.css'

const Home = () => {
    const [loading, setLoading] = useState(true)
    const [movies, setMovies] = useState([])

    useEffect( () => {
        fetch('https://yts.mx/api/v2/list_movies.json?limit=12')
        .then( res => res.json())
        .then( result => {
            const {data: {movies}} = result
            console.log(movies)
            setLoading(false)
            setMovies(movies)
        })
    }, [])

    const homeUI = movies.map(movie => <Movie 
                                        key={movie.id} 
                                        title={movie.title} 
                                        genres={movie.genres} 
                                        cover={movie.medium_cover_image} 
                                        summary={movie.summary}
                                       />
                                    )

    return (
        <>
            {loading? <Loading/>: <div className='Home-container'><div className='Home-movies'>{homeUI}</div></div>}
        </>
    )
}

export default Home

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

<>
    {loading? <Loading/>: <div className='Home-container'><div className='Home-movies'>{homeUI}</div></div>}
</>

homeUI 에 스타일을 적용하기 위하여 위와 같이 수정하였다.