Feature/16/movie

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-responsive": "^9.0.2",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.6",

src/App.js

@@ -8,6 +8,8 @@ import Popular from './pages/Popular';
 import Romance from './pages/Romance';
 import Science from './pages/Science';
 import Search from './pages/Search';
+import Signin from './pages/Signin';
+import Signup from './pages/Signup';
 
 const DUMMY_MOVIES = [
   {
@@ -67,6 +69,8 @@ const App = () => (
           <Route path="/animation" element={<Animation movies={DUMMY_MOVIES} />} />
           <Route path="/romance" element={<Romance movies={DUMMY_MOVIES} />} />
           <Route path="/science" element={<Science movies={DUMMY_MOVIES} />} />
+          <Route path="/SignIn" element={<Signin />} />
+          <Route path="/SignUp" element={<Signup />} />
           <Route path="/search/:title" element={<Search movies={DUMMY_MOVIES} />} />
         </Routes>
       </BrowserRouter>

src/components/Header/Header.css

@@ -6,10 +6,9 @@ a{
   font-size:15px
 }
 
-div {
+.header-option{
   box-sizing: content-box;
   width: 100%;
-  color: #1b2035;
   right: 30px;
   padding-top: 30px;
   cursor: pointer;
@@ -26,7 +25,7 @@ option{
 
 
 option:hover{
-  color:#9c5eb8;
+  color:#c9418c;
 }
 
 nav {
@@ -39,9 +38,11 @@ nav {
 #nav3 {
   width: 100%;
   text-align: center;
-
+  margin-bottom: 60px;
+
 }
-#nav3>h1 {
+
+.homebtn {
   line-height: 80px;
   display: block;
   font-size: 30px;
@@ -50,9 +51,11 @@ nav {
   left: 30px;
   background: linear-gradient(to right top, #2c9fbc,#c9418c);
   color: transparent;
-  -webkit-background-clip: text;
+  background-clip: text;
 }
 
+
+
 #nav3>ul {
   display: inline-block;
 }
@@ -66,8 +69,10 @@ nav {
   list-style: none;
 }
 
-li:hover{
+.header-ul li:hover{
   color:#c9418c;
+  transform:translateY(-5px);
+  transition: 0.8s;
 
 }
 

src/components/Header/Header.js

@@ -4,35 +4,37 @@ import { Link } from 'react-router-dom';
 
 const Header = () => (
   <header>
-    <div>
-      <option>
-        <Link to="Sign In">Sign In</Link>
-      </option>
-      <option>
-        <Link to="Sign Up">Sign Up</Link>
-      </option>
-      <option>
-        <Link to="Log Out">Log Out</Link>
-      </option>
+    <div className="header-option">
+      <Link to="/SignIn">
+        <option>Sign In</option>
+      </Link>
+      <Link to="/SignUp">
+        <option>Sign Up</option>
+      </Link>
+      <Link to="/">
+        <option>Log Out</option>
+      </Link>
     </div>
     <nav id="nav3">
-      <h1>OSS-Project</h1>
-      <ul>
-        <li>
-          <Link to="/popular">Popular</Link>{' '}
-        </li>
-        <li>
-          <Link to="/animation">Animation</Link>
-        </li>
-        <li>
-          <Link to="/romance">Romance</Link>
-        </li>
-        <li>
-          <Link to="/science">Science Fiction</Link>
-        </li>
-        <li>
-          <Link to="/action">Action</Link>
-        </li>
+      <Link to="/">
+        <h1 className="homebtn">OSS-Project</h1>
+      </Link>
+      <ul className="header-ul">
+        <Link to="/popular">
+          <li>Popular</li>
+        </Link>
+        <Link to="/animation">
+          <li>Animation</li>
+        </Link>
+        <Link to="/romance">
+          <li>Romance</li>
+        </Link>
+        <Link to="/science">
+          <li>Science Fiction</li>
+        </Link>
+        <Link to="/action">
+          <li>Action</li>
+        </Link>
       </ul>
       <form>
         <input type="text" />

src/components/Movies/MovieInfo.js

@@ -1,9 +1,20 @@
+import './movieinfo.css';
+
+// import styled from 'styled-components';
+
 const MovieInfo = (props) => (
-  <li>
-    <h2>{props.title}</h2>
-    <div>{props.genre}</div>
-    <div>{props.rank}</div>
-  </li>
+  <div className="movie-info">
+    <li className="movie-container">
+      <div className="movie-poster">
+        <img alt="movieIMG" src={props.img} />
+      </div>
+      <div className="movie-box">
+        <h1 className="movie-title">{props.title}</h1>
+        <div className="movie-genre">{props.genre}</div>
+        <div className="movie-rank">{props.rank}</div>
+      </div>
+    </li>
+  </div>
 );
 
 export default MovieInfo;

src/components/Movies/MovieList.js

@@ -1,9 +1,11 @@
+import './movielist.css';
+
 import MovieInfo from './MovieInfo';
 
 const MovieList = (props) => (
-  <ul>
+  <ul className="movie-list">
     {props.movies.map((movie) => (
-      <MovieInfo key={movie.id} title={movie.title} genre={movie.genre} rank={movie.rank} />
+      <MovieInfo key={movie.id} img={movie.img} title={movie.title} genre={movie.genre} rank={movie.rank} />
     ))}
   </ul>
 );

src/components/Movies/movieinfo.css

@@ -0,0 +1,35 @@
+.movie-info{
+    margin-top: 50px;
+    display:flex;
+    justify-content:center; 
+}
+
+
+.movie-poster img {
+    position:relative;
+    padding-top:5%;
+    width: 80%;
+    height: 100%;
+
+}
+
+
+
+.movie-container  { 
+    margin-bottom: 8rem; 
+    display: flex; 
+    flex-basis: 30%; 
+    width: 320px;
+    height: 400px;
+    background: #fff; 
+    box-shadow: 4px 4px 14px 0px #cacaca; 
+} 
+
+.movie-title {
+    font-weight: 900;
+    background: linear-gradient(to right top, #2c9fbc,#c9418c);
+    color: transparent;
+    background-clip: text;
+}
+
+

src/components/Movies/movielist.css

@@ -0,0 +1,4 @@
+.movie-list{
+    display: grid;
+
+}