[감정 일기장 만들기] diary페이지(상세페이지)

대략적인 그림 그리기

1) 헤더 섹션 : myheader + mybutton 사용
2) 오늘의 감정 + 이미지 (선택된 id 사용해서 이미지, 감정점수 가져오기)
3) 오늘의 일기 => id 가져와서 content 보여주기

가장 먼저 pathVariable 방식으로 페이지 알아보게 해주기

edit 페이지와 동일

  const navigate = useNavigate();
  //일기 존재할때는 state에 할당해줘야함
  const [data, setData] = useState();
  const { id } = useParams();
  console.log(id);
  //우리 페이지는 상세페이지에 id값을 항상 받아올것임!(없는 경우는 없음)
  //useParams - 리액트가 공식 제공하는 hook은 아니지만, 사용자 정의 hook(custom hooks)
  // 1️⃣ 제일 먼저 데이터 받아가지고 와서 그 페이지 알아보는 작업을 해야함
  const diaryList = useContext(DiaryStateContext);
  console.log(diaryList);
  useEffect(() => {
    if (diaryList.length >= 1) {
      const targetDiary = diaryList.find(
        (it) => parseInt(it.id) === parseInt(id)
      );
      console.log(targetDiary);
      if (targetDiary) {
        //일기 존재할때
        setData(targetDiary);
      } else {
        //일기 없을때 (홈으로 돌아가기)
        alert("없는 일기입니다.");
        navigate("/", { replace: true });
      }
    }
  }, [id, diaryList]);

페이지 구현

=> 날짜 데이터를 알아보게 해줘야하므로
DiaryEditor의 getStringDate함수 갖다써야함!
=> 중복 코드 관리는
util > date.js (export 시켜주고)

=> 필요한 컴포넌트에 import 해서 쓰기

=> 확인할때는 꼭 이런식으로 확인할것

첫번째 섹션 완성

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

import { getStringDate } from "../util/date";

const Diary = () => {
  const navigate = useNavigate();
  //일기 존재할때는 state에 할당해줘야함
  const [data, setData] = useState();
  const { id } = useParams();
  console.log(id);
  //우리 페이지는 상세페이지에 id값을 항상 받아올것임!(없는 경우는 없음)
  //useParams - 리액트가 공식 제공하는 hook은 아니지만, 사용자 정의 hook(custom hooks)
  // 1️⃣ 제일 먼저 데이터 받아가지고 와서 그 페이지 알아보는 작업을 해야함
  const diaryList = useContext(DiaryStateContext);
  console.log(diaryList);
  useEffect(() => {
    if (diaryList.length >= 1) {
      const targetDiary = diaryList.find(
        (it) => parseInt(it.id) === parseInt(id)
      );
      console.log(targetDiary);
      if (targetDiary) {
        //일기 존재할때
        setData(targetDiary);
      } else {
        //일기 없을때 (홈으로 돌아가기)
        alert("없는 일기입니다.");
        navigate("/", { replace: true });
      }
    }
  }, [id, diaryList]);

  //페이지 구현
  if (!data) {
    //데이터가 없다면
    return <div className="DiaryPage">로딩중입니다..</div>;
  } else {
    return (
      <div className="DiaryPage">
        <section>
          <MyHeader
            headText={`${getStringDate(new Date(data.date))}의 기록`}
            leftChild={
              <Mybutton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
            }
            rightChild={
              <Mybutton
                text={"수정하기"}
                type={"positive"}
                onClick={() => navigate(`/edit/${data.id}`)}
              />
            }
          />
        </section>
      </div>
    );
  }
};
export default Diary;

전에했던 emotionlist! util로 빼기

=> 왜? diaryList에서 받는 데이터 중에는 완전좋음이라는 emotion_dis가 없음!

=> 당연히 import 해서 사용해야함~

emotion.js 사용하기

    //✔️emotion.js 어떻게 쓰냐면
    const currEmotionData = emotionList.find(
      (it) => parseInt(it.emotion_id) === parseInt(data.emotion)
    );
    

=> 이렇게 필요한 데이터 전부 받아놓고 사용하면 됨!

Diary.js에서 두번째 섹션 구현하기

        <article>
          <section>
            <h4>오늘의 감정</h4>
            <div
              className={[
                "diary_img_wrapper",
                `diary_img_wrapper_${data.emotion}`,
              ].join(" ")}
            >
              <img src={currEmotionData.emotion_img} />
              <div className="emotion_des">{currEmotionData.emotion_des}</div>
            </div>
          </section>
        </article>

css styling

/* 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: 900;
}
.DiaryPage .diary_img_wrapper{
    background-color: #ececec;
    width: 250px;
    height: 250px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    /* 세로축 중심으로 적당히 가운데 위치 */
    justify-content: space-around;
}
.DiaryPage .emotion_des{
    font-size: 25px;
}
.DiaryPage img{
    width: 50%;
    margin: 0 auto;
}
/* .DiaryPage 안붙이면 안먹음 */
.DiaryPage .diary_img_wrapper_1{
    background: #f19959;
}
.DiaryPage .diary_img_wrapper_2{
    background: #f3c65e;
}
.DiaryPage .diary_img_wrapper_3{
    background: #f7dad2;
}
.DiaryPage .diary_img_wrapper_4{
    background: #63afa0;
}
.DiaryPage .diary_img_wrapper_5{
    background: #e47566;
}

마지막 섹션

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

css styling

.DiaryPage .diary_content_wrapper{
    width: 100%;
    /* left 먹이려면 부모 요소가 100%여야한다. */
    background-color: #ececec;
    border-radius: 5px;
    word-break: keep-all;
    /* 단어가 넘칠때 단어를 쪼개서 줄 바꾸지 말라는 속성 */
    overflow-wrap: break-word;
    /* 나중에 수정? 어느정도만 보이고 => 더보기 클릭시 다 보이게? */
    /* 길어지면 줄바꿈 */
    /* max-height: 500px;
    text-overflow: ellipsis;
    overflow:hidden; */
    /* ... */

}
.DiaryPage .diary_content_wrapper p{
    padding: 20px;
    text-align: left;
    font-size: 20px;
    font-weight: 400;
    line-height: 2.5;
    /* 줄과 줄사이의 height */
}