emotion diary : create diary page

emotiondiary/src/App.css

@@ -156,19 +156,19 @@ header button {
 }
 
 .DiaryItem .emotion_img_wrapper_1 {
-  background-color: #fd565f;
+  background-color: #64c964;
 }
 .DiaryItem .emotion_img_wrapper_2 {
-  background-color: #fd8446;
+  background-color: #9dd772;
 }
 .DiaryItem .emotion_img_wrapper_3 {
   background-color: #fdce17;
 }
 .DiaryItem .emotion_img_wrapper_4 {
-  background-color: #9dd772;
+  background-color: #fd8446;
 }
 .DiaryItem .emotion_img_wrapper_5 {
-  background-color: #64c964;
+  background-color: #fd565f;
 }
 
 .DiaryItem .emotion_img_wrapper img {
@@ -194,3 +194,109 @@ header button {
 .DiaryItem .btn_wrapper {
   min-width: 70px;
 }
+
+/* DiaryEditor */
+
+.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-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
+
+  cursor: pointer;
+  font-family: "Nanum Pen Script", cursive;
+  font-size: 20px;
+}
+
+.DiaryEditor .emotion_list_wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, auto);
+  gap: 2%;
+}
+
+.DiaryEditor textarea {
+  font-family: "Nanum Pen Script", cursive;
+  font-size: 20px;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 200px;
+  resize: vertical;
+
+  border: none;
+  border-radius: 5px;
+  background-color: #ececec;
+
+  padding: 20px;
+}
+
+.DiaryEditor .control_box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* EmotionItem */
+
+.EmotionItem {
+  cursor: pointer;
+
+  border-radius: 5px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.EmotionItem img {
+  width: 50%;
+  margin-bottom: 10px;
+}
+
+.EmotionItem span {
+  font-size: 18px;
+}
+
+.EmotionItem_off {
+  background-color: #ececec;
+}
+
+.EmotionItem_on_1 {
+  background-color: #64c964;
+  color: white;
+}
+
+.EmotionItem_on_2 {
+  background-color: #9dd772;
+  color: white;
+}
+.EmotionItem_on_3 {
+  background-color: #fdce17;
+  color: white;
+}
+.EmotionItem_on_4 {
+  background-color: #fd8446;
+  color: white;
+}
+.EmotionItem_on_5 {
+  background-color: #fd565f;
+  color: white;
+}

emotiondiary/src/App.js

@@ -39,11 +39,11 @@ export const DiaryStateContext = React.createContext();
 export const DiaryDispatchContext = React.createContext();
 
 const dummyData = [
-  { id: 1, emotion: 1, content: "오늘의일기 1번", date: 1650270903935 },
-  { id: 2, emotion: 2, content: "오늘의일기 2번", date: 1650270903936 },
+  { id: 1, emotion: 5, content: "오늘의일기 1번", date: 1650270903935 },
+  { id: 2, emotion: 4, content: "오늘의일기 2번", date: 1650270903936 },
   { id: 3, emotion: 3, content: "오늘의일기 3번", date: 1650270903937 },
-  { id: 4, emotion: 4, content: "오늘의일기 4번", date: 1650270903938 },
-  { id: 5, emotion: 5, content: "오늘의일기 5번", date: 1650270903939 },
+  { id: 4, emotion: 2, content: "오늘의일기 4번", date: 1650270903938 },
+  { id: 5, emotion: 1, content: "오늘의일기 5번", date: 1650270903939 },
 ];
 
 function App() {

emotiondiary/src/components/DiaryEditor.js

@@ -0,0 +1,142 @@
+import { useNavigate } from "react-router-dom";
+import { useContext, useRef, useState } from "react";
+
+import MyHeader from "./MyHeader";
+import MyButton from "./MyButton";
+import EmotionItem from "./EmotionItem";
+import { DiaryDispatchContext } from "../App";
+
+const env = process.env;
+env.PUBLIC_URL = env.PUBLIC_URL || "";
+
+const emotionList = [
+  {
+    emotion_id: 1,
+    emotion_img: process.env.PUBLIC_URL + `/assets/emotion1.png`,
+    emotion_descript: "행복함",
+  },
+  {
+    emotion_id: 2,
+    emotion_img: process.env.PUBLIC_URL + `/assets/emotion2.png`,
+    emotion_descript: "좋음",
+  },
+  {
+    emotion_id: 3,
+    emotion_img: process.env.PUBLIC_URL + `/assets/emotion3.png`,
+    emotion_descript: "그럭저럭",
+  },
+  {
+    emotion_id: 4,
+    emotion_img: process.env.PUBLIC_URL + `/assets/emotion4.png`,
+    emotion_descript: "나쁨",
+  },
+  {
+    emotion_id: 5,
+    emotion_img: process.env.PUBLIC_URL + `/assets/emotion5.png`,
+    emotion_descript: "끔찍함",
+  },
+];
+
+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) {
+    day = `0${day}`;
+  }
+
+  return `${year}-${month}-${day}`;
+};
+
+const DiaryEditor = () => {
+  const [content, setContent] = useState("");
+  const [emotion, setEmotion] = useState(3);
+  const [date, setDate] = useState(getStringDate(new Date()));
+
+  const contentRef = useRef();
+
+  const { onCreate } = useContext(DiaryDispatchContext);
+
+  const navigate = useNavigate();
+
+  const handleClickEmote = (emotion) => {
+    setEmotion(emotion);
+  };
+
+  const handleSubmit = () => {
+    if (content.length < 1) {
+      contentRef.current.focus();
+      return;
+    }
+
+    onCreate(date, content, emotion);
+    navigate("/", { replace: true });
+  };
+
+  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">
+            {emotionList.map((it) => (
+              <EmotionItem
+                key={it.emotion_id}
+                {...it}
+                onClick={handleClickEmote}
+                isSelected={it.emotion_id === emotion}
+              />
+            ))}
+          </div>
+        </section>
+        <section>
+          <h4>오늘의 일기</h4>
+          <div className="input_box text_wrapper">
+            <textarea
+              ref={contentRef}
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="오늘은 어땠나요"
+            />
+          </div>
+        </section>
+        <section>
+          <div className="control_box">
+            <MyButton text={"취소하기"} onClick={() => navigate(-1)} />
+            <MyButton
+              text={"작성완료"}
+              type={"positive"}
+              onClick={handleSubmit}
+            />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default DiaryEditor;

emotiondiary/src/components/EmotionItem.js

@@ -0,0 +1,21 @@
+const EmotionItem = ({
+  emotion_id,
+  emotion_img,
+  emotion_descript,
+  onClick,
+  isSelected,
+}) => {
+  return (
+    <div
+      className={`EmotionItem ${
+        isSelected ? `EmotionItem_on_${emotion_id}` : `EmotionItem_off`
+      }`}
+      onClick={() => onClick(emotion_id)}
+    >
+      <img src={emotion_img} />
+      <span>{emotion_descript}</span>
+    </div>
+  );
+};
+
+export default EmotionItem;

emotiondiary/src/pages/New.js

@@ -1,8 +1,9 @@
+import DiaryEditor from "../components/DiaryEditor";
+
 const New = () => {
   return (
     <div>
-      <h1>New</h1>
-      <p>이곳은 일기 작성 페이지 입니다.</p>
+      <DiaryEditor />
     </div>
   );
 };