-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #45 from kych0912/main
[3주차/noah] 워크북 제출합니다
- Loading branch information
Showing
34 changed files
with
6,246 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,4 @@ | ||
/web-dev-practice | ||
/node_modules | ||
/node_modules | ||
|
||
.env |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
module.exports = { | ||
root: true, | ||
env: { browser: true, es2020: true }, | ||
extends: [ | ||
'eslint:recommended', | ||
'plugin:react/recommended', | ||
'plugin:react/jsx-runtime', | ||
'plugin:react-hooks/recommended', | ||
], | ||
ignorePatterns: ['dist', '.eslintrc.cjs'], | ||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, | ||
settings: { react: { version: '18.2' } }, | ||
plugins: ['react-refresh'], | ||
rules: { | ||
'react/jsx-no-target-blank': 'off', | ||
'react-refresh/only-export-components': [ | ||
'warn', | ||
{ allowConstantExport: true }, | ||
], | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
# React + Vite | ||
|
||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
|
||
Currently, two official plugins are available: | ||
|
||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import styled from "styled-components" | ||
|
||
export default function Button({children, onClick,color}) { | ||
return ( | ||
<CustomButton color={color} onClick={onClick}>{children}</CustomButton> | ||
) | ||
} | ||
|
||
const CustomButton = styled.button` | ||
border-radius: .5rem; | ||
background-color: ${props => props.color}; | ||
border: none; | ||
font-size: .75rem; | ||
width:100px; | ||
padding: .5rem 1rem; | ||
color: white; | ||
&:hover{ | ||
background-color: gray; | ||
} | ||
` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { MainContainer } from "./styled/styled" | ||
import MoviePost from "../post/post" | ||
|
||
export default function Feed({movies}){ | ||
return( | ||
<MainContainer> | ||
{ | ||
movies.map((movie,index)=>{ | ||
return( | ||
<MoviePost key={index} movie={movie}/> | ||
) | ||
} | ||
) | ||
} | ||
</MainContainer> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import styled from "styled-components" | ||
|
||
const MainContainer = styled.div` | ||
display: flex; | ||
flex-wrap: wrap; | ||
gap:8px; | ||
` | ||
|
||
export { | ||
MainContainer | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { | ||
NavbarContainer, | ||
Logo, | ||
NavbarHeader, | ||
RightContainer | ||
} from "./styled/styled"; | ||
import Button from "../button/button"; | ||
import { Link } from "react-router-dom"; | ||
import { useNavigate } from "react-router-dom"; | ||
|
||
export default function Navbar() { | ||
const navigate = useNavigate(); | ||
|
||
return ( | ||
<NavbarHeader> | ||
<NavbarContainer> | ||
<Logo> | ||
<Link to={"/"}> | ||
YONGCHA | ||
</Link> | ||
</Logo> | ||
|
||
<RightContainer> | ||
<Button onClick={()=>{ | ||
navigate("/login") | ||
}} color="black">로그인</Button> | ||
<Button onClick={()=>{ | ||
navigate("/signup") | ||
}} color="red">회원가입</Button> | ||
</RightContainer> | ||
</NavbarContainer> | ||
</NavbarHeader> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { styled } from 'styled-components'; | ||
|
||
const NavbarContainer = styled.div` | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
padding: 0 20px; | ||
height: 60px; | ||
background-color: #282c34; | ||
color: white; | ||
font-size: 24px; | ||
` | ||
|
||
const Logo = styled.div` | ||
font-size: 24px; | ||
font-weight: bold; | ||
color: red; | ||
` | ||
|
||
const NavbarHeader = styled.header` | ||
position:sticky; | ||
height: 60px; | ||
background-color: #282c34; | ||
color: white; | ||
font-size: 24px; | ||
width:100%; | ||
` | ||
|
||
const RightContainer = styled.div` | ||
display: flex; | ||
align-items: center; | ||
gap: 10px; | ||
` | ||
|
||
export { | ||
NavbarContainer, | ||
Logo, | ||
NavbarHeader, | ||
RightContainer | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import { | ||
PostImage, | ||
PostContainer, | ||
PostTitle, | ||
PostDate, | ||
PostDetailContainer | ||
} from './styled/styled' | ||
|
||
export default function MoviePost({movie}){ | ||
const { poster_path,title,release_date} = movie; | ||
|
||
return( | ||
<PostContainer> | ||
<PostImage onMouseOver={(e)=>{ | ||
e.target.style.filter='brightness(0.5)' | ||
}} onMouseOut={(e)=>{ | ||
e.target.style.filter='brightness(1)' | ||
}} src={`https://image.tmdb.org/t/p/original/${poster_path}`} alt={title}/> | ||
|
||
<PostDetailContainer> | ||
|
||
<PostTitle>{title}</PostTitle> | ||
<PostDate>{release_date}</PostDate> | ||
</PostDetailContainer> | ||
</PostContainer> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import styled from "styled-components"; | ||
|
||
const PostImage = styled.img` | ||
object-fit: cover; | ||
width: 100%; | ||
height:300px; | ||
border-radius: 1rem; | ||
object-position: center; | ||
background-size: cover; | ||
` | ||
|
||
const PostContainer = styled.div` | ||
width: 200px; | ||
border-radius: 1rem; | ||
` | ||
|
||
const PostTitle = styled.h2` | ||
color: white; | ||
font-size: 1rem; | ||
font-weight: 700; | ||
margin-top: 10px; | ||
` | ||
|
||
const PostDate = styled.div` | ||
display: flex; | ||
justify-content: space-between; | ||
margin-top: 10px; | ||
` | ||
|
||
const PostDetailContainer = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
` | ||
|
||
export { | ||
PostImage, | ||
PostContainer, | ||
PostTitle, | ||
PostDate, | ||
PostDetailContainer | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { SidebarContainer } from "./styled/styled" | ||
import { useNavigate } from "react-router-dom" | ||
|
||
export default function Sidebar() { | ||
const navigate = useNavigate(); | ||
|
||
return ( | ||
<SidebarContainer> | ||
<h2 onClick={()=>{ | ||
navigate("/search") | ||
}}>찾기</h2> | ||
<h2 onClick={()=>{ | ||
navigate("/movies") | ||
}}>영화</h2> | ||
</SidebarContainer> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import styled from "styled-components"; | ||
|
||
const SidebarContainer = styled.div` | ||
background-color: #282c34; | ||
color: white; | ||
width: 150px; | ||
min-height: calc(100vh - 100px); | ||
padding: 20px; | ||
` | ||
|
||
export { | ||
SidebarContainer | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite + React</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.jsx"></script> | ||
</body> | ||
</html> |
Oops, something went wrong.