[Add and Modified] CSS and Database

-$bgColor: red;
+$red: #ea232c;
+$dark-red: #bb2f2a;
+$grey: #f5f5f5;
+$black: #444444;
+$dark-grey: #e7e7e7;

+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+a {
+  all: unset;
+  cursor: pointer;
+}
+
+*,
+input {
+  box-sizing: border-box;
+}
+
+input {
+  border: none;
+  box-sizing: border-box;
+  &:focus,
+  &:active {
+    outline: none;
+  }
+}

+html,
+body {
+  height: 100%;
+}
+body {
+  background-color: #f5f5f5;
+  color: $black;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 14px;
+}
+
+main {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  min-height: 70vh;
+}
+
+button,
+input:not([type="file"]),
+textarea,
+.fileUpload {
+  padding: 7px 10px;
+  width: 100%;
+  border: none;
+  border-radius: 5px;
+  font-size: 14px;
+  color: $black;
+  font-weight: 600;
+  background-color: white;
+  max-width: 320px;
+  resize: none;
+  &::placeholder {
+    font-weight: 300;
+    color: rgba(0, 0, 0, 0.7);
+  }
+}
+
+button {
+  border: none;
+  background-color: #3498db;
+  color: white;
+}
+
+button.delete {
+  background-color: $dark-red;
+}
+
+button,
+input[type="submit"] {
+  cursor: pointer;
+}

+.home-videos {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(150px, 1fr));
+  grid-gap: 30px;
+  .videoBlock:first-child,
+  .videoBlock:nth-child(2) {
+    grid-column: span 3;
+  }
+  .videoBlock:nth-child(3),
+  .videoBlock:nth-child(4),
+  .videoBlock:nth-child(5) {
+    grid-column: span 2;
+  }
+}

+.video-detail__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .video__info {
+    width: 100%;
+    max-width: 850px;
+    margin-top: 25px;
+    button {
+      width: 100px;
+      margin-bottom: 25px;
+    }
+    .video__title,
+    .video__views,
+    .video__description {
+      display: block;
+      margin-bottom: 15px;
+    }
+    .video__title {
+      font-size: 22px;
+      font-weight: 300;
+    }
+    .video__views {
+      font-size: 14px;
+    }
+    .video__description {
+      font-size: 16px;
+    }
+  }
+  .video__comments {
+    margin-top: 25px;
+    .video__comment-number {
+      font-size: 18px;
+    }
+  }
+}

+.footer {
+  margin: 50px 0;
+  padding-top: 50px;
+  border-top: 3px solid rgba(0, 0, 0, 0.1);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .footer__icon {
+    color: rgba(0, 0, 0, 0.2);
+    font-size: 40px;
+    margin-bottom: 20px;
+  }
+  .footer__text {
+    color: rgba(0, 0, 0, 0.2);
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+}

+.form-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  form {
+    width: 100%;
+    max-width: 320px;
+    margin-bottom: 50px;
+    input:not([type="file"]),
+    .fileUpload {
+      display: block;
+      width: 100%;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      &:not(:last-child) {
+        margin-bottom: 25px;
+      }
+    }
+    textarea {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      margin-bottom: 25px;
+    }
+    input[type="submit"] {
+      background-color: #3498db;
+      color: white;
+    }
+  }
+  a {
+    max-width: 320px;
+    width: 100%;
+  }
+  .fileUpload {
+    label {
+      font-weight: 300;
+      margin-right: 10px;
+    }
+  }
+}

+.header {
+  background-color: $red;
+  margin-bottom: 50px;
+  .header__wrapper {
+    padding: 5px 0px;
+    width: 100%;
+    margin: 0 auto;
+    max-width: 1200px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: center;
+    .header__column {
+      i {
+        color: white;
+        font-size: 30px;
+      }
+      &:nth-child(2) {
+        width: 100%;
+        justify-self: center;
+      }
+      &:last-child {
+        justify-self: end;
+      }
+      ul {
+        display: flex;
+        color: white;
+        font-weight: 600;
+        text-transform: uppercase;
+        a {
+          color: inherit;
+          text-decoration: none;
+        }
+        li:not(:last-child) {
+          margin-right: 15px;
+        }
+      }
+      form {
+        width: 100%;
+        input {
+          padding: 7px 10px;
+          width: 100%;
+          border-radius: 5px;
+          font-size: 14px;
+          color: $black;
+          font-weight: 600;
+          max-width: none;
+          &::placeholder {
+            font-weight: 300;
+            color: rgba(0, 0, 0, 0.7);
+          }
+        }
+      }
+    }
+  }
+}

+.social-login {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  button {
+    width: 100%;
+    max-width: 320px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &:not(:last-child) {
+      margin-bottom: 15px;
+    }
+    span {
+      margin-right: 10px;
+      font-size: 20px;
+    }
+  }
+  .social-login--github {
+    background-color: $black;
+    color: white;
+  }
+  .social-login--facebook {
+    background-color: #3a5998;
+    color: white;
+  }
+}

+.videoBlock {
+  video {
+    margin-bottom: 10px;
+    max-width: 100%;
+  }
+  .videoBlock__title {
+    font-size: 18px;
+    font-weight: 300;
+    margin-bottom: 10px;
+  }
+}

-@import "config/variables";
-body {
-  background-color: $bgColor;
-}
+@import "config/_variables.scss";
+@import "config/reset.scss";
+@import "main.scss";
+
+@import "partials/header.scss";
+@import "partials/footer.scss";
+@import "partials/form.scss";
+@import "partials/socialLogin.scss";
+@import "partials/videoBlock.scss";
+
+@import "pages/home.scss";
+@import "pages/videoDetail.scss";

@@ -24,15 +24,14 @@ export const postLogin = (req, res) => {
   res.redirect(routes.home);
 };
 
-//로그아웃을 클릭하면 LogOut페이지로 가는 것 대신에, 로그아웃을 처리한 후
+// 로그아웃을 클릭하면 LogOut페이지로 가는 것 대신에, 로그아웃을 처리한 후
 // home 페이지로 Redirect로 표현할 것이다.
-//즉, 초반에 만들어둔 logout.pug는 삭제해도 좋다.
+// 즉, 초반에 만들어둔 logout.pug는 삭제해도 좋다.
 export const logout = (req, res) => {
-    //res.render("logout", { pageTitle: "Logout" });
+  // res.render("logout", { pageTitle: "Logout" });
   res.redirect(routes.home);
 };
 
-
 export const users = (req, res) => res.render("users", { pageTitle: "Users" });
 export const userDetail = (req, res) =>
   res.render("userDetail", { pageTitle: "User Detail" });

@@ -86,7 +86,7 @@ export const postEditVideo = async (req, res) => {
   try {
     // id를 찾아서 body를 얻어와야 한다. 비디오 수정에서 제목과 설명을 가져와야 하기 때문이다.
     // mongoose엔 우리의 id가 없어서 _id : id로 찾아줘야 한다.
-    await Video.findOneAndUpdate({ _id: id }, { title, description }); //title:title == title
+    await Video.findOneAndUpdate({ _id: id }, { title, description }); // title:title == title
     // 이렇게 하면 default로 얻어온 제목 및 내용을 수정하여 form을 전송하면 해당 내용으로 업데이트 된다.
     res.redirect(routes.videoDetail(id));
   } catch (error) {

+import dotenv from "dotenv";
 import app from "./app"; // app.js에서 export default app했기 때문에 불러올 수 있다.
 import "./db";
-import dotenv from "dotenv";
-dotenv.config();
 import "./models/Video";
 import "./models/Comment";
 
+dotenv.config();
+
 const PORT = process.env.PORT || 80;
 
 const handleListening = () => {
   console.log(`✅  Listening on: http://localhost:${PORT}`);
-    //call-back함수.
-    //PORT를 listen하기 시작할 때 함수를 호출해준다.
+  // call-back함수.
+  // PORT를 listen하기 시작할 때 함수를 호출해준다.
 };
 
 app.listen(PORT, handleListening);

@@ -7,11 +7,11 @@ export const localsMiddleware = (req, res, next) => {
   res.locals.siteName = "my Youtube";
   res.locals.routes = routes;
   res.locals.user = {
-        isAuthenticated: true,
+    isAuthenticated: false,
     id: 1,
   };
   next();
 };
 
 export const uploadVideo = multerVideo.single("videoFile");
-//single에 들어간 videoFile은 upload.pug의 file 부분 input name
\ No newline at end of file
+// single에 들어간 videoFile은 upload.pug의 file 부분 input name

 import mongoose from "mongoose";
-//video 댓글에 대한 Database
+// video 댓글에 대한 Database
 
 const CommentSchema = new mongoose.Schema({
   text: {
     type: String,
-        required: "Text is required"
-    }, //이러한 형태를 configuration object라 한다.
+    required: "Text is required",
+  }, // 이러한 형태를 configuration object라 한다.
   createdAt: {
     type: Date,
-        default: Date.now
-    }
+    default: Date.now,
+  },
   /*
-    ,
+    
     video: { //video와 comment를 연결하는 방법 #2
         type: mongoose.Schema.Types.ObjectId, //그 다음 어느 model에서 온 id인지 알려줘야 한다.
         ref: "Video"
-    }*/
+    }
+    */
 });
 
 const model = mongoose.model("Comment", CommentSchema);

-//DB 모델을 작성한다.
-//Video 자체를 DB에 저장하진 않을 것이다. 즉, byte를 저장하는 것이 아니라 video의 link를 저장한다.
+// DB 모델을 작성한다.
+// Video 자체를 DB에 저장하진 않을 것이다. 즉, byte를 저장하는 것이 아니라 video의 link를 저장한다.
 import mongoose from "mongoose";
 
 const VideoSchema = new mongoose.Schema({
   fileUrl: {
     type: String,
-        required: "File URL is required" //url이 없으면 오류메시지 출력
+    required: "File URL is required", // url이 없으면 오류메시지 출력
   },
   title: {
     type: String,
-        required: "Title is required"
+    required: "Title is required",
   },
   description: String,
   views: {
     type: Number,
-        default: 0 //비디오를 처음 생성하면 views를 0으로..
+    default: 0, // 비디오를 처음 생성하면 views를 0으로..
   },
   createdAt: {
     type: Date,
-        default: Date.now //현재 날짜를 반환하는 function
+    default: Date.now, // 현재 날짜를 반환하는 function
   },
-    //video와 comment를 연결하는 방법 #1
-    comments: [{
-        type: mongoose.Schema.Types.ObjectId, //그 다음 어느 model에서 온 id인지 알려줘야 한다.
-        ref: "Comment"
-    }]
+  // video와 comment를 연결하는 방법 #1
+  comments: [
+    {
+      type: mongoose.Schema.Types.ObjectId, // 그 다음 어느 model에서 온 id인지 알려줘야 한다.
+      ref: "Comment",
+    },
+  ],
 });
 // 이제 이 스키마를 이용하여 model을 만들어준다.
-//모델의 이름은 "Video"
+// 모델의 이름은 "Video"
 const model = mongoose.model("Video", VideoSchema);
 export default model;
-//모델이 만들어짐을 알리기 위해 init.js에 import해준다.
\ No newline at end of file
+// 모델이 만들어짐을 알리기 위해 init.js에 import해준다.

@@ -4,7 +4,7 @@
   "description": "make Youtube Website",
   "main": "app.js",
   "scripts": {
-    "dev:server": "nodemon --exec babel-node init.js --delay 2",
+    "dev:server": "nodemon --exec babel-node init.js --delay 2 --ignore 'scss'",
     "dev:assets": "WEBPACK_ENV=development webpack -w",
     "build:assets": "WEBPACK_ENV=production webpack"
   },

@@ -9,10 +9,10 @@ import {
   deleteVideo,
 } from "../controllers/videoController";
 import { uploadVideo } from "../middlewares";
-//export const videoRouter = express.Router();  이렇게하면 이 변수만 export하게 된다.
+// export const videoRouter = express.Router();  이렇게하면 이 변수만 export하게 된다.
 const videoRouter = express.Router();
 
-//Upload
+// Upload
 videoRouter.get(routes.upload, getUpload);
 videoRouter.post(routes.upload, uploadVideo, postUpload);
 

@@ -3,9 +3,11 @@ extends layouts/main
 block content
     .form-container
         form(action=routes.editProfile, method="post")
+            .fileUpload
                 label(for="avatar") Avatar
                 input(type="file", id="avatar", name="avatar")
             input(type="text", placeholder="Name", name="name")
             input(type="email", placeholder="Email", name="email")
             input(type="submit", value="Update Profile")
-        a.form-container__link(href=`/users${routes.changePassword}`) Change Password
\ No newline at end of file
+        a.form-container__link(href=`/users${routes.changePassword}`)
+            button Change Password
\ No newline at end of file

@@ -6,4 +6,5 @@ block content
             input(type="text", placeholder="Title", name="title", value=video.title)
             textarea(name="description", placeholder="Description")=video.description
             input(type="submit", value="Update Video")
-        a.form-container__link.form-container__link--delete(href=routes.deleteVideo(video.id)) Delete Video 
\ No newline at end of file
+        a.form-container__link(href=routes.deleteVideo(video.id))
+            button.delete Delete Video 
\ No newline at end of file

@@ -2,7 +2,7 @@ extends layouts/main
 include mixins/videoBlock
 
 block content
-    .videos
+    .home-videos
         each item in videos
             +videoBlock({
                 id: item.id,
@@ -10,3 +10,69 @@ block content
                 views: item.views,
                 videoFile:item.fileUrl
             })
+            +videoBlock({
+                id:item.id,
+                title:item.title,
+                views:item.views,
+                videoFile:item.fileUrl
+            })
+            +videoBlock({
+                id:item.id,
+                title:item.title,
+                views:item.views,
+                videoFile:item.fileUrl
+            })
+            +videoBlock({
+                id:item.id,
+                title:item.title,
+                views:item.views,
+                videoFile:item.fileUrl
+            })
+            +videoBlock({
+                id:item.id,
+                title:item.title,
+                views:item.views,
+                videoFile:item.fileUrl
+            })
+            +videoBlock({
+                id:item.id,
+                title:item.title,
+                views:item.views,
+                videoFile:item.fileUrl
+            })
+            +videoBlock({
+                id:item.id,
+                title:item.title,
+                views:item.views,
+                videoFile:item.fileUrl
+            })
+            +videoBlock({
+                id:item.id,
+                title:item.title,
+                views:item.views,
+                videoFile:item.fileUrl
+            })
+            +videoBlock({
+                id:item.id,
+                title:item.title,
+                views:item.views,
+                videoFile:item.fileUrl
+            })
+            +videoBlock({
+                id:item.id,
+                title:item.title,
+                views:item.views,
+                videoFile:item.fileUrl
+            })
+            +videoBlock({
+                id:item.id,
+                title:item.title,
+                views:item.views,
+                videoFile:item.fileUrl
+            })
+            +videoBlock({
+                id:item.id,
+                title:item.title,
+                views:item.views,
+                videoFile:item.fileUrl
+            })

@@ -3,5 +3,8 @@ mixin videoBlock(video = {})
         a(href=routes.videoDetail(video.id))
             video.videoBlock__thumbnail(src=video.videoFile, controls=true)
             h4.videoBlock__title=video.title
-            h6.videoBlock__views=video.views
+            if video.views === 1
+                h6.videoBlock__views 1 view
+            else
+                h6.videoBlock__views #{video.views} views
         
\ No newline at end of file

 header.header
+    .header__wrapper
         .header__column
             a(href=routes.home)
                 i.fab.fa-youtube

@@ -11,7 +11,6 @@ block content
             +videoBlock({
                 title : item.title,
                 views: item.views,
-                videoFile:item.videoFile
                 videoFile:item.videoFile,
                 id: item.id
             })
\ No newline at end of file

@@ -3,6 +3,7 @@ extends layouts/main
 block content
     .form-container
         form(action=`/videos${routes.upload}`, method="post", enctype="multipart/form-data")
+            div.fileUpload
                 label(for="file") Video File
                 input(type="file", id="file", name="videoFile", required=true, accept = "video/*")
             input(type="text", placeholder="Title", name="title", required=true)

@@ -4,10 +4,15 @@ block content
     .video__player
         video(src=`/${video.fileUrl}`)
     .video__info
-        a(href=routes.editVideo(video.id)) Edit video
+        a(href=routes.editVideo(video.id))
+            button Edit video
         h5.video__title=video.title
         span.video__views=video.views
         p.video__description=video.description
+        if video.views === 1
+                span.video__views 1 view
+        else 
+            span.video__views #{video.views} views
     .video__comment
         if video.comments.length === 1
             span.video__comment-number 1 comment