diff --git a/README.assets/yenotion.png b/README.assets/yenotion.png
new file mode 100644
index 00000000..2f3bc3c2
Binary files /dev/null and b/README.assets/yenotion.png differ
diff --git a/README.assets/yenotion_wireframe (1).png b/README.assets/yenotion_wireframe (1).png
new file mode 100644
index 00000000..000b4978
Binary files /dev/null and b/README.assets/yenotion_wireframe (1).png differ
diff --git a/README.md b/README.md
index 82b85e81..46b9e4ce 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,87 @@
-# 📌 4주차 프로젝트[Project1]
+# 📝YENOTION
 
-## 필수 프로젝트
 
-- 프로젝트 기한
-  - 프로젝트 수행 기간 : 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 [프로젝트] 노션 클로닝 요구사항** 확인 부탁드립니다.
+
+## 🔸 프로젝트 소개 및 수행 기간
+
+* API를 활용하여 문서 자동 저장 편집기를 구현합니다. 필수 기능을 구현 후 추가 기능을 자유롭게 구현합니다.
+
+> - 프로젝트 수행 기간 : 2022년 11월 8일(화) ~ 2022년 11월 16일(수)
+> - 멘티 코드 리뷰 기간 : 2022년 11월 17일(목) ~ 2022년 11월 20일(일)
+> - 멘토 코드 리뷰 기간 : 2022년 11월 17일(목) ~ 2022년 11월 22일(화)
+> - 코드 리뷰 반영 기간 : 2022년 11월 23일(수) ~ 2022년 11월 25일(금)
+
+## 🔸 구조 설계
+
+### 와이어프레임
+
+<img src="README.assets/yenotion_wireframe (1).png" alt="yenotion_wireframe (1)" style="zoom:50%;" />
+
+
+
+###  컴포넌트 구조
+
+<img src="README.assets/yenotion.png" alt="yenotion" style="zoom: 80%;" />
+
+## 🔸 기능 명세
+
+### 기본 기능
+
+- [x] 메인 페이지 왼쪽에 전체 문서 트리를 출력합니다.
+  - 루트 문서를 클릭하면 오른쪽 편집기 영역에 문서 내용을 렌더링합니다.
+  - 문서 이름이 특정 길이를 넘으면 특정 길이까지 자르고 ... 생략으로 표시한다.
+
+- [x] 새로운 문서를 생성할 수 있습니다.
+  - 각 문서의 우측에 + 버튼이 있고, 해당 버튼을 클릭하면 하위에 새로운 문서 생성되고 편집 화면으로 넘어갑니다.
+  - 루트 문서 또는 특정 문서 하위에 새로운 문서를 추가할 수 있습니다.
+  
+- [x] 문서를 수정하고 저장할 수 있습니다.
+  - 문서 저장 버튼을 따로 만들지 않습니다.
+  - document save api를 이용, 서버에 지속적인 요청을 통해 저장되도록 설정합니다.
+- 문서의 내용은 마크다운 문법을 사용하여 나타낼 수 있습니다.
+    
+  - 오른편 문서 미리보기에서 실제 페이지의 내용을 확인할 수 있습니다.
+  
+- [x] 문서를 삭제할 수 있습니다.
+
+- [x] History API를 활용하여 SPA로 제작합니다.
+  - 루트 URL: 문서 선택이 아직 안 된 상태를 보여줍니다.
+    * 편집기에는 기본 페이지 출력
+  - /documents/{documentId}: 해당 문서의 내용을 불러와 편집기에 출력
+
+  
+
+### 추가 기능
+
+[과제 제안]
+
+- [x] 기본적으로 편집기는 textarea 기반으로 단순한 텍스트 편집기로 시작하되, 여력이 되면 div와 contentEditable을 조합해서 좀 더 Rich한 에디터를 만들어봅니다.
+
+- [x] 편집기 최하단에는 현재 편집 중인 문서의 하위 문서들의 링크를 추가.
+
+- [ ] `페이지 멘션`: 편집기 내에서 @시작해서 다른 문서의 title을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가합니다.
+
+[기타 아이디어 정리]
+
+* 마크다운 편집기 만들기
+* 검색 기능
+* 다크모드
+* 임베드
+* 북마크
+* 하이라이팅
+* 이미지 임베딩
+* 공유하기
+* undo, redo
+* 수정이력 출력
+* 과거 상태로 돌아가기
+
+
+
+## 🔸느낀점	
+
+* 계획을 거창하게 세우고 시작했지만, 결론적으로 추가 기능을 많이 구현하지 못했다. 일주일 온전히 프로젝트를 수행했으면 진도를 더 많이 나갈 수 있었겠지만,, 그래도 다음 개발 일정 산정은 더 잘해보자!
+* SPA로 개발 시 페이지 새로고침 시 문제가 발생하는 점 -> express 같은 서버를 따로 두는 것이 필요할 것 같다.
+* 이번 프로젝트에서 API 주소를 가리기 위해 API 주소를 담은 파일을 gitignore로 설정하여 git에 올라가지 않도록 처리했지만 -> 이런 경우 어떻게 배포를 할 수 있을지와 같은 고민과, 환경 변수로 정의해서 사용했으면 더 좋았을 거 같다는 생각이 들었다.
+* API 비동기 통신 로직을 따로 utils 함수로 분리해주었는데, 함수를 계속 분리하다 보니 API 요청하고 응답 받아온 후 데이터를 사용하는 부분에서 살짝 버벅였다.. async await 구문을 사용할 때 반환값이 promise이기 때문에 바로 하위 컴포넌트로 넘기지 않고 ->  setState로 부모에 저장하고 이후 하위 컴포넌트에 값을 전달했다. -> 처음에 비동기 통신하는 일련의 과정(비동기 요청, 응답 후 상태값 변경 후 리렌더링)이 잘 안돼서 꼼꼼히 확인하면서 작업했다.
+* 바닐라 자바스크립트로 작업하는 건 재밌게 느껴지는데, css에서 class명 관리 및 스타일 속성 재사용, 상태값 관리, 리렌더링 등 신경써야 하는 것들이 많아서 라이브러리, 프레임워크 사용이 훨씬 편하긴 하다.
+
diff --git a/_redirects b/_redirects
new file mode 100644
index 00000000..7797f7c6
--- /dev/null
+++ b/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..c02ecd07
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>YENOTION</title>
+    <link rel="stylesheet" href="/src/styles/style.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,200,0,0"
+    />
+  </head>
+  <body>
+    <main id="App"></main>
+    <script src="/src/index.js" type="module"></script>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 00000000..38d74ddf
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,9 @@
+import Header from "./components/Header.js";
+import DocumentEditPage from "./pages/DocumentEditPage.js";
+
+function App({ $target }) {
+  new Header({ $target });
+  new DocumentEditPage({ $target });
+}
+
+export default App;
diff --git a/src/apis/baseUrl.js b/src/apis/baseUrl.js
new file mode 100644
index 00000000..6a034320
--- /dev/null
+++ b/src/apis/baseUrl.js
@@ -0,0 +1,6 @@
+export const API_END_POINT = "https://kdt-frontend.programmers.co.kr";
+
+export const HEADERS = {
+  "x-username": "yezyvibe",
+  "Content-Type": "application/json",
+};
diff --git a/src/apis/documentApi.js b/src/apis/documentApi.js
new file mode 100644
index 00000000..1eb8caa6
--- /dev/null
+++ b/src/apis/documentApi.js
@@ -0,0 +1,26 @@
+import { request } from "./index.js";
+
+export const getRootDocuments = async () => {
+  const response = await request("/documents");
+  return response;
+};
+
+export const createNewDocument = async (data) => {
+  const response = await request("/documents", "POST", data);
+  return response;
+};
+
+export const getDocumentDetail = async (documentId) => {
+  const response = await request(`/documents/${documentId}`);
+  return response;
+};
+
+export const updateDocument = async (documentId, data) => {
+  const response = await request(`/documents/${documentId}`, "PUT", data);
+  return response;
+};
+
+export const deleteDocument = async (documentId) => {
+  const response = await request(`/documents/${documentId}`, "DELETE");
+  return response;
+};
diff --git a/src/apis/index.js b/src/apis/index.js
new file mode 100644
index 00000000..153b606d
--- /dev/null
+++ b/src/apis/index.js
@@ -0,0 +1,20 @@
+import { API_END_POINT, HEADERS } from "./baseUrl.js";
+
+export const request = async (url, method = "GET", data, defaultValue = []) => {
+  try {
+    const response = await fetch(API_END_POINT + url, {
+      method,
+      headers: HEADERS,
+      body: JSON.stringify(data),
+    });
+
+    if (response.ok) {
+      const json = await response.json();
+      return json;
+    }
+
+    return defaultValue;
+  } catch (e) {
+    console.log(e.message);
+  }
+};
diff --git a/src/components/DocumentEditor.js b/src/components/DocumentEditor.js
new file mode 100644
index 00000000..73d76491
--- /dev/null
+++ b/src/components/DocumentEditor.js
@@ -0,0 +1,90 @@
+import { navigate } from "../utils/router.js";
+import EditorPreview from "./EditorPreview.js";
+import { className } from "../utils/constants.js";
+import { debounce } from "../utils/debounce.js";
+
+function DocumentEditor({ $target, initialState, onChange }) {
+  const { editorDocumentTitle, editorDocumentContent } = className;
+
+  const $editor = document.createElement("section");
+  $editor.className = "document-editor";
+  $target.appendChild($editor);
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    editorPreview.setState({
+      data: this.state.data,
+    });
+  };
+
+  const editorPreview = new EditorPreview({
+    $target,
+    initialState: {
+      data: this.state.data,
+    },
+  });
+
+  const render = () => {
+    const { title, content, documents } = this.state.data;
+
+    if (!title) {
+      $editor.innerHTML = `
+        <h1>loading..</h1>
+      `;
+      return;
+    }
+
+    $editor.innerHTML = `
+      <input class="${editorDocumentTitle}" value="${
+      title ? title : "제목 없음"
+    }"/>
+      <article class="eidtor-wrapper">
+        <div class="${editorDocumentContent}" autofocus="true" contenteditable="true">${
+      content ? content : ""
+    }</div>
+      </article>
+      ${
+        documents.length > 0
+          ? `<div class="child-documents-wrapper">
+          <p>📌하위 문서 목록</p>
+            ${documents
+              .map(({ id, title }) => `<a href="/documents/${id}">${title}</a>`)
+              .join("")}
+        </div>`
+          : ""
+      }
+    `;
+  };
+
+  render();
+
+  const updateDocument = () => {
+    const $title = document.querySelector(`.${editorDocumentTitle}`);
+    const $content = document.querySelector(`.${editorDocumentContent}`);
+
+    onChange($title.value, $content.innerText);
+  };
+
+  $editor.addEventListener("keyup", (e) => {
+    const $div = e.target.closest("div");
+
+    if ($div) {
+      debounce(updateDocument, 500);
+    }
+  });
+
+  $editor.addEventListener("click", (e) => {
+    e.preventDefault();
+
+    const $a = e.target.closest("a");
+
+    if ($a) {
+      const [, , , , documentId] = $a.href.split("/");
+      navigate(`/documents/${documentId}`);
+    }
+  });
+}
+
+export default DocumentEditor;
diff --git a/src/components/DocumentNode.js b/src/components/DocumentNode.js
new file mode 100644
index 00000000..4e463707
--- /dev/null
+++ b/src/components/DocumentNode.js
@@ -0,0 +1,112 @@
+import { navigate } from "../utils/router.js";
+import { className } from "../utils/constants.js";
+
+function DocumentNode({ $target, initialState, onCreate, onDelete }) {
+  const $node = document.createElement("article");
+  $target.appendChild($node);
+
+  const { addButton, deleteButton } = className;
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  this.render = () => {
+    const { data } = this.state;
+
+    $node.innerHTML = `
+      <ul class="tree-node">
+        ${data
+          .map(({ id, title, documents }) => {
+            const $li = document.createElement("li");
+
+            $li.dataset.documentId = id;
+            $li.className = "node-item";
+
+            $li.innerHTML = `
+            <section class="tree-node-li">
+              <div class="node-title">
+                <span class="material-symbols-outlined">keyboard_arrow_right</span>
+                <span>${title}</span>
+              </div>
+              <div class="node-button-group">
+                <button class="${deleteButton}" data-parent-id="${id}">
+                  <span class="material-symbols-outlined">
+                    more_horiz
+                  </span>
+                </button>
+                <button class="${addButton}" data-parent-id="${id}">
+                  <span class="material-symbols-outlined">
+                    add
+                  </span>
+                </button>
+              </div>
+            </section>
+            `;
+
+            if (documents.length > 0) {
+              this.documentNode = new DocumentNode({
+                $target: $li,
+                initialState: {
+                  data: documents,
+                },
+              });
+            }
+
+            return $li.outerHTML;
+          })
+          .join("")}
+        </ul>
+      `;
+  };
+
+  this.render();
+
+  const onClickButton = ($button) => {
+    const {
+      className,
+      dataset: { parentId },
+    } = $button;
+
+    if (!parentId) {
+      return;
+    }
+
+    if (className === addButton) {
+      onCreate(parseInt(parentId));
+      return;
+    }
+
+    if (className === deleteButton) {
+      onDelete(parentId);
+      return;
+    }
+  };
+
+  const onSelectDocument = ($li) => {
+    const { documentId } = $li.dataset;
+
+    if (documentId) {
+      navigate(`/documents/${documentId}`);
+    }
+  };
+
+  $node.addEventListener("click", (e) => {
+    const $button = e.target.closest("button");
+    if ($button) {
+      onClickButton($button);
+      return;
+    }
+
+    const $li = e.target.closest("li");
+    if ($li) {
+      onSelectDocument($li);
+      return;
+    }
+  });
+}
+
+export default DocumentNode;
diff --git a/src/components/DocumentTree.js b/src/components/DocumentTree.js
new file mode 100644
index 00000000..027f383b
--- /dev/null
+++ b/src/components/DocumentTree.js
@@ -0,0 +1,105 @@
+import {
+  createNewDocument,
+  deleteDocument,
+  getRootDocuments,
+} from "../apis/documentApi.js";
+import DocumentNode from "./DocumentNode.js";
+import { className } from "../utils/constants.js";
+import { messages } from "../utils/messages.js";
+import { navigate } from "../utils/router.js";
+import { getDocumentIdFromPathname } from "../utils/documentId.js";
+
+function DocumentTree({ $target, initialState }) {
+  const $tree = document.createElement("section");
+  $target.appendChild($tree);
+
+  const { treeRootAddButton } = className;
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  const checkDocumentIdAndRoute = (documentId) => {
+    if (getDocumentIdFromPathname() === documentId) {
+      navigate("/");
+    }
+  };
+
+  this.render = () => {
+    $tree.innerHTML = `
+      <div class="${treeRootAddButton}">
+        <span class="material-symbols-outlined">add</span>
+        <span>새로운 문서</span>
+      </div>
+    `;
+
+    new DocumentNode({
+      $target: $tree,
+      initialState: {
+        data: this.state.data,
+      },
+      onCreate: (parentId) => {
+        this.createDocument(parentId);
+      },
+      onDelete: async (documentId) => {
+        const answer = confirm(messages.askDelete);
+        if (!answer) return;
+
+        await deleteDocument(documentId);
+        this.getData();
+
+        checkDocumentIdAndRoute(documentId);
+      },
+    });
+  };
+
+  this.getData = async () => {
+    const data = await getRootDocuments();
+    this.setState({
+      ...this.state,
+      data,
+    });
+  };
+
+  this.createDocument = async (parentId) => {
+    const title = prompt(messages.askNewTitle);
+
+    if (title === null) {
+      return;
+    }
+
+    if (!title.trim()) {
+      alert(messages.invalidTitle);
+      return;
+    }
+
+    const newData = {
+      title: title.trim(),
+      parent: parentId,
+    };
+
+    const { id } = await createNewDocument(newData);
+    navigate(`/documents/${id}`);
+
+    this.getData();
+  };
+
+  this.init = () => {
+    this.getData();
+  };
+
+  this.init();
+
+  $tree.addEventListener("click", (e) => {
+    const $div = e.target.closest("div");
+
+    if ($div?.className === treeRootAddButton) {
+      this.createDocument(null);
+    }
+  });
+}
+
+export default DocumentTree;
diff --git a/src/components/EditorPreview.js b/src/components/EditorPreview.js
new file mode 100644
index 00000000..414c2259
--- /dev/null
+++ b/src/components/EditorPreview.js
@@ -0,0 +1,31 @@
+import { parseMarkdown } from "../utils/parseMarkdown.js";
+
+function EditorPreview({ $target, initialState }) {
+  const $preview = document.createElement("section");
+  $preview.className = "editor-preview";
+  $target.appendChild($preview);
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  this.render = () => {
+    if (!this.state.data) return;
+
+    const { content } = this.state.data;
+
+    $preview.innerHTML = `
+      <h1 class="preview-title">미리보기</h1>
+      <div class="preview-content">${
+        content ? parseMarkdown(content) : "내용 없음"
+      }</div>
+      `;
+  };
+
+  this.render();
+}
+
+export default EditorPreview;
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 00000000..ffb77d4b
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,16 @@
+function Header({ $target }) {
+  const $title = document.createElement("div");
+  $title.className = "header-title";
+  $target.appendChild($title);
+
+  this.render = () => {
+    $title.innerHTML = `
+      <img src="https://i.ibb.co/Gk8CPyb/notion.png" alt="yenotion-logo">
+      <h1>YENOTION</h1>
+    `;
+  };
+
+  this.render();
+}
+
+export default Header;
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..595e10ef
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,3 @@
+import App from "./App.js";
+
+new App({ $target: document.querySelector("#App") });
diff --git a/src/pages/DocumentEditPage.js b/src/pages/DocumentEditPage.js
new file mode 100644
index 00000000..5a78774f
--- /dev/null
+++ b/src/pages/DocumentEditPage.js
@@ -0,0 +1,88 @@
+import DocumentEditor from "../components/DocumentEditor.js";
+import DocumentTree from "../components/DocumentTree.js";
+import { getDocumentDetail, updateDocument } from "../apis/documentApi.js";
+import { handleLocationChange } from "../utils/router.js";
+import { getDocumentIdFromPathname } from "../utils/documentId.js";
+
+function DocumentEditPage({ $target }) {
+  const $editPage = document.createElement("div");
+  $editPage.className = "main-content";
+  $target.appendChild($editPage);
+
+  const $tree = document.createElement("section");
+  $tree.className = "document-tree";
+  $editPage.appendChild($tree);
+
+  const documentTree = new DocumentTree({ $target: $tree });
+
+  const $editor = document.createElement("section");
+  $editor.className = "document-editor-wrapper";
+  $editPage.appendChild($editor);
+
+  this.state = {
+    data: {},
+  };
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+  };
+
+  this.route = async () => {
+    const { pathname } = window.location;
+    const documentId = getDocumentIdFromPathname();
+
+    if (pathname === "/") {
+      $editor.innerHTML = "";
+      return;
+    }
+
+    if (documentId) {
+      $editor.innerHTML = "";
+
+      const data = await getDocumentDetail(documentId);
+      this.setState({
+        data,
+      });
+
+      this.documentEditor = new DocumentEditor({
+        $target: $editor,
+        initialState: {
+          data: this.state.data,
+        },
+        onChange: (newTitle, newContent) => {
+          this.updateData(documentId, {
+            title: newTitle,
+            content: newContent,
+          });
+        },
+      });
+    }
+  };
+
+  this.updateData = async (documentId, data) => {
+    await updateDocument(documentId, data);
+
+    const newData = await getDocumentDetail(documentId);
+
+    this.documentEditor.setState({
+      data: newData,
+    });
+
+    documentTree.getData();
+  };
+
+  this.init = () => {
+    window.addEventListener("onChangeLocation", (e) =>
+      handleLocationChange(e, this.route)
+    );
+    window.addEventListener("popstate", () => {
+      this.route();
+    });
+
+    this.route();
+  };
+
+  this.init();
+}
+
+export default DocumentEditPage;
diff --git a/src/styles/style.css b/src/styles/style.css
new file mode 100644
index 00000000..d385c0cb
--- /dev/null
+++ b/src/styles/style.css
@@ -0,0 +1,168 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "SUIT-Medium";
+}
+
+@font-face {
+  font-family: "SUIT-Medium";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2")
+    format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.main-content {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+}
+
+.header-title {
+  border-bottom: 1px solid rgb(235, 235, 235);
+  padding-left: 16px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background-color: lightgoldenrodyellow;
+}
+
+.header-title img {
+  width: 50px;
+  height: 50px;
+}
+
+.document-editor-wrapper {
+  display: flex;
+  width: 100vw;
+}
+
+.document-editor {
+  min-width: 40vw;
+  max-width: 40vw;
+}
+
+.document-tree {
+  background-color: rgb(251, 251, 250);
+  min-width: 250px;
+  max-width: 300px;
+  overflow: scroll;
+}
+
+.tree-node {
+  padding-left: 12px;
+  border-left: 1px solid lightgray;
+}
+
+.node-item {
+  list-style: none;
+  margin-top: 6px;
+  cursor: pointer;
+}
+
+.tree-node-li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 300px;
+}
+
+.tree-add-button-wrapper {
+  display: flex;
+  padding: 16px 10px;
+  cursor: pointer;
+  align-items: center;
+}
+
+.node-title {
+  display: flex;
+  align-items: center;
+}
+
+.node-title span {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.node-button-group {
+  display: flex;
+}
+
+.add-button,
+.delete-button {
+  all: unset;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  border-radius: 4px;
+}
+
+.add-button:hover,
+.delete-button:hover {
+  background-color: lightgray;
+}
+
+.add-button span,
+.delete-button span {
+  font-size: small;
+  color: black;
+}
+
+.eidtor-wrapper {
+  display: flex;
+}
+
+.editor-document-content {
+  height: 70vh;
+  width: 100%;
+  font-size: 20px;
+  padding: 32px;
+  white-space: pre-wrap;
+  overflow-x: auto;
+}
+
+.editor-document-content::-webkit-scrollbar {
+  display: none;
+}
+
+.document-editor {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-document-title {
+  height: 50px;
+  font-size: 32px;
+  font-weight: bold;
+  padding: 10px;
+  border: none;
+  font-family: SUIT-Medium;
+}
+
+.child-documents-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.modal {
+  display: none;
+}
+
+.editor-preview {
+  font-size: 20px;
+  padding: 16px;
+  border-left: 1px solid lightgray;
+}
+
+.editor-preview h1 {
+  font-size: 32px;
+}
+
+.preview-title {
+  margin: 0;
+  padding: 10px;
+}
diff --git a/src/utils/constants.js b/src/utils/constants.js
new file mode 100644
index 00000000..d30218cc
--- /dev/null
+++ b/src/utils/constants.js
@@ -0,0 +1,8 @@
+export const className = {
+  editorDocumentTitle: "editor-document-title",
+  editorDocumentContent: "editor-document-content",
+  treeRootAddButton: "tree-add-button-wrapper",
+
+  addButton: "add-button",
+  deleteButton: "delete-button",
+};
diff --git a/src/utils/debounce.js b/src/utils/debounce.js
new file mode 100644
index 00000000..d748b372
--- /dev/null
+++ b/src/utils/debounce.js
@@ -0,0 +1,11 @@
+let timeoutId = null;
+
+export const debounce = (callback, delay) => {
+  if (timeoutId !== null) {
+    clearTimeout(timeoutId);
+  }
+
+  timeoutId = setTimeout(() => {
+    callback();
+  }, delay);
+};
diff --git a/src/utils/documentId.js b/src/utils/documentId.js
new file mode 100644
index 00000000..2af74ec2
--- /dev/null
+++ b/src/utils/documentId.js
@@ -0,0 +1,4 @@
+export const getDocumentIdFromPathname = () => {
+  const [, , currentDocumentId] = location.pathname.split("/");
+  return currentDocumentId;
+};
diff --git a/src/utils/messages.js b/src/utils/messages.js
new file mode 100644
index 00000000..0b4e0a82
--- /dev/null
+++ b/src/utils/messages.js
@@ -0,0 +1,5 @@
+export const messages = {
+  askDelete: "문서를 정말 삭제하시겠습니까?",
+  askNewTitle: "새로운 문서의 제목을 입력해주세요.",
+  invalidTitle: "올바른 제목을 입력해주세요.",
+};
diff --git a/src/utils/parseMarkdown.js b/src/utils/parseMarkdown.js
new file mode 100644
index 00000000..0e2a93bd
--- /dev/null
+++ b/src/utils/parseMarkdown.js
@@ -0,0 +1,62 @@
+export const parseMarkdown = (text) => {
+  //ul
+  text = text.replace(/^\s*\n\*/gm, "<ul>\n*");
+  text = text.replace(/^(\*.+)\s*\n([^\*])/gm, "$1\n</ul>\n\n$2");
+  text = text.replace(/^\*(.+)/gm, "<li>$1</li>");
+
+  //ol
+  text = text.replace(/^\s*\n\d\./gm, "<ol>\n1.");
+  text = text.replace(/^(\d\..+)\s*\n([^\d\.])/gm, "$1\n</ol>\n\n$2");
+  text = text.replace(/^\d\.(.+)/gm, "<li>$1</li>");
+
+  //blockquote
+  text = text.replace(/^\>(.+)/gm, "<blockquote>$1</blockquote>");
+
+  //h
+  text = text.replace(/[\#]{6}(.+)/g, "<h6>$1</h6>");
+  text = text.replace(/[\#]{5}(.+)/g, "<h5>$1</h5>");
+  text = text.replace(/[\#]{4}(.+)/g, "<h4>$1</h4>");
+  text = text.replace(/[\#]{3}(.+)/g, "<h3>$1</h3>");
+  text = text.replace(/[\#]{2}(.+)/g, "<h2>$1</h2>");
+  text = text.replace(/[\#]{1}(.+)/g, "<h1>$1</h1>");
+
+  //alt h
+  text = text.replace(/^(.+)\n\=+/gm, "<h1>$1</h1>");
+  text = text.replace(/^(.+)\n\-+/gm, "<h2>$1</h2>");
+
+  //images
+  text = text.replace(
+    /\!\[([^\]]+)\]\(([^\)]+)\)/g,
+    '<img src="$2" alt="$1" />'
+  );
+
+  //links
+  text = text.replace(
+    /[\[]{1}([^\]]+)[\]]{1}[\(]{1}([^\)\"]+)(\"(.+)\")?[\)]{1}/g,
+    '<a href="$2" title="$4">$1</a>'
+  );
+
+  //font styles
+  text = text.replace(/[\*\_]{2}([^\*\_]+)[\*\_]{2}/g, "<b>$1</b>");
+  text = text.replace(/[\*\_]{1}([^\*\_]+)[\*\_]{1}/g, "<i>$1</i>");
+  text = text.replace(/[\~]{2}([^\~]+)[\~]{2}/g, "<del>$1</del>");
+
+  //pre
+  text = text.replace(/^\s*\n\`\`\`(([^\s]+))?/gm, '<pre class="$2">');
+  text = text.replace(/^\`\`\`\s*\n/gm, "</pre>\n\n");
+
+  //code
+  text = text.replace(/[\`]{1}([^\`]+)[\`]{1}/g, "<code>$1</code>");
+
+  //p
+  text = text.replace(/^\s*(\n)?(.+)/gm, function (m) {
+    return /\<(\/)?(h\d|ul|ol|li|blockquote|pre|img)/.test(m)
+      ? m
+      : "<p>" + m + "</p>";
+  });
+
+  //strip p from pre
+  text = text.replace(/(\<pre.+\>)\s*\n\<p\>(.+)\<\/p\>/gm, "$1$2");
+
+  return text;
+};
diff --git a/src/utils/router.js b/src/utils/router.js
new file mode 100644
index 00000000..c57133e5
--- /dev/null
+++ b/src/utils/router.js
@@ -0,0 +1,19 @@
+export const handleLocationChange = (e, route) => {
+  const { href } = e.detail;
+  const { pathname } = window.location;
+
+  if (pathname === href) return;
+
+  window.history.pushState(null, null, href);
+  route();
+};
+
+export const navigate = (url) => {
+  const locationChangeEvent = new CustomEvent("onChangeLocation", {
+    composed: true,
+    detail: {
+      href: url,
+    },
+  });
+  window.dispatchEvent(locationChangeEvent);
+};
