Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[3주차/noah] 워크북 제출합니다 #45

Merged
merged 2 commits into from
Oct 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
/web-dev-practice
/node_modules
/node_modules

.env
1,161 changes: 1,161 additions & 0 deletions keyword/chapter03/API.md

Large diffs are not rendered by default.

21 changes: 21 additions & 0 deletions mission/chapter03/.eslintrc.cjs
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 },
],
},
}
24 changes: 24 additions & 0 deletions mission/chapter03/.gitignore
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?
8 changes: 8 additions & 0 deletions mission/chapter03/README.md
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
20 changes: 20 additions & 0 deletions mission/chapter03/components/button/button.jsx
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;
}
`
17 changes: 17 additions & 0 deletions mission/chapter03/components/feed/feed.jsx
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>
)
}
11 changes: 11 additions & 0 deletions mission/chapter03/components/feed/styled/styled.jsx
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
}
34 changes: 34 additions & 0 deletions mission/chapter03/components/navbar/navbar.jsx
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>
)
}
40 changes: 40 additions & 0 deletions mission/chapter03/components/navbar/styled/styled.jsx
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
}
27 changes: 27 additions & 0 deletions mission/chapter03/components/post/post.jsx
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>
)
}
41 changes: 41 additions & 0 deletions mission/chapter03/components/post/styled/styled.jsx
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
}
17 changes: 17 additions & 0 deletions mission/chapter03/components/sidebar/sidebar.jsx
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>
)
}
13 changes: 13 additions & 0 deletions mission/chapter03/components/sidebar/styled/styled.jsx
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
}
13 changes: 13 additions & 0 deletions mission/chapter03/index.html
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>
Loading