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

프로젝트/영화 목록 (Netflix) 앱

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

syleemomo 2021. 11. 23. 01:21

728x90

* 글로벌 스타일 설정하기

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

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

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

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

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

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

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 에 스타일을 적용하기 위하여 위와 같이 수정하였다.

728x90

저작자표시 비영리 변경금지

'프로젝트 > 영화 목록 (Netflix) 앱' 카테고리의 다른 글

영화목록 (Netflix) 앱 5 - 상세페이지 만들기 (0)	2021.11.24
영화목록 (netflix) 앱 번외편 - 사용자 정보 유효성 검증 (0)	2021.11.23
영화목록 (Netflix) 앱 4 - 검색, 정렬 구현하기 (0)	2021.11.23
영화목록 (netflix) 앱 2 - 라우터 구현하기 (0)	2021.11.22
영화목록 (Netflix) 앱 1 - 프로젝트 셋팅 및 웹팩(webpack) 설정 (0)	2021.11.22

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

250x250

웹개발과 일상에 대해 포스팅하는 블로그입니다.

Array, 부트스트랩 연습, 리액트 연습문제, node.js todo, 몽고디비 연동, 노드 프로젝트, 데이터베이스 쿼리연습, 리액트 스타일링, MongoDB, NoSQL, node.js 프로젝트, 자바스크립트 배열, 배열, 몽고디비, 리액트 연습과제, em, express 배포, 컴포넌트 스타일링, 몽고디비 쿼리연습, 히로쿠 서버,

Today :
Yesterday :