From 9e5fcfb2abde61e10fb22f45c63603e1e60510ff Mon Sep 17 00:00:00 2001
From: haerong22 <haerong22@naver.com>
Date: Wed, 13 Apr 2022 21:12:05 +0900
Subject: [PATCH] simple diary - validate input

---
 simplediary/src/DiaryEditor.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/simplediary/src/DiaryEditor.js b/simplediary/src/DiaryEditor.js
index d39fe878..0883c8b8 100644
--- a/simplediary/src/DiaryEditor.js
+++ b/simplediary/src/DiaryEditor.js
@@ -1,10 +1,13 @@
-import { useState } from "react";
+import React, { useRef, useState } from "react";
 
 const DiaryEditor = () => {
+  const authorInput = useRef();
+  const contentInput = useRef();
+
   const [state, setState] = useState({
     author: "",
     content: "",
-    emotion: 1,
+    emotion: 5,
   });
 
   const handleChangeState = (e) => {
@@ -15,7 +18,16 @@ const DiaryEditor = () => {
   };
 
   const handleSubmit = () => {
-    console.log(state);
+    if (state.author.length < 1) {
+      authorInput.current.focus();
+      return;
+    }
+
+    if (state.content.length < 5) {
+      contentInput.current.focus();
+      return;
+    }
+
     alert("저장 성공");
   };
 
@@ -24,6 +36,7 @@ const DiaryEditor = () => {
       <h2>오늘의 일기</h2>
       <div>
         <input
+          ref={authorInput}
           name="author"
           value={state.author}
           onChange={handleChangeState}
@@ -31,12 +44,14 @@ const DiaryEditor = () => {
       </div>
       <div>
         <textarea
+          ref={contentInput}
           name="content"
           value={state.content}
           onChange={handleChangeState}
         />
       </div>
       <div>
+        <span>오늘의 감정점수 : </span>
         <select
           name="emotion"
           value={state.emotion}