[React] 45. New 페이지 기능 구현

1. Header

import Button from "../components/Button";
import Header from "../components/Header";
import Editor from "../components/Editor";
import { useNavigate } from "react-router-dom";

const New = () => {
  const nav = useNavigate();

  return (
    <div>
      <Header
        title={"새 일기 쓰기"}
        leftChild={<Button text={"< 뒤로가기"} onClick={() => nav(-1)} />}
      />
      <Editor />
    </div>
  );
};

export default New;

2. Editor 요소 조작 상태 관리

1. 작성 날짜 상태 관리

1. 새로운 상태 생성 및 초기화

const [input, setInput] = useState({
    createdDate: new Date(),
    emotionId: 3,
    content: "",
  });

<section className="date_section">
  <h4>오늘의 날짜</h4>
  <input
    name="createdDate"
    value={input.createdDate}
    type="date"
  />
</section>;

2. Date 객체 문자열로 변경하기

const getStringedDate = (targetDate) => {
  // 날짜 -> YYYY.MM.DD
  let year = targetDate.getFullYear();
  let month = targetDate.getMonth() + 1;
  let date = targetDate.getDate();
};

const getStringedDate = (targetDate) => {
  // 날짜 -> YYYY.MM.DD
  let year = targetDate.getFullYear();
  let month = targetDate.getMonth() + 1;
  let date = targetDate.getDate();

  // 월이나 일이 한자리 수일 때 두자리로 바꿔주기
  if (month < 10) {
    month = `0${month}`;
  }
  if (date < 10) {
    date = `0${date}`;
  }
};

const getStringedDate = (targetDate) => {
  // 날짜 -> YYYY.MM.DD
  let year = targetDate.getFullYear();
  let month = targetDate.getMonth() + 1;
  let date = targetDate.getDate();

  // 월이나 일이 한자리 수일 때 두자리로 바꿔주기
  if (month < 10) {
    month = `0${month}`;
  }
  if (date < 10) {
    date = `0${date}`;
  }
  
  return `${year}-${month}-${date}`
};

<section className="date_section">
  <h4>오늘의 날짜</h4>
  <input
    name="createdDate"
    value={getStringedDate(input.createdDate)}
    type="date"
  />
</section>;

3. 이벤트 핸들러 만들기

const onChangeInput = (e) => {
    console.log(e.target.name); // 어떤 요소에 입력이 들어온건지
    console.log(e.target.value); // 입력된 값은 무엇인지
  };

<section className="date_section">
  <h4>오늘의 날짜</h4>
  <input
    name="createdDate"
    onChange={onChangeInput}
    value={getStringedDate(input.createdDate)}
    type="date"
  />
</section>;

⚠️ 타입 에러 발생 원인?! ⚠️

const onChangeInput = (e) => {
    setInput({
      ...input,
      [e.target.name]: e.target.value,
    });
  };

const onChangeInput = (e) => {
    let name = e.target.name;
    let value = e.target.value;

    if (name === "createdDate") {
      value = new Date(value);
    }

    setInput({
      ...input,
      [name]: value,
    });
  };

2. 이모션 아이디 상태 관리

<section className="emotion_section">
  <h4>오늘의 감정</h4>
  <div className="emotion_list_wrapper">
    {emotionList.map((item) => (
      <EmotionItem
        onClick={() =>
          onChangeInput({
            target: {
              name: "emotionId",
              value: item.emotionId,
            },
          })
        }
        key={item.emotionId}
        {...item}
        isSelected={item.emotionId === emotionId}
      />
    ))}
  </div>
</section>;

3. content 상태 관리

<section className="content_section">
  <h4>오늘의 일기</h4>
  <textarea
    onChange={onChangeInput}
    value={input.content}
    name="content"
    placeholder="오늘은 어땠나요?"
  ></textarea>
</section>;

3. 새로운 일기 추가 기능

1. 새로운 일기 데이터 추가

const onClickSubmitButton = () => {
  onSubmit(input);
};

<section className="button_section">
  <Button text={"취소하기"} />
  <Button onClick={onClickSubmitButton} text={"작성 완료"} type={"POSITIVE"} />
</section>;

const { onCreate } = useContext(DiaryDispatchContext);

const onSubmit = (input) => {
  onCreate(input.createdDate, input.emotionId, input.content);
};

<div>
  <Header
    title={"새 일기 쓰기"}
    leftChild={<Button text={"< 뒤로가기"} onClick={() => nav(-1)} />}
  />
  <Editor onSubmit={onSubmit} />
</div>;

const onSubmit = (input) => {
    onCreate(input.createdDate.getTime(), input.emotionId, input.content);
  };

2. 제출 후 Home으로 이동 / 뒤로가기 방지

const onSubmit = (input) => {
    onCreate(input.createdDate.getTime(), input.emotionId, input.content);
    nav("/", { replace: true });
  };

const onSubmit = (input) => {
  onCreate(input.createdDate.getTime(), input.emotionId, input.content);
  nav("/", { replace: true });
};

3. 취소하기 버튼

const nav = useNavigate();

<section className="button_section">
  <Button onClick={() => nav(-1)} text={"취소하기"} />
  <Button onClick={onClickSubmitButton} text={"작성 완료"} type={"POSITIVE"} />
</section>;