감성 일기장 만들기 -3 (Home)

페이지 구현 -홈(/)

홈페이지 구성 : 헤더, 필터링, 게시

 

1) Header 만들기

: 날짜를 저장하는 state가 필요하다

: "<" 버튼 누르면 한 달 전으로 가고, ">" 버튼 누르면 한달 후로 가도록 구현하기

 

 

2) 리스트 구현하기

-> 현재 data가 없기에 더미 데이터 만들어서 사용하기

  -> App.js에서 data 초기값을 빈 배열이 아니라 더미데이터로 두기

 

<App.js>

 

<Home.js>

1. Home 컴포넌트에서는 useContext, DiaryStateContext를 통해서 데이터를 공급받고 있다

 

2. 달을 앞/뒤로 넘기면 표시되는 일기도 달라져야 하기에 diaryList를 curDateState 날짜에 따라 가공하기

  -> 현재 달력에 맞는 연도&월에 맞는 일기 데이들을 뽑아내야 함

     -> useEffect 사용하기

curDate가 변하는 순간에만 새로 뽑아내야 함

-> ex) 12월의 첫날부터 마지막 날까지 작성된 일기들을 추출해야 함

        -> 12월 첫날의 시간(date.getTime) 이랑 12월 마지막 날의 시간(date.getTime) 구하고 필터링 해주기

             

          1)

        

          2)

-> curDate가 바뀔 때 뿐만 아니라 diaryList에 담긴 일기 목록에 변화 생길때도(일기 추가, 수정, 삭제) 적용돼야 해서

    dependency에 curDate, diaryList 둘다 들어가야 함!!

-> 0시 0분 0초로 last date를 잡는 게 아니라 그 날의 끝인 시간(23시 59분 59초)로 설정해놓으면 12월31일도 잘 포함

 

    3) useEffect를 활용하여 정상적으로 뽑았나 테스트 해보기

 

   4) 오래 걸리는 작업이므로 diaryList에 원소가 한 개 이상 있는 경우에만 실행하도록 조건문 붙여주기

---

이제 dummyList가 아닌 진짜 List를 만들어 실행해보기

-> List 컴포넌트 만들어주기

(components 디렉토리에 DiaryList.js 만들어주기)

 

<DiaryList.js>

 

<Home.js>

 

---

3) 필터링 만들기

 

 

value : ControlMenu가 랜더링하고 있는 select가 어떤 걸 선택하고 있는지

onChange : select가 선택한 게 변화했을 때 바꿀 기능을 하는 함수

optionList : select 태그 안에 들어갈 옵션

 

  1. 최신순 정렬

                                     -> 이 사진을 구현해볼 것이다! 아직 이대로 일기가 정렬되는 것 까지 구현할 건 아님!

 

 

 

 

 

이제 선택한 정렬기준에 따라 일기도 정렬되도록 구현해볼 것이다!

 

cf) diaryList.sort()를 해버리면 원본 배열 diaryList 자체가 변해버리기 때문에 아래와 같이 copyList를 만들어 구현한다

JSON.stringify(diaryList) : 배열을 JSON화 하여 문자열로 바꿔버fla

JSON.parse()를 통해 문자열을 다시 배열로 바꿔버린다

-> 원본 배열 diaryList는 변화시키지 않으면서 정렬할 수 있다

 

정렬하고자 하는 데이터가 객체로 이루어진 배열이기에 이를 정렬하려면 비교함수 만들어야 한다!!

---

감정 순으로 정렬하기

1. option 만들기 (filterOptionList)

filter state에 따라 필터링을 어떻게 해야 하는지 달라지므로 필터링 할 수 있는 함수(filterCallBack) 만들어주고나서(getProcessedList에) filter에 전달해주기

-> good, bad  (all은 모두 보여주므로 상관없음)

 

 

---

새 일기 쓰기 버튼

-> onClick 하면 /new 페이지로 넘어가야 함

   -> react-router-dom 이용하기 (useNavigate 함수 받아오기)

---

Header 스타일링

스타일링 하기 위해 <div> 추가해 나눠주기!

 

 

<App.css>

---

일기아이템 컴포넌트 만들기

<DiaryList.js>

 

DiaryItem.js 컴포넌트 만들어주기

 

                                                                  -> div 3개로 나누고 flex 속성주기

 

 

<DiaryItem.js>

 

<DiaryList.js>

이 부분을 DiaryItem으로 받게 수정하기

 

 

cf) 이미지 칸 배경색을 얼굴색과 똑같이 하면 이미지를 저렇게 변경할 수 있다

---

<일기내용>

-> 이미지와 버튼 사이의 전체를 공간으로 차지한다.

 

newDate까지만 하면 밀리세컨드로 나와 사람이 알아보기 어렵

따라서 이렇게 toLocalDateString()을 붙여줘야 2021.12.29 이런식으로 뜬다

 

 

slice를 해 목록에서 본문 일부만 보이게 할 수 있다!

---

수정하기 버튼 만들기

---

-> 왼쪽을 클릭하면 글 상세 페이지로 이동 / 수정하기 누르면 일기 수정 페이지로 이동

 -> 모두 onClick으로 발생을 하기에 react-router-dom으로부터  useNavigate라는 훅을 import 받아야함

 

 

* 일기 조회 페이지로 이동하는 함수인 goDetail 함수 만들어주고

   onClick={goDetail} 작성해주기

* 수정 페이지로 이동하는 함수인 goEdit 함수 만들어주고

   onClick={goEdit}로 작성해주기