감정일기장 - Diary 페이지

오늘은 기존의 적었던 다이어리의 상세 내용을 볼 수 있는 Diary page를 구현하였다.

 

 

정보 불러오기

params로 전달받은 diary의 id를 설정해준뒤,

useEffect를 이용하여, id와 diaryList가 변경될 때마다 id에 해당하는 diary를 찾아

setData로 data의 상태를 변경시켜, 정보를 전달 받는다.

 

 useEffect(() => {
    if (diaryList.length >= 1) {
      const targetDiary = diaryList.find(
        (it) => parseInt(it.id) === parseInt(id)
      );

      //일기 존재 여부에 따라 설정
      if (targetDiary) {
        setData(targetDiary);
      } else {
        alert("없는 일기입니다.");
        navigate("/", { replace: true });
      }
    }
  }, [id, diaryList]);

 

MyHeader

MyHeader에서는  data의 날짜를 headText로 설정해주고

두 개의 MyButton을 사용하여,

각각 뒤로 가기 기능, edit으로 이동하는 기능을 구현해준다. 

       <MyHeader
          headText={`${getStringDate(new Date(data.date))} 기록`}
          leftChild={
            <MyButton text={"뒤로가기"} onClick={() => navigate(-1)}></MyButton>
          }
          rightChild={
            <MyButton
              text={"수정하기"}
              onClick={() => navigate(`/edit/${data.id}`)}
            />
          }

 

 

 

diary_img_wrapper

diary_img_wrapper는 배열과 join을 사용하여

현재 감정의 번호를 넣은 class를 지정해주고, 이미지와 배경의 색을 같게 만들어 주었다.

 

내부에는 해당하는 감정의 이미지와 감정의 설명을 추가해주었다.

        
              <div className={[
                "diary_img_wrapper",
                `diary_img_wrapper_${data.emotion}`,
              ].join(" ")}>
              <img src={curEmotionData.emotion_img} />
              <div className="emotion_descript">
                {curEmotionData.emotion_descript}
              </div>

 

diary_content_wrapper

 현재 data의 내용을, 즉 일기의 내용을 나타내주었다. 

    <div className="diary_content_wrapper">
              <p>{data.content}</p>
            </div>