[React] 페이지 구현 - 일기 상세(‘/diary’)

1️⃣ 선택 일기의 아이디에 맞는 링크 찾기

import { useContext, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { DiaryStateContext } from "../App";

const Diary = () => {
  const { id } = useParams();
  const diaryList = useContext(DiaryStateContext);
  const navigate = useNavigate();
  const [date, setDate] = useState();

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

      if (targetDiary) {
        setDate(targetDiary);
      } else {
        alert("없는 일기입니다.");
        navigate("/", { replace: true });
      }
    }
  }, [id, diaryList]);
  return <div></div>;
};

export default Diary;

DiaryStateContext에서 다이어리 리스트를 받아와서 해당 일기를 찾고, 그 targetDiary 가 있다면 setDate를 date로 내용을 바꾸고, 일기가 없다면 홈으로 이동시킨다.

2️⃣ 헤더 만들기

데이터가 없다면 “로딩중입니다..”를 출력하고 데이터가 있다면 페이지를 출력한다.

헤더에 있는 버튼들은 뒤로가기와 수정 버튼이 있는데, 여기서 뒤로 가기는 navigate(-1) 을 하면 되고, 수정은 `navigate(/edit/${data.id})` 을 통해서 구현하면 된다.

if (!data) {
  return <div className="DiaryPage">로딩중입니다,,,</div>;
} else {
  return (
    <div className="DiaryPage">
      <MyHeader
        headText={`${getStringDate(new Date(data.date))} 기록`}
        leftChild={
          <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
        rightChild={
          <MyButton
            text={"수정"}
            onClick={() => navigate(`/edit/${data.id}`)}
          />
        }
      ></MyHeader>
    </div>
  );
}

3️⃣ 감정 이미지 섹션 만들기

해당 각각의 데이터에는 감정 아이디만 남아있으므로 “완전 좋음”, “쫗음” 등의 텍스트를 출력할 수 없다. 근데 이 부분은 DiaryEditor 컴포에서 사용하였으므로 emotionList를 가져와서 util 폴더에 넣어주어서 DiaryEditor와 Diary 컴포 두 개에 모두 사용한다.

그리고 find 함수를 통해서 해당 감정 id와 일치하는 객체를 curEmotionData로 받아온다. curEmotionData 객체에는 아이디, descript, img 가 들어있다.

if (!data) {
  return <div className="DiaryPage">로딩중입니다,,,</div>;
} else {
  const curEmotionData = emotionList.find(
    (it) => parseInt(it.emotion_id) === parseInt(data.emotion)
  );

  return (
    <div className="DiaryPage">
      <MyHeader
        headText={`${getStringDate(new Date(data.date))} 기록`}
        leftChild={
          <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
        rightChild={
          <MyButton
            text={"수정하기"}
            onClick={() => navigate(`/edit/${data.id}`)}
          />
        }
      ></MyHeader>
      <article>
        <section>
          <h4>오늘의 감정</h4>
          <div
            className={[
              "diary_img_wrapper",
              `diary_img_wrapper_${data.emotion}`,
            ].join(" ")}
          >
            <img src={curEmotionData.emotion_img} />
            <div className="emotion_descript">
              {curEmotionData.emotion_descript}
            </div>
          </div>
        </section>
      </article>
    </div>
  );
}

스타일링

/* Diary */
.DiaryPage {
}
.DiaryPage section {
  width: 100%;
  margin-bottom: 100px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.DiaryPage h4 {
  font-size: 22px;
  font-weight: bold;
}
.DiaryPage .diary_img_wrapper {
  background-color: #ececec;
  width: 250px;
  height: 250px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.DiaryPage .emotion_descript {
  font-size: 25px;
}
.DiaryPage .diary_img_wrapper_1 {
  background-color: #64c964;
}
.DiaryPage .diary_img_wrapper_2 {
  background-color: #9dd772;
}
.DiaryPage .diary_img_wrapper_3 {
  background-color: #fdce17;
}
.DiaryPage .diary_img_wrapper_4 {
  background-color: #fd8446;
}
.DiaryPage .diary_img_wrapper_5 {
  background-color: #fd585f;
}
.DiaryPage .emotion_descript {
  font-size: 25px;
  color: white;
}

4️⃣ content 가져오기

<section>
  <h4>오늘의 일기</h4>
  <div className="diary_content_wrapper">
    <p>{data.content}</p>
  </div>
</section>

스타일링

.DiaryPage .diary_content_wrapper {
  width: 100%;
  background-color: #ececec;
  border-radius: 5px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.DiaryPage .diary_content_wrapper p {
  padding: 28px;
  text-align: left;
  font-size: 20px;
  font-family: "Yeon sung";
  font-weight: 400;
  line-height: 2.5;
}