[감정 일기장 만들기] new페이지

header 구현

import { useNavigate } from "react-router-dom";
import Mybutton from "../components/Mybutton";
import MyHeader from "../components/MyHeader";

const New = () => {
  //뒤로가기하기 하기 위한 navigate
  const navigate = useNavigate();
  return (
    <div>
      <MyHeader
        headText={"새 일기쓰기"}
        leftChild={
          <Mybutton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
      />
    </div>
  );
};
export default New;

두번째 섹션 - 오늘은? 구현

=> setState가 바뀌는건 여기서 확인가능

컴포넌트를 옮겨서 구현하는게 더 효율적이기 때문에 DiaryEditor로 옮김

1️⃣ import부터 옮김
2️⃣ 순서대로 옮기는데 RETURN을 마지막으로~
3️⃣ 다 옮기면 DiaryEditor import하면 끝

import { useNavigate } from "react-router-dom";
import React, { useState } from "react";

import Mybutton from "./Mybutton";
import MyHeader from "./MyHeader";

//1️⃣ 페이지로 들어오면 오늘 날짜로 자동 선택되게 되어있어야하므로
const getStringDate = (date) => {
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  if (month < 10) {
    month = `0${month}`;
  }
  if (day < 10) {
    month = `0${day}`;
  }
  return `${year}-${month}-${day}`;
};

const DiaryEditor = () => {
  //input에 저장되는 숫자를 state로 저장하기
  const [date, setDate] = useState(getStringDate(new Date()));
  // 2️⃣ getStringDate 사용한 값 확인
  console.log(getStringDate(new Date()));
  const navigate = useNavigate();
  return (
    <div className="DiaryEditor">
      <MyHeader
        headText={"새 일기쓰기"}
        leftChild={
          <Mybutton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
      />
      <div>
        <section>
          <h4>오늘은 언제인가요?</h4>
          <div className="input_box">
            <input
              className="input_date"
              value={date}
              onChange={(e) => setDate(e.target.value)}
              type="date"
            />
          </div>
        </section>
      </div>
    </div>
  );
};
export default DiaryEditor;

css 스타일링

/* DiaryEditor */
.DiaryEditor section{
    margin-bottom: 40px;
}
.DiaryEditor h4{
    font-size: 22px;
    font-weight: bold;
}
.DiaryEditor .input_date{
    border: none;
    border-radius: 5px;
    background-color: #ececec;
    padding: 10px 20px;
    cursor: pointer;
    font-family: 'KyoboHand';
    font-size: 19px;
}

두번째 섹션

DiaryEditor.js

import { useNavigate } from "react-router-dom";
import React, { useState } from "react";

import Mybutton from "./Mybutton";
import MyHeader from "./MyHeader";
import EmotionItem from "./EmotionItem";

// 1️⃣ 감정에 대한 배열 만들기
const emotionList = [
  {
    emotion_id: 1,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion1.png`,
    emotion_des: "완전 좋음",
  },
  {
    emotion_id: 2,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion2.png`,
    emotion_des: "좋음",
  },
  {
    emotion_id: 3,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion3.png`,
    emotion_des: "그럭저럭",
  },
  {
    emotion_id: 4,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion4.png`,
    emotion_des: "나쁨",
  },
  {
    emotion_id: 5,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion5.png`,
    emotion_des: "완전 나쁨",
  },
];
const getStringDate = (date) => {
  return date.toISOString().slice(0, 10);
  //toISOString은 내가 원하는날짜를 2023-01-11이런식으로 잘라주는 메소드임
};

const DiaryEditor = () => {
  // 어떤 감정을 선택했는지 저장하는 state만들기
  // 실질적으로 클릭하는건? EmotionItem에서 하기때문에 => 거기로 prop 보내야함
  const [emotion, setEmotion] = useState(3);
  //클릭시 state 바뀌는 함수 만들기
  const handleClickEmote = (emotion) => {
    setEmotion(emotion);
  };
  //input에 저장되는 숫자를 state로 저장하기
  const [date, setDate] = useState(getStringDate(new Date()));
  console.log(getStringDate(new Date()));
  const navigate = useNavigate();
  return (
    <div className="DiaryEditor">
      <MyHeader
        headText={"새 일기쓰기"}
        leftChild={
          <Mybutton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
      />
      <div>
        <section>
          <h4>오늘은 언제인가요?</h4>
          <div className="input_box">
            <input
              className="input_date"
              value={date}
              onChange={(e) => setDate(e.target.value)}
              type="date"
            />
          </div>
        </section>
        <section>
          <h4>오늘의 감정</h4>
          <div className="input_box emotion_list_wrapper">
            {/* 전달할 내용이 많으므로 새로 컴포넌트 만들기(EmotionItem) */}
            {emotionList.map((it) => (
              <EmotionItem
                key={it.emotion_id}
                {...it}
                onClick={handleClickEmote}
                // emotion이 선택되었는지 아닌지 알기 위해서 t/f 값 전달하기(className에서도 활용)
                isSelected={it.emotion_id === emotion}
              />
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};
export default DiaryEditor;

EmotionItem.js

const EmotionItem = ({
  emotion_id,
  emotion_img,
  emotion_des,
  onClick,
  isSelected,
}) => {
  return (
    <div
      onClick={() => onClick(emotion_id)}
      className={[
        "EmotionItem",
        isSelected ? `EmotionItem_on_${emotion_id}` : `EmotionItem_off`,
      ].join(" ")}
    >
      {/*click시 onClick에 emotion_id전달돼서 DiaryEditor에서 알아봄 */}
      <img src={emotion_img} />
      <span>{emotion_des}</span>
    </div>
  );
};
export default EmotionItem;

css 스타일링

/* EmotionItem */
.EmotionItem{
    cursor: pointer;

    border-radius: 5px;
    padding-top: 20px;
    padding-bottom: 20px;

    display: flex;
    flex-direction: column;
    /* column은 이미지와 글씨를 아래로 내리기 위함 */
    justify-content: center;
    align-items: center;
}
.DiaryEditor .emotion_list_wrapper{
    display: grid;
    grid-template-columns: repeat(5,auto);
    gap: 2%;
}
.DiaryEditor img{
    width: 50%;
    margin-bottom: 10px;
}
.DiaryEditor span{
    font-size: 18px;
}

.EmotionItem_off{
    background-color: #ececec;
}
.EmotionItem_on_1{
    background: #f19959;
}
.EmotionItem_on_2{
    background: #f3c65e;
}
.EmotionItem_on_3{
    background: #f7dad2;
}
.EmotionItem_on_4{
    background: #63afa0;
}
.EmotionItem_on_5{
    background: #e47566;
}

세번째 섹션 - 오늘의 일기

DiaryEditor.js

import { useNavigate } from "react-router-dom";
import React, { useRef, useState } from "react";

import Mybutton from "./Mybutton";
import MyHeader from "./MyHeader";
import EmotionItem from "./EmotionItem";

const emotionList = [
  {
    emotion_id: 1,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion1.png`,
    emotion_des: "완전 좋음",
  },
  {
    emotion_id: 2,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion2.png`,
    emotion_des: "좋음",
  },
  {
    emotion_id: 3,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion3.png`,
    emotion_des: "그럭저럭",
  },
  {
    emotion_id: 4,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion4.png`,
    emotion_des: "나쁨",
  },
  {
    emotion_id: 5,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion5.png`,
    emotion_des: "완전 나쁨",
  },
];
const getStringDate = (date) => {
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  if (month < 10) {
    month = `0${month}`;
  }
  if (day < 10) {
    month = `0${day}`;
  }
  return `${year}-${month}-${day}`;
};

const DiaryEditor = () => {
  //1️⃣ 일기 데이터 넣을 state 만들기
  const [content, setContent] = useState("");
  //2️⃣ focus기능 넣을 ref hook 미리 추가
  const contentRef = useRef();
  const [emotion, setEmotion] = useState(3);
  const handleClickEmote = (emotion) => {
    setEmotion(emotion);
  };
  const [date, setDate] = useState(getStringDate(new Date()));
  console.log(getStringDate(new Date()));
  const navigate = useNavigate();
  return (
    <div className="DiaryEditor">
      <MyHeader
        headText={"새 일기쓰기"}
        leftChild={
          <Mybutton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
      />
      <div>
        <section>
          <h4>오늘은 언제인가요?</h4>
          <div className="input_box">
            <input
              className="input_date"
              value={date}
              onChange={(e) => setDate(e.target.value)}
              type="date"
            />
          </div>
        </section>
        <section>
          <h4>오늘의 감정</h4>
          <div className="input_box emotion_list_wrapper">
            {/* 전달할 내용이 많으므로 새로 컴포넌트 만들기(EmotionItem) */}
            {emotionList.map((it) => (
              <EmotionItem
                key={it.emotion_id}
                {...it}
                onClick={handleClickEmote}
                // emotion이 선택되었는지 아닌지 알기 위해서 t/f 값 전달하기(className에서도 활용)
                isSelected={it.emotion_id === emotion}
              />
            ))}
          </div>
        </section>
        <section>
          <h4>오늘의 일기</h4>
          <div className="input_box text_wrapper">
            <textarea
              placeholder="오늘은 어땠나요"
              ref={contentRef}
              value={content}
              onChange={(e) => setContent(e.target.value)}
            />
          </div>
        </section>
      </div>
    </div>
  );
};
export default DiaryEditor;

app.css(스타일링)

.DiaryEditor textarea{
    font-family: 'KyoboHand';
    font-size: 20px;

    box-sizing: border-box;
    width: 100%;
    min-height: 200px;
    resize: vertical;
    /* vertical은 가로로 늘릴수없게 */

    border: none;
    border-radius: 5px;
    background-color: #ececec;

    padding: 20px

}

마지막 섹션(버튼)

DiaryEditor - return문

      <section className="control_box">
        {/* 강사님은 -1로하는데 나는 0으로 함, 새로고침되게 하려고 */}
        <Mybutton text={"취소하기"} onClick={() => navigate(0)} />
        <Mybutton text={"작성완료"} type={"positive"} onClick={handleSubmit} />
      </section>

DiaryEditor 앞쪽파트

  const navigate = useNavigate();
  //onCreate쓰려면 useContext 써야함
  const { onCreate } = useContext(DiaryDispatchContext);
  // 작성완료 버튼 누를시 넘어가는 페이지 만들기 -> onCreate함수 실행하게
  const handleSubmit = () => {
    if (content.length < 1) {
      contentRef.current.focus();
      return;
    }
    onCreate(date, content, emotion);
    navigate("/", { replace: true });
    //replace : true는 뒤로 못오게 막는 옵션
  };

css스타일링

.DiaryEditor .control_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 17px;
}