혼자 이것저것 공부해보는/감정 일기장

[감정 일기장] Diary 페이지 구현하기

silver님 2025. 2. 12. 00:20

Diary 페이지 구현하기 📝💖

이번 시간에는 Diary 페이지를 구현했다.

이 페이지는 사용자가 작성한 일기를 편집할 수 있는 Edit 페이지와 함께 연결되어 있어, 사용자가 일기를 작성하거나 수정하는 흐름을 자연스럽게 이어준다. 🧑‍💻✨

 

1. Header 구성하기

 

먼저 Diary 페이지의 헤더를 구현했다.

헤더에는 뒤로가기 버튼, 현재 날짜 표시, 그리고 수정하기 버튼을 추가했다.

이를 통해 사용자는 쉽게 이전 페이지로 돌아가거나 일기를 수정할 수 있게 되었다. 🔙📅✍️

<Header 
  title={`${title} 기록`} 
  leftChild={<Button onClick={() => nav(-1)} text={"< 뒤로 가기"} />}
  rightChild={<Button onClick={() => nav(`/edit/${params.id}`)} text={"수정하기"} />} 
/>

 

2. Viewer 컴포넌트

 

Diary 페이지의 핵심은 바로 Viewer 컴포넌트다.

이 컴포넌트는 사용자가 작성한 일기를 보기 위해 감정, 일기 내용 등을 시각적으로 표현한다.

  • 오늘의 감정: 감정 이미지를 동적으로 받아와 보여주는 기능을 추가했다. 이 때 getEmotionImage 함수를 활용해 감정에 맞는 이미지를 반환하도록 했다.
  • 오늘의 일기: 일기 내용은 content prop을 통해 표시되며, 여백을 적당히 두어 가독성을 높였다.
const Viewer = ({ emotionId, content }) => {
  const emotionItem = emotionList.find((item) => String(item.emotionId) === String(emotionId));
  
  return (
    <div className="Viewer">
      <section className="img_section">
        <h4>오늘의 감정</h4>
        <div className={`emotion_img_wrapper emotion_img_wrapper_${emotionId}`}>
          <img src={getEmotionImage(emotionId)} />
          <div>{emotionItem.emotionName}</div>
        </div>
      </section>
      <section className="content_section">
        <h4>오늘의 일기</h4>
        <div className="content_wrapper">
          <p>{content}</p>
        </div>
      </section>
    </div>
  );
};

 

3. useDiary 커스텀 훅

 

Diary 페이지에서 사용자의 일기를 불러오는 중요한 역할을 하는 것이 useDiary라는 커스텀 훅이다.

  • 이 훅은 DiaryStateContext를 통해 전역 상태에서 일기 데이터를 가져오고, id가 일치하는 데이터를 찾는다.
  • 만약 존재하지 않는 일기라면, 사용자에게 경고창을 띄우고 메인 페이지로 리다이렉트한다.
const useDiary = (id) => {
  const data = useContext(DiaryStateContext);
  const [curDiaryItem, setCurDiaryItem] = useState();
  const nav = useNavigate();

  useEffect(() => {
    const currentDiaryItem = data.find((item) => String(item.id) === String(id));
    if (!currentDiaryItem) {
      window.alert("존재하지 않는 일기입니다.");
      nav("/", { replace: true });
    }
    setCurDiaryItem(currentDiaryItem);
  }, [id]);

  return curDiaryItem;
};

 

4. 날짜 포맷팅

getStringedDate 유틸리티 함수는 날짜를 문자열 형식으로 변환하여, 사용자에게 보기 좋은 형태로 날짜를 보여준다. 이는 Diary 페이지의 날짜 표시에도 사용된다. 📅✨

const title = getStringedDate(new Date(createdDate));

 

5. Edit 페이지로 이동 


Diary 페이지에서 수정하기 버튼을 클릭하면 해당 일기의 Edit 페이지로 이동할 수 있다. 사용자는 일기를 수정하고 저장할 수 있다. 수정 기능을 구현할 때, useDiary 훅을 활용하여 일기 데이터를 불러오고, onUpdate와 onDelete 기능을 통해 데이터를 수정하거나 삭제할 수 있게 했다. 💬🔧

<Button onClick={() => nav(`/edit/${params.id}`)} text={"수정하기"} />

 

6. 전체 흐름

Diary 페이지는 전체적으로 사용자 경험을 고려하여 디자인과 기능을 구현했다.

Header에서 편리하게 뒤로 가기와 수정하기 버튼을 제공하고, Viewer 컴포넌트에서 감정과 일기를 시각적으로 보기 좋게 배치했다. useDiary 훅을 통해 일기 데이터를 불러오고, getStringedDate 함수를 활용해 날짜 포맷을 통일하여 일기를 더욱 깔끔하게 표시했다.

 

 

마무리 🎉

오늘은 Diary 페이지의 UI와 기능을 구현했다. 사용자가 쉽게 일기를 작성하고, 수정할 수 있도록 흐름을 디자인하고, 감정 이미지를 추가하여 일기를 더욱 생동감 있게 만들었다. UI뿐만 아니라 기능적인 부분도 신경 써서 사용자가 직관적으로 일기 내용을 확인하고 수정할 수 있도록 했다. 📝💖

728x90
반응형