오늘은 react로 만들던 diary앱을 수정 보완 하였다.
앞전에 new note 가 없을 시 randerpage 로 보여주고 있었는데 randerpage 를 Home , Main 에서 빼고 새롭게 nocontent 화면을 만들었다.
<div className="note_container">
<div className="note_box">
{note.map((item) => (
<div className="note_contents" key={uuid()}>
<div className="note_title">
<span>{item.title}</span>
<div className="note_modefied">
<p>Date : {item.modefied}</p>
</div>
</div>
<div className="note_item">
<p>{item.text && item.text.substr(0, 300) + '...'}</p>
</div>
</div>
))}
</div>
</div>
대략적인 코드 구조는 이렇게 짜게 되었고
note_container 안에 flex로 배치
를 시키고
note_box 에는 grid
를 주어 각 item 들이 size에 맞게 배치 될 수 있도록 하였다. +overflow-y : auto
를 주어 사이즈가 넘어 갈 시 스크롤 (scroll도 커스터 마이징)
note_contents를
카드 형식으로 작성했다.
map
을 이용해 화면에 뿌리기에 key값으로react-uuid
를 써서 key도 주었다.
추가해야 할 것 / 고쳐야 할 것