[감정 일기장] Home 페이지 구현하기 2. 기능

Home 페이지 구현하기 2. 기능 🚀

지난번에 Home 페이지의 기본적인 틀을 잡았다면, 이번에는 날짜 필터링, 정렬 기능, 그리고 상세 페이지 및 수정 페이지 이동 기능을 추가했다. 이 과정에서 기존 코드에 몇 가지 중요한 수정을 적용했다. 🛠️

---

📌 1. 실시간 날짜 반영 기능

 

Home 페이지의 Header에서 현재 연도를 가져와 월을 표시하도록 했다. useState를 사용하여 pivotDate 상태를 관리하고, 좌우 버튼을 클릭할 때마다 한 달씩 이동할 수 있도록 구현했다.

<Header
  title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth() + 1}월`}
  leftChild={<Button onClick={onDecreaseMonth} text={"<"}/>}
  rightChild={<Button onClick={onIncreaseMonth} text={">"}/>}
/>

 

이제 버튼을 누르면 이전 달 또는 다음 달의 일기만 볼 수 있다. 📅

---

📌 2. 날짜 필터링 기능 ✨

 

해당 월의 일기만 보이도록 데이터를 필터링했다. getMonthlyData 함수를 만들어 pivotDate의 해당 월 데이터만 걸러냈다.

const getMonthlyData = (pivotDate, data) => {
  const beginTime = new Date(
    pivotDate.getFullYear(),
    pivotDate.getMonth(),
    1, 0, 0, 0
  ).getTime();

  const endTime = new Date(
    pivotDate.getFullYear(),
    pivotDate.getMonth() + 1,
    0, 23, 59, 59
  ).getTime();

  return data.filter(
    (item) => beginTime <= item.createdDate && item.createdDate <= endTime
  );
};

 

이제 1월이라면 1월의 일기만, 2월이라면 2월의 일기만 보이게 된다. 🎯

---

📌 3. 오래된 순, 최신 순 정렬 기능 🗂️

 

 

정렬 기능을 위해 sortType 상태를 추가했다.

select 태그에서 최신순 또는 오래된 순을 선택하면 데이터가 정렬되도록 했다.

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

const getSortedDate = () => {
  return data.toSorted((a, b) => {
    return sortType === 'oldest'
      ? Number(a.createdDate) - Number(b.createdDate)
      : Number(b.createdDate) - Number(a.createdDate);
  });
};

 

정렬 타입을 선택하면 해당 방식대로 정렬된 일기 목록을 볼 수 있다. 🏗️

---

📌 4. 상세 조회 및 수정 페이지 이동 기능 🔍✏️

 

일기를 클릭하면 상세 페이지(/diary/:id), 수정하기 버튼을 누르면 수정 페이지(/edit/:id)로 이동하도록 useNavigate를 사용해 구현했다.

const DiaryItem = ({ id, emotionId, createdDate, content }) => {
  const nav = useNavigate();

  return (
    <div className="DiaryItem">
      <div onClick={() => nav(`/diary/${id}`)} className={`img_section img_section_${emotionId}`}>
        <img src={getEmotionImage(emotionId)} />
      </div>
      <div onClick={() => nav(`/diary/${id}`)} className="info_section">
        <div className="created_date">{new Date(createdDate).toLocaleDateString()}</div>
        <div className="content">{content}</div>
      </div>
      <div onClick={() => nav(`/edit/${id}`)} className="button_section">
        <Button text={"수정하기"} />
      </div>
    </div>
  );
};

 

이제 특정 일기를 클릭하면 상세 페이지에서 내용을 볼 수 있고, 수정 버튼을 누르면 해당 일기를 수정할 수 있는 페이지로 이동하게 된다. 🎯

---

📌 5. 새 일기 쓰기 버튼 📝

Home 페이지에서 바로 새로운 일기를 작성할 수 있도록 버튼을 추가했다.

<Button onClick={() => nav("/new")} text={"새 일기 쓰기"} type={"POSITIVE"} />

 

버튼을 누르면 /new 페이지로 이동하여 새로운 일기를 작성할 수 있다. ✨

---

🎯 회고 📌

이번 구현에서 가장 어려웠던 부분은 날짜 필터링과 정렬 기능이었다. Home 페이지에서 데이터를 필터링하고, props를 통해 정렬된 데이터를 전달하는 구조가 처음엔 익숙하지 않았다. 하지만 직접 구현하면서 useState, filter, sort 등을 활용하는 법을 더 깊이 이해할 수 있었다.

특히 정렬 기능에서 getSortedDate 함수를 만들고, sortType을 useState로 관리하는 방식이 중요한 포인트였다. 📌

앞으로는 Context API를 활용해서 전역 상태 관리를 해보는 것도 좋을 것 같다. 🚀

---

이제 기본적인 Home 페이지 기능이 완성되었고, 다음으로는 일기 작성 및 수정 기능을 더 다듬어 볼 예정이다. 🔥