Merge branch 'develop' into enhancement/#4/setting

RECODE01 · Jun 26, 2022 · 611e946 · 611e946
2 parents 485899d + 109495e
commit 611e946
Show file tree

Hide file tree

Showing 17 changed files with 10,331 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
diff --git a/index.html b/index.html
@@ -1,12 +1,10 @@
-<html>
+<html lang="ko">
   <head>
+    <meta charset="UTF-8" />
     <title>뚜두투두</title>
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
-    <main class="App">
-      <form class="SearchInput"></form>
-    </main>
-    <script src="./src/index.js" type="module"></script>
+    <main class="App"></main>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "notodo-client",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server",
+    "test": "webpack --mode=development && node server.js",
+    "build": "webpack --mode=production"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Dalaranl/Notodo-Client.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Dalaranl/Notodo-Client/issues"
+  },
+  "homepage": "https://github.com/Dalaranl/Notodo-Client#readme",
+  "devDependencies": {
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.1",
+    "handlebars": "^4.7.7",
+    "handlebars-loader": "^1.7.2",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.2"
+  },
+  "dependencies": {
+    "connect-history-api-fallback": "^1.6.0",
+    "express": "^4.18.1"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,28 @@
+const express = require("express");
+const path = require("path");
+const history = require("connect-history-api-fallback");
+
+const app = express();
+
+app.listen(3000, () => {
+  console.log("Server running");
+  console.log("test");
+});
+
+app.use(express.static(__dirname + "/dist"));
+// app.use(
+//   history({
+//     index: __dirname + "http://localhost:3000/index.html",
+//   })
+// );
+
+app.get("/*", (req, res) => {
+  if (res.url === "http://localhost:3000/main")
+    res.sendFile(__dirname + "http://localhost:3000/index.html");
+  else res.sendFile(__dirname + "http://localhost:3000/index.html");
+});
+
+// app.use(express.static(__dirname));
+// app.get("*", function (req, res) {
+//   res.sendFile(path.resolve(__dirname, "/dist/index.html"));
+// });
diff --git a/src/component/unit/mypage/mypage.style.css b/src/component/unit/mypage/mypage.style.css
@@ -0,0 +1,10 @@
+.test {
+  width: 100vw;
+  height: 100vh;
+  background-color: aqua;
+}
+
+.test > p {
+  color: brown;
+  font-size: 50px;
+}
diff --git a/src/hooks/useRouter.js b/src/hooks/useRouter.js
@@ -0,0 +1,36 @@
+import { routes } from "../index.js";
+
+const root = document.querySelector(".App");
+
+export const useRouter = () => {
+  function render() {
+    const pageMatches = routes.map((route) => {
+      return {
+        route,
+        result: location.pathname.match(createRegExpPath(route.path)),
+      };
+    });
+    console.log(pageMatches);
+    let match = pageMatches.find((pageMatch) => pageMatch.result);
+
+    if (match) {
+      root.innerHTML = "";
+      match.route.view();
+    } else {
+      root.innerHTML = `<h1>404</h1>`;
+    }
+  }
+
+  const createRegExpPath = (path) => {
+    return new RegExp(
+      "^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$"
+    );
+  };
+
+  const push = (url, data) => {
+    history.pushState(data ? { data } : null, null, url);
+    render();
+  };
+
+  return { push, render };
+};
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,63 @@
-import ChallengeList from "./pages/challenge/list/index.js";
+import { useRouter } from "./hooks/useRouter.js";
+import CommunityListPage from "./pages/community/index.js";
+import ChallengeListPage from "./pages/challenge/list/index.js";
+import MainPage from "./pages/main/index.js";
+import MyPage from "./pages/mypage/index.js";
+import ChallengeDetailPage from "./pages/challenge/challengeId/index.js";
 
-export default function Test() {
-  const target = document.querySelector(".App");
+const root = document.querySelector(".App");
+const BASE_URL = "http://localhost:3000/";
 
-  ChallengeList(target);
-}
-Test();
+export const routes = [
+  {
+    path: "/main",
+    view: () => {
+      MainPage({ root });
+    },
+  },
+  {
+    path: "/challenge/list",
+    view: () => {
+      ChallengeListPage({ root });
+    },
+  },
+  {
+    path: "/challenge/:id",
+    view: () => {
+      ChallengeDetailPage({ root });
+    },
+  },
+  {
+    path: "/challenge/:id/room",
+    view: () => {
+      // CourseDetail({ root });
+    },
+  },
+  {
+    path: "/community",
+    view: () => {
+      CommunityListPage({ root });
+    },
+  },
+  {
+    path: "/mypage",
+    view: () => {
+      MyPage({ root });
+    },
+  },
+];
+
+(() => {
+  const router = useRouter();
+
+  window.onload = () => {
+    const path = location.pathname;
+    console.log(path);
+    window.addEventListener("popstate", () => {
+      router.render();
+    });
+
+    if (path === "/") router.push("/main");
+    else router.push(path);
+  };
+})();
diff --git a/src/pages/challenge/[challengeId]/index.js b/src/pages/challenge/[challengeId]/index.js
diff --git a/src/pages/challenge/challengeId/index.js b/src/pages/challenge/challengeId/index.js
@@ -0,0 +1,3 @@
+export default function ChallengeDetailPage() {
+  console.log("DetailPage");
+}
diff --git a/...ges/challenge/[challengeId]/room/index.js → ...pages/challenge/challengeId/room/index.js b/...ges/challenge/[challengeId]/room/index.js → ...pages/challenge/challengeId/room/index.js
diff --git a/src/pages/challenge/list/index.js b/src/pages/challenge/list/index.js
@@ -1,5 +1,5 @@
 import { getData } from "../../../../src/component/challenge/api/getChallengeData.js";
-export default function ChallengeList($target) {
+export default function ChallengeListPage({ root }) {
   const element = document.createElement("div");
   $target?.appendChild(element);
   let state = [];
@@ -33,4 +33,11 @@ export default function ChallengeList($target) {
     
   `;
   };
+  const init = () => {
+    const el = document.createElement("div");
+    el.innerHTML = `<p>첼린지 리스트 페이지다잇</p>`;
+    root.appendChild(el);
+  };
+
+  init();
 }
diff --git a/src/pages/community/index.js b/src/pages/community/index.js
@@ -0,0 +1,9 @@
+export default function CommunityListPage({ root }) {
+  const init = () => {
+    const el = document.createElement("div");
+    el.innerHTML = `<p>커뮤니티 리스트 페이지다잇</p>`;
+    root.appendChild(el);
+  };
+
+  init();
+}
diff --git a/src/pages/main/index.js b/src/pages/main/index.js
@@ -1 +1,15 @@
-export default function MainPage() {}
+import { useRouter } from "../../hooks/useRouter";
+
+export default function MainPage({ root }) {
+  const router = useRouter();
+  const init = () => {
+    const el = document.createElement("div");
+    el.innerHTML = `<p id="test">메인페이지다잇</p>`;
+    root.appendChild(el);
+    document.querySelector("#test").addEventListener("click", () => {
+      router.push("/challenge/5");
+    });
+  };
+
+  init();
+}
diff --git a/src/pages/mypage/index.js b/src/pages/mypage/index.js
@@ -1 +1,11 @@
-export default function MyPage() {}
+import "../../component/unit/mypage/mypage.style.css";
+
+export default function MyPage({ root }) {
+  const init = () => {
+    const el = document.createElement("div");
+    el.innerHTML = `<div class="test"><p>마이페이지 페이지다잇</p></div>`;
+    root.appendChild(el);
+  };
+
+  init();
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,72 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const path = require("path");
+
+const { resolve } = require("path");
+const { ok } = require("assert");
+
+module.exports = {
+  mode: "development",
+  entry: {
+    index: "./src/index.js",
+  },
+
+  output: {
+    path: resolve(__dirname, "/dist/"),
+    filename: "[name].js",
+  },
+
+  devServer: {
+    client: {
+      overlay: true,
+    },
+    static: {
+      directory: "./dist",
+      publicPath: "/static",
+    },
+    port: 3000,
+    liveReload: true,
+    compress: true,
+    // historyApiFallback: true,
+    // open: true,
+    historyApiFallback: {
+      rewrites: [
+        { from: /^\//, to: "http://localhost:3000/index.html" },
+        { from: /^\/main&/, to: "http://localhost:3000/index.html" },
+        {
+          from: /^\/challenge\/*/,
+          // to: "http://localhost:3000/index.html",
+          to: "http://localhost:3000/index.html",
+          htmlAcceptHeaders: ["text/html", "*/*"],
+        },
+        { from: /./, to: "/404/404.html" },
+      ],
+    },
+    // devMiddleware: (app) => {
+    //   app.get("/challenge/*", (req, res) => {
+    //     res.sendFile(__dirname + "/dist/index.html");
+    //   });
+    // },
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: "index.html", // output file name
+      template: "./index.html", // template file name
+    }),
+    new MiniCssExtractPlugin({ filename: "app.css" }),
+    new CleanWebpackPlugin({
+      cleanAfterEveryBuildPatterns: ["dist"],
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+    ],
+  },
+};