prgrms-fe-devcourse · dmswl98 · Nov 16, 2022 · Nov 16, 2022 · Nov 16, 2022 · Nov 16, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+api-endpoint.js
diff --git a/README.md b/README.md
@@ -1,11 +1,38 @@
 # 📌 4주차 프로젝트[Project1]
 
-## 필수 프로젝트
-
-- 프로젝트 기한
-  - 프로젝트 수행 기간 : 2022년 11월 8일(화) ~ 2022년 11월 16일(수)
-  - 멘티 코드 리뷰 기간 : 2022년 11월 17일(목) ~ 2022년 11월 20일(일)
-  - 멘토 코드 리뷰 기간 : 2022년 11월 17일(목) ~ 2022년 11월 22일(화)
-  - 코드 리뷰 반영 기간 : 2022년 11월 23일(수) ~ 2022년 11월 25일(금)
-- 내용
-  - **Day 17 [프로젝트] 노션 클로닝 요구사항** 확인 부탁드립니다.
+![image](https://user-images.githubusercontent.com/76807107/203049404-1093e5f9-f895-457a-be7c-b087694c85f9.png)
+
+## 배포 주소
+
+https://dmswl98-notion-clone-project.netlify.app/
+
+## 기본 요구사항
+
+- [x] 글 단위를 Document라고 합니다. Document는 Document 여러개를 포함할 수 있습니다.
+- [x] 화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링합니다.
+- [x] Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링합니다.
+- [x] 해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링 합니다.
+- [x] Document Tree에서 각 Document 우측에는 + 버튼이 있습니다. 해당 버튼을 클릭하면, 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집화면으로 넘깁니다.
+- [x] 편집기에는 기본적으로 저장 버튼이 없습니다. Document Save API를 이용해 지속적으로 서버에 저장되도록 합니다.
+- [x] History API를 이용해 SPA 형태로 만듭니다.
+
+## 추가 요구사항
+
+- [x] 기본적으로 편집기는 textarea 기반으로 단순한 텍스트 편집기로 시작하되, 여력이 되면 div와 contentEditable을 조합해서 좀 더 Rich한 에디터를 만들어봅니다.
+- [x] 편집기 최하단에는 현재 편집 중인 Document의 하위 Document 링크를 렌더링하도록 추가합니다.
+- [ ] 편집기 내에서 다른 Document name을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가합니다.
+
+## 추가 구현사항
+
+- [x] Sidebar 숨기기, 펼치기 기능
+- [x] 텍스트 스타일(굵게, 기울기, 밑줄, 삭선, 색깔) 모달 구현
+- [x] 상위 문서를 삭제한 경우, 내부 하단 문서까지 모두 삭제하도록 구현
+
+## 개선 사항
+
+- [ ] 첫 화면일 때 사이드 바의 숨기기 버튼 없애기
+- [ ] 사이드 바가 펼쳐져 있을 때, 사이드 바 숨기기 버튼 없애기
+- [ ] 스크롤 시 텍스트 스타일 모달이 제 위치에 뜨지 않는 문제 해결하기
+- [ ] XSS 취약점 개선
+- [ ] 문서의 제목을 변경할 경우 Sidebar에 변경된 제목을 낙관적 업데이트로 반영하기
+- [ ] 문서를 생성했을 때 새로 생성된 문서로 이동 및 랜더링하기
diff --git a/_redirects b/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!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="/style.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.js"></script>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,59 @@
+import Sidebar from "./components/Sidebar/Sidebar.js";
+import DocumentPage from "./components/Document/Document.js";
+
+import { getDocumentContent } from "./api/api.js";
+
+import { validateInstance } from "./utils/validation.js";
+import { initRouter } from "./utils/router.js";
+
+export default function App({ $target }) {
+  validateInstance(new.target);
+
+  const sidebar = new Sidebar({ $target });
+
+  const documentPage = new DocumentPage({
+    $target,
+    initialState: {
+      documentId: 0,
+      title: "",
+      content: "",
+    },
+    onUpdateTitle: () => {
+      sidebar.setState();
+    },
+  });
+
+  this.route = async () => {
+    const { pathname } = window.location;
+
+    if (pathname === "/") {
+      sidebar.setState();
+    } else if (pathname.indexOf("/documents/") === 0) {
+      const [, , documentId] = pathname.split("/");
+
+      const documentData = await getDocumentContent(documentId);
+
+      const { title, content, documents } = documentData;
+      documentPage.setState({
+        documentId,
+        title,
+        content,
+        documents,
+      });
+
+      sidebar.setState();
+    }
+  };
+
+  const init = () => {
+    this.route();
+
+    initRouter(this.route);
+
+    window.addEventListener("popstate", () => {
+      this.route();
+    });
+  };
+
+  init();
+}
diff --git a/src/api/api.js b/src/api/api.js
@@ -0,0 +1,29 @@
+import { request } from "./index.js";
+
+export const getRootDouments = async () => {
+  return await request("/documents");
+};
+
+export const getDocumentContent = async (documentId) => {
+  return await request(`/documents/${documentId}`);
+};
+
+export const createDocument = async (documentData) => {
+  return await request(`/documents`, {
+    method: "POST",
+    body: JSON.stringify(documentData),
+  });
+};
+
+export const modifyDocuments = async (documentId, documentData) => {
+  return await request(`/documents/${documentId}`, {
+    method: "PUT",
+    body: JSON.stringify(documentData),
+  });
+};
+
+export const deleteDocument = async (documentId) => {
+  return await request(`/documents/${documentId}`, {
+    method: "DELETE",
+  });
+};
diff --git a/src/api/index.js b/src/api/index.js
@@ -0,0 +1,22 @@
+import { API_END_POINT } from "../../api-endpoint.js";
+
+export const request = async (url, options = {}) => {
+  try {
+    const res = await fetch(`${API_END_POINT}${url}`, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        "x-username": "dmswl12345",
+      },
+    });
+
+    if (!res.ok) {
+      throw new Error("API 처리 중");
+    }
+
+    return res.json();
+  } catch (err) {
+    console.error(err);
+    history.go(-1);
+  }
+};
diff --git a/src/assets/arrow.svg b/src/assets/arrow.svg
diff --git a/src/assets/document.svg b/src/assets/document.svg
diff --git a/src/assets/double-arrow.svg b/src/assets/double-arrow.svg
diff --git a/src/assets/menu.svg b/src/assets/menu.svg
diff --git a/src/assets/plus.svg b/src/assets/plus.svg
diff --git a/src/assets/trash.svg b/src/assets/trash.svg
diff --git a/src/components/Document/Document.js b/src/components/Document/Document.js
@@ -0,0 +1,45 @@
+import DocumentHeader from "./DocumentHeader.js";
+import Editor from "./DocumentEditor.js";
+
+import { modifyDocuments } from "../../api/api.js";
+
+import { validateInstance } from "../../utils/validation.js";
+import { debounce } from "../../utils/debounce.js";
+
+export default function Document({ $target, initialState, onUpdateTitle }) {
+  validateInstance(new.target);
+
+  const $document = document.createElement("div");
+  $document.classList.add("document");
+
+  this.state = initialState;
+
+  new DocumentHeader({ $target: $document });
+
+  const editor = new Editor({
+    $target: $document,
+    initialState,
+    onEditTitle: (id, data) => {
+      debounce(async () => {
+        await modifyDocuments(id, data);
+        onUpdateTitle();
+      }, 100);
+    },
+    onEditContent: (id, data) => {
+      debounce(async () => {
+        await modifyDocuments(id, data);
+      }, 300);
+    },
+  });
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    editor.setState(this.state);
+
+    this.render();
+  };
+
+  this.render = () => {
+    $target.appendChild($document);
+  };
+}