[Mission5/신호원] Project_Notion_Vanilla JS 과제

.babelrc

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

.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "browser": true
+  },
+  "extends": ["airbnb-base", "prettier", "plugin:import/recommended"],
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["import", "prettier"],
+  "root": true,
+  "rules": {
+    "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,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "quoteProps": "as-needed",
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

jsconfig.json

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

package.json

@@ -0,0 +1,37 @@
+{
+  "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"
+  },
+  "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": "^4.2.1",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.3",
+    "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,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <base href="/">
+  <title>Hotion</title>
+</head>
+<body>
+  <main class="app"></main>
+</body>
+</html>

src/components/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;
+}
+
+.page-container {
+  flex: 1 1 0%;
+}

src/components/App.js

@@ -0,0 +1,38 @@
+import { patchSidebarState, registerStateSetter } from "@Utils/stateSetters";
+import Document from "./Document/Document";
+import Home from "./Home/Home";
+import router from "@Utils/router";
+import Header from "./Header/Header";
+import Sidebar from "./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);
+
+  const $content = document.createElement("article");
+
+  $main.className = "main-container";
+  $content.className = "page-container";
+
+  $main.appendChild($content);
+  $target.appendChild($main);
+
+  // route 가능한 요소 등록
+  const $home = new Home({ $target: $content });
+  registerStateSetter($home);
+
+  const $document = new Document({ $target: $content });
+  registerStateSetter($document);
+
+  const route = () => router({ $target: $content });
+  window.addEventListener("load", route);
+  window.addEventListener("popstate", route);
+  window.addEventListener("route", route);
+}

src/components/Document/Document.css

@@ -0,0 +1,36 @@
+.document-container {
+  padding: 15px;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.document-title-section {
+  margin: 1em 0 1em 0;
+}
+
+.document-title-section > textarea {
+  width: 550px;
+  height: 1.5em;
+  font-size: 3em;
+  border: none;
+  resize: none;
+}
+
+.document-title-section > textarea:focus {
+  outline: none;
+}
+
+.document-content-section > textarea {
+  width: 550px;
+  height: 70vh;
+  font-size: 1.5em;
+  border: none;
+  resize: none;
+}
+
+.document-content-section > textarea:focus {
+  outline: none;
+}