UMC-MJU · OrangeKim04 · Oct 26, 2024 · Oct 30, 2024 · Oct 30, 2024 · Oct 31, 2024
diff --git a/제이-김규리/5주차/mission/.env b/제이-김규리/5주차/mission/.env
@@ -0,0 +1,2 @@
+VITE_TMDB_TOKEN=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzYjEzNWM0ZTcxOGE0ZGZkNzY5ZDQyNmU4NzgyYzdkZSIsIm5iZiI6MTcyODQ2MDc5OS4xODg5NDIsInN1YiI6IjY3MDBlYWQ5YzlhMTBkNDZlYTdjZmVlNiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.R3Ahq2PqWhv0O3uaxzQZcsvWRjFVHXJom63Q1qlhufk
+VITE_MOVIE_API_URL=https://api.themoviedb.org/3
diff --git a/제이-김규리/5주차/mission/.gitignore b/제이-김규리/5주차/mission/.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?
diff --git a/제이-김규리/5주차/mission/README.md b/제이-김규리/5주차/mission/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
diff --git a/제이-김규리/5주차/mission/eslint.config.js b/제이-김규리/5주차/mission/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/제이-김규리/5주차/mission/index.html b/제이-김규리/5주차/mission/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>Movie</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/제이-김규리/5주차/mission/package.json b/제이-김규리/5주차/mission/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "practice1",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
+    "axios": "^1.7.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.26.2",
+    "styled-components": "^6.1.13",
+    "yup": "^1.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.11.1",
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^9.11.1",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "globals": "^15.9.0",
+    "vite": "^5.4.8"
+  }
+}
diff --git a/제이-김규리/5주차/mission/public/vite.svg b/제이-김규리/5주차/mission/public/vite.svg
diff --git a/제이-김규리/5주차/mission/src/App.css b/제이-김규리/5주차/mission/src/App.css
diff --git a/제이-김규리/5주차/mission/src/App.jsx b/제이-김규리/5주차/mission/src/App.jsx
@@ -0,0 +1,87 @@
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import HomePage from "./pages/home.jsx";
+import NotFound from "./pages/not-found.jsx";
+import LoginPage from "./pages/login.jsx";
+import SignUpPage from "./pages/sign-up.jsx";
+import Search from "./pages/search.jsx";
+import Movies from "./pages/movies-page/movies.jsx";
+import RootLayout from "./layout/root-layout.jsx";
+import styled, {createGlobalStyle} from "styled-components";
+import UpComingPage from "./pages/movies-page/movies-category/up-coming.jsx";
+import NowPlayingPage from "./pages/movies-page/movies-category/now-playing.jsx";
+import PopularPage from "./pages/movies-page/movies-category/popular.jsx";
+import TopRatedPage from "./pages/movies-page/movies-category/top-rated.jsx";
+import DetailPage from "./pages/movies-page/detail.jsx";
+
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <RootLayout/>,
+    errorElement: <NotFound/>,
+    // Outlet에 들어가는 요소들 ??
+    children: [
+      {
+        index: true,
+        element: <HomePage/>,
+      },
+      {
+        path: 'login',
+        element: <LoginPage/>
+      }, 
+      {
+        path: 'sign-up',
+        element: <SignUpPage/>
+      }, 
+      {
+        // 경로가 path면 element요소를 보여줌
+        path: 'search',
+        element: <Search/>
+      },
+      {
+        path: 'movies',
+        element: <Movies/>,
+      },
+      {
+        path: 'movies/up-coming',
+        element: <UpComingPage/>
+      },
+      {
+        path: 'movies/now-playing',
+        element: <NowPlayingPage/>
+      },
+      {
+        path: 'movies/popular',
+        element: <PopularPage/>
+      },
+      {
+        path: 'movies/top-rated',
+        element: <TopRatedPage/>
+      },
+      {
+        // :movieId는 동적으로 변경될 수 있는 경로 변수
+        path: 'movies/:movieId',
+        element: <DetailPage/>
+      },
+    ]
+  }
+])
+
+
+const GlobalStyle = createGlobalStyle`
+  body{
+    background-color: black;
+  }
+`;
+
+
+function App(){
+  return (
+    <>
+      <GlobalStyle/>
+      <RouterProvider router={router}/>
+    </>
+  );
+}
+
+export default App;
diff --git a/제이-김규리/5주차/mission/src/apis/axios-instance.js b/제이-김규리/5주차/mission/src/apis/axios-instance.js
@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+    headers: {
+        Authorization: `Bearer ${import.meta.env.VITE_TMDB_TOKEN}`,
+    }, 
+    baseURL: import.meta.env.VITE_MOVIE_API_URL,
+})
+
+export default axiosInstance;
diff --git a/제이-김규리/5주차/mission/src/assets/react.svg b/제이-김규리/5주차/mission/src/assets/react.svg
diff --git a/제이-김규리/5주차/mission/src/components/custom-Link.jsx b/제이-김규리/5주차/mission/src/components/custom-Link.jsx
@@ -0,0 +1,13 @@
+import {Link} from "react-router-dom";
+import styled from "styled-components";
+
+const StyledLink = styled(Link)`
+    color: white;
+    text-decoration: none;
+    font-size: 12px;
+    font-weight: ${props => props.fontWeight || 'normal'};
+`;
+
+export default StyledLink;
+
+
diff --git a/제이-김규리/5주차/mission/src/components/custom-NavbarButton.jsx b/제이-김규리/5주차/mission/src/components/custom-NavbarButton.jsx
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+const StyledNavbarButton = styled.button`
+    background-color: ${props => props.backgroundColor || 'black'};
+    border-radius: 8px;
+    height: 32px;
+    width: 70px;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    transition: opacity 0.2s ease;
+
+    &:hover{
+         opacity: 0.8;
+    }
+`;
+
+export default StyledNavbarButton;
diff --git a/제이-김규리/5주차/mission/src/components/custom-SidebarButton.jsx b/제이-김규리/5주차/mission/src/components/custom-SidebarButton.jsx
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+const StyledSidebarButton = styled.button`
+    background-color: ${props => props.backgroundColor || 'black'};
+    border-radius: 8px;
+    height: 32px;
+    width: 60px;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    margin-left: 5px;
+`;
+
+export default StyledSidebarButton;
diff --git a/제이-김규리/5주차/mission/src/components/custom-Txt.jsx b/제이-김규리/5주차/mission/src/components/custom-Txt.jsx
@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+const StyledTxt = styled.h1`
+    color: white;
+`;
+
+export default StyledTxt;
diff --git a/제이-김규리/5주차/mission/src/components/custom-movie/movie-card.jsx b/제이-김규리/5주차/mission/src/components/custom-movie/movie-card.jsx
@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import {Link} from "react-router-dom";
+
+const StyledCardLink = styled(Link)`
+  width: 126px;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: transform 0.2s ease;
+  margin: 20px 10px;
+  &:hover {
+    transform: scale(1.05); /* 마우스 호버 시 카드 확대 */
+  }
+`;
+
+const MovieDate = styled.div`
+  font-size: 12px;
+  color: white;
+  margin: 0 5px;
+`;
+
+const MovieImage = styled.img`
+  width: 100%;
+  height: 75%;
+`;
+
+const MovieTitle = styled.div`
+  font-size: 15px;
+  color: white;
+  font-weight: bold;
+  margin: 0 5px;
+  margin-top: 3px;
+`;
+
+// 구조분해 할당
+const MovieCard = ({movie}) => {
+  return(
+      <StyledCardLink to={`/movies/${movie.id}`}>
+          <MovieImage src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} 
+           alt={movie.title} />
+          <MovieTitle>{movie.title}</MovieTitle>
+          <MovieDate>{movie.release_date}</MovieDate>
+      </StyledCardLink>
+  );
+}
+
+
+export default MovieCard;
diff --git a/제이-김규리/5주차/mission/src/components/custom-movie/movie-container.jsx b/제이-김규리/5주차/mission/src/components/custom-movie/movie-container.jsx
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+const MovieContainer = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+`;
+
+export default MovieContainer;
diff --git a/제이-김규리/5주차/mission/src/components/navbar.jsx b/제이-김규리/5주차/mission/src/components/navbar.jsx
@@ -0,0 +1,36 @@
+import StyledLink from "./custom-Link";
+import StyledNavbarButton from "./custom-NavbarButton";
+import styled from "styled-components";
+import {Link} from "react-router-dom";
+
+const StyledNav = styled.nav`
+    display: grid;
+    grid-template-columns: auto 90px 90px;
+    height: 40px;
+    align-items: center;
+    margin-bottom: 15px;
+`;
+const StyledYongchaLink = styled(Link)`
+    width: 95px;
+    color: #e50914;
+    font-size: 1.2em;
+    text-decoration: none;
+    margin-left: 10px;
+    font-weight: 500;
+`;
+
+const Navbar = () => {
+    return(
+        <StyledNav>
+            <StyledYongchaLink to={'/'}>YONGCHA</StyledYongchaLink>
+            <StyledNavbarButton>
+                <StyledLink to={'/login'}>로그인</StyledLink>
+            </StyledNavbarButton>
+            <StyledNavbarButton backgroundColor={'#e7545b'}>
+                <StyledLink to={'/sign-up'}>회원가입</StyledLink>
+            </StyledNavbarButton>
+        </StyledNav>
+    );
+}
+
+export default Navbar;