seeMain & review

server/db.js

@@ -0,0 +1,9 @@
+const mysql = require('mysql');
+var db = mysql.createPool({
+    host:'3.35.55.124',
+    user:'seeduser2',
+    password: 'sungshin21seed',
+    database: 'seed_db'
+});
+//db.connect();
+module.exports = db;

server/routes/index.js

@@ -0,0 +1,7 @@
+var express = require('express');
+var router = express.Router();
+
+router.get('/', function(req, res){
+    res.send({greeting:'Hello React x Node.js'});
+});
+module.exports = router;

src/Pages/See/MovieCard.css

@@ -12,9 +12,9 @@
     max-width: 150px;
     width: 100%;
     margin-right: 30px;
-    box-shadow: 0 13px 27px -5px rgba(244, 244, 247, 0.25), 
-                0 8px 16px -8px rgba(244, 244, 247, 0.25), 
-                0 -6px 16px -6px rgba(244, 244, 247, 0.25);
+    box-shadow: 0 13px 27px 5px rgba(256, 256, 256, 0.25), 
+                0 8px 16px 8px rgba(256, 256, 256, 0.25), 
+                0 6px 16px 6px rgba(256, 256, 256, 0.25);
 }
 
 .movie_card .movie_title{

src/Pages/See/MovieCard.js

@@ -4,6 +4,7 @@ import {Link} from "react-router-dom";
 import "./MovieCard.css";
 
 function MovieCard({ id, year, title, summary, poster }) {
+
     return (
       <div className="movie_card" id="movie_card_outside">
         <Link

src/Pages/See/MovieDetail.css

@@ -18,6 +18,29 @@
     padding: 10px;
 }
 
+.detail_img{
+    position: relative;
+    max-width: 150px;
+    width: 100%;
+    margin: 2%;
+}
+
+.movieTOWrite_but{
+    width: 10%;
+    height: 35px;
+    background-color: #ffbb00;
+    border-radius: 15px;
+    box-shadow: none;
+    margin:20px;
+    padding: 5px;
+}
+
+.reviewlist .line{
+    background-color:#ffbb00;
+    border-color: #ffbb00;
+    width:80%; height:1px;
+}
+
 .reviewlist_card{
     border:solid;
     border-width: 1px;

src/Pages/See/MovieDetail.js

@@ -34,9 +34,9 @@ class reviewListDetail extends React.Component{
         return (
             <div className MovieDetail_Container>
                 <div className="detail_container">
-                    {/*
+
                     <img className="detail_img" src={location.state.poster} alt={location.state.title} title={location.state.title}/>
-                    */}
+
                     <div className="detail_movie_data">
                         <h3 className="movie_title">{location.state.title}</h3>
                         <h5 className="movie_year">{location.state.year}</h5>

src/Pages/See/RList.css

@@ -19,7 +19,7 @@
     border: #ffbb00;
     margin-left: 10%;
 }
-tr{
+.reviewInfo tr{
     color:  white;
     height: 40px;
     font-size: large;

src/Pages/See/RList.js

@@ -1,140 +1,15 @@
 import React, { Component } from 'react';
 import './RList.css';
-import Navi from '../../Components/Navi';
-import ReviewList from './reviewList';
+import ReviewList from './ShortReviewList';
 //import { Link } from 'react-router-dom';
 
 class RList extends Component {
-    constructor(props){
-      super(props);
-      this.state={
-        reviewData : [
-          {
-            id: 1,
-            title: 'catch me if you can',
-            content:'1s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'yuna',
-            date: '2020/6/20'
-          },
-          {
-            id: 2,
-            title: 'parasite',
-            content:'2s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'yurim',
-            date: '2020/12/7'
-          },
-          {
-            id: 3,
-            title: 'avengers',
-            content:'3s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'jea0',
-            date: '2021/5/29'
-          },
-          {
-            id: 4,
-            title: 'catch me if you can',
-            content:'4s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'heejin',
-            date: '2020/6/20'
-          },
-          {
-            id: 5,
-            title: 'parasite',
-            content:'5s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'yurim',
-            date: '2020/12/7'
-          },
-          {
-            id: 6,
-            title: 'avengers',
-            content:'6s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'jea0',
-            date: '2021/5/29'
-          },
-          {
-            id: 7,
-            title: 'catch me if you can',
-            content:'7s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'yuna',
-            date: '2020/6/20'
-          },
-          {
-            id: 8,
-            title: 'parasite',
-            content:'8s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'heejin',
-            date: '2020/12/7'
-          },
-          {
-            id: 9,
-            title: 'avengers',
-            content:'9s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'jea0',
-            date: '2021/5/29'
-          },
-          {
-            id: 10,
-            title: 'catch me if you can',
-            content:'10s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'yuna',
-            date: '2020/6/20'
-          },
-          {
-            id: 11,
-            title: 'parasite',
-            content:'11s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'yurim',
-            date: '2020/12/7'
-          },
-          {
-            id: 12,
-            title: 'avengers',
-            content:'12s;lja;sdljfjwlne;nwajgwl;jgow;newlanj;n;fjlda;jslnvgla',
-            writer: 'heejin',
-            date: '2021/5/29'
-          }
-        ],
-        page:1,
-        limit:10
-      }
-    }
 
     render () {
-      const list = this.state.reviewData
-
-      /*
-      const total_cnt = 12;
-      const { limit } = this.state;
-      let page_arr = [];
-      for(let i =1; i<= Math.ceil(total_cnt / limit); i++) {
-        page_arr.push(i);
-      }
-      console.log(page_arr);
-      this.setState({ data : this.state.reviewData, all_page : page_arr})
-      */
+      const list = this.state.reviewData;
 
       return (
         <div>
-          {/*
-          <div className="RList">
-            <div className="reviewInfo">
-              <div>제목</div>
-              <div>조회수</div>
-              <div>작성자</div>
-              <div className="acenter">날짜</div>
-            </div>
-            {list ? list.map( (el, key) => {
-              return(
-                <div className="list_grid list_data" key={key}>
-                  <div>{el.title}</div>
-                  <div></div>
-                  <div className="acenter">{el.data.slice(0, 10)}</div>
-                </div>
-              )
-            })
-              : null}
-          </div>
-          */}
 
           <table className="reviewInfo">
             <tbody>

src/Pages/See/ReviewCard.js

@@ -6,7 +6,7 @@ import {FaHeart} from "react-icons/fa";
 import {FaEye} from "react-icons/fa";
 import {BsFillPersonFill} from "react-icons/bs";
 
-function ReviewList({ id, writer, title, likeC, viewC, content }) {
+function ReviewCard({ id, writer, title, likeC, viewC, content }) {
     return (
       <div className="review_card" id="review_card_outside">
         <Link
@@ -32,7 +32,7 @@ function ReviewList({ id, writer, title, likeC, viewC, content }) {
     );
   }
 
-  ReviewList.propTypes = {
+  ReviewCard.propTypes = {
     id: PropTypes.number.isRequired,
     writer: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
@@ -41,4 +41,4 @@ function ReviewList({ id, writer, title, likeC, viewC, content }) {
     content: PropTypes.string.isRequired
   };
 
-export default ReviewList;
+export default ReviewCard;

src/Pages/See/ReviewSCard.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import {Link} from "react-router-dom";
+import "./ReviewCard.css";
+import {FaHeart} from "react-icons/fa";
+import {FaEye} from "react-icons/fa";
+import {BsFillPersonFill} from "react-icons/bs";
+
+function ReviewSCard({ id, writer, likeC, viewC, content }) {
+    return (
+      <div className="review_card" id="review_card_outside">
+          <div className="review__data">
+            <h3 className="review__title">{content}</h3>
+            <p className="review__writer"><BsFillPersonFill/>  {writer}</p>
+            <p className="review_likeC"><FaHeart/>  {likeC}</p>
+            {/* <p className="review_viewC"><FaEye/>  {viewC}</p> */}
+          </div>
+      </div>
+    );
+  }
+
+  ReviewSCard.propTypes = {
+    id: PropTypes.number.isRequired,
+    writer: PropTypes.string.isRequired,
+    likeC: PropTypes.number.isRequired,
+    viewC: PropTypes.number.isRequired,
+    content: PropTypes.string.isRequired
+  };
+
+export default ReviewSCard;

src/Pages/See/ReviewSListCard.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import './ReviewListCard.css'
+import PropTypes from "prop-types";
+
+function ReviewSListCard({ id, writer, title, likeC, viewC, content, pubDate, movieCode }) {
+    return (
+      <table className="reviewlist_card" id="reviewlist_card_outside">
+          <td className="mdNo">{id}</td>
+          <td className="mdTitle">{title}</td>
+          <td className="mdWriter"> {writer}</td>
+          <td className="mdLike">{likeC}</td>
+          {/* <td className="reviewlist_viewC"> {viewC}</td> */}
+      </table>
+    );
+  }
+
+  ReviewSListCard.propTypes = {
+    id: PropTypes.number.isRequired,
+    writer: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    likeC: PropTypes.number.isRequired,
+    viewC: PropTypes.number.isRequired,
+    content: PropTypes.string.isRequired,
+    pubDate: PropTypes.number.isRequired,
+    movieCode: PropTypes.number.isRequired
+  };
+
+export default ReviewSListCard;