Add View in MVC Pattern

@@ -3,20 +3,22 @@ import morgan from "morgan";
 import helmet from "helmet";
 import cookieParser from "cookie-parser";
 import bodyParser from "body-parser";
+import { localsMiddleware } from "./middlewares";
+import routes from "./routes";
 import userRouter from "./routers/userRouter";
 import videoRouter from "./routers/videoRouter";
 import globalRouter from "./routers/globalRouter";
-import routes from "./routes";
-const app = express();
 
+const app = express();
 
+app.use(helmet());
+app.set("view engine", "pug");
 app.use(cookieParser());
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true })); //json, html, text, urlencoded 할 거 없이 다 parser할 수 있도록 설정해줘야 한다.
-app.use(helmet());
 app.use(morgan("dev"));
 
-
+app.use(localsMiddleware);
 app.use(routes.home, globalRouter);
 app.use(routes.users, userRouter);
 app.use(routes.videos, videoRouter);

-export const join = (req, res) => res.send("join");
-export const login = (req, res) => res.send("login");
-export const logout = (req, res) => res.send("logout");
-export const users = (req, res) => res.send("users");
-export const userDetail = (req, res) => res.send("user Detail");
-export const editProfile = (req, res) => res.send("Edit Profile");
-export const changePassword = (req, res) => res.send("Change Password");
\ No newline at end of file
+export const join = (req, res) => res.render("join");
+export const login = (req, res) => res.render("login");
+export const logout = (req, res) => res.render("logout");
+export const users = (req, res) => res.render("users");
+export const userDetail = (req, res) => res.render("userDetail");
+export const editProfile = (req, res) => res.render("editProfile");
+export const changePassword = (req, res) => res.render("changePassword");
\ No newline at end of file

-export const home = (req, res) => res.send("home");
-export const search = (req, res) => res.send("search");
-export const videos = (req, res) => res.send("videos");
-export const upload = (req, res) => res.send("upload");
-export const videoDetail = (req, res) => res.send("videoDetail");
-export const editVideo = (req, res) => res.send("editVideo");
-export const deleteVideo = (req, res) => res.send("deleteVideo");
\ No newline at end of file
+export const home = (req, res) => res.render("home");
+export const search = (req, res) => res.render("search");
+export const videos = (req, res) => res.render("videos");
+export const upload = (req, res) => res.render("upload");
+export const videoDetail = (req, res) => res.render("videoDetail");
+export const editVideo = (req, res) => res.render("editVideo");
+export const deleteVideo = (req, res) => res.render("deleteVideo");
\ No newline at end of file

+import routes from "./routes";
+
+export const localsMiddleware = (req, res, next) => {
+    res.locals.siteName = 'my Youtube';
+    res.locals.routes = routes;
+    next();
+};
\ No newline at end of file

@@ -20,9 +20,10 @@
         "cookie-parser": "^1.4.5",
         "express": "^4.17.1",
         "helmet": "^3.22.0",
-        "morgan": "^1.10.0"
+        "morgan": "^1.10.0",
+        "pug": "^2.0.4"
     },
     "devDependencies": {
         "nodemon": "^2.0.4"
     }
-}
\ No newline at end of file
+}

@@ -4,7 +4,6 @@ import { users, userDetail, editProfile, changePassword } from "../controllers/u
 
 const userRouter = express.Router();
 
-
 userRouter.get(routes.users, users);
 userRouter.get(routes.userDetail, userDetail);
 userRouter.get(routes.editProfile, editProfile);

@@ -11,5 +11,4 @@ videoRouter.get(routes.videoDetail, videoDetail);
 videoRouter.get(routes.editVideo, editVideo);
 videoRouter.get(routes.deleteVideo, deleteVideo);
 
-
 export default videoRouter;
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is change Password
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is delete Video
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is edit Profile
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is edit Video
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is Pug
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is Join
\ No newline at end of file

+//공통되는 코드가 필요한 경우div
+
+doctype html
+html
+    head
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+        title | #{siteName}
+    body
+        include ../partials/header
+        main
+            block content
+        include ../partials/footer

+extends layouts/main
+
+block content
+    p Hello This is Login
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is Logout
\ No newline at end of file

+footer.footer
+    .footer_icon
+        i.fab.fa-youtube
+    span.footer__text #{siteName} #{new Date().getFullYear()} ©

+header.header
+    .header__column
+        a(href=routes.home)
+            i.fab.fa-youtube
+    .header__column
+        ul
+            li
+                a(href=routes.join) Join
+            li
+                a(href=routes.login) Log In

+extends layouts/main
+
+block content
+    p Hello This is Search
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is Upload
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is userDetail
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is Users
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is videoDetail
\ No newline at end of file

+extends layouts/main
+
+block content
+    p Hello This is videos
\ No newline at end of file