prgrms-fe-devcourse · eugene028 · Jun 29, 2023 · Jun 29, 2023 · Jun 30, 2023 · Jul 2, 2023
diff --git a/asset/notion.png b/asset/notion.png
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="asset/notion.png"/> 
+    <link rel="stylesheet" href="/style/global.css">
+    <link rel="stylesheet" href="/style/DocumentList.css">
+    <link rel="stylesheet" href="/style/DocumentModal.css">
+    <link rel="stylesheet" href="/style/DocumentEdit.css">
+    <link rel="stylesheet" href="/style/DocumentDelete.css">
+    <title>유진의 Notion</title>
+</head>
+<body>
+    <main class ="app"></main>
+    <script src="/src/main.js" type ="module"></script>
+</body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,30 @@
+import { EditorPage } from "./EditorPage.js";
+import { DocumentPage } from "./DocumentPage.js";
+import { initRouter } from "./router.js";
+
+export default function App ($target) {
+    const $app = document.createElement('div');
+    $app.className = 'mainApp'
+    const editorPage = new EditorPage($app);
+    const documentPage = new DocumentPage($app);
+
+    $target.appendChild($app);
+
+    this.route = () => {
+        const { pathname } = window.location;
+        if (pathname.indexOf('/documents/') === 0){
+            const [, , documentId] = pathname.split('/');
+            editorPage.setState({...editorPage.state, id : documentId});
+        }
+    }
+    this.render = () => {
+        documentPage.render();
+        const { pathname } = window.location;
+        const [, , documentId] = pathname.split('/');
+        if(documentId){
+            editorPage.setState({...editorPage.state, id: documentId})
+        }
+    }
+    this.render()
+    initRouter({onRoute : () => this.route()});
-    initRouter({onRoute : () => this.route()});
+    initRouter({onRoute : this.route});
-    initRouter({onRoute : () => this.route()});
+    initRouter({onRoute : this.route});
+}
diff --git a/src/Components/ChildDocuments.js b/src/Components/ChildDocuments.js
@@ -0,0 +1,34 @@
+import { push } from '../router.js';
+
+export default function ChildDocument ({$target, $document}){
+    const $childDocument = document.createElement('div');
+    $childDocument.className = 'childLink';
+    $target.append($childDocument);
+
+    this.state = {
+        data : $document
+    }
+    this.setState = nextState => {
+        this.state = nextState 
+        this.render();
+    }
+    this.render = () => {
+        if(this.state.data){
+            const { documents } = this.state.data
+            if(documents){
+                $childDocument.innerHTML = `${
+                documents.map(({id, title}) => 
+                    `<li class="linkDoc" data-id=${id}>${title}</li>`
+                ).join('')}`
+            }
+            }
+        }
+
+    this.render();
+
+    $childDocument.addEventListener('click', (e) => {
+        const $link = e.target.closest('li');
+        const { id } = $link.dataset;
+        push(`/documents/${id}`)
+    })
+}
diff --git a/src/Components/DocumentCreate.js b/src/Components/DocumentCreate.js
@@ -0,0 +1,33 @@
+import { DocumentModal } from "./DocumentModal.js";
+
+export function DocumentCreate({$target, parentId, onSubmit}){
+    this.state = {
+        parentId :null,
+    }
+    this.setState = (nextState) => {
+        this.state = nextState;
+    }
+    this.render = () => {
+        const $createBtn = document.createElement('button');
+        $createBtn.className = 'createDoc';
+        if (parentId === null){
+            $createBtn.className = 'rootCreate'
+        }
+        $createBtn.textContent = '+';
+        $target.append($createBtn);
+    }
+    $target.addEventListener('click', (e) => {
+        const $createBtn = e.target.closest('button');
+        if($createBtn){
+            if($createBtn.classList.contains('rootCreate')){
+                e.stopImmediatePropagation();
+                const modal = new DocumentModal(null , onSubmit)
+                modal.modalOpen();
+                return
+            }
+            const { id }  = $createBtn.nextElementSibling.dataset
+            const modal = new DocumentModal(id , onSubmit)
+            modal.modalOpen();
+        }
+    })
+}
diff --git a/src/Components/DocumentDelete.js b/src/Components/DocumentDelete.js
@@ -0,0 +1,22 @@
+import { deleteDocuments } from "../api.js";
+import { push } from "../router.js";
+
+export default function DocumentDelete ({$target, id}){
+    const $deleteBtn = document.createElement('button');
+    $deleteBtn.className= 'delete-btn'
+    $target.appendChild($deleteBtn)
+    $deleteBtn.textContent = '삭제하기'
+
+    this.state = {
+        id : id,
+    }
+    this.setState = nextState => {
+        this.state = nextState
+    }
+    $deleteBtn.addEventListener('click', async (e) => {
+        await deleteDocuments(this.state.id)
+        alert("삭제 완료");
+        push('/');
+        location.reload();
+    })
+}
diff --git a/src/Components/DocumentList.js b/src/Components/DocumentList.js
@@ -0,0 +1,95 @@
+import { DocumentCreate } from "./DocumentCreate.js"
+import { push } from '../router.js';
+
+export function DocumentList({$target, data =[], initialState, onSubmit}) {
+    this.state = initialState
+    this.setState = (nextState) => {
+        this.state = nextState
+    }
+    this.render = ($renderDOM = $target) => {
+        data.map((data) => {
+            const doc = document.createElement('li');
+            doc.setAttribute("data-id", `${data.id}`);
+            doc.setAttribute("class", 'doc');
+            doc.textContent =`${data.title}`
+            $renderDOM.insertAdjacentElement("beforeend", doc);
+        })
+    }
+
+    this.onSelect = (data, $li) => {
+        if(data.length === 0){
+            const $haveNothing = document.createElement('div');
+            $haveNothing.classList.add('nothing')
+            $haveNothing.textContent = '하위 페이지 없음'
+            $li.append($haveNothing)
+        }
+        data.forEach((data => {
+            const $parentNode = document.createElement('div')
+            $parentNode.className = `doc-${this.state.selectedNode}`
+            $parentNode.style.marginLeft = `${this.state.depth * 10}px`;
+            const createBtn = new DocumentCreate({
+                $target: $parentNode, 
+                parentId: this.state.parent, 
+                onSubmit: onSubmit
+            })
+            createBtn.render();
+            $li.append($parentNode);
+            const documentList = new DocumentList({
+                $target: $parentNode,
+                data: [data],
+                depth: this.state.depth + 1,
+                initialState: this.state,
+                onSubmit: onSubmit
+            })
+            documentList.render();
+        }))
+    }
+    $target.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if($target.classList.contains('documentPage') && !e.target.classList.contains('doc'))
+            return
+        else if (e.target.classList.contains('createDoc')){
+            return
+        }
+        else if (e.target.classList.contains('nothing')){
+            return
+        }
+        if(this.state.isOpen){
+            while(e.target.querySelector('div')){
+                e.target.classList.remove("open");
+                const $removeTarget = e.target.querySelector('div')
+                e.target.removeChild($removeTarget);
+            }
+            this.setState({
+                ...this.state,
+                isOpen: !this.state.isOpen,
+            })
+            return
+        }
+        const $li = e.target
+        if($li){
+            const { id } = $li.dataset;
+            if(data){
+                const childrenData = data.map(data => data.documents)
+                $li.classList.add('open')
+                if(childrenData[0].length > 0){
+                    this.setState({
+                        parent: this.state.depth === 0 ? parseInt(id) : parseInt(this.state.parent),
+                        selectedNode: parseInt(id),
+                        isOpen: !this.state.isOpen,
+                        depth: this.state.depth + 1
+                    })
+                    this.onSelect(childrenData[0], $li)
+                } 
+                else {
+                    this.setState({
+                        ...this.state,
+                        isOpen: !this.state.isOpen,
+                    })
+                    this.onSelect([], $li)
+                }
+                push(`/documents/${id}`);
+            }
+        }    
+    })
+}
diff --git a/src/Components/DocumentModal.js b/src/Components/DocumentModal.js
@@ -0,0 +1,42 @@
+export function DocumentModal(id , onSubmit){
+    const $app = document.querySelector('.app');
+    const $modalContainer = document.createElement('div')
+    $modalContainer.className = 'modal';
+    $app.appendChild($modalContainer);
+    this.render = () => {
+        $modalContainer.innerHTML = `
+            <div class="modal-content">
+                <form>
+                    <input class ="modalText" type="text" placeholder='문서의 제목을 작성해주세요'/>
+                </form>
+                <button class="closeBtn" id="close-modal">❌</button>
+            </div>
+        `
+    }
+
+    $modalContainer.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const $input = $modalContainer.querySelector('.modalText');
+        const content = $input.value;
+        await onSubmit(content, id);
+        $input.value =''
+        alert('문서 생성이 완료되었습니다')
+        const modal = document.querySelector('.modal');
+        modal.remove()
+    })
+
+    $modalContainer.addEventListener('click', (e) => {
+        const $closeBtn = e.target.closest('button')
+        if ($closeBtn.classList.contains('closeBtn')){
+            const modal = document.querySelector('.modal');
+            modal.remove()
+        }
+    })
+
+    this.modalOpen = () => {
+        const modal = document.querySelector('.modal');
+        modal.style.display = "block";
+        document.body.style.overflow = "hidden"; 
+    }
+    this.render()
+}
diff --git a/src/Components/Editor.js b/src/Components/Editor.js
@@ -0,0 +1,40 @@
+export default function Editor({$target, initialState = {
+    title: '',
+    content: '',
+}, onEditing}){
+    const $editor = document.createElement('div');
+    $editor.className = 'editor'
+    $target.appendChild($editor);
+    this.state = initialState;
+    let isinitialize = false
+
+    this.setState = (nextState) => {
+        this.state = nextState
+        $editor.querySelector('[name=content]').value = this.state.content;
+        $editor.querySelector('[name=title]').value = this.state.title;
+        this.render();
+    }
+    this.render = () => {
+        if(!isinitialize){
+            $editor.innerHTML = `
+                <input type="text" class="titleInput" name="title"/>
+                <textarea name="content" class="contentInput"/>
+            `
+            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)
+        }
+    })
+}