* 글로벌 스타일 설정하기
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 에 스타일을 적용하기 위하여 위와 같이 수정하였다.
'프로젝트 > 영화 목록 (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 |