React diary with crud dev

src/App.js

@@ -1,5 +1,5 @@
 import "./App.css";
-import { useState } from "react";
+import React, { useState } from "react";
 import Form from "./components/Form";
 import List from "./components/List";
 
@@ -13,51 +13,55 @@ const initialDiaryData = localStorage.getItem("diaryData")
 
 function App() {
   const [diaryData, setDiaryData] = useState(initialDiaryData);
-  const [dateData, setDateData] = useState(initialDateData);
+  const [diaryText, setDiaryText] = useState("");
+  const [diaryDate, setDiaryDate] = useState("");
+
 
-  // 일기 추가가 안 되는데 문제가 뭔지 모르겠음. id 문제인가?
   // * Create 기능
   const handleSubmitDiary = (e) => {
-
     e.preventDefault();
-    console.log(e.dateValue)
-    console.log(e.diaryValue)
-
+
     // 새로운 일기 데이터, 날짜 데이터
     let newDiary = {
       id: Date.now(),
-      date: 
       diaryValue: diaryText,
+      diaryDate: diaryDate
     };
 
     // 기존 일기에 새로운 일기, 날짜 추가
-    setDiaryData((prev) => [...prev, newDiary]);
+    setDiaryData((prev) => [newDiary, ...prev]);
     localStorage.setItem("diaryData", JSON.stringify([newDiary, ...diaryData]));
 
     // 입력란에 있던 글씨 지워주기
     setDiaryText("");
+    setDiaryDate("");
   };
 
+  // 전체 삭제
+  const handleRemoveAll = () => {
+    setDiaryData([]);
+    localStorage.setItem("diaryData", JSON.stringify([]));
+  };
 
   // * html 부분
   return (
     <div>
       <div>
         <h1>한 줄 일기</h1>
+        <button onClick={handleRemoveAll}>Delete All</button>
       </div>
       <div>
         <Form
           handleSubmitDiary={handleSubmitDiary}
           diaryText={diaryText}
           setDiaryText={setDiaryText}
+          diaryDate={diaryDate}
+          setDiaryDate={setDiaryDate}
         />
         <List
-          // diaryValue={diaryValue}
-          // dateValue={dateValue}
+          diaryText={diaryText}
           diaryData={diaryData}
           setDiaryData={setDiaryData}
-          dateData={dateData}
-          setDateData={setDateData}
         />
       </div>
     </div>

src/components/Form.js

@@ -3,41 +3,38 @@ import React from "react";
 export default function Form({
   handleSubmitDiary,
   diaryText,
-  dateText,
+  diaryDate,
   setDiaryText,
-  setDateText,
+  setDiaryDate
 }) {
   const handleDiaryChange = (e) => {
     setDiaryText(e.target.value);
   };
-
   const handleDateChange = (e) => {
-    setDateText(e.target.value);
+    setDiaryDate(e.target.value);;
   };
 
+
   // * html 부분
   return (
-    <form 
-    className="dataInputField" 
-    onSubmit={handleSubmitDiary}>
+    <form className="dataInputField" onSubmit={handleSubmitDiary}>
       <input
         type="text"
-        name="dateInput"
-        className="dateDataInput"
-        placeholder="xxxx-xx-xx"
-        value={dateText}
+        name="diaryDateInput"
+        className="dairyDateInput"
+        placeholder="한 줄 일기를 작성하세요."
+        value={diaryDate}
         onChange={handleDateChange}
       />
       <input
         type="text"
-        name="diaryInput"
+        name="diaryValueInput"
         className="dairyDataInput"
         placeholder="한 줄 일기를 작성하세요."
         value={diaryText}
         onChange={handleDiaryChange}
       />
-      <input type="submit" value="입력" className="dataInputButton" 
-      />
+      <input type="submit" value="입력" className="dataInputButton" />
     </form>
   );
 }

src/components/List.js

@@ -1,114 +1,25 @@
-import React, { useState } from "react";
-
-const List = ({
-  id,
-  diaryValue,
-  dateValue,
-  diaryData,
-  setDiaryData,
-  dateData,
-  setDateData,
-}) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editedDateText, setEditedDateText] = useState(dateValue);
-  const [editedDiaryText, setEditedDiaryText] = useState(diaryValue);
-
-  // 업데이트 할 때 입력 받는 부분?
-  const handleDateEditChange = (e) => {
-    setEditedDateText(e.target.dateText);
-  };
-
-  const handleDiaryEditChange = (e) => {
-    setEditedDiaryText(e.target.diaryText);
-  };
-
-  // * Update 기능
-  const handleSubmit = (e) => {
-    e.preventDefault();
-
-    let newDiaryData = diaryData.map((data) => {
-      if (data.id === id) {
-        data.title = editedDiaryText;
-      }
-      return data;
-    });
-    setDiaryData(newDiaryData);
-    localStorage.setItem("diaryData", JSON.stringify(newDiaryData));
-
-    let newDateData = dateData.map((data) => {
-      if (data.id === id) {
-        data.title = editedDateText;
-      }
-      return data;
-    });
-    setDateData(newDateData);
-    localStorage.setItem("dateData", JSON.stringify(newDateData));
-
-    setIsEditing(false);
-  };
-
-  // * Delete 기능
-  const handleRemove = (id) => {
-    let newDiaryData = diaryData.filter((data) => data.id !== id);
-    setDiaryData(newDiaryData);
-    localStorage.setItem("diaryData", JSON.stringify(newDiaryData));
-
-    let newDateData = dateData.filter((data) => data.id !== id);
-    setDateData(newDateData);
-    localStorage.setItem("dateData", JSON.stringify(newDateData));
-  };
-
-  // * html 부분
-  if (isEditing) {
-    /* isEditing이 true 즉, 수정 중인 데이터 */
-    return (
-      <div>
-        <form onSubmit={handleSubmit}>
-          <input
-            className="editDateText"
-            value={editedDateText}
-            onChange={handleDateEditChange}
-          />
-          <input
-            className="editDiaryText"
-            value={editedDiaryText}
-            onChange={handleDiaryEditChange}
-            autoFocus /* 웹 페이지를 열었을 때 해당 요소에 자동으로 커서가 위치하여 사용자가 바로 입력을 시작할 수 있게 함 */
-          />
-        </form>
-
-        <div className="isEditingButtons">
-          <button onClick={() => setIsEditing(false)} type="button">
-            X
-          </button>
-          <button onClick={handleSubmit} type="submit">
-            Save
-          </button>
-        </div>
-      </div>
-    );
-  } else {
-    /* isEditing이 false 즉, 작성이 완료된 데이터 */
-    return (
-      <div>
-        <span className="editedDate">
-            {dateValue}
-        </span>
-        <span className="editedDiary">
-            {diaryValue}
-        </span>
-
-        <div className="isEditedButtons">
-          <button onClick={() => handleRemove(id)} className="removeButton">
-            X
-          </button>
-          <button onClick={() => setIsEditing(true)} className="editButton">
-            Edit
-          </button>
+import React from "react";
+import ListItem from "./ListItem";
+
+const List = ({ diaryData, setDiaryData }) => {
+  return (
+    <div className="listItems">
+      <div style={{ display: "flex" }}>
+        <div>
+          {diaryData.map((data) => (
+            <ListItem
+              key={data.key}
+              id={data.id}
+              diaryValue={data.diaryValue}
+              diaryDate={data.diaryDate}
+              diaryData={diaryData}
+              setDiaryData={setDiaryData}
+            />
+          ))}
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 };
 
 export default List;

src/components/ListItem.js

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+
+const ListItem = ({ id, diaryValue, diaryDate, diaryData, setDiaryData }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedDiaryValue, setEditedDiaryValue] = useState(diaryValue); // Edit 할 때 입력되어 있는 부분
+  const [editedDiaryDate, setEditedDiaryDate] = useState(diaryDate);
+
+
+  // 업데이트 할 때 입력 받는 부분?
+  const handleDiaryEditChange = (e) => {
+    const { name, value } = e.target;
+    if (name === "diaryValue") {
+      setEditedDiaryValue(e.target.value);
+    } else if (name === "diaryDate") {
+      setEditedDiaryDate(e.target.value);
+    }
+  };
+
+  // * Update 기능 (save 클릭했을 때 호출)
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    let newDiaryData = diaryData.map((data) => {
+      if (data.id === id) {
+        data.diaryValue = editedDiaryValue;
+        data.diaryDate = editedDiaryDate;
+      }
+      return data;
+    });
+    setDiaryData(newDiaryData);
+    localStorage.setItem("diaryData", JSON.stringify(newDiaryData));
+
+    setIsEditing(false);
+  };
+
+  // * Delete 기능
+  const handleRemove = (id) => {
+    let newDiaryData = diaryData.filter((data) => data.id !== id);
+    setDiaryData(newDiaryData);
+    localStorage.setItem("diaryData", JSON.stringify(newDiaryData));
+  };
+
+  // * html 부분
+  if (isEditing) {
+    /* isEditing이 true 즉, 수정 중인 데이터 */
+    return (
+      <div className="stateOfEditing">
+        <form onSubmit={handleSubmit}>
+          <input
+            className="editDiaryDate"
+            name="diaryDate"
+            value={editedDiaryDate}
+            onChange={handleDiaryEditChange}
+          />
+          <input
+            className="editDiaryValue"
+            name="diaryValue"
+            value={editedDiaryValue} /* 저장된 텍스트 값 부분 */
+            onChange={handleDiaryEditChange}
+            autoFocus /* 웹 페이지를 열었을 때 해당 요소에 자동으로 커서가 위치하여 사용자가 바로 입력을 시작할 수 있게 함 */
+          />
+        </form>
+
+        <div className="isEditingButtons">
+          <button onClick={() => setIsEditing(false)} type="button">
+            X
+          </button>
+          <button onClick={handleSubmit} type="submit">
+            Save
+          </button>
+        </div>
+      </div>
+    );
+  } else {
+    /* isEditing이 false 즉, 작성이 완료된 데이터 */
+    return (
+      <div style={{ display: "flex" }} key={id}>
+        {" "}
+        {/* 각 리스트들의 고유 key 가 필요함 */}
+        <span className="editDate">
+          {diaryDate}
+        </span>
+        <span className="editDiary">
+          {diaryValue}
+        </span>
+        <div className="isEditedButtons">
+          <button onClick={() => handleRemove(id)} className="removeButton">
+            X
+          </button>
+          <button onClick={() => setIsEditing(true)} className="editButton">
+            Edit
+          </button>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default ListItem;