(20).이정환_react.js강의_감정일기장_프로젝트_5강_Home 페이지 구현2(작성중..)

Home 페이지에 적용해야할 기능 :

기능1_ Header 버튼 '<' , '>'을 누를 시, 저번달, 다음달로 title 변경

기능2_ 기능1로 월이 변경될 때마다, 그의 해당월에 만들어진 시기들의 일기들로 items filter 하기

기능3_ Home에서 filter된 items를 DiaryList컴포넌트에 전달하여, map rendering 하기

기능4_ nav로 각 item의 상세조회, 수정 페이지 이동 nav 걸기 , '새 일기쓰기' 버튼으로 New 페이지 이동 걸기

기능5_ section의 '오래된 순' , '최신순' 정렬 기능 적용하기

● 어려웠던 항목 :

1_ setTitleMonth()로 Date 날짜의 월 값 차감, 추가 핸들러 구현

  const onDecreaseMonth = () => {
    //현재 시기를 조절하는 코드 기억
    setTitleMonth(
      new Date(titleMonth.getFullYear(), titleMonth.getMonth() - 1)
    );
  };
  const onIncreaseMonth = () => {
    setTitleMonth(
      new Date(titleMonth.getFullYear(), titleMonth.getMonth() + 1)
    );
  };

2_ App.jsx에서 mockData의 createDate 속성값 업데이트

//날짜데이터 넣는 방법 기억억
const mockData = [
  {
    id: 1,
    createDate: new Date("2025-01-22").getTime(),
    emotionState: "Normal",
    content: "1번 일기임 시발련아",
  },
  {
    id: 2,
    createDate: new Date("2024-12-22").getTime(),
    emotionState: "Good",
    content: "2번 일기임 시발련아",
  },
  {
    id: 3,
    createDate: new Date("2024-12-25").getTime(),
    emotionState: "Sex",
    content: "3번 일기임 시발련아",
  },
];

3_ Home.jsx 컴포넌트 외부에서, 날짜범웨에 따라 필터링된 diaries 반환 함수 작성

function getMonthScale(titleDate, diaries) {
  //이달의 시작 시간 변수 초기화

  const beginMonthTime = new Date(
    new Date(titleDate.getFullYear(), titleDate.getMonth(), 1, 0, 0, 0)
  ).getTime();
  const endMonthTime = new Date(
    new Date(titleDate.getFullYear(), titleDate.getMonth() + 1, 0, 23, 59, 59)
  ).getTime();

  return diaries.filter(
    (diary) =>
      beginMonthTime <= diary.createDate && diary.createDate <= endMonthTime
  );
}

4_ TimeStamp의 데이터로 날짜 텍스트 출력 법

//1737504000000 같은게 Date객체의 getTime()값임
createDate

// 1737504000000 를 "YYYY.MM.DD" 문자열로 출력법
new Date(createDate).toLocaleDateString() 

5_ section의 '오래된 순' , '최신순' 정렬 기능 적용하기

- Home.jsx

//최신순 , 오래된 순 정렬 구현

  const [sortType, setSortType] = useState("latest");

  const onChangeSort = (event) => {
    setSortType(event.target.value);
  };

  //diaries 정렬부
  const getSortedDiaries = (sortType) => {
    if (sortType === "latest") {
      return diaries.toSorted((a, b) => {
        return Number(b.createDate) - Number(a.createDate);
      });
    }
    return diaries.toSorted((a, b) => {
      return Number(a.createDate) - Number(b.createDate);
    });
  };

  const sortedData = getMonthScale(titleMonth, getSortedDiaries(sortType));