prgrms-fe-devcourse · eeseung · Jun 28, 2023 · Jul 3, 2023 · Jul 4, 2023 · Jul 4, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,15 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["airbnb-base", "prettier"],
+  "plugins": ["prettier"],
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "rules": {
+    "prettier/prettier": ["error"]
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+.eslintcache
+.vscode
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "useTabs": false,
+  "arrowParens": "always"
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <title>Notion</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+      integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="/src/styles/style.css" />
+  </head>
+  <body>
+    <main id="app" style="display: flex"></main>
+    <script src="/src/main.js" type="module"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "fedc4-5_project_notion_vanillajs",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/prgrms-fe-devcourse/FEDC4-5_Project_Notion_VanillaJS.git",
+  "author": "eeseung <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "eslint": "^7.32.0 || ^8.2.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "2.8.8"
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,37 @@
+import NotionPage from './pages/NotionPage.js';
+import { initRouter } from './utils/router.js';
+import { getItem } from './utils/storage.js';
+
+export default function App({ $target }) {
+  const openedDocuments = getItem('opened-documents', []);
+
+  const notionPage = new NotionPage({
+    $target,
+    initialState: {
+      documents: [],
+      documentId: null,
+      openedDocuments: openedDocuments,
+    },
+  });
+
+  this.route = () => {
+    const { pathname } = window.location;
+
+    if (pathname === '/') {
+      notionPage.setState({
+        ...notionPage.state,
+        documentId: null,
+      });
+    } else if (pathname.indexOf('/documents/') === 0) {
+      const [, , id] = pathname.split('/');
+      notionPage.setState({
+        ...notionPage.state,
+        documentId: parseInt(id),
+      });
+    }
+  };
+
+  this.route();
+
+  initRouter(() => this.route());
+}
diff --git a/src/api.js b/src/api.js
@@ -0,0 +1,20 @@
+import { API_END_POINT, USER_NAME } from './constants.js';
+
+export const request = async (url, options = {}) => {
+  try {
+    const res = await fetch(`${API_END_POINT}${url}`, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        'x-username': USER_NAME,
+      },
+    });
+
+    if (res.ok) {
+      return await res.json();
+    }
+    throw new Error('API 호출 오류');
+  } catch (e) {
+    alert(e.message);
+  }
+};
diff --git a/src/assets/arrow-icon.svg b/src/assets/arrow-icon.svg
diff --git a/src/assets/plus-icon.svg b/src/assets/plus-icon.svg
diff --git a/src/assets/trash-icon.svg b/src/assets/trash-icon.svg
diff --git a/src/components/Document/DocumentHeader.js b/src/components/Document/DocumentHeader.js
@@ -0,0 +1,21 @@
+export default function DocumentHeader({ $target, initialState }) {
+  const $header = document.createElement('header');
+  $header.classList.add('document-header');
+  $target.appendChild($header);
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+
+    this.render();
+  };
+
+  this.render = () => {
+    $header.innerHTML = `
+      <a href="/documents/${this.state.id}">${this.state.title}</a>
+    `;
+  };
+
+  this.render();
+}
diff --git a/src/components/Document/Editor.js b/src/components/Document/Editor.js
@@ -0,0 +1,45 @@
+export default function Editor({ $target, initialState, onEditing }) {
+  const $editor = document.createElement('div');
+  $editor.classList.add('editor');
+  $target.appendChild($editor);
+
+  let isInitialize = false;
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+
+    $editor.querySelector('[name=title]').value = this.state.title;
+    $editor.querySelector('[name=content]').value = this.state.content;
+
+    this.render();
+  };
+
+  this.render = () => {
+    if (!isInitialize) {
+      $editor.innerHTML = `
+        <input type="text" name="title" value="${this.state.title}" placeholder="제목 없음"/>
+        <textarea name="content" placeholder="내용을 입력해 주세요.">${this.state.content}</textarea>
+      `;
+      isInitialize = true;
+    }
+  };
+
+  this.render();
+
+  $editor.addEventListener('keyup', (e) => {
+    const { target } = e;
+    const name = target.getAttribute('name');
+
+    if (this.state[name] !== undefined) {
+      const nextState = {
+        ...this.state,
+        [name]: target.value,
+      };
+
+      this.setState(nextState);
+      onEditing(this.state);
+    }
+  });
+}
diff --git a/src/components/Sidebar/CreateButton.js b/src/components/Sidebar/CreateButton.js
@@ -0,0 +1,17 @@
+export default function CreateButton({ $target, initialState, onClick }) {
+  const $button = document.createElement('button');
+  $button.classList.add('create-button');
+  $target.appendChild($button);
+
+  this.state = initialState;
+
+  this.render = () => {
+    $button.textContent = this.state.text;
+  };
+
+  $button.addEventListener('click', () => {
+    onClick();
+  });
+
+  this.render();
+}
diff --git a/src/components/Sidebar/DocumentList.js b/src/components/Sidebar/DocumentList.js
@@ -0,0 +1,80 @@
+import { push } from '../../utils/router.js';
+
+export default function DocumentList({ $target, initialState, onToggle, onCreate, onDelete }) {
+  const $documentList = document.createElement('div');
+  $documentList.classList.add('document-list');
+  $target.appendChild($documentList);
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  const renderDocuments = (documents, depth) => {
+    return `
+      ${
+        documents.length > 0
+          ? documents
+              .map((document) => {
+                const isExpanded = this.state.openedDocuments.indexOf(document.id) > -1;
+                return `
+                  <li data-id="${document.id}" class="document-list-item">
+                    <div class="document-item ${document.id === this.state.documentId ? 'selected' : ''}" 
+                          style="padding:2px 10px 2px ${depth * 14 + 5}px;">
+                      <button class="toggle-button ${isExpanded ? 'expanded' : ''}"></button>
+                      <div class="document-title">
+                        ${document.title.length === 0 ? '제목 없음' : document.title}
+                      </div>
+                      <div class="document-button-wrapper">
+                        <div>
+                          <button class="delete-button"></button>
+                          <button class="add-button"></button>
+                        </div>
+                      </div>
+                    </div>
+                    <ul class="${isExpanded ? 'expanded' : ''}">
+                      ${renderDocuments(document.documents, depth + 1)}
+                    </ul>
+                  </li>`;
+              })
+              .join('')
+          : `
+            <li class="document-list-none" style="padding:2px 10px 2px ${depth * 14 + 15}px;">
+              하위 페이지 없음
+            </li>
+          `
+      }
+    `;
+  };
+
+  this.render = () => {
+    $documentList.innerHTML = `
+      ${this.state.documents.length > 0 ? `<ul class="expanded">${renderDocuments(this.state.documents, 0)}</ul>` : ''}
+    `;
+  };
+
+  $documentList.addEventListener('click', (e) => {
+    const $li = e.target.closest('.document-list-item');
+
+    if ($li) {
+      const { id } = $li.dataset;
+      const [className] = e.target.classList;
+
+      if (className === 'toggle-button') {
+        onToggle(parseInt(id), $li.querySelector('ul'));
+      } else if (className === 'add-button') {
+        onCreate(parseInt(id));
+      } else if (className === 'delete-button') {
+        onDelete(parseInt(id));
+      } else if (className === 'document-item-none') {
+        return;
+      } else {
+        push(`/documents/${id}`);
+      }
+    }
+  });
+
+  this.render();
+}
diff --git a/src/components/Sidebar/SidebarHeader.js b/src/components/Sidebar/SidebarHeader.js
@@ -0,0 +1,15 @@
+export default function SidebarHeader({ $target, initialState }) {
+  const $header = document.createElement('header');
+  $header.classList.add('sidebar-header');
+  $target.appendChild($header);
+
+  this.state = initialState;
+
+  this.render = () => {
+    $header.innerHTML = `
+      <a href="/">${this.state.heading}</a>
+    `;
+  };
+
+  this.render();
+}
diff --git a/src/constants.js b/src/constants.js
@@ -0,0 +1,10 @@
+export const API_END_POINT = 'https://kdt-frontend.programmers.co.kr';
+export const USER_NAME = 'eeseung';
+
+export const TEMP_DOCUMENT_KEY = (id) => `temp-document-${id}`;
+export const OPENED_DOCUMENTS_KEY = 'opened-documents';
+
+export const INIT_DOCUMENT = {
+  title: '',
+  content: '',
+};
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,5 @@
+import App from './App.js';
+
+const $target = document.querySelector('#app');
+
+new App({ $target });