prgrms-fe-devcourse · GBAJS754 · Jul 4, 2023 · Jul 4, 2023 · Jul 5, 2023 · Jul 5, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="app"></div>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,5 @@
+import App from "./src/App.js"
+
+const $target = document.querySelector(".app")
+
+new App({$target})
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,36 @@
+import DocumentPage from "./pages/DocumentPage.js";
+import EditorPage from "./pages/EditorPage.js";
+import { initRouter } from "./utils/router.js";
+
+export default function App({$target}){
+    const documentPage = new DocumentPage({
+        $target,
+    })
+
+    const editorpage = new EditorPage({
+        $target,
+        initialState :{}
+    })
+
+    this.route = () =>{
+        const {pathname} = window.location
+        $target.innerHTML = ""
+        if(pathname === "/"){
+            documentPage.render()
+        }else if(pathname.indexOf("/documents/") === 0){
+            const [,,documentId] = pathname.split("/")
+            documentPage.render()
+            editorpage.setState({documentId})
+        }else{
+            $target.innerHTML = ""
+            documentPage.render()
+        }
-        $target.innerHTML = ""
-        if(pathname === "/"){
-            documentPage.render()
-        }else if(pathname.indexOf("/documents/") === 0){
-            const [,,documentId] = pathname.split("/")
-            documentPage.render()
-            editorpage.setState({documentId})
-        }else{
-            $target.innerHTML = ""
-            documentPage.render()
-        }
+        $target.innerHTML = ""
+        documentPage.render()
+    
+        if(pathname.indexOf("/documents/") === 0){
+            const [,,documentId] = pathname.split("/")
+            editorpage.setState({documentId})
+        }
-        $target.innerHTML = ""
-        if(pathname === "/"){
-            documentPage.render()
-        }else if(pathname.indexOf("/documents/") === 0){
-            const [,,documentId] = pathname.split("/")
-            documentPage.render()
-            editorpage.setState({documentId})
-        }else{
-            $target.innerHTML = ""
-            documentPage.render()
-        }
+        $target.innerHTML = ""
+        documentPage.render()
+    
+        if(pathname.indexOf("/documents/") === 0){
+            const [,,documentId] = pathname.split("/")
+            editorpage.setState({documentId})
+        }
+    } 
+    documentPage.render()
+    this.route()
+
+    initRouter(()=>{
+        this.route()
+    })
+
+}
diff --git a/src/components/CreateLists.js b/src/components/CreateLists.js
@@ -0,0 +1,24 @@
+import {getItem, OPENED_DOCUMENTS} from "../utils/storage.js"
+
+export const createList = (currentList) => {
+    const openedDocuments = getItem(OPENED_DOCUMENTS,[])
+    return currentList.map(({title,documents,id})=>{
+        const isOpen = openedDocuments.includes(String(id));
+        return`<ul data-id="${id}">
+        <div class="document__title">
+            <span>
+                <button class="toggle__button">></button>
-                <button class="toggle__button">></button>
+                <button class="toggle__button">&gt;</button>
-                <button class="toggle__button">></button>
+                <button class="toggle__button">&gt;</button>
+                ${title === "" ? "제목없음" : title}
+            </span>
+            <div>
+            <button class="create">+</button>
+            <button class="remove">x</button>
+            </div>
+        </div>
+        <div class="${isOpen ? "" : "hide"}">
+        <li>${documents.length > 0 ? createList(documents) : ""}</li>
+        </div>
+    </ul>`
+    }
+    ).join("")
+}
diff --git a/src/components/DocumentLists.js b/src/components/DocumentLists.js
@@ -0,0 +1,45 @@
+import { push } from "../utils/router.js"
+import { updateStorage } from "../utils/storage.js"
+import {createList} from "./CreateLists.js"
+
+export default function DocumentLists({$target, initialState, onRemove, onCreate}){
+
+    const $documentLists = document.createElement("div")
+    $target.appendChild($documentLists)
+    $documentLists.className = "document__lists"
+
+    this.state =initialState
+    this.setState = nextState =>{
+        this.state = nextState
+        this.render()
+    }
+
+    this.render = () =>{ 
+        $documentLists.innerHTML = `${createList(this.state)}`
+    }
+
+    $documentLists.addEventListener("click", (e)=>{
+        const {target} = e
+        const $ul = target.closest("ul")
+
+        if($ul){
+            const {id} = $ul.dataset
+            if(target.className === "remove"){
+                onRemove(id)
+                updateStorage.delete(id)
+            }else if(target.className === "create"){
+                onCreate(id)
+                updateStorage.add(id)
+            }else if(target.className === "toggle__button"){
+                updateStorage.toggle(id)
+                this.render()
+            }else{
+                push(`/documents/${id}`)
+            }
+        }
+
+    })
+
+
+    this.render()
+}
diff --git a/src/components/Editor.js b/src/components/Editor.js
@@ -0,0 +1,41 @@
+export default function Editor({$target, initialState, onEditing}){
+    const $editor = document.createElement("div")
+    $target.appendChild($editor)
+
+    this.state = initialState;
+    this.setState = nextState =>{
+        this.state = nextState
+        $editor.querySelector(".title").value =  this.state.title 
+        $editor.querySelector(".content").value =  this.state.content
+        this.render()
+    }
+
+    let init = false
+    this.render = () =>{
+        if(!init){ 
+            $editor.innerHTML=`
+            <input class="title" style="width:800px;height:70px;" value="${this.state.title}">
+            <textarea class="content" style="width:800px;height:500px;">${this.state.content}</textarea>
+            `
+        }
+        init =true
+
+    }
+
+    $editor.addEventListener("keyup", (e)=>{ 
+        const {target} = e
+        const name = target.getAttribute("class")
+        const isTitle = name === "title"
+
+        if(this.state[name] !== undefined){
+            const nextState = {
+                ...this.state,
+                [name] : target.value 
+            }
+            this.setState(nextState)
+            onEditing(this.state,isTitle)
+        }
+    })
+
+    this.render()
+}
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,10 @@
+export default function Footer({$target, onClick}){
+    const $button = document.createElement("button")
+    $target.appendChild($button)
+    $button.textContent = "페이지 추가"
+    $button.className = "footer"
+
+    document.querySelector(".footer").addEventListener("click", (e)=>{
+        onClick()
+    })
+}
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,5 @@
+export default function Header({$target}){
+    const $header = document.createElement("h2")
+    $header.innerHTML = "김다은의 Notion"
+    $target.appendChild($header)
+}
diff --git a/src/pages/DocumentPage.js b/src/pages/DocumentPage.js
@@ -0,0 +1,54 @@
+import DocumentLists from "../components/DocumentLists.js"
+import Footer from "../components/Footer.js"
+import Header from "../components/Header.js"
+import { deleteDocument, postDocument, fetchDocumentLists } from "../utils/requset.js"
+import { updateDocumentTitle, push } from "../utils/router.js"
+
+
+export default function DocumentPage({$target}){
+    const $page = document.createElement("div")
+    $target.appendChild($page)
+    $page.className = "document__page"
+
+    this.render = ()=>{    
+        $target.appendChild($page)
+    }
+
+    new Header({
+        $target : $page
+    })
+
+    const documentLists = new DocumentLists({
+        $target : $page,
+        initialState :[],
+        onRemove: async(id)=>{
+            await deleteDocument(id)
+            push("/")
+            updateDocumentList()
+        },
+        onCreate : async(id)=>{
+            const newDocument = await postDocument(id)
+            push(`/documents/${newDocument.id}`)
+            updateDocumentList()
+        },
+    })
+
+    new Footer({
+        $target : $page,
+        onClick : async()=>{
+            const newDocument = await postDocument()
+            push(`/documents/${newDocument.id}`)
+            updateDocumentList()
+        }
+    })
+
+    const updateDocumentList = async()=>{ 
+        documentLists.setState(await fetchDocumentLists())
+    }
+
+    updateDocumentTitle(()=>{
+        updateDocumentList() 
+    })
+    updateDocumentList()
+}
+
diff --git a/src/pages/EditorPage.js b/src/pages/EditorPage.js
@@ -0,0 +1,40 @@
+import Editor from "../components/Editor.js"
+import {putDocument ,fetchEditor} from "../utils/requset.js"
+import { push, update} from "../utils/router.js"
+
+export default function EditorPage({$target, initialState}){
+    const $page = document.createElement("div")
+    $page.className = "editor__page"
+
+    this.render = ()=>{
+        $target.appendChild($page)
+    }
+
+    this.state = initialState
+    this.setState = async nextState =>{
+        this.state = nextState
+        const document = await fetchEditor(this.state.documentId)
+        editor.setState(document)
+        this.render()
+    }
+
+    let timer = null;
+    const editor = new Editor({
+        $target : $page,
+        initialState :{
+            title : "",
+            content :""},
+        onEditing : (document,isTitle)=>{
+            if(timer !== null){
+                clearTimeout(timer)
+            }
+            timer = setTimeout(async ()=>{
+                await putDocument(document)
+                if(isTitle){
+                    update()
+                }
+            }, 800)
+        }
+    })
+
+}
diff --git a/src/utils/api.js b/src/utils/api.js
@@ -0,0 +1,22 @@
+import {push} from "./router.js"
+
+export const API_END_POINT = "https://kdt-frontend.programmers.co.kr"
+
+export const request = async (url, options = {}) => {
+    try{
+        const res = await fetch(`${API_END_POINT}${url}`,{
+            ...options,
+            headers :{
+                "Content-Type" : "application/json", //데이터 형식을 json으로 명시합니다.
+                "x-username" : "kimdaeun"
+            }
+        })
+        if(res.ok){
+            return res.json()
+        }
+        throw new Error("API 호출 오류")
+    }catch(e){
+        console.log(e.message)
+        push("/")
+    }
+}
diff --git a/src/utils/requset.js b/src/utils/requset.js
@@ -0,0 +1,55 @@
+import { request } from "./api.js"
+
+//document를 삭제합니다
+export const deleteDocument = async(id)=>{
+    await request(`/documents/${id}`, {
+        method : "DELETE"
+    })
+
+}
+
+//하위document 또는 상위document를 생성합니다
+export const postDocument = async (id)=>{
+    if(id){
+        return await request("/documents", { 
+            method : "POST",
+            body : JSON.stringify({
+                title : "제목 없음",
+                parent : `${id}`
+            })
+        })
+    }else{
+        return await request("/documents", { 
+            method : "POST",
+            body : JSON.stringify({
+                title : "",
+                parent : ""
+            })
+        })
+    }
+}
+
+//document를 수정합니다.
+export const putDocument = async(document)=>{
+    return await request(`/documents/${document.id}`, {
+        method : "PUT",
+        body : JSON.stringify({
+            title : document.title,
+            content : document.content
+        })
+    })
+}
+
+//특정 document를 불러옵니다.
+export const fetchEditor = async(documentId)=>{
+    const document = await request(`/documents/${documentId}`)
+    return document
+}
+
+
+//전체 document를 불러옵니다.
+export const fetchDocumentLists = async() =>{
+    const lists = await request("/documents")
+    return lists
+}
+