노션 (자바스크립트) 클론 코딩 (4) EditorPage - css수정 및 NewButton 만들기

우선 components폴더에 NewBtn.js 파일을 하나 만들어서  SidebarPage에서 생성해주도록 하겠습니다.

 

import NewBtn from './NewBtn.js'

export default function SidebarPage({ $target, initalState }) {
    this.state = initalState
    this.createTreeView = (data) => {
        let str = ''
        for (const key in data) {
            if (data[key].documents.length > 0) {
                str += `
                    <li class="dataList">
                        📄 ${data[key].title}
                        <button class="addBtn">➕</button>
                        <button class="delBtn">🗑️</button>
                        <ul>${this.createTreeView(data[key].documents)}</ul>
                    </li>`
            } else {
                str += `
                    <li class="dataList">
                        📄 ${data[key].title}
                        <button class="addBtn">➕</button>
                        <button class="delBtn">🗑️</button>
                    </li>`
            }
        }
        return str
    }

    const $page = document.createElement('div')
    $page.classList.add('listContainer')
    $page.innerHTML = `
        <ul>
            ${this.state
                .map(
                    (document) =>
                        `<li class="dataList">📄 ${document.title}
                        <button class="addBtn">➕</button>
                        <button class="delBtn">🗑️</button>
                    </li>
                    ${
                        document.documents.length > 0
                            ? `<ul> ${this.createTreeView(
                                  document.documents
                              )}</ul>`
                            : ''
                    }
                    `
                )

                .join('')}
        </ul>
    `
    $target.appendChild($page)

    const $newBtn = new NewBtn({ $target: $page })
}

 

NewBtn 생성자에 target : page를 넘겨주어 NewBtn 파일에 넘겨주도록 하겠습니다.

 

NewBtn.js

export default function NewBtn({ $target }) {
    const $newBtn = document.createElement('button')
    $newBtn.textContent = '+ New Button'
    $newBtn.className = 'newBtn'
    $target.appendChild($newBtn)
}

 

style.css

@import 'reset.css';

#app {
    display: flex;
    flex-decoration: row;
}

/* sidebar */
ul {
    list-style-type: circle;
}
li {
    margin-top: 4%;
}

.listContainer {
    width: 300px;
    height: 1000px;
    background-color: #f7f6f3;
    overflow: auto;
    resize: horizontal;
}

.dataList {
    margin: 10% 0;
    color: #808080;
}
.addBtn,
.delBtn {
    background-color: #f7f6f3;
    color: black;
    border: none;
}

.addBtn:hover,
.delBtn:hover {
    cursor: pointer;
}

.newBtn {
    background-color: #f7f6f3;
    border: none;
    font-size: 1.2rem;
    text-align: left;
    width: 100%;
    height: 20px;
    color: #696969;
}

.newBtn:hover {
    cursor: pointer;
    color: #000000;
}

 

그다음에는 EditorPage를 꾸며주도록 하겠습니다.

App.js에 EditorPage를 생성해주도록 하겠습니다.

const editorpage = new EditorPage({
        $target: $listContainer,
        initialState: editorDummyData,
    })

 

또한 상태값을 더미데이터로 넘겨주도록 하겠습니다.

 const editorDummyData = {
        title: '노션을 만들자',
        content: '노션을 만들기',
    }

export default function EditorPage({ $target, initialState }) {
    const $page = document.createElement('div')

    $page.className = 'editorPage '
    $page.innerHTML = `
        <input placeholder='제목없음'  class='editorTitle' value=${initialState.title}/>
        <textarea placeholder='내용입력하세요' class='editorContent' >${initialState.content}</textarea>
    `

    $target.appendChild($page)
}

style.css 파일에 추가해주세요

.editorPage {
    display: flex;
    flex-direction: column;
    margin: 10% 20%;
}

.editorTitle {
    border: none;
    font-size: 2.5rem;
    width: 1000px;

    outline: none;
}

.editorContent {
    margin-top: 30px;
    border: none;
    width: 1000px;

    height: 600px;
    font-size: 1.5rem;
    outline: none;

    resize: none;
}

 

EditorPage를 꾸미는것은 여기까지 하고 다음시간에 api를 이용해서 구현하겠습니다.