[Mission4/원다연] - Project_Notion_VanillaJS

.gitignore

@@ -0,0 +1,2 @@
+# API_END_POINT
+src/utils/variable.js

css/reset.css

@@ -0,0 +1,148 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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;
+}
+button {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+}
+input {
+  border: none;
+  outline: none;
+}
+textarea {
+  border: none;
+  resize: none;
+  outline: none;
+}
+input::placeholder,
+textarea::placeholder {
+  color: #d7d7d7;
+}

css/style.css

@@ -0,0 +1,162 @@
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff')
+    format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Pretendard-Bold';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff')
+    format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+
+main {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  font-family: 'Pretendard-Regular';
+}
+
+/* 리스트 영역 */
+.document-container {
+  width: 20%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #f7f5f0;
+  color: #696969;
+}
+.document-fix {
+  width: 100%;
+  height: fit-content;
+  padding: 3vh 0;
+  font-size: 16px;
+}
+.document-header {
+  border-bottom: 1px solid #e0e0e0;
+}
+.document-header span {
+  padding-left: 2vh;
+  font-weight: 600;
+}
+.document-list {
+  width: 100%;
+  height: calc(100% - 12vh);
+  overflow: hidden;
+  overflow-y: auto;
+}
+.document-list ul {
+  padding-left: 2vh;
+}
+.document {
+  width: 100%;
+  height: fit-content;
+  padding: 1.5vh 0;
+  display: flex;
+  align-items: center;
+}
+li div:hover {
+  background-color: #e8e6e0de;
+}
+.document span {
+  width: 70%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  cursor: pointer;
+}
+.bold {
+  font-weight: 800;
+  color: #2d2d2d;
+  background-color: #e8e6e0de;
+}
+.no-child {
+  padding-left: 2.5vh;
+}
+.document-footer {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid #e0e0e0;
+}
+button {
+  width: 24px;
+  height: 24px;
+  margin: 0 0.7vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 4px;
+}
+button:hover {
+  background-color: #cac8c5cc;
+}
+button img {
+  width: fit-content;
+  height: 100%;
+  opacity: 0.7;
+  background-size: 100%;
+}
+.toggle {
+  width: fit-content;
+  height: 80%;
+  content: url('../assets/right.png');
+}
+.toggle-active {
+  content: url('../assets/down.png');
+}
+.delete {
+  content: url('../assets/delete.png');
+}
+.plus {
+  width: fit-content;
+  height: 60%;
+  content: url('../assets/plus.png');
+}
+.create-button {
+  width: 100%;
+  justify-content: left;
+  font-family: 'Pretendard-Regular';
+  margin: 0;
+  border-radius: 0;
+}
+.create-button:hover {
+  background-color: #d4d3cdde !important;
+}
+.create-button img {
+  width: 18px;
+  height: 18px;
+  padding: 0 2vh;
+}
+
+/* 에디터 영역 */
+.editor-container {
+  width: 80%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.editor {
+  width: 80%;
+  height: 80%;
+}
+.title {
+  width: 100%;
+  padding: 10px 0;
+  font-family: 'Pretendard-Bold';
+  font-size: 42px;
+  margin-bottom: 25px;
+}
+.content {
+  width: 100%;
+  height: 80%;
+  font-family: 'Pretendard-Regular';
+  font-size: 18px;
+  color: #000000;
+}

index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>원다연의 Notion</title>
+    <link rel="stylesheet" href="/css/reset.css" />
+    <link rel="stylesheet" href="/css/style.css" />
+  </head>
+  <body>
+    <main id="app"></main>
+    <script src="/src/main.js" type="module"></script>
+  </body>
+</html>

src/App.js

@@ -0,0 +1,41 @@
+import DocumentPage from './pages/DocumentPage.js';
+import EditorPage from './pages/EditorPage.js';
+import { initRouter } from './utils/router.js';
+
+export default function App({ $target }) {
+  const $document = document.createElement('section');
+  const $editor = document.createElement('section');
+
+  $document.className = 'document-container';
+  $editor.className = 'editor-container';
+
+  $target.appendChild($document);
+  $target.appendChild($editor);
+
+  new DocumentPage({
+    $target: $document,
+  });
+
+  const editorPage = new EditorPage({
+    $target: $editor,
+    initialState: {
+      documentId: '',
+      post: {
+        title: '',
+        content: '',
+      },
+    },
+  });
+
+  this.route = () => {
+    const { pathname } = window.location;
+    if (pathname.indexOf('/documents/') === 0) {
+      const [, , documentId] = pathname.split('/');
+      editorPage.setState({ documentId });
+    }
+  };
+
+  this.route();
+
+  initRouter(() => this.route());
+}

src/components/DocumentFooter.js

@@ -0,0 +1,21 @@
+export default function DocumentFooter({ $target, onCreate, onScroll }) {
+  const $button = document.createElement('button');
+  $button.className = 'document-fix document-footer create-button';
+  $target.appendChild($button);
+
+  this.render = () => {
+    $button.innerHTML = `
+      <img class='plus new' />
+      ${'새 페이지'}
+    `;
+
+    document.querySelector('.new').setAttribute('src', '../../assets/plus.png');
+
+    $button.addEventListener('click', () => {
+      onCreate();
+      onScroll();
+    });
+  };
+
+  this.render();
+}