일기장 만들기 - New 페이지

오늘은 일기장의 new 페이지를 만들어 주었다.

new페이지는 새로운 일기를 쓸 때 사용하는 페이지로, 

기본적으로 일기에 들어갈 날짜, 감정, 내용을 적어서 새로운 일기를 추가해주는 역할을 한다.

 

 

Header

우선 헤더부분에는 기존에 제작한 MyHeader를 이용하여 구현하였다.

 

headText 부분에는 '새 일기쓰기'라는 텍스트를 넣어주었고

leftChild에는 기존에 생성했던 버튼 컴포넌트를 부착하여, 버튼을 클릭 시 뒤로 이동하게 설정해주었다.

 

 

 <MyHeader
        headText={isEdit ? "일기 수정하기" : "새 일기 쓰기"}
        leftChild={
          <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }/>

 

 

 

input_date

일기의 날짜를 지정해 줄 수 있는 input태그이다.

날짜를 ISOString방식으로 변환하여 기본값으로 설정하였고,

원하는 날짜를 클릭 시에 변경이 되도록 설정해주었다.

<input
	className="input_date"
    type="date"
    value={date}
    onChange={(e) => setDate(e.target.value)}
/>

 

 

input_box emotion_list_wrapper

일기의 감정을 지정해줄 수 있는 div 요소이다.

1-5까지의 감정의 배열을 순회하며, EmotionItem에 클릭시,

클릭한 감정의 className에 `EmotionItem_on_${emotion_id}` 추가

<div className="input_box emotion_list_wrapper">
            {emotionList.map((it) => (
              <EmotionItem
                key={it.emotion_id}
                {...it}
                onClick={handleClickEmote}
                isSelected={it.emotion_id === emotion}
              />
            ))}
          </div>

 

EmotionItem

const EmotionItem = ({
  emotion_id,
  emotion_img,
  emotion_descript,
  onClick,
  isSelected,
}) => {
  return (
    <div
      onClick={() => onClick(emotion_id)}
      className={[
        "EmotionItem",
        isSelected ? `EmotionItem_on_${emotion_id}` : `EmotionItem_off`,
      ].join(" ")}
    >
      <img src={emotion_img} />
      <span>{emotion_descript}</span>
    </div>
  );
};

 

input_box text_wrapper

일기의 내용을 작성하는 div 요소이고,

하위의 요소의 textarea에 ref를 준 뒤, 글자를 입력할 때마다, content의 state를 변경하게 만들어주었다.

          <div className="input_box text_wrapper">
            <textarea
              placeholder="오늘은 어땠나요?"
              ref={contentRef}
              value={content}
              onChange={(e) => setContent(e.target.value)}
            />
          </div>

 

 

control_box

취소하기, 작성완료 두 가지 버튼을 각각 생성한 뒤,

취소하기 버튼은 뒤로가기 , 작성완료 버튼에는 일기를 추가하도록 하였다.

 

작성완료 버튼을 누를 때,

글의 길이가 1보다 작을경우(글이 아직 작성이 되지 않았을 때) 

ref를 이용하여 textarea에 focus를 주고 작동이 안되게 종료하였다.

그 후 새로운 일기를 생성해준다.

    //클릭 시 일기 추가
  const handleSubmit = () => {
    if (content.length < 1) {
      contentRef.current.focus();
      return;
    }

    if (
      window.confirm(
        "새로운 일기를 작성하시겠습니까?"
      )
    ) {

      onCreate(date, content, emotion);

    }

    //뒤로가기를 하더라도 방금의 페이지로 돌아오지 않음
    navigate("/", { replace: true });
  };
    
    .
    .
    .
    <div className="control_box">
          <MyButton text={"취소하기"} onClick={() => navigate(-1)} />
          <MyButton
            text={"작성완료"}
            type={"positive"}
            onClick={handleSubmit}
          />
        </div>