노션 (자바스크립트) 클론 코딩 (3) 디자인 수정

export default function SidebarPage({ $target, initalState }) {
    this.state = initalState
    const $page = document.createElement('div')
    $page.innerHTML = 'sidebar'
    $target.appendChild($page)
}

 

저번 시간에 이어서 상태를  this.state = initalState 로 만들어서 사용합니다.

 

이를 통해 컴포넌트 내부에서 상태를 일관되게 관리할 수 있습니다.

 

map함수를 통해 state의 제목과 번호를 을 추출해서 <li>를 통해 화면에 띄우겠습니다.

export default function SidebarPage({ $target, initalState }) {
    this.state = initalState
    const $page = document.createElement('div')
    $page.innerHTML = `
        <ul>
            ${this.state
                .map((row) => `<li>${row.id} / ${row.title}</li>`)
                .join('')}
        </ul>
    `
    $target.appendChild($page)
}

 

다음은 재귀형태로 자식 요소까지 화면에 나오게 css부분을 수정하겠습니다.

 

 

화면에 보이는것 처럼 기본적으로 주는 공백들을 제거하는 방법은 styles폴더에 reset.css 파일을 하나 만들어준 후

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

 

그 다음 style.css파일에

@import 'reset.css';

 

해줍니다.

빈 공백에 사라지게 됩니다.

 

또한 sidebarpage에서 페이지에 클래스명을 추가해준후 css도 수정하겠습니다.

 

SidebarPage.js

export default function SidebarPage({ $target, initalState }) {
    this.state = initalState

    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>`
                )
                .join('')}
        </ul>
    `
    $target.appendChild($page)
}

 

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;
}

 

하지만 자식요소인 id 2,3 가 안들어와서 재귀 형태로 데이터들을 불러오게 하겠습니다.

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)
}