02-06 코딩일기

HoJJANG94·2023년 2월 6일
0

오늘은 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도 주었다.


추가해야 할 것 / 고쳐야 할 것

  • mobile-size 에 맞추어 화면 재배치
  • diary 기능 추가 + 캘린더 삽입
  • 계속 유지보수 하며 체크하기
profile
안녕하세요 신입 프론트엔드 개발자 입니다.

0개의 댓글