mission: 3주차 미션 수행

.gitignore

@@ -1,2 +1,4 @@
 /web-dev-practice
-/node_modules
+/node_modules
+
+.env

mission/chapter03/.eslintrc.cjs

@@ -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 },
+    ],
+  },
+}

mission/chapter03/.gitignore

@@ -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?

mission/chapter03/README.md

@@ -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

mission/chapter03/components/button/button.jsx

@@ -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;
+    }
+`

mission/chapter03/components/feed/feed.jsx

@@ -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>
+    )
+}

mission/chapter03/components/feed/styled/styled.jsx

@@ -0,0 +1,11 @@
+import styled from "styled-components"
+
+const MainContainer = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    gap:8px;
+`
+
+export {
+    MainContainer
+}

mission/chapter03/components/navbar/navbar.jsx

@@ -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>
+    )
+}

mission/chapter03/components/navbar/styled/styled.jsx

@@ -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
+}

mission/chapter03/components/post/post.jsx

@@ -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>
+    )
+}

mission/chapter03/components/post/styled/styled.jsx

@@ -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
+}

mission/chapter03/components/sidebar/sidebar.jsx

@@ -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>
+    )
+}

mission/chapter03/components/sidebar/styled/styled.jsx

@@ -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
+}

mission/chapter03/index.html

@@ -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>