[Mission5/신호원] Project_Notion_Vanilla JS 과제

.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "@Components": "./src/components",
+          "@Pages": "./src/pages",
+          "@Utils": "./src/utils",
+          "@Static": "./src/static"
+        }
+      }
+    ]
+  ]
+}

.eslintignore

@@ -0,0 +1 @@
+dist/

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true
+  },
+  "extends": ["airbnb-base", "prettier", "plugin:import/recommended"],
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["import", "prettier"],
+  "root": true,
+  "rules": {
+    "no-alert": "off",
+    "no-console": "warn",
+    "no-new": "off",
+    "no-unused-vars": "warn",
+    "no-use-before-define": "warn",
+    "import/no-cycle": "off",
+    "import/no-unresolved": "off",
+    "prettier/prettier": ["error"]
+  }
+}

.gitignore

@@ -0,0 +1,144 @@
+# Created by https://www.toptal.com/developers/gitignore/api/node
+# Edit at https://www.toptal.com/developers/gitignore?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+# End of https://www.toptal.com/developers/gitignore/api/node

.prettierrc.json

@@ -0,0 +1,21 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "quoteProps": "as-needed",
+  "arrowParens": "always",
+  "endOfLine": "lf",
+
+  "importOrder": [
+    "^@Components/(.*)$",
+    "^@Pages/(.*)$",
+    "^@Utils/(.*)$",
+    "^@Static/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "ES2022",
+    "baseUrl": ".",
+    "paths": {
+      "@Components/*": ["./src/components/*"],
+      "@Pages/*": ["./src/pages/*"],
+      "@Utils/*": ["./src/utils/*"],
+      "@Static/*": ["./src/static/*"]
+    }
+  }
+}

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "Mission_4_5",
+  "version": "1.0.0",
+  "main": "main.js",
+  "repository": "[email protected]:prgrms-fe-devcourse/FEDC4-5_Project_Notion_VanillaJS.git",
+  "author": "Howon Shin <[email protected]>",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "start": "yarn serve:dev",
+    "build": "yarn build:prod",
+    "build:dev": "webpack --mode=development",
+    "build:prod": "webpack --mode=production",
+    "serve:dev": "webpack serve --mode=development",
+    "serve:prod": "webpack serve --mode=production",
+    "lint": "eslint './**/*.js'"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.22.5",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.44.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "5.0.0",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.3",
+    "prettier": "^3.0.0",
+    "style-loader": "^3.3.3",
+    "svg-inline-loader": "^0.8.2",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hotion</title>
+</head>
+<body>
+  <main class="app"></main>
+</body>
+</html>

src/App.css

@@ -0,0 +1,20 @@
+body {
+  margin: 0px;
+}
+
+.app {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  height: 100vh;
+}
+
+.document-container {
+  flex: 1 1 0%;
+}

src/App.js

@@ -0,0 +1,23 @@
+import { patchSidebarState, registerStateSetter } from "@Utils/stateSetters";
+import DocumentContainer from "@Components/DocumentContainer";
+import Header from "@Components/Header/Header";
+import Sidebar from "@Components/Sidebar/Sidebar";
+import "./App.css";
+
+export default function App({ $target }) {
+  // 기본 레이아웃 요소 생성
+  const sidebar = new Sidebar({ $target });
+  registerStateSetter(sidebar);
+  patchSidebarState();
+
+  const $main = document.createElement("div");
+
+  const header = new Header({ $target: $main });
+  registerStateSetter(header);
+
+  $main.className = "main-container";
+  $target.appendChild($main);
+
+  // route 로 변경되는 부분
+  new DocumentContainer({ $target: $main });
+}

src/components/DocumentContainer.js

@@ -0,0 +1,22 @@
+import { registerStateSetter } from "@Utils/stateSetters";
+import router from "@Utils/router";
+import { EVENT } from "@Utils/constants";
+import Document from "@Pages/Document/Document";
+import Dashboard from "../pages/Dashboard/Dashboard";
+
+export default function DocumentContainer({ $target }) {
+  const $documentContainer = document.createElement("article");
+  $target.appendChild($documentContainer);
+  $documentContainer.className = "document-container";
+
+  const dashboard = new Dashboard({ $target: $documentContainer });
+  registerStateSetter(dashboard);
+
+  const hotionDocument = new Document({ $target: $documentContainer });
+  registerStateSetter(hotionDocument);
+
+  const route = () => router({ $target: $documentContainer });
+  window.addEventListener("load", route);
+  window.addEventListener("popstate", route);
+  window.addEventListener(EVENT.ROUTE, route);
+}

src/components/Header/Header.css

@@ -0,0 +1,30 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 2em;
+  padding: 7px;
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  margin-left: 0.5em;
+}
+
+.header-title {
+  padding: 0.3em;
+  border-radius: 3px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.header-title:hover {
+  background-color: #e6e6e6;
+}
+
+.header-title-divider {
+  margin: 0 0.5em 0 0.5em;
+  color: #848484;
+  user-select: none;
+}