감정 일기장 -Edit 페이지

오늘은 감정 일기장의 일기를 수정할 수 있는 페이지인,

Edit page를 구현해보았다.

 

아래의 비교 이미지와 같이 New 페이지와 동일하게

DiaryEditor 컴포넌트를 사용하여 거의 동일한 형태를 띄고있다.

 

하지만, Edit 페이지는 기존에 적었던 일기의 정보를 받아와야 하며, 수정의 기능과 삭제의 기능이 있어야 한다.

 

따라서 Edit 페이지에서는 DiaryEditor에 isEdit이라는 props를 내려주어,

세부적인 사항이 isEdit 여부에 따라 변경되게 해주었다.

 

 

new와 edit 페이지 비교

 

일기 정보 불러오기

Edit과 originData의 상태가 변경할 때마다, originData의 정보를 불러와 useState를 이용해 저장해주어

날짜, 감정, 일기내용을 불러오도록 만들어주었다.

  useEffect(() => {
    if (isEdit) {
      setDate(getStringDate(new Date(parseInt(originData.date))));
      setEmotion(originData.emotion);
      setContent(originData.content);
    }
  }, [isEdit, originData]);

 

MyHeader

 

이전에 작성하였던 MyHeader에, isEdit에 따라 컴포넌트의 모양이 바뀌게 삼항연산자와 && 을 이용해주었다.

isEdit이 true라면 , headText를 ' 일기 수정하기' 로 설정하고 일기 삭제 기능을 가진 삭제 버튼을 추가해주었다. 

 

  // 일기 삭제 기능 추가
  const handleRemove = () => {
    if (window.confirm("정말 삭제하시겠습니까?")) {
      onRemove(originData.id);
      navigate("/", { reaplace: true });
    }
  };
.
.
.
<MyHeader
        headText={isEdit ? "일기 수정하기" : "새 일기 쓰기"}
        leftChild={
          <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
        rightChild={
          isEdit && (
            <MyButton
              text={"삭제하기"}
              type={"negative"}
              onClick={handleRemove}
            />
          )
        }
      />